/* ==========================================================================
   CdP · layer UI bottoni + carrello Natale · v1.1 · 04/11/2026
   Un solo file, caricato DOPO i CSS della build. Non cambia logica, prezzi,
   minimi d'ordine né validazione: solo misure, gerarchia e testi a capo.
   Token unici: altezza 48 (primari) / 44 (compatti), raggio pillola,
   tap area minima 44 px, nessun testo a capo nei bottoni.
   v1.1: solo colori della palette live; stepper 48x48; nessun angolo
   condiviso fra le aree di tocco di «Rimuovi» e «Allergeni».
   ========================================================================== */
:root{
  --ui-h:48px;            /* bottone primario / secondario */
  --ui-h-sm:44px;         /* compatto: chip, stepper, link-bottone */
  --ui-r:999px;           /* raggio pillola, unico per tutti i bottoni */
  --ui-r-box:12px;        /* raggio banner e card piccole */
  --ui-fs:1rem;
  --ui-fs-sm:.9375rem;
  --ui-fs-xs:.875rem;
  --ui-px:1.25rem;
  --ui-pri:#c2410c;       /* arancio pieno: bianco sopra = 5,2:1 (AA) */
  --ui-pri-d:#a8124c;     /* = --btn-b di .btn-primary */
  --ui-ink:#2a211c;
  --ui-soft:#5c5048;      /* testo secondario: 7,3:1 su bianco */
  --ui-line:#d9c3a8;
}

/* ---------- 1. Bottoni del sito (.btn e famiglia) ---------- */
html body .btn{
  min-height:var(--ui-h);
  padding:.625rem var(--ui-px);
  font-size:var(--ui-fs);
  line-height:1.2;
  border-radius:var(--ui-r);
  white-space:nowrap;
  gap:.5rem;
}
html body .btn.btn-lg{min-height:var(--ui-h);font-size:var(--ui-fs)}
html body .btn-ghost{border-width:1.5px}
/* i bottoni con sottotitolo (label + <small>) restano su due righe per scelta */
html body .btn:has(> small){white-space:normal}
html body .btn > small{white-space:nowrap}
@media (max-width:380px){
  html body .btn{--ui-px:1rem;font-size:var(--ui-fs-sm)}
}
/* testo lungo su iPhone piccoli: resta su una riga, il carattere scala */
html body .btn.stay__wa{font-size:clamp(.8125rem,3.9vw,1rem);padding-inline:1rem}

/* chip e filtri video della home: una riga, tap area 44 */
html body .cv__filter,
html body .cv__marathon{min-height:var(--ui-h-sm);white-space:nowrap}
html body .cv__marathon{background:var(--ui-pri)}
html body .cv__marathon:hover{background:var(--ui-pri-d)}

/* pulsanti recensione (fascia sotto il badge) */
html body.cinema[data-page=home] .revband.revband .alba__rev-b{min-height:var(--ui-h);white-space:nowrap;overflow-wrap:normal}

/* footer: «Prenota» e scorciatoie rapide, tap area 44 */
html body .ftr__quick.ftr__quick.ftr__quick > button,
html body .ftr__quick.ftr__quick.ftr__quick > a{min-height:var(--ui-h-sm);white-space:nowrap}

/* ---------- 2. Home: bottone Natale sotto «Siamo aperti / fino alle …» ----------
   Il bottone è fratello del badge (non dentro: il badge è già un pulsante che
   apre Google Maps). Lo spazio si riserva sopra «Come arrivare» e il bottone
   ci si posiziona dentro. */
