/* ============================================================
   sidebar.css  —  Sidebar navigation + nested menu
   ============================================================ */


/* ── SIDEBAR SHELL ──────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-w);
    background: var(--bg2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: var(--p-3) var(--p-2);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Allow lang dropdown to escape sidebar clipping */
.sidebar.lang-open {
    overflow: visible;
}

/* Keep nav scrollable; hide overflows on other sections when lang-open */
.sidebar.lang-open .sidebar-nav {
    overflow: hidden;
}

.sidebar.expanded {
    width: var(--sidebar-w-exp);
}

.sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom,
            transparent 0%,
            var(--border2) 20%,
            var(--border2) 80%,
            transparent 100%);
    pointer-events: none;
}


/* ── TOGGLE BUTTON ──────────────────────────────────────── */
.sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-10);
    height: var(--size-10);
    min-width: var(--size-10);
    border-radius: var(--radius-lg);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text3);
    transition: background 0.18s, color 0.18s;
    padding: 0;
    flex-shrink: 0;
}

.sidebar-toggle:hover {
    background: var(--surface);
    color: var(--text2);
}

.sidebar-toggle svg {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
    flex-shrink: 0;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

#root.sidebar-open .sidebar-toggle svg {
    transform: rotate(180deg);
}


/* ── LOGO ROW ───────────────────────────────────────────── */
.sidebar-logo {
    width: var(--size-9);
    height: var(--size-9);
    background: var(--accent);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    font-weight: var(--font-weight-black);
    color: white;
    flex-shrink: 0;
}

.sidebar-logo-text {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    max-width: 0;
    transition: opacity 0.2s 0.05s, max-width 0.25s;
    color: var(--text);
}

.sidebar.expanded .sidebar-logo-text {
    opacity: 1;
    max-width: calc(var(--spacing) * 35);
    margin-left: var(--m-2);
}

.sidebar-logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 calc(var(--spacing) * 0.5);
    margin-bottom: var(--m-3);
    overflow: hidden;
}

.sidebar.expanded .sidebar-logo-row {
    justify-content: unset;
}


/* ── NAV ITEMS ──────────────────────────────────────────── */
.sidebar-nav {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-2);
    overflow-y: auto;
    scrollbar-width: none;
}

.sidebar-nav::-webkit-scrollbar {
    display: none;
}

.sidebar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--size-10);
    border-radius: var(--radius-lg);
    padding: 0 var(--p-2);
    gap: var(--gap-2);
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    color: var(--text3);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.sidebar.expanded .sidebar-item {
    justify-content: unset;
}

.sidebar-item:hover {
    background: var(--surface);
    color: var(--text2);
}

.sidebar-item.active {
    background: var(--surface2);
    color: var(--text);
}

.sidebar-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 3px;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
}

.sidebar-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
    width: var(--size-11);
    min-width: var(--size-11);
    text-align: center;
}

/* Sidebar icon size */
.sidebar-icon.material-symbols-rounded {
    font-size: var(--text-lg);
}

/* Smaller size for chevrons and small icons */
.sidebar-chevron.material-symbols-rounded,
.sidebar-sub-chevron.material-symbols-rounded,
.lang-chevron.material-symbols-rounded,
.sidebar-affiliate-btn__arrow.material-symbols-rounded {
    font-size: var(--text-base);
}

.sidebar-label {
    display: none;
    opacity: 0;
    max-width: 0;
    transition: opacity 0.2s 0.05s, max-width 0.25s;
    overflow: hidden;
}

.sidebar.expanded .sidebar-label {
    display: unset;
    opacity: 1;
    max-width: calc(var(--spacing) * 37.5);
}

.sidebar-badge {
    display: none;
    margin-left: auto;
    background: var(--accent);
    color: white;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-bold);
    padding: var(--p-1);
    border-radius: var(--radius-lg);
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.sidebar.expanded .sidebar-badge {
    display: unset;
    opacity: 1;
}

.sidebar-divider {
    width: 100%;
    height: 1px;
    background: var(--border);
    margin: var(--m-2) 0;
}

.sidebar-bottom {
    margin-top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
}


/* ── SIDEBAR AFFILIATE BUTTON ────────────────────────────── */
.sidebar-affiliate-btn {
    width: 100%;
    background: color-mix(in oklch, var(--color-green-950) 80%, var(--bg2));
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    padding: var(--p-1);
    display: flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    margin-bottom: calc(var(--spacing) * 0.5);
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
    flex-shrink: 0;
    justify-content: center;
}

.sidebar-affiliate-btn:hover {
    border: 1px solid color-mix(in oklch, var(--color-green-500) 25%, transparent);
    background: color-mix(in oklch, var(--color-green-950) 90%, var(--bg2));
}

.sidebar.expanded .sidebar-affiliate-btn {
    justify-content: flex-start;
    padding: var(--p-1);
}

.sidebar-affiliate-btn::before {
    content: '';
    position: absolute;
    top: calc(var(--spacing) * -5);
    right: calc(var(--spacing) * -5);
    width: calc(var(--spacing) * 17.5);
    height: calc(var(--spacing) * 17.5);
    background: radial-gradient(circle,
            color-mix(in oklch, var(--color-green-500) 18%, transparent) 0%,
            transparent 70%);
    pointer-events: none;
}

.sidebar-affiliate-btn__icon {
    width: var(--size-10);
    min-width: var(--size-10);
    height: var(--size-10);
    background: color-mix(in oklch, var(--color-green-500) 14%, transparent);
    border: 1px solid color-mix(in oklch, var(--color-green-500) 28%, transparent);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.2s;
}

.sidebar-affiliate-btn:hover .sidebar-affiliate-btn__icon {
    background: color-mix(in oklch, var(--color-green-500) 22%, transparent);
    transform: scale(1.07);
}

.sidebar-affiliate-btn__text {
    overflow: hidden;
    opacity: 0;
    max-width: 0;
    transition: opacity 0.2s 0.05s, max-width 0.25s, margin-left 0.25s;
}

.sidebar.expanded .sidebar-affiliate-btn__text {
    opacity: 1;
    max-width: calc(var(--spacing) * 40);
    margin-left: calc(var(--spacing) * 2.25);
}

.sidebar-affiliate-btn__title {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-green-400);
    white-space: nowrap;
}

.sidebar-affiliate-btn__subtitle {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: color-mix(in oklch, var(--color-green-400) 60%, transparent);
    white-space: nowrap;
}

.sidebar-affiliate-btn__arrow {
    margin-left: auto;
    font-size: var(--text-xs);
    color: color-mix(in oklch, var(--color-green-400) 50%, transparent);
    flex-shrink: 0;
    opacity: 0;
    display: none;
    transition: opacity 0.15s;
}

.sidebar.expanded .sidebar-affiliate-btn__arrow {
    opacity: 1;
    display: unset;
}


/* ── SIDEBAR DOWNLOAD APP BUTTON ─────────────────────────── */
.sidebar-download-app-btn {
    width: 100%;
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    margin-bottom: calc(var(--spacing) * 0.5);
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s;
    flex-shrink: 0;
    justify-content: center;
}

.sidebar-download-app-btn:hover {
    border-color: var(--border2);
    background: var(--surface2);
}

.sidebar.expanded .sidebar-download-app-btn {
    justify-content: flex-start;
    border: 1px solid var(--border);
    padding: var(--p-1);
}

.sidebar-download-app-btn__icon {
    width: var(--size-10);
    min-width: var(--size-10);
    height: var(--size-10);
    background: color-mix(in oklch, var(--color-blue-500) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--color-blue-500) 22%, transparent);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    flex-shrink: 0;
    transition: background 0.2s, transform 0.2s;
}

.sidebar-download-app-btn:hover .sidebar-download-app-btn__icon {
    background: color-mix(in oklch, var(--color-blue-500) 20%, transparent);
    transform: scale(1.07);
}

.sidebar-download-app-btn__text {
    overflow: hidden;
    opacity: 0;
    max-width: 0;
    transition: opacity 0.2s 0.05s, max-width 0.25s, margin-left 0.25s;
}

.sidebar.expanded .sidebar-download-app-btn__text {
    opacity: 1;
    max-width: calc(var(--spacing) * 40);
    margin-left: calc(var(--spacing) * 2.25);
}

.sidebar-download-app-btn__title {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--text);
    white-space: nowrap;
}

.sidebar-download-app-btn__subtitle {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--text3);
    white-space: nowrap;
}

.sidebar-download-app-btn__badge {
    margin-left: auto;
    flex-shrink: 0;
    background: var(--accent);
    color: white;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-bold);
    padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.75);
    border-radius: var(--radius-lg);
    opacity: 0;
    transition: opacity 0.15s;
    white-space: nowrap;
    display: none;
}

.sidebar.expanded .sidebar-download-app-btn__badge {
    opacity: 1;
    display: unset;
}


/* ── SIDEBAR FOOTER ─────────────────────────────────────── */
.sidebar-footer {
    width: 100%;
    overflow: visible;
    margin-top: var(--m-1);
    flex-shrink: 0;
}

.sidebar-social-row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.2s 0.05s, max-height 0.25s;
    flex-wrap: nowrap;
    padding: 0 calc(var(--spacing) * 0.5);
    margin-bottom: var(--m-2);
}

.sidebar.expanded .sidebar-social-row {
    opacity: 1;
    max-height: var(--size-11);
}

.sidebar-social-link {
    flex: 1;
    height: calc(var(--spacing) * 7.5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    text-decoration: none;
}

.sidebar-social-link:hover {
    background: var(--surface2);
    border-color: var(--border2);
}

.sidebar-social-link.ig:hover {
    border-color: #e1306c;
}

.sidebar-social-link.tw:hover {
    border-color: #1da1f2;
}

.sidebar-social-link.fb:hover {
    border-color: #1877f2;
}

.sidebar-social-link.yt:hover {
    border-color: #ff0000;
}

.sidebar-social-link.tg:hover {
    border-color: #0088cc;
}


/* Language selector */
.sidebar-language-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: var(--p-1);
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    overflow: visible;
    transition: background 0.2s, border-color 0.2s;
    position: relative;
    flex-shrink: 0;
    z-index: 1;
}

.sidebar-language-btn.open {
    z-index: 500;
}

.sidebar-language-btn:hover {
    background: var(--surface2);
    border-color: var(--border2);
}

.sidebar.expanded .sidebar-language-btn {
    padding: var(--p-2);
}

.lang-flag {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    flex-shrink: 0;
    width: calc(var(--spacing) * 4.5);
    text-align: center;
}

.lang-text {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.2s 0.05s, max-width 0.25s, margin-left 0.25s;
    white-space: nowrap;
}

.sidebar.expanded .lang-text {
    opacity: 1;
    max-width: calc(var(--spacing) * 32.5);
    margin-left: calc(var(--spacing) * 2.25);
}

.lang-name {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

.lang-sub {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--text3);
}

.lang-chevron {
    display: none;
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--text3);
    opacity: 0;
    transition: opacity 0.15s, transform 0.2s;
    flex-shrink: 0;
}

.sidebar.expanded .lang-chevron {
    opacity: 1;
    display: unset;
}

.lang-dropdown {
    position: absolute;
    bottom: calc(100% + calc(var(--spacing) * 1.5));
    left: -1px;
    right: -1px;
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    z-index: 400;
    display: none;
    box-shadow: var(--shadow-xl);
}

.lang-dropdown.open {
    display: block;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    padding: var(--p-2) var(--p-3);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--text2);
    cursor: pointer;
    transition: background 0.15s;
}

.lang-option:hover {
    background: var(--surface2);
    color: var(--text);
}

.lang-option.selected {
    color: var(--accent);
}

.lang-option.selected::after {
    content: '✓';
    margin-left: auto;
    font-size: var(--text-xs);
}


/* ── NESTED MENU ─────────────────────────────────────────── */
.sidebar-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-2);
}

.sidebar-item-parent {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--size-10);
    border-radius: var(--radius-lg);
    padding: 0 var(--p-2);
    gap: var(--gap-2);
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    color: var(--text3);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    user-select: none;
    flex-shrink: 0;
}

.sidebar-item-parent:hover,
.sidebar-item-parent.open {
    background: var(--surface2);
    color: var(--text);
}

.sidebar-chevron {
    display: none;
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--text3);
    transition: transform 0.25s, opacity 0.15s;
    flex-shrink: 0;
    opacity: 0;
}

.sidebar.expanded .sidebar-chevron {
    display: unset;
    opacity: 1;
}

.sidebar-item-parent.open .sidebar-chevron {
    transform: rotate(90deg);
    color: var(--text2);
}

/* Level-1 submenu */
.sidebar-sub {
    max-height: 0;
    overflow: hidden;
    padding-left: var(--p-3);
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
}

.sidebar.expanded .sidebar-sub {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-sub.open {
    max-height: calc(var(--spacing) * 200);
}

.sidebar-sub-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: calc(var(--spacing) * 9);
    border-radius: var(--radius-lg);
    padding: 0 var(--p-2);
    gap: var(--gap-2);
    cursor: pointer;
    color: var(--text3);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    transition: background 0.2s, color 0.2s;
    user-select: none;
}

