/*
 * ZendaSoftware
 * ZS-6O-B1
 *
 * Premium full-screen mobile navigation,
 * theme refinement and shared scroll-to-top.
 */


/* =========================================================
 * MOBILE HEADER ACCOUNT BUTTON
 * ========================================================= */

.zenda-mobile-access-trigger {
    display: none;
}


@media (max-width: 1023px) {

    .zenda-mobile-access-trigger {
        display: grid;
        place-items: center;

        width: 40px;
        min-width: 40px;

        height: 40px;
        min-height: 40px;

        padding: 0;

        border:
            1px solid var(
                --line-2,
                rgba(148, 163, 184, .24)
            );

        border-radius: 12px;

        color:
            var(--fg);

        background:
            linear-gradient(
                145deg,
                rgba(124, 92, 255, .10),
                rgba(34, 211, 238, .035)
            ),
            var(--surface);

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.05),
            0 8px 24px rgba(15, 23, 42, .08);

        cursor: pointer;

        transition:
            transform .2s ease,
            border-color .2s ease,
            background .2s ease,
            box-shadow .2s ease;
    }


    .zenda-mobile-access-trigger:hover,
    .zenda-mobile-access-trigger:focus-visible {
        transform:
            translateY(-1px);

        border-color:
            rgba(129, 140, 248, .46);

        background:
            rgba(99, 102, 241, .11);

        box-shadow:
            0 12px 30px rgba(79, 70, 229, .13);

        outline:
            none;
    }


    .zenda-mobile-access-trigger i {
        font-size: 16px;
    }

}


/* =========================================================
 * FULL-SCREEN MENU SHELL
 * ========================================================= */

@media (max-width: 1023px) {

    #mobile-menu {
        position:
            fixed !important;

        inset:
            0 !important;

        z-index:
            120 !important;

        width:
            100% !important;

        height:
            100dvh;

        min-height:
            100vh;

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;

        background:
            rgba(5, 4, 14, .76);

        transition:
            opacity .26s ease,
            visibility .26s ease;
    }


    #mobile-menu.open {
        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;
    }


    #mobile-backdrop {
        position:
            absolute !important;

        inset:
            0 !important;

        background:
            radial-gradient(
                circle at 78% 6%,
                rgba(99, 102, 241, .24),
                transparent 32%
            ),
            radial-gradient(
                circle at 10% 92%,
                rgba(34, 211, 238, .11),
                transparent 34%
            ),
            rgba(5, 4, 14, .82) !important;

        backdrop-filter:
            blur(18px) !important;

        -webkit-backdrop-filter:
            blur(18px) !important;
    }


    #mobile-panel {
        position:
            absolute !important;

        inset:
            0 !important;

        width:
            100% !important;

        max-width:
            none !important;

        height:
            100dvh !important;

        min-height:
            100vh;

        border:
            0 !important;

        border-radius:
            0 !important;

        overflow:
            hidden;

        background:
            radial-gradient(
                circle at 85% 0%,
                rgba(99, 102, 241, .12),
                transparent 35%
            ),
            linear-gradient(
                180deg,
                rgba(255,255,255,.025),
                transparent 20%
            ),
            var(--bg, #090711) !important;

        box-shadow:
            none !important;

        isolation:
            isolate;

        will-change:
            transform;
    }


    #mobile-panel::before {
        content:
            "";

        position:
            absolute;

        z-index:
            -1;

        width:
            260px;

        aspect-ratio:
            1;

        top:
            18%;

        inset-inline-end:
            -150px;

        border-radius:
            999px;

        pointer-events:
            none;

        background:
            radial-gradient(
                circle,
                rgba(99, 102, 241, .18),
                transparent 70%
            );
    }


    #mobile-panel::after {
        content:
            "";

        position:
            absolute;

        z-index:
            -1;

        width:
            250px;

        aspect-ratio:
            1;

        bottom:
            -150px;

        inset-inline-start:
            -130px;

        border-radius:
            999px;

        pointer-events:
            none;

        background:
            radial-gradient(
                circle,
                rgba(34, 211, 238, .10),
                transparent 70%
            );
    }

}


