/* ==========================================================================
   Booking Page Specific Styles
   ========================================================================== */

   body.booking-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background); /* Ensure consistent bg */
  }
  
  .booking-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Default: content starts after padding-top */
    flex-grow: 1;
    width: 100%;
    padding: 150px 0 40px 0; /* Top padding for nav, bottom padding */
    opacity: 0;
    transform: translateY(var(--animation-distance, 100px));
    transition: opacity var(--animation-duration, 800ms) var(--animation-easing, ease),
                transform var(--animation-duration, 800ms) var(--animation-easing, ease);
    will-change: opacity, transform;
    visibility: hidden;
  }

  .booking-wrapper.success-state-active {
    justify-content: center; /* <<<< Vertically center its direct child (.container) */
    padding-top: 40px;      /* <<<< Reduce top padding significantly */
    padding-bottom: 40px;   /* Ensure some bottom padding too */
    min-height: 100vh;      /* <<<< Make wrapper take at least full viewport height */
    box-sizing: border-box; /* Ensure padding is included in min-height calculation */
  }

  .booking-form.success-card-active {
    /* The card itself might not need much change if the wrapper handles centering */
    /* Ensure it doesn't have conflicting min-height or flex properties from other states */
    /* Any specific styles for the card in success view, if needed beyond just showing the message */
    box-shadow: var(--shadow-light); /* Keep a consistent shadow */
}

.booking-wrapper.booking-success-active {
  justify-content: center; /* Vertically center its direct child (.container) */
  /* Ensure visibility if slide-in animation didn't re-apply on Stripe return */
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}

  .booking-wrapper.slide-in-visible { /* Animation End State */
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
  
  .booking-wrapper .container { /* The main form container */
    max-width: 800px;
    width: 100%;
    padding: 0 15px; /* Add side padding here */
    margin: 0 auto 40px auto; /* Center and add bottom margin */
  }

  .loading {
    display: none; /* Hidden by default */
    text-align: center;
    padding: 40px 20px; /* More padding for visual space */
    width: 100%; /* Ensure it takes available width */
  }
  
  .loading::after {
    content: "";
    display: inline-block; /* Allows sizing */
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-grey-medium); /* Light grey border */
    border-top-color: var(--color-accent); /* Accent color for spinning part */
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  
  /* Optional: Style for grid when loading to prevent layout shifts */
  .card-grid:has(+ .loading[style*="display: block"]),
  .time-slots:has(+ .loading[style*="display: block"]) {
     min-height: 100px; /* Adjust as needed */
  }
  
  /* Override common header styles if needed for booking */
  header { text-align: center; margin-bottom: 40px; }
  header h1 {
    font-size: 70px; /* Adjusted size */
    line-height: 1.1;
    color: var(--color-primary);
    margin-bottom: 10px;
    font-weight: 400;
    font-family: var(--font-secondary);
  }
  header h1 em { font-style: italic; }
  header p { font-size: 1.1rem; color: var(--color-text-light); }
  
  .booking-form {
    background: var(--color-white);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-light);
    overflow: hidden; /* Keep this, important for border-radius on children */
    position: relative;
    transition: var(--transition-fast);
  }
  .booking-form:hover { box-shadow: var(--shadow-hover); }

  .booking-form.success-view-active {
    padding: 20px; /* Add some overall padding to the card itself */
    /* It will shrink to fit the .success-message content.
       Ensure other direct children are hidden (handled by JS and below CSS) */
  }

  .booking-form.success-view-active .steps,
