/* ==============================================
   FELICITY - SHARED STYLES
   Shared styling for triage and booking flows
   ============================================== */

/* ==============================================
   TABLE OF CONTENTS
   ==============================================
   1. FOUNDATION
      1a. Design Tokens ...... :root variables
      1b. Base Styles ........ body, h1, p, ul
      1c. Form Elements ...... button, input

   2. GENERIC COMPONENTS
      2a. Layout Containers .. mainWindow, bodyContainer, back button
      2b. Service Cards ...... card component and variants
      2c. Loading States ..... spinner, loading messages
      2d. Animations ......... transitions and keyframes

   3. TRIAGE
      3a. Triage Flow ........ screening, questions, results

   4. BOOKING
      4a. Availability ....... calendar, day cards, time slots
      4b. Registration ......service-card__profile.. forms, checkout modules

   5. UTILITIES & OVERRIDES
      5a. Debug Tools ........ diagnosis popup (dev only)
      5b. Utilities .......... .hidden
      5c. Mobile Responsive .. @media overrides

   Z-INDEX SCALE
   10 .... back button container
   100 ... sticky header
   300 ... debug symbol
   350 ... diagnosis popup overlay
   400 ... version display
   1000 .. form error tooltip

   BEM & ORGANISATION PRINCIPLES (for LLMs)
   - Base HTML elements (button, input, etc.) go in section 1c (Form Elements)
   - Generic modifiers (button.secondary) go with base element
   - BEM components own their elements: .block__element stays with .block
   - Layout container modifiers (--triage, --booking) stay in section 2a with base class
   - Feature sections (3, 4) are for content/functionality, not container sizing
   - Don't create new classes if an existing pattern fits
   - Don't add styles without checking for unused classes first
   ============================================== */

/* ==============================================
   1. FOUNDATION
   ============================================== */

