:root {
    --primary-bg: #050814;
    --secondary-bg: #111827;
    --accent: #facc15;
    --accent-soft: #fcd34d;
    --accent-danger: #ef4444;
    --text-main: #f9fafb;
    --text-muted: #9ca3af;
    --card-bg: #111827;
    --border-soft: #1f2937;

    /* NEW – theme helpers */
    --navbar-bg: rgba(15, 23, 42, 0.96);
    --overlay-strong: rgba(15, 23, 42, 0.7);

    --accent-info: #1d4ed8;
    /* blue (Telegram / info) */
    --accent-brand: #f97316;
    /* orange (LP, badges, etc.) */
    --accent-success: #22c55e;
    /* green for balances */
    --accent-balance-side: #16a34a;
    /* green in side menu */

    --panel-bg: #020617;
    /* very dark panel background */

    --telegram-grad-from: #1d4ed8;
    --telegram-grad-to: #7c3aed;

    --provider-card-bg: #2a0b12;
    /* deep wine, very dark */
    --provider-card-border: rgba(239, 68, 68, 0.22);
    /* softer red border */
    --provider-card-border-hover: var(--accent);
    /* keep your hover accent */

    /* NEW for overlay / sidebar */
    --sidebar-bg: #020617;
    --sidebar-header-bg: #050814;
    --sidebar-username: var(--accent-soft);
    --sidebar-item-icon: var(--accent-danger);
    --sidebar-item-active-bg: rgba(239, 68, 68, 0.12);
    --sidebar-item-active-border: var(--accent-danger);
    --sidebar-logout-bg: var(--secondary-bg);
    --sidebar-logout-text: var(--text-main);
    --overlay-bg: rgba(15, 23, 42, 0.7);

    /* NEW color helpers used below */
    --text-muted-strong: #d1d5db;
    --top-strip-text: #e5e7eb;
    --badge-pill-bg: rgba(15, 23, 42, 0.9);

    --hero-card-border-color: rgba(148, 163, 184, 0.2);
    --hero-card-shadow-color: rgba(15, 23, 42, 0.9);
    --hero-badge-bg: rgba(15, 118, 110, 0.2);
    --hero-badge-text: #a7f3d0;
    --hero-stat-bg: rgba(15, 23, 42, 0.9);
    --hero-stat-border-color: rgba(55, 65, 81, 0.8);
    --hero-chip-border-color: rgba(249, 250, 251, 0.08);
    --hero-chip-bg: rgba(15, 23, 42, 0.9);
    --hero-rtp-inner-border-color: rgba(248, 250, 252, 0.1);

    --providers-strip-bg: rgba(15, 23, 42, 0.9);
    --provider-pill-bg: rgba(31, 41, 55, 0.9);
    --provider-pill-border: rgba(55, 65, 81, 0.8);
    --provider-pill-text: #e5e7eb;
    --scrollbar-thumb: #4b5563;

    --badge-hot-bg: rgba(239, 68, 68, 0.9);
    --badge-maxwin-bg: rgba(34, 197, 94, 0.9);
    --badge-buyspin-bg: rgba(59, 130, 246, 0.9);
    --badge-jackpot-bg: rgba(239, 68, 68, 0.9);

    --thumb-overlay-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);

    --footer-bg: #020617;
    --footer-title: #e5e7eb;

    --form-border: #374151;
    --focus-shadow-color: rgba(250, 204, 21, 0.2);

    --auth-border-bottom: rgba(148, 163, 184, 0.2);
    --auth-balance-border: rgba(255, 255, 255, 0.08);
    --auth-level-bg: rgba(255, 255, 255, 0.08);
    --auth-icon-btn-bg: rgba(255, 255, 255, 0.10);
    --auth-icon-btn-alt-bg: rgba(255, 255, 255, 0.08);
    --auth-progress-bar-bg: rgba(255, 255, 255, 0.1);
    --auth-desktop-balance-border: rgba(255, 255, 255, 0.08);

    --overlay-shadow-color: rgba(0, 0, 0, 0.55);

    --provider-card-shadow-color: rgba(0, 0, 0, 0.35);
    --provider-card-shadow-hover-color: rgba(0, 0, 0, 0.5);

    --submenu-border-top: rgba(15, 23, 42, 0.65);
    --auth-side-active-bg: rgba(239, 68, 68, 0.12);
    --auth-side-parent-open-bg: rgba(15, 23, 42, 0.95);

    --mega-border-color: rgba(15, 23, 42, 0.9);


    --result-card-bg: var(--card-bg);
    --result-header-bg: var(--secondary-bg);
    --result-row-bg: rgba(15, 23, 42, 0.92);
    --result-row-alt-bg: rgba(15, 23, 42, 0.85);
    --result-tabs-bg: var(--primary-bg);
    --result-tab-active-bg: var(--secondary-bg);
    --result-tab-active-border: var(--accent);
    --result-pill-bg: rgba(34, 197, 94, 0.12);
    --result-pill-text: var(--accent-success);
    --status-online: var(--accent-success);
    /* green */
    --status-offline: var(--accent-danger);
    /* red */
    --status-maintenance: var(--accent-brand);
    /* orange (optional) */
    --theme-primary: var(--color-primary, #0acffe);
    --theme-secondary: var(--color-secondary, #495aff);

    /* safer accent text color */
    --dl-color-theme-accent1: var(--color-on-primary, #ffffff);

    /* glow for active menu (adjust if too bright) */
    --theme-glow: 0 0 16px rgba(10, 207, 254, 0.4);

    /* fallback font weights (in case not defined earlier) */
    --font-weight-semibold: 600;
    --font-weight-bold: 700;


    /* Provider slider (derived from your existing theme vars) */
    --provider-bar-bg: color-mix(in srgb, var(--provider-card-bg) 55%, var(--panel-bg));
    --provider-bar-bg-2: color-mix(in srgb, var(--provider-card-bg) 35%, var(--primary-bg));
    --provider-bar-border: color-mix(in srgb, var(--provider-card-border) 70%, transparent);
    --provider-bar-inner-glow: color-mix(in srgb, var(--accent-danger) 18%, transparent);

    --provider-arrow-bg: color-mix(in srgb, var(--primary-bg) 70%, transparent);
    --provider-arrow-border: color-mix(in srgb, var(--border-soft) 60%, transparent);

    --provider-item-bg: color-mix(in srgb, var(--secondary-bg) 70%, var(--primary-bg));
    --provider-item-border: color-mix(in srgb, var(--border-soft) 70%, transparent);
    --provider-item-text: var(--text-muted-strong);

    --provider-active-border: var(--accent);
    --provider-active-glow: var(--focus-shadow-color);


    /* logo plate (subtle) */
    --provider-logo-plate-bg: rgba(255, 255, 255, 0.92);
    --provider-logo-plate-shadow: rgba(0, 0, 0, 0.25);

    /* how big the plate is (smaller = better) */
    --provider-logo-plate-inset-y: 14px;
    --provider-logo-plate-inset-x: 26px;
    --provider-logo-plate-bg: rgba(255, 255, 255, 0.92);
    --provider-logo-plate-radius-offset: 6px;


    --provider-mega-plate-bg: rgba(255, 255, 255, 0.92);
    --provider-mega-plate-border: rgba(0, 0, 0, 0.08);
    --provider-mega-plate-shadow: rgba(0, 0, 0, 0.35);
    --provider-mega-plate-radius: 14px;
}

body {
    background: radial-gradient(circle at top, var(--secondary-bg) 0, var(--panel-bg) 60%);
    color: var(--text-main);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    min-height: 100vh;
}

/* Make muted text brighter on dark background */
.text-muted {
    color: var(--text-muted-strong) !important;
    /* light gray, good contrast */
}

/* Helper text under inputs */
.form-text {
    font-size: 0.75rem;
    color: var(--text-muted) !important;
    /* slightly darker than .text-muted */
}

a {
    text-decoration: none;
}

/* Utility */
.ls-wide {
    letter-spacing: 0.08em;
}

.ls-wider {
    letter-spacing: 0.14em;
}

.text-xs {
    font-size: 0.7rem;
}

.text-sm {
    font-size: 0.8rem;
}

.text-md {
    font-size: 0.9rem;
}

/* Top strip */
.top-strip {
    background: linear-gradient(90deg, var(--telegram-grad-from), var(--telegram-grad-to));
    color: var(--top-strip-text);
    font-size: 0.875rem;
}

.badge-pill-soft {
    border-radius: 999px;
    background: var(--badge-pill-bg);
    border: 1px solid var(--border-soft);
    padding: 0.2rem 0.7rem;
    font-size: 0.7rem;
}

/* Navbar */

.navbar-custom {
    background-color: var(--navbar-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-soft);
    position: relative;
    z-index: 1050;
}

.navbar-brand span {
    font-weight: 900;
    letter-spacing: 0.06em;
    color: var(--accent);
    text-transform: uppercase;
}

.logo-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent), var(--accent-brand));
    color: var(--secondary-bg);
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-subtitle {
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.nav-link {
    color: var(--text-muted) !important;
    font-size: 0.95rem;
}

.nav-link.active,
.nav-link:hover {
    color: var(--text-main) !important;
}

/* Hero */
.hero-section {
    padding: 2.5rem 0 2rem;
}

.hero-card {
    background: radial-gradient(circle at top left, var(--border-soft) 0, var(--panel-bg) 70%);
    border-radius: 1.25rem;
    border: 1px solid var(--hero-card-border-color);
    box-shadow: 0 25px 50px var(--hero-card-shadow-color);
    overflow: hidden;
}

.hero-badge {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--hero-badge-bg);
    color: var(--hero-badge-text);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.hero-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
}

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

