/* ============================================================
   Sportconic Service — Stylesheet  (Fase 8D.2 — visual brand alignment)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* ── Merkkleuren ──────────────────────────────────────────── */
  --brand:              #0A56A5;   /* Sportconic primair blauw */
  --brand-dark:         #073d78;   /* hover / darker state     */
  --brand-light:        #e8f0fb;   /* zachte achtergrond       */
  --brand-mid:          #4e8fd4;   /* mid-tint voor accenten   */

  /* Semantische aliassen (backward compatible) */
  --brand-primary:      var(--brand);
  --brand-primary-dark: var(--brand-dark);
  --brand-primary-soft: var(--brand-light);

  /* ── Semantische kleuren ──────────────────────────────────── */
  --success:        #16a34a;
  --success-bg:     #f0fdf4;
  --success-border: #bbf7d0;
  --warning:        #d97706;
  --warning-bg:     #fffbeb;
  --warning-border: #fcd34d;
  --danger:         #dc2626;
  --danger-bg:      #fef2f2;
  --danger-border:  #fca5a5;
  --info:           #0284c7;
  --info-bg:        #f0f9ff;
  --info-border:    #bae6fd;

  /* ── Statuspalet ─────────────────────────────────────────── */
  --c-blue:   #2563eb;
  --c-green:  #16a34a;
  --c-teal:   #0d9488;
  --c-amber:  #d97706;
  --c-orange: #ea580c;
  --c-red:    #dc2626;
  --c-purple: #7c3aed;
  --c-gray:   #6b7280;

  /* ── Neutraal ────────────────────────────────────────────── */
  --text:         #1a1a2e;
  --text-main:    #1a1a2e;   /* alias */
  --text-mid:     #475569;
  --text-muted:   #64748b;   /* alias */
  --muted:        #64748b;
  --text-soft:    #94a3b8;
  --border:       #e2e8f0;
  --border-soft:  #f1f5f9;   /* zeer lichte rand */
  --border-mid:   #cbd5e1;
  --bg:           #f8fafc;
  --surface:      #ffffff;
  --surface-muted:#f8fafc;   /* alias voor --bg */
  --white:        #ffffff;

  /* ── Vormen ──────────────────────────────────────────────── */
  --radius:     10px;
  --radius-sm:  6px;
  --radius-md:  10px;   /* alias */
  --radius-lg:  16px;

  /* ── Schaduwen ───────────────────────────────────────────── */
  --shadow-sm:  0 1px 4px rgba(0,0,0,.06);
  --shadow:     0 2px 16px rgba(0,0,0,.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max: 960px;

  /* ── Transitie ───────────────────────────────────────────── */
  --transition: .15s ease;

  /* ── Uitgebreid semantisch palet ────────────────────────────
     Alle UI-kleurwaarden als tokens zodat er geen hardcoded hex
     buiten :root staat (Fase 8D vereiste).                      */

  /* Button / disabled */
  --text-disabled:        #94a3b8;   /* slate-400 — uitgeschakeld */
  --danger-dark:          #b91c1c;   /* red-700 — btn-danger:hover */

  /* Info / navy */
  --text-dark:            #1e293b;   /* slate-800 */
  --text-darkest:         #0f172a;   /* slate-900 */
  --text-navy:            #1e3a5f;   /* custom info-blok tekst */
  --surface-hover:        #e8eef4;   /* subtiele hover bg */

  /* Amber / Waarschuwing — uitgebreid */
  --warning-amber:        #fbbf24;   /* amber-400 rand */
  --warning-text:         #92400e;   /* amber-800 tekst */
  --warning-text-deep:    #78350f;   /* amber-900 tekst */
  --warning-bg-yellow:    #fefce8;   /* yellow-50  bg */
  --warning-border-yellow:#fde68a;   /* amber-200 rand */
  --warning-amber-bg:     #fef3c7;   /* amber-100 bg */
  --warning-amber-border: #fcd34d;   /* amber-300 rand */
  --warning-softest:      #fffbeb;   /* amber-50 bg */

  /* Groen / Succes — uitgebreid */
  --success-dark:         #166534;   /* green-800 */
  --success-deep:         #14532d;   /* green-900 */
  --success-mid:          #86efac;   /* green-300 rand */
  --success-light-bg:     #dcfce7;   /* green-100 bg */
  --success-softest:      #d1fae5;   /* green-50 rand */

  /* Rood / Gevaar — uitgebreid */
  --danger-deep:          #7f1d1d;   /* red-900 tekst */
  --danger-dark-text:     #991b1b;   /* red-800 tekst */

  /* Blauw info — uitgebreid */
  --info-deep:            #0c4a6e;   /* sky-900 tekst */

  /* Status badges */
  --badge-pending-bg:     #fef9c3;
  --badge-pending-text:   #a16207;
  --badge-shipped-bg:     #dbeafe;
  --badge-shipped-text:   #1d4ed8;
  --badge-delivered-bg:   #dcfce7;
  --badge-delivered-text: #15803d;
  --badge-cancelled-bg:   #f1f5f9;
  /* --badge-cancelled-text: uses --text-mid (#475569) */

  /* Copy-knop succes */
  --copy-success-text:    #15803d;   /* green-700 */
  --copy-success-border:  #86efac;   /* green-300 */

  /* Demo-badge (feature flag) */
  --demo-bg:              #f3e8ff;   /* purple-100 */
  --demo-border:          #c4b5fd;   /* purple-300 */
}

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  /* subtiele schaduw die de header loskoppelt van de pagina */
  box-shadow: 0 1px 0 var(--border), 0 2px 8px rgba(0,0,0,.04);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  gap: 16px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