.sidebar-sub-item:hover {
    background: var(--surface);
    color: var(--text2);
}

.sidebar-sub-item.active {
    color: var(--accent);
}

.sidebar-sub-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 2px;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
}

.sidebar-sub-dot {
    width: calc(var(--spacing) * 1.25);
    height: calc(var(--spacing) * 1.25);
    border-radius: 50%;
    background: var(--text3);
    flex-shrink: 0;
    transition: background 0.2s;
}

.sidebar-sub-item:hover .sidebar-sub-dot,
.sidebar-sub-item.active .sidebar-sub-dot {
    background: var(--accent);
}

.sidebar-sub-icon {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    flex-shrink: 0;
}

/* Level-2 sub-submenu */
.sidebar-sub2 {
    max-height: 0;
    overflow: hidden;
    padding-left: calc(var(--spacing) * 3.5);
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s;
}

.sidebar.expanded .sidebar-sub2 {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-sub2.open {
    max-height: calc(var(--spacing) * 100);
}

.sidebar-sub2-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: calc(var(--spacing) * 8);
    border-radius: var(--radius-lg);
    padding: 0 var(--p-2);
    gap: var(--gap-2);
    cursor: pointer;
    color: var(--text3);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.2s, color 0.2s;
}

.sidebar-sub2-item:hover {
    background: var(--surface);
    color: var(--text2);
}

.sidebar-sub2-item.active {
    background: var(--surface);
    color: var(--accent);
}

.sidebar-sub2-dot {
    width: calc(var(--spacing) * 0.75);
    height: calc(var(--spacing) * 0.75);
    border-radius: 50%;
    background: var(--text3);
    flex-shrink: 0;
}

.sidebar-sub2-item:hover .sidebar-sub2-dot,
.sidebar-sub2-item.active .sidebar-sub2-dot {
    background: var(--accent);
}

.sidebar-sub-chevron {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--text3);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.sidebar-sub-item.open .sidebar-sub-chevron {
    transform: rotate(90deg);
}


/* ── SETTINGS ROW ────────────────────────────────────────── */
.settings-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0;
}

.sidebar:not(.expanded) .settings-row {
    flex-direction: column;
    align-items: center;
}

.sidebar-item.settings-item {
    color: var(--text3);
    flex: 1;
    min-height: var(--size-10);
}


/* ── SIDEBAR OVERLAY (mobile backdrop) ──────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 45;
    /* Below sidebar (z-index:50) but above content */
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}


/* ── LIVE FIRE ITEM ─────────────────────────────────────── */
/*
   Usage:
   <div class="sidebar-item sidebar-item--live">
       <span class="sidebar-icon material-symbols-rounded sidebar-icon--fire">local_fire_department</span>
       <span class="sidebar-label">Promotion</span>
       <span class="sidebar-badge">LIVE</span>
   </div>
*/

@keyframes fire-flicker {

    0%,
    100% {
        text-shadow: 0 0 6px #fb923c, 0 0 12px #f97316, 0 0 20px #ea580c;
        transform: scale(1) rotate(-2deg);
    }

    25% {
        text-shadow: 0 0 8px #fbbf24, 0 0 16px #f97316, 0 0 28px #dc2626;
        transform: scale(1.08) rotate(1deg);
    }

    50% {
        text-shadow: 0 0 10px #fb923c, 0 0 20px #ea580c, 0 0 36px #f97316;
        transform: scale(1.05) rotate(-1deg);
    }

    75% {
        text-shadow: 0 0 7px #fcd34d, 0 0 14px #fb923c, 0 0 24px #dc2626;
        transform: scale(1.1) rotate(2deg);
    }
}

@keyframes fire-glow-pulse {

    0%,
    100% {
        box-shadow: 0 0 6px color-mix(in oklch, var(--orange) 20%, transparent),
            0 0 12px color-mix(in oklch, var(--orange) 10%, transparent);
    }

    50% {
        box-shadow: 0 0 12px color-mix(in oklch, var(--orange) 35%, transparent),
            0 0 24px color-mix(in oklch, var(--orange) 18%, transparent);
    }
}

.sidebar-item--live:hover {
    background: color-mix(in oklch, var(--orange) 10%, transparent);
    border-color: color-mix(in oklch, var(--orange) 25%, transparent);
}

.sidebar-item--live.active {
    background: color-mix(in oklch, var(--orange) 14%, transparent);
}

.sidebar-item--live.active::before {
    background: var(--orange);
    /* override accent color for the active bar */
}

/* Fire icon animation */
.sidebar-icon--fire {
    color: var(--orange);
    animation: fire-flicker 1.6s ease-in-out infinite;
    transform-origin: center bottom;
    will-change: transform, text-shadow;
}

@media (max-width: 1024px) {

    /* Default hidden on mobile (handled by style.css display:none) */
    /* When triggered via JS, sidebar becomes a slide-in drawer */
    .sidebar {
        width: 0;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
            width 0s 0.28s;
        /* Delay width reset to after slide */
        z-index: 200;
        /* Above overlay */
    }

    .sidebar.mobile-open {
        display: flex !important;
        /* Override the display:none from style.css */
        width: var(--sidebar-w-exp);
        transform: translateX(0);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
            width 0s 0s;
        /* Instant width for opening */
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5);
    }

    /* Ensure sidebar nav is scrollable as a drawer */
    .sidebar.mobile-open .sidebar-nav {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}/* ============================================================
   header.css  —  Sticky top header bar
   Selalu sticky di atas saat scroll. Responsive di semua
   breakpoint: desktop nav → collapsed nav (1280px) →
   overflow scroll nav (1024px) → mobile icon bar (640px).
   ============================================================ */


/* ── HEADER SHELL ────────────────────────────────────────── */
.header {
    position: fixed;
    /* Fixed — tidak terpengaruh overflow parent */
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--header-h);
    background: color-mix(in oklch, var(--bg) 90%, transparent);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 var(--p-4);
    gap: var(--gap-3);
    transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    /* overflow: hidden dihapus — ini yang memotong header-nav.
       Gunakan min-width: 0 saja agar flex tidak melebar keluar. */
    min-width: 0;
}

/* Class ditambah JS saat scrollY > 8 */
.header.scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    border-bottom-color: var(--border2);
    background: color-mix(in oklch, var(--bg) 97%, transparent);
}


/* ── LOGO ────────────────────────────────────────────────── */
.header-logo {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: 1.5px;
    flex-shrink: 0;
    text-transform: uppercase;
    user-select: none;
    text-decoration: none;
    color: var(--text);
    white-space: nowrap;
}

.header-logo span {
    color: var(--accent);
}


/* ── SEARCH BAR ──────────────────────────────────────────── */
.header-search {
    flex: 1;
    max-width: calc(var(--spacing) * 100);
    min-width: calc(var(--spacing) * 32);
    position: relative;
    margin: 0 var(--m-2);
}

.header-search input {
    width: 100%;
    height: var(--size-9);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0 var(--p-10) 0 var(--p-9);
    color: var(--text);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.header-search input:focus {
    border-color: var(--accent);
    background: var(--surface2);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 12%, transparent);
}

.header-search input::placeholder {
    color: var(--text3);
}

.search-icon {
    position: absolute;
    left: var(--p-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text3);
    pointer-events: none;
}

.search-icon.material-symbols-rounded {
    font-size: var(--text-lg);
}

.search-hint {
    position: absolute;
    right: var(--p-3);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.search-kbd {
    font-size: var(--text-2xs);
    line-height: var(--text-2xs--line-height);
    color: var(--text3);
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: calc(var(--radius-lg) * 0.75);
    padding: 2px 5px;
    font-family: monospace;
    letter-spacing: 0.3px;
}


/* ── HEADER NAV ──────────────────────────────────────────── */
/*
   Desktop (>1280px)  : semua item tampil normal.
   1024–1280px        : item bisa di-scroll horizontal,
                        scrollbar hidden, fade mask di ujung kanan.
   ≤1024px            : nav hilang, hamburger tampil.
*/
.header-nav {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 1;
    min-width: 0;
    /* Fade mask — sinyal visual bahwa ada item di kanan */
    -webkit-mask-image: linear-gradient(to right, black 82%, transparent 100%);
    mask-image: linear-gradient(to right, black 82%, transparent 100%);
    padding-right: var(--p-5);
}

.header-nav::-webkit-scrollbar {
    display: none;
}

/* JS menambah class ini jika semua item muat tanpa scroll */
.header-nav.no-overflow {
    -webkit-mask-image: none;
    mask-image: none;
    padding-right: 0;
}

.header-nav-item {
    height: var(--size-9);
    display: flex;
    align-items: center;
    padding: 0 var(--p-3);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--text2);
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
    text-decoration: none;
    position: relative;
}

.header-nav-item:hover {
    background: var(--surface);
    color: var(--text);
}

.header-nav-item.active {
    background: var(--surface2);
    color: var(--text);
    font-weight: var(--font-weight-semibold);
}

/* Active dot indicator */
.header-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
}


/* ── RIGHT-SIDE ACTIONS ──────────────────────────────────── */
.header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    flex-shrink: 0;
}


/* ── BALANCE CHIP ────────────────────────────────────────── */
.balance-chip {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    height: var(--size-9);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0 var(--p-3);
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
    user-select: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.balance-chip:hover {
    background: var(--surface2);
    border-color: var(--border2);
}

.balance-val {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--text);
}

.balance-label {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--text3);
}


/* ── ICON BUTTON ─────────────────────────────────────────── */
.icon-btn {
    width: var(--size-9);
    height: var(--size-9);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    /* display: flex; */
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    position: relative;
    color: var(--text2);
    flex-shrink: 0;
}

.icon-btn:hover {
    background: var(--surface2);
    border-color: var(--border2);
    color: var(--text);
}

.icon-btn .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--orange);
    color: white;
    font-size: var(--text-2xs);
    line-height: var(--text-2xs--line-height);
    font-weight: var(--font-weight-bold);
    width: var(--size-4);
    height: var(--size-4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg);
}


/* ── AVATAR BUTTON ───────────────────────────────────────── */
.avatar-btn {
    width: var(--size-9);
    height: var(--size-9);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: border-color 0.18s, box-shadow 0.18s;
    flex-shrink: 0;
}

.avatar-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 20%, transparent);
}

.avatar-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ── HAMBURGER BUTTON ────────────────────────────────────── */
.header-hamburger {
    display: none;
    width: var(--size-9);
    height: var(--size-9);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text2);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    flex-shrink: 0;
}

.header-hamburger:hover {
    background: var(--surface2);
    color: var(--text);
}

.header-hamburger .material-symbols-rounded {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-hamburger.is-open .material-symbols-rounded {
    transform: rotate(90deg);
}


/* ── MOBILE SEARCH ICON ──────────────────────────────────── */
.header-mobile-search {
    display: none;
    width: var(--size-9);
    height: var(--size-9);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text2);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    flex-shrink: 0;
}

.header-mobile-search:hover {
    background: var(--surface2);
    color: var(--text);
}


/* ── MOBILE SEARCH BAR (slide-down overlay) ──────────────── */
.mobile-search-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 250;
    background: color-mix(in oklch, var(--bg) 96%, transparent);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    border-bottom: 1px solid var(--border);
    padding: var(--p-3) var(--p-4);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease;
    pointer-events: none;
}

.mobile-search-bar.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.mobile-search-inner {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0 var(--p-3);
    height: var(--size-10);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.mobile-search-inner:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 12%, transparent);
}

.mobile-search-inner input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: var(--text-sm);
    outline: none;
    height: 100%;
}

.mobile-search-inner input::placeholder {
    color: var(--text3);
}

