/**
 * Demo per casi d'uso.
 * Usa i token del tema: qui c'e' solo quello che riguarda il widget.
 */

/* ---- schede per tipo di attività ---- */
.tabs{display:flex;gap:.4rem;margin:clamp(1.6rem,4vw,2.4rem) 0 0;overflow-x:auto;padding-bottom:.3rem;}
.tab{flex:none;border:1px solid var(--line);background:var(--card);color:var(--ink-2);border-radius:999px;padding:.5rem 1rem;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s,border-color .12s;}
.tab:hover{border-color:var(--ink-2);color:var(--ink);}
.tab[aria-selected="true"]{background:var(--jade-fill);border-color:var(--jade-fill);color:var(--on-jade);}

.setup{display:flex;gap:.45rem;flex-wrap:wrap;margin:.9rem 0 1rem;}
.chip{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--ink-2);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.28rem .65rem;}
.chip.k{color:var(--jade-ink);border-color:color-mix(in srgb,var(--jade) 35%,var(--line));background:var(--jade-wash);}

/* ---- widget ---- */
.widget{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;}
.widget__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.95rem 1.15rem;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.widget__title{font-family:var(--display);font-weight:700;font-size:1.05rem;}
.widget__tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);}

.sec{padding:1rem 1.15rem;border-bottom:1px solid var(--line);}
.sec:last-of-type{border-bottom:0;}
.sec__t{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:0 0 .7rem;}

.dates{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.2rem;}
.dchip{flex:none;min-width:58px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:10px;padding:.45rem .6rem;font-family:var(--mono);font-size:.72rem;line-height:1.3;text-align:center;cursor:pointer;}
.dchip b{display:block;font-size:1.05rem;font-weight:600;}
.dchip[aria-pressed="true"]{background:var(--jade-fill);border-color:var(--jade-fill);color:var(--on-jade);}

/* Calendario compatto: si guarda di sfuggita e si clicca, non si studia.
   Il prezzo sotto il giorno fa scegliere prima ancora di aprire gli orari. */
.calbox{width:338px;max-width:100%;}
.cal__bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem;}
.cal__m{font-family:var(--display);font-weight:700;font-size:.94rem;text-transform:capitalize;}
.navb{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:7px;width:28px;height:28px;cursor:pointer;font-size:.95rem;line-height:1;padding:0;}
.navb:hover:not(:disabled){border-color:var(--ink-2);}
.navb:disabled{opacity:.3;cursor:not-allowed;}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal__h{font-family:var(--mono);font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);text-align:center;padding:.15rem 0 .3rem;}
/* 46px: sotto i 44 il dito sbaglia bersaglio, ed era anche troppo fitto da leggere. */
.day{
  height:46px;border:1px solid transparent;background:transparent;border-radius:8px;cursor:pointer;
  color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:0;font-family:var(--mono);font-size:.86rem;line-height:1.1;
}
.day u{text-decoration:none;font-variant-numeric:tabular-nums;}
.day small{font-size:.62rem;letter-spacing:-.01em;}
.day.free{color:var(--jade-ink);font-weight:600;}
.day.free:hover{background:var(--jade-wash);}
.day.shut{color:var(--ink-2);opacity:.35;cursor:not-allowed;}
.day.full{color:var(--ember-ink);cursor:not-allowed;}
.day.full u{text-decoration:line-through;text-decoration-thickness:1px;}
.day.sel{background:var(--jade-fill);color:var(--on-jade);}
.day.sel small{opacity:1;color:var(--on-jade);}
.day.pad{visibility:hidden;}
.legend{display:flex;gap:.9rem;flex-wrap:wrap;margin:.6rem 0 0;font-size:.68rem;color:var(--ink-2);}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:.3rem;vertical-align:-1px;}