/* ----------------------------------------------
   1a. DESIGN TOKENS
   ---------------------------------------------- */
  :root {
    /* Typography scale */
    --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 */

    /* Primary brand colors */
    --color-primary: #3d6650;
    --color-primary-hover: #2d4a3d;
    --color-primary-active: #1a3329;
    --color-deep-forest: #1a3329;
    --color-forest: #2d4a3d;
    --color-forest-mid: #7a9e8c;
    --color-forest-grosvenor: #20312A;
    --color-sage-forest: #3d6650;
    --color-sage-green: #5c6a4d;
    --color-text-secondary: #404945;
    --color-warm-sand: #DBBEA1;
    --color-sand-pale: #f7ebdd;

    /* Neutral color scale (light to dark) */
    --color-white: #ffffff;
    --color-gray-50: #fafafa;
    --color-gray-100: #f8f9fa;
    --color-gray-150: #f5f5f5;
    --color-gray-200: #f0f0f0;
    --color-gray-300: #e0e0e0;
    --color-gray-400: #dee2e6;
    --color-gray-500: #cccccc;
    --color-gray-600: #adb5bd;
    --color-gray-700: #999;
    --color-gray-800: #888;
    --color-gray-850: #666;
    --color-gray-900: #495057;
    --color-gray-950: #333;
    --color-black: #000;
    --color-white: #fff;

    /* Background colors */
    --color-bg-gradient-start: #e7ecf2;
    --color-bg-form: #f4f9f5;
    --color-bg-summary: #f3f5f1;
    --color-bg-hover: #e5f0e8;
    --color-bg-secondary: #e9ecef;
    --color-forest-pale: #f4f9f5;
    --color-forest-100: #e5f0e8;
    --color-sage-pale: #f3f5f1;
    
    /* Status colors */
    --color-success: #28a745;
    --color-success-hover: #218838;
    --color-success-light: #e8f5e8;
    --color-success-text: #2e7d32;
    --color-success-border: #4caf50;
    --color-error: #dc3545;
    --color-error-hover: #c82333;
    --color-error-dark: #b00020;
    --color-error-light: #fff5f5;
    --color-warning-bg: #fff3cd;
    --color-warning-border: #ffeaa7;
    --color-warning-text: #856404;
    --color-info-blue: #1976d2;
    
    /* Interactive state colors */
    --color-disabled-bg: #e5e7eb;
    --color-disabled-text: #9ca3af;
    --color-button-gray: #6c757d;
    --color-button-gray-hover: #5a6268;
    --color-border-light: #ddd;
    --color-border-lighter: #eee;
    
    /* Gradients */
    --bg-main-gradient: linear-gradient(
        180deg,
        var(--color-deep-forest) 0%,
        var(--color-forest-mid) 50%,
        var(--color-deep-forest) 100%
    );
    
    /* Border radius */
    --border-radius: 12px;
    --border-radius-window: 30px; /* Keep distinctive main window radius */

    /* Window sizing */
    --window-min-height: 520px;
    --window-max-width: min(900px, 100vw);
    
    /* Shadow system - consistent elevation */
    --shadow-xs: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.15);
    --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.2);

    /* Focus ring shadows */
    --shadow-focus-primary: 0 0 0 2px rgba(57, 146, 226, 0.2);
    --shadow-focus-error: 0 0 0 2px rgba(220, 53, 69, 0.2);

    /* Button shadows (primary-tinted) */
    --shadow-button: 0 2px 8px rgba(57, 146, 226, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-button-hover: 0 4px 12px rgba(57, 146, 226, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
    --shadow-button-active: 0 2px 4px rgba(57, 146, 226, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
    
    /* Layout constants */
    --header-height: 60px;
    --content-padding: 32px;
  }
  
  /* ----------------------------------------------
     1b. BASE STYLES
     ---------------------------------------------- */
  html, body {
    /* App shell never pans: inner panes scroll via their own overflow-y.
       overscroll-behavior kills iOS rubber-band drag on both axes (covers
       iPads, which fall outside the mobile media query's width breakpoint). */
    overflow: hidden;
    overscroll-behavior: none;
  }

  body {
    font-family: "Roboto", sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr; /* Header takes needed space, body takes rest */
  }
  
  h1 {
    font-size: 24px;
  }
  
  p {
    font-size: 16px;
  }

  ul {
    padding-left: 20px; /* Reduced from browser default ~40px */
    margin: 0.5em 0;
  }

  ul li {
    margin-bottom: 4px;
  }

  .boldHeading {
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    margin-top: 20px;
  }

  .regularText {
    font-size: var(--font-size-base);
    font-weight: 300;
    line-height: 1;
    color: var(--color-gray-900);
  }
  /* ----------------------------------------------
     1c. FORM ELEMENTS
     ---------------------------------------------- */
  
  /* Base button styling with flex centering */
  button {
    width: 120px;
    height: 50px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-button);
    letter-spacing: 0.025em;
    
    /* Flex properties for perfect centering */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Remove padding since flex handles centering */
  }
  
  /* Button hover and focus states */
  button:hover,
  button:focus {
    background-color: var(--color-primary-hover);
    box-shadow: var(--shadow-button-hover);
    outline: none;
  }
  
  /* Button active/pressed state */
  button:active {
    box-shadow: var(--shadow-button-active);
  }
  
  /* Button disabled state */
  button:disabled {
    background-color: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.6;
  }
  
  button:disabled:hover {
    background-color: var(--color-disabled-bg);
    box-shadow: none;
  }
  
  /* Input styling */
  input:focus {
    outline: none;
    box-shadow: none;
  }
  
  .inputBox {
    width: 100%;
    max-height: 3em;
    font-size: 1rem;
    line-height: 1.5;
    font-family: inherit;
    border: none;
    outline: none;
    margin-left: 20px;
    resize: none;
    overflow-y: hidden;
    scrollbar-width: none;
    font-weight: 600;
  }

  /* ==============================================
   2. GENERIC COMPONENTS
   ============================================== */

/* ----------------------------------------------
     2a. LAYOUT CONTAINERS
     ---------------------------------------------- */
  
  /* Fixed header for consistent positioning */
  .stickyHeader {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100; /* Consistent z-index system */
    background: var(--color-deep-forest);
    min-height: var(--header-height);
    color: var(--color-white);
  }

  .header-logo {
    height: 54px;
    margin: 10px 0; /* 10px breathing room above and below the logo */
    animation: fadeIn 0.5s ease-in;
  }
  
  /* Main page container - uses CSS Grid child positioning */
  .bodyContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    overflow-y: auto; /* Scroll only when content exceeds available space */
    min-height: 600px; /* Minimum before squishing */
    background: var(--bg-main-gradient);
    padding: 0;
    margin: 0;
  }

  /* Main triage flow container */
  .mainContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centers when enough space, otherwise starts from top */
    /*min-height: max(calc(100vh - calc(var(--header-height) * 2)), 80vh); /* Dynamic height with safe offset */
    width: 100%;
  }
  
  /* Triage container variant for narrower content */
  .mainContainer--triage {
    min-height: 500px;
  }
  
  /* Central triage window - adapts to different flow states */
  .main-window {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
    width: min(850px, 100vw);
    /* Never exceed the viewport (minus the header): scroll inside the window
       when content is taller, so action buttons stay reachable. dvh tracks
       iOS Safari's dynamic toolbar; vh is the fallback for browsers without dvh. */
    max-height: calc(100vh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    border: 2px solid var(--color-gray-800);
    border-radius: var(--border-radius-window);
    background-color: var(--color-white);
  }
  
  /* Triage window state variants - different sizing for different phases */
  .main-window--screening {
    min-height: 500px;
  }
  
  .main-window--triage {
    min-height: 80px;
    justify-content: center;
  }
  
  .main-window--recommendation {
    min-height: 700px;
    width: min(1170px, 100vw);
    justify-content: flex-start;
  }
  
  .main-window--booking {
    min-height: 700px;
    justify-content: flex-start;
    width: min(1170px, 100vw);
  }

  .main-window--checkout {
    min-height: 700px;
    width: min(1170px, 100vw);
    justify-content: flex-start;
  }

  .main-window--cancel {
    min-height: var(--window-min-height);
  }

  /* Booking window stages */
  .main-window--start {
    min-height: 700px;
    width: min(1170px, 100vw);
    justify-content: center;
    align-items: center;
    align-content: center;
  }

  .main-window--select-type {
    min-height: 700px;
    max-height: 700px;
    width: min(1170px, 100vw);
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
  }

  .main-window--doctor-selection {
    min-height: 700px;
    width: min(1170px, 100vw);
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
  }

  /* Utility class to center content without changing window size.
     Must appear after all sizing classes so it wins on specificity tie. */
  .main-window--center-content {
    justify-content: center;
    align-items: center;
    align-content: center;
  }

  /* Triage window transition animation - critical UX feedback */
  #mainWindow_id {
    will-change: min-height, width; /* GPU optimization for critical resize animation */
    transition: min-height 0.6s ease, width 0.6s ease;
  }

  /* Back button styling */
  .back-button {
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-400);
    color: var(--color-button-gray);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
    box-shadow: var(--shadow-xs);
    min-width: 100px;
    min-height: 40px;
  }

  .back-button:hover {
    background: var(--color-bg-secondary);
    color: var(--color-gray-900);
    border-color: var(--color-gray-600);
    box-shadow: var(--shadow-sm);
  }

  /* Back button container */
  .backButtonContainer {
    display: flex;
    align-items: center;
    align-self: flex-start;
    padding: 24px var(--content-padding);
  }

  /* Constrained width container for text-heavy content blocks */
  .content-narrow {
    max-width: 600px;
  }


  .content-medium {
    max-width: 800px;
  }

  /* ----------------------------------------------
     2b. SERVICE CARDS COMPONENT
     ---------------------------------------------- */

  /* --- Service row (card layout container) --- */

  /* Shared body copy style for info pages and inline messaging */
  .info-body {
    font-size: var(--font-size-lg);
    color: var(--color-black);
    text-align: left;
    margin: 20px 0;
  }

  .info-body a {
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
  }

  .info-body a:hover {
    color: var(--color-primary-hover);
  }

  .error-detail {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    margin-top: 16px;
  }

  .service-row {
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    gap: 20px;
    flex-wrap: wrap;
  }
  
  /* Alternate option links within service rows */
  .service-row .alternate-option {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    color: var(--color-primary);
    text-decoration: underline;
    transition: color 0.2s ease;
  }
  
  .service-row .alternate-option:hover {
    color: var(--color-primary-active);
  }

  /* Service row modifier for day selection */
  .service-row--days {
    justify-content: space-between;
    align-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 0 var(--content-padding);
    box-sizing: border-box;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /* --- Service card (base + elements) --- */

  .service-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-card);
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
    max-width: 210px;
    border: 2px solid var(--color-gray-300);
    transition: all 0.3s ease;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    min-height: 240px;
  }

  .service-card:hover {
    box-shadow: var(--shadow-float);
    transform: translateY(-3px);
  }

  .service-card:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
  }

  /* Service card BEM elements */
  .service-card__header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    gap: 12px;
  }

  .service-card__icon {
    margin-top: 20px;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    object-fit: cover;
  }


  .service-card__initials {
    display: flex;
    width: 120px;
    height: 120px;
    background-color: var(--color-forest-mid);
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: var(--font-size-xl);
    font-weight: 800;
    border-radius: 50%;
  }

  .service-card__title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-gray-950);
    margin: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .service-card__description {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-850);
    line-height: 1.5;
    margin-bottom: 8px;
  }

  .service-card__description strong {
    font-weight: 700;
    color: var(--color-gray-950);
  }

  .service-card__primary-action {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius);
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    /*width: 80%;*/
    min-width: 120px;
    white-space: nowrap;
    margin: 0 auto;
    display: block;
  }

  .service-card__primary-action:hover {
    background-color: var(--color-primary-active);
  }

  .service-card__photo {
    border-radius: 50%;
    object-fit: cover;
  }

  /* Service row modifier for product grid */
  .service-row--grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    width: 100%;
  }

  /* --- Service card modifiers --- */

  .service-card--fixed {
    width: 300px;
    min-height: 240px;
    min-width: unset;
    max-width: unset;
    max-height: unset;
    align-items: flex-start;
    padding: 0;
    text-align: left;
    border: none;
    border-left: 3px solid var(--color-primary);
    overflow: hidden;
  }

  .service-card--fixed .service-card__header-row {
    justify-content: center;
    background-color: var(--color-bg-form);
    padding: 12px 16px;
    box-sizing: border-box;
  }

  .service-card--fixed .service-card__icon--product {
    width: 32px;
    height: 32px;
  }

  .service-card--fixed .service-card__title {
    margin-left: 8px;
    font-weight: 600;
    font-size: var(--font-size-lg);
  }

  .service-card--fixed .service-card__description {
    align-self: stretch;
    margin: 0 16px;
    min-height: 80px;
    font-weight: 400;
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
  }

  .service-card--fixed .service-card__meta {
    align-self: stretch;
    margin: 0 16px;
    width: unset;
    min-height: 80px;
    border-top: 1px solid var(--color-gray-300);
  }

  .service-card--fixed .service-card__primary-action {
    width: 90%;
    margin-bottom: 20px;
  }

  .service-card__header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .service-card__icon--product {
    width: 48px;
    height: 48px;
    object-fit: cover;
    /*border-radius: var(--border-radius);*/
    flex-shrink: 0;
  }

  .service-card__header-row .service-card__title {
    flex: 1;
    text-align: left;
  }

  .service-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: var(--font-size-base);
    color: var(--color-gray-850);
  }

  .service-card__price-block {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
  }

  .service-card__price-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-gray-700);
    letter-spacing: 0.05em;
  }

  .service-card__price {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-950);
  }

  .service-card__duration-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background-color: var(--color-bg-form);
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-gray-850);
  }


  .service-card--doctor {
    width: 400px;
    max-width: 400px;
    min-height: unset;
    padding: 20px;
  }

  .service-card__profile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin-bottom: 20px;
  }

  .service-card__photo {
    width: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .service-card--doctor .service-card__initials {
    width: 30%;
    height: auto;
    aspect-ratio: 1;
    margin-top: 0;
  }

  .service-card__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .service-card__bio {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    line-height: 1.4;
    text-align: left;
  }

  .service-card--doctor .service-card__title {
    font-weight: 600;
    font-size: var(--font-size-base);
    text-align: left;
  }



  .service-card--day {
    flex: 1;
    height: 80px;
    min-height: unset;
    width: 120px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    max-width: 120px;
    background-color: var(--color-bg-hover);
    border-color: var(--color-primary);
  }

  .service-card--day.selected {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-hover);
  }

  .service-card--day.selected span,
  .service-card--day.selected strong {
    color: var(--color-white) !important;
  }

  .service-card--day.no-appointments {
    background-color: var(--color-gray-150);
    color: var(--color-gray-700);
    cursor: not-allowed;
    opacity: 0.6;
  }

  .service-card--day.no-appointments:hover {
    transform: none;
    box-shadow: var(--shadow-card);
  }

  /* ----------------------------------------------
     2c. LOADING STATES
     ---------------------------------------------- */

  /* Loading container for centered loading states */
  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 20px;
  }

  /* Availability-specific loading container - fills available space */
  .loading-container--availability {
    flex-grow: 1;
  }

  /* Loading spinner animation */
  .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-gray-300);
    border-top: 4px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  /* Button context spinner - size modifier only */
  .spinner--button {
    width: 28px;
    height: 28px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-white);
  }

  /* Spinner container styling */
  #sendButtonSpinner_id {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Loading message text */
  .loading-message {
    font-size: 1.2rem;
    color: var(--color-black);
    text-align: center;
    font-weight: 500;
  }

  /* Version display in corner */
  .version-display {
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-size: 12px;
    color: var(--color-black);
    background-color: transparent;
    z-index: 400; /* Consistent z-index system */
  }

  /* ----------------------------------------------
     2d. ANIMATIONS
     ---------------------------------------------- */

  /* Basic fade animations for content transitions */
  #screeningQuestion_id {
    transition: opacity 0.4s ease;
    opacity: 1;
  }

  #screeningQuestion_id.fade-out {
    opacity: 0;
  }

  .fade-in {
    opacity: 0;
    animation: fadeIn 0.4s ease forwards;
  }

  .fade-in-slow {
    opacity: 0;
    animation: fadeIn 2s ease forwards;
  }

  .fade-out {
    opacity: 1;
    animation: fadeOut 0.4s ease forwards;
  }

  /* Service card zoom-in animation */
  .service-card--animate-in {
    opacity: 0;
    transform: scale(0.6);
    transform-origin: center center;
    animation: service-cardZoomIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    box-shadow: var(--shadow-lg);
  }

  .service-card--hidden {
    opacity: 0 !important;
    transform: scale(0.8) !important;
  }

  /* Prevent hover transform clash during animation */
  .service-card--doctor:not(.service-card--animate-in):hover {
    transform: scale(1.04);
    box-shadow: var(--shadow-lg);
  }

  /* Keyframe definitions */
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    to {
      opacity: 0;
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes service-cardZoomIn {
    0% {
      opacity: 0;
      transform: scale(0.6);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

/* ==============================================
   3. TRIAGE
   ============================================== */

/* ----------------------------------------------
     3a. TRIAGE FLOW
     ---------------------------------------------- */

  /* Triage text styles */
  .questionText {
    padding-right: 30px;
    color: var(--color-white);
    font-size: var(--font-size-lg);
    font-weight: 600;
  }

  .screeningText {
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    margin-top: 20px;
    white-space: pre-line;
  }

  .screeningQuestion {
    text-align: left;
    margin-left: 10px;
    margin-right: 10px;
  }

  .recommendation-footer {
    font-size: var(--font-size-base);
    color: var(--color-black);
    margin: 20px 0;
    text-align: left;
    align-self: flex-start;
    padding: 0 var(--content-padding);
    margin-bottom:60px;
  }

  /* Screening phase content area */
  .screeningQuestionArea {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 40px;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    padding-bottom: var(--content-padding);
  }

   .button__send {
    margin-right: 15px;
   }

  /* Practice selection row */
  .practice-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }

  .practice-row__info {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .practice-row__logo {
    height: 60px;
    width: auto;
    border-radius: var(--border-radius);
  }

  .practice-row__name {
    margin: 0;
  }

  .practice-row__actions {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .practice-row__subscribe {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* Triage phase content area - positioned for dynamic questions */
  .triageQuestionArea {
    display: flex; /* Visibility controlled by hidden class */
    align-items: flex-end;
    position: relative;
    width: min(850px, 100vw);
    /*max-width: 800px;*/
    min-height: 60px;
    transition: min-height 0.6s ease;
    margin-left: 40px;
  }

  /* Button area for yes/no responses */
  .buttonArea {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 40px;
    gap: 20px;
  }

  /* Input area for free text responses */
  .inputArea {
    display: flex;
    align-items: center;
    width: 100%;
  }

  /* Results and recommendation display blocks */
  .resultBlock {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    gap: 0;
  }


  .scrollable-content {
    /*flex: 1;*/
    min-width: 90%;
    min-height: 80%;
    overflow-y: scroll;
    min-height: 0;
    display: flex;
    align-items: safe center;
    justify-content: center;
    margin: 0 var(--content-padding);
    padding: 24px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius);
  }

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

  .resultBlock--info .info-body {
    text-align: center;
  }

  /* Emergency/exception message display */
  .exceptionBlock {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0;
    min-height: var(--window-min-height);
  }

  .exception-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: #b00020;
  }

  .exception-body {
    font-size: 1rem;
    color: #000;
    white-space: pre-line;
  }

  .screening-symptoms {
    text-align: left;
    font-size: var(--font-size-base);
    line-height: 1.4;
  }

/* ==============================================
   4. BOOKING
   ============================================== */

  .booking-stage-header-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    align-items: center;
    text-align: unset;
  }

  .booking-stage-header a {
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
  }

  .booking-stage-header a:hover {
    color: var(--color-primary-hover);
  }


/* ----------------------------------------------
     4a. AVAILABILITY
     ---------------------------------------------- */
  


  /* Navigation controls for week selection */
  .availability-nav {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-right:20px;
  }
  
  .availability-nav button {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-primary);
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
    font-weight: bold;
  }
  
  .availability-nav button:hover {
    color: var(--color-primary-active);
  }
  
  .availability-nav button:disabled {
    color: var(--color-gray-500);
    cursor: not-allowed;
    opacity: 0.6;
  }
  
  .availability-nav button:disabled:hover {
    color: var(--color-gray-500);
  }
  
  .availability-nav span {
    font-size: 1rem;
    color: var(--color-gray-850);
    font-weight: 600;
  }
  
  /* Time slot selection interface */
  .time-slots-container {
    margin-top: 20px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-grow: 1;
    padding: 0 var(--content-padding);
    box-sizing: border-box;
  }
  
  .time-slots-split {
    display: flex;
    width: 100%;
    gap: 0;
  }
  
  .time-slots-column:first-child {
    flex: 0.38;
  }

  .time-slots-column:last-child {
    flex: 0.62;
  }
  
  .time-slots-header {
    text-align: center;
    margin-top: 8px;
    margin-bottom: 20px;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-950);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 8px;
  }
  
  .time-slots-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    align-content: flex-start; /* This fixes vertical height calculation */
    margin-bottom: 40px;
  }
  
  .time-slots-divider {
    width: 1px;
    background-color: var(--color-gray-300);
    margin: 0 10px;
    min-height: 200px;
  }
  
  .no-slots {
    text-align: center;
    color: var(--color-gray-700);
    font-style: italic;
    padding: 20px 0;
    margin: 0;
  }
  
  /* Individual time slot styling */
  .time-slot {
    background-color: var(--color-bg-hover);
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius);
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 14px;
    padding-right: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-gray-950);
    text-align: center;
    width: 70px;
    flex-shrink: 0;
  }

  .time-slot:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    transform: translateY(-1px);
  }
  
  .time-slot.selected {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
  }
  
  /* ----------------------------------------------
     4b. REGISTRATION & CHECKOUT
     ---------------------------------------------- */
  
  /* Registration page layout */
  .checkout-row {
    display: flex;
    gap: 32px;
    padding-left:40px;
    padding-right:40px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Checkout columns - shared base */
  .checkout-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
  }

  /* Summary column (left) */
  .checkout-col--summary {
    width: 30%;
    justify-content: flex-start;
    text-align: left;
  }

  .checkout-col--summary .backButtonContainer {
    margin-top: auto;
    padding-left: 0;
  }
  
  .checkout-col--summary .summary-subheading {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-950);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-300);
    padding-bottom: 4px;
    margin-top: 12px;
    margin-bottom: 4px;
  }

  .checkout-col--summary .summary-subheading:first-child {
    margin-top: 0;
  }

  .summary-group {
    margin-top: 20px;
    width: 100%;
  }
  .summary-group--centered {
    text-align: center;
  }
  .summary-group__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-950);
    margin-top: 8px;
  }

  .checkout-col--summary .checkout-module__row {
    border-bottom: 1px solid var(--color-gray-300);
    padding-bottom: 4px;
    margin-top: 12px;
    margin-bottom: 4px;
  }

  .checkout-col--summary .checkout-module__row .summary-subheading {
    border-bottom: none;
    margin: 0;
    padding-bottom: 0;
  }

  /* Subscribe summary */
  .summary-group--subscribe {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .subscribe-plan-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-gray-950);
    align-self: flex-start;
  }

  .subscribe-plan-description {
    align-self: flex-start;
    text-align: left;
  }

  .subscribe-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
  }

  .subscribe-price__amount {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-gray-950);
    line-height: 1;
  }

  .subscribe-price__interval {
    font-size: 1.15rem;
    color: var(--color-gray-850);
    margin-top: 6px;
  }

  .subscribe-price-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
    width: 100%;
  }

  .subscribe-price-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }

  .subscribe-price-option:hover {
    border-color: var(--color-gray-850);
  }

  .subscribe-price-option:has(input:checked) {
    border-color: var(--color-primary);
    background-color: var(--color-primary-100, rgba(0, 0, 0, 0.03));
  }

  .subscribe-price-option__label {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-950);
    text-align: left;
  }

  .subscribe-price-option__amount {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-950);
  }

  /* Divider between columns */
  .checkout-divider {
    width: 1px;
    background-color: var(--color-gray-300);
    align-self: stretch;
    margin: 20px 0;
  }

  /* Form column (right) */
  .checkout-col--form {
    width: 70%;
    border-radius: var(--border-radius);
    justify-content: center;
    overflow-y: auto;
    min-height: 0;
    max-height: 100%;
    align-items: center;
  }
  
  /* Registration form container with scroll */
  .registration-form-container {
    width: 100%;
    max-width: 650px;
  }
  
  /* Standard registration form */
  .registration-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 20px;
  }
  
  .form-row {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .form-row label {
    flex: 0 0 120px;
    font-weight: 500;
    color: var(--color-gray-950);
    font-size: 14px;
    text-align: right;
  }
  
  .form-row input,
  .form-row select {
    flex: 1;
    height: 40px;
    font-size: 1rem;
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
    background: var(--color-bg-form);
    box-sizing: border-box;
    min-width: 0; /* Allows flex item to shrink */
    padding-left: 5px;
  }
  
  .form-row input:focus,
  .form-row select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus-primary);
  }

  /* Read-only confirmation value (e.g. signed-in patient's name/email).
     Occupies the input column and matches the input's left padding so the
     value's text left-aligns with the entry fields below. */
  .form-row .form-value {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    color: var(--color-gray-950);
    align-self: center;
    padding-left: 5px;
    text-align: left;
  }
  
  /* Checkout text styles */
  .checkout-col--summary .checkout-doctor-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-gray-950);
  }

  .checkout-product-name {
    font-size: 1rem;
    color: var(--color-gray-950);
  }

  .checkout-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-gray-950);
  }

  .checkout-value {
    margin-top: 4px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-gray-950);
  }

  .checkout-value--muted {
    color: var(--color-gray-850);
  }


  /* Checkout modules */
  .checkout-module {
    border-radius: var(--border-radius);
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    margin-bottom: 16px;
  }

  .checkout-module__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .checkout-module__header {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 12px 0;
    text-align: left;
  }

  .checkout-module__description {
    font-size: 0.9rem;
    color: var(--color-gray-700);
    text-align: left;
  }

  .checkout-module__content {
    font-size: 0.95rem;
  }

  .checkout-module__content p {
    margin: 0 0 12px 0;
    color: var(--color-gray-850);
  }

  .checkout-module__button {
    background: var(--color-white);
    border: 1px solid currentColor;
    border-radius: var(--border-radius);
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .checkout-module__button:hover {
    background: rgba(255, 255, 255, 0.8);
  }


  /* Registration */
  .checkout-module--registration {
    background: transparent;
  }

  .checkout-module--registration .registration-form {
    padding-right: 20px;
    margin-bottom: 0;
  }

  /* Form validation error tooltip */
  .form-error-tooltip {
    position: absolute;
    z-index: 1000;
    background: var(--color-error);
    color: var(--color-white);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    max-width: 280px;
  }

  .form-error-tooltip--visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Tooltip arrow */
  .form-error-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 16px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--color-error);
  }

  /* Error state for form inputs */
  .form-row .form-input--error {
    border-color: var(--color-error);
    background-color: var(--color-error-light);
  }

  .form-row .form-input--error:focus {
    box-shadow: var(--shadow-focus-error);
  }

  /* Payment module */
  .checkout-module--payment {
    background: transparent;
    border: 1px solid var(--color-gray-300);
    width: 90%;
  }

  /* Stripe field - label above input */
  .stripe-field {
    margin-bottom: 16px;
  }

  .stripe-field__label {
    display: block;
    text-align: left;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-850);
    margin-bottom: 6px;
  }

  /* Stripe input containers */
  .stripe-input {
    height: 36px;
    padding: 8px 10px;
    border: 1px solid var(--color-gray-400);
    border-radius: 6px;
    background: var(--color-white);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .stripe-input:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(57, 146, 226, 0.15);
  }

  /* Split row for expiry/CVC side by side */
  .stripe-split-row {
    display: flex;
    gap: 16px;
  }

  .stripe-split-row .stripe-field {
    flex: 1;
  }

  /* Card errors */
  .card-errors {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    min-height: 20px;
    margin-top: 8px;
  }

  /* Total amount - receipt style below card fields */
  .checkout-module__total {
    margin-top: 16px;
    margin-bottom: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-gray-300);
    font-size: var(--font-size-sm);
    text-align: left;
  }

  .checkout-module__total strong {
    font-weight: 600;
  }

  /* Action section (Book Now / Continue to Payment) */
  .checkout-module--action {
    margin-top: var(--content-padding);
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .checkout-module__book-btn {
    width: 240px;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius);
    padding: 14px 0;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
  }

  .checkout-module__book-btn:hover:not(:disabled) {
    background: var(--color-primary-hover);
  }

  .checkout-module__book-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Cancel link */
  .checkout-module__cancel-link {
    color: var(--color-gray-700);
    font-size: 0.95rem;
    text-decoration: underline;
    cursor: pointer;
  }

  .checkout-module__cancel-link:hover {
    color: var(--color-gray-950);
  }

  /* Back link (mobile only) */
  .checkout-module__back-link {
    display: none;
  }

  /* Booking confirmation */
  .confirmation-container {
    display: flex;
    flex-direction: column;
    padding: var(--content-padding);
    width: 80%;
  }



  .confirmation-payment {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-950);
    margin-bottom: 24px;
    text-align: left;
  }

  .confirmation-details {
    width: 100%;
    margin-bottom: 24px;
  }

  .confirmation-details .checkout-module__row {
    border-bottom: 1px solid var(--color-gray-300);
    padding-bottom: 4px;
    margin-top: 12px;
    margin-bottom: 4px;
  }

  .confirmation-details .checkout-module__row:first-child {
    margin-top: 0;
  }

  .confirmation-details .summary-subheading {
    border-bottom: none;
    margin: 0;
    padding-bottom: 0;
  }

  .confirmation-details .checkout-value {
    text-align: right;
  }

  .confirmation-instructions:empty {
    display: none;
  }

  .confirmation-message {
    font-size: 0.95rem;
    color: var(--color-gray-700);
  }

  .confirmation-message--error {
    color: var(--color-error);
  }

  .confirmation-action {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 16px;
  }

  /* Booking error (reuses confirmation container) */
  .confirmation-container--error {
    align-items: center;
    text-align: center;
  }

  .confirmation-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #ffebee;
    color: #c62828;
    font-size: 32px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }

/* ==============================================
   5. UTILITIES & OVERRIDES
   ============================================== */

  /* ----------------------------------------------
     5a. UTILITY CLASSES
     ---------------------------------------------- */
  .hidden {
    display: none;
  }

  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ----------------------------------------------
     5c. MOBILE RESPONSIVE OVERRIDES
     ---------------------------------------------- */
  @media (max-width: 768px) {

    :root {
      --content-padding: 16px;
      --border-radius-window: 12px;
    }

    h1 {
      font-size: var(--font-size-lg);
    }

    .main-window {
      border: none;
      border-radius: 0;
      max-height: unset;
      min-height: 90vh;
      padding-left: 20px;
      padding-right: 20px;
      box-sizing: border-box;

    }

    .mainContainer {
      min-height: unset;
      justify-content: unset;
    }

    .main-window--screening {
      min-height: 0;
    }

    .service-row {
      flex-direction: column;
      align-items: center;
      gap: 40px;
    }

    .service-row--days {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 10px;
    }

    .service-card--fixed {
      width: 90%;
      max-width: none;
    }

    .booking-stage-header-row{
      text-align: left;
      gap: 40px;
      margin-top: 10px;
      padding: unset;
    }

    .booking-stage-header {
      font-size: var(--font-size-lg);
      margin: 8px 0 12px;
    }

    /* Cap the sign-in CTA at half the row so it can't crowd the heading;
       its text wraps within that width instead. */
    .booking-stage-header-row .regularText {
      max-width: 50%;
    }

    .screeningQuestionArea {
      min-height: 520px;
    }

    .practice-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }

    .practice-row__actions {
      width: 100%;
    }

    .practice-row__actions button {
      flex: 1;
    }

    .main-window--triage {
      min-height: 120px;
    }

    .triageQuestionArea {
      margin-top: 80px;
    }

    .service-row--grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .service-row--doctors {
      margin-bottom: 80px;
    }

    .service-card--doctor {
      min-height: unset;
      /* width:90% (matching .service-card--fixed) makes every card the same
         width regardless of content. Replaces min-width:stretch, which old iOS
         WebKit ignores — that left cards content-sized, so the sparser "Any
         Available Doctor" card came out narrower than the others. */
      width: 90%;
      max-width: none;
    }

    #availabilityBlock .booking-stage-header-row {
      flex-direction: column;
      align-items: flex-start;
    }

    .availability-nav {
      align-self: flex-end;
      padding-left: var(--content-padding);
      padding-right: var(--content-padding);
    }

    .service-card--day {
      min-width: 40%;
      max-width: none;
      width: auto;
    }

    .time-slots-column:first-child,
    .time-slots-column:last-child {
      flex: 1;
    }

    .time-slots-list {
      flex-direction: column;
    }

    .time-slot {
      width: 100%;
      box-sizing: border-box;
    }

    .checkout-row {
      flex-direction: column;
      align-items: stretch;
      padding: 0;
    }

    .registration-form-container{
      width: 100%;
      max-width: unset;
    }
    
    .checkout-col--summary {
      flex: 1;
      width: unset;
      max-width: unset;
      align-items: stretch;
    }

    .checkout-col--summary .backButtonContainer {
      display: none;
    }

    .checkout-divider {
      display: none;
    }

    .checkout-module {
      padding: 0;
    }

    .checkout-col--form {
      width: 100%;
      padding: 0;
    }

    .checkout-module--payment{
      width: 100%;
    }
    
    .checkout-module--action {
      flex-direction: column;
    }

    .checkout-module__back-link {
      display: inline;
      color: var(--color-gray-700);
      font-size: 0.95rem;
      text-decoration: underline;
      cursor: pointer;
    }

    .checkout-row--payment .summary-group:not(.summary-group--centered) {
      display: none;
    }

  }

  /* Mobile: stack expiry/CVC */
  @media (max-width: 480px) {
    .stripe-split-row {
      flex-direction: column;
      gap: 0;
    }

    .stripe-split-row .stripe-field {
      margin-bottom: 16px;
    }
  }

  /* ----------------------------------------------
     5d. Tablet (portrait + landscape) overrides
     ---------------------------------------------- */
  /* Tablets fall between the phone breakpoint (<=768) and desktop. Covers iPad
     portrait (~820px) and landscape (~1180px) in one orientation-agnostic band.
     Reclaim vertical space with smaller stage headings, matching the phone block. */
  @media (min-width: 769px) and (max-width: 1200px) {
    /* Window variants hardcode min/max-height: 700px (a desktop assumption).
       On tablets that leaves a gap in tall portrait and clips in short landscape.
       Release the 700px and fill the viewport (minus header + 20px gap), scrolling
       internally when content is taller. overflow-y: auto is on the base .main-window.
       Orientation-agnostic: tall portrait fills the tall space, short landscape fits. */
    .main-window--recommendation,
    .main-window--booking,
    .main-window--checkout,
    .main-window--start,
    .main-window--select-type,
    .main-window--doctor-selection {
      min-height: calc(100vh - var(--header-height) - 20px);
      min-height: calc(100dvh - var(--header-height) - 20px);
      max-height: calc(100vh - var(--header-height) - 20px);
      max-height: calc(100dvh - var(--header-height) - 20px);
    }

    /* Align the heading's left edge with the Back button, which sits at
       --content-padding via .backButtonContainer. Same variable = stays matched. */
    .booking-stage-header-row {
      padding-left: var(--content-padding);
    }

    .booking-stage-header {
      font-size: var(--font-size-lg);
      margin: 10px 0;
    }

    /* Cap the sign-in CTA at half the row so it can't crowd the heading. */
    .booking-stage-header-row .regularText {
      max-width: 50%;
    }

    /* Top-align the form column (desktop centres it vertically, which floats
       the form mid-column on the taller tablet canvas). */
    .checkout-col--form {
      justify-content: flex-start;
    }
  }