html body.cinema[data-page=home] .alba .alba__badge:has(.xmas-cta){
  --xm-h:var(--ui-h);
  --xm-gap:12px;
  --xm-hint:28px;           /* altezza fissata di «Come arrivare» */
  --xm-below:18px;          /* spazio sotto «Come arrivare» fino al fondo della fascia */
  --xm-adj:-6px;            /* ritocco: 14 px sopra il bottone, 12 sotto */
  position:relative!important;
}
html body.cinema[data-page=home] .alba .alba__badge:has(.xmas-cta) .openbadge__hint{
  box-sizing:border-box;height:var(--xm-hint);
  margin-top:calc(var(--xm-h) + var(--xm-gap) * 2 + var(--xm-adj))!important;
}
html body.cinema[data-page=home] .alba .alba__badge .xmas-cta{
  position:absolute;z-index:4;left:0;right:0;margin-inline:auto;width:max-content;
  bottom:calc(var(--xm-below) + var(--xm-hint) + var(--xm-gap));
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  box-sizing:border-box;height:var(--xm-h);max-width:calc(100% - 2.5rem);
  padding:0 1.25rem;border-radius:var(--ui-r);
  background:linear-gradient(105deg,#c2410c,#a8124c);color:#fff;
  font:700 var(--ui-fs)/1.2 var(--font-body,system-ui,sans-serif);
  white-space:nowrap;text-decoration:none;overflow:hidden;isolation:isolate;
  box-shadow:0 6px 16px #c4185b3d,inset 0 0 0 1px #ffffff2e;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s;
}
html body.cinema[data-page=home] .alba .alba__badge .xmas-cta span{overflow:hidden;text-overflow:ellipsis}
html body.cinema[data-page=home] .alba .alba__badge .xmas-cta svg{flex:none;width:20px;height:20px}
html body.cinema[data-page=home] .alba .alba__badge .xmas-cta:hover{box-shadow:0 10px 30px #c4185b3d,inset 0 0 0 1px #ffffff2e}
html body.cinema[data-page=home] .alba .alba__badge .xmas-cta:active{transform:scale(.97)}
html body.cinema[data-page=home] .alba .alba__badge .xmas-cta:focus-visible{outline:3px solid var(--ui-ink);outline-offset:3px}
/* animazione leggera: un riflesso ogni 5 s e la stella che pulsa */
html body.cinema[data-page=home] .alba .alba__badge .xmas-cta::before{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;translate:-115% 0;width:35%;
  background:linear-gradient(90deg,#0000,#ffffff59,#0000);
  transform:skewX(-20deg);animation:xmSheen 5s ease-in-out 1.6s infinite;
}
html body.cinema[data-page=home] .alba .alba__badge .xmas-cta .xm-star{transform-origin:12px 4px;animation:xmTwinkle 2.6s ease-in-out infinite}
@keyframes xmSheen{0%,70%{translate:-115% 0}100%{translate:345% 0}}
@keyframes xmTwinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){
  html body.cinema[data-page=home] .alba .alba__badge .xmas-cta,
  html body.cinema[data-page=home] .alba .alba__badge .xmas-cta::before,
  html body.cinema[data-page=home] .alba .alba__badge .xmas-cta .xm-star{animation:none!important;transition:none!important}
  html body.cinema[data-page=home] .alba .alba__badge .xmas-cta::before{display:none}
}
@media (max-width:360px){
  html body.cinema[data-page=home] .alba .alba__badge .xmas-cta{padding:0 1rem;font-size:var(--ui-fs-sm)}
}
/* desktop/tablet larghi: il badge è una card nell'angolo dell'hero */
@media (min-width:821px){
  html body.cinema[data-page=home] .alba .alba__badge:has(.xmas-cta){--xm-below:16px;--xm-adj:-2px}
  html body.cinema[data-page=home] .alba .alba__badge:has(.xmas-cta) .openbadge{min-width:21.5rem}
  html body.cinema[data-page=home] .alba .alba__badge .xmas-cta{left:17px;right:17px;width:auto;margin-inline:0;max-width:none}
}

/* ---------- 3. Ordini di Natale (#nat-ordine) ----------
   Doppio #id per vincere sugli strati precedenti senza !important. */
/* intestazione: «‹ Indietro» compatto */
#nat-ordine#nat-ordine .no__back{min-height:var(--ui-h-sm);height:var(--ui-h-sm);padding:0 .625rem 0 .375rem;border:1px solid var(--ui-line);background:#fff;border-radius:var(--ui-r);font-size:var(--ui-fs-sm);font-weight:600;white-space:nowrap;box-shadow:none}

/* passo 1 · «Avete un ordine in sospeso»: un bottone pieno compatto + un link */
#nat-ordine#nat-ordine .no__draft{padding:.75rem .875rem;border-radius:var(--ui-r-box)}
#nat-ordine#nat-ordine .no__draftt{margin:0 0 .5rem;font-size:var(--ui-fs-sm);line-height:1.4}
#nat-ordine#nat-ordine .no__draft .no__pair{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1rem}
#nat-ordine#nat-ordine .no__draft .no__pair > *{width:auto;min-height:var(--ui-h-sm);border-radius:var(--ui-r);white-space:nowrap;font-size:var(--ui-fs-sm);line-height:1.2}
#nat-ordine#nat-ordine .no__draft .no__b2{padding:0 1.125rem;background:var(--ui-pri);color:#fff;border:0;font-weight:700}
#nat-ordine#nat-ordine .no__draft .no__b2:hover{background:var(--ui-pri-d)}
@media (max-width:360px){#nat-ordine#nat-ordine .no__draft .no__pair{gap:.25rem .75rem}#nat-ordine#nat-ordine .no__draft .no__pair > *{font-size:var(--ui-fs-xs)}#nat-ordine#nat-ordine .no__draft .no__b2{padding:0 .875rem}}
#nat-ordine#nat-ordine .no__draft .no__b3{padding:0 .25rem;background:none;border:0;color:var(--ui-soft);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* bottoni grandi del passo 1 */
#nat-ordine#nat-ordine .no__qbtn{min-height:var(--ui-h);font-size:var(--ui-fs);white-space:nowrap}
#nat-ordine#nat-ordine .nr__b--p:not(:empty){min-height:var(--ui-h-sm);white-space:nowrap}
#nat-ordine#nat-ordine .no__bxsb{min-height:var(--ui-h-sm);white-space:nowrap}

/* righe prodotto del riepilogo e del carrello (layout a una colonna; il pannello
   laterale desktop .no__side ha già il suo disegno compatto e resta com'è) */
#nat-ordine#nat-ordine:not(.is-side) .ct__r.ct__rx,
#nat-ordine#nat-ordine .no__cart .ct__r.ct__rx{
  grid-template-columns:48px auto minmax(0,1fr) auto;
  grid-template-areas:"t n n p" "t a a a" "t s r .";
  gap:4px 12px;padding:10px 0;align-items:center;
}
#nat-ordine#nat-ordine:not(.is-side) .ct__r.ct__rx.ct__rbx,
#nat-ordine#nat-ordine .no__cart .ct__r.ct__rx.ct__rbx{grid-template-areas:"t n n p" "t a a a" "t b b b" "t s r ."}
#nat-ordine#nat-ordine:not(.is-side) .ct__r.ct__rx > .ct__th,
#nat-ordine#nat-ordine .no__cart .ct__r.ct__rx > .ct__th{width:48px;height:48px;border-radius:10px}
#nat-ordine#nat-ordine:not(.is-side) .ct__r.ct__rx > .ct__n,
#nat-ordine#nat-ordine .no__cart .ct__r.ct__rx > .ct__n{font-size:var(--ui-fs);font-weight:700;line-height:1.3;align-self:end}
#nat-ordine#nat-ordine:not(.is-side) .ct__r.ct__rx > .ct__p,
#nat-ordine#nat-ordine .no__cart .ct__r.ct__rx > .ct__p{font-size:var(--ui-fs);font-weight:700;align-self:end;min-width:0}
/* stepper unico tipo Amazon: [ − 1 + ] in una sola pillola da 48 px; ogni bottone 48x48 reali.
   Il bordo è un outline interno (non aggiunge px, disegnato sopra i figli), così i bottoni restano 48 pieni. */
#nat-ordine#nat-ordine:not(.is-side) .ct__r.ct__rx > .ct__st,
#nat-ordine#nat-ordine .no__cart .ct__r.ct__rx > .ct__st{
  --stb:48px;display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ui-h);margin:0;padding:0;
  border:0;border-radius:var(--ui-r);background:#fff!important;box-shadow:none;outline:1px solid #cdb99c;outline-offset:-1px;
}
#nat-ordine#nat-ordine:not(.is-side) .ct__r.ct__rx .ct__st .nr__b,
#nat-ordine#nat-ordine .no__cart .ct__r.ct__rx .ct__st .nr__b{
  box-sizing:border-box;flex:none;width:48px;min-width:48px;height:48px;min-height:48px;padding:0;
  border:0;border-radius:var(--ui-r);background:transparent;color:var(--ui-ink);
}
#nat-ordine#nat-ordine:not(.is-side) .ct__r.ct__rx .ct__st .nr__b:hover,
#nat-ordine#nat-ordine .no__cart .ct__r.ct__rx .ct__st .nr__b:hover{background:#f4ece0}
#nat-ordine#nat-ordine:not(.is-side) .ct__r.ct__rx .ct__st .nr__v,
#nat-ordine#nat-ordine .no__cart .ct__r.ct__rx .ct__st .nr__v{min-width:1.5rem;font-size:var(--ui-fs);font-weight:700;text-align:center}
/* «Rimuovi» e «Allergeni e ingredienti»: link discreti, separati */
#nat-ordine#nat-ordine:not(.is-side) .ct__r.ct__rx > .ct__rm,
#nat-ordine#nat-ordine .no__cart .ct__r.ct__rx > .ct__rm{
  grid-area:r;justify-self:start;align-self:center;min-height:var(--ui-h-sm);height:auto;padding:0 .25rem;margin-left:4px;
  background:none;border:0;border-radius:6px;color:var(--ui-soft);
  font-size:var(--ui-fs-xs);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;
}
#nat-ordine#nat-ordine:not(.is-side) .ct__r.ct__rx > .ct__alk,
#nat-ordine#nat-ordine .no__cart .ct__r.ct__rx > .ct__alk{
  grid-area:a;justify-self:start;position:relative;min-height:28px;height:28px;padding:0;
  color:var(--ui-soft);font-size:var(--ui-fs-xs);font-weight:500;text-align:left;
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap;
}
#nat-ordine#nat-ordine:not(.is-side) .ct__r.ct__rx > .ct__alk::after,
#nat-ordine#nat-ordine .no__cart .ct__r.ct__rx > .ct__alk::after{content:"";position:absolute;inset:-12px -4px -4px}

