/* =========================================================
   Cars & Care · book-tid.css
   Kun til book-tid.html (guidet booking, D9). Linkes efter site.css.
   Bruger kun tokens og temavariabler fra site.css: ingen nye farver,
   skrifttyper, radier eller skygger.

   Indhold
    1  Sidehoved med fremdrift
    2  Bookingens gitter (trin 3 klæber til højre fra 1180 px)
    3  Trin 1: pakker og hjælp til valget
    4  Trin 2: størrelse
    5  Trin 3: pris og opsummering
    6  Trin 4: dato og tid (booking-værktøjet)
    7  Trin 5: oplysninger
    8  Bekræftelse
    9  Spørgsmål om booking
   10  Smalle skærme
   ========================================================= */

/* ---------- 1  Sidehoved med fremdrift ---------- */
/* Fremdriften står nederst i det mørke sidehoved, der hvor D2 har tillidsrækken */
.bk-head { padding-bottom: 0; }
.bk-head .breadcrumb { margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.bk-head .page-head__grid { align-items: end; }
.bk-head__media { max-width: 330px; }
.bk-progress { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
.bk-progress__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-6); margin-top: var(--space-4); }
.bk-progress .stepper__status { margin-top: 0; color: var(--fg); }
.bk-progress__choice { font-size: var(--fs-small); color: var(--fg-muted); }
@media (min-width: 641px) {
  .bk-stepper .stepper__label { display: grid; line-height: 1.3; }
}
/* Sprunget over: stregen er "passeret", ringen er stiplet, og en lille tekst siger det */
.stepper__item.is-skipped { border-top-color: var(--link); color: var(--fg-muted); }
.stepper__item.is-skipped .stepper__num { box-shadow: none; border: 1.5px dashed var(--line-strong); }
.bk-stepper__note { font-size: var(--fs-xs); font-weight: 550; color: var(--fg-muted); }

/* ---------- 2  Bookingens gitter ---------- */
.bk { padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.bk-step .step-panel__title:focus { outline: none; }
.bk-step .step-panel__title:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.bk-step.is-locked .step-panel__state, .bk-step.is-done .step-panel__state { color: var(--fg-muted); }
.bk-tag--done .icon { color: var(--link); }
.bk-step:last-child { padding-bottom: 0; }

@media (min-width: 1180px) {
  .bk-flow { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(2.5rem, 1rem + 2.5vw, 4rem); align-items: start; }
  .bk-step--1 { grid-column: 1; grid-row: 1; }
  .bk-step--2 { grid-column: 1; grid-row: 2; }
  .bk-step--4 { grid-column: 1; grid-row: 3; }
  .bk-step--5 { grid-column: 1; grid-row: 4; }
  /* Trin 3 står i DOM'en mellem trin 2 og 4 (rigtig læserækkefølge), men vises til højre og klæber */
  .bk-step--3 { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}

/* ---------- 3  Trin 1: pakker og hjælp ---------- */
.bk-step1__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-6); margin-top: var(--space-3); }
.bk-step1__bar .step-panel__intro { margin-top: 0; max-width: 32rem; }
.bk-help__toggle, .bk-firma__toggle, .bk-choice__change { min-height: 44px; }
.bk-help__toggle .icon:first-child, .bk-firma__toggle .icon:first-child { width: 18px; height: 18px; }
.bk-help { margin-top: var(--space-4); padding: var(--space-5); border-radius: var(--radius-md); background: var(--c-white); box-shadow: inset 0 0 0 1px var(--line); }
.bk-help__q { margin-bottom: var(--space-4); font-size: var(--fs-h4); font-weight: 650; letter-spacing: -.01em; color: var(--fg); }
.bk-help__chips .chip { white-space: normal; text-align: left; line-height: 1.3; padding-block: .55rem; }
.bk-help__suggest { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: var(--fs-small); font-weight: 600; color: var(--fg); }