.mobile-search-close {
    width: var(--size-7);
    height: var(--size-7);
    border-radius: var(--radius-lg);
    background: transparent;
    border: none;
    color: var(--text3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.18s, background 0.18s;
    flex-shrink: 0;
}

.mobile-search-close:hover {
    color: var(--text);
    background: var(--surface2);
}


/* ── RESPONSIVE ──────────────────────────────────────────── */

/* ---- ≤ 1280px: nav item lebih compact ---- */
@media (max-width: 1280px) {
    .header-nav-item {
        padding: 0 var(--p-2);
        font-size: var(--text-xs);
    }
}

/* ---- ≤ 1024px: hamburger on, nav off ---- */
@media (max-width: 1024px) {
    .header {
        gap: var(--gap-2);
    }

    .header-hamburger {
        display: flex;
    }

    .header-nav {
        display: none;
    }

    .header-search {
        min-width: calc(var(--spacing) * 24);
        margin: 0 var(--m-2);
    }
}

/* ---- ≤ 768px: balance chip compact ---- */
@media (max-width: 768px) {
    .header-search {
        min-width: calc(var(--spacing) * 18);
    }

    .balance-chip {
        padding: 0 var(--p-2);
        gap: var(--gap-1);
    }

    .balance-label {
        display: none;
    }
}

/* ---- ≤ 640px: mobile layout ---- */
@media (max-width: 640px) {
    .header {
        height: calc(var(--spacing) * 13);
        /* 52px */
        padding: 0 var(--p-3);
        gap: var(--gap-2);
    }

    .header-logo {
        font-size: var(--text-base);
        letter-spacing: 1px;
    }

    .header-hamburger {
        display: flex;
        width: var(--size-8);
        height: var(--size-8);
    }

    .header-search {
        display: none;
    }

    .header-mobile-search {
        display: flex;
        width: var(--size-8);
        height: var(--size-8);
    }

    .balance-chip {
        display: none;
    }

    .header-right {
        gap: var(--gap-1);
        margin-left: auto;
    }

    .header-btn {
        height: var(--size-8);
        padding: 0 var(--p-3);
        font-size: var(--text-xs);
    }

    .icon-btn {
        width: var(--size-8);
        height: var(--size-8);
    }

    .icon-btn .material-symbols-rounded {
        font-size: var(--text-lg);
    }

    .icon-btn .badge {
        width: calc(var(--spacing) * 3.5);
        height: calc(var(--spacing) * 3.5);
        font-size: var(--text-2xs);
        top: -3px;
        right: -3px;
    }
}

/* ---- ≤ 374px ---- */
@media (max-width: 374px) {
    .header {
        padding: 0 var(--p-2);
        gap: var(--gap-1);
    }

    .header-logo {
        font-size: var(--text-sm);
    }

    .header-btn.btn-primary {
        display: none;
    }
}/* ============================================================
   navbar.css  —  Bottom tab-bar (mobile navigation)
   Shown only on screens ≤ 640px via responsive rule in style.css
   ============================================================ */

.tabbar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: var(--tabbar-h);
    background: color-mix(in oklch, var(--bg) 92%, transparent);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    border-top: 1px solid var(--border);
    justify-content: space-around;
    align-items: center;
    padding: 0 var(--p-2);
}


/* ── TAB ITEM ───────────────────────────────────────────── */
.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 0.75);
    cursor: pointer;
    flex: 1;
    height: 100%;
    padding: var(--p-2) 0;
    position: relative;
    transition: background 0.18s;
}

/* Active top indicator bar */
.tab-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--accent);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    transform: scaleX(0);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-item.active::before {
    transform: scaleX(1);
}


/* ── ICON ───────────────────────────────────────────────── */
.tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-9);
    height: calc(var(--spacing) * 7);
    border-radius: var(--radius-lg);
    color: var(--text3);
    transition: color 0.18s, background 0.18s, transform 0.2s;
}

.tab-icon .material-symbols-rounded {
    font-size: var(--text-xl);
}

.tab-item.active .tab-icon {
    color: var(--accent);
    background: color-mix(in oklch, var(--accent) 12%, transparent);
    transform: translateY(-1px);
}


/* ── LABEL ──────────────────────────────────────────────── */
.tab-label {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--text3);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.3px;
    transition: color 0.18s;
    white-space: nowrap;
}

.tab-item.active .tab-label {
    color: var(--accent);
    font-weight: var(--font-weight-semibold);
}


/* ── RESPONSIVE ──────────────────────────────────────────── */
/* Small mobile: ≤ 374px */
@media (max-width: 374px) {
    .tab-label {
        font-size: var(--text-2xs);
    }

    .tab-icon .material-symbols-rounded {
        font-size: var(--text-lg);
    }
}/* ============================================================
   footer.css  —  Page footer
   ============================================================ */

.footer {
    background: var(--bg2);
    border-top: 1px solid var(--border);
    padding: var(--p-10) var(--p-4) var(--p-6);
    margin-top: auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
    gap: var(--gap-8);
    margin-bottom: var(--m-8);
}


/* ── TOP STRIP: App Download + Trust Badges ──────────────── */
.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-6);
    padding-bottom: var(--p-8);
    margin-bottom: var(--m-8);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.footer-top__app-label {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text3);
    margin-bottom: var(--m-2);
}

.footer-top__app-btns {
    display: flex;
    gap: var(--gap-2);
}

.footer-app-btn {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    padding: var(--p-2) var(--p-4);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border2);
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
    text-decoration: none;
    color: var(--text);
}

.footer-app-btn:hover {
    background: var(--surface2);
    border-color: var(--border2);
}

.footer-app-btn .material-symbols-rounded {
    font-size: var(--text-2xl);
    color: var(--text2);
}

.footer-app-btn__sub {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--text3);
}

.footer-app-btn__name {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
}

.footer-top__trust {
    display: flex;
    gap: var(--gap-5);
    flex-wrap: wrap;
}

.footer-trust-item {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--text3);
}

.footer-trust-item .material-symbols-rounded {
    font-size: var(--text-lg);
    color: var(--accent);
}


/* ── BRAND COLUMN ───────────────────────────────────────── */
.footer-brand-name {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: 1px;
    margin-bottom: var(--m-2);
}

.footer-brand-desc {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--text3);
    margin-bottom: var(--m-4);
}

.footer-social {
    display: flex;
    gap: var(--gap-2);
}

.footer-social-btn {
    width: var(--size-8);
    height: var(--size-8);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text3);
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    text-decoration: none;
}

.footer-social-btn:hover {
    background: var(--surface2);
    border-color: var(--border2);
    color: var(--text);
}


/* ── COLUMN HEADINGS ────────────────────────────────────── */
.footer-heading {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text3);
    margin-bottom: var(--m-3);
}


/* ── FOOTER LINKS ───────────────────────────────────────── */
.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2);
}

.footer-link {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--text2);
    cursor: pointer;
    transition: color 0.18s, padding-left 0.18s;
    text-decoration: none;
}

.footer-link:hover {
    color: var(--text);
    padding-left: calc(var(--spacing) * 1);
}


/* ── PAYMENT SECTION ────────────────────────────────────── */
.footer-payment {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-8);
    padding: var(--p-6) 0 var(--p-8);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--m-6);
}

.footer-pay-group {
    flex: 1;
    min-width: calc(var(--spacing) * 56);
    display: flex;
    flex-direction: column;
    gap: var(--gap-4);
}

.footer-pay-label {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text3);
    margin-bottom: var(--m-3);
}

/* Bank card list */
.footer-pay-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-2);
}

.footer-bank-item {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    padding: var(--p-2) var(--p-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    position: relative;
    transition: border-color 0.18s, background 0.18s;
}

.footer-bank-item--active {
    border-color: color-mix(in oklch, var(--green) 22%, transparent);
    background: color-mix(in oklch, var(--green) 5%, transparent);
}

.footer-bank-item--active:hover {
    border-color: color-mix(in oklch, var(--green) 40%, transparent);
    background: color-mix(in oklch, var(--green) 9%, transparent);
}

.footer-bank-item--inactive {
    opacity: 0.5;
    filter: grayscale(0.5);
    cursor: not-allowed;
}

/* Bank logo badge */
.footer-bank-logo {
    width: var(--size-10);
    height: var(--size-7);
    border-radius: calc(var(--radius-lg) * 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-black);
    letter-spacing: 0.3px;
    flex-shrink: 0;
    color: white;
}

.footer-bank-logo--bca {
    background: linear-gradient(135deg, #0062ae, #003c7c);
}

.footer-bank-logo--bni {
    background: linear-gradient(135deg, #f77f00, #c96300);
}

.footer-bank-logo--bri {
    background: linear-gradient(135deg, #00529c, #1a3a8c);
}

.footer-bank-logo--mandiri {
    background: linear-gradient(135deg, #003d7c, #f5a623);
}

.footer-bank-logo--bsi {
    background: linear-gradient(135deg, #1a7a4a, #0d5933);
}

.footer-bank-logo--cimb {
    background: linear-gradient(135deg, #c0392b, #922b21);
}

.footer-bank-logo--danamon {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.footer-bank-logo--permata {
    background: linear-gradient(135deg, #8e44ad, #6c3483);
}

.footer-bank-info {
    flex: 1;
    min-width: 0;
}

.footer-bank-name {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--text);
    margin-bottom: calc(var(--spacing) * 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer-bank-status {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    font-size: var(--text-2xs);
    line-height: var(--text-2xs--line-height);
    font-weight: var(--font-weight-medium);
}

.footer-bank-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.footer-bank-status--active {
    color: var(--green);
}

.footer-bank-status--active .footer-bank-dot {
    background: var(--green);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--green) 25%, transparent);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.footer-bank-status--inactive {
    color: var(--text3);
}

.footer-bank-status--inactive .footer-bank-dot {
    background: var(--text3);
}

.footer-bank-status--maintenance {
    color: var(--orange);
}

.footer-bank-status--maintenance .footer-bank-dot {
    background: var(--orange);
}

.footer-bank-unavail {
    font-size: var(--text-sm);
    color: var(--text3);
    flex-shrink: 0;
}

/* E-wallet chips */
.footer-pay-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-2);
}

.footer-pay-chip {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    padding: var(--p-1) var(--p-3);
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.footer-pay-chip--active {
    background: var(--surface);
    color: var(--text2);
    border-color: var(--border2);
}

.footer-pay-chip--inactive {
    background: transparent;
    color: var(--text3);
    opacity: 0.5;
    filter: grayscale(1);
}


/* ── BOTTOM BAR ─────────────────────────────────────────── */
.footer-bottom {
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-4);
    flex-wrap: wrap;
}

.footer-copy {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--text3);
}

.footer-bottom-right {
    display: flex;
    align-items: center;
    gap: var(--gap-4);
    flex-wrap: wrap;
}

.footer-cert {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--text3);
}


/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-pay-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .footer {
        padding: var(--p-6) var(--p-3) var(--p-4);
        /* Extra bottom padding for tabbar + safe area */
        padding-bottom: calc(var(--p-18) + env(safe-area-inset-bottom, 0px));
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-5);
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-bottom-right {
        justify-content: center;
    }

    .footer-top {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: var(--p-5);
        margin-bottom: var(--m-5);
        gap: var(--gap-4);
    }

    .footer-top__app-btns {
        flex-wrap: wrap;
    }

    .footer-top__trust {
        gap: var(--gap-3);
    }

    .footer-pay-group {
        min-width: 100%;
    }

    .footer-pay-list {
        grid-template-columns: 1fr;
    }

    .footer-payment {
        gap: var(--gap-5);
        padding: var(--p-4) 0;
    }

    /* Brand description shorter on mobile */
    .footer-brand-desc {
        font-size: var(--text-xs);
    }

    /* Reduce spacing between footer sections */
    .footer-grid {
        margin-bottom: var(--m-5);
    }

    /* Certs wrap better */
    .footer-bottom-right {
        gap: var(--gap-3);
    }

    .footer-cert {
        font-size: var(--text-xs);
    }
}

/* Small mobile: ≤ 374px */
@media (max-width: 374px) {
    .footer {
        padding: var(--p-4) var(--p-2) var(--p-3);
        padding-bottom: calc(var(--p-18) + env(safe-area-inset-bottom, 0px));
    }

    .footer-app-btn {
        padding: var(--p-2) var(--p-3);
        font-size: var(--text-xs);
    }

    .footer-app-btn .material-symbols-rounded {
        font-size: var(--text-lg);
    }
}/* ============================================================
   list.css  —  Product card grids (regular + feed/rec)
   ============================================================ */


/* ── GAME GRID ───────────────────────────────────────── */
.game-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: var(--gap-4);
    margin-bottom: var(--m-7);
}


/* ── RESPONSIVE ──────────────────────────────────────────── */

/* Mobile: ≤ 640px — touch-friendly product cards */
@media (max-width: 640px) {

    .game-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--gap-2);
    }
}

/* Small mobile: ≤ 374px */
@media (max-width: 374px) {
    .game-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--gap-2);
    }
}/* ============================================================
   game.css  —  Game card portrait — Game Terpopuler grid
   Card style: gambar portrait full-bleed, teks overlay
   di bagian bawah (nama, kategori, provider), badge di atas.

   HTML structure:
   ┌─ .game-card ──────────────────────────────────────────────────┐
   │  ┌─ .game-card-image ─────────────────────────────────────────┐ │
   │  │  <img>                                             │ │
   │  │  .game-card-overlay                                       │ │
   │  │    ├─ .game-card-top  (.game-card-badge + .game-card-flag)              │ │
   │  │    └─ .game-card-bottom                                   │ │
   │  │         ├─ .game-card-meta  (.game-card-category + .game-card-provider) │ │
   │  │         └─ .game-card-name                                │ │
   │  └───────────────────────────────────────────────────┘ │
   │  .game-card-play  (hover play button — center of card)        │ │
   └────────────────────────────────────────────────────────┘

   Grid pakai .game-grid dari style.css (shared dengan rtp-grid).
   ============================================================ */


/* ── CARD SHELL ──────────────────────────────────────────── */
@keyframes gc-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.game-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface);
    /* Portrait 3:4 — sama dengan RTP card */
    aspect-ratio: 3 / 4;
    display: block;
    animation: gc-in 0.3s ease both;
    transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
}

/* Staggered entrance */
.game-card:nth-child(1) {
    animation-delay: 0.04s;
}

