/* Two-Step Form Layout Styles */

/* Step 1: Default State (Description Only) */
.booking-form-wrapper:not(.booking-mode) .booking-card {
    display: none;
}

.booking-form-wrapper:not(.booking-mode) .form-with-description {
    display: block;
    max-width: 800px;
    /* Center and constrain width */
    margin: 0 auto;
}

/* Ensure description card takes full width in Step 1 */
.booking-form-wrapper:not(.booking-mode) .description-card {
    width: 100%;
}

/* Step 2: Booking Mode (Description + Form) */
.booking-form-wrapper.booking-mode .form-with-description {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1100px;
    /* Wider to accommodate both */
    gap: 30px;
    transition: all 0.5s ease;
}

.booking-form-wrapper.booking-mode .booking-card {
    display: block;
    animation: slideInRight 0.5s ease forwards;
}



/* Animations */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Button to show form */
.btn-show-booking {
    margin-top: 1rem;
    display: inline-block;
    /* Styles are inherited from .btn-primary */
}


/* Responsive adjustments for two-step */
@media (max-width: 992px) {
    .booking-form-wrapper.booking-mode .form-with-description {
        grid-template-columns: 1fr;
        /* Stack on mobile even in booking mode */
    }

    .booking-form-wrapper:not(.booking-mode) .form-with-description {
        max-width: 100%;
    }
}