/**
 * Online Scheduling Styles
 * SmartStart Inc. - Appointment Booking System
 */

/* Import Montserrat Font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* Container Layout - Full Screen Design for steps 1 & 2 */
.scheduling-container {
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background: #FFFFFF;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    border-radius: 0;
    box-shadow: none;
}

/* Step 3: Normal WordPress page layout */
body.step-3-active .scheduling-container {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    z-index: auto !important;
}

.scheduling-inner-wrapper {
    display: flex;
    max-width: 1400px;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

/* Force full-screen layout for scheduling page steps 1 & 2 */
body.page-template-page-online-scheduling:not(.step-3-active) {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

/* Step 3: Allow normal WordPress page layout */
body.page-template-page-online-scheduling.step-3-active {
    margin: auto !important;
    padding: auto !important;
    overflow-x: auto !important;
}

/* Hide WordPress theme header, footer, and spacing elements for steps 1 & 2 only */
body.page-template-page-online-scheduling:not(.step-3-active) #header,
body.page-template-page-online-scheduling:not(.step-3-active) #header_meta,
body.page-template-page-online-scheduling:not(.step-3-active) #header_main,
body.page-template-page-online-scheduling:not(.step-3-active) #header_main_alternate,
body.page-template-page-online-scheduling:not(.step-3-active) .main_menu,
body.page-template-page-online-scheduling:not(.step-3-active) .sub_menu,
body.page-template-page-online-scheduling:not(.step-3-active) #footer,
body.page-template-page-online-scheduling:not(.step-3-active) .footer_color,
body.page-template-page-online-scheduling:not(.step-3-active) #socket,
body.page-template-page-online-scheduling:not(.step-3-active) .socket_color,
body.page-template-page-online-scheduling:not(.step-3-active) .title_container,
body.page-template-page-online-scheduling:not(.step-3-active) .breadcrumb,
body.page-template-page-online-scheduling:not(.step-3-active) #wpadminbar {
    display: none !important;
}

/* Remove spacing from avia_title() output and containers for steps 1 & 2 */
body.page-template-page-online-scheduling:not(.step-3-active) .container_wrap_first,
body.page-template-page-online-scheduling:not(.step-3-active) .main_color {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.page-template-page-online-scheduling:not(.step-3-active) #top,
body.page-template-page-online-scheduling:not(.step-3-active) #wrap_all,
body.page-template-page-online-scheduling:not(.step-3-active) .container_wrap,
body.page-template-page-online-scheduling:not(.step-3-active) .container_wrap .container,
body.page-template-page-online-scheduling:not(.step-3-active) .template-page.content {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* Ensure the scheduling container creates proper stacking context */
.scheduling-container {
    contain: layout style !important;
    isolation: isolate !important;
}

/* Step 3: Normal page layout - remove fixed heights and positioning */
body.step-3-active .scheduling-inner-wrapper {
    height: auto !important;
    flex-direction: row !important; /* Ensure horizontal layout on desktop */
}

/* Ensure desktop two-column layout for step 3 */
@media screen and (min-width: 1025px) {
    body.step-3-active .scheduling-inner-wrapper {
        flex-direction: row !important;
        display: flex !important;
        position: relative !important;
    }
    
    /* Extend light blue background to left edge of viewport */
    body.step-3-active .scheduling-inner-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        right: 100%; /* Position at the left edge of the container */
        width: 100vw; /* Extend far to the left */
        height: 100%;
        background: #F5F9FF;
        z-index: -1;
    }
    
    body.step-3-active .scheduling-main-panel {
        flex: 1 !important;
        width: auto !important;
        position: relative;
        z-index: 1;
        padding-left: 0 !important;
    }
    
    body.step-3-active .booking-summary {
        width: 600px !important;
        flex: none !important;
        position: relative;
        z-index: 1;
    }
    
    /* Remove top padding from main template page on desktop */
    body.page-template-page-online-scheduling main.template-page {
        padding-top: 0 !important;
    }
}

body.step-3-active .scheduling-main-panel {
    height: auto !important;
    min-height: auto !important;
}

body.step-3-active .booking-summary {
    height: auto !important;
    min-height: auto !important;
}

/* Main Panel - Left Side */
.scheduling-main-panel {
    flex: 1; /* Flexible width - takes remaining space after right panel */
    background: #F5F9FF;
    /* Padding to match Figma design */
    padding: 72px 24px 0px 70px;
    display: flex;
    flex-direction: column;
    /* Reduce vertical spacing to match Figma design */
    gap: 24px;
    overflow-y: auto; /* Allow vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    height: 100vh; /* Full viewport height */
    flex-shrink: 0;
    position: relative;
}

/* Extend left panel background to viewport edge */
.scheduling-main-panel::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: calc(100vw - 50vw - 140px);
    height: 100vh;
    background: #F5F9FF;
    z-index: -1;
}

/* On smaller screens, use simpler background */
@media (max-width: 1400px) {
    .scheduling-main-panel::before {
        display: none;
    }
}

/* Header Section */
.scheduling-header {
    width: 100%;
    max-width: 630px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
}

.scheduling-logo {
    display: flex;
    align-items: center;
    gap: 12px; /* Figma gap */
}

.scheduling-logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.scheduling-logo a:hover {
    text-decoration: none;
}

.scheduling-logo img {
    height: 23px; /* Figma height */
    width: auto;
}

.scheduling-logo .tagline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 16px;
    color: #0B213B;
    letter-spacing: normal;
    text-align: center;
}

/* Progress Indicators */
.progress-indicators {
    position: relative;
    width: 100%;
    max-width: 580px;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
}

/* horizontal progress bar - default: gray first half, nothing second half */
.progress-indicators::before {
    content: "";
    position: absolute;
    top: 20px; /* center of 40px circle */
    left: 40px; /* start after first circle */
    right: 40px; /* end before last circle */
    height: 4px;
    background: linear-gradient(to right, #949494 0% 50%, transparent 50% 100%);
    z-index: 0;
}

/* dashed line for second half - always visible unless overridden */
.progress-indicators::after {
    content: "";
    position: absolute;
    top: 18px; /* center minus half of border width */
    left: 50%;
    right: 40px; /* end before last circle */
    height: 0;
    border-top: 4px dashed #949494;
    z-index: 0;
}

/* completed segment overlay */
.progress-indicators.completed-1::before {
    background: linear-gradient(to right, #00B67A 0% 50%, #949494 50% 100%);
}

.progress-indicators.completed-1::after {
    display: none;
}

.progress-indicators.completed-2::before {
    background: linear-gradient(to right, #00B67A 0% 100%, #949494 100% 100%);
}

.progress-indicators.completed-2::after {
    display: none;
}

.progress-indicators.completed-3::before {
    background: #00B67A;
}

.progress-indicators.completed-3::after {
    display: none;
}

.step-ui {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: auto;
    z-index: 1;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Default (inactive) step: solid grey circle, no stroke */
    border: none;
    background: #949494;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.step-circle span {
    font-size: 14px;
    font-weight: 700;
    color: #000000;
}

.step-ui.active .step-circle {
    background: #FFFFFF;
    border: 2px solid #00B67A;
    box-shadow: 0 2px 8px rgba(0, 182, 122, 0.3);
}

/* Active step number color */
.step-ui.active .step-circle span {
    color: #00B67A;
    font-weight: 700;
}

.step-ui.completed .step-circle {
    background: #00B67A;
    border: none;
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 182, 122, 0.3);
}

.step-ui.completed .step-circle span {
    color: #000000;
}

.step-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    color: #667085;
    text-align: center;
    white-space: nowrap;
}

.step-ui.active .step-name {
    font-weight: 700;
    color: #000000;
    text-decoration: underline;
}

.step-ui.completed .step-name {
    color: #00B67A;
    font-weight: 700;
    text-decoration: none;
}

/* Step Content */
.scheduling-step {
    display: none;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 705px;
}

.scheduling-step.active {
    display: flex;
}

/* Contact Information and other step titles - match Figma size */
.step-title,
h2.step-title,
.scheduling-step h2,
.scheduling-main-panel h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: normal !important;
    font-size: 24px !important;
    line-height: 1.4 !important;
    letter-spacing: -0.456px !important;
    color: #000000 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Form Styling - Updated for Gravity Forms */
.scheduling-form,
.gravity-form-container .gform_wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 640px;
    margin: 0;
}

.form-field,
.gravity-form-container .gfield {
    position: relative;
    margin: 0 !important;
}

