/* ═══════════════════════════════════════════════════════════════
   menu-grid.css — Griglia prodotti del menu
   Unica fonte di verità per .menu-grid e .menu-item-row.

   MODIFICHE LEGGIBILITÀ:
   - .menu-item-name: 11px → 13px  (+18%)
     11px era il limite inferiore tollerabile per testo UI,
     13px garantisce lettura confortevole su qualsiasi display.
   - .menu-item-text small: color #7a8499 → #5a6478
     La descrizione deve essere distinguibile anche in ambienti
     con poca luce o display di qualità media.
   - .jp-price: 12.5px → 13.5px — il prezzo è informazione primaria
   - .menu-cat-tabs .nav-link: 0.68rem → 0.80rem (desktop)
     I tab erano i bottoni di navigazione più piccoli dell'app.
═══════════════════════════════════════════════════════════════ */

/* ── GRIGLIA A DUE COLONNE ────────────────────────────────── */
.menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
    margin: 0 4px;
    background: transparent;
}

/* ── RIGA PRODOTTO ────────────────────────────────────────── */
.menu-item-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 8px;
    border-bottom: 1px solid #e8ecf2;
    min-width: 0;
    position: relative;
    z-index: 0;
}

    .menu-item-row:nth-child(odd)  { border-right: 0px solid #dde3ed; }

    /* niente bordo inferiore sull'ultima riga */
    .menu-item-row:last-child,
    .menu-item-row:nth-last-child(2):nth-child(odd) {
        border-bottom: none;
    }

/* ── TESTO ────────────────────────────────────────────────── */
.menu-item-text {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

.menu-item-name-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}

/*
   MODIFICA: 11px → 13px
   11px era al limite della leggibilità confortevole.
   Con base html=15px, 11px px-fissi ignorano la base rem
   e rimangono comunque piccoli. 13px è più leggibile
   mantenendo la densità della griglia 2 colonne.
*/
.menu-item-name {
    font-weight: 700;
    color: #1a1a2e;
    font-size: 13px;             /* era: 11px */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* MODIFICA: #7a8499 → #5a6478 (contrasto ~5.8:1 su sfondo chiaro, era ~4.5:1) */
.menu-item-text small {
    color: #5a6478;              /* era: #7a8499 */
    font-size: 11px;
    display: block;
    white-space: normal;
    line-height: 1.3;
    margin-top: 1px;
}

/* ── PREZZO ───────────────────────────────────────────────── */
/* MODIFICA: 12.5px → 13.5px — il prezzo è l'informazione più consultata */
.jp-price {
    color: #c0392b;
    font-weight: 700;
    font-size: 13.5px;           /* era: 12.5px */
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 480px) {
    .menu-grid {
        grid-template-columns: 1fr;
    }

    .menu-item-row:nth-child(odd) {
        border-right: none;
    }
}

/* ── SLOT ITEM ────────────────────────────────────────────── */
.slot-item {
    display: block;
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: 0.2s;
    margin-bottom: 8px;
}

    .slot-item input { display: none; }

    .slot-item:hover {
        border-color: #0d6efd;
        background: #f8f9fa;
    }

    .slot-item input:checked + .slot-content {
        background: #0d6efd;
        color: white;
        border-radius: 8px;
        padding: 5px;
    }

.slot-time          { font-weight: bold; }

.slot-disponibilita {
    font-size: 0.85rem;
    opacity: 0.8;
}

.hidden-temporary {
    display: none !important;
}