/* Officieel logo-bestand (assets/sportconic-logo.svg) */
.site-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
@media (max-width: 520px) {
  .site-logo { height: 26px; }
}

/* Tekstfallback — verborgen zodra het logo-bestand laadt */
.logo-fallback {
  display: none;        /* standaard verborgen; onerror toont dit blok */
  align-items: center;
  gap: 10px;
}
.logo-mark {
  width: 32px;
  height: 32px;
  background: var(--brand);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-mark svg { display: block; }
.logo-wordmark {
  font-weight: 800;
  font-size: 20px;
  color: var(--text);
  letter-spacing: -.5px;
  line-height: 1;
}
.logo-wordmark em {
  font-style: normal;
  color: var(--brand);
}

/* Header right (taalschakelaar + teruglink) */
.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Taalschakelaar */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}
.lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  color: var(--muted);
  padding: 4px 9px;
  border-radius: 6px;
  transition: background var(--transition), color var(--transition);
  letter-spacing: .4px;
}
.lang-btn:hover          { background: var(--white); color: var(--text); }
.lang-btn--active        { background: var(--white); color: var(--brand); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.lang-btn:focus-visible  { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Teruglink */
.header-back-link {
  text-decoration: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--transition);
  border-radius: 4px;
  padding: 2px 0;
}
.header-back-link:hover         { color: var(--brand); }
.header-back-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Legacy nav (backwards compat, nooit getoond) */
.header-nav { display: none; }

/* ============================================================
   PAGINA HERO
   ============================================================ */
.page-hero {
  padding: 48px 0 28px;
}
.page-hero h1 {
  font-size: 34px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.6px;
  margin-bottom: 0;
  line-height: 1.12;
}

/* Trust strip verwijderd (Fase 8D.3) — was alleen op home-scherm zichtbaar */

/* ============================================================
   SERVICE WRAPPER + FLOW CARD
   ============================================================ */
.service-wrapper { padding-bottom: 80px; }

.flow-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.07);
  padding: 36px 40px;
  border: 1px solid var(--border);
}

/* ============================================================
   PROGRESS + BREADCRUMB
   ============================================================ */
.progress-bar {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.progress-bar.hidden { display: none; }
.progress-track {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-mid));
  border-radius: 2px;
  transition: width .4s ease;
}
.progress-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.breadcrumb {
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--muted);
}
.breadcrumb.hidden { display: none; }
.breadcrumb-item::before { content: "Service › "; }

/* ============================================================
   STEP CONTENT (koppen/tekst binnen een stap)
   ============================================================ */
