/*
 * homepage.css — Homepage-specifieke stijlen voor hogeplantenbak.nl
 *
 * Gedeelde tokens staan in tokens.css.
 * Gedeelde componenten (nav, footer, buttons, cards, eyebrows) komen in components.css.
 * Dit bestand bevat alleen CSS die uniek is voor de homepage.
 *
 * Secties:
 *  1. Hero
 *  2. Persoonlijk
 *  3. Reviews
 *  4. Product
 *  5. Postcodecheck modal
 *  6. FAQ preview
 *  7. Hoe het werkt (verborgen sectie, timeline)
 */


/* ============================================================
   1. HERO — foto-bleed, glaskaart, spec-tabel, CTA-rij
   ============================================================ */

/* Foto-bleed effect: CSS custom properties voor het instelbare bleed-systeem.
   In productie staan deze op de vaste waarden (bleed-intensity 0 = scherp).   */
:root {
  --bleed-intensity: 0;
  --bleed-shift-pct-x: 0%;
  --bleed-shift-pct-y: 0%;
  --bleed-pos-x: 50%;
  --bleed-pos-y: 50%;
}

/* Achtergrondfoto — vult de heroruimte, met instelbare kleur/opacity */
.hero-photo-wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bleed-pos-x) var(--bleed-pos-y);

  /* Opacity en filter zijn instelbaar via de bleed-intensity variabele.
     Bij --bleed-intensity 0 is de foto subtiel aanwezig (opacity ~0.37).   */
  opacity: clamp(
    0.12,
    calc(0.78 - (var(--bleed-intensity) - 50) * 0.0085),
    1
  );
  filter:
    saturate(clamp(0.10, calc(0.55 - (var(--bleed-intensity) - 50) * 0.013), 1.3))
    brightness(calc(1.10 + (var(--bleed-intensity) - 50) * 0.0015))
    contrast(0.92);
  transition: opacity 0.25s ease, filter 0.25s ease, object-position 0.25s ease;
}

/* Warme overlay over de foto — verzacht de overgang naar de pagina-achtergrond */
.hero-overlay-warm {
  position: absolute;
  inset: 0;
  background: rgba(251, 249, 246, clamp(0, calc(0.62 + (var(--bleed-intensity) - 50) * 0.006), 0.95));
  transition: background 0.25s ease;
}

/* Verloop van links naar rechts — de foto "bloedt" vanuit rechts, tekst links leesbaar */
.hero-fade-left {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(251, 249, 246, clamp(0.4, calc(0.95 + (var(--bleed-intensity) - 50) * 0.004), 1))
      calc(0% + var(--bleed-shift-pct-x)),
    rgba(251, 249, 246, clamp(0.2, calc(0.85 + (var(--bleed-intensity) - 50) * 0.008), 0.98))
      calc(35% + var(--bleed-shift-pct-x)),
    rgba(251, 249, 246, clamp(0, calc(0.40 + (var(--bleed-intensity) - 50) * 0.011), 0.92))
      calc(70% + var(--bleed-shift-pct-x)),
    rgba(251, 249, 246, clamp(0, calc(0.20 + (var(--bleed-intensity) - 50) * 0.011), 0.85))
      calc(100% + var(--bleed-shift-pct-x))
  );
  transition: background 0.25s ease;
}

/* Hero-sectie — padding voor vaste nav bovenaan */
.hero {
  position: relative;
  padding-top: clamp(7rem, 14vw, 11rem);
  padding-bottom: clamp(5rem, 10vw, 9rem);
  overflow: hidden;
  background-color: var(--surface-warm);
}

/* Binnenste container van de hero: twee kolommen op breed scherm */
.hero-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-inner {
    padding: 0 2.5rem;
    grid-template-columns: 1.05fr 1fr;
  }
}

/* Glaskaart — frosted-glass container boven de foto */
.card-glass {
  background: rgba(251, 249, 246, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 1.75rem;
  box-shadow: 0 20px 50px -36px rgba(0, 53, 39, 0.18);
  padding: clamp(2rem, 4vw, 3rem);
  max-width: 38rem;
}

/* Hero H1 — font-black (900) alleen hier */
.hero-h1 {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--primary);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

/* Hero lead — introductietekst onder de H1 */
.hero-lead {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--on-surface-secondary);
  line-height: 1.7;
  margin-bottom: 2.25rem;
  max-width: 34rem;
}