.booking-form.success-view-active .mobile-progress-indicator,
.booking-form.success-view-active .form-content,
.booking-form.success-view-active #navigation-buttons { /* Using ID for nav buttons */
    display: none !important;
}
  
  /* Steps Indicator */
  .steps {
    display: flex;
    padding: 24px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    position: relative;
  }
  .steps::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    height: 2px;
    background: var(--color-accent);
    width: calc(25% * var(--step-progress, 1)); /* Controlled by JS */
    transition: width 0.3s ease;
  }
  .step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: var(--color-text-light);
    position: relative;
    cursor: pointer;
    transition: var(--transition-fast);
  }
  .step-number {
    width: 32px; height: 32px;
    border-radius: var(--border-radius-round);
    background: var(--color-grey-background);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition-fast);
    border: 2px solid transparent;
  }
  .step.active { color: var(--color-accent); }
  .step.active .step-number { background: var(--color-accent); color: var(--color-white); transform: scale(1.1); }
  .step.completed .step-number { background: var(--color-success); color: var(--color-white); }
  
  /* Form Sections */
  .form-content { padding: 0 24px 24px 24px; }
  .form-section { display: none; animation: fadeIn 0.4s ease; }
  .form-section.active { display: block; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  
  .form-section h2 {
    font-size: 1.75rem;
    color: var(--color-primary);
    margin-bottom: 24px;
    font-weight: 600;
    font-family: var(--font-secondary);
  }
  
  /* Card Grid (Stylists/Services) */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
  }
  .card { /* Booking specific card */
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-card);
    padding: 24px;
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
  }
  .card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 0; background: var(--color-accent); transition: height 0.3s ease; }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-light); border-color: var(--color-accent); }
  .card:hover::before { height: 100%; }
  .card.selected { border-color: var(--color-accent); background: var(--color-accent-light-bg); }
  .card.selected::before { height: 100%; }
  .card-title { font-family: var(--font-secondary); font-weight: 600; font-size: 1.2rem; margin-bottom: 8px; color: var(--color-primary); }
  .card-subtitle { font-size: 0.9rem; color: var(--color-accent); margin-bottom: 12px; font-weight: 500; }
  .card-description { font-size: 0.95rem; color: var(--color-text-light); line-height: 1.5; }
  
  /* Form Groups & Inputs */
  .form-group { margin-bottom: 24px; }
  .form-group label { display: block; margin-bottom: 8px; color: var(--color-primary); font-weight: 500; font-size: 0.95rem; }
  .form-group input, .form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-form);
    font-family: inherit;
    font-size: 1rem;
    transition: var(--transition-fast);
    background: var(--color-white);
  }
  .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-shadow); }
  
  /* Time Slots */
  .time-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 16px; }
  .time-slot {
    padding: 12px;
    text-align: center;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-form);
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 0.95rem;
    font-weight: 500;
    position: relative;
    background: var(--color-white);
  }
  .time-slot:hover:not(.disabled) { border-color: var(--color-accent); background: var(--color-accent-light-bg); transform: translateY(-2px); }
  .time-slot.selected { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); transform: translateY(-2px); }
  .time-slot.disabled { opacity: 0.6; cursor: not-allowed; background: var(--color-grey-hover); border: 2px dashed var(--color-border); color: var(--color-text-light); }
  
  /* Buttons */
  .btn-container { display: flex; justify-content: space-between; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-border); gap: 16px; }
  .btn { /* Booking specific button styling */
    padding: 16px 32px;
    border: none;
    border-radius: 0; /* Match theme */
    font-weight: 600; /* Slightly bolder */
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    min-width: 140px;
    font-size: 1rem;
    display: inline-block;
    text-align: center;
    font-family: var(--font-primary);
    text-transform: none; /* No uppercase needed */
  }
  .btn-primary { background-color: var(--color-accent); color: var(--color-white); }
  .btn-primary:hover:not(:disabled) { background-color: var(--color-accent-dark); }
  .btn-secondary { background-color: var(--color-grey-background); color: var(--color-text); }
  .btn-secondary:hover:not(:disabled) { background-color: var(--color-grey-medium-dark); }
  .btn:disabled { opacity: 0.7; cursor: not-allowed; }
  
  /* Success Message */
  .success-message { text-align: center; padding: 48px 32px; display: none; }
  .success-message.active {
    display: block;
    animation: fadeIn 0.4s ease;
  }
  .success-message h3 { font-size: 3rem; margin-bottom: 24px; font-family: var(--font-secondary); font-weight: 400; color: var(--color-primary); }
  .success-message h3 em { font-style: italic; }
  .success-message p { color: var(--color-text-light); margin-bottom: 32px; font-size: 1.1rem; max-width: 500px; margin-left: auto; margin-right: auto; }
  .success-message .btn {
    margin: 0 auto;
    background-color: var(--color-accent);
    color: var(--color-white);
    text-decoration: none;
    padding: 16px 32px;
    border-radius: 0;
    font-weight: 600; /* Match button style */
    font-size: 1rem;
    display: inline-block;
    text-align: center;
    min-width: 200px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    font-family: var(--font-primary);
    text-transform: none;
  }
  .success-message .btn:hover { background-color: var(--color-accent-dark); }
  
  /* Style for the dynamically inserted email in the success message */
  .success-message p span#confirmedEmailPlaceholder.dynamic-email {
    color: var(--color-accent); 
    font-weight: 600;
  }
  
  /* Loading / Validation */
  .loading { text-align: center; padding: 20px; color: var(--color-text-light); font-style: italic; }
  .validation-message { color: var(--color-error); font-size: 0.85rem; margin-top: 4px; display: none; }
  
  /* Flatpickr Customization */
  .flatpickr-calendar { border-radius: var(--border-radius-medium); box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 1px solid var(--color-border); font-family: var(--font-primary); background: var(--color-white); width: 307px; }
  .flatpickr-day { border-radius: var(--border-radius-small); color: var(--color-text); font-weight: 500; border: 1px solid transparent; }
  .flatpickr-day:hover { background: var(--color-grey-hover); border-color: var(--color-grey-hover); }
  .flatpickr-day.selected { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); font-weight: 600; }
  .flatpickr-day.today { border-color: var(--color-accent); color: var(--color-accent); font-weight: 600; }
  .flatpickr-day.flatpickr-disabled { color: var(--color-border-medium); cursor: not-allowed; }
  .flatpickr-months { padding-top: 8px; }
  .flatpickr-months .flatpickr-month { background: var(--color-white); color: var(--color-text); height: 40px; }
  .flatpickr-current-month { font-size: 1rem; font-weight: 600; padding: 0; }
  .flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--color-white); color: var(--color-text); font-weight: 600; border: none; padding: 5px; }
  .flatpickr-current-month input.cur-year { color: var(--color-text); font-weight: 600; }
  .flatpickr-weekdays { background: var(--color-white); padding-top: 8px; }
  .flatpickr-weekday { background: var(--color-white); color: var(--color-text-light); font-weight: 500; font-size: 0.9rem; }
  .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { fill: var(--color-text); padding: 8px; top: 5px; }
  .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--color-accent); }
  .flatpickr-time { border-top: 1px solid var(--color-border); }
  .flatpickr-time input.flatpickr-hour, .flatpickr-time input.flatpickr-minute { font-weight: 500; color: var(--color-text); }
  .flatpickr-time .flatpickr-am-pm { color: var(--color-text); font-weight: 500; }
  .numInputWrapper:hover { background: var(--color-grey-hover); }
  .numInputWrapper span.arrowUp, .numInputWrapper span.arrowDown { border-left: 1px solid var(--color-border); }
  .numInputWrapper span.arrowUp:after { border-bottom-color: var(--color-text-light); }
  .numInputWrapper span.arrowDown:after { border-top-color: var(--color-text-light); }
  #date { cursor: pointer; }
  
  /* Media Queries for Booking Specifics */
  @media screen and (max-width: 991px) {
      header h1 { font-size: 60px; /* Adjust */ }
      .steps { padding: 16px; }
      .step span { display: none; } /* Hide step text */
      .card-grid { grid-template-columns: 1fr; } /* Stack cards */
      .btn-container { flex-direction: column; }
      .btn { width: 100%; }
  }
  
  @media screen and (max-width: 767px) {
      header h1 { font-size: 50px; }
      .booking-wrapper { padding-top: 120px; } /* Adjust for smaller nav */
  }
 
  /* --- START: Premium Mobile Refinements (max-width: 479px) --- */
