/* ==========================================================================
   Booking-skabelon – BOOKINGSIDE (kundens flow)
   Alle klasser er præfikset .bk- så modulet kan ligge inde på en eksisterende
   side uden at kollidere med dens styles.

   Designsprog ("bookingseddel") – vores eget, se README afsnit 9:
   - Én smal kolonne. Ingen sidebar, ingen trin-cirkler.
   - Sedlen: valgene står som felter på en billet; pris/varighed på et
     afrevet afsnit med perforering (udstansede hak via CSS-mask).
   - Små versaler med luft (.bk-micro) som gennemgående etiket-typografi.
   - Prisliste med prikkede ledere og tidsbjælker; initialer i tonede,
     afrundede firkanter; dagsbånd med ledigheds-måler.

   Tema: --bk-* sættes fra booking-config.js (tema) – eller overstyres i
   sidens egen stylesheet, hvis modulet skal arve kundens palette.
   ========================================================================== */

:root {
  --bk-accent: #1f6f5c;
  --bk-accent-dark: #175443;
  --bk-accent-soft: #e8f2ee;
  --bk-ink: #15201d;
  --bk-muted: #6b7975;
  --bk-line: #e3e9e6;
  --bk-surface: #ffffff;
  --bk-bg: #f5f7f6;
  --bk-ok: #2e8b57;
  --bk-warn: #b8781a;
  --bk-danger: #c0392b;
  --bk-radius: 12px;
  --bk-radius-sm: 8px;
  --bk-shadow: 0 18px 40px -18px rgba(20, 30, 27, 0.28);
  --bk-shadow-sm: 0 1px 2px rgba(20, 30, 27, 0.05);
  --bk-font-head: 'Inter', 'Segoe UI', Arial, sans-serif;
  --bk-font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
  --bk-max: 1080px;
  --bk-col: 780px;
  --bk-on-accent: #ffffff;
  --bk-stub: 132px;       /* bredde på sedlens afrevne afsnit */
  --bk-hak: 9px;          /* radius på perforeringens hak */
}

/* ---------- Grundlag (kun inde i .bk) ---------- */
.bk, .bk *, .bk *::before, .bk *::after { box-sizing: border-box; }
.bk {
  font-family: var(--bk-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--bk-ink);
  background: var(--bk-bg);
  -webkit-font-smoothing: antialiased;
}
.bk img { max-width: 100%; height: auto; display: block; }
.bk [hidden] { display: none !important; }
/* :where() holder specificiteten nede, så komponenternes egne farver altid vinder */
.bk :where(a) { color: inherit; }
.bk :where(button) { font: inherit; cursor: pointer; color: inherit; }
.bk :where(button:disabled) { cursor: default; }
.bk input, .bk select, .bk textarea { font: inherit; color: inherit; }
.bk h1, .bk h2, .bk h3, .bk h4 { font-family: var(--bk-font-head); font-weight: var(--bk-head-weight, 600); line-height: 1.2; margin: 0; letter-spacing: -0.015em; }
.bk h1 { font-size: 1.05rem; }
.bk h2 { font-size: 1.35rem; }
.bk h3 { font-size: 0.95rem; }
.bk p { margin: 0; }
.bk .bk-muted { color: var(--bk-muted); }
.bk .bk-small { font-size: 0.86rem; }
.bk .bk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.bk :focus-visible { outline: 2px solid var(--bk-accent); outline-offset: 2px; }
.bk svg { flex: none; }

/* Etiket-typografi: små versaler med luft */
.bk-micro { font-family: var(--bk-font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bk-muted); line-height: 1.3; }
h3.bk-micro { font-size: 0.68rem; letter-spacing: 0.12em; }

.bk-container { max-width: var(--bk-max); margin: 0 auto; padding: 0 24px; }