/* banner «Per confermare manca …»: sobrio, una riga, tocco per completare */
#nat-ordine#nat-ordine .no__msg.is-fix{
  display:block;position:relative;min-height:0;margin:0 0 8px;padding:9px 30px 9px 12px;
  background:#fff4e5;border:1px solid #e5b98a;border-radius:10px;color:#6b2c12;
  font-size:var(--ui-fs-xs);font-weight:600;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#nat-ordine#nat-ordine .no__msg.is-fix::after{position:absolute;right:10px;top:50%;transform:translateY(-50%);margin:0;font-size:1.25rem;color:#6b2c12}

/* barra in basso: totale + CTA, compatta */
#nat-ordine#nat-ordine:not(.is-side) .no__ft{padding:10px 12px;border-radius:20px}
#nat-ordine#nat-ordine .no__ftr{gap:12px;min-height:var(--ui-h)}
#nat-ordine#nat-ordine .no__ftr > .no__tot{min-height:var(--ui-h);gap:0}
#nat-ordine#nat-ordine .no__ftr > .no__tot b{font-size:1.25rem}
#nat-ordine#nat-ordine .no__ftr > .no__cta{
  flex:0 0 auto;min-width:0;max-width:none;min-height:var(--ui-h);height:var(--ui-h);
  padding:0 1.5rem;border-radius:var(--ui-r);font-size:var(--ui-fs);line-height:1.2;white-space:nowrap;
}
@media (max-width:360px){
  #nat-ordine#nat-ordine .no__ftr > .no__cta{padding:0 1.125rem}
  #nat-ordine#nat-ordine .no__ftr > .no__tot b{font-size:1.125rem}
}
/* avviso «Aggiunto»: pieno (niente testo che traspare sotto) */
#nat-ordine#nat-ordine .no__addt{background:#1f3d27;-webkit-backdrop-filter:none;backdrop-filter:none}

