/* ============================================================
   BriskSky Booking Widget — stylesheet
   Herbruikbaar over examen-a2, onderhoud, en latere diensten.
   Sluit aan op de bestaande huisstijl (Barlow / Barlow Condensed,
   donker thema, blauw accent #1B7FA8).
   ============================================================ */

/* Widget-scoped variabelen.
   Vallen terug op de paginavariabelen als die bestaan, met
   eigen fallback-waarden zodat de widget ook los werkt. */
.bsky-bw {
  --bw-blue:        var(--blue, #1B7FA8);
  --bw-blue-light:  var(--blue-light, #2499C8);
  --bw-blue-dark:   var(--blue-dark, #0f5a78);
  --bw-black:       var(--black, #0a0a0a);
  --bw-dark:        var(--dark, #111314);
  --bw-mid:         var(--mid, #1a1d20);
  --bw-white:       var(--white, #ffffff);
  --bw-grey:        var(--grey, #8a9099);

  --bw-green:       #2ea66b;
  --bw-green-bg:    rgba(46,166,107,0.12);
  --bw-red:         #e0564f;
  --bw-red-bg:      rgba(224,86,79,0.10);

  --bw-line:        rgba(255,255,255,0.10);
  --bw-line-soft:   rgba(255,255,255,0.06);

  --bw-radius:      10px;
  --bw-radius-sm:   6px;

  font-family: 'Barlow', sans-serif;
  color: var(--bw-white);
  display: block;
}

.bsky-bw *,
.bsky-bw *::before,
.bsky-bw *::after { box-sizing: border-box; }

/* ---- Gedeelde typografische helpers ---------------------- */
.bsky-bw .bw-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: block;
  margin-bottom: 7px;
}

.bsky-bw .bw-heading {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--bw-white);
  margin-bottom: 4px;
}

.bsky-bw .bw-sub {
  font-size: 13px;
  color: var(--bw-grey);
  line-height: 1.6;
}

/* ============================================================
   STAP-INDICATOR
   ============================================================ */
.bsky-bw .bw-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.bsky-bw .bw-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bw-grey);
}
.bsky-bw .bw-step .bw-step-num {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--bw-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  transition: all 0.2s;
}
.bsky-bw .bw-step.is-active { color: var(--bw-white); }
.bsky-bw .bw-step.is-active .bw-step-num {
  background: var(--bw-blue);
  border-color: var(--bw-blue);
  color: var(--bw-white);
}
.bsky-bw .bw-step.is-done .bw-step-num {
  background: rgba(27,127,168,0.15);
  border-color: var(--bw-blue);
  color: var(--bw-blue-light);
}
.bsky-bw .bw-step-divider {
  flex: 1;
  height: 1px;
  background: var(--bw-line);
  min-width: 16px;
}

/* ============================================================
   PANELEN — elke stap zit in een paneel
   ============================================================ */
.bsky-bw .bw-panel { display: none; }
.bsky-bw .bw-panel.is-active { display: block; }

/* ============================================================
   STAP 1 — KALENDER + TIJDSLOTEN
   ============================================================ */
.bsky-bw .bw-stage1 {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  gap: 28px;
  align-items: start;
}

/* ---- Kalender ------------------------------------------- */
.bsky-bw .bw-cal {
  background: var(--bw-dark);
  border: 1px solid var(--bw-line);
  border-radius: var(--bw-radius);
  padding: 20px;
}
.bsky-bw .bw-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.bsky-bw .bw-cal-month {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bw-white);
}
.bsky-bw .bw-cal-nav {
  width: 32px;
  height: 32px;
  border-radius: var(--bw-radius-sm);
  border: 1px solid var(--bw-line);
  background: var(--bw-mid);
  color: var(--bw-white);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
}
.bsky-bw .bw-cal-nav:hover:not(:disabled) {
  border-color: var(--bw-blue);
  background: rgba(27,127,168,0.10);
}
.bsky-bw .bw-cal-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.bsky-bw .bw-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.bsky-bw .bw-cal-dow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  text-align: center;
  padding: 4px 0 8px;
}
.bsky-bw .bw-cal-day {
  aspect-ratio: 1 / 1;
  border: 1px solid transparent;
  border-radius: var(--bw-radius-sm);
  background: var(--bw-mid);
  color: var(--bw-white);
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  position: relative;
}
.bsky-bw .bw-cal-day:hover:not(:disabled):not(.is-empty) {
  border-color: var(--bw-blue);
  background: rgba(27,127,168,0.10);
}
.bsky-bw .bw-cal-day.is-empty {
  background: transparent;
  cursor: default;
}
.bsky-bw .bw-cal-day:disabled {
  color: rgba(255,255,255,0.18);
  cursor: not-allowed;
  background: transparent;
}
/* dag met beschikbare slots — klein stipje */
.bsky-bw .bw-cal-day.has-slots::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--bw-blue-light);
}
.bsky-bw .bw-cal-day.is-selected {
  background: var(--bw-blue);
  border-color: var(--bw-blue);
  color: var(--bw-white);
}
.bsky-bw .bw-cal-day.is-selected.has-slots::after {
  background: var(--bw-white);
}

