/* ============================================================
   ORDER.CSS — Menu & Ordina Web: design moderno "Luxury Gold"
   Caricato SOLO su /ordina (order.html) e /menu (interactive_menu)
   ============================================================ */

/* ---------- Base pagina: ambience dorata ---------- */
body.body-dark {
    background:
        radial-gradient(900px 430px at 50% -80px, rgba(224,170,62,0.10), transparent 60%),
        radial-gradient(700px 320px at 112% 14%, rgba(224,170,62,0.05), transparent 55%),
        #0a0a0a !important;
}

/* ---------- Tema scuro: colori del testo ----------
   Prima queste regole esistevano solo inline in templates/order.html (/ordina).
   /menu (interactive_menu.html) ha il body.body-dark ma non le aveva: l'unico
   colore applicato era la regola globale di mobile.css (div,p,h3,... !important
   color:#111827) che rendeva il testo NERO su fondo NERO (menu illeggibile).
   Le regole di classe dei componenti (.menu-item-name, .menu-item-price, ...)
   hanno specificita' 0,1,0 e vincono sui selettori di taglio, quindi gold/verdi
   e testi specifici restano corretti. */
body.body-dark { color: #ffffff !important; }
body.body-dark h1, body.body-dark h2, body.body-dark h3,
body.body-dark h4, body.body-dark h5, body.body-dark h6 { color: #ffffff !important; }
body.body-dark p, body.body-dark span, body.body-dark small,
body.body-dark strong, body.body-dark b, body.body-dark li,
body.body-dark label, body.body-dark div, body.body-dark i { color: #ffffff; }
/* !important: il selettore "a:not(.btn):not(.badge):not(.alert-link)" del
   CONTRAST NORMALIZE ha specificita' 0,1,3 e batte questa regola (0,1,1). */
/* I pulsanti restano con i colori propri: forzare l'oro anche sopra i
   bottoni rendeva il testo del bottone "Prenota" oro su verde (contrasto
   2.39) e il link "Scopri di piu" del banner cookie oro su rosso
   (contrasto 2.80), entrambi illeggibili. Anche .cs-btn e' escluso:
   il banner si imposta da solo il bianco su rosso. */
body.body-dark a:not(.btn):not(.badge):not(.alert-link):not(.cs-btn),
body.body-dark a:not(.btn):not(.badge):not(.alert-link):not(.cs-btn):hover { color: #d4af37 !important; }
.category-tab-link.active,
.category-tab-link.active:hover { color: #0a0a0a !important; }
/* La regola sopra non basta: "body.body-dark a:not(...)" ha specificita'
   maggiore e, essendo !important, vinceva. Qui si sale con lo stesso
   criterio, cosi' la linguetta attiva vince davvero e resta leggibile
   sul gradiente oro (prima era oro su oro, contrasto 1.16). */
body.body-dark a.category-tab-link.active:not(.btn),
body.body-dark a.category-tab-link.active:not(.btn):hover { color: #0a0a0a !important; }
/* Anche la regola qui sopra non vinceva: la regola generica dei link in
   body-dark ("body.body-dark a:not(.btn):not(.badge):not(.alert-link)
   :not(.cs-btn)", cinque classi + !important) e' piu' specifica e imponeva
   l'oro. Risultato: linguetta attiva oro su gradiente oro, illeggibile
   (contrasto ~1.2). Qui ci si aggancia all'id #category-tabs: l'id ha la
   precedenza assoluta sulle classi, quindi il testo resta scuro. */
#category-tabs .category-tab-link.active,
#category-tabs .category-tab-link.active:hover,
#category-tabs .category-tab-link.active:focus { color: #0a0a0a !important; }

/* Su smartphone mobile.css dipingeva di bianco il contenitore interno
   #category-tabs (background: var(--bg-panel, #fff)), facendo comparire
   una striscia chiara sotto le linguette. Qui si annulla: la barra resta
   scura come su desktop. */
#category-tabs { background: transparent !important; }

.order-page-container { max-width: 1240px; margin: 0 auto; }

/* ---------- Header Hero ---------- */
.order-header {
    position: relative;
    padding: 4.2rem 0 3rem;
    text-align: center;
    overflow: hidden;
}
.order-header::before {
    content: '✦';
    display: block;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--clr-gold-main);
    opacity: 0.85;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 18px rgba(224,170,62,0.55);
}
.order-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    border-radius: 3px;
    background: var(--clr-gold-gradient);
    box-shadow: 0 0 14px rgba(224,170,62,0.5);
}
.order-header-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    line-height: 1.15;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.6rem;
    color: #fff;
    background: linear-gradient(100deg, #f9f295 0%, #e0aa3e 45%, #b88a44 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 24px rgba(224,170,62,0.25));
}
.order-header-subtitle {
    color: #a8a8a8;
    font-weight: 300;
    font-size: 1.05rem;
    max-width: 620px;
    margin: 0.35rem auto 0;
}

/* ---------- Barra categorie (sticky, pills vetro) ---------- */
.category-tabs-container {
    background: rgba(10,10,10,0.82) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(224,170,62,0.16);
    box-shadow: 0 12px 34px rgba(0,0,0,0.55);
    padding: 12px 0;
}
#category-tabs {
    gap: 10px;
    padding: 4px 8px;
    scrollbar-width: none;
}
#category-tabs::-webkit-scrollbar { display: none; }

.category-tab-link {
    padding: 10px 18px;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 10px;
    background: #161616;
    border: 1.5px solid #c9a24b;
    color: #e8d9b0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    transition: all 0.22s ease;
    white-space: nowrap;
}
.category-tab-link:hover {
    color: #fff;
    border-color: #e8c86a;
    background: #222;
    transform: translateY(-1px);
}
.category-tab-link.active {
    background: linear-gradient(135deg, #b88a44, #e0aa3e 55%, #f9f295);
    color: #0a0a0a;
    font-weight: 800;
    text-transform: uppercase;
    border-color: #ffe9a8;
    box-shadow: 0 4px 18px rgba(224,170,62,0.45), inset 0 1px 0 rgba(255,255,255,0.5);
    transform: translateY(-1px) scale(1.03);
}

/* ---------- Sezioni ---------- */
.menu-category-section {
    margin-bottom: 3.6rem;
    scroll-margin-top: 170px;
}
.category-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    color: #fff;
    padding-left: 14px;
    border-left: 3px solid var(--clr-gold-main);
    margin-bottom: 1.4rem;
    letter-spacing: 0.03em;
}

/* ---------- Griglia prodotti ---------- */
.menu-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 14px;
    padding: 4px 0;
}

/* ---------- Card compatta orizzontale (foto a sinistra) ---------- */
.menu-item-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 14px;
    padding: 12px;
    align-content: center;
    min-height: 118px;
    background: linear-gradient(160deg, #171717, #101010);
    border: 1px solid #272727;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.menu-item-card:hover {
    border-color: rgba(224,170,62,0.5);
    box-shadow: 0 14px 34px rgba(0,0,0,0.5);
}

.menu-item-image {
    width: 96px;
    height: 96px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    align-self: center;
    border: 1px solid rgba(255,255,255,0.06);
    background: #1a1a1a;
}
.menu-item-image::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(224,170,62,0.12);
    pointer-events: none;
}
.menu-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-item-details {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: start;
    align-self: center;
}
.menu-item-name-wrap { min-width: 0; }
.menu-item-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    line-height: 1.2;
    color: #fff;
    font-weight: 700;
    margin: 0 0 3px;
    letter-spacing: 0.01em;
}
.menu-item-ingredients {
    font-size: 0.8rem;
    color: #8d8d8d;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.menu-item-side {
    text-align: right;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.menu-item-price {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--clr-gold-main);
    white-space: nowrap;
}
.menu-item-allergens {
    margin-top: 4px;
    font-size: 0.66rem;
    line-height: 1.35;
    color: #8f8f8f;
    letter-spacing: 0.02em;
    max-width: 160px;
    text-align: right;
    font-weight: 500;
}
.menu-item-allergens i {
    color: var(--clr-gold-main);
    margin-right: 4px;
}