.bk-pkgs { margin-top: var(--space-6); }
@media (min-width: 1081px) {
  .bk-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bk-pkg .pkg__head { flex-wrap: wrap; row-gap: .4rem; }
/* Linjen under kortene: bookingens eneste udgang til Erhverv (tekstoplæg 7.2) */
.bk-step1__b2b { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--fg-muted); }
.bk-step1__b2b .link { display: inline-flex; margin-left: .25rem; }
.bk-pkg__flags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.bk-pkg__flags:empty { display: none; }
.bk-pkg__note { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--c-muted); line-height: 1.5; }
.bk-pkg .pkg__meta { margin-top: var(--space-3); }
.bk-pkg .pkg__panel-wrap { margin-top: var(--space-4); }
.bk-pkg .pkg__toggle { min-height: 44px; }
.bk-pkg .pkg__extra { padding-top: 0; }
@media (min-width: 1081px) {
  .bk-pkg .pkg__cta { align-self: start; }
}
.bk-pkg .pkg__cta .link { margin-top: 0; min-height: 44px; }
/* Foreslået af "Hvad vil du opnå?": blå hårstreg og mærkat, men ikke valgt */
.pkg.is-suggested { box-shadow: inset 0 0 0 1px var(--c-accent), var(--shadow-card-hover); }
.pkg.is-selected:hover { box-shadow: inset 0 0 0 2px var(--c-accent), var(--shadow-card-hover); }

/* ---------- 4  Trin 2: størrelse ---------- */
.bk-choice { margin-top: 0; justify-content: space-between; padding: .25rem 0 .25rem var(--space-4); border-radius: var(--radius-sm); background: var(--c-white); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-small); font-weight: 550; color: var(--fg-muted); }
.bk-choice strong { color: var(--fg); font-weight: 650; }
.bk-choice .bk-choice__change { padding-inline: var(--space-4); }
.bk-step__lead { margin: var(--space-5) 0 var(--space-4); color: var(--fg-muted); max-width: 40rem; }
.bk-notes { display: grid; gap: .4rem; margin-top: var(--space-5); font-size: var(--fs-small); color: var(--fg-muted); }
.bk-skip__text { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--fg); }
.bk-skip__text .icon { color: var(--link); }

/* ---------- 5  Trin 3: pris og opsummering (kort) ---------- */
.bk-sum {
  margin: var(--space-2) 0 var(--space-7); padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border-top: 0; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card);
}
.bk-sum.step-panel::before, .bk-sum.is-current::before { display: none; }
.bk-sum.is-current { box-shadow: inset 0 0 0 2px var(--link), var(--shadow-card); }
.bk-sum__label { margin-bottom: var(--space-3); }
.bk-sum .step-panel__head { column-gap: var(--space-3); }
.bk-sum .step-panel__title { font-size: 1.25rem; }
.bk-sum .summary__list { margin-top: var(--space-5); }
.bk-sum .summary__note { margin-top: var(--space-5); }
.bk-sum .summary__note .inline-link { font-weight: 600; white-space: nowrap; }
/* Afleveringslinjen under prisen (tekstoplæg 7.4) */
.bk-sum__drop { display: flex; align-items: flex-start; gap: .5rem; margin-top: var(--space-4); font-size: var(--fs-small); color: var(--fg-muted); }
.bk-sum__drop .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--link); }
.bk-sum__drop + .btn { margin-top: var(--space-5); }
.bk-empty { color: var(--fg-muted); font-weight: 550; }
@media (min-width: 1180px) {
  .bk-sum { margin: 0; }
}

/* ---------- 6  Trin 4: dato og tid ---------- */
.bk-note--top { margin-top: 0; margin-bottom: var(--space-4); }
.bk-tool { padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: var(--radius-lg); background: var(--c-white); box-shadow: var(--shadow-card); }
.bk-tool__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem var(--space-4); padding-bottom: var(--space-4); margin-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.bk-tool__label { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); }
.bk-tool__value { font-weight: 650; color: var(--fg); }
.bk-tool .ph-note { margin-top: var(--space-5); }
.bk-fallback { position: relative; margin-top: var(--space-5); padding-left: 1.75rem; font-size: var(--fs-small); color: var(--fg-muted); }
.bk-fallback .icon { position: absolute; left: 0; top: .15em; width: 18px; height: 18px; color: var(--link); }

