/**
 * Mobile Fix for Single Course Layout
 * Ensures booking widget appears at bottom on mobile devices
 */

/* Mobile Layout Override - Max Specificity */
@media only screen and (max-width: 992px) {
    /* Force Flexbox Layout */
    html body .hhc-single-course-wrapper .hhc-course-main {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        gap: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Description Content First */
    html body .hhc-single-course-wrapper .hhc-course-main .hhc-course-left {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        margin-bottom: 30px !important;
        display: block !important;
        grid-column: unset !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Booking Widget Last */
    html body .hhc-single-course-wrapper .hhc-course-main .hhc-course-right {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        top: auto !important;
        margin-top: 20px !important;
        display: block !important;
        grid-column: unset !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Remove any sticky positioning */
    html body .hhc-course-right,
    html body .hhc-booking-widget,
    html body .hhc-sidebar-image,
    html body .hhc-info-widget {
        position: relative !important;
        top: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* Extra Small Devices */
@media only screen and (max-width: 768px) {
    html body .hhc-single-course-wrapper .hhc-course-main {
        padding: 0 !important;
    }

    html body .hhc-single-course-wrapper .hhc-course-left,
    html body .hhc-single-course-wrapper .hhc-course-right {
        padding: 0 10px !important;
    }
}