/* "Prenota una demo": schermata unica (markup _src/booking.mjs, logica
   assets/mm/booking.js). Intestazione con Matteo e durata, sotto il mese a
   sinistra e gli orari a destra; sul telefono tutto in colonna.
   Forme: giorni tondi, bottoni e campi 10px, scheda 24px. Verde #2E7A33 per
   la scelta e il bottone principale, come nel resto del sito. */

/* la sezione demo: testo sopra (titolo a sinistra, punti a destra), scheda a tutta larghezza sotto */
.cta .cta-grid:has(.bk){grid-template-columns:minmax(0,1fr);gap:32px}
@media(min-width:980px){
  .cta .cta-grid:has(.bk){grid-template-columns:minmax(0,1fr);row-gap:40px}
  .cta .cta-grid:has(.bk) > :first-child{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:64px;align-items:end}
  .cta .cta-grid:has(.bk) > :first-child > *{grid-column:1}
  .cta .cta-grid:has(.bk) .cta-checks{grid-column:2;grid-row:2 / span 2;margin-top:0;align-self:end;padding-bottom:6px}
}

.bk{
  --bk-g:#2E7A33;
  --bk-tint:oklch(0.962 0.034 138);
  --bk-tint-h:oklch(0.925 0.058 138);
  --bk-warn:oklch(0.975 0.03 85);
  --bk-warn-ink:oklch(0.42 0.08 65);
  --bk-red:oklch(0.52 0.18 27);
  --bk-red-bg:oklch(0.972 0.018 27);
  --bk-ease:cubic-bezier(.23,1,.32,1);
  --bk-c:44px; /* cerchio dei giorni */
  position:relative;background:var(--white);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow-card);padding:24px 28px 28px
}
.bk [hidden]{display:none!important}
.bk h3,.bk h4{font-family:var(--font-display)}
.bk h4[tabindex]{outline:none}
.bk button{-webkit-tap-highlight-color:transparent}
.bk button:focus-visible,.bk a:focus-visible{outline:2px solid var(--bk-g);outline-offset:2px}
.bk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- intestazione: Matteo e durata ---------- */
.bk-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding-bottom:20px;border-bottom:1px solid var(--border-soft)}
.bk-who{display:flex;align-items:center;gap:14px;min-width:0}
.bk-who img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--paper-soft);box-shadow:0 0 0 1px var(--border),0 4px 12px rgba(18,24,20,.08)}
.bk-name{font-size:18px;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.bk-who p{margin-top:3px;font-size:14px;line-height:1.35;color:var(--ink-soft)}

/* durata: controllo segmentato, l'indicatore bianco scorre sotto la scelta */
.bk-seg{position:relative;isolation:isolate;display:inline-grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--paper-soft);border:1px solid var(--border);border-radius:14px}
.bk-seg::before{content:"";position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:calc((100% - 12px) / 2);border-radius:10px;background:var(--white);box-shadow:0 1px 2px rgba(18,24,20,.06),0 3px 10px rgba(18,24,20,.07);transition:transform .26s var(--bk-ease)}
.bk-seg[data-i="1"]::before{transform:translateX(calc(100% + 4px))}
.bk-seg button{appearance:none;border:0;background:transparent;border-radius:10px;min-height:48px;padding:7px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;font:inherit;color:var(--ink-soft);transition:color .2s ease,transform .12s ease}
.bk-seg button b{font-size:15px;font-weight:700;line-height:1.15;color:inherit}
.bk-seg button small{font-size:11.5px;line-height:1.2;color:var(--ink-dim);white-space:nowrap}
.bk-seg button[aria-pressed="true"]{color:var(--bk-g)}
.bk-seg button[aria-pressed="true"] small{color:var(--ink-soft)}
.bk-seg button:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.bk-seg button:not([aria-pressed="true"]):hover{color:var(--ink)}}

/* ---------- corpo: mese | orari ---------- */
.bk-body{display:grid;grid-template-columns:minmax(272px,400px) minmax(0,1fr);padding-top:20px}
.bk-month{padding-right:36px;min-height:388px}
.bk-side{min-width:0;padding-left:36px;border-left:1px solid var(--border-soft)}
.bk.is-ready .bk-body[aria-busy="true"] :is(.bk-month,.bk-pane),
.bk.is-busy :is(.bk-seg,.bk-month,.bk-link){opacity:.55;pointer-events:none;transition:opacity .2s ease}