/* =========================================================
 * MOBILE TOP BAR
 * ========================================================= */

@media (max-width: 1023px) {

    #mobile-panel
    .zenda-mobile-topbar {
        min-height:
            72px !important;

        height:
            auto !important;

        padding:
            max(12px, env(safe-area-inset-top))
            20px
            12px !important;

        border-bottom:
            1px solid rgba(148,163,184,.12) !important;

        background:
            rgba(9, 7, 17, .70);

        backdrop-filter:
            blur(20px);

        -webkit-backdrop-filter:
            blur(20px);
    }


    #mobile-panel
    .zenda-mobile-topbar img {
        max-width:
            155px;

        height:
            28px !important;

        object-fit:
            contain;
    }


    #mobile-close {
        width:
            42px !important;

        height:
            42px !important;

        border-radius:
            13px !important;

        border-color:
            rgba(148, 163, 184, .20) !important;

        background:
            rgba(255,255,255,.035);

        transition:
            transform .22s ease,
            border-color .22s ease,
            background .22s ease;
    }


    #mobile-close:hover,
    #mobile-close:focus-visible {
        transform:
            rotate(4deg)
            scale(1.03);

        border-color:
            rgba(129, 140, 248, .42) !important;

        background:
            rgba(99,102,241,.10);

        outline:
            none;
    }

}


/* =========================================================
 * MOBILE SCROLLING BODY
 * ========================================================= */

@media (max-width: 1023px) {

    #mobile-panel
    .zenda-mobile-body {
        flex:
            1 1 auto;

        min-height:
            0;

        overflow-y:
            auto !important;

        overscroll-behavior:
            contain;

        scrollbar-width:
            thin;

        scrollbar-color:
            rgba(129,140,248,.30)
            transparent;

        padding:
            18px
            18px
            calc(
                30px
                + env(safe-area-inset-bottom)
            )
            !important;
    }


    #mobile-panel
    .zenda-mobile-body::-webkit-scrollbar {
        width:
            5px;
    }


    #mobile-panel
    .zenda-mobile-body::-webkit-scrollbar-thumb {
        background:
            rgba(129,140,248,.30);

        border-radius:
            999px;
    }

}


/* =========================================================
 * MOBILE HERO / INTRO
 * ========================================================= */

.zenda-mobile-intro {
    display:
        none;
}


@media (max-width: 1023px) {

    .zenda-mobile-intro {
        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            16px;

        margin-bottom:
            14px;

        padding:
            16px;

        border:
            1px solid rgba(129, 140, 248, .20);

        border-radius:
            20px;

        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(99,102,241,.13),
                transparent 44%
            ),
            rgba(255,255,255,.025);

        box-shadow:
            0 20px 55px rgba(5,5,18,.12);
    }


    .zenda-mobile-intro-icon {
        display:
            grid;

        place-items:
            center;

        flex:
            0 0 auto;

        width:
            46px;

        height:
            46px;

        border-radius:
            14px;

        background:
            linear-gradient(
                145deg,
                rgba(99,102,241,.24),
                rgba(34,211,238,.10)
            );

        color:
            #c7d2fe;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.08);
    }


    .zenda-mobile-intro-title {
        margin:
            0;

        font-size:
            15px;

        font-weight:
            800;

        color:
            var(--fg);
    }


    .zenda-mobile-intro-copy {
        margin:
            3px 0 0;

        color:
            var(--fg-3);

        font-size:
            11px;

        line-height:
            1.5;
    }

}


/* =========================================================
 * MOBILE ACCORDION SECTIONS
 * ========================================================= */

