/* =====================================================================
   restyle-2026.css — layer ADDITIVO e disattivabile per il menù pubblico.
   Tocca solo elementi specifici (non la struttura/layout) e usa SEMPRE la
   variabile colore del locale (--colorePrimario). Per disattivarlo: commentare
   la riga <link ... restyle-2026.css> in index.php.
   ===================================================================== */

/* --- Card piatto: tasto "+" tondo e "premibile" ---
   NB: .add-to-wishlist è usata anche dal pulsante "Conferma dimensione" del
   modale, quindi qui restringiamo SOLO al + dentro la card (.containerBottone). */
.containerBottone > .add-to-wishlist {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--colorePrimario) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px -6px rgba(20, 20, 40, .35), inset 0 -3px 0 rgba(0, 0, 0, .18) !important;
  transition: transform .12s ease, filter .12s ease;
}
.containerBottone > .add-to-wishlist i {
  font-size: 22px !important;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.containerBottone > .add-to-wishlist:hover { filter: brightness(1.07); }
.containerBottone > .add-to-wishlist:active { transform: scale(.88); }

/* --- Prezzi varianti: un solo stile coerente (niente verde/arancio/rosso a caso) --- */
.wrapPrezzi .coloreSingola,
.wrapPrezzi .coloreDoppia,
.wrapPrezzi .coloreFamiglia {
  color: #1f2430 !important;
  font-weight: 800 !important;
}
.wrapPrezzi .tipologia {
  color: #94a3b8 !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* =====================================================================
   2/4 — Modale "Scegli la dimensione" + Carrello
   ===================================================================== */

/* Opzioni: da griglia 2 colonne sbilenca a lista pulita a tutta larghezza */
#selezione-variante-content .form-check {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100% !important;
  margin-bottom: 10px !important;
  padding: 15px !important;
  border-radius: 14px !important;
}
#selezione-variante-content .form-check .form-check-input {
  margin: 0 !important;
  flex: none;
}
#selezione-variante-content .form-check .form-check-label { font-weight: 600; }
/* Stato selezionato evidente (colore del locale) */
#selezione-variante-content .form-check:has(.form-check-input:checked) {
  border-color: var(--colorePrimario) !important;
  background: color-mix(in srgb, var(--colorePrimario) 8%, #fff);
}

/* Carrello: "Applica" coupon a colore del locale (non più blu Bootstrap) */
#apply-coupon {
  background: var(--colorePrimario) !important;
  border-color: var(--colorePrimario) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 700;
  box-shadow: 0 6px 14px -6px rgba(20, 20, 40, .3);
}
/* Campo "Quante persone" un filo più pulito */
#num-persone {
  width: 64px !important;
  text-align: center;
  border-radius: 10px !important;
  font-weight: 700;
}

/* =====================================================================
   3/4 — Navigazione categorie: via il banner datato, "scorri" comunicato
   con la sfumatura sul bordo (c'è dell'altro) + la categoria che sbuca.
   ===================================================================== */
.scorriLaterale { display: none !important; }
.wrapCategorie {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  padding-right: 16px;
  scroll-behavior: smooth;
}
/* Il nastro categorie scorre in orizzontale DA SOLO: swipe sulle icone =
   scroll dello slider, non cambio pagina/categoria (gestito anche in JS,
   shouldHandleSwipe). touch-action pan-x evita che il gesto orizzontale
   venga interpretato come swipe di pagina. */
.wrapCategorie .nav {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
}
.wrapCategorie .nav::-webkit-scrollbar { display: none; }

/* Dentro i modal: SOLO scroll verticale, mai orizzontale. pan-y consente lo
   scroll su/giù e ignora le gesture laterali. Se un elemento interno avesse
   bisogno di scroll orizzontale, potrà riabilitarlo con .consenti-scroll-x. */
.modal .modal-content,
.modal .modal-body,
#contenutoDettaglio,
#selezione-variante-content {
  touch-action: pan-y;
  overflow-x: hidden;
}
.modal .consenti-scroll-x { touch-action: pan-x; overflow-x: auto; }
/* Comparsa morbida delle card in scroll (la classe .reveal-up viene aggiunta via JS) */
.reveal-up { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.reveal-up.in { opacity: 1; transform: none; }

/* =====================================================================
   4/4 — Selezione menù: foto leggibile (scrim scuro, vedi inline .overlayBrand)
   + titolo e pulsanti più rifiniti.
   ===================================================================== */
.overlayBrand h1 {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.bloccoCategoria {
  max-width: 88vw;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45);
  transition: transform .12s ease, box-shadow .12s ease;
}
.bloccoCategoria:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .55); }
.overlayBrand a:active .bloccoCategoria { transform: translateY(1px); }

/* =====================================================================
   5 — Checkout delivery (#modalOrdineDelivery): campi puliti + CTA verdi,
   coerente col resto. Scopato al modale per non toccare altri form.
   ===================================================================== */
#modalOrdineDelivery .form-control {
  border: 2px solid #e6e6ee !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  background: #fff !important;
}
#modalOrdineDelivery .form-control:focus {
  border-color: var(--colorePrimario) !important;
  box-shadow: none !important;
}
/* CTA principali in verde (come gli altri pulsanti pubblici) */
#modalOrdineDelivery #btnStepSuccessivo,
#modalOrdineDelivery #btnConfermaOrdine,
#modalOrdineDelivery #paga-con-stripe {
  background: #10b981 !important;
  border: 0 !important;
  border-bottom: 3px solid #047857 !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 8px 18px -7px rgba(16, 140, 100, .5);
  padding: 11px 24px !important;
  transition: filter .12s ease, transform .12s ease;
}
#modalOrdineDelivery #btnStepSuccessivo:hover,
#modalOrdineDelivery #btnConfermaOrdine:hover,
#modalOrdineDelivery #paga-con-stripe:hover { filter: brightness(1.06); transform: translateY(-1px); }
/* "Ottieni indirizzo automaticamente": outline a colore del locale */
#modalOrdineDelivery #attiva-geoloc {
  color: var(--colorePrimario) !important;
  border: 2px solid var(--colorePrimario) !important;
  background: #fff !important;
  border-radius: 10px !important;
  font-weight: 700;
  padding: 8px 14px !important;
}
/* Box info: tinta neutra al posto del blu Bootstrap */
#modalOrdineDelivery .alert-info {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
}