/*
 * TV-REP-WIZARD — assets/css/wizard.css — v2026-08
 * Primair: #008080 | Font: Open Sans
 * Zimple Web | www.zimpleweb.nl
 */

.trw-card {
  --trw-primary:      #008080;
  --trw-primary-dark: #006567;
  --trw-accent:       #008080;
  --trw-bg:           #ffffff;
  --trw-surface:      #f5f7f8;
  --trw-border:       #dde2e6;
  --trw-text:         #1e2a2e;
  --trw-muted:        #637078;
  --trw-error:        #c0392b;
  --trw-radius:       10px;
  --trw-radius-sm:    6px;
  --trw-shadow:       0 2px 12px rgba(0,80,90,.08), 0 1px 3px rgba(0,0,0,.05);
  --trw-ease:         160ms cubic-bezier(.16,1,.3,1);

  background:    var(--trw-bg);
  border:        1px solid var(--trw-border);
  border-radius: var(--trw-radius);
  box-shadow:    var(--trw-shadow);
  max-width:     560px;
  margin-inline: auto;
  font-family:   'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size:     14px;
  line-height:   1.55;
  color:         var(--trw-text);
  box-sizing:    border-box;
  overflow:      hidden;
}

.trw-card *, .trw-card *::before, .trw-card *::after { box-sizing: inherit; }

/* Kleurband */
.trw-band {
  height:     3px;
  background: linear-gradient(90deg, var(--trw-primary) 0%, #00b3b3 100%);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.trw-header {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  padding:       16px 20px 14px;
  border-bottom: 1px solid var(--trw-border);
}
.trw-header-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  flex-shrink:     0;
  border-radius:   var(--trw-radius-sm);
  background:      var(--trw-primary);
  color:           #fff;
}
.trw-title {
  font-size:   .92rem;
  font-weight: 700;
  line-height: 1.25;
  margin:      0 0 3px;
  padding:     0;
  border:      none;
  color:       var(--trw-text);
}
.trw-intro { font-size:.78rem; color:var(--trw-muted); margin:0; line-height:1.45; }