.hero-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.hero-stat {
    border-radius: 0.9rem;
    background: var(--hero-stat-bg);
    border: 1px solid var(--hero-stat-border-color);
    padding: 0.8rem 1rem;
    font-size: 0.85rem;
}

.hero-stat-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.hero-stat-value {
    font-weight: 700;
    font-size: 1rem;
}

.hero-image {
    background: radial-gradient(circle at 20% 0, #4c1d95, var(--panel-bg));
    position: relative;
}

/* Small chips in hero */
.hero-chip {
    border-radius: 999px;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    border: 1px solid var(--hero-chip-border-color);
    background: var(--hero-chip-bg);
}

/* RTP circle */
.hero-rtp-wrap {
    width: 140px;
    height: 140px;
    border-radius: 999px;
    margin: 0 auto;
    position: relative;
    background: conic-gradient(from 0deg, var(--accent) 0 220deg, var(--border-soft) 220deg 360deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-rtp-inner {
    width: 98px;
    height: 98px;
    border-radius: 999px;
    background: var(--panel-bg);
    border: 2px solid var(--hero-rtp-inner-border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

/* Jackpot pill */
.hero-jackpot {
    border-radius: 1rem;
    background: linear-gradient(135deg, #f59e0b, var(--accent-brand));
    color: var(--secondary-bg);
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-jackpot-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
}

/* Providers strip */
.providers-strip {
    border-radius: 999px;
    background: var(--providers-strip-bg);
    border: 1px solid var(--border-soft);
}

.provider-pill {
    border-radius: 999px;
    background: var(--provider-pill-bg);
    border: 1px solid var(--provider-pill-border);
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    color: var(--provider-pill-text);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.provider-pill i {
    font-size: 0.8rem;
    color: var(--accent-soft);
}

.providers-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
}

.providers-scroll::-webkit-scrollbar {
    height: 4px;
}

.providers-scroll::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 999px;
}

/* Sections */
.section-title {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-muted);
}

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

/* Game cards */
.game-card {
    background: var(--card-bg);
    border-radius: 1rem;
    border: 1px solid var(--border-soft);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.game-card:hover {
    transform: translateY(-3px);
    border-color: rgba(250, 204, 21, 0.8);
    box-shadow: 0 24px 40px var(--hero-card-shadow-color);
}

.game-thumb {
    position: relative;
    padding-top: 60%;
    background: linear-gradient(135deg, var(--border-soft), var(--panel-bg));
}

.game-thumb-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.badge-hot {
    background: var(--badge-hot-bg);
}

.badge-maxwin {
    background: var(--badge-maxwin-bg);
}

.badge-buyspin {
    background: var(--badge-buyspin-bg);
}

.badge-jackpot {
    background: var(--badge-jackpot-bg);
}

.game-thumb-overlay {
    position: absolute;
    inset: 0;
    background: var(--thumb-overlay-gradient);
}

.game-body {
    padding: 0.7rem 0.9rem 0.9rem;
    font-size: 0.85rem;
}

.game-title {
    font-size: 0.95rem;
    font-weight: 600;
}

.game-provider {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.game-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Info / promo cards */
.info-card {
    background: var(--card-bg);
    border-radius: 1rem;
    border: 1px solid var(--border-soft);
    padding: 1.25rem;
    font-size: 0.9rem;
}

.info-bullet {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Footer */
.footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--border-soft);
    color: var(--text-muted);
    font-size: 0.8rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.footer-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
    color: var(--footer-title);
}

.footer a {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.footer a:hover {
    color: var(--footer-title);
}

/* Auth pages / forms */
.page-section {
    padding: 1.5rem 0 1.5rem;
}

.page-title {
    font-size: 1.2rem;
    font-weight: 700;
}

.page-card {
    background: var(--card-bg);
    border-radius: 1rem;
    border: 1px solid var(--border-soft);
    padding: 1rem;
}

.form-label {
    font-size: 0.85rem;
}

.form-control,
.form-select {
    background-color: var(--panel-bg);
    border-color: var(--form-border);
    color: var(--text-main);
    font-size: 0.9rem;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--panel-bg);
    border-color: var(--accent-soft);
    box-shadow: 0 0 0 0.2rem var(--focus-shadow-color);
    color: var(--text-main);
}

.form-text {
    font-size: 0.75rem;
}

/* Slots & promo tables / cards */
.simple-card {
    background: var(--card-bg);
    border-radius: 1rem;
    border: 1px solid var(--border-soft);
    padding: 1rem;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
    .hero-title {
        font-size: 1.6rem;
    }
}



/* ===========================
   AUTH TOP BAR (THEMED)
   =========================== */

.auth-bar {
    background: var(--navbar-bg);
    color: var(--text-main);
    border-bottom: 1px solid var(--auth-border-bottom);
    z-index: 1045;
}

/* MOBILE (<= lg) ---------------------------------- */
.auth-bar-mobile {
    padding: 0.5rem 0;
}

.auth-mobile-username {
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-main);
}

.auth-balance-box {
    background: var(--primary-bg);
    border-radius: 0.4rem;
    border: 1px solid var(--auth-balance-border);
    padding: 0.25rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 110px;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-main);
}

.auth-balance-value {
    color: var(--accent-success) !important;
    font-weight: 600;
}

.auth-level-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    background: var(--auth-level-bg);
    font-size: 0.75rem;
    color: var(--text-main);
}

.auth-level-name {
    font-weight: 600;
}

.auth-stat-label {
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.auth-stat-value {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-main);
}

/* DESKTOP (>= lg) ---------------------------------- */
.auth-bar-desktop {
    padding: 0.4rem 0;
}

.auth-shortcut-btn {
    border-radius: 999px;
    background: var(--accent-info);
    color: var(--text-main);
    padding: 0.25rem 0.9rem;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    white-space: nowrap;
}

.auth-shortcut-btn i {
    font-size: 0.8rem;
}

.auth-icon-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.75rem;
}

/* square icon buttons (top bar right side) */

.auth-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 0.4rem;
    background: var(--auth-icon-btn-bg);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.auth-icon-btn.alt {
    background: var(--auth-icon-btn-alt-bg);
    color: var(--text-muted);
}

.auth-desktop-username {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-main);
}

.auth-progress-bar {
    height: 4px;
    border-radius: 999px;
    background: var(--auth-progress-bar-bg);
    overflow: hidden;
}

.auth-progress-fill {
    height: 100%;
    width: 30%;
    /* placeholder EXP progress */
    background: var(--accent-soft);
}

.auth-desktop-balance-box {
    background: var(--primary-bg);
    border-radius: 0.5rem;
    border: 1px solid var(--auth-desktop-balance-border);
    padding: 0.35rem 0.8rem;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-main);
}

.auth-desktop-loyalty-box {
    background: var(--accent-brand);
    border-radius: 999px;
    color: var(--primary-bg);
    padding: 0.2rem 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
}


.auth-desktop-loyalty-label {
    font-weight: 600;
}

/* badge bubble on notification icon */

.auth-notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--accent-danger);
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.65rem;
    padding: 0 0.3rem;
}

/* ===========================
   MOBILE AUTH SIDE MENU
   =========================== */

.auth-side-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 1090;
}

/* side panel */
.auth-side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 310px;
    max-width: 80%;
    height: 100vh;
    background: var(--primary-bg);
    box-shadow: 4px 0 15px var(--overlay-shadow-color);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    color: var(--text-main);
    overflow-y: auto;
}

/* disable background scroll when menu open */
.auth-side-open body {
    overflow: hidden;
}

/* open state */
.auth-side-open .auth-side-overlay {
    opacity: 1;
    visibility: visible;
}

.auth-side-open .auth-side-menu {
    transform: translateX(0);
}