.game-card:nth-child(2) {
    animation-delay: 0.07s;
}

.game-card:nth-child(3) {
    animation-delay: 0.10s;
}

.game-card:nth-child(4) {
    animation-delay: 0.13s;
}

.game-card:nth-child(5) {
    animation-delay: 0.16s;
}

.game-card:nth-child(6) {
    animation-delay: 0.19s;
}

.game-card:nth-child(7) {
    animation-delay: 0.22s;
}

.game-card:nth-child(8) {
    animation-delay: 0.25s;
}

.game-card:nth-child(9) {
    animation-delay: 0.28s;
}

.game-card:nth-child(10) {
    animation-delay: 0.31s;
}

.game-card:hover {
    transform: translateY(-3px) scale(1.01);
    border-color: color-mix(in oklch, var(--accent) 45%, transparent);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.45),
        0 0 0 1px color-mix(in oklch, var(--accent) 15%, transparent);
}


/* ── IMAGE ───────────────────────────────────────────────── */
.game-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.game-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.8) saturate(0.85);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.3s;
}

.game-card:hover .game-card-image img {
    transform: scale(1.06);
    filter: brightness(1) saturate(1.05);
}


/* ── OVERLAY GRADIENT ────────────────────────────────────── */
/* Dua layer: gelap di atas (untuk badge) + gradasi kuat di bawah (untuk teks) */
.game-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--p-2);
    /* Gradient: transparan di tengah, gelap di atas & bawah */
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0) 35%,
            rgba(0, 0, 0, 0) 50%,
            rgba(0, 0, 0, 0.7) 75%,
            rgba(0, 0, 0, 0.92) 100%);
    pointer-events: none;
}


/* ── TOP ROW (badge + flag) ──────────────────────────────── */
.game-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-1);
}


/* Badge — HOT / NEW / LIVE dll */
.game-card-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 0.75);
    padding: calc(var(--spacing) * 0.75) calc(var(--spacing) * 1.75);
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.game-card-badge--hot {
    background: color-mix(in oklch, var(--orange) 25%, rgba(0, 0, 0, 0.45));
    border: 1px solid color-mix(in oklch, var(--orange) 40%, transparent);
    color: var(--orange);
}

.game-card-badge--new {
    background: color-mix(in oklch, var(--accent) 25%, rgba(0, 0, 0, 0.45));
    border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
    color: var(--accent);
}

.game-card-badge--live {
    background: color-mix(in oklch, var(--red) 25%, rgba(0, 0, 0, 0.45));
    border: 1px solid color-mix(in oklch, var(--red) 40%, transparent);
    color: var(--red);
}

/* Pulsing dot untuk LIVE */
.game-card-badge--live::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--red);
    flex-shrink: 0;
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.game-card-badge--popular {
    background: color-mix(in oklch, var(--gold) 20%, rgba(0, 0, 0, 0.45));
    border: 1px solid color-mix(in oklch, var(--gold) 35%, transparent);
    color: var(--gold);
}


/* Flag / icon pojok kanan atas */
.game-card-flag {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    flex-shrink: 0;
    pointer-events: auto;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
}

.game-card-flag:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}


/* ── BOTTOM INFO ─────────────────────────────────────────── */
.game-card-bottom {
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
}

/* Meta row: kategori + provider */
.game-card-meta {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    flex-wrap: wrap;
}

/* Kategori tag — pill kecil */
.game-card-category {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
    border-radius: calc(var(--radius-lg) * 0.75);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
    background: color-mix(in oklch, var(--accent) 20%, rgba(0, 0, 0, 0.4));
    border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
    color: var(--accent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* Separator dot */
.game-card-meta-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

/* Provider nama */
.game-card-provider {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: rgba(255, 255, 255, 0.6);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.2px;
}

/* Nama game */
.game-card-name {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-bold);
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.1px;
    /* Subtle text shadow untuk keterbacaan di gambar terang */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}


/* ── CENTER PLAY BUTTON (hover) ──────────────────────────── */
@keyframes gc-play-pop {
    0% {
        transform: translate(-50%, -50%) scale(0.7);
        opacity: 0;
    }

    60% {
        transform: translate(-50%, -50%) scale(1.1);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.game-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-card-play .material-symbols-rounded {
    font-size: var(--text-xl);
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
    margin-left: 2px;
    /* visual centering untuk play icon */
}

.game-card:hover .game-card-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}


/* ── RESPONSIVE ──────────────────────────────────────────── */

/* ≤ 768px */
@media (max-width: 768px) {
    .game-card-name {
        font-size: var(--text-xs);
    }

    .game-card-flag {
        width: calc(var(--spacing) * 5);
        height: calc(var(--spacing) * 5);
        font-size: var(--text-xs);
    }

    .game-card-play {
        /* Selalu visible di touch device */
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.85);
        width: calc(var(--spacing) * 9);
        height: calc(var(--spacing) * 9);
    }
}

/* ≤ 640px */
@media (max-width: 640px) {
    .game-card-overlay {
        padding: calc(var(--spacing) * 1.5);
    }

    .game-card-badge {
        font-size: var(--text-2xs);
        padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
    }

    .game-card-name {
        font-size: var(--text-xs);
    }

    .game-card-category {
        font-size: var(--text-2xs);
        padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.25);
    }

    .game-card-provider {
        font-size: var(--text-2xs);
    }

    .game-card-meta-sep {
        display: none;
    }

    .game-card-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--spacing) * 0.5);
    }

    .game-card-play {
        width: calc(var(--spacing) * 8);
        height: calc(var(--spacing) * 8);
    }

    .game-card-play .material-symbols-rounded {
        font-size: var(--text-lg);
    }
}

/* ≤ 374px */
@media (max-width: 374px) {
    .game-card-name {
        font-size: var(--text-2xs);
    }

    .game-card-flag {
        display: none;
    }
}/* ============================================================
   promotion.css  —  Banners, promo strips, category pills,
                     category pills, brand scroll, promo cards
   ============================================================ */


/* ── RUNNING TEXT TICKER ─────────────────────────────────── */
.ticker-wrap {
    display: flex;
    align-items: center;
    background: color-mix(in oklch, var(--color-amber-950) 60%, var(--bg2));
    border: 1px solid color-mix(in oklch, var(--color-amber-500) 18%, transparent);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--m-2);
    height: calc(var(--spacing) * 8);
    /* fixed height ~32px */
}

/* Label kiri — statis, tidak ikut scroll */
.ticker-label {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    flex-shrink: 0;
    padding: 0 var(--p-3);
    background: var(--gold);
    color: #000;
    font-size: var(--text-xs);
    line-height: 1;
    font-weight: var(--font-weight-black);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    height: 100%;
    /* Separator kanan */
    border-right: 1px solid color-mix(in oklch, var(--color-amber-500) 30%, transparent);
}

.ticker-label .material-symbols-rounded {
    font-size: 0.9rem;
}

/* Overflow container — mask fade kiri & kanan */
.ticker-track {
    display: flex;
    overflow: hidden;
    flex: 1;
    /* Fade mask di kedua sisi agar teks tidak terpotong tiba-tiba */
    mask-image: linear-gradient(to right,
            transparent 0%,
            black 4%,
            black 96%,
            transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            black 4%,
            black 96%,
            transparent 100%);
}

/* Dua blok konten identik — animasi ticker seamless */
.ticker-content {
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    white-space: nowrap;
    /* Durasi: semakin besar = semakin lambat */
    animation: ticker-scroll 40s linear infinite;
    /* Pastikan kedua blok bersebelahan tanpa gap */
    padding-right: var(--p-6);
}

.ticker-item {
    font-size: var(--text-xs);
    line-height: 1;
    font-weight: var(--font-weight-medium);
    color: var(--text2);
}

.ticker-sep {
    color: var(--gold);
    font-weight: var(--font-weight-bold);
    opacity: 0.6;
    flex-shrink: 0;
}

/* Animasi scroll kiri — translateX(0) → translateX(-100%) */
@keyframes ticker-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Pause on hover (accessibility & UX) */
.ticker-wrap:hover .ticker-content {
    animation-play-state: paused;
}

/* Mobile: sedikit lebih kecil */
@media (max-width: 640px) {
    .ticker-label {
        padding: 0 var(--p-2);
        font-size: 0.6rem;
    }

    .ticker-item {
        font-size: 0.65rem;
    }

    .ticker-content {
        animation-duration: 30s;
        /* sedikit lebih cepat di mobile */
    }
}


/* ── RUNNING TEXT TICKER ─────────────────────────────────── */
.ticker-wrap {
    display: flex;
    align-items: center;
    background: color-mix(in oklch, var(--color-amber-950) 60%, var(--bg2));
    border: 1px solid color-mix(in oklch, var(--color-amber-500) 18%, transparent);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--m-2);
    height: calc(var(--spacing) * 8);
}

.ticker-label {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    flex-shrink: 0;
    padding: 0 var(--p-3);
    background: var(--gold);
    color: #000;
    font-size: var(--text-xs);
    line-height: 1;
    font-weight: var(--font-weight-black);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    height: 100%;
    border-right: 1px solid color-mix(in oklch, var(--color-amber-500) 30%, transparent);
}

.ticker-label .material-symbols-rounded {
    font-size: 0.9rem;
}

.ticker-track {
    display: flex;
    overflow: hidden;
    flex: 1;
    mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

.ticker-content {
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    white-space: nowrap;
    animation: ticker-scroll 40s linear infinite;
    padding-right: var(--p-6);
}

.ticker-item {
    font-size: var(--text-xs);
    line-height: 1;
    font-weight: var(--font-weight-medium);
    color: var(--text2);
}

.ticker-sep {
    color: var(--gold);
    font-weight: var(--font-weight-bold);
    opacity: 0.6;
    flex-shrink: 0;
}

@keyframes ticker-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.ticker-wrap:hover .ticker-content {
    animation-play-state: paused;
}

@media (max-width: 640px) {
    .ticker-label {
        padding: 0 var(--p-2);
        font-size: 0.6rem;
    }

    .ticker-item {
        font-size: 0.65rem;
    }

    .ticker-content {
        animation-duration: 30s;
    }
}


/* ── PROMO STRIP ─────────────────────────────────────────── */
.promo-strip {
    background: color-mix(in oklch, var(--color-green-950) 70%, var(--bg2));
    border: 1px solid color-mix(in oklch, var(--color-green-500) 18%, transparent);
    border-radius: var(--radius-lg);
    padding: var(--p-3) var(--p-4);
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    margin-bottom: var(--m-4);
    overflow: hidden;
    position: relative;
}

.promo-strip::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--p-1);
    background: var(--green);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.strip-icon {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
}

.strip-text {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--green);
}

.strip-sub {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--text3);
    margin-left: var(--m-1);
}

.strip-btn {
    margin-left: auto;
    background: var(--green);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--p-2) var(--p-4);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.18s, transform 0.18s;
}

.strip-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}


/* ── BANNER GRID ─────────────────────────────────────────── */
.banner-grid {
    display: grid;
    /* minmax prevents the side column from forcing overflow on smaller screens */
    grid-template-columns: 1fr minmax(0, calc(var(--spacing) * 75));
    gap: var(--gap-3);
    margin-bottom: var(--m-4);
}

.banner-main {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: calc(var(--spacing) * 55);
    background: color-mix(in oklch, var(--color-blue-950) 60%, var(--bg));
    display: flex;
    align-items: flex-end;
    cursor: pointer;
}

.banner-main img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
    filter: saturate(0.6);
    transition: opacity 0.3s, transform 0.4s;
}

.banner-main:hover img {
    opacity: 0.35;
    transform: scale(1.02);
}

.banner-main-content {
    position: relative;
    z-index: 1;
    padding: var(--p-6);
    width: 100%;
    background: linear-gradient(to top, color-mix(in oklch, var(--bg) 95%, transparent) 0%, transparent 100%);
}

.banner-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2);
    background: color-mix(in oklch, var(--color-white) 10%, transparent);
    border: 1px solid color-mix(in oklch, var(--color-white) 15%, transparent);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 0.75) var(--p-3);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text2);
    margin-bottom: var(--m-2);
}

.banner-tag.hot {
    background: color-mix(in oklch, var(--color-orange-500) 15%, transparent);
    border-color: color-mix(in oklch, var(--color-orange-500) 30%, transparent);
    color: var(--orange);
}

.banner-tag.new {
    background: color-mix(in oklch, var(--color-blue-500) 15%, transparent);
    border-color: color-mix(in oklch, var(--color-blue-500) 30%, transparent);
    color: var(--accent);
}

.banner-title {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: var(--font-weight-extrabold);
    margin-bottom: calc(var(--spacing) * 1.5);
}

.banner-title span {
    color: var(--accent);
}

.banner-sub {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--text2);
    margin-bottom: var(--m-4);
}

.banner-actions {
    display: flex;
    gap: var(--gap-2);
    align-items: center;
}

.banner-cta {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--p-2) var(--p-5);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
}

.banner-cta:hover {
    background: var(--accent2);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in oklch, var(--accent) 35%, transparent);
}

