/* ==============================================
   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 ....... 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: #3992e2;
    --color-primary-hover: #2980d1;
    --color-primary-active: #2d7bc8;
    
    /* 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;
    
    /* Background colors */
    --color-bg-gradient-start: #e7ecf2;
    --color-bg-form: #f4f8fb;
    --color-bg-summary: #f7fafd;
    --color-bg-hover: #e3f2fd;
    --color-bg-secondary: #e9ecef;
    
    /* 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-bg-gradient-start) 0%, var(--color-white) 100%);
    
    /* Border radius */
    --border-radius: 12px;
    --border-radius-window: 30px; /* Keep distinctive main window radius */
    
    /* 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;
  }
  
  /* ----------------------------------------------
     1b. BASE STYLES
     ---------------------------------------------- */
  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;
  }

  /* ----------------------------------------------
     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);
    margin-right: 20px;
    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%;
    height: 50px;
    font-size: 1rem;
    border: none;
    margin-left: 20px;
  }

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

/* ----------------------------------------------
     2a. LAYOUT CONTAINERS
     ---------------------------------------------- */
  
  /* Fixed header for consistent positioning */
  .stickyHeader {
    display: flex;
    justify-content: center;
    z-index: 100; /* Consistent z-index system */
    background: var(--color-bg-gradient-start);
    height: var(--header-height);
  }
  
  /* 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(768px, 100vw);
    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: 480px;
    width: min(900px, 100vw);
    justify-content: flex-start;
  }
  
  .main-window--booking {
    min-height: min(600px, 75vh);
    justify-content: flex-start;
    width: min(1000px, 100vw);
  }

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

  /* Utility class to center content without changing window size */
  .main-window--center-content {
    justify-content: center;
    align-items: center;
    align-content: center;
  }

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

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

  /* Triage window transition animation - critical UX feedback */
  #mainWindow_id {
    will-change: min-height; /* GPU optimization for critical resize animation */
    transition: min-height 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 positioning */
  .backButtonContainer {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 10;
    display: flex;
    align-items: center;
  }

  /* Ensure parent containers are positioned for absolute children */
  .main-window,
  .resultBlock,
  #doctorSelectionBlock_id,
  #bookingBlock_id {
    position: relative;
  }

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

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

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

  .service-row {
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    gap: 20px;
    flex-wrap: wrap; /* Allow items to wrap to new lines */
    margin-top: 20px;
  }
  
  /* 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: flex-start;
    align-content: flex-start;
    gap: 10px;
    margin-left: 10px;
    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__icon--doctor {
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }

  .service-card__initials {
    display: flex;
    width: 120px;
    height: 120px;
    background-color: var(--color-info-blue);
    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.4rem;
    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 card modifiers --- */

  .service-card--doctor {
    width: 180px;
  }

  .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.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;
  }

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

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

  .recommendation-footer {
    font-size: var(--font-size-base);
    color: var(--color-black);
    margin: 20px 40px;
    text-align: center;
  }

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

  /* Triage phase content area - positioned for dynamic questions */
  .triageQuestionArea {
    display: none; /* Hidden by default, JS sets display:flex when active */
    align-items: flex-end;
    position: relative;
    width: min(768px, 100vw);
    max-width: 800px;
    min-height: 60px;
    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;
  }

  /* Input area for free text responses */
  .inputArea {
    width: 100%;
  }

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

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

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

  /* Emergency/exception message display */
  .exceptionBlock {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0;
    height: 80%;
  }

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

  /* Booking stage header - consistent h2 styling across all booking stages */
  .booking-stage-header {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-950);
    margin: 20px;
    text-align: center;
  }