.auth-side-header {
    padding: 0.75rem 1rem 0.5rem;
    border-bottom: 1px solid var(--border-soft);
}

/* Telegram banner */
.auth-side-telegram-banner {
    height: 70px;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-soft));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 600;
}

/* summary cards (IDR / LP / EXP) */
.auth-side-summary {
    padding: 0.75rem 1rem 0.5rem;
    border-bottom: 1px solid var(--border-soft);
    background: var(--primary-bg);
}

.auth-side-username-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.auth-side-username {
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent-soft);
}

.auth-side-level {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--text-main);
    text-transform: uppercase;
}

.auth-side-box {
    background: var(--primary-bg);
    border-radius: 0.5rem;
    border: 2px solid var(--accent-danger);
    padding: 0.4rem 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-main);
}

.auth-side-box+.auth-side-box {
    margin-top: 0.5rem;
}

.auth-side-box-label {
    font-weight: 700;
}

.auth-side-box-value {
    font-weight: 600;
}

.auth-side-box-balance {
    color: var(--accent-balance-side);
}

/* logout button */
.auth-side-logout {
    margin: 0.75rem 1rem;
}

.auth-side-logout-button {
    width: 100%;
    border-radius: 999px;
    background: var(--secondary-bg);
    color: var(--text-main);
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border-soft);
    font-weight: 600;
}

/* nav list */
.auth-side-nav {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 1rem;
}

.auth-side-section-label {
    padding: 0.75rem 1rem 0.25rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* base item button */
.auth-side-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    color: var(--text-main);
    border: none;
    background: var(--primary-bg);
    border-top: 1px solid var(--border-soft);
    text-align: left;
}

/* parent indicators */
.auth-side-item-icon {
    width: 24px;
    text-align: center;
    color: var(--accent-danger);
    font-size: 1rem;
}

.auth-side-item-label {
    flex: 1;
}

.auth-side-item.active {
    background: var(--auth-side-active-bg);
    border-left: 3px solid var(--accent-danger);
}

.auth-side-chevron {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

/* accordion submenu */
.auth-side-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
    background: var(--primary-bg);
}

.auth-side-subitem {
    width: 100%;
    padding: 0.5rem 1.75rem;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.86rem;
    color: var(--text-main);
    border-top: 1px solid var(--submenu-border-top);
}

/* open state for parent + submenu */
.auth-side-parent.open {
    background: var(--auth-side-parent-open-bg);
}

.auth-side-parent.open .auth-side-chevron {
    transform: rotate(180deg);
}

.auth-side-submenu.open {
    max-height: 600px;
    /* big enough for all children */
}

/* Only show side menu on mobile/tablet */
@media (min-width: 992px) {

    .auth-side-menu,
    .auth-side-overlay {
        display: none;
    }
}


/* ===========================
   DESKTOP CATEGORY MEGA SUBMENU
   (Slots, Live Casino, etc.)
   =========================== */

/* wrapper under navbar – hidden by default */
.mega-container {
    display: none;
    background: var(--secondary-bg);
    border-top: 1px solid var(--mega-border-color);
    border-bottom: 1px solid var(--mega-border-color);
    z-index: 1025;
}

/* show container when JS adds this on <body> */
body.show-submenu .mega-container {
    display: block;
}

/* each category’s panel (slots, live, etc.) */
.mega-sub {
    display: none;
}

/* active panel (set by JS: .mega-sub.active) */
.mega-sub.active {
    display: block;
}

/* inner grid that holds the brand tiles */
.mega-inner {
    padding: 0.6rem 0.75rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

/* brand tile – shows logo image like your red example */
.provider-card {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--provider-card-bg);
    box-shadow: 0 8px 16px var(--provider-card-shadow-color);
    border: 1px solid var(--provider-card-border);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.provider-card img {
    width: 100%;
    max-height: 100px;
    object-fit: cover;
    display: block;
    padding: 8px;
    /* adjust as needed */
    box-sizing: border-box;
    /* important */
}

/* hover effect like live site */
.provider-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px var(--provider-card-shadow-hover-color);
    border-color: var(--provider-card-border-hover);
}

/* optional label badge on bottom-left (if you want text on top of image) */
.provider-card-label {
    position: absolute;
    left: 0.75rem;
    bottom: 0.5rem;
    background: rgba(0, 0, 0, 0.65);
    color: var(--text-main);
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* small orange "SLOT"/"LIVE" badge */
.provider-card-badge {
    position: absolute;
    right: 0.75rem;
    bottom: 0.5rem;
    background: var(--accent-brand);
    color: var(--primary-bg);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* CHEVRON ROTATION (uses .nav-has-sub.nav-open from your JS) */
.nav-has-sub .nav-chevron {
    transition: transform 0.15s ease;
}

.nav-has-sub.nav-open .nav-chevron {
    transform: rotate(180deg);
}

@media (max-width: 991.98px) {
    .mega-container {
        display: none !important;
    }
}


/* ============================
   TOP STRIP MARQUEE
   ============================ */

.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    padding-left: 100%;
    animation: marquee-scroll 25s linear infinite;
}

.marquee-track span {
    color: var(--text-main);
    font-size: 0.85rem;
    opacity: 0.95;
    letter-spacing: 0.02em;
}

/* Animation */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

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

/* Slideshow wrapper */
.slideshow-container {
    position: relative;
    max-width: 100%;
    margin: 1rem auto;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--primary-bg);
    border: 1px solid var(--border-soft);
}

/* Each slide */
.slideshow-slide {
    display: none;
    width: 100%;
}

.slideshow-slide img {
    width: 100%;
    display: block;
    border-radius: 1rem;
    max-height: 480px;
}

/* Fade animation */
.fade {
    animation: fadeEffect 1s;
}

@keyframes fadeEffect {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }
}

/* Navigation arrows */
.slideshow-prev,
.slideshow-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-main);
    font-size: 2rem;
    border: none;
    padding: 0.3rem 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
}

.slideshow-prev:hover,
.slideshow-next:hover {
    background: rgba(0, 0, 0, 0.55);
}

.slideshow-prev {
    left: 10px;
}

.slideshow-next {
    right: 10px;
}

/* Dots */
.slideshow-dots {
    text-align: center;
    padding: 0.5rem 0;
    background: var(--primary-bg);
}

.slideshow-dot {
    height: 10px;
    width: 10px;
    margin: 0 4px;
    background-color: var(--border-soft);
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

.slideshow-dot.active {
    background-color: var(--accent);
}

/* ===========================
   RESULT TABLE CARD
   =========================== */

/* Outer card */
.results-card {
    background: var(--card-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-soft);
    overflow: hidden;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.55);
}

/* ===========================
   TABS
   =========================== */
.results-tabs {
    background: var(--primary-bg);
    border-bottom: 1px solid var(--border-soft);
}

.results-tabs .nav-link {
    border: none;
    border-radius: 0;
    padding: 0.6rem 1.25rem;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
}

.results-tabs .nav-link:hover {
    color: var(--text-main);
}

/* ACTIVE TAB styling – now fully dark theme compatible */
.results-tabs .nav-link.active {
    color: var(--accent);
    background: rgba(250, 204, 21, 0.08);
    /* faint accent glow */
    border-bottom: 2px solid var(--accent);
    font-weight: 600;
}

/* ===========================
   TAB CONTENT AREA
   =========================== */
.results-tab-content {
    background: var(--secondary-bg);
}

/* ===========================
   TABLE STYLING
   =========================== */
.results-table {
    color: var(--text-main);
    font-size: 0.8rem;
    background: var(--secondary-bg);
}

.results-table thead th {
    background: var(--secondary-bg);
    border-bottom: 1px solid var(--border-soft);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Rows */
.results-table tbody tr {
    background: rgba(15, 23, 42, 0.95);
    border-bottom: 1px solid var(--border-soft);
}

.results-table tbody tr:nth-child(even) {
    background: rgba(15, 23, 42, 0.90);
}

.results-table tbody tr:hover {
    background: rgba(31, 41, 55, 0.95);
}

/* Periode clickable link */
.results-period-link {
    color: var(--accent-soft);
    font-weight: 600;
}

.results-period-link:hover {
    color: var(--accent);
}

/* Result badge */
.result-pill {
    display: inline-block;
    min-width: 52px;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-size: 0.78rem;

    background: rgba(34, 197, 94, 0.12);
    /* success tone */
    color: var(--accent-success);
    border: 1px solid rgba(34, 197, 94, 0.45);
}

/* ============================================
   GAME CARD — FINAL MERGED VERSION
   ============================================ */

/* Card container */
.game-card {
    border-radius: 1rem;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
    transition: transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
}

.game-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.75);
}

/* ===============================
   IMAGE AREA — FULL HEIGHT
   =============================== */