.slots{list-style:none;margin:0;padding:0;display:grid;gap:.2rem;}
.slot{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.85rem;padding:.7rem .55rem;border-radius:10px;}
.slot.sel{background:var(--jade-wash);}
.time{font-family:var(--mono);font-weight:600;font-size:.98rem;font-variant-numeric:tabular-nums;}
.meter{height:6px;border-radius:99px;background:var(--line);overflow:hidden;}
.fill{display:block;height:100%;background:var(--jade);width:0;transition:width .6s cubic-bezier(.2,.7,.3,1);}
.left{display:block;margin-top:.3rem;font-family:var(--mono);font-size:.74rem;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.low .fill,.out .fill{background:var(--ember);}
.low .left{color:var(--ember-ink);}
.out .time{text-decoration:line-through;color:var(--ink-2);}
.out .meter{opacity:.55;}
.pick{border:1px solid var(--jade);background:transparent;color:var(--jade-ink);font-weight:700;font-size:.82rem;padding:.4rem .85rem;border-radius:8px;cursor:pointer;white-space:nowrap;}
.pick:hover{background:var(--jade-fill);color:var(--on-jade);}
.tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:.32rem .55rem;border-radius:6px;white-space:nowrap;color:var(--ember-ink);background:var(--ember-wash);}

.kinds{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
@container slotify (max-width:480px){.kinds{grid-template-columns:1fr;}}
@supports not (container-type:inline-size){@media(max-width:560px){.kinds{grid-template-columns:1fr;}}}
.kind{position:relative;border:2px solid var(--line);border-radius:10px;padding:.7rem .8rem;cursor:pointer;}
.kind.on{border-color:var(--jade);background:var(--jade-wash);}
.kind input{position:absolute;opacity:0;}
.kind b{display:block;font-size:.88rem;}
.kind span{display:block;color:var(--ink-2);font-size:.76rem;line-height:1.4;}
.kind .amt{font-family:var(--mono);color:var(--jade-ink);font-weight:600;}

.people{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;}
.stepper{display:flex;align-items:center;gap:.5rem;}
.stepper span{font-size:.85rem;min-width:70px;}
.stepper button{width:28px;height:28px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:7px;cursor:pointer;font-size:1rem;line-height:1;}
.stepper button:hover:not(:disabled){border-color:var(--jade);color:var(--jade-ink);}
.stepper button:disabled{opacity:.35;cursor:not-allowed;}
.stepper output{font-family:var(--mono);font-weight:600;min-width:1.6rem;text-align:center;font-variant-numeric:tabular-nums;}

.opts{display:grid;gap:.75rem;}
.opt{display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:center;}
.opt__l{font-size:.88rem;}
.opt__l em{display:block;font-style:normal;color:var(--ink-2);font-size:.76rem;}
.opt select,.opt input[type="number"]{padding:.35rem .5rem;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);font:inherit;font-size:.84rem;}
.opt input[type="number"]{width:66px;}

.bill{background:var(--deep);color:var(--on-deep);padding:1rem 1.15rem;}
.bline{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem;color:var(--on-deep-2);padding:.28rem 0;}
.bline b{font-family:var(--mono);color:var(--on-deep);font-variant-numeric:tabular-nums;}
.btot{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--deep-line);}
.btot span{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--deep-accent);}
.btot b{font-family:var(--display);font-size:1.75rem;line-height:1;font-variant-numeric:tabular-nums;}
.cta{display:block;width:100%;margin-top:.9rem;padding:.8rem;border:0;border-radius:10px;background:var(--deep-accent);color:#0f1a17;font:inherit;font-weight:700;cursor:pointer;}
.cta:disabled{opacity:.4;cursor:not-allowed;}
.hold{display:flex;justify-content:space-between;gap:1rem;margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--deep-line);font-size:.82rem;color:var(--on-deep-2);}
.hold b{font-family:var(--mono);color:var(--deep-accent);font-variant-numeric:tabular-nums;}
.note{margin:.9rem 0 0;padding:.7rem .85rem;border-radius:9px;background:var(--ember-wash);color:var(--ember-ink);font-size:.82rem;}
.empty{color:var(--ink-2);font-size:.86rem;padding:.4rem 0;}
[hidden]{display:none !important;}