.banner-cta2 {
    background: color-mix(in oklch, var(--color-white) 8%, transparent);
    color: var(--text);
    border: 1px solid var(--border2);
    border-radius: var(--radius-lg);
    padding: var(--p-2) var(--p-4);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background 0.18s;
}

.banner-cta2:hover {
    background: var(--surface2);
}

.banner-discount {
    position: absolute;
    top: var(--p-4);
    right: var(--p-4);
    z-index: 2;
    background: var(--red);
    color: white;
    border-radius: var(--radius-lg);
    padding: var(--p-2) var(--p-3);
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    font-weight: var(--font-weight-black);
    text-align: center;
}

.banner-discount span {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
    display: block;
    opacity: 0.85;
}

.banner-side {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
}

.banner-sm {
    flex: 1;
    border-radius: var(--radius-lg);
    padding: var(--p-4);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-height: calc(var(--spacing) * 25);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.2s;
}

.banner-sm:hover {
    transform: translateY(-2px);
}

.banner-sm img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
    filter: saturate(0.5);
}

.banner-sm-inner {
    position: relative;
    z-index: 1;
}

.banner-sm-label {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--m-1);
}

.banner-sm-title {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-bold);
}

.banner-sm-val {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    font-weight: var(--font-weight-black);
}

.banner-sm-variant-1 {
    background: color-mix(in oklch, var(--color-violet-950) 80%, var(--bg));
    border: 1px solid color-mix(in oklch, var(--color-violet-500) 20%, transparent);
}

.banner-sm-variant-1 .banner-sm-label {
    color: var(--color-violet-400);
}

.banner-sm-variant-2 {
    background: color-mix(in oklch, var(--color-orange-950) 80%, var(--bg));
    border: 1px solid color-mix(in oklch, var(--color-orange-500) 20%, transparent);
}

.banner-sm-variant-2 .banner-sm-label {
    color: var(--orange);
}

/* Carousel dots */
.banner-dots {
    display: flex;
    gap: var(--gap-2);
    margin-top: var(--m-3);
    justify-content: center;
}

.banner-dot {
    width: var(--gap-2);
    height: var(--gap-2);
    border-radius: var(--radius-lg);
    background: var(--surface2);
    cursor: pointer;
    transition: all 0.2s;
}

.banner-dot.active {
    width: var(--size-5);
    background: var(--accent);
}


/* ── CATEGORY PILLS ─────────────────────────────────────── */
.cat-scroll {
    display: flex;
    gap: var(--gap-2);
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: var(--m-4);
    padding-bottom: var(--p-1);
}

.cat-scroll::-webkit-scrollbar {
    display: none;
}

.cat-pill {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--p-2) var(--p-3);
    cursor: pointer;
    transition: all 0.18s;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--text2);
    white-space: nowrap;
}

.cat-pill:hover {
    background: var(--surface2);
    color: var(--text);
    border-color: var(--border2);
}

.cat-pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    box-shadow: 0 2px 10px color-mix(in oklch, var(--accent) 30%, transparent);
}

.cat-pill-icon {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
}

.cat-pill-count {
    background: color-mix(in oklch, var(--color-white) 10%, transparent);
    padding: calc(var(--spacing) * 0.25) calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
}

.cat-pill.active .cat-pill-count {
    background: color-mix(in oklch, var(--color-white) 20%, transparent);
}

/* Flash sale styles dipindahkan ke rtp.css */


/* ── BRAND SCROLL ────────────────────────────────────────── */
.brand-scroll {
    display: flex;
    gap: var(--gap-3);
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: var(--m-7);
}

.brand-scroll::-webkit-scrollbar {
    display: none;
}

.brand-card {
    flex-shrink: 0;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--p-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-3);
    cursor: pointer;
    transition: all 0.2s;
    /* uniform width — fits longest name like "PRAGMATIC PLAY" */
    width: 120px;
    min-width: 120px;
}

.brand-card:hover {
    border-color: var(--border2);
    background: var(--bg3);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.brand-logo {
    /* exact 50x50 container matching image asset dimensions */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-name {
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text2);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
}


/* ── PROMO CARDS ─────────────────────────────────────────── */
.promo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-3);
    margin-bottom: var(--m-7);
}

.promo-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    min-height: calc(var(--spacing) * 35);
    display: flex;
    align-items: flex-end;
    cursor: pointer;
}

.promo-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.4) saturate(0.6);
    transition: filter 0.3s, transform 0.4s;
}

.promo-card:hover img {
    filter: brightness(0.55) saturate(0.8);
    transform: scale(1.04);
}

.promo-card-inner {
    position: relative;
    z-index: 1;
    padding: var(--p-4);
    background: linear-gradient(to top, color-mix(in oklch, var(--bg) 95%, transparent) 0%, transparent 100%);
    width: 100%;
}

.promo-card-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text2);
    margin-bottom: var(--m-1);
}

.promo-card-title {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-extrabold);
    margin-bottom: var(--m-1);
}

.promo-card-value {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
}


/* ── RESPONSIVE ──────────────────────────────────────────── */

/* Tablet: ≤ 1024px */
@media (max-width: 1024px) {

    .banner-grid {
        grid-template-columns: 1fr;
    }

    .banner-side {
        flex-direction: row;
    }

    /* Banner side cards go horizontal when grid is 1col */
    .banner-sm {
        min-height: calc(var(--spacing) * 20);
    }

    .banner-main {
        min-height: calc(var(--spacing) * 45);
    }
}

/* Tablet portrait: ≤ 768px */
@media (max-width: 768px) {

    .promo-grid {
        grid-template-columns: 1fr;
    }

    /* Promo strip: wrap & allow text to break */
    .promo-strip {
        flex-wrap: wrap;
        gap: var(--gap-2);
    }

    .strip-sub {
        margin-left: 0;
    }

    .strip-btn {
        margin-left: auto;
    }
}

/* Mobile: ≤ 640px */
@media (max-width: 640px) {

    /* ── PROMO STRIP ── */
    .promo-strip {
        padding: var(--p-2) var(--p-3);
    }

    .strip-icon {
        font-size: var(--text-base);
    }

    .strip-sub {
        display: none;
        /* Hide secondary text on small screens */
    }

    .strip-btn {
        padding: var(--p-2) var(--p-3);
        font-size: var(--text-2xs);
    }

    /* ── BANNER ── */
    .banner-grid {
        gap: var(--gap-2);
    }

    .banner-main {
        min-height: calc(var(--spacing) * 40);
    }

    .banner-main-content {
        padding: var(--p-4);
    }

    .banner-title {
        font-size: var(--text-xl);
        line-height: var(--text-xl--line-height);
    }

    .banner-sub {
        font-size: var(--text-xs);
        margin-bottom: var(--m-3);
    }

    .banner-cta {
        padding: var(--p-2) var(--p-4);
        font-size: var(--text-xs);
    }

    .banner-cta2 {
        padding: var(--p-2) var(--p-3);
        font-size: var(--text-xs);
    }

    .banner-discount {
        top: var(--p-3);
        right: var(--p-3);
        padding: var(--p-1) var(--p-2);
        font-size: var(--text-lg);
    }

    /* Side banners: horizontal scroll instead of stack */
    .banner-side {
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: var(--gap-2);
    }

    .banner-side::-webkit-scrollbar {
        display: none;
    }

    .banner-sm {
        min-width: 70vw;
        min-height: calc(var(--spacing) * 22);
        flex-shrink: 0;
        padding: var(--p-3);
    }

    .banner-sm-val {
        font-size: var(--text-lg);
    }

    /* Banner dots: smaller gap */
    .banner-dots {
        margin-top: var(--m-2);
    }

    /* ── CATEGORY PILLS ── */
    .cat-pill {
        padding: calc(var(--spacing) * 1.5) var(--p-3);
        font-size: var(--text-xs);
    }

    .cat-pill-icon {
        font-size: var(--text-sm);
    }

    /* Flash sale styles dipindahkan ke rtp.css */

    /* ── PROMO CARDS ── */
    .promo-card {
        min-height: calc(var(--spacing) * 28);
    }

    .promo-card-title {
        font-size: var(--text-base);
    }

    /* ── BRAND SCROLL ── */
    .brand-card {
        padding: var(--p-4);
        width: 100px;
        min-width: 100px;
    }

    .brand-logo {
        width: 40px;
        height: 40px;
    }

    .brand-name {
        font-size: 0.5625rem;
    }
}

/* Small mobile: ≤ 374px */
@media (max-width: 374px) {

    .banner-main {
        min-height: calc(var(--spacing) * 35);
    }

    .banner-title {
        font-size: var(--text-lg);
    }

    .banner-discount {
        font-size: var(--text-base);
    }

    .promo-card {
        min-height: calc(var(--spacing) * 24);
    }

    .promo-card-title {
        font-size: var(--text-sm);
    }

    .cat-pill {
        padding: calc(var(--spacing) * 1.25) var(--p-2);
        font-size: var(--text-xs);
    }
}/* ============================================================
   rtp.css  —  RTP Slot Game Showcase: section header, grid,
               cards, RTP bar, provider badge, status chips.

   HTML structure:
   ┌─ .rtp-section-header ────────────────────────────────────┐
   │   .rtp-section-title   .rtp-live-badge   .rtp-section-link│
   └──────────────────────────────────────────────────────────┘
   ┌─ .rtp-grid ──────────────────────────────────────────────┐
   │  ┌─ .rtp-card ────────────────────────────────────────┐  │
   │  │  .rtp-card-thumbnail                               │  │
   │  │    └─ img                                          │  │
   │  │    └─ .rtp-card-overlay                            │  │
   │  │         └─ .rtp-status  (.rtp-status--hot|new|live)│  │
   │  │         └─ .rtp-provider                           │  │
   │  │  .rtp-card-body                                    │  │
   │  │    └─ .rtp-game-name                               │  │
   │  │    └─ .rtp-bar-row                                 │  │
   │  │         └─ .rtp-bar-label  .rtp-bar-value          │  │
   │  │    └─ .rtp-bar-track                               │  │
   │  │         └─ .rtp-bar-fill  (inline style: width:XX%)│  │
   │  │    └─ .rtp-card-footer                             │  │
   │  │         └─ .rtp-maxwin   .rtp-play-btn             │  │
   │  └────────────────────────────────────────────────────┘  │
   └──────────────────────────────────────────────────────────┘

   Load order: after style.css
   ============================================================ */


/* ── SECTION HEADER ──────────────────────────────────────── */
.rtp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-4);
    margin-bottom: var(--m-4);
}

.rtp-section-title {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    font-weight: var(--font-weight-extrabold);
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    color: var(--text);
}

.rtp-section-title .material-symbols-rounded {
    color: var(--orange);
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

/* LIVE pulsing badge di section header */
@keyframes rtp-live-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 color-mix(in oklch, var(--red) 50%, transparent);
    }

    50% {
        box-shadow: 0 0 0 5px color-mix(in oklch, var(--red) 0%, transparent);
    }
}

.rtp-live-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.25);
    padding: calc(var(--spacing) * 0.75) var(--p-2);
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--red) 14%, transparent);
    border: 1px solid color-mix(in oklch, var(--red) 30%, transparent);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--red);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    animation: rtp-live-pulse 2s ease-in-out infinite;
}

.rtp-live-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    flex-shrink: 0;
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.rtp-hot-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.25);
    padding: calc(var(--spacing) * 0.75) var(--p-2);
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--orange) 14%, transparent);
    border: 1px solid color-mix(in oklch, var(--orange) 30%, transparent);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--orange);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    animation: rtp-live-pulse 2s ease-in-out infinite;
}

.rtp-hot-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
    flex-shrink: 0;
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.rtp-section-link {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-1);
    text-decoration: none;
    padding: calc(var(--spacing) * 1.5) var(--p-3);
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in oklch, var(--accent) 22%, transparent);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.rtp-section-link:hover {
    background: color-mix(in oklch, var(--accent) 18%, transparent);
    border-color: var(--accent);
    color: var(--text);
}


/* ── GRID ────────────────────────────────────────────────── */
.rtp-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--gap-3);
    margin-bottom: var(--m-7);
}


/* ── CARD SHELL ──────────────────────────────────────────── */
@keyframes rtp-card-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rtp-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
    animation: rtp-card-in 0.3s ease both;
}

/* Staggered entrance delay for first 6 cards */
.rtp-card:nth-child(1) {
    animation-delay: 0.04s;
}

.rtp-card:nth-child(2) {
    animation-delay: 0.08s;
}

.rtp-card:nth-child(3) {
    animation-delay: 0.12s;
}

.rtp-card:nth-child(4) {
    animation-delay: 0.16s;
}

.rtp-card:nth-child(5) {
    animation-delay: 0.20s;
}

.rtp-card:nth-child(6) {
    animation-delay: 0.24s;
}

.rtp-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in oklch, var(--orange) 50%, transparent);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 0 0 1px color-mix(in oklch, var(--orange) 18%, transparent);
}