/* ----------------------------------------------
     4a. AVAILABILITY
     ---------------------------------------------- */
  
  /* Availability interface header */
  .availability-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  .availability-header h2 {
    margin-left: 20px;
    font-size: var(--font-size-lg);
    color: var(--color-gray-950);
  }
  
  /* Navigation controls for week selection */
  .availability-nav {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  .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: 500;
  }
  
  /* Time slot selection interface */
  .time-slots-container {
    margin-top: 20px;
    width: 100%;
    display: flex;
    align-items: flex-start;
  }
  
  .time-slots-split {
    display: flex;
    width: 100%;
    gap: 0;
  }
  
  .time-slots-column:first-child {
    flex: 0.38;
    padding: 0 15px;
  }
  
  .time-slots-column:last-child {
    flex: 0.62;
    padding: 0 15px;
  }
  
  .time-slots-header {
    text-align: center;
    margin: 0 0 15px 0;
    font-size: 1.1rem;
    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 */
  .registration-main-row {
    display: flex;
    gap: 32px;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    align-items: flex-start;
    height: 100%;
    min-height: 600px;
  }
  
  /* Registration summary column */
  .registration-summary-col {
    flex: 0 0 30%;
    max-width: 30%;
    background: var(--color-bg-summary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-card);
    padding: 24px 20px;
    font-size: 0.97rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    align-items: flex-start;
    height: fit-content;
    text-align: left;
  }

  /* Checkout summary column - transparent variant */
  .registration-summary-col--transparent {
    background: transparent;
    box-shadow: none;
    padding: 0;
    gap: 0;
    margin-left: 40px;
  }
  
  .registration-summary-col .summary-subheading {
    font-size: 1.08rem;
    font-weight: 600;
    margin-bottom: 4px;
    margin-top: 18px;
    text-align: left;
  }
  
  .registration-summary-col .summary-subheading:first-child {
    margin-top: 0;
  }
  
  
  /* Registration form column */
  .registration-form-col {
    flex: 1 1 70%;
    max-width: 70%;
    background: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
  }
  
  /* Registration form container with scroll */
  .registration-form-container {
    height: 100%;
    overflow-y: auto;
    padding-bottom: 120px;
    padding-right: 16px;
  }
  
  /* Standard registration form */
  .registration-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 100px;
  }
  
  .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);
  }
  
  /* Date of birth inputs */
  .dob-inputs {
    display: flex;
    gap: 10px;
    flex: 1;
  }
  
  .dob-input {
    flex: 1;
  }
  
  /* Checkout text styles */
  .registration-summary-col .checkout-doctor-name {
    margin-top: 16px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-gray-950);
  }

  .checkout-product-name {
    margin-top: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-950);
  }

  .checkout-price {
    margin-top: 6px;
    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-back-container {
    margin-top: auto;
    padding-top: 24px;
  }

  /* Checkout modules */
  .checkout-module {
    border-radius: var(--border-radius);
    padding: 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);
  }

  /* Signin prompt */
  .checkout-module--signin {
    background: transparent;
    border: 1px solid var(--color-gray-300);
  }

  .checkout-module--signin .checkout-module__button {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    padding: 10px 20px;
    font-weight: 600;
  }

  .checkout-module--signin .checkout-module__button:hover {
    background: var(--color-primary-hover);
  }

  /* Registration */
  .checkout-module--registration {
    background: transparent;
    border: 1px solid var(--color-gray-300);
    padding-bottom: 12px;
  }

  .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 - green */
  .checkout-module--payment {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    color: #2e7d32;
  }

  /* Action section (Book Now) */
  .checkout-module--action {
    margin-top: 24px;
    padding: 0;
    display: flex;
    justify-content: center;
  }

  .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;
  }

  /* Booking confirmation */
  .confirmation-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
  }

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

  .confirmation-icon--error {
    background: #ffebee;
    color: #c62828;
  }

  .confirmation-details {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .confirmation-details .summary-subheading {
    font-size: 1.08rem;
    font-weight: 600;
    margin-bottom: 4px;
    margin-top: 18px;
  }

  .confirmation-details .summary-subheading:first-child {
    margin-top: 0;
  }

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

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

  .confirmation-action {
    margin-top: 24px;
  }

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

  /* ----------------------------------------------
     5a. DEBUG & DEVELOPMENT TOOLS
     ---------------------------------------------- */
  
  /* Debug symbol - floating diagnostic tool */
  .debug-symbol {
    position: fixed;
    bottom: 15px;
    left: 15px;
    width: 30px;
    height: 30px;
    background-color: var(--color-gray-200);
    border: 2px solid var(--color-gray-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    z-index: 300;
    box-shadow: var(--shadow-xs);
    transition: all 0.2s ease;
  }
  
  .debug-symbol:hover {
    transform: scale(1.1);
    background-color: var(--color-gray-300);
  }
  
  /* Diagnosis popup overlay */
  .diagnosis-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 350;
  }
  
  /* Diagnosis popup content container */
  .diagnosis-popup__content {
    background-color: var(--color-white);
    padding: 20px;
    border-radius: var(--border-radius);
    max-width: 400px;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: var(--shadow-card);
    position: relative;
  }
  
  /* Close button for diagnosis popup */
  .diagnosis-popup__close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-gray-850);
  }
  
  /* Diagnosis popup title */
  .diagnosis-popup__title {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--color-gray-950);
  }
  
  /* Diagnosis reason content display */
  .diagnosis-popup__content-text {
    background-color: var(--color-gray-150);
    padding: 12px;
    border-radius: var(--border-radius);
    font-family: monospace;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-gray-950);
    white-space: pre-wrap;
    word-break: break-word;
  }
  
  /* ----------------------------------------------
     5b. UTILITY CLASSES
     ---------------------------------------------- */
  .hidden {
    display: none;
  }

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

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

    body, html {
      overflow-x: hidden;
      overscroll-behavior-x: none;
    }

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

    button {
      width: 90px;
    }

    .main-window {
      border-left: none;
      border-right: none;
      min-height: unset;
    }

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

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

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

    .triageQuestionArea {
      margin-top: 80px;
    }

    .service-row {
      margin-left: 5px;
      margin-right: 5px;
    }

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

    .service-card--doctor {
      min-height: 220px;
    }

    .availability-nav {
      gap: unset;
      max-width: 60%;
    }

    .registration-main-row {
      flex-direction: column-reverse;
    }

    .registration-summary-col {
      max-width: 100%;
    }

    .registration-form-col {
      max-width: 100%;
    }

    .dob-inputs {
      gap: unset;
    }
  }

  @media (max-width: 600px) {
    .backButtonContainer {
      left: 8px;
      bottom: 8px;
    }
  }