/* ---- Tijdsloten-kolom ----------------------------------- */
.bsky-bw .bw-slots {
  background: var(--bw-dark);
  border: 1px solid var(--bw-line);
  border-radius: var(--bw-radius);
  padding: 20px;
  min-height: 280px;
}
.bsky-bw .bw-slots-head {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bw-white);
  margin-bottom: 4px;
}
.bsky-bw .bw-slots-date {
  font-size: 12px;
  color: var(--bw-blue-light);
  margin-bottom: 18px;
}

.bsky-bw .bw-slot-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.bsky-bw .bw-slot {
  background: var(--bw-mid);
  border: 1px solid var(--bw-line);
  border-radius: var(--bw-radius-sm);
  padding: 13px 15px;
  cursor: pointer;
  transition: all 0.18s;
  text-align: left;
  font-family: inherit;
}
.bsky-bw .bw-slot:hover:not(.is-full) {
  border-color: var(--bw-blue);
  background: rgba(27,127,168,0.08);
}
.bsky-bw .bw-slot.is-selected {
  border-color: var(--bw-blue);
  background: rgba(27,127,168,0.15);
  outline: 2px solid rgba(27,127,168,0.4);
}
.bsky-bw .bw-slot.is-full {
  opacity: 0.4;
  cursor: not-allowed;
}
.bsky-bw .bw-slot .bw-slot-time {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--bw-white);
  margin-bottom: 5px;
}
.bsky-bw .bw-slot .bw-slot-cap {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

/* ---- Placeholder- en statustoestanden in de slotkolom --- */
.bsky-bw .bw-slots-placeholder,
.bsky-bw .bw-slots-empty,
.bsky-bw .bw-slots-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 200px;
  color: var(--bw-grey);
  font-size: 13px;
  line-height: 1.6;
  padding: 20px;
}
.bsky-bw .bw-slots-placeholder svg,
.bsky-bw .bw-slots-empty svg {
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  opacity: 0.35;
}

/* ============================================================
   STAP 2 — KLANTGEGEVENS FORMULIER
   ============================================================ */
.bsky-bw .bw-form-recap {
  background: var(--bw-dark);
  border: 1px solid var(--bw-line);
  border-left: 3px solid var(--bw-blue);
  border-radius: var(--bw-radius-sm);
  padding: 14px 18px;
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.bsky-bw .bw-form-recap .bw-recap-text {
  font-size: 14px;
  color: var(--bw-white);
}
.bsky-bw .bw-form-recap .bw-recap-text strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.bsky-bw .bw-recap-change {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bw-blue-light);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}
.bsky-bw .bw-recap-change:hover { color: var(--bw-white); }

.bsky-bw .bw-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.bsky-bw .bw-field { display: flex; flex-direction: column; }
.bsky-bw .bw-field.bw-field-full { grid-column: 1 / -1; }

.bsky-bw .bw-field input,
.bsky-bw .bw-field textarea,
.bsky-bw .bw-field select {
  background: var(--bw-dark);
  border: 1px solid var(--bw-line);
  color: var(--bw-white);
  padding: 12px 14px;
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  border-radius: var(--bw-radius-sm);
  transition: border-color 0.18s;
  width: 100%;
}
.bsky-bw .bw-field textarea {
  resize: vertical;
  min-height: 90px;
}
.bsky-bw .bw-field input:focus,
.bsky-bw .bw-field textarea:focus,
.bsky-bw .bw-field select:focus {
  outline: none;
  border-color: var(--bw-blue);
}
.bsky-bw .bw-field input::placeholder,
.bsky-bw .bw-field textarea::placeholder {
  color: rgba(255,255,255,0.25);
}

/* veld met validatiefout */
.bsky-bw .bw-field.has-error input,
.bsky-bw .bw-field.has-error textarea,
.bsky-bw .bw-field.has-error select {
  border-color: var(--bw-red);
  background: var(--bw-red-bg);
}
.bsky-bw .bw-field-error {
  display: none;
  font-size: 12px;
  color: var(--bw-red);
  margin-top: 6px;
}
.bsky-bw .bw-field.has-error .bw-field-error { display: block; }

/* ---- Particulier / bedrijf toggle ----------------------- */
.bsky-bw .bw-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
}
.bsky-bw .bw-toggle-opt {
  flex: 1;
  position: relative;
}
.bsky-bw .bw-toggle-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.bsky-bw .bw-toggle-opt label {
  display: block;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--bw-line);
  background: transparent;
  color: var(--bw-grey);
  cursor: pointer;
  transition: all 0.18s;
}
.bsky-bw .bw-toggle-opt input:checked + label {
  background: var(--bw-blue);
  border-color: var(--bw-blue);
  color: var(--bw-white);
}
.bsky-bw .bw-toggle-opt label:hover {
  border-color: var(--bw-blue);
}