.gform_wrapper form .gform_body .gform_fields fieldset  .ginput_container  {
    margin-bottom: 20px !important;
}

/* Hide Gravity Forms labels since we're using placeholders */
.gravity-form-container .gfield_label {
    display: none !important;
}

/* Form Input Styling - Consolidated */
.gravity-form-container input[type="text"],
.gravity-form-container input[type="email"],
.gravity-form-container input[type="tel"],
.gravity-form-container input[type="number"],
.gravity-form-container textarea,
.gravity-form-container select {
    width: 100% !important;
    height: 72px !important;
    margin: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid #595959 !important;
    border-radius: 12px !important;
    padding: 24px 10px 24px 24px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #0A0A0A !important;
    box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25) !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.gravity-form-container input::placeholder,
.gravity-form-container textarea::placeholder,
.gravity-form-container select::placeholder {
    color: #474747 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    opacity: 1 !important;
}

.gravity-form-container input:focus,
.gravity-form-container textarea:focus,
.gravity-form-container select:focus {
    outline: none !important;
    border-color: #00B67A !important;
    box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(0, 182, 122, 0.1) !important;
}

/* Hide Gravity Forms default styling and elements */
.gravity-form-container .gform_wrapper {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    gap: 0 !important;
}

.gravity-form-container .gform_wrapper .gform_body {
    padding: 0 !important;
    margin: 0 !important;
}

.gravity-form-container .gform_wrapper .gform_fields {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 640px !important;
}

.gravity-form-container .gform_wrapper .gfield {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    position: relative !important;
    width: 100% !important;
    max-width: 640px !important;
}

/* Create a single column layout for proper field positioning - Match Figma Design */
.gravity-form-container .gform_wrapper .gform_fields {
    display: block !important;
    width: 100% !important;
    max-width: 640px !important;
    position: relative !important;
    height: 480px !important; /* 5 fields × 96px spacing */
}

/* Field Layout per Figma Design - All fields stacked vertically:
   Row 1: First Name (full width)
   Row 2: Last Name (full width) 
   Row 3: Phone Number (full width)
   Row 4: ZIP Code (full width)
   Row 5: Email (full width)
*/

/* All fields - Full Width stacked vertically with absolute positioning */
.gravity-form-container .gfield_id_80_7,
.gravity-form-container .gfield_id_80_96,
.gravity-form-container .gfield_id_80_4,
.gravity-form-container .gfield_id_80_8,
.gravity-form-container .gfield_id_80_2 {
    width: 100% !important;
    max-width: 640px !important;
    position: absolute !important;
    left: 0 !important;
    grid-column: unset !important; /* Override grid-column: span 6 */
}

/* Override theme grid layout for form fields */
.scheduling-container .gravity-form-container .gfield {
    grid-column: unset !important;
    grid-column-start: unset !important;
    grid-column-end: unset !important;
    grid-template-columns: unset !important;
    display: block !important;
}

/* Field order per Figma Design - Using absolute positioning to force correct order */
.gravity-form-container .gform_wrapper .gform_body .gform_fields .gfield_id_80_7,
.gravity-form-container .gfield_id_80_7 {
    order: 1 !important; /* First Name */
    top: 0px !important;
    z-index: 5 !important;
}

.gravity-form-container .gform_wrapper .gform_body .gform_fields .gfield_id_80_96,
.gravity-form-container .gfield_id_80_96 {
    order: 2 !important; /* Last Name */
    top: 96px !important;
    z-index: 4 !important;
}

.gravity-form-container .gform_wrapper .gform_body .gform_fields .gfield_id_80_4,
.gravity-form-container .gfield_id_80_4 {
    order: 3 !important; /* Phone Number */
    top: 192px !important;
    z-index: 3 !important;
}

.gravity-form-container .gform_wrapper .gform_body .gform_fields .gfield_id_80_8,
.gravity-form-container .gfield_id_80_8 {
    order: 4 !important; /* Zip Code */
    top: 288px !important;
    z-index: 2 !important;
}

.gravity-form-container .gform_wrapper .gform_body .gform_fields .gfield_id_80_2,
.gravity-form-container .gfield_id_80_2 {
    order: 5 !important; /* Email Address */
    top: 384px !important;
    z-index: 1 !important;
}

/* Ensure Gravity Forms input containers don't add extra styling */
.gravity-form-container .gfield .ginput_container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.gravity-form-container .gfield .ginput_container_text,
.gravity-form-container .gfield .ginput_container_email,
.gravity-form-container .gfield .ginput_container_phone,
.gravity-form-container .gfield .ginput_container_number {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Hide Gravity Forms footer and submit button initially */
.gravity-form-container .gform_footer {
    display: none !important;
}

/* Show submit button on step 2 when needed for final submission */
#step-2.active .gravity-form-container .gform_footer {
    display: none !important; /* Keep hidden - we use custom continue button */
}

/* Style Gravity Forms validation messages for wizard */
.gravity-form-container .gfield_validation_message,
.gravity-form-container .validation_message {
    display: block !important;
    color: #E92E2E !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-top: 8px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

/* Style error fields */
.gravity-form-container .gfield_error input {
    border-color: #E92E2E !important;
    border-width: 2px !important;
    box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(233, 46, 46, 0.2) !important;
}

/* Hide any required field indicators */
.gravity-form-container .gfield_required {
    display: none !important;
}

/* Style hidden fields to be truly hidden */
.gravity-form-container .gfield_visibility_hidden {
    display: none !important;
}

/* Hide Spanish language checkbox field (ID 220) in scheduling form */
.gravity-form-container .gfield_id_220,
.gravity-form-container #field_80_220,
.gravity-form-container .gfield.gfield_id_220,
.gform_wrapper .gfield_id_220,
#gform_80 .gfield_id_220,
#gform_80 #field_80_220,
.scheduling-container .gfield_id_220,
.scheduling-container #field_80_220 {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide fast-track fieldsets in scheduling form */
.gravity-form-container fieldset.fast-track-footer,
.gravity-form-container fieldset.fast-track-fields,
.scheduling-container fieldset.fast-track-footer,
.scheduling-container fieldset.fast-track-fields,
#gform_80 fieldset.fast-track-footer,
#gform_80 fieldset.fast-track-fields,
.gform_wrapper fieldset.fast-track-footer,
.gform_wrapper fieldset.fast-track-fields {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure error fields have proper spacing */
.gravity-form-container .gfield_error {
    margin-bottom: 16px !important;
}

/* Ensure clean Gravity Forms styling */
.gravity-form-container .gform_wrapper .gform_body .gform_fields .gfield {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.gravity-form-container .gform_wrapper .gform_body .gform_fields {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: none !important;
    border: none !important;
}

/* FAQ Section - Updated to match Figma design */
.faq-section {
    margin-top: 0px;
    width: 100%;
    max-width: 630px;
    position: relative;
}

/* FAQ title - same size as Contact Information but different color */
.faq-section .faq-title,
h3.faq-title,
.scheduling-main-panel .faq-section h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: normal !important;
    font-size: 24px !important;
    line-height: 1.4 !important;
    letter-spacing: -0.456px !important;
    color: #326FC7 !important;
    margin: 0 0 24px 0 !important;
}

.faq-items {
    display: flex;
    flex-direction: column;
    position: relative;
}

.faq-item {
    position: relative;
    border: none;
}

.faq-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #E5E5E5;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    position: relative;
}

.faq-question span:first-child {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 2.5;
    letter-spacing: -0.342px;
    color: #374151;
    flex: 1;
    margin: 0;
}

.faq-toggle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 2.5;
    letter-spacing: -0.342px;
    color: #4691BC;
    margin-left: 1rem;
    transition: transform 0.3s ease;
    position: absolute;
    right: 0;
    top: 8px;
}

.faq-answer {
    display: none;
    padding: 0 0 8px 0;
}

.faq-answer p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.304px;
    color: #374151;
    margin: 0;
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
}

/* Booking Summary Sidebar - Right Side */
.booking-summary {
    position: relative;
    top: 0;
    width: 600px; /* Fixed width to match Figma design */
    background: #FFFFFF;
    padding: 128px 40px 120px 24px; /* Increased bottom padding for button space */
    display: flex;
    flex-direction: column;
    gap: 32px;
    height: 100vh;
    max-height: 100vh;
    min-height: 600px; /* Ensure minimum height for button positioning */
    overflow-y: auto;
    z-index: 5;
    /* Removed dividing border for cleaner look per Figma */
    border-left: none;
    align-self: flex-start;
}