/* Spec-tabel in de glaskaart — lichte dividers, labels links, waarden rechts */
.glas-spec {
  margin-bottom: 2.25rem;
}

.glas-spec > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(0, 53, 39, 0.08);
}

.glas-spec > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.glas-spec dt {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.glas-spec dd {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--primary);
  font-size: 0.95rem;
  text-align: right;
}

.glas-spec .price {
  font-size: 1.0625rem;
  white-space: nowrap;
}

/* Rating in de spec-tabel — groot cijfer + meta-label */
.glas-spec .rating {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}

.glas-spec .rating .num {
  font-size: 1.375rem;
  line-height: 1;
  color: var(--tertiary);
}

.glas-spec .rating .meta {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--on-surface-muted);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* CTA-rij in de glaskaart — twee knoppen naast elkaar, op smal scherm gestapeld */
.glas-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}

.glas-cta-row > a {
  min-height: 2.75rem;
  padding: 0.625rem 1rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  white-space: nowrap;
  line-height: 1;
}

@media (max-width: 540px) {
  .glas-cta-row {
    grid-template-columns: 1fr;
  }
}

/* Organische blob — alleen als decoratief achtergrond-element in de hero */
.hero-blob {
  border-radius: 62% 38% 34% 66% / 58% 32% 68% 42%;
}


/* ============================================================
   2. PERSOONLIJK — portrait cirkel + zwevende service-tags
   ============================================================ */

/* Portret-wrapper: anker voor de absoluut gepositioneerde service-tags */
.persoonlijk-anchor {
  position: relative;
  display: inline-block;
}

/* Portrait cirkel — een gewone <img> met volledige afronding en diepe schaduw */
.portrait-circle {
  width: clamp(18rem, 40vw, 26.25rem);
  height: clamp(18rem, 40vw, 26.25rem);
  max-width: 100%;
  border-radius: var(--radius-pill);
  object-fit: cover;
  box-shadow:
    0 30px 60px -30px rgba(0, 53, 39, 0.35),
    0 12px 24px -16px rgba(0, 53, 39, 0.18);
  display: block;
}

/* Zwevende service-tags (pillen) rond het portret */
.persoonlijk-anchor .tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: var(--surface-card);
  color: var(--primary);
  border-radius: var(--radius-pill);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.8125rem;
  box-shadow: 0 14px 32px -10px rgba(0, 53, 39, 0.20);
  white-space: nowrap;
  z-index: 2;
  transition: transform 200ms;
}

/* Icoontje in de service-tag — oranje accent */
.persoonlijk-anchor .tag .material-symbols-outlined {
  color: var(--tertiary);
  font-size: 1.125rem;
}

/* Standaard: subtiel gedraaid per tag — zweeft er "toevallig" bij */
.persoonlijk-anchor .tag { transform: rotate(-3deg); }
.persoonlijk-anchor .tag:hover { transform: rotate(0); }

.persoonlijk-anchor .tag:nth-of-type(2) { transform: rotate(2deg); }
.persoonlijk-anchor .tag:nth-of-type(2):hover { transform: rotate(0); }

.persoonlijk-anchor .tag:nth-of-type(3) { transform: rotate(-1deg); }
.persoonlijk-anchor .tag:nth-of-type(3):hover { transform: rotate(0); }

/* Positionering per tag — relatief aan het portret */
.persoonlijk-anchor .tag-1 { top: 2.25rem; right: -6%; }
.persoonlijk-anchor .tag-2 { bottom: 5rem; left: -8%; }
.persoonlijk-anchor .tag-3 { bottom: -0.5rem; right: 8%; }

@media (max-width: 980px) {
  .persoonlijk-anchor .tag-1 { top: 0; right: 0; }
  .persoonlijk-anchor .tag-2 { left: 0; }
  .persoonlijk-anchor .tag-3 { right: 0; }
}