.bk-mhead,.bk-side-h,.bk-pick{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:2px 12px;min-height:44px;margin-bottom:6px}
.bk-mhead h4,.bk-side-h h4,.bk-pick h4{font-size:17px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.bk-side-h p{font-size:12.5px;color:var(--ink-dim)}

.bk-mnav{display:flex;gap:2px;margin-right:-10px}
.bk-arrow{appearance:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background-color .15s ease,transform .12s ease}
.bk-arrow::before{content:"";width:8px;height:8px;border:solid currentColor;border-width:2px 2px 0 0;transform:translateX(-2px) rotate(45deg)}
.bk-arrow.is-prev::before{transform:translateX(2px) rotate(-135deg)}
.bk-arrow:active{transform:scale(.94)}
@media(hover:hover) and (pointer:fine){.bk-arrow:hover{background:var(--paper-soft)}}

/* il mese: griglia lun-dom, giorni con orari in verde chiaro, scelto pieno */
.bk-grid{width:100%;border-collapse:collapse;table-layout:fixed}
.bk-grid th{padding:0 0 6px;font-size:12px;font-weight:600;color:var(--ink-dim);text-align:center}
.bk-grid td{height:52px;padding:0;text-align:center;vertical-align:middle}
/* il bottone (area di tocco) è più grande del cerchio che si vede: tra i giorni resta aria */
.bk-d{position:relative;isolation:isolate;display:inline-grid;place-items:center;width:100%;max-width:52px;height:44px;font:500 15px/1 var(--font);font-variant-numeric:tabular-nums;color:var(--ink-dim)}
.bk-d::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:var(--bk-c);height:var(--bk-c);margin:calc(var(--bk-c) / -2) 0 0 calc(var(--bk-c) / -2);border-radius:50%;transition:background-color .15s ease,box-shadow .15s ease}
button.bk-d{appearance:none;border:0;padding:0;border-radius:50%;background:none;cursor:pointer;color:var(--bk-g);font-weight:700;transition:color .15s ease,transform .12s ease}
button.bk-d::before{background:var(--bk-tint)}
button.bk-d:active{transform:scale(.94)}
.bk button.bk-d:focus-visible{outline:none}
button.bk-d:focus-visible::before{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--bk-g)}
@media(hover:hover) and (pointer:fine){td:not([aria-selected="true"]) > button.bk-d:hover::before{background:var(--bk-tint-h)}}
td[aria-selected="true"] > .bk-d{color:#fff}
td[aria-selected="true"] > .bk-d::before{background:var(--bk-g);box-shadow:0 4px 12px rgba(46,122,51,.28)}
td[aria-selected="true"] > .bk-d:focus-visible::before{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--bk-g),0 4px 12px rgba(46,122,51,.28)}
.bk-d.is-off{opacity:.6}
.bk-d[aria-current="date"]::after{content:"";position:absolute;left:50%;top:calc(50% + var(--bk-c) / 2 - 10px);width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}

