/* Booking, smooth (29-09-2026): a compact top so the task starts at once, the
   steps always visible, and the same big intro not repeated on every step.
   Loaded last on the booking page. body[data-step] is set by booking-prototype.js. */

/* Header: a slim bar instead of 95–120px. */
body.booking-page header{min-height:64px;padding:10px 30px;gap:24px}
body.booking-page header img{width:124px;height:auto}

/* The steps stay at the top while you scroll, so you always see where you are. */
.booking-page .progress{position:sticky;top:0;z-index:9;box-shadow:0 4px 14px #2a124008}
.booking-page .progress>div{padding-top:10px;padding-bottom:10px}
#steps .step{white-space:nowrap}

/* The intro: a short heading, the choices beside it — not a big card. */
.booking-page .intro{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:28px;padding:22px 28px;margin-bottom:22px;border-radius:20px}
.booking-page .intro:after{display:none}
.booking-page .intro>#eyebrow,.booking-page .intro>h1,.booking-page .intro>#description{flex:1 0 100%}
.booking-page .intro>#eyebrow{margin-bottom:4px}
body.booking-page .intro h1{font-size:clamp(28px,2.6vw,38px);line-height:1.1}
body.booking-page .intro #description{margin:8px 0 0;font-size:16px}
.booking-page .intro .customer-choice{margin:16px 0 0;display:flex;align-items:center;gap:12px}
.booking-page .intro .customer-choice legend{float:left;margin:0 10px 0 0;font-size:15px}
.booking-page .intro #customer-hint{display:none}
.booking-page .intro .vat-control{margin-top:16px;font-size:15px}
/* Who you book for and VAT are chosen in step 1; later steps just say where you are. */
body.booking-page[data-step="2"] .intro :is(.customer-choice,.vat-control,#eyebrow),
body.booking-page[data-step="3"] .intro :is(.customer-choice,.vat-control,#eyebrow){display:none}
body.booking-page:is([data-step="2"],[data-step="3"]) .intro{padding-block:16px}
/* The quick device pictures are only needed until a brand is chosen. */
body.booking-page.has-brand .device-shortcuts{display:none}

@media(max-width:760px){
  body.booking-page header{min-height:52px;padding:8px 16px;gap:12px}
  body.booking-page header img{width:104px}
  .booking-page header .help{display:none}
  .booking-page header .home-link{margin-left:auto;font-size:14px}
  .booking-page .progress>div{padding:8px 16px;gap:8px}
  #steps .step{font-size:13px;gap:6px}
  .booking-page .intro{padding:16px 18px;margin-bottom:16px;border-radius:18px}
  body.booking-page .intro h1{font-size:25px}
  .booking-page .intro>#eyebrow,body.booking-page .intro #description{display:none}
  .booking-page .intro .customer-choice{margin-top:12px}
  .booking-page .intro .customer-choice legend{font-size:14px}
  .booking-page .intro .customer-choice label span{padding:8px 16px;font-size:15px}
  .booking-page .intro .vat-control{margin-top:10px;font-size:14px;gap:10px}
  .booking-page .intro .vat-control button{padding:7px 14px;font-size:13px}
  /* The marketing block under the flow only makes the page longer on a phone. */
  .booking-page .booking-reassurance{display:none}
}
/* Nothing chosen yet: go straight to "Find din enhed". */
body.booking-page.booking-empty :is(.device-toolbar,.add-device-hint){display:none}
@media(max-width:760px){
  /* Both choices on one row; the toggles say what they are. */
  .booking-page .intro{column-gap:8px;align-items:center}
  .booking-page .intro .customer-choice legend,.booking-page .intro .vat-control>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .booking-page .intro .customer-choice,.booking-page .intro .vat-control{margin-top:12px}
  .booking-page .intro .customer-choice>div{padding:3px}
  .booking-page .intro .customer-choice label span{padding:7px 13px;font-size:14px}
  .booking-page .intro .vat-control>div{padding:3px}
  .booking-page .intro .vat-control button{padding:7px 11px}
}
/* The heading gets focus on a new step (for screen readers) — no box around it. */
.booking-page #heading:focus{outline:none}
/* "Ny skærm? Husk beskyttelsen" only once a model is chosen. */
body.booking-page:not(.has-model) .protection-teaser{display:none}
.booking-help{display:none}
@media(max-width:760px){
  /* The floating chat bubble covered buttons in the flow; "Spørg os" in the header opens the chat instead. */
  body.booking-page #chat-launch{display:none!important}
  .booking-help{display:inline-flex;align-items:center;border:1px solid #d7bfeb;background:#fff;color:#6b21a8;border-radius:20px;padding:7px 14px;font:700 14px Manrope,Arial,sans-serif;cursor:pointer}
  .booking-page header .home-link{font-size:13px}
}
/* "Vis alle reparationer" under the two most chosen. */
.booking-page .more-repairs{width:100%;margin:4px 0 14px}
/* Private/business on the last step: a small toggle above the form. */
.booking-page .confirm-type{border:0;padding:0;margin:0 0 16px;display:flex;align-items:center;gap:12px}
.booking-page .confirm-type legend{float:left;margin:0;font-weight:750;font-size:15px}