.step-content h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
  letter-spacing: -.2px;
  line-height: 1.25;
}
.step-content p {
  color: var(--muted);
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.6;
}
.step-indicator {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 8px;
}

/* ============================================================
   FORMULIEREN
   ============================================================ */
.form-group { margin-bottom: 20px; }

.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: .1px;
}
.field-hint {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.input-field,
.select-field,
.textarea-field {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  -webkit-appearance: none;
}
.input-field::placeholder,
.textarea-field::placeholder    { color: var(--text-soft); }
.input-field:hover,
.select-field:hover,
.textarea-field:hover           { border-color: var(--brand-mid); }
.input-field:focus,
.select-field:focus,
.textarea-field:focus           {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(10,86,165,.12);
}
.select-field { cursor: pointer; }
.textarea-field { resize: vertical; min-height: 100px; }

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
}
.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  flex-shrink: 0;
}

/* ============================================================
   KNOPPEN
   ============================================================ */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-tracking,
.btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background var(--transition), transform .12s, box-shadow var(--transition), border-color var(--transition), color var(--transition);
  margin-top: 8px;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .01em;
}
/* Focus outline voor alle knoppen */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.btn-tracking:focus-visible  {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Primair */
.btn-primary {
  background: var(--brand);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(10,86,165,.22);
}
.btn-primary:hover           { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(10,86,165,.30); }
.btn-primary:active          { transform: translateY(0); box-shadow: 0 1px 4px rgba(10,86,165,.20); }
.btn-primary.btn-disabled,
.btn-primary:disabled        { background: var(--text-disabled); box-shadow: none; cursor: not-allowed; transform: none; }

/* Secundair */
.btn-secondary {
  background: var(--white);
  color: var(--text-mid);
  border: 1.5px solid var(--border-mid);
  box-shadow: var(--shadow-sm);
  margin-left: 8px;
}
.btn-secondary:hover { background: var(--bg); border-color: var(--brand-mid); color: var(--brand); }
.btn-secondary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Gevaar */
.btn-danger        { background: var(--danger); color: var(--white); }
.btn-danger:hover  { background: var(--danger-dark); }

/* Tracking */
.btn-tracking {
  background: var(--brand-light);
  color: var(--brand);
  border: 1.5px solid var(--brand);
  margin-bottom: 8px;
}
.btn-tracking:hover { background: var(--brand); color: var(--white); }

/* Link-knop */
.btn-link {
  background: none;
  color: var(--brand);
  padding: 6px 0;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: 4px;
}
.btn-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }

/* Terug-knop */
.btn-back {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 8px 0;
  font-family: inherit;
  transition: color var(--transition);
}
.btn-back:hover          { color: var(--brand); }
.btn-back:focus-visible  { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.back-container         { margin-top: 14px; }
.back-container.hidden  { display: none; }

/* Knoppenrij */
.btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}
.btn-row .btn-secondary { margin-left: 0; }

/* ============================================================
   SERVICE CARD GRID — hoofdmenu (Fase 8D.2)
   Vervangt het dropdown-menu door klikbare servicekaarten.
   ============================================================ */
.home-intro {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 28px;
  line-height: 1.6;
}

.service-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.service-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  transition: border-color var(--transition), background var(--transition),
              box-shadow var(--transition), transform var(--transition);
  position: relative;
}
.service-card:hover {
  border-color: var(--brand);
  background: var(--brand-light);
  box-shadow: 0 4px 16px rgba(10,86,165,.12);
  transform: translateY(-2px);
}
.service-card:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(10,86,165,.08);
}
.service-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.service-card-icon {
  font-size: 30px;
  flex-shrink: 0;
  line-height: 1;
  width: 44px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-card-icon svg { color: var(--brand); display: block; }
.service-card-body {
  flex: 1;
  min-width: 0;
}
.service-card-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
}
.service-card:hover .service-card-title { color: var(--brand); }

