/* ══════════════════════════════════════════════════════════
       VITALSCAN — AFSPRAAK INPLANNEN
    ══════════════════════════════════════════════════════════ */

    body { background: var(--color-surface-subtle, #f8faf9); }

    /* ── HERO ─────────────────────────────────────────────── */
    .book-hero {
      padding-top: calc(80px + clamp(32px, 5vw, 56px));
      padding-bottom: clamp(28px, 4vw, 48px);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .book-hero::before {
      content: '';
      position: absolute; top: -160px; right: -120px;
      width: 600px; height: 600px; border-radius: 50%;
      background: radial-gradient(circle, rgba(77,182,172,0.18) 0%, transparent 70%);
      pointer-events: none;
    }
    .book-hero::after {
      content: '';
      position: absolute; bottom: -120px; left: 5%;
      width: 380px; height: 380px; border-radius: 50%;
      background: radial-gradient(circle, rgba(77,182,172,0.10) 0%, transparent 70%);
      pointer-events: none;
    }
    .book-hero > * { position: relative; z-index: 1; }
    .book-hero__label {
      display: inline-block;
      font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: #4DB6AC; background: rgba(77,182,172,0.1);
      border-radius: 100px; padding: 5px 14px; margin-bottom: 20px;
    }
    .book-hero__title {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(1.8rem, 5vw, 3rem);
      font-weight: 700; color: #264653;
      line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 14px;
    }
    .book-hero__title em {
      font-style: italic;
      background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 40%, #c8f5f2 47%, #f0fffe 50%, #c8f5f2 53%, var(--color-primary) 60%, var(--color-primary) 100%);
      background-size: 300% 100%;
      background-position: 100% 0%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: vsn-glow-sweep 10s ease-in-out infinite;
      padding-inline: 0.08em;
    }
    .book-hero__sub {
      font-family: 'Montserrat', sans-serif;
      font-size: 1rem; color: #4a6270;
      max-width: 50ch; margin-inline: auto; line-height: 1.7;
    }

    /* ── STEPPER ──────────────────────────────────────────── */
    .stepper {
      display: flex; align-items: center; justify-content: center;
      gap: 0; margin-block: clamp(24px, 4vw, 40px);
    }
    .stepper__step { display: flex; align-items: center; gap: 10px; }
    .stepper__dot {
      width: 32px; height: 32px; border-radius: 50%;
      border: 2px solid #d1dde3;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 700;
      color: #7a9aaa;
      transition: all 0.22s;
      flex-shrink: 0;
    }
    .stepper__step.active .stepper__dot { background: #4DB6AC; border-color: #4DB6AC; color: #fff; }
    .stepper__step.done .stepper__dot   { background: rgba(77,182,172,0.15); border-color: rgba(77,182,172,0.4); color: #4DB6AC; }
    .stepper__label {
      font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 600;
      color: #7a9aaa; white-space: nowrap;
    }
    .stepper__step.active .stepper__label { color: #264653; }
    .stepper__connector { width: 40px; height: 1.5px; background: #dce9ec; margin-inline: 8px; }

    /* ── BOOKING LAYOUT ───────────────────────────────────── */
    .booking-layout {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 24px;
      align-items: start;
      max-width: 1100px;
      margin-inline: auto;
      padding-inline: clamp(16px, 4vw, 40px);
      padding-bottom: 80px;
    }

    /* ── BOOKING PANEL ────────────────────────────────────── */
    .booking-panel {
      background: #fff;
      border-radius: 24px;
      border: 1px solid rgba(77,182,172,0.14);
      box-shadow: 0 2px 20px rgba(38,70,83,0.06);
      overflow: hidden;
    }
    .booking-panel__header {
      padding: 28px 32px;
      border-bottom: 1px solid rgba(77,182,172,0.1);
    }
    .booking-panel__step-label {
      font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase; color: #4DB6AC;
      margin-bottom: 6px;
    }
    .booking-panel__title {
      font-family: 'Montserrat', sans-serif; font-size: 1.3rem; font-weight: 800; color: #264653;
    }
    .booking-panel__body { padding: 28px 32px; }

    /* ── STEP MANAGEMENT ──────────────────────────────────── */
    .step-panel { display: none; }
    .step-panel.active { display: block; }

    /* ── SERVICE SELECTOR ─────────────────────────────────── */
    .service-options { display: flex; flex-direction: column; gap: 10px; }
    .service-option {
      display: flex; align-items: center; gap: 16px;
      padding: 18px 20px;
      border-radius: 14px; border: 1.5px solid rgba(77,182,172,0.18);
      cursor: pointer;
      transition: all 0.15s;
      background: #fff;
    }
    .service-option:hover { border-color: #4DB6AC; background: rgba(77,182,172,0.04); }
    .service-option.selected { border-color: #4DB6AC; background: rgba(77,182,172,0.07); }
    .service-option__radio {
      width: 20px; height: 20px; border-radius: 50%;
      border: 2px solid #c5d8df; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      transition: border-color 0.15s;
    }
    .service-option.selected .service-option__radio { border-color: #4DB6AC; }
    .service-option.selected .service-option__radio::after {
      content: ''; width: 10px; height: 10px; border-radius: 50%; background: #4DB6AC;
    }
    .service-option__info { flex: 1; }
    .service-option__name { font-family: 'Montserrat', sans-serif; font-size: 0.92rem; font-weight: 700; color: #264653; }
    .service-option__desc { font-family: 'Montserrat', sans-serif; font-size: 0.78rem; color: #7a9aaa; margin-top: 2px; }
    .service-option__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
    .service-option__price { font-family: 'Montserrat', sans-serif; font-size: 1.05rem; font-weight: 800; color: #264653; }
    .service-option__duration { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; color: #7a9aaa; }

    /* ── TOPICS ───────────────────────────────────────────── */
    .topics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 10px;
    }
    .topic-option {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 16px;
      border-radius: 12px; border: 1.5px solid rgba(77,182,172,0.18);
      cursor: pointer; transition: all 0.15s;
      font-family: 'Montserrat', sans-serif; font-size: 0.85rem; color: #264653;
    }
    .topic-option:hover { border-color: #4DB6AC; background: rgba(77,182,172,0.04); }
    .topic-option input[type="checkbox"] { accent-color: #4DB6AC; width: 16px; height: 16px; flex-shrink: 0; }
    .topic-option.checked { border-color: #4DB6AC; background: rgba(77,182,172,0.07); font-weight: 600; }

    /* ── CALENDAR ─────────────────────────────────────────── */
    .cal-nav {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 20px;
    }
    .cal-nav__month {
      font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 800; color: #264653;
    }
    .cal-nav__btn {
      width: 36px; height: 36px; border-radius: 10px;
      border: 1.5px solid rgba(77,182,172,0.2); background: none;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: background 0.15s, border-color 0.15s;
    }
    .cal-nav__btn:hover { background: rgba(77,182,172,0.08); border-color: #4DB6AC; }
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
    .cal-grid__header {
      font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 700;
      color: #7a9aaa; text-align: center; padding-block: 8px; letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .cal-day {
      aspect-ratio: 1; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Montserrat', sans-serif; font-size: 0.85rem;
      cursor: pointer;
      border: 1.5px solid transparent;
      transition: background 0.12s, color 0.12s;
    }
    .cal-day:hover:not(.cal-day--empty):not(.cal-day--past) { background: rgba(77,182,172,0.1); border-color: rgba(77,182,172,0.3); }
    .cal-day--empty { cursor: default; }
    .cal-day--past { color: #c5d8df; cursor: not-allowed; }
    .cal-day--today { border-color: rgba(77,182,172,0.5); color: #4DB6AC; font-weight: 700; }
    .cal-day--selected { background: #4DB6AC; color: #fff; border-color: #4DB6AC; font-weight: 700; }
    .cal-day--weekend { color: #9ab4be; }

    /* Time slots */
    .time-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 20px; }
    .time-slot {
      padding: 10px 8px; border-radius: 10px;
      border: 1.5px solid rgba(77,182,172,0.2);
      font-family: 'Montserrat', sans-serif; font-size: 0.83rem; font-weight: 600;
      text-align: center; cursor: pointer; color: #264653;
      transition: all 0.12s;
    }
    .time-slot:hover:not(.unavailable) { border-color: #4DB6AC; background: rgba(77,182,172,0.08); }
    .time-slot.selected { background: #4DB6AC; border-color: #4DB6AC; color: #fff; }
    .time-slot.unavailable { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

    /* ── PERSONAL DETAILS FORM ────────────────────────────── */
    .form-group { margin-bottom: 18px; }
    .form-label {
      display: block; font-family: 'Montserrat', sans-serif;
      font-size: 0.78rem; font-weight: 700; color: #264653; margin-bottom: 6px;
    }
    .form-label span { color: #7a9aaa; font-weight: 400; }
    .form-input, .form-textarea, .form-select {
      width: 100%; padding: 12px 16px;
      font-family: 'Montserrat', sans-serif; font-size: 0.9rem; color: #264653;
      background: #f8fffe; border: 1.5px solid rgba(77,182,172,0.22);
      border-radius: 10px; outline: none; box-sizing: border-box;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .form-input:focus, .form-textarea:focus, .form-select:focus {
      border-color: #4DB6AC; box-shadow: 0 0 0 3px rgba(77,182,172,0.1);
    }
    .form-textarea { min-height: 90px; resize: vertical; }
    .form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-error-msg {
      display: none; background: rgba(229,62,62,0.08); border-radius: 8px;
      padding: 10px 14px; color: #e53e3e; font-size: 0.82rem;
      font-family: 'Montserrat', sans-serif; margin-bottom: 16px;
    }
    .form-error-msg.visible { display: block; }

    /* ── NAV BUTTONS ──────────────────────────────────────── */
    .step-nav {
      display: flex; justify-content: space-between; align-items: center;
      margin-top: 28px; gap: 12px;
    }
    .step-nav--end { justify-content: flex-end; }

    /* ── SUCCESS STATE ────────────────────────────────────── */
    .confirm-success {
      padding: 56px 32px;
      text-align: center;
      display: flex; flex-direction: column; align-items: center; gap: 18px;
    }
    .confirm-success__icon {
      width: 72px; height: 72px; border-radius: 50%;
      background: rgba(77,182,172,0.12);
      display: flex; align-items: center; justify-content: center;
    }
    .confirm-success__title {
      font-family: 'Montserrat', sans-serif; font-size: 1.7rem; font-weight: 800; color: #264653;
    }
    .confirm-success__body {
      font-family: 'Montserrat', sans-serif; font-size: 0.95rem; color: #4a6270;
      max-width: 44ch; line-height: 1.7;
    }

    /* ── BOOKING SUMMARY SIDEBAR ──────────────────────────── */
    .booking-summary {
      background: #fff;
      border-radius: 20px; border: 1px solid rgba(77,182,172,0.14);
      box-shadow: 0 2px 20px rgba(38,70,83,0.06);
      overflow: hidden;
      position: sticky; top: 100px;
    }
    .booking-summary__header {
      background: #264653; padding: 24px 28px;
    }
    .booking-summary__header-label {
      font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase; color: #4DB6AC; margin-bottom: 4px;
    }
    .booking-summary__header-title {
      font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 800; color: #fff;
    }
    .booking-summary__body {
      padding: 20px 28px; display: flex; flex-direction: column; gap: 0;
    }
    .summary-row {
      padding: 14px 0; border-bottom: 1px solid rgba(77,182,172,0.08);
    }
    .summary-row:last-child { border-bottom: none; }
    .summary-row__label {
      font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase; color: #7a9aaa; margin-bottom: 4px;
    }
    .summary-row__value {
      font-family: 'Montserrat', sans-serif; font-size: 0.88rem; font-weight: 600; color: #264653;
    }
    .summary-row__value.placeholder { color: #b0c4cc; font-weight: 400; font-style: italic; }
    .booking-summary__footer {
      padding: 20px 28px; border-top: 1px solid rgba(77,182,172,0.1);
      display: flex; flex-direction: column; gap: 10px;
    }
    .trust-row {
      display: flex; align-items: center; gap: 8px;
      font-family: 'Montserrat', sans-serif; font-size: 0.76rem; color: #7a9aaa;
    }
    .trust-row svg { flex-shrink: 0; color: #4DB6AC; }

    /* ── RESPONSIVE ───────────────────────────────────────── */
    @media (max-width: 900px) {
      .booking-layout { grid-template-columns: 1fr; }
      .booking-summary { position: static; order: -1; }
      .stepper__label { display: none; }
      .time-slots { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 600px) {
      .booking-panel__header, .booking-panel__body { padding: 20px; }
      .form-2col { grid-template-columns: 1fr; }
      .time-slots { grid-template-columns: repeat(3, 1fr); }
    }