/* Extend right panel background to viewport edge */
.booking-summary::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    left: calc(50% + (1400px * 0.6 / 2));
    height: 100vh;
    background: #FFFFFF;
    z-index: -1;
}

/* On smaller screens, use simpler background */
@media (max-width: 1400px) {
    .booking-summary::before {
        display: none;
    }
}

/* Map Container - positioned at the level of Booking Summary text */
.booking-map-container {
    position: absolute;
    top: 0;
    right: 0px;
    width: 200px;
    height: 148px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.booking-map {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

/* Location Information Section */
.location-info-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 0 !important;
    padding-bottom: 24px;
}

/* Specific overrides for booking summary elements */
.booking-summary #selected-location-name {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    line-height: 150% !important;
    letter-spacing: -0.02em !important;
    color: #000000 !important;
    margin: 0 !important;
    max-width: 240px;
}

.booking-summary #selected-location-address {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 150% !important;
    letter-spacing: -0.02em !important;
    color: #000000 !important;
    margin: 0 !important;
}

.booking-summary #contact-shop-link {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 150% !important;
    letter-spacing: -0.02em !important;
    color: #000000 !important;
    text-decoration: underline !important;
    display: inline-block !important;
    margin: 0 !important;
}

.booking-summary #contact-shop-link:hover {
    color: #000000 !important;
    text-decoration: underline !important;
}

.location-distance {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 12px;
    color: #0F0F0F;
    margin: 0;
}

.location-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.location-marker {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
}

/* Force booking summary location marker to always be selected (green) */
.booking-summary .location-marker .location-number {
    background-image: url('../images/online-scheduling/location-selected.svg') !important;
}

.location-marker .location-number {
    width: 32px;
    height: 40px;
    background-image: url('../images/online-scheduling/location-selected.svg');
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 1;
    flex-shrink: 0;
    padding-left: 7px;
    padding-bottom: 11px;
}

/* Unselected location marker state */
.location-marker.unselected .location-number {
    background-image: url('../images/online-scheduling/location-unselected.svg');
}

/* Selected location marker state */
.location-marker.selected .location-number {
    background-image: url('../images/online-scheduling/location-selected.svg');
}

.location-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0;
    flex: 1;
}

.location-address {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0;
}

.contact-shop {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: -0.02em;
    color: #000000;
    text-decoration: underline;
    display: inline-block;
    margin: 0;
}

.contact-shop:hover {
    text-decoration: underline;
    color: #000000;
}

.summary-header {
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
}

.booking-summary .summary-header h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: normal !important;
    font-size: 24px !important;
    line-height: 150% !important;
    letter-spacing: -0.02em !important;
    color: #000000 !important;
    margin: 0 !important;
}

.location-status {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5em;
    letter-spacing: -1.9%;
    color: #000000;
}

.summary-details {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #E5E5E5 !important;
    margin-top: 0;
}

.summary-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 24px 0;
    gap: 80px;
}

.summary-row:not(:last-child) {
    border-bottom: 1px solid #E5E5E5;
}

.summary-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.02em;
    color: #000000;
    min-width: 134px;
    flex-shrink: 0;
}

.summary-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: -0.02em;
    color: #000000;
    text-align: left;
}

/* Only apply styling when content contains a real date, not "TBD" */
#selected-datetime[data-has-date="true"] {
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 2px !important;
}

/* Continue Button - Updated to match Figma design with smooth responsive positioning */
.continue-button {
    position: absolute;
    bottom: max(40px, calc(100vh - 940px));
    right: 0px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #00B67A;
    border: 1px solid #00B67A;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.continue-button span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #000000;
}

.chevron-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chevron-icon svg {
    color: #000000;
    width: 14px;
    height: 25px;
}

.continue-button:hover {
    background: #00B67A;
    border: 1px solid #00B67A;
}

.continue-button:hover span,
.continue-button:hover .chevron-icon svg {
    color: #000000;
}

.continue-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #9CA3AF;
}

/* Continue Button - Updated with smooth responsive positioning */
.continue-button {
    bottom: max(40px, calc(100vh - 940px));
}

/* Continue Button - Adjust min bottom when location is selected (booking summary is taller) */
.booking-summary.location-selected .continue-button {
    bottom: max(-150px, calc(100vh - 940px)) !important;
}

/* Go Back Button - Updated with smooth responsive positioning */
.go-back-button {
    position: absolute;
    bottom: max(40px, calc(100vh - 940px));
    left: 0px;
    margin-left: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid #00B67A;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #3A3A3A;
}

/* Go Back Button - Adjust min bottom when location is selected (booking summary is taller) */
.booking-summary.location-selected .go-back-button {
    bottom: max(-150px, calc(100vh - 940px)) !important;
}

.go-back-button .chevron-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.go-back-button .chevron-icon svg {
    color: inherit;
    width: 14px;
    height: 25px;
}

/* Location Results */
.location-results {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

/* Step 2: Location Selection Styles */

/* Override flex direction for step 2 to allow horizontal layout */
#step-2.scheduling-step.active {
    display: block !important;
}

/* Create a flex container for title and search */
/* Desktop Step 2 Title and ZIP Search Layout */
#step-2 .step-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.38px !important;
    color: #000000 !important;
    margin: 0 24px 0 0 !important;
    padding-bottom: 45px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: inline-block;
    vertical-align: middle;
    width: 180px;
    white-space: nowrap;
}

.zipcode-search-container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 220px);
    margin-bottom: 30px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure location results appear below the title/search row */
#step-2 .location-results {
    clear: both;
    display: block;
    width: 100%;
}

.zipcode-search {
    width: 100%;
    height: 72px;
    padding: 24px 60px 24px 24px !important;
    border: 1px solid #595959;
    border-radius: 12px !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700 !important;
    font-size: 16px;
    line-height: 24px;
    color: #474747 !important;
    background: #FFFFFF;
    box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.zipcode-search:focus {
    border-color: #00B67A;
    box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(0, 182, 122, 0.1);
}

.search-icon {
    position: absolute;
    right: 24px;
    top: 45% !important;
    transform: translateY(-50%) !important;
    pointer-events: none;
    width: 24px;
    height: 24px;
    color: #949494;
    opacity: 0.8;
}

/* Updated location card styles for Step 2 */
#step-2 .location-card {
    border: none;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    background: #FFFFFF;
    padding: 24px;
    margin-bottom: 24px;
    transition: box-shadow 0.2s ease, border 0.2s ease;
}

#step-2 .location-card:hover {
    box-shadow: 0 4px 12px rgba(0, 182, 122, 0.2);
}

#step-2 .location-card.selected {
    border: 2px solid #00B67A;
    background: #FFFFFF;
}

#step-2 .distance-line {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    color: #0F0F0F;
    margin-bottom: 4px;
}

.location-header-with-marker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

#step-2 .location-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: #000000;
    margin: 0;
    flex: 1;
}

/* Legacy styles - replaced by location-details-row */

#step-2 .select-location-btn {
    display: block;
    width: 240px;
    padding: 8px 12px;
    border: 1px solid #00B67A;
    border-radius: 32px;
    background: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 12px;
    color: #0F0F0F;
    text-align: center;
    text-transform: capitalize;
    cursor: pointer;
    transition: all 0.2s ease;
}

#step-2 .select-location-btn:hover {
    background: #00B67A;
    color: #FFFFFF;
}

/* Legacy styles - replaced by location-details-row */

#step-2 .status-text.open {
    color: #00B67A;
}

#step-2 .status-text.closed {
    color: #E92E2E;
}

/* 3-Column Location Details Layout */
#step-2 .location-details-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin: 16px 0 20px 0;
}

#step-2 .location-address-col {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 0 0 27%;
}

#step-2 .location-service-col {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 0 0 48%;
}

#step-2 .location-phone-col {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 0 0 25%;
}

#step-2 .location-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Hide inline SVG content */
#step-2 .location-icon svg,
#step-2 .location-icon path,
#step-2 .location-icon * {
    display: none !important;
}

#step-2 .location-address-col .location-icon {
    background-image: url('../images/online-scheduling/map.svg');
}

#step-2 .location-service-col .location-icon {
    background-image: url('../images/online-scheduling/car.svg');
}

#step-2 .location-phone-col .location-icon {
    background-image: url('../images/online-scheduling/phone.svg');
}

#step-2 .location-address-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    color: #0F0F0F;
}

#step-2 .service-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#step-2 .service-type {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #000000;
}

#step-2 .service-hours {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #000000;
}

