/* ==========================================================
   SimplPay Aurora Glass AI
   PATCH-SIMPLPAY-022G-03D
   Mobile Navigation + More Screen
   ========================================================== */


/* ==========================================================
   Floating Navigation
   ========================================================== */

.mobile-bottom-navigation {
    isolation: isolate;
    overflow: visible;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.78),
            rgba(255,255,255,.42)
        );

    border:
        1px solid
        rgba(255,255,255,.58);

    box-shadow:
        0 22px 60px rgba(15,23,42,.18),
        inset 0 1px 0 rgba(255,255,255,.65);

    backdrop-filter:
        blur(30px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(150%);
}


.mobile-bottom-navigation::before {
    content: "";

    position: absolute;

    inset: -1px;

    z-index: -1;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(99,102,241,.14),
            rgba(139,92,246,.08),
            rgba(6,182,212,.13)
        );

    filter: blur(16px);

    opacity: .72;
}


/* ==========================================================
   Navigation Buttons
   ========================================================== */

.mobile-nav-button {
    position: relative;

    overflow: hidden;

    min-height: 56px;

    border-radius: 17px;

    color:
        var(--sp-text-tertiary);

    transition:
        transform
        var(--sp-transition-spring),
        color
        var(--sp-transition-fast),
        background
        var(--sp-transition-fast),
        box-shadow
        var(--sp-transition-fast);
}


.mobile-nav-button::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    opacity: 0;

    background:
        var(--sp-gradient-primary-soft);

    transition:
        opacity
        var(--sp-transition-fast);
}


.mobile-nav-button:hover::before {
    opacity: 1;
}


.mobile-nav-button.active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #7c3aed,
            #06b6d4
        );

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


.mobile-nav-button.active::before {
    opacity: 0;
}


.mobile-nav-button:active {
    transform:
        scale(.94);
}


/* ==========================================================
   Nav Icon
   ========================================================== */

.mobile-nav-icon {
    position: relative;

    z-index: 2;

    transition:
        transform
        var(--sp-transition-spring),
        filter
        var(--sp-transition-fast);
}


.mobile-nav-button.active
.mobile-nav-icon {
    transform:
        translateY(-1px)
        scale(1.08);

    filter:
        drop-shadow(
            0 4px 10px
            rgba(255,255,255,.22)
        );
}


/* ==========================================================
   Nav Label
   ========================================================== */

.mobile-nav-label {
    position: relative;

    z-index: 2;

    font-weight:
        var(--sp-weight-extrabold);

    letter-spacing:
        -.01em;
}


/* ==========================================================
   Navigation Badge
   ========================================================== */

.mobile-nav-badge {
    z-index: 4;

    min-width: 18px;
    height: 18px;

    background:
        linear-gradient(
            135deg,
            #ef4444,
            #f97316
        );

    box-shadow:
        0 6px 14px rgba(239,68,68,.28);
}


/* ==========================================================
   Active Indicator
   ========================================================== */

.mobile-nav-button::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 5px;

    width: 0;
    height: 3px;

    border-radius: 999px;

    transform:
        translateX(-50%);

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

    transition:
        width
        var(--sp-transition-spring);
}


.mobile-nav-button.active::after {
    width: 22px;
}


/* ==========================================================
   More Menu Grid
   ========================================================== */

.more-menu-grid {
    gap: 13px;
}


/* ==========================================================
   More Menu Cards
   ========================================================== */

.more-menu-card {
    position: relative;

    overflow: hidden;

    min-height: 112px;

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.62),
            rgba(255,255,255,.28)
        );

    border:
        1px solid
        var(--sp-glass-border);

    box-shadow:
        0 10px 26px rgba(15,23,42,.08);

    backdrop-filter:
        blur(24px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(140%);

    transition:
        transform
        var(--sp-transition-spring),
        border-color
        var(--sp-transition-fast),
        box-shadow
        var(--sp-transition-fast),
        background
        var(--sp-transition-fast);
}