.game-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* consistent responsive height */
    overflow: hidden;
    background: var(--secondary-bg);
}

.game-thumb-img {
    top: 0;
    position: absolute;
    width: 100%;
    height: 100% !important;
    /* override Bootstrap's height:auto */
    object-fit: cover;
    /* fill without distortion */
    display: block;
    z-index: 0;
}

/* gradient overlay on image */
.game-thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.65),
            rgba(0, 0, 0, 0.2),
            transparent);
    z-index: 2;
}

/* ===============================
   BADGES ON IMAGE (HOT + NEW)
   =============================== */

.game-thumb-badges {
    position: absolute;
    top: 0.45rem;
    left: 0.45rem;
    display: flex;
    gap: 0.35rem;
    z-index: 3;
}

.game-badge-hot,
.game-badge-new {
    padding: 0.15rem 0.55rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 999px;
    line-height: 1;
}

/* use theme colors */
.game-badge-hot {
    background: var(--accent-danger);
    color: var(--text-main);
}

.game-badge-new {
    background: var(--accent);
    color: var(--primary-bg);
}

/* ===============================
   TEXT AREA
   =============================== */

.game-body {
    padding: 0.85rem 0.75rem 1rem;
    width: 100%;
}

/* Title — single line with ellipsis */
.game-title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-main);
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Provider text — full width with ellipsis */
.game-provider {
    width: 100%;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===============================
   RTP SECTION
   =============================== */

.game-meta {
    font-size: 0.75rem;
    margin-top: 0.4rem;
    width: 100%;
}

/* force RTP color to follow theme */
.game-meta .text-success {
    color: var(--accent-success) !important;
    font-weight: 700;
}

/* Bottom play button in body */
.game-play-btn {
    padding-inline: 0.85rem;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    font-size: 0.8rem;
}

/* ============================
   PAYMENT PROVIDER STATUS GRID
   ============================ */
/* Wrapper grid */
/* container */
.payment-methods-section {
    text-align: center;
    margin: 2rem 0;
}

.payment-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.payment-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.payment-item {
    width: 90px;
    height: 55px;
    background: var(--card-bg);
    border-radius: 0.6rem;
    border: 1px solid var(--border-soft);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s ease, transform .15s ease;
}

/* Image fills container */
.payment-item img {
    width: 75%;
    height: auto;
    object-fit: contain;
    z-index: 1;
}

/* ONLINE = green left indicator */
.payment-item.online::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent-success);
    z-index: 2;
}

/* OFFLINE = red left indicator */
.payment-item.offline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent-danger);
    z-index: 2;
}

/* NEW: Grey overlay when offline */
.payment-item.offline::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: grayscale(100%);
    z-index: 3;
}

/* Optional hover effect (online only) */
.payment-item.online:hover {
    transform: translateY(-3px);
}


/* ==============================
   PROVIDERS SECTION (ALL SLOTS)
   ============================== */

.providers-section {
    background: var(--card-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-soft);
    padding: 0.9rem 1.2rem 1.1rem;
    margin-bottom: 1.5rem;
}

/* header */
.providers-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.providers-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-soft);
    font-weight: 600;
}

.providers-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* grid of logos */
.providers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.5rem 1.25rem;
    align-items: center;
}

/* each logo item */
.provider-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.4rem;
    border-radius: 0.5rem;
    background: var(--primary-bg);
    border: 1px solid var(--border-soft);
    min-height: 42px;
}

/* logo image style */
.provider-item img {
    max-width: 100%;
    max-height: 26px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.85;
    transition: filter 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

/* hover highlight */
.provider-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-1px);
}

.results-table>:not(caption)>*>* {
    background-color: var(--primary-bg) !important;
    color: var(--text-main) !important;
}

/* ============================================
   PROMOTION IMAGE ABOVE CARD — CLEAN VERSION
   ============================================ */

/* Wrapper containing BOTH banner image + promo card */
.promo-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* remove spacing between image & card */
    border-radius: 1rem;
    overflow: hidden;
    /* ensures image does not overflow */
}

/* Image section */
.promo-img {
    width: 100%;
    overflow: hidden;
}

.promo-img img {
    width: 100%;
    height: auto;
    max-height: 250px;
    display: block;
    object-fit: cover;
}

/* Ensure content spacing applies only to card body */
.promo-card-content {
    padding: 1rem !important;
}

.promo-wrapper .info-card {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}



/* ==========================
   POPUP / MODAL THEME
   ========================== */

.popup-modal .modal-backdrop,
.modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.85);
}

/* Card */
.popup-card {
    background: var(--primary-bg);
    color: var(--text-main);
    border-radius: 1rem;
    border: 1px solid var(--border-soft);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
    overflow: hidden;
}

/* Header / footer */
.popup-header {
    border-bottom: 1px solid var(--border-soft);
    background: var(--secondary-bg);
}

.popup-footer {
    border-top: 1px solid var(--border-soft);
    background: var(--secondary-bg);
}

/* Body */
.popup-body {
    background: var(--primary-bg);
}

/* Image area */
.popup-media {
    width: 100%;
    max-height: 70vh;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid var(--border-soft);
}

.popup-media-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
}

/* Text area */
.popup-text h6 {
    font-size: 0.95rem;
}

.popup-text p {
    font-size: 0.85rem;
}

/* Close button visibility on dark background */
.popup-header .btn-close {
    filter: invert(1);
}





/* Fix dark placeholder on login inputs */
.form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
    /* ensure full visibility */
}

/* Optional: make placeholder even brighter */
.form-control::placeholder {
    color: #9ca3af !important;
    /* Tailwind gray-400 tone */
}



/* Better placeholder visibility */
.form-control::placeholder {
    color: var(--text-muted);
    /* or #8a8a8a */
    opacity: 1;
}

/* Input error state */
.form-control.is-invalid {
    border-color: #e63946 !important;
}

/* Input success state */
.form-control.is-valid {
    border-color: #2ecc71 !important;
}

/* Error text */
.form-error {
    color: #e63946;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Success text */
.form-success {
    color: #2ecc71;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}


/* Placeholders – lighter so they are visible on dark fields */
.form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}

/* ===== Global form messages (flash) ===== */

.form-status {
    border-radius: 0.5rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

.form-status-success {
    background: rgba(34, 197, 94, 0.12);
    /* success green, very dark */
    border: 1px solid rgba(34, 197, 94, 0.6);
    color: var(--accent-success);
}

.form-status-error {
    background: rgba(239, 68, 68, 0.14);
    /* error red */
    border: 1px solid rgba(239, 68, 68, 0.7);
    color: var(--accent-danger);
}

/* ===== Field validation states ===== */

.form-control.is-valid {
    border-color: var(--accent-success);
    box-shadow: 0 0 0 0.15rem rgba(34, 197, 94, 0.18);
}

.form-control.is-invalid {
    border-color: var(--accent-danger);
    box-shadow: 0 0 0 0.15rem rgba(239, 68, 68, 0.22);
}

/* helper text under each field */
.valid-feedback,
.invalid-feedback {
    font-size: 0.78rem;
    margin-top: 0.25rem;
}

/* Colors that work on dark background */
.valid-feedback {
    color: var(--accent-success);
}

.invalid-feedback {
    color: var(--accent-danger);
}


.alert-custom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

/* SUCCESS */
.alert-success-custom {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.45);
    color: var(--accent-success);
}

/* ERROR */
.alert-error-custom {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #ef4444;
}

/* ICONS */
.alert-custom i {
    font-size: 1rem;
}

/* FIELD ERROR */
.field-error {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #ef4444;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
}

.password-toggle-btn:hover {
    color: var(--text-main);
}

/* ===========================
   RESULTS PAGINATION BAR
   =========================== */

.pagination-container {
    padding: 1rem 1.2rem;
    background: var(--secondary-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-soft);
}

.pagination-inner {
    gap: 1.5rem;
    /* a bit more space between text and buttons */
}

.pagination {
    gap: 0.45rem;
}

/* base pill */
.pagination .page-item .page-link {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: var(--text-muted);
    min-width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    transition: 0.2s;
    font-weight: 600;
    font-size: 0.8rem;
}

.pagination .page-item .page-link:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--text-main);
}

/* active (current) page */
.pagination .page-item.active .page-link {
    background: var(--accent) !important;
    color: #000 !important;
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.35);
}

/* disabled arrows / dots */
.pagination .page-item.disabled .page-link {
    opacity: 0.3;
    pointer-events: none;
}

/* make the ellipsis look a bit softer */
.pagination .page-item.disabled .page-link {
    background: transparent;
}



/* ===========================
   MARKET INFO ROW
   =========================== */