/* Portrait placeholder — fallback als er nog geen foto is */
.portrait-placeholder {
  background: radial-gradient(circle at 30% 25%, #f5f3f0 0%, #e8e3d8 55%, #d8d2c2 100%);
  color: var(--on-surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.75rem;
  text-align: center;
  padding: 2rem;
}

.portrait-placeholder .material-symbols-outlined {
  font-size: 3.5rem;
  color: var(--primary-bright);
  opacity: 0.55;
}


/* ============================================================
   3. REVIEWS — rv-stamp, marginalia-grid, verify-tag,
                layout-toggle (aside vs. centered)
   ============================================================ */

/* Sterren — oranje, instelbare grootte */
.stars {
  display: inline-flex;
  gap: 3px;
  color: var(--tertiary);
}

.stars .material-symbols-outlined {
  font-size: 1rem;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'opsz' 20;
}

.stars-sm .material-symbols-outlined {
  font-size: 0.75rem;
}

/* Marginalia-layout — twee kolommen: smalle gutter links (naam + sterren), breed tekst rechts */
.marginalia-row {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 2rem;
  align-items: start;
}

.marginalia-gutter {
  padding-top: 0.5rem;
  text-align: right;
}

.marginalia-gutter .stars {
  justify-content: flex-end;
  gap: 1px;
}

@media (max-width: 768px) {
  .marginalia-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .marginalia-gutter {
    text-align: left;
  }

  .marginalia-gutter .stars {
    justify-content: flex-start;
  }
}

/* Geverifieerd-badge — kleine tekst met vinkje-icoon */
.verify-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--on-surface-muted);
}

.verify-tag .material-symbols-outlined {
  color: var(--primary-bright);
  font-size: 0.875rem;
  font-variation-settings: 'FILL' 1, 'wght' 700;
}

.verify-tag .verify-text {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

/* rv-stamp — Feedback Company trust-stamp, licht gekanteld */
.rv-stamp {
  width: clamp(16rem, 80%, 20rem);
  box-sizing: border-box;
  background: var(--surface-card);
  border-radius: 1.5rem;
  padding: 1.75rem 1.625rem 1.5rem;
  box-shadow: 0 16px 40px -16px rgba(0, 53, 39, 0.18);
  text-align: center;
  color: inherit;
  display: block;
  text-decoration: none;
  transform: rotate(-2deg);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0 auto;
}

.rv-stamp:hover {
  transform: rotate(0);
}

.rv-stamp .rv-label {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
  margin: 0 0 1rem;
}

/* Groot score-getal */
.rv-stamp .rv-score-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.375rem;
  margin-bottom: 0.625rem;
}

.rv-stamp .rv-score {
  font-family: var(--font-headline);
  font-weight: 900;
  color: var(--primary);
  font-size: clamp(2.5rem, 7vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.rv-stamp .rv-score-of {
  font-family: var(--font-headline);
  font-weight: 500;
  color: var(--on-surface-muted);
  font-size: 1rem;
}

/* Sterren in de stamp */
.rv-stamp .rv-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--tertiary);
  margin-bottom: 0.875rem;
}

.rv-stamp .rv-stars .material-symbols-outlined {
  font-size: 1.125rem;
  font-variation-settings: 'FILL' 1;
}

/* Statistieken-rij: twee kolommen met een divider ertussen */
.rv-stamp .rv-row {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: 0.875rem;
  margin: 1rem -0.25rem 0.875rem;
}