/* gli orari del giorno */
.bk-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:6px}
.bk-t{appearance:none;min-height:44px;padding:0 6px;border:1px solid var(--border);border-radius:10px;background:var(--white);font:600 15px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);cursor:pointer;transition:border-color .15s ease,color .15s ease,background-color .15s ease,transform .12s ease}
.bk-t:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.bk-t:not([aria-pressed="true"]):hover{border-color:var(--bk-g);color:var(--bk-g)}}
.bk-t[aria-pressed="true"]{background:var(--bk-g);border-color:var(--bk-g);color:#fff}

.bk-note{margin:2px 0 10px;padding:10px 12px;border-radius:10px;background:var(--bk-warn);color:var(--bk-warn-ink);font-size:14px;line-height:1.45}
.bk-note.is-mode{background:var(--paper-soft);color:var(--ink-soft)}

/* scheletro mentre arrivano gli orari (pochi istanti, di solito prima che la scheda sia in vista) */
.bk-sk-line{display:inline-block;width:9em;max-width:100%;height:.8em;border-radius:6px;background:var(--paper-soft);vertical-align:middle}
.bk-sk td::before{content:"";display:inline-block;width:var(--bk-c);height:var(--bk-c);border-radius:50%;background:var(--paper-soft)}
.bk-sk-t{display:block;border-color:var(--border-soft);background:var(--paper-soft)}
.bk-sk-line,.bk-sk td::before,.bk-sk-t{animation:bk-pulse 1.1s ease-in-out infinite alternate}
@keyframes bk-pulse{to{opacity:.45}}

/* ---------- mini modulo, nella colonna degli orari ---------- */
.bk-form{max-width:440px}
.bk-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.bk-link{appearance:none;border:0;background:none;min-height:44px;padding:0 2px;font:600 14.5px/1 var(--font);color:var(--bk-g);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.bk-f{margin-bottom:12px}
.bk-f label{display:block;margin-bottom:6px;font-size:13.5px;font-weight:600;color:var(--ink)}
.bk-f input{width:100%;min-height:48px;padding:12px 14px;font:500 16px/1.2 var(--font);color:var(--ink);background:var(--white);border:1px solid var(--border);border-radius:10px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.bk-f input:focus{border-color:var(--bk-g);box-shadow:0 0 0 4px rgba(46,122,51,.14)}
.bk-f input[aria-invalid="true"]{border-color:var(--bk-red);box-shadow:0 0 0 4px oklch(0.6 0.18 27 / .12)}
.bk-err{margin-top:6px;font-size:13px;line-height:1.4;color:var(--bk-red)}
.bk-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.bk-submit{appearance:none;width:100%;min-height:50px;margin-top:4px;border:0;border-radius:10px;background:var(--bk-g);color:#fff;font:700 16px/1 var(--font);cursor:pointer;box-shadow:0 6px 16px rgba(46,122,51,.2);transition:filter .15s ease,transform .12s ease,opacity .15s ease}
.bk-submit:active{transform:scale(.98)}
.bk-submit[aria-busy="true"]{cursor:progress;opacity:.8}
@media(hover:hover) and (pointer:fine){.bk-submit:hover{filter:brightness(.94)}}
.bk-fail{margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--bk-red-bg);color:oklch(0.42 0.14 27);font-size:14px;line-height:1.5}
.bk-fail a,.bk-fail button{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.bk-fail button{appearance:none;border:0;background:none;padding:0;font:inherit;cursor:pointer}
.bk-legal{margin-top:12px;font-size:12.5px;line-height:1.5;color:#666E80;text-align:center}
.bk-legal a{color:var(--ink-soft);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}

/* ---------- prenotato ---------- */
.bk-done{display:flex;align-items:flex-start;gap:16px;max-width:620px;padding:28px 0 8px}
.bk-ok{flex-shrink:0;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bk-tint)}
.bk-ok::before{content:"";width:16px;height:9px;border:solid var(--bk-g);border-width:0 0 2.5px 2.5px;transform:translateY(-2px) rotate(-45deg)}
.bk[data-result="live"] .bk-ok{background:var(--bk-g)}
.bk[data-result="live"] .bk-ok::before{border-color:#fff}
.bk[data-result="uncertain"] .bk-ok{background:var(--bk-warn)}
.bk[data-result="uncertain"] .bk-ok::before{content:"!";width:auto;height:auto;border:0;transform:none;font:800 20px/1 var(--font);color:var(--bk-warn-ink)}
.bk-done h4{font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--ink);padding-top:9px}
.bk-done p{margin-top:8px;font-size:16px;line-height:1.55;color:var(--ink-soft)}
.bk-done p b{color:var(--ink);overflow-wrap:anywhere}
.bk-done p a{color:var(--bk-g);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.bk.is-done .bk-seg{display:none}

/* senza JavaScript: solo il link al calendario di Matteo */
html:not(.js) .bk-body,html:not(.js) .bk-seg{display:none}
.bk-nojs{padding:22px 0 4px;font-size:16px}
.bk-nojs a{color:var(--bk-g);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- colonna unica: mese, poi orari e modulo sotto ---------- */
@media(max-width:760px){
  .bk-body{grid-template-columns:minmax(0,1fr);padding-top:14px}
  .bk-month{padding-right:0;min-height:0}
  .bk-side{padding:18px 0 0;margin-top:10px;border-left:0;border-top:1px solid var(--border-soft)}
  .bk-form{max-width:none}
}
/* telefono: scheda quasi a tutta larghezza (16 px dal bordo), durata a tutta larghezza */
@media(max-width:640px){
  .bk{--bk-c:40px;padding:16px 12px 14px;border-radius:20px;margin:0 -8px}
  .bk-top{padding:0 2px 16px}
  .bk-seg{width:100%}
  .bk-seg button{padding:7px 8px}
  .bk-mhead{padding-left:4px}
  .bk-side-h,.bk-pick{padding:0 2px}
  .bk-grid td{height:48px}
  .bk-times{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}
  .bk-done{padding:22px 2px 6px}
  .bk-done h4{font-size:20px}
}
@media(max-width:374px){
  .bk{--bk-c:36px;margin:0 -16px;padding-left:8px;padding-right:8px}
}

@media(prefers-reduced-motion:reduce){
  .bk-seg::before{transition:none}
  .bk :is(.bk-seg button,button.bk-d,.bk-t,.bk-submit,.bk-arrow):active{transform:none}
  .bk-sk-line,.bk-sk td::before,.bk-sk-t{animation:none}
}