/* ---- impaginazione della pagina demo ---- */
.demo-hero{padding:clamp(2.4rem,6vw,4rem) 0 0;}
.demo-hero h1{font-size:clamp(2rem,4.6vw,3.1rem);}
.demo-hero h1 em{font-style:normal;color:var(--jade-ink);}
.demo-stage{padding:clamp(1.4rem,3vw,2rem) 0 clamp(3rem,7vw,5rem);}

.demo-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(1.2rem,3vw,2.2rem);align-items:start;}
@media(max-width:900px){.demo-cols{grid-template-columns:1fr;}}

.demo-why{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:1.3rem;box-shadow:var(--shadow-sm);
}
@media(min-width:901px){.demo-why{position:sticky;top:5.2rem;}}
.demo-why h2{font-size:1.02rem;margin:0 0 .8rem;}
.demo-why p{color:var(--ink-2);font-size:.92rem;margin:0 0 .8rem;line-height:1.6;}
.demo-why .btn{width:100%;margin-top:.4rem;}

.demo-foot{margin:1.6rem 0 0;color:var(--ink-2);font-size:.85rem;}


/* Il widget si misura sul contenitore in cui lo metti, non sulla finestra:
   dentro una colonna stretta di una scheda prodotto si impila da solo anche
   su un monitor grande. */
.widget{container-type:inline-size;container-name:slotify;}

/* ---- calendario a sinistra, orari a destra ----
   Impilati facevano scorrere mezzo schermo e stiravano le barre di capienza
   su tutta la larghezza. Affiancati si vede tutto in un colpo. */
.pickrow{display:grid;grid-template-columns:max-content minmax(0,1fr);}
.pickrow > .sec{border-bottom:1px solid var(--line);}
.pickrow > .sec--pick{border-right:1px solid var(--line);}
.pickrow > .sec--slots{min-width:0;}
@container slotify (max-width:560px){
  .pickrow{grid-template-columns:1fr;}
  .pickrow > .sec--pick{border-right:0;}
  .calbox{width:auto;max-width:none;}
  .sec--pick .dates{width:auto;max-width:none;grid-template-columns:repeat(7,1fr);}
  .sec--slots .slots{max-height:none;}
}
/* Ripiego per i browser senza container query. */
@supports not (container-type:inline-size){
  @media(max-width:760px){
    .pickrow{grid-template-columns:1fr;}
    .pickrow > .sec--pick{border-right:0;}
  }
}

/* Nella colonna stretta le date diventano una griglia, non una striscia. */
.sec--pick .dates{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;overflow:visible;width:338px;max-width:100%;}
.sec--pick .dchip{min-width:0;}

/* Gli orari in colonna stretta: barra più corta, tutto più serrato. */
.sec--slots .slots{max-height:326px;overflow-y:auto;padding-right:.2rem;}
.sec--slots .slot{gap:.7rem;padding:.55rem .5rem;}
.sec--slots .time{font-size:.92rem;}
.sec--slots .left{font-size:.7rem;margin-top:.25rem;}
.sec--slots .pick{padding:.34rem .7rem;font-size:.78rem;}
.sec--slots .tag{font-size:.62rem;padding:.28rem .45rem;}

/* ---- cosa succede dopo ---- */
.after__list{list-style:none;margin:clamp(1.8rem,4vw,2.4rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;counter-reset:after;}
@media(max-width:820px){.after__list{grid-template-columns:1fr;}}
.after__list li{counter-increment:after;padding-top:1rem;border-top:1px solid var(--deep-line);}
.after__list li::before{content:counter(after,decimal-leading-zero);font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--deep-accent);display:block;margin-bottom:.5rem;}
.after__list h3{color:var(--on-deep);font-size:1.02rem;margin:0 0 .35rem;}
.after__list p{color:var(--on-deep-2);font-size:.94rem;margin:0;}

/* ---- chiusura ---- */
.demo-close{padding:clamp(3rem,7vw,4.5rem) 0;text-align:center;}
.demo-close .sub{margin-left:auto;margin-right:auto;}
.demo-close__cta{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;}