/* Hot accent bar on top — animates in on hover */
.rtp-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            var(--orange) 0%,
            var(--red) 50%,
            var(--orange) 100%);
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.22s;
    animation: rtp-shimmer-bar 2.5s linear infinite paused;
}

@keyframes rtp-shimmer-bar {
    0% {
        background-position: 200% 50%;
    }

    100% {
        background-position: -200% 50%;
    }
}

.rtp-card:hover::after {
    opacity: 1;
    animation-play-state: running;
}


/* ── THUMBNAIL ───────────────────────────────────────────── */
.rtp-card-thumbnail {
    position: relative;
    aspect-ratio: 3 / 4;
    /* Portrait — lebih pas untuk slot game cover */
    overflow: hidden;
    background: var(--surface);
    flex-shrink: 0;
}

.rtp-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.82) saturate(0.75);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s;
    display: block;
}

.rtp-card:hover .rtp-card-thumbnail img {
    transform: scale(1.07);
    filter: brightness(1) saturate(1.05);
}

/* Gradient overlay — selalu visible untuk readability badge */
.rtp-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            color-mix(in oklch, var(--bg) 0%, transparent) 40%,
            color-mix(in oklch, var(--bg) 70%, transparent) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--p-2);
    pointer-events: none;
}

.rtp-card-overlay-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-1);
}

.rtp-card-overlay-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}


/* ── STATUS CHIP ─────────────────────────────────────────── */
.rtp-status {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-1);
    padding: calc(var(--spacing) * 0.75) calc(var(--spacing) * 1.75);
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
    pointer-events: auto;
}

/* HOT */
.rtp-status--hot {
    background: color-mix(in oklch, var(--orange) 22%, rgba(0, 0, 0, 0.5));
    border: 1px solid color-mix(in oklch, var(--orange) 40%, transparent);
    color: var(--orange);
}

/* NEW */
.rtp-status--new {
    background: color-mix(in oklch, var(--accent) 22%, rgba(0, 0, 0, 0.5));
    border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
    color: var(--accent);
}

/* LIVE — pulsing dot */
.rtp-status--live {
    background: color-mix(in oklch, var(--red) 22%, rgba(0, 0, 0, 0.5));
    border: 1px solid color-mix(in oklch, var(--red) 40%, transparent);
    color: var(--red);
}

.rtp-status--live::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--red);
    flex-shrink: 0;
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* GACOR */
.rtp-status--gacor {
    background: color-mix(in oklch, var(--green) 18%, rgba(0, 0, 0, 0.5));
    border: 1px solid color-mix(in oklch, var(--green) 35%, transparent);
    color: var(--green);
}

.rtp-status--gacor::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}


/* ── PROVIDER BADGE ──────────────────────────────────────── */
.rtp-provider {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--spacing) * 0.75) calc(var(--spacing) * 1.75);
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--text2);
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid color-mix(in oklch, var(--color-white) 10%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
    pointer-events: auto;
    letter-spacing: 0.3px;
}


/* ── CARD BODY ───────────────────────────────────────────── */
.rtp-card-body {
    padding: var(--p-3);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
    flex: 1;
}

.rtp-game-name {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ── RTP BAR ─────────────────────────────────────────────── */
.rtp-bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-1);
}

.rtp-bar-label {
    font-size: var(--text-2xs);
    line-height: var(--text-2xs--line-height);
    color: var(--text3);
    font-weight: var(--font-weight-medium);
    flex-shrink: 0;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.rtp-bar-value {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-extrabold);
    color: var(--orange);
    letter-spacing: -0.3px;
    flex-shrink: 0;
}

/* High RTP (≥97%) gets green tint */
.rtp-bar-value--high {
    color: var(--green);
}

/* Track */
.rtp-bar-track {
    height: 5px;
    background: var(--surface2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

/* Fill — inline style width: XX% */
@keyframes rtp-bar-grow {
    from {
        width: 0;
    }
}

.rtp-bar-fill {
    height: 100%;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg,
            var(--orange) 0%,
            color-mix(in oklch, var(--orange) 70%, var(--red)) 100%);
    animation: rtp-bar-grow 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: 0.3s;
    position: relative;
}

/* High RTP — green fill */
.rtp-bar-fill--high {
    background: linear-gradient(90deg,
            color-mix(in oklch, var(--green) 80%, var(--orange)) 0%,
            var(--green) 100%);
}

/* Shimmer effect on bar fill */
.rtp-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            color-mix(in oklch, white 25%, transparent) 50%,
            transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 2.5s ease-in-out infinite;
    animation-delay: 1s;
}


/* ── CARD FOOTER ─────────────────────────────────────────── */
.rtp-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-2);
    margin-top: auto;
}

.rtp-maxwin {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--text3);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rtp-maxwin strong {
    color: var(--gold);
    font-weight: var(--font-weight-bold);
}

/* Play button — hidden until hover */
.rtp-play-btn {
    width: var(--size-7);
    height: var(--size-7);
    border-radius: var(--radius-lg);
    background: var(--orange);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.2s, transform 0.2s, background 0.18s, box-shadow 0.18s;
}

.rtp-play-btn .material-symbols-rounded {
    font-size: var(--text-sm);
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.rtp-card:hover .rtp-play-btn {
    opacity: 1;
    transform: scale(1);
}

.rtp-play-btn:hover {
    background: color-mix(in oklch, var(--orange) 85%, white);
    box-shadow: 0 3px 10px color-mix(in oklch, var(--orange) 45%, transparent);
    transform: scale(1.1) !important;
}


/* ── RESPONSIVE ──────────────────────────────────────────── */

/* ≤ 1280px — 5 kolom */
@media (max-width: 1280px) {
    .rtp-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* ≤ 1024px — 4 kolom */
@media (max-width: 1024px) {
    .rtp-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--gap-3);
    }
}

/* ≤ 768px — 3 kolom, header lebih kompak */
@media (max-width: 768px) {
    .rtp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--gap-2);
    }

    .rtp-section-header {
        flex-wrap: wrap;
        gap: var(--gap-2);
        margin-bottom: var(--m-3);
    }
}

/* ≤ 640px — horizontal scroll dengan scroll snap */
@media (max-width: 640px) {
    .rtp-section-header {
        margin-bottom: var(--m-3);
    }

    .rtp-section-title {
        font-size: var(--text-sm);
    }

    /* Horizontal scroll */
    .rtp-grid {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: var(--gap-2);
        margin-bottom: var(--m-5);
        scroll-snap-type: x mandatory;
        padding-bottom: var(--p-1);
        /* Negative margin trick untuk full-bleed scroll di mobile */
        margin-left: calc(var(--p-3) * -1);
        margin-right: calc(var(--p-3) * -1);
        padding-left: var(--p-3);
        padding-right: var(--p-3);
    }

    .rtp-grid::-webkit-scrollbar {
        display: none;
    }

    .rtp-card {
        min-width: 38vw;
        max-width: 44vw;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    /* Thumbnail lebih square di mobile */
    .rtp-card-thumbnail {
        aspect-ratio: 1 / 1;
    }

    .rtp-card-body {
        padding: var(--p-2);
        gap: var(--gap-1);
    }

    .rtp-game-name {
        font-size: var(--text-xs);
    }

    .rtp-bar-value {
        font-size: var(--text-xs);
    }

    .rtp-play-btn {
        /* Selalu visible di touch device */
        opacity: 1;
        transform: scale(1);
    }

    .rtp-status {
        font-size: var(--text-2xs);
        padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.25);
    }

    .rtp-provider {
        font-size: var(--text-2xs);
        padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.25);
    }

    .rtp-maxwin {
        font-size: var(--text-2xs);
    }

    .rtp-live-badge {
        font-size: var(--text-2xs);
        padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
    }
}

/* ≤ 374px — kartu sedikit lebih lebar */
@media (max-width: 374px) {
    .rtp-card {
        min-width: 50vw;
        max-width: 56vw;
    }

    .rtp-section-link {
        font-size: var(--text-2xs);
        padding: calc(var(--spacing) * 1) var(--p-2);
    }
}/* ============================================================
   modal.css  —  Dialog overlays & modal sheets
   ============================================================ */


/* ── BACKDROP ───────────────────────────────────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}


/* ── DIALOG BOX ─────────────────────────────────────────── */
.modal {
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: calc(var(--spacing) * 120);
    margin: var(--m-4);
    overflow: hidden;
    transform: translateY(var(--p-3)) scale(0.98);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.modal-backdrop.open .modal {
    transform: translateY(0) scale(1);
}


/* ── MODAL HEADER ───────────────────────────────────────── */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--p-4) var(--p-4) var(--p-3);
    border-bottom: 1px solid var(--border);
}

.modal-title {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--text);
}

.modal-close {
    width: var(--size-8);
    height: var(--size-8);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text3);
    font-size: var(--text-sm);
    transition: background 0.18s, color 0.18s;
}

.modal-close:hover {
    background: var(--surface2);
    color: var(--text);
}


/* ── MODAL BODY ─────────────────────────────────────────── */
.modal-body {
    padding: var(--p-4);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--text2);
}


/* ── MODAL FOOTER ───────────────────────────────────────── */
.modal-footer {
    padding: var(--p-3) var(--p-4) var(--p-4);
    border-top: 1px solid var(--border);
    display: flex;
    gap: var(--gap-2);
    justify-content: flex-end;
}


/* ── BOTTOM SHEET (mobile) ──────────────────────────────── */
.sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

.sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.sheet {
    width: 100%;
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--p-3) var(--p-4) var(--p-8);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
}

.sheet-backdrop.open .sheet {
    transform: translateY(0);
}

.sheet-handle {
    width: var(--size-9);
    height: var(--p-1);
    background: var(--surface2);
    border-radius: var(--radius-lg);
    margin: 0 auto var(--m-4);
}/* ============================================================
   error.css  —  Error pages (404, 500) & empty states
   ============================================================ */


/* ── FULL-PAGE ERROR ────────────────────────────────────── */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: var(--p-10) var(--p-4);
}

.error-code {
    font-size: var(--text-6xl);
    line-height: var(--text-6xl--line-height);
    font-weight: var(--font-weight-black);
    color: var(--surface2);
    letter-spacing: -4px;
    margin-bottom: var(--m-2);
}

.error-title {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: var(--font-weight-extrabold);
    color: var(--text);
    margin-bottom: var(--m-3);
}

.error-desc {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--text3);
    max-width: calc(var(--spacing) * 95);
    margin-bottom: var(--m-7);
}

.error-actions {
    display: flex;
    gap: var(--gap-3);
    flex-wrap: wrap;
    justify-content: center;
}


/* ── INLINE EMPTY STATE ─────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--p-12) var(--p-4);
    text-align: center;
}

.empty-icon {
    font-size: var(--text-4xl);
    line-height: 1;
    margin-bottom: var(--m-4);
    opacity: 0.4;
}

.empty-title {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--text2);
    margin-bottom: var(--m-2);
}

.empty-desc {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--text3);
    max-width: calc(var(--spacing) * 75);
    margin-bottom: var(--m-5);
}


/* Alert styles dipindahkan ke alert.css *//* ============================================================
   alert.css  —  Inline alerts, toast notifications, and
                 dismissible alert banners.
   Includes: generic .alert variants, .alert-bank (bank data),
             and any future alert/toast components.
   ============================================================ */


/* ── GENERIC INLINE ALERT ───────────────────────────────── */
/*
   Usage:
   <div class="alert alert-info">
       <span class="alert-icon material-symbols-rounded">info</span>
       <div class="alert-text">
           <div class="alert-title">Judul</div>
           Deskripsi pesan di sini.
       </div>
   </div>
*/

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-3);
    padding: var(--p-3) var(--p-4);
    border-radius: var(--radius-lg);
    border: 1px solid;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    margin-bottom: var(--m-4);
}

.alert-info {
    background: color-mix(in oklch, var(--color-blue-500) 8%, transparent);
    border-color: color-mix(in oklch, var(--color-blue-500) 20%, transparent);
    color: var(--accent);
}

.alert-success {
    background: color-mix(in oklch, var(--color-green-500) 8%, transparent);
    border-color: color-mix(in oklch, var(--color-green-500) 20%, transparent);
    color: var(--green);
}

.alert-warning {
    background: color-mix(in oklch, var(--color-orange-500) 8%, transparent);
    border-color: color-mix(in oklch, var(--color-orange-500) 20%, transparent);
    color: var(--orange);
}

.alert-error {
    background: color-mix(in oklch, var(--color-red-500) 8%, transparent);
    border-color: color-mix(in oklch, var(--color-red-500) 20%, transparent);
    color: var(--red);
}

.alert-icon {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    flex-shrink: 0;
    margin-top: 1px;
}

.alert-text {
    flex: 1;
}

.alert-title {
    font-weight: var(--font-weight-bold);
    margin-bottom: calc(var(--spacing) * 0.5);
}


