/* Mobile My Account: BookingPress account menu as an inline row instead of avatar dropdown.
 * Breakpoint must match AutoOpenAccountMenu::MOBILE_MAX_WIDTH (1023). */
@media (max-width: 1023px) {
    /* --- Vue 3 My Bookings: keep navbar, hide dropdown chrome --- */
    .bpa-frontend-my-bookings-vue3 .bpa-front-cp-top-navbar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .bpa-frontend-my-bookings-vue3 .bpa-front-cp-top-navbar .bpa-cp-tn__left,
    .bpa-frontend-my-bookings-vue3 .bpa-front-cp-top-navbar .bpa-cp-tn__right {
        display: none !important;
    }

    .bpa-frontend-my-bookings-vue3 .zero-bp-inline-account-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px 16px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .bpa-frontend-my-bookings-vue3 .zero-bp-inline-account-menu .bpa-tm__item {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        flex: 0 1 auto !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        cursor: pointer !important;
    }

    /* --- Legacy Vue 2 customer panel (sidebar always in DOM) --- */
    body:not(:has(.bpa-frontend-my-bookings-vue3)) .bpa-front-cp-top-navbar {
        display: none !important;
    }

    body:not(:has(.bpa-frontend-my-bookings-vue3)) .bpa-front-cp-card {
        display: flex !important;
        flex-direction: column !important;
    }

    body:not(:has(.bpa-frontend-my-bookings-vue3)) .bpa-front-cp-left-sidebar {
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--bpa-gt-gray-400, #CFD6E5);
        border-radius: 0 !important;
        position: static !important;
        z-index: auto !important;
    }

    body:not(:has(.bpa-frontend-my-bookings-vue3)) .bpa-front-cp-left-sidebar .bpa-cp-ls__personal-details {
        display: none !important;
    }

    body:not(:has(.bpa-frontend-my-bookings-vue3)) .bpa-front-cp-left-sidebar .bpa-cp-ls__tab-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px 16px !important;
        padding: 16px 20px !important;
    }

    body:not(:has(.bpa-frontend-my-bookings-vue3)) .bpa-front-cp-left-sidebar .bpa-cp-ls__tab-menu .bpa-tm__item {
        margin-bottom: 0 !important;
        flex: 0 1 auto !important;
        white-space: nowrap !important;
    }
}