/*
|--------------------------------------------------------------------------
| AcNova final mobile/tablet navigation authority
|--------------------------------------------------------------------------
| Loaded after legacy inline navigation rules.
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body.has-mobile-actions {
        padding-bottom:
            calc(94px + env(safe-area-inset-bottom)) !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Header
    |--------------------------------------------------------------------------
    */

    header.ac-nav {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 68px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        grid-template-columns: none !important;
        gap: 10px !important;

        padding:
            10px
            max(14px, env(safe-area-inset-right))
            10px
            max(14px, env(safe-area-inset-left)) !important;

        overflow: hidden !important;
    }

    header.ac-nav .ac-brand {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 58px) !important;
    }

    header.ac-nav .ac-brand img {
        width: 45px !important;
        height: 45px !important;
        flex: 0 0 45px !important;
    }

    header.ac-nav .ac-brand > div {
        min-width: 0 !important;
    }

    header.ac-nav .ac-brand strong {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    header.ac-nav .ac-brand span {
        display: block !important;
        max-width: 100% !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    header.ac-nav > nav,
    header.ac-nav .ac-links,
    header.ac-nav .nav-links,
    header.ac-nav .ac-nav-links {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Bottom navigation
    |--------------------------------------------------------------------------
    */

    body > .acnova-mobile-actions {
        position: fixed !important;

        left: max(8px, env(safe-area-inset-left)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        bottom:
            calc(8px + env(safe-area-inset-bottom)) !important;

        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;

        display: grid !important;
        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;

        align-items: stretch !important;
        gap: 5px !important;

        margin: 0 !important;
        padding: 7px !important;

        overflow: visible !important;

        border-radius: 20px !important;

        z-index: 10020 !important;
    }

    body > .acnova-mobile-actions
    .acnova-mobile-nav-item {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 57px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 3px !important;
        padding: 5px 2px !important;

        overflow: hidden !important;
    }

    body > .acnova-mobile-actions
    .acnova-mobile-nav-item strong {
        flex: 0 0 28px !important;

        width: 28px !important;
        height: 28px !important;

        display: grid !important;
        place-items: center !important;

        margin: 0 !important;
    }

    body > .acnova-mobile-actions
    .acnova-mobile-nav-item span {
        width: 100% !important;
        max-width: 100% !important;

        display: block !important;

        overflow: hidden !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        font-size: clamp(8px, 2.35vw, 11px) !important;
        line-height: 1.15 !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Drawer
    |--------------------------------------------------------------------------
    */

    body > .acnova-mobile-drawer {
        position: fixed !important;

        left: max(8px, env(safe-area-inset-left)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        bottom:
            calc(86px + env(safe-area-inset-bottom)) !important;

        width: auto !important;
        max-width: none !important;

        max-height: min(74dvh, 700px) !important;

        display: grid !important;
        grid-template-rows:
            auto minmax(0, 1fr) !important;

        overflow: hidden !important;

        z-index: 10040 !important;
    }

    body > .acnova-mobile-drawer
    .acnova-drawer-body {
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch;
    }

    body > .acnova-mobile-drawer
    .acnova-drawer-links {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;
    }

    body > .acnova-mobile-drawer
    .acnova-drawer-link {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;

        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }
}

/*
|--------------------------------------------------------------------------
| Phones
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {
    header.ac-nav .ac-brand span {
        max-width: 150px !important;
        font-size: 10px !important;
    }

    body > .acnova-mobile-actions {
        left: max(5px, env(safe-area-inset-left)) !important;
        right: max(5px, env(safe-area-inset-right)) !important;

        gap: 3px !important;
        padding: 6px 4px !important;

        border-radius: 18px !important;
    }

    body > .acnova-mobile-actions
    .acnova-mobile-nav-item {
        min-height: 54px !important;
    }

    body > .acnova-mobile-actions
    .acnova-mobile-nav-item strong {
        width: 26px !important;
        height: 26px !important;
    }

    body > .acnova-mobile-drawer {
        left: max(5px, env(safe-area-inset-left)) !important;
        right: max(5px, env(safe-area-inset-right)) !important;
        bottom:
            calc(78px + env(safe-area-inset-bottom)) !important;

        max-height: 76dvh !important;
    }

    body > .acnova-mobile-drawer
    .acnova-drawer-links {
        grid-template-columns: 1fr !important;
    }
}

/*
|--------------------------------------------------------------------------
| Very narrow phones
|--------------------------------------------------------------------------
*/

@media (max-width: 380px) {
    header.ac-nav .ac-brand span {
        display: none !important;
    }

    body > .acnova-mobile-actions
    .acnova-mobile-nav-item span {
        font-size: 8px !important;
    }

    body > .acnova-mobile-actions
    .acnova-mobile-nav-item strong {
        width: 24px !important;
        height: 24px !important;
        font-size: 11px !important;
    }
}

/*
|--------------------------------------------------------------------------
| Tablet landscape
|--------------------------------------------------------------------------
*/

@media (min-width: 768px) and (max-width: 1100px) {
    body > .acnova-mobile-actions {
        left: 50% !important;
        right: auto !important;

        width: min(720px, calc(100% - 32px)) !important;

        transform: translateX(-50%) !important;
    }

    body > .acnova-mobile-drawer {
        left: 50% !important;
        right: auto !important;

        width: min(760px, calc(100% - 32px)) !important;

        transform:
            translateX(-50%)
            translateY(30px)
            scale(.98) !important;
    }

    body > .acnova-mobile-drawer.open {
        transform:
            translateX(-50%)
            translateY(0)
            scale(1) !important;
    }

    body > .acnova-mobile-drawer
    .acnova-drawer-links {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile drawer click and pointer-event repair
|--------------------------------------------------------------------------
*/

/* Respect the HTML hidden attribute. */
.acnova-mobile-drawer-backdrop[hidden] {
    display: none !important;
}

/* Closed backdrop must never block taps. */
.acnova-mobile-drawer-backdrop {
    pointer-events: none !important;
}

/* Backdrop receives taps only while drawer is open. */
.acnova-mobile-drawer-backdrop.open {
    display: block !important;
    pointer-events: auto !important;
}

/* Closed drawer must not capture touches. */
.acnova-mobile-drawer {
    pointer-events: none !important;
}

/* Open drawer becomes interactive. */
.acnova-mobile-drawer.open {
    pointer-events: auto !important;
}

/* Bottom navigation always remains clickable. */
body > .acnova-mobile-actions {
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

body > .acnova-mobile-actions a,
body > .acnova-mobile-actions button {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}