#step-2 .service-hours.open {
    color: #000000;
}

#step-2 .service-hours.closed {
    color: #000000;
}



/* Bold formatting for status text only */
#step-2 .service-hours .status-open,
#step-2 .service-hours .status-closed,
#step-2 .service-hours strong {
    font-weight: 700;
    color: #000000;
}

/* Normal weight for time information */
#step-2 .service-hours .time-info {
    font-weight: 400;
    color: #000000;
}

#step-2 .location-phone-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #000000;
}

/* Grey Separator Line - Only show when selected */
#step-2 .location-separator {
    width: 100%;
    height: 1px;
    background-color: #E5E5E5;
    margin: 20px 0;
    display: none;
}

#step-2 .location-card.selected .location-separator {
    display: block;
}

/* Appointment Scheduling Section */
.appointment-scheduling {
    margin-top: 20px;
}

.appointment-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px !important;
    line-height: 1.4;
    color: #0F0F0F;
    margin: 0 0 20px 0;
    margin-bottom: 20px !important;
}

.date-selection {
    position: relative;
    margin-bottom: 20px;
    max-width: 512px;
}

.date-input-wrapper {
    position: relative;
}

.appointment-date-input {
    width: 100%;
    height: 72px;
    padding: 24px 60px 24px 24px !important;
    border: 1px solid #595959;
    border-radius: 12px !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700 !important;
    font-size: 16px;
    line-height: 24px;
    color: #474747 !important;
    background: #FFFFFF;
    box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    outline: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.appointment-date-input::placeholder {
    color: #474747;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
}

.appointment-date-input:focus,
.appointment-date-input:not(:placeholder-shown) {
    border-color: #00B67A;
    box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(0, 182, 122, 0.1);
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-thickness: 2px !important;
    text-decoration-color: #474747 !important;
}

/* Custom Flatpickr Styling */
.flatpickr-calendar {
    width: 350px;
    border-radius: 12px;
    border: 1px solid #D0D5DD;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    font-family: 'Montserrat', sans-serif;
}

/* Force hide any dropdown arrows or selectors */
.flatpickr-calendar .arrowUp,
.flatpickr-calendar .arrowDown,
.flatpickr-calendar .flatpickr-monthDropdown-month,
.flatpickr-calendar .flatpickr-month select,
.flatpickr-calendar .flatpickr-month .flatpickr-monthDropdown-months {
    display: none !important;
}

/* Override default positioning */
.flatpickr-calendar .flatpickr-current-month {
    left: 0 !important;
    right: auto !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    position: static !important;
}

/* Force navigation to the right */
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    position: relative !important;
}

