/* Contenitore generale */
.rfm-container {
    width: 100%;
    max-width: 900px; 
    margin: 0 auto;
}

/* Stile per il singolo piatto */
.rfm-item {
    display: flex; /* Layout a due colonne */
    gap: 20px; 
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #ccc;
    /* align-items: stretch; (default) */
}

/* Colonna Immagine */
.rfm-image-col {
    flex: 0 0 200px; /* Larghezza fissa per l'immagine */
    max-width: 200px;
    min-height: 150px; 
}

.rfm-image-col img {
    width: 100%;
    height: 100%; 
    display: block;
    border-radius: 4px;
    object-fit: cover; 
}

/* Colonna Dettagli: Impostata come contenitore Flex per allineamento in colonna e verso il basso */
.rfm-details-col {
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; /* Pila gli elementi */
}

/* Wrapper per Nome/Descrizioni: Prende tutto lo spazio disponibile per spingere la data in fondo */
.rfm-content-wrapper {
    flex-grow: 1; 
}


/* Nome del piatto e Prezzo affiancati */
.rfm-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
}

.rfm-header h3 {
    margin: 0;
    font-size: 1.4em;
    color: white; 
}

.rfm-price {
    font-size: 1.3em;
    font-weight: bold;
    color: white; 
}

/* Descrizioni */
.rfm-descriptions {
    margin-top: 10px;
}

.rfm-desc-it, .rfm-desc-en {
    margin: 5px 0;
    font-size: 0.95em;
    line-height: 1.4;
}

.rfm-desc-en {
    color: #666; 
}

/* Stile per la data di fine: Allineamento in fondo e a destra */
.rfm-date-end {
    margin-top: auto; 
    font-size: 0.9em;
    font-style: italic;
    color: #999; 
    text-align: right; 
}

/* --- Media Query per schermi piccoli (responsive) --- */
@media (max-width: 600px) {
    .rfm-item {
        flex-direction: column; /* Impila gli elementi in colonna */
        gap: 10px;
    }
    
    /* MODIFICHE PER INVERSIONE ORDINE */
    
    /* 1. Colonna Dettagli (Contiene il Nome del Piatto) */
    .rfm-details-col {
        order: 1; /* <-- Nuovo Ordine: Appare prima */
        /* Rimuovi l'allineamento inferiore e l'espansione, non necessari su mobile */
        flex-grow: 0;
        height: auto; 
    }
    
    /* 2. Colonna Immagine */
    .rfm-image-col {
        order: 2; /* <-- Nuovo Ordine: Appare dopo */
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
        min-height: auto; /* Annulla min-height */
    }
    
    .rfm-image-col img {
        max-width: 250px; 
        margin: 0 auto;
        height: auto; 
    }
    
    /* Rimuovi il padding/margine superiore su mobile per avvicinare il titolo */
    .rfm-content-wrapper {
        flex-grow: 0;
    }
    
    /* Su mobile riallinea la data a sinistra */
    .rfm-date-end {
        text-align: left;
        margin-top: 10px; /* Aggiungi un po' di spazio dalla descrizione */
    }
}