/* =============================================
       DESIGN TOKENS
    ============================================= */
      :root {
        --color-primary: #00509e;
        --color-primary-dark: #003d7a;
        --color-primary-light: #e8f1fb;
        --color-accent: #00b589;
        --color-accent-dark: #008f6c;
        --color-cta: #e05c1a;
        --color-cta-dark: #c04b12;
        --color-white: #ffffff;
        --color-bg: #f4f9ff;
        --color-text: #1a2444;
        --color-text-medium: #4a5775;
        --color-text-light: #7b8db0;
        --color-border: #d4e2f0;
        --color-success: #00b589;
        --color-warning: #f59e0b;
        --color-error: #dc2626;
        --color-utility-bg: #003d7a;
        --color-utility-text: #c9dcf2;

        --font-family:
          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --font-size-xs: 0.75rem;
        --font-size-sm: 0.875rem;
        --font-size-base: 1rem;
        --font-size-md: 1.125rem;
        --font-size-lg: 1.25rem;
        --font-size-xl: 1.5rem;
        --font-size-2xl: 2rem;

        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-16: 4rem;

        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-lg: 12px;
        --radius-xl: 16px;
        --radius-full: 9999px;

        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
        --shadow-md:
          0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
        --shadow-lg:
          0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.07);
        --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.12);

        --transition-fast: 150ms ease;
        --transition-base: 250ms ease;

        --container-max: 1200px;
        --nav-height: 64px;
        --utility-height: 36px;
      }

      /* =============================================
       RESET & BASE
    ============================================= */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: smooth;
        font-size: 16px;
      }
      body {
        font-family: var(--font-family);
        color: var(--color-text);
        background-color: var(--color-bg);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
      }
      img {
        max-width: 100%;
        height: auto;
        display: block;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      ul,
      ol {
        list-style: none;
      }
      button {
        cursor: pointer;
        border: none;
        background: none;
        font-family: inherit;
      }
      input,
      select,
      textarea {
        font-family: inherit;
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          transition-duration: 0.01ms !important;
        }
        html {
          scroll-behavior: auto;
        }
      }

      /* =============================================
       SHARED UTILITIES
    ============================================= */
      .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      .container {
        width: 100%;
        max-width: var(--container-max);
        margin-inline: auto;
        padding-inline: var(--space-4);
      }
      @media (min-width: 768px) {
        .container {
          padding-inline: var(--space-8);
        }
      }

      /* =============================================
       BLOCK: skip-link
    ============================================= */
      .skip-link {
        position: absolute;
        top: -100%;
        left: var(--space-4);
        background: var(--color-primary);
        color: var(--color-white);
        padding: var(--space-3) var(--space-6);
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        font-weight: 600;
        z-index: 10000;
        transition: top var(--transition-fast);
      }
      .skip-link:focus {
        top: 0;
      }

      /* =============================================
       BLOCK: btn
    ============================================= */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-6);
        border-radius: var(--radius-full);
        font-weight: 600;
        font-size: var(--font-size-base);
        line-height: 1.2;
        transition:
          background-color var(--transition-fast),
          box-shadow var(--transition-fast),
          transform var(--transition-fast);
        cursor: pointer;
        border: 2px solid transparent;
        white-space: nowrap;
        min-height: 44px;
        text-decoration: none;
      }
      .btn:focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: 2px;
      }
      .btn--primary {
        background: var(--color-primary);
        color: #fff;
        border-color: var(--color-primary);
      }
      .btn--primary:hover {
        background: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
      }
      .btn--accent {
        background: var(--color-cta);
        color: #fff;
        border-color: var(--color-cta);
      }
      .btn--accent:hover {
        background: var(--color-cta-dark);
        border-color: var(--color-cta-dark);
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
      }
      .btn--outline {
        background: transparent;
        color: var(--color-primary);
        border-color: var(--color-primary);
      }
      .btn--outline:hover {
        background: var(--color-primary-light);
      }
      .btn--ghost {
        background: transparent;
        color: var(--color-text-medium);
        border-color: var(--color-border);
      }
      .btn--ghost:hover {
        background: var(--color-white);
      }
      .btn--success {
        background: var(--color-success);
        color: #fff;
        border-color: var(--color-success);
      }
      .btn--success:hover {
        background: var(--color-accent-dark);
        border-color: var(--color-accent-dark);
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
      }
      .btn--lg {
        padding: var(--space-4) var(--space-8);
        font-size: var(--font-size-md);
        min-height: 52px;
      }
      .btn--sm {
        padding: var(--space-2) var(--space-4);
        font-size: var(--font-size-sm);
        min-height: 36px;
      }
      .btn--full {
        width: 100%;
      }
      .btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
      }

      /* =============================================
       BLOCK: utility-bar
    ============================================= */
      .utility-bar {
        background: var(--color-utility-bg);
        color: var(--color-utility-text);
        height: var(--utility-height);
        display: flex;
        align-items: center;
      }
      .utility-bar__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: var(--space-4);
      }
      .utility-bar__left {
        display: flex;
        align-items: center;
        gap: var(--space-4);
      }
      .utility-bar__right {
        display: flex;
        align-items: center;
        gap: var(--space-4);
      }
      .utility-bar__link {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        color: var(--color-utility-text);
        font-size: var(--font-size-xs);
        white-space: nowrap;
        transition: color var(--transition-fast);
      }
      .utility-bar__link:hover,
      .utility-bar__link:focus-visible {
        color: var(--color-white);
      }
      .utility-bar__link--highlight {
        color: #7dd3fc;
        font-weight: 600;
        border-bottom: 1px solid rgba(125, 211, 252, 0.4);
      }
      .utility-bar__link--highlight:hover {
        color: #fff;
        border-bottom-color: #fff;
      }
      .utility-bar__divider {
        color: rgba(201, 220, 242, 0.3);
        font-size: var(--font-size-xs);
      }
      .utility-bar__lang {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        color: var(--color-utility-text);
        font-size: var(--font-size-xs);
        cursor: pointer;
        transition: color var(--transition-fast);
        border: none;
        background: none;
        font-family: inherit;
      }
      .utility-bar__lang:hover {
        color: #fff;
      }
      @media (max-width: 479px) {
        .utility-bar__link:not(.utility-bar__link--highlight) {
          display: none;
        }
        .utility-bar__divider {
          display: none;
        }
      }

      /* =============================================
       BLOCK: site-nav (booking-page variant)
    ============================================= */
      .site-nav {
        background: var(--color-white);
        border-bottom: 1px solid var(--color-border);
        height: var(--nav-height);
        display: flex;
        align-items: center;
      }
      .site-nav__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
      }
      .site-nav__logo {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        text-decoration: none;
      }
      .site-nav__logo-mark {
        width: 34px;
        height: 34px;
        background: linear-gradient(
          135deg,
          var(--color-primary),
          var(--color-accent)
        );
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 800;
        font-size: var(--font-size-md);
      }
      .site-nav__logo-text {
        font-size: var(--font-size-lg);
        font-weight: 800;
        color: var(--color-primary);
        letter-spacing: -0.5px;
      }
      .site-nav__logo-text span {
        color: var(--color-accent);
      }
      .site-nav__back {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--font-size-sm);
        color: var(--color-text-medium);
        transition: color var(--transition-fast);
      }
      .site-nav__back:hover,
      .site-nav__back:focus-visible {
        color: var(--color-primary);
      }
      .site-nav__back:focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
      }
      .site-nav__secure {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--font-size-xs);
        color: var(--color-text-light);
      }
      .site-nav__secure-icon {
        color: var(--color-success);
      }
      @media (max-width: 479px) {
        .site-nav__back span {
          display: none;
        }
        .site-nav__secure {
          display: none;
        }
      }

      /* =============================================
       BLOCK: booking-header (progress container)
    ============================================= */
      .booking-header {
        background: var(--color-white);
        border-bottom: 1px solid var(--color-border);
        padding-block: var(--space-5);
        position: sticky;
        top: 0;
        z-index: 900;
        box-shadow: var(--shadow-sm);
      }

      /* =============================================
       BLOCK: booking-progress (stepper)
    ============================================= */
      .booking-progress {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .booking-progress::-webkit-scrollbar {
        display: none;
      }

      .booking-progress__step {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        flex-shrink: 0;
      }
      .booking-progress__dot {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid var(--color-border);
        background: var(--color-white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-sm);
        font-weight: 700;
        color: var(--color-text-light);
        transition: all var(--transition-base);
        flex-shrink: 0;
      }
      .booking-progress__label {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--color-text-light);
        white-space: nowrap;
        transition: color var(--transition-base);
      }
      .booking-progress__connector {
        width: 48px;
        height: 2px;
        background: var(--color-border);
        margin-inline: var(--space-2);
        flex-shrink: 0;
        transition: background var(--transition-base);
      }
      /* Active */
      .booking-progress__step--active .booking-progress__dot {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #fff;
      }
      .booking-progress__step--active .booking-progress__label {
        color: var(--color-primary);
        font-weight: 700;
      }
      /* Done */
      .booking-progress__step--done .booking-progress__dot {
        background: var(--color-success);
        border-color: var(--color-success);
        color: #fff;
      }
      .booking-progress__step--done .booking-progress__label {
        color: var(--color-success);
      }
      .booking-progress__step--done + .booking-progress__connector {
        background: var(--color-success);
      }

      @media (max-width: 479px) {
        .booking-progress__label {
          display: none;
        }
        .booking-progress__connector {
          width: 24px;
        }
      }

      /* =============================================
       BLOCK: booking-layout (two-column grid)
    ============================================= */
      .booking-main {
        padding-block: var(--space-8) var(--space-16);
      }
      .booking-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-8);
        align-items: start;
      }
      @media (min-width: 960px) {
        .booking-layout {
          grid-template-columns: 1fr 340px;
        }
      }

      /* =============================================
       BLOCK: step (show/hide panels)
    ============================================= */
      .step {
        display: none;
      }
      .step--active {
        display: block;
        animation: step-in 0.2s ease;
      }
      @keyframes step-in {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .step__header {
        margin-bottom: var(--space-8);
      }
      .step__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--font-size-sm);
        font-weight: 700;
        color: var(--color-primary);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: var(--space-3);
      }
      .step__title {
        font-size: clamp(var(--font-size-xl), 3vw, var(--font-size-2xl));
        font-weight: 800;
        color: var(--color-text);
        line-height: 1.2;
        margin-bottom: var(--space-2);
      }
      .step__subtitle {
        font-size: var(--font-size-base);
        color: var(--color-text-medium);
      }
      .step__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: var(--space-8);
        gap: var(--space-4);
        flex-wrap: wrap;
      }
      .step__footer-note {
        font-size: var(--font-size-xs);
        color: var(--color-text-light);
      }

      /* =============================================
       BLOCK: category-tabs
    ============================================= */
      .category-tabs {
        display: flex;
        gap: var(--space-2);
        flex-wrap: wrap;
        margin-bottom: var(--space-6);
      }
      .category-tabs__btn {
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-full);
        border: 1.5px solid var(--color-border);
        background: var(--color-white);
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--color-text-medium);
        cursor: pointer;
        transition: all var(--transition-fast);
        min-height: 36px;
      }
      .category-tabs__btn:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
      }
      .category-tabs__btn--active {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #fff;
      }
      .category-tabs__btn:focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: 2px;
      }

      /* =============================================
       BLOCK: test-grid & test-card
    ============================================= */
      .test-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-4);
      }
      @media (min-width: 560px) {
        .test-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      .test-card {
        position: relative;
        background: var(--color-white);
        border: 2px solid var(--color-border);
        border-radius: var(--radius-xl);
        padding: var(--space-5);
        cursor: pointer;
        transition:
          border-color var(--transition-fast),
          box-shadow var(--transition-fast),
          transform var(--transition-fast);
        user-select: none;
      }
      .test-card:hover {
        border-color: var(--color-primary);
        box-shadow: var(--shadow-sm);
        transform: translateY(-2px);
      }
      .test-card:focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: 2px;
      }
      .test-card--selected {
        border-color: var(--color-primary);
        background: var(--color-primary-light);
        box-shadow: 0 0 0 4px rgba(0, 80, 158, 0.08);
      }

      .test-card__check {
        position: absolute;
        top: var(--space-4);
        right: var(--space-4);
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 2px solid var(--color-border);
        background: var(--color-white);
        transition: all var(--transition-fast);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: transparent;
      }
      .test-card--selected .test-card__check {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #fff;
      }

      .test-card__header {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        margin-bottom: var(--space-3);
        padding-right: var(--space-8);
      }
      .test-card__icon {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-md);
        background: var(--color-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
        transition: background var(--transition-fast);
      }
      .test-card--selected .test-card__icon {
        background: rgba(0, 80, 158, 0.12);
      }

      .test-card__name {
        font-size: var(--font-size-base);
        font-weight: 700;
        color: var(--color-text);
        line-height: 1.3;
      }
      .test-card__desc {
        font-size: var(--font-size-sm);
        color: var(--color-text-medium);
        line-height: 1.55;
        margin-bottom: var(--space-4);
      }
      .test-card__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .test-card__price {
        font-size: var(--font-size-md);
        font-weight: 800;
        color: var(--color-text);
      }
      .test-card__price-label {
        font-size: var(--font-size-xs);
        font-weight: 400;
        color: var(--color-text-light);
      }
      .test-card__tag {
        padding: 2px var(--space-3);
        border-radius: var(--radius-full);
        font-size: var(--font-size-xs);
        font-weight: 600;
      }
      .test-card__tag--blue {
        background: var(--color-primary-light);
        color: var(--color-primary);
      }
      .test-card__tag--green {
        background: rgba(0, 181, 137, 0.1);
        color: var(--color-accent-dark);
      }
      .test-card__tag--gold {
        background: rgba(245, 158, 11, 0.1);
        color: #b45309;
      }

      .test-empty {
        padding: var(--space-12);
        text-align: center;
        color: var(--color-text-light);
      }
      .test-empty__icon {
        font-size: 2.5rem;
        margin-bottom: var(--space-4);
        opacity: 0.4;
      }

      /* =============================================
       BLOCK: cal (date picker)
    ============================================= */
      .cal-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-6);
      }
      @media (min-width: 600px) {
        .cal-layout {
          grid-template-columns: 1fr 1fr;
          gap: var(--space-8);
        }
      }

      .cal {
        background: var(--color-white);
        border: 1.5px solid var(--color-border);
        border-radius: var(--radius-xl);
        overflow: hidden;
      }
      .cal__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-4) var(--space-5);
        border-bottom: 1px solid var(--color-border);
        background: var(--color-bg);
      }
      .cal__month-label {
        font-size: var(--font-size-base);
        font-weight: 700;
        color: var(--color-text);
      }
      .cal__nav-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1.5px solid var(--color-border);
        background: var(--color-white);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--color-text-medium);
        font-size: var(--font-size-md);
        transition: all var(--transition-fast);
      }
      .cal__nav-btn:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
      }
      .cal__nav-btn:focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: 2px;
        border-radius: 50%;
      }
      .cal__nav-btn:disabled {
        opacity: 0.35;
        cursor: not-allowed;
      }

      .cal__weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        padding: var(--space-3) var(--space-3) 0;
      }
      .cal__weekday {
        text-align: center;
        font-size: var(--font-size-xs);
        font-weight: 700;
        color: var(--color-text-light);
        text-transform: uppercase;
        padding-block: var(--space-2);
      }
      .cal__days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
        padding: var(--space-3);
      }
      .cal__day {
        aspect-ratio: 1;
        border-radius: var(--radius-md);
        border: none;
        background: var(--color-white);
        font-size: var(--font-size-sm);
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--transition-fast);
        color: var(--color-text);
        position: relative;
      }
      .cal__day:focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: 0;
        z-index: 1;
      }
      .cal__day--empty {
        cursor: default;
        pointer-events: none;
      }
      .cal__day--past,
      .cal__day--unavailable {
        color: var(--color-text-light);
        opacity: 0.4;
        cursor: not-allowed;
      }
      .cal__day--available:hover {
        background: var(--color-primary-light);
        color: var(--color-primary);
      }
      .cal__day--today {
        font-weight: 800;
      }
      .cal__day--today::after {
        content: "";
        position: absolute;
        bottom: 3px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        background: var(--color-accent);
        border-radius: 50%;
      }
      .cal__day--selected {
        background: var(--color-primary) !important;
        color: #fff !important;
        font-weight: 700;
      }
      .cal__day--selected::after {
        background: rgba(255, 255, 255, 0.6);
      }
      .cal__legend {
        padding: var(--space-3) var(--space-4) var(--space-4);
        border-top: 1px solid var(--color-border);
        display: flex;
        gap: var(--space-4);
        flex-wrap: wrap;
      }
      .cal__legend-item {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--font-size-xs);
        color: var(--color-text-light);
      }
      .cal__legend-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .cal__legend-dot--today {
        background: var(--color-accent);
      }
      .cal__legend-dot--avail {
        background: var(--color-primary);
        opacity: 0.5;
      }

      /* =============================================
       BLOCK: time-slots-wrapper
    ============================================= */
      .time-slots-wrapper {
        background: var(--color-white);
        border: 1.5px solid var(--color-border);
        border-radius: var(--radius-xl);
        overflow: hidden;
      }
      .time-slots__header {
        padding: var(--space-4) var(--space-5);
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
      }
      .time-slots__title {
        font-size: var(--font-size-base);
        font-weight: 700;
        color: var(--color-text);
      }
      .time-slots__date {
        font-size: var(--font-size-sm);
        color: var(--color-text-light);
        margin-top: 2px;
      }
      .time-slots__body {
        padding: var(--space-5);
      }
      .time-slots__group-label {
        font-size: var(--font-size-xs);
        font-weight: 700;
        color: var(--color-text-light);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: var(--space-3);
      }
      .time-slots__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-2);
        margin-bottom: var(--space-5);
      }
      .time-slot {
        padding: var(--space-3) var(--space-2);
        border: 1.5px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-white);
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--color-text-medium);
        cursor: pointer;
        text-align: center;
        transition: all var(--transition-fast);
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .time-slot:hover:not(:disabled) {
        border-color: var(--color-primary);
        color: var(--color-primary);
        background: var(--color-primary-light);
      }
      .time-slot:focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: 2px;
      }
      .time-slot--selected {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #fff;
      }
      .time-slot--unavailable {
        opacity: 0.4;
        cursor: not-allowed;
        text-decoration: line-through;
      }
      .time-slots__placeholder {
        padding: var(--space-8);
        text-align: center;
        color: var(--color-text-light);
      }
      .time-slots__placeholder-icon {
        font-size: 2rem;
        margin-bottom: var(--space-3);
        opacity: 0.4;
      }

      /* Cal.com embed container (UPSELL HOOK) */
      .calcom-embed {
        background: var(--color-white);
        border: 1.5px solid var(--color-border);
        border-radius: var(--radius-xl);
        overflow: hidden;
        min-height: 500px;
        display: none; /* shown when CAL_COM_ENABLED = true in JS */
      }
      .calcom-embed iframe {
        border: none;
        width: 100%;
        min-height: 500px;
      }

      /* =============================================
       BLOCK: order-summary (sidebar)
    ============================================= */
      .order-summary {
        background: var(--color-white);
        border: 1.5px solid var(--color-border);
        border-radius: var(--radius-xl);
        overflow: hidden;
        position: sticky;
        top: calc(
          var(--utility-height) + var(--nav-height) + 60px + var(--space-4)
        );
      }
      .order-summary__header {
        padding: var(--space-4) var(--space-5);
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .order-summary__title {
        font-size: var(--font-size-base);
        font-weight: 700;
        color: var(--color-text);
      }
      .order-summary__count {
        font-size: var(--font-size-xs);
        font-weight: 700;
        background: var(--color-primary);
        color: #fff;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background var(--transition-base);
      }
      .order-summary__count--has {
        background: var(--color-accent);
      }

      .order-summary__body {
        padding: var(--space-3);
        max-height: 280px;
        overflow-y: auto;
      }
      .order-summary__empty {
        padding: var(--space-6);
        text-align: center;
        color: var(--color-text-light);
        font-size: var(--font-size-sm);
      }
      .order-summary__empty-icon {
        font-size: 1.5rem;
        margin-bottom: var(--space-2);
        opacity: 0.4;
      }

      .order-summary__item {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-3);
        border-radius: var(--radius-md);
        transition: background var(--transition-fast);
      }
      .order-summary__item:hover {
        background: var(--color-bg);
      }
      .order-summary__item-icon {
        font-size: var(--font-size-md);
        flex-shrink: 0;
        margin-top: 1px;
      }
      .order-summary__item-name {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--color-text);
        flex: 1;
        line-height: 1.4;
      }
      .order-summary__item-price {
        font-size: var(--font-size-sm);
        font-weight: 700;
        color: var(--color-text);
        flex-shrink: 0;
      }
      .order-summary__item-remove {
        cursor: pointer;
        color: var(--color-text-light);
        font-size: var(--font-size-xs);
        transition: color var(--transition-fast);
        border: none;
        background: none;
        padding: 0;
        line-height: 1;
        flex-shrink: 0;
      }
      .order-summary__item-remove:hover {
        color: var(--color-error);
      }
      .order-summary__item-remove:focus-visible {
        outline: 2px solid var(--color-error);
        border-radius: 2px;
      }

      .order-summary__footer {
        padding: var(--space-5);
        border-top: 1px solid var(--color-border);
      }
      .order-summary__line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-3);
        font-size: var(--font-size-sm);
        color: var(--color-text-medium);
      }
      .order-summary__total-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: var(--space-3);
        border-top: 2px solid var(--color-border);
        margin-top: var(--space-2);
      }
      .order-summary__total-label {
        font-size: var(--font-size-md);
        font-weight: 700;
        color: var(--color-text);
      }
      .order-summary__total-amount {
        font-size: var(--font-size-xl);
        font-weight: 800;
        color: var(--color-text);
      }

      .order-summary__datetime {
        margin-top: var(--space-4);
        padding: var(--space-3) var(--space-4);
        background: var(--color-bg);
        border-radius: var(--radius-md);
        display: none;
      }
      .order-summary__datetime--visible {
        display: block;
        animation: step-in 0.2s ease;
      }
      .order-summary__datetime-row {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--font-size-sm);
        color: var(--color-text-medium);
        margin-bottom: var(--space-2);
      }
      .order-summary__datetime-row:last-child {
        margin-bottom: 0;
      }
      .order-summary__datetime-icon {
        flex-shrink: 0;
      }

      .order-summary__cta {
        margin-top: var(--space-5);
      }
      .order-summary__note {
        font-size: var(--font-size-xs);
        color: var(--color-text-light);
        text-align: center;
        margin-top: var(--space-3);
      }

      /* =============================================
       BLOCK: booking-form (Step 3 — skeleton styles, used in Chunk 2)
    ============================================= */
      .booking-form__group {
        margin-bottom: var(--space-5);
      }
      .booking-form__row {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-5);
      }
      @media (min-width: 480px) {
        .booking-form__row {
          grid-template-columns: 1fr 1fr;
        }
      }

      .booking-form__label {
        display: block;
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--color-text);
        margin-bottom: var(--space-2);
      }
      .booking-form__label--required::after {
        content: " *";
        color: var(--color-error);
      }
      .booking-form__input,
      .booking-form__select,
      .booking-form__textarea {
        width: 100%;
        padding: var(--space-4);
        border: 2px solid var(--color-border);
        border-radius: var(--radius-md);
        font-size: var(--font-size-base);
        color: var(--color-text);
        background: var(--color-white);
        transition:
          border-color var(--transition-fast),
          box-shadow var(--transition-fast);
        min-height: 52px;
      }
      .booking-form__input:focus,
      .booking-form__select:focus,
      .booking-form__textarea:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(0, 80, 158, 0.12);
      }
      .booking-form__input.is-invalid,
      .booking-form__select.is-invalid {
        border-color: var(--color-error);
      }
      .booking-form__input.is-invalid:focus,
      .booking-form__select.is-invalid:focus {
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
      }
      .booking-form__error {
        font-size: var(--font-size-xs);
        color: var(--color-error);
        margin-top: var(--space-1);
        display: none;
      }
      .booking-form__error--visible {
        display: block;
      }
      .booking-form__hint {
        font-size: var(--font-size-xs);
        color: var(--color-text-light);
        margin-top: var(--space-1);
      }
      .booking-form__textarea {
        min-height: 96px;
        resize: vertical;
      }
      .booking-form__select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234A5775' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        padding-right: 36px;
      }
      .booking-form__checkbox-group {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
      }
      .booking-form__checkbox {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        margin-top: 2px;
        accent-color: var(--color-primary);
        cursor: pointer;
      }
      .booking-form__checkbox-label {
        font-size: var(--font-size-sm);
        color: var(--color-text-medium);
        line-height: 1.6;
        cursor: pointer;
      }
      .booking-form__checkbox-label a {
        color: var(--color-primary);
        text-decoration: underline;
      }
      .booking-form__section-title {
        font-size: var(--font-size-lg);
        font-weight: 700;
        color: var(--color-text);
        margin-bottom: var(--space-5);
        padding-bottom: var(--space-3);
        border-bottom: 1px solid var(--color-border);
      }

      /* =============================================
       BLOCK: booking-review (Step 4 — skeleton styles)
    ============================================= */
      .review-card {
        background: var(--color-white);
        border: 1.5px solid var(--color-border);
        border-radius: var(--radius-xl);
        overflow: hidden;
        margin-bottom: var(--space-6);
      }
      .review-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-4) var(--space-5);
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
      }
      .review-card__title {
        font-size: var(--font-size-base);
        font-weight: 700;
        color: var(--color-text);
      }
      .review-card__edit {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--color-primary);
        text-decoration: underline;
        cursor: pointer;
        background: none;
        border: none;
      }
      .review-card__body {
        padding: var(--space-5);
      }
      .review-card__row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding-block: var(--space-3);
        border-bottom: 1px solid var(--color-border);
        gap: var(--space-4);
      }
      .review-card__row:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
      .review-card__key {
        font-size: var(--font-size-sm);
        color: var(--color-text-medium);
        flex-shrink: 0;
      }
      .review-card__value {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--color-text);
        text-align: right;
      }

      /* Stripe placeholder */
      .stripe-placeholder {
        background: var(--color-white);
        border: 1.5px solid var(--color-border);
        border-radius: var(--radius-xl);
        overflow: hidden;
        margin-bottom: var(--space-6);
      }
      .stripe-placeholder__header {
        padding: var(--space-4) var(--space-5);
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        display: flex;
        align-items: center;
        gap: var(--space-3);
      }
      .stripe-placeholder__title {
        font-size: var(--font-size-base);
        font-weight: 700;
        color: var(--color-text);
      }
      .stripe-placeholder__body {
        padding: var(--space-6);
      }
      .stripe-placeholder__mock {
        background: var(--color-bg);
        border: 2px dashed var(--color-border);
        border-radius: var(--radius-lg);
        padding: var(--space-8);
        text-align: center;
        color: var(--color-text-light);
        font-size: var(--font-size-sm);
      }
      .stripe-placeholder__mock-icon {
        font-size: 2rem;
        margin-bottom: var(--space-3);
        opacity: 0.4;
      }
      .stripe-placeholder__mock-label {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--color-primary);
      }

      /* =============================================
       BLOCK: booking-confirm (Success state — skeleton styles)
    ============================================= */
      .confirm {
        text-align: center;
        padding-block: var(--space-12);
        max-width: 560px;
        margin-inline: auto;
      }
      .confirm__icon-wrap {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(
          135deg,
          var(--color-success),
          var(--color-accent-dark)
        );
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        margin-inline: auto;
        margin-bottom: var(--space-6);
        box-shadow: 0 8px 24px rgba(0, 181, 137, 0.35);
        animation: confirm-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
      }
      @keyframes confirm-pop {
        from {
          transform: scale(0.5);
          opacity: 0;
        }
        to {
          transform: scale(1);
          opacity: 1;
        }
      }
      .confirm__title {
        font-size: var(--font-size-2xl);
        font-weight: 800;
        color: var(--color-text);
        margin-bottom: var(--space-3);
      }
      .confirm__ref {
        display: inline-block;
        font-size: var(--font-size-sm);
        font-weight: 700;
        color: var(--color-primary);
        background: var(--color-primary-light);
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-full);
        margin-bottom: var(--space-6);
        letter-spacing: 1px;
      }
      .confirm__body {
        font-size: var(--font-size-md);
        color: var(--color-text-medium);
        line-height: 1.7;
        margin-bottom: var(--space-8);
      }
      .confirm__card {
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-xl);
        padding: var(--space-6);
        margin-bottom: var(--space-8);
        text-align: left;
      }
      .confirm__card-row {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding-block: var(--space-3);
        border-bottom: 1px solid var(--color-border);
        font-size: var(--font-size-sm);
        color: var(--color-text-medium);
      }
      .confirm__card-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
      .confirm__card-icon {
        flex-shrink: 0;
        font-size: var(--font-size-base);
      }
      .confirm__card-value {
        font-weight: 600;
        color: var(--color-text);
      }
      .confirm__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
        justify-content: center;
      }