.flatpickr-months {
    padding: 20px;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.flatpickr-month {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    padding-top: 20px;
}

.flatpickr-current-month {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #000000;
    display: flex;
    align-items: center;
    position: static;
    width: auto;
    transform: none;
}

.flatpickr-current-month .numInputWrapper {
    display: none !important;
}

.flatpickr-current-month input.cur-year {
    display: none !important;
}

.flatpickr-monthDropdown-months {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #000000;
    background: transparent;
    border: none;
    appearance: none;
    cursor: default;
    pointer-events: none;
}

/* Ensure month text is displayed as plain text */
.flatpickr-current-month .flatpickr-monthDropdown-months::after {
    content: none !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    border: none !important;
    outline: none !important;
    cursor: default !important;
    background: none !important;
}

/* Force the month span to show */
.flatpickr-current-month span.cur-month {
    display: inline !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #000000;
}

.flatpickr-month-nav {
    display: flex;
    gap: 8px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.flatpickr-prev-month,
.flatpickr-next-month {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B7280;
    transition: all 0.2s ease;
    position: static;
    transform: none;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: #F3F4F6;
    color: #000000;
}

.flatpickr-weekdays {
    background: transparent;
    border: none;
    border-bottom: none;
    margin-bottom: 0;
}

.flatpickr-weekday {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #6B7280;
    text-align: center;
    padding: 12px 0;
    border: none;
    margin: 0;
}

.flatpickr-days {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    border: 1px solid #E5E7EB;
    border-top: none;
}

.flatpickr-day {
    width: 50px;
    height: 50px;
    border-radius: 0;
    border-right: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
    border-left: none;
    border-top: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.flatpickr-day:nth-child(7n) {
    border-right: none;
}

.flatpickr-day:hover {
    background: #F3F4F6;
    color: #000000;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #00B67A;
    color: #FFFFFF;
    border-color: #00B67A;
    border-radius: 50%;
    border: 2px solid #00B67A;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: #009961;
    border-color: #009961;
}

.flatpickr-day.today {
    border: 2px solid #00B67A;
    color: #00B67A;
    background: transparent;
    border-radius: 50%;
}

.flatpickr-day.today:hover {
    background: #F0FDF4;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #D1D5DB;
    background: #F9FAFB;
}

.flatpickr-day.disabled,
.flatpickr-day.flatpickr-disabled {
    color: #D1D5DB !important;
    background: #F9FAFB !important;
    cursor: not-allowed !important;
    text-decoration: line-through;
}

.flatpickr-day.disabled:hover,
.flatpickr-day.flatpickr-disabled:hover {
    background: #F9FAFB !important;
    color: #D1D5DB !important;
}



.calendar-icon {
    position: absolute;
    right: 24px;
    top: 45% !important;
    transform: translateY(-50%) !important;
    width: 24px;
    height: 24px;
    background-image: url('../images/online-scheduling/calendar.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 2;
    color: #949494;
    opacity: 0.8;
}

.calendar-icon svg,
.calendar-icon path,
.calendar-icon rect,
.calendar-icon line {
    display: none !important;
}

.calendar-icon * {
    display: none !important;
}

.time-selection {
    display: flex;
    gap: 12px;
}

.time-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    padding: 16px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    background: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: #344054;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.time-option:hover {
    border-color: #0032E8;
    background: #C4E9F7;
}

.time-option.selected {
    border-color: #0032E8;
    background: #C4E9F7;
    color: #000000;
}

.time-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Hide inline SVG content */
.time-icon svg,
.time-icon path,
.time-icon * {
    display: none !important;
}

/* Morning time option icon */
.time-option[data-time="morning"] .time-icon {
    background-image: url('../images/online-scheduling/morning.svg');
    width: 24px;
    height: 18px;
}

/* Afternoon time option icon */
.time-option[data-time="afternoon"] .time-icon {
    background-image: url('../images/online-scheduling/afternoon.svg');
    width: 18px;
    height: 18px;
}

.time-option .time-icon {
    color: transparent;
}

.time-option:hover .time-icon {
    color: transparent;
}

.time-option.selected .time-icon {
    color: transparent;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-overlay.visible {
    display: flex;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #00B67A;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ===== MOBILE RESPONSIVE STYLES ===== */

/* Mobile breakpoint - 768px and below */
@media screen and (max-width: 1024px) {
    
    /* Force mobile layout for scheduling page */
    .scheduling-container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        position: relative;
        overflow-y: visible;
        padding: 0;
        margin: 0;
    }
    
    .scheduling-inner-wrapper {
        flex-direction: column;
        max-width: 100%;
        height: auto;
        min-height: 100vh;
        display: flex;
    }
    
    /* Mobile Main Panel - Split into header and content */
    .scheduling-main-panel {
        width: 100%;
        background: #F5F9FF;
        padding: 0;
        gap: 0;
        height: auto;
        overflow-y: visible;
        order: 1;
        display: contents;
        margin-top: 0;
    }
    
    /* Remove desktop background extensions on mobile */
    .scheduling-main-panel::before {
        display: none;
    }
    
    /* Mobile Header Section - Start at top */
    .scheduling-header {
        max-width: none;
        gap: 28px;
        background: #F5F9FF;
        padding: 24px 16px 0 16px;
        order: 1;
        width: 100%;
        margin: 0;
        position: relative;
    }
    
    /* Mobile Logo Layout - Keep horizontal like desktop */
    .scheduling-logo {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 12px;
        justify-content: flex-start;
    }
    
    .scheduling-logo a {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        color: inherit;
    }
    
    .scheduling-logo img {
        height: 23px;
        width: auto;
        flex-shrink: 0;
    }
    
    .scheduling-logo .tagline {
        font-size: 16px;
        font-weight: 600;
        color: #0B213B;
        white-space: nowrap;
    }
    
    /* Mobile Progress Indicators - Responsive full width */
    .progress-indicators {
        max-width: none;
        width: 100%;
        height: 66px;
        margin-bottom: 0;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    
    /* Mobile progress bar styling - connect circles properly */
    .progress-indicators::before {
        content: "";
        position: absolute;
        top: 16px;
        left: 48px;
        width: calc(50% - 48px);
        background: #949494;
        height: 2px;
        z-index: 0;
    }
    
    .progress-indicators::after {
        content: "";
        position: absolute;
        top: 16px;
        left: calc(50% + 16px);
        width: calc(50% - 48px);
        border-top: 2px dashed #949494;
        height: 0;
        z-index: 0;
        display: block;
        box-sizing: border-box;
    }
    
    /* Mobile step positioning - responsive flexbox */
    .step-ui {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        flex: 0 0 auto;
        z-index: 1;
    }
    
    .step-ui.step-1 {
        /* First step - left aligned */
        order: 1;
    }
    
    .step-ui.step-2 {
        /* Middle step - center aligned */
        order: 2;
    }
    
    .step-ui.step-3 {
        /* Last step - right aligned */
        order: 3;
    }
    
    /* Mobile step circles */
    .step-circle {
        width: 32px;
        height: 32px;
    }
    
    .step-circle span {
        font-size: 14px;
        font-weight: 700;
    }
    
    /* Mobile step names - responsive width */
    .step-name {
        font-size: 12px;
        line-height: 1.2;
        font-weight: 600;
        text-align: center;
        white-space: normal;
        max-width: 25vw;
        word-wrap: break-word;
    }
    
    /* Completed step styling for mobile - Green circle with checkmark */
    .step-ui.completed .step-circle {
        background: #00B67A;
        border: none;
        color: #FFFFFF;
    }
    
    .step-ui.completed .step-circle span {
        color: #FFFFFF;
        font-weight: 700;
        font-size: 12px;
    }
    
    .step-ui.completed .step-name {
        color: #00B67A;
        font-weight: 700;
        text-decoration: none;
    }
    
    /* Active step styling for mobile - White circle with green border */
    .step-ui.active .step-circle {
        background: #FFFFFF;
        border: 3px solid #00B67A;
    }
    
    .step-ui.active .step-circle span {
        color: #00B67A;
        font-weight: 700;
    }
    
    .step-ui.active .step-name {
        color: #0F0F0F;
        font-weight: 700;
        text-decoration: underline;
    }
    
    /* Inactive step styling for mobile - Grey circle */
    .step-ui:not(.active):not(.completed) .step-circle {
        background: #949494;
        border: none;
    }
    
    .step-ui:not(.active):not(.completed) .step-circle span {
        color: #FFFFFF;
        font-weight: 400;
    }
    
    .step-ui:not(.active):not(.completed) .step-name {
        color: #2C2C2C;
        font-weight: 400;
    }
    
    /* Mobile progress indicator state changes */
    .progress-indicators.completed-1::before {
        background: #00B67A;
    }
    
    .progress-indicators.completed-1::after {
        border-top: 2px dashed #949494;
        display: block;
    }
    
    /* When on step 2 (current-step-2), show 1→2 as completed, 2→3 as available */
    .progress-indicators.current-step-2::before {
        background: #00B67A;
    }
    
    .progress-indicators.current-step-2::after {
        border-top: 2px dashed #949494;
        display: block;
    }
    
    .progress-indicators.completed-2::before {
        background: #00B67A;
    }
    
    .progress-indicators.completed-2::after {
        border-top: 2px solid #00B67A;
        display: block;
    }
    
    .progress-indicators.completed-3::before {
        background: #00B67A;
    }
    
    .progress-indicators.completed-3::after {
        border-top: 2px solid #00B67A;
        display: block;
    }
    
    /* Mobile Step Content */
    .scheduling-step {
        max-width: none;
        width: 100%;
        padding: 24px 0 !important;
    }
    
    /* Mobile Step 1 and Step 2 horizontal padding */
    #step-1.scheduling-step,
    #step-2.scheduling-step {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Mobile Step 2 specific layout adjustments */
    #step-2.scheduling-step {
        background: #F5F9FF !important;
        padding: 24px 10px 40px 10px !important;
    }
    
    /* Mobile Step 3 specific layout adjustments - simplified */
    #step-3.scheduling-step {
        padding: 24px 10px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Step 3 content - ensure proper containment and no overlap */
    #step-3 * {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        position: relative !important;
    }
    
    /* Step 3 text content - ensure proper text wrapping */
    #step-3 h1, #step-3 h2, #step-3 .step-title {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 24px !important;
        line-height: 150% !important;
        letter-spacing: -0.02em !important;
    }
    
    /* Step 3 descriptive text - make more mobile friendly */
    #step-3 p, #step-3 .confirmation-details {
        /* font-size: 14px !important; */
        line-height: 1.4 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Override all desktop fixed widths for step 3 mobile */
    #step-3 .prepare-for-your-appointment-parent {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    #step-3 .video-section {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Ensure all step 3 headings fit properly */
    #step-3 .next-step-get {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }
    
    /* Make buttons fully responsive */
    #step-3 .go-to-client-portal-complete-wrapper {
        padding: 16px !important;
        font-size: 16px !important;
    }
    
    /* Ensure video content is responsive */
    #step-3 .video-iframe,
    #step-3 .video-placeholder {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Mobile Contact Information Title */
    .step-title,
    h2.step-title {
        font-size: 24px !important;
        letter-spacing: -0.02em !important;
        line-height: 150% !important;
        margin-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    #step-1 .gform_heading {
        display: none !important;
    }

    /* Mobile Form Styling */
    .scheduling-form,
    .gravity-form-container .gform_wrapper,
    .gravity-form-container .gform_body {
        max-width: none;
        width: 100%;
        gap: 16px;
        display: flex;
        flex-direction: column;
    }
    
    /* Mobile - Override grid layout to single column */
    .gravity-form-container .gform_fields {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Mobile - All fields remain full width and stacked with proper spacing */
    .gravity-form-container .gfield_id_80_7,
    .gravity-form-container .gfield_id_80_96,
    .gravity-form-container .gfield_id_80_4,
    .gravity-form-container .gfield_id_80_8,
    .gravity-form-container .gfield_id_80_2 {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
    }
    
    /* Mobile - Override absolute positioning for better mobile flow */
    .gravity-form-container .gform_fields {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }
    
    /* Mobile - Field order: First Name, Last Name, Phone, Zip, Email */
    .gravity-form-container .gfield_id_80_7 {
        position: relative !important;
        top: auto !important;
        order: 1 !important;
    }
    
    .gravity-form-container .gfield_id_80_96 {
        position: relative !important;
        top: auto !important;
        order: 2 !important;
    }
    
    .gravity-form-container .gfield_id_80_4 {
        position: relative !important;
        top: auto !important;
        order: 3 !important;
    }
    
    .gravity-form-container .gfield_id_80_8 {
        position: relative !important;
        top: auto !important;
        order: 4 !important;
    }
    
    .gravity-form-container .gfield_id_80_2 {
        position: relative !important;
        top: auto !important;
        order: 5 !important;
    }
    
    /* Mobile form field wrapper */
    .scheduling-form .form-field,
    .gravity-form-container .gfield {
        position: relative;
        width: 100%;
        margin-bottom: 0;
        max-width: 100%;
    }
    
    /* Mobile Gravity Forms field containers */
    .gravity-form-container .gfield .ginput_container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .gravity-form-container .gfield .ginput_container_text,
    .gravity-form-container .gfield .ginput_container_email,
    .gravity-form-container .gfield .ginput_container_phone,
    .gravity-form-container .gfield .ginput_container_number {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Mobile form fields inherit desktop styles - no changes needed */
    
    /* Mobile validation error styling */
    .gravity-form-container .gfield_error input {
        border-color: #E92E2E !important;
        border-width: 2px !important;
        box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(233, 46, 46, 0.2) !important;
    }
    
    .gravity-form-container .gfield_validation_message,
    .gravity-form-container .validation_message {
        font-size: 14px !important;
        color: #E92E2E !important;
        margin-top: 8px !important;
    }
    
    /* Mobile Booking Summary - Show content after header */
    .booking-summary {
        position: relative;
        top: auto;
        width: 100%;
        background: #FFFFFF;
        padding: 24px 16px;
        gap: 12px;
        height: auto;
        max-height: none;
        overflow-y: visible;
        order: 2;
        margin-top: 0;
        margin-bottom: 0;
        border-left: none;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
    }
    
    /* Hide existing continue button on mobile */
    .continue-button,
    .go-back-button {
        display: none !important;
    }
    
    /* Mobile-only continue button styling - Match Figma design */
    .mobile-continue-button {
        border-radius: 40px;
        background-color: #00b67a;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 12px 16px;
        gap: 8px;
        cursor: pointer;
        text-align: center;
        font-size: 20px;
        font-family: 'Montserrat', sans-serif;
        color: #000000;
        border: none;
        outline: none;
        margin: -25px 0 0 auto;
        width: auto;
        order: 4;
    }
    
    .mobile-continue-button span {
        position: relative;
        line-height: 28px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 20px;
        color: #000000;
    }
    
    .mobile-continue-button .chevron-icon {
        width: 28px;
        position: relative;
        max-height: 100%;
        overflow: hidden;
        flex-shrink: 0;
        object-fit: contain;
    }
    
    .mobile-continue-button .chevron-icon svg {
        color: #000000;
        width: 14px;
        height: 20px;
    }
    
    /* Hover effect for mobile continue button */
    .mobile-continue-button:hover {
        background: #009961;
        border-color: #009961;
    }
    
    .mobile-continue-button:hover span,
    .mobile-continue-button:hover .chevron-icon svg {
        color: #000000;
    }
    
    /* Remove desktop background extension */
    .booking-summary::before {
        display: none;
    }
    
    /* Mobile booking summary - reorder elements for proper layout */
    .booking-summary {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 16px !important;
    }
    
    /* Mobile map container positioning - appears above booking summary */
    .booking-map-container {
        position: static !important;
        width: 100% !important;
        height: 160px !important;
        margin-bottom: 8px !important;
        border-radius: 8px !important;
        order: -1 !important;
        top: auto !important;
        right: auto !important;
    }
    
    /* Mobile booking summary header - appears after map */
    .booking-summary .summary-header {
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .booking-summary .summary-header h3 {
        font-size: 24px !important;
        line-height: 150% !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 8px !important;
        order: 1 !important;
    }
    
    /* Mobile location info layout - appears after booking summary header */
    .location-info-section {
        gap: 4px !important;
        padding-bottom: 16px !important;
        flex-direction: column !important;
        order: 2 !important;
    }
    
    /* Apply flex display only when the section is shown by JavaScript */
    .booking-summary .location-info-section[style*="block"] {
        display: flex !important;
    }
    
    /* Mobile Location Selection Pending - appears after booking summary title */
    .booking-summary #no-location-selected.location-status {
        order: 2 !important;
        margin: 8px 0 16px 0 !important;
    }
    
    .location-distance {
        font-size: 12px;
        line-height: 12px;
        font-weight: 600;
        color: #0F0F0F;
        margin-bottom: 4px;
    }
    
    .location-header {
        gap: 8px;
        margin-bottom: 0;
    }
    
    /* Mobile location marker */
    .location-marker .location-number {
        width: 32px;
        height: 40px;
        font-size: 14px;
        padding-left: 7px;
        padding-bottom: 16px;
    }
    
    /* Mobile location text styling */
    .booking-summary #selected-location-name,
    .booking-summary .location-name {
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 150% !important;
        letter-spacing: -0.02em !important;
    }
    
    .booking-summary #selected-location-address,
    .booking-summary .location-address {
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 150% !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 16px;
    }
    
    .booking-summary #contact-shop-link,
    .booking-summary .contact-shop {
        font-size: 12px !important;
        line-height: 150% !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 0;
    }
    
    /* Mobile summary details - appears after location info */
    .summary-details {
        border-top: 1px solid #D9D9D9 !important;
        margin-top: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        order: 3 !important;
    }
    
    .summary-row {
        padding: 8px 0;
        gap: 12px;
        flex-direction: row;
        align-items: flex-start;
        border-bottom: 1px solid #D9D9D9;
        display: flex;
        justify-content: flex-start;
    }
    
    .summary-row:last-child {
        border-bottom: none;
    }
    
    .summary-label {
        font-size: 18px;
        font-weight: 700;
        line-height: 150%;
        letter-spacing: -0.02em;
        color: #000000;
        min-width: 134px;
        flex-shrink: 0;
    }
    
    .summary-value {
        font-size: 20px;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: -0.02em;
        color: #000000;
        flex: 1;
        text-align: left;
    }
    
    /* Mobile Continue Button - Move from booking summary to after form */
    .continue-button {
        position: fixed;
        bottom: auto;
        top: auto;
        left: 16px;
        right: 16px;
        width: calc(100% - 32px);
        margin: 24px 0;
        padding: 12px 16px;
        background: #00B67A;
        border: 1px solid #00B67A;
        border-radius: 40px;
        z-index: 1000;
        transform: translateY(0);
    }
    
    /* Position continue button after active step */
    #step-1.active ~ .booking-summary .continue-button {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 24px;
        transform: none;
    }
    
    .continue-button span {
        font-size: 20px;
        line-height: 28px;
        color: #000000;
    }
    
    .continue-button .chevron-icon {
        width: 28px;
        height: 28px;
    }
    
    /* Mobile Go Back Button - Hidden by default */
    .go-back-button {
        display: none !important;
    }
    

    
    /* Mobile FAQ title */
    .faq-section .faq-title,
    h3.faq-title {
        font-size: 24px !important;
        color: #326FC7 !important;
        margin-bottom: 0 !important;
    }
    
    /* Mobile FAQ items */
    .faq-items {
        margin-top: 20px;
        position: relative;
    }
    
    .faq-item {
        position: relative;
        border: none;
    }
    
    /* Mobile FAQ separators - match Figma SVG lines */
    .faq-item:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        height: 1px;
        background-color: #E5E5E5;
    }
    
    .faq-question {
        padding: 5px 0;
        min-height: 45px;
        align-items: flex-start;
    }
    
    .faq-question span:first-child {
        font-size: 18px;
        line-height: 2.5;
        letter-spacing: -0.02em;
        color: #0C203A;
        font-weight: 400;
        flex: 1;
        padding-right: 20px;
        margin: 0;
        display: block;
    }
    
    .faq-toggle {
        font-family: 'Inter', sans-serif;
        font-size: 18px;
        line-height: 2.5;
        letter-spacing: -0.02em;
        color: #4691BC;
        position: absolute;
        right: 0;
        top: 5px;
        width: 20px;
        text-align: center;
        cursor: pointer;
        user-select: none;
    }
    
    /* Mobile FAQ answer styling */
    .faq-answer {
        display: none;
        padding: 0 0 23px 0;
        margin-top: 8px;
    }
    
    .faq-answer p {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: -0.304px;
        color: #374151;
        margin: 0;
        padding-right: 20px;
    }
    
    .faq-item.active .faq-answer {
        display: block;
    }
    
    .faq-item.active .faq-toggle {
        transform: rotate(45deg);
        color: #4691BC;
    }
    
    /* Mobile Location Results Styling */
    .location-results {
        gap: 16px;
        margin-bottom: 24px;
        width: 100%;
    }
    
    /* Mobile Location Cards - Match design */
    #step-2 .location-card {
        width: 100%;
        padding: 24px;
        border-radius: 12px;
        background: #FFFFFF;
        border: 1px solid #E5E5E5;
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 16px;
        box-sizing: border-box;
    }
    
    /* Mobile location card selected state - Green border */
    #step-2 .location-card.selected {
        border: 2px solid #00B67A;
        background: #FFFFFF;
        box-shadow: 0px 4px 12px rgba(0, 182, 122, 0.15);
    }
    
    /* Mobile location card unselected state */
    #step-2 .location-card:not(.selected) {
        border: 1px solid #E5E5E5;
        background: #FFFFFF;
    }
    
    /* Mobile location distance text */
    #step-2 .distance-line {
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 14px;
        line-height: 1.4;
        color: #000000;
        margin-bottom: 12px;
    }
    
    /* Mobile location header with marker */
    #step-2 .location-header-with-marker {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 20px;
    }
    
    /* Mobile location marker styling */
    #step-2 .location-marker {
        flex-shrink: 0;
    }
    
    #step-2 .location-marker .location-number {
        width: 40px;
        height: 48px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 16px;
        color: #FFFFFF;
        padding-left: 7px;
        padding-bottom: 8px;
    }
    
    /* Mobile location name */
    #step-2 .location-name {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 20px;
        line-height: 1.3;
        color: #000000;
        margin: 0;
    }
    
    /* Mobile location details row */
    #step-2 .location-details-row {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 20px;
    }
    
    /* Mobile location address */
    #step-2 .location-address-col {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }
    
    #step-2 .location-address-col .location-icon {
        width: 24px;
        height: 24px;
        color: #4A90E2;
        flex-shrink: 0;
        margin-top: 2px;
    }
    
    #step-2 .location-address-text {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 1.4;
        color: #000000;
    }
    
    /* Mobile service details */
    #step-2 .location-service-col {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }
    
    #step-2 .location-service-col .location-icon {
        width: 24px;
        height: 24px;
        color: #4A90E2;
        flex-shrink: 0;
        margin-top: 2px;
    }
    
    #step-2 .service-type {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 1.4;
        color: #000000;
        margin-bottom: 4px;
    }
    
    #step-2 .service-hours {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 1.4;
        color: #000000;
    }
    
    #step-2 .service-hours strong {
        font-weight: 700;
    }
    
    /* Mobile phone details */
    #step-2 .location-phone-col {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }
    
    #step-2 .location-phone-col .location-icon {
        width: 24px;
        height: 24px;
        color: #4A90E2;
        flex-shrink: 0;
        margin-top: 2px;
    }
    
    #step-2 .location-phone-text {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 1.4;
        color: #000000;
    }
    
    /* Mobile select button - Match Figma design */
    #step-2 .select-location-btn {
        display: block;
        width: 100%;
        padding: 8px 12px !important;
        border: 1px solid #00B67A !important;
        border-radius: 32px !important;
        background: #FFFFFF !important;
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        line-height: 12px !important;
        color: #0F0F0F !important;
        text-align: center !important;
        text-transform: capitalize !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        margin-top: 20px !important;
        box-sizing: border-box !important;
    }
    
    #step-2 .select-location-btn:hover {
        background: #00B67A !important;
        color: #FFFFFF !important;
    }
    
    /* Hide select button for selected location */
    #step-2 .location-card.selected .select-location-btn {
        display: none;
    }
    
    /* Mobile location action buttons - appear below selected location */
    .mobile-location-actions {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 16px !important;
        margin: 24px 16px !important;
        width: calc(100% - 32px) !important;
        padding: 0 !important;
    }
    
    .mobile-go-back-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 12px 16px !important;
        border: 1px solid #00B67A !important;
        border-radius: 40px !important;
        background: transparent !important;
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        font-size: 20px !important;
        line-height: 28px !important;
        color: #3A3A3A !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        flex: 1 !important;
        text-align: center !important;
    }
    
    .mobile-confirm-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 12px 16px !important;
        border: 1px solid #00B67A !important;
        border-radius: 40px !important;
        background: #00B67A !important;
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        font-size: 20px !important;
        line-height: 28px !important;
        color: #000000 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        flex: 1 !important;
        text-align: center !important;
    }
    
    .mobile-go-back-btn:hover {
        background: #00B67A !important;
        color: #000000 !important;
    }
    
    .mobile-go-back-btn:hover .chevron-icon svg {
        color: #000000 !important;
    }
    
    .mobile-confirm-btn:hover {
        background: #00B67A !important;
        color: #000000 !important;
    }
    
    .mobile-confirm-btn:hover .chevron-icon svg {
        color: #000000 !important;
    }
    
    .mobile-confirm-btn:disabled {
        opacity: 0.5 !important;
        cursor: not-allowed !important;
        background: #9CA3AF !important;
        border: 1px solid #9CA3AF !important;
    }
    
    .mobile-location-actions .chevron-icon {
        width: 28px !important;
        height: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .mobile-location-actions .chevron-icon svg {
        width: 14px !important;
        height: 20px !important;
        color: inherit !important;
    }
    
    /* Mobile appointment scheduling styling */
    #step-2 .appointment-scheduling {
        margin-top: 20px;
        padding-top: 20px;
    }
    
    #step-2 .appointment-title {
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 18px;
        line-height: 1.4;
        color: #000000;
        margin: 0 0 16px 0;
    }
    
    /* Mobile ZIP code search - Match Figma vertical layout */
    #step-2 .step-title {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px 0 !important;
        padding: 0 0 !important;
        white-space: normal !important;
        font-size: 20px !important;
        font-weight: 500 !important;
        letter-spacing: -0.02em !important;
        line-height: 150% !important;
    }
    
    .zipcode-search-container {
        display: block !important;
        width: 100% !important;
        margin: 0 0 24px 0 !important;
        padding: 0 0 !important;
        position: relative !important;
        vertical-align: initial !important;
    }
    
    .zipcode-search {
        width: 100% !important;
        height: 72px !important;
        border-radius: 12px !important;
        padding: 24px 60px 24px 24px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        border: 1px solid #595959 !important;
        background: #FFFFFF !important;
        box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
        color: #474747 !important;
        box-sizing: border-box !important;
    }
    
    .zipcode-search-container .search-icon {
        position: absolute !important;
        right: 40px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 24px !important;
        height: 24px !important;
        color: #949494 !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }
    
    /* Mobile-specific WordPress body overrides */
    body.page-template-page-online-scheduling {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    body.page-template-page-online-scheduling #top,
    body.page-template-page-online-scheduling #wrap_all,
    body.page-template-page-online-scheduling .container_wrap,
    body.page-template-page-online-scheduling .container_wrap .container,
    body.page-template-page-online-scheduling .template-page.content {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Remove any WordPress theme spacing at the top */
    body.page-template-page-online-scheduling .container_wrap_first {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    body.page-template-page-online-scheduling main.content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Fix main div top margin on mobile */
    body.page-template-page-online-scheduling #main {
        margin-top: 0 !important;
    }
    
    /* Mobile booking summary content */
    .mobile-booking-summary {
        order: 2;
        width: 100%;
        background: #FFFFFF;
        padding: 24px 16px;
        margin: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        font-family: 'Montserrat', sans-serif;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    
    /* Mobile step content */
    .scheduling-step {
        order: 3;
        width: 100%;
        background: #F5F9FF;
        padding: 24px 16px;
        margin-top: 0;
        position: relative;
    }
    
    .faq-section {
        order: 5;
        width: 100%;
        background: #F5F9FF;
        padding: 24px 16px 40px 16px;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
    }
    
        /* Ensure mobile touch targets are adequate */
    .continue-button,
    .form-field input,
    .faq-question {
        min-height: 44px;
    }
    
    /* Mobile loading overlay */
    .loading-overlay {
        position: fixed;
        z-index: 10000;
    }

    /* Mobile time selection - stack vertically */
    .time-selection {
        flex-direction: column;
        gap: 12px;
    }

    .time-option {
        width: 100%;
        flex: none;
    }

    /* Step 3 Mobile Specific Changes */
    /* Hide FAQ section completely for step 3 */
    #step-3.scheduling-step.active ~ .faq-section,
    body.step-3-active .faq-section {
        display: none !important;
    }
    
    /* Step 3 Mobile Layout - Simple responsive layout like normal WordPress page */
    body.step-3-active .scheduling-inner-wrapper {
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
    }
    
    /* Step 3 Header - normal spacing */
    body.step-3-active .scheduling-header {
        order: 1 !important;
        margin-top: 0 !important;
        padding: 24px 16px !important;
        background: #F5F9FF !important;
    }
    
    /* Step 3 Main Panel - normal flow */
    body.step-3-active .scheduling-main-panel {
        order: 2 !important;
        padding: 24px 16px !important;
        background: #F5F9FF !important;
        height: auto !important;
        overflow: visible !important;
        width: 100% !important;
    }
    
    /* Step 3 Content - normal positioning */
    body.step-3-active #step-3.scheduling-step {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        background: #F5F9FF !important;
        position: relative !important;
        z-index: 1 !important;
        overflow: visible !important;
    }
    
    /* Ensure step 3 content flows normally without overlap */
    body.step-3-active #step-3 * {
        position: relative !important;
        z-index: auto !important;
    }
    
    /* Booking Summary - normal flow */
    body.step-3-active .booking-summary {
        order: 3 !important;
        position: relative !important;
        width: 100% !important;
        margin-top: 0 !important;
    }
    
    /* Position map correctly for step 3 - at top of booking summary */
    body.step-3-active .booking-map-container {
        display: block !important;
        position: static !important;
        width: 100% !important;
        height: 160px !important;
        margin-bottom: 16px !important;
        border-radius: 8px !important;
    }

    /* Smaller mobile optimizations for all devices under 1024px */
    .scheduling-main-panel {
        padding: 20px 12px 32px 12px;
    }
    
    .booking-summary {
        padding: 20px 12px;
    }
    
    .faq-section {
        padding: 20px 16px 32px 16px;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Smaller mobile step circles */
    .step-circle {
        width: 28px;
        height: 28px;
    }
    
    .step-circle span {
        font-size: 12px;
    }
    
    .step-name {
        font-size: 11px;
        max-width: 22vw;
    }
    
    /* Smaller mobile form inputs */
    .scheduling-form .form-field input,
    .form-field input,
    #contact-form input {
        width: 100% !important;
        max-width: none !important;
        height: 68px !important;
        margin: 0 !important;
        padding: 22px 8px 22px 20px !important;
    }
    
    /* Progress indicators adjustments for smaller screens */
    .progress-indicators::before {
        width: calc(50% - 42px);
        left: 42px;
    }
    
    .progress-indicators::after {
        width: calc(50% - 42px);
        left: calc(50% + 14px);
    }

}



/* Landscape mobile optimization */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    
    .scheduling-main-panel {
        padding: 16px 12px 24px 12px;
    }
    
    .scheduling-header {
        gap: 20px;
    }
    
    .progress-indicators {
        height: 50px;
        margin-bottom: 16px;
    }
    
    .step-circle {
        width: 28px;
        height: 28px;
    }
    
    .step-name {
        font-size: 11px;
    }
    
}