.menu-item-action {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(224,170,62,0.18);
}
.add-to-cart-btn {
    padding: 8px 16px !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.04em !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}
.add-to-cart-btn:hover { box-shadow: 0 6px 18px rgba(224,170,62,0.4) !important; }
.add-to-cart-btn i,
.btn-cart-adjust i { pointer-events: none; }
.neapolitan-nudge {
    font-style: italic;
    font-size: 0.8rem;
    color: #777;
    margin-right: 8px;
}

/* ---------- Carrello: riga con controlli SOTTO il prodotto ---------- */
.cart-modal-item {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.cart-item-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.cart-item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.cart-item-name { font-weight: 700; color: #fff; font-size: 0.95rem; }
.cart-item-price {
    color: var(--clr-gold-main);
    font-weight: 800;
    font-size: 1rem;
    white-space: nowrap;
}
.cart-item-mods { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.cart-item-mods .cart-mod {
    font-size: 0.75rem;
    color: #c9a86a;
    background: rgba(224,170,62,0.10);
    border-radius: 999px;
    padding: 2px 9px;
}
.cart-item-mods .cart-mod.removal {
    color: #9a9a9a;
    background: rgba(255,255,255,0.05);
    text-decoration: line-through;
}
.cart-item-note { font-size: 0.78rem; margin-top: 2px; }

/* Controlli quantità: riga dedicata sotto il prodotto */
.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px dashed rgba(224,170,62,0.18);
    padding-top: 10px;
}
.btn-cart-adjust {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(160deg, #232323, #181818) !important;
    border: 1px solid rgba(224,170,62,0.5) !important;
    color: var(--clr-gold-main) !important;
    font-size: 1.05rem !important;
    font-weight: 800;
    box-shadow: 0 3px 10px rgba(0,0,0,0.35) !important;
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease, border-color 0.16s ease !important;
    user-select: none;
    -webkit-user-select: none;
}
.btn-cart-adjust:hover {
    background: rgba(224,170,62,0.16) !important;
    border-color: var(--clr-gold-main) !important;
    color: #fff !important;
}
.btn-cart-adjust:active {
    transform: scale(0.88);
    background: linear-gradient(135deg, #f9f295, #e0aa3e) !important;
    color: #0a0a0a !important;
    border-color: transparent !important;
}
.cart-item-quantity {
    font-weight: 900;
    font-size: 1.15rem;
    min-width: 30px;
    text-align: center;
    color: #fff;
}

/* ---------- Footer carrello fluttuante ---------- */
.cart-summary-footer {
    border: 1px solid rgba(224,170,62,0.4) !important;
    background: rgba(12,12,12,0.92) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 10px 14px 10px 22px !important;
    border-radius: 999px !important;
    box-shadow: 0 14px 44px rgba(0,0,0,0.7), 0 0 0 1px rgba(224,170,62,0.12),
                0 0 34px rgba(224,170,62,0.12) !important;
}
#cart-item-count { color: #c9a86a; font-weight: 700; letter-spacing: 1.2px !important; }
#cart-total-price { font-size: 1.15rem; }
.btn-checkout {
    padding: 13px 28px !important;
    white-space: nowrap;
}
.btn-checkout:hover {
    background: linear-gradient(135deg, #f9f295, #e0aa3e) !important;
    color: #000 !important;
    transform: translateY(-2px) scale(1.02);
}

/* ---------- Skeleton (match nuova card compatta) ---------- */
.skeleton-menu .skeleton-item {
    height: 118px;
    border-radius: 18px;
    background: linear-gradient(90deg, #151515 25%, #202020 50%, #151515 75%) !important;
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border: 1px solid #262626 !important;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Rifiniture modali ---------- */
#customizeModal .customize-item { border-radius: 12px; }
.customize-section-title {
    color: #fff;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
    .menu-item-card,
    .menu-item-image img { animation: none !important; transition: none !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    .menu-items-grid { grid-template-columns: 1fr; gap: 10px; }

    .menu-item-card {
        grid-template-columns: 80px minmax(0, 1fr);
        column-gap: 11px;
        padding: 10px;
        min-height: 108px;
        border-radius: 16px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    }
    .menu-item-image { width: 80px; height: 80px; border-radius: 12px; }
    .menu-item-name { font-size: 0.97rem; }
    .menu-item-ingredients { font-size: 0.76rem; }
    .menu-item-price { font-size: 1rem; }
    .menu-item-allergens { max-width: 120px; font-size: 0.63rem; }
    .add-to-cart-btn {
        padding: 7px 13px !important;
        font-size: 0.7rem !important;
        letter-spacing: 0.02em !important;
    }

    .order-header { padding: 2.5rem 0 2.2rem; }
    .order-header-title { font-size: clamp(1.55rem, 7vw, 2.2rem); }
    .order-header-subtitle { font-size: 0.95rem; }

    .category-tabs-container {
        padding: 10px 0;
        background: rgba(10,10,10,0.97) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 6px 16px rgba(0,0,0,0.45);
    }
    .category-tab-link { padding: 10px 20px; font-size: 0.74rem; }

    .cart-modal-item { gap: 8px; }
    .btn-cart-adjust { width: 40px; height: 40px; }

    .cart-summary-footer {
        bottom: 110px !important;
        background: rgba(12,12,12,0.98) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .btn-checkout { padding: 11px 22px !important; }
}

/* Touch: niente hover/transform che bloccano lo scroll su smartphone */
@media (hover: none), (max-width: 900px) {
    .menu-item-card,
    .menu-item-card:hover { transform: none; }
    .menu-item-image img,
    .menu-item-card:hover .menu-item-image img { transform: none; }
    .category-tab-link,
    .category-tab-link:hover { transform: none; }
    .btn-cart-adjust:active { transform: scale(0.88); }
}

@media (max-width: 420px) {
    .menu-item-card { grid-template-columns: 72px minmax(0, 1fr); column-gap: 10px; padding: 9px; }
    .menu-item-image { width: 72px; height: 72px; }
    .menu-item-name { font-size: 0.92rem; }
    .menu-item-ingredients { -webkit-line-clamp: 2; font-size: 0.73rem; }
    .menu-item-allergens { max-width: 104px; }
}

/* =========================================
   EXTRA MOBILE — ordine su smartphone
   Solo ritocchi SICURI: target tattili piu' grandi, colori garantiti,
   modali dell'ordine non a tutto schermo. NON si tocca il carrello
   fluttuante (e' una pillola position:fixed) ne' il layout delle
   categorie/header, gia' gestiti piu' sopra.
   ========================================= */
@media (max-width: 767.98px) {
    /* Bottoni quantità carrello: target tattile grande */
    .btn-cart-adjust {
        width: 46px !important;
        height: 46px !important;
        font-size: 1.15rem !important;
    }
    .cart-item-quantity {
        min-width: 36px;
        font-size: 1.15rem;
    }

    /* Bottoni dei modali dell'ordine sempre raggiungibili col pollice */
    #cartModal .modal-footer .btn,
    #customizeModal .modal-footer .btn {
        min-height: 48px;
        padding: 12px 16px !important;
        font-size: 1rem !important;
    }

    /* Testo ingredienti e prezzo: contrasto garantito su iPhone/Android */
    .menu-item-ingredients {
        color: #b0b0b0 !important;
    }
    .menu-item-price {
        color: var(--clr-gold-main) !important;
    }
    .menu-item-name {
        color: #fff !important;
    }
}

/* Dispositivi molto stretti (iPhone SE, piccoli Android) */
@media (max-width: 375px) {
    .menu-item-card {
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: 8px;
        padding: 8px;
        min-height: 96px;
    }
    .menu-item-image { width: 64px; height: 64px; border-radius: 10px; }
    .add-to-cart-btn {
        padding: 6px 10px !important;
        font-size: 0.65rem !important;
    }
}

/* ============================================================
   TENDINA LINGUA (menu / ordina)
   Il <select> e' scuro con testo bianco; le <option> native pero'
   vengono disegnate su fondo bianco dal sistema e, ereditando il
   testo bianco, restavano BIANCHE su BIANCO (tendina illeggibile).
   Qui si forza testo scuro su fondo bianco per tutte le voci. */
#menuLangSelect option,
#orderLangSelect option {
    color: #111111 !important;
    background-color: #ffffff !important;
}