@media (max-width: 1023px) {

    #mobile-panel
    .zenda-mobile-section {
        margin:
            10px 0;

        overflow:
            hidden;

        border:
            1px solid rgba(148,163,184,.13);

        border-radius:
            18px;

        background:
            rgba(255,255,255,.022);

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.025);
    }


    #mobile-panel
    .zenda-mobile-section
    > button {
        min-height:
            56px;

        padding:
            13px 15px !important;

        border-radius:
            0 !important;

        background:
            transparent !important;
    }


    #mobile-panel
    .zenda-mobile-section
    > button:hover,

    #mobile-panel
    .zenda-mobile-section
    > button:focus-visible {
        background:
            rgba(99,102,241,.075) !important;

        outline:
            none;
    }


    #mobile-panel
    .zenda-mobile-section
    > button
    > span:first-child
    > i {
        display:
            grid;

        place-items:
            center;

        width:
            30px;

        height:
            30px;

        border-radius:
            9px;

        color:
            #a5b4fc !important;

        background:
            rgba(99,102,241,.11);
    }


    #mobile-panel
    .zenda-mobile-section
    [data-acc-panel] {
        padding:
            3px 8px 10px !important;

        margin:
            0 !important;
    }


    #mobile-panel
    .zenda-mobile-section
    [data-acc-panel]:not(.hidden) {
        display:
            grid;

        grid-template-columns:
            minmax(0,1fr);

        gap:
            6px;
    }


    #mobile-panel
    .zenda-mobile-section
    [data-acc-panel]
    > a {
        min-height:
            48px;

        padding:
            11px 12px !important;

        border:
            1px solid transparent;

        border-radius:
            13px !important;

        background:
            rgba(255,255,255,.018);

        transition:
            transform .18s ease,
            border-color .18s ease,
            background .18s ease;
    }


    #mobile-panel
    .zenda-mobile-section
    [data-acc-panel]
    > a:hover,

    #mobile-panel
    .zenda-mobile-section
    [data-acc-panel]
    > a:focus-visible {
        transform:
            translateY(-1px);

        border-color:
            rgba(129,140,248,.21);

        background:
            rgba(99,102,241,.07);

        outline:
            none;
    }

}