/* Viewport height responsive positioning for buttons - Now handled by CSS calc() */



/* Success Message */
.success-message {
    text-align: center;
    padding: 2rem;
}

.success-message h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: #00B67A;
    margin-bottom: 1rem;
}

.success-message p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    color: #666;
    line-height: 1.5;
}

/* Confirmation Details */
.confirmation-details {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.confirmation-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.confirmation-row:last-child {
    margin-bottom: 0;
}

.confirmation-label {
    font-weight: 600;
    color: #333;
}

.confirmation-value {
    color: #666;
    text-align: right;
}

/* Error States - Higher specificity to override existing styles */
.scheduling-form .form-field.error input,
.form-field.error input,
#contact-form .form-field.error input {
    border-color: #e92e2e !important;
    border-width: 2px !important;
    box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(233, 46, 46, 0.2) !important;
}

.error-message {
    display: none !important;
}

/* Error Notification */
.error-notification {
    background: #fee;
    border: 1px solid #fcc;
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1rem;
    color: #c33;
}

/* Step 3 Success Content - Generated by JavaScript */
.youre-on-your-container,
.a-program-advisor-will-be-container,
.next-step-get,
.go-to-client-portal-complete-wrapper,
.frame-div,
.video-section,
.video-iframe,
.frame-container {
    max-width: 100%;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 0 !important;
}

