/* Mediaway Reserveren: the guest side. The business's own colours come in as --brand --brand-ink --paper --ink. System fonts, no requests elsewhere. */
/* three styles: th-light (the business's colours on light) · th-dark (their colours on dark) · th-mw (Mediaway: dark, cyan → violet) */
:root { color-scheme: light; --ease: cubic-bezier(.2, .8, .2, 1); }
html.th-dark { color-scheme: dark; --paper: #111215; --ink: #efece7; }
html.th-mw { color-scheme: dark; --paper: #060a13; --ink: #eef3fb; --brand: #19d3f0; --brand-ink: #04121a; }
body {
  --card: color-mix(in oklab, var(--paper) 28%, #fff);
  --line: color-mix(in oklab, var(--ink) 11%, transparent);
  --line2: color-mix(in oklab, var(--ink) 19%, transparent);
  --muted: color-mix(in oklab, var(--ink) 58%, var(--paper));
  --soft: color-mix(in oklab, var(--brand) 10%, var(--card));
  --brand-fg: var(--brand);
  --cta: var(--brand);
}
.th-dark body, .th-mw body {
  --card: color-mix(in oklab, var(--paper) 91%, #fff);
  --muted: color-mix(in oklab, var(--ink) 62%, var(--paper));
  --soft: color-mix(in oklab, var(--brand) 20%, var(--card));
  --brand-fg: color-mix(in oklab, var(--brand) 55%, #fff);
}
.th-mw body { --brand-fg: #5ee7ff; --soft: rgba(25, 211, 240, .1); --cta: linear-gradient(90deg, #19d3f0, #19d3f0 40%, #8b5cf6); }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font: 400 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: radial-gradient(70rem 36rem at 100% -10%, color-mix(in oklab, var(--brand) 13%, transparent), transparent 62%), var(--paper);
}
.th-mw body { background: radial-gradient(60rem 30rem at 85% -10%, rgba(139, 92, 246, .16), transparent 60%), radial-gradient(50rem 26rem at -10% 0%, rgba(25, 211, 240, .1), transparent 60%), var(--paper); }
a { color: inherit; text-underline-offset: .2em; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--brand-fg); outline-offset: 2px; }
h1, h2 { letter-spacing: -.025em; line-height: 1.1; font-weight: 700; margin: 0; text-wrap: balance; }
h2:focus { outline: none; }
svg { flex: none; }

/* ───────── page + card ───────── */
.bk { min-height: 100dvh; display: grid; place-items: center; padding: clamp(0px, 4vw, 48px) clamp(0px, 3vw, 32px) 12px; }
.bk-card {
  width: min(1040px, 100%); display: grid; grid-template-columns: minmax(300px, .82fr) 1.18fr; background: var(--card); border-radius: 28px; overflow: hidden;
  min-height: min(720px, 90dvh); box-shadow: 0 0 0 1px var(--line), 0 40px 90px -50px color-mix(in oklab, var(--ink) 55%, transparent);
}
.bk-side { position: relative; color: #fff; isolation: isolate; display: flex; align-items: flex-end; min-height: 240px; }
.bk-side__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.bk-side__img--none {
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in oklab, var(--brand) 62%, #fff) 0%, var(--brand) 52%, color-mix(in oklab, var(--brand) 55%, #000) 100%);
}
.th-mw .bk-side__img--none { background: radial-gradient(90% 80% at 15% 10%, rgba(25, 211, 240, .55), transparent 60%), radial-gradient(90% 90% at 90% 30%, rgba(139, 92, 246, .6), transparent 60%), #0a1020; }
.bk-side::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .74)); }
.bk-side__in { padding: 36px; }
.bk-name { font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: -.035em; font-weight: 750; margin: 0 0 12px; text-wrap: balance; }
.bk-logo { display: block; max-height: 70px; max-width: 220px; margin: 0 0 16px; background: #fff; padding: 10px 14px; border-radius: 14px; }
.bk-addr { margin: 0 0 12px; opacity: .92; font-size: 15px; }
.bk-msg { margin: 0 0 14px; font-size: 15px; opacity: .92; max-width: 38ch; }
.bk-contact { margin: 0; font-size: 15px; }
.bk-contact a { color: #fff; }
.bk-flow { padding: clamp(24px, 4vw, 48px); min-width: 0; display: flex; flex-direction: column; }

/* ───────── progress + what you chose ───────── */
.bk-prog { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 22px; }
.bk-prog li { flex: 1; height: 4px; border-radius: 4px; background: var(--line); transition: background .3s; }
.bk-prog .is-done { background: color-mix(in oklab, var(--brand) 45%, var(--card)); }
.bk-prog .is-on { background: var(--cta); }
.bk-sum { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.bk-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 13px 6px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); font-size: 14px; font-weight: 550; transition: border-color .2s, background .2s;
}
.bk-chip svg { width: 17px; height: 17px; fill: none; stroke: var(--brand-fg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bk-chip:hover { border-color: var(--brand-fg); background: var(--soft); }
.bk-head { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 20px; }
.bk-head h2 { font-size: clamp(25px, 2.6vw, 31px); }
.bk-sub { color: var(--muted); margin: 7px 0 0; font-size: 15px; }
.bk-sub::first-letter { text-transform: uppercase; }
.bk-dim { color: var(--muted); }
.bk-back, .bk-icon {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--card); cursor: pointer;
  transition: border-color .2s, background .2s;
}
.bk-back svg, .bk-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bk-back:hover, .bk-icon:hover:not(:disabled) { border-color: var(--brand-fg); }
.bk-icon:disabled { opacity: .3; cursor: default; }
.bk-step.is-in { animation: bk-in .38s var(--ease); }
@keyframes bk-in { from { opacity: 0; transform: translateY(10px); } }

/* ───────── how many ───────── */
.bk-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 76px)); gap: 10px; }
.bk-num {
  aspect-ratio: 1; max-height: 72px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); font-size: 21px; font-weight: 650;
  font-variant-numeric: tabular-nums; cursor: pointer; transition: transform .15s var(--ease), border-color .2s, background .2s, color .2s;
}
.bk-num:hover { border-color: var(--brand-fg); transform: translateY(-1px); }
.bk-num.is-on, .bk-slot.is-on, .bk-day.is-on { background: var(--cta); color: var(--brand-ink); border-color: transparent; }
.bk-note { color: var(--muted); font-size: 14px; margin: 18px 0 0; }
.bk-note a { color: var(--ink); }

/* ───────── lists (treatments, rooms, zones) ───────── */
.bk-group { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 650; margin: 18px 0 8px; }
.bk-group:first-child { margin-top: 0; }
.bk-list { display: grid; gap: 8px; }
.bk-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; width: 100%; text-align: left; padding: 15px 16px 15px 18px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--card); cursor: pointer; transition: border-color .2s, background .2s, transform .15s var(--ease);
}
.bk-row:hover:not(:disabled) { border-color: var(--brand-fg); transform: translateY(-1px); }
.bk-row.is-on { border-color: var(--brand-fg); background: var(--soft); }
.bk-row:disabled { opacity: .5; cursor: default; }
.bk-row__t { font-weight: 620; }
.bk-row__m, .bk-row__d { grid-column: 1; color: var(--muted); font-size: 14px; }
.bk-row__d { margin-top: 2px; }
.bk-row svg { grid-column: 2; grid-row: 1 / span 3; width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ───────── calendar ───────── */
.bk-cal__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.bk-cal__title { font-weight: 650; font-size: 17px; margin: 0; text-transform: capitalize; }
.bk-cal__wd, .bk-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.bk-cal__wd { font-size: 12px; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.bk-cal__grid { gap: 4px; }
.bk-day {
  position: relative; aspect-ratio: 1; max-height: 58px; border: 0; border-radius: 14px; background: transparent; font-size: 16px; display: grid; place-items: center;
  cursor: pointer; font-variant-numeric: tabular-nums; transition: background .15s;
}
.bk-day:disabled { cursor: default; }
.bk-day.is-free { font-weight: 650; }
.bk-day.is-free::after { content: ""; position: absolute; bottom: 16%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--brand-fg); }
.bk-day.is-free:hover { background: var(--soft); }
.bk-day.is-full { color: var(--muted); }
.bk-day.is-full span { text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--ink) 35%, transparent); }
.bk-day.is-off { color: color-mix(in oklab, var(--ink) 26%, var(--paper)); }
.bk-day.is-today { box-shadow: inset 0 0 0 1.5px var(--line2); }
.bk-day.is-on::after { background: var(--brand-ink); }
.bk-day.is-span { background: var(--soft); }
.bk-day.is-wait { background: var(--line); opacity: .45; animation: bk-wait 1s ease-in-out infinite alternate; }
@keyframes bk-wait { to { opacity: .2; } }
.bk-pill { margin-left: 4px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); font-size: 13px; font-weight: 600; cursor: pointer; vertical-align: 1px; }
.bk-pill:hover { border-color: var(--brand-fg); }