/* ---------- Topbar (kun standalone bookingside) ---------- */
.bk-topbar { background: var(--bk-surface); border-bottom: 1px solid var(--bk-line); }
.bk-topbar .bk-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; max-width: var(--bk-col); }
.bk-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.bk-brand__mark { width: 32px; height: 32px; border-radius: 10px; background: var(--bk-ink); color: var(--bk-surface); display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; box-shadow: inset 0 -3px 0 var(--bk-accent); }
.bk-topbar__tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 0.9rem; color: var(--bk-muted); font-variant-numeric: tabular-nums; }
.bk-topbar__tel:hover { color: var(--bk-ink); }
.bk-topbar__tel svg { width: 16px; height: 16px; }

/* ---------- Kolonnen ---------- */
.bk-shell { max-width: var(--bk-col); margin: 0 auto; padding: 28px 0 88px; }
.bk-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin-bottom: 10px; }
.bk-toplink { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--bk-line); border-radius: 999px; background: var(--bk-surface); font-size: 0.84rem; font-weight: 600; text-decoration: none; }
.bk-toplink:hover { border-color: var(--bk-ink); }
.bk-toplink svg { width: 15px; height: 15px; }
.bk-linkbtn { background: none; border: 0; padding: 0; color: var(--bk-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Bookingsedlen ---------- */
.bk-slip {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--bk-stub);
  background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: var(--bk-radius);
  margin-bottom: 16px;
  /* To udstansede hak der, hvor stubben rives af */
  -webkit-mask: radial-gradient(circle var(--bk-hak) at calc(100% - var(--bk-stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--bk-hak) at calc(100% - var(--bk-stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--bk-hak) at calc(100% - var(--bk-stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--bk-hak) at calc(100% - var(--bk-stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.bk-slip__fields { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
.bk-slip__f { position: relative; min-width: 0; }
.bk-slip__f + .bk-slip__f { border-left: 1px solid var(--bk-line); }
.bk-slip__f > * { display: flex; flex-direction: column; gap: 3px; width: 100%; height: 100%; padding: 12px 14px 14px; background: none; border: 0; text-align: left; border-radius: 0; }
.bk-slip__f:first-child > * { border-radius: var(--bk-radius) 0 0 var(--bk-radius); }
.bk-slip__f > button:hover { background: var(--bk-accent-soft); }
.bk-slip__f > button:hover .bk-slip__v { color: var(--bk-accent-dark); }
.bk-slip__v { font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.bk-slip__tom { color: var(--bk-line); font-weight: 400; }
.bk-slip__f.is-done .bk-micro::after { content: " ✓"; color: var(--bk-accent); letter-spacing: 0; }
.bk-slip__f.is-current .bk-micro { color: var(--bk-ink); }
.bk-slip__f.is-current::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--bk-accent); }
.bk-slip__stub { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 1px; padding: 10px 16px 12px; border-left: 2px dashed var(--bk-line); text-align: right; background: color-mix(in srgb, var(--bk-bg) 55%, var(--bk-surface)); border-radius: 0 var(--bk-radius) var(--bk-radius) 0; }
.bk-slip__stub strong { font-family: var(--bk-font-head); font-size: 1.12rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.bk-slip__stub > span:last-child { font-size: 0.8rem; color: var(--bk-muted); }

/* ---------- Scenen (det aktuelle spørgsmål) ---------- */
.bk-stage { background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: var(--bk-radius); padding: 24px 26px 26px; }
.bk-stage > * { animation: bk-in 0.18s ease-out; }
.bk-q { margin-bottom: 18px; }
.bk-q p { color: var(--bk-muted); font-size: 0.9rem; margin-top: 4px; }

/* ---------- Knapper (fælles med administrationen) ---------- */
.bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--bk-radius-sm); border: 1px solid transparent; font-weight: 600; font-size: 0.92rem; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s; white-space: nowrap; }
.bk-btn svg { width: 17px; height: 17px; }
.bk-btn--primary { background: var(--bk-accent); color: var(--bk-on-accent); border-color: var(--bk-accent); }
.bk-btn--primary:hover { background: var(--bk-accent-dark); border-color: var(--bk-accent-dark); }
.bk-btn--primary:disabled { opacity: 0.4; cursor: not-allowed; }
.bk-btn--primary svg:last-child:not(:first-child) { margin-right: -4px; transition: transform 0.15s; }
.bk-btn--primary:hover svg:last-child:not(:first-child) { transform: translateX(2px); }
.bk-btn--ghost { background: var(--bk-surface); color: var(--bk-ink); border-color: var(--bk-line); }
.bk-btn--ghost:hover { border-color: var(--bk-ink); }
.bk-btn--soft { background: var(--bk-accent-soft); color: var(--bk-accent-dark); }
.bk-btn--soft:hover { background: color-mix(in srgb, var(--bk-accent-soft) 70%, var(--bk-accent) 30%); }
.bk-btn--danger { background: transparent; color: var(--bk-danger); border-color: color-mix(in srgb, var(--bk-danger) 40%, transparent); }
.bk-btn--danger:hover { background: color-mix(in srgb, var(--bk-danger) 9%, var(--bk-surface)); }
.bk-btn--block { width: 100%; }
.bk-btn--sm { min-height: 36px; padding: 0 14px; font-size: 0.86rem; }
.bk-btn--link { background: none; border: 0; min-height: 0; padding: 0; color: var(--bk-accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* Afkrydsning brugt i tilvalg og kanalvalg */
.bk-tick { width: 18px; height: 18px; border: 1.5px solid var(--bk-line); border-radius: 5px; display: grid; place-items: center; color: transparent; background: var(--bk-surface); flex: none; transition: background 0.12s, border-color 0.12s; }
.bk-tick svg { width: 12px; height: 12px; }
.is-on > .bk-tick { background: var(--bk-accent); border-color: var(--bk-accent); color: var(--bk-on-accent); }
input:focus-visible + .bk-tick { outline: 2px solid var(--bk-accent); outline-offset: 2px; }

/* ---------- Trin 1: Prisliste ---------- */
.bk-index { display: flex; gap: 18px; overflow-x: auto; margin: -6px 0 10px; padding: 0 0 2px; scrollbar-width: none; border-bottom: 1px solid var(--bk-line); }
.bk-index::-webkit-scrollbar { display: none; }
.bk-index button { flex: none; display: inline-flex; align-items: baseline; gap: 5px; padding: 8px 0 9px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font-weight: 600; font-size: 0.88rem; color: var(--bk-muted); }
.bk-index button span { font-size: 0.7rem; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0.7; }
.bk-index button:hover { color: var(--bk-ink); border-bottom-color: var(--bk-ink); }
.bk-menu { scroll-margin-top: 16px; }
.bk-menu + .bk-menu { margin-top: 26px; }
.bk-menu__cat { font-size: 1.02rem; padding: 4px 0 8px; border-bottom: 2px solid var(--bk-ink); }
.bk-menu__list { list-style: none; margin: 0; padding: 0; }
.bk-item { border-bottom: 1px solid var(--bk-line); transition: background 0.15s; }
.bk-item__row { display: grid; grid-template-columns: auto minmax(16px, 1fr) auto; column-gap: 10px; align-items: baseline; width: 100%; padding: 14px 10px; background: none; border: 0; text-align: left; }
.bk-item__name { font-weight: 600; font-size: 0.98rem; min-width: 0; }
.bk-item__lead { border-bottom: 2px dotted color-mix(in srgb, var(--bk-muted) 40%, transparent); transform: translateY(-5px); }
.bk-item__price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-item__sub { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--bk-muted); margin-top: 3px; min-width: 0; }
.bk-item__min { flex: none; font-variant-numeric: tabular-nums; }
.bk-item__desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bk-item__desc::before { content: "·"; margin-right: 8px; }
.bk-dur { flex: none; width: 46px; height: 4px; border-radius: 2px; background: var(--bk-line); overflow: hidden; }
.bk-dur i { display: block; height: 100%; border-radius: 2px; background: var(--bk-accent); }
.bk-item__row:hover .bk-item__name { color: var(--bk-accent-dark); }
.bk-item.is-open { background: var(--bk-accent-soft); border-radius: var(--bk-radius-sm); border-bottom-color: transparent; }
.bk-item.is-open .bk-item__lead { border-bottom-color: color-mix(in srgb, var(--bk-accent) 35%, transparent); }
.bk-item.is-open .bk-item__desc { white-space: normal; }
.bk-item__more { padding: 2px 10px 14px; }
.bk-addons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 14px; }
.bk-addons > .bk-micro { margin-bottom: 2px; }
.bk-addon { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm); cursor: pointer; }
.bk-addon:hover { border-color: var(--bk-accent); }
.bk-addon.is-on { border-color: var(--bk-accent); }
.bk-addon input, .bk-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bk-addon__name { flex: 1; min-width: 0; font-weight: 500; font-size: 0.92rem; }
.bk-addon__meta { font-size: 0.82rem; color: var(--bk-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-item__go, .bk-form__go { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.bk-item__sum { font-size: 0.88rem; color: var(--bk-muted); font-variant-numeric: tabular-nums; }
.bk-item__sum strong { color: var(--bk-ink); font-size: 1rem; }
.bk-form__go { padding-top: 16px; margin-top: 4px; border-top: 1px dashed var(--bk-line); }

/* ---------- Trin 2: Medarbejdere ---------- */
.bk-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bk-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; width: 100%; padding: 12px 12px 12px 14px; border: 1px solid var(--bk-line); border-radius: var(--bk-radius); background: var(--bk-surface); text-align: left; transition: border-color 0.15s, background 0.15s; }
.bk-person:hover:not(:disabled) { border-color: var(--bk-ink); }
.bk-person.is-selected { border-color: var(--bk-accent); background: var(--bk-accent-soft); }
.bk-person:disabled { opacity: 0.5; }
.bk-person > svg { width: 18px; height: 18px; color: var(--bk-muted); }
.bk-person__txt strong { display: block; font-weight: 600; }
.bk-person__txt span { display: block; font-size: 0.84rem; color: var(--bk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-person__next { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 0.86rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Initialer i en tonet, afrundet firkant i medarbejderens farve */
.bk-mono { --mono: var(--bk-accent); width: 44px; height: 44px; border-radius: 30%; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; color: color-mix(in srgb, var(--mono) 82%, #000); background: color-mix(in srgb, var(--mono) 14%, var(--bk-surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mono) 38%, transparent); }
.bk-mono--any { background: var(--bk-ink); color: var(--bk-surface); box-shadow: none; }
.bk-mono--any svg { width: 20px; height: 20px; }
.bk-mono--lg { width: 52px; height: 52px; font-size: 1rem; }

/* ---------- Trin 3: Dagsbånd ---------- */
.bk-days__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.bk-days__head strong { font-size: 0.95rem; }
.bk-days__nav { display: flex; gap: 6px; }
.bk-days__nav button { width: 34px; height: 34px; border-radius: var(--bk-radius-sm); border: 1px solid var(--bk-line); background: var(--bk-surface); display: grid; place-items: center; }
.bk-days__nav button:hover:not(:disabled) { border-color: var(--bk-ink); }
.bk-days__nav button:disabled { opacity: 0.3; }
.bk-days__nav svg { width: 16px; height: 16px; }
.bk-days { overflow: hidden; margin: 0 -4px; padding: 0 4px; }
/* pan-y: lodret rul er browserens, vandret træk er vores (bladr uger) */
.bk-days__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bk-days__row.is-dragging { transition: none; cursor: grabbing; }
.bk-days__row.is-dragging .bk-dt { pointer-events: none; }
.bk-days__row.is-ind-hoejre { animation: bk-ind-h 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bk-days__row.is-ind-venstre { animation: bk-ind-v 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes bk-ind-h { from { transform: translateX(28%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bk-ind-v { from { transform: translateX(-28%); opacity: 0; } to { transform: none; opacity: 1; } }
.bk-dt { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; padding: 9px 2px 10px; border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm); background: var(--bk-surface); font-variant-numeric: tabular-nums; transition: border-color 0.15s, background 0.15s; }
.bk-dt__wd { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bk-muted); white-space: nowrap; }
.bk-dt__d { font-family: var(--bk-font-head); font-size: 1.3rem; font-weight: var(--bk-head-weight, 600); line-height: 1.15; }
.bk-dt__m { font-size: 0.7rem; color: var(--bk-muted); }
.bk-dt__st { font-size: 0.64rem; font-weight: 600; margin-top: 5px; height: 12px; line-height: 12px; color: var(--bk-muted); }
.bk-meter { display: flex; gap: 2px; margin-top: 7px; height: 4px; }
.bk-meter i { width: 8px; height: 4px; border-radius: 2px; background: var(--bk-line); }
.bk-meter[data-niveau="1"] i:first-child, .bk-meter[data-niveau="2"] i:nth-child(-n+2), .bk-meter[data-niveau="3"] i { background: var(--bk-accent); }
.bk-dt.is-open:hover, .bk-dt.is-full:hover { border-color: var(--bk-ink); }
.bk-dt.is-full { background: var(--bk-bg); }
.bk-dt.is-full .bk-dt__d { color: var(--bk-muted); }
.bk-dt.is-off { background: transparent; border-style: dashed; opacity: 0.55; }
.bk-dt.is-selected { background: var(--bk-accent); border-color: var(--bk-accent); color: var(--bk-on-accent); }
.bk-dt.is-selected .bk-dt__wd, .bk-dt.is-selected .bk-dt__m, .bk-dt.is-selected .bk-dt__st, .bk-dt.is-selected .bk-dt__d { color: inherit; }
.bk-dt.is-selected .bk-meter i { background: color-mix(in srgb, var(--bk-on-accent) 35%, transparent); }
.bk-dt.is-selected .bk-meter[data-niveau="1"] i:first-child, .bk-dt.is-selected .bk-meter[data-niveau="2"] i:nth-child(-n+2), .bk-dt.is-selected .bk-meter[data-niveau="3"] i { background: var(--bk-on-accent); }

/* ---------- Trin 3: Tider ---------- */
.bk-slots { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--bk-line); }
.bk-slots__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.bk-slots__grp { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--bk-line); }
.bk-slots__grp:last-of-type { border-bottom: 0; }
.bk-slots__grp > .bk-micro { padding-top: 11px; }
.bk-slots__list { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-slot { min-width: 74px; min-height: 38px; padding: 5px 14px; border: 1px solid var(--bk-line); border-radius: 999px; background: var(--bk-surface); font-weight: 600; font-size: 0.9rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.bk-slot:hover { border-color: var(--bk-accent); color: var(--bk-accent-dark); }
.bk-slot.is-selected { background: var(--bk-accent); border-color: var(--bk-accent); color: var(--bk-on-accent); }
.bk-slot small { display: block; font-size: 0.64rem; font-weight: 500; opacity: 0.75; }

/* Tider i administrationens bookingkort (fælles byggesten) */
.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; }
.bk-time { position: relative; min-height: 38px; padding: 6px 4px; border-radius: 999px; border: 1px solid var(--bk-line); background: var(--bk-surface); font-weight: 600; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.bk-time:hover { border-color: var(--bk-accent); }
.bk-time.is-selected { background: var(--bk-accent); color: var(--bk-on-accent); border-color: var(--bk-accent); }

.bk-empty { padding: 28px 20px; border: 1px dashed var(--bk-line); border-radius: var(--bk-radius); text-align: center; color: var(--bk-muted); font-size: 0.9rem; display: grid; justify-items: center; gap: 4px; }
.bk-empty strong { display: block; color: var(--bk-ink); }
.bk-empty .bk-btn { margin-top: 8px; }

/* ---------- Trin 4: Formular (fælles med administrationen) ---------- */
.bk-form { display: grid; gap: 14px; }
.bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bk-row--3 { grid-template-columns: 1fr 1fr auto; align-items: end; }
.bk-field label, .bk-label { display: block; font-size: 0.84rem; font-weight: 500; margin-bottom: 6px; }
.bk-field input, .bk-field textarea, .bk-field select { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm); background: var(--bk-surface); transition: border-color 0.15s, box-shadow 0.15s; }
.bk-field input:focus, .bk-field textarea:focus, .bk-field select:focus { outline: none; border-color: var(--bk-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bk-accent) 16%, transparent); }
.bk-field textarea { min-height: 84px; resize: vertical; }
.bk-field.is-invalid input { border-color: var(--bk-danger); }
.bk-field__hint { font-size: 0.8rem; color: var(--bk-muted); margin-top: 5px; }
.bk-field__error { font-size: 0.8rem; color: var(--bk-danger); margin-top: 5px; display: none; }
.bk-field.is-invalid .bk-field__error, .bk-form > .bk-field__error { display: block; }
.bk-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.86rem; cursor: pointer; color: var(--bk-muted); }
.bk-check input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--bk-accent); flex: none; }
.bk-returning { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--bk-radius-sm); background: var(--bk-accent-soft); color: var(--bk-accent-dark); font-size: 0.86rem; }
.bk-returning svg { width: 17px; height: 17px; }
.bk-toggles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bk-toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 11px; border: 1px solid var(--bk-line); border-radius: 999px; background: var(--bk-surface); cursor: pointer; font-weight: 500; font-size: 0.9rem; }
.bk-toggle .bk-tick { border-radius: 50%; }
.bk-toggle.is-on { border-color: var(--bk-accent); }
.bk-input-code { text-transform: uppercase; letter-spacing: 0.2em; font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-weight: 600; }
.bk-saved { color: var(--bk-accent); margin-left: 4px; }

/* Flyt: fra → til */
.bk-move { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
.bk-move__side { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm); }
.bk-move__side:first-child { background: var(--bk-bg); }
.bk-move__side:first-child strong { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bk-muted) 60%, transparent); color: var(--bk-muted); }
.bk-move__side:last-child { border-color: var(--bk-accent); background: var(--bk-accent-soft); }
.bk-move__side span:last-child { font-size: 0.86rem; color: var(--bk-muted); }
.bk-move__pil { color: var(--bk-muted); }
.bk-move__pil svg { width: 20px; height: 20px; }

/* ---------- Trin 5: Billetten ---------- */
.bk-done__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.bk-done__icon { width: 48px; height: 48px; border-radius: 30%; background: var(--bk-accent); color: var(--bk-on-accent); display: grid; place-items: center; flex: none; }
.bk-done__icon svg { width: 24px; height: 24px; }
.bk-done__head p { margin-top: 2px; font-size: 0.9rem; }
.bk-ticket {
  --bk-stub: 170px;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--bk-stub);
  border: 1px solid var(--bk-line); border-radius: var(--bk-radius); background: var(--bk-surface);
  -webkit-mask: radial-gradient(circle var(--bk-hak) at calc(100% - var(--bk-stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--bk-hak) at calc(100% - var(--bk-stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--bk-hak) at calc(100% - var(--bk-stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--bk-hak) at calc(100% - var(--bk-stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.bk-ticket__main { padding: 20px 22px; min-width: 0; }
.bk-ticket__when { display: grid; gap: 0; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--bk-line); }
.bk-ticket__date { font-family: var(--bk-font-head); font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.02em; }
.bk-ticket__time { font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--bk-accent-dark); }
.bk-ticket__dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: 0.9rem; }
.bk-ticket__dl dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bk-muted); padding-top: 3px; }
.bk-ticket__dl dd { margin: 0; font-weight: 500; }
.bk-ticket__dl dd span { display: block; font-size: 0.84rem; font-weight: 400; color: var(--bk-muted); }
.bk-ticket__stub { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 18px 12px; text-align: center; border-left: 2px dashed var(--bk-line); background: var(--bk-accent-soft); border-radius: 0 var(--bk-radius) var(--bk-radius) 0; }
.bk-ticket__stub > span:last-child { font-size: 0.76rem; color: var(--bk-muted); }
.bk-code { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 1.35rem; letter-spacing: 0.14em; color: var(--bk-accent-dark); user-select: all; }
.bk-done__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.bk-done__links { margin-top: 14px; font-size: 0.82rem; color: var(--bk-muted); display: flex; gap: 14px; flex-wrap: wrap; }
.bk-done__links a, .bk-done__links button { color: inherit; background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bk-done__links a:hover, .bk-done__links button:hover { color: var(--bk-ink); }
.bk-done__text { margin: 14px 0 0; white-space: pre-wrap; font: inherit; font-size: 0.86rem; line-height: 1.5; background: var(--bk-bg); border: 1px solid var(--bk-line); padding: 12px 14px; border-radius: var(--bk-radius-sm); user-select: all; }
.bk-done__note { margin-top: 18px; font-size: 0.8rem; color: var(--bk-muted); }

/* ---------- Mine tider ---------- */
.bk-profile { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--bk-line); }
.bk-profile__txt { flex: 1; min-width: 0; }
.bk-profile__txt strong { display: block; font-size: 1.1rem; font-family: var(--bk-font-head); }
.bk-profile__txt span { font-size: 0.86rem; color: var(--bk-muted); }
.bk-mine { margin-top: 20px; }
.bk-mine > .bk-micro { margin-bottom: 8px; }
.bk-mylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bk-myb { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px 10px 10px; border: 1px solid var(--bk-line); border-radius: var(--bk-radius); }
.bk-myb__date { display: grid; justify-items: center; padding: 6px 0; border-radius: var(--bk-radius-sm); background: var(--bk-accent-soft); color: var(--bk-accent-dark); line-height: 1.1; }
.bk-myb__date span { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.bk-myb__date strong { font-family: var(--bk-font-head); font-size: 1.3rem; }
.bk-myb__body { display: grid; gap: 1px; min-width: 0; }
.bk-myb__body > span:not(.bk-micro) { font-size: 0.86rem; color: var(--bk-muted); font-variant-numeric: tabular-nums; }
.bk-myb__act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.bk-myb.is-past .bk-myb__date { background: var(--bk-bg); color: var(--bk-muted); }
.bk-myb.is-aflyst .bk-myb__body strong { text-decoration: line-through; color: var(--bk-muted); }
.bk-login .bk-row { grid-template-columns: 1.4fr 1fr; }

/* ---------- Venteliste ---------- */
.bk-waitlist { margin-top: 12px; padding: 18px; border-radius: var(--bk-radius); background: var(--bk-bg); border: 1px dashed var(--bk-line); }
.bk-waitlist h4 { margin: 0 0 4px; font-size: 0.95rem; }
.bk-waitlist p { font-size: 0.86rem; color: var(--bk-muted); margin-bottom: 12px; }

/* ---------- Diverse (fælles) ---------- */
.bk-alert { padding: 12px 14px; border-radius: var(--bk-radius-sm); font-size: 0.88rem; border: 1px solid; margin-bottom: 16px; }
.bk-alert--info { background: var(--bk-accent-soft); border-color: transparent; color: var(--bk-accent-dark); }
.bk-alert--warn { background: #fff7e6; border-color: #f2dcae; color: #7a5410; }
.bk-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: var(--bk-accent-soft); color: var(--bk-accent-dark); }
.bk-avatar { width: 44px; height: 44px; border-radius: 30%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.9rem; background: var(--bk-accent); flex: none; }
.bk-avatar--sm { width: 28px; height: 28px; font-size: 0.7rem; }
.bk-tabs { display: flex; gap: 18px; flex-wrap: wrap; border-bottom: 1px solid var(--bk-line); }
.bk-tabs button { padding: 8px 0 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font-size: 0.9rem; font-weight: 600; color: var(--bk-muted); }
.bk-tabs button:hover { color: var(--bk-ink); }
.bk-tabs button.is-active { color: var(--bk-ink); border-bottom-color: var(--bk-accent); }
.bk-footer { padding: 8px 0 40px; text-align: center; font-size: 0.8rem; color: var(--bk-muted); }
.bk-footer a { color: inherit; }

@keyframes bk-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bk-stage > *, .bk-days__row { animation: none !important; } .bk * { transition: none !important; } }

/* ---------- Responsivt ---------- */
@media (max-width: 700px) {
  .bk-container { padding: 0 16px; }
  .bk-shell { padding: 16px 0 56px; }
  .bk-stage { padding: 18px 16px 20px; border-radius: var(--bk-radius); }
  .bk h2 { font-size: 1.2rem; }

  /* Sedlen: felter 2 × 2, stubben som afrevet bund */
  .bk-slip { grid-template-columns: 1fr; --bk-stubh: 50px;
    -webkit-mask: radial-gradient(circle var(--bk-hak) at 0 calc(100% - var(--bk-stubh)), #0000 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle var(--bk-hak) at 100% calc(100% - var(--bk-stubh)), #0000 98%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle var(--bk-hak) at 0 calc(100% - var(--bk-stubh)), #0000 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle var(--bk-hak) at 100% calc(100% - var(--bk-stubh)), #0000 98%, #000) right / 51% 100% no-repeat; }
  .bk-slip__fields { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .bk-slip__f + .bk-slip__f { border-left: 0; }
  .bk-slip__f:nth-child(even) { border-left: 1px solid var(--bk-line); }
  .bk-slip__f:nth-child(n+3) { border-top: 1px solid var(--bk-line); }
  .bk-slip__f:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .bk-slip__f > * { padding: 9px 12px 11px; border-radius: 0 !important; }
  .bk-slip__stub { height: var(--bk-stubh); flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; border-left: 0; border-top: 2px dashed var(--bk-line); border-radius: 0 0 var(--bk-radius) var(--bk-radius); }
  .bk-slip__stub strong { margin-left: auto; font-size: 1.02rem; }
  .bk-slip__stub > span:last-child::before { content: "· "; }

  .bk-row, .bk-row--3, .bk-login .bk-row { grid-template-columns: 1fr; }
  .bk-item__row { padding: 13px 8px; }
  .bk-item__more { padding: 2px 8px 12px; }
  .bk-item__go .bk-btn, .bk-form__go .bk-btn { flex: 1 1 100%; }
  .bk-person { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; }
  .bk-person__next { grid-column: 2; grid-row: 2; flex-direction: row; gap: 6px; align-items: baseline; text-align: left; margin-top: -8px; }
  .bk-person > svg { grid-column: 3; grid-row: 1 / span 2; }
  .bk-days__row { gap: 4px; }
  .bk-dt { padding: 7px 0 8px; }
  .bk-dt__wd { font-size: 0.58rem; letter-spacing: 0.04em; }
  .bk-dt__d { font-size: 1.1rem; }
  .bk-dt__m { font-size: 0.62rem; }
  .bk-dt__st { font-size: 0.56rem; }
  .bk-meter i { width: 6px; }
  .bk-slots__grp { grid-template-columns: 1fr; gap: 6px; }
  .bk-slots__grp > .bk-micro { padding-top: 0; }
  .bk-slot { flex: 1 0 70px; }
  .bk-move { grid-template-columns: 1fr; }
  .bk-move__pil { justify-self: center; transform: rotate(90deg); }
  .bk-ticket { grid-template-columns: 1fr; --bk-stubh: 96px;
    -webkit-mask: radial-gradient(circle var(--bk-hak) at 0 calc(100% - var(--bk-stubh)), #0000 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle var(--bk-hak) at 100% calc(100% - var(--bk-stubh)), #0000 98%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle var(--bk-hak) at 0 calc(100% - var(--bk-stubh)), #0000 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle var(--bk-hak) at 100% calc(100% - var(--bk-stubh)), #0000 98%, #000) right / 51% 100% no-repeat; }
  .bk-ticket__main { padding: 16px; }
  .bk-ticket__stub { height: var(--bk-stubh); border-left: 0; border-top: 2px dashed var(--bk-line); border-radius: 0 0 var(--bk-radius) var(--bk-radius); }
  .bk-done__actions .bk-btn { flex: 1 1 100%; }
  .bk-myb { grid-template-columns: 50px minmax(0, 1fr); }
  .bk-myb__act { grid-column: 1 / -1; justify-content: flex-start; }
  .bk-myb__act:empty { display: none; }
  .bk-topbar__tel span { display: none; }
}