.service-card-desc {
  display: block;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.service-card-arrow {
  color: var(--border-mid);
  font-size: 22px;
  font-weight: 300;
  flex-shrink: 0;
  transition: color var(--transition), transform var(--transition);
  line-height: 1;
}
.service-card:hover .service-card-arrow {
  color: var(--brand);
  transform: translateX(4px);
}

/* Annuleer-kaart: visueel gedempt (feature-flag variant) */
.service-card--cancel {
  border-style: dashed;
  background: var(--bg);
}
.service-card--cancel:hover { background: var(--brand-light); }

/* ============================================================
   KEUZEKNOPPEN (hoofd-topic selectie)
   ============================================================ */
.choice-group { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }

.btn-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  width: 100%;
  gap: 12px;
}
.btn-choice:hover {
  border-color: var(--brand);
  background: var(--brand-light);
  color: var(--brand);
  box-shadow: 0 2px 8px rgba(10,86,165,.08);
}
.btn-choice:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.choice-label { flex: 1; line-height: 1.4; }
.choice-icon  { font-size: 18px; flex-shrink: 0; }
.choice-arrow { color: var(--text-soft); font-size: 13px; flex-shrink: 0; transition: color var(--transition); }
.btn-choice:hover .choice-arrow { color: var(--brand); }

/* ============================================================
   INFO-BOXEN
   ============================================================ */
.hint-box {
  background: var(--warning-bg-yellow);
  border: 1px solid var(--warning-border-yellow);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--warning-text);
  margin-bottom: 20px;
  line-height: 1.55;
}
.hint-box code {
  background: rgba(0,0,0,.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}
.hint-scenarios { font-size: 12px; opacity: .85; }

.info-box {
  background: var(--brand-light);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--brand-dark);
  margin: 16px 0;
}
.info-box strong { display: block; margin-bottom: 2px; }

.confirm-box {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
}
.confirm-box p { color: var(--danger); font-weight: 500; margin-bottom: 0; }

/* Inline info block (leveringsflow) */
.info-block {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text-navy);
  margin-bottom: 18px;
}
.info-icon { font-size: 18px; line-height: 1.2; flex-shrink: 0; }

/* ============================================================
   FOUTMELDING
   ============================================================ */
.error-message {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.error-message.hidden { display: none; }

/* ============================================================
   ORDER-KAART
   ============================================================ */
.order-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin: 16px 0;
}
.order-card.compact { padding: 12px; margin: 12px 0; }
.order-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  gap: 12px;
}
.order-row:last-child { border-bottom: none; }
.order-row span    { color: var(--muted); flex-shrink: 0; }
.order-row strong  { color: var(--text); text-align: right; }
.link-inline { color: var(--brand); font-weight: 600; }

/* ============================================================
   STATUS BADGES
   ============================================================ */
.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.badge-verwerking  { background: var(--badge-pending-bg);   color: var(--badge-pending-text); }
.badge-verzonden   { background: var(--badge-shipped-bg);   color: var(--badge-shipped-text); }
.badge-afgeleverd  { background: var(--badge-delivered-bg); color: var(--badge-delivered-text); }
.badge-annuleerd   { background: var(--badge-cancelled-bg); color: var(--text-mid); }

/* Retourstatus-flow gebruikt de bestaande outcome-card, order-card,
   info-block en steps-list patronen — geen aparte CSS nodig. */

/* ============================================================
   INFO CARDS (grid)
   ============================================================ */
.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.info-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.info-card-icon { font-size: 22px; }
.info-card strong { display: block; font-size: 13px; margin-bottom: 2px; }
.info-card p { font-size: 12px; color: var(--muted); margin: 0; }

/* ============================================================
   FAQ-BLOK
   ============================================================ */
