/* ──────────────────────────────────────────────────────────────────
   RönYen — Consultation Booking page (/consultation-booking/).
   Minimal "checkout" chrome + two-column form/summary. Front-of-site
   header/footer are skipped for this template; this file owns the page.
   Brand tokens only (brand.css); white/neutral rgba shadows are allowed.
   ────────────────────────────────────────────────────────────────── */

body.bk-page{
  background:var(--bg);
}
.bk-main .wrap,
.bk-hdr .wrap{ max-width:1200px; margin:0 auto; padding:0 40px; }

/* ── Header chrome (dark) ──────────────────────────────────────── */
.bk-hdr{ background:var(--nav); color:#fff; }
.bk-hdr .wrap{ display:flex; align-items:center; gap:20px; min-height:64px; }
.bk-logo{ display:inline-flex; align-items:center; flex:none; }
.bk-crumb{ display:flex; align-items:center; gap:10px; font-size:.85rem; font-weight:500; }
.bk-crumb-muted{ color:var(--nav-muted); }
.bk-crumb-sep{ color:var(--nav-muted); }
.bk-crumb-cur{ color:#fff; }
.bk-free-pill{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:999px;
  background:color-mix(in srgb, var(--wellness) 22%, transparent);
  border:1px solid color-mix(in srgb, var(--wellness) 45%, transparent);
  color:#fff; font-size:.78rem; font-weight:600; white-space:nowrap;
}
.bk-free-pill svg{ width:15px; height:15px; flex:none; fill:none; stroke:var(--wellness); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ── Page head ─────────────────────────────────────────────────── */
.bk-main{ padding:40px 0 80px; }
.bk-head{ max-width:680px; margin-bottom:32px; }
.bk-head h1{ font-family:var(--f); font-weight:600; font-size:clamp(1.8rem,3vw,2.4rem); line-height:1.1; letter-spacing:-.02em; color:var(--heading); }
.bk-head .sub{ margin-top:12px; color:var(--muted); font-weight:300; font-size:1.05rem; line-height:1.55; }

/* ── Grid ──────────────────────────────────────────────────────── */
.bk-grid{ display:grid; grid-template-columns:1fr 360px; gap:28px; align-items:start; }
.bk-form-col{ display:flex; flex-direction:column; gap:18px; min-width:0; }

/* ── Section card ──────────────────────────────────────────────── */
.co-section{
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl);
  padding:26px 26px 28px; box-shadow:var(--shadow-card);
}
.co-section-head{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.co-section-head .num{
  width:28px; height:28px; flex:none; border-radius:50%;
  background:var(--nav); color:#fff; display:grid; place-items:center;
  font-weight:600; font-size:.85rem;
}
.co-section-head h2{ font-family:var(--f); font-weight:600; font-size:1.15rem; letter-spacing:-.01em; color:var(--heading); }
.co-section-head .opt{ font-weight:400; font-size:.85rem; color:var(--muted); }

/* ── Channel cards ─────────────────────────────────────────────── */
.chan-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
/* An odd final card (e.g. the 5th channel option) spans the full width. */
.chan-grid .chan-card:last-child:nth-child(odd){ grid-column:1 / -1; }
.chan-card{
  position:relative; display:block; padding:18px 18px 16px;
  border:1px solid var(--border); border-radius:var(--r-lg); cursor:pointer;
  background:var(--bg); transition:border-color .15s, background .15s, box-shadow .15s;
}
.chan-card:hover{ border-color:var(--wellness); }
.chan-card input{ position:absolute; opacity:0; pointer-events:none; }
.chan-card.is-checked{
  border-color:var(--wellness); background:var(--wellness-light);
  box-shadow:0 0 0 1px var(--wellness);
}
.chan-ic{
  display:grid; place-items:center; width:38px; height:38px; border-radius:var(--r-md);
  background:#fff; border:1px solid var(--border); margin-bottom:12px; color:var(--wellness-text);
}
.chan-card.is-checked .chan-ic{ background:var(--wellness); border-color:var(--wellness); color:#fff; }
.chan-ic svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.chan-t{ display:block; font-weight:600; font-size:1rem; color:var(--heading); }
.chan-d{ display:block; margin-top:3px; font-size:.84rem; line-height:1.45; color:var(--muted); }

/* ── Outcall notice (reveal) ───────────────────────────────────── */
.outcall-notice{ max-height:0; opacity:0; overflow:hidden; transition:max-height .35s ease, opacity .3s ease, margin .3s ease; }
.outcall-notice.is-open{ max-height:220px; opacity:1; margin-top:14px; }
.outcall-in{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--sauna-light); border:1px solid color-mix(in srgb, var(--sauna) 35%, transparent);
  border-radius:var(--r-lg); padding:14px 16px;
}
.outcall-ic{ flex:none; color:var(--sauna-text); }
.outcall-ic svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.outcall-in p{ font-size:.86rem; line-height:1.5; color:var(--sauna-text); }
.outcall-in strong{ font-weight:600; }

/* ── Date chips ────────────────────────────────────────────────── */
.date-row{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.date-chip{
  flex:0 0 auto; width:74px; padding:12px 0; border-radius:var(--r-lg);
  border:1px solid var(--border); background:var(--bg); cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.date-chip:hover{ border-color:var(--wellness); }
.date-chip .dc-day{ font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.date-chip .dc-num{ font-size:1.25rem; font-weight:600; color:var(--heading); line-height:1; }
.date-chip .dc-mon{ font-size:.7rem; color:var(--muted); }
.date-chip.is-sel{ border-color:var(--wellness); background:var(--wellness-light); box-shadow:0 0 0 1px var(--wellness); }
.date-chip.is-sel .dc-day,
.date-chip.is-sel .dc-mon{ color:var(--wellness-text); }

/* ── Time slots ────────────────────────────────────────────────── */
.slot-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; }
.slot{
  padding:12px 14px; border-radius:var(--r-lg); border:1px solid var(--border);
  background:var(--bg); cursor:pointer; font-weight:600; font-size:.92rem; color:var(--heading);
  text-align:left; transition:border-color .15s, background .15s, box-shadow .15s;
}
.slot span{ display:block; font-weight:400; font-size:.76rem; color:var(--muted); margin-top:2px; }
.slot:hover{ border-color:var(--wellness); }
.slot.is-sel{ border-color:var(--wellness); background:var(--wellness-light); box-shadow:0 0 0 1px var(--wellness); }
.slot.is-sel span{ color:var(--wellness-text); }

/* ── Fields ────────────────────────────────────────────────────── */
.field{ display:flex; flex-direction:column; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.field-row:last-child{ margin-bottom:0; }
.field-label{ display:block; font-size:.82rem; font-weight:600; color:var(--heading); margin-bottom:6px; }
.field-help{ font-size:.82rem; color:var(--muted); }
.bk-main input[type="text"],
.bk-main input[type="email"],
.bk-main input[type="tel"],
.bk-main textarea{
  width:100%; font-family:var(--f); font-size:.95rem; color:var(--heading);
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md);
  padding:11px 13px; transition:border-color .15s, box-shadow .15s;
}
.bk-main textarea{ resize:vertical; min-height:96px; line-height:1.55; }
.bk-main input::placeholder,
.bk-main textarea::placeholder{ color:var(--placeholder); }
.bk-main input:focus,
.bk-main textarea:focus{ outline:none; border-color:var(--nav); box-shadow:0 0 0 3px rgba(37,45,53,.1); }

/* ── Topic chips ───────────────────────────────────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  position:relative; display:inline-flex; align-items:center; cursor:pointer;
  padding:9px 16px; border-radius:999px; border:1px solid var(--border);
  background:var(--bg); font-size:.86rem; font-weight:500; color:var(--body);
  transition:border-color .15s, background .15s, color .15s;
}
.chip input{ position:absolute; opacity:0; pointer-events:none; }
.chip:hover{ border-color:var(--nav); }
.chip.is-on{ background:var(--nav); border-color:var(--nav); color:#fff; }

/* ── Address reveal ────────────────────────────────────────────── */
.addr-wrap{ max-height:0; opacity:0; overflow:hidden; transition:max-height .4s ease, opacity .3s ease, margin .3s ease; }
.addr-wrap.is-open{ max-height:520px; opacity:1; margin-top:14px; }
.addr-wrap .field{ margin-bottom:14px; }
.addr-wrap .field-row{ margin-bottom:0; }

/* ── Consent ───────────────────────────────────────────────────── */
.check{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; }
.check input{ width:20px; height:20px; flex:none; margin-top:2px; accent-color:var(--wellness); }
.check-main{ display:block; font-weight:500; font-size:.95rem; color:var(--heading); }
.check-sub{ display:block; margin-top:4px; font-size:.82rem; line-height:1.5; color:var(--muted); }
.check-sub a{ color:var(--wellness-text); text-decoration:underline; text-underline-offset:2px; }

/* ── Buttons (booking-scoped variants) ─────────────────────────── */
.bk-main .btn-wellness{ background:var(--wellness); color:#fff; border:1px solid transparent; }
.bk-main .btn-wellness:hover{ background:var(--wellness-hover); }
.bk-main .btn-wellness:disabled{ background:var(--border); color:var(--placeholder); cursor:not-allowed; }
.bk-main .btn-light{ background:#fff; color:var(--heading); border:1px solid var(--border); }
.bk-main .btn-light:hover{ background:var(--surface); }

/* ── Footer of form ────────────────────────────────────────────── */
.bk-error{
  margin-top:16px; padding:12px 14px; border-radius:var(--r-md);
  background:var(--sauna-light); border:1px solid color-mix(in srgb, var(--sauna) 35%, transparent);
  color:var(--sauna-text); font-size:.88rem;
}
.co-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; }
.bk-back{ font-size:.9rem; font-weight:500; color:var(--muted); }
.bk-back:hover{ color:var(--heading); }
.bk-submit{ min-width:220px; }

/* ── Success state ─────────────────────────────────────────────── */
.bk-success{
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl);
  box-shadow:var(--shadow-card); padding:48px 40px; text-align:center; max-width:620px; margin:0 auto;
}
.bk-success-ic{ display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--wellness-light); color:var(--wellness); margin-bottom:18px; }
.bk-success-ic svg{ width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bk-success h2{ font-family:var(--f); font-weight:600; font-size:1.5rem; color:var(--heading); margin-bottom:10px; }
.bk-success p{ color:var(--muted); font-size:.98rem; line-height:1.6; margin-bottom:24px; }
.bk-success p a{ color:var(--wellness-text); font-weight:500; }

/* ── Summary ───────────────────────────────────────────────────── */
.summary{ position:sticky; top:24px; display:flex; flex-direction:column; gap:16px; }
.summary-card{ background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl); box-shadow:var(--shadow-card); padding:22px; }
.sum-chan{ display:flex; align-items:center; gap:12px; padding-bottom:18px; border-bottom:1px solid var(--hairline); margin-bottom:16px; }
.sum-chan-ic{ display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:var(--r-md); background:var(--surface); color:var(--muted); }
.sum-chan.is-set .sum-chan-ic{ background:var(--wellness-light); color:var(--wellness-text); }
.sum-chan-ic svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sum-chan-name{ font-weight:600; font-size:1.02rem; color:var(--heading); }
.sum-when{ display:flex; flex-direction:column; gap:10px; }
.sum-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.sum-k{ font-size:.82rem; color:var(--muted); }
.sum-v{ font-size:.9rem; font-weight:600; color:var(--heading); text-align:right; }
.sum-v.sum-empty{ font-weight:400; color:var(--placeholder); }
.sum-cost{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:16px; border-top:1px solid var(--hairline); }
.sum-cost-v{ font-size:1.1rem; font-weight:700; color:var(--wellness-text); }

.trust-strip{ display:flex; flex-direction:column; gap:12px; padding:18px 20px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-xl); }
.trust-row{ font-size:.84rem; line-height:1.5; color:var(--muted); }
.trust-row strong{ color:var(--heading); font-weight:600; }
.trust-row a{ color:var(--wellness-text); font-weight:600; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width:1080px){
  .bk-grid{ grid-template-columns:1fr; }
  .summary{ position:static; }
}
@media (max-width:760px){
  .bk-hdr .wrap,
  .bk-main .wrap{ padding:0 20px; }
  .bk-crumb{ display:none; }
  .chan-grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .co-foot{ flex-direction:column-reverse; align-items:stretch; }
  .bk-submit{ width:100%; }
  .bk-back{ text-align:center; }
}