.more-menu-card::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0;

    background:
        linear-gradient(
            145deg,
            rgba(99,102,241,.10),
            rgba(139,92,246,.07),
            rgba(6,182,212,.09)
        );

    transition:
        opacity
        var(--sp-transition-fast);
}


.more-menu-card:hover {
    transform:
        translateY(-3px);

    border-color:
        var(--sp-border-primary);

    box-shadow:
        0 18px 38px rgba(79,70,229,.14);
}


.more-menu-card:hover::before {
    opacity: 1;
}


/* ==========================================================
   More Menu Icons
   ========================================================== */

.more-menu-icon {
    position: relative;

    z-index: 2;

    width: 46px;
    height: 46px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #7c3aed 48%,
            #06b6d4
        );

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

    transition:
        transform
        var(--sp-transition-spring),
        box-shadow
        var(--sp-transition-fast);
}


.more-menu-card:hover
.more-menu-icon {
    transform:
        translateY(-2px)
        scale(1.05);

    box-shadow:
        0 18px 36px rgba(79,70,229,.30);
}


/* ==========================================================
   More Menu Text
   ========================================================== */

.more-menu-card > span:not(.more-menu-icon) {
    position: relative;

    z-index: 2;

    color:
        var(--sp-text-primary);

    font-weight:
        var(--sp-weight-extrabold);
}


/* ==========================================================
   More Version Card
   ========================================================== */

.more-version-card {
    position: relative;

    overflow: hidden;

    padding: 14px;

    border-radius: 17px;

    color:
        var(--sp-text-tertiary);

    background:
        var(--sp-glass-bg-soft);

    border:
        1px solid
        var(--sp-glass-border-soft);

    box-shadow:
        var(--sp-shadow-xs);

    backdrop-filter:
        blur(18px);

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


/* ==========================================================
   More Modal
   ========================================================== */

#moreMenuModal .modal-card {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.82),
            rgba(255,255,255,.48)
        );

    backdrop-filter:
        blur(32px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(32px)
        saturate(150%);
}


/* ==========================================================
   Dark Theme
   ========================================================== */

html[data-sp-theme="dark"]
.mobile-bottom-navigation {
    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.88),
            rgba(15,23,42,.62)
        );

    border-color:
        rgba(255,255,255,.10);

    box-shadow:
        0 24px 70px rgba(0,0,0,.46),
        inset 0 1px 0 rgba(255,255,255,.06);
}


html[data-sp-theme="dark"]
.more-menu-card {
    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.74),
            rgba(15,23,42,.44)
        );

    border-color:
        rgba(255,255,255,.09);
}


html[data-sp-theme="dark"]
#moreMenuModal .modal-card {
    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.92),
            rgba(15,23,42,.68)
        );
}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 767px) {

    .mobile-bottom-navigation {
        bottom:
            max(
                10px,
                env(safe-area-inset-bottom)
            );

        width:
            min(
                calc(100% - 18px),
                520px
            );

        padding:
            7px;

        border-radius:
            25px;
    }

}


/* ==========================================================
   Small Mobile
   ========================================================== */

@media (max-width: 390px) {

    .mobile-bottom-navigation {
        width:
            calc(100% - 14px);

        padding:
            6px;
    }

    .mobile-nav-button {
        min-height: 52px;

        border-radius: 15px;
    }

    .mobile-nav-icon {
        font-size: 17px;
    }

    .mobile-nav-label {
        font-size: 8px;
    }

    .more-menu-grid {
        gap: 10px;
    }

    .more-menu-card {
        min-height: 102px;

        padding: 12px 9px;
    }

}


/* ==========================================================
   Reduced Motion
   ========================================================== */

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

    .mobile-nav-button,
    .mobile-nav-icon,
    .mobile-nav-button::after,
    .more-menu-card,
    .more-menu-card::before,
    .more-menu-icon {
        transition:
            none !important;
    }

}