.market-info-row {
    background: var(--card-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-soft);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
}

/* Left side: name + URL */
.market-main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.market-name {
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-main);
}

.market-url {
    font-size: 0.8rem;
    color: var(--accent-soft);
    text-decoration: none;
    word-break: break-all;
}

.market-url:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* Right side: days + times */
.market-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

/* Day badges */
.market-days {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-end;
}

.market-day {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--secondary-bg);
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
}

.market-day.active {
    background: var(--accent-success);
    border-color: var(--accent-success);
    color: var(--primary-bg);
}

/* Close / Draw chips */
.market-times {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.market-chip {
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--border-soft);
    background: var(--primary-bg);
    color: var(--text-main);
}

.market-chip.chip-type {
    border-color: var(--accent-success);
    color: var(--accent-success);
}

.market-chip.chip-close {
    border-color: var(--accent-soft);
    color: var(--accent-soft);
}

.market-chip.chip-draw {
    border-color: var(--accent-info);
    color: var(--accent-info);
}

/* Responsive: stack on small screens */
@media (max-width: 576.98px) {
    .market-info-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .market-meta {
        align-items: flex-start;
    }

    .market-days,
    .market-times {
        justify-content: flex-start;
    }
}


/* ===========================
   AUTH WALLET SUMMARY (DESKTOP & MOBILE)
   =========================== */

.auth-wallet-header {
    background: var(--primary-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-soft);
    padding: 0.55rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.auth-wallet-user {
    display: flex;
    flex-direction: column;
}

.auth-wallet-username {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main);
}

.auth-wallet-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.auth-wallet-balance {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.auth-wallet-balance-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.auth-wallet-balance-value {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--accent-success);
}

/* ===========================
   QUICK ACTION BUTTONS
   =========================== */

.wallet-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.wallet-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid transparent;
    background: rgba(15, 23, 42, 0.9);
    color: var(--text-main);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    text-decoration: none;
}

/* individual tones but still on-theme */
.wallet-btn-deposit {
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.08);
}

.wallet-btn-withdraw {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.08);
}

.wallet-btn-profile {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.08);
}

.wallet-btn:hover {
    transform: translateY(-1px);
    background: rgba(15, 23, 42, 0.95);
}

.wallet-btn-deposit:hover {
    background: rgba(34, 197, 94, 0.18);
}

.wallet-btn-withdraw:hover {
    background: rgba(239, 68, 68, 0.18);
}

.wallet-btn-profile:hover {
    background: rgba(59, 130, 246, 0.18);
}

/* ================================
   MOBILE AUTH BOX (IMPROVED)
================================ */

.auth-box {
    background: var(--secondary-bg);
    border: 1px solid var(--border-soft);
    padding: 1rem;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

/* USER + BALANCE row */
.auth-user-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* Username */
.auth-username {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
}

.auth-role {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Balance box */
.auth-balance-box {
    background: #0f172a;
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
    text-align: right;
}

.auth-balance-label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.auth-balance-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-success);
}

/* ACTION BUTTONS */
.auth-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.auth-btn {
    flex: 1;
    padding: 0.55rem 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.65rem;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;

    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    text-decoration: none;

    transition: 0.15s;
}

.auth-btn i {
    font-size: 0.9rem;
    opacity: 0.8;
}

.auth-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent);
    color: var(--accent);
}


/* ============================
   DEPOSIT – SHARED
   ============================ */

.deposit-tabs .nav-link {
    background: transparent;
    border-radius: 999px;
    color: var(--text-muted);
    padding: 0.4rem 1.1rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid transparent;
}

.deposit-tabs .nav-link.active {
    background: var(--accent);
    color: #000;
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.deposit-tabs .nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-soft);
}

/* eWallet method tabs */
.deposit-method-tabs .nav-link {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 999px;
    color: var(--text-muted);
    padding: 0.35rem 0.9rem;
    font-size: 0.78rem;
}

.deposit-method-tabs .nav-link.active {
    background: rgba(37, 99, 235, 0.22);
    color: var(--accent);
    font-weight: 600;
}

/* Amount row */
.deposit-amount-row .text-accent {
    color: var(--accent);
    font-weight: 600;
}

.deposit-amount-input .input-group-text {
    background: var(--secondary-bg);
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
}

.deposit-amount-input .form-control {
    background: var(--secondary-bg);
    border: 1px solid var(--border-soft);
    color: var(--text-main);
}

.deposit-amount-input .form-control::placeholder {
    color: var(--text-muted);
}

.btn-outline-accent {
    border-color: var(--accent);
    color: var(--accent);
    background: transparent;
    font-weight: 600;
}

.btn-outline-accent:hover {
    background: var(--accent);
    color: #000;
}

/* Bank / eWallet info card */
.deposit-detail-card {
    background: var(--card-bg);
    border-radius: 0.9rem;
    border: 1px solid var(--border-soft);
    padding: 1rem 1rem 1rem;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
}

.deposit-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.deposit-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
}

/* Status pill */
.status-pill {
    font-size: 0.65rem;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
}

.status-online {
    background: rgba(34, 197, 94, 0.14);
    color: var(--accent-success);
    border: 1px solid rgba(34, 197, 94, 0.45);
}

/* Summary box (right side of bank) */
.deposit-summary-box {
    background: var(--secondary-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-soft);
    padding: 0.9rem 1rem;
}

.deposit-summary-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.deposit-summary-amount {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 0.15rem;
    color: var(--accent-success);
}

/* Small soft button (copy) */
.btn-xs {
    padding: 0.1rem 0.55rem;
    font-size: 0.68rem;
}

.btn-soft {
    background: rgba(148, 163, 184, 0.18);
    color: var(--text-main);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.btn-soft:hover {
    background: rgba(148, 163, 184, 0.3);
}

/* eWallet section title */
.deposit-section-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
}

/* Placeholder blocks */
.deposit-placeholder {
    padding: 1rem 0;
    font-size: 0.85rem;
}

/* Make small text size available */
.text-xs {
    font-size: 0.75rem;
}














/* ============================
   WITHDRAW – SHARED
   ============================ */

.withdraw-tabs .nav-link {
    background: transparent;
    border-radius: 999px;
    color: var(--text-muted);
    padding: 0.4rem 1.1rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid transparent;
}

.withdraw-tabs .nav-link.active {
    background: var(--accent);
    color: #000;
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.withdraw-tabs .nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-soft);
}

/* eWallet method tabs */
.withdraw-method-tabs .nav-link {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 999px;
    color: var(--text-muted);
    padding: 0.35rem 0.9rem;
    font-size: 0.78rem;
}

.withdraw-method-tabs .nav-link.active {
    background: rgba(37, 99, 235, 0.22);
    color: var(--accent);
    font-weight: 600;
}

/* Amount row */
.withdraw-amount-row .text-accent {
    color: var(--accent);
    font-weight: 600;
}

.withdraw-amount-input .input-group-text {
    background: var(--secondary-bg);
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
}

.withdraw-amount-input .form-control {
    background: var(--secondary-bg);
    border: 1px solid var(--border-soft);
    color: var(--text-main);
}

.withdraw-amount-input .form-control::placeholder {
    color: var(--text-muted);
}


/* Bank / eWallet info card */
.withdraw-detail-card {
    background: var(--card-bg);
    border-radius: 0.9rem;
    border: 1px solid var(--border-soft);
    padding: 1rem 1rem 1rem;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
}

.withdraw-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.withdraw-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
}

/* Summary box (right side of bank) */
.withdraw-summary-box {
    background: var(--secondary-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-soft);
    padding: 0.9rem 1rem;
}

.withdraw-summary-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.withdraw-summary-amount {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 0.15rem;
    color: var(--accent-success);
}

/* eWallet section title */
.withdraw-section-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
}

/* Placeholder blocks */
.withdraw-placeholder {
    padding: 1rem 0;
    font-size: 0.85rem;
}


/* Base badge */
.status-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 999px;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
    line-height: 1;
}

/* ONLINE (Green) */
.status-badge.online {
    background: rgba(34, 197, 94, 0.15);
    /* Soft green */
    color: #22c55e;
    /* Accent green */
    border-color: rgba(34, 197, 94, 0.35);
    /* Outline */
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.25);
}

/* OFFLINE (Red) */
.status-badge.offline {
    background: rgba(239, 68, 68, 0.18);
    /* Soft red */
    color: #ef4444;
    /* Accent red */
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.25);
}




/* COMPACT TABLE FOR TRANSACTIONS */
.results-table-compact tbody tr {
    background: rgba(15, 23, 42, 0.96);
}

.results-table-compact td {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

/* TYPE PILL (Deposit / Withdraw) */
.tx-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-main);
}