.rv-stamp .rv-col .rv-num {
  display: block;
  font-family: var(--font-headline);
  font-weight: 900;
  color: var(--primary);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

.rv-stamp .rv-col.rv-pct .rv-num {
  color: var(--primary-bright);
}

.rv-stamp .rv-col .rv-lab {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.rv-stamp .rv-col .rv-lab.tight {
  letter-spacing: 0.12em;
}

.rv-stamp .rv-divider {
  width: 1px;
  height: 2rem;
  background: rgba(0, 53, 39, 0.10);
  justify-self: center;
}

/* "Sinds jaar" — onderste rij in de stamp */
.rv-stamp .rv-sinds {
  display: block;
  padding-top: 0.875rem;
  border-top: 1px solid rgba(0, 53, 39, 0.08);
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--primary-bright);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* fc-shield — horizontale mini-pill (Feedback Company branding) */
.fc-shield {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 1.125rem;
  background: var(--surface-warm);
  border-radius: var(--radius-pill);
  color: var(--primary);
  box-shadow:
    0 1px 2px rgba(0, 53, 39, 0.04),
    0 10px 24px -14px rgba(0, 53, 39, 0.16);
  transition: background 200ms, transform 200ms, box-shadow 200ms;
  text-decoration: none;
}

a.fc-shield:hover {
  background: var(--surface-warm-mid);
  box-shadow:
    0 1px 2px rgba(0, 53, 39, 0.05),
    0 16px 32px -16px rgba(0, 53, 39, 0.22);
}

a.fc-shield:active {
  transform: scale(0.98);
}

.fc-shield .fc-logo {
  display: inline-block;
  height: 1.125rem;
}

.fc-shield .fc-logo img {
  display: block;
  height: 100%;
  width: auto;
}

.fc-shield .fc-divider {
  width: 1px;
  height: 1.375rem;
  background: rgba(0, 53, 39, 0.16);
}

.fc-shield .fc-sinds {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.fc-shield .fc-sinds-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.fc-shield .fc-sinds-year {
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: 1.125rem;
  color: var(--primary);
  margin-top: 3px;
  font-feature-settings: 'tnum';
}

/* "Bekijk alle reviews" tekstlink */
.reviews-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--primary-bright);
  border-bottom: 2px solid var(--primary-bright);
  padding-bottom: 2px;
  transition: color 200ms, border-color 200ms;
}

.reviews-link:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.reviews-link .material-symbols-outlined {
  font-size: 1.125rem;
}

/* Reviews layout-toggle: aside (standaard) vs. centered */
#reviewsCenteredHeader {
  display: none;
}

#reviews[data-layout="centered"] #reviewsCenteredHeader {
  display: block;
}

#reviews[data-layout="centered"] #reviewsAsideTitle {
  display: none !important;
}


/* ============================================================
   4. PRODUCT — fotogalerij, specs-tabel, prijskaart
   ============================================================ */

/* Fotogalerij — aspect-ratio 5:6, slides geschakeld via transform */
.gal {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border-radius: 2rem;
  background: #efeae1;
  box-shadow: 0 30px 60px -30px rgba(15, 50, 35, 0.25);
}

.gal-track {
  display: flex;
  height: 100%;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gal-track > img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Prev/next knoppen — frosted pill op de afbeelding */
.gal-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.25);
  border: 0;
  cursor: pointer;
  transition: transform 200ms, background 200ms;
}

.gal-btn:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}

.gal-btn:disabled {
  opacity: 0.35;
  cursor: default;
  transform: translateY(-50%);
}

.gal-btn.prev { left: 1.125rem; }
.gal-btn.next { right: 1.125rem; }

/* Dots — pill onder de foto */
.gal-dots {
  position: absolute;
  bottom: 1.125rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.7);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
}

.gal-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(0, 53, 39, 0.3);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: width 240ms, background 240ms;
}

.gal-dot.is-active {
  background: var(--primary);
  width: 1.125rem;
}

/* Product specs-tabel — rij-dividers, labels links (eyebrow), waarden rechts */
#productSpecs {
  /* Breedte wordt via JS ingesteld in design-tool; default vloeit mee met container */
}

/* Prijskaart — witte kaart met opmaak voor bezorgkosten */
.product-price-card {
  /* Erft .card basis uit components.css */
  max-width: 36rem;
}

/* Kleur-dots in de specs-tabel */
.kleur-dot {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  transition: box-shadow 150ms;
}

/* Actieve kleur-dot — krijgt een dubbele ring */
.kleur[data-active="true"] .kleur-dot {
  box-shadow:
    0 0 0 3px var(--surface-warm),
    0 0 0 5px var(--primary-bright),
    inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Textuur-knoppen — pill-stijl, groen als actief */
.textuur {
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(0, 53, 39, 0.15);
  background: transparent;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}

.textuur[data-active="true"] {
  background: var(--primary-bright);
  color: #ffffff;
}

/* Variant-thumb (product configurator) — klikbare miniatuurafbeelding */
.variant-thumb {
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: box-shadow 150ms;
}

.variant-thumb[aria-current="true"] {
  box-shadow: 0 0 0 3px var(--surface-warm), 0 0 0 5px var(--primary-bright);
}


/* ============================================================
   5. POSTCODECHECK MODAL — overlay, states
   ============================================================ */

/* Modal overlay — inert achtergrond, gecentreerd paneel */
.bezorg-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
}

.bezorg-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 53, 39, 0.40);
  backdrop-filter: blur(4px);
}