.faq-block { margin: 8px 0 20px; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}
.faq-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  background: var(--white);
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  gap: 12px;
  transition: background var(--transition);
}
.faq-toggle:hover { background: var(--bg); }
.faq-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.faq-arrow { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.faq-body {
  padding: 0 16px 14px;
  font-size: 14px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  line-height: 1.6;
}
.faq-body p { margin: 12px 0 0; }
.faq-body.hidden { display: none; }

/* ============================================================
   RESULTAATPICTOGRAMMEN
   ============================================================ */
.result-icon { font-size: 40px; margin-bottom: 12px; display: block; }

/* ============================================================
   STAPPEN-LIJST
   ============================================================ */
.steps-list { margin: 16px 0; }
.steps-item {
  display: flex;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  gap: 10px;
}
.steps-item:last-child { border-bottom: none; }
.steps-item::before { content: "✓"; color: var(--success); font-weight: 700; flex-shrink: 0; }

/* ============================================================
   SCHEIDINGSLIJN
   ============================================================ */
.divider { border: none; border-top: 1px solid var(--border); margin: 24px 0 16px; }

/* ============================================================
   BESTANDSUPLOAD
   ============================================================ */
.file-upload-area {
  border: 2px dashed var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 28px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.file-upload-area:hover {
  border-color: var(--brand);
  background: var(--brand-light);
}
.file-upload-area:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(10,86,165,.10);
}
.file-upload-icon  { font-size: 28px; margin-bottom: 8px; }
.file-upload-area p { margin: 0; font-size: 14px; color: var(--muted); }
.file-hint { font-size: 12px !important; margin-top: 4px !important; }

.foto-preview-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.foto-preview-container.hidden { display: none; }
.foto-preview-container img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.foto-name { font-size: 13px; color: var(--muted); }

/* ============================================================
   LOADING STATE (spinner in knop)
   ============================================================ */
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  cursor: not-allowed;
}
.btn-loading::after {
  content: "";
  position: absolute;
  width: 17px; height: 17px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin .55s linear infinite;
}
.btn-secondary.btn-loading::after {
  border-color: rgba(10,86,165,.2);
  border-top-color: var(--brand);
}

/* ============================================================
   GEVERIFIEERDE ORDER BADGE + BANNER
   ============================================================ */
.order-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success-border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}
.verified-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.verified-banner-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: var(--success);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.verified-banner-title { font-size: 15px; font-weight: 700; color: var(--success); margin: 0 0 2px !important; }
.verified-banner-sub   { font-size: 13px; color: var(--success-dark); margin: 0 !important; }

/* ---- Verificatie-detailblokken ---- */
.verif-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  margin: 16px 0 6px;
}
.verif-product-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 4px;
}
.verif-product-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.verif-product-row:last-child { border-bottom: none; }
.verif-product-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.verif-product-name { font-size: 14px; font-weight: 600; color: var(--text); }
.verif-variant      { font-size: 12px; color: var(--muted); }
.verif-sku          { font-size: 11px; color: var(--text-soft); font-family: 'Courier New', Courier, monospace; }
.verif-product-qty  {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-light);
  padding: 3px 9px;
  border-radius: 20px;
}
.verif-confirm-block {
  margin: 22px 0 4px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.verif-confirm-question {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px !important;
}

/* ============================================================
   OUTCOME CARDS
   ============================================================ */
.outcome-card {
  border-radius: var(--radius-sm);
  padding: 20px;
  margin: 20px 0 8px;
  border: 1px solid transparent;
}
.outcome-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
}
.outcome-icon {
  font-size: 26px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
  display: flex;
  align-items: center;
}
.outcome-icon svg { display: block; }
.outcome-type {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin: 0 0 2px !important;
  opacity: .7;
}
.outcome-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 !important;
  line-height: 1.3;
}
.outcome-body {
  font-size: 14px;
  line-height: 1.6;
  margin-left: 40px;
}
.outcome-body p { margin: 0; color: inherit; }

/* Outcome-varianten */
.outcome-resolved    { background: var(--success-bg); border-color: var(--success-border); color: var(--success-deep); }
.outcome-soft-warning {
  background: var(--warning-bg);
  border: 1.5px solid var(--warning-amber);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin-top: 16px;
  color: var(--warning-text-deep);
}
.outcome-soft-warning .outcome-icon  { font-size: 28px; margin-bottom: 8px; }
.outcome-soft-warning .outcome-title { font-size: 17px; font-weight: 700; color: var(--warning-text); margin-bottom: 6px; }
.outcome-soft-warning .outcome-body  { font-size: 14px; color: var(--warning-text-deep); line-height: 1.5; }
.outcome-manual   { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text-deep); }
.outcome-intercom { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info-deep); }
.outcome-blocked  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-deep); }