.go-to-client-portal-complete-wrapper {
    border-radius: 40px;
    background-color: #00b67a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.go-to-client-portal-complete-wrapper:hover {
    background-color: #009961;
}

.next-steps {
    margin-bottom: 40px;
}

.next-steps h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.4;
    color: #0F0F0F;
    margin: 0 0 16px 0;
}

.next-steps p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #667085;
    margin: 0 0 24px 0;
}

.client-portal-btn {
    width: 100%;
    height: 56px;
    background: #00B67A;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.client-portal-btn:hover {
    background: #009961;
}

.preparation-section h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.4;
    color: #0F0F0F;
    margin: 0 0 16px 0;
}

.preparation-section p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #667085;
    margin: 0 0 24px 0;
}

.video-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: #F8F9FA;
    border-radius: 8px;
    overflow: hidden;
}

.video-placeholder iframe {
    width: 100%;
    height: 100%;
}

/* Booking Summary Success Layout */
.booking-summary-success {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.booking-summary-success .summary-header h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.4;
    color: #0F0F0F;
    margin: 0;
}

.location-info {
    border-bottom: 1px solid #E5E5E5;
    padding-bottom: 24px;
}

.location-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.location-number {
    width: 32px;
    height: 32px;
    background: #00B67A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
}

.location-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: #0F0F0F;
}

