/* Malé Thajsko, booking.css v1 (rezervacia.html) */
.bk{padding-block:calc(100px + clamp(28px,4vw,56px)) var(--sec)}
@media (max-width:1023px){.bk{padding-top:calc(64px + var(--s5))}}
.bk-head{max-width:62ch;margin-bottom:clamp(28px,4vw,44px)}
/* Rovnaký odstup ako v ostatných hlavičkách stránok (style.css). Vyššia hodnota,
   lebo záporný margin-block gradientového nadpisu z nej ukrojí .19em jeho veľkosti. */
.bk-head .lead{margin-top:clamp(24px,2.4vw,34px)}
.bk-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,4vw,56px);align-items:start}
.bk-main{min-width:0}
.bk-step{padding:clamp(22px,3vw,32px) 0;border-top:1px solid var(--line)}
.bk-step h2{font-size:clamp(26px,3vw,34px);display:flex;align-items:center;gap:14px;margin-bottom:20px}
.bk-step h2 .n{font-family:var(--font-body);font-size:14px;font-weight:500;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.lbl{font-size:14px;color:var(--ink-50);margin-bottom:8px}
.hint{font-size:14px;color:var(--ink-50);margin-top:10px}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.svc button{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font:inherit;color:inherit;cursor:pointer;transition:border-color .25s var(--ease),background .25s var(--ease)}
.svc button:hover{border-color:rgba(49,22,54,.45);background:#fffafc} .svc button:active{transform:scale(.99);background:var(--surface)}
.svc button[aria-checked=true]{border-color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink)}
.svc button b{display:block;font-weight:500;font-size:15.5px;line-height:1.3}
.svc button small{display:block;font-size:13px;color:var(--ink-70);margin-top:3px}
.svc button em{font-style:normal;font-weight:500;white-space:nowrap;font-size:15px}
.bk-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px}
.seg button{font:inherit;font-size:15px;font-weight:450;border:0;background:none;border-radius:999px;padding:9px 16px;cursor:pointer;color:var(--ink);transition:background .25s var(--ease)}
.seg button:hover{background:var(--surface)} .seg button:active{transform:scale(.97)} .seg button[aria-checked=true]{background:var(--ink);color:#fff}
.seg button:disabled{opacity:.35;cursor:not-allowed}
.days{max-width:100%;display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.days button{flex:0 0 auto;scroll-snap-align:start;min-width:96px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 12px;font:inherit;color:inherit;cursor:pointer;text-align:left;display:grid;gap:2px;transition:border-color .25s var(--ease),background .25s var(--ease)}
.days button small{font-size:12.5px;color:var(--ink-70);text-transform:capitalize}
.days button b{font-weight:500;font-size:15px}
.days button span{font-size:12.5px;color:var(--ink-70)}
.days button:hover{border-color:rgba(49,22,54,.45)} .days button:active{transform:scale(.98)}
.days button[aria-checked=true]{border-color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink)}
.days button:disabled{opacity:.45;cursor:not-allowed}
.times-wrap{margin-top:18px}
.times{display:flex;flex-wrap:wrap;gap:8px}
.times button{font:inherit;font-size:15px;font-variant-numeric:tabular-nums;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;color:var(--ink);transition:border-color .25s var(--ease),background .25s var(--ease)}
.times button.pair{border-color:rgba(199,148,33,.6);color:#6d4f0c}
.times button:hover{border-color:rgba(49,22,54,.5);background:var(--surface)} .times button:active{transform:scale(.95)}
.times button[aria-checked=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.fields label{display:grid;gap:6px;font-size:14px;color:var(--ink-70)}
.fields .full{grid-column:1/-1}
.fields .opt{color:var(--ink-50)}
.fields input::placeholder,.fields textarea::placeholder{color:rgba(49,22,54,.55)}
.fields input,.fields textarea{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%}
.fields input:focus,.fields textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(49,22,54,.08)}
.fields .chk{grid-template-columns:auto 1fr;align-items:start;gap:10px;font-size:14px;line-height:1.5}
.fields .chk input{width:18px;height:18px;margin-top:2px;accent-color:var(--ink)}
.fields .chk a{text-decoration:underline}
.bk-side{position:sticky;top:112px}
.sum{background:var(--ink);color:#fff;border-radius:22px;padding:clamp(22px,3vw,30px)}
.sum h3{font-size:24px;margin-bottom:14px}
.sum dl{margin:0}
.sum dl div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:15px}
.sum dt{color:rgba(255,255,255,.6)} .sum dd{margin:0;text-align:right;font-weight:450}
.sum .total{border-bottom:0;padding-top:14px} .sum .total dd.num{font-family:var(--font-display);font-size:26px}
.btn.wide{width:100%;justify-content:center;margin-top:14px}
.sum .btn.wide{background:#fff;color:var(--ink)} .sum .btn.wide::before,.sum .btn.wide::after{content:none} .sum .btn.wide:hover{background:var(--surface);filter:none}
.sum .hint{color:rgba(255,255,255,.7)} .sum .hint.alt a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .3s} .sum .hint.alt a:hover{border-color:#fff}
.err{background:#fff;color:#8a1c1c;border-radius:10px;padding:10px 12px;font-size:14px;margin-top:12px}
.done{max-width:60ch;margin:0 auto;text-align:center;padding:clamp(24px,4vw,48px) 0;display:grid;gap:18px;justify-items:center}
.done h2{font-size:clamp(30px,4vw,44px)}
@media (max-width:1023px){.bk-grid{grid-template-columns:1fr}.bk-side{position:static}.sum{border-radius:18px}}
@media (max-width:1023px){.svc{grid-template-columns:1fr}.bk-row{grid-template-columns:1fr}.fields{grid-template-columns:1fr}.seg{display:flex}.seg button{flex:1;padding:9px 8px}}

#person2{margin-top:16px}
#person2 .lbl{display:block}
.sel{font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 40px 11px 14px;width:100%;max-width:420px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23311636' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:14px}
.sel:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(49,22,54,.08)}

/* ===== v9: výber masérky, párová miestnosť, legenda časov (prevzaté z prototypu) ===== */
.bk-head h1{font-size:clamp(32px,4.2vw,54px);line-height:1.06}
.bk-step:first-child{border-top:0;padding-top:8px}
.ths-wrap{margin-top:24px}
.ths{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ths button{display:flex;align-items:center;gap:12px;text-align:left;font:inherit;font-size:16px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px 8px 8px;cursor:pointer;color:var(--ink);transition:border-color .25s var(--ease),background .25s var(--ease)}
.ths button:hover{border-color:rgba(49,22,54,.5);background:#fffafc} .ths button:active{transform:scale(.99)}
.ths button[aria-checked=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.ths button.both{grid-column:1/-1;justify-self:start}
.ths button span.tx{display:grid;line-height:1.25;min-width:0}
.ths button small{color:inherit;opacity:.65;font-size:13.5px;line-height:1.3}
.av{width:64px;height:64px;border-radius:50%;background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:22px;color:var(--ink);flex:0 0 auto;box-shadow:0 0 0 2px var(--gold-soft);overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.ths button[aria-checked=true] .av{box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.av.any{background:#fff;font-family:var(--font-body);font-size:20px;box-shadow:0 0 0 1px var(--line);color:var(--ink-50)}
.ths .av+.av{margin-left:-22px}
.roomseg{margin-top:14px}
.times button.th-a::after,.times button.th-n::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-left:8px;vertical-align:middle;background:var(--gold)}
.times button.th-a::after{background:#6a3470}
.times button[aria-checked=true]::after{background:#fff}
.legend{display:inline-flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.legend i.i-a{background:#6a3470} .legend i.i-n{background:var(--gold)}
.done .ref{font-family:var(--font-display);font-size:28px}
.done-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.hp{display:none!important}
@media (max-width:1023px){.ths{grid-template-columns:1fr}.av{width:56px;height:56px}}

/* ===== v11: podmienky objednania, väčšia fotka masérky, stránka zrušenia (Jakub 6. 9. 2026) ===== */
 /* Nie .terms: tá trieda je v style.css obsadená blokom podmienok na úvodnej stránke
   (dvojstĺpcový grid) a rozhodila by tento blok. Triedy rezervácie preto s predponou bk-. */
.bk-terms{display:grid;gap:10px;grid-template-columns:1fr}
.bk-terms .chk{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:10px;font-size:14px;line-height:1.5;cursor:pointer}
.bk-terms .chk input{width:18px;height:18px;margin-top:2px;accent-color:var(--ink)}
.bk-terms .chk b{font-weight:500}
.bk-terms-note{font-size:13.5px;line-height:1.5;color:var(--ink-50);margin:0 0 0 28px;max-width:68ch}
.bk-terms-note.alt{font-size:12.5px}

/* Klik na fotku otvorí väčšiu (Jakub 6. 9. 2026). Tlačidlo prekrýva presne fotku a je
   súrodencom výberu masérky: tlačidlo v tlačidle je neplatné HTML a klik na fotku by inak
   zároveň prepol výber. Odznak s lupou hovorí, že sa fotka dá zväčšiť. */
.th-item{position:relative;display:block;min-width:0}
.th-item>button[role=radio]{width:100%}
.th-item.both{grid-column:1/-1;justify-self:start;display:inline-block;width:auto}
/* Špecificita musí prebiť `.ths button` (0,1,1), inak je tlačidlo biele a prekryje fotku. */
.ths button.th-zoom{position:absolute;left:8px;top:8px;width:64px;height:64px;border-radius:50%;
  background:transparent;border:0;padding:0;cursor:zoom-in;box-shadow:none}
.ths button.th-zoom:hover{background:transparent}
.ths .th-zoom i{position:absolute;right:-1px;bottom:-1px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:var(--ink);
  box-shadow:0 1px 4px rgba(49,22,54,.28);transition:transform .25s var(--ease)}
.ths .th-zoom i svg{width:13px;height:13px;display:block}
.ths .th-zoom:hover i{transform:scale(1.12)}
.ths button.th-zoom:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ths .th-item.both button.th-zoom{left:8px;top:8px}

.lb{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(31,12,34,.72);backdrop-filter:blur(3px)}
html.lb-open{overflow:hidden}
.lb-box{position:relative;max-width:min(520px,100%);background:var(--bg);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(31,12,34,.34)}
.lb-box img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.lb-cap{margin:0;padding:14px 18px 16px;display:flex;align-items:baseline;gap:8px}
.lb-cap b{font-family:var(--font-display);font-size:24px;font-weight:400;line-height:1}
.lb-cap span{font-size:14px;color:var(--ink-50)}
.lb-nav,.lb-close{position:absolute;display:grid;place-items:center;cursor:pointer;padding:0;color:var(--ink);
  background:rgba(255,255,255,.92);border:0;border-radius:50%;box-shadow:0 2px 10px rgba(31,12,34,.2)}
.lb-nav{top:calc(50% - 34px);width:40px;height:40px}
.lb-nav svg{width:20px;height:20px}
.lb-nav.prev{left:12px} .lb-nav.next{right:12px}
.lb-close{top:12px;right:12px;width:34px;height:34px}
.lb-close svg{width:17px;height:17px}
.lb-nav:hover,.lb-close:hover{background:#fff}
.lb-nav:focus-visible,.lb-close:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* stránka zrušenia termínu používa rovnaký blok ako potvrdenie rezervácie */
.done h1{font-size:clamp(30px,4vw,44px)}
.done form.done-cta{margin:0}

@media (max-width:1023px){
  .bk-terms-note{margin-left:0}
  .ths button.th-zoom{width:56px;height:56px}   /* .av je na mobile 56 px, nie 64 */
  .lb-box{max-width:100%}
  .th-item.both{width:100%}
  .th-item.both>button[role=radio]{width:100%}
}