/* Amount styling */
.tx-amount {
    font-weight: 600;
    color: var(--accent-soft);
}

/* STATUS PILLS */
.tx-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 0.12rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    border: 1px solid var(--border-soft);
    background: rgba(15, 23, 42, 0.9);
    color: var(--text-muted);
}

/* Success */
.tx-status-success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.45);
    color: var(--accent-success);
}

/* Pending */
.tx-status-pending {
    background: rgba(250, 204, 21, 0.10);
    border-color: rgba(250, 204, 21, 0.5);
    color: var(--accent-soft);
}

/* Failed */
.tx-status-failed {
    background: rgba(248, 113, 113, 0.10);
    border-color: rgba(248, 113, 113, 0.5);
    color: var(--accent-danger);
}


/* ============================
   TRANSACTION TYPE COLORS
   ============================ */

/* Deposit */
.tx-type-deposit {
    color: var(--accent-success);
    font-weight: 600;
}

/* Withdraw */
.tx-type-withdraw {
    color: #ff4d4d;
    /* soft red */
    font-weight: 600;
}

/* Icon background bubbles */
.tx-type-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: .35rem;
    font-size: .75rem;
}

.tx-type-deposit-icon {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-success);
}

.tx-type-withdraw-icon {
    background: rgba(255, 77, 77, 0.15);
    color: #ff4d4d;
}

/* ============================
   STATUS COLORS
   ============================ */

.status-badge {
    padding: 0.25rem 0.65rem;
    border-radius: 0.45rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.status-approved {
    background: rgba(34, 197, 94, 0.12);
    color: var(--accent-success);
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.status-rejected {
    background: rgba(255, 77, 77, 0.12);
    color: #ff4d4d;
    border: 1px solid rgba(255, 77, 77, 0.35);
}

.status-new,
.status-new {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ===========================================
   TRANSACTION SHORTCUT BUTTONS
   =========================================== */
/* Shortcut Section */
.tx-shortcuts {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Base button style */
.tx-shortcut-btn {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1rem;
    border-radius: 0.65rem;
    font-weight: 600;
    color: var(--text-main);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-soft);
    transition: 0.2s ease;
}

/* Hover */
.tx-shortcut-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

/* Deposit = Green */
.tx-shortcut-btn.deposit {
    border-color: rgba(0, 200, 100, 0.35);
    color: var(--accent-success);
}

.tx-shortcut-btn.deposit:hover {
    background: rgba(0, 200, 100, 0.15);
}

/* Withdraw = Red */
.tx-shortcut-btn.withdraw {
    border-color: rgba(255, 60, 60, 0.35);
    color: var(--accent-danger);
}

.tx-shortcut-btn.withdraw:hover {
    background: rgba(255, 60, 60, 0.15);
}

/* History = Blue */
.tx-shortcut-btn.history {
    border-color: rgba(80, 160, 255, 0.35);
    color: #4ea6ff;
}

.tx-shortcut-btn.history:hover {
    background: rgba(80, 160, 255, 0.15);
}

.tx-shortcut-btn i {
    font-size: 0.9rem;
}

/* Lottery game tabs — pill style, dark theme */
.lottery-game-tabs {
    border-bottom: none;
    /* remove default bootstrap underline */
    padding: 0.35rem 0.5rem 0.65rem;
    gap: 0.5rem;
    overflow-x: auto;
    /* horizontal scroll on mobile */
    white-space: nowrap;
}

/* Hide default scrollbar in some browsers, optional */
/* WebKit */
.lottery-game-tabs::-webkit-scrollbar {
    height: 4px;
}

.lottery-game-tabs::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 999px;
}

.lottery-game-tabs .nav-item {
    flex: 0 0 auto;
    /* keep each tab compact */
}

.lottery-game-tabs .nav-link {
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.95);
    /* dark chip */
    color: var(--text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
    line-height: 1.2;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
        transform 0.12s ease;
}

.lottery-game-tabs .nav-link:hover:not(.active) {
    background: rgba(30, 41, 59, 0.98);
    color: var(--text-main);
    border-color: var(--accent-soft);
    transform: translateY(-1px);
}

.lottery-game-tabs .nav-link.active {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Optional: small icon spacing if you ever add icons inside */
.lottery-game-tabs .nav-link i {
    margin-right: 0.25rem;
}

/* Tabs already styled by your existing .lottery-game-tabs rules */

/* Mobile dropdown style */
.lottery-game-select {
    background: #ffffff;
    color: #111827;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Optional: focus + hover states */
.lottery-game-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.4);
    border-color: var(--accent);
}


/* Modal look & feel */
.results-modal .modal-content.results-modal-content {
    background: var(--card-bg);
    border-radius: 1rem;
    border: 1px solid var(--border-soft);
    color: var(--text-main);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.7);
}

.results-modal .modal-header .btn-close {
    filter: invert(1) grayscale(100%);
}

/* Search bar */
.results-search-bar .input-group {
    max-width: 320px;
}

.results-search-addon {
    background: var(--secondary-bg);
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
}

.results-search-input {
    background: #ffffff;
    color: #111827;
    border: 1px solid var(--border-soft);
}

.results-search-input::placeholder {
    color: #6b7280;
}

/* Keep your existing table + tab styles working as before */
.results-modal .results-card {
    background: var(--secondary-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-soft);
    padding: 0.75rem 0.75rem 0.5rem;
}


.lottery-card-game {
    padding: .5rem;
}

/* Mobile lottery game selector row */
.lottery-game-mobile {
    background: var(--card-bg);
    /* border-radius: 999px; */
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border-soft);
}

/* White pill select, dark text */
.lottery-game-select-mobile {
    flex: 1 1 auto;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    border: 1px solid var(--border-soft);
    padding-inline: 0.9rem;
    min-height: 40px;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}

/* Keep native focus ring but make it visible on dark bg */
.lottery-game-select-mobile:focus {
    outline: none;
    box-shadow: 0 0 0 1px var(--accent), 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* View-all-markets button: compact pill */
.lottery-game-modal-btn {
    flex: 0 0 auto;
    border-radius: 999px;
    padding-inline: 0.75rem;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* Slightly softer border so it blends with theme */
.lottery-game-modal-btn.btn-outline-light {
    border-color: rgba(255, 255, 255, 0.35);
}

/* Tiny screens: let select and button stack instead of squish */
@media (max-width: 360px) {
    .lottery-game-mobile .d-flex {
        flex-direction: column;
        gap: 0.4rem;
    }

    .lottery-game-modal-btn {
        width: 100%;
    }
}

.view-all-markets-btn {
    padding: 6px 14px;
    border-radius: 10px;
    font-weight: 600;
    border: 1px solid var(--border-soft);
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.06);
    transition: 0.2s;
}

.view-all-markets-btn:hover {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(255, 205, 0, 0.4);
}

/* ===========================
   ACCOUNT PAGE (TABS + CARDS)
   =========================== */

.account-wrapper {
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.account-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-on-surface-secondary);
}

/* Tabs */

.account-tabs {
    display: inline-flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-full);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-level-1);
    flex-wrap: wrap;
}

.account-tab-button {
    border: none;
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-on-surface-secondary);
    background: transparent;
    border-radius: var(--border-radius-full);
    transition: all var(--animation-duration-fast) var(--animation-curve-primary);
    white-space: nowrap;
}

.account-tab-button:hover {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.account-tab-button--active {
    color: var(--accessible-primary-foreground);
    background: linear-gradient(135deg,
            var(--color-primary),
            var(--color-primary-90));
    box-shadow: 0 0 16px rgba(5, 199, 184, 0.35);
}

/* Tab content */

.account-tabs-content {
    margin-top: var(--spacing-lg);
}

.account-tab-pane {
    display: none;
}

.account-tab-pane--active {
    display: block;
}

/* Layout */

.account-layout {
    display: grid;
    gap: var(--spacing-lg);
}

@media (min-width: 992px) {
    .account-layout {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }
}

/* Cards (reuse .results-card look) */

.account-card {
    border-radius: var(--border-radius-xl);
    overflow: hidden;
}

.account-card-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 2px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.account-card-body {
    padding: var(--spacing-lg);
}

/* Row items */

.account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: var(--font-size-sm);
    gap: var(--spacing-sm);
}

.account-row:last-child {
    border-bottom: none;
}

.account-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-on-surface);
}

.account-value {
    color: var(--color-on-surface-secondary);
    text-align: right;
    flex-shrink: 0;
}

.account-ref-link a {
    color: var(--color-accent);
}

.account-ref-link a:hover {
    text-decoration: underline;
}

/* Summary cards (referral) */

.account-summary-card {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    box-shadow: var(--shadow-level-1);
}

.account-summary-label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-on-surface-secondary);
    margin-bottom: var(--spacing-xs);
}

