/* Client top navigation shell. Admin pages do not load this file. */
:root {
    --cs-topbar-h: 68px;
    /* Keep every client surface on the same centered content frame. */
    --cs-client-max: 1440px;
    --cs-home-max: 1440px;
    --cs-nav-red: #ee4d2d;
    --cs-nav-red-dark: #d93b1d;
    --cs-nav-focus: #2563eb;
}

body.cs-body {
    min-width: 320px;
}

body.cs-body ::selection {
    background: rgba(238, 77, 45, 0.22);
    color: #111827;
}

.cs-topbar {
    height: var(--cs-topbar-h);
    padding: 0 20px;
    background: var(--cs-nav-red);
    box-shadow: 0 2px 10px rgba(126, 36, 16, 0.16);
}

.cs-topbar-inner {
    max-width: var(--cs-home-max);
    height: 100%;
    margin: 0 auto;
    gap: 22px;
}

.cs-logo {
    flex: 0 0 auto;
}

.cs-logo a {
    display: flex;
    align-items: center;
    height: 48px;
}

.cs-logo img {
    width: auto;
    max-width: 158px;
    max-height: 42px;
    object-fit: contain;
}

.cs-desktop-nav {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 4px;
    min-width: 0;
}

.cs-topnav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font: inherit;
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.cs-topnav-link > i:first-child {
    font-size: 15px;
}

.cs-topnav-link:hover,
.cs-topnav-link:focus-visible,
.cs-topnav-link.active,
.cs-nav-wrap.open > .cs-topnav-link {
    color: #fff;
    background: rgba(255, 255, 255, 0.17);
    text-decoration: none;
}

.cs-topnav-link:focus-visible,
.cs-hamburger:focus-visible,
.cs-sidebar-close:focus-visible,
.cs-bottom-nav a:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
}

.cs-topnav-button {
    appearance: none;
}

.cs-nav-chevron {
    margin-left: 1px;
    font-size: 9px;
    transition: transform 160ms ease;
}

.cs-nav-wrap {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
}

.cs-nav-wrap.open .cs-nav-chevron {
    transform: rotate(180deg);
}

.cs-nav-menu {
    display: none;
    position: absolute;
    top: calc(100% - 5px);
    left: 0;
    width: 310px;
    padding: 7px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
    z-index: var(--cs-z-dropdown);
}

.cs-nav-wrap.open .cs-nav-menu {
    display: block;
    animation: csNavIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cs-nav-menu-wide {
    width: 340px;
}

.cs-nav-menu a {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 8px 10px;
    border-radius: 6px;
    color: #1f2937;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}

.cs-nav-menu a:hover,
.cs-nav-menu a:focus-visible {
    background: #fff1ed;
    color: var(--cs-nav-red-dark);
    outline: none;
}

.cs-nav-menu a > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 7px;
    background: #fff1ed;
    color: var(--cs-nav-red);
    font-size: 16px;
}

.cs-nav-menu a span {
    min-width: 0;
}

.cs-nav-menu a b,
.cs-nav-menu a small {
    display: block;
    letter-spacing: 0;
}

.cs-nav-menu a b {
    font-size: 13.5px;
    line-height: 1.3;
}

.cs-nav-menu a small {
    margin-top: 3px;
    color: #64748b;
    font-size: 11.5px;
    line-height: 1.3;
}

.cs-nav-menu a em {
    padding: 3px 5px;
    border-radius: 4px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
}

.cs-topbar-right {
    margin-left: auto;
    gap: 8px;
    flex: 0 0 auto;
}

.cs-balance-btn {
    min-height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: #fff;
    color: var(--cs-nav-red-dark);
    box-shadow: none;
}

.cs-balance-btn:hover {
    background: #fff7f4;
    color: #b72d12;
}

.cs-topbar-icon,
.cs-user-trigger,
.cs-lang-select {
    border-color: rgba(255, 255, 255, 0.28);
}

.cs-body-grid {
    min-height: calc(100vh - var(--cs-topbar-h));
    padding-top: var(--cs-topbar-h);
}

.cs-main,
body.cs-sidebar-collapsed .cs-main {
    margin-left: 0;
    padding: 24px clamp(16px, 2.2vw, 36px);
}

.cs-content {
    width: 100%;
    max-width: var(--cs-client-max);
    margin-inline: auto;
    align-self: center;
}

body.cs-layout-home .cs-content {
    max-width: var(--cs-home-max);
}

.cs-sidebar {
    display: none;
}

.cs-backdrop {
    display: none;
}

.cs-bottom-nav {
    display: none;
}

@keyframes csNavIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1260px) {
    .cs-topbar-inner { gap: 12px; }
    .cs-desktop-nav { gap: 1px; }
    .cs-topnav-link { padding-inline: 9px; font-size: 12.5px; }
    .cs-lang-select { display: none; }
    .cs-user-trigger .cs-uname { display: none; }
}

