/* 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}

/* ---- Færre klik (30-09-2026): fliser i stedet for dropdowns, tider i én liste, tilbud i et ark ---- */
/* Step 1: device tiles → model tiles */
.device-panel .search-wrap{margin-bottom:14px}
.device-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.device-tile{border:1px solid var(--line);background:#fff;border-radius:14px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:116px;font-size:15px}
.device-tile img{height:58px;width:auto;max-width:100%;object-fit:contain}
.device-tile.other-brands span{font-size:30px;line-height:1;color:var(--purple)}
.device-tile:hover,.model-tile:hover,.pick-chip:hover,.up-slot:hover{border-color:var(--purple)}
.pick-back{display:inline-block;margin:0 0 8px -6px;color:var(--muted)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.pick-chip{border:1px solid var(--line);background:#fff;border-radius:24px;padding:10px 18px;font-weight:700}
.model-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.model-tile{border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 10px;min-height:52px;font-weight:700;font-size:15px;text-align:center}
.more-models{width:100%;margin-top:12px}
.device-panel .other-device{margin-top:16px;font-size:13px;color:var(--muted)}
/* The chosen device: a compact head, then the repairs */
.device-panel .device-head{margin-top:0;padding:0 0 14px;border-top:0;gap:16px}
.device-panel .device-head img{height:72px;width:60px}
.device-panel .device-head small{color:var(--muted)}
.device-panel .device-head h2{font-size:24px;margin:0}
.device-head-actions{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.repairs-hint{margin:-8px 0 10px}
.saved-devices{margin-bottom:14px}
.saved-title{font-size:17px;margin:0 0 8px}
.extras-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 2px}
.extra-chip{display:inline-flex;align-items:center;gap:6px;background:#f3e8ff;color:#4c2371;border-radius:20px;padding:5px 5px 5px 12px;font-size:13px;font-weight:600}
.extra-chip button{border:0;background:#fff;border-radius:50%;width:26px;height:26px;min-height:26px;font-size:16px;line-height:1}
.device-actions{margin-top:14px}
.device-actions .add-device{width:100%}
/* The accessory offer: a sheet from the bottom (phone) / a small card (computer) */
.booking-sheet{border:0;padding:20px 22px;border-radius:20px;max-width:440px;width:calc(100% - 32px);box-shadow:0 20px 60px #2a124033;font-family:Manrope,Arial,sans-serif}
.booking-sheet::backdrop{background:#160f2152}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sheet-head h2{font-size:21px}
.sheet-x{border:0;background:none;font-size:28px;width:44px;height:44px;cursor:pointer}
.sheet-item{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line);margin-top:12px}
.sheet-item img{width:52px;height:52px;object-fit:contain}
.sheet-item>div{flex:1}
.sheet-item strong{display:block;font-size:15px}
.sheet-item small{display:block;color:var(--muted);font-size:12px}
.sheet-add{min-height:46px;padding:10px 16px;white-space:nowrap}
.sheet-close{display:block;margin:6px auto 0;font-size:15px}
/* Step 2: the next free times, one tap */
.up-day{margin-top:16px}
.up-day h3{font-size:15px;margin-bottom:8px}
.up-slots{display:flex;flex-wrap:wrap;gap:8px}
.up-slot{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 16px;min-height:48px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.up-slot strong{font-size:15px}
.up-slot small{font-size:11px;color:var(--green);font-weight:700}
.up-slot.eco{border-color:#b7d8c7;background:#f3faf6}
.up-slot.selected{border:2px solid var(--purple);background:var(--pale);padding:9px 15px}
.more-days{margin-top:10px}
.other-date{margin:18px 0 4px;border-top:1px solid var(--line);padding-top:10px}
.other-date>summary{cursor:pointer;font-weight:700;color:#6b21a8;min-height:40px;display:flex;align-items:center}
.visit-instructions>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.visit-instructions>summary::-webkit-details-marker{display:none}
.visit-instructions>summary strong{display:block;font-size:18px}
.visit-instructions>summary small{display:block;color:var(--muted);font-size:13px}
.visit-instructions>summary::after{content:'+';font-size:24px;color:var(--purple)}
.visit-instructions[open]>summary::after{content:'−'}
.visit-instructions[open]>summary{margin-bottom:14px}
/* Step 3 */
.consent-lead{font-size:13px;color:var(--muted);margin:18px 0 -8px}
.terms-note{font-size:12px;color:var(--muted);margin-top:14px}
.terms-note a,.summary-note a{text-decoration:underline}
#mobile-total .price-empty{font-size:16px;letter-spacing:0}
/* Chat: "Spørg os" in the header on every screen size; no floating bubble over the summary. */
body.booking-page #chat-launch{display:none!important}
.booking-page .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}
@media(min-width:761px){.booking-page header .booking-help{margin-left:auto}.booking-page header .help{margin-left:18px}}
@media(max-width:760px){
  .device-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .device-tile{min-height:104px;padding:12px 6px}
  .device-tile img{height:50px}
  .model-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .booking-sheet[open]{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;border-radius:22px 22px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom))}
  /* The summary repeated what step 3 and the price bar already show; keep only the reassurance. */
  #summary :is(.summary-head,.customer-summary,.summary-device,.visit-details,.line,.total,.btn,.empty){display:none}
  #summary{border:0;background:transparent}
}
.sheet-x:focus-visible{outline-offset:0;border-radius:10px}
@media(max-width:760px){
  /* Name, e-mail and phone one under the other, so nothing is cut off. */
  #confirm-form .form-grid{grid-template-columns:1fr;gap:14px}
}