.wrs-bottom-tabbar { display: none; }

@media (max-width: 1024px) {
    :root {
        --wrs-tabbar-height: 78px;
        --wrs-tabbar-bg: var(--wrs-brand-bg);
        --wrs-tabbar-bg-2: var(--wrs-brand-surface-2);
        --wrs-tabbar-line: rgba(148, 163, 184, 0.18);
        --wrs-tabbar-muted: var(--wrs-brand-muted);
        --wrs-tabbar-active: var(--wrs-brand-text);
        --wrs-tabbar-accent: var(--wrs-brand-soft);
    }

    body.logged-in.rtcl-account {
        padding-bottom: calc(var(--wrs-tabbar-height) + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.logged-in.rtcl-account .rtcl-MyAccount-mobile-navbar {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    .wrs-bottom-tabbar {
        display: flex !important;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999998;
        height: calc(var(--wrs-tabbar-height) + env(safe-area-inset-bottom, 0px));
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
        background:
            linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(11, 15, 24, 0.99));
        border-top: 1px solid var(--wrs-tabbar-line);
        box-shadow: 0 -18px 34px rgba(0, 0, 0, 0.36);
        align-items: stretch;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-sizing: border-box;
    }

    .wrs-bottom-tabbar::-webkit-scrollbar { display: none; }

    .wrs-bottom-tabbar::before,
    .wrs-bottom-tabbar::after {
        content: '';
        flex: 0 0 2px;
    }

    .wrs-bottom-tabbar ~ .wrs-bottom-tabbar,
    .wrs-bottom-tabbar + .wrs-bottom-tabbar {
        display: none !important;
    }

    .wrs-tab-item {
        flex: 0 0 82px;
        min-width: 82px;
        max-width: 96px;
        height: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        text-decoration: none !important;
        color: var(--wrs-tabbar-muted);
        position: relative;
        border: 1px solid transparent;
        border-radius: 8px;
        background: rgba(15, 23, 42, 0.42);
        transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
        -webkit-tap-highlight-color: transparent;
        box-sizing: border-box;
        scroll-snap-align: center;
    }

    .wrs-tab-item:hover,
    .wrs-tab-item:focus,
    .wrs-tab-item:active {
        color: var(--wrs-tabbar-active);
        text-decoration: none !important;
        outline: none;
        border-color: rgba(203, 213, 225, 0.16);
        background: rgba(30, 41, 59, 0.76);
    }

    .wrs-tab-item.is-active {
        color: var(--wrs-tabbar-active);
        background: linear-gradient(145deg, rgba(51, 65, 85, 0.95), rgba(30, 41, 59, 0.95));
        border-color: rgba(203, 213, 225, 0.22);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 24px rgba(0,0,0,0.22);
    }

    .wrs-tab-item.is-active::before {
        content: '';
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 3px;
        border-radius: 999px;
        background: var(--wrs-brand-text-2);
    }

    .wrs-tab-icon,
    .wrs-tab-icon .wrs-nav-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 23px;
        height: 23px;
        min-width: 23px;
        color: inherit;
        flex: 0 0 auto;
    }

    .wrs-tab-icon svg {
        width: 20px !important;
        height: 20px !important;
        display: block;
        stroke: currentColor;
    }

    .wrs-tab-label {
        display: block;
        max-width: 74px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: inherit;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: 0;
        text-align: center;
    }

    .wrs-tab-item--cta {
        color: var(--wrs-brand-text);
        background: linear-gradient(145deg, var(--wrs-brand-surface-2), var(--wrs-brand-surface-2));
        border-color: rgba(203, 213, 225, 0.20);
    }

    .wrs-tab-item--cta .wrs-tab-icon {
        width: 27px;
        height: 27px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--wrs-brand-accent-2), var(--wrs-brand-surface-2));
        color: var(--wrs-brand-text);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32);
    }

    .wrs-tab-item--cta .wrs-tab-icon svg {
        width: 18px !important;
        height: 18px !important;
        stroke: var(--wrs-brand-text);
    }

    .wrs-tab-item--cta.is-active::before {
        background: var(--wrs-brand-text-2);
    }

    .wrs-tab-badge {
        position: absolute;
        top: 5px;
        right: 10px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--wrs-brand-danger);
        color: var(--wrs-brand-text);
        font-size: 9px;
        font-weight: 800;
        line-height: 1;
        box-shadow: 0 0 0 2px var(--wrs-tabbar-bg);
        box-sizing: border-box;
    }

    body.logged-in.rtcl-account .rtcl-MyAccount-content,
    body.logged-in.rtcl-account .rtcl-MyAccount-content-wrap,
    body.logged-in.rtcl-account .classima-myaccount,
    body.logged-in.rtcl-account #primary {
        padding-bottom: calc(var(--wrs-tabbar-height) + 32px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.logged-in.rtcl-account .scrollToTop {
        bottom: calc(var(--wrs-tabbar-height) + 16px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 380px) {
    .wrs-tab-item {
        flex-basis: 76px;
        min-width: 76px;
    }
    .wrs-tab-label { max-width: 68px; }
}

@media (min-width: 1025px) {
    .wrs-bottom-tabbar { display: none !important; }
}