/* ── ALERT: DATA BANK BELUM LENGKAP ────────────────────── */
/*
   Tampilkan alert ini hanya untuk user baru yang belum
   melengkapi data rekening bank (deposit & withdraw).
   Letakkan tepat sebelum .banner-grid di dalam .main.

   Usage:
   <div class="alert-bank">
       <div class="alert-bank__icon">
           <span class="material-symbols-rounded">account_balance</span>
       </div>
       <div class="alert-bank__body">
           <div class="alert-bank__title">Lengkapi Data Bank</div>
           <div class="alert-bank__desc">Tambahkan rekening bank untuk deposit & withdraw.</div>
       </div>
       <div class="alert-bank__actions">
           <button class="alert-bank__btn-primary">Lengkapi Sekarang</button>
           <button class="alert-bank__btn-dismiss">
               <span class="material-symbols-rounded">close</span>
           </button>
       </div>
   </div>

   Dismiss via JS: element.classList.add('dismissed')
*/

@keyframes alert-bank-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-bank {
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    padding: var(--p-3) var(--p-4);
    margin-bottom: var(--m-4);
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in oklch, var(--red) 35%, transparent);
    background: color-mix(in oklch, var(--red) 10%, transparent);
    animation: alert-bank-in 0.32s cubic-bezier(0.4, 0, 0.2, 1) both;
    overflow: hidden;
    max-height: 200px;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease,
        padding 0.3s ease,
        margin 0.3s ease;
}

.alert-bank.dismissed {
    max-height: 0 !important;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-width: 0;
}

/* Icon container */
.alert-bank__icon {
    width: var(--size-9);
    height: var(--size-9);
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--red) 18%, transparent);
    border: 1px solid color-mix(in oklch, var(--red) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--red);
}

.alert-bank__icon .material-symbols-rounded {
    font-size: var(--text-lg);
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Text body */
.alert-bank__body {
    flex: 1;
    min-width: 0;
}

.alert-bank__title {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--red);
    margin-bottom: calc(var(--spacing) * 0.5);
}

.alert-bank__desc {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--text2);
}

/* Action area */
.alert-bank__actions {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    flex-shrink: 0;
}

.alert-bank__btn-primary {
    height: var(--size-8);
    padding: 0 var(--p-3);
    border-radius: var(--radius-lg);
    background: var(--red);
    color: white;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-bold);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.18s, transform 0.18s;
}

.alert-bank__btn-primary:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.alert-bank__btn-dismiss {
    width: var(--size-7);
    height: var(--size-7);
    border-radius: var(--radius-lg);
    background: transparent;
    border: 1px solid color-mix(in oklch, var(--red) 30%, transparent);
    color: var(--text3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    flex-shrink: 0;
}

.alert-bank__btn-dismiss .material-symbols-rounded {
    font-size: var(--text-sm);
}

.alert-bank__btn-dismiss:hover {
    background: color-mix(in oklch, var(--red) 15%, transparent);
    border-color: var(--red);
    color: var(--red);
}


/* ── RESPONSIVE ─────────────────────────────────────────── */

/* Mobile: ≤ 640px */
@media (max-width: 640px) {
    .alert-bank {
        flex-wrap: wrap;
        gap: var(--gap-2);
        padding: var(--p-3);
    }

    .alert-bank__icon {
        width: var(--size-8);
        height: var(--size-8);
    }

    .alert-bank__icon .material-symbols-rounded {
        font-size: var(--text-base);
    }

    .alert-bank__body {
        flex: 1;
        min-width: calc(100% - var(--size-10));
    }

    .alert-bank__title {
        font-size: var(--text-xs);
    }

    .alert-bank__desc {
        font-size: var(--text-xs);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .alert-bank__actions {
        width: 100%;
        justify-content: flex-end;
    }

    .alert-bank__btn-primary {
        height: var(--size-7);
        font-size: var(--text-xs);
    }
}

/* Small mobile: ≤ 374px */
@media (max-width: 374px) {
    .alert-bank__actions {
        justify-content: stretch;
    }

    .alert-bank__btn-primary {
        flex: 1;
        text-align: center;
    }
}/* ============================================================
   custom.css  —  Per-page / one-off component styles
   Only load this file on pages that actually need it.
   ============================================================ */


/* ── PRODUCT DETAIL PAGE ────────────────────────────────── */
.pd-gallery {
    display: grid;
    grid-template-columns: var(--size-20) 1fr;
    gap: var(--gap-3);
    margin-bottom: var(--m-7);
}

.pd-thumbs {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2);
}

.pd-thumb {
    width: var(--size-20);
    height: var(--size-20);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.18s, transform 0.18s;
    background: var(--surface);
}

.pd-thumb:hover {
    transform: scale(1.04);
}

.pd-thumb.active {
    border-color: var(--accent);
}

.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-main-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--surface);
}

.pd-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-title {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: var(--font-weight-extrabold);
    margin-bottom: var(--m-2);
}

.pd-price {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
    font-weight: var(--font-weight-black);
    color: var(--text);
    margin-bottom: var(--m-1);
}

.pd-price-old {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    color: var(--text3);
    text-decoration: line-through;
}

.pd-desc {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--text2);
    margin-bottom: var(--m-5);
}

.pd-variants {
    display: flex;
    gap: var(--gap-2);
    flex-wrap: wrap;
    margin-bottom: var(--m-5);
}

.pd-variant {
    padding: var(--p-2) var(--p-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border2);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.18s;
    color: var(--text2);
}

.pd-variant:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.pd-variant.active {
    border-color: var(--accent);
    background: color-mix(in oklch, var(--accent) 10%, transparent);
    color: var(--accent);
}


/* ── CART PAGE ──────────────────────────────────────────── */
.cart-item {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-4);
    padding: var(--p-4) 0;
    border-bottom: 1px solid var(--border);
}

.cart-img {
    width: var(--size-20);
    height: var(--size-20);
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--surface);
}

.cart-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-info {
    flex: 1;
}

.cart-name {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--m-1);
}

.cart-variant {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--text3);
    margin-bottom: var(--m-2);
}

.cart-price {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    font-weight: var(--font-weight-extrabold);
}

.qty-stepper {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
}

.qty-btn {
    width: var(--size-7);
    height: var(--size-7);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: var(--text-base);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
}

.qty-btn:hover {
    background: var(--surface2);
    border-color: var(--border2);
}

.qty-val {
    min-width: var(--size-8);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
}


/* ── ORDER SUMMARY ──────────────────────────────────────── */
.order-summary {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--p-4);
}

.order-summary-title {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--m-4);
}

.order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--m-3);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--text2);
}

.order-row.total {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    font-weight: var(--font-weight-extrabold);
    color: var(--text);
    border-top: 1px solid var(--border);
    padding-top: var(--p-3);
    margin-top: var(--m-1);
    margin-bottom: 0;
}


/* ── USER PROFILE ───────────────────────────────────────── */
.profile-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--p-6);
    display: flex;
    align-items: center;
    gap: var(--gap-4);
    margin-bottom: var(--m-4);
}

.profile-avatar {
    width: var(--size-18);
    height: var(--size-18);
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xl);
    line-height: 1;
    font-weight: var(--font-weight-black);
    color: white;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 25%, transparent);
}

.profile-name {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    font-weight: var(--font-weight-extrabold);
    margin-bottom: var(--m-1);
}

.profile-email {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--text3);
}

/* Alert-bank dipindahkan ke alert.css *//* ============================================================
   breadcrumb.css — Breadcrumb navigation component
   ============================================================ */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    margin-bottom: 1.25rem;
    font-size: 0.8rem;
    color: var(--text3);
    flex-wrap: wrap;
}

.breadcrumb a {
    color: var(--text3);
    text-decoration: none;
    transition: color 0.18s;
}

.breadcrumb a:hover {
    color: var(--accent);
}

.breadcrumb-sep {
    font-size: 0.7rem;
    opacity: 0.5;
    user-select: none;
}

.breadcrumb-current {
    color: var(--text2);
    font-weight: 500;
}
/* ============================================================
   submenu.css — Sidebar submenu for detail pages (about, bonus, profile)
   ============================================================ */

.submenu-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
    position: sticky;
    top: calc(var(--header-h) + 1rem);
}

.submenu-heading {
    padding: 1rem 1.25rem 0.6rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text3);
}

.submenu-list {
    list-style: none;
    padding: 0 0 0.5rem;
    margin: 0;
}

.submenu-item {
    display: block;
}

.submenu-item a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1.25rem;
    color: var(--text2);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 450;
    transition: background 0.15s, color 0.15s, border-left 0.15s;
    border-left: 3px solid transparent;
}

.submenu-item a .material-symbols-rounded {
    font-size: 1.15rem;
    color: var(--text3);
    transition: color 0.15s;
}

.submenu-item a:hover {
    background: var(--surface2);
    color: var(--text);
}

.submenu-item a:hover .material-symbols-rounded {
    color: var(--accent);
}

.submenu-item.active a {
    background: color-mix(in oklch, var(--accent) 10%, transparent);
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 600;
}

.submenu-item.active a .material-symbols-rounded {
    color: var(--accent);
}
/* ============================================================
   form.css — Form components (login, register, deposit, etc.)
   ============================================================ */

.form-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.form-panel-header {
    padding: 1.5rem 1.5rem 0.25rem;
    text-align: center;
}

.form-panel-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.25rem;
}

.form-panel-header p {
    font-size: 0.8rem;
    color: var(--text3);
    margin: 0;
}

.form-panel-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group:last-of-type {
    margin-bottom: 0;
}

.form-label-text {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 550;
    color: var(--text2);
    margin-bottom: 0.4rem;
}

.form-label-text .material-symbols-rounded {
    font-size: 1rem;
    color: var(--text3);
}

.form-input-wrap {
    position: relative;
}

.form-input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: 0.5rem;
    color: var(--text);
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.form-input::placeholder {
    color: var(--text3);
    opacity: 0.7;
}

.form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 15%, transparent);
}

.form-input-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text3);
    cursor: pointer;
    font-size: 1.15rem;
    transition: color 0.15s;
}

.form-input-icon:hover {
    color: var(--text2);
}

.form-hint {
    font-size: 0.72rem;
    color: var(--text3);
    margin-top: 0.3rem;
}

.form-hint a {
    color: var(--accent);
    text-decoration: none;
}

.form-hint a:hover {
    text-decoration: underline;
}

.form-submit {
    width: 100%;
    padding: 0.75rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 650;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.18s, transform 0.12s;
    margin-top: 0.75rem;
}

.form-submit:hover {
    background: var(--accent2);
}

.form-submit:active {
    transform: scale(0.985);
}

.form-panel-footer {
    padding: 0 1.5rem 1.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text3);
}

.form-panel-footer a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.form-panel-footer a:hover {
    text-decoration: underline;
}

.form-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    color: var(--text3);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.form-divider::before,
.form-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── Select Input ── */
.form-select {
    width: 100%;
    padding: 0.7rem 2.25rem 0.7rem 0.85rem;
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: 0.5rem;
    color: var(--text);
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a1a1aa'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 15%, transparent);
}

/* ── Textarea ── */
.form-textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: 0.5rem;
    color: var(--text);
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.form-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 15%, transparent);
}

/* ── Info Alert inside form ── */
.form-info-box {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background: color-mix(in oklch, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in oklch, var(--accent) 20%, transparent);
    border-radius: 0.5rem;
    font-size: 0.78rem;
    color: var(--text2);
    margin-bottom: 1rem;
}

.form-info-box .material-symbols-rounded {
    color: var(--accent);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

/* ── Radio / Bank Selection Cards ── */
.form-radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.5rem;
}

.form-radio-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    background: var(--bg2);
    border: 1.5px solid var(--border2);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.form-radio-card:hover {
    border-color: var(--text3);
}

.form-radio-card input[type="radio"] {
    display: none;
}

.form-radio-card input[type="radio"]:checked + .form-radio-card-inner {
    /* parent selected state applied via JS */
}

.form-radio-card.selected {
    border-color: var(--accent);
    background: color-mix(in oklch, var(--accent) 6%, transparent);
}

.form-radio-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border2);
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s;
}

.form-radio-card.selected .form-radio-dot {
    border-color: var(--accent);
}

.form-radio-card.selected .form-radio-dot::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.form-radio-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text2);
}

.form-radio-label small {
    display: block;
    font-size: 0.7rem;
    color: var(--text3);
    font-weight: 400;
    margin-top: 0.1rem;
}