@media (max-width: 991.98px) {
    :root { --cs-topbar-h: 60px; }

    body.cs-body {
        padding-bottom: 66px;
    }

    .cs-topbar {
        padding-inline: 12px;
    }

    .cs-topbar-inner {
        gap: 10px;
    }

    .cs-desktop-nav {
        display: none;
    }

    .cs-hamburger {
        display: inline-flex;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }

    .cs-logo img {
        max-width: 132px;
        max-height: 36px;
    }

    .cs-topbar-right {
        gap: 5px;
    }

    .cs-lang-select {
        display: none;
    }

    .cs-sidebar.cs-mobile-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0 auto 0 0;
        width: min(86vw, 340px);
        height: 100dvh;
        padding: 0;
        transform: translateX(-102%);
        background: #fff;
        box-shadow: 12px 0 32px rgba(15, 23, 42, 0.2);
        overflow: hidden;
        z-index: var(--cs-z-drawer);
        transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .cs-sidebar.cs-mobile-drawer.show {
        transform: translateX(0);
    }

    .cs-mobile-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 64px;
        padding: 10px 14px;
        background: var(--cs-nav-red);
    }

    .cs-mobile-brand {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .cs-mobile-brand img {
        max-width: 148px;
        max-height: 40px;
        object-fit: contain;
    }

    .cs-sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
        font-size: 18px;
    }

    .cs-mobile-wallet {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 3px 12px;
        margin: 14px 14px 4px;
        padding: 12px;
        border: 1px solid #fed7cc;
        border-radius: 8px;
        background: #fff7f4;
    }

    .cs-mobile-wallet span {
        color: #64748b;
        font-size: 12px;
    }

    .cs-mobile-wallet strong {
        grid-column: 1;
        color: #991b1b;
        font-size: 17px;
        font-variant-numeric: tabular-nums;
    }

    .cs-mobile-wallet a {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        padding: 8px 10px;
        border-radius: 6px;
        background: var(--cs-nav-red);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
    }

    .cs-mobile-menu-scroll {
        flex: 1;
        padding: 4px 10px 24px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .cs-mobile-group {
        padding: 10px 4px 4px;
        border-bottom: 1px solid #f1f5f9;
    }

    .cs-mobile-group:last-child {
        border-bottom: 0;
    }

    .cs-mobile-group-title {
        padding: 0 10px 6px;
        color: #64748b;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .cs-mobile-link {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) auto;
        align-items: center;
        gap: 9px;
        min-height: 48px;
        padding: 5px 8px;
        border-radius: 7px;
        color: #334155;
        font-size: 13.5px;
        font-weight: 650;
        text-decoration: none;
    }

    .cs-mobile-link:hover,
    .cs-mobile-link.active {
        background: #fff1ed;
        color: var(--cs-nav-red-dark);
        text-decoration: none;
    }

    .cs-mobile-link-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 7px;
        background: #f8fafc;
        color: #475569;
    }

    .cs-mobile-link.active .cs-mobile-link-icon {
        background: #ffe4dc;
        color: var(--cs-nav-red);
    }

    .cs-mobile-badge {
        padding: 3px 5px;
        border-radius: 4px;
        background: #e2e8f0;
        color: #475569;
        font-size: 9px;
        font-weight: 850;
    }

    .cs-mobile-badge.is-hot { background: #fee2e2; color: #dc2626; }
    .cs-mobile-badge.is-new { background: #dcfce7; color: #15803d; }
    .cs-mobile-badge.is-bot { background: #dbeafe; color: #1d4ed8; }

    .cs-backdrop.show {
        display: block;
        opacity: 1;
        background: rgba(15, 23, 42, 0.52);
        backdrop-filter: none;
    }

    .cs-bottom-nav {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(62px + env(safe-area-inset-bottom));
        padding: 5px 6px env(safe-area-inset-bottom);
        border-top: 1px solid #e5e7eb;
        background: #fff;
        box-shadow: 0 -5px 18px rgba(15, 23, 42, 0.08);
        z-index: 1025;
    }

    .cs-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        border-radius: 6px;
        color: #64748b;
        font-size: 10px;
        font-weight: 650;
        line-height: 1;
        text-decoration: none;
    }

    .cs-bottom-nav a i {
        font-size: 18px;
    }

    .cs-bottom-nav a.active {
        background: #fff1ed;
        color: var(--cs-nav-red);
    }

    .cs-main,
    body.cs-sidebar-collapsed .cs-main {
        padding: 16px 12px 24px;
    }
}

@media (max-width: 575.98px) {
    .cs-logo img {
        max-width: 112px;
    }

    .cs-balance-btn {
        min-width: 38px;
        padding-inline: 10px;
    }

    .cs-balance-label,
    .cs-user-trigger .cs-uname {
        display: none;
    }

    .cs-user-trigger {
        padding: 3px;
    }

    .cs-user-trigger > i {
        display: none;
    }
}

@media (max-width: 390px) {
    .cs-topbar-inner { gap: 6px; }
    .cs-logo img { max-width: 96px; }
    .cs-topbar-icon { width: 34px; height: 34px; }
    .cs-user-trigger img { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-nav-menu,
    .cs-sidebar.cs-mobile-drawer,
    .cs-nav-chevron {
        animation: none;
        transition: none;
    }
}