/* ───────── times ───────── */
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; margin: 0 0 8px; }
.bk-slot {
  height: 50px; border-radius: 13px; border: 1px solid var(--line); background: var(--card); font-weight: 620; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s var(--ease);
}
.bk-slot:hover:not(:disabled) { border-color: var(--brand-fg); transform: translateY(-1px); }
.bk-slot:disabled { background: transparent; color: var(--muted); opacity: .55; text-decoration: line-through; cursor: default; }
.bk-slots.is-wait span, .bk-list.is-wait span { height: 50px; border-radius: 13px; background: var(--line); animation: bk-wait 1s ease-in-out infinite alternate; }
.bk-list.is-wait span { height: 72px; }
.bk-empty { padding: 16px 18px; border-radius: 14px; background: var(--soft); margin: 0 0 14px; }

/* ───────── details ───────── */
.bk-form { display: grid; gap: 14px; }
.bk-two { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.bk-field { display: grid; gap: 6px; font-size: 14px; font-weight: 620; }
.bk-field small { font-weight: 400; color: var(--muted); }
.bk-field input, .bk-field textarea {
  font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); width: 100%; min-height: 52px; padding: 13px 14px; border-radius: 14px;
  border: 1px solid var(--line2); background: var(--card); transition: border-color .2s, box-shadow .2s;
}
.bk-field textarea { min-height: 84px; resize: vertical; }
.bk-field input:focus, .bk-field textarea:focus { outline: none; border-color: var(--brand-fg); box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 18%, transparent); }
.bk-field input:user-invalid { border-color: #b3261e; }
.bk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.bk-specials { border: 0; padding: 0; margin: 0 0 4px; display: grid; gap: 8px; min-width: 0; }
.bk-specials legend { font-weight: 650; font-size: 15px; padding: 0; margin: 0 0 8px; }
.bk-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.bk-opt input { accent-color: var(--brand-fg); width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.bk-opt b { display: block; font-weight: 620; }
.bk-opt em { font-style: normal; color: var(--brand-fg); margin-left: 6px; white-space: nowrap; }
.bk-opt small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.bk-opt:has(input:checked) { border-color: var(--brand-fg); background: var(--soft); }
.bk-err { margin: 0; padding: 12px 14px; border-radius: 12px; background: #fdecea; color: #8c1d18; font-size: 15px; }
.th-dark .bk-err, .th-mw .bk-err { background: rgba(240, 82, 82, .14); color: #ff9b9b; }
.bk-consent { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }

/* ───────── buttons ───────── */
.bk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 24px; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--cta); color: var(--brand-ink); font-weight: 650; font-size: 17px; text-decoration: none;
  box-shadow: 0 12px 26px -14px color-mix(in oklab, var(--brand) 85%, transparent); transition: transform .15s var(--ease), filter .2s;
}
.bk-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.bk-btn:active { transform: scale(.99); }
.bk-btn:disabled { opacity: .75; cursor: progress; transform: none; }
.bk-form .bk-btn { width: 100%; margin-top: 4px; }
.bk-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line2); font-size: 15px; min-height: 48px; }
.bk-btn--danger { background: #b3261e; color: #fff; box-shadow: none; }
.bk-link { background: none; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; padding: 10px; }
.bk-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: bk-spin .7s linear infinite; }
@keyframes bk-spin { to { transform: rotate(360deg); } }

