/* ============================================================
   Climax Wizard B2B — Frontend Stylesheet
   All classes prefixed .cwb2b- to avoid conflicts with
   existing climax-ruitschade-wizard plugin (v8.x).
   ============================================================ */

/* ── SCREEN MANAGEMENT ── */
.cwb2b-screen { display: none; }
.cwb2b-screen.cwb2b-aktief { display: block; }

/* ── BASE ── */
.cwb2b-wizard {
  font-family: 'Be Vietnam Pro', sans-serif;
  background: transparent;
}

/* ── CARD ── */
.cwb2b-card {
  width: 100%;
  max-width: 760px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  overflow: hidden;
  margin: 0 auto;
}
.cwb2b-card--sm {
  max-width: 680px;
  padding: 40px 32px;
  overflow: visible;
}

/* ── PROGRESS BAR ── */
.cwb2b-progress {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 32px 0;
  background: #fff;
}
.cwb2b-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}
.cwb2b-step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 15px;
  left: calc(50% + 16px);
  width: calc(100% - 32px);
  height: 2px;
  background: #D1D5DB;
}
.cwb2b-step-item.cwb2b-done:not(:last-child)::after { background: #2E7D32; }
.cwb2b-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: #D1D5DB;
  color: #6B7280;
  position: relative;
  z-index: 1;
}
.cwb2b-step-item.cwb2b-active .cwb2b-step-dot { background: #E53935; color: #fff; }
.cwb2b-step-item.cwb2b-done .cwb2b-step-dot   { background: #2E7D32; color: #fff; }
.cwb2b-step-label {
  font-size: 11px;
  font-weight: 500;
  color: #6B7280;
  margin-top: 6px;
  text-align: center;
}
.cwb2b-step-item.cwb2b-active .cwb2b-step-label { color: #E53935; font-weight: 700; }
.cwb2b-step-item.cwb2b-done .cwb2b-step-label   { color: #2E7D32; }

/* ── CONTENT ── */
.cwb2b-content { padding: 28px 32px; }
.cwb2b-content--bevestiging { padding: 28px 32px 40px; }

/* ── NAVIGATIE ── */
.cwb2b-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px 28px;
  border-top: 1px solid #F3F4F6;
  gap: 12px;
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 10;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
}
.cwb2b-btn {
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid transparent;
}
.cwb2b-btn-vorige { background: #fff !important; border: 2px solid #E53935 !important; color: #E53935 !important; }
.cwb2b-btn-vorige:hover { background: #FFEBEE !important; }

/* Volgende: grijs = not-ready, groen = klaar */
.cwb2b-btn-volgende {
  background: #9CA3AF !important;
  color: #fff !important;
  border: none !important;
  margin-left: auto;
  cursor: not-allowed;
}
.cwb2b-btn-volgende.cwb2b-btn-klaar {
  background: linear-gradient(135deg, #43A047, #2E7D32) !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer;
}
.cwb2b-btn-volgende.cwb2b-btn-klaar:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 12px rgba(46,125,50,0.25);
  color: #fff !important;
}

/* Fout-banner */
.cwb2b-fout-banner {
  background: #FFEBEE;
  border-left: 4px solid #E53935;
  color: #C62828;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
  line-height: 1.4;
}

/* ── SLIDE-IN ANIMATIE ── */
@keyframes cwb2bSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cwb2b-sectie-reveal { animation: cwb2bSlideIn 0.2s ease-out both; }

/* ── SECTIE (spacer) ── */
.cwb2b-sectie { margin-top: 24px; }
.cwb2b-sectie--lg { margin-top: 28px; }

/* ── STAP 0: KEUZE ── */
.cwb2b-header { text-align: center; margin-bottom: 32px; }
.cwb2b-keuze-title {
  font-size: 24px;
  font-weight: 700;
  color: #1A2540;
  line-height: 1.3;
}
.cwb2b-keuze-grid { display: flex; flex-direction: column; gap: 12px; }
.cwb2b-keuze-kaart {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: 20px 24px;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  width: 100%;
  font-family: inherit;
}
.cwb2b-keuze-kaart:hover {
  border-color: #E53935;
  box-shadow: 0 6px 20px rgba(229,57,53,0.10);
  transform: translateY(-2px);
}
.cwb2b-keuze-kaart.cwb2b-actief { border-color: #E53935; background: #FFEBEE; }
.cwb2b-keuze-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 10px;
  text-align: center;
  min-width: 0;
}
.cwb2b-keuze-icon-wrap {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: #FFEBEE;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E53935;
  transition: background 0.18s;
}
.cwb2b-keuze-kaart:hover .cwb2b-keuze-icon-wrap,
.cwb2b-keuze-kaart.cwb2b-actief .cwb2b-keuze-icon-wrap { background: #FDDDE0; }
.cwb2b-keuze-body { min-width: 0; }
.cwb2b-keuze-heading { font-size: 17px; font-weight: 700; color: #192540; line-height: 1.35; margin-bottom: 4px; }
.cwb2b-keuze-sub    { font-size: 13px; color: #6D6E71; line-height: 1.4; font-weight: 400; }
.cwb2b-keuze-arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E53935;
  transition: color 0.18s;
}
.cwb2b-keuze-kaart:hover .cwb2b-keuze-arrow { color: #C62828; }

/* ── STAP 1: AUTO SVG ── */
.cwb2b-stap1-header { text-align: center; margin-bottom: 28px; }
.cwb2b-stap1-title  { font-size: 24px; font-weight: 700; color: #1A2540; line-height: 1.3; }
.cwb2b-stap1-sub    { font-size: 14px; color: #6B7280; margin-top: 6px; }
.cwb2b-stap1-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: start;
}
.cwb2b-auto-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* SVG ruit-zones */
.cwb2b-ruit-zone { cursor: pointer; transition: opacity 0.15s; }
.cwb2b-ruit-zone:hover .cwb2b-zone-fill  { fill: rgba(229,57,53,0.18) !important; stroke: #E53935 !important; }
.cwb2b-ruit-zone.cwb2b-is-selected .cwb2b-zone-fill { fill: rgba(229,57,53,0.45) !important; stroke: #E53935 !important; stroke-width: 2 !important; }
.cwb2b-zone-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 9px;
  font-weight: 600;
  fill: #6B7280;
  pointer-events: none;
  letter-spacing: 0.3px;
}
.cwb2b-ruit-zone.cwb2b-is-selected .cwb2b-zone-label { fill: #C62828; }
.cwb2b-zone-check { display: none; pointer-events: none; }
.cwb2b-ruit-zone.cwb2b-is-selected .cwb2b-zone-check { display: block; }

.cwb2b-rechts { display: flex; flex-direction: column; gap: 20px; }
.cwb2b-sectie-label { font-size: 18px; font-weight: 700; color: #1A2540; margin-bottom: 10px; }
.cwb2b-sectie-sub-txt { font-size: 13px; color: #6B7280; font-weight: 400; }

/* Schadegrootte cards */
.cwb2b-grootte-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cwb2b-grootte-card {
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  position: relative;
}
.cwb2b-grootte-card:hover { border-color: #E53935; box-shadow: 0 2px 8px rgba(229,57,53,0.1); }
.cwb2b-grootte-card.cwb2b-actief { border-color: #E53935; background: #FFEBEE; }
.cwb2b-grootte-card.cwb2b-actief .cwb2b-sel-check { opacity: 1; }
.cwb2b-sel-check {
  position: absolute; top: 8px; right: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #E53935; color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s;
}
.cwb2b-grootte-icon { width: 36px; height: 36px; margin-bottom: 8px; color: #E53935; }
.cwb2b-grootte-icon svg { width: 100%; height: 100%; }
.cwb2b-grootte-title { font-size: 13px; font-weight: 700; color: #1A2540; margin-bottom: 4px; }
.cwb2b-grootte-sub {
  display: inline-block;
  font-size: 13px; font-weight: 600; color: #374151;
  background: #F3F4F6; border: 1px solid #E5E7EB;
  border-radius: 4px; padding: 2px 7px; margin-bottom: 5px;
}
.cwb2b-grootte-duur { font-size: 11px; color: #6B7280; margin-top: 2px; }

/* Warning banners */
.cwb2b-warning {
  background: #E8F5E9; border: 1px solid #A5D6A7; border-radius: 10px;
  padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start;
}
.cwb2b-warning svg { flex-shrink: 0; margin-top: 1px; color: #2E7D32; }
.cwb2b-warning-text { font-size: 12px; color: #1B5E20; line-height: 1.5; }
.cwb2b-warning-text strong { font-weight: 700; }
.cwb2b-warning-check-wrap {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: #2E7D32; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; margin-top: 1px;
}

/* Vervangen info-card */
.cwb2b-vervangen-card {
  background: #E8F5E9; border: 1.5px solid #A5D6A7; border-radius: 12px;
  padding: 20px 20px 16px; text-align: center;
}
.cwb2b-vervangen-check-wrap {
  width: 52px; height: 52px; border-radius: 50%;
  background: #2E7D32; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; margin: 0 auto 14px;
}
.cwb2b-vervangen-titel  { font-size: 15px; font-weight: 700; color: #1B5E20; margin-bottom: 8px; }
.cwb2b-vervangen-tekst  { font-size: 13px; color: #2E7D32; line-height: 1.6; }
.cwb2b-vervangen-naam   { font-weight: 700; }

/* Oorzaak cards */
.cwb2b-oorzaak-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cwb2b-oorzaak-card {
  border: 1.5px solid #E5E7EB; border-radius: 10px; padding: 12px 14px;
  cursor: pointer; display: flex; align-items: center; gap: 10px; position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.cwb2b-oorzaak-card:hover { border-color: #E53935; background: #FFF5F5; }
.cwb2b-oorzaak-card.cwb2b-actief { border-color: #E53935; background: #FFEBEE; }
.cwb2b-oorzaak-card.cwb2b-actief .cwb2b-oorzaak-sel { opacity: 1; }
.cwb2b-oorzaak-sel {
  position: absolute; top: 6px; right: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #E53935; color: #fff; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s;
}
.cwb2b-oorzaak-icon { width: 28px; height: 28px; flex-shrink: 0; color: #E53935; }
.cwb2b-oorzaak-icon svg { width: 100%; height: 100%; }
.cwb2b-oorzaak-label { font-size: 13px; font-weight: 600; color: #1A2540; }

/* Toelichting (anders) */
.cwb2b-anders-wrap { margin-top: 8px; display: none; }
.cwb2b-anders-wrap.cwb2b-zichtbaar { display: block; }
.cwb2b-textarea {
  width: 100%; border: 1.5px solid #E5E7EB; border-radius: 10px;
  padding: 10px 12px; font-family: inherit; color: #1A2540;
  resize: none; line-height: 1.5; outline: none; transition: border-color 0.15s;
}
.cwb2b-textarea:focus { border-color: #E53935; }
.cwb2b-textarea--resize { resize: vertical; min-height: 80px; font-size: 14px; }

/* ── STAP 2: VOERTUIG ── */
.cwb2b-stap2-title { font-size: 24px; font-weight: 700; color: #1A2540; line-height: 1.3; margin-bottom: 6px; }
.cwb2b-stap2-sub   { font-size: 14px; color: #6B7280; margin-bottom: 24px; }
.cwb2b-veld-label  { display: block; font-size: 13px; font-weight: 700; color: #1A2540; margin-bottom: 4px; }
.cwb2b-veld-sub    { display: block; font-size: 12px; color: #6B7280; margin-bottom: 8px; }
.cwb2b-optioneel   { font-size: 0.72em; font-weight: 500; color: #9CA3AF; }

/* Kentekenplaat */
.cwb2b-kenteken-row {
  display: flex; align-items: stretch;
  border-radius: 10px; overflow: hidden;
  border: 2px solid #D1D5DB; width: fit-content;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.cwb2b-nl-balk {
  background: #003399; width: 42px; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4px 0; gap: 3px; flex-shrink: 0;
}
.cwb2b-nl-text { font-size: 14px; font-weight: 700; color: #FBC02D; letter-spacing: 1px; line-height: 1; }
.cwb2b-kenteken-input {
  background: #FBC02D; border: none; outline: none;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 22px; font-weight: 700; letter-spacing: 4px;
  text-transform: uppercase; text-align: center; color: #1A2540;
  padding: 12px 16px; width: 220px;
}
.cwb2b-kenteken-input::placeholder { color: rgba(26,37,64,0.3); letter-spacing: 2px; }
.cwb2b-btn-opzoeken {
  background: linear-gradient(135deg, #43A047, #2E7D32); color: #fff !important; border: none; padding: 12px 24px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: filter 0.15s;
  display: flex; align-items: center; gap: 7px; border-radius: 10px;
}
.cwb2b-btn-opzoeken:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 3px 10px rgba(46,125,50,0.25); color: #fff !important; }
.cwb2b-btn-opzoeken:disabled { background: #9CA3AF; cursor: not-allowed; filter: none; }

/* Stap 2 knoppenbalk: Zoeken + Geen-kenteken naast elkaar */
.cwb2b-stap2-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

/* Geen-kenteken prominente donkere knop */
.cwb2b-btn-geen-kenteken {
  background: #1C1C1C !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px;
  padding: 12px 24px !important;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
  text-decoration: none !important;
}
.cwb2b-btn-geen-kenteken:hover,
.cwb2b-btn-geen-kenteken:focus {
  background: #2C2C2C !important;
  color: #fff !important;
}

/* Stap 2 Volgende: grijs = not-ready, groen = klaar */
.cwb2b-btn-a2-volgende {
  background: #9CA3AF !important;
  border: none !important;
  color: #fff !important;
  cursor: not-allowed;
}
.cwb2b-btn-a2-volgende.cwb2b-btn-klaar {
  background: linear-gradient(135deg, #43A047, #2E7D32) !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer;
}
.cwb2b-btn-a2-volgende.cwb2b-btn-klaar:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 12px rgba(46,125,50,0.25);
  color: #fff !important;
}

/* Amber "niet gevonden" card */
.cwb2b-amber-card {
  background: #FFF8E1; border: 1.5px solid #F9A825; border-radius: 12px; padding: 16px 20px;
}
.cwb2b-amber-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.cwb2b-amber-icon {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: #F9A825; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.cwb2b-amber-titel { font-size: 14px; font-weight: 700; color: #4D2C00; margin-bottom: 4px; }
.cwb2b-amber-tekst { font-size: 13px; color: #6B3E00; line-height: 1.5; }
.cwb2b-amber-knoppen { display: flex; gap: 10px; flex-wrap: wrap; }
.cwb2b-btn-opnieuw {
  padding: 10px 18px; border-radius: 8px; font-family: inherit;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.15s;
  background: #fff; border: 2px solid #E53935; color: #E53935;
}
.cwb2b-btn-opnieuw:hover { background: #FFEBEE; }
.cwb2b-btn-handmatig {
  padding: 10px 18px; border-radius: 8px; font-family: inherit;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.15s;
  background: linear-gradient(135deg, #43A047, #2E7D32); border: none; color: #fff !important;
}
.cwb2b-btn-handmatig:hover { filter: brightness(1.08); box-shadow: 0 3px 10px rgba(46,125,50,0.25); color: #fff !important; }

/* Link knoppen */
.cwb2b-link-btn {
  background: none; border: none; font-family: inherit;
  font-size: 13px; color: #9CA3AF; cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
  margin-top: 10px; display: inline-block; transition: color 0.15s;
}
.cwb2b-link-btn:hover { color: #6B7280; }
.cwb2b-link-btn-prominent {
  font-size: 13px; font-weight: 600; color: #4B5563;
  display: inline-flex; align-items: center; gap: 5px;
  text-decoration: underline; text-underline-offset: 2px;
  background: none; border: none; font-family: inherit; cursor: pointer;
}
.cwb2b-link-btn-prominent:hover { color: #1A2540; }

/* Voertuig gevonden card */
.cwb2b-voertuig-card {
  background: #E8F5E9; border: 1.5px solid #A5D6A7; border-radius: 12px; padding: 16px 20px;
}
.cwb2b-voertuig-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.cwb2b-voertuig-check {
  width: 26px; height: 26px; border-radius: 50%;
  background: #2E7D32; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.cwb2b-voertuig-gevonden-label { font-size: 15px; font-weight: 700; color: #1B5E20; }
.cwb2b-voertuig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cwb2b-v-label  { font-size: 11px; font-weight: 600; color: #6B7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.cwb2b-v-waarde { font-size: 15px; font-weight: 700; color: #1A2540; }

/* Upload zone */
.cwb2b-upload-zone {
  display: flex; align-items: center; gap: 14px;
  border: 2px dashed #D1D5DB; border-radius: 12px;
  padding: 18px 20px; cursor: pointer;
  background: #FAFAFA; transition: border-color 0.15s, background 0.15s;
}
.cwb2b-upload-zone:hover { border-color: #9CA3AF; background: #F9FAFB; }
.cwb2b-upload-zone.cwb2b-heeft-bestand { border-color: #A5D6A7; border-style: solid; background: #E8F5E9; }
.cwb2b-upload-icon-wrap {
  width: 48px; height: 48px; border-radius: 50%;
  background: #F3F4F6; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #6B7280; transition: background 0.15s, color 0.15s;
}
.cwb2b-upload-zone:hover .cwb2b-upload-icon-wrap { background: #E5E7EB; color: #374151; }
.cwb2b-upload-zone.cwb2b-heeft-bestand .cwb2b-upload-icon-wrap { background: #C8E6C9; color: #2E7D32; }
.cwb2b-upload-title { font-size: 14px; font-weight: 700; color: #1A2540; }
.cwb2b-upload-sub   { font-size: 12px; color: #6B7280; margin-top: 2px; }
.cwb2b-upload-bestand {
  display: none; align-items: center; gap: 8px; margin-top: 8px;
  padding: 8px 12px; background: #F9FAFB;
  border-radius: 8px; border: 1px solid #E5E7EB;
  font-size: 13px; color: #374151;
}
.cwb2b-upload-bestand.cwb2b-zichtbaar { display: flex; }
.cwb2b-upload-verwijder {
  background: none; border: none; cursor: pointer;
  color: #9CA3AF; font-size: 16px; padding: 0 0 0 8px;
  line-height: 1; transition: color 0.15s; margin-left: auto;
}
.cwb2b-upload-verwijder:hover { color: #E53935; }

/* ── STAP 3: GEGEVENS ── */
.cwb2b-stap3-title { font-size: 24px; font-weight: 700; color: #1A2540; line-height: 1.3; margin-bottom: 6px; }
.cwb2b-stap3-sub   { font-size: 14px; color: #6B7280; margin-bottom: 28px; line-height: 1.5; }
.cwb2b-form-fields { display: flex; flex-direction: column; gap: 20px; }
.cwb2b-field-label { display: block; font-size: 13px; font-weight: 700; color: #1A2540; margin-bottom: 6px; }
.cwb2b-input {
  width: 100%; border: 1.5px solid #E5E7EB; border-radius: 10px;
  padding: 11px 14px; font-size: 14px; font-family: inherit;
  color: #1A2540; outline: none; transition: border-color 0.15s; background: #fff;
}
.cwb2b-input:focus { border-color: #E53935; }
.cwb2b-input.cwb2b-is-invalid { border-color: #E53935; background: #FFF5F5; }
.cwb2b-fout-msg { font-size: 12px; color: #991B1B; margin-top: 5px; display: none; }
.cwb2b-fout-msg.cwb2b-zichtbaar { display: block; }
.cwb2b-sectie-kop { font-size: 18px; font-weight: 700; color: #1A2540; margin-bottom: 12px; }

/* Voorkeursdatum card */
.cwb2b-datum-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1.5px solid #E5E7EB; border-radius: 12px; padding: 14px 16px;
}
.cwb2b-datum-icon-wrap {
  width: 44px; height: 44px; border-radius: 50%;
  background: #FFEBEE; color: #E53935;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cwb2b-datum-meta { flex: 1; min-width: 0; }
.cwb2b-datum-label-txt { font-size: 11px; font-weight: 600; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.cwb2b-datum-waarde { font-size: 15px; font-weight: 700; color: #1A2540; }
.cwb2b-datum-edit-btn {
  background: #F9FAFB; border: 1.5px solid #E5E7EB !important; border-radius: 8px;
  padding: 7px 12px; cursor: pointer; color: #6B7280;
  display: flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  transition: all 0.15s; flex-shrink: 0;
}
.cwb2b-datum-edit-btn:hover { background: #F3F4F6; color: #374151; border-color: #D1D5DB !important; }

/* Kalender */
.cwb2b-calendar {
  background: #F9FAFB; border: 1px solid #E5E7EB;
  border-radius: 12px; padding: 14px; margin-top: 12px;
}
.cwb2b-cal-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.cwb2b-cal-month-label { font-size: 13px; font-weight: 700; color: #1A2540; text-transform: capitalize; }
.cwb2b-cal-nav {
  width: 28px; height: 28px; border: none; background: none;
  cursor: pointer; border-radius: 6px; font-size: 16px; color: #6B7280;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.cwb2b-cal-nav:hover:not(:disabled) { background: #F3F4F6; color: #1A2540; }
.cwb2b-cal-nav:disabled { opacity: 0.3; cursor: default; }
.cwb2b-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cwb2b-cal-dow { font-size: 10px; font-weight: 600; color: #9CA3AF; text-align: center; padding: 4px 0; }
.cwb2b-cal-day {
  font-size: 12px; text-align: center; padding: 5px 2px;
  border-radius: 6px; cursor: pointer; color: #374151; transition: background 0.12s;
}
.cwb2b-cal-day:hover:not(.cwb2b-is-disabled):not(.cwb2b-is-empty) { background: #FFEBEE; color: #E53935; }
.cwb2b-cal-day.cwb2b-is-today    { font-weight: 700; }
.cwb2b-cal-day.cwb2b-is-selected { background: #E53935 !important; color: #fff !important; }
.cwb2b-cal-day.cwb2b-is-disabled { color: #D1D5DB; cursor: default; pointer-events: none; }
.cwb2b-cal-day.cwb2b-is-empty    { cursor: default; }

/* Tijdstip cards */
.cwb2b-tijd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cwb2b-tijd-card {
  border: 1.5px solid #E5E7EB; border-radius: 12px;
  padding: 20px 16px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.cwb2b-tijd-card:hover { border-color: #E53935; background: #FFF5F5; }
.cwb2b-tijd-card.cwb2b-actief { border-color: #E53935; background: #FFEBEE; }
.cwb2b-tijd-check {
  position: absolute; top: 8px; right: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #E53935; color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s;
}
.cwb2b-tijd-card.cwb2b-actief .cwb2b-tijd-check { opacity: 1; }
.cwb2b-tijd-icon { width: 40px; height: 40px; }
.cwb2b-tijd-icon svg { width: 100%; height: 100%; }
.cwb2b-tijd-title  { font-size: 15px; font-weight: 700; color: #1A2540; }
.cwb2b-tijd-subtxt { font-size: 13px; color: #6B7280; }

/* AVG / Privacy */
.cwb2b-avg-wrap {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 20px;
}
.cwb2b-avg-checkbox { margin-top: 3px; width: 16px; height: 16px; accent-color: #E53935; flex-shrink: 0; cursor: pointer; }
.cwb2b-avg-label { font-size: 13px; color: #374151; line-height: 1.5; }
.cwb2b-avg-label a { color: #2E7D32; font-weight: 600; }

/* ── STAP 4 / FLOW B STAP 2: BEVESTIGING ── */
.cwb2b-succes-wrap {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 24px 0 28px;
}
.cwb2b-succes-cirkel {
  width: 80px; height: 80px; border-radius: 50%;
  background: #2E7D32;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(46,125,50,0.28);
  margin-bottom: 20px;
}
.cwb2b-succes-titel { font-size: 26px; font-weight: 700; color: #1A2540; line-height: 1.25; margin-bottom: 8px; }
.cwb2b-succes-sub   { font-size: 14px; color: #6B7280; line-height: 1.55; max-width: 420px; }

.cwb2b-overzicht-card {
  background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 12px; padding: 4px 16px;
}
.cwb2b-overzicht-rij { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.cwb2b-overzicht-rij:not(:last-child) { border-bottom: 1px solid #E5E7EB; }
.cwb2b-overzicht-icon {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: #FFEBEE; color: #E53935;
  display: flex; align-items: center; justify-content: center;
}
.cwb2b-overzicht-info   { flex: 1; min-width: 0; }
.cwb2b-overzicht-label  { font-size: 11px; font-weight: 600; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.cwb2b-overzicht-waarde { font-size: 14px; font-weight: 600; color: #1A2540; }

.cwb2b-wat-nu-card { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 12px; padding: 18px 20px; }
.cwb2b-wat-nu-titel { font-size: 15px; font-weight: 700; color: #1A2540; margin-bottom: 6px; }
.cwb2b-wat-nu-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; }
.cwb2b-wat-nu-item:not(:last-child) { border-bottom: 1px solid #E5E7EB; }
.cwb2b-wat-nu-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: #E8F5E9; color: #2E7D32;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.cwb2b-wat-nu-tekst { font-size: 14px; color: #374151; line-height: 1.45; }

.cwb2b-contact-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 24px;
}
.cwb2b-contact-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 8px; border-radius: 10px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  text-decoration: none; transition: all 0.15s; border: 2px solid transparent;
}
.cwb2b-contact-tel  { background: #fff; border-color: #E53935; color: #1A2540; }
.cwb2b-contact-tel:hover  { background: #FFEBEE; }
.cwb2b-contact-wa   { background: #25D366; border-color: #25D366; color: #fff; }
.cwb2b-contact-wa:hover   { background: #1EB858; border-color: #1EB858; }
.cwb2b-contact-mail { background: #fff; border-color: #D1D5DB; color: #374151; }
.cwb2b-contact-mail:hover { background: #F9FAFB; }

/* ── FLOW B STAP 1: MOMENT CARDS ── */
.cwb2b-moment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cwb2b-moment-card {
  border: 1.5px solid #E5E7EB; border-radius: 12px;
  padding: 20px 16px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.cwb2b-moment-card:hover  { border-color: #E53935; background: #FFF5F5; }
.cwb2b-moment-card.cwb2b-actief { border-color: #E53935; background: #FFEBEE; }
.cwb2b-moment-check {
  position: absolute; top: 8px; right: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #E53935; color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s;
}
.cwb2b-moment-card.cwb2b-actief .cwb2b-moment-check { opacity: 1; }
.cwb2b-moment-icon-wrap {
  width: 48px; height: 48px; border-radius: 50%;
  background: #FFEBEE; color: #E53935;
  display: flex; align-items: center; justify-content: center;
}
.cwb2b-moment-card.cwb2b-actief .cwb2b-moment-icon-wrap { background: #FDDDE0; }
.cwb2b-moment-icon-wrap svg { width: 22px; height: 22px; }
.cwb2b-moment-titel { font-size: 14px; font-weight: 700; color: #1A2540; }
.cwb2b-moment-sub   { font-size: 13px; color: #6B7280; line-height: 1.3; }
.cwb2b-moment-klein { font-size: 11px; color: #9CA3AF; }

/* ── FLOW C: SPOED ── */
.cwb2b-terug-link {
  display: inline-block; font-size: 13px; color: #9CA3AF;
  text-decoration: none; margin-bottom: 28px; transition: color 0.15s;
  background: none; border: none; cursor: pointer; font-family: inherit; padding: 0;
}
.cwb2b-terug-link:hover { color: #6B7280; }

@keyframes cwb2bSpoedPing {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.65); opacity: 0; }
}
@keyframes cwb2bSirenePuls {
  0%, 100% { color: #E53935; }
  50%       { color: rgba(229,57,53,0.45); }
}
.cwb2b-spoed-attention {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding-bottom: 28px;
}
.cwb2b-sirene-wrap { position: relative; display: inline-flex; margin-bottom: 22px; }
.cwb2b-sirene-wrap::before {
  content: '';
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(229,57,53,0.28);
  animation: cwb2bSpoedPing 2s ease-out infinite;
  pointer-events: none;
}
.cwb2b-sirene-cirkel {
  width: 88px; height: 88px; border-radius: 50%;
  background: #FFEBEE; color: #E53935;
  display: flex; align-items: center; justify-content: center;
  animation: cwb2bSirenePuls 1.6s ease-in-out infinite;
  position: relative; z-index: 1;
}
.cwb2b-spoed-titel { font-size: 28px; font-weight: 700; color: #1A2540; line-height: 1.2; margin-bottom: 8px; }
.cwb2b-spoed-sub   { font-size: 14px; color: #6B7280; line-height: 1.5; }
.cwb2b-spoed-bel-btn {
  display: flex; align-items: center; gap: 18px;
  width: 100%; padding: 0 28px; min-height: 80px;
  background: #E53935; border-radius: 14px;
  color: #fff; text-decoration: none;
  box-shadow: 0 4px 18px rgba(229,57,53,0.38);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  border: none; font-family: inherit; cursor: pointer;
}
.cwb2b-spoed-bel-btn:hover {
  background: #C62828;
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(229,57,53,0.48);
}
.cwb2b-spoed-bel-icon   { flex-shrink: 0; width: 32px; height: 32px; }
.cwb2b-spoed-bel-tekst  { display: flex; flex-direction: column; gap: 1px; }
.cwb2b-spoed-bel-label  { font-size: 13px; font-weight: 500; opacity: 0.88; }
.cwb2b-spoed-bel-nummer { font-size: 26px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.2; }
.cwb2b-spoed-info-txt   { text-align: center; font-size: 13px; color: #9CA3AF; margin-top: 12px; line-height: 1.4; }
.cwb2b-spoed-amber-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: #FFF8E1; border: 1px solid #F9A825;
  border-radius: 12px; padding: 14px 16px; margin-top: 20px;
}
.cwb2b-spoed-amber-icon {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: #FFF3CD; color: #F9A825;
  display: flex; align-items: center; justify-content: center;
}
.cwb2b-spoed-amber-tekst { font-size: 13px; color: #7B6000; line-height: 1.5; margin-top: 3px; }
.cwb2b-alt-sectie { margin-top: 28px; }
.cwb2b-alt-titel  { font-size: 13px; color: #9CA3AF; font-weight: 500; text-align: center; margin-bottom: 10px; }
.cwb2b-alt-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cwb2b-alt-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 8px; border-radius: 10px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  text-decoration: none; transition: all 0.15s; border: 2px solid transparent;
}
.cwb2b-alt-wa   { background: #25D366; border-color: #25D366; color: #fff; }
.cwb2b-alt-wa:hover   { background: #1EB858; border-color: #1EB858; }
.cwb2b-alt-mail { background: #fff; border-color: #D1D5DB; color: #374151; }
.cwb2b-alt-mail:hover { background: #F9FAFB; }

/* ── MOBILE ZOOM FIX (iOS Safari auto-zoom preventie) ── */
@media (max-width: 768px) {
  .cwb2b-wizard input[type="text"],
  .cwb2b-wizard input[type="email"],
  .cwb2b-wizard input[type="tel"],
  .cwb2b-wizard textarea,
  .cwb2b-wizard select {
    font-size: 16px !important;
  }
}

/* ── RESPONSIVE ── */
@media (max-width: 620px) {
  .cwb2b-stap1-grid { grid-template-columns: 1fr; }
  .cwb2b-auto-wrap  { margin: 0 auto; max-width: 200px; }
  .cwb2b-content    { padding: 20px 16px; }
  .cwb2b-nav-row    { padding: 16px 16px 24px; }
}
@media (max-width: 580px) {
  .cwb2b-content          { padding: 20px 16px; }
  .cwb2b-content--bevestiging { padding: 20px 16px 32px; }
  .cwb2b-nav-row          { padding: 16px 16px 24px; }
  .cwb2b-kenteken-input   { width: 150px; font-size: 18px; padding: 10px; }
  .cwb2b-card--sm         { padding: 28px 16px; }
  .cwb2b-succes-titel     { font-size: 22px; }
  .cwb2b-spoed-titel      { font-size: 24px; }
  .cwb2b-spoed-bel-btn    { min-height: 70px; padding: 0 20px; gap: 14px; }
  .cwb2b-spoed-bel-nummer { font-size: 22px; }
  .cwb2b-datum-edit-btn span { display: none; }
  .cwb2b-sirene-cirkel    { width: 76px; height: 76px; }
  .cwb2b-overzicht-waarde { font-size: 13px; }
}
@media (max-width: 480px) {
  .cwb2b-contact-grid { grid-template-columns: 1fr; }
  .cwb2b-keuze-kaart  { padding: 16px; gap: 12px; }
  .cwb2b-keuze-icon-wrap { width: 48px; height: 48px; }
}
@media (max-width: 380px) {
  .cwb2b-moment-grid { grid-template-columns: 1fr; }
  .cwb2b-tijd-grid   { grid-template-columns: 1fr; }
  .cwb2b-alt-grid    { grid-template-columns: 1fr; }
}