.location-address {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #667085;
    margin-bottom: 12px;
}

.contact-shop {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: #00B67A;
    text-decoration: underline;
}

.contact-shop:hover {
    text-decoration: none;
}

.booking-details {
    display: flex;
    flex-direction: column;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid #E5E5E5;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    color: #344054;
}

.detail-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #667085;
    text-align: right;
}

/* Hide mobile continue button on desktop */
.mobile-continue-button {
    display: none;
}

/* Step 3 Confirmation Styling - Matching Figma Design */

/* You're on your way section */
.youre-on-your-way-your-appoi-parent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    font-size: 28px;
}

.youre-on-your-container {
    width: 100%;
    max-width: 710px;
    position: relative;
    letter-spacing: -0.02em;
    line-height: 150%;
}

    .youre-on-your-way {
        color: rgb(0, 0, 0) !important;
        display: block !important;
        font-family: Montserrat !important;
        font-size: 28px !important;
        height: auto !important;
        letter-spacing: -0.56px !important;
        line-height: 1.6 !important;
        margin-block-end: 0px !important;
        margin-block-start: 0px !important;
        margin-bottom: 10px !important;
        margin-inline-end: 0px !important;
        margin-inline-start: 0px !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
        margin-top: 0px !important;
        text-align: left !important;
        unicode-bidi: isolate !important;
        width: 710px !important;
    }

    .your-appointment-request {
        color: rgb(0, 0, 0) !important;
        display: block !important;
        font-family: Montserrat !important;
        font-size: 28px !important;
        font-weight: 500 !important;
        /* height: 95px !important; */
        letter-spacing: -0.56px !important;
        line-height: 1.6 !important;
        margin-block-end: 0px !important;
        margin-block-start: 0px !important;
        margin-bottom: 20px !important;
        margin-inline-end: 0px !important;
        margin-inline-start: 0px !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
        margin-top: 0px !important;
        text-align: left !important;
        unicode-bidi: isolate !important;
        /* width: 710px !important; */
    }

    .a-program-advisor-will-be-container {
        align-self: stretch !important;
        color: rgb(0, 0, 0) !important;
        display: block !important;
        font-family: Montserrat !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        /* height: 110px !important; */
        line-height: 1.7 !important;
        position: relative !important;
        text-align: left !important;
        unicode-bidi: isolate !important;
        /* width: 726px !important; */
    }

.a-program-advisor-will-be-container p {
    font-size: 14px !important;
}



/* Next Steps Card */
.frame-div {
    width: 100%;
    border-radius: 12px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px;
    gap: 24px;
    margin-bottom: 32px;
}

.next-step-get-set-up-in-the-c-parent {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

.next-step-get {
    width: 100%;
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #000 !important;
    margin: 0;
}

    .next-step-get-set-up-in-the-c-parent .a-program-advisor-will-be-container {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        line-height: 1.7;
        font-weight: 500;
        color: #000;
    }

.go-to-client-portal-complete-wrapper {
    width: 100%;
    border-radius: 40px;
    background-color: #00b67a;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
    font-size: 18px;
    /* margin: 15px 0; */
    color: #000 !important;
    font-family: 'Proxima Nova', 'Montserrat', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border: none;
}

.go-to-client-portal-complete-wrapper:hover {
    background-color: #009961;
}

.go-to-client {
    position: relative;
    text-transform: capitalize;
    font-weight: 600;
    color: #000 !important;
    margin: 0;
}

/* Video Section */
.video-section {
    width: 100%;
    max-width: 726px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 36px;
}

.prepare-for-your-appointment-parent {
    width: 100%;
    max-width: 447px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

.prepare-for-your-appointment-parent .next-step-get {
    font-size: 24px;
    line-height: 32px;
}

    .prepare-for-your-appointment-parent .a-program-advisor-will-be-container {
        font-size: 14px;
        line-height: 1.7;
        height: auto !important;
    }

.video-iframe {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 16/9;
    height: auto;
}

/* Step 3 Main Container */
.frame-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 32px;
    text-align: left;
    font-size: 24px;
    color: #000;
    font-family: 'Montserrat', sans-serif;
}

/* Mobile Responsiveness for Step 3 */
@media (max-width: 1024px) {
    .youre-on-your-way {
        font-size: 24px;
    }
    
    .next-step-get {
        font-size: 20px;
        line-height: 28px;
    }
    
    .frame-div {
        padding: 16px;
        gap: 16px;
        margin-bottom: 0 !important;
    }
    
    .video-section {
        gap: 24px;
    }
}

.content {
    padding-bottom: 0 !important;
}