@media (min-width: 640px) and (max-width: 1023px) {

    #mobile-panel
    .zenda-mobile-section
    [data-acc-panel]:not(.hidden) {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


/* =========================================================
 * COMPLETE MOBILE ACCESS GRID
 * ========================================================= */

@media (max-width: 1023px) {

    .zenda-mobile-access-section {
        border-color:
            rgba(99,102,241,.25) !important;

        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(99,102,241,.10),
                transparent 48%
            ),
            rgba(255,255,255,.022) !important;
    }


    .zenda-mobile-access-grid {
        display:
            grid !important;

        grid-template-columns:
            minmax(0,1fr);

        gap:
            7px;

        padding:
            8px !important;
    }


    .zenda-mobile-access-item {
        display:
            flex !important;

        align-items:
            center;

        gap:
            11px;

        min-width:
            0;

        min-height:
            58px;

        padding:
            10px 12px !important;

        border:
            1px solid rgba(148,163,184,.11);

        border-radius:
            14px;

        background:
            rgba(255,255,255,.025);

        color:
            var(--fg);

        text-decoration:
            none;

        transition:
            transform .2s ease,
            border-color .2s ease,
            background .2s ease;
    }


    .zenda-mobile-access-item:hover,

    .zenda-mobile-access-item:focus-visible {
        transform:
            translateY(-2px);

        border-color:
            rgba(129,140,248,.27);

        background:
            rgba(99,102,241,.075);

        outline:
            none;
    }


    .zenda-mobile-access-item
    > span:first-child {
        width:
            38px !important;

        min-width:
            38px;

        height:
            38px !important;

        border-radius:
            11px !important;
    }


    .zenda-mobile-access-item
    .font-semibold {
        font-size:
            12px !important;
    }


    .zenda-mobile-access-item
    .text-fg-2 {
        display:
            block;

        margin-top:
            2px;

        font-size:
            10px !important;

        line-height:
            1.35;
    }

}


@media (min-width: 640px) and (max-width: 1023px) {

    .zenda-mobile-access-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


/* =========================================================
 * MOBILE UTILITY DOCK
 * ========================================================= */

.zenda-mobile-utility {
    display:
        none;
}


@media (max-width: 1023px) {

    .zenda-mobile-utility {
        display:
            block;

        margin-top:
            14px;

        padding:
            15px;

        border:
            1px solid rgba(148,163,184,.13);

        border-radius:
            20px;

        background:
            linear-gradient(
                145deg,
                rgba(99,102,241,.07),
                rgba(34,211,238,.025)
            );

        box-shadow:
            0 18px 55px rgba(5,5,18,.10);
    }


    .zenda-mobile-utility-title {
        margin-bottom:
            9px;

        color:
            var(--fg-3);

        font-size:
            10px;

        font-weight:
            800;

        letter-spacing:
            .12em;

        text-transform:
            uppercase;
    }


    .zenda-mobile-language-grid {
        display:
            grid;

        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );

        gap:
            7px;
    }


    .zenda-mobile-language {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            7px;

        min-width:
            0;

        min-height:
            64px;

        padding:
            8px 5px;

        border:
            1px solid rgba(148,163,184,.11);

        border-radius:
            13px;

        background:
            rgba(255,255,255,.022);

        color:
            var(--fg-2);

        text-decoration:
            none;

        font-size:
            9px;

        font-weight:
            700;

        transition:
            border-color .2s ease,
            background .2s ease,
            transform .2s ease;
    }


    .zenda-mobile-language:hover,

    .zenda-mobile-language:focus-visible,

    .zenda-mobile-language.is-active {
        transform:
            translateY(-1px);

        border-color:
            rgba(129,140,248,.34);

        background:
            rgba(99,102,241,.09);

        color:
            var(--fg);

        outline:
            none;
    }


    .zenda-mobile-language img {
        display:
            block;

        width:
            29px;

        height:
            19px;

        object-fit:
            cover;

        border-radius:
            5px;

        box-shadow:
            0 0 0 1px rgba(148,163,184,.14);
    }


    .zenda-mobile-theme-row {
        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            8px;

        margin-top:
            12px;
    }


    .zenda-mobile-theme-button {
        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            8px;

        min-height:
            44px;

        padding:
            8px 12px;

        border:
            1px solid rgba(148,163,184,.13);

        border-radius:
            13px;

        background:
            rgba(255,255,255,.025);

        color:
            var(--fg-2);

        font-size:
            11px;

        font-weight:
            750;

        cursor:
            pointer;

        transition:
            border-color .2s ease,
            background .2s ease,
            color .2s ease,
            transform .2s ease;
    }


    .zenda-mobile-theme-button:hover,

    .zenda-mobile-theme-button:focus-visible {
        transform:
            translateY(-1px);

        border-color:
            rgba(129,140,248,.30);

        color:
            var(--fg);

        outline:
            none;
    }


    .zenda-mobile-theme-button.is-active {
        border-color:
            rgba(129,140,248,.42);

        background:
            rgba(99,102,241,.11);

        color:
            #c7d2fe;
    }


    .zenda-mobile-support {
        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            9px;

        min-height:
            49px;

        margin-top:
            12px;

        border:
            1px solid rgba(129,140,248,.30);

        border-radius:
            15px;

        background:
            linear-gradient(
                135deg,
                #6754e8,
                #765af4 50%,
                #5143ce
            );

        color:
            #fff;

        text-decoration:
            none;

        font-size:
            12px;

        font-weight:
            800;

        box-shadow:
            0 14px 35px rgba(99,102,241,.23);

        transition:
            transform .2s ease,
            box-shadow .2s ease;
    }


    .zenda-mobile-support:hover,

    .zenda-mobile-support:focus-visible {
        transform:
            translateY(-2px);

        box-shadow:
            0 19px 42px rgba(99,102,241,.30);

        outline:
            none;
    }

}


/* =========================================================
 * PREMIUM THEME CONTROLS
 * ========================================================= */

[data-theme-value="light"] i.fa-sun-bright {
    color:
        #f59e0b;
}

[data-theme-value="dark"] i.fa-moon-stars {
    color:
        #a5b4fc;
}


[data-theme-value="light"],
[data-theme-value="dark"] {
    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease;
}


[data-theme-value="light"]:hover i,
[data-theme-value="dark"]:hover i {
    transform:
        rotate(-7deg)
        scale(1.08);
}


[data-theme-value="light"] i,
[data-theme-value="dark"] i {
    transition:
        transform .25s cubic-bezier(.2,.8,.2,1);
}


/* =========================================================
 * HOME PREMIUM SCROLL TO TOP
 * ========================================================= */

.zenda-b1-scrolltop {
    --zenda-scroll:
        0;

    position:
        fixed !important;

    z-index:
        72 !important;

    inset-inline-start:
        20px !important;

    inset-inline-end:
        auto !important;

    bottom:
        20px !important;

    display:
        grid !important;

    place-items:
        center;

    width:
        46px !important;

    height:
        46px !important;

    padding:
        0 !important;

    overflow:
        visible;

    border:
        0 !important;

    border-radius:
        999px !important;

    background:
        rgba(14, 12, 24, .82) !important;

    color:
        var(--fg) !important;

    box-shadow:
        0 16px 42px rgba(5,5,18,.24),
        inset 0 1px 0 rgba(255,255,255,.05);

    opacity:
        0 !important;

    visibility:
        hidden;

    pointer-events:
        none !important;

    transform:
        translateY(10px)
        scale(.94);

    transition:
        opacity .24s ease,
        transform .24s ease,
        visibility .24s ease !important;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.zenda-b1-scrolltop.is-visible {
    opacity:
        1 !important;

    visibility:
        visible;

    pointer-events:
        auto !important;

    transform:
        translateY(0)
        scale(1);
}


.zenda-b1-scrolltop:hover,

.zenda-b1-scrolltop:focus-visible {
    transform:
        translateY(-2px)
        scale(1.03);

    outline:
        none;
}


.zenda-b1-scrolltop-svg {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    transform:
        rotate(-90deg);

    pointer-events:
        none;
}


.zenda-b1-scrolltop-track,

.zenda-b1-scrolltop-value {
    fill:
        none;

    stroke-width:
        2.2;
}


.zenda-b1-scrolltop-track {
    stroke:
        rgba(148,163,184,.16);
}


.zenda-b1-scrolltop-value {
    stroke:
        url(#zenda-b1-scroll-gradient);

    stroke-linecap:
        round;

    stroke-dasharray:
        100;

    stroke-dashoffset:
        calc(
            100
            - var(--zenda-scroll)
        );

    transition:
        stroke-dashoffset .12s linear;
}


.zenda-b1-scrolltop-icon {
    position:
        relative;

    z-index:
        1;

    display:
        grid;

    place-items:
        center;

    width:
        31px;

    height:
        31px;

    border-radius:
        999px;

    background:
        rgba(99,102,241,.08);

    font-size:
        12px;

    color:
        #c7d2fe;
}


.zenda-b1-scrolltop-tooltip {
    position:
        absolute;

    inset-inline-start:
        calc(100% + 10px);

    top:
        50%;

    transform:
        translateY(-50%)
        translateX(-4px);

    padding:
        7px 9px;

    border:
        1px solid rgba(148,163,184,.14);

    border-radius:
        9px;

    background:
        rgba(13,10,26,.94);

    color:
        #fff;

    font-size:
        10px;

    font-weight:
        700;

    white-space:
        nowrap;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity .18s ease,
        transform .18s ease;
}


.zenda-b1-scrolltop:hover
.zenda-b1-scrolltop-tooltip,

.zenda-b1-scrolltop:focus-visible
.zenda-b1-scrolltop-tooltip {
    opacity:
        1;

    transform:
        translateY(-50%)
        translateX(0);
}


html[dir="rtl"]
.zenda-b1-scrolltop {
    inset-inline-start:
        20px !important;

    inset-inline-end:
        auto !important;
}


/* =========================================================
 * MOBILE / MOTION SAFETY
 * ========================================================= */

@media (max-width: 520px) {

    .zenda-mobile-language-grid {
        gap:
            5px;
    }


    .zenda-mobile-language {
        min-height:
            59px;

        padding:
            7px 3px;
    }


    .zenda-mobile-language span {
        max-width:
            62px;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }

}


@media (prefers-reduced-motion: reduce) {

    #mobile-menu,

    #mobile-panel,

    .zenda-mobile-access-trigger,

    .zenda-mobile-section a,

    .zenda-mobile-theme-button,

    .zenda-mobile-support,

    .zenda-b1-scrolltop,

    [data-theme-value] i {
        transition:
            none !important;
    }

}