/* ============================================================
   PRODUCTSELECTOR (retour / defect)
   ============================================================ */
.product-selector { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 16px; }
.product-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  background: var(--white);
}
.product-option:hover { border-color: var(--brand); background: var(--brand-light); }
.product-option:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(10,86,165,.10); }
.product-option input[type="checkbox"],
.product-option input[type="radio"] { accent-color: var(--brand); width: 16px; height: 16px; flex-shrink: 0; }
.product-option-body      { flex: 1; }
.product-option-body strong { display: block; font-size: 14px; margin-bottom: 2px; }
.product-option-variant   { font-size: 13px; color: var(--muted); display: block; }
.product-option-qty       { font-size: 12px; color: var(--muted); }
.product-option-check     { color: var(--success); font-weight: 700; opacity: 0; transition: opacity var(--transition); }
.product-option:has(input:checked) { border-color: var(--brand); background: var(--brand-light); }
.product-option:has(input:checked) .product-option-check { opacity: 1; }

/* ============================================================
   REQUIRED BADGE
   ============================================================ */
.required-badge {
  display: inline-block;
  background: var(--danger);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ============================================================
   INTERNE SECTIE (Intercom / Shopify preview, alleen in demo)
   ============================================================ */
.internal-section {
  margin-top: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
.internal-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--border-soft);
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mid);
  letter-spacing: .3px;
  text-align: left;
  transition: background var(--transition);
  gap: 10px;
}
.internal-toggle:hover          { background: var(--surface-hover); }
.internal-toggle:focus-visible  { outline: 2px solid var(--brand); outline-offset: -2px; }
.internal-toggle-label          { flex: 1; }
.internal-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--white);
  background: var(--text-disabled);
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.mock-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--warning-text);
  background: var(--warning-amber-bg);
  border: 1px solid var(--warning-amber-border);
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.internal-toggle-arrow,
.internal-arrow { font-size: 11px; color: var(--text-disabled); flex-shrink: 0; }
.internal-body  { padding: 0 18px 18px; }
.mock-notice {
  background: var(--warning-softest);
  border: 1px solid var(--warning-amber-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--warning-text);
  margin: 14px 0 16px;
  line-height: 1.5;
}

/* ---- Tabs (Intercom / Shopify) ---- */
.internal-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 16px;
}
.internal-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.internal-tab:hover  { color: var(--text-mid); }
.internal-tab.active { color: var(--c-blue); border-bottom-color: var(--c-blue); font-weight: 600; }
.internal-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.internal-tab-panel        { display: none; }
.internal-tab-panel.active { display: block; }

/* ---- E-mailpreview ---- */
.email-preview {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: 13px;
}
.email-preview-meta {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
}
.email-meta-row { display: flex; gap: 8px; padding: 3px 0; line-height: 1.5; }
.email-meta-row > span,
.email-meta-label   { font-weight: 600; color: var(--muted); min-width: 72px; flex-shrink: 0; font-size: 12px; }
.email-meta-row > strong,
.email-meta-value   { color: var(--text-dark); word-break: break-all; font-size: 12px; }
.email-meta-subject > strong,
.email-meta-subject .email-meta-value { font-weight: 600; color: var(--text-darkest); }
.email-preview-body {
  padding: 16px;
  white-space: pre-wrap;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  color: var(--text-dark);
  line-height: 1.65;
  max-height: 340px;
  overflow-y: auto;
  background: var(--white);
}

/* ---- Shopify summary ---- */
.shopify-summary {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: 13px;
}
.shopify-summary-header {
  background: var(--success-bg);
  border-bottom: 1px solid var(--success-border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--success-dark);
}
.shopify-summary-body {
  padding: 14px 16px;
  white-space: pre-wrap;
  font-family: 'Courier New', Courier, monospace;
  font-size: 11.5px;
  color: var(--text-dark);
  line-height: 1.6;
  max-height: 320px;
  overflow-y: auto;
  background: var(--white);
}