@media screen and (max-width: 479px) {
  /* Reduce overall page padding for more content space */
  .booking-wrapper {
      padding-top: 80px; /* Slightly less padding */
      padding-bottom: 20px;
  }
  .booking-wrapper .container {
      padding: 0 10px; /* Reduce side padding */
  }

  /* Intro text adjustments */
  .info.margin-bottom {
      margin-bottom: 30px; /* Tighter spacing */
  }
  .info .section-heading {
      font-size: 32px; /* More appropriate size */
      line-height: 1.2;
      margin-bottom: 15px;
  }
  .info .paragraph-dark {
      font-size: 14px;
      line-height: 1.6;
  }

  /* --- Hide Original Steps & Style New Progress Indicator --- */
  .steps {
      display: none; /* Hide the original step indicator */
  }

  .mobile-progress-indicator {
      display: block; /* Show only on mobile */
      padding: 15px 10px 20px 10px; /* Padding around indicator */
      margin-bottom: 20px; /* Space below indicator */
      background-color: var(--color-white); /* Match form background */
       /* No border needed if part of the form card */
  }

  .step-info-text {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--color-primary);
      margin-bottom: 10px;
      text-align: center; /* Center the text */
  }

  .progress-bar-outer {
      height: 8px; /* Slightly thicker bar */
      background-color: var(--color-grey-background);
      border-radius: 4px;
      overflow: hidden;
      width: 100%; /* Full width */
      margin: 0 auto; /* Center if needed */
  }

  .progress-bar-inner {
      height: 100%;
      width: 25%; /* Initial width for step 1 */
      background-color: var(--color-accent);
      border-radius: 4px;
      transition: width 0.4s ease;
  }
  /* --- End New Progress Indicator Styles --- */

  /* --- Premium Form Section Titles --- */
  .form-section h2 {
      font-size: 1.4rem; /* Adjust size */
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--color-border); /* Add subtle separator */
  }

  /* --- Premium Card Styling --- */
  .card-grid {
      gap: 16px; /* Slightly tighter gap */
  }
  .card {
      padding: 20px; /* More internal padding */
      border: 1px solid var(--color-border); /* Thinner border */
      border-radius: var(--border-radius-large); /* More rounded */
      background-color: var(--color-white);
      box-shadow: none; /* Remove base shadow */
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .card::before {
      display: none; /* Remove side border effect */
  }
  .card:hover {
      transform: none; /* Disable hover transform */
      border-color: var(--color-accent);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); /* Subtle hover shadow */
  }
  .card.selected {
      border-color: var(--color-accent);
      background-color: var(--color-accent-light-bg);
      box-shadow: 0 4px 10px rgba(209, 73, 111, 0.1); /* Clearer selected shadow */
  }
  .card-title {
      font-size: 1.1rem; /* Slightly larger */
      margin-bottom: 6px;
  }
  .card-subtitle {
      font-size: 0.85rem; /* Adjust size */
      margin-bottom: 10px;
  }
  .card-description {
      font-size: 0.9rem; /* Slightly larger */
      line-height: 1.5;
      color: var(--color-text); /* Darker description */
  }

  /* --- Premium Form Inputs --- */
   .form-group label {
      font-size: 0.9rem;
      margin-bottom: 6px;
  }
  .form-group input, .form-group textarea {
      height: 50px; /* Compact height */
      padding: 10px 15px; /* Adjust padding */
      font-size: 0.95rem;
      border-width: 1px; /* Thinner border */
      border-radius: var(--border-radius-medium); /* Match card radius */
  }
  .form-group textarea {
      height: 120px; /* Adjust textarea height */
      padding-top: 10px;
  }

  /* --- Premium Time Slots --- */
  .time-slots {
      grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); /* Adjust minmax */
      gap: 10px;
  }
  .time-slot {
      padding: 12px 8px; /* Adjust padding */
      font-size: 0.9rem;
      border-width: 1px;
      border-radius: var(--border-radius-medium);
  }
  .time-slot.selected {
      transform: none; /* Disable transform */
      box-shadow: inset 0 0 0 2px var(--color-accent); /* Use inset shadow for selection */
  }
   .time-slot.disabled {
       border-style: solid; /* Use solid border for disabled */
       border-color: var(--color-border);
   }

  /* --- Premium Buttons (Separator Removed) --- */
  .btn-container {
      margin-top: 24px;
      padding-top: 20px;
      gap: 12px;
      border-top: none; /* <<<< REMOVED SEPARATOR */
  }
  .btn {
      padding: 14px 20px; /* Adjust padding */
      font-size: 0.95rem;
      border-radius: var(--border-radius-medium); /* Match input radius */
  }

  /* --- Premium Success Message --- */
  .success-message {
      padding: 30px 15px;
  }
  .success-message h3 {
      font-size: 2rem; /* Adjust size */
      margin-bottom: 15px;
  }
  .success-message p {
      font-size: 0.95rem; /* Adjust size */
      margin-bottom: 25px;
  }
  .success-message p span#confirmedEmailPlaceholder.dynamic-email {
      /* This style is now global */
  }
   .success-message .btn {
       padding: 14px 24px;
       border-radius: var(--border-radius-medium);
   }

  /* Adjust flatpickr size if needed */
  .flatpickr-calendar {
      width: auto; /* Allow natural width */
      max-width: calc(100vw - 20px); /* Prevent overflow */
  }

  /* Loading Indicator */
   .loading::after {
       width: 30px;
       height: 30px;
       border-width: 3px;
   }
   .card-grid:has(+ .loading[style*="display: block"]),
   .time-slots:has(+ .loading[style*="display: block"]) {
      min-height: 80px; /* Adjust min height */
   }

   /* Ensure validation messages are styled */
   .validation-message {
       margin-top: 6px;
       font-size: 0.8rem;
   }

   /* Hide new progress indicator on larger screens */
   .mobile-progress-indicator {
       display: block;
   }

} /* End 479px */

/* Ensure mobile progress indicator is hidden on larger screens */
@media screen and (min-width: 480px) {
  .mobile-progress-indicator {
      display: none;
  }
  /* Ensure original steps are visible */
  .steps {
      display: flex;
  }
}

/* --- END: Premium Mobile Refinements (max-width: 479px) --- */