/* Modal paneel — gecentreerd, witte afgeronde kaart */
.bezorg-modal-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 30rem;
  background: var(--surface-card);
  border-radius: 2rem;
  box-shadow: var(--shadow-hero);
  padding: clamp(2rem, 5vw, 2.5rem);
}

/* State-machine: verberg alle state-content, toon alleen de actieve state */
#bezorgRow [data-state-content] {
  display: none;
}

#bezorgRow[data-state="loading"] [data-state-content="loading"] {
  display: block;
}

#bezorgRow[data-state="loading"] .bezorg-sub {
  opacity: 0;
}

#bezorgRow[data-state="loading"] .bezorg-submit {
  opacity: 0.5;
  pointer-events: none;
}

#bezorgRow[data-state="loading"] .bezorg-input {
  opacity: 0.7;
  pointer-events: none;
}

/* State: succes — verberg het formulier-grid */
#bezorgRow[data-state="success"] .bezorg-grid,
#bezorgRow[data-state="outofrange"] .bezorg-grid {
  display: none;
}

#bezorgRow[data-state="success"] [data-state-content="success"] {
  display: block;
}

#bezorgRow[data-state="outofrange"] [data-state-content="outofrange"] {
  display: block;
}

/* State: fout — rode invoerbord */
#bezorgRow[data-state="error"] [data-state-content="error"] {
  display: block;
}

#bezorgRow[data-state="error"] .bezorg-input {
  border-bottom-color: #fca5a5;
  color: #c2410c;
}

#bezorgRow[data-state="error"] .bezorg-input::placeholder {
  color: #fca5a5;
}

/* Invoervelden — underline-stijl, geen box */
.bezorg-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 53, 39, 0.20);
  padding: 0.5rem 0.25rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary);
  transition: border-color 200ms;
}

.bezorg-input::placeholder {
  color: var(--on-surface-muted);
  font-weight: 500;
}

.bezorg-input:focus {
  outline: none;
  border-bottom-color: var(--primary-bright);
}


/* ============================================================
   6. FAQ PREVIEW — accordion-kaarten met categorie-label
   ============================================================ */

/* FAQ category label — klein getracked label boven de vraag */
.faq-cat {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
  margin-bottom: 0.25rem;
  opacity: 0.85;
}

/* Accordion-chevron — draait bij open state */
details summary {
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

/* De .chev span in de summary draait 90° wanneer de details open zijn */
details[open] .chev {
  transform: rotate(90deg);
}

/* Accordion-card summary layout — padding en min-hoogte voor touch */
.faq-summary {
  padding: 1.75rem 2.25rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.25rem;
  min-height: 3.5rem;
}

/* Accordion-body — inspringing matcht de summary-padding */
.faq-body {
  padding: 0 2.25rem 2rem;
  color: var(--on-surface-secondary);
  font-family: var(--font-body);
  font-weight: 500;
}


/* ============================================================
   7. HOE HET WERKT — timeline (verborgen sectie)
   ============================================================ */

/* Timeline container — relatief om de lijn te positioneren */
.timeline {
  position: relative;
}

/* Verticale lijn op mobiel */
.timeline::before {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(4, 120, 87, 0.28) 12%,
    rgba(4, 120, 87, 0.28) 88%,
    transparent
  );
}

/* Horizontale lijn op brede schermen */
@media (min-width: 768px) {
  .timeline::before {
    left: 8%;
    right: 8%;
    top: 0.28rem;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      rgba(4, 120, 87, 0.28) 8%,
      rgba(4, 120, 87, 0.28) 92%,
      transparent
    );
  }
}

/* Timeline-stap — bolletje als ::before pseudo-element */
.timeline-step {
  position: relative;
  padding-left: 2rem;
}

.timeline-step::before {
  content: "";
  position: absolute;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--primary-bright);
  box-shadow:
    0 0 0 6px var(--surface-fresh),
    0 0 0 7px rgba(4, 120, 87, 0.18);
  z-index: 1;
  left: 0;
  top: 0.4rem;
}

/* Op brede schermen: bolletje bovenaan, stap gecentreerd */
@media (min-width: 768px) {
  .timeline-step {
    padding-left: 0;
    padding-top: 3.25rem;
  }

  .timeline-step::before {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
}