/* ============================================================
   Tema "Forno & Basilico" — ANTEPRIMA ordine online
   Fratelli Iaiunese — condiviso tra index.html e conferma.html
   ============================================================ */
:root{
  /* Rosso e verde campionati dagli archi tricolore del logo */
  --rosso:#CC2229;
  --rosso-scuro:#A31B21;
  --verde-logo:#33A457;
  --verde:#2B8747;        /* verde logo scurito per bottoni con testo bianco */
  --verde-scuro:#226B38;
  --arancio:#E8843C;
  --nero:#121212;         /* nero del logo per testata e footer */
  --crema:#FAF6EF;
  --testo:#2B2622;
  --testo-soft:#6B625B;
  --card:#FFFFFF;
  --bordo:#EAE2D6;
  --raggio:12px;
  --ombra:0 2px 10px rgba(43,38,34,.07);
}

body{
  background:var(--crema) !important;
  color:var(--testo) !important;
  font-family:"Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}
/* Font arrotondato e accogliente su titoli, prezzi e bottoni */
.brand-name, .cat-head-left, .card-title, .card-price,
.hot-title, .hot-name, .hot-price, .totale, .promo-banner,
.saluto, .btn, .btn-aggiungi, .hot-add, #btn-submit,
.carrello h2, .carrello-vuoto, .footer-name{
  font-family:"Baloo 2", "Segoe UI", system-ui, sans-serif !important;
}

/* ===== Nastro anteprima ===== */
.ribbon-anteprima{
  position:fixed; top:0; right:0; z-index:3000;
  background:var(--arancio); color:#fff;
  font-weight:800; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.28rem .65rem; border-bottom-left-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  pointer-events:none;
}

/* ===== Testata nera come il logo ===== */
.topbar{
  position:sticky; top:0; z-index:1200;
  background:var(--nero); border-bottom:1px solid #262626;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
  padding:calc(.6rem + env(safe-area-inset-top, 0px)) 1rem .55rem;
}
/* Nell'app (WebView) la pagina va sotto la barra di stato di Android.
   Valore FISSO e regolabile: niente env(), che sul telefono imponeva
   l'altezza piena della barra di stato ignorando le nostre riduzioni */
.in-app .topbar{
  padding-top:calc(.6rem + 20px);
}
.in-app .ribbon-anteprima{ top:20px; }
.topbar-compact{ position:static; margin:-1rem -1rem 1rem; }
.brand-row{ display:flex; align-items:center; gap:.6rem; }
.brand-row img{ width:48px; height:48px; object-fit:contain; border-radius:50%; flex:0 0 auto; }
.brand-name{ font-weight:800; font-size:1.05rem; letter-spacing:.2px; color:#fff; }
.brand-dal{ display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--verde-logo); background:rgba(51,164,87,.14); padding:.05rem .4rem; border-radius:999px; vertical-align:middle; margin-left:.15rem; }
.stato-apertura{ font-size:.78rem; color:#B8B0A6; margin-top:.1rem; }
.saluto{ margin-top:.5rem; font-size:.98rem; font-weight:700; color:#F3EEE6; }
.dot{ display:inline-block; width:.55rem; height:.55rem; border-radius:50%; margin-right:.2rem; vertical-align:middle; }
.dot-on{ background:var(--verde-logo); box-shadow:0 0 0 3px rgba(51,164,87,.25); }
.dot-off{ background:#C9A13B; box-shadow:0 0 0 3px rgba(201,161,59,.22); }

#search{
  width:100%; box-sizing:border-box; margin-top:.55rem;
  padding:.6rem .95rem; font-size:1rem;
  border:1.5px solid #3A3A3A; border-radius:999px;
  background:#1E1E1E; color:#F3EEE6; outline:none;
  -webkit-appearance:none; appearance:none;
}
#search::placeholder{ color:#8F877D; }
#search:focus{ border-color:var(--verde-logo); background:#252525; }

.chips{
  display:flex; gap:.4rem; overflow-x:auto;
  margin-top:.55rem; padding-bottom:.15rem;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto;
  border:1px solid #3A3A3A; background:#1E1E1E; color:#EDE7DC;
  border-radius:999px; padding:.42rem .8rem;
  font-size:.82rem; font-weight:600; cursor:pointer; white-space:nowrap;
}
.chip.active{ background:var(--rosso); border-color:var(--rosso); color:#fff; }

/* ===== Banner promo ===== */
.promo-banner{
  margin:.9rem 1rem 0;
  background:linear-gradient(100deg, var(--arancio), #F2A961);
  color:#fff; border-radius:var(--raggio);
  padding:.7rem .95rem; font-size:.9rem;
  box-shadow:var(--ombra);
}
/* ===== Banner "Ordina di nuovo" ===== */
#riordina-banner{
  margin:.9rem 1rem 0; padding:.75rem .95rem;
  background:#fff; border:1.5px solid var(--verde-logo);
  border-radius:var(--raggio); box-shadow:var(--ombra);
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; flex-wrap:wrap;
}
.riordina-testo{ font-size:.88rem; line-height:1.4; min-width:0; }
.riordina-testo span{ color:var(--testo-soft); font-size:.82rem; }
#riordina-btn{ flex:0 0 auto; white-space:nowrap; }

#search-empty{
  margin:1rem; background:#fff;
  border:1.5px dashed var(--bordo); border-radius:var(--raggio);
  padding:1.1rem; text-align:center; color:var(--testo-soft);
}

/* ===== Carosello "Le più richieste" ===== */
.hot-strip{ margin:.9rem 1rem 0; }
.hot-title{ font-weight:800; font-size:.95rem; margin-bottom:.45rem; }
.hot-scroll{
  display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.3rem;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.hot-scroll::-webkit-scrollbar{ display:none; }
.hot-card{
  flex:0 0 auto; width:168px;
  background:#fff; border:1px solid var(--bordo);
  border-radius:var(--raggio); box-shadow:var(--ombra);
  padding:.6rem .7rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.hot-name{
  font-weight:700; font-size:.82rem; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hot-desc{
  font-size:.7rem; color:var(--testo-soft); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hot-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.hot-price{ font-weight:800; color:var(--rosso); font-size:.9rem; }
.hot-add{
  width:36px; height:36px; border-radius:50%; border:none;
  background:var(--verde); color:#fff;
  font-size:1.35rem; font-weight:800; line-height:1; cursor:pointer;
}
.hot-add:active{ background:var(--verde-scuro); }

/* ===== Categorie (menu): card bianche con accento rosso e icona ===== */
.categoria{
  border-radius:var(--raggio) !important;
  box-shadow:var(--ombra) !important;
  border-left:4px solid var(--rosso);
  scroll-margin-top:150px;
}
.categoria-header{
  background:#fff !important;
  color:var(--testo) !important;
  font-weight:800 !important;
  display:flex; justify-content:space-between; align-items:center; gap:.5rem;
}
.categoria-header::after{ content:"▾"; color:var(--rosso); opacity:1; flex:0 0 auto; transition:transform .25s ease; }
.categoria.aperta .categoria-header::after{ transform:rotate(180deg); }
.cat-head-left{ display:flex; align-items:center; gap:.55rem; min-width:0; }
.cat-icona{ font-size:1.15rem; flex:0 0 auto; }
.categoria-body.open{ border-top:1px dashed var(--bordo); }
/* Il contenuto delle categorie chiuse o fuori schermo non viene impaginato */
#menu .categoria-body:not(.open){ content-visibility:auto; contain-intrinsic-size:auto 400px; }
#menu.searching .categoria-body{ max-height:none !important; padding:1rem !important; }
#menu.searching .categoria-header::after{ content:""; }
/* Durante la ricerca niente animazioni: la digitazione resta fluida */
#menu.searching .card{ animation:none !important; }

/* ===== Card piatto ===== */
.card{
  border:1px solid var(--bordo) !important;
  border-radius:var(--raggio) !important;
  box-shadow:var(--ombra) !important;
}
@keyframes cardIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}
.categoria-body.open .card{ animation:cardIn .32s ease both; }
.categoria-body.open .card:nth-child(2){ animation-delay:.05s; }
.categoria-body.open .card:nth-child(3){ animation-delay:.1s; }
.categoria-body.open .card:nth-child(4){ animation-delay:.15s; }
.categoria-body.open .card:nth-child(5){ animation-delay:.2s; }
.categoria-body.open .card:nth-child(n+6){ animation-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  .categoria-body.open .card{ animation:none; }
  .categoria-header::after{ transition:none; }
  .fly-cart{ display:none; }
}
.card-main{ display:flex; justify-content:space-between; gap:.8rem; align-items:flex-start; }
.card-info{ min-width:0; }
.card-title{ font-weight:700; font-size:1rem; line-height:1.3; }
.card-desc{ margin-top:.25rem !important; font-size:.85rem !important; color:var(--testo-soft) !important; line-height:1.35; }
.card-side{ display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; flex:0 0 auto; }
.card-side-top{ display:flex; align-items:center; gap:.45rem; }
.fav-btn{
  border:none; background:none; padding:.1rem;
  font-size:1.05rem; line-height:1; cursor:pointer;
  transition:transform .15s ease;
}
.fav-btn:active{ transform:scale(1.3); }
.card-price{ font-weight:800; color:var(--rosso); font-size:1.02rem; white-space:nowrap; }
.card-badges{ margin-top:.35rem; display:flex; gap:.35rem; flex-wrap:wrap; }
.badge{ font-size:.72rem !important; font-weight:700; padding:.16rem .55rem; border-radius:999px; }
.badge.badge-only-pickup{ background:#FBEAE9; color:#A31F1C !important; }
.badge.badge-only-delivery{ background:#E8F0FB; color:#0b5ed7 !important; }
.badge.badge-nd{ background:#EEEBE4 !important; color:#555 !important; }
.in-cart-badge{
  background:#E7F4EB; color:var(--verde-scuro);
  font-size:.72rem; font-weight:800;
  padding:.16rem .55rem; border-radius:999px;
}

.link-personalizza{
  margin-top:.55rem; background:none; border:none;
  color:var(--verde); font-weight:700; font-size:.85rem;
  cursor:pointer; padding:.25rem 0; text-align:left;
}
.link-personalizza:hover{ text-decoration:underline; }

/* ===== Pulsanti ===== */
.btn{ border-radius:999px !important; font-weight:700 !important; min-height:40px; }
.btn-aggiungi{ background:var(--verde) !important; }
.btn-aggiungi:hover{ background:var(--verde-scuro) !important; }
.btn-svuota{ background:#B3403C !important; }
.btn-qty{
  min-width:42px; min-height:38px;
  border-radius:10px !important; font-weight:800; font-size:1.15rem !important;
  background:#EFE9DE !important;
}

/* ===== Personalizza box ===== */
.personalizza-box{
  border-radius:10px !important;
  background:#FDFBF7 !important;
  border-color:var(--bordo) !important;
}
.pers-sezione{ margin-top:.75rem; }
.chk-list{ display:grid; gap:.3rem; margin-top:.4rem; max-height:240px; overflow:auto; }
.chk-row{
  display:flex; align-items:center; gap:.5rem;
  font-size:.88rem; background:#fff;
  border:1px solid var(--bordo); border-radius:8px;
  padding:.42rem .6rem; cursor:pointer;
}
.chk-row input{ width:1.1rem; height:1.1rem; accent-color:var(--verde); flex:0 0 auto; margin:0; }
.chk-price{ margin-left:auto; font-weight:700; color:var(--arancio); font-size:.8rem; white-space:nowrap; }

/* ===== Pannello carrello (bottom sheet) ===== */
#sheet-overlay{
  position:fixed; inset:0; background:rgba(43,38,34,.45); z-index:1300;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
#sheet-overlay.show{ opacity:1; pointer-events:auto; }
#carrello-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:1400;
  background:#fff; border-radius:18px 18px 0 0;
  box-shadow:0 -8px 30px rgba(0,0,0,.18);
  max-height:78vh; overflow:auto;
  padding:.5rem 1rem calc(1rem + env(safe-area-inset-bottom,0px)) !important;
  border-top:none !important;
  transform:translateY(105%); transition:transform .3s ease;
}
#carrello-sheet.open{ transform:translateY(0); }
.sheet-handle{ width:44px; height:5px; border-radius:99px; background:#D9D2C7; margin:.35rem auto .45rem; }
#carrello-sheet h2{ margin:.2rem 0 .4rem; font-size:1.1rem; }
.carrello h4{
  background:linear-gradient(90deg,#F2EBDF,#FAF6EF) !important;
  border-left:4px solid var(--verde) !important;
}
.totale{ font-weight:800; font-size:1.15rem; margin-top:.6rem; }
.carrello-vuoto{
  text-align:center; padding:1.6rem 1rem; color:var(--testo);
  font-weight:700; font-size:1.05rem; line-height:1.5;
}
.carrello-vuoto span{ display:block; margin-top:.35rem; font-size:.85rem; font-weight:600; color:var(--testo-soft); }

#barra-carrello{
  background:var(--verde) !important;
  border-radius:16px 16px 0 0;
  padding:.85rem 1rem calc(.85rem + env(safe-area-inset-bottom,0px)) !important;
  box-shadow:0 -4px 16px rgba(0,0,0,.18);
  z-index:1250 !important;
}
#barra-carrello .info{ align-items:center; gap:.5rem; }
.barra-tot{ font-size:.95rem; }
.cart-ico{ position:relative; display:inline-block; margin-right:.2rem; }
.cart-dot{
  display:none; position:absolute; top:-8px; right:-11px;
  min-width:17px; height:17px; padding:0 3px; box-sizing:border-box;
  border-radius:999px; background:var(--rosso); color:#fff;
  font-size:.68rem; font-weight:800; line-height:17px; text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.barra-cta{
  background:#fff; color:var(--verde-scuro);
  border-radius:999px; padding:.42rem .95rem;
  font-size:.92rem; font-weight:800;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
@keyframes barraPulse{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.035); }
  100%{ transform:scale(1); }
}
#barra-carrello.pulse{ animation:barraPulse .45s ease; }

/* ===== Pulsante torna su ===== */
#back-top{
  position:fixed; right:12px; bottom:96px; z-index:1240;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(0,0,0,.15);
  background:#fff; color:var(--nero); font-size:1.25rem; font-weight:800;
  box-shadow:0 4px 14px rgba(0,0,0,.35); cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
#back-top.show{ opacity:.97; pointer-events:auto; }

/* ===== Footer contatti ===== */
.site-footer{
  margin:1.4rem 1rem 0; padding:1rem;
  background:var(--nero); color:#EDE7DC;
  border-radius:var(--raggio);
  display:flex; gap:.85rem; align-items:center;
}
.site-footer img{ width:56px; height:56px; object-fit:contain; border-radius:50%; flex:0 0 auto; }
.footer-name{ font-weight:800; }
.footer-line{ font-size:.85rem; color:#B8B0A6; margin-top:.2rem; }
.footer-line a{ color:#7ED99A; font-weight:700; text-decoration:none; }

/* ===== Animazione "vola nel carrello" ===== */
.fly-cart{
  position:fixed; z-index:2600; font-size:1.5rem;
  pointer-events:none; will-change:transform;
  transform:translate(0,0); opacity:1;
  transition:transform .75s cubic-bezier(.5,-0.2,.75,.4), opacity .75s ease;
}

/* ===== Toast ===== */
#toast{
  position:fixed; top:12px; left:50%;
  transform:translate(-50%,-140%);
  z-index:2500; background:var(--testo); color:#fff;
  padding:.6rem 1.05rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition:transform .3s ease; max-width:92%; box-sizing:border-box;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#toast.show{ transform:translate(-50%,0); }
.toast-ok{ color:#7ED99A; font-weight:800; }

/* ===== Pagina conferma ===== */
.page-conferma h2{ margin-top:.4rem; }
.page-conferma h4{ color:var(--rosso) !important; }
.page-conferma form{
  border-radius:var(--raggio) !important;
  border:1px solid var(--bordo);
  box-shadow:var(--ombra);
}
.page-conferma .carrello-item{
  border:1px solid var(--bordo);
  border-radius:var(--raggio) !important;
  box-shadow:var(--ombra);
  padding:.7rem !important;
}
.page-conferma input,
.page-conferma select,
.page-conferma textarea{
  box-sizing:border-box;
  border:1.5px solid var(--bordo); border-radius:8px;
  padding:.55rem !important; font-size:1rem !important;
  background:#fff; color:var(--testo);
}
.page-conferma input:focus,
.page-conferma select:focus{ border-color:var(--arancio); outline:none; }
.page-conferma input.invalid,
.page-conferma select.invalid{ border-color:var(--rosso) !important; background:#FDF2F2; }
.field-err{
  display:none; color:var(--rosso);
  font-size:.8rem; margin-top:.25rem; font-weight:600;
}
.page-conferma .btn-group button{ border-radius:999px !important; font-weight:700; min-height:44px; }
.page-conferma .btn-selected{ background:var(--rosso) !important; }
#btn-submit{
  background:var(--verde) !important;
  border-radius:999px !important;
  font-weight:800 !important; min-height:50px;
  font-size:1.05rem !important;
}
#btn-submit:disabled{ opacity:.55; cursor:not-allowed; }
.page-conferma .qty-btn{ background:var(--verde) !important; border-radius:10px !important; min-width:40px; min-height:36px; }
.page-conferma .bar-back{ background:var(--rosso) !important; font-weight:700; }
#upsell-box{
  background:#fff; border:1px solid var(--bordo);
  border-radius:var(--raggio); box-shadow:var(--ombra);
  padding:.75rem .85rem; margin-top:.8rem;
}
.upsell-title{
  font-weight:800; font-size:.92rem; margin-bottom:.5rem;
  font-family:"Baloo 2", "Segoe UI", system-ui, sans-serif;
}
.upsell-items{ display:flex; gap:.5rem; flex-wrap:wrap; }
.upsell-add{
  display:inline-flex; align-items:center; gap:.45rem;
  width:auto; margin:0; padding:.45rem .8rem;
  border:1.5px solid var(--verde-logo); background:#F2FAF4; color:var(--verde-scuro);
  border-radius:999px; font-size:.85rem; font-weight:700; cursor:pointer;
}
.upsell-add .upsell-price{ color:var(--rosso); font-weight:800; }
.esclusi-box{
  background:#FFF7EC; border:1px solid #F3D9B7;
  border-radius:var(--raggio);
  padding:.75rem .85rem; margin-top:.8rem; font-size:.85rem;
}
.esclusi-box .escluso{ margin-top:.35rem; color:#8A5A18; }

/* ===== Composizione pizza maxi: dal blu al tema del logo ===== */
.family-title{ color:var(--rosso) !important; }
.family-builder{ background:#FDFBF7 !important; border-color:var(--bordo) !important; }
.family-chip{ color:var(--rosso) !important; border-color:#E7B9B7 !important; background:#fff !important; }
.family-chip.active{ background:var(--rosso) !important; color:#fff !important; border-color:var(--rosso) !important; }
.family-side{ border-color:var(--bordo) !important; }
.family-side-actions button{ color:var(--rosso) !important; border-color:#E7B9B7 !important; background:#fff !important; }
.family-side-actions button.active{ background:var(--rosso) !important; color:#fff !important; border-color:var(--rosso) !important; }
.family-pill{ background:#FBEAE9 !important; color:var(--rosso-scuro) !important; }

/* ===== Colonna centrata su schermi larghi (PC/tablet) ===== */
@media (min-width:824px){
  .brand-row, .topbar #search, .topbar .chips{ max-width:760px; margin-left:auto; margin-right:auto; }
  .topbar #search{ display:block; }
  .menu{ max-width:792px; margin-left:auto; margin-right:auto; }
  .promo-banner, #riordina-banner, .hot-strip, #search-empty, .site-footer{ max-width:760px; margin-left:auto; margin-right:auto; }
  #carrello-sheet, #barra-carrello{ max-width:792px; margin-left:auto; margin-right:auto; }
  body.page-conferma{ max-width:792px; margin-left:auto; margin-right:auto; }
  .page-conferma .bar-back{ left:0; right:0; width:auto; max-width:792px; margin:0 auto; }
}