/* ---- Copy-knoppen ---- */
.internal-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mid);
  background: var(--white);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn-copy:hover  { background: var(--bg); border-color: var(--text-disabled); color: var(--text-dark); }
.btn-copy.copied { color: var(--copy-success-text); border-color: var(--copy-success-border); background: var(--success-bg); }

/* ============================================================
   UTILITIES
   ============================================================ */
.hidden { display: none !important; }

/* ============================================================
   SUBCAT GRID (Flow 6 — Andere vraag)
   ============================================================ */
.subcat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.subcat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  width: 100%;
}
.subcat-card:hover {
  border-color: var(--brand);
  background: var(--brand-light);
  box-shadow: 0 2px 8px rgba(10,86,165,.08);
  color: var(--brand);
}
.subcat-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.subcat-icon  { font-size: 22px; flex-shrink: 0; line-height: 1; }
.subcat-label { line-height: 1.3; }

/* ============================================================
   SENDCLOUD RETOURLABEL
   ============================================================ */
.sendcloud-label-block {
  border: 1px solid var(--success-softest);
  border-radius: var(--radius-sm);
  background: var(--success-bg);
  margin: 16px 0;
  overflow: hidden;
}
.sendcloud-label-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--success-light-bg);
  border-bottom: 1px solid var(--success-border);
  padding: 10px 16px;
  font-size: 13px;
  color: var(--success-deep);
}
.sendcloud-label-icon { font-size: 18px; }
.sendcloud-label-body { padding: 12px 16px; }
.sendcloud-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid var(--success-bg);
  color: var(--text);
}
.sendcloud-label-row:last-child { border-bottom: none; }
.sendcloud-label-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 10px 16px 14px;
  text-align: center;
}
.sendcloud-label-url-row { flex-direction: column; align-items: flex-start; gap: 2px; }
.label-url-link {
  font-size: 11px;
  color: var(--brand);
  word-break: break-all;
  text-decoration: underline;
  font-weight: 400;
}

/* ============================================================
   TRACKING
   ============================================================ */
.tracking-staleness-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 20px;
  padding: 4px 12px;
  margin: 6px 0 10px;
}
.staleness-ok   { background: var(--success-light-bg); color: var(--success-deep); border: 1px solid var(--success-mid); }
.staleness-warn { background: var(--warning-bg); color: var(--warning-text-deep); border: 1px solid var(--warning-amber); }
.staleness-crit { background: var(--danger-bg);  color: var(--danger-dark-text); border: 1px solid var(--danger-border); }

/* Leveringsflow extra vragen */
.delivery-extra-vragen {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 14px 0 4px;
}
.delivery-extra-vragen legend,
.delivery-extra-vragen .extra-vragen-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  display: block;
}
.choice-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text);
}
.choice-row:last-child { border-bottom: none; padding-bottom: 0; }
.choice-row input[type="radio"],
.choice-row input[type="checkbox"] { margin-top: 3px; accent-color: var(--brand); flex-shrink: 0; }
.choice-row label { cursor: pointer; line-height: 1.4; }

/* ============================================================
   SELF-SERVICE KAARTEN (defect-instructies, Fase 8D.2)
   ============================================================ */
.self-service-intro {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 18px;
  line-height: 1.65;
}
.self-service-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 4px 0 24px;
}
.self-service-link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition),
              box-shadow var(--transition), transform var(--transition);
}
.self-service-link-card:hover {
  border-color: var(--brand);
  background: var(--brand-light);
  box-shadow: 0 4px 14px rgba(10,86,165,.12);
  color: var(--brand);
  transform: translateY(-1px);
}
.self-service-link-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-md); }
.ssl-icon  { font-size: 22px; flex-shrink: 0; line-height: 1; }
.ssl-label { flex: 1; font-weight: 600; }
.ssl-sub   { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.self-service-link-card:hover .ssl-sub { color: var(--brand-mid); }
.ssl-ext   { font-size: 20px; color: var(--border-mid); flex-shrink: 0; transition: color var(--transition), transform var(--transition); }
.self-service-link-card:hover .ssl-ext { color: var(--brand); transform: translateX(3px); }

/* Stappenlijst (E07) */
.self-service-steps {
  margin: 12px 0 22px 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.self-service-steps li {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.6;
  padding-left: 4px;
}
.self-service-steps li strong { color: var(--text); }

/* "Opgelost?"-blok — visueel onderscheiden van de instructie */
.self-service-solved-block {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 20px;
  background: var(--bg);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  margin-left: -36px;       /* strekt zich uit tot de kaartrand */
  margin-right: -36px;
  margin-bottom: -36px;
  padding: 20px 36px 28px;
}
.self-service-solved-q {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
  line-height: 1.3;
}

/* ============================================================
   DEMO BADGE (DEMO_MODE feature flag)
   ============================================================ */
.demo-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--c-purple);
  background: var(--demo-bg);
  border: 1px solid var(--demo-border);
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
}