.account-summary-value {
    font-size: var(--font-size-xl);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
}

/* Helper text */

.account-helper-text {
    font-size: var(--font-size-xs);
    color: var(--color-on-surface-secondary);
}

/* Password form tweaks */

.account-password-form .account-form-label {
    font-size: var(--font-size-xs);
    color: var(--color-on-surface-secondary);
}

/* ===========================
   ACCOUNT PAGE LAYOUT
   =========================== */

.account-container {
    max-width: 78rem;
    margin: 0 auto;
}

.account-header {
    margin-bottom: 1.5rem;
}

.account-title {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.account-subtitle {
    margin-top: 0.25rem;
    font-size: var(--font-size-sm);
    color: var(--color-on-surface-secondary);
}

/* Tabs */

.account-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: var(--color-surface-elevated);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
    margin-bottom: 1.75rem;
}

.account-tab-btn {
    border: none;
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1.1rem;
    font-size: var(--font-size-sm);
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-medium);
    border-radius: 999px;
    background: transparent;
    color: var(--color-on-surface-secondary);
    white-space: nowrap;
    transition: all 0.18s cubic-bezier(0.25, 1, 0.3, 1);
}

.account-tab-btn i {
    font-size: 0.9em;
}

.account-tab-btn:hover {
    color: var(--dl-color-theme-accent1);
    background: color-mix(in srgb, var(--theme-primary) 10%, transparent);
}

.account-tab-btn.is-active {
    color: var(--dl-color-theme-accent1);
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    box-shadow: var(--theme-glow);
}

/* Panels */

.account-tabs-panels {
    margin-top: 0.5rem;
}

.account-tab-panel {
    display: none;
}

.account-tab-panel.is-active {
    display: block;
}

/* Grid layout for profile column vs rekening column */

.account-grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .account-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }
}

/* Cards */

.account-card {
    background: var(--color-surface-elevated);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
    overflow: hidden;
}

.account-card-header {
    padding: 0.85rem 1.25rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.16);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-heading);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.account-card-body {
    padding: 1rem 1.25rem 1.25rem;
}

/* Info rows */

.account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: var(--font-size-sm);
    gap: 0.75rem;
}

.account-row:last-child {
    border-bottom: none;
}

.account-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-on-surface);
}

.account-value {
    color: var(--color-on-surface-secondary);
    text-align: right;
}

/* Referral summary */

.account-summary-grid {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .account-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.account-summary-card {
    border-radius: 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: radial-gradient(circle at top left,
            rgba(20, 184, 166, 0.22),
            transparent 55%),
        var(--color-surface-elevated);
}

.account-summary-label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-on-surface-secondary);
    margin-bottom: 0.25rem;
}

.account-summary-value {
    font-family: var(--font-family-heading);
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
}

/* Small helper text */

.account-helper-text {
    font-size: var(--font-size-xs);
    color: var(--color-on-surface-secondary);
}

/* Make ledger card pagination nicely separated */

.account-ledger-card .pagination-container {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

/* --- Account tabs: stronger active state --- */
.account-tab-btn.is-active {
    color: var(--dl-color-theme-accent1);
    background: linear-gradient(135deg,
            var(--theme-primary),
            var(--theme-secondary));
    box-shadow: var(--theme-glow);
    font-weight: var(--font-weight-semibold);
    position: relative;
}

/* small glowing underline so it’s clearly active */
.account-tab-btn.is-active::after {
    content: "";
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    bottom: -0.18rem;
    height: 2px;
    border-radius: 999px;
    background: var(--theme-primary);
    opacity: 0.85;
}

/* --- Account tabs: mobile layout fix --- */
@media (max-width: 767.98px) {
    .account-tabs {
        flex-direction: column;
        align-items: stretch;
        border-radius: 1rem;
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .account-tab-btn {
        width: 100%;
        justify-content: flex-start;
    }

    .account-tab-btn.is-active::after {
        left: 0.9rem;
        right: 0.9rem;
        bottom: 0.25rem;
        /* move underline inside the pill on mobile */
    }
}

/* ===========================
   PROVIDER SLIDER (MATCH LOOK)
   =========================== */

.provider-slider {
    position: relative;
    display: flex;
    align-items: center;
    /* gap: 0.85rem; */

    padding: 0.85rem 1.1rem;
    border-radius: 999px;

    /* capsule frame like screenshot */
    background: linear-gradient(180deg, var(--provider-bar-bg), var(--provider-bar-bg-2));
    border: 2px solid var(--provider-bar-border);
    box-shadow:
        0 16px 40px var(--overlay-shadow-color),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 0 18px var(--provider-bar-inner-glow);

    overflow: hidden;
}

/* viewport */
.provider-viewport {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 0.1rem 0;
    /* keep pills vertically centered */
}

.provider-viewport::-webkit-scrollbar {
    display: none;
}

/* track */
.provider-track {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* tighter like screenshot */
    padding: 0 0.25rem;
    scroll-snap-type: x mandatory;
}

/* arrow buttons (round dark) */
.provider-nav {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    flex: 0 0 auto;

    background: var(--provider-arrow-bg);
    border: 1px solid var(--provider-arrow-border);
    color: var(--text-main);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.provider-nav:hover {
    transform: translateY(-1px);
    border-color: var(--provider-active-border);
    background: color-mix(in srgb, var(--provider-arrow-bg) 70%, var(--accent) 8%);
}

.provider-nav i {
    font-size: 1.1rem;
}

/* pill items (dark bluish) */
.provider-logo {
    flex: 0 0 auto;
    scroll-snap-align: center;

    height: 75px;
    min-width: 160px;
    /* screenshot pills are wider */
    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;

    padding: 0.55rem 1.15rem;

    background: var(--provider-item-bg);
    border: 1px solid var(--provider-item-border);
    color: var(--provider-item-text);

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 10px 22px rgba(0, 0, 0, 0.35);

    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.provider-logo img {
    height: 70px;
    max-width: 150px;
    width: auto;
    object-fit: contain;
    display: block;
    opacity: 0.92;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* hover subtle */
.provider-logo:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--provider-item-border) 60%, var(--accent-soft));
}

.provider-logo:hover img {
    opacity: 1;
    transform: translateY(-1px);
}

/* active pill (gold outline + glow) */
.provider-logo.is-active {
    border: 2px solid var(--provider-active-border);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--provider-active-border) 25%, transparent),
        0 12px 28px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* responsive */
@media (max-width: 576.98px) {
    .provider-nav {
        width: 46px;
        height: 46px;
    }

    .provider-logo {
        min-width: 100px !important;
        width: 100px !important;
        height: 52px;
    }

    .provider-logo img {
        height: 75px;
        max-width: 70px;
    }
}

.provider-logo {
    position: relative;
    overflow: hidden;
    /* important */
}

/* plate = inner surface of the pill */
.provider-logo::before {
    content: "";
    position: absolute;
    inset: 0;
    /* ✅ NO spacing */

    background: var(--provider-logo-plate-bg);

    /* slightly smaller radius so border stays visible */
    border-radius: calc(999px - var(--provider-logo-plate-radius-offset));

    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.06);

    z-index: 0;
}

/* logo above plate */
.provider-logo img {
    position: relative;
    z-index: 1;
}

/* ===========================
   MEGA MENU PROVIDER CARD
   FULL INNER PLATE
   =========================== */

.mega-sub .provider-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;

    /* wine outer frame */
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--provider-card-bg) 65%, var(--panel-bg)),
            color-mix(in srgb, var(--provider-card-bg) 35%, var(--primary-bg)));

    border: 1px solid var(--provider-card-border);
    box-shadow: 0 12px 24px var(--provider-card-shadow-color);

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

/* FULL plate = inner surface */
.mega-sub .provider-card::before {
    content: "";
    position: absolute;
    inset: 0;
    /* ✅ FULL */
    background: var(--provider-mega-plate-bg);

    /* slightly smaller radius so border stays visible */
    border-radius: calc(1rem - 6px);

    box-shadow: inset 0 0 0 1px var(--provider-mega-plate-border);
    z-index: 1;
}

/* logo centered on plate */
.mega-sub .provider-card img {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;
    object-fit: contain;

    padding: 1.25rem;
    box-sizing: border-box;
}

/* labels above plate */
.mega-sub .provider-card-label,
.mega-sub .provider-card-badge {
    position: absolute;
    z-index: 3;
}