/* bedrijfsvelden — verborgen tot 'bedrijf' gekozen is */
.bsky-bw .bw-company-fields {
  display: none;
  grid-column: 1 / -1;
}
.bsky-bw .bw-company-fields.is-visible {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* honeypot — volledig onzichtbaar voor mensen */
.bsky-bw .bw-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* akkoord-rij */
.bsky-bw .bw-consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--bw-grey);
  line-height: 1.5;
}
.bsky-bw .bw-consent input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--bw-blue);
}
.bsky-bw .bw-consent a {
  color: var(--bw-blue-light);
  text-decoration: none;
}
.bsky-bw .bw-consent a:hover { text-decoration: underline; }
.bsky-bw .bw-consent.has-error { color: var(--bw-red); }

/* ============================================================
   KNOPPEN
   ============================================================ */
.bsky-bw .bw-actions {
  display: flex;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.bsky-bw .bw-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.bsky-bw .bw-btn-primary {
  background: var(--bw-blue);
  color: var(--bw-white);
  border-color: var(--bw-blue);
}
.bsky-bw .bw-btn-primary:hover:not(:disabled) {
  background: var(--bw-blue-light);
  border-color: var(--bw-blue-light);
}
.bsky-bw .bw-btn-ghost {
  background: transparent;
  color: var(--bw-grey);
  border-color: var(--bw-line);
}
.bsky-bw .bw-btn-ghost:hover:not(:disabled) {
  color: var(--bw-white);
  border-color: var(--bw-grey);
}
.bsky-bw .bw-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* spinner in de knop tijdens verzenden */
.bsky-bw .bw-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--bw-white);
  border-radius: 999px;
  animation: bw-spin 0.7s linear infinite;
  display: none;
}
.bsky-bw .bw-btn.is-loading .bw-spinner { display: block; }
.bsky-bw .bw-btn.is-loading .bw-btn-text { opacity: 0.7; }
@keyframes bw-spin { to { transform: rotate(360deg); } }

/* ============================================================
   FOUTMELDING — algemeen (bovenaan stap 2)
   ============================================================ */
.bsky-bw .bw-alert {
  display: none;
  background: var(--bw-red-bg);
  border: 1px solid rgba(224,86,79,0.4);
  border-radius: var(--bw-radius-sm);
  padding: 13px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #f0a8a4;
  line-height: 1.5;
}
.bsky-bw .bw-alert.is-visible { display: block; }
.bsky-bw .bw-alert strong { color: var(--bw-red); }

/* ============================================================
   STAP 3 — BEVESTIGING
   ============================================================ */
.bsky-bw .bw-success {
  text-align: center;
  padding: 30px 20px;
}
.bsky-bw .bw-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--bw-green-bg);
  border: 1px solid rgba(46,166,107,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.bsky-bw .bw-success-icon svg {
  width: 30px;
  height: 30px;
  stroke: var(--bw-green);
}
.bsky-bw .bw-success-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 26px;
  text-transform: uppercase;
  color: var(--bw-white);
  margin-bottom: 10px;
}
.bsky-bw .bw-success-text {
  font-size: 14px;
  color: var(--bw-grey);
  line-height: 1.7;
  max-width: 440px;
  margin: 0 auto 24px;
}
.bsky-bw .bw-success-recap {
  display: inline-block;
  text-align: left;
  background: var(--bw-dark);
  border: 1px solid var(--bw-line);
  border-radius: var(--bw-radius-sm);
  padding: 16px 22px;
  margin-bottom: 24px;
}
.bsky-bw .bw-success-recap dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  font-size: 13px;
}
.bsky-bw .bw-success-recap dt {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bw-grey);
  font-size: 11px;
  align-self: center;
}
.bsky-bw .bw-success-recap dd {
  color: var(--bw-white);
  font-weight: 600;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  .bsky-bw .bw-stage1 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .bsky-bw .bw-cal {
    max-width: 380px;
    margin: 0 auto;
    width: 100%;
  }
  .bsky-bw .bw-form-grid {
    grid-template-columns: 1fr;
  }
  .bsky-bw .bw-company-fields.is-visible {
    grid-template-columns: 1fr;
  }
  .bsky-bw .bw-actions {
    flex-direction: column-reverse;
  }
  .bsky-bw .bw-btn {
    width: 100%;
  }
  .bsky-bw .bw-step-label-text {
    display: none;
  }
}

@media (max-width: 420px) {
  .bsky-bw .bw-slot-list {
    grid-template-columns: 1fr 1fr;
  }
}