/* ============================================================
   RESPONSIEF — Tablet (768px)
   ============================================================ */
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .flow-card { padding: 28px 28px; }
  .page-hero { padding: 32px 0 20px; }
  .page-hero h1 { font-size: 27px; }
  .self-service-solved-block {
    margin-left: -28px;
    margin-right: -28px;
    margin-bottom: -28px;
    padding: 18px 28px 24px;
  }
  /* Service cards: één kolom op tablet */
  .service-card-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIEF — Mobiel (520px)
   ============================================================ */
@media (max-width: 520px) {
  .container { padding: 0 16px; }
  .flow-card { padding: 20px; border-radius: var(--radius); }
  .page-hero { padding: 24px 0 14px; }
  .page-hero h1 { font-size: 23px; letter-spacing: -.3px; }
  .step-content h2 { font-size: 19px; }

  /* Header: verberg teruglink, compacte taalschakelaar */
  .header-back-link { display: none; }
  .header-inner { height: 52px; }

  /* Service cards: compacte weergave op mobiel */
  .service-card { padding: 16px; gap: 12px; }
  .service-card-icon { font-size: 24px; width: 36px; }
  .service-card-icon svg { width: 24px; height: 24px; }
  .result-icon svg { width: 40px; height: 40px; }
  .service-card-title { font-size: 14px; }
  .service-card-desc  { display: none; } /* verberg beschrijving op klein scherm */

  /* Knoppenrij stapelt vertikaal */
  .btn-row { flex-direction: column; }
  .btn-row .btn-primary,
  .btn-row .btn-secondary { width: 100%; margin-left: 0; text-align: center; }

  /* Keuzekaarten: volle breedte */
  .info-cards   { grid-template-columns: 1fr; }
  .subcat-grid  { grid-template-columns: 1fr; }

  /* Self-service: één kolom */
  .self-service-links { grid-template-columns: 1fr; }

  /* Self-service opgelost-blok past aan kleine padding */
  .self-service-solved-block {
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
    padding: 16px 20px 20px;
  }
}

/* ============================================================
   INLINE SVG ICON BASIS
   ============================================================ */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke: currentColor;
}
.icon--btn  { margin-right: 4px; vertical-align: -3px; }
.icon--inline { vertical-align: -2px; }

/* Result-icon: groot centred icoon boven flow-kaart */
.result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.result-icon svg { width: 48px; height: 48px; color: var(--brand); }

/* Choice-icon: kleiner icoon links in keuzeknop */
.choice-icon {
  font-size: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
}
.choice-icon svg { color: var(--brand); }

/* Info-icon: inline icoon voor info-blokken */
.info-icon {
  font-size: 18px;
  line-height: 1.2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.info-icon svg { color: var(--brand); }

/* Anders-subcat iconen */
.subcat-icon { display: flex; align-items: center; }
.subcat-icon svg { color: var(--brand); }

/* ============================================================
   ERROR FALLBACK BLOCK
   ============================================================ */
.error-fallback {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.error-fallback p {
  font-size: 14px;
  color: var(--text-mid);
  margin: 0 0 12px !important;
}
.error-fallback .btn-row {
  margin-top: 0;
  gap: 8px;
}
.error-fallback .btn-primary,
.error-fallback .btn-secondary {
  font-size: 14px;
  padding: 9px 16px;
}