/* pulsanti recensione su telefoni stretti: uno sotto l'altro, una riga ciascuno */
@media (max-width:420px){
  html body.cinema[data-page=home] .revband.revband .alba__rev{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:.5rem;max-width:20rem;margin-inline:auto}
  html body.cinema[data-page=home] .revband.revband .alba__rev-b,
  html body.cinema[data-page=home] .revband.revband .alba__rev-b--g,
  html body.cinema[data-page=home] .revband.revband .alba__rev-b--t{flex:none;width:100%;flex-direction:row;gap:.5rem;font-size:var(--ui-fs-sm);padding-inline:1rem}
}

/* «‹ Indietro» su telefoni: solo freccia, cerchio 44 px (aria-label già presente) */
@media (max-width:400px){
  #nat-ordine#nat-ordine .no__back{width:var(--ui-h-sm);min-width:var(--ui-h-sm);padding:0;justify-content:center}
  #nat-ordine#nat-ordine .no__back .no__backt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}

/* v1.1 · iPhone piccoli (≤360): la riga prodotto resta dentro il bordo con lo stepper 48 */
@media (max-width:360px){
  #nat-ordine#nat-ordine:not(.is-side) .ct__r.ct__rx,
  #nat-ordine#nat-ordine .no__cart .ct__r.ct__rx{grid-template-columns:40px auto minmax(0,1fr) auto;column-gap:10px}
  #nat-ordine#nat-ordine:not(.is-side) .ct__r.ct__rx > .ct__th,
  #nat-ordine#nat-ordine .no__cart .ct__r.ct__rx > .ct__th{width:40px;height:40px}
  #nat-ordine#nat-ordine:not(.is-side) .ct__r.ct__rx > .ct__rm,
  #nat-ordine#nat-ordine .no__cart .ct__r.ct__rx > .ct__rm{margin-left:0;padding:0 .125rem}
}