/* ───────── done ───────── */
.bk-done { text-align: center; display: grid; justify-items: center; gap: 4px; padding: 18px 0 6px; margin: auto 0; }
.bk-tick { width: 78px; height: 78px; margin-bottom: 12px; }
.bk-tick circle { fill: var(--soft); stroke: var(--brand-fg); stroke-width: 2; stroke-dasharray: 160; stroke-dashoffset: 160; animation: bk-draw .7s var(--ease) forwards; }
.bk-tick path { fill: none; stroke: var(--brand-fg); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: bk-draw .45s .45s var(--ease) forwards; }
@keyframes bk-draw { to { stroke-dashoffset: 0; } }
.bk-done h2 { font-size: clamp(26px, 3vw, 32px); }
.bk-when { font-size: 19px; font-weight: 620; margin: 10px 0 0; }
.bk-done .bk-sub { margin-top: 2px; }
.bk-codeline { margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.bk-codeline b, .bk-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; color: var(--ink); font-size: 15px; }
.bk-done .bk-note { max-width: 36ch; margin-top: 10px; }
.bk-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 18px 0 4px; }

/* ───────── small pages (your reservation, privacy, unavailable) ───────── */
.bk--msg .bk-card { display: block; max-width: 580px; min-height: 0; padding: clamp(26px, 5vw, 44px); }
.bk--msg h1 { font-size: clamp(26px, 4vw, 34px); margin: 0 0 10px; }
.bk--msg p { margin: 0 0 14px; }
.bk-eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.bk-mine h1::first-letter { text-transform: uppercase; }
.bk-what { font-size: 17px; color: var(--muted); }
.bk-mine .bk-actions { justify-content: flex-start; }
.bk-mine form { margin-top: 18px; }
.bk-pill--confirmed, .bk-pill--arrived, .bk-pill--pending, .bk-pill--cancelled, .bk-pill--declined, .bk-pill--noshow {
  display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 650; margin-right: 8px;
}
.bk-pill--confirmed, .bk-pill--arrived { background: #e3f4e8; color: #17603a; }
.bk-pill--pending { background: #fff3d6; color: #7a5300; }
.bk-pill--cancelled, .bk-pill--declined, .bk-pill--noshow { background: #f6e3e1; color: #8c1d18; }
.bk-ok { padding: 12px 14px; border-radius: 12px; background: #e3f4e8; color: #17603a; }
.th-dark .bk-ok, .th-mw .bk-ok, .th-dark .bk-pill--confirmed, .th-mw .bk-pill--confirmed { background: rgba(52, 199, 120, .16); color: #7ee2a8; }
.th-dark .bk-pill--pending, .th-mw .bk-pill--pending { background: rgba(245, 180, 40, .16); color: #ffd27a; }
.th-dark .bk-pill--cancelled, .th-mw .bk-pill--cancelled, .th-dark .bk-pill--declined, .th-mw .bk-pill--declined { background: rgba(240, 82, 82, .14); color: #ff9b9b; }
.bk-small { font-size: 14px; color: var(--muted); }
.bk-legal h2 { font-size: 18px; margin: 26px 0 6px; }
.bk-legal p { color: color-mix(in oklab, var(--ink) 80%, var(--paper)); }
.bk-foot { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); width: 100%; }
.bk-foot a { color: inherit; }

/* ───────── phones ───────── */
@media (max-width: 819px) {
  body { background: var(--card); }
  .bk { padding: 0; place-items: stretch; align-content: start; }
  .bk-card { grid-template-columns: 1fr; border-radius: 0; box-shadow: none; min-height: 0; }
  .bk-side { min-height: 210px; }
  .bk-side__in { padding: 22px 20px; }
  .bk-name { font-size: 32px; margin-bottom: 8px; }
  .bk-logo { max-height: 54px; margin-bottom: 10px; }
  .bk-msg { font-size: 14px; margin-bottom: 8px; }
  .bk-addr, .bk-contact { font-size: 14px; margin-bottom: 4px; }
  .bk-flow { padding: 22px 18px 26px; }
  .bk--msg .bk-card { border-radius: 0; }
}
@media (max-width: 560px) {
  .bk-two { grid-template-columns: 1fr; }
  .bk-nums { grid-template-columns: repeat(4, 1fr); }
  .bk-slots { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .bk-day { border-radius: 12px; }
}

/* ───────── inside the widget (iframe) ───────── */
.is-embed { background: var(--paper); }
.bk--embed { min-height: 0; padding: 0; display: block; }
.bk--embed .bk-card { grid-template-columns: 1fr; border-radius: 0; box-shadow: none; min-height: 0; background: var(--paper); }
.bk--embed .bk-flow { padding: 18px 18px 22px; }
.bk--embed .bk-head h2 { font-size: 24px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* language switch (Dutch first) */
.bk-lang { display: flex; gap: 2px; margin: -6px 0 16px auto; padding: 3px; border-radius: 999px; background: var(--line); width: max-content; }
.bk-lang a { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-decoration: none; color: var(--muted); }
.bk-lang a[aria-current] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.bk-lang a:hover { color: var(--ink); }