/* ── Panes ────────────────────────────────────────────────────────────────── */
.trw-pane         { display:none; padding:18px 20px; }
.trw-pane--active { display:block; animation:trwIn .2s ease; }
@keyframes trwIn  { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* ── Veld-labels ──────────────────────────────────────────────────────────── */
.trw-label {
  font-size:   .88rem;
  font-weight: 700;
  margin:      0 0 14px;
  color:       var(--trw-text);
}
.trw-sublabel {
  display:        block;
  font-size:      .68rem;
  font-weight:    700;
  color:          var(--trw-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom:  4px;
}

/* ── Veld-wrappers ────────────────────────────────────────────────────────── */
.trw-field       { display:flex; flex-direction:column; }
.trw-field--full { margin-bottom:10px; }

.trw-row-2 {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
  margin-bottom:         2px;
}

/* ── Select ───────────────────────────────────────────────────────────────── */
.trw-select-wrap { position:relative; }
.trw-select {
  width:               100%;
  padding:             9px 32px 9px 11px;
  border:              1.5px solid var(--trw-border);
  border-radius:       var(--trw-radius-sm);
  font-family:         inherit;
  font-size:           .86rem;
  color:               var(--trw-text);
  background:          #fff;
  appearance:          none;
  cursor:              pointer;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23008080' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 10px center;
  transition:          border-color var(--trw-ease), box-shadow var(--trw-ease);
  line-height:         1.4;
}
.trw-select:focus {
  outline:      none;
  border-color: var(--trw-primary);
  box-shadow:   0 0 0 2.5px rgba(0,128,128,.13);
}
.trw-select option[value=""] { color: var(--trw-muted); }

/* ── Prijs-veld ───────────────────────────────────────────────────────────── */
/* FIX: border-left:none op input + focus-within sync naar prefix              */
.trw-price-row {
  display:     flex;
  align-items: stretch;
}
.trw-price-prefix {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0 11px;
  border:          1.5px solid var(--trw-border);
  border-right:    none;
  border-radius:   var(--trw-radius-sm) 0 0 var(--trw-radius-sm);
  background:      var(--trw-surface);
  font-size:       .9rem;
  font-weight:     700;
  color:           var(--trw-primary);
  flex-shrink:     0;
  line-height:     1;
  user-select:     none;
}
.trw-input {
  flex:            1;
  min-width:       0;
  padding:         9px 10px;
  border:          1.5px solid var(--trw-border);
  border-left:     none;
  border-radius:   0 var(--trw-radius-sm) var(--trw-radius-sm) 0;
  font-family:     inherit;
  font-size:       .86rem;
  color:           var(--trw-text);
  background:      #fff;
  -moz-appearance: textfield;
  transition:      border-color var(--trw-ease), box-shadow var(--trw-ease);
}
.trw-input::-webkit-inner-spin-button,
.trw-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.trw-input:focus {
  outline:      none;
  border-color: var(--trw-primary);
  box-shadow:   0 0 0 2.5px rgba(0,128,128,.13);
}
/* Synchroniseer focuskleur naar prefix */
.trw-price-row:focus-within .trw-price-prefix {
  border-color: var(--trw-primary);
}
.trw-input::placeholder { color: #aab4b8; }

/* ── Fout ─────────────────────────────────────────────────────────────────── */
.trw-error { font-size:.76rem; color:var(--trw-error); margin-top:7px; min-height:.95em; }

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.trw-nav        { display:flex; justify-content:space-between; align-items:center; margin-top:16px; gap:8px; }
.trw-nav--right { justify-content:flex-end; }

/* ── Knoppen basis ────────────────────────────────────────────────────────── */
.trw-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         9px 18px;
  border-radius:   var(--trw-radius-sm);
  font-family:     inherit;
  font-size:       .82rem;
  font-weight:     700;
  cursor:          pointer;
  border:          none;
  line-height:     1.3;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background var(--trw-ease), color var(--trw-ease),
                   border-color var(--trw-ease), transform var(--trw-ease);
}
/* Ghost/terug-knop blijft neutraal */
.trw-btn--ghost {
  background-color: transparent !important;
  color:            var(--trw-muted) !important;
  border:           1.5px solid var(--trw-border) !important;
}
.trw-btn--ghost:hover {
  background-color: var(--trw-surface) !important;
  color:            var(--trw-text) !important;
  border-color:     var(--trw-muted) !important;
}

/* ── Keuze-knoppen ────────────────────────────────────────────────────────── */
.trw-keuzes { display:flex; flex-direction:column; gap:8px; }
.trw-keuze {
  display:       flex;
  align-items:   center;
  gap:           12px;
  width:         100%;
  padding:       12px 14px;
  border:        1.5px solid var(--trw-border);
  border-radius: var(--trw-radius-sm);
  background:    var(--trw-surface);
  cursor:        pointer;
  text-align:    left;
  font-family:   inherit;
  transition:    border-color var(--trw-ease), background var(--trw-ease);
}
.trw-keuze:hover  { border-color:var(--trw-primary); background:rgba(0,128,128,.04); }
.trw-keuze:active { transform:scale(.99); }
.trw-keuze-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           34px;
  height:          34px;
  border-radius:   var(--trw-radius-sm);
  background:      rgba(0,128,128,.09);
  color:           var(--trw-primary);
  flex-shrink:     0;
}
.trw-keuze-tekst { flex:1; display:flex; flex-direction:column; gap:2px; }
.trw-keuze-label { font-size:.84rem; font-weight:700; color:var(--trw-text); }
.trw-keuze-sub   { font-size:.75rem; color:var(--trw-muted); }
.trw-keuze-arrow { color:var(--trw-muted); flex-shrink:0; transition:transform var(--trw-ease), color var(--trw-ease); }
.trw-keuze:hover .trw-keuze-arrow { transform:translateX(3px); color:var(--trw-primary); }

/* ── Resultaat ────────────────────────────────────────────────────────────── */
.trw-result-head  { display:flex; align-items:center; gap:11px; margin-bottom:9px; }
.trw-result-badge {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           42px;
  height:          42px;
  border-radius:   50%;
  background:      rgba(0,128,128,.10);
  font-size:       1.35rem;
  flex-shrink:     0;
}
.trw-result-titel {
  font-size:   .98rem;
  font-weight: 800;
  margin:      0;
  color:       var(--trw-primary-dark);
}
.trw-result-tekst {
  font-size:   .83rem;
  color:       var(--trw-muted);
  margin:      0 0 14px;
  line-height: 1.55;
}
.trw-result-divider {
  border:     none;
  border-top: 1px solid var(--trw-border);
  margin:     14px 0;
}

/* ── Winkelkeuze-blok ─────────────────────────────────────────────────────── */
.trw-winkel-blok {
  background:    var(--trw-surface);
  border:        1.5px solid var(--trw-border);
  border-radius: var(--trw-radius-sm);
  padding:       14px;
  margin-bottom: 10px;
}
.trw-winkel-label {
  display:        block;
  font-size:      .76rem;
  font-weight:    700;
  color:          var(--trw-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom:  8px;
}

/* Anders-tekst */
.trw-winkel-anders {
  display:       flex;
  align-items:   flex-start;
  gap:           9px;
  background:    rgba(0,128,128,.05);
  border:        1.5px solid rgba(0,128,128,.18);
  border-radius: var(--trw-radius-sm);
  padding:       10px 12px;
  font-size:     .8rem;
  color:         #004a4a;
  line-height:   1.5;
  animation:     trwIn .18s ease;
}
.trw-winkel-anders svg { color: var(--trw-primary); margin-top: 1px; }

/* Opnieuw-knop */
.trw-result-reset {
  display:         block;
  width:           100%;
  background:      none;
  border:          none;
  font-family:     inherit;
  font-size:       .76rem;
  color:           var(--trw-muted);
  cursor:          pointer;
  padding:         6px 4px 2px;
  text-align:      center;
  text-decoration: underline;
  transition:      color var(--trw-ease);
}
.trw-result-reset:hover { color: var(--trw-text); }

[hidden] { display: none !important; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 440px) {
  .trw-header,
  .trw-pane        { padding-inline: 14px; }
  .trw-header      { padding-top: 14px; padding-bottom: 12px; }
  .trw-row-2       { grid-template-columns: 1fr; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KNOP-OVERRIDE — alle actieknoppen: #008080 achtergrond, witte tekst
   !important zorgt dat thema-CSS nooit wint
   ═══════════════════════════════════════════════════════════════════════════ */
.trw-btn--primary,
.trw-btn--accent,
.trw-result-cta,
.trw-winkel-cta {
  display:          inline-flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  gap:              7px !important;
  width:            100% !important;
  padding:          10px 18px !important;
  border-radius:    var(--trw-radius-sm) !important;
  font-family:      inherit !important;
  font-size:        .85rem !important;
  font-weight:      700 !important;
  text-decoration:  none !important;
  background-color: #008080 !important;
  color:            #ffffff !important;
  border:           none !important;
  cursor:           pointer !important;
  margin-bottom:    8px !important;
  transition:       background-color var(--trw-ease), transform var(--trw-ease) !important;
  animation:        trwIn .18s ease;
}
.trw-btn--primary:hover,
.trw-btn--accent:hover,
.trw-result-cta:hover,
.trw-winkel-cta:hover {
  background-color: #006567 !important;
  color:            #ffffff !important;
}
.trw-btn--primary:active,
.trw-btn--accent:active,
.trw-result-cta:active,
.trw-winkel-cta:active {
  background-color: #004f50 !important;
  transform:        scale(.97) !important;
}

/* [hidden] mag nooit door de !important-display:flex overschreven worden */
.trw-winkel-cta[hidden],
.trw-result-cta[hidden] {
  display: none !important;
}