/* Bookingsidene: bestill, avbestill og gjenbooking.

   Alt som er FELLES for hele den offentlige siden — knapper, etiketter,
   topplinje, typografi, bevegelse — ligger i site.css. Denne fila inneholder
   bare det bookingsidene har for seg selv, slik at det finnes én definisjon
   per komponent.

   Kontraktsfestet kontrast: gull og lavendel brukes ALDRI som tekstfarge på
   lys bakgrunn — gull kun som linje, lavendel kun som flate/ramme/glød.
   Mutet tekst bruker alltid --color-text-muted, aldri lavendel-tokenet, så
   mørk modus holder WCAG 1.4.3 AA både på kort og sidebakgrunn.

   Fokus (WCAG 2.4.7 + 1.4.11): synlig ring er alltid 2px primær. Lavendelgløden
   fra designfasiten er et TILLEGG — lavendel alene er 2,5:1 på hvitt og duger
   ikke som fokusindikator. Outline fjernes aldri på skjemafelt.
   Web-komponenten <mw-booking> arver tokens gjennom shadow DOM. */

/* --- Sidestruktur ------------------------------------------------------- */

.booking-page {
  width: min(100% - 2.5rem, 1040px);
  margin: clamp(2rem, 1.2rem + 3vw, 4rem) auto 0;
}

.booking-page--narrow {
  max-width: 660px;
}

.booking-intro {
  display: grid;
  gap: 1rem;
  justify-items: start;
  max-width: 60ch;
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.booking-intro h1 {
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  font-weight: 500;
}

.booking-page .lead {
  margin: 0;
}

/* Gullstreken under introen — én detalj, ikke en dekorasjon som gjentas. */
.gold-line {
  width: 64px;
  height: 2px;
  background: var(--color-gold);
}

.booking-page input:focus-visible,
.booking-page select:focus-visible,
.booking-page textarea:focus-visible,
.booking-page button:not(.btn):focus-visible,
.booking-page a:not(.btn):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- Kort og sammendrag (avbestilling, bekreftelse, gjenbooking) --------- */

.card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  margin-top: 1.5rem;
}

.booking-summary h2 {
  font-size: var(--step-h2);
  margin-bottom: 1.25rem;
}

.booking-summary h3 {
  font-size: var(--step-h3);
  margin-bottom: 0.5rem;
}

.booking-facts {
  display: grid;
  gap: 1.25rem;
  margin: 0;
}

.booking-facts > div {
  display: grid;
  gap: 2px;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-surface-alt);
}

.booking-facts dt {
  font-size: var(--step-meta);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.booking-facts dd {
  margin: 0;
  font-size: 1rem;
}

/* Referansen er det kunden leser opp i telefonen — den skal være lett å lese
   høyt, derfor serif i stor grad med god sperring. */
.booking-ref {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-primary);
}

.muted,
.muted-note {
  color: var(--color-text-muted);
}

.muted-note {
  font-size: 0.875rem;
}

.notice {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--color-surface-alt);
  border-radius: 14px;
}

.notice--warning {
  border-left: 3px solid var(--color-gold);
}

.booking-terms {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-surface-alt);
}

.booking-terms p {
  color: var(--color-text-muted);
}

.booking-actions,
.rebooking-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.booking-actions .btn {
  flex: 1 1 200px;
}

.optout-form {
  margin-top: 1.5rem;
}

.btn-link {
  min-height: 44px;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.status-ok {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* --- <mw-booking>: fallback til komponenten er oppgradert ---------------- */

mw-booking {
  display: block;
  /* Reserver plass før komponenten er oppgradert: uten dette hopper alt under
     (fallback-kortet er 100 px, bookingen ~900 px) → CLS 0,48 målt i
     Lighthouse. Med reservert høyde skjer utfyllingen der plassen alt er. */
  min-height: 70vh;
}

mw-booking:defined > .booking-fallback {
  display: none;
}

.booking-fallback {
  text-align: center;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .booking-facts {
    grid-template-columns: 1fr 1fr;
  }
}