/* Transfer & Daily Tour Booking Form Responsive Design */

@media (max-width: 1024px) {
    .bookingService-FormContainer {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .bookingService-Input[id="pickup"], 
    .bookingService-Input[id="departure"] {
        min-width: 250px;
    }
}

@media (max-width: 768px) {
    .bookingService-Section {
        padding: 1rem 0;
    }

    /* Tabs / Title Buttons */
    .bookingService-TitleBtns {
        width: 100%;
        border-radius: 1rem 1rem 0 0;
        justify-content: center;
        padding-bottom: 1.5rem;
        margin-bottom: -1rem;
        animation: none; /* Simplify for mobile performance */
        translate: 0 0 !important;
        opacity: 1 !important;
    }

    .bookingService-TitleBtn {
        font-size: 1.1rem;
        padding: 0.5rem 1rem;
        flex: 1; /* Make buttons equal width to ensure consistent line positioning */
        justify-content: center;
    }

    .bookingService-TitleBtns .line {
        bottom: 1rem;
        width: 80px; /* Slightly narrower for mobile */
        transform: translateX(-50%);
    }

    .bookingService-TitleBtns.transferFormActive .line {
        left: 25% !important;
    }

    .bookingService-TitleBtns.tourFormActive .line {
        left: 75% !important;
    }

    .bookingService-TitleBtns::after {
        display: none; /* Remove the corner rounding effect on mobile */
    }

    /* Form Layout */
    .bookingService-FormList {
        width: 100% !important;
        animation: none;
        scale: 1 !important;
        opacity: 1 !important;
    }

    .bookingService-Form {
        width: 100%;
        padding: 1rem;
    }

    .bookingService-FormContainer {
        flex-direction: column;
        width: 100%;
        gap: 0.6rem;
    }

    .bookingService-FormRow {
        flex-direction: column;
        width: 100%;
        gap: 0.6rem !important;
    }

    .bookingService-FormGroup {
        width: 100%;
    }

    .bookingService-FormRow .bookingService-FormElementSpace:first-child {
        margin-right: 0;
    }

    .bookingService-Input {
        width: 100% !important;
        min-width: 0 !important;
        height: 70px; /* Slightly shorter on mobile */
    }

    .tour-custom-select {
        width: 100% !important;
        min-width: 0;
        height: 70px;
    }

    /* Route Switcher Button - Hidden on Mobile */
    #switchRoute {
        display: none !important;
    }

    /* Vertical Transition for Return Date Groups */
    #return-date-group,
    #tour-return-date-group {
        width: 100% !important;
        max-height: 0;
        opacity: 0;
        margin: 0 !important;
        overflow: hidden;
        visibility: hidden;
        scale: 1 !important; /* Reset horizontal scale from desktop */
        transition: max-height 0.4s ease-out, opacity 0.3s ease, margin 0.4s ease;
    }

    #return-date-group.active,
    #tour-return-date-group.active {
        max-height: 120px; /* Room for label + inputs */
        opacity: 1;
        margin-top: 0.6rem !important;
        visibility: visible;
    }

    /* Date & Time Row */
    .bookingService-FormRow.DateTimeRow {
        gap: 0 !important; /* Rely on group transitions for spacing */
    }

    .bookingService-DateTimeInputs {
        min-width: 0;
        height: auto; /* Changed for sidebar */
        gap: 0.6rem;
    }

    .bookingService-DateTimeInputs .bookingService-Input {
        width: 100% !important;
        height: 70px;
    }

    /* Checkbox / Round Trip Group */
    .bookingService-CheckboxGroup {
        width: 100%;
        height: 70px;
        justify-content: center;
        padding: 0.5rem 1rem;
        padding-top: 1.5rem;
        margin-top: 0.6rem;
    }

    .bookingService-CheckboxLabel p {
        top: -25px;
    }

    /* Submit Button */
    .bookingService-SubmitBtn {
        position: relative;
        bottom: auto;
        right: auto;
        margin: 1rem auto 0;
        width: 100%;
        justify-content: center;
        animation: none;
        opacity: 1 !important;
    }

    /* Daily Tour Specifics */
    .tour-select-wrapper {
        width: 100%;
    }

    .tour-dropdown-list {
        max-width: 100%;
        left: 0;
        right: 0;
    }

    .tour-option-name {
        font-size: 0.95rem;
    }

    /* Vehicle Selection Modal Fixes */
    .bookingDetailsContainer {
        width: 95vw;
        height: 85vh;
        margin: 0 auto;
    }

    .bookingService-VehicleItem {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .bookingService-TitleBtn {
        font-size: 1rem;
        gap: 0.35rem;
    }
    
    .bookingService-TitleBtn svg {
        width: 1.2em;
        height: 1.2em;
    }

    .bookingService-Label {
        font-size: 0.75rem;
    }
    
    .bookingService-FormRow.FromWhereInputs .bookingService-Label {
        left: 50px;
        font-size: 1rem;
    }

    .bookingService-Container {
        padding: 0;
    }
}

@media (max-width: 375px) {
    .bookingService-TitleBtn {
        padding: 0.5rem 0;
    }
}