/* ── Amount quick-pick chips ── */
.form-amount-chips {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.form-amount-chip {
    padding: 0.35rem 0.75rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    font-size: 0.75rem;
    font-weight: 550;
    color: var(--text2);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.form-amount-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}
/* ============================================================
   game-filter.css — Game list filter bar + game grid
   Used by: category detail, provider detail, game search
   ============================================================ */

.game-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.game-search-box {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.game-search-box .material-symbols-rounded {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--text3);
    pointer-events: none;
}

.game-search-input {
    width: 100%;
    padding: 0.6rem 0.85rem 0.6rem 2.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    color: var(--text);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s;
}

.game-search-input:focus {
    border-color: var(--accent);
}

.game-filter-dropdown {
    padding: 0.6rem 2rem 0.6rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    color: var(--text2);
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23a1a1aa'%3E%3Cpath d='M5 7L0 2h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    transition: border-color 0.15s;
}

.game-filter-dropdown:focus {
    border-color: var(--accent);
}

.game-filter-chips {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.game-filter-chip {
    padding: 0.4rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    color: var(--text3);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.game-filter-chip:hover,
.game-filter-chip.active {
    background: color-mix(in oklch, var(--accent) 12%, transparent);
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Game List Grid (full page, not homepage) ── */
.game-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .game-list-grid {
        grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    }
}

@media (min-width: 1200px) {
    .game-list-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.game-list-card {
    position: relative;
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.game-list-card:hover {
    transform: translateY(-3px);
    border-color: var(--border2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.game-list-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background: var(--bg2);
}

.game-list-card-badge {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.game-list-card-badge--hot {
    background: var(--red);
    color: white;
}

.game-list-card-badge--new {
    background: var(--green);
    color: white;
}

.game-list-card-badge--live {
    background: var(--orange);
    color: white;
}

.game-list-card-badge--popular {
    background: var(--gold);
    color: var(--bg);
}

.game-list-card-info {
    padding: 0.5rem 0.6rem;
}

.game-list-card-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-list-card-provider {
    font-size: 0.68rem;
    color: var(--text3);
    margin-top: 0.1rem;
}

/* ── Play overlay on hover ── */
.game-list-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s;
}

.game-list-card:hover .game-list-card-overlay {
    opacity: 1;
}

.game-list-play-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    font-size: 1.5rem;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
    transform: scale(0.8);
    transition: transform 0.2s;
}

.game-list-card:hover .game-list-play-btn {
    transform: scale(1);
}

/* ── Load More / Pagination ── */
.game-load-more {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.game-load-more-btn {
    padding: 0.65rem 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    color: var(--text2);
    font-size: 0.85rem;
    font-weight: 550;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.game-load-more-btn:hover {
    background: var(--surface2);
    border-color: var(--border2);
    color: var(--text);
}

/* ── Game count / result info ── */
.game-result-info {
    font-size: 0.78rem;
    color: var(--text3);
    margin-bottom: 0.75rem;
}

.game-result-info strong {
    color: var(--text2);
}
/* ============================================================
   tab.css — Horizontal tab navigation component
   Used by: profile history, profile settings
   ============================================================ */

.tab-nav {
    display: flex;
    border-bottom: 1px solid var(--border);
    gap: 0;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.tab-nav::-webkit-scrollbar {
    display: none;
}

.tab-nav-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    text-decoration: none;
}

.tab-nav-item .material-symbols-rounded {
    font-size: 1rem;
}

.tab-nav-item:hover {
    color: var(--text2);
}

.tab-nav-item.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* ── Content Panel ── */
.content-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
}

.content-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.content-panel-title {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.content-panel-title .material-symbols-rounded {
    font-size: 1.2rem;
    color: var(--accent);
}

.content-panel-body {
    padding: 1.25rem;
}

/* ── Data Table ── */
.data-table-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--surface2) transparent;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.data-table thead th {
    padding: 0.65rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--text3);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    background: var(--surface);
}

.data-table tbody td {
    padding: 0.65rem 0.75rem;
    color: var(--text2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover td {
    background: var(--surface);
}

/* ── Status chips ── */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.status-chip--success {
    background: color-mix(in oklch, var(--green) 15%, transparent);
    color: var(--green);
}

.status-chip--pending {
    background: color-mix(in oklch, var(--orange) 15%, transparent);
    color: var(--orange);
}

.status-chip--failed {
    background: color-mix(in oklch, var(--red) 15%, transparent);
    color: var(--red);
}

.status-chip--info {
    background: color-mix(in oklch, var(--accent) 15%, transparent);
    color: var(--accent);
}

/* ── Empty State ── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-state-icon {
    font-size: 2.5rem;
    color: var(--text3);
    opacity: 0.4;
    margin-bottom: 0.75rem;
}

.empty-state-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: 0.3rem;
}

.empty-state-desc {
    font-size: 0.78rem;
    color: var(--text3);
    max-width: 280px;
}

/* ── Pagination ── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 1.25rem;
}

.pagination-btn {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.35rem;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text3);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.pagination-btn:hover {
    background: var(--surface);
    color: var(--text2);
}

.pagination-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.pagination-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Inbox item ── */
.inbox-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.12s;
}

.inbox-item:last-child {
    border-bottom: none;
}

.inbox-item:hover {
    background: var(--surface);
    margin: 0 -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.inbox-icon {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    background: color-mix(in oklch, var(--accent) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inbox-icon .material-symbols-rounded {
    font-size: 1.1rem;
    color: var(--accent);
}

.inbox-body {
    flex: 1;
    min-width: 0;
}

.inbox-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-preview {
    font-size: 0.75rem;
    color: var(--text3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-time {
    font-size: 0.68rem;
    color: var(--text3);
    white-space: nowrap;
    flex-shrink: 0;
}

.inbox-unread .inbox-title {
    color: var(--accent);
}

.inbox-unread::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-top: 0.5rem;
}
/* ============================================================
   page-layout.css — Shared layout for all inner pages
   Two-column layout (sidebar + main), single column, etc.
   ============================================================ */

/* ── Page wrapper (inside .main) ── */
.page-content {
    padding: 0 0 2rem;
}

.page-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.page-title {
    font-size: 1.35rem;
    font-weight: 750;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.page-title .material-symbols-rounded {
    font-size: 1.5rem;
    color: var(--accent);
}

.page-subtitle {
    font-size: 0.82rem;
    color: var(--text3);
    margin-top: 0.15rem;
}

/* ── Two-column layout ── */
.two-col {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 860px) {
    .two-col {
        grid-template-columns: 1fr;
    }
}

/* ── Center-column layout (forms, login, etc.) ── */
.center-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 2rem 0;
}

/* ── Bonus Grid ── */
.bonus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.bonus-card {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.bonus-card:hover {
    transform: translateY(-4px);
    border-color: var(--border2);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.bonus-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: var(--bg2);
}

.bonus-card-body {
    padding: 0.85rem 1rem;
}

.bonus-card-name {
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--text);
    margin-bottom: 0.2rem;
}

.bonus-card-desc {
    font-size: 0.75rem;
    color: var(--text3);
}

.bonus-card-tag {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--accent);
    color: white;
}

/* ── Category List Grid ── */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.85rem;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: all 0.18s;
    text-align: center;
}

.category-card:hover {
    border-color: var(--accent);
    background: color-mix(in oklch, var(--accent) 6%, transparent);
    transform: translateY(-2px);
}

.category-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 0.65rem;
    background: color-mix(in oklch, var(--accent) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-card-icon .material-symbols-rounded {
    font-size: 1.5rem;
    color: var(--accent);
}

.category-card-name {
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--text);
}

.category-card-count {
    font-size: 0.72rem;
    color: var(--text3);
}

/* ── Provider List Grid ── */
.provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 0.85rem;
}

.provider-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 1.25rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: all 0.18s;
    text-align: center;
}

.provider-card:hover {
    border-color: var(--accent);
    background: color-mix(in oklch, var(--accent) 6%, transparent);
    transform: translateY(-2px);
}

.provider-card-logo {
    width: 48px;
    height: 48px;
    border-radius: 0.55rem;
    object-fit: contain;
    background: var(--bg2);
}

.provider-card-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
}

.provider-card-count {
    font-size: 0.68rem;
    color: var(--text3);
}

.provider-card-badge {
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    font-size: 0.6rem;
    font-weight: 600;
    background: color-mix(in oklch, var(--green) 12%, transparent);
    color: var(--green);
}

/* ── About / Article Content ── */
.article-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.75rem;
}

.article-content h1 {
    font-size: 1.35rem;
    font-weight: 750;
    color: var(--text);
    margin-bottom: 1rem;
}

.article-content h2 {
    font-size: 1.1rem;
    font-weight: 650;
    color: var(--text);
    margin: 1.5rem 0 0.65rem;
}

.article-content h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text2);
    margin: 1.25rem 0 0.5rem;
}

.article-content p {
    font-size: 0.88rem;
    color: var(--text2);
    line-height: 1.7;
    margin-bottom: 0.85rem;
}

.article-content ul,
.article-content ol {
    padding-left: 1.5rem;
    margin-bottom: 0.85rem;
}

.article-content li {
    font-size: 0.88rem;
    color: var(--text2);
    line-height: 1.7;
    margin-bottom: 0.3rem;
}

.article-content a {
    color: var(--accent);
    text-decoration: none;
}

.article-content a:hover {
    text-decoration: underline;
}

.article-content img {
    max-width: 100%;
    border-radius: 0.5rem;
    margin: 0.75rem 0;
}

.article-content figure {
    margin: 1rem 0;
}

.article-content figure img {
    width: 100%;
}

/* ── Contact Info Cards ── */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s;
}

.contact-card:hover {
    border-color: var(--accent);
    background: color-mix(in oklch, var(--accent) 5%, transparent);
}

.contact-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    background: color-mix(in oklch, var(--accent) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-card-icon .material-symbols-rounded {
    font-size: 1.2rem;
    color: var(--accent);
}

.contact-card-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.contact-card-val {
    font-size: 0.75rem;
    color: var(--text3);
}

/* ── Livescore ── */
.livescore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.85rem;
}

.livescore-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: border-color 0.15s;
}

.livescore-card:hover {
    border-color: var(--border2);
}

.livescore-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.85rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: 0.7rem;
    color: var(--text3);
}

.livescore-league {
    font-weight: 600;
    color: var(--text2);
}

.livescore-status {
    padding: 0.15rem 0.4rem;
    border-radius: 0.2rem;
    font-weight: 600;
    font-size: 0.65rem;
}

.livescore-status--live {
    background: color-mix(in oklch, var(--red) 15%, transparent);
    color: var(--red);
}

.livescore-status--ft {
    background: color-mix(in oklch, var(--green) 15%, transparent);
    color: var(--green);
}

.livescore-status--ns {
    background: var(--surface2);
    color: var(--text3);
}

.livescore-match {
    display: flex;
    align-items: center;
    padding: 0.85rem;
    gap: 0.75rem;
}

.livescore-team {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.livescore-team--away {
    justify-content: flex-end;
    text-align: right;
}

.livescore-team-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: contain;
    background: var(--bg2);
    flex-shrink: 0;
}

.livescore-team-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.livescore-score {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    flex-shrink: 0;
    min-width: 52px;
    justify-content: center;
}

.livescore-score-sep {
    color: var(--text3);
    font-weight: 400;
}

.livescore-card-footer {
    padding: 0.45rem 0.85rem;
    border-top: 1px solid var(--border);
    font-size: 0.7rem;
    color: var(--text3);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ── Profile Balance Card ── */
.balance-card {
    background: linear-gradient(135deg, color-mix(in oklch, var(--accent) 15%, var(--bg2)), var(--bg2));
    border: 1px solid color-mix(in oklch, var(--accent) 20%, var(--border));
    border-radius: 0.85rem;
    padding: 1.35rem 1.5rem;
    margin-bottom: 1.25rem;
}

.balance-card-label {
    font-size: 0.72rem;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.balance-card-amount {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 0.75rem;
}

.balance-card-actions {
    display: flex;
    gap: 0.5rem;
}

.balance-card-btn {
    flex: 1;
    padding: 0.55rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: all 0.15s;
}

.balance-card-btn .material-symbols-rounded {
    font-size: 1rem;
}

.balance-card-btn--deposit {
    background: var(--accent);
    color: white;
}

.balance-card-btn--deposit:hover {
    background: var(--accent2);
}

.balance-card-btn--withdraw {
    background: var(--surface2);
    color: var(--text2);
    border: 1px solid var(--border);
}

.balance-card-btn--withdraw:hover {
    background: var(--surface3);
}

/* ── Profile Quick Menu ── */
.profile-quick-menu {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}

.profile-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.1rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s;
}

.profile-menu-item:hover {
    border-color: var(--accent);
    background: color-mix(in oklch, var(--accent) 5%, transparent);
}

.profile-menu-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    background: color-mix(in oklch, var(--accent) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-menu-icon .material-symbols-rounded {
    font-size: 1.2rem;
    color: var(--accent);
}

.profile-menu-label {
    font-size: 0.78rem;
    font-weight: 550;
    color: var(--text2);
}

/* ── Promo selection in deposit form ── */
.promo-select-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.promo-select-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--bg2);
    border: 1.5px solid var(--border2);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
}

.promo-select-item:hover {
    border-color: var(--text3);
}

.promo-select-item.selected {
    border-color: var(--accent);
    background: color-mix(in oklch, var(--accent) 6%, transparent);
}

.promo-select-img {
    width: 56px;
    height: 32px;
    object-fit: cover;
    border-radius: 0.3rem;
    background: var(--surface);
    flex-shrink: 0;
}

.promo-select-name {
    font-size: 0.8rem;
    font-weight: 550;
    color: var(--text2);
    flex: 1;
}

.promo-select-check {
    color: var(--accent);
    font-size: 1.1rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.promo-select-item.selected .promo-select-check {
    opacity: 1;
}