/* label (PRAGMATIC) */
.mega-sub .provider-card-label {
    left: 0.75rem;
    bottom: 0.6rem;

    background: rgba(0, 0, 0, 0.65);
    color: var(--text-main);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;

    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* badge (SLOTS) */
.mega-sub .provider-card-badge {
    right: 0.75rem;
    bottom: 0.6rem;

    background: var(--accent-brand);
    color: var(--primary-bg);
    padding: 0.2rem 0.65rem;
    border-radius: 999px;

    font-size: 0.7rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* hover polish */
.mega-sub .provider-card:hover {
    transform: translateY(-2px);
    border-color: var(--provider-card-border-hover);
    box-shadow: 0 18px 36px var(--provider-card-shadow-hover-color);
}

/* ===========================
   PROVIDER CATEGORY BAR
   =========================== */

.provider-catbar {
    border-radius: 1.5rem;
    padding: 0.9rem 1rem;
    border: 2px solid var(--provider-card-border);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--provider-card-bg) 75%, var(--panel-bg)),
            color-mix(in srgb, var(--provider-card-bg) 45%, var(--primary-bg)));
    box-shadow: 0 18px 42px var(--overlay-shadow-color);
}

.provider-catbar-inner {
    display: flex;
    align-items: center;
    gap: 1rem;

    /* ✅ allow wrapping when too many menus */
    flex-wrap: wrap;
}

/* ✅ LEFT: menu items wrap naturally */
.provider-catgrid {
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    flex-wrap: wrap;
    /* ✅ wrap when overflow */
    align-items: center;

    gap: 0.75rem 1.25rem;
    /* row-gap column-gap */
}

/* Items */
.provider-catitem {
    border: none;
    background: transparent;
    color: var(--text-main);

    font-weight: var(--font-weight-semibold);
    font-size: 0.95rem;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    padding: 0.55rem 1.15rem;
    border-radius: 999px;

    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* Hover */
.provider-catitem:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    transform: translateY(-1px);
}

/* Active pill */
.provider-catitem.is-active {
    background: var(--accent-danger);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

/* RIGHT search pill */
.provider-catsearch {
    flex: 0 0 360px;
    max-width: 100%;
    display: flex;
    align-items: center;

    /* ✅ push to the right on the first row */
    margin-left: auto;

    border-radius: 999px;
    border: 2px solid var(--provider-card-border-hover);
    background: color-mix(in srgb, var(--provider-card-bg) 65%, var(--panel-bg));
    overflow: hidden;
}

.provider-catsearch-input {
    flex: 1 1 auto;
    border: none;
    outline: none;

    padding: 0.85rem 1.1rem;
    background: transparent;
    color: var(--text-main);
    font-size: 1rem;
}

.provider-catsearch-input::placeholder {
    color: var(--text-muted);
    opacity: 0.9;
}

.provider-catsearch-btn {
    flex: 0 0 64px;
    height: 100%;
    border: none;
    cursor: pointer;

    background: color-mix(in srgb, var(--provider-card-bg) 75%, var(--primary-bg));
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition: background 0.15s ease;
}

.provider-catsearch-btn:hover {
    background: color-mix(in srgb, var(--accent-danger) 30%, var(--provider-card-bg));
}

/* ✅ Small desktop widths: reduce search width so menu has room */
@media (max-width: 1199.98px) {
    .provider-catsearch {
        flex-basis: 320px;
    }
}

@media (max-width: 576.98px) {
    .provider-catitem {
        font-size: 0.85rem;
        padding: 0.5rem 0.9rem;
    }

    .provider-catsearch {
        flex-basis: 100%;
    }
}

/* Custom Dark Select Box (Themed) */
.form-select-theme {
    background-color: var(--secondary-bg);
    /* Matches your cards/secondary elements */
    color: var(--text-main);
    /* Standard text color */
    border: 1px solid var(--form-border);
    /* Your defined form border color */

    /* Keep the white arrow SVG for visibility on dark backgrounds */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

    /* --- FIX FOR REPEATING ARROWS --- */
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* Focus State */
.form-select-theme:focus {
    background-color: var(--secondary-bg);
    border-color: var(--accent);
    /* Uses your main yellow/gold accent */
    box-shadow: 0 0 0 0.25rem var(--focus-shadow-color);
    /* Matches your defined glow */
    color: var(--text-main);
}

/* Hover State */
.form-select-theme:hover {
    border-color: var(--text-muted);
    /* Lightens the border slightly on hover */
}


/* Force navbar items to stay in one horizontal row */
.navbar-nav .nav-link {
    display: flex !important;
    /* Use flexbox */
    flex-direction: row !important;
    /* Align items horizontally (left to right) */
    align-items: center !important;
    /* Center items vertically */
    flex-wrap: nowrap !important;
    /* Prevent wrapping to new lines */
    white-space: nowrap !important;
    /* Prevent text from breaking */
    gap: 5px;
    /* Optional: Adds consistent space between Icon, Text, and Chevron */
}

/* Ensure the icons don't accidentally become block elements */
.navbar-nav .nav-link i {
    display: inline-block;
}

/* =================================
   FLOATING CONTACT & LINK WIDGET
   ================================= */

/* Wrapper: Positions the buttons on screen */
.floating-contact-wrapper {
    position: fixed;
    top: 50%;
    /* Move to vertical center */
    left: 25px;
    /* Move to the left side */
    transform: translateY(-60%);
    /* Perfect vertical centering */

    right: auto;
    /* Reset right positioning */
    bottom: auto;
    /* Reset bottom positioning */

    z-index: 1050;
    display: flex;
    flex-direction: column;

    align-items: flex-start;
    /* CRITICAL: Align buttons to the Left */
    gap: 15px;
    pointer-events: none;
}

/* 1. The Menu Container */
.contact-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: auto;

    margin-bottom: 15px;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    width: 300px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    /* Animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;

    pointer-events: auto;
    z-index: 1060;

    /* --- LAYOUT FIXES --- */
    display: flex;
    /* Enables flexbox layout */
    flex-direction: column;

    /* CALCULATION EXPLANATION: 
       50vh (Center) 
       - 70px (Half the height of the wrapper buttons) 
       - 20px (Gap from top of screen) 
       = approx 90-100px subtraction needed.
    */
    max-height: calc(50vh - 100px);
}

/* 2. The Header (Title + Close Button) */
.contact-header {
    background: var(--secondary-bg);
    padding: 15px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: var(--text-main);

    /* CRITICAL: Prevents the header from shrinking/disappearing */
    flex-shrink: 0;
}

/* 3. The List (Scrollable Area) */
.contact-list {
    padding: 10px;

    /* Enables scrolling ONLY on this part */
    overflow-y: auto;

    /* Fills the remaining space */
    flex-grow: 1;
}

/* Optional: Scrollbar styling */
.contact-list::-webkit-scrollbar {
    width: 5px;
}

.contact-list::-webkit-scrollbar-thumb {
    background: var(--border-soft);
    border-radius: 10px;
}

.contact-list::-webkit-scrollbar-track {
    background: transparent;
}


.contact-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Show state (Added by JS) */
.contact-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 2. The Round Buttons */
.floating-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--telegram-grad-from);
    /* Default Blue-ish */
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.2s;
    position: relative;

    /* Re-enable clicks on the buttons */
    pointer-events: auto;

    /* Center the icon */
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-btn:hover {
    transform: scale(1.1);
}

/* Secondary Button Style (Gold) */
.floating-btn.secondary-btn {
    background: var(--accent);
    color: #000;
}

/* Notification Dot */
.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--accent-danger);
    color: white;
    font-size: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--secondary-bg);

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Menu Header */
.contact-header {
    background: var(--secondary-bg);
    padding: 15px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: var(--text-main);
}

/* Menu List */
.contact-list {
    padding: 10px;
    max-height: 400px;
    /* Optional: adds scroll if list is too long */
    overflow-y: auto;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s;
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Icon Styles inside Menu */
.contact-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    flex-shrink: 0;
}

.contact-info {
    display: flex;
    flex-direction: column;
}

.contact-name {
    color: var(--text-main);
    font-weight: 600;
    font-size: 14px;
}

.contact-desc {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: capitalize;
}

/* Brand Colors */
.contact-icon.whatsapp {
    background: #25D366;
}

.contact-icon.telegram {
    background: #0088cc;
}

.contact-icon.facebook {
    background: #1877F2;
}

.contact-icon.youtube {
    background: #FF0000;
}

.contact-icon.x {
    background: #000000;
}

.contact-icon.threads {
    background: #000000;
}

.contact-icon.phone {
    background: #0d6efd;
}

.contact-icon.sms {
    background: #ffc107;
    color: #000;
}

.contact-icon.wechat {
    background: #7BB32E;
}

.contact-icon.line {
    background: #00C300;
}

.contact-icon.viber {
    background: #665CAC;
}

.contact-icon.kakaotalk {
    background: #FEE500;
    color: #3c1e1e;
}

.contact-icon.default {
    background: var(--accent);
    color: black;
}