/* ---------- 7  Trin 5: oplysninger ---------- */
.bk-recap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); border-block: 1px solid var(--line); }
.bk-recap__item { min-width: 0; padding: .9rem 0; }
.bk-recap__item + .bk-recap__item { padding-left: var(--space-5); border-left: 1px solid var(--line); }
.bk-recap dt { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.bk-recap dd { margin-top: 2px; font-size: .9375rem; font-weight: 650; color: var(--fg); line-height: 1.4; }
.bk-firma { display: grid; justify-items: start; margin-top: calc(var(--space-2) * -1); }
.bk-firma__field { width: 100%; max-width: 32rem; margin-top: var(--space-2); }
.bk-consent { display: grid; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.bk-consent .check { font-weight: 600; }
.bk-consent__error, .bk-consent__links { padding-left: calc(22px + .75rem); }
.bk-consent__error { margin-top: 0; }
.bk-consent__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); font-size: var(--fs-small); }
.bk-consent__links a { display: inline-flex; align-items: center; min-height: 44px; }
.bk-submit { gap: var(--space-3) var(--space-5); }
.bk-submit__pay { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-small); font-weight: 600; color: var(--fg); }
.bk-submit__pay .icon { width: 18px; height: 18px; color: var(--link); }
.bk-form .ph-note { margin-top: 0; }

/* ---------- 8  Bekræftelse ---------- */
.bk-done__eyebrow { display: inline-flex; align-items: center; gap: .5rem; }
.bk-done__eyebrow .icon { width: 18px; height: 18px; stroke-width: 1.9; }
.bk-done__facts { width: 100%; max-width: 26rem; justify-self: end; }
.bk-done__grid { align-items: start; }
.bk-receipt .summary__label { margin: 0; }
.bk-receipt .summary__list { margin-top: var(--space-4); }
.bk-receipt .summary__row:last-child { border-bottom: 0; padding-bottom: 0; }
.bk-next { padding-top: var(--space-2); }
.bk-next__steps { margin-top: var(--space-5); }
.bk-next__text { margin-top: var(--space-5); color: var(--fg-muted); }
.bk-next__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.bk-upsell { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line-strong); }
.bk-upsell__text { color: var(--fg-muted); }
.bk-upsell__label { font-weight: 650; color: var(--fg); margin-right: .35rem; }
.bk-upsell .link { display: inline-flex; margin-right: .35rem; }
.bk-done__body .ph-note { margin-top: var(--space-5); }

/* ---------- 9  Spørgsmål om booking ---------- */
.bk-faq__head .h2 { max-width: 8em; }
.bk-faq__link { margin-top: var(--space-5); }

/* ---------- 10  Smalle skærme ---------- */
@media (min-width: 960px) and (max-width: 1179px) {
  .bk-sum { max-width: 40rem; }
}
@media (max-width: 959px) {
  /* Fotoet står kun ved siden af titlen; på tablet og telefon går man direkte til trinene */
  .bk-head__media { display: none; }
  .bk-done__facts { justify-self: start; }
}
@media (max-width: 640px) {
  .bk-progress__meta { display: grid; gap: .35rem; }
  .bk-step1__bar { align-items: flex-start; }
  .bk-help { padding: var(--space-4); }
  .bk-choice { padding-left: var(--space-3); }
  .bk-recap { grid-template-columns: minmax(0, 1fr); }
  .bk-recap__item { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: .7rem 0; }
  .bk-recap__item + .bk-recap__item { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .bk-recap dd { margin-top: 0; text-align: right; }
  .bk-submit .btn { flex: 1 1 100%; }
  .bk-next__actions .btn { flex: 1 1 100%; }
  .bk-tool { padding: var(--space-4); }
  .bk-days .slot { flex-basis: calc(33.333% - .5rem); }
}

/* ---------- Find din bil (trin 2): mærke og model vælger størrelsen ---------- */
.bk-carpick { max-width: 28rem; margin-bottom: var(--space-6); }
.bk-carpick__answer { margin-top: var(--space-2); }
.bk-carpick__go { margin-top: var(--space-3); }