/* v118 - Email below phone on mobile step 2 */

@media screen and (max-width: 768px) {
    /* v113 FIX: Removed image hiding rules that affected other pages */
    /* If you need to hide specific images on the booking page only, */
    /* use page-specific selectors like .page-id-XXX #image_1172254478 */
    /* where XXX is your booking page ID */
    /* CRITICAL: Override the fixed height ux_banner completely */
    .ux_banner[height],
    .ux-banner[height],
    [class*="ux_banner"],
    [class*="ux-banner"] {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Override ALL Flatsome container elements with extreme specificity */
    .ux_banner .text_box,
    .ux-banner .text-box,
    .ux_banner .text-box,
    .ux-banner .text_box,
    [class*="ux_banner"] [class*="text_box"],
    [class*="ux-banner"] [class*="text-box"] {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
    }
    
    /* Override text_box positioning that's constraining height */
    .text_box[position_y],
    .text-box[position_y],
    [class*="text_box"][position_y],
    [class*="text-box"][position_y] {
        position: static !important;
        top: auto !important;
        transform: none !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    /* Override row and column restrictions - SCOPED TO BOOKING FORM ONLY v112 */
    .ximeow-amelia-wrapper .row,
    .ximeow-amelia-wrapper [class*="row"],
    .ximeow-amelia-wrapper .col,
    .ximeow-amelia-wrapper [class*="col"],
    .ximeow-amelia-wrapper [class*="span__sm"],
    .ximeow-amelia-wrapper [class*="span__md"],
    .ximeow-amelia-wrapper .col[span__sm="12"],
    .ximeow-amelia-wrapper .col[span__md="12"],
    .ximeow-amelia-wrapper .row > .col,
    .ximeow-amelia-wrapper .row > [class*="col"] {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex: none !important;
        position: static !important;
    }
    
    /* Target the specific structure: ux_html containing our form */
    .ux_html,
    .ux-html,
    [class*="ux_html"],
    [class*="ux-html"],
    .ux_html.p0.m0,
    .ux-html.p0.m0 {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Target anything that might contain ximeow_amelia_booking shortcode */
    [class*="ximeow"],
    .has-ximeow-booking,
    *:has([class*="ximeow"]) {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Force the booking form section to expand - SCOPED v112 */
    .ximeow-amelia-wrapper .page-section,
    .ximeow-amelia-wrapper .section,
    .ximeow-amelia-wrapper [class*="section"],
    .ximeow-amelia-wrapper .banner-section,
    .section:has(.ximeow-amelia-wrapper),
    .banner-section:has(.ximeow-amelia-wrapper) {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Override any inline styles on parent containers */
    [style*="height: 1488px"],
    [style*="height:1488px"],
    [height="1488px"],
    [style*="height: 1080px"],
    [style*="height:1080px"],
    [height__sm="1080px"],
    [style*="height: 900px"],
    [style*="height:900px"],
    [height__md="900px"] {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    /* Make sure the body and html allow scrolling */
    html,
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Ensure main content area containing booking form can scroll - TARGETED v112 */
    #main:has(.ximeow-amelia-wrapper),
    .main:has(.ximeow-amelia-wrapper),
    #content:has(.ximeow-amelia-wrapper),
    .content:has(.ximeow-amelia-wrapper),
    .page-wrapper:has(.ximeow-amelia-wrapper),
    .site-content:has(.ximeow-amelia-wrapper) {
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Hide desktop-only elements */
    .ximeow-sidebar,
    .ximeow-sidebar-footer,
    .collapse-menu {
        display: none !important;
    }
    
    /* Main booking form wrapper */
    .ximeow-amelia-wrapper {
        padding: 10px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    .ximeow-amelia-container {
        display: block !important;
        width: 100% !important;
        background: white !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
        flex: none !important;
    }
    
    .ximeow-main-content {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex: none !important;
        position: static !important;
    }
    
    .ximeow-content-body {
        padding: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Fix timezone display transform issue */
    .timezone-display {
        transform: none !important;
        position: static !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
    
    /* Calendar wrapper */
    .calendar-wrapper {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
        -webkit-overflow-scrolling: auto !important;
    }
    
    /* Calendar grid */
    .calendar-grid {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 2px !important;
        width: 100% !important;
    }
    
    .calendar-day {
        padding: 8px !important;
        text-align: center !important;
        border-radius: 4px !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
    }
    
    /* Time slots */
    .time-slots-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
        gap: 8px !important;
        margin-top: 20px !important;
        padding-bottom: 20px !important;
    }
    
    .time-slot {
        padding: 10px !important;
        text-align: center !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }
    
    /* Form fields */
    .form-input,
    .form-select,
    .form-textarea {
        width: 100% !important;
        padding: 12px !important;
        border: 1px solid #E0E0E0 !important;
        border-radius: 4px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
    }
    
    /* v118: Email below Phone on mobile Step 2 */
    /* Stack form fields vertically on mobile */
    .form-row {
        display: flex !important;
        flex-direction: column !important; /* Stack vertically */
        gap: 15px !important;
        width: 100% !important;
    }
    
    /* Ensure phone field (first child) comes first */
    .form-row .form-group:first-child {
        order: 1 !important; /* Phone stays first */
        width: 100% !important;
    }
    
    /* Ensure email field (last child) comes second */
    .form-row .form-group:last-child {
        order: 2 !important; /* Email goes second */
        width: 100% !important;
    }
    
    /* Make form groups full width on mobile */
    .form-row .form-group {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Ensure phone input takes full width */
    input[type="tel"],
    input[type="email"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Phone input container styling */
    .phone-input-group {
        display: flex !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    .phone-input-group input[type="tel"] {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    /* Buttons */
    .btn-continue,
    .btn-back,
    .btn-finish {
        padding: 12px 24px !important;
        border-radius: 4px !important;
        font-size: 14px !important;
        min-height: 44px !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }
    
    .btn-continue,
    .btn-finish {
        background: #8B6F47 !important;
        color: white !important;
        border: none !important;
    }
    
    .btn-back {
        background: white !important;
        color: #333 !important;
        border: 1px solid #E0E0E0 !important;
    }
    
    /* Header */
    .ximeow-content-header {
        height: auto !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
    }
    
    /* Footer */
    .ximeow-content-footer {
        padding: 15px !important;
        margin-top: 20px !important;
        margin-bottom: 30px !important;
        display: flex !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Booking steps */
    .booking-step {
        display: none;
        min-height: 300px !important;
    }
    
    .booking-step.active {
        display: block !important;
        padding-bottom: 60px !important;
    }
    
    /* Calendar colors */
    .calendar-day.available {
        background: #E8F5E9 !important;
        color: #333 !important;
    }
    
    .calendar-day.selected {
        background: #4CAF50 !important;
        color: white !important;
    }
    
    .calendar-day.disabled {
        background: #ffcccc !important;
        color: #999 !important;
    }
    
    /* Time slot colors */
    .time-slot.available {
        background: #E8F5E9 !important;
        border: 1px solid #C8E6C9 !important;
    }
    
    .time-slot.selected {
        background: #4CAF50 !important;
        color: white !important;
        border-color: #4CAF50 !important;
    }
    
    .time-slot.disabled {
        background: #ffcccc !important;
        color: #999 !important;
        cursor: not-allowed !important;
    }
    
    /* Prevent any touch/scroll issues */
    * {
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Ensure form elements don't cause zoom on iOS */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
    
    /* V91 SPECIFIC FIXES */
    
    /* 1. Center Asia/Singapore timezone text */
    .timezone-display {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        margin: 10px auto !important;
    }
    
    /* 2. Fix calendar controls - bring arrows closer to month/year */
    .calendar-controls {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important; /* Reduce gap between elements */
        padding: 10px 0 !important;
    }
    
    .calendar-select {
        margin: 0 2px !important; /* Minimal margin */
    }
    
    .nav-btn {
        margin: 0 2px !important; /* Bring arrows closer */
    }
    
    /* 3. Hide time slots section and reduce spacing until date is selected */
    .time-slots-section:not(.has-selection) {
        display: none !important;
    }
    
    /* Reduce padding at bottom of step 1 when no date selected */
    .booking-step.step-1:not(.date-selected) {
        padding-bottom: 20px !important; /* Reduced from 60px */
    }
    
    /* Show time slots section only when it has content */
    .time-slots-section:empty {
        display: none !important;
    }
    
    /* Reduce footer spacing when no date selected */
    .booking-step.step-1:not(.date-selected) + .ximeow-content-footer {
        margin-top: 10px !important; /* Reduced spacing */
    }
}