/* Entry point for your PostCSS build */

/* Vendor Styles */
/**
 * tom-select.css (v2.4.3)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */
.ts-control {
  border: 1px solid #d0d0d0;
  padding: 8px 8px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
}
.ts-wrapper.multi.has-items .ts-control {
  padding: calc(8px - 2px - 0) 8px calc(8px - 2px - 3px - 0);
}
.full .ts-control {
  background-color: #fff;
}
.disabled .ts-control, .disabled .ts-control * {
  cursor: default !important;
}
.focus .ts-control {
  box-shadow: none;
}
.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}
.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #f2f2f2;
  color: #303030;
  border: 0 solid #d0d0d0;
}
.ts-wrapper.multi .ts-control > div.active {
  background: #e8e8e8;
  color: #303030;
  border: 0 solid #cacaca;
}
.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  color: rgb(124.5, 124.5, 124.5);
  background: white;
  border: 0 solid white;
}
.ts-control > input {
  flex: 1 1 auto;
  min-width: 7rem;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
     -moz-user-select: auto !important;
          user-select: auto !important;
  box-shadow: none !important;
}
.ts-control > input::-ms-clear {
  display: none;
}
.ts-control > input:focus {
  outline: none !important;
}
.has-items .ts-control > input {
  margin: 0 4px !important;
}
.ts-control.rtl {
  text-align: right;
}
.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}
.ts-control.rtl .ts-control > input {
  margin: 0 4px 0 -2px !important;
}
.disabled .ts-control {
  opacity: 0.5;
  background-color: #fafafa;
}
.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}

.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: 0.25rem 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}
.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}
.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}
.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}
.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}
.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}
.ts-dropdown .optgroup-header {
  color: #303030;
  background: #fff;
  cursor: default;
}
.ts-dropdown .active {
  background-color: #f5fafd;
  color: #495c68;
}
.ts-dropdown .active.create {
  color: #495c68;
}
.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}
.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}
.ts-dropdown .spinner::after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #d0d0d0;
  border-color: #d0d0d0 transparent #d0d0d0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.ts-dropdown-content {
  overflow: hidden auto;
  max-height: 200px;
  scroll-behavior: smooth;
}

.ts-wrapper.plugin-drag_drop .ts-dragging {
  color: transparent !important;
}
.ts-wrapper.plugin-drag_drop .ts-dragging > * {
  visibility: hidden !important;
}

.plugin-checkbox_options:not(.rtl) .option input {
  margin-right: 0.5rem;
}

.plugin-checkbox_options.rtl .option input {
  margin-left: 0.5rem;
}

/* stylelint-disable function-name-case */
.plugin-clear_button {
  --ts-pr-clear-button: 1em;
}
.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(8px - 6px);
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer;
}
.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {
  right: max(var(--ts-pr-caret), 8px);
}
.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity: 1;
}

.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: color-mix(in srgb, #fff 85%, #d0d0d0);
  border-radius: 3px 3px 0 0;
}
.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}
.ts-wrapper .dropdown-header-close:hover {
  color: black;
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: none;
  border: 1px solid #d0d0d0;
}
.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d0d0d0;
  border-width: 0 0 1px;
  display: block;
  padding: 8px 8px;
  box-shadow: none;
  width: 100%;
  background: transparent;
}
.plugin-dropdown_input .items-placeholder {
  border: 0 none !important;
  box-shadow: none !important;
  width: 100%;
}
.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}

.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-moz-placeholder {
  color: transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  color: transparent;
}

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}
.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup::before {
  display: none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}

.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
}
.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}
.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item {
  padding-right: 0 !important;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid #d0d0d0;
  margin-left: 6px;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
  border-left-color: #cacaca;
}
.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
  border-left-color: white;
}

.ts-wrapper.plugin-remove_button.rtl .item {
  padding-left: 0 !important;
}
.ts-wrapper.plugin-remove_button.rtl .item .remove {
  border-right: 1px solid #d0d0d0;
  margin-right: 6px;
}
.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
  border-right-color: #cacaca;
}
.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
  border-right-color: white;
}

:root {
  --ts-pr-clear-button: 0px;
  --ts-pr-caret: 0px;
  --ts-pr-min: .75rem;
}

.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
  cursor: pointer;
}

.ts-control:not(.rtl) {
  padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}

.ts-control.rtl {
  padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}

.ts-wrapper {
  position: relative;
}

.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}

.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}
/*# sourceMappingURL=tom-select.css.map */

/* Base Styles */
:root {
  /* Primary Colors */
  --color-primary: #Ff9900;
  --color-primary-dark: #E55F00;
  --color-primary-light: #FF8C1A;
  --color-primary-50: #FFF5EB;

  /* Secondary Colors */
  --color-secondary: #232f3e;
  --color-secondary-light: #0073BB;
  --color-secondary-dark: #00296B;

  /* Accent Colors */
  --color-accent-yellow: #Ff9900;
  --color-accent-gold: #F59E0B;
  --color-accent-purple: #8B5CF6;

  /* Rating stars. Deliberately NOT --color-primary: an orange star row competes
     with the orange Book Now button, so evaluation and action get separate hues. */
  --color-rating-star: #FBBF24;
  --color-rating-star-empty: #D8DDE3;

  /* Neutral Colors */
  --color-white: #FFFFFF;
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-900: #111827;

  /* Semantic Colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-danger: #EF4444;
  --color-info: #3B82F6;

  /* Green Colors (for success states) */
  --color-green-50: #ECFDF5;
  --color-green-200: #A7F3D0;
  --color-green-600: #059669;
  --color-green-700: #047857;

  /* Primary Color Extended Palette */
  --color-primary-200: #FFD699;
  --color-primary-600: #E58A00;
  --color-primary-700: #CC7A00;

  /* Orange that is legal as TEXT. --color-primary (#FF9900) is 2.14:1 on white,
     below even the 3:1 large-text floor, and --color-primary-700 (#CC7A00) is
     3.07:1 — fine for headings, still short for body copy. This is 5.02:1.
     Fills, icons, borders and button backgrounds keep --color-primary. */
  --color-primary-text: #B45309;

  /* Warning Extended */
  --color-warning-50: #FFFBEB;
  --color-warning-700: #B45309;

  /* Success Extended */
  --color-success-50: #ECFDF5;
  --color-success-700: #047857;

  /* Error Extended */
  --color-error-50: #FEF2F2;
  --color-error-700: #B91C1C;

  /* Text Colors */
  --color-text: var(--color-gray-900);
  --color-text-light: var(--color-gray-600);

  /* Border Colors */
  --color-border: var(--color-gray-200);

  /* Font Families */
  --font-family-primary: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --font-family-heading: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;

  /* Font Sizes */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 2.95rem;        /* 48px */

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 800;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Spacing Scale (8px base) */
  --spacing-1: 0.25rem;   /* 4px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.25rem;   /* 20px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-10: 2.5rem;   /* 40px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-16: 4rem;     /* 64px */
  --spacing-20: 5rem;     /* 80px */
  --spacing-24: 6rem;     /* 96px */

  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* Border Radius */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* Box Shadows - Airbnb-style layered elevation */
  --shadow-sm: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  --shadow-md: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 2px 6px 0 rgba(0, 0, 0, 0.04), 0 4px 8px 0 rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 4px 12px 0 rgba(0, 0, 0, 0.08), 0 8px 16px 0 rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 8px 24px 0 rgba(0, 0, 0, 0.10);
  --shadow-2xl: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 12px 32px 0 rgba(0, 0, 0, 0.12), 0 16px 48px 0 rgba(0, 0, 0, 0.14);

  /* Borders */
  --border-width: 1px;
  --border-width-2: 2px;
  --border-color: var(--color-gray-200);

  /* Liquid Glass / Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.25);
  --glass-bg-light: rgba(255, 255, 255, 0.15);
  --glass-bg-dark: rgba(255, 255, 255, 0.35);
  --glass-blur: 24px;
  --glass-blur-heavy: 40px;
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-border-light: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  --glass-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.15);
  --glass-inner-glow: inset 0 1px 1px rgba(255, 255, 255, 0.4);

  /* Brand Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-hero: linear-gradient(180deg, #FFFFFF 0%, #FFF8F0 100%);
  --gradient-hero-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 153, 0, 0.08) 100%);
  --gradient-warm: linear-gradient(135deg, rgba(255, 153, 0, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
}
/* Basic reset and normalization */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--line-height-normal);
  color: var(--color-gray-900);
  background-color: var(--color-white);
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  line-height: var(--line-height-tight);
}

h1 {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--spacing-6);
  letter-spacing: -1.5px;
}

h2 {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-5);
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-4);
  letter-spacing: -0.02em;
}

h4 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-3);
}

h5 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-3);
}

h6 {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-2);
}

body {
  font-family: var(--font-family-primary);
  letter-spacing: -0.2px;
}

p {
  font-family: var(--font-family-primary);
  margin-bottom: var(--spacing-4);
  line-height: var(--line-height-relaxed);
  letter-spacing: -0.2px;
}

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-gray { color: var(--color-gray-600); }
.text-white { color: var(--color-white); }

.font-bold { font-weight: var(--font-weight-bold); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-medium { font-weight: var(--font-weight-medium); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
/* Utility classes */

.hidden {
  display: none !important;
}

/* Visible to screen readers only — for table captions and headings that carry
   document structure without needing to be shown. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* Layout */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--spacing-6);
}

.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-2xl { max-width: var(--container-2xl); }

.section {
  padding: var(--spacing-24) 0;
}

.section-sm { padding: var(--spacing-12) 0; }
.section-lg { padding: var(--spacing-24) 0; }

.section__title {
  margin-bottom: var(--spacing-3);
  text-align: center;
  letter-spacing: -0.02em;
}

.section__title .yellow-dot {
  color: var(--color-accent-yellow);
}

.section__title .underline {
  text-decoration: underline;
}

.section__subtitle {
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Aurora wrapper - spans multiple sections with subtle grey gradient */
.aurora-wrapper {
  background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
}
.grid {
  display: grid;
  gap: var(--spacing-6);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }

/* Components */
.btn {
  display: inline-block;
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: 100px;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  text-decoration: none;
  font-family: var(--font-family-heading);
}

.btn-primary {
  background-color: var(--color-accent-yellow);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-accent-gold);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Liquid Glass Button - matching search banner */
.btn-glaze {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  color: var(--color-primary);
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(255, 153, 0, 0.06),
    inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

.btn-glaze:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.1),
    0 6px 16px rgba(255, 153, 0, 0.08),
    inset 0 1px 2px rgba(255, 255, 255, 1);
  border-color: rgba(255, 255, 255, 0.9);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-secondary);
  border: var(--border-width-2) solid var(--color-secondary);
}

.btn-secondary:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.btn-success {
  background-color: var(--color-success);
  color: var(--color-white);
}

.btn-success:hover {
  background-color: #059669;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border: var(--border-width-2) solid var(--color-primary);
}

/* Quiet secondary — white with a hairline border, for row-level actions
   that shouldn't compete with the page's one primary button */
.btn-quiet {
  background-color: var(--color-white);
  color: var(--color-secondary);
  border: var(--border-width) solid var(--color-gray-300);
}

.btn-quiet:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-large {
  padding: var(--spacing-4) var(--spacing-8);
  font-size: var(--font-size-lg);
  font-family: var(--font-family-heading);
  font-weight: 800;
}

.btn-small {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
}

.btn-block {
  width: 100%;
  display: block;
}

.btn-rounded {
  border-radius: var(--radius-full);
}

/* Disabled button styles */
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn:disabled:hover,
.btn[disabled]:hover {
  transform: none;
  box-shadow: none;
}

/* Wrapper that carries the hover hint for a disabled button. A disabled
   button takes no pointer events, so a title on the button itself never
   shows — the wrapper receives the hover instead. */
.disabled-cta-hint {
  display: inline-flex;
  cursor: not-allowed;
}

.disabled-cta-hint > .btn-block {
  width: 100%;
}

/* Disabled button with tooltip */
.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  position: relative;
}

.btn-disabled[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: #1f2937;
  color: white;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  margin-bottom: 8px;
  z-index: 100;
  pointer-events: none;
}

.btn-disabled[data-tooltip]:hover::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1f2937;
  margin-bottom: -6px;
  pointer-events: none;
}
/* Form Container */
.form-container {
  max-width: 480px;
  margin: var(--spacing-16) auto;
  padding: 0 var(--spacing-6);
}

.form-card {
  background: var(--color-white);
  padding: var(--spacing-12);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  border: var(--border-width) solid var(--border-color);
}

.form-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  text-align: center;
  margin-bottom: var(--spacing-8);
}

.form-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  text-align: center;
  margin-bottom: var(--spacing-8);
}

/* Form Groups */
.form-group {
  margin-bottom: var(--spacing-6);
}

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-2);
}

/* Label wrapping a checkbox and its text on one line */
.form-label--checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
  margin-bottom: 0;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  background: var(--color-gray-100);
  cursor: not-allowed;
  opacity: 0.6;
}

.form-input::-moz-placeholder, .form-textarea::-moz-placeholder {
  color: var(--color-gray-400);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-gray-400);
}

/* Textarea specific */
.form-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Checkbox and Radio */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}

.form-check-input {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.form-check-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  cursor: pointer;
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: var(--spacing-3);
  margin-top: var(--spacing-8);
}

.form-actions-single {
  margin-top: var(--spacing-8);
}

/* Helper Text */
.form-help {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-top: var(--spacing-2);
}

.form-error {
  font-size: var(--font-size-sm);
  color: var(--color-error);
  margin-top: var(--spacing-2);
}

/* Form Links */
.form-links {
  text-align: center;
  margin-top: var(--spacing-8);
  padding-top: var(--spacing-8);
  border-top: var(--border-width) solid var(--border-color);
}

.form-link {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  transition: color 0.2s ease;
  display: inline-block;
  margin: var(--spacing-2) 0;
}

.form-link:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Error Messages */
.form-errors {
  background: #FEE2E2;
  border: var(--border-width) solid #EF4444;
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.form-errors__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: #991B1B;
  margin-bottom: var(--spacing-2);
}

.form-errors__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.form-errors__item {
  font-size: var(--font-size-sm);
  color: #991B1B;
  padding-left: var(--spacing-4);
  position: relative;
}

.form-errors__item:before {
  content: "•";
  position: absolute;
  left: 0;
}

/* Field with error */
.field_with_errors .form-input,
.field_with_errors .form-textarea,
.field_with_errors .form-select {
  border-color: var(--color-error);
}

.field_with_errors .form-label {
  color: var(--color-error);
}

/* Stack of radio-card options (e.g. business type picker) */
.business-type-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

/* Indented follow-up field revealed by a parent checkbox/radio (e.g. student-vehicle rate) */
.form-subgroup {
  margin-top: var(--spacing-3);
  padding-left: var(--spacing-5);
  border-left: 2px solid var(--border-color);
}

/* Radio Cards */
.radio-card {
  display: flex;
  align-items: flex-start;
  padding: var(--spacing-4);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--color-white);
}

.radio-card:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

.radio-card__input {
  margin-top: var(--spacing-1);
  margin-right: var(--spacing-3);
  cursor: pointer;
  accent-color: var(--color-primary);
  min-width: 18px;
  min-height: 18px;
}

.radio-card__input:checked ~ .radio-card__content {
  font-weight: var(--font-weight-semibold);
}

.radio-card:has(.radio-card__input:checked) {
  border-color: var(--color-primary);
  background: rgba(255, 107, 0, 0.05);
}

.radio-card__content {
  flex: 1;
}

.radio-card__title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-1);
}

.radio-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: var(--line-height-relaxed);
}

/* Password Field with Visibility Toggle */
.password-field-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field-wrapper .form-input {
  padding-right: 44px;
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  transition: color 0.2s;
}

.password-toggle:hover {
  color: var(--color-primary);
}

.password-toggle:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.eye-icon {
  width: 20px;
  height: 20px;
}

/* Password Strength Indicator */
.password-strength {
  margin-top: var(--spacing-3);
  /* Hidden until the user types; the password-strength Stimulus controller
     reveals it by setting an inline display, which overrides this default. */
  display: none;
}

.password-strength__bar {
  height: 4px;
  background-color: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--spacing-2);
}

.password-strength__fill {
  height: 100%;
  width: 0%;
  transition: width 0.3s ease, background-color 0.3s ease;
  border-radius: var(--radius-full);
}

.password-strength__text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin: 0;
  transition: color 0.3s ease;
}

/* Form Footer */
.form-footer {
  text-align: center;
  margin-top: var(--spacing-6);
}

/* Form Sections */
.form-section {
  margin-bottom: var(--spacing-8);
}

.form-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-4);
  color: var(--color-gray-900);
}

/* Alert Boxes */
.alert {
  padding: var(--spacing-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-6);
}

.alert-info {
  background-color: #DBEAFE;
  border-left: 4px solid #3B82F6;
  color: #1E3A8A;
}

.alert-warning {
  background-color: #FEF3C7;
  border-left: 4px solid #F59E0B;
  color: #92400E;
}

.alert-danger {
  background-color: #FEE2E2;
  border-left: 4px solid #EF4444;
  color: #991B1B;
}

.alert strong {
  font-weight: var(--font-weight-semibold);
}

.alert a {
  color: inherit;
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.alert a:hover {
  text-decoration-thickness: 2px;
}

/* Site-wide account nudge banner (e.g. set-password prompt) */
.account-banner__wrap {
  padding-top: var(--spacing-4);
}

.account-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  flex-wrap: wrap;
  padding: var(--spacing-3) var(--spacing-4);
  background-color: #DBEAFE;
  border-left: 4px solid #3B82F6;
  border-radius: var(--radius-md);
  color: #1E3A8A;
}

.account-banner__text {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
}

.account-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.account-banner__dismiss {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: var(--spacing-1);
  font-size: var(--font-size-base);
  opacity: 0.7;
}

.account-banner__dismiss:hover {
  opacity: 1;
}

/* Password Change Section */
.password-change-section {
  padding: var(--spacing-4);
  background-color: #FEF3C7;
  border-radius: var(--radius-lg);
  border: 1px solid #FBBF24;
  margin-bottom: var(--spacing-8);
}

.password-change-section .form-section-title {
  color: #92400E;
  margin-bottom: var(--spacing-2);
}

.password-change-section .form-subtitle {
  font-size: var(--font-size-sm);
  color: #92400E;
  margin-bottom: var(--spacing-4);
  text-align: left;
}

/* Current Password Section */
.current-password-section {
  padding: var(--spacing-4);
  background-color: #FEE2E2;
  border-radius: var(--radius-lg);
  border: 1px solid #F87171;
  margin-bottom: var(--spacing-8);
}

.current-password-section .form-group {
  margin-bottom: 0;
}

.security-notice {
  font-size: var(--font-size-sm);
  color: #991B1B;
  margin-top: var(--spacing-2);
}

.security-notice strong {
  font-weight: var(--font-weight-semibold);
}

/* Danger Zone */
.danger-zone {
  margin-top: var(--spacing-12);
  padding-top: var(--spacing-8);
  border-top: 2px solid var(--border-color);
}

.danger-zone-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: #DC2626;
  margin-bottom: var(--spacing-4);
}

.danger-zone-description {
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-4);
}

.btn-danger {
  background-color: #DC2626;
  color: var(--color-white);
  border: none;
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  transition: background-color 0.2s ease;
}

.btn-danger:hover {
  background-color: #B91C1C;
}

/* Form Help Text */
.form-help-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-top: var(--spacing-2);
}

/* Form Row (for side-by-side fields) */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

/* Three short fields on one line (e.g. colour / body type / transmission).
   Declared before the mobile query below so the 1fr stack still wins there. */
.form-row--3col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Required field indicator */
.form-label.required::after {
  content: " *";
  color: #DC2626;
}

/* Text Link */
.text-link {
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color 0.2s ease;
}

.text-link:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Invitation Acceptance Page */
.invitation-info-box {
  background: rgba(37, 99, 235, 0.1);
  border: var(--border-width) solid #2563EB;
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.invitation-info-box__title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-4);
  text-align: center;
}

.invitation-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.invitation-detail {
  text-align: center;
}

/* File Upload Progress Bar */
.upload-progress {
  margin-top: var(--spacing-3);
}

.upload-progress-bar-container {
  width: 100%;
  height: 8px;
  background-color: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--spacing-2);
}

.upload-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
  width: 0%;
}

.upload-progress-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  text-align: center;
}

/* Inline Form (for button_to helpers) */
.inline-form {
  display: inline;
}

/* Wider card for invitation acceptance pages */
.form-card--invitation {
  max-width: 600px;
}
/* Custom Select Dropdown */
.custom-select {
  position: relative;
  display: inline-block;
}

.custom-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-10) var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 200px;
}

.custom-select select:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}

.custom-select select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15);
}

.custom-select::after {
  content: "▼";
  position: absolute;
  right: var(--spacing-3);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-gray-600);
  font-size: var(--font-size-xs);
}

/* Business Selector Specific */
.business-selector {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.business-selector__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.business-selector select {
  background-color: var(--color-gray-50);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-8) var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 180px;
}

.business-selector select:hover {
  background-color: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.business-selector select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}

.business-selector::after {
  content: "⌄";
  position: absolute;
  right: var(--spacing-2);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}
.site-header {
  background: var(--color-white);
  border-bottom: var(--border-width) solid var(--border-color);
  padding: var(--spacing-4) 0;
  top: 0;
  z-index: 1000;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--spacing-8);
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto;
}

.logo__image {
  height: 33px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: var(--spacing-3);
  align-items: center;
}

.nav-links > a {
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  padding: var(--spacing-2) var(--spacing-4);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-links > a:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

.nav-actions {
  display: flex;
  gap: var(--spacing-3);
  align-items: center;
}

/* Dropdown menu */
.nav-dropdown {
  position: relative;
}

.nav-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  padding: var(--spacing-2) var(--spacing-4);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: background-color 0.2s ease, color 0.2s ease;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.nav-dropdown__trigger:hover,
.nav-dropdown:hover .nav-dropdown__trigger {
  background: var(--color-secondary);
  color: var(--color-white);
}

.nav-dropdown__trigger i {
  font-size: 0.65em;
  transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown__trigger i {
  transform: rotate(180deg);
}

.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 180px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  padding: var(--spacing-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

/* Bridge the gap between trigger and menu to prevent hover loss */
.nav-dropdown__menu::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
}

/* Hover is a mouse affordance only. Touch devices have no hover, which used
   to leave a tap-only user unable to open the menu at all. */
@media (hover: hover) and (pointer: fine) {
  .nav-dropdown:hover .nav-dropdown__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

/* --open is set by the dropdown Stimulus controller (click, Escape,
   outside-click). The :focus-within rule is the no-JS fallback for keyboard
   users, and is dropped once the controller marks itself ready so it can't
   hold the menu open against a toggle that just closed it. */
.nav-dropdown--open .nav-dropdown__menu,
.nav-dropdown:not([data-dropdown-ready]):focus-within .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown__item {
  display: block;
  padding: var(--spacing-2) var(--spacing-4);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease;
}

.nav-dropdown__item:hover {
  background: var(--color-gray-100);
  color: var(--color-text);
}

.nav-dropdown__divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--spacing-2) 0;
}

.nav-dropdown__item--all {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.nav-dropdown__item--all:hover {
  background: var(--color-gray-100);
  color: var(--color-primary);
}

/* User Menu */
.user-menu {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.user-menu--logged-out {
  justify-content: flex-end;
}

.user-menu__link {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color 0.2s ease;
}

.user-menu__link:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* User Dropdown */
.user-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.user-dropdown__trigger i.fa-user-circle {
  font-size: 1.1em;
}

.user-dropdown__trigger i.fa-chevron-down {
  font-size: 0.65em;
}

.user-menu__credit-balance {
  display: inline-block;
  padding: 2px var(--spacing-2);
  margin-left: var(--spacing-1);
  border-radius: 999px;
  background: var(--color-success);
  color: white;
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1.3;
}

.user-dropdown__menu {
  right: 0;
  left: auto;
  transform: translateY(10px);
  min-width: 200px;
}

/* The user menu is right-aligned, so it opens straight down rather than
   pulling back 50% like the centred nav dropdowns. Every way of opening it
   needs this, not just hover. */
@media (hover: hover) and (pointer: fine) {
  .user-dropdown:hover .user-dropdown__menu {
    transform: translateY(0);
  }
}

.nav-dropdown--open .user-dropdown__menu,
.nav-dropdown:not([data-dropdown-ready]):focus-within .user-dropdown__menu {
  transform: translateY(0);
}

.nav-dropdown__item i {
  margin-right: var(--spacing-2);
  width: 16px;
  text-align: center;
  font-size: var(--font-size-sm);
}

.user-dropdown__logout {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: #DC2626;
  font-weight: var(--font-weight-medium);
}

.user-dropdown__logout:hover {
  background: var(--color-gray-100);
  color: #DC2626;
}

/* Business Selector */
.business-selector__select {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  transition: border-color 0.2s ease;
}

.business-selector__select:hover {
  border-color: var(--color-primary);
}

.business-selector__select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}

/* Minimal Header (Checkout Flow) */
.site-header--minimal {
  background: var(--color-white);
  border-bottom: var(--border-width) solid var(--border-color);
  padding: var(--spacing-4) 0;
}

.main-nav--minimal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--spacing-8);
}

.nav-actions--minimal {
  display: flex;
  align-items: center;
}

.checkout-secure-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-success-light);
  color: var(--color-success-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
}

.checkout-secure-badge i {
  font-size: var(--font-size-xs);
}

/* Hamburger — hidden on desktop, the only way into the nav below 768px */
.nav-menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-lg);
  color: var(--color-secondary);
  cursor: pointer;
  order: 3;
}

@media (max-width: 768px) {
  .main-nav {
    position: relative;
    flex-wrap: wrap;
  }

  .nav-menu-toggle {
    display: inline-flex;
    align-items: center;
  }

  .nav-links {
    display: none;
  }

  /* Open state: links become a full-width panel under the header */
  .main-nav--open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-1);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    padding: var(--spacing-3) var(--spacing-4) var(--spacing-4);
    z-index: 1002;
  }

  .main-nav--open .nav-links > a {
    padding: var(--spacing-3) var(--spacing-2);
    border-bottom: 1px solid var(--color-gray-100);
  }

  /* The hover dropdown flattens into an always-visible group in the panel */
  .main-nav--open .nav-dropdown__trigger {
    pointer-events: none;
    padding: var(--spacing-3) var(--spacing-2);
    color: var(--color-gray-500);
  }

  .main-nav--open .nav-dropdown__trigger i {
    display: none;
  }

  .main-nav--open .nav-dropdown__menu {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    min-width: 0;
    padding: 0 0 0 var(--spacing-4);
  }

  .main-nav--minimal {
    padding: 0 var(--spacing-4);
  }

  .checkout-secure-badge {
    font-size: var(--font-size-xs);
    padding: var(--spacing-1) var(--spacing-2);
  }
}
/* ===========================================
   HERO SECTION - Card Design
   Card + Image layout for homepage
   =========================================== */
.hero-section {
  padding: var(--spacing-12) 0 var(--spacing-3);
  background: var(--color-white);
}

.hero__wrapper {
  position: relative;
}

.hero__layout {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}

/* Search Card - Compact white card with premium shadow */
.hero__card {
  background: #ffffff;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.15), 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
  margin-right: -80px;
  width: 575px;
  flex-shrink: 0;
}

.hero__title {
  font-size: clamp(1.75rem, 3vw, 2.85rem);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  letter-spacing: -0.05em;
  line-height: 1.1;
  margin-bottom: var(--spacing-4);
  color: var(--color-secondary);
}

.hero__title .underline {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 4px;
}

.hero__title .yellow-dot {
  color: var(--color-accent-yellow);
}

.hero__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-gray-500);
  max-width: 560px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.hero__search {
  margin-bottom: 0;
}

.hero__search-label {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-3);
  letter-spacing: -0.01em;
}

.hero__search-form {
  display: flex;
  gap: var(--spacing-3);
  align-items: stretch;
}

.hero__search-form .suburb-autocomplete {
  flex: 1;
}

.hero__search-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  white-space: nowrap;
}

.hero__search-input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  font-size: var(--font-size-base);
  color: var(--color-secondary);
  background: var(--color-gray-50);
  transition: all 0.2s;
}

.hero__search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.1);
}

.hero__search-input::-moz-placeholder {
  color: var(--color-gray-400);
}

.hero__search-input::placeholder {
  color: var(--color-gray-400);
}

/* Hero Image - Extends to right edge */
.hero__image {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  flex: 1;
  height: 480px;
  min-height: 480px;
  background: var(--color-gray-100);
}

.hero__img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center right;
     object-position: center right;
}

@media (max-width: 1024px) {
  .hero__card {
    margin-right: -40px;
    padding: 24px 20px;
    max-width: 340px;
    min-width: 300px;
  }

  .hero__image {
    height: 360px;
    max-width: 550px;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: var(--spacing-4) 0;
  }

  .hero__layout {
    flex-direction: column;
    gap: 0;
  }

  .hero__image {
    order: 1;
    border-radius: 12px;
    margin-bottom: -40px;
    height: 240px;
    min-height: 240px;
    max-width: 100%;
    width: 100%;
  }

  .hero__img {
    height: 100%;
    -o-object-position: center;
       object-position: center;
  }

  .hero__card {
    order: 2;
    margin: 0 16px;
    margin-right: 16px;
    padding: 24px;
    position: relative;
    z-index: 10;
    max-width: none;
    min-width: auto;
    width: calc(100% - 6px);
    text-align: center;
  }

  .hero__title {
    font-size: var(--font-size-3xl);
  }

  .hero__subtitle {
    margin-bottom: var(--spacing-5);
  }

  .hero__search-label {
    text-align: left;
  }

  .hero__search-form {
    flex-direction: column;
  }

  .hero__search-btn {
    justify-content: center;
  }
}

/* Suburb Autocomplete Dropdown */
.suburb-autocomplete {
  position: relative;
  width: 100%;
}

.suburb-autocomplete__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  margin-top: var(--spacing-2);
  max-height: 280px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}

.suburb-autocomplete__results--visible {
  display: block;
}

.suburb-autocomplete__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
  font-size: var(--font-size-base);
}

.suburb-autocomplete__item:first-child {
  border-radius: 12px 12px 0 0;
}

.suburb-autocomplete__item:last-child {
  border-radius: 0 0 12px 12px;
}

.suburb-autocomplete__item:only-child {
  border-radius: 12px;
}

.suburb-autocomplete__item:hover,
.suburb-autocomplete__item--active {
  background: var(--color-gray-50);
}

.suburb-autocomplete__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.suburb-autocomplete__name {
  color: var(--color-secondary);
  font-weight: var(--font-weight-medium);
}

.suburb-autocomplete__provider-count {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
}

.suburb-autocomplete__provider-count--empty {
  color: var(--color-gray-300);
  font-style: italic;
}

.suburb-autocomplete__state {
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.suburb-autocomplete__item--no-providers {
  opacity: 0.7;
}

.suburb-autocomplete__item--no-providers .suburb-autocomplete__name {
  color: var(--color-gray-500);
}

.suburb-autocomplete__empty {
  padding: var(--spacing-4);
  text-align: center;
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
}
/* Feature Card */
.feature-card {
  background: var(--color-white);
  padding: var(--spacing-6);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--border-color);
  text-align: left;
  transition: all 0.2s ease;
}

.feature-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.feature-card__icon {
  width: 48px;
  height: 48px;
  background: var(--color-accent-yellow);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-4);
  font-size: var(--font-size-2xl);
}

.feature-card__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-2);
  letter-spacing: -0.01em;
}

.feature-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: var(--line-height-relaxed);
  margin-bottom: 0;
}

/* Feature Item (Simple columns without borders) */
.feature-item {
  text-align: center;
}

.feature-item__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-6);
  margin-left: auto;
  margin-right: auto;
  font-size: var(--font-size-2xl);
  color: var(--color-accent-yellow);
}

.feature-item__icon svg {
  width: 100%;
  height: 100%;
}

.feature-item__icon--image {
  background: transparent;
  padding: 0;
}

.feature-item__icon--star {
  color: var(--color-accent-yellow);
  width: 51px;
  height: 51px;
  filter: drop-shadow(0 2px 4px rgba(253, 185, 19, 0.3));
}

.feature-item__icon--star svg {
  width: 100%;
  height: 100%;
}

/* Font Awesome icon styling */
.feature-item__icon--fa {
  color: var(--color-secondary);
  font-size: 2.5rem;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.feature-icon-img {
  width: 48px;
  height: 48px;
  -o-object-fit: contain;
     object-fit: contain;
}

.feature-item__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-3);
  letter-spacing: -0.01em;
}

.feature-item__description {
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: 48px;
}

/* Mobile and Tablet - Center feature items */
@media (max-width: 1024px) {
  .feature-item {
    text-align: center;
  }

  .feature-item__icon {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Instructor Card */
.instructor-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  border: var(--border-width) solid var(--border-color);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  width: 95%;
  /* Premium shadow matching button style */
  box-shadow:
    0 4px 15px rgba(35, 47, 62, 0.08),
    0 2px 6px rgba(35, 47, 62, 0.05);
}

.instructor-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  /* Subtle elevated shadow on hover */
  box-shadow:
    0 8px 16px rgba(35, 47, 62, 0.12),
    0 4px 8px rgba(35, 47, 62, 0.08);
}

.instructor-card__body {
  padding: var(--spacing-4);
  padding-bottom: var(--spacing-4);
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* Media cluster: the instructor and their car as two equal circles, overlapped
   so the pair reads as one unit instead of two stacked blocks. */
.instructor-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--spacing-3) 0 var(--spacing-4);
}

.instructor-card__profile-image,
.instructor-card__car-image {
  width: 76px;
  height: 76px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gray-200);
  overflow: hidden;
  flex-shrink: 0;
}

.instructor-card__profile-image {
  background: var(--color-gray-100);
  /* Positioned, so it paints over the car circle tucked in behind it. The
     white ring is the gap that separates the two. */
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 3px var(--color-white);
}

.instructor-card__profile-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* Stock car art is cut out on white, so the circle is white too and the ring
   is what defines it. */
.instructor-card__car-image {
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  margin-left: -14px;
}

.instructor-card__car-img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  /* Nudged clear of the portrait overlapping its left edge, so the car sits
     optically centred in the part of the circle you can actually see. */
  transform: translateX(3px);
}

/* Compact pair for the booking wizard sidebar, where it sits beside the name
   rather than above it. */
.instructor-card__media--compact {
  margin: 0;
}

.instructor-card__media--compact .instructor-card__profile-image,
.instructor-card__media--compact .instructor-card__car-image {
  width: 52px;
  height: 52px;
}

.instructor-card__media--compact .instructor-card__car-image {
  padding: 4px;
  margin-left: -10px;
}

.instructor-card__identity {
  text-align: center;
}

.instructor-card__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0;
}

.instructor-card__car-name {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  font-weight: var(--font-weight-medium);
  margin: var(--spacing-1) 0 0;
  text-align: center;
}

.instructor-card__feature-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-3);
  /* Pinned to the bottom of the body so the badge row, price and button line
     up across a row of cards whose ratings differ in height. */
  margin-top: auto;
  padding-top: var(--spacing-4);
  margin-bottom: var(--spacing-2);
}

.instructor-card__feature-icons .feature-icon-img {
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
     object-fit: contain;
  cursor: pointer;
}

/* Font Awesome feature icons */
.instructor-card__feature-icon {
  font-size: 1.4rem;
  color: var(--color-secondary);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.instructor-card__feature-icon:hover {
  transform: scale(1.1);
}

/* ID Verified badge - Instagram/Twitter style light blue */
.instructor-card__feature-icon--verified {
  color: #1da1f2;
}

/* Stacked verified badge (certificate + check) */
.verified-badge {
  font-size: 0.7rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.verified-badge:hover {
  transform: scale(1.1);
}

.verified-badge .fa-certificate {
  color: #1da1f2;
}

.verified-badge .fa-check {
  color: white;
  font-size: 0.9em;
  -webkit-text-stroke: 1px white;
}

/* Icon Tooltip Wrapper */
.icon-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.icon-tooltip-wrapper:focus {
  outline: none;
}

.icon-tooltip-wrapper:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Tooltip Styles (Airtasker-inspired) */
.icon-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-secondary);
  color: var(--color-white);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 1000;
  box-shadow: var(--shadow-lg);
}

/* Tooltip arrow */
.icon-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-secondary);
}

/* Show tooltip on hover and focus */
.icon-tooltip-wrapper:hover .icon-tooltip,
.icon-tooltip-wrapper:focus .icon-tooltip,
.icon-tooltip-wrapper:focus-within .icon-tooltip {
  opacity: 1;
  visibility: visible;
}

.instructor-card__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-top: var(--spacing-1);
}

/* Five-star row. Two stacked copies of the same glyphs: a grey track, and a
   gold copy clipped to the score by one of the stepped width classes below. */
.rating-stars {
  position: relative;
  display: inline-block;
  line-height: 1;
  font-size: 15px;
  letter-spacing: 2px;
  white-space: nowrap;
}

.rating-stars__track {
  display: block;
  color: var(--color-rating-star-empty);
  /* Cancels the trailing letter-space so the box measures the visible stars.
     Without it a 98% fill covers the fifth star and 4.9 reads as 5.0. */
  margin-right: -2px;
}

.rating-stars__fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--color-rating-star);
}

.rating-stars__fill--0 { width: 0%; }
.rating-stars__fill--2 { width: 2%; }
.rating-stars__fill--4 { width: 4%; }
.rating-stars__fill--6 { width: 6%; }
.rating-stars__fill--8 { width: 8%; }
.rating-stars__fill--10 { width: 10%; }
.rating-stars__fill--12 { width: 12%; }
.rating-stars__fill--14 { width: 14%; }
.rating-stars__fill--16 { width: 16%; }
.rating-stars__fill--18 { width: 18%; }
.rating-stars__fill--20 { width: 20%; }
.rating-stars__fill--22 { width: 22%; }
.rating-stars__fill--24 { width: 24%; }
.rating-stars__fill--26 { width: 26%; }
.rating-stars__fill--28 { width: 28%; }
.rating-stars__fill--30 { width: 30%; }
.rating-stars__fill--32 { width: 32%; }
.rating-stars__fill--34 { width: 34%; }
.rating-stars__fill--36 { width: 36%; }
.rating-stars__fill--38 { width: 38%; }
.rating-stars__fill--40 { width: 40%; }
.rating-stars__fill--42 { width: 42%; }
.rating-stars__fill--44 { width: 44%; }
.rating-stars__fill--46 { width: 46%; }
.rating-stars__fill--48 { width: 48%; }
.rating-stars__fill--50 { width: 50%; }
.rating-stars__fill--52 { width: 52%; }
.rating-stars__fill--54 { width: 54%; }
.rating-stars__fill--56 { width: 56%; }
.rating-stars__fill--58 { width: 58%; }
.rating-stars__fill--60 { width: 60%; }
.rating-stars__fill--62 { width: 62%; }
.rating-stars__fill--64 { width: 64%; }
.rating-stars__fill--66 { width: 66%; }
.rating-stars__fill--68 { width: 68%; }
.rating-stars__fill--70 { width: 70%; }
.rating-stars__fill--72 { width: 72%; }
.rating-stars__fill--74 { width: 74%; }
.rating-stars__fill--76 { width: 76%; }
.rating-stars__fill--78 { width: 78%; }
.rating-stars__fill--80 { width: 80%; }
.rating-stars__fill--82 { width: 82%; }
.rating-stars__fill--84 { width: 84%; }
.rating-stars__fill--86 { width: 86%; }
.rating-stars__fill--88 { width: 88%; }
.rating-stars__fill--90 { width: 90%; }
.rating-stars__fill--92 { width: 92%; }
.rating-stars__fill--94 { width: 94%; }
.rating-stars__fill--96 { width: 96%; }
.rating-stars__fill--98 { width: 98%; }
.rating-stars__fill--100 { width: 100%; }

.rating-source {
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

/* Source favicon shown in place of the "DriveBuddy"/"Google" label */
.rating-source-icon {
  height: 14px;
  width: 14px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 1px;
}

.rating-number {
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
}

.rating-star {
  color: var(--color-accent-yellow);
  font-size: var(--font-size-base);
}

.instructor-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-heading);
}

.instructor-card__badge--new {
  background: var(--color-primary-50);
  color: var(--color-primary-700, #b45309);
}

.instructor-card__location {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-3);
}

.instructor-card__location svg {
  width: 16px;
  height: 16px;
}

.instructor-card__features {
  display: inline-flex;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
  justify-content: center;
}

.feature-icon {
  width: 32px;
  height: 32px;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
}

/* Price leads the card footer: the number is the second thing anyone compares
   after the rating, so it outranks the meta text rather than matching it. */
.instructor-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--spacing-1);
  font-family: var(--font-family-heading);
  margin: 0 0 var(--spacing-4);
}

.instructor-card__price-amount {
  font-size: 26px;
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  letter-spacing: -0.02em;
}

.instructor-card__price-unit {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
}

/* Availability row. Always rendered for a bookable instructor so the price and
   the button below stay on the same baseline across a row of cards, and worded
   as an invitation: an empty calendar means nobody set their hours, not that
   the instructor is unavailable. */
.instructor-card__availability {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  width: 100%;
  background: none;
  border: 0;
  padding: 0 0 var(--spacing-3);
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--color-gray-300);
  text-underline-offset: 3px;
}

.instructor-card__availability:hover {
  color: var(--color-secondary);
  text-decoration-color: var(--color-secondary);
}

.instructor-card__availability:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.price-label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-1);
}

.price-amount {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.instructor-card__footer {
  padding: var(--spacing-4);
  padding-top: 0;
  padding-bottom: var(--spacing-4);
  position: relative;
  z-index: 1;
}

/* Book Now Button */
.instructor-card__footer .btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  transition: background 0.2s ease;
}

.instructor-card__footer .btn-primary:hover {
  background: #e08800;
}

/* Greyed availability row for an instructor with no published hours. The
   hint wrapper carries the hover tooltip (see .disabled-cta-hint) and goes
   full width so the row keeps the same footprint as the live button. */
.instructor-card__footer .disabled-cta-hint {
  display: block;
  width: 100%;
}

.instructor-card__availability:disabled {
  color: var(--color-gray-400);
  cursor: not-allowed;
  text-decoration: none;
}

.instructor-card__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  color: var(--color-success, #16a34a);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-heading);
}

.instructor-card__incomplete-text {
  margin: 0;
  padding: var(--spacing-3);
  text-align: center;
  background: var(--color-surface-muted, #f3f4f6);
  /* gray-500 measures 4.83:1 on white but only 4.39:1 on this muted panel,
     just under the 4.5 floor — gray-600 clears it. */
  color: var(--color-gray-600);
  border: var(--border-width) solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-style: italic;
}
/* Quiet empty state — shared by My Bookings and My Wallet */
.empty-panel {
  padding: var(--spacing-12) var(--spacing-6);
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.empty-panel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--spacing-4);
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xl);
  color: var(--color-gray-400);
}

.empty-panel__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-1);
}

.empty-panel__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin: 0;
}

.empty-panel__text + .btn {
  margin-top: var(--spacing-5);
}
.pricing-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-6);
  margin: var(--spacing-12) 0;
}

.pricing-block {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-white);
  padding: var(--spacing-8);
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: var(--shadow-lg);
  transition: transform 0.2s ease;
}

.pricing-block:hover {
  transform: translateY(-4px);
}

.pricing-block__value {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-2);
  line-height: 1;
}

.pricing-block__label {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  opacity: 0.95;
}

.pricing-block__sublabel {
  font-size: var(--font-size-sm);
  opacity: 0.85;
  margin-top: var(--spacing-2);
}

/* Heading above the provider-page "Why book" feature grid */
.pricing-section__heading {
  margin-bottom: var(--spacing-12);
}

/* Stats Banner - Clean centered design */
.stats-banner {
  padding: var(--spacing-4) var(--spacing-8);
}

.stats-banner__content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-8);
  text-align: center;
}

.stats-banner__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  padding: 0 var(--spacing-4);
  position: relative;
}

.stats-banner__item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 50%;
  width: 1px;
  background: var(--border-color);
}

.stats-banner__icon {
  font-size: 1.75rem;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-2);
}

.stats-banner__value {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1.1;
}

.stats-banner__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
  opacity: 0.8;
}

/* Responsive */
@media (max-width: 768px) {
  .stats-banner {
    padding: var(--spacing-8) var(--spacing-6);
  }

  .stats-banner__content {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
  }

  .stats-banner__item:not(:last-child)::after {
    display: none;
  }

  .stats-banner__item {
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-4);
  }

  .stats-banner__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .stats-banner__value {
    font-size: var(--font-size-3xl);
  }
}
.testimonial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-8);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-white);
  padding: var(--spacing-12);
  border-radius: var(--radius-2xl);
  align-items: center;
  margin: var(--spacing-12) 0;
}

.testimonial__content {
  padding: var(--spacing-4);
}

.testimonial__quote-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--spacing-4);
  opacity: 0.3;
}

.testimonial__text {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-6);
  font-style: italic;
}

.testimonial__rating {
  color: var(--color-accent-yellow);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-2);
}

.testimonial__author {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
}

.testimonial__image {
  position: relative;
  height: 100%;
}

.testimonial__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius-xl);
}

@media (max-width: 1024px) {
  .testimonial {
    grid-template-columns: 1fr;
  }

  .testimonial__image {
    height: 300px;
  }
}
.faq-section__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-3);
  text-align: left;
}

.faq-section__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-8);
  text-align: left;
}

.faq-section__subtitle a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

.faq-section__subtitle a:hover {
  text-decoration: underline;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.faq-item {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-secondary);
  list-style: none;
  width: 100%;
  text-align: left;
  padding: var(--spacing-5) var(--spacing-6);
  transition: color 0.2s ease;
  font-family: var(--font-family-heading);
}

.faq-question:hover {
  color: var(--color-primary);
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-icon {
  color: var(--color-primary);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: var(--spacing-4);
  /* Sized for a chevron. The old solid ▼ glyph needed 2xl to read at all;
     it's aria-hidden, so the question text carries the meaning. */
  font-size: var(--font-size-base);
  line-height: 1;
}

.faq-item[open] .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 var(--spacing-6) var(--spacing-5) var(--spacing-6);
  color: var(--color-gray-600);
  line-height: var(--line-height-relaxed);
  font-size: var(--font-size-base);
}

/* Remove extra margin from last paragraph in FAQ answer */
.faq-answer p:last-child {
  margin-bottom: 0;
}
.site-footer {
  background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
  padding: var(--spacing-24) 0 var(--spacing-24);
  margin-top: var(--spacing-20);
  border-top: var(--border-width) solid var(--border-color);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-12);
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--spacing-6);
}

.footer-column {
  display: flex;
  flex-direction: column;
}

.footer-logo {
  display: inline-block;
  margin-bottom: var(--spacing-4);
}

.footer-logo__image {
  height: 32px;
  width: auto;
}

.footer-company {
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-1);
}

.footer-legal {
  font-size: var(--font-size-xs);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-3);
}

.footer-heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-4);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.footer-links a,
.footer-link {
  color: var(--color-secondary);
  font-size: var(--font-size-sm);
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-link:hover {
  color: var(--color-primary);
}

.footer-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-white);
  color: var(--color-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
  box-shadow: 0px 4px 7px 1px #0000001A;
  border: 1px solid #DDDDDD;
  transition: all 0.2s ease;
  text-decoration: none;
  width: -moz-fit-content;
  width: fit-content;
}

.footer-contact-btn:hover {
  box-shadow: 0px 4px 10px 2px #0000001A;
  color: var(--color-primary);
}

.footer-social {
  display: flex;
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
}

.footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-white);
  color: var(--color-secondary);
  font-size: var(--font-size-base);
  border-radius: var(--radius-full);
  box-shadow: 0px 4px 7px 1px #0000001A;
  border: 1px solid #DDDDDD;
  transition: all 0.2s ease;
}

.footer-social__link:hover {
  box-shadow: 0px 4px 10px 2px #0000001A;
  color: var(--color-primary);
}

@media (max-width: 1024px) {
  .footer-grid {
    /* five columns tighten to a balanced 3+2 rather than orphaning one */
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding: var(--spacing-12) 0 var(--spacing-16);
    margin-top: var(--spacing-12);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
    padding: 0 var(--spacing-4);
    text-align: center;
  }

  .footer-column {
    align-items: center;
  }

  .footer-links {
    align-items: center;
  }

  .footer-heading {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-3);
  }

  .footer-logo {
    margin-bottom: var(--spacing-3);
  }

  .footer-logo__image {
    height: 28px;
  }

  .footer-company {
    margin-bottom: var(--spacing-1);
  }

  .footer-legal {
    margin-bottom: var(--spacing-4);
  }
}
/* Admin Dashboard Styles */

/* Stats Cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-12);
}

.stat-card {
  background: var(--color-white);
  padding: var(--spacing-8);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: var(--border-width) solid var(--border-color);
  transition: all 0.2s ease;
}

.stat-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.stat-card__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-2);
}

.stat-card__value {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  line-height: 1;
  margin-bottom: var(--spacing-2);
}

.stat-card__value--primary { color: var(--color-primary); }
.stat-card__value--success { color: var(--color-success); }
.stat-card__value--warning { color: var(--color-warning); }
.stat-card__value--info { color: var(--color-info); }

.stat-card__change {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.stat-card__change--positive {
  color: var(--color-success);
}

.stat-card__change--negative {
  color: var(--color-error);
}

/* Admin Sections */
.admin-section {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-8);
  margin-bottom: var(--spacing-8);
  box-shadow: var(--shadow-md);
  border: var(--border-width) solid var(--border-color);
}

.admin-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-6);
  padding-bottom: var(--spacing-4);
  border-bottom: var(--border-width) solid var(--border-color);
}

.admin-section__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
}

.admin-section__actions {
  display: flex;
  gap: var(--spacing-3);
}

/* Tables */
.admin-table-container {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-color);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table thead {
  background: var(--color-gray-50);
}

.admin-table th {
  padding: var(--spacing-4) var(--spacing-6);
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: var(--border-width) solid var(--border-color);
}

.admin-table tbody tr {
  border-bottom: var(--border-width) solid var(--border-color);
  transition: background-color 0.15s ease;
}

.admin-table tbody tr:hover {
  background: var(--color-gray-50);
}

.admin-table tbody tr:last-child {
  border-bottom: none;
}

.admin-table td {
  padding: var(--spacing-4) var(--spacing-6);
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
}

.admin-table__cell-main {
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.admin-table__cell-sub {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  margin-top: var(--spacing-1);
}

.admin-table__actions {
  display: flex;
  gap: var(--spacing-3);
  align-items: center;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.badge--primary {
  background: rgba(255, 107, 0, 0.1);
  color: var(--color-primary-dark);
}

.badge--success {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.badge--warning {
  background: rgba(245, 158, 11, 0.1);
  color: #D97706;
}

.badge--error {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
}

.badge--info {
  background: rgba(59, 130, 246, 0.1);
  color: #2563EB;
}

.badge--gray {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

/* Action Links */
.admin-action {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: all 0.2s ease;
  border-radius: var(--radius-sm);
}

.admin-action--view {
  color: var(--color-info);
}

.admin-action--view:hover {
  color: #1D4ED8;
  background: rgba(59, 130, 246, 0.1);
}

.admin-action--approve {
  color: var(--color-success);
}

.admin-action--approve:hover {
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
}

.admin-action--reject {
  color: var(--color-error);
}

.admin-action--reject:hover {
  color: #DC2626;
  background: rgba(239, 68, 68, 0.1);
}

.admin-action--edit {
  color: var(--color-warning);
}

.admin-action--edit:hover {
  color: #D97706;
  background: rgba(245, 158, 11, 0.1);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--spacing-12) var(--spacing-6);
}

.empty-state__icon {
  font-size: var(--font-size-5xl);
  color: var(--color-gray-300);
  margin-bottom: var(--spacing-4);
}

.empty-state__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-2);
}

.empty-state__description {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-6);
}

.empty-state__action {
  margin-top: var(--spacing-4);
}

/* Page wrapper — vertical padding used by CRM pages */
.admin-page {
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
}

/* Narrow, centered admin section (e.g. Stripe Connect onboarding/status cards) */
.admin-section--narrow {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.admin-section--narrow-spaced {
  max-width: 600px;
  margin: var(--spacing-4) auto 0;
}

.icon-stripe-brand {
  color: #635bff;
}

.icon-warning {
  color: var(--color-warning);
}

/* Page Header */
.admin-page-header {
  margin-bottom: var(--spacing-8);
  padding-bottom: var(--spacing-6);
  border-bottom: var(--border-width-2) solid var(--border-color);
}

.admin-page-header__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-2);
}

.admin-page-header__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
}

/* Details Grid */
.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-6);
  margin: var(--spacing-6) 0;
}

.detail-item {
  padding: var(--spacing-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.detail-item__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-2);
}

.detail-item__value {
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  font-weight: var(--font-weight-medium);
}

/* Booking Filter Tabs */
.booking-filter-tabs {
  display: flex;
  gap: var(--spacing-2);
}

.booking-filter-tab {
  display: inline-block;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.booking-filter-tab:hover {
  color: var(--color-primary);
  background: rgba(255, 107, 0, 0.1);
}

.booking-filter-tab--active {
  color: var(--color-white);
  background: var(--color-primary);
}

.booking-filter-tab--active:hover {
  color: var(--color-white);
  background: var(--color-primary-dark);
}

/* Table Row Highlight for Today */
.admin-table__row--today {
  background: rgba(16, 185, 129, 0.05);
}

.admin-table__row--today:hover {
  background: rgba(16, 185, 129, 0.1);
}

/* Admin Action - Danger */
.admin-action--danger {
  color: var(--color-error);
}

.admin-action--danger:hover {
  color: #DC2626;
  background: rgba(239, 68, 68, 0.1);
}

/* Booking Detail Layout */
.booking-detail-layout {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

/* Booking Actions */
.booking-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.booking-actions__note {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.booking-actions__note i {
  color: var(--color-info);
}

/* Booking Actions Warning */
.booking-actions__warning {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--color-warning-50);
  border-radius: var(--radius-md);
  color: var(--color-warning-700);
}

.booking-actions__warning i {
  flex-shrink: 0;
  font-size: var(--font-size-lg);
}

.booking-actions__warning strong {
  display: block;
  margin-bottom: var(--spacing-1);
}

.booking-actions__warning p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* Admin page header with an actions block on the right. Only flex when
   actions are present — on plain headers the h1/p would become the flex
   children and render side by side, squeezing the title. */
.admin-page-header:has(.admin-page-header__actions) {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* ===========================================
   Customer Booking Cards
   =========================================== */

.booking-cards {
  display: grid;
  gap: var(--spacing-4);
}

.booking-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.booking-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}

.booking-card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-white);
}

.booking-card__day {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.booking-card__month {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.booking-card__info {
  flex: 1;
}

.booking-card__time {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.booking-card__duration {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.booking-card__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-4);
}

.booking-card__instructor {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-text-secondary);
}

.booking-card__instructor i {
  color: var(--color-gray-400);
}

.booking-card__price {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.booking-card__footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-top: 1px solid var(--color-gray-200);
  background: var(--color-white);
}

.booking-card__cancel-note {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.booking-card__cancel-note i {
  color: var(--color-gray-400);
}

/* Responsive booking cards */
@media (min-width: 640px) {
  .booking-cards {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }
}

/* ===========================================
   Star Rating Component
   =========================================== */

.star-rating {
  display: flex;
  gap: var(--spacing-2);
}

.star-rating__star {
  background: none;
  border: none;
  padding: var(--spacing-1);
  cursor: pointer;
  font-size: var(--font-size-2xl);
  transition: transform 0.1s ease;
}

.star-rating__star:hover {
  transform: scale(1.2);
}

.star-rating__star i {
  transition: color 0.1s ease;
}

/* ===========================================
   Review Display
   =========================================== */

.review-display {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.review-display__rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.review-display__rating i {
  font-size: var(--font-size-xl);
}

.review-display__rating-text {
  margin-left: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.review-display__comment {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text-primary);
}

.review-display__comment p {
  margin: 0;
}

.review-display__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.review-display__meta span:not(:last-child)::after {
  content: " · ";
}

.review-display__response {
  margin-top: var(--spacing-4);
  padding: var(--spacing-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
}

.review-display__response-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.review-display__response-header i {
  color: var(--color-primary);
}

.review-display__response p {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.review-display__response-date {
  display: block;
  margin-top: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Review Page Layout */
.review-page {
  max-width: 600px;
}

/* Calendar Sync Styles */
.calendar-url-box {
  display: flex;
  gap: var(--spacing-2);
}

.calendar-url-box + .calendar-url-box {
  margin-top: var(--spacing-3);
}

.calendar-url-input {
  flex: 1;
  font-family: monospace;
  font-size: var(--font-size-sm);
  background-color: var(--color-gray-50);
}

.calendar-instructions {
  padding-top: var(--spacing-6);
  border-top: var(--border-width) solid var(--border-color);
}

.calendar-app-cards {
  display: grid;
  gap: var(--spacing-4);
}

.calendar-app-card {
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--border-color);
}

.calendar-app-card__icon {
  font-size: var(--font-size-2xl);
  color: var(--color-gray-600);
  width: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--spacing-1);
}

.calendar-app-card__content {
  flex: 1;
}

.calendar-app-card__content strong {
  display: block;
  margin-bottom: var(--spacing-2);
  color: var(--color-secondary);
}

.calendar-steps {
  margin: 0;
  padding-left: var(--spacing-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.calendar-security-notice {
  padding-top: var(--spacing-4);
  border-top: var(--border-width) solid var(--border-color);
}

.calendar-regenerate {
  margin-top: var(--spacing-4);
}

.sync-features {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.sync-feature {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.sync-feature i {
  color: var(--color-success);
}

/* Reschedule Layout */
.reschedule-layout {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.policy-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.policy-info i {
  margin-right: var(--spacing-2);
  color: var(--color-info);
}

/* Booking actions buttons row */
.booking-actions__buttons {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}

/* ========================================
   Booking Calendar View
   ======================================== */

/* Calendar Navigation */
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
}

/* Impersonation Banner */
.impersonation-banner {
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  color: var(--color-white);
  padding: var(--spacing-3) 0;
  position: relative;
  z-index: 1001;
}

.impersonation-banner__content {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--spacing-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.impersonation-banner__message {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.impersonation-banner__message i {
  font-size: var(--font-size-lg);
}

.impersonation-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.impersonation-banner__stop-btn {
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  border: var(--border-width) solid rgba(255, 255, 255, 0.4);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-family-heading);
}

.impersonation-banner__stop-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.impersonation-banner__admin-link {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-size-sm);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.impersonation-banner__admin-link:hover {
  color: var(--color-white);
}

/* Impersonate action button in admin tables */
.admin-action--impersonate {
  color: #7C3AED;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.admin-action--impersonate:hover {
  color: #6D28D9;
  background: rgba(124, 58, 237, 0.1);
}

/* Admin page header actions */
.admin-page-header__actions {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-6);
  padding: var(--spacing-4) var(--spacing-6);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.calendar-nav__controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.calendar-nav__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin: 0;
}

.calendar-nav__stats {
  display: flex;
  gap: var(--spacing-6);
}

.calendar-nav__stat {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
}

.calendar-nav__stat i {
  color: var(--color-primary);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-lg);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background: var(--color-gray-200);
  color: var(--color-gray-900);
}

/* Weekly Calendar Grid */
.week-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
}

.week-calendar__day {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  min-height: 200px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.week-calendar__day:hover {
  box-shadow: var(--shadow-md);
}

.week-calendar__day--today {
  box-shadow: 0 0 0 2px var(--color-primary);
}

.week-calendar__day--past {
  opacity: 0.7;
}

.week-calendar__day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-3);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-100);
}

.week-calendar__day-name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.week-calendar__day-date {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  line-height: 1.2;
}

.week-calendar__day-date--today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
}

.week-calendar__day-content {
  padding: var(--spacing-2);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.week-calendar__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8) var(--spacing-4);
  text-align: center;
}

/* Calendar Booking Cards */
.calendar-booking {
  display: block;
  padding: var(--spacing-3);
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}

.calendar-booking:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.calendar-booking--completed {
  background: var(--color-success);
}

.calendar-booking--cancelled {
  background: var(--color-gray-300);
  color: var(--color-gray-600);
  text-decoration: line-through;
  opacity: 0.7;
}

.calendar-booking--cancelled:hover {
  opacity: 1;
}

/* Cancelled bookings in the list table get the same muted treatment */
.booking-row--cancelled {
  color: var(--color-gray-500);
}

.booking-row--cancelled .booking-date,
.booking-row--cancelled .booking-time {
  text-decoration: line-through;
}

/* Cancelled-booking values on the show page (time, earnings) */
.booking-detail__value--cancelled {
  text-decoration: line-through;
  color: var(--color-gray-500);
}

.calendar-booking__time {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  opacity: 0.9;
  margin-bottom: var(--spacing-1);
}

.calendar-booking__details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-2);
}

.calendar-booking__customer {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-booking__duration {
  font-size: var(--font-size-xs);
  opacity: 0.8;
  flex-shrink: 0;
}

.calendar-booking__badge {
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-2);
  font-size: var(--font-size-xs);
}

/* Calendar Legend */
.calendar-legend {
  display: flex;
  justify-content: center;
  gap: var(--spacing-8);
  padding: var(--spacing-4);
}

.calendar-legend__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.calendar-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
}

.calendar-legend__dot--confirmed {
  background: var(--color-primary);
}

.calendar-legend__dot--completed {
  background: var(--color-success);
}

/* Mobile Responsive Calendar */
@media (max-width: 1024px) {
  .week-calendar {
    grid-template-columns: repeat(4, 1fr);
  }

  .week-calendar__day:nth-child(n+5) {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .calendar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
  }

  .calendar-nav__controls {
    justify-content: center;
  }

  .calendar-nav__title {
    text-align: center;
    font-size: var(--font-size-lg);
  }

  .calendar-nav__stats {
    justify-content: center;
  }

  /* Switch to vertical list on mobile */
  .week-calendar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
  }

  .week-calendar__day {
    min-height: auto;
  }

  .week-calendar__day-header {
    flex-direction: row;
    justify-content: space-between;
    padding: var(--spacing-3) var(--spacing-4);
  }

  .week-calendar__day-date--today {
    width: 32px;
    height: 32px;
  }

  .week-calendar__day-content {
    padding: var(--spacing-3);
  }

  .week-calendar__empty {
    padding: var(--spacing-4);
  }

  /* Horizontal scroll for bookings on mobile */
  .week-calendar__day-content {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .week-calendar__day-content::-webkit-scrollbar {
    display: none;
  }

  .calendar-booking {
    min-width: 140px;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .admin-page-header__actions {
    display: none;
  }

  .calendar-nav__stats {
    flex-direction: column;
    gap: var(--spacing-2);
    align-items: center;
  }
}

/* Day-detail popup (instructor bookings calendar) */
.week-calendar__day--clickable {
  cursor: pointer;
}

.day-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: none;
  border-top: 6px solid var(--color-primary);
  border-radius: 8px;
  padding: 0;
  max-width: 480px;
  width: calc(100% - var(--spacing-8));
  max-height: 90vh;
  overflow-y: auto;
  background: white;
  color: var(--color-text);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  outline: none;
}

.day-popup::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.day-popup__body {
  padding: var(--spacing-6);
}

.day-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-200);
}

.day-popup__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0;
}

.day-popup__close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-gray-500);
  padding: var(--spacing-1) var(--spacing-2);
  transition: color 0.2s;
}

.day-popup__close:hover {
  color: var(--color-gray-700);
}

.day-popup__section {
  margin-top: var(--spacing-5);
}

.day-popup__section:first-of-type {
  margin-top: 0;
}

.day-popup__section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500);
  margin: 0 0 var(--spacing-2) 0;
}

.day-popup__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.day-popup__list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-gray-50);
  border-radius: 6px;
  font-size: 14px;
  color: var(--color-gray-700);
}

.day-popup__empty {
  color: var(--color-gray-500);
  font-style: italic;
  margin: 0;
  font-size: 14px;
}

.day-popup__booking {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  text-decoration: none;
  color: inherit;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: 6px;
  border: 1px solid var(--color-gray-200);
  background: white;
  flex: 1;
  transition: border-color 0.15s, background 0.15s;
}

.day-popup__booking:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
}

.day-popup__list li:has(.day-popup__booking) {
  background: transparent;
  padding: 0;
}

.day-popup__booking-time {
  font-weight: 500;
  color: var(--color-gray-900);
  white-space: nowrap;
}

.day-popup__booking-name {
  flex: 1;
  color: var(--color-gray-700);
}

.day-popup__event-source {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  padding: 2px var(--spacing-2);
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.day-popup__loading,
.day-popup__error {
  text-align: center;
  color: var(--color-gray-500);
  padding: var(--spacing-8);
  margin: 0;
}

/* ─── CRM Customers page ─────────────────────────────────────────────── */

.crm-page-container {
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
}

.crm-invite-form {
  max-width: 480px;
}
/* Admin Provider Edit Page Styles */

/* Page Layout */
.admin-provider-page {
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
}

.admin-provider-back {
  margin-bottom: var(--spacing-6);
}

/* Provider Header */
.provider-header {
  margin-bottom: var(--spacing-4);
}

.provider-header__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-2);
}

.provider-header__badges {
  display: flex;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-2);
  flex-wrap: wrap;
}

.provider-header__slug {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Section Spacing */
.admin-section--compact {
  margin-bottom: var(--spacing-6);
}

/* Two Column Grid */
.grid-2-cols {
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

/* Section Headings */
.section-heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-3);
}

.section-heading--with-icon {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.section-heading__icon {
  color: var(--color-gray-500);
}

/* Bio Section */
.bio-section {
  margin-bottom: var(--spacing-6);
}

.bio-text {
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
  white-space: pre-wrap;
}

/* Alert Boxes */
.alert-box {
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.alert-box--success {
  background: rgba(16, 185, 129, 0.1);
  border: var(--border-width) solid #10B981;
}

.alert-box--error {
  background: #FEE2E2;
  border: var(--border-width) solid #EF4444;
}

.alert-box--info {
  background: rgba(37, 99, 235, 0.1);
  border: var(--border-width) solid #2563EB;
}

.alert-box--warning {
  background: #FFF8F0;
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.alert-box__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-2);
}

.alert-box__text {
  color: var(--color-gray-700);
  margin-top: var(--spacing-1);
}

.alert-box__text--bold {
  color: var(--color-gray-700);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.5;
}

.alert-box__text--normal {
  color: var(--color-gray-700);
  margin: 8px 0 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

/* Email Warning */
.email-warning-btn {
  margin-top: 8px;
  padding: 8px 16px;
  font-size: var(--font-size-sm);
}

/* Read-only Information Section */
.readonly-info-section {
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-8);
  padding: var(--spacing-6);
  background: var(--color-gray-50, #f9fafb);
  border-radius: var(--radius-lg);
}

.readonly-info-section .details-grid {
  gap: var(--spacing-3);
}

/* Vehicle Section */
.vehicle-info {
  margin-bottom: var(--spacing-4);
}

.vehicle-info__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.vehicle-info__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-top: var(--spacing-1);
}

.vehicle-image-container {
  margin-top: var(--spacing-3);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border-width) solid var(--border-color);
}

.vehicle-image {
  width: 100%;
  max-height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Vehicle Upload Section */
.vehicle-upload-box {
  margin-top: var(--spacing-3);
  padding: var(--spacing-3);
  background: white;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
}

.vehicle-upload-box__content {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--spacing-3);
}

.vehicle-upload-box__main {
  flex: 1;
}

.vehicle-upload-label {
  display: inline-block;
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transition: opacity 0.2s;
}

.vehicle-upload-label:hover {
  opacity: 0.9;
}

.vehicle-upload-label svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--spacing-1);
}

.vehicle-upload-filename {
  display: none;
  margin-top: var(--spacing-2);
  padding: var(--spacing-2);
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  font-weight: var(--font-weight-medium);
}

.vehicle-upload-help {
  display: block;
  margin-top: var(--spacing-2);
  color: var(--color-gray-600);
  font-size: var(--font-size-xs);
}

.vehicle-upload-remove {
  text-align: right;
}

.vehicle-upload-remove__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
  justify-content: flex-end;
}

.vehicle-upload-remove__checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.vehicle-upload-remove__text {
  color: var(--color-error);
}

/* Image Preview Section */
.image-preview-section {
  margin-top: var(--spacing-6);
  padding: var(--spacing-6);
  background: var(--color-gray-50, #f9fafb);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--border-color);
}

.image-preview-section__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-4);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.image-preview-section__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-4);
}

.image-preview-section__content {
  max-width: 350px;
  margin: 0 auto;
}

.image-preview-section__subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-2);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.image-preview-section__subtitle-link {
  font-size: var(--font-size-xs);
  font-weight: normal;
}

.image-preview-card {
  background: white;
  padding: var(--spacing-3);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-color);
}

.image-preview-card__inner {
  width: 280px;
  margin: 0 auto;
}

/* Additional Vehicles */
.additional-vehicles-divider {
  margin: var(--spacing-3) 0;
  border: none;
  border-top: var(--border-width) solid var(--border-color);
}

.additional-vehicles-list {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-top: var(--spacing-3);
}

.additional-vehicles-list__item {
  margin-top: var(--spacing-2);
}

.no-vehicles-text {
  color: var(--color-gray-500);
  font-style: italic;
  font-size: var(--font-size-sm);
}

/* Verification Section */
.verification-section {
  background: white;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.verification-section__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-2);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.verification-section__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-6);
}

.verification-section__grid {
  gap: var(--spacing-6);
}

/* Verification Card */
.verification-card {
  background: var(--color-gray-50, #f9fafb);
  padding: var(--spacing-5);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-color);
}

.verification-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-2);
  border-bottom: 2px solid var(--color-primary);
}

.verification-card__fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.verification-card .form-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.verification-card .form-control {
  border: 2px solid var(--border-color);
  font-size: var(--font-size-base);
}

/* Pass Rate Field */
.pass-rate-field-wrapper {
  position: relative;
}

.pass-rate-field {
  border: 2px solid var(--border-color);
  font-size: var(--font-size-base);
  min-width: 200px;
  max-width: 300px;
}

.pass-rate-clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--color-gray-400);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pass-rate-confirm-box {
  padding: var(--spacing-3);
  background: white;
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-color);
}

.pass-rate-confirm-box__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-2);
}

.pass-rate-confirm-box__link {
  word-break: break-all;
}

.pass-rate-confirm-box__help {
  display: block;
  margin-top: var(--spacing-2);
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
}

/* Document Section */
.document-section {
  margin-top: var(--spacing-8);
  padding-top: var(--spacing-6);
  border-top: 3px solid var(--color-gray-200);
}

.document-section__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-2);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.document-section__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-6);
}

.document-section__grid {
  gap: var(--spacing-4);
}

/* Document Card */
.document-card {
  padding: var(--spacing-4);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
}

.document-card__title {
  margin-bottom: var(--spacing-3);
  font-weight: var(--font-weight-semibold);
}

.document-card__images {
  display: grid;
  gap: var(--spacing-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: var(--spacing-4);
}

.document-image-section__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-2);
}

.document-image-wrapper {
  margin-bottom: var(--spacing-2);
}

.document-image {
  max-width: 200px;
  max-height: 200px;
  border-radius: var(--radius-md);
  -o-object-fit: cover;
     object-fit: cover;
}

.document-pdf-text {
  margin-bottom: var(--spacing-2);
  color: var(--color-gray-700);
}

.document-not-uploaded {
  color: var(--color-gray-500);
  font-style: italic;
}

/* Action Buttons Section */
.action-buttons-section {
  display: flex;
  gap: var(--spacing-3);
  justify-content: flex-end;
  align-items: center;
  padding: var(--spacing-4);
  background: var(--color-gray-50, #f9fafb);
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-6);
}

.btn--min-width-sm {
  min-width: 120px;
}

.btn--min-width-md {
  min-width: 150px;
}

.btn--reject {
  background: var(--color-error);
  border-color: var(--color-error);
  color: white;
}
/* Book with Confidence Section */
.book-confidence__wrapper {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 400px;
}

.book-confidence__image {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  position: relative;
}

.book-confidence__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-2xl);
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(0.94);
  transform-origin: right center;
  position: relative;
}

.book-confidence__image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-accent-yellow);
  opacity: 0.1;
  pointer-events: none;
  border-radius: var(--radius-2xl);
  z-index: 1;
}

/* Clean Card Style */
.book-confidence__card {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-12);
  box-shadow: var(--shadow-lg);
  max-width: 550px;
  max-height: 60vh;
  overflow: auto;
  z-index: 1;
}


.book-confidence__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-6);
}

.book-confidence__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.book-confidence__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
}

.book-confidence__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 2rem;
  color: var(--color-primary);
}

.book-confidence__item span {
  font-size: var(--font-size-base);
  color: var(--color-secondary);
  line-height: var(--line-height-relaxed);
}

/* Recent Articles Section */
.recent-articles .section__title {
  margin-bottom: var(--spacing-2);
}

.recent-articles .section__subtitle {
  margin-bottom: var(--spacing-8);
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-8);
}

.article-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.article-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  border-color: var(--color-primary);
}

.article-card:hover .article-card__image {
  transform: scale(1.05);
}

.article-card:hover .article-card__link {
  color: var(--color-primary);
  gap: var(--spacing-3);
}

.article-card__image-wrapper {
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.article-card__image {
  width: 100%;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.article-card__content {
  padding: var(--spacing-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.article-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-3);
  font-family: var(--font-family-heading);
  line-height: 1.3;
}

.article-card__excerpt {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-4);
  flex: 1;
}

.article-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  transition: all 0.2s ease;
  margin-top: auto;
}

.article-card__link svg {
  transition: transform 0.2s ease;
}

.article-card:hover .article-card__link svg {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 1024px) {
  .book-confidence__wrapper {
    flex-direction: column;
    min-height: auto;
  }

  .book-confidence__image {
    max-width: 100%;
    order: 1;
  }

  .book-confidence__card {
    position: relative;
    top: auto;
    transform: none;
    max-width: 100%;
    margin-top: calc(-1 * var(--spacing-12));
    margin-left: var(--spacing-4);
    margin-right: var(--spacing-4);
    order: 2;
  }

  .articles-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .book-confidence__card {
    padding: var(--spacing-6);
  }

  .book-confidence__title {
    font-size: var(--font-size-2xl);
  }
}
.instructors-carousel {
  position: relative;
}

/* Full width carousel */
.instructors-carousel--fullwidth {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
}

.instructors-carousel__track {
  overflow-x: scroll;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* margin-bottom: var(--spacing-6); */
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-12);
}

/* Only enable scroll-snap for non-fullwidth carousels */
.instructors-carousel:not(.instructors-carousel--fullwidth) .instructors-carousel__track {
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--spacing-6);
  scroll-padding-right: var(--spacing-6);
}

/* Smoother scrolling animation for manual scroll only */
.instructors-carousel:not(.instructors-carousel--fullwidth) .instructors-carousel__track {
  scroll-behavior: smooth;
}

.instructors-carousel__track::-webkit-scrollbar {
  display: none;
}

.instructors-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-5);
  width: -moz-max-content;
  width: max-content;
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}

.instructors-grid .instructor-card {
  flex: 0 0 280px;
  min-width: 280px;
}

.instructor-card {
  scroll-snap-align: start;
}

/* Snap every 4th card for smooth page-like scrolling */
.instructor-card:nth-child(4n+1) {
  scroll-snap-align: start;
}

@media (max-width: 1024px) {
  .instructors-grid {
    gap: var(--spacing-6);
  }

  .instructors-grid .instructor-card {
    flex: 0 0 250px;
    min-width: 250px;
  }
}

@media (max-width: 768px) {
  .instructors-grid {
    gap: var(--spacing-4);
  }

  .instructors-grid .instructor-card {
    flex: 0 0 280px;
    min-width: 280px;
  }
}

.carousel-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-3);
  pointer-events: none;
  z-index: 10;
  padding: 0 var(--spacing-4);
}

.carousel-arrow {
  border-radius: var(--radius-full);
  cursor: pointer;
  width: 64px;
  height: 64px;
  color: var(--color-primary);
  /* Fallback for browsers without backdrop-filter support */
  background-color: rgba(255, 255, 255, 0.95);
  justify-content: center;
  align-items: center;
  transition: background 0.2s ease;
  display: flex;
  border: 1px solid rgba(221, 221, 221, 0.6);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
}

/* Glass effect for supporting browsers */
@supports (backdrop-filter: blur(1px)) {
  .carousel-arrow {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

.carousel-arrow:hover {
  background: var(--color-white);
}

.carousel-arrow svg {
  width: 32px;
  height: 32px;
  stroke-width: 4.5;
}

@media (max-width: 768px) {
  .carousel-controls {
    display: none;
  }

  .instructors-section {
    padding: var(--spacing-12) 0 var(--spacing-4);
  }

  .instructors-carousel {
    margin-right: calc(-1 * var(--spacing-6));
  }

  .instructors-carousel__track {
    padding-right: var(--spacing-4);
  }
}
/* Directories Section */
.directories-section .directories-section__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-8);
}

.directories-section .directories-grid {
  --column-count: 4;
  display: grid;
  grid-template-columns: repeat(var(--column-count), 1fr);
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-10);
}

.directories-section .directories-column {
  display: flex;
  flex-direction: column;
}

.directories-section .directories-column__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-4);
}

/* Links inside columns stay vertical */
.directories-section .directories-column .directories-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* Standalone links grid (directory suburb page) */
.directories-section > .container > .directories-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-2) var(--spacing-6);
}

a.directories-link {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a.directories-link:hover {
  color: var(--color-primary);
}

/* CTA Row */
.directories-section .directories-cta {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
  padding-top: var(--spacing-8);
}

.directories-section .directories-cta__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.directories-section .directories-cta__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0;
}

.directories-section .directories-cta__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .directories-section .directories-grid {
    grid-template-columns: repeat(min(2, var(--column-count)), 1fr);
  }

  .directories-section > .container > .directories-links {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .directories-section > .container > .directories-links {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2) var(--spacing-4);
  }

  .directories-section .directories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3);
  }

  .directories-section .directories-column {
    min-width: 0;
  }

  .directories-section .directories-column__title {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-3);
  }

  a.directories-link {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
    max-width: 100%;
  }

  .directories-section .directories-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4);
  }
}
/* ===========================================
   DIRECTORY PAGES - Modern Clean Design
   Airbnb-inspired UI/UX with DriveBuddy branding
   =========================================== */

/* ===========================================
   HERO SECTION - Minimal & Elegant
   =========================================== */
.directory-hero-section {
  padding: var(--spacing-12) 0 var(--spacing-3);
  background: var(--color-white);
}

.directory-hero__breadcrumbs {
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-6);
  color: var(--color-gray-500);
}

.directory-hero__breadcrumbs a {
  color: var(--color-gray-600);
  text-decoration: none;
  transition: color 0.15s;
}

.directory-hero__breadcrumbs a:hover {
  color: var(--color-secondary);
}

.directory-hero__breadcrumbs span {
  color: var(--color-secondary);
  font-weight: var(--font-weight-medium);
}

.directory-hero__wrapper {
  position: relative;
}

.directory-hero__layout {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}

/* Search Card - Compact white card with premium shadow */
.directory-hero__card {
  background: #ffffff;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.15), 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
  margin-right: -80px;
  width: 575px;
  flex-shrink: 0;
}

.directory-hero__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  letter-spacing: -0.05em;
  line-height: 1.1;
  margin-bottom: var(--spacing-2);
  color: var(--color-secondary);
}

.directory-hero__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-gray-500);
  max-width: 560px;
  line-height: 1.6;
  margin-bottom: 18px;
}

/* Satellite "Also serving" links in the hero: without this they inherit the
   subtitle's grey and no underline — indistinguishable from plain text. */
.directory-hero__also-serving a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.directory-hero__also-serving a:hover {
  color: var(--color-primary);
}


.directory-hero__search {
  margin-bottom: 0;
}

.directory-hero__search-label {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-3);
  letter-spacing: -0.01em;
}

.directory-hero__search-form {
  display: flex;
  gap: var(--spacing-3);
  align-items: stretch;
}

.directory-hero__search-form .suburb-autocomplete {
  flex: 1;
}

.directory-hero__search-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  white-space: nowrap;
}

.directory-hero__search-input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  font-size: var(--font-size-base);
  color: var(--color-secondary);
  background: var(--color-gray-50);
  transition: all 0.2s;
}

.directory-hero__search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.1);
}

.directory-hero__search-input::-moz-placeholder {
  color: var(--color-gray-500);
}

.directory-hero__search-input::placeholder {
  color: var(--color-gray-500);
}

/* Suburb Autocomplete Dropdown */
.suburb-autocomplete {
  position: relative;
  width: 100%;
}

.suburb-autocomplete__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  margin-top: var(--spacing-2);
  max-height: 280px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}

.suburb-autocomplete__results--visible {
  display: block;
}

.suburb-autocomplete__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
  font-size: var(--font-size-base);
}

.suburb-autocomplete__item:first-child {
  border-radius: 12px 12px 0 0;
}

.suburb-autocomplete__item:last-child {
  border-radius: 0 0 12px 12px;
}

.suburb-autocomplete__item:only-child {
  border-radius: 12px;
}

.suburb-autocomplete__item:hover,
.suburb-autocomplete__item--active {
  background: var(--color-gray-50);
}

.suburb-autocomplete__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.suburb-autocomplete__name {
  color: var(--color-secondary);
  font-weight: var(--font-weight-medium);
}

.suburb-autocomplete__provider-count {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.suburb-autocomplete__provider-count--empty {
  color: var(--color-gray-300);
  font-style: italic;
}

.suburb-autocomplete__state {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.suburb-autocomplete__item--no-providers {
  opacity: 0.7;
}

.suburb-autocomplete__item--no-providers .suburb-autocomplete__name {
  color: var(--color-gray-500);
}

.suburb-autocomplete__empty {
  padding: var(--spacing-4);
  text-align: center;
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

/* Hero Image - Extends to right edge */
.directory-hero__image {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  flex: 1;
  height: 480px;
  min-height: 480px;
  background: var(--color-gray-100);
}

.directory-hero__img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center right;
     object-position: center right;
}

@media (max-width: 1024px) {
  .directory-hero__card {
    margin-right: -40px;
    padding: 24px 20px;
    max-width: 340px;
    min-width: 300px;
  }

  .directory-hero__image {
    height: 360px;
    max-width: 550px;
  }
}

@media (max-width: 768px) {
  .directory-hero-section {
    padding: var(--spacing-4) 0;
  }

  .directory-hero__layout {
    flex-direction: column;
    gap: 0;
  }

  .directory-hero__image {
    order: 1;
    border-radius: 12px;
    margin-bottom: -40px;
    height: 240px;
    min-height: 240px;
    max-width: 100%;
    width: 100%;
  }

  .directory-hero__img {
    height: 100%;
    -o-object-position: center;
       object-position: center;
  }

  .directory-hero__card {
    order: 2;
    margin: 0 16px;
    margin-right: 16px;
    padding: 24px;
    position: relative;
    z-index: 10;
    max-width: none;
    min-width: auto;
    width: calc(100% - 6px);
  }

  .directory-hero__card {
    text-align: center;
  }

  .directory-hero__title {
    font-size: var(--font-size-3xl);
  }

  .directory-hero__subtitle {
    margin-bottom: var(--spacing-5);
  }

  .directory-hero__search-label {
    text-align: left;
  }

  .directory-hero__search-form {
    flex-direction: column;
  }

  .directory-hero__search-btn {
    justify-content: center;
  }
}

/* ===========================================
   STATS SECTION - Card-based Design
   =========================================== */
.directory-stats {
  background: var(--color-white);
  padding: var(--spacing-12) 0;
}

.directory-stats__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-6);
  letter-spacing: -0.02em;
}

/* Count-proof: the fourth card only exists when there's rating, coverage or
   language data, so a fixed 4-column grid left a visible empty cell on every
   non-metro suburb without DriveBuddy reviews. Flex basis lets 2, 3 or 4 cards
   each fill the row evenly. */
.directory-stats__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.directory-stats__card {
  flex: 1 1 200px;
  padding: var(--spacing-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  transition: all 0.2s;
}

.directory-stats__card:hover {
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-sm);
}

.directory-stats__icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--spacing-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.directory-stats__icon i {
  font-size: var(--font-size-xl);
  color: var(--color-gray-500);
}

.directory-stats__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.directory-stats__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  /* Same grey as the hint below: label and hint are both supporting text,
     so the only tonal step in the card is up to the navy figure. */
  color: var(--color-gray-500);
  line-height: 1.3;
}

.directory-stats__value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  /* gray-700, not the brand navy: still clearly the payload of the card, but
     softer against the grey label and hint either side of it. Not gray-500 —
     matching the label flattens the card and the figure stops reading as the
     point of it. 10.31:1 on white. */
  color: var(--color-gray-700);
  line-height: 1;
  letter-spacing: -0.02em;
}

.directory-stats__hint {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  line-height: 1.3;
  margin-top: var(--spacing-1);
}

@media (max-width: 768px) {
  .directory-stats {
    padding: var(--spacing-8) 0;
  }

  .directory-stats__card {
    /* two per row at this width */
    flex: 1 1 40%;
    padding: var(--spacing-4);
  }

  .directory-stats__value {
    font-size: var(--font-size-2xl);
  }
}

/* ===========================================
   DRIVESCORE SECTION - Clean Layout
   =========================================== */
.directory-drivescore {
  background: var(--color-white);
  padding: var(--spacing-16) 0;
  border-top: 1px solid var(--color-gray-100);
}

.directory-drivescore__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-3);
  letter-spacing: -0.02em;
  text-align: center;
}

.directory-drivescore__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-gray-500);
  max-width: 720px;
  margin: 0 auto var(--spacing-8);
  line-height: 1.6;
  text-align: center;
}

/* Two-column layout: Stats left, Chart right */
.directory-drivescore__layout {
  display: grid;
  grid-template-columns: minmax(340px, 480px) 1fr;
  gap: var(--spacing-8);
  align-items: start;
  margin-bottom: var(--spacing-8);
}

/* Stats boxes - 2x2 grid style */
.directory-drivescore__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
}

.directory-drivescore__stat-box {
  padding: var(--spacing-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  transition: all 0.2s;
}

.directory-drivescore__stat-box:hover {
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-sm);
}

.directory-drivescore__stat-box--highlight {
  background: var(--color-gray-50);
  border-color: var(--color-primary-text);
}

.directory-drivescore__stat-box--highlight .directory-drivescore__stat-icon i {
  color: var(--color-primary);
}

.directory-drivescore__stat-icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--spacing-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.directory-drivescore__stat-icon i {
  font-size: var(--font-size-xl);
  color: var(--color-gray-500);
}

.directory-drivescore__stat-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.directory-drivescore__stat-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  /* Same grey as the hint below: label and hint are both supporting text,
     so the only tonal step in the card is up to the navy figure. */
  color: var(--color-gray-500);
  line-height: 1.3;
}

.directory-drivescore__stat-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  /* gray-700, not the brand navy: still clearly the payload of the card, but
     softer against the grey label and hint either side of it. Not gray-500 —
     matching the label flattens the card and the figure stops reading as the
     point of it. 10.31:1 on white. */
  color: var(--color-gray-700);
  line-height: 1;
  letter-spacing: -0.02em;
}

.directory-drivescore__stat-hint {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  line-height: 1.3;
  margin-top: var(--spacing-1);
}

/* Chart container */
.directory-drivescore__chart-container {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-6);
  height: 100%;
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

.directory-drivescore__chart-wrapper {
  flex: 1;
  min-height: 280px;
  position: relative;
}

.directory-drivescore__chart {
  width: 100%;
  height: 100%;
}

/* Explanation box */
.directory-drivescore__explainer {
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-gray-100);
}

.directory-drivescore__explainer p {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  line-height: 1.7;
  margin: 0;
}

.directory-drivescore__explainer strong {
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
}

/* Census attribution — names the exact ABS geography the figures come from */
.directory-drivescore__source {
  margin-top: var(--spacing-3);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

@media (max-width: 900px) {
  .directory-drivescore__layout {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
  }

  .directory-drivescore__stats {
    order: 1;
  }

  .directory-drivescore__chart-container {
    order: 2;
    min-height: 280px;
  }
}

@media (max-width: 640px) {
  .directory-drivescore {
    padding: var(--spacing-12) 0;
  }

  .directory-drivescore__stats {
    grid-template-columns: 1fr 1fr;
  }

  .directory-drivescore__stat-box {
    padding: var(--spacing-4);
  }

  .directory-drivescore__stat-value {
    font-size: var(--font-size-2xl);
  }

  .directory-drivescore__chart-wrapper {
    min-height: 220px;
  }

  .directory-drivescore__chart-container {
    min-height: 260px;
  }
}

/* ===========================================
   HOW IT WORKS - Uses shared step-item styles
   =========================================== */
.directory-how-it-works {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-gray-50) 100%);
  padding: var(--spacing-16) 0;
}

@media (max-width: 768px) {
  .directory-how-it-works {
    padding: var(--spacing-10) 0;
  }
}

/* ===========================================
   INSTRUCTORS SECTION
   =========================================== */
.directory-instructors {
  padding: var(--spacing-16) 0;
  background: var(--color-white);
}

.directory-instructors__intro {
  font-size: var(--font-size-base);
  color: var(--color-gray-500);
  line-height: 1.7;
  margin-bottom: var(--spacing-8);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Instructor Snapshot - inline stats bar */
.directory-instructors__snapshot {
  text-align: center;
  margin-bottom: var(--spacing-8);
}

.directory-instructors__snapshot-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-bottom: var(--spacing-4);
}

.directory-instructors__stat {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: 0 var(--spacing-4);
  border-right: 1px solid var(--color-gray-200);
}

.directory-instructors__stat:last-child {
  border-right: none;
}

.directory-instructors__stat > i {
  color: var(--color-gray-500);
  font-size: var(--font-size-base);
}

.directory-instructors__stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  white-space: nowrap;
}

.directory-instructors__stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  white-space: nowrap;
}

.directory-instructors__stat-badge strong {
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
}

.directory-instructors__snapshot-summary {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  line-height: 1.6;
  text-align: center;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .directory-instructors__snapshot-stats {
    flex-wrap: wrap;
    gap: var(--spacing-2);
  }

  .directory-instructors__stat {
    border-right: none;
    padding: var(--spacing-1) var(--spacing-2);
  }

  /* Transmission takes full row, others share */
  .directory-instructors__stat:first-child {
    flex-basis: 100%;
    justify-content: center;
  }
}

.directory-instructors__footer {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

.directory-instructors__low-supply {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-4) var(--spacing-5);
  margin-bottom: var(--spacing-6);
}

.directory-instructors__low-supply p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.directory-instructors__low-supply a {
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
}

/* Filter Pills - Airbnb Style */
.directory-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-8);
}

/* Mobile: horizontal scroll like cards */
@media (max-width: 640px) {
  .directory-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-right: calc(-50vw + 50%);
    padding-right: var(--spacing-4);
  }

  .directory-filters::-webkit-scrollbar {
    display: none;
  }

  .directory-filter {
    flex-shrink: 0;
  }
}

.directory-filter {
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-full);
  background: var(--color-white);
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-family-heading);
  font-weight: 700;
}

.directory-filter:hover {
  border-color: var(--color-secondary);
}

.directory-filter--active {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

/* Instructors Carousel Wrapper */
.directory-instructors__carousel {
  position: relative;
  margin-bottom: var(--spacing-8);
}

/* Instructors Grid - Horizontal scroll row */
/* Wraps into rows on desktop. As a single scrolling track, a 1248px viewport
   showed 4 of 7 instructors with 942px off-screen — the page's own copy says
   "7 verified instructors" and then hides three of them, and you cannot compare
   a set you cannot see. Below the breakpoint it stays a swipeable track, where
   8 stacked cards would be a very long scroll. */
.directory-instructors__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-6);
  overflow-x: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Padding to allow hover shadows to show */
  padding: var(--spacing-4) var(--spacing-2) var(--spacing-6);
  margin: calc(-1 * var(--spacing-4)) calc(-1 * var(--spacing-2));
}

.directory-instructors__grid::-webkit-scrollbar {
  display: none;
}

/* Instructor cards in directory grid - responsive width to fit 4 cards exactly */
.directory-instructors__grid .instructor-card {
  flex: 0 0 calc((100% - 3 * var(--spacing-6)) / 4);
  min-width: 260px;
}

/* Below this width it goes back to a swipeable single track. */
@media (max-width: 768px) {
  .directory-instructors__grid {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

/* The capped grid. Above the track breakpoint the full set is a wall — 17
   instructors ran 2,194px on the Melbourne page, pushing the cost estimator and
   the local guide three screens down — so the grid shows two rows and a button
   reveals the rest. Cards stay in the DOM: this hides them, it does not drop
   them. instructor_filter_controller removes the class and takes over the
   moment a pill is touched, because past that point "beyond the eighth card"
   has to mean the eighth *match*, not the eighth in source order. */
@media (min-width: 769px) {
  .directory-instructors__grid--capped .instructor-card:nth-child(n+9) {
    display: none;
  }
}

/* Mobile is a swipeable track, where nothing is capped and the button would
   reveal cards that were never hidden. */
.directory-instructors__more {
  display: none;
}

@media (min-width: 769px) {
  .directory-instructors__more {
    display: flex;
    justify-content: center;
    margin: calc(-1 * var(--spacing-4)) 0 var(--spacing-8);
  }
}

/* Position carousel controls for directory grid */
.directory-instructors__carousel .carousel-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  padding: 0;
}

/* Controls are meaningless once the track wraps, so the two disabled arrows
   should not float over the grid. Chained (not descendant) so this beats the
   display:flex above it on specificity rather than relying on source order. */
.directory-instructors__carousel.carousel--no-overflow .carousel-controls {
  display: none;
}

.directory-instructors__carousel .carousel-arrow--left {
  pointer-events: auto;
  margin-left: calc(-32px - var(--spacing-4));
}

.directory-instructors__carousel .carousel-arrow--right {
  pointer-events: auto;
  margin-right: calc(-32px - var(--spacing-4));
}

@media (max-width: 900px) {
  .directory-instructors__grid {
    gap: var(--spacing-5);
  }

  .directory-instructors__carousel .carousel-arrow--left {
    margin-left: -16px;
  }

  .directory-instructors__carousel .carousel-arrow--right {
    margin-right: -16px;
  }
}

/* Mobile: break out of container on right, hide arrows */
@media (max-width: 640px) {
  .directory-instructors__carousel {
    margin-right: calc(-50vw + 50%);
    padding-right: var(--spacing-4);
  }

  .directory-instructors__grid {
    gap: var(--spacing-4);
  }

  .directory-instructors__carousel .carousel-controls {
    display: none;
  }
}


/* ===========================================
   COMBINED CTA SECTION (Licensing + Why Book)
   =========================================== */
.directory-cta-section {
  background: var(--color-secondary);
  padding: var(--spacing-12) 0;
}

.directory-cta-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-12);
  align-items: center;
}

/* Left column - Licensing */
.directory-cta-section__licensing {
  color: var(--color-white);
}

.directory-cta-section__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  color: var(--color-white);
  margin-bottom: var(--spacing-4);
}

.directory-cta-section__text {
  font-size: var(--font-size-base);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin-bottom: var(--spacing-6);
}

.directory-cta-section__hours-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--spacing-4) var(--spacing-6);
}

.directory-cta-section__hours-number {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  color: var(--color-primary-text);
  line-height: 1;
}

.directory-cta-section__hours-text {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

.directory-cta-section__hours-text span {
  display: block;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  font-size: var(--font-size-base);
}

.directory-cta-section__source {
  margin-top: var(--spacing-6);
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.8);
}

.directory-cta-section__source i {
  margin-right: var(--spacing-1);
  font-size: var(--font-size-xs);
}

.directory-cta-section__source a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.directory-cta-section__source a:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* Right column - Features */
.directory-cta-section__features {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-8);
}

.directory-cta-section__subtitle {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-6);
}

.directory-cta-section__feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-5);
}

.directory-cta-section__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
}

.directory-cta-section__feature > i {
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.directory-cta-section__feature strong {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-bottom: 2px;
}

.directory-cta-section__feature span {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

@media (max-width: 1024px) {
  .directory-cta-section__grid {
    gap: var(--spacing-8);
  }

  .directory-cta-section__feature-list {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }
}

@media (max-width: 768px) {
  .directory-cta-section__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
  }

  .directory-cta-section__licensing {
    text-align: center;
  }

  .directory-cta-section__hours-badge {
    justify-content: center;
  }

  .directory-cta-section__feature-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .directory-cta-section__feature-list {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   TRUST/CONFIDENCE SECTION (Index page)
   =========================================== */
.directory-trust-section {
  background: var(--color-gray-50);
}

.directory-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-6);
}

.directory-trust__card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-6);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.directory-trust__icon {
  width: 56px;
  height: 56px;
  background: var(--color-primary-50);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-4);
}

.directory-trust__icon i {
  font-size: var(--font-size-xl);
  color: var(--color-primary);
}

.directory-trust__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-2);
}

.directory-trust__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: var(--line-height-relaxed);
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .directory-trust__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .directory-trust__grid {
    grid-template-columns: 1fr;
  }

  .directory-trust__card {
    display: flex;
    text-align: left;
    gap: var(--spacing-4);
    align-items: flex-start;
  }

  .directory-trust__icon {
    margin: 0;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
  }

  .directory-trust__icon i {
    font-size: var(--font-size-lg);
  }
}

/* ===========================================
   LOCAL INFO SECTION
   =========================================== */
.directory-local-info {
  background: var(--color-white);
  padding: var(--spacing-16) 0;
}

.directory-local-info__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-5);
}

.directory-local-info__item {
  padding: var(--spacing-6);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-gray-200);
}

.directory-local-info__item--full {
  grid-column: 1 / -1;
}

.directory-local-info__heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-3);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.directory-local-info__heading i {
  color: var(--color-primary);
}

.directory-local-info__item p {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  line-height: 1.6;
  margin-bottom: var(--spacing-3);
}

.directory-local-info__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.directory-local-info__list li {
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.directory-local-info__list li:last-child {
  border-bottom: none;
}

@media (max-width: 1024px) {
  .directory-local-info__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .directory-local-info__grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   TEST CENTRES SECTION
   =========================================== */
.directory-test-centres {
  background: var(--color-gray-50);
  padding: var(--spacing-16) 0;
}

.directory-test-centres__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-6);
  margin-top: var(--spacing-8);
}

.directory-test-centres__item {
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-6);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-gray-200);
}

.directory-test-centres__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
}

.directory-test-centres__icon i {
  font-size: var(--font-size-xl);
}

.directory-test-centres__content {
  flex: 1;
}

.directory-test-centres__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-1);
}

.directory-test-centres__address {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-1);
  line-height: 1.4;
}

.directory-test-centres__distance {
  font-size: var(--font-size-sm);
  color: var(--color-primary-text);
  font-weight: var(--font-weight-medium);
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .directory-test-centres__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }
}

/* ===========================================
   BLOG CROSS-LINKS
   =========================================== */
.directory-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-6);
  margin-top: var(--spacing-8);
}

.directory-blog__card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.directory-blog__card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.directory-blog__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.directory-blog__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.directory-blog__content {
  padding: var(--spacing-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.directory-blog__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  margin: 0 0 var(--spacing-2);
  line-height: 1.3;
}

.directory-blog__excerpt {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin: 0 0 var(--spacing-3);
  flex: 1;
}

.directory-blog__meta {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.directory-blog__cta {
  text-align: center;
  margin-top: var(--spacing-8);
}

@media (max-width: 900px) {
  .directory-blog__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }
}

/* ===========================================
   NEARBY SUBURBS
   =========================================== */
.directory-nearby {
  background: var(--color-white);
  padding: var(--spacing-16) 0;
}

/* ===========================================
   STATES & SUBURBS GRIDS
   =========================================== */
.directory-states__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--spacing-4);
}

.directory-state-card {
  display: block;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: all 0.2s;
  overflow: hidden;
}

/* Cards without images get padding directly */
.directory-state-card:not(.directory-state-card--has-image) {
  padding: var(--spacing-6);
}

.directory-state-card:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
}

.directory-state-card:hover .directory-state-card__image img {
  transform: scale(1.05);
}

.directory-state-card__image {
  width: 100%;
  height: 140px;
  overflow: hidden;
}

.directory-state-card__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}

.directory-state-card__content {
  padding: var(--spacing-4) var(--spacing-5);
}

.directory-state-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-1);
}

.directory-state-card__stats {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin: 0;
}

.directory-suburbs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--spacing-4);
}

.directory-suburbs__grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.directory-suburb-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: all 0.15s;
}

.directory-suburb-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-4) var(--spacing-5);
}

.directory-suburb-card:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-sm);
}

/* Capital-city cards carry their skyline image above the row */
.directory-suburb-card__image {
  width: 100%;
  height: 150px;
  overflow: hidden;
}

.directory-suburb-card__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}

.directory-suburb-card:hover .directory-suburb-card__image img {
  transform: scale(1.05);
}

.directory-suburb-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin: 0 0 2px 0;
}

.directory-suburb-card__stats {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin: 0;
}

.directory-suburb-card__arrow {
  color: var(--color-gray-500);
  transition: all 0.15s;
}

.directory-suburb-card:hover .directory-suburb-card__arrow {
  color: var(--color-secondary);
  transform: translateX(3px);
}

/* ===========================================
   EMPTY STATE
   =========================================== */
.directory-empty {
  padding: var(--spacing-12);
  background: var(--color-gray-50);
  border-radius: var(--radius-xl);
  text-align: center;
}

.directory-empty p {
  margin-bottom: var(--spacing-4);
  color: var(--color-gray-600);
}

.directory-nearby-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-2);
}

.directory-nearby-link {
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  color: var(--color-secondary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: all 0.15s;
}

.directory-nearby-link:hover {
  border-color: var(--color-secondary);
}

/* ===========================================
   INDEX HERO (Main directory page)
   =========================================== */
.directory-hero {
  padding: var(--spacing-16) 0;
  background: var(--color-white);
}

.directory-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-4);
  letter-spacing: -0.03em;
}

.directory-hero__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-gray-500);
  max-width: 560px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .directory-hero {
    padding: var(--spacing-10) 0;
  }

  .directory-hero h1 {
    font-size: var(--font-size-3xl);
  }
}

/* ===========================================
   LOGBOOK CALCULATOR (Muval-inspired split tool)
   =========================================== */
.directory-logbook,
.directory-cost-estimator {
  background: #f7f8fa;
}

.logbook {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

/* LEFT — narrative + big live result */
.logbook__heading {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  color: var(--color-secondary);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 12px;
}

.logbook__intro {
  font-size: 16px;
  color: var(--color-gray-500);
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 520px;
}

.logbook__result {
  margin-bottom: 4px;
}

.logbook__result-headline {
  font-size: 18px;
  color: var(--color-secondary);
  font-weight: var(--font-weight-medium);
  margin: 0 0 12px;
}

.logbook__result-num {
  font-size: 44px;
  font-weight: 800;
  color: var(--color-primary-text);
  font-family: var(--font-family-heading);
  letter-spacing: -0.02em;
  line-height: 1;
  vertical-align: -2px;
}

.logbook__bar-wrap {
  position: relative;
  max-width: 520px;
  margin-bottom: 14px;
  padding-top: 16px;
}

.logbook__bar {
  height: 8px;
  background: #e9ebee;
  border-radius: 99px;
  overflow: hidden;
}

/* Car rides the progress track toward the licence (driven by --logbook-progress) */
.logbook__bar-car {
  position: absolute;
  top: 20px;
  left: clamp(2%, calc(var(--logbook-progress, 0) * 1%), 98%);
  transform: translate(-50%, -50%);
  color: var(--color-primary);
  font-size: 26px;
  transition: left 0.45s ease;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18));
}

.logbook__bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff9900, #ffb84d);
  transition: width 0.45s ease;
}

.logbook__result-sub {
  font-size: 14px;
  color: var(--color-gray-500);
  margin: 0 0 14px;
}

.logbook__result-sub strong {
  color: var(--color-secondary);
}

.logbook__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.logbook__chip {
  background: #fff7ec;
  border: 1px solid rgba(255, 153, 0, 0.25);
  color: #b45309;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 99px;
}

.logbook__tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #444;
  margin: 16px 0 0;
}

.logbook__tip i {
  color: var(--color-primary);
  margin-top: 2px;
}

.logbook__note {
  font-size: 13px;
  color: #b45309;
  margin: 12px 0 0;
}

.logbook__disclaimer {
  font-size: 12.5px;
  color: var(--color-gray-500);
  line-height: 1.5;
  margin: 14px 0 0;
  max-width: 520px;
}

/* RIGHT — controls card */
.logbook__card {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.16);
}

.logbook__card-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gray-500);
  margin: 0 0 18px;
}

.logbook__field {
  display: block;
  margin-bottom: 18px;
}

.logbook__field-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 8px;
}

.logbook__slider-val {
  color: var(--color-primary-text);
}

.logbook__input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid #dddddd;
  border-radius: 12px;
  font-size: 15px;
  color: #1f2937;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -moz-appearance: textfield;
}

.logbook__input::-webkit-outer-spin-button,
.logbook__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.logbook__input:hover {
  border-color: #b0b0b0;
}

.logbook__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.15);
}

select.logbook__input {
  cursor: pointer;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23717171' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Range slider with orange handle (Muval-style) */
.logbook__slider {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 99px;
  background: #e9ebee;
  outline: none;
  margin: 10px 0;
}

.logbook__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.logbook__slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.logbook__cta {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 4px;
  padding: 14px 20px;
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  color: var(--color-primary-text);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.logbook__cta:hover {
  background: var(--color-primary);
  color: #fff;
}

@media (max-width: 860px) {
  .logbook {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ===========================================
   WHY CHOOSE US - location-aware reason cards
   =========================================== */
.directory-why {
  background: var(--color-white);
}

.directory-why__head {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto var(--spacing-8);
}

.directory-why__eyebrow {
  display: inline-block;
  background: var(--color-primary-50);
  color: var(--color-warning-700);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  margin: 0 0 var(--spacing-4);
}

/* Size, weight, family and tracking all come from .section__title and the h2
   base, so this heading matches every other section heading on the page. It was
   rendering at 33.6px against their 30px. Only the wrap behaviour is local. */
.directory-why__title {
  text-wrap: balance;
  max-width: 42ch;
  margin-inline: auto;
}

.directory-why__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-gray-500);
  margin: 0;
}

/* ---- Comparison table ---------------------------------------------------
   The recommended column is framed as a card rather than styled as a table
   column, so the eye lands on it before reading a single row. */
.cmp-wrap {
  overflow-x: auto;
  /* Focusable so it can be panned by keyboard; needs a visible ring to match. */
  outline-offset: 4px;
  /* overflow-x:auto resolves overflow-y to auto too, which clipped the badge
     straddling the top border. This is the room it needs to sit outside the
     table without being cut off. */
  padding-top: var(--spacing-3);
}

.cmp-wrap:focus-visible {
  outline: 2px solid var(--color-primary);
}

.cmp {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 720px;
}

.cmp__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.cmp__corner span {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-gray-400);
}

.cmp__corner {
  vertical-align: bottom;
  padding: 0 var(--spacing-4) var(--spacing-4) 0;
  width: 26%;
}

.cmp__head {
  text-align: center;
  vertical-align: bottom;
  padding: var(--spacing-5) var(--spacing-4) var(--spacing-4);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  letter-spacing: -0.01em;
}

.cmp__sub {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-gray-400);
  margin-top: var(--spacing-1);
}

/* The framed column: border on the header and every cell in the column, so the
   frame reads as one continuous card down the table. */
.cmp__head--us {
  position: relative;
  border: 2px solid var(--color-primary);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-white);
  /* Room for the badge, which straddles the top border. */
  padding-top: var(--spacing-10);
}

.cmp__badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-secondary);
  font-family: var(--font-family-primary);
  font-size: 10.5px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px var(--spacing-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.cmp__logo {
  /* Carries the column by itself now the subtitle is gone. */
  height: 34px;
  width: auto;
  display: block;
  margin: 0 auto var(--spacing-1);
}

.cmp__cell--us {
  border-left: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  background: var(--color-gray-50);
}

.cmp tbody th[scope="row"] {
  text-align: left;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) 0;
  border-top: 1px solid var(--border-color);
  vertical-align: top;
}

.cmp tbody td {
  padding: var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  border-top: 1px solid var(--border-color);
  vertical-align: top;
}

/* The mark and the value sit on one flex line so a wrapped value indents past
   the icon instead of running under it. */
.cmp__cell-value {
  display: flex;
  align-items: flex-start;
}

/* The feature name is repeated inside every cell for the mobile card layout.
   On desktop the row header already names it. */
.cmp__cell-feature {
  display: none;
}

.cmp__cell--us .cmp__cell-value {
  color: var(--color-secondary);
  font-weight: var(--font-weight-medium);
}

.cmp__mark {
  width: 1.1em;
  margin-right: var(--spacing-2);
  flex-shrink: 0;
}

.cmp__mark--yes  { color: var(--color-success-700); }
.cmp__mark--warn { color: var(--color-warning-700); }
.cmp__mark--no   { color: var(--color-error-700); }
.cmp__mark--none { display: inline-block; }

.cmp tfoot td {
  padding: var(--spacing-5) var(--spacing-4);
}

.cmp__cta {
  border: 2px solid var(--color-primary);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--color-gray-50);
  text-align: center;
}

.cmp__cta .btn {
  width: 100%;
}

/* ---- The deck: mobile ---------------------------------------------------
   Below this width the same table becomes three cards you swipe through, ours
   first. Placement is explicit so the DOM is untouched: no second markup for
   mobile, no duplicated text, nothing display:none that carries content.
   Stacking the rows instead (the previous approach) ran to 1,818px, dropped the
   badge and the frame, and put the school's answer above ours in all nine rows. */
@media (max-width: 767px) {
  /* No bleed past the container: a card snapped to the left edge should leave
     the previous card fully out of view, or its border hangs in the gutter as a
     stray orange line. The peek comes from the 84% card width instead. */
  .cmp-wrap {
    scroll-snap-type: x mandatory;
  }

  .cmp {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, 84%);
    -moz-column-gap: var(--spacing-3);
         column-gap: var(--spacing-3);
    row-gap: 0;
  }

  /* Table wrappers step out of the way so the cells themselves are the grid
     items and can be placed by column. */
  .cmp thead,
  .cmp tbody,
  .cmp tfoot,
  .cmp tr {
    display: contents;
  }

  /* The label column goes; every cell carries its own feature name. The tfoot
     spacers go too, leaving only the CTA. */
  .cmp__corner,
  .cmp tbody th[scope="row"],
  .cmp tfoot td:not(.cmp__cta) {
    display: none;
  }

  /* Ours first. On a phone the recommended option should not need a swipe. */
  .cmp__head--us,
  .cmp__cell--us { grid-column: 1; }
  .cmp__head--school,
  .cmp__cell--school { grid-column: 2; }
  .cmp__head--self,
  .cmp__cell--self { grid-column: 3; }

  /* One rule per body row, because a grid item needs its row stated and CSS
     cannot count the ERB array. Rows beyond the tenth need another line here. */
  .cmp thead th { grid-row: 1; }
  .cmp tbody tr:nth-child(1) td { grid-row: 2; }
  .cmp tbody tr:nth-child(2) td { grid-row: 3; }
  .cmp tbody tr:nth-child(3) td { grid-row: 4; }
  .cmp tbody tr:nth-child(4) td { grid-row: 5; }
  .cmp tbody tr:nth-child(5) td { grid-row: 6; }
  .cmp tbody tr:nth-child(6) td { grid-row: 7; }
  .cmp tbody tr:nth-child(7) td { grid-row: 8; }
  .cmp tbody tr:nth-child(8) td { grid-row: 9; }
  .cmp tbody tr:nth-child(9) td { grid-row: 10; }
  .cmp tbody tr:nth-child(10) td { grid-row: 11; }
  .cmp tfoot td.cmp__cta { grid-row: 12; }

  /* Each column snaps to the left edge as its own page. */
  .cmp thead th { scroll-snap-align: start; }

  /* --- the card shell: header, body cells and footer share one border --- */
  .cmp__head {
    text-align: left;
    vertical-align: top;
    padding: var(--spacing-4);
    border: var(--border-width) solid var(--border-color);
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--color-white);
    font-size: var(--font-size-base);
  }

  .cmp__head--us {
    border: var(--border-width-2) solid var(--color-primary);
    border-bottom: 0;
    background: var(--color-gray-50);
    /* Room for the badge, which straddles the top border. */
    padding-top: var(--spacing-6);
  }

  /* Left-aligned with the card's text rather than centred on the column. */
  .cmp__badge {
    left: var(--spacing-4);
    transform: none;
  }

  .cmp__logo {
    margin: 0;
    height: 30px;
  }

  .cmp tbody td {
    padding: var(--spacing-3) var(--spacing-4);
    border: 0;
    border-left: var(--border-width) solid var(--border-color);
    border-right: var(--border-width) solid var(--border-color);
    background: var(--color-white);
  }

  .cmp tbody td.cmp__cell--us {
    border-left: var(--border-width-2) solid var(--color-primary);
    border-right: var(--border-width-2) solid var(--color-primary);
    background: var(--color-gray-50);
  }

  /* Dividers separate features inside a card, so the first row has none. */
  .cmp tbody tr:not(:first-child) td {
    border-top: var(--border-width) solid var(--border-color);
  }

  /* The other two cards close on their last value; ours closes on the CTA. */
  .cmp tbody tr:last-child td:not(.cmp__cell--us) {
    border-bottom: var(--border-width) solid var(--border-color);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding-bottom: var(--spacing-4);
  }

  .cmp tfoot td.cmp__cta {
    border: var(--border-width-2) solid var(--color-primary);
    border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: var(--spacing-4);
  }

  .cmp__cell-feature {
    display: block;
    font-size: 10.5px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* gray-500, not 400: this names what the value answers, so it carries
       meaning and has to clear 4.5:1. */
    color: var(--color-gray-500);
    margin-bottom: 2px;
  }
}

/* ---- The deck: swipe affordances ---------------------------------------
   Desktop has three columns side by side and nothing to swipe, so both the
   hint and the dots are mobile-only. */
.cmp-swipe__hint,
.cmp-swipe__nav {
  display: none;
}

@media (max-width: 767px) {
  .cmp-swipe__hint {
    display: block;
    margin: var(--spacing-4) 0 0;
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-gray-500);
  }

  /* Dots appear only once the controller is live: a dot that cannot scroll
     anything is worse than no dot. */
  .cmp-swipe[data-swipe-ready] .cmp-swipe__nav {
    display: flex;
    gap: var(--spacing-2);
    justify-content: center;
    margin-top: var(--spacing-3);
  }

  .cmp-swipe[data-swipe-ready] .cmp-swipe__hint {
    margin-bottom: 0;
  }
}

.cmp-swipe__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-gray-300);
  cursor: pointer;
  transition: width 0.15s, background-color 0.15s;
}

.cmp-swipe__dot[aria-current="true"] {
  width: 22px;
  background: var(--color-primary);
}

.cmp-swipe__dot:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

.directory-why__guides {
  margin: var(--spacing-8) 0 0;
  padding: var(--spacing-5) var(--spacing-6);
  background: var(--color-gray-50);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
}

.directory-why__guides strong {
  display: block;
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-1);
}

.directory-why__guides a {
  color: var(--color-primary-text);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

/* Underline only on interaction — two long underlined phrases inside one
   sentence read as clutter rather than as links. */
.directory-why__guides a:hover,
.directory-why__guides a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 560px) {
  .directory-why__grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   LOCAL GUIDE - generated unique content
   =========================================== */
.directory-guide {
  background: var(--color-white);
}

.directory-guide .section__title {
  text-align: center;
  margin-bottom: var(--spacing-8);
}

.directory-guide__blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-6) var(--spacing-10);
  max-width: 920px;
  margin: 0 auto;
}

.directory-guide__heading {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-3);
}

.directory-guide__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #fff7ec;
  color: var(--color-primary);
  font-size: 16px;
}

.directory-guide__text {
  color: var(--color-gray-600);
  line-height: 1.65;
  font-size: 15px;
  margin: 0 0 var(--spacing-3);
}

.directory-guide__text:last-child {
  margin-bottom: 0;
}

/* Follow-on link under a guide block (state rules live on their own page) */
.directory-guide__link {
  display: inline-block;
  margin-top: var(--spacing-2);
  color: var(--color-primary);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
}

@media (max-width: 720px) {
  .directory-guide__blocks {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
  }
}


/* ===========================================
   EDITORIAL SECTIONS (hub cost & requirements)
   =========================================== */
.directory-editorial .section__title,
.directory-editorial .section__subtitle {
  text-align: center;
}

.directory-editorial .section__subtitle {
  max-width: 620px;
  margin: 0 auto var(--spacing-8);
}

.directory-editorial--alt {
  background: var(--color-gray-50);
}

.directory-editorial__note {
  max-width: 720px;
  margin: var(--spacing-6) auto 0;
  text-align: center;
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

.directory-editorial__note--sources {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.directory-editorial__note a {
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
}

.directory-table-wrap {
  max-width: 980px;
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(35, 47, 62, 0.05);
}

/* Positioned shell around the scrolling wrap: on small screens a right-edge
   fade signals the clipped columns (striped row backgrounds would swallow a
   background-layer shadow, so this overlays instead). */
.directory-table-shell {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
}

/* Pages whose content sits on a left axis (e.g. /victoria-120-hours) keep the
   table on that axis instead of centring it mid-column. */
.directory-table-shell--flush {
  margin: 0;
}

.directory-table-shell .directory-table-wrap {
  max-width: none;
  margin: 0;
}

.directory-table-shell::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 28px;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  background: linear-gradient(to left, rgba(35, 47, 62, 0.16), transparent);
  pointer-events: none;
  display: none;
}

@media (max-width: 700px) {
  .directory-table-shell::after { display: block; }

  /* Row labels stay put while the data columns scroll — without this, the
     reader loses row identity exactly when the payload column arrives. */
  .directory-table-shell th:first-child,
  .directory-table-shell td:first-child {
    position: sticky;
    left: 0;
    background: var(--color-white);
    box-shadow: 1px 0 0 var(--color-gray-200, #e5e7eb);
    z-index: 1;
  }

  /* Striped rows keep their stripe in the sticky cell (solid equivalent of
     the row's rgba stripe over white). */
  .directory-table-shell tbody tr:nth-child(even) td:first-child {
    background: #fbfcfd;
  }

  .directory-table-shell thead th:first-child {
    background: var(--color-gray-50, #f9fafb);
    z-index: 2;
  }
}

.directory-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.directory-data-table th {
  text-align: left;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-500);
  background: var(--color-gray-50);
  padding: var(--spacing-3) var(--spacing-5);
  border-bottom: 2px solid var(--color-gray-200);
  white-space: nowrap;
}

.directory-data-table td {
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-gray-700);
  vertical-align: middle;
}

.directory-data-table tbody tr:nth-child(even) {
  background: rgba(249, 250, 251, 0.6);
}

.directory-data-table tbody tr:hover {
  background: #fffbf5;
}

.directory-data-table tr:last-child td {
  border-bottom: none;
}

/* State cell: plate badge + name, one clickable unit */
.directory-data-table__state {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.directory-data-table__state:hover span:last-child {
  text-decoration: underline;
}

.directory-data-table__state .practice-plate--badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 12px;
}

/* Emphasised figures (rates, hours) with muted units beside them */
.directory-data-table__price {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-text);
}

.directory-data-table__price--muted {
  color: var(--color-secondary);
}

.directory-data-table__unit {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-left: 2px;
  white-space: nowrap;
}

.directory-data-table__bonus {
  display: inline-block;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  border-radius: 100px;
  padding: 2px 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.directory-data-table__cta {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .directory-data-table th,
  .directory-data-table td {
    padding: var(--spacing-3);
  }

  .directory-data-table__meta-col {
    display: none;
  }

  .directory-data-table__state .practice-plate--badge {
    width: 32px;
    height: 32px;
    font-size: 10px;
    border-radius: 8px;
  }
}

/* Section rhythm.
   .section defaults to --spacing-24 (96px) top and bottom. Sections have no
   margins, so adjacent paddings stack: two untouched sections sat 192px apart,
   and the page had three such gaps. The sections that were deliberately tuned
   already use --spacing-16 (64px), so these are brought in line rather than a
   new value invented — 128px between sections instead of 192px. */
.directory-why,
.directory-cost-estimator,
.directory-guide,
.directory-logbook,
.directory-blog-section,
.directories-section,
.faq-section {
  padding: var(--spacing-16) 0;
}

/* ==========================================================================
   Learner voices — real Google reviews for the instructors listed above.
   Sits directly under the instructor deck, so it is styled as a quiet
   evidence band rather than a second hero: the instructor name is the only
   emphatic thing in each card, because it is also the link out to the profile.
   ========================================================================== */
.learner-voices {
  padding: var(--spacing-12) 0;
  background: var(--color-gray-50);
}

.learner-voices__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-6);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-8);
}

/* Matches .directory-why__eyebrow so the two section headers read as one
   system, but left-aligned because this header carries the Google mark. */
.learner-voices__eyebrow {
  display: inline-block;
  background: var(--color-primary-50);
  color: var(--color-warning-700);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  margin: 0 0 var(--spacing-4);
}

.learner-voices__title {
  text-wrap: balance;
  max-width: 34ch;
  margin: 0 0 var(--spacing-2);
}

.learner-voices__intro {
  font-size: var(--font-size-base);
  color: var(--color-gray-500);
  margin: 0;
  max-width: 56ch;
}

/* Google requires the attribution be shown as provided and not altered. */
.learner-voices__powered-by {
  height: 20px;
  width: auto;
  flex-shrink: 0;
  margin-top: var(--spacing-2);
}

/* The Google mark and the scroll arrows share the right side of the header. */
.learner-voices__head-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-3);
  flex-shrink: 0;
}

/* Arrows live in the header rather than floating over the cards. The shared
   .carousel-arrow pair is 64px and absolutely positioned at the track's edges,
   which put a disabled arrow on top of a quote; up here they read as a control
   and the cards stay clean. Own classes, so the instructor deck's overlay
   arrows are untouched. */
.learner-voices__nav {
  display: flex;
  gap: var(--spacing-2);
}

.learner-voices__nav-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  color: var(--color-secondary);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.learner-voices__nav-btn:hover:not(:disabled),
.learner-voices__nav-btn:focus-visible:not(:disabled) {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
}

/* The controller sets disabled at each end of the track. */
.learner-voices__nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Nothing to scroll, or a phone where the row is swiped instead. */
.carousel--no-overflow .learner-voices__nav {
  display: none;
}

@media (max-width: 768px) {
  .learner-voices__nav {
    display: none;
  }
}

/* A horizontal track, not a grid: three cards in view and the other three a
   swipe or an arrow away. Same scrollbar-hiding and touch behaviour as
   .directory-instructors__grid so the two rows feel like one component. */
.learner-voices__grid {
  list-style: none;
  margin: 0;
  padding: var(--spacing-1) 0 var(--spacing-2);
  display: flex;
  gap: var(--spacing-4);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.learner-voices__grid::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .learner-voices__grid {
    scroll-behavior: auto;
  }
}

.learner-voice {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  /* Flex basis rather than width, so a card still fills the row on a narrow
     phone. One rule for this selector, not two — a second .learner-voice block
     is how spacing silently cancels itself out later.

     Sized to leave the next card visibly peeking. The arrows are hidden below
     768px, so that sliver is the only thing telling a phone user the row
     scrolls at all — at 84vw/320px it was 3px on a 320px screen, i.e. nothing. */
  flex: 0 0 clamp(240px, 78vw, 300px);
  scroll-snap-align: start;
}

/* Three across on desktop. Must come AFTER the base rule: same specificity, so
   whichever is declared last wins, and with this above it the base flex-basis
   silently cancelled the three-across sizing. */
@media (min-width: 900px) {
  .learner-voice {
    flex: 0 0 calc((100% - (2 * var(--spacing-4))) / 3);
  }
}

.learner-voice__instructor {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  text-decoration: none;
}

.learner-voice__instructor:hover,
.learner-voice__instructor:focus-visible {
  text-decoration: underline;
}

/* Their real photo, at the size the eye reads as "a person" rather than "an
   icon". Falls back to initials, never to a stock portrait — see the partial. */
.learner-voice__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  background: var(--color-gray-100);
}

.learner-voice__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: var(--font-size-sm);
}

.learner-voice__name {
  margin-right: auto;
}

/* Only announces itself on hover/focus — the name is the affordance. */
.learner-voice__instructor-hint {
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-primary-text);
  opacity: 0;
  transition: opacity 120ms ease-in-out;
}

.learner-voice__instructor:hover .learner-voice__instructor-hint,
.learner-voice__instructor:focus-visible .learner-voice__instructor-hint {
  opacity: 1;
}

.learner-voice__stars {
  margin: 0;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  letter-spacing: 0.05em;
}

/* The full review text is always in the DOM; the clamp is visual only, because
   Google review content must not be edited. Five lines keeps every card the
   same height without cutting most reviews at all. */
.learner-voice__quote {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.learner-voice__attribution {
  margin: auto 0 0;
  padding-top: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

/* No resting underline. This link is compulsory — Places requires the viewer
   be able to reach the source review — but it lands on the instructor's own
   Google listing, where their phone and website are, so a learner can book
   direct from it. Nothing here hides the attribution: the text is unchanged,
   fully visible and still clickable. It simply stops advertising itself.
   Underline returns on hover AND focus, so it is still discoverable and
   keyboard users get the same affordance as mouse users. */
.learner-voice__source {
  color: inherit;
  text-decoration: none;
}

.learner-voice__source:hover,
.learner-voice__source:focus-visible {
  color: var(--color-secondary);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 2px;
}

/* A disclosure, not a selling line — the quietest text in the section. */
.learner-voices__notice {
  margin: var(--spacing-6) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  max-width: 78ch;
}

@media (max-width: 600px) {
  .learner-voices {
    padding: var(--spacing-8) 0;
  }

  .learner-voices__powered-by {
    margin-top: 0;
  }
}

/* The review author, as Google supplies them. Smaller than the instructor's
   avatar above it — this is the person who wrote the quote, not the person the
   quote is about, and the size difference is what keeps that readable. */
.learner-voice__author-photo {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  /* Same reason as the Google mark below: without inline-block this sits on
     its own line. Not visible in seed data, which has no author photos. */
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--spacing-1);
  background: var(--color-gray-100);
}

/* The date and the trailing Google mark stay together. Without this the mark
   broke onto a line of its own below the date. The author name is deliberately
   outside this span so a long name can still wrap normally. */
.learner-voice__credit {
  white-space: nowrap;
}

/* Says where the quote came from, the same way the profile's review cards do.
   Deliberately NOT .learner-voice__source — that class is already the Maps
   date link below, and sharing it put width/height rules on an inline <a>. */
.learner-voice__google-mark {
  width: 12px;
  height: 12px;
  /* inline-block and vertical-align match .review-card__source on the profile.
     Images default to display:block here, which put the mark on a line of its
     own no matter what white-space the parent set. */
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--spacing-1);
}

.learner-voice__author-link {
  color: inherit;
  text-decoration: none;
}

.learner-voice__author-link:hover,
.learner-voice__author-link:focus-visible {
  text-decoration: underline;
}
/* ==========================================================================
   How it works — the three booking steps, each shown with a small piece of
   real UI rather than a generic icon. Replaces the icon-only .steps-container
   version on the directory index, state and suburb pages. (Those classes stay
   in the sheet: instructors/index and providers/_features_section still use
   them.)
   ========================================================================== */
.how-it-works__head {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto var(--spacing-8);
}

.how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-6);
}

@media (min-width: 900px) {
  .how-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.how-step {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* Numbered because the three steps genuinely are a sequence — you cannot pay
   before choosing a time, or be picked up before paying. */
.how-step__number {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--spacing-1);
}

.how-step__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0;
}

.how-step__copy {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  line-height: 1.6;
  margin: 0;
}

/* The illustrative UI. Pushed to the bottom of the step so all three visuals
   line up regardless of how long the copy above them runs. */
.how-step__visual {
  margin-top: auto;
  padding-top: var(--spacing-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.how-step__visual--filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.how-pill {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  padding: var(--spacing-1) var(--spacing-3);
  white-space: nowrap;
}

/* One pill shown selected, so the control reads as interactive rather than as
   a row of labels. */
.how-pill--active {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

.how-pill--rate {
  color: var(--color-primary-text);
  background: var(--color-primary-50);
  border-color: transparent;
  font-variant-numeric: tabular-nums;
}

.how-slots__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--spacing-3);
}

.how-slots__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-2);
}

.how-slot {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) 0;
  font-variant-numeric: tabular-nums;
}

.how-slot--picked {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
}

.how-confirm__badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  color: var(--color-success-700, var(--color-secondary));
  margin: 0 0 var(--spacing-2);
}

.how-confirm__meta {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin: 0 0 var(--spacing-1);
}

.how-confirm__meta:last-child {
  margin-bottom: 0;
}

.how-it-works__foot {
  margin: var(--spacing-8) 0 0;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}
/* Instructor Application Multi-Step Form */

.instructor-application-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF8F0 100%);
  padding: var(--spacing-8) var(--spacing-4);
  position: relative;
}

.instructor-application-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 50%, var(--color-primary) 0%, transparent 50%);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.instructor-application-wrapper {
  position: relative;
  z-index: 1;
}

.instructor-application-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--spacing-8);
  position: relative;
  z-index: 1;
}

/* Progress Sidebar */
.application-progress {
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--spacing-6);
  height: -moz-fit-content;
  height: fit-content;
  position: sticky;
  top: var(--spacing-4);
}

.application-progress__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-6);
  letter-spacing: -0.02em;
}

.application-progress__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.application-progress__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) 0;
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

.application-progress__item.hidden {
  display: none;
}

.progress-indicator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-gray-300);
  background: var(--color-white);
  flex-shrink: 0;
  position: relative;
}

.application-progress__item.active .progress-indicator {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, var(--color-primary-light) 14%, var(--color-primary) 38%);
}

.application-progress__item.active .progress-indicator::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-white);
  font-size: 14px;
  font-weight: bold;
}

.application-progress__item.completed .progress-indicator {
  border-color: var(--color-success);
  background: var(--color-success);
}

.application-progress__item.completed .progress-indicator::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-white);
  font-size: 14px;
  font-weight: bold;
}

.application-progress__item.active,
.application-progress__item.completed {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-medium);
}

/* Main Form Area */
.application-main {
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--spacing-8);
}

.application-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-8);
  letter-spacing: -0.02em;
}

.application-title .orange-dot {
  color: var(--color-primary);
}

/* Error Summary */
.error-summary {
  background-color: #fee;
  border: 2px solid var(--color-danger);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4) var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.error-summary__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-danger);
  margin-bottom: var(--spacing-3);
}

.error-summary__list {
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

.error-summary__list li {
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-2);
}

.instructor-application-form {
  width: 100%;
}

.form-step {
  display: block;
}

.form-step.hidden {
  display: none;
}

.form-section {
  margin-bottom: var(--spacing-8);
}

.form-section.hidden {
  display: none;
}

.section-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-4);
  letter-spacing: -0.02em;
}


.form-group {
  margin-bottom: var(--spacing-4);
}

.form-group--flex {
  flex: 1;
}

.form-group.hidden {
  display: none;
}

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.form-label.required::after {
  content: '*';
  color: var(--color-danger);
  margin-left: 4px;
}

.form-label-small {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-2);
}

.form-help-text {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  margin-top: var(--spacing-1);
  margin-bottom: var(--spacing-2);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: var(--spacing-3);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  transition: border-color 0.2s;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.form-input.error,
.form-textarea.error {
  border-color: var(--color-danger);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* Radio and Checkbox Groups */
.radio-group,
.checkbox-group {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-2) var(--spacing-2);
  align-items: center;
}

.radio-input,
.checkbox-input {
  cursor: pointer;
  width: 18px;
  height: 18px;
  margin: 0;
}

.radio-label,
.checkbox-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  cursor: pointer;
  margin: 0;
}

.error-message {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  margin-top: var(--spacing-1);
}

.error-message.hidden {
  display: none;
}

/* Business Type Hints */
.business-type-hint {
  margin-top: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: #FFF8F0;
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.business-type-hint.hidden {
  display: none;
}

.business-type-hint .hint-text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  line-height: 1.5;
}

/* File Upload Fields */
.file-upload-wrapper {
  position: relative;
}

.file-input {
  width: 100%;
  padding: var(--spacing-3);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  background: var(--color-white);
  cursor: pointer;
  transition: border-color 0.2s;
}

.file-input:hover {
  border-color: var(--color-primary);
}

.file-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 124, 0, 0.1);
}

.file-input::file-selector-button {
  padding: var(--spacing-2) var(--spacing-4);
  margin-right: var(--spacing-3);
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary-light) 14%, var(--color-primary) 38%);
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.file-input::file-selector-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 124, 0, 0.3);
}

.file-upload-info {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
}

.file-name {
  font-style: italic;
}

/* Upload Placeholders (legacy - keeping for backwards compatibility) */
.upload-placeholder {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  text-align: center;
  background: var(--color-gray-50);
}

.upload-placeholder p {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-3);
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: var(--spacing-4);
  justify-content: center;
  margin-top: var(--spacing-8);
  padding-top: var(--spacing-6);
  border-top: var(--border-width) solid var(--border-color);
}

.instructor-application-form .btn-large {
  padding: 16px 48px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  border-radius: 50px;
  min-width: 200px;
}

.instructor-application-form .btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border: none;
}

.instructor-application-form .btn-secondary:hover {
  background-color: #1a2332;
}

.instructor-application-form .btn-primary {
  background: linear-gradient(135deg, var(--color-primary-light) 14%, var(--color-primary) 38%);
  color: var(--color-white);
  border: none;
  box-shadow: 0 4px 12px rgba(255, 124, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.instructor-application-form .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 124, 0, 0.4);
}

/* Validation Modal */
.validation-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.validation-modal.hidden {
  display: none;
}

.validation-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.validation-modal__content {
  position: relative;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  z-index: 10000;
}

.validation-modal__header {
  padding: var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.validation-modal__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin: 0;
}
.validation-modal__title.success {
  color: var(--color-success);
}
.validation-modal__title.error{
  color: var(--color-danger);
}
.validation-modal__close {
  background: none;
  border: none;
  padding: var(--spacing-2);
  cursor: pointer;
  color: var(--color-text-light);
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.validation-modal__close:hover {
  color: var(--color-text);
}

.validation-modal__body {
  padding: var(--spacing-6);
  overflow-y: auto;
  flex: 1;
}

.validation-modal__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.validation-modal__list li {
  padding: var(--spacing-3);
  margin-bottom: var(--spacing-2);
  background-color: #fee;
  border-left: 4px solid var(--color-danger);
  border-radius: var(--radius-md);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

.validation-modal__list li:last-child {
  margin-bottom: 0;
}

.validation-modal__footer {
  padding: var(--spacing-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
}

/* Responsive */
@media (max-width: 768px) {
  .instructor-application-container {
    padding: var(--spacing-4) var(--spacing-6);
  }

  .instructor-application-wrapper {
    grid-template-columns: 1fr;
  }

  .application-progress {
    position: relative;
    top: 0;
  }

  .application-main {
    padding: var(--spacing-4);
  }

  .application-title {
    font-size: var(--font-size-3xl);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
    gap: var(--spacing-3);
  }

  .instructor-application-form .btn-large {
    min-width: 0;
    width: 100%;
    padding: 14px 24px;
  }

  .validation-modal__content {
    width: 95%;
    max-height: 90vh;
  }

  .validation-modal__header,
  .validation-modal__body,
  .validation-modal__footer {
    padding: var(--spacing-4);
  }
}

/* Draft Save Indicator */
.draft-save-indicator {
  position: fixed;
  top: var(--spacing-4);
  right: var(--spacing-4);
  background: var(--color-green-50);
  color: var(--color-green-700);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-green-200);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-md);
  z-index: 1000;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.draft-save-indicator.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
}

.draft-save-indicator.draft-saved-flash {
  animation: pulse-green 1s ease-in-out;
}

@keyframes pulse-green {
  0%, 100% {
    background: var(--color-green-50);
    border-color: var(--color-green-200);
  }
  50% {
    background: var(--color-green-100);
    border-color: var(--color-green-300);
  }
}

/* Draft Modal Specific Styles */
.draft-modal__message {
  color: var(--color-gray-700);
  font-size: var(--font-size-base);
  line-height: 1.6;
  margin-bottom: var(--spacing-4);
}

.draft-modal__timestamp {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  font-style: italic;
}

/* Save Modal Specific Styles */
.save-modal__message {
  color: var(--color-gray-700);
  font-size: var(--font-size-base);
  line-height: 1.6;
  margin-bottom: var(--spacing-4);
}

.save-modal__details {
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  margin-bottom: var(--spacing-4);
  padding: var(--spacing-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
}

/* Password Field Highlighting (after draft restore) */
.field-needs-attention {
  border-color: var(--color-primary) !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  animation: pulse-attention 2s ease-in-out 3;
}

@keyframes pulse-attention {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2);
  }
}

/* Vehicle Selector Autocomplete */
.vehicle-selector-wrapper {
  position: relative;
}

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.autocomplete-item {
  padding: var(--spacing-3) var(--spacing-4);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.autocomplete-item:hover {
  background-color: var(--color-gray-50);
}

.autocomplete-item:active {
  background-color: var(--color-gray-100);
}

.vehicle-photo-preview {
  margin-top: var(--spacing-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border-width) solid var(--border-color);
}

.vehicle-photo-preview img {
  width: 100%;
  height: auto;
  display: block;
}

.loading-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-2);
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-gray-300);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* File Upload Status Indicator */
.file-upload-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  margin-bottom: var(--spacing-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.file-upload-status.file-already-uploaded {
  background-color: var(--color-green-50);
  color: var(--color-green-700);
  border: 1px solid var(--color-green-200);
}

.file-upload-status .check-icon {
  flex-shrink: 0;
  color: var(--color-green-600);
}

.file-upload-status span {
  word-break: break-word;
  overflow-wrap: break-word;
}

.file-upload-status strong {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Test Centre Multi-Select Autocomplete */
.test-centre-select {
  position: relative;
}

.test-centre-select__input-wrapper {
  position: relative;
}

.test-centre-select__input {
  width: 100%;
  padding: var(--spacing-3);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  transition: border-color 0.2s;
}

.test-centre-select__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.test-centre-autocomplete__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  max-height: 250px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: none;
}

.test-centre-autocomplete__results--visible {
  display: block;
}

.test-centre-autocomplete__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s;
}

.test-centre-autocomplete__item:hover,
.test-centre-autocomplete__item--active {
  background-color: var(--color-gray-50);
}

.test-centre-autocomplete__name {
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
}

.test-centre-autocomplete__state {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  padding: var(--spacing-1) var(--spacing-2);
  background: var(--color-gray-100);
  border-radius: var(--radius-sm);
}

.test-centre-autocomplete__empty {
  padding: var(--spacing-4);
  text-align: center;
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

/* Selected Test Centre Tags */
.test-centre-select__selected {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
}

.test-centre-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: linear-gradient(135deg, rgba(255, 124, 0, 0.1) 0%, rgba(255, 124, 0, 0.15) 100%);
  border: 1px solid rgba(255, 124, 0, 0.3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
}

.test-centre-tag__name {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-medium);
}

.test-centre-tag__state {
  color: var(--color-gray-600);
  font-size: var(--font-size-xs);
}

.test-centre-tag__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: var(--color-gray-200);
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--color-gray-600);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.test-centre-tag__remove:hover {
  background: var(--color-danger);
  color: var(--color-white);
}

/* Email confirmation banner */
.email-confirmation-banner {
  padding-top: var(--spacing-4);
}

.email-confirmation-banner__alert {
  background: #FFF8F0;
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-3) var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.email-confirmation-banner__text {
  color: var(--color-gray-700);
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.email-confirmation-banner__text--bold {
  font-weight: 600;
}

.email-confirmation-banner__text--spaced {
  margin-top: 8px;
}

/* Resend confirmation email link button */
.resend-confirmation-link {
  background: none;
  border: none;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-weight: 600;
}

/* Form helper text utilities */
.form-help-text--no-top-margin {
  margin-top: 0;
}

.form-help-text--small {
  margin-top: 0.25rem;
  font-size: 0.85rem;
}

/* Dynamic visibility - controlled by JavaScript */
.hidden-field {
  display: none;
}
/* Instructor Landing Page - Clean & Professional */

/* Hero Section */
.inst-hero {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF8F0 100%);
  padding: var(--spacing-12) 0 var(--spacing-20) 0;
  position: relative;
  overflow: hidden;
}

.inst-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 50%, var(--color-primary) 0%, transparent 50%);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.inst-hero__content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.inst-hero__image {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: var(--spacing-10);
  position: relative;
}

.inst-hero__image-box {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 280px;
  background: var(--color-primary);
  border-radius: 32px;
  z-index: 0;
  box-shadow: 0 20px 50px rgba(255, 124, 0, 0.25), 0 10px 20px rgba(0, 0, 0, 0.1);
}

.inst-hero__image-box::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 4px solid rgba(255, 255, 255, 0.8);
  border-radius: 36px;
  z-index: 2;
  pointer-events: none;
}

.inst-hero__image img {
  position: relative;
  z-index: 1;
  max-width: 320px;
  height: auto;
}

.inst-hero__title {
  font-size: 56px;
  font-weight: 800;
  color: var(--color-secondary);
  line-height: 1.1;
  margin-bottom: var(--spacing-6);
  letter-spacing: -0.05em;
}

.inst-hero__title .orange-dot {
  color: var(--color-primary);
}

.inst-hero__subtitle {
  font-size: var(--font-size-xl);
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-bottom: var(--spacing-8);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.inst-hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-12);
}

.inst-hero__note {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.inst-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-8);
  max-width: 600px;
  margin: 0 auto;
}

.stat-item {
  text-align: center;
}

.stat-item__value {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  line-height: 1;
  margin-bottom: var(--spacing-2);
}

.stat-item__label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  font-weight: var(--font-weight-medium);
}

/* Benefits Section */
.inst-benefits {
  background: var(--color-white);
}

.btn-gradient-primary {
  display: inline-block;
  padding: var(--spacing-4) var(--spacing-8);
  background: linear-gradient(135deg, var(--color-primary-light) 14%, var(--color-primary) 38%);
  color: var(--color-white);
  font-size: var(--font-size-lg);
  font-weight: 700;
  font-family: var(--font-family-heading);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(255, 124, 0, 0.3);
}

.btn-gradient-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 124, 0, 0.4);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-10);
  margin-top: var(--spacing-12);
}

.benefit-item {
  text-align: center;
}

.benefit-item__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-item__icon img {
  max-width: 60%;
  max-height: 60%;
}

.benefit-item__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-3);
}

.benefit-item__text {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  line-height: 1.6;
}

/* How It Works */
.inst-how-works {
  background: var(--color-white);
}

.steps-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-8);
  margin-top: var(--spacing-12);
}

.step-item {
  position: relative;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-item__icon {
  color: var(--color-primary);
  font-size: 2.5rem;
  margin-bottom: var(--spacing-6);
}

.step-item__number {
  position: relative;
  z-index: 1;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 800;
  font-family: var(--font-family-heading);
  margin: 0 auto var(--spacing-6);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.step-item__content {
  position: relative;
  z-index: 1;
}

.step-item__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-3);
  font-family: var(--font-family-heading);
}

.step-item__text {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  line-height: 1.6;
}

/* Demand / Shortage hook */
.inst-demand {
  background: var(--color-white);
  text-align: center;
}

.inst-demand__lead {
  max-width: 720px;
  margin: var(--spacing-4) auto 0;
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  line-height: 1.6;
}

.inst-demand__stats {
  margin-top: var(--spacing-12);
}

.inst-demand__source {
  max-width: 720px;
  margin: var(--spacing-8) auto 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500, #6b7280);
  line-height: 1.6;
}

/* Instructor Showcase - removed, using existing instructor-card styles from _cards.css */

/* Pricing Section */
.inst-pricing {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF8F0 100%);
}

.pricing-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--spacing-12);
  align-items: center;
}

.pricing-content__title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-4);
}

.pricing-content__description {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-bottom: var(--spacing-8);
}

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.pricing-feature {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-size: var(--font-size-base);
  color: var(--color-gray-700);
}

.pricing-feature__icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

/* Pricing Calculator */
.pricing-calculator {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-8);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border: 1px solid #DDDDDD;
}

.pricing-calculator__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-6);
  text-align: center;
}

.calc-field {
  margin-bottom: var(--spacing-6);
}

.calc-field__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-secondary);
}

.calc-field__value {
  color: var(--color-primary);
  font-weight: 700;
}

.calc-field__slider {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: #E5E7EB;
  outline: none;
  -webkit-appearance: none;
}

.calc-field__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.calc-field__slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  border: none;
}

.calc-result {
  background: linear-gradient(135deg, #FFF8F0 0%, #FFFFFF 100%);
  padding: var(--spacing-6);
  border-radius: var(--radius-lg);
  text-align: center;
  margin-top: var(--spacing-6);
}

.calc-result__label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-2);
}

.calc-result__value {
  font-size: 40px;
  font-weight: 800;
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  line-height: 1;
  margin-bottom: var(--spacing-1);
}

.calc-result__note {
  font-size: var(--font-size-base);
  color: var(--color-gray-500);
}

/* FAQ Section */
.inst-faq {
  background: var(--color-white);
}

/* Final CTA */
.inst-cta-final {
  background: linear-gradient(135deg, var(--color-primary-light) 14%, var(--color-primary) 38%);
  padding: var(--spacing-20) 0;
}

.cta-final-content {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.cta-final-content__title {
  font-size: var(--font-size-5xl);
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: var(--spacing-4);
}

.cta-final-content__text {
  font-size: var(--font-size-xl);
  color: var(--color-white);
  opacity: 0.95;
  margin-bottom: var(--spacing-8);
  line-height: 1.6;
}

.inst-cta-final .btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-color: var(--color-secondary);
}

.inst-cta-final .btn-secondary:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  color: var(--color-white);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .pricing-content {
    grid-template-columns: 1fr;
  }

  .pricing-calculator {
    max-width: 500px;
    margin: var(--spacing-8) auto 0;
  }

  .benefits-grid,
  .steps-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .inst-hero__title {
    font-size: 40px;
  }

  .inst-hero__stats {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
  }

  .benefits-grid,
  .steps-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .inst-hero {
    padding: var(--spacing-16) 0;
  }

  .inst-hero__title {
    font-size: 32px;
  }

  .cta-final-content__title {
    font-size: var(--font-size-4xl);
  }
}
/* Blog Hero */
.blog-hero {
  background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
  padding: var(--spacing-16) 0;
  text-align: center;
}

.blog-hero__title {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-4);
  font-family: var(--font-family-heading);
}

.blog-hero__subtitle {
  font-size: var(--font-size-xl);
  color: var(--color-gray-600);
  max-width: 600px;
  margin: 0 auto;
}

/* Blog Listing */
.blog-listing {
  padding: var(--spacing-12) 0 var(--spacing-16);
}

.articles-grid--blog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-8);
}

.article-card__meta {
  display: flex;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.article-card__date,
.article-card__reading-time {
  display: inline-flex;
  align-items: center;
}

.article-card__image--placeholder {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  color: var(--color-gray-400);
}

/* Blog Empty State */
.blog-empty {
  text-align: center;
  padding: var(--spacing-16) var(--spacing-6);
}

.blog-empty__icon {
  color: var(--color-gray-400);
  margin-bottom: var(--spacing-6);
}

.blog-empty__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-3);
}

.blog-empty__description {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-6);
}

/* Blog Article Page */
.blog-article {
  background: var(--color-white);
}

.blog-article__header {
  background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
  padding: var(--spacing-10) 0 var(--spacing-8);
}

.blog-article__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-6);
}

.blog-article__breadcrumb-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

.blog-article__breadcrumb-link:hover {
  text-decoration: underline;
}

.blog-article__breadcrumb-separator {
  color: var(--color-gray-400);
}

.blog-article__breadcrumb-current {
  color: var(--color-gray-600);
}

/* Header Content - Title and Image side by side */
.blog-article__header-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
}

.blog-article__header-text {
  flex: 1;
}

.blog-article__featured-image {
  flex-shrink: 0;
  width: 480px;
  min-height: 280px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #FF9900 0%, #FFB84D 50%, #FF9900 100%);
  overflow: hidden;
  position: relative;
}

/* CSS fallback when featured image fails to load */
.blog-article__featured-image::after {
  content: "DriveBuddy";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.05em;
  pointer-events: none;
  z-index: 0;
}

/* When image loads successfully, it covers the fallback */
.blog-article__image {
  position: relative;
  z-index: 1;
}

.blog-article__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  line-height: 1.2;
  margin-bottom: var(--spacing-4);
  font-family: var(--font-family-heading);
}

.blog-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-4);
}

.blog-article__divider {
  color: var(--color-gray-400);
}

.blog-article__author {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--spacing-2);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.blog-article__author-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.blog-article__excerpt {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-top: var(--spacing-4);
}

.blog-article__image {
  width: 100%;
  height: 280px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* Article Body Layout with Sidebar */
.blog-article__body {
  padding: var(--spacing-10) 0 var(--spacing-16);
}

/* minmax(0, ...) on the content track, not a bare 1fr. A bare `1fr` carries an
   implicit `auto` minimum, so any wide child — the log book table is min-width
   580px — stretches the track past the viewport. body sets overflow-x: clip, so
   instead of a scrollbar the article was silently cut off: 900px of content in a
   390px viewport. */
.blog-article__layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--spacing-12);
}

.blog-article__layout--no-sidebar {
  grid-template-columns: minmax(0, 1fr);
}

.blog-article__main {
  max-width: 720px;
}

/* Table of Contents Sidebar */
.blog-article__sidebar {
  position: relative;
  align-self: start;
}

.blog-article__toc {
  position: sticky;
  top: var(--spacing-8);
  background: var(--color-gray-50);
  border-radius: var(--radius-xl);
  padding: var(--spacing-6);
}

.blog-article__toc-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-4);
}

.blog-article__toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-article__toc-item {
  margin-bottom: var(--spacing-2);
}

.blog-article__toc-link {
  display: block;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  line-height: 1.4;
}

.blog-article__toc-link:hover {
  background: var(--color-white);
  color: var(--color-primary);
}

/* Article Content */
.blog-article__content {
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-gray-700);
}

.blog-article__content p {
  margin-bottom: var(--spacing-6);
}

.blog-article__content p:first-child {
  font-size: var(--font-size-base);
  color: var(--color-gray-800);
}

/* Article Headings */
.blog-article__heading {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-top: var(--spacing-10);
  margin-bottom: var(--spacing-4);
  padding-top: var(--spacing-4);
  font-family: var(--font-family-heading);
  scroll-margin-top: var(--spacing-6);
}

.blog-article__content h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-top: var(--spacing-10);
  margin-bottom: var(--spacing-4);
  font-family: var(--font-family-heading);
  scroll-margin-top: var(--spacing-6);
}

.blog-article__content h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-3);
  font-family: var(--font-family-heading);
}

/* Article Lists */
.blog-article__list {
  margin-bottom: var(--spacing-6);
  padding-left: var(--spacing-6);
}

.blog-article__list li {
  margin-bottom: var(--spacing-2);
  position: relative;
}

.blog-article__list li::marker {
  color: var(--color-primary);
}

.blog-article__content ul {
  margin-bottom: var(--spacing-6);
  padding-left: var(--spacing-6);
  list-style-type: disc;
}

.blog-article__content ol {
  margin-bottom: var(--spacing-6);
  padding-left: var(--spacing-6);
  list-style-type: decimal;
}

.blog-article__content li {
  margin-bottom: var(--spacing-2);
  display: list-item;
}

.blog-article__content a {
  color: var(--color-primary);
  text-decoration: underline;
}

.blog-article__content a:hover {
  text-decoration: none;
}

.blog-article__content blockquote {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--spacing-6);
  margin: var(--spacing-8) 0;
  font-style: italic;
  color: var(--color-gray-600);
}

/* Article Tables */
.blog-article__content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-6) 0;
  font-size: var(--font-size-sm);
}

/* Article tables can carry a caption and a totals row. The caption is the
   table's accessible name; tfoot is the figure a reader is usually after. */
.blog-article__content caption {
  caption-side: top;
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  padding-bottom: var(--spacing-2);
}

.blog-article__content tfoot th,
.blog-article__content tfoot td {
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  border-top: 2px solid var(--color-gray-300);
  background: var(--color-gray-50);
}

.blog-article__content thead {
  background: var(--color-gray-50);
}

.blog-article__content th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  text-align: left;
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 2px solid var(--color-gray-200);
}

.blog-article__content td {
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-gray-700);
}

.blog-article__content tbody tr:last-child td {
  border-bottom: none;
  font-weight: var(--font-weight-semibold);
}

/* ---- Enhanced comparison tables ---- */
.blog-article__content .table-scroll {
  overflow-x: auto;
  margin: var(--spacing-6) 0;
  border: 1px solid var(--color-gray-200);
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}

.blog-article__content .table-scroll table {
  margin: 0;
  min-width: 540px;
}

.blog-article__content thead {
  background: #fff7ec;
}

.blog-article__content th {
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
  border-bottom: 2px solid rgba(255, 153, 0, 0.3);
  white-space: nowrap;
}

.blog-article__content td {
  vertical-align: top;
}

.blog-article__content tbody tr:nth-child(even) {
  background: var(--color-gray-50);
}

.blog-article__content td:first-child {
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.blog-article__content .tick-yes {
  color: #1a9956;
  font-weight: 700;
  margin-right: 2px;
}

.blog-article__content .tick-no {
  color: var(--color-gray-400);
  font-weight: 700;
  margin-right: 2px;
}

/* Article Footer */
.blog-article__footer {
  margin-top: var(--spacing-12);
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--color-gray-200);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.blog-article__share {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.blog-article__share-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}

.blog-article__share-buttons {
  display: flex;
  gap: var(--spacing-3);
}

.blog-article__share-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  transition: all 0.2s ease;
}

.blog-article__share-button:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.blog-article__back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.blog-article__back-link:hover {
  text-decoration: underline;
}

/* Narrow Container for Blog */
.container--narrow {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}

/* Blog Article Figure */
.blog-article__figure {
  margin: var(--spacing-8) 0;
  text-align: center;
}

.blog-article__figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Blog Article Aside (Disclaimer) */
.blog-article__content aside {
  background: var(--color-gray-50);
  border-left: 3px solid var(--color-gray-300);
  padding: var(--spacing-4) var(--spacing-5);
  margin: var(--spacing-8) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.blog-article__content aside p {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  font-style: italic;
}

/* DKT Breakdown Component */
.dkt-breakdown {
  margin: var(--spacing-8) 0;
}

.dkt-breakdown__sections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.dkt-breakdown__section {
  padding: var(--spacing-5);
  border-radius: var(--radius-lg);
}

.dkt-breakdown__section--general {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.dkt-breakdown__section--safety {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.dkt-breakdown__section-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  text-align: center;
  margin-bottom: var(--spacing-4);
}

.dkt-breakdown__stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: var(--spacing-3);
}

.dkt-breakdown__stat {
  text-align: center;
}

.dkt-breakdown__stat-value {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

.dkt-breakdown__stat-value--general {
  color: #16a34a;
}

.dkt-breakdown__stat-value--safety {
  color: #dc2626;
}

.dkt-breakdown__stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-top: var(--spacing-1);
}

.dkt-breakdown__section-note {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  text-align: center;
}

.dkt-breakdown__totals {
  display: flex;
  justify-content: center;
  gap: var(--spacing-8);
  padding: var(--spacing-4) var(--spacing-6);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-4);
}

.dkt-breakdown__total {
  text-align: center;
}

.dkt-breakdown__total-value {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: #1e40af;
  line-height: 1.2;
}

.dkt-breakdown__total-label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-top: var(--spacing-1);
}

.dkt-breakdown__warning {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-md);
}

.dkt-breakdown__warning-icon {
  font-size: var(--font-size-base);
  line-height: 1.4;
  flex-shrink: 0;
}

.dkt-breakdown__warning-text {
  font-size: var(--font-size-sm);
  color: #92400e;
  line-height: 1.5;
}

/* Log Book Component */
.log-book {
  margin: var(--spacing-8) 0;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.log-book__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-5);
  background: linear-gradient(135deg, #1a365d 0%, #2d4a7c 100%);
  color: var(--color-white);
}

.log-book__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.log-book__badge {
  font-size: var(--font-size-xs);
  background: rgba(255, 255, 255, 0.15);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-sm);
}

.log-book__table-wrap {
  overflow-x: auto;
}

/* Scrollable by mouse already; this makes it pannable by keyboard too, with a
   ring so the focus stop is visible. */
.log-book__table-wrap:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.log-book__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  min-width: 580px;
}

.log-book__table th {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  text-align: left;
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.log-book__table th:last-child {
  text-align: right;
}

.log-book__table td {
  padding: var(--spacing-3);
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-gray-700);
}

.log-book__table td:last-child {
  text-align: right;
}

.log-book__table tbody tr:last-child td {
  border-bottom: none;
}

.log-book__row--bonus {
  background: #f0fdf4;
}

.log-book__row--bonus td {
  border-bottom-color: #d1fae5;
}

.log-book__instructor {
  color: #059669;
  font-weight: var(--font-weight-medium);
}

.log-book__hours-bonus {
  color: #059669;
  font-weight: var(--font-weight-semibold);
}

.log-book__tag {
  display: inline-block;
  background: #d1fae5;
  color: #047857;
  font-size: 9px;
  font-weight: var(--font-weight-semibold);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  margin-left: var(--spacing-2);
  vertical-align: middle;
}

.log-book__summary {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-5);
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-200);
}

.log-book__summary-item {
  text-align: center;
  min-width: 60px;
}

.log-book__summary-value {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  line-height: 1.2;
}

.log-book__summary-value--green {
  color: #059669;
}

.log-book__summary-value--blue {
  color: #1e40af;
}

.log-book__summary-value--red {
  color: #dc2626;
}

.log-book__summary-label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-top: var(--spacing-1);
}

/* Responsive */
@media (max-width: 640px) {
  .dkt-breakdown__sections {
    grid-template-columns: 1fr;
  }

  .dkt-breakdown__totals {
    flex-wrap: wrap;
    gap: var(--spacing-4);
  }

  .log-book__summary {
    justify-content: center;
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .blog-article__layout {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--spacing-8);
  }

  .blog-article__main {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .blog-hero {
    padding: var(--spacing-10) 0;
  }

  .blog-hero__title {
    font-size: var(--font-size-3xl);
  }

  .blog-hero__subtitle {
    font-size: var(--font-size-lg);
  }

  .articles-grid--blog {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
  }

  .blog-article__header {
    padding: var(--spacing-8) 0 var(--spacing-6);
  }

  .blog-article__header-content {
    flex-direction: column;
    gap: var(--spacing-6);
  }

  .blog-article__header-text {
    order: 1;
  }

  .blog-article__featured-image {
    order: 2;
    width: 100%;
  }

  .blog-article__image {
    height: 200px;
  }

  .blog-article__title {
    font-size: var(--font-size-2xl);
  }

  .blog-article__meta {
    font-size: var(--font-size-sm);
  }

  .blog-article__excerpt {
    font-size: var(--font-size-base);
  }

  .blog-article__content {
    font-size: var(--font-size-base);
  }

  .blog-article__content p:first-child {
    font-size: var(--font-size-base);
  }

  .blog-article__heading {
    font-size: var(--font-size-lg);
  }

  .blog-article__share {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-article__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-article__sidebar {
    display: none;
  }
}

/* ===========================
   VIC Licence Guide Components
   =========================== */

/* Licence Plate Icons */
.plate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.plate-icon--l {
  background: #fbbf24;
  color: #1f2937;
}

.plate-icon--p1 {
  background: #dc2626;
  color: var(--color-white);
}

.plate-icon--p2 {
  background: #16a34a;
  color: var(--color-white);
}

/* VIC Licence Progression Diagram (with branching paths) */
.vic-progression {
  margin: var(--spacing-8) 0;
  padding: var(--spacing-6);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.vic-progression__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--spacing-5);
  text-align: center;
}

.vic-progression__paths {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 600px;
}

.vic-progression__path {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.vic-progression__label {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
  width: 80px;
  flex-shrink: 0;
  text-align: right;
  padding-right: var(--spacing-3);
}

.vic-progression__stages {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex: 1;
}

.vic-progression__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  min-width: 90px;
  text-align: center;
}

.vic-progression__stage--learner {
  background: #fef3c7;
  border: 2px solid #fbbf24;
}

.vic-progression__stage--p1 {
  background: #fef2f2;
  border: 2px solid #dc2626;
}

.vic-progression__stage--p2 {
  background: #f0fdf4;
  border: 2px solid #16a34a;
}

.vic-progression__stage--full {
  background: var(--color-white);
  border: 2px solid var(--color-gray-300);
}

.vic-progression__stage-name {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}

.vic-progression__stage-duration {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  margin-top: var(--spacing-1);
}

.vic-progression__arrow {
  color: var(--color-gray-400);
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.vic-progression__skip {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  font-style: italic;
}

/* Age Pathway Cards */
.pathway-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-4);
  margin: var(--spacing-8) 0;
}

.pathway-cards--two-col {
  grid-template-columns: repeat(2, 1fr);
}

.pathway-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pathway-card__header {
  padding: var(--spacing-4);
  text-align: center;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  color: var(--color-white);
}

.pathway-card__header--under21,
.pathway-card__header--under25 {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.pathway-card__header--21to24 {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

.pathway-card__header--25plus {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.pathway-card__body {
  padding: var(--spacing-4);
}

.pathway-card__row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-gray-100);
  font-size: var(--font-size-sm);
}

.pathway-card__row:last-child {
  border-bottom: none;
}

.pathway-card__label {
  color: var(--color-gray-600);
}

.pathway-card__value {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  text-align: right;
}

.pathway-card__value--skipped {
  color: var(--color-gray-400);
  font-style: italic;
  font-weight: normal;
}

.pathway-card__value--highlight {
  color: #059669;
  font-weight: var(--font-weight-bold);
}

/* Test Format Info Card */
.info-card {
  margin: var(--spacing-8) 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.info-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-5);
  background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
  color: var(--color-white);
}

.info-card__icon {
  font-size: var(--font-size-xl);
}

.info-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.info-card__body {
  padding: var(--spacing-5);
}

.info-card__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
}

.info-card__item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.info-card__label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.info-card__value {
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
  font-weight: var(--font-weight-medium);
}

.info-card__value--free {
  color: #059669;
  font-weight: var(--font-weight-bold);
}

.info-card__divider {
  height: 1px;
  background: var(--color-gray-200);
  margin: var(--spacing-4) 0;
  grid-column: span 2;
}

/* Cost Highlight Card */
.cost-card {
  margin: var(--spacing-8) 0;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid #86efac;
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  text-align: center;
}

.cost-card__amount {
  font-family: var(--font-family-heading);
  font-size: 3.5rem;
  font-weight: var(--font-weight-bold);
  color: #059669;
  line-height: 1;
  margin-bottom: var(--spacing-2);
}

.cost-card__label {
  font-size: var(--font-size-lg);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-4);
}

.cost-card__subtext {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  max-width: 400px;
  margin: 0 auto var(--spacing-5);
}

.cost-card__comparison {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-white);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.cost-card__comparison-highlight {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

/* Cost Breakdown Mini Grid */
.cost-card__breakdown {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3);
  margin-top: var(--spacing-5);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.cost-card__breakdown-item {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  padding: var(--spacing-2);
  background: var(--color-white);
  border-radius: var(--radius-md);
}

.cost-card__breakdown-item--free .cost-card__breakdown-value {
  color: #059669;
  font-weight: var(--font-weight-semibold);
}

.cost-card__breakdown-label {
  color: var(--color-gray-600);
}

.cost-card__breakdown-value {
  color: var(--color-gray-900);
}

/* Responsive for VIC components */
@media (max-width: 768px) {
  .pathway-cards {
    grid-template-columns: 1fr;
  }

  .info-card__grid {
    grid-template-columns: 1fr;
  }

  .info-card__divider {
    grid-column: span 1;
  }

  .cost-card__amount {
    font-size: 2.5rem;
  }

  .cost-card__breakdown {
    grid-template-columns: 1fr;
  }

  .vic-progression__label {
    width: 60px;
    font-size: 10px;
  }

  .vic-progression__stage {
    min-width: 70px;
    padding: var(--spacing-2) var(--spacing-3);
  }

  .vic-progression__stage-name {
    font-size: var(--font-size-xs);
  }
}

/* ===========================
   QLD Licence Guide Components
   =========================== */

/* QLD Licence Progression Diagram (with branching paths) */
.qld-progression {
  margin: var(--spacing-8) 0;
  padding: var(--spacing-6);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.qld-progression__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--spacing-5);
  text-align: center;
}

.qld-progression__paths {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 600px;
}

.qld-progression__path {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.qld-progression__label {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
  width: 80px;
  flex-shrink: 0;
  text-align: right;
  padding-right: var(--spacing-3);
}

.qld-progression__stages {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex: 1;
}

.qld-progression__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  min-width: 90px;
  text-align: center;
}

.qld-progression__stage--learner {
  background: #fef3c7;
  border: 2px solid #fbbf24;
}

.qld-progression__stage--p1 {
  background: #fef2f2;
  border: 2px solid #dc2626;
}

.qld-progression__stage--p2 {
  background: #f0fdf4;
  border: 2px solid #16a34a;
}

.qld-progression__stage--open {
  background: var(--color-white);
  border: 2px solid var(--color-gray-300);
}

.qld-progression__stage-name {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}

.qld-progression__stage-duration {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  margin-top: var(--spacing-1);
}

.qld-progression__arrow {
  color: var(--color-gray-400);
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.qld-progression__skip {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  font-style: italic;
}

/* Comparison Cards (PrepL vs Written Test) */
.comparison-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
  margin: var(--spacing-8) 0;
}

.comparison-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.comparison-card--recommended {
  border: 2px solid #16a34a;
}

.comparison-card__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}

.comparison-card--recommended .comparison-card__header {
  background: #f0fdf4;
  border-bottom-color: #bbf7d0;
}

.comparison-card__title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  color: var(--color-gray-900);
}

.comparison-card__badge {
  display: inline-block;
  background: #16a34a;
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.comparison-card__body {
  padding: var(--spacing-4);
}

.comparison-card__row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-gray-100);
  font-size: var(--font-size-sm);
}

.comparison-card__row:last-child {
  border-bottom: none;
}

.comparison-card__label {
  color: var(--color-gray-600);
}

.comparison-card__value {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  text-align: right;
}

.comparison-card__value--highlight {
  color: #059669;
  font-weight: var(--font-weight-bold);
}

/* Callout Box */
.callout-box {
  margin: var(--spacing-8) 0;
  padding: var(--spacing-5);
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  border-left: 4px solid #2563eb;
  border-radius: var(--radius-md);
}

.callout-box p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: #1e40af;
  line-height: 1.6;
}

.callout-box a {
  color: #1d4ed8;
  font-weight: var(--font-weight-medium);
}

/* Responsive for QLD components */
@media (max-width: 768px) {
  .comparison-cards {
    grid-template-columns: 1fr;
  }

  .qld-progression__label {
    width: 60px;
    font-size: 10px;
  }

  .qld-progression__stage {
    min-width: 70px;
    padding: var(--spacing-2) var(--spacing-3);
  }

  .qld-progression__stage-name {
    font-size: var(--font-size-xs);
  }
}

/* ── Licence progression (shared/_licence_stages) ─────────────────────────
   A vertical timeline, not a four-across row. The article column is ~720px,
   which divides into four 171px cards — too narrow for these labels without
   everything wrapping. Stacking reads as a progression just as clearly, stays
   legible at 720px, and needs no separate mobile layout, so there is one thing
   to get right instead of two.

   Every selector is chained with the block class on purpose. The article body
   styles lists as prose — `.blog-article__content li { display: list-item }` is
   specificity (0,1,1) and silently beat a bare `.licence-stages__stage`
   (0,1,0), so `display: grid` never applied and the whole component collapsed
   into a numbered list. Two classes (0,2,0) win. Do not unchain these.

   Plate colours match .qld-progression deliberately: the NSW and QLD guides
   should look like the same site. */
.licence-stages {
  --plate-accent: var(--color-gray-300);

  margin: var(--spacing-8) 0;
  padding: var(--spacing-6) var(--spacing-6) var(--spacing-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.licence-stages .licence-stages__track {
  list-style: none;
  margin: 0;
  padding: 0;
}

.licence-stages .licence-stages__stage {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  -moz-column-gap: var(--spacing-4);
       column-gap: var(--spacing-4);
  margin: 0;
  padding: 0 0 var(--spacing-6);
}

.licence-stages .licence-stages__stage:last-child {
  padding-bottom: 0;
}

/* The rail runs in the stage's own colour, so the eye tracks yellow to red to
   green to navy down the page rather than following a neutral line. */
.licence-stages .licence-stages__stage::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 2px;
  left: 22px;
  width: 2px;
  background: var(--plate-accent);
  opacity: 0.45;
}

.licence-stages .licence-stages__stage:last-child::before {
  display: none;
}

.licence-stages .licence-stages__plate {
  grid-row: 1 / span 4;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 34px;
  border: 2px solid var(--plate-accent);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-gray-900);
}

.licence-stages .licence-stages__stage--learner {
  --plate-accent: #FBBF24;
}

.licence-stages .licence-stages__stage--learner .licence-stages__plate {
  background: #FEF3C7;
}

.licence-stages .licence-stages__stage--p1 {
  --plate-accent: #DC2626;
}

.licence-stages .licence-stages__stage--p1 .licence-stages__plate {
  background: #FEF2F2;
  color: #B91C1C;
}

.licence-stages .licence-stages__stage--p2 {
  --plate-accent: #16A34A;
}

.licence-stages .licence-stages__stage--p2 .licence-stages__plate {
  background: #F0FDF4;
  color: #15803D;
}

/* The destination reads as an arrival: solid where the others are outlined. */
.licence-stages .licence-stages__stage--full {
  --plate-accent: var(--color-secondary);
}

.licence-stages .licence-stages__stage--full .licence-stages__plate {
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: var(--font-size-sm);
}

.licence-stages .licence-stages__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--spacing-3);
  min-height: 34px;
}

.licence-stages .licence-stages__name {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--color-secondary);
  margin: 0;
}

.licence-stages .licence-stages__duration {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--color-gray-500);
  margin: 0;
}

.licence-stages .licence-stages__entry {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-gray-600);
  margin: 0 0 var(--spacing-3);
}

/* Each stage's share of the whole journey. The track is the full four years, so
   the fill lengths are directly comparable down the column. */
.licence-stages .licence-stages__bar {
  position: relative;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-gray-100);
  margin-bottom: var(--spacing-3);
}

.licence-stages .licence-stages__bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--plate-accent);
}

/* The destination has no duration, so its row marks the end of the line
   instead of filling a segment. */
.licence-stages .licence-stages__bar-cap {
  position: absolute;
  top: 50%;
  right: 0;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-secondary);
}

.licence-stages .licence-stages__rules {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin: 0;
  padding: 0;
}

.licence-stages .licence-stages__rule {
  display: block;
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: 1.4;
  color: var(--color-gray-700);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  padding: 3px var(--spacing-3);
  white-space: nowrap;
}

.licence-stages .licence-stages__caption {
  margin-top: var(--spacing-5);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-gray-200);
  font-size: var(--font-size-xs);
  line-height: 1.6;
  color: var(--color-gray-500);
  text-align: left;
}

/* Generated widths and offsets: inline styles are not allowed, so the segment's
   length and its start point both come from classes, the same approach as the
   rating stars. */
.licence-stages .licence-stages__bar-fill--w0 { width: 0; }
.licence-stages .licence-stages__bar-fill--w5 { width: 5%; }
.licence-stages .licence-stages__bar-fill--w10 { width: 10%; }
.licence-stages .licence-stages__bar-fill--w15 { width: 15%; }
.licence-stages .licence-stages__bar-fill--w20 { width: 20%; }
.licence-stages .licence-stages__bar-fill--w25 { width: 25%; }
.licence-stages .licence-stages__bar-fill--w30 { width: 30%; }
.licence-stages .licence-stages__bar-fill--w35 { width: 35%; }
.licence-stages .licence-stages__bar-fill--w40 { width: 40%; }
.licence-stages .licence-stages__bar-fill--w45 { width: 45%; }
.licence-stages .licence-stages__bar-fill--w50 { width: 50%; }
.licence-stages .licence-stages__bar-fill--w55 { width: 55%; }
.licence-stages .licence-stages__bar-fill--w60 { width: 60%; }
.licence-stages .licence-stages__bar-fill--w65 { width: 65%; }
.licence-stages .licence-stages__bar-fill--w70 { width: 70%; }
.licence-stages .licence-stages__bar-fill--w75 { width: 75%; }
.licence-stages .licence-stages__bar-fill--w80 { width: 80%; }
.licence-stages .licence-stages__bar-fill--w85 { width: 85%; }
.licence-stages .licence-stages__bar-fill--w90 { width: 90%; }
.licence-stages .licence-stages__bar-fill--w95 { width: 95%; }
.licence-stages .licence-stages__bar-fill--w100 { width: 100%; }
.licence-stages .licence-stages__bar-fill--o0 { margin-left: 0%; }
.licence-stages .licence-stages__bar-fill--o5 { margin-left: 5%; }
.licence-stages .licence-stages__bar-fill--o10 { margin-left: 10%; }
.licence-stages .licence-stages__bar-fill--o15 { margin-left: 15%; }
.licence-stages .licence-stages__bar-fill--o20 { margin-left: 20%; }
.licence-stages .licence-stages__bar-fill--o25 { margin-left: 25%; }
.licence-stages .licence-stages__bar-fill--o30 { margin-left: 30%; }
.licence-stages .licence-stages__bar-fill--o35 { margin-left: 35%; }
.licence-stages .licence-stages__bar-fill--o40 { margin-left: 40%; }
.licence-stages .licence-stages__bar-fill--o45 { margin-left: 45%; }
.licence-stages .licence-stages__bar-fill--o50 { margin-left: 50%; }
.licence-stages .licence-stages__bar-fill--o55 { margin-left: 55%; }
.licence-stages .licence-stages__bar-fill--o60 { margin-left: 60%; }
.licence-stages .licence-stages__bar-fill--o65 { margin-left: 65%; }
.licence-stages .licence-stages__bar-fill--o70 { margin-left: 70%; }
.licence-stages .licence-stages__bar-fill--o75 { margin-left: 75%; }
.licence-stages .licence-stages__bar-fill--o80 { margin-left: 80%; }
.licence-stages .licence-stages__bar-fill--o85 { margin-left: 85%; }
.licence-stages .licence-stages__bar-fill--o90 { margin-left: 90%; }
.licence-stages .licence-stages__bar-fill--o95 { margin-left: 95%; }
.licence-stages .licence-stages__bar-fill--o100 { margin-left: 100%; }

/* Long chips have to be allowed to wrap once the column narrows, or they push
   the rules row into a horizontal overflow. */
@media (max-width: 520px) {
  .licence-stages {
    padding: var(--spacing-5) var(--spacing-4);
  }

  .licence-stages .licence-stages__rule {
    white-space: normal;
  }
}
/* Provider Profile Page Styles */

/* ========================================
   UNIFIED CARD STYLES
   All cards use consistent styling:
   - border-radius: 16px
   - border: 1px solid var(--color-gray-100)
   - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04)
   ======================================== */

/* Breadcrumbs */
.breadcrumbs {
  padding: var(--spacing-3) 0;
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-100);
}

.breadcrumbs__list {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-sm);
  /* One line always: a five-crumb trail wrapping into a ragged block was the
     first thing a phone saw. The tail scrolls instead, scrollbar hidden. */
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.breadcrumbs__list::-webkit-scrollbar {
  display: none;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.breadcrumbs__item:not(:last-child)::after {
  content: "›";
  color: var(--color-gray-400);
}

.breadcrumbs__link {
  color: var(--color-gray-500);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumbs__link:hover {
  color: var(--color-primary);
}

.breadcrumbs__item--current span {
  color: var(--color-secondary);
  font-weight: var(--font-weight-medium);
}

/* Layout */
.provider-profile {
  padding: var(--spacing-8) 0 var(--spacing-12);
  background: var(--color-white);
  min-height: 100vh;
}

.provider-profile__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--spacing-24);
  align-items: start;
}

/* ---- Identity: Google attribution mark ---- */
.provider-identity__g {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ===========================================
   VEHICLE — the car you'll learn in
   =========================================== */
.provider-vehicle {
  display: flex;
  gap: var(--spacing-4);
  align-items: flex-start;
}

.provider-vehicle__image {
  flex: 0 0 148px;
}

/* The photos are cutouts — no frame, no wash; a box read as a thumbnail
   widget where the car should just sit on the card. */
.provider-vehicle__image img {
  width: 148px;
  height: 100px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.provider-vehicle__info {
  min-width: 0;
  flex: 1 1 auto;
}

.provider-vehicle__name {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
}

.provider-vehicle__meta {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-500);
  margin-left: var(--spacing-2);
}

/* The safety fact stated as a benefit — renders only when dual_controls. */
.provider-vehicle__dual {
  display: flex;
  gap: var(--spacing-2);
  align-items: flex-start;
  margin-top: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  /* Brand wash, not a green success alert — same warm cream the pricing
     card's selected row wears, with the icon in brand orange and the copy
     in the text-legal amber. */
  background: var(--color-primary-50);
  border: var(--border-width) solid var(--color-primary-200);
  border-radius: var(--radius-md);
}

.provider-vehicle__dual i {
  color: var(--color-primary);
  font-size: var(--font-size-base);
  margin-top: 2px;
}

.provider-vehicle__dual p {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-gray-600);
}

.provider-vehicle__dual strong {
  color: var(--color-primary-text);
}

@media (max-width: 640px) {
  /* Photo on top, full width — where a phone wants it. */
  .provider-vehicle {
    flex-direction: column;
  }

  .provider-vehicle__image,
  .provider-vehicle__image img {
    width: 100%;
    flex-basis: auto;
    height: 100px;
  }
}

/* ---- Service area furniture ---- */
.service-area-lede {
  margin: calc(-1 * var(--spacing-2)) 0 var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.service-area-map-container {
  position: relative;
}

/* Rides the map like a locality label. */
.service-area-chip {
  position: absolute;
  top: var(--spacing-3);
  left: var(--spacing-3);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-full);
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
  pointer-events: none;
  z-index: 2;
}

.service-area-chip i {
  color: var(--color-primary);
}

.service-area-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
}

.service-area-suburb-chip {
  border: var(--border-width) solid var(--border-color);
  background: var(--color-white);
  border-radius: var(--radius-full);
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* ---- Reviews: summary bar + two-up clamped cards ---- */
.reviews-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin: var(--spacing-4) 0;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
}

.reviews-summary__score {
  font-family: var(--font-family-heading);
  font-size: 34px;
  font-weight: var(--font-weight-extrabold, 800);
  letter-spacing: -0.03em;
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
}

.reviews-summary__meta {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-top: 2px;
}

/* Places requires a visible notice of how reviews were ordered and filtered.
   It is a disclosure, not a selling line, so it stays the quietest text here. */
.reviews-summary__notice {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  margin-top: var(--spacing-1);
}

.review-card__more {
  background: none;
  border: 0;
  padding: 0;
  margin-top: var(--spacing-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-text);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary-200);
}

/* ===========================================
   IDENTITY BLOCK — the profile hero
   =========================================== */
/* Identity left, the verification panel right: the panel fills the width the
   old floating price wasted, with the strongest content the page has. */
/* The hero owes the same bottom padding every section carries (spacing-5 top
   and bottom = a 40px boundary), or the next section's heading sits closer to
   the credentials than their own label does. */
.provider-card__hero {
  padding-bottom: var(--spacing-5);
}

/* Option 2 from the identity canvas: who on the left, a compact credentials
   column on the right — the whole identity in one glance-height band. */
.provider-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: var(--spacing-6);
  align-items: center;
}

.provider-identity__who {
  display: flex;
  gap: var(--spacing-5);
  /* Centre, not top: the text column is shorter than the 120px portrait, and
     top-alignment dropped all the slack below the facts line. */
  align-items: center;
  min-width: 0;
}

.provider-identity__photo-wrapper {
  position: relative;
  flex: 0 0 120px;
}

.provider-identity__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  /* A hairline so the crop has an edge: a light photo, or one with a white
     studio background, otherwise dissolves into the page and the portrait
     stops reading as a portrait. box-sizing is border-box globally, so the
     circle stays 120px and the verification badge above keeps its alignment. */
  border: 1px solid var(--color-gray-200);
}

/* The verification rosette rides the portrait — the same fa-stack badge the
   listing cards wear, on a white ring so it reads against any photo. */
.provider-identity__tick {
  position: absolute;
  /* Centre of the badge sits ON the circle's edge (~45° down-right) — at the
     bounding-box corner it hung below the portrait's visible border. */
  right: 2px;
  bottom: 8px;
  /* A solid ringed disc, not the wavy rosette: the certificate's scalloped
     edge fought the round crop. The rosette stays on cards and pills, where
     it sits on flat white. */
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: #1da1f2; /* the rosette's blue, so verified stays one colour */
  color: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--color-white);
}

.provider-identity__tick i {
  font-size: 12px;
}

.provider-identity__info {
  min-width: 0;
}

.provider-identity__rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  /* No top margin — the name's margin-bottom owns this gap (same doubling
     the badge had). */
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-secondary);
}

/* Scoped to the count element only: a bare "span" selector here also caught
   the star partial's internal layers and painted the gold fill grey. */
.provider-identity__count {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

a.provider-identity__count {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-gray-300);
}

/* The same "New" badge the listing cards wear (instructor-card__badge--new).
   No margin of its own: the name's 8px margin-bottom is the whole gap —
   adding spacing-2 here doubled it to 16. */
.provider-identity__new-badge {
  margin-top: 0;
}

/* One dot-separated sentence of teaching facts. A sentence carries two facts
   or six with the same grace; the chip row this replaces read as leftover UI
   the moment a sparse profile reduced it to one pill. */
.provider-identity__facts {
  /* spacing-2, not 1: the badge above is a pill with visible height, and 4px
     left the facts nearly touching its border. */
  margin: var(--spacing-2) 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  /* 600/medium, not 500/normal: "98% test pass rate" is a selling fact, not a
     footnote — one step up, still clearly under the name and headings. */
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
}

/* ---- the credentials column ---- */
.provider-identity__checks {
  border-left: var(--border-width) solid var(--color-gray-200);
  padding-left: var(--spacing-6);
}

/* A column label, not a section heading — it names a sub-group inside the
   hero, the role the old VERIFIED BY DRIVEBUDDY label had. */
.provider-identity__checks-title {
  margin: 0 0 var(--spacing-2);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-600);
}

.provider-identity__checks ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* The badge pill each check has always worn, stacked in the column. */
.provider-identity__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  align-self: flex-start;
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-full);
  padding: var(--spacing-1) var(--spacing-3);
  font-size: 13px;
  color: var(--color-gray-700);
  white-space: nowrap;
}

.provider-identity__pill > i {
  color: var(--color-secondary-light);
  font-size: var(--font-size-sm);
}

.provider-identity__pill-rosette {
  font-size: 8px;
}

@media (max-width: 900px) {
  /* The credentials column stacks under the identity and loses its divider;
     the lines wrap into a row. */
  .provider-identity {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-4);
  }

  .provider-identity__checks {
    border-left: 0;
    padding-left: 0;
  }

  .provider-identity__checks ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-1) var(--spacing-4);
  }
}

/* Mobile: centred and ceremonial — the one thing EzLicence's header gets
   right. A stacked axis makes short lines read as intentional, where the
   desktop two-column squeezed into 390px produced ragged wraps. Unlike
   theirs: no dead band, no car-in-a-circle, and the checks stay one compact
   pill row instead of a boxed list. */
@media (max-width: 640px) {
  .provider-identity__who {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-3);
  }

  .provider-identity__rating {
    justify-content: center;
  }

    .provider-identity__facts {
    margin-top: var(--spacing-2);
  }

  .provider-identity__tick {
    width: 24px;
    height: 24px;
    right: 5px;
    bottom: 10px;
  }

  .provider-identity__tick i {
    font-size: 10px;
  }

  .provider-identity__checks-title {
    display: none;
  }

  /* Centred layout: the ticked lines wrap as one centred row. */
  .provider-identity__checks ul {
    justify-content: center;
  }
}


.provider-profile__sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

@media (max-width: 1024px) {
  .provider-profile__layout {
    grid-template-columns: 1fr;
    max-width: 700px;
    padding: 0 var(--spacing-4);
  }

  .provider-profile__sidebar {
    position: static;
    width: 100%;
  }

  .provider-profile__main {
    width: 100%;
  }

  .profile-card {
    display: none;
  }

  .pricing-card {
    width: 100%;
    margin-top: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .provider-profile__layout {
    padding: 0 var(--spacing-2);
    gap: var(--spacing-3);
    max-width: 100%;
  }
}

/* ========================================
   PROVIDER CARD - Content on background
   ======================================== */






@media (max-width: 640px) {
  .provider-card__hero-row {
    flex-wrap: wrap;
    gap: var(--spacing-2);
  }

  }

.provider-card__verified-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 1rem;
}

@media (max-width: 640px) {
  .provider-card__photo {
    width: 90px;
    height: 90px;
  }

  .provider-card__name {
    font-size: var(--font-size-2xl);
  }
}

.provider-card__name {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  font-family: var(--font-family-heading);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 var(--spacing-2) 0;
}



@media (max-width: 640px) {
  .provider-card__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4) var(--spacing-2);
    padding: var(--spacing-4) var(--spacing-2);
    background: var(--color-gray-50);
    margin-left: calc(-1 * var(--spacing-2));
    margin-right: calc(-1 * var(--spacing-2));
    border-radius: 0;
  }
}

/* Sections */
.provider-card__section {
  padding: var(--spacing-5) 0;
}

@media (max-width: 640px) {
  .provider-card__section {
    padding: var(--spacing-4) 0;
  }

  .provider-card__section-title {
    text-align: center;
  }
}

.provider-card__section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-4) 0;
  font-family: var(--font-family-heading);
  letter-spacing: -0.02em;
}


/* Bio */
.provider-card__bio {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  line-height: 1.75;
  /* Medium rather than regular: at 14px in gray-700 the instructor's own words
     were the lightest text in the column, under headings and pills that are
     600 and 800. DM Sans is loaded at 500, so this is a real cut and not a
     synthesised weight. */
  font-weight: var(--font-weight-medium);
}

.provider-card__read-more {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  margin-left: var(--spacing-1);
}

.provider-card__read-more:hover {
  text-decoration: underline;
}

/* Vehicle */
.provider-card__vehicle {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.provider-card__vehicle-image {
  width: 100px;
  height: 80px;
  flex-shrink: 0;
}

.provider-card__vehicle-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.provider-card__vehicle-info {
  flex: 1;
}

.provider-card__vehicle-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  font-family: var(--font-family-heading);
  margin: 0 0 var(--spacing-2) 0;
}

.provider-card__vehicle-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

.provider-card__vehicle-feature {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  font-weight: var(--font-weight-medium);
}

.provider-card__vehicle-feature i {
  color: var(--color-secondary);
  font-size: var(--font-size-xs);
}

/* Lesson Types */
.provider-card__lesson-types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

.provider-card__lesson-type {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
}

.provider-card__lesson-type i {
  color: var(--color-secondary);
}

@media (max-width: 560px) {
  .provider-card__stats {
    flex-wrap: wrap;
    gap: var(--spacing-4);
  }
}

/* ========================================
   REVIEWS SECTION - Separate clean card
   ======================================== */

.provider-reviews {
  margin-top: var(--spacing-6);
}

.provider-reviews__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0;
  font-family: var(--font-family-heading);
  letter-spacing: -0.02em;
}

/* Profile Card */
.profile-card {
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--spacing-6);
  box-shadow:
    0 4px 15px rgba(35, 47, 62, 0.08),
    0 2px 6px rgba(35, 47, 62, 0.05);
}

.profile-card__content {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-16);
  justify-content: center;
  align-items: stretch;
}

.profile-card__photo-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-card__photo-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.profile-card__photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border: 2px solid var(--color-gray-200);
}

.profile-card__verified-badge {
  position: absolute;
  bottom: 2px;
  right: 0;
  font-size: 0.9rem;
}

.profile-card__name-section {
  margin-top: var(--spacing-2);
  text-align: center;
}

.profile-card__name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  font-family: var(--font-family-heading);
}

.profile-card__role {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Stats Column */
.profile-card__stats {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.profile-card__stat {
  padding-bottom: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

.profile-card__stat:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}

.profile-card__stat--bordered {
  border-bottom: 1px solid var(--color-gray-100);
}

.profile-card__stat-value {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

.profile-card__stat-number {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  font-family: var(--font-family-heading);
}

.profile-card__stat-number--medium {
  font-size: var(--font-size-xl);
}

.profile-card__stat-star {
  color: var(--color-accent-yellow);
  font-size: var(--font-size-xl);
}

.profile-card__stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}


/* Service Area Map */
.service-area-map-container {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-gray-100);
}

.service-area-map {
  width: 100%;
  height: 280px;
}

/* Service Area Summary */
.service-area-summary {
  margin-top: var(--spacing-3);
}

.service-area-summary__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin: 0;
}

.service-area-summary__toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
}

.service-area-summary__toggle:hover {
  color: var(--color-primary-dark);
}

.service-area-summary__list {
  margin-top: var(--spacing-3);
}

.service-area-suburbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-area-suburbs li {
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--color-gray-700);
}

.service-area-coming-soon {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-top: var(--spacing-2);
}

/* Reviews Section */
.reviews-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.reviews-header__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
}

.reviews-header__badge svg {
  color: #4285F4;
}

/* Official "Powered by Google" attribution logo — do not recolor or distort */
.reviews-header__powered-by {
  height: 18px;
  width: auto;
}

.reviews-list__note {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-3);
}

/* Per-card source mark (DriveBuddy / Google) next to the reviewer name */
.review-card__source {
  height: 14px;
  width: 14px;
  vertical-align: middle;
  margin-left: var(--spacing-1);
  display: inline-block;
}

/* Reviews Summary */
.reviews-summary {
  background: var(--color-gray-50);
  border-radius: 12px;
  padding: var(--spacing-5);
  margin-bottom: var(--spacing-6);
}

.reviews-summary__rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.reviews-summary__number {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  font-family: var(--font-family-heading);
  letter-spacing: -0.03em;
}

.reviews-summary__stars {
  color: var(--color-accent-yellow);
  font-size: var(--font-size-lg);
  letter-spacing: 2px;
}

.star--empty {
  opacity: 0.3;
}

.reviews-summary__count {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Reviews List */
.reviews-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-4);
  align-items: start;
}

@media (max-width: 700px) {
  .reviews-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Review Card */
.review-card {
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.review-card:hover {
  background: var(--color-gray-100);
}

.review-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

.review-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  flex-shrink: 0;
}

/* Google supplies the author's avatar and requires it be shown unaltered, so
   it takes the same 40px slot as the initial disc it replaces. */
.review-card__avatar--photo {
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--color-gray-100);
}

.review-card__info {
  flex: 1;
}

.review-card__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  font-family: var(--font-family-heading);
  margin-bottom: var(--spacing-1);
}

.review-card__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.review-card__stars {
  color: var(--color-accent-yellow);
  font-size: var(--font-size-sm);
  letter-spacing: 1px;
}

.review-card__date {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

/* No resting underline — same reasoning as .learner-voice__source: required
   attribution that also happens to be an exit to the instructor's own listing.
   Visible and clickable, just not advertised. Underline on hover and focus. */
.review-card__date--link {
  text-decoration: none;
}

.review-card__date--link:hover,
.review-card__date--link:focus-visible {
  color: var(--color-secondary);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 2px;
}

.review-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Reviews Footer */
.reviews-footer {
  margin-top: var(--spacing-5);
  text-align: center;
}

.reviews-footer__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
}

.reviews-footer__btn svg {
  transition: transform 0.2s ease;
}

.reviews-footer__btn:hover svg {
  transform: translateY(2px);
}

@media (max-width: 768px) {
  .reviews-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .reviews-summary__rating {
    flex-wrap: wrap;
  }
}

/* ========================================
   PRICING CARD - Enhanced design
   ======================================== */

.pricing-card {
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--spacing-6);
  box-shadow:
    0 4px 15px rgba(35, 47, 62, 0.08),
    0 2px 6px rgba(35, 47, 62, 0.05);
}

.pricing-card__availability {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  margin-bottom: var(--spacing-5);
}

.pricing-card__availability-dot {
  width: 10px;
  height: 10px;
  background: #10b981;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
}

.pricing-card__availability-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pricing-card__availability-status {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: #065f46;
}

.pricing-card__availability-next {
  font-size: var(--font-size-xs);
  color: #047857;
}

.pricing-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-4) 0;
}

.pricing-card__row--bordered {
  border-bottom: 1px solid var(--color-gray-100);
}

.pricing-card__row:first-of-type {
  padding-top: 0;
}

.pricing-card__label-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.pricing-card__label {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  font-family: var(--font-family-heading);
}

.pricing-card__sublabel {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.pricing-card__text {
  font-size: var(--font-size-base);
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
}

.pricing-card__price {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  font-family: var(--font-family-heading);
}

.pricing-card__price--large {
  font-size: var(--font-size-2xl);
}

.pricing-card__badge {
  background: var(--color-accent-yellow);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
}

.pricing-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin-top: 5px;
}

.pricing-card__actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
}

.pricing-card__btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
}

.pricing-card__btn--primary:hover {
  background: var(--color-primary-dark);
}

/* Check availability button - filled by default */
.pricing-card .btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.pricing-card .btn-secondary:hover {
  background-color: var(--color-secondary-dark, #1a1a2e);
}

/* Trust Footer */
.pricing-card__trust {
  margin-top: var(--spacing-5);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-gray-100);
  display: flex;
  justify-content: center;
  gap: var(--spacing-4);
}

.pricing-card__trust-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.pricing-card__trust-item i {
  color: var(--color-secondary);
  font-size: var(--font-size-lg);
}

.pricing-card__trust-item i.fa-rotate-left {
  font-size: var(--font-size-base);
}

.pricing-card__trust-item i.fa-stripe {
  font-size: var(--font-size-3xl);
  color: #635bff;
}

.pricing-card__price-unit {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
}

/* Payment Methods */
.pricing-card__payment {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-gray-100);
  text-align: center;
}

.pricing-card__payment-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-2);
}

.pricing-card__payment-icons {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.pricing-card__payment-icon--svg {
  height: 24px;
  width: auto;
}

/* Pricing Card Title */
.pricing-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-4) 0;
  font-family: var(--font-family-heading);
}

/* Pricing Card Note */
.pricing-card__note {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-gray-100);
}

.pricing-card__note i {
  color: var(--color-primary);
}

/* ========================================
   PACKAGE OPTIONS - Selection UI
   ======================================== */

.package-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-5);
}

/* Option rows: hairline border, radius one step inside the card's 16px, and
   selection carried by colour — an inset ring thickens the selected border to
   a visual 2px without moving a pixel of layout. The old 2px grey border on
   every row made the whole stack read heavier than the CTA. */
.package-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-white);
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.package-option:hover {
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
}

.package-option--selected {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  background: rgba(255, 107, 0, 0.04);
}

.package-option--selected:hover {
  border-color: var(--color-primary);
  background: rgba(255, 107, 0, 0.06);
}

.package-option__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.package-option__content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Name and badge on one line, the reason underneath: every row now carries a
   sentence about what it is, so the column is the natural shape. */
.package-option__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.package-option__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  font-family: 'Onest';
}

.package-option__badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  background: var(--color-accent-yellow);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.package-option__price {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  font-family: var(--font-family-heading);
  white-space: nowrap;
  padding-left: var(--spacing-2);
}

/* The undiscounted total, so a pack row shows what the discount is off. */
.package-option__was {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-400);
  text-decoration: line-through;
  margin-right: 4px;
}

/* Dollars saved, in the success colour rather than the brand orange: it is a
   different kind of statement from the CTA, and #FF9900 fails contrast as
   text anyway. */
.package-option__badge--save {
  background: var(--color-success-50, #ECFDF5);
  color: var(--color-success-700);
}

/* The pack rows are the offer, so they get a touch more presence than the
   single lessons without shouting over the selected state. */
.package-option--pack .package-option__name {
  color: var(--color-secondary);
}

/* ---- The rate, at the top of the card -------------------------------------
   The card used to show $70 and $140 and never state $70/hr, leaving the
   learner to divide one by the other. */
.pricing-card__rate {
  display: flex;
  /* center, not baseline: the meta is two lines, and baseline hung its
     second line below the rate — the pair read as differently aligned. */
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  padding-bottom: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  border-bottom: var(--border-width) solid var(--border-color);
}

.pricing-card__rate-amount {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
  color: var(--color-secondary);
}

.pricing-card__rate-unit {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  color: var(--color-gray-500);
}

.pricing-card__rate-meta {
  margin: 0;
  text-align: right;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

/* ---- Instalment line ------------------------------------------------------
   Shown on packs only. Klarna and Zip are offered at every amount at
   checkout, so this is a choice about where the message helps, not a
   restriction on how anyone can pay. */
/* Pay later gets its own small section: the brands' own marks, a label, and
   the instalment for the selected pack. */
.pricing-card__bnpl {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin: var(--spacing-3) 0 0;
  padding: var(--spacing-2) var(--spacing-3);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.pricing-card__bnpl[hidden] {
  display: none;
}

/* Brand badges, when the assets are in place. Fixed height so an unfamiliar
   logo cannot blow the row out, and no colour changes: every brand's toolkit
   forbids recolouring its mark. */
.bnpl-badges {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
}

/* Official marks straight from each brand's kit — never recoloured, height
   normalised so Klarna's badge, Afterpay's wordmark and Zip's tile sit as one
   row. A brand with no asset yet falls back to its name as quiet type. */
.bnpl-badges__badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  white-space: nowrap;
}

.bnpl-badges__badge svg,
.bnpl-badges__badge img {
  height: 22px;
  width: auto;
  display: block;
  border-radius: 4px;
}

.pricing-card__bnpl-copy {
  display: block;
  font-size: var(--font-size-xs);
  line-height: 1.35;
  color: var(--color-gray-500);
}

.pricing-card__bnpl-copy strong {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
}

/* The portability promise as a quiet footnote: it de-risks the pack without
   competing with the CTA or the pay-later section for attention. */
.pricing-card__footnote {
  margin: var(--spacing-3) 0 0;
  text-align: center;
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-gray-500);
}

/* Second action, quietly. Two full-width buttons at equal weight — orange
   "Book now" over a navy "Check availability" — made the card ask two
   questions at once. */
.pricing-card__btn--quiet {
  border-color: var(--color-gray-300);
  color: var(--color-gray-700);
  background: var(--color-white);
}

.pricing-card__btn--quiet:hover,
.pricing-card__btn--quiet:focus-visible {
  border-color: var(--color-gray-400);
  background: var(--color-gray-50);
  color: var(--color-secondary);
}

/* A ring that fills when chosen. It replaced a row of tick icons: the
   unselected rows carried grey ticks, which read as "done" or "included"
   rather than "choose me", and three ticks in a three-option list said
   nothing at all. */
.package-option__radio {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-gray-300);
  display: grid;
  place-items: center;
  transition: border-color 0.15s ease;
}

.package-option--selected .package-option__radio {
  border-color: var(--color-primary);
}

.package-option--selected .package-option__radio::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Package option subtext (for custom) */
.package-option__content--custom {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-1);
}

.package-option__subtext {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

/* Quiet green recommendation beside a row's name — text, not a pill, so it
   reads as guidance rather than a second price badge. */
.package-option__flag {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-success-700);
  margin-left: var(--spacing-2);
  white-space: nowrap;
}

/* Green badge variant */
.package-option__badge--green {
  background: #10b981;
}

/* ========================================
   CUSTOM HOURS SELECTOR
   ======================================== */

.custom-hours-selector {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.custom-hours-selector.hidden {
  display: none;
}

.custom-hours-selector__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-3);
}

.custom-hours-selector__input-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.custom-hours-selector__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  color: var(--color-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.custom-hours-selector__btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.custom-hours-selector__btn:active {
  background: var(--color-gray-100);
}

.custom-hours-selector__input {
  width: 80px;
  text-align: center;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  color: var(--color-secondary);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2) var(--spacing-3);
  -webkit-appearance: textfield;
          appearance: textfield;
  -moz-appearance: textfield;
}

.custom-hours-selector__input::-webkit-outer-spin-button,
.custom-hours-selector__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.custom-hours-selector__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.custom-hours-selector__pricing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-3);
  background: var(--color-white);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-3);
}

.custom-hours-selector__breakdown {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.custom-hours-selector__original {
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
  text-decoration: line-through;
}

.custom-hours-selector__discount {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  background: #10b981;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.custom-hours-selector__total {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  font-family: var(--font-family-heading);
}

.custom-hours-selector__hint {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin: 0;
}

.custom-hours-selector__hint i {
  color: #10b981;
}

/* ========================================
   USP CARD - Why book with DriveBuddy
   ======================================== */

/* The guarantee card (trust-panel canvas, Option A): the brand's warm cream,
   the same wash the dual-controls note and the selected pricing row wear. */
.usp-card {
  background: var(--color-primary-50);
  border: var(--border-width) solid var(--color-primary-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-6);
  box-shadow:
    0 4px 15px rgba(35, 47, 62, 0.08),
    0 2px 6px rgba(35, 47, 62, 0.05);
}

.usp-card__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-4) 0;
  font-family: var(--font-family-heading);
  letter-spacing: -0.02em;
}

.usp-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.usp-card__mark {
  flex: 0 0 auto;
  color: var(--color-primary);
}

/* One ticked promise per line — the tick is the only ornament. */
.usp-card__promise {
  position: relative;
  margin: 0;
  padding-left: var(--spacing-5);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-gray-600);
}

.usp-card__promise::before {
  content: "\2713";
  position: absolute;
  left: 2px;
  top: 1px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-success-700);
}

.usp-card__promise strong {
  color: var(--color-secondary);
}


/* Other Instructors Section */
.other-instructors {
  padding: var(--spacing-12) 0;
  background: var(--color-gray-50);
}

.other-instructors__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-6);
  font-family: var(--font-family-heading);
  letter-spacing: -0.03em;
}

.other-instructors__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-5);
}

@media (max-width: 1024px) {
  .other-instructors__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .other-instructors__grid {
    grid-template-columns: 1fr;
  }
}

/* .instructor-card__profile-img now lives in components/_cards.css, which owns
   the instructor card. */

.instructor-card__location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin: var(--spacing-3) 0;
}

.instructor-card__location svg {
  color: var(--color-secondary);
}

.other-instructors__nav {
  display: flex;
  justify-content: center;
  gap: var(--spacing-3);
  margin-top: var(--spacing-8);
}

.other-instructors__nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-secondary);
  transition: all 0.2s ease;
}

.other-instructors__nav-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Mobile Sticky Booking Bar */
.mobile-booking-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-200);
  padding: var(--spacing-3) var(--spacing-3);
  z-index: 100;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .mobile-booking-bar {
    display: block;
  }

  /* Add padding to bottom of page so content isn't hidden behind sticky bar */
  .provider-profile {
    padding-bottom: calc(var(--spacing-12) + 80px);
  }
}

.mobile-booking-bar__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  max-width: var(--container-max-width);
  margin: 0 auto;
}

/* Two lines now — the rate, and what a pack saves — so the baseline row moved
   inside .mobile-booking-bar__rate. */
.mobile-booking-bar__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  flex: 0 0 auto;
}

.mobile-booking-bar__rate {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

/* The bar used to sell the hourly rate alone. On a phone it is the only place
   most visitors hear that buying ahead is cheaper, because the card itself is
   two-thirds of the way down the document. */
.mobile-booking-bar__meta {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-primary-text);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* On the narrowest phones the bar can only afford one action, and "Check
   availability" is the one the card repeats a few hundred pixels below. */
@media (max-width: 430px) {
  .mobile-booking-bar__actions .btn-secondary {
    display: none;
  }
}

/* Once the card's own buttons are on screen the bar steps aside rather than
   covering them with a duplicate CTA (sticky_cta_controller). */
.mobile-booking-bar--hidden {
  transform: translateY(110%);
  pointer-events: none;
}

.mobile-booking-bar {
  transition: transform 0.2s ease;
}

.mobile-booking-bar__amount {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  font-family: var(--font-family-heading);
  letter-spacing: -0.03em;
}

.mobile-booking-bar__unit {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.mobile-booking-bar__actions {
  display: flex;
  gap: var(--spacing-2);
  /* The CTA takes the room the price does not: at 390px it was rendering 90px
     wide next to a price block that had grown a second line. */
  flex: 1 1 auto;
  justify-content: flex-end;
}

.mobile-booking-bar__actions .mobile-booking-bar__btn--primary {
  flex: 1 1 auto;
  max-width: 200px;
}

.mobile-booking-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.mobile-booking-bar__btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Google supplies the review author's profile URI and the attribution is
   incomplete without it, so the name is a link. Kept visually identical to the
   plain name it replaces — this is attribution, not a call to action. */
.review-card__author-link {
  color: inherit;
  text-decoration: none;
}

.review-card__author-link:hover,
.review-card__author-link:focus-visible {
  text-decoration: underline;
}
/* Instructor Dashboard Layout */

.dashboard-wrapper {
  background: var(--color-gray-50);
  min-height: calc(100vh - 80px);
}

.dashboard {
  display: flex;
  gap: var(--spacing-6);
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--spacing-6);
}

/* Sidebar */
.dashboard__sidebar {
  width: 280px;
  /* Scroll shadows: soft edges appear at the top/bottom whenever more menu
     items are hidden in that direction, so the sidebar reads as scrollable.
     The white gradients scroll with the content (attachment: local) and
     cover the shadows when there's nothing more to see. */
  background:
    linear-gradient(var(--color-white) 30%, rgba(255, 255, 255, 0)) center top,
    linear-gradient(rgba(255, 255, 255, 0), var(--color-white) 70%) center bottom,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.18), transparent) center top,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.18), transparent) center bottom,
    var(--color-white);
  background-repeat: no-repeat;
  background-size: 100% 48px, 100% 48px, 100% 14px, 100% 14px, auto;
  background-attachment: local, local, scroll, scroll;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-xl);
  /* Keep enough bottom padding for the scroll shadow to sit clear of items */
  padding: var(--spacing-4) 0 var(--spacing-6);
  position: sticky;
  top: calc(80px + var(--spacing-6));
  height: -moz-fit-content;
  height: fit-content;
  max-height: calc(100vh - 80px - var(--spacing-12));
  overflow-y: auto;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}

/* Force an always-visible scrollbar (macOS overlay scrollbars hide until
   scrolled, which is exactly the discoverability problem). */
.dashboard__sidebar::-webkit-scrollbar {
  width: 8px;
}

.dashboard__sidebar::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
}

.dashboard__sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.dashboard__sidebar-header {
  padding: var(--spacing-2) var(--spacing-5) var(--spacing-4);
  border-bottom: var(--border-width) solid var(--border-color);
  margin-bottom: var(--spacing-2);
}

.dashboard__sidebar-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-3);
}

.dashboard__user-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.dashboard__user-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  overflow: hidden;
  flex-shrink: 0;
}

.dashboard__user-avatar-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.dashboard__user-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  font-size: var(--font-size-base);
}

.dashboard__user-role {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Navigation */
.dashboard__nav {
  padding: var(--spacing-2) 0;
}

/* Mobile-only menu button that expands/collapses the nav (see media query) */
.dashboard__nav-toggle {
  display: none;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: 500;
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
  cursor: pointer;
}

.dashboard__nav-section {
  margin-bottom: var(--spacing-2);
}

.dashboard__nav-label {
  padding: var(--spacing-1) var(--spacing-6);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dashboard__nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-6);
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
}

.dashboard__nav-item:hover {
  background: var(--color-gray-50);
  color: var(--color-primary);
}

.dashboard__nav-item--active {
  background: var(--color-primary-50);
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.dashboard__nav-item--disabled {
  color: var(--color-gray-400);
  cursor: not-allowed;
}

.dashboard__nav-item--disabled:hover {
  background: transparent;
  color: var(--color-gray-400);
}

.dashboard__nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.dashboard__nav-badge {
  margin-left: auto;
  padding: var(--spacing-1) var(--spacing-2);
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
}

.dashboard__nav-badge--soon {
  background: var(--color-primary-50);
  color: var(--color-primary);
}

/* Main Content */
.dashboard__main {
  flex: 1;
  padding: 0;
  min-width: 0; /* Prevent flex overflow */
}

.dashboard__header {
  margin-bottom: var(--spacing-8);
}

.dashboard__header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-2);
}

.dashboard__header-actions {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
}

.dashboard__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
}

.dashboard__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
}

/* Stats Overview */
.dashboard__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-8);
}

.dashboard__stat-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-5);
  border: var(--border-width) solid var(--border-color);
  transition: all 0.2s ease;
}

.dashboard__stat-card:hover {
  box-shadow: var(--shadow-md);
}

.dashboard__stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-3);
  font-size: var(--font-size-xl);
}

.dashboard__stat-icon--primary { background: var(--color-primary-50); }
.dashboard__stat-icon--success { background: rgba(16, 185, 129, 0.1); }
.dashboard__stat-icon--info { background: rgba(59, 130, 246, 0.1); }
.dashboard__stat-icon--warning { background: rgba(245, 158, 11, 0.1); }

.dashboard__stat-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-1);
}

.dashboard__stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Content Cards */
.dashboard__card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  border: var(--border-width) solid var(--border-color);
  margin-bottom: var(--spacing-6);
  overflow: hidden;
}

.dashboard__card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-5) var(--spacing-6);
  border-bottom: var(--border-width) solid var(--border-color);
}

.dashboard__card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.dashboard__section-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-1);
}

.dashboard__section-action {
  margin-top: var(--spacing-4);
}

.dashboard__inline-note {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-6);
  text-align: center;
}

.dashboard__card-body {
  padding: var(--spacing-6);
}

.dashboard__card-footer {
  padding: var(--spacing-4) var(--spacing-6);
  background: var(--color-gray-50);
  border-top: var(--border-width) solid var(--border-color);
  text-align: center;
}

/* "N more upcoming lessons →": reads as a link, not a caption */
.dashboard__card-footer-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.dashboard__card-footer-link:hover,
.dashboard__card-footer-link:focus-visible {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Quick Actions Grid */
.dashboard__actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
}

.dashboard__action-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-5);
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all 0.2s ease;
}

.dashboard__action-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.dashboard__action-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

.dashboard__action-content {
  flex: 1;
}

.dashboard__action-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-1);
}

.dashboard__action-desc {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.dashboard__action-arrow {
  color: var(--color-gray-400);
  transition: transform 0.2s ease;
}

.dashboard__action-card:hover .dashboard__action-arrow {
  transform: translateX(4px);
  color: var(--color-primary);
}

/* Profile Completion */
.dashboard__completion {
  margin-bottom: var(--spacing-6);
}

.dashboard__completion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-3);
}

.dashboard__completion-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.dashboard__completion-percent {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.dashboard__completion-bar {
  height: 8px;
  background: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.dashboard__completion-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

/* Item Lists */
.dashboard__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.dashboard__list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.dashboard__list-item-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.dashboard__list-item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
}

.dashboard__list-item-title {
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
}

.dashboard__list-item-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.dashboard__muted {
  color: var(--color-gray-500);
}

/* Empty State */
.dashboard__empty {
  text-align: center;
  padding: var(--spacing-8);
  color: var(--color-gray-500);
}

.dashboard__empty-icon {
  font-size: 48px;
  margin-bottom: var(--spacing-4);
  opacity: 0.5;
}

.dashboard__empty-text {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-4);
}

/* Tags/Badges */
.dashboard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.dashboard__tag {
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-full);
}

/* Responsive */
@media (max-width: 1024px) {
  .dashboard__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard__actions-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard {
    flex-direction: column;
    padding: var(--spacing-4);
    gap: var(--spacing-4);
  }

  .dashboard__sidebar {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    max-height: none;
  }

  /* Collapse the tall nav behind a Menu button so page content starts right
     below a compact header — a full-length menu made every navigation look
     like nothing changed until you scrolled. */
  .dashboard__sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: var(--spacing-2);
  }

  .dashboard__nav-toggle {
    display: flex;
    flex-shrink: 0;
  }

  .dashboard__nav {
    display: none;
  }

  .dashboard__sidebar--open .dashboard__nav {
    display: block;
  }

  .dashboard__sidebar--open .dashboard__sidebar-header {
    border-bottom: var(--border-width) solid var(--border-color);
    margin-bottom: var(--spacing-2);
  }

  .dashboard__stats {
    grid-template-columns: 1fr;
  }
}

/* Badge secondary variant */
.badge--secondary {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

/* Alert Banners */
.dashboard__alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-6);
}

.dashboard__alert--warning {
  background: #FEF3C7;
  border: 1px solid #F59E0B;
}

.dashboard__alert--error {
  background: #FEE2E2;
  border: 1px solid #EF4444;
}

.dashboard__alert--success {
  background: #D1FAE5;
  border: 1px solid #10B981;
}

.dashboard__alert--info {
  background: #DBEAFE;
  border: 1px solid #3B82F6;
}

.dashboard__alert-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard__alert--warning .dashboard__alert-icon {
  color: #D97706;
}

.dashboard__alert-content {
  flex: 1;
}

.dashboard__alert-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-1);
}

.dashboard__alert-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  line-height: var(--line-height-normal);
}

.dashboard__alert-cta {
  margin-top: var(--spacing-3);
}

.dashboard__alert-link {
  display: inline-block;
  margin-left: var(--spacing-2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary, #f58700);
  text-decoration: underline;
}

/* Document Card Header Layout */
.dashboard__card-header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.dashboard__card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  flex-shrink: 0;
}

.dashboard__card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-top: var(--spacing-1);
}

/* Booking notice setting (Availability page) */
.booking-notice-form {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
}

.booking-notice-form__select {
  max-width: 200px;
}

/* Profile Photo Field (dashboard edit form) */
.profile-photo-field {
  margin-bottom: var(--spacing-4);
}

.profile-photo-field__preview {
  margin-bottom: var(--spacing-2);
}

.profile-photo-field__image {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  -o-object-fit: cover;
     object-fit: cover;
}

/* Document Preview */
.document-preview {
  margin-bottom: var(--spacing-4);
}

.document-preview__image {
  max-width: 100%;
  max-height: 300px;
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-color);
  -o-object-fit: contain;
     object-fit: contain;
}

.document-preview__image--profile {
  width: 120px;
  height: 120px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius-full);
}

/* Document Card Actions */
.document-card-actions {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.document-card-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
}

.btn--active {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* Document Card Collapsible Panels */
.document-card-panel {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: var(--border-width) solid var(--border-color);
}

/* Document Details Grid */
.document-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-3);
}

.document-details__item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.document-details__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.document-details__value {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  word-break: break-all;
}

@media (max-width: 480px) {
  .document-details {
    grid-template-columns: 1fr;
  }

  .document-card-actions {
    flex-direction: column;
  }

  .document-card-actions .btn {
    justify-content: center;
  }
}

/* Document PDF */
.document-pdf {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-4);
}

.document-pdf__icon {
  font-size: var(--font-size-2xl);
  color: var(--color-error);
}

.document-pdf__info {
  flex: 1;
}

.document-pdf__filename {
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
}

.document-pdf__size {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Bookings & Earnings pages */

.stats-grid--4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-8);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  text-align: left;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--color-gray-200);
}

.data-table td {
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  border-bottom: 1px solid var(--color-gray-100);
}

.data-table tbody tr:hover {
  background: var(--color-gray-50);
}

.booking-date {
  font-weight: var(--font-weight-medium);
}

.booking-time {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.booking-filters {
  display: flex;
  gap: var(--spacing-2);
}

.status-badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.status-badge--confirmed {
  background: var(--color-success-light, #dcfce7);
  color: var(--color-success-dark, #166534);
}

.status-badge--completed {
  background: var(--color-info-light, #dbeafe);
  color: var(--color-info-dark, #1e40af);
}

.status-badge--held {
  background: var(--color-warning-light, #fef3c7);
  color: var(--color-warning-dark, #92400e);
}

.status-badge--cancelled {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
}

.status-badge--pending {
  background: var(--color-warning-light, #fef3c7);
  color: var(--color-warning-dark, #92400e);
}

.status-badge--ready_for_payout {
  background: var(--color-info-light, #dbeafe);
  color: var(--color-info-dark, #1e40af);
}

.status-badge--paid_out {
  background: var(--color-success-light, #dcfce7);
  color: var(--color-success-dark, #166534);
}

.booking-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-6);
}

.booking-detail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.booking-detail__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.booking-detail__value {
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
}

.empty-state {
  text-align: center;
  padding: var(--spacing-12) var(--spacing-6);
  color: var(--color-gray-500);
}

.empty-state__icon {
  display: block;
  font-size: 2rem;
  color: var(--color-gray-300);
  margin-bottom: var(--spacing-3);
}

@media (max-width: 768px) {
  .stats-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .data-table th:nth-child(4),
  .data-table td:nth-child(4) {
    display: none;
  }

  .booking-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Phones: six columns cannot fit, and squeezing them wrapped the date over
   eight lines and pushed the map and View buttons off the card. Each booking
   becomes a stacked block instead, every value labelled with its column. */
@media (max-width: 640px) {
  .data-table--bookings thead {
    display: none;
  }

  .data-table--bookings tbody tr {
    display: block;
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--color-gray-100);
  }

  .data-table--bookings tbody tr:hover {
    background: transparent;
  }

  .data-table--bookings td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-1) 0;
    border-bottom: none;
  }

  .data-table--bookings td[data-label]::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Amount is hidden at 768px and below; on a phone the stacked layout has
     room for it again. */
  .data-table--bookings td:nth-child(4) {
    display: flex;
  }

  .data-table--bookings .data-table__lead {
    display: block;
    padding-bottom: var(--spacing-2);
  }

  .data-table--bookings .data-table__actions {
    justify-content: flex-start;
    gap: var(--spacing-2);
    padding-top: var(--spacing-2);
  }
}
/* Legal Pages - Matching Blog/Article Style */

/* Legal Page Hero Header */
.legal-page__header {
  background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
  padding: var(--spacing-12) 0 var(--spacing-10);
  text-align: center;
  margin-bottom: 0;
}

.legal-page__header .section__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-4);
  font-family: var(--font-family-heading);
  letter-spacing: -0.02em;
}

.effective-date {
  font-size: var(--font-size-base);
  color: var(--color-gray-500);
  margin: 0;
}

.effective-date + .effective-date {
  margin-top: 0.5rem;
}

/* Legal Content Container */
.legal-page__content {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing-10) var(--spacing-6) var(--spacing-16);
}

/* Legal Sections */
.legal-section {
  margin-bottom: var(--spacing-10);
}

.legal-section h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-top: var(--spacing-10);
  margin-bottom: var(--spacing-4);
  scroll-margin-top: var(--spacing-6);
}

.legal-section h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-3);
}

.legal-section p {
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-4);
}

.legal-section ul,
.legal-section ol {
  margin-bottom: var(--spacing-6);
  padding-left: var(--spacing-6);
}

.legal-section li {
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-2);
}

.legal-section ul li {
  list-style-type: disc;
}

.legal-section ul li::marker {
  color: var(--color-primary);
}

.legal-section ol li {
  list-style-type: decimal;
}

.legal-section a {
  color: var(--color-secondary);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.legal-section a:hover {
  color: var(--color-gray-600);
  text-decoration: none;
}

/* Intro text styling */
.intro-text {
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-4);
}

.intro-text--spaced {
  margin-top: var(--spacing-4);
}

.intro-text--small {
  font-size: var(--font-size-sm);
  font-style: italic;
}

/* First intro paragraph larger like blog */
.legal-section:first-of-type .intro-text:first-child {
  font-size: var(--font-size-lg);
  color: var(--color-gray-700);
}

/* Definitions list */
.definitions-list {
  margin-bottom: var(--spacing-6);
  background: var(--color-gray-50);
  padding: var(--spacing-6);
  border-radius: var(--radius-xl);
}

.definitions-list dt {
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-top: var(--spacing-4);
  font-size: var(--font-size-base);
}

.definitions-list dt:first-child {
  margin-top: 0;
}

.definitions-list dd {
  margin-left: 0;
  padding-left: var(--spacing-4);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-2);
  border-left: 2px solid var(--color-gray-200);
  line-height: 1.7;
}

/* Highlight text for important sections */
.highlight-text {
  background-color: var(--color-primary-50);
  padding: var(--spacing-4) var(--spacing-5);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
  margin-bottom: var(--spacing-6);
  font-size: var(--font-size-base);
  line-height: 1.7;
}

/* Warning text */
.warning-text {
  background-color: #FEF2F2;
  padding: var(--spacing-4) var(--spacing-5);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-error);
  color: #991B1B;
  margin-bottom: var(--spacing-6);
  font-size: var(--font-size-base);
  line-height: 1.7;
}

/* Example box */
.example-box {
  background: var(--color-gray-50);
  padding: var(--spacing-4);
  border-radius: var(--radius-md);
  margin: var(--spacing-4) 0;
}

.example-box p {
  margin: 0;
}

.example-box p + p {
  margin-top: var(--spacing-2);
}

.example-box p:last-child {
  font-style: italic;
}

/* Policy table */
.policy-table {
  width: 100%;
  border-collapse: collapse;
}

.policy-table th {
  text-align: left;
  padding: var(--spacing-3);
  border-bottom: 2px solid var(--color-gray-200);
}

.policy-table td {
  padding: var(--spacing-3);
  border-bottom: 1px solid var(--color-gray-200);
}

/* FAQ Accordion for legal pages - uses shared .faq-item styles from _accordion.css */
.legal-page .faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.legal-page .faq-answer ul {
  margin-top: var(--spacing-3);
  margin-bottom: 0;
  padding-left: var(--spacing-6);
}

.legal-page .faq-answer li {
  margin-bottom: var(--spacing-1);
  list-style-type: disc;
}

.legal-page .faq-answer li::marker {
  color: var(--color-primary);
}

/* Contact address */
.contact-address {
  font-style: normal;
  background-color: var(--color-gray-50);
  padding: var(--spacing-5);
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  line-height: 1.8;
  font-size: var(--font-size-base);
}

.contact-address a {
  color: var(--color-secondary);
  text-decoration: underline;
}

.contact-address a:hover {
  color: var(--color-gray-600);
  text-decoration: none;
}

/* Footer */
.legal-page__footer {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--spacing-6) var(--spacing-16);
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--color-gray-200);
}

.legal-page__footer p {
  margin: 0;
}

.legal-page__footer .btn--secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-secondary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  font-size: var(--font-size-base);
}

.legal-page__footer .btn--secondary:hover {
  color: var(--color-gray-600);
  text-decoration: underline;
}

/* Yellow dot accent - matches site styling */
.yellow-dot {
  color: var(--color-primary);
}

/* Section background for the content area */
.section-lg {
  background: var(--color-white);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .legal-page__header {
    padding: var(--spacing-10) var(--spacing-4) var(--spacing-8);
  }

  .legal-page__header .section__title {
    font-size: var(--font-size-2xl);
  }

  .legal-page__content {
    padding: var(--spacing-8) var(--spacing-4) var(--spacing-12);
  }

  .legal-section {
    margin-bottom: var(--spacing-8);
  }

  .legal-section h2 {
    font-size: var(--font-size-lg);
    margin-top: var(--spacing-8);
  }

  .legal-section h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
  }

  .definitions-list {
    padding: var(--spacing-4);
  }

  .highlight-text,
  .warning-text {
    padding: var(--spacing-3) var(--spacing-4);
  }

  .legal-page__footer {
    padding: 0 var(--spacing-4) var(--spacing-12);
    padding-top: var(--spacing-6);
  }
}
/* Tom Select Custom Styling */

.ts-wrapper {
  width: 100%;
}

.ts-control {
  padding: var(--spacing-3) !important;
  border: 1px solid var(--color-gray-300) !important;
  border-radius: var(--radius-md) !important;
  background-color: white !important;
  min-height: 48px !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}

.ts-control:focus,
.ts-wrapper.focus .ts-control {
  border-color: var(--color-primary, #3b82f6) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.ts-control .item {
  background-color: var(--color-gray-100, #f3f4f6) !important;
  border: 1px solid var(--color-gray-300, #d1d5db) !important;
  border-radius: var(--radius-sm, 4px) !important;
  padding: 0.25rem 0.5rem !important;
  margin: 0.125rem 0.25rem 0.125rem 0 !important;
  font-size: 0.875rem !important;
  color: var(--color-text, #1f2937) !important;
}

.ts-control .item .remove {
  margin-left: 0.375rem !important;
  border-left: 1px solid var(--color-gray-400, #9ca3af) !important;
  padding-left: 0.375rem !important;
  color: var(--color-gray-600, #4b5563) !important;
  font-size: 1.1em !important;
}

.ts-control .item .remove:hover {
  color: var(--color-error, #ef4444) !important;
}

.ts-dropdown {
  border: 1px solid var(--color-gray-300) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  margin-top: 0.25rem !important;
}

.ts-dropdown .option {
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: var(--color-gray-100, #f3f4f6) !important;
  color: var(--color-text, #1f2937) !important;
}

.ts-dropdown .option.selected {
  background-color: var(--color-primary-light, #dbeafe) !important;
  color: var(--color-primary, #3b82f6) !important;
}

/* Placeholder styling */
.ts-control input {
  font-size: 1rem !important;
  color: var(--color-text, #1f2937) !important;
}

.ts-control input::-moz-placeholder {
  color: var(--color-gray-400, #9ca3af) !important;
}

.ts-control input::placeholder {
  color: var(--color-gray-400, #9ca3af) !important;
}
/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--spacing-4);
}

/* Modal Container */
.modal {
  background: white;
  border-radius: 8px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* Modal Header */
.modal__header {
  padding: var(--spacing-6);
  border-bottom: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

.modal__title {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0;
}

.modal__subtitle {
  font-size: 14px;
  color: var(--color-gray-600);
  margin-top: var(--spacing-1);
}

.modal__close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--color-gray-500);
  cursor: pointer;
  padding: var(--spacing-2);
  line-height: 1;
  transition: color 0.2s;
}

.modal__close:hover {
  color: var(--color-gray-700);
}

/* Modal Body */
.modal__body {
  padding: var(--spacing-6);
}

.modal__body p {
  margin-bottom: var(--spacing-4);
}

.modal__body p:last-child {
  margin-bottom: 0;
}

/* Modal Footer */
.modal__footer {
  padding: var(--spacing-6);
  border-top: 1px solid var(--color-gray-200);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-3);
}


/* Compact variant for confirm dialogs — the base modal is a 900px content
   sheet, absurd around a one-line question. */
.modal--confirm {
  max-width: 400px;
  border-radius: var(--radius-xl);
}

.modal--confirm .modal__header {
  padding: var(--spacing-5) var(--spacing-6) 0;
  border-bottom: 0;
  position: static;
}

.modal--confirm .modal__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-secondary);
}

.modal--confirm .modal__body {
  padding: var(--spacing-2) var(--spacing-6) var(--spacing-5);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.modal--confirm .modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-2);
  padding: 0 var(--spacing-6) var(--spacing-5);
  border-top: 0;
}
/* ==========================================================================
   Blog Tools — Interactive tools embedded in blog articles
   Modern, clean UI with depth, smooth transitions, and strong visual hierarchy
   ========================================================================== */

/* Container — glass-card effect with depth */
.blog-tool {
  background: linear-gradient(145deg, #FFFFFF 0%, #FFF9F2 100%);
  border: 1px solid rgba(255, 153, 0, 0.2);
  border-radius: 20px;
  padding: 32px;
  margin: 48px 0;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(255, 153, 0, 0.06);
  position: relative;
  overflow: hidden;
}

/* Decorative top accent bar */
.blog-tool::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FF9900 0%, #FFB84D 50%, #FF9900 100%);
}

@media (max-width: 640px) {
  .blog-tool {
    padding: 24px 20px;
    margin: 32px 0;
    border-radius: 16px;
  }
}

/* Header */
.blog-tool__header {
  margin-bottom: 28px;
}

.blog-tool__header p {
  font-size: 14px;
  color: #6B7280;
  margin: 6px 0 0;
  line-height: 1.5;
}

.blog-tool__title {
  font-family: var(--font-family-heading);
  font-size: 22px;
  font-weight: 700;
  color: #1F2937;
  margin: 0;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   Progress Bar
   ========================================================================== */

.blog-tool__progress {
  background: #F3F4F6;
  border-radius: 100px;
  height: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}

.blog-tool__progress-bar {
  background: linear-gradient(90deg, #FF9900, #FFB84D);
  height: 100%;
  border-radius: 100px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-tool__progress-text {
  font-size: 13px;
  color: #9CA3AF;
  margin-bottom: 24px;
  font-weight: 500;
}

/* ==========================================================================
   Quiz Question
   ========================================================================== */

.blog-tool__question {
  font-family: var(--font-family-heading);
  font-size: 18px;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 20px;
  line-height: 1.4;
}

/* ==========================================================================
   Quiz Options — elevated selectable cards
   ========================================================================== */

.blog-tool__options {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}

.blog-tool__option {
  position: relative;
}

.blog-tool__option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.blog-tool__option-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #FFFFFF;
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  font-size: 15px;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
}

.blog-tool__option-label::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid #D1D5DB;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.blog-tool__option-label:hover {
  border-color: #FFB84D;
  background: #FFFBF5;
  box-shadow: 0 2px 8px rgba(255, 153, 0, 0.08);
  transform: translateY(-1px);
}

.blog-tool__option--selected .blog-tool__option-label {
  border-color: #FF9900;
  background: linear-gradient(135deg, #FFF8F0 0%, #FFF2E5 100%);
  box-shadow: 0 2px 12px rgba(255, 153, 0, 0.12);
  font-weight: 500;
}

.blog-tool__option--selected .blog-tool__option-label::before {
  border-color: #FF9900;
  background: #FF9900;
  box-shadow: inset 0 0 0 3px #fff;
}

/* ==========================================================================
   Actions (Back / Next)
   ========================================================================== */

.blog-tool__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

.blog-tool__actions .btn {
  min-width: 100px;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 24px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.blog-tool__actions .btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   Quiz Result
   ========================================================================== */

.blog-tool__result {
  text-align: center;
  padding: 12px 0 4px;
}

.blog-tool__result-label {
  font-size: 12px;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  font-weight: 600;
}

.blog-tool__result-centre {
  font-family: var(--font-family-heading);
  font-size: 32px;
  font-weight: 800;
  color: #1F2937;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

@media (max-width: 640px) {
  .blog-tool__result-centre {
    font-size: 26px;
  }
}

/* Difficulty badges — pill style */
.blog-tool__result-difficulty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
}

.blog-tool__result-difficulty--easy {
  background: #D1FAE5;
  color: #065F46;
}

.blog-tool__result-difficulty--moderate {
  background: #FEF3C7;
  color: #92400E;
}

.blog-tool__result-difficulty--hard {
  background: #FEE2E2;
  color: #991B1B;
}

.blog-tool__result-reason {
  font-size: 15px;
  color: #4B5563;
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.blog-tool__result-tip {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-left: 4px solid #F59E0B;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 14px;
  color: #78350F;
  line-height: 1.6;
  text-align: left;
  margin: 0 auto 24px;
  max-width: 480px;
}

.blog-tool__result-heading {
  font-size: 17px;
  color: #1F2937;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* CTA Button */
.blog-tool__result-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 12px;
  color: #fff !important;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s ease;
}

.blog-tool__result-cta:hover {
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 153, 0, 0.3);
}

.blog-tool__result-restart {
  display: block;
  margin: 8px auto 0;
  color: #6B7280;
  font-size: 14px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 8px 20px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.blog-tool__result-restart:hover {
  border-color: #FF9900;
  color: #FF9900;
}

/* ==========================================================================
   Calculator Inputs
   ========================================================================== */

.blog-tool__label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.blog-tool__input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.blog-tool__input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #E5E7EB;
  border-radius: 10px;
  font-size: 16px;
  font-family: var(--font-family-primary);
  color: #1F2937;
  background: #FFFFFF;
  transition: all 0.2s ease;
  -moz-appearance: textfield;
}

.blog-tool__input::-webkit-outer-spin-button,
.blog-tool__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.blog-tool__input:focus {
  outline: none;
  border-color: #FF9900;
  box-shadow: 0 0 0 4px rgba(255, 153, 0, 0.1);
}

.blog-tool__help {
  font-size: 12px;
  color: #9CA3AF;
  line-height: 1.4;
}

/* ==========================================================================
   Calculator Stats Grid
   ========================================================================== */

.blog-tool__stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 24px 0;
}

@media (max-width: 768px) {
  .blog-tool__stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .blog-tool__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.blog-tool__stat {
  background: #FFFFFF;
  border: 1px solid #F3F4F6;
  border-radius: 14px;
  padding: 16px 10px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease;
}

.blog-tool__stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.blog-tool__stat-value {
  display: block;
  font-family: var(--font-family-heading);
  font-size: 28px;
  font-weight: 800;
  color: #FF9900;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.blog-tool__stat-label {
  display: block;
  font-size: 11px;
  color: #9CA3AF;
  line-height: 1.3;
  font-weight: 500;
}

/* Tip & Note */
.blog-tool__tip {
  font-size: 14px;
  color: #4B5563;
  padding: 14px 18px;
  background: #FFFFFF;
  border-radius: 10px;
  border-left: 4px solid #FF9900;
  margin-top: 16px;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.blog-tool__note {
  font-size: 13px;
  color: #D97706;
  font-weight: 500;
  margin-top: 8px;
  padding: 8px 14px;
  background: #FFFBEB;
  border-radius: 8px;
  border: 1px solid #FDE68A;
}

.blog-tool__note--hidden {
  display: none;
}

/* Calculator Results Container */
.blog-tool__results {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid #F3F4F6;
}

/* ==========================================================================
   Toggle Groups (SA Decision Tool) — pill-style toggles
   ========================================================================== */

.blog-tool__toggle-group {
  display: flex;
  gap: 8px;
  background: #F3F4F6;
  border-radius: 12px;
  padding: 4px;
}

.blog-tool__toggle {
  flex: 1;
  cursor: pointer;
  position: relative;
}

.blog-tool__toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.blog-tool__toggle-label {
  display: block;
  text-align: center;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-weight: 500;
}

.blog-tool__toggle-label:hover {
  color: #374151;
}

.blog-tool__toggle input[type="radio"]:checked + .blog-tool__toggle-label {
  background: #FFFFFF;
  color: #1F2937;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  font-weight: 600;
}

@media (max-width: 480px) {
  .blog-tool__toggle-group {
    flex-direction: column;
    gap: 4px;
  }
}

/* ==========================================================================
   Slider (SA Decision Tool) — larger, more tactile
   ========================================================================== */

.blog-tool__slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #9CA3AF;
  margin-bottom: 4px;
  font-weight: 500;
}

.blog-tool__slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: #E5E7EB;
  border-radius: 100px;
  outline: none;
  margin: 8px 0;
}

.blog-tool__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FF9900;
  cursor: pointer;
  border: 4px solid #FFFFFF;
  box-shadow: 0 2px 8px rgba(255, 153, 0, 0.3);
  -webkit-transition: transform 0.15s ease, box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.blog-tool__slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 16px rgba(255, 153, 0, 0.4);
}

.blog-tool__slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FF9900;
  cursor: pointer;
  border: 4px solid #FFFFFF;
  box-shadow: 0 2px 8px rgba(255, 153, 0, 0.3);
  -moz-transition: transform 0.15s ease, box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.blog-tool__slider::-moz-range-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 16px rgba(255, 153, 0, 0.4);
}

.blog-tool__slider-value {
  font-size: 14px;
  color: #6B7280;
  text-align: center;
  font-weight: 600;
  margin-top: 4px;
}

/* ==========================================================================
   Meter (SA VORT vs CBT&A Result)
   ========================================================================== */

.blog-tool__meter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 12px;
}

.blog-tool__meter-end {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  white-space: nowrap;
  min-width: 52px;
  text-align: center;
  letter-spacing: -0.01em;
}

.blog-tool__meter-track {
  flex: 1;
  height: 10px;
  background: #F3F4F6;
  border-radius: 100px;
  overflow: hidden;
}

.blog-tool__meter-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, #FF9900, #FFB84D);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-tool__meter-label {
  font-size: 14px;
  color: #6B7280;
  text-align: center;
  font-weight: 600;
  margin-bottom: 16px;
}

/* Warning (Reform notice) */
.blog-tool__warning {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 14px;
  color: #78350F;
  line-height: 1.6;
  margin: 20px 0;
  text-align: left;
}

.blog-tool__warning strong {
  color: #92400E;
}

.blog-tool__warning--hidden {
  display: none;
}

/* ==========================================================================
   Visual Diagrams
   ========================================================================== */

/* Difficulty Bar Chart (VIC) */
.difficulty-chart {
  margin: 32px 0;
  padding: 28px;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #F3F4F6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.difficulty-chart__title {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 24px;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 8px;
}

.difficulty-chart__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.difficulty-chart__row:last-child {
  margin-bottom: 0;
}

.difficulty-chart__label {
  width: 90px;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  flex-shrink: 0;
  color: #374151;
}

.difficulty-chart__bar-bg {
  flex: 1;
  height: 32px;
  background: #F9FAFB;
  border-radius: 8px;
  overflow: hidden;
}

.difficulty-chart__bar {
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding-left: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.difficulty-chart__bar--easy {
  background: linear-gradient(90deg, #10B981, #34D399);
}

.difficulty-chart__bar--moderate {
  background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

.difficulty-chart__bar--hard {
  background: linear-gradient(90deg, #EF4444, #F87171);
}

@media (max-width: 480px) {
  .difficulty-chart__label {
    width: 72px;
    font-size: 12px;
  }
  .difficulty-chart {
    padding: 20px;
  }
}

/* Timeline / Progression (QLD) */
.progression-timeline {
  margin: 32px 0;
  padding: 28px;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #F3F4F6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.progression-timeline__title {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 28px;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 8px;
}

.progression-timeline__steps {
  display: flex;
  position: relative;
}

.progression-timeline__step {
  flex: 1;
  text-align: center;
  position: relative;
  padding-top: 44px;
}

.progression-timeline__step::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 3px;
  background: #E5E7EB;
}

.progression-timeline__step:first-child::before {
  left: 50%;
}

.progression-timeline__step:last-child::before {
  right: 50%;
}

.progression-timeline__dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF9900, #FFB84D);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(255, 153, 0, 0.25);
}

.progression-timeline__hours {
  font-family: var(--font-family-heading);
  font-size: 16px;
  font-weight: 700;
  color: #FF9900;
  display: block;
}

.progression-timeline__label {
  font-size: 12px;
  color: #6B7280;
  line-height: 1.4;
  display: block;
  margin-top: 4px;
  font-weight: 500;
}

.progression-timeline__period {
  font-size: 11px;
  color: #9CA3AF;
  display: block;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .progression-timeline__steps {
    flex-direction: column;
    gap: 16px;
  }

  .progression-timeline__step {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    padding-top: 0;
  }

  .progression-timeline__step::before {
    display: none;
  }

  .progression-timeline__dot {
    position: static;
    transform: none;
    flex-shrink: 0;
  }
}

/* Comparison Table (SA VORT vs CBT&A) */
.comparison-table {
  margin: 32px 0;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #F3F4F6;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.comparison-table__header {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
}

.comparison-table__header-cell {
  padding: 16px;
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  border-bottom: 2px solid #F3F4F6;
}

.comparison-table__header-cell:first-child {
  text-align: left;
  background: #F9FAFB;
  color: #6B7280;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comparison-table__header-cell--vort {
  background: #EFF6FF;
  color: #1D4ED8;
}

.comparison-table__header-cell--cbta {
  background: #FEF3C7;
  color: #92400E;
}

.comparison-table__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  border-bottom: 1px solid #F9FAFB;
  transition: background 0.15s ease;
}

.comparison-table__row:hover {
  background: #FAFAFA;
}

.comparison-table__row:last-child {
  border-bottom: none;
}

.comparison-table__cell {
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #4B5563;
}

.comparison-table__cell:first-child {
  font-weight: 600;
  background: #F9FAFB;
  color: #374151;
}

.comparison-table__cell:nth-child(2),
.comparison-table__cell:nth-child(3) {
  text-align: center;
}

@media (max-width: 640px) {
  .comparison-table__cell {
    padding: 10px 12px;
    font-size: 12px;
  }
  .comparison-table__header-cell {
    padding: 12px;
    font-size: 12px;
  }
}

/* ==========================================================================
   Callout Boxes — visual breaks in article text
   ========================================================================== */

.blog-callout {
  margin: 28px 0;
  padding: 20px 24px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.6;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.blog-callout__icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1.4;
}

.blog-callout--tip {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #166534;
}

.blog-callout--warning {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #78350F;
}

/* Info is the one non-semantic variant — it flags a relevant aside rather than a
   risk — so it carries the brand instead of a traffic-light colour. Navy type on
   a light navy tint (12.7:1), with the orange mark as the accent. Tip stays
   green and warning stays amber on purpose: those encode meaning, and meaning
   should not be repainted to match a logo.

   The accent is --color-primary-dark, not --color-primary. Brand orange is
   3.0:1 against this background, which fails even the 3:1 floor for meaningful
   graphics; the darker orange clears it and still reads as orange. */
.blog-callout--info {
  background: #F4F7FB;
  border: 1px solid #D6E0EC;
  color: var(--color-secondary);
}

.blog-callout--info .blog-callout__icon {
  color: var(--color-primary-dark);
}

/* Links inherit the callout's own text colour. Article links are brand orange,
   which lands at 1.9:1 on these pale backgrounds — illegible in all four
   variants. Inheriting keeps every callout's link at the callout's own
   contrast, and the underline carries the affordance instead of the hue. */
.blog-callout a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-callout--important {
  background: #FFF1F2;
  border: 1px solid #FECDD3;
  color: #9F1239;
}

/* ==========================================================================
   Stat Highlight — inline stat for article text
   ========================================================================== */

.blog-stat-highlight {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #FFF8F0, #FFF2E5);
  border: 1px solid rgba(255, 153, 0, 0.15);
  border-radius: 10px;
  padding: 8px 16px;
  margin: 4px 0;
}

.blog-stat-highlight__number {
  font-family: var(--font-family-heading);
  font-size: 22px;
  font-weight: 800;
  color: #FF9900;
  letter-spacing: -0.02em;
}

.blog-stat-highlight__text {
  font-size: 13px;
  color: #6B7280;
  line-height: 1.3;
}

/* ==========================================================================
   Checklist — interactive checkable items
   ========================================================================== */

.blog-checklist {
  margin: 24px 0;
  padding: 24px;
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid #F3F4F6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.blog-checklist__title {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 16px;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #F9FAFB;
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
}

.blog-checklist__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.blog-checklist__check {
  width: 20px;
  height: 20px;
  border: 2px solid #D1D5DB;
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.blog-checklist__check--done {
  background: #10B981;
  border-color: #10B981;
  color: #fff;
  font-size: 11px;
}

/* Article stat grid — reuses .blog-tool__stat card styling in a 3-up layout */
.blog-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 28px 0;
}

@media (max-width: 600px) {
  .blog-stats {
    grid-template-columns: 1fr;
  }
}

/* Article bar charts — inline SVG, sanitizer-safe (svg/rect/text only) */
.blog-chart {
  margin: 28px 0;
  padding: 24px;
  background: #FFFFFF;
  border: 1px solid #F3F4F6;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.blog-chart__caption {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 15px;
  color: #374151;
  margin-bottom: 16px;
}

.blog-chart__svg {
  width: 100%;
  height: auto;
}

.blog-chart__bar {
  fill: #E5E7EB;
}

.blog-chart__bar--accent {
  fill: #FF9900;
}

.blog-chart__label {
  fill: #374151;
  font-size: 13px;
  font-weight: 600;
}

.blog-chart__value {
  fill: #111827;
  font-size: 13px;
  font-weight: 700;
}

.blog-chart__source {
  margin: 14px 0 0;
  font-size: 12px;
  color: #6B7280;
  line-height: 1.5;
}

/* ==========================================================================
   Practice Test — answer feedback, question pages, lead capture
   ========================================================================== */

.blog-tool__option--locked {
  pointer-events: none;
}

.blog-tool__option--correct .blog-tool__option-label {
  border-color: #16A34A;
  background: #F0FDF4;
  color: #166534;
}

.blog-tool__option--incorrect .blog-tool__option-label {
  border-color: #DC2626;
  background: #FEF2F2;
  color: #991B1B;
}

.blog-tool__feedback {
  border-radius: 12px;
  padding: 16px 20px;
  margin: 16px 0;
  font-size: 15px;
  line-height: 1.5;
}

.blog-tool__feedback--correct {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #166534;
}

.blog-tool__feedback--incorrect {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}

.blog-tool__answer-reveal summary {
  cursor: pointer;
  display: inline-block;
  margin: 8px 0;
  list-style: none;
}

.blog-tool__answer-reveal summary::-webkit-details-marker {
  display: none;
}

.blog-tool__source {
  font-size: 13px;
  color: #6B7280;
  margin-top: 8px;
}

.blog-tool__result-score {
  font-family: var(--font-family-heading);
  font-size: 40px;
  font-weight: 800;
  color: #1F2937;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.blog-tool__lead-form {
  max-width: 420px;
  margin: 24px auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blog-tool__lead-form label {
  font-weight: 600;
  font-size: 14px;
  color: #1F2937;
}

.blog-tool__lead-form input[type="email"] {
  padding: 10px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  font-size: 15px;
}

.blog-tool__lead-consent {
  font-size: 12px;
  color: #9CA3AF;
  margin: 0;
}

.blog-tool__result-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* Practice test — option markers, review list, score bands */

.blog-tool__option-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: #F3F4F6;
  color: #6B7280;
  font-size: 13px;
  font-weight: 700;
  margin-right: 12px;
}

.blog-tool__option--correct .blog-tool__option-marker {
  background: #16A34A;
  color: #fff;
}

.blog-tool__option--incorrect .blog-tool__option-marker {
  background: #DC2626;
  color: #fff;
}

.blog-tool__keyboard-hint {
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 8px;
}

@media (max-width: 640px) {
  .blog-tool__keyboard-hint {
    display: none;
  }
}

.blog-tool__result-band {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

.blog-tool__result-score--pass,
.blog-tool__result-band--pass {
  color: #166534;
}

.blog-tool__result-band--pass {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
}

.blog-tool__result-score--close,
.blog-tool__result-band--close {
  color: #92400E;
}

.blog-tool__result-band--close {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
}

.blog-tool__result-score--study,
.blog-tool__result-band--study {
  color: #991B1B;
}

.blog-tool__result-band--study {
  background: #FEF2F2;
  border: 1px solid #FECACA;
}

.blog-tool__test-facts {
  font-size: 14px;
  color: #6B7280;
  max-width: 520px;
  margin: 0 auto 8px;
}

.blog-tool__review {
  text-align: left;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 20px auto;
  max-width: 560px;
}

.blog-tool__review h3 {
  font-size: 16px;
  margin: 0 0 4px;
}

.blog-tool__review p {
  font-size: 13px;
  color: #6B7280;
  margin: 0 0 12px;
}

.blog-tool__review ul {
  margin: 0;
  padding-left: 20px;
}

.blog-tool__review li {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.4;
}

.blog-tool__review-perfect {
  font-weight: 600;
  color: #166534;
}

/* Practice test — mode select (practice vs timed mock test) */

.blog-tool__modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}

@media (max-width: 640px) {
  .blog-tool__modes {
    grid-template-columns: 1fr;
  }
}

.blog-tool__mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: #FFFFFF;
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-tool__mode:hover {
  border-color: #FF9900;
  background: #FFFBF5;
  box-shadow: 0 2px 12px rgba(255, 153, 0, 0.12);
  transform: translateY(-1px);
}

.blog-tool__mode-name {
  font-family: var(--font-family-heading);
  font-size: 17px;
  font-weight: 700;
  color: #1F2937;
}

.blog-tool__mode-detail {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.5;
}

/* Practice test — timer next to the progress text in mock mode */

.blog-tool__quiz-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.blog-tool__timer {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  font-variant-numeric: tabular-nums;
  margin-bottom: 24px;
}

.blog-tool__timer--low {
  color: #DC2626;
}

/* Mock test — per-section pass/fail breakdown (SA give-way part, ACT zero-tolerance categories) */

.blog-tool__section-results {
  list-style: none;
  max-width: 420px;
  margin: 16px auto;
  padding: 0;
  text-align: left;
}

.blog-tool__section-result {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.blog-tool__section-result--pass {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #166534;
}

.blog-tool__section-result--fail {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
  font-weight: 600;
}

/* Practice test — marker replaces the decorative radio inside the label card */

button.blog-tool__option--markered {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font: inherit;
}

.blog-tool__option--markered .blog-tool__option-label::before {
  display: none;
}

.blog-tool__option--markered .blog-tool__option-marker {
  margin-right: 0;
}

/* ==========================================================================
   Practice test — motion. New DOM nodes (options, feedback copy, results)
   animate on creation; class-triggered keyframes handle reveal states.
   ========================================================================== */

@keyframes blog-tool-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blog-tool-pop {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  60% {
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes blog-tool-correct-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.35);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(22, 163, 74, 0);
  }
}

@keyframes blog-tool-incorrect-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

@keyframes blog-tool-timer-pulse {
  50% {
    opacity: 0.4;
  }
}

.blog-tool__options .blog-tool__option {
  animation: blog-tool-rise 0.3s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.blog-tool__options .blog-tool__option:nth-child(2) { animation-delay: 0.05s; }
.blog-tool__options .blog-tool__option:nth-child(3) { animation-delay: 0.1s; }
.blog-tool__options .blog-tool__option:nth-child(4) { animation-delay: 0.15s; }
.blog-tool__options .blog-tool__option:nth-child(5) { animation-delay: 0.2s; }

.blog-tool__question--enter {
  animation: blog-tool-rise 0.3s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.blog-tool__feedback > p {
  animation: blog-tool-rise 0.25s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.blog-tool__option--correct .blog-tool__option-label {
  animation: blog-tool-correct-pulse 0.6s ease-out;
}

.blog-tool__option--incorrect .blog-tool__option-label {
  animation: blog-tool-incorrect-shake 0.3s ease-in-out;
}

.blog-tool__result {
  animation: blog-tool-pop 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.blog-tool__result-score {
  animation: blog-tool-pop 0.5s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.blog-tool__timer--low {
  color: #DC2626;
  animation: blog-tool-timer-pulse 1s ease-in-out infinite;
}

.blog-tool__mode:hover {
  border-color: #FF9900;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(35, 47, 62, 0.08);
}

.blog-tool__mode:focus-visible {
  outline: 2px solid #FF9900;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .blog-tool__options .blog-tool__option,
  .blog-tool__question--enter,
  .blog-tool__feedback > p,
  .blog-tool__option--correct .blog-tool__option-label,
  .blog-tool__option--incorrect .blog-tool__option-label,
  .blog-tool__result,
  .blog-tool__result-score,
  .blog-tool__timer--low {
    animation: none;
  }

  .blog-tool__mode:hover {
    transform: none;
  }
}
/* ==========================================================================
   Practice Tests — learner practice test hub, state pages, question pages
   Identity: "The L-plate, elevated" — a crafted CSS L-plate mark (yellow
   square, black letter) anchors the pages; navy bands give them weight;
   orange stays the action colour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   L-plate mark — pure CSS. --xl is the hub hero device, --badge the compact
   version on state cards and state/question heroes.
   -------------------------------------------------------------------------- */

.practice-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(160deg, #FFB84D 0%, #FF9900 55%, #E55F00 100%);
  color: var(--color-gray-900);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.12);
}

.practice-plate--xl {
  width: clamp(120px, 16vw, 180px);
  height: clamp(120px, 16vw, 180px);
  border-radius: clamp(20px, 2.6vw, 30px);
  font-size: clamp(72px, 10vw, 112px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -4px 0 rgba(0, 0, 0, 0.10),
    0 24px 48px rgba(0, 0, 0, 0.35);
}

.practice-plate--badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.practice-plate--badge-lg {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Shared typographic atoms
   -------------------------------------------------------------------------- */

.practice-eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-3);
}

.practice-eyebrow--on-dark {
  color: #FF9900;
}

.practice-section-title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-3);
  text-wrap: balance;
}

.practice-section-sub {
  color: var(--color-gray-600);
  max-width: 620px;
  margin-bottom: var(--spacing-8);
}

/* Chips — small metadata pills on cards and heroes */

.practice-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  white-space: nowrap;
}

.practice-chip--navy {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Hub hero — navy band with the L-plate as the hero device and a dashed
   road-line motif along the bottom edge.
   -------------------------------------------------------------------------- */

.practice-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(640px 420px at 82% 30%, rgba(255, 216, 20, 0.14), transparent 65%),
    linear-gradient(155deg, #2C3B4E 0%, var(--color-secondary) 45%, #1A222D 100%);
  color: var(--color-white);
  padding: var(--spacing-16) 0 calc(var(--spacing-16) + var(--spacing-8));
}

.practice-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--spacing-8);
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.30) 0 44px,
    transparent 44px 76px
  );
  pointer-events: none;
}

.practice-hero__layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
}

.practice-hero__copy {
  max-width: 640px;
}

.practice-hero__title {
  color: var(--color-white);
  font-size: clamp(2.3rem, 5.2vw, 3.6rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin-bottom: var(--spacing-5);
}

.practice-hero__title-accent {
  color: #FF9900;
}

.practice-hero__sub {
  color: var(--color-gray-300);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-8);
  max-width: 520px;
}

.practice-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-5);
}

.practice-hero__hint {
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
  font-weight: var(--font-weight-medium);
}

.practice-hero__plate {
  transform: rotate(-5deg);
  padding-right: var(--spacing-8);
}

@media (max-width: 860px) {
  .practice-hero {
    padding-top: var(--spacing-12);
  }

  .practice-hero__layout {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--spacing-8);
  }

  .practice-hero__plate {
    padding-right: 0;
    transform: rotate(-4deg) scale(0.62);
    transform-origin: bottom left;
    margin-bottom: calc(-1 * var(--spacing-6));
  }
}

/* --------------------------------------------------------------------------
   Hub — state card grid
   -------------------------------------------------------------------------- */

.practice-states__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--spacing-5);
  align-items: stretch;
}

/* A sparse grid (one or two state cards) keeps bounded card widths on the
   page's text axis instead of stretching across or floating mid-row. */
.practice-states__grid + .practice-section-sub {
  margin-top: var(--spacing-6);
}

.practice-states__grid--bounded {
  justify-content: start;
  grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
}

.practice-state-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  padding: var(--spacing-6);
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.practice-state-card:hover {
  transform: translateY(-3px);
  border-color: #FF9900;
  box-shadow: var(--shadow-lg);
}

.practice-state-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.practice-state-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

/* Only the bounded (hazard) card's header shares a line with the pinned
   arrow; the knowledge cards' meta row carries its own clearance. */
.practice-states__grid--bounded .practice-state-card__header {
  padding-right: 1.75rem;
}

.practice-state-card__name {
  display: block;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-secondary);
}

.practice-state-card__test {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-top: 2px;
}

.practice-state-card__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  padding-right: 2.25rem; /* clear the corner-pinned arrow */
  /* Bottom-pinned; the chip every card shares renders LAST in the markup, so
     it sits on the same bottom line across the row regardless of how many
     chips a card has or whether its title wraps. (A distant duplicate of
     this selector once overrode the pin — keep this the only declaration.) */
  margin-top: auto;
  padding-top: var(--spacing-5);
}

.practice-state-card__arrow {
  /* Corner-pinned: in the meta's flow it wrapped onto its own line in the
     1010-1090px band, making 2-chip cards' chip rows taller than 1-chip
     cards' in the same grid row. */
  position: absolute;
  right: var(--spacing-6);
  bottom: var(--spacing-6);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-400);
  transition: transform 0.2s ease, color 0.2s ease;
}

.practice-state-card:hover .practice-state-card__arrow {
  transform: translateX(4px);
  color: var(--color-primary-dark);
}

/* --------------------------------------------------------------------------
   Hub — "why ours" 3-up strip with CSS-drawn glyphs
   -------------------------------------------------------------------------- */

.practice-why {
  background: var(--color-primary-50);
}

.practice-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-6);
}

/* Four-item grids balance better 2x2 than 3+1 */
.practice-why__grid--quad {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 820px) {
  .practice-why__grid {
    grid-template-columns: 1fr;
  }
}

.practice-why__item {
  background: var(--color-white);
  border: 1px solid rgba(255, 153, 0, 0.18);
  border-radius: var(--radius-xl);
  padding: var(--spacing-8) var(--spacing-6);
  box-shadow: var(--shadow-sm);
}

.practice-why__item h3 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--spacing-2);
}

/* Cards that carry a glyph clear it; glyphless fact cards stay balanced. */
.practice-why__item .practice-glyph + h3 {
  margin-top: var(--spacing-5);
}

.practice-why__item p {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: var(--line-height-normal);
  margin-bottom: 0;
}

/* Closing source line under a practice-why grid (e.g. the HPT explainer) */
.practice-why__source {
  color: var(--color-gray-600);
  max-width: 620px;
  margin-top: var(--spacing-8);
  margin-bottom: 0;
}

.practice-why__source a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* CSS-drawn glyphs: tick circle, stopwatch, $0 plate */

.practice-glyph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}

.practice-glyph--tick {
  background: var(--color-green-50);
  border: 2px solid var(--color-green-600);
}

.practice-glyph--tick::after {
  content: '';
  width: 9px;
  height: 16px;
  border-right: 3px solid var(--color-green-600);
  border-bottom: 3px solid var(--color-green-600);
  transform: rotate(45deg) translate(-1px, -2px);
}

.practice-glyph--timer {
  border: 3px solid var(--color-secondary);
  background: var(--color-white);
}

.practice-glyph--timer::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 5px;
  border-radius: 2px;
  background: var(--color-secondary);
}

.practice-glyph--timer::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--color-secondary);
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(42deg);
}

.practice-glyph--free {
  background: linear-gradient(160deg, #FFB84D 0%, #FF9900 60%, #E55F00 100%);
  border-radius: 12px;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
   Shared closing panel — navy band with CTA (hub, state facts, question page)
   -------------------------------------------------------------------------- */

.practice-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-6);
  background: linear-gradient(140deg, #2C3B4E 0%, var(--color-secondary) 70%);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-10) var(--spacing-10);
}

@media (max-width: 640px) {
  .practice-next {
    padding: var(--spacing-8) var(--spacing-6);
  }
}

.practice-next__copy {
  max-width: 560px;
}

.practice-next__title {
  color: var(--color-white);
  font-size: var(--font-size-2xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-2);
}

.practice-next__text {
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin-bottom: 0;
}

.practice-next__text a {
  color: #FF9900;
  text-decoration: underline;
}

.practice-next__text a:hover {
  color: var(--color-white);
}

.practice-next .btn {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   State page hero — plate badge, headline, stat pills
   -------------------------------------------------------------------------- */

.practice-state-hero {
  background: var(--color-secondary);
  padding: var(--spacing-16) 0 var(--spacing-16);
  color: var(--color-white);
}

.practice-state-hero__breadcrumbs {
  display: flex;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--spacing-6);
}

.practice-state-hero__breadcrumbs a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.practice-state-hero__breadcrumbs a:hover,
.practice-state-hero__breadcrumbs a:focus-visible {
  color: var(--color-white);
  text-decoration: underline;
}

.practice-state-hero__heading h1 {
  color: var(--color-white);
}

.practice-state-hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-6);
  flex-wrap: wrap;
  margin-top: var(--spacing-8);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: var(--spacing-6);
}

.practice-spec {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin: 0;
}

.practice-spec__item dt {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2px;
}

.practice-spec__item dd {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}

.practice-spec__item dd a {
  color: #FF9900;
  font-size: var(--font-size-base);
  text-decoration: none;
}

.practice-spec__item dd a:hover,
.practice-spec__item dd a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .practice-spec {
    gap: var(--spacing-5);
  }

  .practice-spec__item dd {
    font-size: var(--font-size-lg);
  }

  .practice-state-hero__cta {
    width: 100%;
    text-align: center;
  }
}

.practice-state-hero__heading {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-5);
  margin-bottom: var(--spacing-5);
}

.practice-state-hero__heading h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

.practice-state-hero__heading .practice-eyebrow {
  margin-bottom: var(--spacing-1);
}

@media (max-width: 640px) {
  .practice-state-hero__heading {
    gap: var(--spacing-4);
  }

  .practice-state-hero__heading .practice-plate--badge-lg {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    font-size: 12px;
  }
}

.practice-state-hero__intro {
  margin: var(--spacing-3) 0 0;
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.practice-state-hero__intro a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.practice-state-hero__intro a:hover {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Mode select — modifiers on .blog-tool__mode (base lives in _blog-tools.css).
   Practice (orange, recommended) vs Mock (navy, the real format).
   -------------------------------------------------------------------------- */

.blog-tool__modes {
  gap: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
}

.blog-tool__mode,
.blog-tool__mode--practice,
.blog-tool__mode--mock {
  border: 0;
  border-radius: 0;
  background: var(--color-white);
  box-shadow: none;
  padding: var(--spacing-8) var(--spacing-8) var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.blog-tool__mode--practice {
  border-right: 1px solid var(--color-gray-200);
}

.blog-tool__mode--practice:hover,
.blog-tool__mode--practice:focus-visible {
  background: var(--color-primary-50);
  transform: none;
  box-shadow: none;
}

.blog-tool__mode--mock:hover,
.blog-tool__mode--mock:focus-visible {
  background: var(--color-gray-50);
  transform: none;
  box-shadow: none;
  border-color: var(--color-gray-200);
}

@media (max-width: 640px) {
  .blog-tool__mode--practice {
    border-right: 0;
    border-bottom: 1px solid var(--color-gray-200);
  }
}

.blog-tool__mode-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--color-primary);
  color: var(--color-secondary);
}

.blog-tool__mode-tag--navy {
  background: var(--color-secondary);
  color: var(--color-white);
}

.blog-tool__mode-go {
  margin-top: auto;
  padding-top: var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
}

.blog-tool__mode--mock .blog-tool__mode-go {
  color: var(--color-secondary);
}

/* --------------------------------------------------------------------------
   State page — licence fact cards ("Getting your licence in {State}")
   -------------------------------------------------------------------------- */

.practice-path {
  list-style: none;
  margin: var(--spacing-8) 0 0;
  padding: 0;
  max-width: 720px;
}

.practice-path__step {
  position: relative;
  display: flex;
  gap: var(--spacing-5);
  padding: 0 0 var(--spacing-8) 0;
}

.practice-path__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 4px;
  width: 2px;
  background-image: linear-gradient(180deg, var(--color-gray-300) 0 8px, transparent 8px 14px);
  background-size: 2px 14px;
  background-repeat: repeat-y;
}

.practice-path__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  background: var(--color-gray-100);
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.practice-path__step--current .practice-path__num {
  background: #FF9900;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.practice-path__step h3 {
  font-size: var(--font-size-lg);
  color: var(--color-secondary);
  margin: 4px 0 var(--spacing-1);
  letter-spacing: -0.01em;
}

.practice-path__step p {
  margin: 0;
  color: var(--color-gray-600);
  font-size: var(--font-size-base);
  line-height: 1.6;
  max-width: 58ch;
}

.practice-path__step p a {
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
}

.practice-path__here {
  display: inline-block;
  margin-left: var(--spacing-2);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: #FF9900;
  color: var(--color-secondary);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Question link lists — "All N questions" (state page) and related questions
   (question page). Two columns on desktop inside a contained card.
   -------------------------------------------------------------------------- */

.practice-qindex__card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-4) var(--spacing-8);
  box-shadow: var(--shadow-sm);
}

.practice-qindex__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: practice-q;
}

@media (min-width: 900px) {
  .practice-qindex__list {
    -moz-column-count: 2;
         column-count: 2;
    -moz-column-gap: var(--spacing-12);
         column-gap: var(--spacing-12);
  }
}

.practice-qindex__list li {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  border-bottom: 1px solid var(--color-gray-100);
  padding: var(--spacing-3) 0;
}

ol.practice-qindex__list li {
  counter-increment: practice-q;
}

ol.practice-qindex__list li::before {
  content: counter(practice-q);
  display: inline-block;
  min-width: 28px;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-400);
  font-variant-numeric: tabular-nums;
}

.practice-qindex__list a {
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color 0.15s ease;
}

.practice-qindex__list a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.practice-qindex__list a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Question page — static (non-interactive) option cards + answer reveal
   -------------------------------------------------------------------------- */

/* Static options are server-rendered content, not quiz steps — opt out of the
   staggered entry animation defined in _blog-tools.css. */
.blog-tool__options .blog-tool__option--static {
  animation: none;
}

.blog-tool__option--static .blog-tool__option-label {
  cursor: default;
}

.blog-tool__option--static .blog-tool__option-label::before {
  display: none;
}

.blog-tool__option--static .blog-tool__option-label:hover {
  border-color: var(--color-gray-200);
  background: var(--color-white);
  box-shadow: none;
  transform: none;
}

.blog-tool__answer-reveal[open] summary {
  margin-bottom: var(--spacing-3);
}

.practice-question-hero .practice-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.practice-question-hero h1 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  letter-spacing: -0.02em;
  max-width: 820px;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .practice-state-card,
  .practice-state-card__arrow {
    transition: none;
  }

  .practice-state-card:hover {
    transform: none;
  }

  .practice-state-card:hover .practice-state-card__arrow {
    transform: none;
  }
}

/* Polish pass: tighten rhythm, align cards, reveal toggle, disabled CTA */

.practice-state-hero ~ .section {
  padding: var(--spacing-10) 0;
}

.practice-state-hero ~ .section:last-of-type {
  padding-bottom: var(--spacing-16);
}

.practice-state-card {
  height: 100%;
}

.practice-reveal__hide {
  display: none;
}

.blog-tool__answer-reveal[open] .practice-reveal__show {
  display: none;
}

.blog-tool__answer-reveal[open] .practice-reveal__hide {
  display: inline;
}

.blog-tool__actions .btn:disabled {
  opacity: 0.65;
}

/* ==========================================================================
   Give-way diagram — top-down intersection, pure CSS
   ========================================================================== */

.practice-diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-6);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
  margin-bottom: var(--spacing-6);
}

.practice-diagram__scene {
  position: relative;
  width: 180px;
  height: 180px;
  min-width: 180px;
  background: #E8F0E4;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.practice-diagram__road {
  position: absolute;
  background: #4B5563;
}

.practice-diagram__road--horizontal {
  top: 60px;
  left: 0;
  width: 100%;
  height: 60px;
  background-image: linear-gradient(90deg, #F9FAFB 0 14px, transparent 14px 28px);
  background-size: 28px 3px;
  background-position: 0 center;
  background-repeat: repeat-x;
  background-color: #4B5563;
}

.practice-diagram__road--vertical {
  left: 60px;
  top: 0;
  width: 60px;
  height: 100%;
  background-image: linear-gradient(180deg, #F9FAFB 0 14px, transparent 14px 28px);
  background-size: 3px 28px;
  background-position: center 0;
  background-repeat: repeat-y;
  background-color: #4B5563;
}

/* Terminating road: t-intersection has no top arm */
.practice-diagram--t-intersection .practice-diagram__road--vertical {
  top: 60px;
  height: 120px;
}

.practice-diagram__vehicle {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  background: #FF9900;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.practice-diagram__vehicle--bottom {
  bottom: 6px;
  left: 75px;
}

.practice-diagram__vehicle--top {
  top: 6px;
  left: 75px;
}

.practice-diagram__vehicle--left {
  left: 6px;
  top: 75px;
}

.practice-diagram__vehicle--right {
  right: 6px;
  top: 75px;
}

.practice-diagram__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  min-width: 200px;
  flex: 1;
}

@media (max-width: 480px) {
  .practice-diagram {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Question index — category group headers */

.practice-qindex__group {
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray-500);
  margin: var(--spacing-6) 0 var(--spacing-2);
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--color-gray-200);
}

.practice-qindex__group:first-of-type {
  margin-top: 0;
}

.practice-qindex__group span {
  color: var(--color-gray-400);
  margin-left: var(--spacing-1);
}

/* Quieter quiz container on practice-test pages (blog keeps its own look) */

.practice-state-hero ~ .section .blog-tool {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.practice-state-hero ~ .section .blog-tool::before {
  display: none;
}

/* Question-page hero shares the navy band — keep its own markup legible */

.practice-state-hero h1 {
  color: var(--color-white);
}

.practice-state-hero .directory-hero__breadcrumbs,
.practice-state-hero .directory-hero__breadcrumbs span {
  color: rgba(255, 255, 255, 0.55);
}

.practice-state-hero .directory-hero__breadcrumbs a {
  color: rgba(255, 255, 255, 0.75);
}

.practice-state-hero .directory-hero__breadcrumbs a:hover,
.practice-state-hero .directory-hero__breadcrumbs a:focus-visible {
  color: var(--color-white);
}

.practice-state-hero .practice-eyebrow {
  color: #FF9900;
}

.practice-question-hero h1 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  max-width: 30ch;
  margin-top: var(--spacing-4);
}

/* Tidy pass: rhythm + alignment fixes from visual QA */

/* The quiz card's blog margins double up with section padding here */
.practice-state-hero ~ .section .blog-tool {
  margin: 0;
}

/* Path steps: real air between steps, content aligned to the chip */
.practice-path__step {
  padding-bottom: var(--spacing-8);
}

.practice-path__step:not(:last-child)::before {
  top: 44px;
}

.practice-path__step h3 {
  margin: 6px 0 var(--spacing-2);
}

.practice-next {
  margin-top: var(--spacing-10);
}

/* Question index: ragged cross-column hairlines -> quiet rows + column rule */
.practice-qindex__list {
  -moz-column-gap: var(--spacing-12);
       column-gap: var(--spacing-12);
  -moz-column-rule: 1px solid var(--color-gray-200);
       column-rule: 1px solid var(--color-gray-200);
}

ol.practice-qindex__list li {
  border-bottom: 0;
  padding: var(--spacing-2) 0;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

/* ==========================================================================
   Modern hero treatment — layered aurora gradient over the navy base
   ========================================================================== */

.practice-state-hero {
  background:
    radial-gradient(90% 130% at 100% -20%, rgba(255, 153, 0, 0.30) 0%, rgba(255, 153, 0, 0) 55%),
    radial-gradient(70% 110% at -10% 115%, rgba(0, 115, 187, 0.38) 0%, rgba(0, 115, 187, 0) 58%),
    radial-gradient(45% 70% at 55% 130%, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0) 62%),
    linear-gradient(150deg, #1D2735 0%, #232F3E 48%, #2C3D55 100%);
}

.practice-hero {
  background:
    radial-gradient(85% 120% at 95% -15%, rgba(255, 216, 20, 0.16) 0%, rgba(255, 216, 20, 0) 52%),
    radial-gradient(75% 110% at -5% 110%, rgba(0, 115, 187, 0.38) 0%, rgba(0, 115, 187, 0) 58%),
    radial-gradient(50% 75% at 60% 135%, rgba(255, 153, 0, 0.20) 0%, rgba(255, 153, 0, 0) 60%),
    linear-gradient(150deg, #1D2735 0%, #232F3E 48%, #2C3D55 100%);
}

.practice-next {
  background:
    radial-gradient(80% 140% at 100% -30%, rgba(255, 153, 0, 0.22) 0%, rgba(255, 153, 0, 0) 55%),
    radial-gradient(60% 120% at 0% 130%, rgba(0, 115, 187, 0.30) 0%, rgba(0, 115, 187, 0) 58%),
    linear-gradient(150deg, #1E2836 0%, #253243 55%, #2B3B52 100%);
}

/* Mode select: proper breathing room now the padding token resolves */

.blog-tool__mode-select {
  padding: var(--spacing-2) var(--spacing-2) var(--spacing-4);
}

.blog-tool__modes {
  border-radius: var(--radius-xl);
  margin-top: var(--spacing-6);
}

.blog-tool__mode-name {
  font-size: var(--font-size-xl);
}

.blog-tool__mode-detail {
  line-height: 1.6;
}

/* ==========================================================================
   Question index v2 — per-category surfaces, one-line rows, no-JS expander
   (question-page related list still uses the original card/list styles)
   ========================================================================== */

.practice-qindex {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-6);
}

.practice-qindex__block {
  min-width: 0;
}

.practice-qindex__block {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6) var(--spacing-8) var(--spacing-5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.practice-qindex__head {
  border-bottom: 1px solid var(--color-gray-200);
  padding-bottom: var(--spacing-4);
  margin-bottom: var(--spacing-3);
}

.practice-qindex__head h3 {
  font-size: var(--font-size-lg);
  color: var(--color-secondary);
  margin: 0;
  letter-spacing: -0.01em;
}

.practice-qindex__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  margin-left: var(--spacing-2);
  border-radius: 6px;
  background: #FF9900;
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  vertical-align: 2px;
}

.practice-qindex__head p {
  margin: var(--spacing-1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.practice-qindex .practice-qindex__list {
  -moz-columns: 2;
       columns: 2;
  -moz-column-gap: var(--spacing-12);
       column-gap: var(--spacing-12);
  -moz-column-rule: none;
       column-rule: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.practice-qindex .practice-qindex__list li {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  border: 0;
  padding: 0;
}

.practice-qindex .practice-qindex__list li::before {
  display: none;
}

.practice-qindex .practice-qindex__list a {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-2);
  margin: 0 calc(-1 * var(--spacing-2));
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
  text-decoration: none;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.practice-qindex .practice-qindex__list a:hover,
.practice-qindex .practice-qindex__list a:focus-visible {
  background: var(--color-primary-50);
  color: var(--color-secondary);
}

.practice-qindex__num {
  min-width: 22px;
  text-align: right;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-400);
  font-variant-numeric: tabular-nums;
}

.practice-qindex__q {
  /* One line ellipsised most of these questions away on a phone: measured at
     375px, 59 of 60 WA titles were cut to about 35 characters. Three lines fit
     the question a learner is choosing between while keeping the list scannable. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.practice-qindex__diagram {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-500);
}

.practice-qindex__more summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.practice-qindex__more summary::-webkit-details-marker {
  display: none;
}

.practice-qindex__more summary:hover,
.practice-qindex__more summary:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
}

.practice-qindex__more summary::before {
  content: '+';
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
}

.practice-qindex__more[open] summary::before {
  content: '\2212';
}

.practice-qindex__more-hide {
  display: none;
}

.practice-qindex__more[open] .practice-qindex__more-show {
  display: none;
}

.practice-qindex__more[open] .practice-qindex__more-hide {
  display: inline;
}

@media (max-width: 900px) {
  .practice-qindex .practice-qindex__list {
    -moz-columns: 1;
         columns: 1;
  }

  .practice-qindex__block {
    padding: var(--spacing-5) var(--spacing-5) var(--spacing-4);
  }
}

/* Journey illustration beside the path steps */

.practice-path-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--spacing-12);
  align-items: center;
}

.practice-path-art {
  display: flex;
  justify-content: center;
}

.practice-journey {
  width: 100%;
  max-width: 300px;
  height: auto;
}

@media (max-width: 900px) {
  .practice-path-wrap {
    grid-template-columns: 1fr;
  }

  .practice-path-art {
    display: none;
  }
}

/* Overflow fix: nowrap flex children must be allowed to shrink */

.practice-qindex .practice-qindex__list li {
  max-width: 100%;
  overflow: hidden;
}

.practice-qindex .practice-qindex__list a {
  min-width: 0;
}

.practice-qindex__q {
  min-width: 0;
  flex: 1 1 auto;
}

/* ==========================================================================
   DriveBuddy illustration system (shared/illustrations) — placements
   ========================================================================== */

.db-illustration {
  width: 100%;
  height: auto;
  display: block;
}

.practice-states__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: var(--spacing-12);
  align-items: center;
  margin-bottom: var(--spacing-6);
}

.practice-states__art {
  max-width: 240px;
  justify-self: end;
}

@media (max-width: 900px) {
  .practice-states__intro {
    grid-template-columns: 1fr;
  }

  .practice-states__art {
    display: none;
  }
}

/* Illustration placements: quiz results + directory CTA */

.blog-tool__result-art {
  max-width: 170px;
  margin: 0 auto var(--spacing-4);
}

/* ==========================================================================
   Hero upgrades: shared road line, driving hero car, aurora drift
   ========================================================================== */

.practice-state-hero {
  position: relative;
  overflow: hidden;
}

.practice-state-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--spacing-5);
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.30) 0 44px,
    transparent 44px 76px
  );
  pointer-events: none;
}

.practice-state-hero .container {
  position: relative;
  z-index: 2;
}

/* soft drifting glow over the aurora (both heroes) */
.practice-hero::before,
.practice-state-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -15%;
  width: 60%;
  height: 130%;
  background: radial-gradient(closest-side, rgba(255, 184, 77, 0.16), transparent 70%);
  pointer-events: none;
}

/* the little car parked on the hero road line */
.practice-hero-car {
  position: absolute;
  bottom: calc(var(--spacing-5) - 15px);
  right: 8%;
  width: 96px;
  z-index: 1;
  pointer-events: none;
}

.practice-hero .practice-hero-car {
  bottom: calc(var(--spacing-8) - 15px);
}

.practice-hero-car svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   Homepage "Practice for your learner test" band
   ========================================================================== */

.home-practice {
  background:
    radial-gradient(80% 130% at 100% -20%, rgba(255, 153, 0, 0.28), transparent 55%),
    radial-gradient(70% 110% at -10% 120%, rgba(0, 115, 187, 0.34), transparent 58%),
    linear-gradient(150deg, #1D2735 0%, #232F3E 48%, #2C3D55 100%);
  color: var(--color-white);
}

.home-practice__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--spacing-12);
  align-items: center;
}

.home-practice__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  color: #FF9900;
  margin: 0 0 var(--spacing-2);
}

.home-practice__title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: 0 0 var(--spacing-3);
}

.home-practice__sub {
  color: rgba(255, 255, 255, 0.78);
  max-width: 60ch;
  line-height: 1.6;
  margin: 0 0 var(--spacing-6);
}

.home-practice__states {
  list-style: none;
  margin: 0 0 var(--spacing-6);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--spacing-3);
}

@media (max-width: 900px) {
  .home-practice__states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .home-practice__states { grid-template-columns: 1fr; }
}

.home-practice__state {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.home-practice__state-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.home-practice__state:hover,
.home-practice__state:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 216, 20, 0.5);
}

.home-practice__plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 26px;
  padding: 0 6px;
  border-radius: 6px;
  background: #FF9900;
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
}

.home-practice__state-name {
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  line-height: 1.25;
}

.home-practice__state-count {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.home-practice__art {
  max-width: 260px;
}

@media (max-width: 900px) {
  .home-practice__inner {
    grid-template-columns: 1fr;
  }

  .home-practice__art {
    display: none;
  }
}

/* ==========================================================================
   Directory location-page learner practice-test callout
   ========================================================================== */

.directory-practice-cta__inner {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--spacing-10);
  align-items: center;
  background:
    radial-gradient(80% 130% at 100% -20%, rgba(255, 153, 0, 0.26), transparent 55%),
    radial-gradient(70% 110% at -10% 120%, rgba(0, 115, 187, 0.32), transparent 58%),
    linear-gradient(150deg, #1D2735 0%, #232F3E 48%, #2C3D55 100%);
  border-radius: var(--radius-xl);
  padding: var(--spacing-8) var(--spacing-10);
  color: var(--color-white);
}

.directory-practice-cta__art {
  max-width: 240px;
}

.directory-practice-cta__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  color: #FF9900;
  margin: 0 0 var(--spacing-2);
}

.directory-practice-cta__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: 0 0 var(--spacing-3);
}

.directory-practice-cta__text {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 0 var(--spacing-5);
}

@media (max-width: 760px) {
  .directory-practice-cta__inner {
    grid-template-columns: 1fr;
    padding: var(--spacing-6);
  }

  .directory-practice-cta__art {
    display: none;
  }
}

/* Tighten vertical rhythm: the CTA band brings its own padding, so the
   section wrapper shouldn't stack a full 96px against its neighbours. */
.directory-practice-cta {
  padding: var(--spacing-8) 0 var(--spacing-4);
}

.directory-practice-cta + .directory-blog-section {
  padding-top: var(--spacing-4);
}

/* Lead-capture status: failure must not read like success. */
.practice-lead-status--error {
  /* deliberate literal: --color-error (#EF4444) is 3.8:1 on white */
  color: #b3261e;
  font-weight: var(--font-weight-medium);
}
/* FAQ as hairline editorial rows — the alternative to a card grid when the
   items are questions (a tick badge on a question signals nothing). The
   default measure matches .practice-section-sub; a container that sets its
   own measure (e.g. the hazard page's 720px wrap) overrides it. */
.faq-rows {
  max-width: 620px;
  margin: var(--spacing-6) 0 0;
}

.hazard-facts-wrap .faq-rows {
  max-width: none;
}

.faq-rows__item {
  padding: var(--spacing-4) 0;
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
}

.faq-rows__item:last-child {
  border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}

.faq-rows__item h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--spacing-2);
}

.faq-rows__item p {
  margin: 0;
  line-height: 1.65;
  color: var(--color-gray-700, #374151);
}

/* dl variant (question as dt, answer as dd) — same styling as h3/p. */
.faq-rows__item dt {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-2);
}

.faq-rows__item dd {
  margin: 0;
  line-height: 1.65;
  color: var(--color-gray-700, #374151);
}
/* Hazard perception simulator — animated scene, respond button, verdicts */

.hazard-sim {
  max-width: 720px;
  margin: 0 auto;
}

.hazard-sim__start {
  margin-top: var(--spacing-4);
}

.hazard-sim__meta {
  margin-bottom: var(--spacing-4);
}

.hazard-sim__progress {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--spacing-2);
}

.hazard-sim__title {
  font-size: var(--font-size-xl);
  margin: 0 0 var(--spacing-1);
}

.hazard-sim__setting {
  color: var(--color-gray-600);
  margin: 0 0 var(--spacing-2);
}

.hazard-sim__instruction {
  font-weight: var(--font-weight-bold);
  margin: 0;
}

/* Meta, scene and RESPOND share one centred column: the scene is a portrait
   400x560 viewBox, so the whole stage narrows to its drawn width rather than
   letterboxing the scene inside a wide strip with a full-width button. */
.hazard-sim__stage {
  max-width: 420px;
  margin-inline: auto;
}

.hazard-sim__scene {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  background: var(--color-gray-100);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.hazard-sim__svg {
  display: block;
  width: 420px; /* 588px tall at the viewBox's 400:560 aspect */
  max-width: min(calc(100vw - 2 * var(--spacing-4)), 100%);
  height: auto;
  overflow: hidden; /* elements parked off-scene must not float on the card */
}

@media (max-width: 700px) {
  .hazard-sim__svg { width: 300px; } /* 420px tall — keeps RESPOND near the thumb */
}

/* Scene elements */
.hazard-sim__road { fill: #4a4a52; }
.hazard-sim__centreline { stroke: #f5f0e6; stroke-width: 3; stroke-dasharray: 22 18; }

/* Ego-motion: the centreline dashes stream past (down-screen, since your car
   drives "up"), so a scene reads as driving even before its hazard moves.
   The dash period is 22+18=40; one period per cycle scrolls seamlessly. */
.hazard-sim__centreline--scroll {
  animation: hazard-road-scroll 0.7s linear infinite;
}

@keyframes hazard-road-scroll {
  to { stroke-dashoffset: -40; }
}
.hazard-sim__verge { fill: #8fae7e; }
.hazard-sim__car { fill: #3d6ea5; }
.hazard-sim__car--you { fill: var(--color-primary); }
.hazard-sim__car--parked { fill: #7d8790; }
.hazard-sim__glass { fill: rgba(255, 255, 255, 0.65); }
.hazard-sim__tram { fill: #2f7d4f; }
.hazard-sim__pedestrian { fill: #d1495b; }
.hazard-sim__pedestrian-head { fill: #e8a87c; }
.hazard-sim__ball { fill: #d1495b; }
.hazard-sim__door { fill: #7d8790; stroke: #f5f0e6; stroke-width: 1.5; }

.hazard-sim__respond {
  display: block;
  width: 100%;
  margin-top: var(--spacing-4);
  padding: var(--spacing-4);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  color: var(--color-white);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease;
}

.hazard-sim__respond:hover:not(:disabled) { background: var(--color-primary-dark); }
.hazard-sim__respond:active:not(:disabled) { transform: scale(0.98); }
.hazard-sim__respond:disabled { background: var(--color-gray-300, #cbd0d6); cursor: default; }

.hazard-sim__feedback {
  margin-top: var(--spacing-4);
  padding: var(--spacing-4);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.hazard-sim__verdict--good { color: #2f7d4f; }
.hazard-sim__verdict--early,
.hazard-sim__verdict--late { color: #92400e; }
.hazard-sim__verdict--missed { color: #b3402e; }

.hazard-sim__results-list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-4) 0;
}

.hazard-sim__result {
  padding: var(--spacing-2) var(--spacing-3);
  border-left: 3px solid var(--color-gray-300, #cbd0d6);
  margin-bottom: var(--spacing-2);
}

.hazard-sim__result--good { border-left-color: #2f7d4f; }
.hazard-sim__result--early,
.hazard-sim__result--late { border-left-color: #92400e; }
.hazard-sim__result--missed { border-left-color: #b3402e; }

.hazard-sim__actions {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-5);
}

.hazard-sim__lead label {
  display: block;
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-2);
}

.hazard-sim__lead-row {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.hazard-sim__lead-row input[type="email"] {
  flex: 1 1 240px;
  padding: var(--spacing-3);
  border: 1px solid var(--color-gray-300, #cbd0d6);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
}

/* Honeypot — visually gone, present for bots */
.hazard-sim__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.hazard-sim__lead-done {
  /* deliberate literal: the theme's --color-success (#10B981) is 2.5:1 on
     white and fails AA for text; this matches the verdict palette */
  color: #2f7d4f;
  font-weight: var(--font-weight-medium);
}

.hazard-sim__lead-error {
  /* deliberate literal: --color-error (#EF4444) is 3.8:1 on white */
  color: #b3261e;
  font-weight: var(--font-weight-medium);
  margin: var(--spacing-2) 0 0;
}

/* Real-test fact rows (the specs section under the simulator) — hairline
   editorial rows, same family as the insights tables. The wrap shares the
   simulator's centred 720px column so the page keeps one vertical grid. */
.hazard-facts-wrap {
  max-width: 720px;
  margin: 0 auto;
}

.hazard-facts {
  margin: var(--spacing-6) 0 var(--spacing-5);
}

.hazard-facts__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--spacing-4);
  padding: var(--spacing-3) 0;
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
}

.hazard-facts__row:last-child {
  border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}

.hazard-facts__row dt {
  font-family: var(--font-family-heading);
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-gray-600);
  padding-top: 0.2em;
}

.hazard-facts__row dd {
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .hazard-facts__row {
    grid-template-columns: 1fr;
    gap: var(--spacing-1);
  }
}

/* FAQ rows use the shared .faq-rows component (components/_faq-rows.css). */


/* The scenario animation only plays after the learner presses Start —
   user-initiated, and motion IS the content being trained. CSS-level motion
   (button presses, hovers) still quiets down for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  .hazard-sim__respond:active:not(:disabled) { transform: none; }
  .hazard-sim__respond,
  .hazard-sim__start { transition: none; }
  .hazard-sim__centreline--scroll { animation: none; }
}
/* Insights — editorial data stories.
   Art direction: navy hero band (brand --color-secondary), a white stat band
   overlapping it, a real reading measure (~70ch), hairline editorial tables,
   and one data hue (#B45309, validated against the dataviz six checks on the
   light surface) with neutral context marks + direct value labels. */

/* ---------- Hero ---------- */

.insight-hero {
  background: var(--color-secondary);
  color: var(--color-white);
  padding: var(--spacing-12) 0 var(--spacing-16);
}

/* Shares the stat band's centred 880px column — one vertical grid with the
   hero, stat band and (narrower, still centred) article measure. */
.insight-hero__inner {
  max-width: 880px;
  margin-inline: auto;
}

.insight-hero__breadcrumb {
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-6);
}

.insight-hero__breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
}

.insight-hero__breadcrumb span {
  color: rgba(255, 255, 255, 0.55);
}

.insight-hero__kicker {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--spacing-3);
}

.insight-hero__title {
  font-family: var(--font-family-heading);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 var(--spacing-4);
  text-wrap: balance;
  color: var(--color-white); /* global h1 ink is navy — invisible on this band */
}

.insight-hero__dek {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 62ch;
  margin: 0 0 var(--spacing-4);
}

.insight-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  align-items: center;
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- Stat band (overlaps the hero) ---------- */

.insight-statband {
  margin-top: calc(-1 * var(--spacing-10));
  margin-bottom: var(--spacing-10);
}

.insight-statband__inner {
  max-width: 880px;
  margin-inline: auto;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 32px rgba(19, 27, 38, 0.10);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 720px) {
  .insight-statband__inner { grid-template-columns: repeat(2, 1fr); }
}

.insight-stat {
  padding: var(--spacing-5) var(--spacing-4);
  text-align: center;
}

.insight-stat + .insight-stat {
  border-left: 1px solid var(--color-gray-200, #e5e7eb);
}

@media (max-width: 720px) {
  .insight-stat:nth-child(3) { border-left: none; }
  .insight-stat:nth-child(n+3) { border-top: 1px solid var(--color-gray-200, #e5e7eb); }
}

.insight-stat__value {
  font-family: var(--font-family-heading);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.insight-stat__label {
  margin-top: var(--spacing-1);
  font-size: 0.72rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-gray-600);
}

/* ---------- Reading measure & article rhythm ---------- */

/* The blog layout reserves a sidebar column; insights are single-column and
   centre their measure instead. */
.insight-article .blog-article__layout,
.insight-article .blog-article__layout--no-sidebar {
  display: block;
  max-width: none;
}

.insight-article .blog-article__main {
  max-width: none;
  margin: 0;
}

.insight-article .blog-article__content {
  max-width: 700px;
  margin-inline: auto;
  font-size: 1.075rem;
  line-height: 1.75;
}

.insight-article .blog-article__content h2 {
  max-width: 700px;
  margin: var(--spacing-10) auto var(--spacing-3);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.insight-article .blog-article__content h2::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 3px;
  border-radius: 2px;
  background: #B45309;
  margin-bottom: var(--spacing-3);
}

/* ---------- Findings: numbered editorial list, not a callout box ---------- */

.insight-article .blog-article__content ol.insight-findings,
.insight-findings {
  max-width: 700px;
  margin: 0 auto var(--spacing-8);
  padding: 0;
  list-style: none;
  counter-reset: finding;
}

.insight-findings li {
  counter-increment: finding;
  position: relative;
  padding: var(--spacing-3) 0 var(--spacing-3) 3.25rem;
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
  line-height: 1.6;
}

.insight-findings li:last-child {
  border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}

.insight-findings li::before {
  content: counter(finding);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-family-heading);
  font-size: 1.9rem;
  font-weight: var(--font-weight-bold);
  color: #B45309;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ---------- Editorial tables: hairlines, small-caps heads, tabular nums ---------- */

.insight-article .blog-article__content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-5) 0;
  font-size: 0.95rem;
}

/* Rows stay transparent: the hairlines carry the structure, and opaque row
   backgrounds would paint over the table wrap's scroll shadows. */
.insight-article .blog-article__content thead,
.insight-article .blog-article__content thead tr,
.insight-article .blog-article__content tbody tr {
  background: none;
}

.insight-article .blog-article__content th {
  font-family: var(--font-family-heading);
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-gray-600);
  text-align: left;
  background: none;
  padding: 0 var(--spacing-3) var(--spacing-2) 0;
  border-bottom: 2px solid var(--color-secondary);
}

.insight-article .blog-article__content td {
  padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) 0;
  border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}

.insight-article .blog-article__content th:not(:first-child),
.insight-article .blog-article__content td:not(:first-child) {
  text-align: right;
  padding-right: 0;
  padding-left: var(--spacing-3);
}

.insight-article .blog-article__content tr:last-child td {
  border-bottom: 2px solid var(--color-secondary);
}

/* ---------- Figure + histogram ---------- */

.insight-figure {
  max-width: 700px;
  margin: var(--spacing-8) auto;
}

.insight-figure__chart {
  display: block;
  width: 100%;
  height: auto;
}

.insight-figure__caption {
  margin-top: var(--spacing-3);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-gray-600);
  border-left: 2px solid var(--color-gray-300, #d1d5db);
  padding-left: var(--spacing-3);
}

.insight-bar { fill: #DDE1E6; }
.insight-bar--highlight { fill: #B45309; }
.insight-bar:hover, .insight-bar--highlight:hover { opacity: 0.85; }

.insight-chart-value {
  fill: var(--color-gray-600);
  font-family: var(--font-family-heading);
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

.insight-chart-value--highlight { fill: #B45309; }

.insight-chart-tick {
  fill: var(--color-gray-600);
  font-size: 12px;
  text-anchor: middle;
}

.insight-chart-baseline { stroke: var(--color-gray-300, #d1d5db); stroke-width: 1; }

/* The SVG scales with the viewport, so at 375px its 12px text renders ~6px.
   Small screens swap the nine range labels for band-boundary ticks (every
   bar stays identified) and bump the SVG font sizes for the scaled-down
   render; desktop shows the ranges and hides the boundary ticks. */
.insight-chart-tick--edge { display: none; }

@media (max-width: 700px) {
  .insight-chart-tick:not(.insight-chart-tick--edge) { display: none; }
  .insight-chart-tick--edge { display: block; font-size: 20px; }
  .insight-chart-value { font-size: 22px; }
}

/* ---------- Ranked-table score bars ---------- */

.insight-scorebar { display: block; }
.insight-scorebar__track { fill: #EEF0F3; }
.insight-scorebar__fill { fill: #B45309; }

/* Rankings table: the generic editorial rule right-aligns every column after
   the first, which is wrong for the Suburb name column. Score number and bar
   share one labelled cell. */
.insight-article .blog-article__content .insight-table--rankings th:nth-child(2),
.insight-article .blog-article__content .insight-table--rankings td:nth-child(2) {
  text-align: left;
  padding-right: var(--spacing-3);
  padding-left: 0;
}

.insight-scorecell .insight-scorebar {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--spacing-2);
}

/* ---------- End note (the one CTA) ---------- */

.insight-endnote {
  max-width: 700px;
  margin: var(--spacing-10) auto;
  padding: var(--spacing-6);
  background: var(--color-secondary);
  border-radius: var(--radius-xl);
  color: var(--color-white);
}

.insight-endnote h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  margin: 0 0 var(--spacing-2);
  color: var(--color-white);
}

.insight-endnote p {
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 var(--spacing-4);
  line-height: 1.6;
}

/* ---------- Hub cards ---------- */

.insight-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-4);
  max-width: 880px;
  margin: var(--spacing-8) auto;
}

.insight-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: var(--radius-xl);
  padding: var(--spacing-6);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.insight-card:hover {
  box-shadow: 0 10px 28px rgba(19, 27, 38, 0.12);
  transform: translateY(-2px);
}

.insight-card__kicker {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #B45309;
  margin: 0 0 var(--spacing-2);
}

.insight-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  margin: 0 0 var(--spacing-2);
  color: var(--color-secondary);
}

.insight-card__summary {
  color: var(--color-gray-600);
  line-height: 1.6;
  margin: 0 0 var(--spacing-3);
}

.insight-card__meta {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-top: auto; /* footers bottom-align across equal-height cards */
}

/* ---------- Utilities ---------- */

.insight-nowrap { white-space: nowrap; }

/* html/body are overflow-x: clip (global reset), so wide tables need their
   own scrollport or their right columns are simply unreachable on mobile.
   The layered backgrounds paint CSS-only scroll shadows: the edge fades
   scroll with the content, the shadows stay pinned, so a clipped table
   visibly signals there's more to the side. */
.insight-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--spacing-5) 0;
  background:
    linear-gradient(to right, var(--color-white) 30%, rgba(255, 255, 255, 0)) left / 40px 100%,
    linear-gradient(to left, var(--color-white) 30%, rgba(255, 255, 255, 0)) right / 40px 100%,
    radial-gradient(farthest-side at 0 50%, rgba(19, 27, 38, 0.32), transparent) left / 18px 100%,
    radial-gradient(farthest-side at 100% 50%, rgba(19, 27, 38, 0.32), transparent) right / 18px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.insight-tablewrap > table {
  min-width: 560px;
  margin: 0;
}

/* Row labels stay put while the data columns scroll — a scrolled table that
   reads "30 | 16" with no region name has lost its point. Insight rows are
   transparent, so the sticky cells take the page background. */
@media (max-width: 700px) {
  .insight-article .blog-article__content .insight-tablewrap th:first-child,
  .insight-article .blog-article__content .insight-tablewrap td:first-child {
    position: sticky;
    left: 0;
    background: var(--color-white);
    z-index: 1;
  }

  /* Rankings table: the rank is narrow and the SUBURB is the row label, so
     both stick — the name column offset must equal the rank column's width. */
  .insight-article .blog-article__content .insight-table--rankings th:first-child,
  .insight-article .blog-article__content .insight-table--rankings td:first-child {
    width: 2.2rem;
    min-width: 2.2rem;
    max-width: 2.2rem;
  }

  .insight-article .blog-article__content .insight-table--rankings th:nth-child(2),
  .insight-article .blog-article__content .insight-table--rankings td:nth-child(2) {
    position: sticky;
    left: 2.2rem;
    background: var(--color-white);
    z-index: 1;
  }
}
/* ==========================================================================
   Licence conversion — /international-licence-conversion

   Identity: a well-set document, not a landing page. Generous measure, warm
   paper, hairline rules, and navy bands to separate the parts that carry
   consequences from the parts that carry detail.

   Differentiation comes from typography and space first, colour last. The one
   accent marks the single thing a reader must un-learn — that their licence's
   recognition was withdrawn. Every status also carries a text label, so
   nothing depends on colour alone.

   See the palette note below for why the earlier traffic-light scheme went.
   ========================================================================== */

/* Palette: ink, paper, one accent.
   ---------------------------------------------------------------------------
   An earlier version used a green/amber/blue traffic-light system for the
   three recognition tiers. On top of the brand orange and the navy bands that
   is five colour families competing, and it made a regulatory reference read
   like a dashboard.

   This page is a document. So it is built from warm paper and ink, with a
   single accent reserved for the one thing the reader genuinely needs to
   notice: that their recognition was withdrawn. Everything else differentiates
   through weight, rule thickness, and space.

   Neutrals are warmed toward the accent rather than the usual cool greys, so
   the page reads as one material instead of assembled parts.

   Declared at :root rather than on a list of section selectors — that list has
   to be kept in step with every section, and the recognition section was
   already silently missing from it. Tokens are --lc- prefixed so they cannot
   collide. */
:root {
  --lc-ink: #1B2430;
  --lc-ink-soft: #3D4753;
  --lc-muted: #6B6660;
  /* Not lighter than this. The tone that "looked right" for meta text failed
     WCAG AA on all four backgrounds (3.0-3.2:1), and it carries real content:
     the sources-verified line, table headers, field hints. This clears 4.5:1
     on the deepest background the page uses. */
  --lc-faint: #726C64;

  --lc-paper: #FFFFFF;
  --lc-paper-warm: #FAF8F5;
  --lc-paper-deep: #F4F1EC;
  --lc-rule: #E5E0D8;
  --lc-rule-soft: #EFEBE4;

  /* The single accent. Deep enough to pass AA on paper, and close enough to
     the brand orange to belong to it. Used where attention is warranted and
     nowhere else. */
  --lc-accent: #B4460D;
  --lc-accent-soft: #FCF4EC;
  --lc-accent-rule: #EBD6BF;

  --lc-measure: 68ch;

  /* Tier aliases. Recognised and not-recognised are both quiet — the reader
     has nothing to un-learn in either case. Only the withdrawn tier is
     accented, because that is the one where their existing belief is wrong. */
  --lc-good: var(--lc-ink);
  --lc-good-bg: var(--lc-paper);
  --lc-good-border: var(--lc-rule);
  --lc-warn: var(--lc-accent);
  --lc-warn-bg: var(--lc-accent-soft);
  --lc-warn-border: var(--lc-accent-rule);
  --lc-info: var(--lc-muted);
  --lc-info-bg: var(--lc-paper-warm);
  --lc-info-border: var(--lc-rule);
}

/* --------------------------------------------------------------------------
   Shared atoms
   -------------------------------------------------------------------------- */

.lc-eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-3);
}

.lc-eyebrow--on-dark {
  color: var(--color-primary);
}

.lc-section-title {
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  letter-spacing: -0.02em;
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-3);
}

.lc-section-title--on-dark {
  color: var(--lc-paper);
}

.lc-section-sub {
  color: var(--lc-muted);
  max-width: var(--lc-measure);
  line-height: var(--line-height-relaxed);
}

.lc-section-head {
  margin-bottom: var(--spacing-10);
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.lc-breadcrumb {
  padding: var(--spacing-5) 0 var(--spacing-2);
}

.lc-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--lc-faint);
}

.lc-breadcrumb li + li::before {
  content: "/";
  margin-right: var(--spacing-2);
  color: var(--lc-rule);
}

.lc-breadcrumb a {
  color: var(--lc-muted);
  text-decoration: none;
}

.lc-breadcrumb a:hover {
  color: var(--lc-accent);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Hero — copy left, "short answer" card right
   -------------------------------------------------------------------------- */

.lc-hero {
  background: var(--gradient-hero);
  border-bottom: 1px solid var(--lc-rule);
  padding-bottom: var(--spacing-16);
}

.lc-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--spacing-12);
  align-items: start;
  padding-top: var(--spacing-8);
}

.lc-hero__title {
  font-size: clamp(2rem, 5vw, 3.05rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: var(--spacing-5);
}

.lc-hero__lede {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--lc-ink-soft);
  max-width: 56ch;
  margin-bottom: var(--spacing-8);
}

.lc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-5);
  margin-bottom: var(--spacing-6);
}

.lc-hero__secondary {
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  text-decoration: underline;
  text-decoration-color: var(--lc-rule);
  text-underline-offset: 3px;
}

.lc-hero__secondary:hover {
  color: var(--lc-accent);
  text-decoration-color: currentcolor;
}

.lc-hero__verified {
  font-size: var(--font-size-sm);
  color: var(--lc-faint);
  max-width: 52ch;
  line-height: var(--line-height-normal);
}

/* Short-answer card */

.lc-answer {
  background: var(--lc-paper);
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-xl);
  padding: var(--spacing-8);
  box-shadow: var(--shadow-lg);
}

.lc-answer__heading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lc-faint);
  margin-bottom: var(--spacing-5);
}

/* Hairline-separated entries rather than coloured bullets. With the palette
   reduced, three of the four dots resolved to near-identical greys and stopped
   carrying meaning — so the rules do the separating and the bold lead-in does
   the scanning. */
.lc-answer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lc-answer__list li {
  padding: var(--spacing-4) 0;
  border-top: 1px solid var(--lc-rule-soft);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--lc-ink-soft);
}

.lc-answer__list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.lc-answer__list li:last-child {
  padding-bottom: 0;
}

.lc-answer__list strong {
  color: var(--lc-ink);
}

/* The one entry that contradicts what the reader probably believes. */
.lc-answer__list li.is-accented strong {
  color: var(--lc-accent);
}

/* --------------------------------------------------------------------------
   Visa status — three paths, read left to right from most to least binding
   -------------------------------------------------------------------------- */

.lc-visa__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--spacing-5);
}

.lc-visa__card {
  padding: var(--spacing-6);
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-xl);
  background: var(--lc-paper);
}

.lc-visa__status {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-3);
}

.lc-visa__rule {
  font-weight: var(--font-weight-semibold);
  color: var(--lc-accent);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-3);
}

.lc-visa__detail {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--lc-muted);
  margin: 0;
}

.lc-visa__note {
  margin-top: var(--spacing-6);
  padding: var(--spacing-5);
  background: var(--lc-warn-bg);
  border-left: 3px solid var(--lc-warn);
  border-radius: var(--radius-md);
  line-height: var(--line-height-relaxed);
  color: var(--lc-ink-soft);
  max-width: var(--lc-measure);
}

/* --------------------------------------------------------------------------
   Checker
   -------------------------------------------------------------------------- */

.lc-checker-section {
  background: var(--lc-paper-warm);
}

.lc-checker {
  background: var(--lc-paper);
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-2xl);
  padding: clamp(var(--spacing-6), 3vw, var(--spacing-10));
  box-shadow: var(--shadow-md);
  max-width: 900px;
}

.lc-checker__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-6);
}

.lc-field__label {
  display: block;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-2);
  color: var(--lc-ink);
}

.lc-field__select {
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-base);
  font-family: inherit;
  color: var(--lc-ink);
  background: var(--lc-paper);
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lc-field__select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.18);
}

.lc-field__hint {
  font-size: var(--font-size-xs);
  color: var(--lc-faint);
  margin-top: var(--spacing-2);
  line-height: var(--line-height-normal);
}

/* Result panel — tone set by the controller via data-tone */

.lc-result {
  margin-top: var(--spacing-8);
  padding: var(--spacing-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--lc-rule);
  background: var(--lc-paper-warm);
  border-left: 4px solid var(--lc-faint);
}

.lc-result[data-tone="good"] {
  background: var(--lc-good-bg);
  border-color: var(--lc-good-border);
  border-left-color: var(--lc-good);
}

.lc-result[data-tone="warn"] {
  background: var(--lc-warn-bg);
  border-color: var(--lc-warn-border);
  border-left-color: var(--lc-warn);
}

.lc-result[data-tone="info"] {
  background: var(--lc-info-bg);
  border-color: var(--lc-info-border);
  border-left-color: var(--lc-info);
}

.lc-result__badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-2);
}

.lc-result[data-tone="good"] .lc-result__badge { color: var(--lc-good); }
.lc-result[data-tone="warn"] .lc-result__badge { color: var(--lc-warn); }
.lc-result[data-tone="info"] .lc-result__badge { color: var(--lc-info); }

.lc-result__headline {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-5);
}

.lc-result__detail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  margin: 0 0 var(--spacing-5);
}

.lc-result__detail dt {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lc-faint);
  margin-bottom: var(--spacing-1);
}

.lc-result__detail dd {
  margin: 0;
  color: var(--lc-ink-soft);
  line-height: var(--line-height-relaxed);
}

/* A condition that can reverse the answer above, so it gets the accent even
   inside an otherwise calm "recognised" result. */
.lc-result__caveat dt {
  color: var(--lc-accent) !important;
}

.lc-result__caveat dd {
  border-left: 2px solid var(--lc-accent-rule);
  padding-left: var(--spacing-3);
}

.lc-result__change {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--lc-ink-soft);
  padding: var(--spacing-4);
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-5);
}

.lc-result__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.lc-result__official {
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lc-result__official:hover {
  color: var(--lc-accent);
}

.lc-result__lesson {
  font-size: var(--font-size-sm);
  color: var(--lc-muted);
  line-height: var(--line-height-relaxed);
}

/* --------------------------------------------------------------------------
   The change — navy band, because this is the consequential part
   -------------------------------------------------------------------------- */

.lc-change {
  background: var(--color-secondary);
  color: var(--lc-paper);
}

.lc-change__inner {
  max-width: 860px;
}

.lc-change__body p {
  color: rgba(255, 255, 255, 0.82);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-5);
  max-width: var(--lc-measure);
}

.lc-change__body strong {
  color: var(--lc-paper);
}

.lc-change__note {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--spacing-5);
  margin-top: var(--spacing-8);
}

/* --------------------------------------------------------------------------
   Chips — country lists
   -------------------------------------------------------------------------- */

.lc-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  list-style: none;
  margin: var(--spacing-6) 0;
  padding: 0;
}

.lc-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background: var(--lc-paper-deep);
  color: var(--lc-ink-soft);
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-full);
}

.lc-chip--warn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--lc-paper);
}

/* A recognised jurisdiction with a condition attached: <details> so the
   caveat is reachable by keyboard and readable on touch, not hover-only. */
.lc-chip--noted {
  padding: 0;
  background: var(--lc-warn-bg);
  border-color: var(--lc-warn-border);
  flex-direction: column;
  align-items: stretch;
  border-radius: var(--radius-lg);
}

.lc-chip__details summary {
  padding: var(--spacing-2) var(--spacing-4);
  cursor: pointer;
  list-style: none;
  color: var(--lc-warn);
  font-weight: var(--font-weight-semibold);
}

.lc-chip__details summary::-webkit-details-marker {
  display: none;
}

.lc-chip__details summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}

.lc-chip__marker {
  margin-left: 2px;
}

.lc-chip__caveat {
  display: block;
  padding: 0 var(--spacing-4) var(--spacing-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--lc-ink-soft);
  max-width: 42ch;
}

/* --------------------------------------------------------------------------
   Recognition tiers
   -------------------------------------------------------------------------- */

.lc-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-5);
  margin-bottom: var(--spacing-12);
}

.lc-tier {
  padding: var(--spacing-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--lc-rule);
  border-top: 3px solid var(--lc-faint);
  background: var(--lc-paper);
}

.lc-tier--good { border-top-color: var(--lc-good); background: var(--lc-good-bg); }
.lc-tier--warn { border-top-color: var(--lc-warn); background: var(--lc-warn-bg); }
.lc-tier--info { border-top-color: var(--lc-info); background: var(--lc-info-bg); }

.lc-tier__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-3);
}

.lc-tier--good .lc-tier__label { color: var(--lc-good); }
.lc-tier--warn .lc-tier__label { color: var(--lc-warn); }
.lc-tier--info .lc-tier__label { color: var(--lc-info); }

.lc-tier__title {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-3);
}

.lc-tier p {
  color: var(--lc-ink-soft);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* Recognised list block */

.lc-recognised {
  padding: var(--spacing-8);
  background: var(--lc-paper-warm);
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-xl);
}

.lc-recognised__title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-2);
}

.lc-recognised__intro,
.lc-recognised__foot {
  color: var(--lc-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  max-width: var(--lc-measure);
}

.lc-recognised__foot {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--lc-rule);
}

/* --------------------------------------------------------------------------
   State summary table
   -------------------------------------------------------------------------- */

.lc-table__lede {
  max-width: var(--lc-measure);
  margin-bottom: var(--spacing-5);
  padding: var(--spacing-4) var(--spacing-5);
  background: var(--lc-good-bg);
  border-left: 3px solid var(--lc-good);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--lc-ink-soft);
}

.lc-state-summary {
  overflow-x: auto;
  margin-bottom: var(--spacing-10);
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-lg);
  background: var(--lc-paper);
}

/* Secondary information — present for reference, not competing with the
   deadline and the tests, which are what the table is read for. */
.lc-table__authority {
  color: var(--lc-faint);
  font-size: var(--font-size-xs);
}

.lc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  min-width: 620px;
}

.lc-table th,
.lc-table td {
  padding: var(--spacing-4);
  text-align: left;
  border-bottom: 1px solid var(--lc-rule);
}

.lc-table thead th {
  background: var(--lc-paper-warm);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lc-faint);
  white-space: nowrap;
}

.lc-table tbody tr:last-child th,
.lc-table tbody tr:last-child td {
  border-bottom: none;
}

.lc-table tbody th {
  white-space: nowrap;
}

.lc-table tbody th a {
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  text-decoration: none;
}

.lc-table tbody th a:hover {
  color: var(--lc-accent);
  text-decoration: underline;
}

.lc-table__full {
  display: block;
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xs);
  color: var(--lc-faint);
}

/* --------------------------------------------------------------------------
   State accordions
   -------------------------------------------------------------------------- */

/* Tinted so the run of recognition -> states -> process does not read as one
   undifferentiated 4,900px block of white. Also lets the white accordion
   cards and the summary table lift off the page. */
.lc-states-section {
  background: var(--lc-paper-warm);
}

.lc-states {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.lc-state {
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-xl);
  background: var(--lc-paper);
  overflow: hidden;
  scroll-margin-top: var(--spacing-16);
}

.lc-state[open] {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-200);
}

.lc-state__summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-5) var(--spacing-6);
  cursor: pointer;
  list-style: none;
}

.lc-state__summary::-webkit-details-marker {
  display: none;
}

.lc-state__summary:hover {
  background: var(--lc-paper-warm);
}

.lc-state__summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.lc-state__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-secondary);
  color: var(--lc-paper);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  letter-spacing: 0.04em;
}

.lc-state__heading {
  flex: 1;
  min-width: 0;
}

.lc-state__name {
  display: block;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  color: var(--lc-ink);
}

.lc-state__meta {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--lc-faint);
}

.lc-state__chevron {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--lc-faint);
  border-bottom: 2px solid var(--lc-faint);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.lc-state[open] .lc-state__chevron {
  transform: rotate(-135deg);
}

.lc-state__body {
  padding: 0 var(--spacing-6) var(--spacing-6);
  border-top: 1px solid var(--lc-rule);
  padding-top: var(--spacing-6);
}

.lc-state__window {
  font-weight: var(--font-weight-medium);
  color: var(--lc-ink);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-6);
  max-width: var(--lc-measure);
}

.lc-state__rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-4);
  margin: 0 0 var(--spacing-6);
}

.lc-state__rule {
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--lc-rule);
  background: var(--lc-paper-warm);
}

.lc-state__rule--good {
  border-left-color: var(--lc-good);
  background: var(--lc-good-bg);
}

.lc-state__rule--warn {
  border-left-color: var(--lc-warn);
  background: var(--lc-warn-bg);
}

.lc-state__rule--info {
  border-left-color: var(--lc-info);
  background: var(--lc-info-bg);
}

.lc-state__rule dt {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing-2);
}

.lc-state__rule--good dt { color: var(--lc-good); }
.lc-state__rule--warn dt { color: var(--lc-warn); }
.lc-state__rule--info dt { color: var(--lc-info); }

.lc-state__rule dd {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--lc-ink-soft);
}

.lc-state__outcome {
  padding: var(--spacing-4);
  background: var(--color-primary-50);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-6);
}

.lc-state__subhead {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-3);
}

.lc-state__list {
  margin: 0 0 var(--spacing-6);
  padding-left: var(--spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.lc-state__list li {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--lc-ink-soft);
  max-width: var(--lc-measure);
}

.lc-state__facts p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--lc-ink-soft);
  margin-bottom: var(--spacing-3);
  max-width: var(--lc-measure);
}

.lc-state__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2) var(--spacing-6);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--lc-rule);
  margin-bottom: var(--spacing-4);
}

.lc-state__links a {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lc-state__links a:hover {
  color: var(--lc-accent);
}

.lc-inline-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-weight: var(--font-weight-semibold);
  color: var(--lc-accent);
  text-decoration: none;
}

.lc-inline-cta::after {
  content: "\2192";
  transition: transform 0.15s ease;
}

.lc-inline-cta:hover::after {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Process — numbered steps with a connecting rule, so the sequence reads as a
   sequence. The fork step is marked in the action colour because it is the
   decision the rest of the list depends on.
   -------------------------------------------------------------------------- */

/* Steps left, timing panel right. The steps alone left roughly half the width
   empty on a desktop container; the panel now fills it and sticks alongside
   while the sequence scrolls. */
.lc-process__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--spacing-12);
  align-items: start;
}

.lc-process__list {
  list-style: none;
  counter-reset: lc-step;
  margin: 0;
  padding: 0;
}

.lc-process__step {
  counter-increment: lc-step;
  position: relative;
  padding: 0 0 var(--spacing-8) var(--spacing-16);
}

.lc-process__step::before {
  content: counter(lc-step);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--lc-paper);
  border: 2px solid var(--lc-rule);
  color: var(--lc-faint);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
}

/* Connector between markers, stopping short of the last one. */
.lc-process__step::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: var(--lc-rule);
}

.lc-process__step:last-child::after {
  display: none;
}

.lc-process__step--fork::before {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--lc-paper);
}

.lc-process__step h3 {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-2);
  padding-top: var(--spacing-2);
}

.lc-process__step p {
  color: var(--lc-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Documents
   -------------------------------------------------------------------------- */

.lc-docs {
  background: var(--lc-paper-warm);
}

.lc-docs__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--spacing-12);
  align-items: start;
}

.lc-docs__list {
  list-style: none;
  margin: var(--spacing-8) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

.lc-docs__list li {
  position: relative;
  padding-left: var(--spacing-8);
  line-height: var(--line-height-relaxed);
  color: var(--lc-ink-soft);
  max-width: var(--lc-measure);
}

.lc-docs__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 9px;
  border-left: 2.5px solid var(--lc-good);
  border-bottom: 2.5px solid var(--lc-good);
  transform: rotate(-45deg);
}

.lc-docs__warn {
  margin-top: var(--spacing-8);
  padding: var(--spacing-5);
  background: var(--lc-warn-bg);
  border-left: 3px solid var(--lc-warn);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--lc-ink-soft);
}

.lc-docs__aside {
  position: sticky;
  top: var(--spacing-8);
  padding: var(--spacing-6);
  background: var(--lc-paper);
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-xl);
}

.lc-docs__aside-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-3);
}

.lc-docs__aside p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--lc-muted);
  margin-bottom: var(--spacing-6);
}

.lc-docs__aside p:last-child {
  margin-bottom: 0;
}

.lc-process__timing {
  position: sticky;
  top: var(--spacing-8);
  padding: var(--spacing-6);
  background: var(--lc-paper-warm);
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-xl);
}

.lc-process__timing-title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-4);
}

.lc-process__timing p {
  color: var(--lc-muted);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-4);
}

.lc-process__timing strong {
  color: var(--lc-ink);
}

.lc-process__timing-warn {
  margin-bottom: 0 !important;
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--lc-rule);
}

/* --------------------------------------------------------------------------
   Cost + rejection reasons
   -------------------------------------------------------------------------- */

.lc-cost__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--spacing-12);
  align-items: start;
}

.lc-cost__list {
  margin: var(--spacing-8) 0 0;
}

.lc-cost__item {
  padding: var(--spacing-4) 0;
  border-bottom: 1px solid var(--lc-rule);
}

.lc-cost__item:last-child {
  border-bottom: none;
}

.lc-cost__item dt {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--lc-ink);
  margin-bottom: var(--spacing-1);
}

.lc-cost__item dd {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--lc-muted);
}

/* Provenance for each figure, subordinate to the figure itself. */
.lc-cost__source {
  display: block;
  margin-top: var(--spacing-1);
  font-size: var(--font-size-xs);
  color: var(--lc-faint);
}

.lc-cost__note {
  margin-top: var(--spacing-6);
  padding: var(--spacing-5);
  background: var(--color-primary-50);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--lc-ink-soft);
}

.lc-reject {
  position: sticky;
  top: var(--spacing-8);
  padding: var(--spacing-6);
  background: var(--lc-warn-bg);
  border: 1px solid var(--lc-warn-border);
  border-radius: var(--radius-xl);
}

.lc-reject__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-2);
}

.lc-reject__intro {
  font-size: var(--font-size-sm);
  color: var(--lc-muted);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-5);
}

.lc-reject__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.lc-reject__item dt {
  font-weight: var(--font-weight-semibold);
  color: var(--lc-warn);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-1);
}

.lc-reject__item dd {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--lc-ink-soft);
}

/* --------------------------------------------------------------------------
   The test
   -------------------------------------------------------------------------- */

.lc-test__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-12);
}

.lc-test__item {
  padding: var(--spacing-6);
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-xl);
  background: var(--lc-paper);
}

.lc-test__item h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-3);
}

.lc-test__item p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--lc-muted);
  margin: 0;
}

.lc-test__cta {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--spacing-10);
  align-items: center;
  padding: clamp(var(--spacing-6), 3vw, var(--spacing-10));
  background: var(--color-secondary);
  border-radius: var(--radius-2xl);
  color: var(--lc-paper);
}

.lc-test__cta-copy h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--lc-paper);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-4);
}

.lc-test__cta-copy p {
  color: rgba(255, 255, 255, 0.82);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.lc-test__stat {
  margin-top: var(--spacing-5) !important;
  font-size: var(--font-size-sm);
  color: var(--color-primary) !important;
  font-weight: var(--font-weight-semibold);
}

.lc-test__cta-action {
  text-align: center;
}

.lc-test__cta-hint {
  margin-top: var(--spacing-4);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.65);
}

.lc-test__practice {
  margin-top: var(--spacing-8);
  text-align: center;
  color: var(--lc-muted);
  font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   FAQs
   -------------------------------------------------------------------------- */

.lc-faq {
  background: var(--lc-paper-warm);
}

.lc-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  max-width: 860px;
}

.lc-faq__item {
  background: var(--lc-paper);
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.lc-faq__item[open] {
  border-color: var(--color-primary-200);
  box-shadow: var(--shadow-sm);
}

.lc-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding: var(--spacing-5) var(--spacing-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--lc-ink);
}

.lc-faq__question::-webkit-details-marker {
  display: none;
}

.lc-faq__question:hover {
  background: var(--lc-paper-warm);
}

.lc-faq__question:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.lc-faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.lc-faq__icon::before,
.lc-faq__icon::after {
  content: "";
  position: absolute;
  background: var(--color-primary-dark);
  border-radius: 1px;
}

.lc-faq__icon::before {
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
}

.lc-faq__icon::after {
  top: 0;
  left: 6px;
  width: 2px;
  height: 14px;
  transition: transform 0.2s ease;
}

.lc-faq__item[open] .lc-faq__icon::after {
  transform: scaleY(0);
}

.lc-faq__answer {
  padding: 0 var(--spacing-6) var(--spacing-6);
}

.lc-faq__answer p {
  color: var(--lc-ink-soft);
  line-height: var(--line-height-relaxed);
  max-width: var(--lc-measure);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Sources
   -------------------------------------------------------------------------- */

.lc-sources__inner {
  max-width: 860px;
}

.lc-sources__title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-3);
}

.lc-sources__intro {
  color: var(--lc-muted);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-6);
}

.lc-sources__list {
  list-style: none;
  margin: 0 0 var(--spacing-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.lc-sources__list li {
  padding-left: var(--spacing-5);
  border-left: 2px solid var(--lc-rule);
}

.lc-sources__list a {
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: var(--font-size-sm);
}

.lc-sources__list a:hover {
  color: var(--lc-accent);
}

.lc-sources__note {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--lc-faint);
  line-height: var(--line-height-normal);
  margin-top: var(--spacing-1);
}

.lc-sources__method {
  padding: var(--spacing-6);
  background: var(--lc-paper-warm);
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-6);
}

.lc-sources__method-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-4);
}

.lc-sources__method p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--lc-muted);
  margin-bottom: var(--spacing-4);
}

.lc-sources__method p:last-child {
  margin-bottom: 0;
}

.lc-sources__method strong {
  color: var(--lc-ink);
}

.lc-sources__disclaimer {
  font-size: var(--font-size-xs);
  color: var(--lc-faint);
  padding-top: var(--spacing-5);
  border-top: 1px solid var(--lc-rule);
  line-height: var(--line-height-relaxed);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .lc-hero__layout,
  .lc-docs__layout,
  .lc-cost__layout,
  .lc-process__layout,
  .lc-test__cta {
    grid-template-columns: 1fr;
  }

  /* Once these panels stack into the flow they are no longer beside anything,
     and sticking them to the top just covers the content below. */
  .lc-process__timing,
  .lc-docs__aside,
  .lc-reject {
    position: static;
  }

  .lc-hero__layout {
    gap: var(--spacing-8);
  }

  .lc-test__cta {
    gap: var(--spacing-6);
  }

  .lc-test__cta-action {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .lc-hero {
    padding-bottom: var(--spacing-10);
  }

  .lc-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-3);
  }

  .lc-hero__actions .btn {
    width: 100%;
    text-align: center;
  }

  .lc-hero__secondary {
    text-align: center;
  }

  .lc-answer,
  .lc-recognised,
  .lc-docs__aside {
    padding: var(--spacing-5);
  }

  .lc-state__summary {
    padding: var(--spacing-4);
    gap: var(--spacing-3);
  }

  .lc-state__body {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }

  .lc-faq__question,
  .lc-faq__answer {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
}

/* Respect reduced-motion preferences for the small transitions above. */
@media (prefers-reduced-motion: reduce) {
  .lc-state__chevron,
  .lc-faq__icon::after,
  .lc-inline-cta::after,
  .lc-field__select {
    transition: none;
  }
}
/* This suburb's own street map (shared/_suburb_map partial).
   The quiet residential streets carry the accent because they are the subject:
   the map answers "where do I take my learner tonight?", so the streets a
   learner starts on lead, and the arterials recede as the thing they work up
   to. Colour is spent only on that distinction and on the two marks a learner
   needs to find. */

.suburbmap {
  margin: var(--spacing-8) 0 0;
  display: grid;
  gap: var(--spacing-5);
  align-items: start;
}

@media (min-width: 900px) {
  .suburbmap {
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    gap: var(--spacing-6);
  }
}

.suburbmap__frame {
  position: relative;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  background: #f7f9fb;
  overflow: hidden;
}

.suburbmap__svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

/* --- the suburb itself -------------------------------------------------- */
.suburbmap__boundary-fill polygon {
  fill: rgba(35, 47, 62, 0.045);
  stroke: none;
}

.suburbmap__boundary-line polygon {
  fill: none;
  stroke: var(--color-navy, #232f3e);
  stroke-width: 2.5px;
  stroke-dasharray: 9 6;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
}

/* --- roads: staged by what to drive first ------------------------------- */
.suburbmap__roads polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.suburbmap__road--quiet polyline { stroke: #f59a23; stroke-width: 1.8px; }
.suburbmap__road--collector polyline { stroke: #8496a8; stroke-width: 2.4px; }
.suburbmap__road--arterial polyline { stroke: #5b6c80; stroke-width: 3.4px; }
.suburbmap__road--highway polyline { stroke: #37475a; stroke-width: 5px; }

/* --- marks -------------------------------------------------------------- */
.suburbmap__roundabout {
  fill: none;
  stroke: #b45309;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.suburbmap__school {
  fill: #2f7d4f;
  opacity: 0.75;
}

.suburbmap__labels text {
  font-family: inherit;
  font-size: 26px;
  font-weight: 600;
  fill: var(--color-navy, #232f3e);
  paint-order: stroke fill;
  stroke: #f7f9fb;
  stroke-width: 6px;
  stroke-linejoin: round;
}

/* --- picking one street out of the network ------------------------------ */
/* Only opacity and stroke change, so nothing reflows when a street is
   selected — interaction latency and layout shift are what would actually
   cost us, not the interactivity itself. */
.suburbmap--focused .suburbmap__road { opacity: 0.22; }

.suburbmap--focused .suburbmap__road.is-active {
  opacity: 1;
}

.suburbmap__road.is-active polyline {
  stroke: #b45309;
  stroke-width: 5px;
}

@media (prefers-reduced-motion: no-preference) {
  .suburbmap__road { transition: opacity 120ms ease-out; }
}

/* --- key ---------------------------------------------------------------- */
.suburbmap__key {
  position: absolute;
  left: var(--spacing-3);
  bottom: var(--spacing-3);
  margin: 0;
  padding: var(--spacing-2) var(--spacing-3);
  list-style: none;
  display: grid;
  gap: 4px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  font-size: 0.75rem;
  color: var(--color-text-secondary, #52606d);
}

.suburbmap__key-item {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.suburbmap__key-item::before {
  content: "";
  width: 12px;
  height: 3px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.suburbmap__key-item--quiet::before { background: #f59a23; }
.suburbmap__key-item--arterial::before { background: #5b6c80; height: 4px; }
.suburbmap__key-item--roundabout::before { height: 11px; width: 11px; border-radius: 50%; border: 2px solid #b45309; }
.suburbmap__key-item--school::before { height: 10px; width: 10px; border-radius: 2px; background: #2f7d4f; }

/* --- the street list ---------------------------------------------------- */
.suburbmap__aside {
  display: grid;
  gap: var(--spacing-5);
}

.suburbmap__caption {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-secondary, #52606d);
  max-width: 68ch;
}

.suburbmap__caption strong { color: var(--color-navy, #232f3e); }

.suburbmap__stage-head {
  margin: 0 0 var(--spacing-2);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-2);
  cursor: pointer;
}

.suburbmap__stage-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-navy, #232f3e);
}

.suburbmap__stage--quiet .suburbmap__stage-label { color: #b45309; }

.suburbmap__stage-detail {
  font-size: 0.82rem;
  color: var(--color-text-secondary, #52606d);
}

.suburbmap__streets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 2px var(--spacing-3);
}

.suburbmap__street {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  padding: 2px 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--color-navy, #232f3e);
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.suburbmap__street:hover,
.suburbmap__street:focus-visible {
  color: #b45309;
  border-bottom-color: currentColor;
}

.suburbmap__street[aria-pressed="true"] {
  color: #b45309;
  font-weight: 700;
}

/* A long street list stays in the HTML and collapses rather than being cut,
   so the page is complete for a reader who opens it and a crawler that
   never does. */
.suburbmap__details > summary { list-style: none; }
.suburbmap__details > summary::-webkit-details-marker { display: none; }

.suburbmap__details > summary::after {
  content: "show all";
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b45309;
  border-bottom: 1px solid currentColor;
}

.suburbmap__details[open] > summary::after { content: "hide"; }

.suburbmap__details[open] .suburbmap__streets {
  max-height: 320px;
  overflow-y: auto;
  padding-right: var(--spacing-2);
}

@media (max-width: 640px) {
  .suburbmap__labels { display: none; }
  .suburbmap__key {
    position: static;
    border: 0;
    border-top: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0;
    background: transparent;
    grid-template-columns: 1fr 1fr;
  }
}

/* --- test-day block, subordinate to the suburb's own map --------------- */
.directory-maps__testday {
  margin-top: var(--spacing-8);
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-border, #e2e8f0);
}

.directory-maps__testday-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-navy, #232f3e);
}
/* Fact-checked-by byline (shared/_verified_by partial).
   Reads as a credential, not a testimonial: a hairline-bordered strip with the
   instructor's photo, name and licence, sitting directly under the local
   detail it attests to. */

.verified {
  margin: var(--spacing-6) 0 0;
  padding: var(--spacing-5);
  display: grid;
  gap: var(--spacing-4);
  border: 1px solid var(--color-border, #e2e8f0);
  border-left: 3px solid #b45309;
  border-radius: var(--radius-lg, 12px);
  background: #fffdf9;
}

.verified__person {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.verified__photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex: 0 0 auto;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px var(--color-border, #e2e8f0);
}

.verified__photo--initial {
  display: grid;
  place-items: center;
  background: var(--color-navy, #232f3e);
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}

.verified__who {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.verified__label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #b45309;
}

.verified__name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-navy, #232f3e);
}

.verified__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(35, 47, 62, 0.25);
}

.verified__link:hover,
.verified__link:focus-visible {
  border-bottom-color: #b45309;
  color: #b45309;
}

.verified__creds {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-secondary, #52606d);
}

.verified__sep {
  padding: 0 4px;
  color: var(--color-border, #cbd5e1);
}

.verified__scope {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-secondary, #52606d);
  max-width: 68ch;
}

.verified__note {
  display: block;
  margin-top: var(--spacing-2);
  padding-left: var(--spacing-3);
  border-left: 2px solid var(--color-border, #e2e8f0);
  font-style: italic;
  color: var(--color-navy, #232f3e);
}

@media (max-width: 640px) {
  .verified { padding: var(--spacing-4); }
  .verified__photo { width: 52px; height: 52px; }
  .verified__creds { font-size: 0.8rem; }
}
/* Admin fact-check screens. Deliberately class-based rather than the inline
   styles used elsewhere in admin — "no inline styles, ever" applies here too,
   and these are new files with no reason to inherit that debt. */

.admin-page {
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
}

.admin-page--narrow {
  max-width: 720px;
}

.admin-page__back {
  margin-bottom: var(--spacing-6);
}

.admin-page-header--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-6);
  flex-wrap: wrap;
}

/* --- table ------------------------------------------------------------- */
.admin-table-wrap {
  margin-top: var(--spacing-8);
  overflow-x: auto;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  background: #ffffff;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 720px;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  vertical-align: middle;
}

.admin-table thead th {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary, #52606d);
  background: #f8fafc;
}

.admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-table__actions {
  text-align: right;
  white-space: nowrap;
}

.admin-muted {
  color: var(--color-text-secondary, #52606d);
  font-size: 0.8rem;
  margin-left: 4px;
}

.admin-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
}

/* --- state pills -------------------------------------------------------- */
.admin-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid currentColor;
}

/* Deliberate literals: the theme's success/warning tokens fail AA on white
   at this size, and these are status text, not decoration. */
.admin-pill--live { color: #2f7d4f; }
.admin-pill--held { color: #92400e; }

.admin-action--danger {
  color: #b3261e;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius-md, 8px);
  padding: 4px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}

.admin-action--danger:hover {
  background: #fdf2f1;
}

/* --- empty state -------------------------------------------------------- */
.admin-empty {
  margin-top: var(--spacing-8);
  padding: var(--spacing-8);
  border: 1px dashed var(--color-border, #cbd5e1);
  border-radius: var(--radius-lg, 12px);
  background: #f8fafc;
  display: grid;
  gap: var(--spacing-3);
  justify-items: start;
  max-width: 68ch;
}

.admin-empty p {
  margin: 0;
  color: var(--color-text-secondary, #52606d);
}

.admin-empty strong {
  color: var(--color-navy, #232f3e);
}

/* --- form --------------------------------------------------------------- */
.admin-form {
  margin-top: var(--spacing-8);
  display: grid;
  gap: var(--spacing-6);
}

.admin-form__actions {
  display: flex;
  gap: var(--spacing-3);
  align-items: center;
}

.form-hint {
  margin: var(--spacing-2) 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-secondary, #52606d);
}

.form-hint--warning {
  color: #92400e;
}

/* Quick-action tiles on the admin dashboard. These lived as four copies of the
   same inline style attributes, which is what the no-inline-styles rule at the
   top of this file exists to prevent. */
.admin-section--spaced {
  margin-top: var(--spacing-8);
}

.admin-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-4);
}

.admin-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: var(--spacing-6);
}

.admin-tile__icon {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-2);
}

.admin-tile__title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-1);
}

.admin-tile__detail {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}
/* Error pages (404/422/500) — extracted from the former inline \3c style>
   blocks duplicated across all three error views. */

.error-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8) var(--spacing-4);
    background: linear-gradient(180deg, var(--color-white) 0%, #FFF8F0 100%);
  }

  .error-page__container {
    max-width: 540px;
    width: 100%;
    text-align: center;
  }

  .error-page__card {
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-12) var(--spacing-8);
    margin-bottom: var(--spacing-8);
  }

  .error-page__icon {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-6);
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .error-page__icon i {
    font-size: 3rem;
    color: var(--color-primary);
  }

  .error-page__code {
    font-family: var(--font-family-heading);
    font-size: 5rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--spacing-2);
  }

  .error-page__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-4);
  }

  .error-page__message {
    font-size: var(--font-size-base);
    color: var(--color-gray-500);
    line-height: 1.6;
    margin-bottom: var(--spacing-8);
  }

  .error-page__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-3);
  }

  .error-page__buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
  }

  .error-page__buttons .btn-secondary {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
  }

  .error-page__buttons .btn-secondary:hover {
    background: var(--color-gray-200);
  }

  .error-page__help {
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
  }

  .error-page__help a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
  }

  .error-page__help a:hover {
    text-decoration: underline;
  }

  @media (max-width: 480px) {
    .error-page__card {
      padding: var(--spacing-8) var(--spacing-6);
    }

    .error-page__code {
      font-size: 4rem;
    }

    .error-page__title {
      font-size: var(--font-size-xl);
    }

    .error-page__buttons {
      flex-direction: column;
    }

    .error-page__buttons .btn {
      width: 100%;
      justify-content: center;
    }
  }

.error-page__art {
  max-width: 250px;
  margin: 0 auto var(--spacing-6);
}

/* Pages */
/* Instructor Contact Page */

.instructor-contact-page {
  max-width: 800px;
  margin: var(--spacing-8) auto;
}

/* Instructor Info Card */
.instructor-contact-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.instructor-contact-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.instructor-contact-avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-gray-600);
}

.instructor-contact-title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  margin: 0 0 var(--spacing-1) 0;
}

.instructor-contact-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  color: var(--color-gray-600);
}

.instructor-contact-meta .fa-star {
  color: var(--color-warning);
}

/* Sign In Required State */
.instructor-contact-signin {
  padding: var(--spacing-8);
  text-align: center;
}

.instructor-contact-signin-inner {
  max-width: 500px;
  margin: 0 auto;
}

.instructor-contact-signin-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--spacing-4);
  background: var(--color-primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.instructor-contact-signin-icon .fa-user-lock {
  font-size: 28px;
  color: var(--color-primary);
}

.instructor-contact-signin-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--spacing-3);
}

.instructor-contact-signin-text {
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-6);
  line-height: 1.6;
}

.instructor-contact-signin-actions {
  display: flex;
  gap: var(--spacing-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* Contact Form */
.instructor-contact-form-wrapper {
  padding: var(--spacing-6);
}

/* Email Not Confirmed Overlay */
.instructor-contact-overlay-wrapper {
  position: relative;
}

.instructor-contact-overlay {
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 90%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}

.instructor-contact-overlay-content {
  text-align: center;
  padding: var(--spacing-6);
}

.instructor-contact-overlay-content .fa-lock {
  font-size: 2rem;
  color: var(--color-gray-400);
  margin-bottom: var(--spacing-3);
}

.instructor-contact-overlay-content p {
  color: var(--color-gray-600);
  font-weight: 500;
}

/* Form Instructions */
.instructor-contact-instructions {
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-6);
}

/* Form Actions */
.instructor-contact-actions {
  display: flex;
  gap: var(--spacing-3);
  justify-content: flex-end;
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-gray-200);
}

/* Error Summary */
.instructor-contact-errors {
  margin-bottom: var(--spacing-6);
}
.onboarding-page {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--spacing-8) var(--spacing-4);
}

.onboarding-header {
  text-align: center;
  margin-bottom: var(--spacing-8);
}

.onboarding-header h1 {
  font-size: var(--font-size-3xl);
  margin: 0 0 var(--spacing-3) 0;
}

.onboarding-subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  max-width: 640px;
  margin: 0 auto;
}

.onboarding-section {
  background: var(--color-surface, #fff);
  border: var(--border-width) solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.onboarding-section__header {
  margin-bottom: var(--spacing-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3);
}

.onboarding-section__header h2 {
  font-size: var(--font-size-xl);
  margin: 0;
}

.onboarding-section__header .form-help-text {
  flex-basis: 100%;
  margin: var(--spacing-2) 0 0 0;
}

.onboarding-section__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-pill, 9999px);
  border: var(--border-width) solid transparent;
  white-space: nowrap;
}

.onboarding-section__badge--complete {
  background: rgba(4, 120, 87, 0.1);
  border-color: #047857;
  color: #047857;
}

.onboarding-section__badge--warning {
  background: rgba(107, 114, 128, 0.1);
  border-color: #9CA3AF;
  color: #4B5563;
}

.onboarding-section__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-4);
  margin-top: var(--spacing-5);
  padding-top: var(--spacing-4);
  border-top: var(--border-width) solid var(--color-border, #e5e7eb);
}

.onboarding-section__indicator {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted, #6b7280);
  min-height: 1em;
}

.onboarding-section__indicator[data-state='saving'] {
  color: var(--color-warning, #b45309);
}

.onboarding-section__indicator[data-state='saved'] {
  color: var(--color-success, #047857);
}

.onboarding-section__indicator[data-state='error'] {
  color: var(--color-danger, #b91c1c);
}

.vehicle-card {
  border: var(--border-width) solid var(--color-border-subtle, #e5e7eb);
  border-radius: var(--radius-sm);
  padding: var(--spacing-5);
  margin-bottom: var(--spacing-4);
  background: var(--color-surface-muted, #f9fafb);
}

.onboarding-submit {
  text-align: center;
  margin-top: var(--spacing-8);
  padding-top: var(--spacing-6);
  border-top: var(--border-width) solid var(--color-border, #e5e7eb);
}

.onboarding-submit .form-help-text {
  margin-top: var(--spacing-3);
}

.btn-submit-verification[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.suburb-picker-application {
  margin: 1.5rem 0;
}

.suburb-search-application {
  position: relative;
  margin-bottom: 1rem;
}

.suburb-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  display: none;
}

.suburb-search-results:not(:empty) {
  display: block;
}

.search-result-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.9rem;
}

.search-result-item:hover {
  background: #f5f5f5;
}

.search-result-item:last-child {
  border-bottom: none;
}

.no-results {
  padding: 1rem;
  text-align: center;
  color: #999;
}

.suburb-map-application {
  width: 100%;
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd;
  margin-bottom: 1.5rem;
}

.selected-suburbs-application {
  background: #f9fafb;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
}

.selected-suburbs-title {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.selected-suburbs-list {
  max-height: 200px;
  overflow-y: auto;
}

.selected-suburbs-list .empty-state {
  text-align: center;
  color: #999;
  font-size: 0.9rem;
  padding: 2rem 1rem;
  margin: 0;
}

.selected-suburb-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: white;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
}

.suburb-name {
  font-size: 0.9rem;
  color: #333;
  font-weight: 500;
}

.remove-suburb-btn {
  padding: 0.25rem 0.75rem;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s;
}

.remove-suburb-btn:hover {
  background: #dc2626;
}

.form-help-note {
  margin-top: 1rem;
  padding: 1rem;
  background: #f0f9ff;
  border-left: 3px solid #3b82f6;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #1e40af;
}

.form-help-note strong {
  font-weight: 600;
}
/* Schedule Grid - Weekly Opening Hours */
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--spacing-3);
}

.schedule-day {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  min-height: 120px;
  min-width: 0;
  overflow: hidden;
}

.schedule-day__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-3);
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--color-gray-100);
}

.schedule-day__name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.schedule-day__add-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: transform 0.15s, background-color 0.15s;
}

.schedule-day__add-btn:hover {
  background: var(--color-primary-dark);
  transform: scale(1.1);
}

.schedule-day__slots {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.schedule-day__closed {
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.schedule-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-gray-50);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.schedule-slot__time {
  color: var(--color-gray-700);
  font-weight: var(--font-weight-medium);
}

/* Editable slot: inline start/end selects that save on change, plus Clear */
.schedule-slot--editable {
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-2);
}

/* One row per time so the full value (e.g. 8:30 AM) is always visible */
.schedule-slot__times {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.schedule-form__select {
  width: 100%;
  padding: var(--spacing-2);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.schedule-form__separator {
  display: none;
}

.schedule-slot__clear-form {
  display: flex;
  justify-content: flex-end;
}

.schedule-slot__clear {
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
  padding: 2px var(--spacing-2);
  transition: color 0.15s, background-color 0.15s;
}

.schedule-slot__clear:hover {
  color: var(--color-error);
  background: var(--color-error-50);
}

.schedule-day__add-form {
  display: inline-flex;
}

/* Calendar Events List */
.events-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.event-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  transition: box-shadow 0.15s;
}

.event-card:hover {
  box-shadow: var(--shadow-md);
}

.event-card--personal_event {
  border-left: 4px solid var(--color-warning);
}

.event-card--time_off {
  border-left: 4px solid var(--color-error);
}

.event-card--extra_open_hours {
  border-left: 4px solid var(--color-success);
}

.event-card__icon {
  font-size: var(--font-size-2xl);
  flex-shrink: 0;
}

.event-card__content {
  flex: 1;
  min-width: 0;
}

.event-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-1);
  flex-wrap: wrap;
}

.event-card__title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.event-card__time {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.event-card__notes {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-top: var(--spacing-2);
}

.event-card__actions {
  display: flex;
  gap: var(--spacing-1);
  flex-shrink: 0;
}

.event-card__edit,
.event-card__delete {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-gray-500);
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.event-card__edit:hover {
  color: var(--color-primary);
  background: var(--color-primary-50);
  border-color: var(--color-primary);
}

.event-card__delete:hover {
  color: var(--color-error);
  background: var(--color-error-50);
  border-color: var(--color-error);
}

/* Schedule Modal — calendar event add/edit modal */
.schedule-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
}

.schedule-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.schedule-modal__content {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}

.schedule-modal__content .form-input,
.schedule-modal__content .form-select,
.schedule-modal__content .form-textarea {
  min-width: 0;
  max-width: 100%;
}

.schedule-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: 1px solid var(--color-gray-100);
}

.schedule-modal__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0;
}

.schedule-modal__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-gray-500);
  font-size: var(--font-size-xl);
  transition: color 0.15s, background-color 0.15s;
}

.schedule-modal__close:hover {
  color: var(--color-gray-700);
  background: var(--color-gray-100);
}

.schedule-modal__form {
  padding: var(--spacing-6);
}

.schedule-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-3);
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-gray-100);
}


@media (max-width: 480px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Small empty state variant */
.empty-state--small {
  padding: var(--spacing-8);
}

.empty-state--small .empty-state__icon {
  font-size: var(--font-size-3xl);
}

.empty-state--small .empty-state__title {
  font-size: var(--font-size-base);
}

.empty-state--small .empty-state__description {
  font-size: var(--font-size-sm);
}

/* Button variants */
.btn-small {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-sm);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-700);
}

.btn-ghost:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

/* Important hint — stands out more than .form-hint */
.important-hint {
  margin-top: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-gray-800);
  background: var(--color-warning-50, #fff8e1);
  border-left: 3px solid var(--color-warning, #f5a623);
  border-radius: var(--radius-md);
}

/* ── Google Calendar Integration ── */

.google-calendar-status {
  padding: var(--spacing-6);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.google-calendar-status__connected {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}

.google-calendar-status__indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gray-400);
}

.google-calendar-status__indicator--connected {
  background: var(--color-success, #22c55e);
}

.google-calendar-status__text {
  font-weight: 600;
  color: var(--color-gray-900);
}

.google-calendar-status__since {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.google-calendar-status__error {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  margin-bottom: var(--spacing-4);
  background: var(--color-danger-50, #fef2f2);
  border: 1px solid var(--color-danger-200, #fecaca);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-danger-700, #b91c1c);
}

.google-calendar-status__error-icon {
  flex-shrink: 0;
}

.google-calendar-status__error-hint {
  display: block;
  margin-top: var(--spacing-1);
  color: var(--color-danger-500, #ef4444);
}

.google-calendar-status__details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}

.google-calendar-status__detail {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.google-calendar-status__label {
  color: var(--color-gray-500);
}

.google-calendar-status__actions {
  display: flex;
  gap: var(--spacing-3);
}

/* Disconnected state */

.google-calendar-connect {
  padding: var(--spacing-6);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.google-calendar-connect__description {
  margin-bottom: var(--spacing-5);
}

.google-calendar-connect__description p {
  color: var(--color-gray-700);
  line-height: 1.6;
  margin-bottom: var(--spacing-3);
}

.google-calendar-connect__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.google-calendar-connect__features li {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  padding-left: var(--spacing-5);
  position: relative;
}

.google-calendar-connect__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success, #22c55e);
  font-weight: 600;
}
/* ==========================================================================
   Booking Flow - Modern UI
   ========================================================================== */

/* Booking Page Layout */
.booking-page {
  padding: var(--spacing-6) 0;
  min-height: calc(100vh - 200px);
  background: linear-gradient(180deg, var(--color-gray-50) 0%, white 100%);
}

/* Progress Steps */
.booking-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--spacing-8);
  padding: 0 var(--spacing-4);
}

.booking-progress__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  min-width: 80px;
}

.booking-progress__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-gray-200);
  color: var(--color-gray-500);
  border-radius: 50%;
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: all 0.3s ease;
}

.booking-progress__step--active .booking-progress__icon {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 153, 0, 0.35);
}

.booking-progress__step--completed .booking-progress__icon {
  background: var(--color-success);
  color: white;
}

.booking-progress__label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-gray-500);
  white-space: nowrap;
}

.booking-progress__step--active .booking-progress__label,
.booking-progress__step--completed .booking-progress__label {
  color: var(--color-gray-900);
}

.booking-progress__line {
  flex: 1;
  height: 2px;
  background: var(--color-gray-200);
  max-width: 80px;
  margin: 0 var(--spacing-2);
  margin-bottom: var(--spacing-6);
  transition: background 0.3s ease;
}

.booking-progress__line--active {
  background: var(--color-primary);
}

/* Layout */
.booking-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--spacing-6);
  align-items: start;
}

@media (max-width: 1024px) {
  .booking-layout {
    grid-template-columns: 1fr;
  }

  .booking-sidebar {
    order: -1;
  }
}

/* Booking Main Card */
.booking-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.booking-card {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.booking-card__header {
  padding: var(--spacing-5) var(--spacing-6);
  background: linear-gradient(135deg, var(--color-gray-50) 0%, white 100%);
  border-bottom: 1px solid var(--color-gray-100);
}

.booking-card__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0;
}

.booking-card__title i {
  color: var(--color-primary);
}

.booking-card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin: var(--spacing-1) 0 0;
}

/* Breadcrumb */
.booking-breadcrumb {
  margin-bottom: 0;
}

.booking-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

.booking-breadcrumb__link:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

/* Selected Date Display */
.booking-selected-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-6);
  background: var(--color-primary-50);
  border-bottom: 1px solid var(--color-gray-100);
}

.booking-selected-date__info {
  display: flex;
  flex-direction: column;
}

.booking-selected-date__day {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
}

.booking-selected-date__full {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.booking-selected-date__change {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-700);
  text-decoration: none;
  transition: all 0.15s ease;
}

.booking-selected-date__change:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Duration Selector */
.duration-selector {
  padding: var(--spacing-5) var(--spacing-6);
  border-bottom: 1px solid var(--color-gray-100);
}

.duration-selector__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-3);
}

.duration-selector__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-3);
}

.duration-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-4);
  background: white;
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.duration-option:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
}

.duration-option--selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.duration-option--selected:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.duration-option__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px var(--spacing-2);
  background: var(--color-success);
  color: white;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.duration-option__time {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-gray-900);
}

.duration-option--selected .duration-option__time {
  color: white;
}

.duration-option__price {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-primary);
}

.duration-option--selected .duration-option__price {
  color: white;
}

/* Time Slots Section */
.time-slots-section {
  padding: var(--spacing-5) var(--spacing-6);
}

.time-slots-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-4);
}

.time-slots-group {
  margin-bottom: var(--spacing-5);
}

.time-slots-group:last-child {
  margin-bottom: 0;
}

.time-slots-group__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-3);
}

.time-slots-group__label i {
  color: var(--color-warning);
}

.time-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: var(--spacing-2);
}

.time-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.time-slot__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.time-slot__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-3) var(--spacing-2);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
  background: white;
  transition: all 0.15s ease;
}

.time-slot:hover .time-slot__label {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-50);
}

.time-slot--selected .time-slot__label,
.time-slot__input:checked + .time-slot__label {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 153, 0, 0.25);
}

/* Time Slots Form */
.time-slots-form {
  padding: 0;
}

/* Booking Submit */
.booking-submit {
  padding: var(--spacing-5) var(--spacing-6);
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-100);
}

.booking-submit__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.booking-submit__note i {
  color: var(--color-success);
}

/* No Slots */
.no-slots {
  text-align: center;
  padding: var(--spacing-12) var(--spacing-6);
}

.no-slots__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--spacing-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  border-radius: 50%;
}

.no-slots__icon i {
  font-size: 32px;
  color: var(--color-gray-400);
}

.no-slots__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.no-slots__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  max-width: 320px;
  margin: 0 auto var(--spacing-6);
}

.no-slots__actions {
  display: flex;
  gap: var(--spacing-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* Date Picker */
.date-picker {
  padding: var(--spacing-5) var(--spacing-6);
}

.date-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-5);
}

.date-picker__month {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
}

.date-picker__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  color: var(--color-gray-600);
  cursor: pointer;
  transition: all 0.15s ease;
}

.date-picker__nav:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
  color: var(--color-gray-900);
}

.date-picker__nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.date-picker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: var(--spacing-2);
}

.date-picker__weekdays span {
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-gray-400);
  padding: var(--spacing-2);
  text-transform: uppercase;
}

.date-picker__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.date-picker__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius-lg);
  border: none;
  background: transparent;
  cursor: default;
  transition: all 0.15s ease;
}

.date-picker__day--empty {
  visibility: hidden;
}

.date-picker__day--past {
  color: var(--color-gray-300);
}

.date-picker__day--unavailable {
  color: var(--color-gray-400);
}

.date-picker__day--today {
  font-weight: 700;
  color: var(--color-gray-900);
}

.date-picker__day--available {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  font-weight: 600;
  cursor: pointer;
}

.date-picker__day--available:hover {
  background: var(--color-primary);
  color: white;
  transform: scale(1.05);
}

.date-picker__footer {
  padding: var(--spacing-4) var(--spacing-6);
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-100);
}

.date-picker__legend {
  display: flex;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-3);
}

.date-picker__legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
}

.date-picker__legend-dot {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
}

.date-picker__legend-dot--available {
  background: var(--color-primary-50);
  border: 2px solid var(--color-primary);
}

.date-picker__legend-dot--unavailable {
  background: var(--color-gray-100);
  border: 2px solid var(--color-gray-300);
}

.date-picker__hint {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin: 0;
}

.date-picker__hint i {
  color: var(--color-info);
}

/* Booking Sidebar */
.booking-sidebar {
  position: sticky;
  top: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

/* Booking Summary Card */
.booking-summary-card {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.booking-summary-card__header {
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-5);
  background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-secondary) 100%);
}

.booking-summary-card__photo {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid rgba(255, 255, 255, 0.2);
}

.booking-summary-card__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.booking-summary-card__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.booking-summary-card__name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: white;
  margin: 0 0 var(--spacing-1);
}

.booking-summary-card__rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.booking-summary-card__stars {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-warning);
}

.booking-summary-card__reviews {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
}

.booking-summary-card__details {
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--color-gray-100);
}

.booking-summary-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2) 0;
}

.booking-summary-card__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.booking-summary-card__label i {
  width: 16px;
  color: var(--color-gray-400);
}

.booking-summary-card__value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-900);
}

/* Pricing Section */
.booking-summary-card__pricing {
  padding: var(--spacing-4) var(--spacing-5);
  background: var(--color-primary-50);
  border-bottom: 1px solid var(--color-gray-100);
}

.booking-summary-card__price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.booking-summary-card__price-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-700);
}

.booking-summary-card__price-value {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--color-primary);
}

.booking-summary-card__price-note {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  text-align: right;
  margin-top: 2px;
}

/* Features/Footer */
.booking-summary-card__footer {
  padding: var(--spacing-4) var(--spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.booking-summary-card__feature {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
}

.booking-summary-card__feature i {
  width: 16px;
  color: var(--color-success);
}

/* Trust Badges */
.booking-trust {
  display: flex;
  gap: var(--spacing-3);
}

.booking-trust__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-gray-700);
}

.booking-trust__item i {
  color: var(--color-success);
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .booking-page {
    padding: var(--spacing-4) 0;
  }

  .booking-progress {
    margin-bottom: var(--spacing-6);
  }

  .booking-progress__step {
    min-width: 60px;
  }

  .booking-progress__icon {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-xs);
  }

  .booking-progress__label {
    font-size: 10px;
  }

  .booking-progress__line {
    max-width: 40px;
    margin-bottom: var(--spacing-5);
  }

  .booking-card__header,
  .booking-selected-date,
  .duration-selector,
  .time-slots-section,
  .booking-submit,
  .date-picker,
  .date-picker__footer {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }

  .duration-selector__options {
    grid-template-columns: 1fr;
    gap: var(--spacing-2);
  }

  .duration-option {
    flex-direction: row;
    justify-content: space-between;
    padding: var(--spacing-3) var(--spacing-4);
  }

  .duration-option__badge {
    position: static;
    transform: none;
    order: -1;
  }

  .time-slots {
    grid-template-columns: repeat(3, 1fr);
  }

  .booking-summary-card__header {
    padding: var(--spacing-4);
  }

  .booking-summary-card__photo {
    width: 56px;
    height: 56px;
  }

  .booking-trust {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .time-slots {
    grid-template-columns: repeat(2, 1fr);
  }

  .booking-selected-date {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-3);
  }

  .no-slots__actions {
    flex-direction: column;
    width: 100%;
  }

  .no-slots__actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Booking Confirmation Page
   ========================================================================== */

.booking-confirmation {
  padding: var(--spacing-8) 0;
  min-height: calc(100vh - 200px);
  background: linear-gradient(180deg, var(--color-gray-50) 0%, white 100%);
}

.booking-confirmation__card {
  max-width: 560px;
  margin: 0 auto;
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-8);
  text-align: center;
}

.booking-confirmation__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-success);
  border-radius: 50%;
  color: white;
  font-size: 36px;
}

.booking-confirmation__status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--spacing-4);
}

.booking-confirmation__status--pending_payment {
  background: var(--color-warning);
  color: white;
}

.booking-confirmation__status--confirmed {
  background: var(--color-success);
  color: white;
}

.booking-confirmation__status--completed {
  background: var(--color-primary);
  color: white;
}

.booking-confirmation__status--cancelled {
  background: var(--color-error);
  color: white;
}

.booking-confirmation__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.booking-confirmation__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-6);
}

/* Booking Details */
.booking-details {
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
  margin-bottom: var(--spacing-6);
  text-align: left;
}

.booking-details__instructor {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding-bottom: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-200);
}

.booking-details__photo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
}

.booking-details__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.booking-details__instructor-info {
  display: flex;
  flex-direction: column;
}

.booking-details__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-3);
}

.booking-details__row:last-child {
  margin-bottom: 0;
}

.booking-details__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
}

.booking-details__item > i {
  color: var(--color-gray-400);
  margin-top: 2px;
}

.booking-details__item > div {
  display: flex;
  flex-direction: column;
}

.booking-details__label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.booking-details__value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-900);
}

.booking-details__value--price {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.booking-details__value--credits {
  color: var(--color-success);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.booking-details__value--credits i {
  margin-right: var(--spacing-1);
}

/* Confirmation Actions */
.booking-confirmation__setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-5);
  margin-bottom: var(--spacing-5);
  background: var(--color-primary-50);
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--radius-lg);
}

.booking-confirmation__setup-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.booking-confirmation__setup-text strong {
  color: var(--color-secondary);
}

.booking-confirmation__setup-text span {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.booking-confirmation__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
}

.booking-confirmation__action-row {
  display: flex;
  gap: var(--spacing-3);
}

.booking-confirmation__action-row .btn {
  flex: 1;
}

/* Reference Number */
.booking-confirmation__ref {
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-gray-200);
}

.booking-confirmation__ref-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-1);
}

.booking-confirmation__ref-value {
  font-family: monospace;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
  letter-spacing: 1px;
}

/* Next Steps Section */
.booking-next-steps {
  max-width: 700px;
  margin: var(--spacing-8) auto 0;
}

.booking-next-steps__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-4);
  text-align: center;
}

.booking-next-steps__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-4);
}

.booking-next-steps__item {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.booking-next-steps__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--spacing-3);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-50);
  border-radius: 50%;
  color: var(--color-primary);
  font-size: var(--font-size-xl);
}

.booking-next-steps__content h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.booking-next-steps__content p {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  line-height: 1.5;
}

/* Mobile adjustments for confirmation */
@media (max-width: 640px) {
  .booking-confirmation {
    padding: var(--spacing-4) 0;
  }

  .booking-confirmation__card {
    padding: var(--spacing-6);
    margin: 0 var(--spacing-4);
    border-radius: var(--radius-lg);
  }

  .booking-confirmation__icon {
    width: 64px;
    height: 64px;
    font-size: 28px;
  }

  .booking-details__row {
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
  }

  .booking-next-steps__list {
    grid-template-columns: 1fr;
  }

  .booking-confirmation__action-row {
    flex-direction: column;
  }
}
/* ============================================
   Booking Wizard Styles
   Multi-step booking flow (EZLicence-style)
   ============================================ */

/* Page Layout */
.wizard-page {
  background: var(--color-gray-50);
  min-height: calc(100vh - 80px);
  padding: var(--spacing-8) 0 var(--spacing-16);
}

.wizard-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--spacing-8);
  align-items: start;
}

.wizard-main {
  min-width: 0;
}

.wizard-sidebar {
  position: sticky;
  top: calc(80px + var(--spacing-4));
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

/* Progress Bar - Clean numbered steps */
.wizard-progress {
  margin-bottom: var(--spacing-8);
}

.wizard-progress__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.wizard-progress__step {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  position: relative;
}

.wizard-progress__number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.wizard-progress__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-400);
  white-space: nowrap;
}

.wizard-progress__step--active .wizard-progress__number {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 2px 8px rgba(255, 153, 0, 0.3);
}

.wizard-progress__step--active .wizard-progress__label {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-semibold);
}

.wizard-progress__step--completed .wizard-progress__number {
  background: var(--color-success);
  color: var(--color-white);
}

.wizard-progress__step--completed .wizard-progress__label {
  color: var(--color-gray-600);
}

.wizard-progress__connector {
  width: 60px;
  height: 2px;
  background: var(--color-gray-200);
  margin: 0 var(--spacing-3);
  border-radius: 2px;
  transition: background 0.3s ease;
}

.wizard-progress__connector--completed {
  background: var(--color-success);
}

/* Hide labels on mobile, show numbers only */
@media (max-width: 480px) {
  .wizard-progress__label {
    display: none;
  }

  .wizard-progress__connector {
    width: 40px;
    margin: 0 var(--spacing-2);
  }
}

/* Wizard Card */
.wizard-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.wizard-card__header {
  padding: var(--spacing-6) var(--spacing-8);
  border-bottom: 1px solid var(--color-gray-100);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.wizard-card__header-content {
  flex: 1;
}

.wizard-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  /* Brand navy and the house heading tracking — gray-900 with -1.5px was a
     one-off that matched nothing else on the site. */
  color: var(--color-secondary);
  letter-spacing: -0.02em;
  margin: 0 0 var(--spacing-1);
}

.wizard-card__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-gray-500);
  margin: 0;
}

.wizard-back-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  text-decoration: none;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.wizard-back-link:hover {
  color: var(--color-primary);
  background: var(--color-primary-50);
}

.wizard-card__body {
  padding: var(--spacing-6) var(--spacing-8);
}

/* Wizard Form */
.wizard-form {
  padding: var(--spacing-6) var(--spacing-8);
}

.wizard-section {
  margin-top: var(--spacing-8);
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--color-gray-100);
}

.wizard-section__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin: 0 0 var(--spacing-4);
}

.wizard-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
}

/* Transmission Toggle */
.transmission-toggle {
  display: flex;
  gap: var(--spacing-2);
  background: var(--color-gray-100);
  padding: var(--spacing-1);
  border-radius: var(--radius-lg);
}

.transmission-option {
  flex: 1;
  cursor: pointer;
}

.transmission-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.transmission-option__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  transition: all 0.2s ease;
}

.transmission-option--selected .transmission-option__label,
.transmission-option input:checked + .transmission-option__label {
  background: var(--color-white);
  color: var(--color-gray-900);
  box-shadow: var(--shadow-sm);
}

/* Instructor Selection */
.instructor-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-8);
  border-bottom: 1px solid var(--color-gray-100);
  background: var(--color-gray-50);
}

.instructor-filters__group {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.instructor-filters__label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.instructor-filters__buttons {
  display: flex;
  gap: var(--spacing-2);
}

.filter-btn {
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  text-decoration: none;
  transition: all 0.2s ease;
}

.filter-btn:hover {
  border-color: var(--color-gray-300);
  color: var(--color-gray-900);
}

.filter-btn--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.filter-btn--active:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

.instructor-filters__count {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.instructor-select-form {
  padding: var(--spacing-6) var(--spacing-8);
}

.instructor-select-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

/* Instructor Select Card */
.instructor-select-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  cursor: pointer;
  transition: all 0.2s ease;
}

.instructor-select-card:hover {
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-md);
}

.instructor-select-card--selected {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
}

.instructor-select-card__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.instructor-select-card__photo {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
}

.instructor-select-card__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.instructor-select-card__verified {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  background: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-success);
  font-size: 16px;
  box-shadow: var(--shadow-sm);
}

.instructor-select-card__content {
  flex: 1;
  min-width: 0;
}

.instructor-select-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-2);
}

.instructor-select-card__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0;
}

.instructor-select-card__rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

.instructor-select-card__rating i {
  color: var(--color-warning);
}

.instructor-select-card__reviews {
  color: var(--color-gray-400);
  font-weight: normal;
}

.instructor-select-card__details {
  display: flex;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-2);
}

.instructor-select-card__detail {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.instructor-select-card__detail i {
  color: var(--color-gray-400);
  font-size: var(--font-size-xs);
}

.instructor-select-card__badges {
  display: flex;
  gap: var(--spacing-2);
}

.instructor-select-card__badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  background: var(--color-gray-100);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
}

.instructor-select-card__badge i {
  color: var(--color-success);
}

.instructor-select-card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: var(--spacing-4);
}

.instructor-select-card__price-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}

.instructor-select-card__price-unit {
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
}

.instructor-select-card__check {
  font-size: 28px;
  color: var(--color-gray-200);
  transition: all 0.2s ease;
}

.instructor-select-card--selected .instructor-select-card__check {
  color: var(--color-primary);
}

/* Schedule Selection */
.schedule-selected-date {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-8);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-100);
}

/* Schedule Price Card - Show cost earlier per Baymard research */
.schedule-price-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--spacing-4);
  color: var(--color-white);
}

.schedule-price-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  background: rgba(0, 0, 0, 0.1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.schedule-price-card__content {
  padding: var(--spacing-4);
  text-align: center;
}

.schedule-price-card__amount {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  margin-bottom: var(--spacing-1);
}

.schedule-price-card__details {
  font-size: var(--font-size-sm);
  opacity: 0.9;
}

.schedule-selected-date__calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.schedule-selected-date__month {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
}

.schedule-selected-date__day {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  line-height: 1;
}

.schedule-selected-date__info {
  display: flex;
  flex-direction: column;
}

.schedule-selected-date__weekday {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.schedule-selected-date__full {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Time Slots - reuse from _booking.css */
.time-slots-form {
  padding: var(--spacing-6) var(--spacing-8);
}

.time-slots-section {
  margin-bottom: var(--spacing-6);
}

.time-slots-timezone-hint {
  margin-top: var(--spacing-3);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.time-slots-timezone-hint i {
  margin-right: var(--spacing-1);
}

.time-slots-group {
  margin-bottom: var(--spacing-6);
}

.time-slots-group__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-3);
}

.time-slots-group__label i {
  color: var(--color-primary);
}

.time-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.time-slot {
  display: inline-flex;
  cursor: pointer;
}

.time-slot__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.time-slot__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  transition: all 0.2s ease;
}

.time-slot:hover .time-slot__label {
  border-color: var(--color-gray-300);
}

.time-slot__input:checked + .time-slot__label {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* Date Picker - reuse from _booking.css */
.date-picker {
  padding: var(--spacing-6) var(--spacing-8);
}

/* Wizard Actions */
.wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-6) var(--spacing-8);
  border-top: 1px solid var(--color-gray-100);
  background: var(--color-gray-50);
}

.wizard-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
}

/* Wizard Empty State */
.wizard-empty {
  padding: var(--spacing-12) var(--spacing-8);
  text-align: center;
}

.wizard-empty__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-6);
  background: var(--color-gray-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--color-gray-400);
}

.wizard-empty__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin: 0 0 var(--spacing-2);
}

.wizard-empty__text {
  font-size: var(--font-size-base);
  color: var(--color-gray-500);
  margin: 0 0 var(--spacing-6);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.wizard-empty__actions {
  display: flex;
  gap: var(--spacing-3);
  justify-content: center;
}

/* Wizard Sidebar Components */
.wizard-summary {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.wizard-summary__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  padding: var(--spacing-5);
  border-bottom: 1px solid var(--color-gray-100);
  margin: 0;
}

.wizard-summary__items {
  padding: var(--spacing-4);
}

.wizard-summary__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  border-radius: var(--radius-md);
  transition: background 0.2s ease;
}

.wizard-summary__item:hover {
  background: var(--color-gray-50);
}

.wizard-summary__item-icon {
  width: 36px;
  height: 36px;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  flex-shrink: 0;
}

.wizard-summary__item--instructor .wizard-summary__item-photo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.wizard-summary__item--instructor .wizard-summary__item-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.wizard-summary__item-content {
  flex: 1;
  min-width: 0;
}

.wizard-summary__item-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wizard-summary__item-value {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

.wizard-summary__item-edit {
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  padding: var(--spacing-1);
  transition: color 0.2s ease;
}

.wizard-summary__item-edit:hover {
  color: var(--color-primary);
}

/* Prominent Instructor Card in Booking Summary */
.wizard-summary__instructor-card {
  padding: var(--spacing-5);
  margin: var(--spacing-2) 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}

/* Images row: profile photo + car image */
.wizard-summary__instructor-images {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

/* Photo wrapper with verified badge overlay */
.wizard-summary__instructor-photo-wrapper {
  position: relative;
  display: inline-block;
}

.wizard-summary__instructor-photo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 2px solid var(--color-gray-200);
}

.wizard-summary__instructor-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Verified badge positioned on bottom-right of photo */
.wizard-summary__verified-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  background: var(--color-white);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.wizard-summary__verified-badge i {
  font-size: 16px;
  color: #1da1f2;
}

/* Car image */
.wizard-summary__car-image {
  width: 80px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wizard-summary__car-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Car name */
.wizard-summary__car-name {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin: 0;
  margin-top: var(--spacing-1);
}

.wizard-summary__instructor-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0;
}

.wizard-summary__instructor-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
}

.wizard-summary__instructor-rating .rating-star {
  color: var(--color-accent-yellow);
  font-size: var(--font-size-base);
}

.wizard-summary__instructor-rating .rating-number {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  color: var(--color-secondary);
}

.wizard-summary__instructor-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-gray-100);
}

.wizard-summary__badge-item {
  width: 36px;
  height: 36px;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wizard-summary__badge-item i {
  font-size: 1rem;
  color: var(--color-secondary);
}

/* Order Summary Card */
.wizard-order-summary {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  padding: var(--spacing-5);
}

.wizard-order-summary__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-4) 0;
}

.wizard-order-summary__rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.wizard-order-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
}

.wizard-order-summary__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.wizard-order-summary__value {
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.wizard-order-summary__value--discount {
  color: var(--color-success);
}

.wizard-order-summary__discount-badge {
  display: inline-block;
  background: var(--color-success);
  color: var(--color-white);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.wizard-order-summary__row--discount .wizard-order-summary__label {
  color: var(--color-secondary);
}

.wizard-order-summary__row--fee {
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
}

.wizard-order-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-4);
  margin-top: var(--spacing-4);
  border-top: 2px solid var(--color-gray-100);
}

.wizard-order-summary__total-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.wizard-order-summary__total-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  color: var(--color-secondary);
}

.wizard-order-summary__installments {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-3);
  border-top: 1px dashed var(--color-gray-200);
}

.wizard-summary__trust {
  padding: var(--spacing-4);
  border-top: 1px solid var(--color-gray-100);
}

.wizard-summary__trust-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-2);
}

.wizard-summary__trust-item:last-child {
  margin-bottom: 0;
}

.wizard-summary__trust-item i {
  color: var(--color-success);
}

/* Info Card */
.wizard-info-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-5);
}

.wizard-info-card__icon {
  width: 40px;
  height: 40px;
  background: var(--color-info);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-4);
}

.wizard-info-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin: 0 0 var(--spacing-3);
}

.wizard-info-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wizard-info-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-2);
}

.wizard-info-card__list li:last-child {
  margin-bottom: 0;
}

.wizard-info-card__list li i {
  color: var(--color-success);
  margin-top: 2px;
}

/* Help Card */
.wizard-help-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-xl);
  padding: var(--spacing-5);
  color: var(--color-white);
}

.wizard-help-card__icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-3);
}

.wizard-help-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--spacing-2);
}

.wizard-help-card__text {
  font-size: var(--font-size-sm);
  opacity: 0.9;
  margin: 0 0 var(--spacing-3);
}

.wizard-help-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  text-decoration: underline;
}

.wizard-help-card__link:hover {
  opacity: 0.9;
}

/* Checkout Styles */
.checkout-booking-card {
  margin: var(--spacing-6) var(--spacing-8);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.checkout-booking-card__header {
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-200);
}

.checkout-booking-card__header h3 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.checkout-booking-card__content {
  padding: var(--spacing-4);
}

.checkout-booking-card__instructor {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.checkout-booking-card__photo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.checkout-booking-card__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.checkout-booking-card__info {
  flex: 1;
}

.checkout-booking-card__name {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.checkout-booking-card__rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.checkout-booking-card__rating i {
  color: var(--color-warning);
}

.checkout-booking-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.checkout-booking-card__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.checkout-booking-card__row i {
  width: 16px;
  color: var(--color-gray-400);
}

.checkout-booking-card__row--discount {
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
}

.checkout-booking-card__row--discount i {
  color: var(--color-success);
}

.checkout-booking-card__row strong {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-semibold);
}

.checkout-section {
  padding: var(--spacing-6) var(--spacing-8);
  border-top: 1px solid var(--color-gray-100);
}

.checkout-section:first-of-type {
  border-top: none;
}

.checkout-section__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin: 0 0 var(--spacing-4);
}

.checkout-section__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin: -var(--spacing-2) 0 var(--spacing-4);
}

.checkout-link {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.checkout-link:hover {
  text-decoration: underline;
}

.checkout-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
}

.checkout-form-grid .form-group:nth-child(3) {
  grid-column: 1;
}

.checkout-user-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
}

.checkout-user-card__avatar {
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-xl);
}

.checkout-user-card__info {
  flex: 1;
}

.checkout-user-card__name {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.checkout-user-card__email,
.checkout-user-card__phone {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.checkout-user-card__check {
  color: var(--color-success);
  font-size: 24px;
}

.checkout-payment-card {
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  overflow: hidden;
}

.checkout-payment-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-200);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}

.checkout-payment-card__header i {
  font-size: var(--font-size-2xl);
  color: #635BFF;
}

.checkout-payment-placeholder {
  padding: var(--spacing-8);
  text-align: center;
}

.checkout-payment-placeholder__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--spacing-4);
  background: var(--color-gray-200);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--color-gray-400);
}

.checkout-payment-placeholder__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin: 0;
}

/* Stripe Payment Element */
.checkout-payment-element {
  padding: var(--spacing-4);
  background: var(--color-white);
  min-height: 200px;
  position: relative;
}

/* Loading state while Payment Element initializes */
.checkout-payment-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  padding: var(--spacing-8);
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

.checkout-payment-loading.hidden {
  display: none;
}

.checkout-payment-loading__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-gray-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Opacity transition for loading state */
.checkout-payment-element .opacity-50 {
  opacity: 0.5;
  pointer-events: none;
}

.checkout-payment-error {
  margin-top: var(--spacing-3);
  padding: var(--spacing-3);
  background: var(--color-error-50);
  border: 1px solid var(--color-error-200);
  border-radius: var(--radius-md);
  color: var(--color-error-700);
  font-size: var(--font-size-sm);
}

.checkout-payment-error.hidden {
  display: none;
}

.checkout-split-payment-info {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
  padding: var(--spacing-3);
  background: var(--color-info-50);
  border: 1px solid var(--color-info-200);
  border-radius: var(--radius-md);
  color: var(--color-info-700);
  font-size: var(--font-size-sm);
}

.checkout-split-payment-info i {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Loading spinner for payment button */
.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.checkout-summary {
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.checkout-summary__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-2);
}

.checkout-summary__row--discount {
  align-items: flex-start;
}

/* Only the amount is highlighted; the label and sub-note stay neutral. */
.checkout-summary__row--discount > span:last-child {
  color: var(--color-success);
}

.checkout-summary__subnote,
.order-summary-card__subnote {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-500);
}

.checkout-summary__subnote-amount,
.order-summary-card__subnote-amount {
  color: var(--color-success);
}

.checkout-summary__total {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  padding-top: var(--spacing-4);
  margin-top: var(--spacing-2);
  border-top: 2px solid var(--color-gray-200);
}

.checkout-terms {
  padding: 0 var(--spacing-8) var(--spacing-6);
}

.checkout-terms__label {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  cursor: pointer;
}

.checkout-terms__checkbox {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}

.checkout-terms__label a {
  color: var(--color-primary);
  text-decoration: none;
}

.checkout-terms__label a:hover {
  text-decoration: underline;
}

.checkout-guarantee {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-5);
}

.checkout-guarantee__icon {
  width: 40px;
  height: 40px;
  background: var(--color-success);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-4);
}

.checkout-guarantee__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin: 0 0 var(--spacing-3);
}

.checkout-guarantee__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.checkout-guarantee__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-2);
}

.checkout-guarantee__list li:last-child {
  margin-bottom: 0;
}

.checkout-guarantee__list li i {
  color: var(--color-success);
  margin-top: 2px;
}

/* Responsive */
@media (max-width: 1024px) {
  .wizard-layout {
    grid-template-columns: 1fr;
  }

  .wizard-sidebar {
    position: static;
    order: -1;
  }

  .wizard-sidebar .wizard-summary {
    display: none;
  }

  .wizard-progress__connector {
    width: 40px;
  }

  .wizard-progress__label {
    display: none;
  }

  .checkout-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .wizard-page {
    padding: var(--spacing-4) 0 var(--spacing-8);
  }

  .wizard-progress {
    /* No padding needed - removed card styling */
  }

  .wizard-progress__number {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-xs);
  }

  .wizard-progress__connector {
    width: 24px;
    margin: 0 var(--spacing-1);
  }

  .wizard-card__header {
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
  }

  .wizard-card__title {
    font-size: var(--font-size-xl);
  }

  .wizard-form {
    padding: var(--spacing-4) var(--spacing-5);
  }

  .package-options {
    grid-template-columns: 1fr;
  }

  .wizard-form-grid {
    grid-template-columns: 1fr;
  }

  .instructor-filters {
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
  }

  .instructor-select-card {
    flex-wrap: wrap;
  }

  .instructor-select-card__price {
    margin-right: auto;
    flex-direction: row;
    gap: var(--spacing-1);
    margin-top: var(--spacing-2);
    order: 1;
    width: 100%;
    padding-left: calc(72px + var(--spacing-4));
  }

  .instructor-select-card__check {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
  }

  .wizard-actions {
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
  }

  .wizard-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .time-slots-form {
    padding: var(--spacing-4) var(--spacing-5);
  }

  .schedule-selected-date {
    padding: var(--spacing-4) var(--spacing-5);
  }

  .checkout-booking-card {
    margin: var(--spacing-4) var(--spacing-5);
  }

  .checkout-section {
    padding: var(--spacing-4) var(--spacing-5);
  }

  .checkout-terms {
    padding: 0 var(--spacing-5) var(--spacing-4);
  }
}

/* =============================================
   Utility Classes
   ============================================= */

.checkout-section.hidden,
.checkout-summary__row.hidden {
  display: none;
}

/* =============================================
   Credit System Styles
   ============================================= */

.checkout-credits-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.checkout-credits-card__balance {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: rgba(255, 255, 255, 0.5);
}

.checkout-credits-card__icon {
  width: 48px;
  height: 48px;
  background: var(--color-success);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-xl);
}

.checkout-credits-card__info {
  display: flex;
  flex-direction: column;
}

.checkout-credits-card__hours {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}

.checkout-credits-card__label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.checkout-credits-card__options {
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.checkout-credits-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.checkout-credits-option:hover {
  border-color: var(--color-primary);
}

.checkout-credits-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.checkout-credits-option input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
}

.checkout-credits-option__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.checkout-credits-option__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}

.checkout-credits-option__title i {
  color: var(--color-success);
}

.checkout-credits-option__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.checkout-credits-option__badge {
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-success);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
}

.checkout-credits-option__price {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}

.checkout-credits-card__insufficient {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: rgba(255, 255, 255, 0.5);
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
}

.checkout-credits-card__insufficient i {
  color: var(--color-warning);
  margin-top: 2px;
}

/* Credit usage display (no toggle - just info) */
.checkout-credits-card__usage {
  padding: var(--spacing-4);
  background: rgba(255, 255, 255, 0.7);
}

.checkout-credits-usage {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.checkout-credits-usage > i {
  color: var(--color-success);
  font-size: var(--font-size-xl);
}

.checkout-credits-usage__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.checkout-credits-usage__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}

.checkout-credits-usage__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.checkout-credits-usage__badge {
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-success);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* New credits info (for users without existing credits) */
.checkout-credits-card__new-credits {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: rgba(255, 255, 255, 0.5);
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
}

.checkout-credits-card__new-credits > i {
  color: var(--color-primary);
  margin-top: 2px;
}

.checkout-credits-card__new-credits--first {
  padding: var(--spacing-4);
  background: transparent;
}

.checkout-credits-new {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  width: 100%;
}

.checkout-credits-new > i {
  color: var(--color-primary);
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

.checkout-credits-new__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.checkout-credits-new__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}

.checkout-credits-new__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Order summary credit styles */
.checkout-summary__row--credits {
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
}

.checkout-summary__row--credits i {
  margin-right: var(--spacing-1);
}

.checkout-summary__strikethrough {
  color: var(--color-gray-400);
  text-decoration: line-through;
}

/* Mobile responsiveness for credits */
@media (max-width: 768px) {
  .checkout-credits-card__balance {
    padding: var(--spacing-3);
  }

  .checkout-credits-card__icon {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-lg);
  }

  .checkout-credits-card__options {
    padding: var(--spacing-3);
  }

  .checkout-credits-option {
    padding: var(--spacing-3);
    flex-wrap: wrap;
  }

  .checkout-credits-option__badge,
  .checkout-credits-option__price {
    margin-left: auto;
  }
}

/* =============================================
   Credit Pack Purchase Flow
   ============================================= */

/* Checkout Pack Info Card */
.checkout-pack-info {
  margin: var(--spacing-6) var(--spacing-8);
  background: linear-gradient(135deg, var(--color-primary-50) 0%, #fff7ed 100%);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.checkout-pack-info__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 153, 0, 0.2);
}

.checkout-pack-info__icon {
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-xl);
}

.checkout-pack-info__title {
  flex: 1;
}

.checkout-pack-info__name {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}

.checkout-pack-info__hours {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.checkout-pack-info__badge {
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-success);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
}

.checkout-pack-info__benefits {
  padding: var(--spacing-4);
}

.checkout-pack-info__benefits-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  margin: 0 0 var(--spacing-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.checkout-pack-info__benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-2);
}

.checkout-pack-info__benefits-list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.checkout-pack-info__benefits-list li i {
  color: var(--color-success);
}

/* Checkout Pack Sidebar */
.checkout-pack-sidebar {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.checkout-pack-sidebar__header {
  padding: var(--spacing-5);
  border-bottom: 1px solid var(--color-gray-100);
}

.checkout-pack-sidebar__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin: 0;
}

.checkout-pack-sidebar__content {
  padding: var(--spacing-4);
}

.checkout-pack-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-3);
}

.checkout-pack-sidebar__item:last-child {
  margin-bottom: 0;
}

.checkout-pack-sidebar__item-icon {
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-base);
}

.checkout-pack-sidebar__item-content {
  flex: 1;
}

.checkout-pack-sidebar__item-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.checkout-pack-sidebar__item-value {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

.checkout-pack-sidebar__pricing {
  padding: var(--spacing-4);
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-100);
}

.checkout-pack-sidebar__price-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-2);
}

.checkout-pack-sidebar__price-row--discount {
  color: var(--color-success);
}

.checkout-pack-sidebar__price-total {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  padding-top: var(--spacing-3);
  margin-top: var(--spacing-2);
  border-top: 2px dashed var(--color-gray-300);
}

.checkout-pack-sidebar__steps {
  list-style: none;
  padding: var(--spacing-4);
  margin: 0;
  counter-reset: step;
}

.checkout-pack-sidebar__steps li {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  border-bottom: 1px solid var(--color-gray-100);
}

.checkout-pack-sidebar__steps li:last-child {
  border-bottom: none;
}

.checkout-pack-sidebar__step-num {
  width: 24px;
  height: 24px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.checkout-pack-sidebar__header i {
  color: var(--color-primary);
  margin-right: var(--spacing-2);
}

/* Checkout pack benefits in main card */
.checkout-pack-benefits {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-3) 0;
}

.checkout-pack-benefits__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.checkout-pack-benefits__item i {
  color: var(--color-success);
  font-size: var(--font-size-xs);
}

/* Pack Confirmed Page */
.pack-confirmed {
  text-align: center;
  padding: var(--spacing-12) var(--spacing-8);
}

.pack-confirmed__icon {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--spacing-6);
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: var(--color-success);
  animation: pack-confirmed-bounce 0.6s ease-out;
}

@keyframes pack-confirmed-bounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pack-confirmed__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin: 0 0 var(--spacing-2);
}

.pack-confirmed__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray-500);
  margin: 0 0 var(--spacing-8);
}

.pack-confirmed__credits-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-6);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-xl);
  color: var(--color-white);
  margin-bottom: var(--spacing-8);
}

.pack-confirmed__credits-badge i {
  font-size: var(--font-size-2xl);
}

.pack-confirmed__credits-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
}

.pack-confirmed__credits-label {
  font-size: var(--font-size-base);
  opacity: 0.9;
}

.pack-confirmed__details {
  max-width: 400px;
  margin: 0 auto var(--spacing-8);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.pack-confirmed__detail-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  padding: var(--spacing-2) 0;
}

.pack-confirmed__detail-row:not(:last-child) {
  border-bottom: 1px solid var(--color-gray-200);
}

.pack-confirmed__detail-row strong {
  color: var(--color-gray-900);
}

.pack-confirmed__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  align-items: center;
}

.pack-confirmed__actions .btn-lg {
  min-width: 280px;
}

.pack-confirmed__hint {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  text-align: center;
  margin-top: var(--spacing-4);
  max-width: 320px;
}

.pack-confirmed__info {
  max-width: 360px;
  margin: 0 auto var(--spacing-8);
}

.pack-confirmed__info-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  padding: var(--spacing-2) 0;
}

.pack-confirmed__info-item i {
  color: var(--color-success);
  font-size: var(--font-size-sm);
}

.pack-confirmed__ref {
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-gray-200);
}

.pack-confirmed__ref-label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: var(--spacing-1);
}

.pack-confirmed__ref-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  font-family: monospace;
}

.pack-confirmed__note {
  max-width: 500px;
  margin: var(--spacing-8) auto 0;
  padding: var(--spacing-4);
  background: #fef3c7;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  text-align: left;
}

.pack-confirmed__note i {
  color: var(--color-warning);
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

.pack-confirmed__note-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.pack-confirmed__note-text strong {
  display: block;
  margin-bottom: var(--spacing-1);
  color: var(--color-gray-900);
}

/* Modern booking cards for confirmation */
.booking-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  max-width: 420px;
  margin: var(--spacing-8) auto;
}

.booking-card {
  display: flex;
  align-items: stretch;
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.booking-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.booking-card__date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4) var(--spacing-5);
  background: linear-gradient(135deg, var(--color-primary) 0%, #e67e00 100%);
  color: white;
  min-width: 80px;
}

.booking-card__day {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  opacity: 0.9;
}

.booking-card__date-num {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  font-family: var(--font-family-heading);
}

.booking-card__month {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  opacity: 0.9;
}

.booking-card__details {
  flex: 1;
  padding: var(--spacing-4) var(--spacing-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-2);
  text-align: left;
}

.booking-card__time {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  font-family: var(--font-family-heading);
}

.booking-card__duration {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.booking-card__duration i {
  font-size: var(--font-size-xs);
}

.booking-card__instructor {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  margin-top: var(--spacing-1);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-gray-100);
}

.booking-card__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.booking-card__avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  color: var(--color-gray-400);
  font-size: var(--font-size-xs);
}

.pack-confirmed__credits--secondary {
  margin-top: var(--spacing-4);
}

.pack-confirmed__credits-badge--small {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
}

.pack-confirmed__credits-badge--small .pack-confirmed__credits-value {
  font-size: var(--font-size-lg);
}

@media (max-width: 480px) {
  .booking-card__date-badge {
    min-width: 70px;
    padding: var(--spacing-3) var(--spacing-4);
  }

  .booking-card__date-num {
    font-size: var(--font-size-2xl);
  }

  .booking-card__details {
    padding: var(--spacing-3) var(--spacing-4);
  }

  .booking-card__time {
    font-size: var(--font-size-base);
  }
}

/* Mobile responsiveness for pack flow */
@media (max-width: 768px) {
  .checkout-pack-info {
    margin: var(--spacing-4) var(--spacing-5);
  }

  .checkout-pack-info__header {
    padding: var(--spacing-3);
  }

  .checkout-pack-info__icon {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-lg);
  }

  .checkout-pack-info__benefits {
    padding: var(--spacing-3);
  }

  .checkout-pack-info__benefits-list {
    grid-template-columns: 1fr;
  }

  .pack-confirmed {
    padding: var(--spacing-8) var(--spacing-5);
  }

  .pack-confirmed__icon {
    width: 72px;
    height: 72px;
    font-size: 36px;
  }

  .pack-confirmed__title {
    font-size: var(--font-size-2xl);
  }

  .pack-confirmed__credits-badge {
    padding: var(--spacing-3) var(--spacing-5);
  }

  .pack-confirmed__credits-value {
    font-size: var(--font-size-2xl);
  }

  .pack-confirmed__actions .btn-lg {
    min-width: 100%;
  }
}

/* ============================================
   Learner Details Step (Step 4)
   ============================================ */

/* Login Section */
.learner-login-section {
  margin-bottom: var(--spacing-6);
}

.learner-login-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-5);
  background: var(--color-gray-50);
  border: 2px dashed var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.learner-login-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-success-light);
  color: var(--color-success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

.learner-login-card__content {
  flex: 1;
}

.learner-login-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin: 0 0 var(--spacing-1);
}

.learner-login-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin: 0;
}

/* Divider */
.learner-divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.learner-divider::before,
.learner-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-gray-200);
}

.learner-divider span {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Form Styles */
.learner-form {
  padding: var(--spacing-6) var(--spacing-8);
}

.learner-form__section {
  margin-bottom: var(--spacing-8);
}

.learner-form__section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0 0 var(--spacing-5);
}

.learner-form__section-title i {
  color: var(--color-primary);
}

.learner-form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-5);
}

.learner-form__grid .form-group:only-child,
.learner-form__grid .form-group:nth-child(3):last-child {
  grid-column: 1 / -1;
}

.learner-form__terms {
  margin-bottom: var(--spacing-6);
}

.learner-form__terms-label {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  cursor: pointer;
}

.learner-form__terms-checkbox {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.learner-form__terms-label a {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.learner-form__terms-label a:hover {
  text-decoration: underline;
}

/* Form hints */
.form-hint {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  margin-top: var(--spacing-1);
}

/* Benefits Sidebar */
.learner-benefits {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-6);
  box-shadow: var(--shadow-sm);
}

.learner-benefits__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin: 0 0 var(--spacing-4);
}

.learner-benefits__title i {
  color: var(--color-primary);
}

.learner-benefits__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.learner-benefits__list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.learner-benefits__list i {
  color: var(--color-success);
  font-size: var(--font-size-sm);
}

/* Credit pack sidebar summary */
.checkout-pack-sidebar__summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding: var(--spacing-4);
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
}

.checkout-pack-sidebar__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.checkout-pack-sidebar__hours {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Booking For Toggle (self vs someone else) */
.booking-for-toggle {
  display: flex;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
}

.booking-for-toggle__option {
  flex: 1;
  cursor: pointer;
}

.booking-for-toggle__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.booking-for-toggle__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  transition: all 0.2s ease;
}

.booking-for-toggle__label i {
  font-size: var(--font-size-base);
}

.booking-for-toggle__option:hover .booking-for-toggle__label {
  border-color: var(--color-gray-300);
}

.booking-for-toggle__option input:checked + .booking-for-toggle__label {
  background: var(--color-primary-50);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.booking-for-toggle__option input:checked + .booking-for-toggle__label i {
  color: var(--color-primary);
}

/* Learner Details Section (when booking for someone else) */
.learner-details-section {
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-gray-200);
  margin-top: var(--spacing-2);
}

.learner-details-section.hidden {
  display: none;
}

/* Form Footer */
.learner-form__footer {
  padding: var(--spacing-4) var(--spacing-8);
  text-align: center;
}

/* Form Note */
.learner-form__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin: 0 0 var(--spacing-2);
}

.learner-form__note i {
  color: var(--color-success);
}

/* Sign in link */
.learner-form__signin {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin: 0;
}

.learner-form__signin a {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.learner-form__signin a:hover {
  text-decoration: underline;
}

/* Form Required Indicator */
.form-required {
  color: var(--color-error);
  font-weight: var(--font-weight-medium);
}

/* Simpler grid for guest checkout */
.learner-form__grid--simple {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

/* Direct children only — the old descendant selector reached inside
   .form-row and pinned the name fields into one stacked column. */
.learner-form__grid--simple > .form-group {
  grid-column: 1 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .learner-form {
    padding: var(--spacing-4) var(--spacing-5);
  }

  .learner-login-card {
    flex-direction: column;
    text-align: center;
  }

  .learner-form__grid {
    grid-template-columns: 1fr;
  }

  .learner-form__grid .form-group {
    grid-column: 1 !important;
  }

  .learner-divider span {
    font-size: var(--font-size-xs);
  }

  .learner-form__footer {
    padding: var(--spacing-4) var(--spacing-5);
  }

  .booking-for-toggle {
    flex-direction: column;
    gap: var(--spacing-2);
  }

  .booking-for-toggle__label {
    padding: var(--spacing-3);
  }
}

/* ============================================
   Schedule Package Selector
   Allows changing package/duration on schedule page
   ============================================ */

.schedule-package-selector {
  padding: var(--spacing-4) var(--spacing-8);
  border-bottom: 1px solid var(--color-gray-100);
  background: var(--color-gray-50);
}

.schedule-package-selector__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-700);
  margin: 0 0 var(--spacing-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.schedule-package-options {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.schedule-package-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  min-width: 120px;
}

.schedule-package-option:hover {
  border-color: var(--color-gray-300);
}

.schedule-package-option--selected {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
}

.schedule-package-option__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.schedule-package-option__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  flex: 1;
}

.schedule-package-option__price {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-700);
}

.schedule-package-option--selected .schedule-package-option__price {
  color: var(--color-primary-dark);
}

/* Credit Pack Options (full width below single lessons) */
.schedule-package-packs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-3);
  border-top: 1px dashed var(--color-gray-200);
}

.schedule-package-pack {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.schedule-package-pack:hover {
  border-color: var(--color-gray-300);
}

.schedule-package-pack--selected {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
}

.schedule-package-pack__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.schedule-package-pack__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.schedule-package-pack__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.schedule-package-pack__desc {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.schedule-package-pack__badge {
  padding: var(--spacing-1) var(--spacing-2);
  background: var(--color-success);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.schedule-package-pack__badge--best {
  background: var(--color-primary);
}

.schedule-package-pack__price {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}

.schedule-package-pack--selected .schedule-package-pack__price {
  color: var(--color-primary-dark);
}

.schedule-package-packs__note {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: var(--spacing-2) 0 0;
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.schedule-package-packs__note i {
  color: var(--color-info);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .schedule-package-selector {
    padding: var(--spacing-3) var(--spacing-5);
  }

  .schedule-package-options {
    flex-direction: column;
  }

  .schedule-package-option {
    min-width: 100%;
  }

  .schedule-package-pack {
    padding: var(--spacing-3);
  }

  .schedule-package-pack__badge {
    font-size: 10px;
    padding: 2px var(--spacing-2);
  }
}

/* ============================================
   Instructor Pricing Card (Wizard Sidebar)
   ============================================ */

/* Instructor summary (wizard sidebar).
   Confirms who you picked, and deliberately carries no price and no CTA:
   _booking_summary owns every figure so the two can't disagree, and a second
   button here would compete with the checkout button. */
.instructor-summary {
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--spacing-4);
  box-shadow:
    0 4px 15px rgba(35, 47, 62, 0.08),
    0 2px 6px rgba(35, 47, 62, 0.05);
}

.instructor-summary__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.instructor-summary__id {
  min-width: 0;
}

.instructor-summary__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  font-family: var(--font-family-heading);
  letter-spacing: -0.02em;
  margin: 0;
}

.instructor-summary__meta {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin: var(--spacing-1) 0 0;
}

.instructor-summary__rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
}

/* The star row is shared with the listing cards, where it is centred. */
.instructor-summary__rating .instructor-card__rating {
  margin-top: 0;
  justify-content: flex-start;
}

.instructor-summary__count {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

/* Sidebar is desktop-only — the wizard stacks below this width. */
@media (max-width: 1024px) {
  .instructor-summary {
    display: none;
  }
}

/* ============================================
   Booking Choice (Book Now or Later)
   EZLicence-style step for scheduling decision
   ============================================ */

.booking-choice {
  padding: var(--spacing-6);
}

.booking-choice__options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.booking-choice__option {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-5);
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.booking-choice__option:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.booking-choice__option--primary {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, rgba(255, 153, 0, 0.03) 0%, rgba(255, 153, 0, 0.08) 100%);
}

.booking-choice__option--primary:hover {
  background: linear-gradient(135deg, rgba(255, 153, 0, 0.05) 0%, rgba(255, 153, 0, 0.12) 100%);
}

/* Instructor has no availability set — informational, not clickable */
.booking-choice__option--disabled {
  background: var(--color-gray-50);
  border-style: dashed;
  cursor: default;
}

.booking-choice__option--disabled:hover {
  border-color: var(--color-gray-200);
  box-shadow: none;
  transform: none;
}

.booking-choice__escape {
  margin-top: var(--spacing-4);
}

.booking-choice__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.booking-choice__icon i {
  font-size: var(--font-size-xl);
  color: var(--color-gray-500);
}

.booking-choice__option--primary .booking-choice__icon {
  background: var(--color-primary);
}

.booking-choice__option--primary .booking-choice__icon i {
  color: var(--color-white);
}

.booking-choice__content {
  flex: 1;
  min-width: 0;
}

.booking-choice__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-1);
}

.booking-choice__title-note {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.booking-choice__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin: 0;
  line-height: 1.5;
}

.booking-choice__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.booking-choice__arrow i {
  color: var(--color-gray-400);
  transition: transform 0.2s ease;
}

.booking-choice__option:hover .booking-choice__arrow {
  background: var(--color-primary);
}

.booking-choice__option:hover .booking-choice__arrow i {
  color: var(--color-white);
  transform: translateX(3px);
}

.booking-choice__info {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  margin-top: var(--spacing-5);
  padding: var(--spacing-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.booking-choice__info i {
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Subtle, secondary sign-in hint for returning learners with credits */
.booking-choice__signin-hint {
  margin-top: var(--spacing-4);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.booking-choice__signin-hint a {
  color: var(--color-gray-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.booking-choice__signin-hint a:hover {
  color: var(--color-primary);
}

/* Sidebar Summary Card */
.wizard-sidebar__summary {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
  box-shadow: var(--shadow-sm);
}

.wizard-sidebar__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-4);
}

.wizard-sidebar__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2) 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.wizard-sidebar__row--discount {
  color: var(--color-success);
}

.wizard-sidebar__row--fee {
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
}

.wizard-sidebar__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-3);
  margin-top: var(--spacing-2);
  border-top: 1px solid var(--color-gray-100);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  font-family: var(--font-family-heading);
}

@media (max-width: 768px) {
  .booking-choice__option {
    flex-direction: column;
    text-align: center;
    padding: var(--spacing-5);
  }

  .booking-choice__arrow {
    display: none;
  }

  .wizard-sidebar__summary {
    display: none;
  }
}

/* Checkout Features List */
.checkout-features {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.checkout-features__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.checkout-features__item i {
  color: var(--color-primary);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* ============================================
   EZLicence-style Schedule Page
   Multiple bookings support
   ============================================ */

/* Wide Layout for Schedule Page */
.wizard-layout--wide {
  grid-template-columns: 1fr 340px;
  gap: var(--spacing-6);
}

/* Page Header */
.wizard-page-header {
  margin-bottom: var(--spacing-6);
}

.wizard-page-header__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-2);
  font-family: var(--font-family-heading);
}

.wizard-page-header__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  margin: 0;
}

/* Service-area map revealed under the pick-up field when an address falls
   outside the instructor's suburbs. The map itself reuses the profile's
   .service-area-map styles. */
.lesson-prefs__service-area {
  margin-top: var(--spacing-3);
}

.lesson-prefs__service-area-title {
  margin: 0 0 var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
}

/* Bookings List - Simple compact list.
   Scoped to the wizard's #bookings-table: the customer bookings page uses the
   same .bookings-list class with .lesson-card children, and an unscoped
   :not(:has(...)) hid that whole page's list. */
#bookings-table:not(:has(.bookings-list__item)) {
  display: none;
}

#bookings-table {
  margin-bottom: var(--spacing-6);
}

/* Scheduled lessons: the option list's family — one bordered container,
   hairline-divided rows — not grey slabs. */
.bookings-list__items {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.bookings-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-4);
}

.bookings-list__item + .bookings-list__item {
  border-top: var(--border-width) solid var(--color-gray-100);
}

.bookings-list__details {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-2);
}

.bookings-list__date {
  font-family: var(--font-family-heading);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.bookings-list__time {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
}

.bookings-list__remove {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
  cursor: pointer;
  transition: all 0.15s ease;
}

.bookings-list__remove:hover {
  background: var(--color-gray-200);
  color: var(--color-gray-600);
}

.bookings-list__empty {
  padding: var(--spacing-6);
  text-align: center;
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
}

.bookings-list__empty p {
  margin: 0;
}

/* Add Booking Card */
.add-booking-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.add-booking-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-5);
}

.add-booking-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.add-booking-card__title i {
  color: var(--color-primary);
}

.add-booking-card__change {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.add-booking-card__change:hover {
  text-decoration: underline;
}

.add-booking-card__empty {
  text-align: center;
  padding: var(--spacing-8);
  color: var(--color-gray-500);
}

.add-booking-card__empty i {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-3);
  display: block;
}

/* Schedule Section */
.schedule-section {
  padding-top: var(--spacing-2);
}

.schedule-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.schedule-section__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0;
}

.schedule-section__link {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-decoration: none;
}

.schedule-section__link:hover {
  text-decoration: underline;
}

.schedule-section__empty {
  text-align: center;
  padding: var(--spacing-6);
  color: var(--color-gray-500);
}

/* Duration Selector - Clean pill buttons */
.duration-selector {
  display: flex;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-5);
}

.duration-btn {
  flex: 1;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  text-align: center;
}

.duration-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.duration-btn--selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.duration-btn--selected:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

/* Time Slots Grid */
.time-slots-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

.time-slots-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.time-slots-section__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.time-slots-section__label i {
  color: var(--color-primary);
}

.time-slots-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--spacing-2);
}

/* Time Slot Button */
.time-slot-btn {
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.time-slot-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light, #fff7e6);
}

.time-slot-btn--loading {
  opacity: 0.5;
  cursor: wait;
}

/* Schedule Tip Card - Clean modern design */
.schedule-tip-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-4);
}

.schedule-tip-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-lg);
}

.schedule-tip-card__content {
  flex: 1;
  min-width: 0;
}

.schedule-tip-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-1);
}

.schedule-tip-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .schedule-tip-card {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-3);
  }
}

/* Order Summary Card */
.order-summary-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
  box-shadow: var(--shadow-sm);
}

.order-summary-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-5);
  font-family: var(--font-family-heading);
}

.order-summary-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2) 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.order-summary-card__row i {
  margin-right: var(--spacing-2);
  color: var(--color-primary);
}

.order-summary-card__row--discount {
  /* Label/sub-note stay neutral; only the amount (.order-summary-card__discount)
     is highlighted green. */
  align-items: flex-start;
}

.order-summary-card__row--fee {
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
}

.order-summary-card__badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  background: var(--color-primary);
  color: var(--color-white);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-left: var(--spacing-2);
}

.order-summary-card__discount {
  color: var(--color-success);
}

.order-summary-card__info {
  background: none;
  border: none;
  padding: 0;
  margin-left: var(--spacing-1);
  color: var(--color-gray-400);
  cursor: help;
}

.order-summary-card__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-4) 0 var(--spacing-2);
  margin-top: var(--spacing-3);
  border-top: 1px solid var(--color-gray-100);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
}

.order-summary-card__afterpay {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  margin: 0 0 var(--spacing-4);
}

.order-summary-card__note {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin: var(--spacing-2) 0 var(--spacing-4);
}

.order-summary-card__add-btn {
  margin-bottom: var(--spacing-3);
}

.order-summary-card__continue {
  margin-top: var(--spacing-2);
}

/* BNPL Card */
.bnpl-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  box-shadow: var(--shadow-sm);
}

.bnpl-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-2);
}

.bnpl-card__header span {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.bnpl-card__info {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-gray-400);
  cursor: help;
}

.bnpl-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin: 0 0 var(--spacing-3);
}

.bnpl-card__logos {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}

.bnpl-card__logo {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.bnpl-card__logo--paypal {
  background: #ffc439;
  color: #003087;
}

.bnpl-card__logo--afterpay {
  background: #b2fce4;
  color: #000;
}

.bnpl-card__logo--klarna {
  background: #ffb3c7;
  color: #0a0b09;
}

/* Responsive */
@media (max-width: 1024px) {
  .wizard-layout--wide {
    grid-template-columns: 1fr;
  }

  .wizard-sidebar {
    position: static;
  }
}

@media (max-width: 640px) {
  .bookings-table thead {
    display: none;
  }

  .bookings-table tbody tr {
    display: block;
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-100);
  }

  .bookings-table tbody td {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-2) 0;
    border-bottom: none;
  }

  .bookings-table tbody td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }

  .bookings-table__actions {
    justify-content: flex-start;
    padding-top: var(--spacing-2);
  }

  .time-slots-section__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Confirmation illustration (shared/illustrations/parking) */

.pack-confirmed__art {
  max-width: 190px;
  margin: 0 auto var(--spacing-4);
}

/* ===========================================
   LESSON PREFS — pickup + focus on the schedule step
   =========================================== */
.lesson-prefs {
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-5);
  border-top: var(--border-width) solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

.lesson-prefs__field {
  border: 0;
  padding: 0;
  margin: 0;
}

.lesson-prefs__optional {
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-400);
  text-transform: none;
}

.lesson-prefs__why {
  margin: var(--spacing-1) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.lesson-prefs__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

/* Checkbox chips: the input stays real (and focusable) but visually the label
   is the control, matching the directory filter pills. */
.lesson-prefs__chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lesson-prefs__chip span {
  display: inline-block;
  padding: var(--spacing-2) var(--spacing-4);
  border: var(--border-width) solid var(--color-gray-300);
  border-radius: var(--radius-full);
  background: var(--color-white);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.lesson-prefs__chip input:checked + span {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
}

.lesson-prefs__chip input:focus-visible + span {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}


/* ========================================
   HOURS STEP (wizard step 1)
   ======================================== */

/* The dosage guide: the "how many do I need?" answer, laid out as quiet
   hairline rows so it reads as reference material, not another offer. */
.hours-guide {
  margin: var(--spacing-6) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: var(--spacing-6);
  align-items: center;
}

.hours-guide__table {
  min-width: 0;
}

.hours-guide__art {
  width: 190px;
  height: auto;
}

@media (max-width: 700px) {
  .hours-guide {
    grid-template-columns: minmax(0, 1fr);
  }

  .hours-guide__art {
    display: none;
  }
}

.hours-guide__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-2);
}

.hours-guide__row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: var(--spacing-2) 0;
  border-top: var(--border-width) solid var(--color-gray-100);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.hours-guide__row strong {
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hours-guide__note {
  border-top: var(--border-width) solid var(--color-gray-100);
  padding-top: var(--spacing-2);
  margin: 0;
  font-size: 13px;
  color: var(--color-gray-600);
}

/* The step's exit: one loud button, one quiet sentence. */
.hours-cta {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin-top: var(--spacing-6);
}

.hours-cta__later {
  margin: 0;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  max-width: 34ch;
}

@media (max-width: 768px) {
  /* A fixed bar, not sticky: sticky-bottom parks an opaque card over whatever
     content happens to sit at the viewport bottom — at first paint that was
     the entire dosage guide. Fixed + reserved space below the card means the
     bar always floats and every row can scroll clear of it. */
  .hours-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-1);
    margin: 0;
    padding: var(--spacing-3) var(--spacing-4) calc(var(--spacing-3) + env(safe-area-inset-bottom, 0px));
    background: var(--color-white);
    border-top: var(--border-width) solid var(--color-gray-200);
    box-shadow: 0 -4px 16px rgba(35, 47, 62, 0.08);
  }

  /* Room for the bar under the step's last content. */
  .wizard-layout--hours .wizard-card {
    margin-bottom: 128px;
  }

  .hours-cta__later {
    text-align: center;
    max-width: none;
  }

  /* Sticky positioning is clipped dead by the card's overflow: hidden; this
     page has nothing else that needs the clip. */
  .wizard-layout--hours .wizard-card {
    overflow: visible;
  }
}

/* The three de-risking facts under the order summary's numbers. */
.order-summary-card__assurances {
  list-style: none;
  margin: 0 0 var(--spacing-4);
  padding: var(--spacing-3) 0 0;
  border-top: var(--border-width) solid var(--color-gray-100);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.order-summary-card__assurances li {
  position: relative;
  padding-left: var(--spacing-4);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
}

.order-summary-card__assurances li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-success-700);
}

@media (max-width: 1024px) {
  /* The Hours step asks before it bills: options first, order summary after.
     (The global order: -1 that floats the sidebar up is right on the later
     steps, where the summary is the context for the form below it.) */
  .wizard-layout--railcard .wizard-sidebar {
    order: 0;
  }
}

/* The Hours step's no-availability dead end: one centred, finished-looking
   state. Its predecessor — a dashed grey option card alone on the page —
   read as broken UI. */
.hours-deadend {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-2);
  padding: var(--spacing-8) var(--spacing-5);
}

.hours-deadend__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--color-primary-50);
  border-radius: 50%;
  margin-bottom: var(--spacing-2);
}

.hours-deadend__icon i {
  font-size: 22px;
  color: var(--color-primary-text);
}

.hours-deadend__title {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  max-width: 26ch;
}

.hours-deadend__copy {
  margin: 0 0 var(--spacing-4);
  font-size: var(--font-size-base);
  color: var(--color-gray-500);
}

/* ========================================
   HOURS STEP — canvas fidelity pass
   ======================================== */

/* One container, hairline rows — the option list from the approved canvas,
   not a stack of separate cards. Radius one step inside the wizard card. */
.hours-options {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hours-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: var(--spacing-3);
  align-items: center;
  padding: var(--spacing-4) var(--spacing-4);
  cursor: pointer;
  background: var(--color-white);
  transition: background 0.15s ease;
}

.hours-option + .hours-option {
  border-top: var(--border-width) solid var(--color-gray-100);
}

.hours-option:hover {
  background: var(--color-gray-50);
}

.hours-option--selected,
.hours-option--selected:hover {
  background: var(--color-primary-50);
}

.hours-option__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hours-option__radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--color-gray-300);
  box-sizing: border-box;
  background: var(--color-white);
}

.hours-option--selected .hours-option__radio {
  border: 5.5px solid var(--color-primary);
}

.hours-option__info {
  min-width: 0;
}

.hours-option__name {
  display: block;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.hours-option__flag {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-success-700);
  margin-left: var(--spacing-2);
  white-space: nowrap;
}

.hours-option__meta {
  display: block;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  margin-top: 1px;
}

.hours-option__price {
  text-align: right;
  font-family: var(--font-family-heading);
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  white-space: nowrap;
}

.hours-option__was {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-400);
  text-decoration: line-through;
  margin-right: var(--spacing-1);
}

/* Header sized like the canvas: a step title, not a landing-page hero. */
.wizard-layout--hours .wizard-card__title {
  font-size: var(--font-size-2xl, 24px);
}

.wizard-layout--hours .wizard-card__subtitle {
  max-width: 52ch;
}

/* The rail reads as ONE card (the canvas railcard): the sidebar wrapper
   carries the chrome; the two partials inside shed theirs. Scoped to this
   step so the later steps keep their stacked cards. */
.wizard-layout--railcard .wizard-sidebar {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-5);
  gap: 0;
}

.wizard-layout--railcard .wizard-sidebar .instructor-summary,
.wizard-layout--railcard .wizard-sidebar .order-summary-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.wizard-layout--railcard .wizard-sidebar .instructor-summary {
  padding-bottom: var(--spacing-4);
  border-bottom: var(--border-width) solid var(--color-gray-100);
  margin-bottom: var(--spacing-4);
}

.wizard-layout--railcard .wizard-sidebar .order-summary-card__title {
  display: none;
}

/* The step's body shares the header's horizontal padding — without this the
   option list, guide and CTA sat flush against the card border while the
   title floated 32px in. */
.hours-step {
  padding: 0 var(--spacing-8) var(--spacing-6);
}

@media (max-width: 768px) {
  .hours-step {
    padding: 0 var(--spacing-5) var(--spacing-5);
  }
}


.wizard-layout--hours .wizard-card__subtitle {
  color: var(--color-gray-600);
  font-weight: var(--font-weight-medium);
}

/* Quiet auth hint in the header's right corner. */
.wizard-card__aside {
  margin: var(--spacing-1) 0 0;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  white-space: nowrap;
}

.wizard-card__aside a {
  color: var(--color-primary-text);
}

@media (max-width: 640px) {
  .wizard-card__aside {
    white-space: normal;
  }
}

/* The instalment line carries the official marks; smaller than the profile
   card's 22px so the rail keeps its quiet. */
.order-summary-card__afterpay {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.order-summary-card__afterpay .bnpl-badges__badge svg,
.order-summary-card__afterpay .bnpl-badges__badge img {
  height: 18px;
}

/* Scheme marks for pay-as-you-go selections — quiet, single-tone. */
.order-summary-card__paymethods {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0 0 var(--spacing-4);
  font-size: 24px;
  color: var(--color-gray-400);
}

/* No divider under the Hours header — the full-bleed border-bottom ran into
   the card's own border at both ends and collided with the option list's
   border below; whitespace separates better here. */
.wizard-layout--hours .wizard-card__header {
  border-bottom: 0;
  padding-bottom: var(--spacing-2);
}

/* ========================================
   TIMES STEP
   ======================================== */

/* Micro group label — "Lesson length", "This week", "Saturday 26 August". */
.wizard-grp {
  margin: var(--spacing-5) 0 var(--spacing-2);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-600);
}

/* The first label in a section rides the card's own padding — its 20px top
   margin is rhythm BETWEEN groups, not an opening gap. */
.schedule-section > .wizard-grp:first-child {
  margin-top: 0;
}

.wizard-grp span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-400);
}

/* Lesson length: a quiet segmented control on a grey track. */
.duration-selector {
  display: inline-flex;
  gap: 2px;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: 3px;
}

.duration-btn {
  white-space: nowrap;
  border: 0;
  background: none;
  border-radius: var(--radius-sm, 6px);
  padding: 8px 18px;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
  cursor: pointer;
}

.duration-btn--selected {
  background: var(--color-white);
  color: var(--color-secondary);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
}

/* The week strip: one chip per day, the truth per day. */
.times-strip__row[hidden] {
  display: none;
}

.times-strip__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.times-strip__row + .times-strip__row {
  margin-top: var(--spacing-2);
}

.times-chip {
  flex: 0 0 64px;
  border: var(--border-width) solid var(--color-gray-200);
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 9px 0 8px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

a.times-chip:hover {
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
}

.times-chip__dow {
  display: block;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.times-chip__num {
  display: block;
  font-family: var(--font-family-heading);
  font-size: 17px;
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  white-space: nowrap;
  padding: 0 6px;
}

.times-chip--selected {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
}

.times-chip--selected .times-chip__dow {
  color: #94A3B1;
}

.times-chip--selected .times-chip__num {
  color: var(--color-white);
}

.times-chip--off {
  background: var(--color-gray-50);
  cursor: default;
}

.times-chip--off .times-chip__dow,
.times-chip--off .times-chip__num {
  color: var(--color-gray-300);
}

.times-chip--more {
  border-style: dashed;
  display: grid;
  place-items: center;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
}

/* Slot chips per the canvas: hairline, tabular, roomy touch targets. */
.time-slot-btn {
  border: var(--border-width) solid var(--color-gray-200);
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 13px 4px;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.time-slot-btn:hover {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  background: var(--color-primary-50);
}

.schedule-section__none {
  margin: var(--spacing-3) 0 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
}

/* The rail's hold promise — warm note, canvas copy. */
.order-summary-card__hold {
  margin: 0 0 var(--spacing-4);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-primary-50);
  border: var(--border-width) solid var(--color-primary-200);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: var(--color-primary-text);
}

/* One chronological slot grid, flush with the day strip above it — the old
   morning/afternoon sections indented the chips and opened 90px seams. */
.times-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--spacing-2);
  padding: 0;
  margin: 0;
}

/* Segmented control (radio flavour) — same anatomy as the duration selector. */
.segmented {
  display: inline-flex;
  gap: 2px;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: 3px;
}

.segmented__option {
  position: relative;
  border-radius: var(--radius-sm, 6px);
  padding: 8px 18px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
  cursor: pointer;
  white-space: nowrap;
}

.segmented__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented__option:has(input:checked) {
  background: var(--color-white);
  color: var(--color-secondary);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
}

/* The rail's booked-times list, above the money it explains. */
.order-summary-card__when {
  padding-bottom: var(--spacing-3);
  margin-bottom: var(--spacing-3);
  border-bottom: var(--border-width) solid var(--color-gray-100);
}

.order-summary-card__when-row {
  margin: 0;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
}

.order-summary-card__when-row strong {
  font-family: var(--font-family-heading);
  color: var(--color-secondary);
}

/* Pay step: the credit-covered line and the consent-by-payment line. */
.checkout-covered {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
}

.checkout-consent {
  margin: var(--spacing-3) 0 0;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
}

.checkout-consent a {
  color: var(--color-primary-text);
}

/* The Pay body shares the header's padding, like every other step. */
.checkout-form {
  padding: 0 var(--spacing-8) var(--spacing-6);
}

@media (max-width: 768px) {
  .checkout-form {
    padding: 0 var(--spacing-5) var(--spacing-5);
  }
}

/* On the rebuilt steps the action row is just the button — no grey band, no
   band-width padding doubling the form's own. */
.wizard-layout--railcard .wizard-actions {
  background: none;
  border-top: 0;
  padding: var(--spacing-6) 0 0;
  justify-content: flex-start;
}

/* ========================================
   REVIEW FIXES — mobile order, contrast, type
   ======================================== */

@media (max-width: 1024px) {
  /* Steps whose action lives in the MAIN column (Details, Pay) must show the
     money before the button: stacked, the rail was rendering ~200px below the
     Pay button, so the learner could pay having never seen the total. Times
     keeps main-first because its Continue is inside the rail, under the
     figures; Hours keeps main-first because its rail is a preview of a
     decision the learner hasn't made yet. */
  .wizard-layout--money-first .wizard-sidebar {
    order: -1;
  }

  /* The instructor stays with the learner on a phone — the only trust signal
     in the flow was display:none below 1024px. */
  .wizard-layout--railcard .wizard-sidebar .instructor-summary {
    display: block;
  }
}

@media (max-width: 768px) {
}

/* ---- contrast ---- */

/* White on 50%-opacity orange measured 1.48:1. A disabled control should read
   as unavailable, not as unreadable. */
.order-summary-card__continue button:disabled,
.btn:disabled {
  opacity: 1;
  background: var(--color-gray-100);
  border-color: var(--color-gray-200);
  color: var(--color-gray-500);
}

/* #FF9900 as text is 2.14:1 — the project keeps --color-primary-text for
   exactly this (see the token's own comment). */
.order-summary-card__add-btn.btn-outline {
  color: var(--color-primary-text);
}

/* One green for "you saved money", and the accessible one: --color-success
   (#10B981) measured 2.54:1 against white. */
.order-summary-card__discount {
  color: var(--color-success-700);
}

/* Unavailable days measured 1.47:1 — invisible rather than quiet. */
.times-chip--off .times-chip__dow,
.times-chip--off .times-chip__num {
  color: var(--color-gray-500);
}

/* ---- type floors ---- */

/* Nothing below 12px, and nothing that matters lighter than gray-600. */
.wizard-grp,
.wizard-grp span,
.times-chip__dow {
  font-size: 12px;
}

.form-hint,
.lesson-prefs__optional,
.hours-option__was {
  font-size: 13px;
  color: var(--color-gray-600);
}

.instructor-summary__meta,
.instructor-summary__count {
  font-size: 13px;
}

/* ---- one header treatment for all four steps ---- */
.wizard-layout--railcard .wizard-card__title {
  font-size: var(--font-size-2xl, 24px);
}

.wizard-layout--railcard .wizard-card__header {
  border-bottom: 0;
  padding-bottom: var(--spacing-2);
}

.wizard-layout--railcard .wizard-card__subtitle {
  max-width: 52ch;
  color: var(--color-gray-600);
}

/* The header's right column: back link over the auth aside. */
.wizard-card__header-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-1);
  text-align: right;
}

/* The rail's heading was display:none — dead markup that also stripped the
   card's only landmark. Visually hidden instead, so it still announces. */
.wizard-layout--railcard .wizard-sidebar .order-summary-card__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  display: block;
}

/* Details: the gap between fields inside a section was 2.5x the gap between
   sections. */
.learner-form__grid--simple > .form-group,
.learner-form__grid--simple > .form-row {
  margin-bottom: 0;
}

.learner-form__grid--simple .form-row .form-group {
  margin-bottom: 0;
}

/* Fields sized to their content: a 756px box for a 10-digit mobile gave the
   wrong affordance. */
.learner-form__grid--simple #phone,
.learner-form__grid--simple #learner_phone,
.learner-form__grid--simple #learner_dob {
  max-width: 260px;
}

.learner-form__grid--simple #email,
.learner-form__grid--simple #learner_name {
  max-width: 420px;
}

/* The progress bar is a list now: strip the list chrome, keep the layout. */
.wizard-progress__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile keeps the names for screen readers — .wizard-progress__label is
   display:none below 640px, which left the bar announcing "1 2 3 4". */
@media (max-width: 640px) {
  .wizard-progress__step[aria-current="step"] .wizard-progress__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    display: block;
  }
}

/* The skip-to-payment link must look like a link — it was byte-identical to
   the sentence around it. */
.hours-cta__skip {
  color: var(--color-primary-text);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-primary-200);
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* What happens to unscheduled hours: a statement, not an alert. */
.bookings-list__remaining {
  margin: 0 0 var(--spacing-4);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
}

/* Later dates: every remaining available day in the booking window, grouped
   by month so a 75-day window stays scannable. */
.times-later {
  margin-top: var(--spacing-3);
}

.times-later[hidden] {
  display: none;
}

.times-later__month {
  margin: var(--spacing-3) 0 var(--spacing-2);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.times-later__month:first-child {
  margin-top: 0;
}

/* ---- pick-up address suggestions ---- */
.address-autocomplete {
  position: relative;
}

.address-autocomplete__results {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 30;
  margin-top: 2px;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
}

.address-autocomplete__results[hidden] {
  display: none;
}

.address-autocomplete__option {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: var(--spacing-3) var(--spacing-4);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  cursor: pointer;
}

.address-autocomplete__option + .address-autocomplete__option {
  border-top: var(--border-width) solid var(--color-gray-100);
}

.address-autocomplete__option:hover,
.address-autocomplete__option--active {
  background: var(--color-primary-50);
}

/* A note, never a block: the learner may know something the polygon doesn't. */
.address-autocomplete__note {
  margin: var(--spacing-2) 0 0;
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-primary-50);
  border: var(--border-width) solid var(--color-primary-200);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: var(--color-primary-text);
}

.address-autocomplete__note[hidden] {
  display: none;
}
/* Stripe Connect Onboarding & Dashboard Styles */

/* Onboarding intro section */
.stripe-onboard-intro {
  text-align: center;
  padding: var(--spacing-6);
}

.stripe-onboard-intro__icon {
  margin-bottom: var(--spacing-4);
}

.stripe-onboard-intro__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--spacing-3);
  color: var(--color-gray-900);
}

.stripe-onboard-intro__text {
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-bottom: var(--spacing-4);
}

.stripe-onboard-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-4);
  text-align: left;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.stripe-onboard-benefits li {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) 0;
  color: var(--color-gray-700);
}

.stripe-onboard-benefits li i {
  color: var(--color-success);
  flex-shrink: 0;
}

.stripe-onboard-fee-info {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  text-align: left;
}

.stripe-onboard-fee-info i {
  color: var(--color-info);
  margin-top: 2px;
}

/* Incomplete onboarding state */
.stripe-onboard-incomplete {
  text-align: center;
  padding: var(--spacing-6);
}

.stripe-onboard-incomplete__icon {
  margin-bottom: var(--spacing-4);
}

.stripe-onboard-incomplete__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--spacing-3);
  color: var(--color-gray-900);
}

.stripe-onboard-incomplete__text {
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-bottom: var(--spacing-4);
}

/* Status badges */
.stripe-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.stripe-status-badge--active {
  background: var(--color-success-light, #dcfce7);
  color: var(--color-success-dark, #166534);
}

.stripe-status-badge--pending {
  background: var(--color-warning-light, #fef3c7);
  color: var(--color-warning-dark, #92400e);
}

.stripe-status-badge--restricted {
  background: var(--color-warning-light, #fef3c7);
  color: var(--color-warning-dark, #92400e);
}

.stripe-status-badge--disabled {
  background: var(--color-danger-light, #fee2e2);
  color: var(--color-danger-dark, #991b1b);
}

/* FAQ section */
.stripe-faq {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.stripe-faq__item h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--spacing-1);
  color: var(--color-gray-900);
}

.stripe-faq__item p {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: 1.5;
  margin: 0;
}

/* Dashboard actions */
.stripe-actions {
  text-align: center;
}

.stripe-actions__help {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Fee breakdown */
.stripe-fee-breakdown {
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.stripe-fee-breakdown__item {
  text-align: center;
  margin-bottom: var(--spacing-3);
}

.stripe-fee-breakdown__label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-1);
}

.stripe-fee-breakdown__value {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
}

.stripe-fee-breakdown__value--highlight {
  color: var(--color-success);
  font-size: var(--font-size-xl);
}

.stripe-fee-breakdown__note {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  margin-top: var(--spacing-1);
}

.stripe-fee-breakdown__arrow {
  text-align: center;
  color: var(--color-gray-400);
  margin: var(--spacing-2) 0;
}

.stripe-fee-breakdown__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-gray-200);
}

.stripe-fee-breakdown__you,
.stripe-fee-breakdown__platform {
  text-align: center;
}

.stripe-fee-breakdown__footer {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  text-align: center;
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-gray-200);
}
/* ==========================================================================
   Customer Bookings - Modern UI Components
   Consistent with provider profile and booking wizard styles
   ========================================================================== */

/* ==========================================================================
   My Bookings Page
   ========================================================================== */

.my-bookings-page {
  padding: var(--spacing-8) 0 var(--spacing-16);
  min-height: calc(100vh - 200px);
  background: var(--color-gray-50);
}

/* Page Header */
.my-bookings-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-4);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-6);
}

.my-bookings-header__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-1);
}

.my-bookings-header__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  margin: 0;
}

/* Next lesson strip */
.next-lesson-strip {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  margin-bottom: var(--spacing-6);
  background: var(--color-primary-50);
  border-radius: var(--radius-md);
  /* inset shadow instead of border-left so the rule follows the radius */
  box-shadow: inset 3px 0 0 var(--color-primary);
  color: var(--color-secondary);
}

.next-lesson-strip i {
  color: var(--color-primary-text);
}

.next-lesson-strip__text {
  margin: 0;
  font-size: var(--font-size-sm);
}

/* Filter Tabs — underline style */
.booking-tabs {
  display: flex;
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-6);
  border-bottom: 1px solid var(--color-gray-200);
}

.booking-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) 0;
  margin-bottom: -1px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.booking-tabs__tab:hover {
  color: var(--color-secondary);
}

.booking-tabs__tab--active {
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
  border-bottom-color: var(--color-primary);
}

.booking-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
}

/* Status pills — green always means confirmed; finished and cancelled
   lessons stay neutral so the list reads calmly */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.status-pill--success {
  color: var(--color-success-700);
  background: var(--color-success-50);
  border-color: rgba(4, 120, 87, 0.15);
}

.status-pill--warning {
  color: var(--color-warning-700);
  background: var(--color-warning-50);
  border-color: rgba(180, 83, 9, 0.15);
}

.status-pill--neutral {
  color: var(--color-gray-600);
  background: var(--color-gray-100);
  border-color: var(--color-gray-200);
}

/* Lesson list */
.lesson-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.lesson-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--spacing-5);
  padding: var(--spacing-4) var(--spacing-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

/* Date rail — typography, not a badge */
.lesson-row__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  padding-right: var(--spacing-5);
  border-right: 1px solid var(--color-gray-200);
}

.lesson-row__weekday {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gray-500);
}

.lesson-row__day {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
}

.lesson-row--past .lesson-row__day {
  color: var(--color-gray-700);
}

.lesson-row__month {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.lesson-row__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  min-width: 0;
}

.lesson-row__time {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
}

.lesson-row__time--cancelled {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: var(--color-gray-500);
}

.lesson-row__who {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.lesson-row__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.lesson-row__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.lesson-row__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.lesson-row__price {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
}

.lesson-row__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.lesson-row__reviewed {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.lesson-row__reviewed i {
  color: var(--color-rating-star);
}

/* Overflow menu — reschedule/cancel live here instead of a rainbow of links */
.lesson-menu {
  position: relative;
}

.lesson-menu__trigger {
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
}

.lesson-menu__pop {
  position: absolute;
  top: calc(100% + var(--spacing-2));
  right: 0;
  z-index: 20;
  min-width: 200px;
  padding: var(--spacing-2);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.lesson-menu__item {
  display: block;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.lesson-menu__item:hover {
  background: var(--color-gray-50);
}

.lesson-menu__item--danger {
  color: var(--color-error-700);
}

.lesson-menu__item--danger:hover {
  background: var(--color-error-50);
}

/* Policy note — stated once under the list, not per row */
.lesson-list__policy {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: var(--spacing-4) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.lesson-list__policy i {
  color: var(--color-gray-400);
}

@media (max-width: 768px) {
  .lesson-row {
    grid-template-columns: auto 1fr;
    row-gap: var(--spacing-3);
  }

  .lesson-row__meta {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .lesson-row__actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }

  .lesson-row__actions > .btn {
    flex: 1;
  }

  .lesson-menu__pop {
    right: auto;
    left: 0;
  }
}

/* ==========================================================================
   Booking Detail Page
   ========================================================================== */

.booking-detail-page {
  padding: var(--spacing-6) 0 var(--spacing-16);
  min-height: calc(100vh - 200px);
  background: linear-gradient(180deg, var(--color-gray-50) 0%, var(--color-white) 100%);
}

.booking-detail-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--spacing-6);
  align-items: start;
}

.booking-detail-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

.booking-detail-sidebar {
  position: sticky;
  top: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

/* Breadcrumb */
.booking-breadcrumb {
  margin-bottom: var(--spacing-6);
}

.booking-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

.booking-breadcrumb__link:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

/* Status Card */
.booking-status-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  padding: var(--spacing-6);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border-left: 4px solid var(--color-success);
}

.booking-status-card--confirmed {
  border-left-color: var(--color-success);
}

.booking-status-card--completed {
  border-left-color: var(--color-info);
}

.booking-status-card--cancelled {
  border-left-color: var(--color-error);
}

.booking-status-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-success-50);
  color: var(--color-success);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-2xl);
}

.booking-status-card--completed .booking-status-card__icon {
  background: rgba(59, 130, 246, 0.1);
  color: var(--color-info);
}

.booking-status-card--cancelled .booking-status-card__icon {
  background: var(--color-error-50);
  color: var(--color-error);
}

.booking-status-card__content {
  flex: 1;
}

.booking-status-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-success);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.booking-status-card--completed .booking-status-card__label {
  color: var(--color-info);
}

.booking-status-card--cancelled .booking-status-card__label {
  color: var(--color-error);
}

.booking-status-card__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: var(--spacing-1) 0;
}

.booking-status-card__time {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
}

/* Detail Card */
.detail-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-gray-100);
  overflow: hidden;
}

.detail-card--warning {
  border-color: var(--color-warning);
}

.detail-card--highlight {
  background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-white) 100%);
  border-color: var(--color-primary);
}

.detail-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-5);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-100);
}

.detail-card__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin: 0;
}

.detail-card__title i {
  color: var(--color-primary);
}

.detail-card__body {
  padding: var(--spacing-5);
}

.detail-card__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
}

.detail-card__item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.detail-card__item--full {
  grid-column: 1 / -1;
}

.detail-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-card__value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
}

.detail-card__value--mono {
  font-family: monospace;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Payment Summary */
.payment-summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.payment-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.payment-summary__row--detail {
  padding-left: var(--spacing-3);
  opacity: 0.8;
}

.payment-summary__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.payment-summary__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
}

.payment-summary__value--success {
  color: var(--color-success);
}

.payment-summary__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-success-50);
  color: var(--color-success-700);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-2);
}

/* Cancellation refund notice (shown inside Cancellation Details) */
.cancellation-refund {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.cancellation-refund--success {
  background: var(--color-success-50);
  color: var(--color-success-700);
  border: 1px solid var(--color-success-100, var(--color-success-50));
  justify-content: space-between;
}

.cancellation-refund--success .cancellation-refund__label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
}

.cancellation-refund--success .cancellation-refund__amount {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
}

.cancellation-refund--denied {
  background: var(--color-error-50);
  color: var(--color-error-700);
  border: 1px solid #fee2e2;
}

.cancellation-refund--denied i {
  flex-shrink: 0;
}

/* Action Cards */
.booking-actions-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.action-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid var(--color-gray-200);
}

.action-card:hover {
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  border-color: var(--color-gray-300);
}

.action-card--danger:hover {
  border-color: var(--color-error);
}

.action-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
}

.action-card__icon--primary {
  background: var(--color-primary-50);
  color: var(--color-primary);
}

.action-card__icon--danger {
  background: var(--color-error-50);
  color: var(--color-error);
}

.action-card__content {
  flex: 1;
}

.action-card__title {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.action-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.action-card__arrow {
  color: var(--color-gray-400);
}

.booking-policy-note {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-gray-100);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.booking-policy-note i {
  color: var(--color-info);
}

.booking-locked-notice {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--color-warning-50);
  border-radius: var(--radius-lg);
  color: var(--color-warning-700);
}

.booking-locked-notice i {
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

.booking-locked-notice strong {
  display: block;
  margin-bottom: var(--spacing-1);
}

.booking-locked-notice p {
  margin: 0;
  font-size: var(--font-size-sm);
  opacity: 0.9;
}

/* Review Prompt */
.review-prompt {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
}

.review-prompt__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-warning);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-2xl);
}

.review-prompt__content {
  flex: 1;
}

.review-prompt__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-1);
}

.review-prompt__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin: 0;
}

/* Review Display */
.review-display__stars {
  display: flex;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-3);
}

.review-display__star--filled {
  color: var(--color-warning);
}

.review-display__star--empty {
  color: var(--color-gray-300);
}

.review-display__text {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-gray-700);
  margin: 0 0 var(--spacing-3);
}

.review-display__date {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Instructor Sidebar Card */
.instructor-sidebar-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.instructor-sidebar-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-5);
  background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-secondary) 100%);
}

.instructor-sidebar-card__photo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.2);
}

.instructor-sidebar-card__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.instructor-sidebar-card__info {
  flex: 1;
}

.instructor-sidebar-card__name {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

.instructor-sidebar-card__role {
  display: block;
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
}

.instructor-sidebar-card__rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  margin-top: var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-warning);
}

.instructor-sidebar-card__actions {
  display: flex;
  border-top: 1px solid var(--color-gray-100);
}

.instructor-sidebar-card__action {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  text-decoration: none;
  transition: all 0.15s ease;
}

.instructor-sidebar-card__action:not(:last-child) {
  border-right: 1px solid var(--color-gray-100);
}

.instructor-sidebar-card__action:hover {
  background: var(--color-gray-50);
  color: var(--color-primary);
}

.instructor-sidebar-card__action i {
  font-size: var(--font-size-lg);
}

/* Help Sidebar Card */
.help-sidebar-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-5);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-gray-100);
}

.help-sidebar-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-2);
}

.help-sidebar-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin: 0 0 var(--spacing-4);
}

/* ==========================================================================
   Review Page
   ========================================================================== */

.review-page {
  padding: var(--spacing-6) 0 var(--spacing-16);
  min-height: calc(100vh - 200px);
  background: linear-gradient(180deg, var(--color-gray-50) 0%, var(--color-white) 100%);
}

.review-page__layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--spacing-6);
  align-items: start;
}

.review-page__main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

.review-page__sidebar {
  position: sticky;
  top: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

/* Review Header Card */
.review-header-card {
  text-align: center;
  padding: var(--spacing-8);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.review-header-card__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--spacing-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-primary) 100%);
  border-radius: var(--radius-full);
  color: var(--color-white);
  font-size: var(--font-size-3xl);
}

.review-header-card__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-2);
}

.review-header-card__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  margin: 0;
}

/* Review Form Card */
.review-form-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-6);
  box-shadow: var(--shadow-md);
}

.review-form__section {
  margin-bottom: var(--spacing-6);
}

.review-form__label {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-3);
}

.review-form__optional {
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-500);
}

/* Star Rating Input */
.star-rating-input {
  display: flex;
  gap: var(--spacing-2);
}

.star-rating-input__star {
  background: none;
  border: none;
  padding: var(--spacing-2);
  cursor: pointer;
  font-size: 32px;
  transition: transform 0.1s ease;
}

.star-rating-input__star:hover {
  transform: scale(1.15);
}

.star-rating-input__star i {
  color: var(--color-gray-300);
  transition: color 0.15s ease;
}

.review-form__hint {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.review-form__hint i {
  color: var(--color-warning);
}

.review-form__textarea {
  width: 100%;
  padding: var(--spacing-4);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: var(--font-size-base);
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.review-form__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.1);
}

.review-form__actions {
  display: flex;
  gap: var(--spacing-3);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-gray-100);
}

/* Review Lesson Card */
.review-lesson-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.review-lesson-card__header {
  padding: var(--spacing-4) var(--spacing-5);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-100);
}

.review-lesson-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin: 0;
}

.review-lesson-card__body {
  padding: var(--spacing-5);
}

.review-lesson-card__instructor {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding-bottom: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-100);
}

.review-lesson-card__photo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.review-lesson-card__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.review-lesson-card__instructor-info {
  display: flex;
  flex-direction: column;
}

.review-lesson-card__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.review-lesson-card__role {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.review-lesson-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.review-lesson-card__detail {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.review-lesson-card__detail i {
  width: 16px;
  color: var(--color-gray-400);
}

/* Review Info Card */
.review-info-card {
  background: var(--color-primary-50);
  border-radius: var(--radius-xl);
  padding: var(--spacing-5);
}

.review-info-card__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-3);
}

.review-info-card__title i {
  color: var(--color-error);
}

.review-info-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.review-info-card__list li {
  position: relative;
  padding-left: var(--spacing-5);
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.review-info-card__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: bold;
}

/* ==========================================================================
   Reschedule Page
   ========================================================================== */

.reschedule-page {
  padding: var(--spacing-6) 0 var(--spacing-16);
  min-height: calc(100vh - 200px);
  background: linear-gradient(180deg, var(--color-gray-50) 0%, var(--color-white) 100%);
}

.reschedule-page__layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--spacing-6);
  align-items: start;
}

.reschedule-page__main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

.reschedule-page__sidebar {
  position: sticky;
  top: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

/* Reschedule Header */
.reschedule-header {
  text-align: center;
  padding: var(--spacing-8);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.reschedule-header__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--spacing-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-full);
  color: var(--color-white);
  font-size: var(--font-size-3xl);
}

.reschedule-header__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-2);
}

.reschedule-header__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  margin: 0;
}

/* Current Booking */
.reschedule-current-booking {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-5);
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-gray-400);
}

.reschedule-current-booking__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.reschedule-current-booking__details {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.reschedule-current-booking__date {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
}

.reschedule-current-booking__time {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Reschedule Card */
.reschedule-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.reschedule-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-5);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-100);
}

.reschedule-card__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin: 0;
}

.reschedule-card__title i {
  color: var(--color-primary);
}

.reschedule-card__change-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  text-decoration: none;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

.reschedule-card__change-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Selected Date */
.reschedule-selected-date {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-5);
  background: var(--color-primary-50);
  border-bottom: 1px solid var(--color-gray-100);
}

.reschedule-selected-date__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  color: var(--color-white);
}

.reschedule-selected-date__month {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  opacity: 0.9;
}

.reschedule-selected-date__day {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.reschedule-selected-date__info {
  display: flex;
  flex-direction: column;
}

.reschedule-selected-date__weekday {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.reschedule-selected-date__full {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Slots */
.reschedule-slots {
  padding: var(--spacing-5);
}

.reschedule-slots__group {
  margin-bottom: var(--spacing-5);
}

.reschedule-slots__group:last-child {
  margin-bottom: 0;
}

.reschedule-slots__group-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-3);
}

.reschedule-slots__group-label i {
  color: var(--color-warning);
}

.reschedule-slots__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--spacing-2);
}

/* Slot Option */
.slot-option {
  position: relative;
  cursor: pointer;
}

.slot-option__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.slot-option__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  background: var(--color-white);
  transition: all 0.15s ease;
}

.slot-option:hover .slot-option__label {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-50);
}

.slot-option__input:checked + .slot-option__label {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(255, 153, 0, 0.25);
}

/* Reason */
.reschedule-reason {
  padding: var(--spacing-5);
  border-top: 1px solid var(--color-gray-100);
}

.reschedule-reason__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-2);
}

.reschedule-reason__optional {
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-500);
}

.reschedule-reason__input {
  width: 100%;
  padding: var(--spacing-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-sm);
  resize: vertical;
  transition: border-color 0.15s ease;
}

.reschedule-reason__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Reschedule Actions */
.reschedule-actions {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-5);
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-100);
}

/* No Slots */
.reschedule-no-slots {
  text-align: center;
  padding: var(--spacing-12) var(--spacing-6);
}

.reschedule-no-slots__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--spacing-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  font-size: var(--font-size-3xl);
  color: var(--color-gray-400);
}

.reschedule-no-slots__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-2);
}

.reschedule-no-slots__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin: 0 0 var(--spacing-6);
}

/* Calendar */
.reschedule-calendar {
  padding: var(--spacing-5);
}

.reschedule-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-5);
}

.reschedule-calendar__month {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
}

.reschedule-calendar__nav {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  color: var(--color-gray-600);
  cursor: pointer;
  transition: all 0.15s ease;
}

.reschedule-calendar__nav:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
  color: var(--color-secondary);
}

.reschedule-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: var(--spacing-2);
}

.reschedule-calendar__weekdays span {
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-400);
  padding: var(--spacing-2);
  text-transform: uppercase;
}

.reschedule-calendar__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.reschedule-calendar__legend {
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-5);
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-100);
}

.reschedule-calendar__legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
}

.reschedule-calendar__legend-dot {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
}

.reschedule-calendar__legend-dot--available {
  background: var(--color-primary-50);
  border: 2px solid var(--color-primary);
}

.reschedule-calendar__legend-dot--unavailable {
  background: var(--color-gray-100);
  border: 2px solid var(--color-gray-300);
}

/* Policy Sidebar Card */
.policy-sidebar-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-5);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-gray-100);
}

.policy-sidebar-card__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-4);
}

.policy-sidebar-card__title i {
  color: var(--color-success);
}

.policy-sidebar-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.policy-sidebar-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-2) 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.policy-sidebar-card__list li i {
  margin-top: 2px;
  color: var(--color-success);
}

.policy-sidebar-card__list li i.fa-info-circle {
  color: var(--color-info);
}

/* ==========================================================================
   Form Errors
   ========================================================================== */

.form-errors {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--color-error-50);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-error);
  margin-bottom: var(--spacing-6);
}

.form-errors i {
  color: var(--color-error);
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.form-errors strong {
  display: block;
  color: var(--color-error-700);
  margin-bottom: var(--spacing-2);
}

.form-errors ul {
  margin: 0;
  padding-left: var(--spacing-4);
  color: var(--color-error-700);
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 1024px) {
  .booking-detail-layout,
  .review-page__layout,
  .reschedule-page__layout {
    grid-template-columns: 1fr;
  }

  .booking-detail-sidebar,
  .review-page__sidebar,
  .reschedule-page__sidebar {
    position: static;
    order: -1;
  }
}

@media (max-width: 768px) {
  .detail-card__grid {
    grid-template-columns: 1fr;
  }

  .reschedule-current-booking {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2);
  }

  .review-prompt {
    flex-direction: column;
    text-align: center;
  }

  .review-form__actions {
    flex-direction: column;
  }

  .reschedule-actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .reschedule-slots__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Availability Modal - Weekly calendar popup for checking instructor availability */

/* Modal Overlay */
.availability-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.availability-modal.is-open {
  opacity: 1;
  visibility: visible;
}

/* Modal Dialog */
.availability-modal__dialog {
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  transform: scale(0.95);
  transition: transform 0.2s ease;
}

.availability-modal.is-open .availability-modal__dialog {
  transform: scale(1);
}

/* Header */
.availability-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--color-gray-200);
}

.availability-modal__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.availability-modal__title i {
  color: var(--color-primary);
}

.availability-modal__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-gray-500);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.availability-modal__close:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

/* Controls */
.availability-modal__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-5);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}

.availability-modal__duration-picker {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.availability-modal__duration-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  font-weight: 500;
}

.availability-modal__duration-buttons {
  display: flex;
  gap: var(--spacing-1);
}

.availability-modal__duration-btn {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-xs);
  font-weight: 500;
  background: white;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
  cursor: pointer;
  transition: all 0.15s ease;
}

.availability-modal__duration-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.availability-modal__duration-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

/* Week Navigation */
.availability-modal__week-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.availability-modal__nav-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
  cursor: pointer;
  transition: all 0.15s ease;
}

.availability-modal__nav-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.availability-modal__nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.availability-modal__week-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-900);
  min-width: 160px;
  text-align: center;
}

/* Body */
.availability-modal__body {
  flex: 1;
  overflow: auto;
  padding: var(--spacing-4) var(--spacing-5);
  position: relative;
  min-height: 300px;
}

/* Loading State */
.availability-modal__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  background: rgba(255, 255, 255, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 10;
}

.availability-modal__loading.is-visible {
  opacity: 1;
  visibility: visible;
}

.availability-modal__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-gray-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.availability-modal__calendar.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

/* Calendar Grid */
.availability-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.availability-grid__headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-2);
}

.availability-grid__header {
  text-align: center;
  padding: var(--spacing-2);
  border-radius: var(--radius-md);
}

.availability-grid__header.is-today {
  background: var(--color-primary-50);
}

.availability-grid__header.is-past {
  opacity: 0.5;
}

.availability-grid__day-name {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.availability-grid__day-number {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-top: var(--spacing-1);
}

.availability-grid__header.is-today .availability-grid__day-number {
  color: var(--color-primary);
}

.availability-grid__body {
  position: relative;
  max-height: 400px;
  overflow-y: auto;
  min-height: 200px;
}

/* Column backgrounds sit behind the rows */
.availability-grid__columns {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-1);
  pointer-events: none;
}

.availability-grid__col-bg {
  border-radius: var(--radius-md);
}

.availability-grid__col-bg.is-past,
.availability-grid__col-bg.is-empty {
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.availability-grid__col-bg span {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  text-align: center;
}

/* Rows layer on top */
.availability-grid__rows {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding: var(--spacing-1) 0;
}

.availability-grid__row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-1);
}

.availability-grid__cell {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Slots fill their equal-width grid cell so every chip is the same size
   regardless of the time text's width (12:00 PM vs 9:00 AM) */
.availability-grid__cell .availability-slot {
  width: 100%;
}

.availability-grid__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
}

/* Time Slots — links into the booking wizard with the day pre-selected */
.availability-slot {
  display: block;
  padding: var(--spacing-2) var(--spacing-1);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  background: var(--color-green-50, #f0fdf4);
  border: 1px solid var(--color-green-200, #bbf7d0);
  border-radius: var(--radius-sm);
  color: var(--color-green-700, #15803d);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.availability-slot:hover {
  background: var(--color-green-100, #dcfce7);
  border-color: var(--color-green-400, #4ade80);
}

/* Mobile day view: 7-day strip + selected day's slots (hidden on desktop,
   where the full week grid shows instead) */
.availability-day-view {
  display: none;
}

.availability-day-view__strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-1);
}

.availability-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-0-5, 2px);
  padding: var(--spacing-2) 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.availability-day.is-selected {
  background: var(--color-primary-50);
  border-color: var(--color-primary);
}

.availability-day.is-past {
  opacity: 0.35;
  cursor: default;
}

.availability-day__name {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.availability-day__number {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-gray-900);
}

.availability-day.is-today .availability-day__number {
  color: var(--color-primary);
}

.availability-day__dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--color-green-500, #22c55e);
}

.availability-day__dot.is-hidden {
  background: transparent;
}

.availability-day-view__slots {
  margin-top: var(--spacing-4);
  min-height: 160px;
}

.availability-day-view__chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-2);
}

.availability-slot--large {
  padding: var(--spacing-3) var(--spacing-2);
  font-size: var(--font-size-sm);
}

.availability-day-view__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
}

/* Error State */
.availability-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  padding: var(--spacing-8);
  text-align: center;
  color: var(--color-gray-500);
}

.availability-error i {
  font-size: 2rem;
  color: var(--color-red-500);
}

/* Footer */
.availability-modal__footer {
  padding: var(--spacing-3) var(--spacing-5);
  border-top: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
}

.availability-modal__hint {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.availability-modal__hint i {
  color: var(--color-primary);
}

/* Responsive */
@media (max-width: 768px) {
  .availability-modal {
    padding: 0;
    align-items: flex-end;
  }

  .availability-modal__dialog {
    max-width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .availability-modal__controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-3);
  }

  .availability-modal__duration-picker {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2);
  }

  .availability-modal__duration-buttons {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .availability-modal__week-nav {
    justify-content: center;
  }

  /* The week matrix doesn't fit a phone — swap it for the day strip + the
     selected day's slots */
  .availability-grid__headers,
  .availability-grid__body {
    display: none;
  }

  .availability-day-view {
    display: block;
  }

  .availability-modal__body {
    min-height: 260px;
  }
}

@media (max-width: 480px) {
  .availability-modal__header {
    padding: var(--spacing-3) var(--spacing-4);
  }

  .availability-modal__title {
    font-size: var(--font-size-base);
  }

  .availability-modal__body {
    padding: var(--spacing-3);
  }

  .availability-modal__duration-btn {
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-xs);
  }
}
/* ==========================================================================
   My Wallet — learner credit balance, repurchase funnel, activity ledger
   ========================================================================== */

.wallet-page {
  padding: var(--spacing-8) 0 var(--spacing-16);
  min-height: calc(100vh - 200px);
  background: var(--color-gray-50);
}

.wallet-page .container {
  max-width: var(--container-md);
}

.wallet-header {
  margin-bottom: var(--spacing-6);
}

.wallet-header__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-1);
}

.wallet-header__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  margin: 0;
}

/* Balance card — navy states the number once, with context */
.wallet-balance-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-8);
  background: var(--color-secondary);
  border-radius: var(--radius-xl);
  /* inset shadow instead of border-top so the rule follows the radius */
  box-shadow: inset 0 3px 0 var(--color-primary);
  color: var(--color-white);
}

.wallet-balance-card__glyph {
  position: absolute;
  right: var(--spacing-6);
  top: 50%;
  transform: translateY(-50%);
  font-size: 88px;
  color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.wallet-balance-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gray-300);
}

.wallet-balance-card__amount {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.wallet-balance-card__context {
  font-size: var(--font-size-sm);
  color: var(--color-gray-300);
  margin: var(--spacing-1) 0 0;
}

/* Section headings */
.wallet-section__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-3);
}

/* Buy more lessons — repurchase funnel into the booking wizard */
.wallet-repurchase {
  margin-bottom: var(--spacing-8);
}

.wallet-repurchase__card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  padding: var(--spacing-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.wallet-repurchase__instructor {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.wallet-repurchase__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.wallet-repurchase__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.wallet-repurchase__instructor-info {
  display: flex;
  flex-direction: column;
}

.wallet-repurchase__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.wallet-repurchase__meta {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  font-variant-numeric: tabular-nums;
}

.wallet-repurchase__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-3);
  max-width: 560px;
}

.wallet-pack-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-secondary);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.wallet-pack-tile:hover {
  border-color: var(--color-secondary);
  background: var(--color-gray-50);
}

.wallet-pack-tile--featured {
  border-color: var(--color-secondary);
  background: var(--color-primary-50);
}

.wallet-pack-tile--featured:hover {
  background: var(--color-primary-50);
}

.wallet-pack-tile__name {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.wallet-pack-tile__tag {
  padding: 2px var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.wallet-pack-tile__price {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.wallet-repurchase__cta {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

.wallet-repurchase__alt-link {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  text-decoration: none;
}

.wallet-repurchase__alt-link:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}

.wallet-repurchase__note {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin: 0;
}

/* Activity ledger */
.wallet-activity {
  margin-bottom: var(--spacing-6);
}

.wallet-ledger {
  padding: 0 var(--spacing-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.wallet-ledger__month {
  padding: var(--spacing-4) 0 var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gray-500);
  margin: 0;
}

.wallet-ledger__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wallet-ledger__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4) 0;
}

.wallet-ledger__row + .wallet-ledger__row {
  border-top: 1px solid var(--color-gray-100);
}

.wallet-ledger__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.wallet-ledger__glyph--credit {
  background: var(--color-success-50);
  color: var(--color-success-700);
}

.wallet-ledger__glyph--debit {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.wallet-ledger__detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.wallet-ledger__description {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
}

.wallet-ledger__note,
.wallet-ledger__when {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  font-variant-numeric: tabular-nums;
}

.wallet-ledger__when {
  white-space: nowrap;
}

.wallet-ledger__amount {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wallet-ledger__amount--credit {
  color: var(--color-success-700);
}

.wallet-footnote {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin: 0;
}

@media (max-width: 520px) {
  .wallet-repurchase__tiles {
    grid-template-columns: 1fr;
  }

  .wallet-repurchase__cta .btn {
    width: 100%;
  }

  .wallet-balance-card__glyph {
    display: none;
  }

  .wallet-ledger__row {
    flex-wrap: wrap;
  }

  .wallet-ledger__amount {
    margin-left: auto;
  }
}

/* Utility overrides — must come last to beat component-level display rules */
.hidden-field { display: none; }