/* Keep Naqshat navigation on the visible phone screen, including Safari's
   changing browser bars. The normal bottom:0 remains the no-JS fallback. */
@media (max-width: 1199px) {
    [data-naqshat-mobile-toolbar] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        box-sizing: border-box;
        padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
        transform: translate3d(0, 0, 0);
    }

    body.naqshat-mobile-toolbar {
        padding-bottom: var(--nq-mobile-toolbar-height, 70px);
    }

    body.naqshat-mobile-toolbar [data-naqshat-mobile-toolbar] {
        top: var(--nq-mobile-toolbar-top);
        bottom: auto;
    }

    body.naqshat-mobile-toolbar .wa-float {
        top: var(--nq-mobile-whatsapp-top, auto);
        bottom: auto;
    }

    body.naqshat-mobile-keyboard [data-naqshat-mobile-toolbar],
    body.naqshat-mobile-keyboard .wa-float {
        visibility: hidden;
        pointer-events: none;
    }
}

/* At 320px the old 140px logo plus three 40px icons forced the RTL
   header outside the screen, creating a horizontal scrollbar. Let the logo
   use the space left by the controls instead of widening the whole page. */
@media (max-width: 379px) {
    body.naqshat-mobile-toolbar .tf-header .header-inner {
        gap: 4px;
    }

    body.naqshat-mobile-toolbar .tf-header .box-open-menu-mobile {
        flex: 0 0 auto;
        gap: 4px !important;
    }

    body.naqshat-mobile-toolbar .tf-header .header-inner .header-left {
        flex: 1 1 96px;
        min-width: 0;
        max-width: 96px;
    }

    body.naqshat-mobile-toolbar .tf-header .logo-site {
        width: 100%;
    }

    body.naqshat-mobile-toolbar .tf-header .logo-site img {
        max-width: 100% !important;
        max-height: 40px !important;
    }

    body.naqshat-mobile-toolbar .tf-header .header-inner .header-right {
        flex: 0 0 auto;
    }

    body.naqshat-mobile-toolbar .tf-header .nav-icon-list {
        gap: 2px;
    }

    body.naqshat-mobile-toolbar .tf-header .nav-icon-item {
        width: 32px;
        height: 40px;
    }
}