@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   POKERMOONS — MIDNIGHT UI  ·  modernized & consolidated (dark theme)
   --------------------------------------------------------------------------
   One token system, one coherent deep-navy + electric-blue palette, and a
   unified premium modal shell (instead of ~15 near-identical per-id blocks).
   Drop-in: targets the same Bootstrap markup / ids the app already uses, and
   keeps every functional fix (dropdown positioning, games layout, iframe
   modal). Legacy --var names are aliased at the bottom of :root so existing
   inline styles / JS keep working.

   SECTIONS
     01  Tokens                     17  Providers
     02  Reset & base               18  Search & order
     03  Typography                 19  Telegram live chat
     04  WEB · navbar               20  Footer
     05  Cashier dropdown           21  MOBILE · top bar
     06  Language + select          22  MOBILE · bottom nav
     07  Time + notifications       23  MOBILE · offcanvas
     08  Dropdown mechanics         24  MODALS · shared shell
     09  WEB · aside rail           25  MODALS · fields & buttons
     10  Layout · main              26  MODALS · payment grids
     11  Section dividers           27  MODALS · tables / dataTables
     12  Hero slider / carousel     28  MODALS · specifics
     13  Ticker / running line      29  Fullscreen game iframe
     14  Category tiles             30  Utilities
     15  Section titles             31  Responsive
     16  Game cards & grid          32  Reduced motion
   ========================================================================== */


/* ==========================================================================
   01 · TOKENS
   ========================================================================== */
:root {
    color-scheme: dark;

    /* Deep navy base scale */
    --bg-900: #030813;
    --bg-800: #050c17;
    --bg-700: #07111f;
    --bg-600: #0b1220;
    --bg-500: #101a2b;

    /* Surfaces / glass */
    --surface:   rgba(255, 255, 255, 0.04);
    --surface-2: rgba(255, 255, 255, 0.06);
    --surface-3: rgba(255, 255, 255, 0.08);
    --panel:        linear-gradient(180deg, rgba(10, 24, 43, 0.90), rgba(6, 15, 28, 0.94));
    --panel-soft:   linear-gradient(180deg, rgba(12, 28, 50, 0.88), rgba(8, 19, 34, 0.95));
    --card-blue:    linear-gradient(180deg, rgba(16, 39, 68, 0.96), rgba(8, 22, 41, 0.98));
    --card-blue-hi: linear-gradient(180deg, rgba(18, 58, 104, 0.96), rgba(10, 31, 60, 0.98));

    /* Hairlines */
    --line:        rgba(255, 255, 255, 0.08);
    --line-soft:   rgba(255, 255, 255, 0.06);
    --line-blue:   rgba(54, 153, 255, 0.14);
    --line-blue-2: rgba(73, 174, 255, 0.20);

    /* Text */
    --text:        #f5f8fc;
    --text-soft:   #b9c7d8;
    --text-blue:   #cfeaff;
    --text-dim:    #9ecff8;
    --text-mut:    #8fbfe6;
    --cyan:        #63cfff;
    --placeholder: rgba(180, 215, 255, 0.55);

    /* Electric-blue accent system */
    --blue-700: #0b5ed7;
    --blue-600: #0d6efd;
    --blue-500: #1aa7ff;
    --blue-400: #33c3ff;
    --blue-300: #59d7ff;
    --accent:        #1aa7ff;
    --accent-strong: #0b5ed7;
    --accent-soft:   #8fc7f5;
    --accent-grad:       linear-gradient(135deg, #0b5ed7 0%, #1aa7ff 55%, #59d7ff 100%);
    --accent-grad-hover: linear-gradient(135deg, #084298 0%, #0d6efd 50%, #33c3ff 100%);
    --on-accent: #03101f;

    /* Green — money / cashier / success */
    --green:      #17c964;
    --green-grad: linear-gradient(135deg, #2be38a 0%, #17c964 55%, #11b95d 100%);
    --green-soft: rgba(23, 201, 100, 0.14);
    --on-green:   #04130d;

    /* Red — danger / logout */
    --red:      #ef334c;
    --red-grad: linear-gradient(135deg, #ff5a6b 0%, #ef334c 100%);
    --red-soft: rgba(239, 51, 76, 0.14);

    /* Signature blue glows */
    --glow-blue:        0 10px 24px rgba(26, 167, 255, 0.22);
    --glow-blue-strong: 0 0 18px rgba(26, 167, 255, 0.28);

    /* Modal shell (defined once, reused everywhere) */
    --modal-bg:
            radial-gradient(circle at top right, rgba(0, 191, 255, 0.10), transparent 30%),
            radial-gradient(circle at bottom left, rgba(0, 132, 255, 0.08), transparent 35%),
            linear-gradient(180deg, #07111f 0%, #050c17 55%, #030813 100%);
    --modal-header-bg: linear-gradient(180deg, rgba(18, 43, 77, 0.95), rgba(8, 22, 42, 0.92));
    --modal-border: rgba(46, 144, 255, 0.22);
    --modal-shadow:
            0 20px 60px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(0, 170, 255, 0.05) inset,
            0 0 28px rgba(0, 132, 255, 0.12);

    /* Header */
    --hdr-bg:
            radial-gradient(circle at top right, rgba(0, 166, 255, 0.10), transparent 28%),
            linear-gradient(180deg, rgba(10, 22, 41, 0.96), rgba(6, 14, 26, 0.96));
    --hdr-border: rgba(83, 164, 255, 0.14);
    --hdr-shadow: 0 12px 35px rgba(0, 0, 0, 0.28);

    --footer-bg: linear-gradient(180deg, #07111f 0%, #050b14 100%);

    /* Radii */
    --r-xs: 8px;
    --r-sm: 10px;
    --r-md: 12px;
    --r-lg: 14px;
    --r-xl: 16px;
    --r-2xl: 20px;
    --r-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);
    --hair: inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* Glass */
    --blur: blur(14px) saturate(140%);

    /* Motion */
    --t-fast: 0.18s;
    --t:      0.25s;
    --t-slow: 0.40s;
    --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-spring: cubic-bezier(0.2, 0.7, 0.3, 1);

    /* Type */
    --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fs-h1:    clamp(1.4rem, 1.05rem + 1.6vw, 2rem);
    --fs-h2:    clamp(1.2rem, 1rem + 1vw, 1.5rem);
    --fs-title: clamp(1.1rem, 0.98rem + 0.7vw, 1.35rem);

    /* Layout rails */
    --nav-h: 76px;
    --rail-w: 84px;
    --rail-w-open: 248px;
    --bottom-h: 60px;

    /* Spacing */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
    --s-4: 16px; --s-5: 24px; --s-6: 32px;

    /* ---- Legacy aliases (keep old var names working) ---- */
    --accent-color: var(--accent);
    --accent-hover: var(--accent-strong);
    --brand-dark: var(--bg-600);
    --surface-dark: var(--bg-600);
    --surface-soft: var(--bg-500);
    --bg-deep: var(--bg-900);
    --bg-color: var(--bg-600);
    --header-bg: var(--bg-700);
    --text-color: var(--text);
    --text-main: var(--text);
    --border-color: var(--line);
    --border-strong: var(--line-blue);
    --input-bg: #091321;
    --input-surface: #091321;
    --input-border: var(--line-blue);
    --input-border-strong: var(--line-blue-2);
    --btn-bg: var(--accent);
    --btn-color: #fff;
    --success-color: var(--green);
    --success-soft: var(--green);
    --radius-sm: var(--r-xs);
    --radius-md: var(--r-md);
    --radius-lg: var(--r-xl);
    --transition-fast: var(--t-fast) ease;
    --transition-normal: var(--t) ease;
    --footer-card: var(--surface);
    --footer-card-border: var(--line);
    --footer-text: rgba(255, 255, 255, 0.72);
    --footer-title: #fff;
    --footer-muted: rgba(255, 255, 255, 0.45);
    --footer-accent: var(--accent);
    --footer-accent-2: var(--accent-soft);
    --footer-radius: var(--r-2xl);
    --hdr-text: var(--text-blue);
    --hdr-muted: var(--text-dim);
    --aside-width: var(--rail-w);
}


/* ==========================================================================
   02 · RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--bg-900);
    color: var(--text);
    font-family: var(--font);
    line-height: 1.55;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* subtle ambient glow — stays dark, adds depth */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
            radial-gradient(900px 600px at 85% -10%, rgba(26, 167, 255, 0.08), transparent 60%),
            radial-gradient(800px 600px at 5% 0%, rgba(11, 94, 215, 0.07), transparent 58%);
}

img { max-width: 100%; }

.grecaptcha-badge { display: none !important; }
.hidden { display: none !important; }

::selection { background: rgba(26, 167, 255, 0.32); color: #fff; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1c3a63, #0e2747); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-strong); }
* { scrollbar-width: thin; scrollbar-color: #1c3a63 transparent; }


/* ==========================================================================
   03 · TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    color: var(--text);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-title); }

p { color: var(--text-soft); }

a {
    color: var(--cyan);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}
a:hover { color: #a8ebff; }


/* ==========================================================================
   04 · WEB · NAVBAR  (fixed, glass)
   ========================================================================== */
.navbar,
.navbar.fixed-top {
    min-height: var(--nav-h);
    background: var(--hdr-bg);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--hdr-border);
    box-shadow: var(--hdr-shadow);
    padding: 10px 14px;
    z-index: 1050;
}
.navbar .container-fluid { align-items: center; }

.navbar-brand {
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
}
.navbar-brand img {
    height: 50px !important;
    width: auto;
    object-fit: contain;
    margin-left: 0 !important;
    filter: drop-shadow(0 0 12px rgba(26, 167, 255, 0.18));
    transition: filter var(--t) var(--ease), transform var(--t) var(--ease);
}
.navbar-brand:hover img { transform: scale(1.03); filter: drop-shadow(0 0 18px rgba(26, 167, 255, 0.32)); }

.navbar-toggler {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 6px 10px;
    background: var(--surface);
    box-shadow: none !important;
}
.navbar-toggler:focus { outline: none; box-shadow: 0 0 0 3px rgba(26, 167, 255, 0.16); }

.navbar-nav { gap: 6px; }
.navbar-nav .nav-item,
.navbar .nav-item { display: flex; align-items: center; }

/* unified header controls — dark glass pills */
.navbar .btn,
.navbar-nav .nav-link,
.navbar-nav .btn,
.navbar-nav a.btn,
.lang-toggle-btn,
#timeOnly,
#toggleNotifications {
    min-height: 40px;
    border-radius: var(--r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    transition: all var(--t) var(--ease);
}
.navbar-nav .nav-link { color: var(--text-blue) !important; }

.navbar .btn:not(.btn-danger):not(.cashier-btn):not(.btn-success),
.navbar-nav .btn:not(.btn-danger):not(.cashier-btn),
.lang-toggle-btn,
#timeOnly,
#toggleNotifications {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    color: var(--text-blue) !important;
    box-shadow: var(--hair);
}
.navbar .btn:not(.btn-danger):not(.cashier-btn):not(.btn-success):hover,
.navbar-nav .btn:not(.btn-danger):not(.cashier-btn):hover,
.lang-toggle-btn:hover,
#timeOnly:hover,
#toggleNotifications:hover {
    background: var(--surface-3);
    color: #fff !important;
    transform: translateY(-1px);
    border-color: rgba(26, 167, 255, 0.32);
}

.divider,
.navbar .divider,
.navbar-nav .divider {
    width: 1px;
    min-width: 1px;
    height: 24px;
    margin: 0 6px;
    background: rgba(255, 255, 255, 0.10);
}

/* balance + username */
.current_balance,
.A_username_title1,
#userInfo1 { color: var(--text) !important; font-weight: 700; letter-spacing: 0.2px; }
.navbar a[data-title="Balance"] i { color: #fff; opacity: 0.95; }

/* Account pill */
.navbar a[data-target="#Account"],
.navbar .logged[data-target="#Account"] {
    min-width: 92px;
    background: linear-gradient(180deg, rgba(8, 20, 40, 0.95), rgba(5, 15, 30, 0.98)) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
}
.navbar a[data-target="#Account"] i {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    margin: 0 !important;
}

/* primary CTA (Login / Register) reuses btn-danger in this markup → make it blue */
.navbar .btn-danger:not(.logged),
.navbar-nav .btn-danger:not(.logged) {
    background: var(--accent-grad) !important;
    border: 0 !important;
    color: var(--on-accent) !important;
    font-weight: 800;
    box-shadow: var(--glow-blue) !important;
}
.navbar .btn-danger:not(.logged):hover,
.navbar-nav .btn-danger:not(.logged):hover {
    background: var(--accent-grad-hover) !important;
    color: #fff !important;
}

/* logout — compact red icon button */
.navbar .btn-danger.logged {
    width: 42px; min-width: 42px;
    padding: 0 !important;
    border: 0 !important;
    color: #fff !important;
    background: var(--red-grad) !important;
    box-shadow: 0 10px 22px rgba(239, 51, 76, 0.26), var(--hair);
}
.navbar .btn-danger.logged:hover { box-shadow: 0 14px 26px rgba(239, 51, 76, 0.34), var(--hair); }

/* header button rail can scroll horizontally without wrapping */
.ms-auto.d-flex {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
}
.ms-auto.d-flex .btn { flex-shrink: 0; white-space: nowrap; }
.ms-auto.d-flex .btn,
.ms-auto.d-flex .btn:hover,
.ms-auto.d-flex .btn:focus,
.ms-auto.d-flex .btn:active { text-decoration: none; }

.notLogged { white-space: nowrap; }
.btn-group .btn,
.btn-group-sm .btn { margin: 0; white-space: nowrap; padding: 0.25rem 0.5rem; font-size: 0.875rem; }
.btn-pink {
    background: var(--accent-grad);
    color: var(--on-accent);
    border: 0;
}
.btn-pink:hover { background: var(--accent-grad-hover); color: #fff; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }


/* ==========================================================================
   05 · CASHIER DROPDOWN  (green money CTA)
   ========================================================================== */
.cashier-dropdown { position: relative; }
.cashier-btn {
    position: relative;
    z-index: 20;
    min-width: 130px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #fff !important;
    background: var(--green-grad) !important;
    box-shadow: 0 10px 24px rgba(23, 201, 100, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all var(--t) var(--ease);
}
.cashier-btn:hover,
.cashier-btn:focus,
.cashier-btn[aria-expanded="true"] {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(23, 201, 100, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.cashier-btn.dropdown-toggle::after,
.cashier-btn::after {
    margin-left: 8px;
    vertical-align: middle;
    border-top: 0.35em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

.cashier-menu {
    min-width: 250px;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: linear-gradient(180deg, rgba(10, 20, 36, 0.98), rgba(7, 14, 26, 0.98));
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    box-shadow: var(--shadow-lg), var(--hair);
    animation: dropFade 0.2s var(--ease);
}
@keyframes dropFade {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cashier-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 12px 14px;
    margin-bottom: 4px;
    border-radius: var(--r-md);
    color: var(--text-blue);
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    transition: all var(--t-fast) var(--ease);
}
.cashier-menu .dropdown-item:last-child { margin-bottom: 0; }
.cashier-menu .dropdown-item:hover,
.cashier-menu .dropdown-item:focus {
    color: #fff;
    background: linear-gradient(135deg, rgba(31, 220, 120, 0.18), rgba(29, 78, 216, 0.16));
    transform: translateX(-2px);
}
.cashier-menu .dropdown-item i {
    width: 18px; min-width: 18px;
    text-align: center;
    color: #37e08b;
    transition: all var(--t-fast) var(--ease);
}
.cashier-menu .dropdown-item:hover i { color: #fff; transform: scale(1.08); }
.cashier-menu .dropdown-divider { border-top: 1px solid rgba(255, 255, 255, 0.07); margin: 6px 0; }


/* ==========================================================================
   06 · LANGUAGE MENU + NATIVE SELECT
   ========================================================================== */
.lang-dropdown { display: flex; align-items: center; }
.lang-toggle-btn { min-width: 110px; justify-content: space-between; }
.lang-toggle-btn::after { margin-left: 8px; }

.lang-dropdown-menu {
    min-width: 220px;
    margin-top: 12px !important;
    padding: 8px;
    border-radius: var(--r-xl);
    background: linear-gradient(180deg, rgba(10, 20, 38, 0.98), rgba(7, 14, 26, 0.98));
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
}
.lang-dropdown-menu svg { flex-shrink: 0; }
.lang-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    color: var(--text-blue) !important;
    background: transparent;
    font-weight: 500;
    transition: all var(--t-fast) var(--ease);
}
.lang-dropdown-menu .dropdown-item:hover { background: var(--surface-3); color: #fff !important; transform: translateX(-2px); }
.lang-dropdown-menu .dropdown-divider { border-top: 1px solid var(--line); margin: 6px 0; }

#languageSelect {
    background: #091321;
    color: #fff;
    border: 1px solid var(--line-blue);
    border-radius: var(--r-md);
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    transition: all var(--t) var(--ease);
}
#languageSelect:hover { border-color: var(--accent); cursor: pointer; }
#languageSelect:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(26, 167, 255, 0.16);
    background: #0c1828;
    color: #fff;
}
#languageSelect option { background: #0c1828; color: #fff; }

/* legacy floating language widget */
#languageMenuWrapper { position: fixed; bottom: 25px; left: 25px; z-index: 9999; }
.language-toggle-btn {
    width: 46px; height: 46px;
    border-radius: 50%;
    border: none;
    background: var(--accent-grad);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--glow-blue);
    transition: transform var(--t) var(--ease-spring);
}
.language-toggle-btn:hover { transform: rotate(90deg); }
.language-menu {
    display: none;
    margin-top: 10px;
    padding: 10px;
    background: var(--bg-600);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    text-align: center;
}
.language-menu div {
    cursor: pointer;
    font-size: 16px;
    margin: 4px 0;
    padding: 8px 10px;
    border-radius: var(--r-xs);
    color: var(--text-blue);
    transition: background var(--t-fast) var(--ease);
}
.language-menu div:hover { background: rgba(26, 167, 255, 0.12); color: #fff; }
.language-menu div.selected { border: 1px solid var(--accent); }


/* ==========================================================================
   07 · TIME + NOTIFICATIONS
   ========================================================================== */
#timeOnly {
    min-width: 110px;
    letter-spacing: 0.3px;
    color: var(--text-dim) !important;
    font-size: 13px;
}
#toggleNotifications {
    position: relative;
    width: 42px; height: 42px;
    min-width: 42px;
    padding: 0 !important;
    color: var(--text-blue) !important;
}
#toggleNotifications i { color: #eaf4ff; font-size: 18px; }
#toggleNotifications:hover i { color: #fff; }

.badge-notifications,
#notifNum {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, #ff4d6d, #ff2d55);
    border: 2px solid #04172e;
    box-shadow: 0 4px 12px rgba(255, 45, 85, 0.35);
}


/* ==========================================================================
   08 · DROPDOWN MECHANICS  (functional: don't clip, layer above content)
   ========================================================================== */
.navbar,
.navbar .container,
.navbar .container-fluid,
.navbar .collapse,
.navbar .navbar-nav,
.navbar .nav-item,
.dropdown { overflow: visible !important; }

.cashier-menu,
.dropdown-menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    min-width: 220px;
    z-index: 99999 !important;
    border-radius: var(--r-xl);
    padding: 8px;
    background: linear-gradient(180deg, rgba(10, 20, 36, 0.98), rgba(5, 14, 28, 0.98));
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
}
.navbar .dropdown-menu.dropdown-menu-right,
.navbar .dropdown-menu-right { left: auto !important; right: 0 !important; }
.dropdown.show .dropdown-menu { display: block; opacity: 1; visibility: visible; }

.dropdown-menu .dropdown-item { color: var(--text-blue); border-radius: var(--r-md); }
.dropdown-menu .dropdown-item:hover { background: var(--surface-3); color: #fff; }

/* language reveal animation */
.animated-dropdown { opacity: 0; transform: translateY(-10px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.dropdown-menu.show.animated-dropdown { opacity: 1; transform: translateY(0); }


/* ==========================================================================
   09 · WEB · ASIDE RAIL  (icon rail → expands on hover/active)
   ========================================================================== */
.aside-menu {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    width: var(--rail-w);
    height: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 10px;
    background: var(--panel);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-right: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    z-index: 1030;
    transition: width var(--t) var(--ease-spring);
}
.aside-menu:hover,
.aside-menu.active { width: var(--rail-w-open); }

.aside-menu a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 10px 12px;
    border-radius: var(--r-lg);
    color: var(--text-blue);
    background: var(--surface);
    border: 1px solid var(--line-soft);
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    transition: background var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
.aside-menu a:hover { background: var(--surface-3); transform: translateY(-1px); border-color: var(--line-blue-2); }
.aside-menu .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    width: 34px;
}
.aside-menu .icon img { width: 28px !important; height: 28px; object-fit: contain; margin: 0 !important; }
.aside-menu .menu-text {
    opacity: 0;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    color: #e8f4ff;
    transition: opacity var(--t) var(--ease);
}
.aside-menu:hover .menu-text,
.aside-menu.active .menu-text { opacity: 1; }
.aside-menu .menu-text y { display: inline; color: inherit; font: inherit; }

.menu-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 8, 19, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 1020;
    display: none;
}
.menu-overlay.active { display: block; }


/* ==========================================================================
   10 · LAYOUT · MAIN CONTENT
   ========================================================================== */
.main-content {
    margin-top: calc(var(--nav-h) + 12px);
    margin-left: var(--rail-w);
    width: calc(100% - var(--rail-w));
    padding: var(--s-4) clamp(var(--s-4), 3vw, var(--s-6));
    transition: margin-left var(--t) var(--ease);
}


/* ==========================================================================
   11 · SECTION DIVIDERS
   ========================================================================== */
.section-fade::before,
.section-fade::after,
.fade-line {
    content: "";
    display: block;
    height: 1px;
    border: 0;
    background: linear-gradient(to right, transparent, var(--accent), transparent);
}
.section-fade::before,
.section-fade::after { margin: 10px 0; }
.fade-line { width: 100%; margin: 2rem 0; }


/* ==========================================================================
   12 · HERO SLIDER / CAROUSEL
   ========================================================================== */
.carousel-container { margin-top: 20px; }
.carousel-item img {
    width: 100%;
    height: clamp(200px, 32vw, 360px);
    object-fit: cover;
    border-radius: var(--r-xl);
}

#newMainPageSlider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
}
#newMainPageSlider .swiper-slide {
    border-radius: var(--r-xl);
    overflow: hidden;
    transform: scale(0.97);
    transition: transform 0.6s var(--ease), box-shadow var(--t-slow) var(--ease);
}
#newMainPageSlider .swiper-slide:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    z-index: 2;
}
#newMainPageSlider img {
    border-radius: var(--r-xl);
    object-fit: cover;
    max-height: 520px;
    transition: transform 0.6s var(--ease);
}
#newMainPageSlider .swiper-slide:hover img { transform: scale(1.05) rotate(0.5deg); }
#newMainPageSlider .swiper-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-xl);
    background: radial-gradient(transparent 60%, rgba(0, 0, 0, 0.3));
    opacity: 0;
    transition: opacity var(--t) var(--ease);
}
#newMainPageSlider .swiper-slide:hover::before { opacity: 1; }

.swiper-button-next,
.swiper-button-prev,
#newMainPageSlider .swiper-button-next,
#newMainPageSlider .swiper-button-prev {
    width: 44px !important;
    height: 44px !important;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    background: rgba(7, 17, 31, 0.55);
    border: 1px solid var(--line);
    border-radius: 50%;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: all var(--t) var(--ease);
}
.swiper-button-next:hover,
.swiper-button-prev:hover,
#newMainPageSlider .swiper-button-next:hover,
#newMainPageSlider .swiper-button-prev:hover {
    background: rgba(26, 167, 255, 0.18);
    border-color: var(--accent);
    color: #fff;
}
.swiper-button-next::after,
.swiper-button-prev::after { font-size: 16px !important; font-weight: 800; }
.swiper-pagination-bullet { background: rgba(255, 255, 255, 0.4) !important; opacity: 1 !important; }
.swiper-pagination-bullet-active { background: var(--accent) !important; width: 22px; border-radius: 6px; }

.owl-nav { position: absolute; top: 0; width: 100%; height: 100%; pointer-events: none; }
.owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    line-height: 44px;
    border-radius: 50% !important;
    background: rgba(7, 17, 31, 0.55) !important;
    border: 1px solid var(--line) !important;
    color: #fff !important;
    pointer-events: all;
    transition: all var(--t) var(--ease);
}
.owl-nav button:hover { background: rgba(26, 167, 255, 0.18) !important; border-color: var(--accent) !important; }
.owl-nav .owl-prev { left: 16px; }
.owl-nav .owl-next { right: 16px; }


/* ==========================================================================
   13 · TICKER / RUNNING LINE
   ========================================================================== */
.ticker {
    color: var(--text-soft);
    padding: 10px 18px;
    margin: 14px 0;
    border-radius: var(--r-pill);
    background: linear-gradient(120deg, rgba(26, 167, 255, 0.10), rgba(11, 94, 215, 0.06));
    border: 1px solid var(--line-blue);
    box-shadow: var(--hair), var(--shadow-sm);
    overflow: hidden;
}
.ticker p {
    display: inline-block;
    white-space: nowrap;
    margin: 0;
    animation: ticker 18s linear infinite;
}
@keyframes ticker {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.running-line {
    background: linear-gradient(120deg, rgba(26, 167, 255, 0.14), rgba(11, 94, 215, 0.06));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: #fff;
    padding: 8px 14px;
    font-weight: 700;
}
.running-line marquee { font-size: 1rem; }


/* ==========================================================================
   14 · CATEGORY TILES
   ========================================================================== */
.category-row { padding: 14px 0 6px; }
.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border-radius: var(--r-md);
    color: #fff;
    background: var(--surface);
    border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform var(--t) var(--ease-spring), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.category-item:hover {
    transform: translateY(-4px);
    border-color: var(--line-blue-2);
    box-shadow: var(--glow-blue);
}
.category-icon { font-size: 2.4rem; color: var(--accent); }
.category-title { margin-top: 8px; font-weight: 700; color: #fff; }


/* ==========================================================================
   15 · SECTION TITLES  (signature: glowing accent bar)
   ========================================================================== */
.games-section { padding: 15px 10px; }
.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-left: 14px;
    margin: 6px 0 16px;
    font-size: var(--fs-title);
    font-weight: 800;
    color: var(--text);
}
.section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.18em;
    bottom: 0.18em;
    width: 4px;
    border-radius: 4px;
    background: var(--accent-grad);
    box-shadow: 0 0 12px rgba(26, 167, 255, 0.55);
}
.section-title a {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cyan);
    border: 1px solid var(--line);
    padding: 5px 13px;
    border-radius: var(--r-pill);
    text-decoration: none;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.section-title a:hover { background: rgba(26, 167, 255, 0.12); border-color: var(--accent); }


/* ==========================================================================
   16 · GAME CARDS & GRID
   ========================================================================== */
.scroll-container {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scroll-container::-webkit-scrollbar { display: none; }
.scroll-container .card { flex: 0 0 auto; width: clamp(160px, 40vw, 270px); }

.card.game-card,
.game-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--r-md);
    background: #101322;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card.game-card:hover,
.game-card:hover {
    transform: translateY(-5px);
    border-color: var(--line-blue-2);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), var(--glow-blue);
}
.game-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--r-md) var(--r-md) 0 0;
    transition: opacity var(--t) var(--ease);
}
.card.game-card .game-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: rgba(3, 8, 19, 0.8);
    transition: height var(--t) var(--ease);
}
.card.game-card:hover .game-overlay { height: 42%; }
.card.game-card .game-overlay button { margin: 5px; width: 80%; font-size: 0.8rem; }
.game-card .card-body { padding: 8px; background: transparent; }
.game-card .card-title {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.play-button { font-size: 1.5rem; color: #fff; }

/* games page two-column layout (sidebar + scroller) */
#gameList > .container.mt-3 {
    display: flex !important;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: nowrap;
}
#gameList > .container.mt-3 .mr-3 {
    flex: 0 0 240px !important;
    max-width: 240px !important;
    border-right: 1px solid var(--line);
    padding-right: 1rem;
}
#gameList .mr-3 .row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    margin: 0 !important;
}
#gameList .providerbox1 {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.5rem !important;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-sm) !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: background 0.15s ease-in-out !important;
}
#gameList .providerbox1:hover { background: var(--surface-3) !important; }
#gameList #gamesSection,
#gameList section#gamesSection.p-0 { display: none !important; }
#gameList > .container.mt-3 #defaultList { flex: 1 !important; }

#defaultListpopuler,
.default-game-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 1rem !important;
    padding-bottom: 1rem !important;
    justify-items: center;
}
#defaultListpopuler::-webkit-scrollbar { height: 8px; }
#defaultListpopuler::-webkit-scrollbar-track { background: transparent; }
#defaultListpopuler::-webkit-scrollbar-thumb { background: #1c3a63; border-radius: 4px; }
#defaultListpopuler .game { flex: 0 0 160px !important; max-width: 160px !important; }

.game {
    position: relative;
    width: 100%;
    max-width: 160px;
    overflow: hidden;
    border-radius: var(--r-xs);
    background: var(--bg-700);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast) var(--ease);
}
.game:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5); }
.game .game-image { display: block; width: 100%; height: auto; }
.game .hover-box {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(3, 8, 19, 0.5);
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
}
.game:hover .hover-box { opacity: 1; }


/* ==========================================================================
   17 · PROVIDERS
   ========================================================================== */
.provider-item.selected {
    background: #3a4664 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-weight: bold;
}
.providers-logos img { height: 30px; margin: 0 4px; }

.provider-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 10px 0 26px;
    mask-image: linear-gradient(to right, transparent, white 8%, white 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, white 8%, white 92%, transparent);
}
.provider-marquee { overflow: hidden; width: 100%; }
.provider-track {
    display: inline-flex;
    align-items: center;
    width: max-content;
    animation: footerScroll 34s linear infinite;
}
@keyframes footerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.provider-card {
    flex: 0 0 auto;
    margin-right: 50px;
    border-radius: var(--r-2xl);
    background: var(--surface);
    border: 1px solid var(--line);
    transition: transform var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease), background var(--t-slow) var(--ease);
}
.provider-card:hover {
    transform: translateY(-5px) scale(1.03);
    border-color: var(--line-blue-2);
    background: var(--surface-2);
}
.provider-card img {
    max-width: 100%;
    max-height: 38px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: all var(--t-slow) var(--ease);
}
.provider-card:hover img { opacity: 1; transform: scale(1.04); }


/* ==========================================================================
   18 · SEARCH & ORDER
   ========================================================================== */
#searchAndOrder {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
#searchAndOrder.col { flex: auto !important; width: auto !important; padding: 0 !important; }
#searchAndOrder form#gameSearch { position: relative; flex: 1; margin: 0; padding: 0; }
#searchAndOrder input#search {
    width: 100%;
    flex: 1;
    margin: 0;
    padding: 0.55rem 2.5rem 0.55rem 0.85rem;
    background: #091321;
    border: 1px solid var(--line-blue);
    border-radius: var(--r-sm);
    color: #fff;
    font-size: 0.9rem;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
#searchAndOrder input#search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 167, 255, 0.16); }
#searchAndOrder input#search::placeholder { color: var(--placeholder); }
#searchAndOrder form#gameSearch i.fa-search,
#searchAndOrder i.fa-search {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-mut);
    cursor: pointer;
    z-index: 1;
}
#searchAndOrder select#ordering {
    flex: 0 0 150px;
    margin: 0;
    padding: 0.55rem 2rem 0.55rem 0.85rem;
    background: #091321;
    border: 1px solid var(--line-blue);
    border-radius: var(--r-sm);
    color: #fff;
    font-size: 0.9rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D'10'%20height%3D'6'%20xmlns%3D'http://www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M0%200l5%206%205-6z'%20fill%3D'%238fbfe6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
}

.wide-card {
    background: var(--surface);
    border: 1px solid var(--line);
    color: #fff;
    padding: 2rem;
    border-radius: var(--r-xl);
    text-align: center;
    margin: 2rem 0;
}
.wide-card h3 { margin-bottom: 1rem; }


/* ==========================================================================
   19 · TELEGRAM LIVE CHAT
   ========================================================================== */
.telegram-live-chat {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 180px;
    padding: 12px 16px;
    border-radius: var(--r-pill);
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #169bff 0%, #0b6bff 100%);
    box-shadow: 0 10px 30px rgba(11, 107, 255, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.telegram-live-chat:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 36px rgba(11, 107, 255, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    color: #fff;
}
.telegram-live-chat:active { transform: translateY(-1px) scale(0.99); }
.telegram-pulse {
    position: absolute;
    inset: -6px;
    border-radius: var(--r-pill);
    background: rgba(22, 155, 255, 0.22);
    z-index: -1;
    animation: telegramPulse 2.2s infinite;
}
@keyframes telegramPulse {
    0%   { transform: scale(0.96); opacity: 0.9; }
    70%  { transform: scale(1.08); opacity: 0; }
    100% { transform: scale(1.08); opacity: 0; }
}
.telegram-chat-badge {
    position: absolute;
    top: -8px;
    left: 14px;
    padding: 4px 8px;
    border-radius: var(--r-pill);
    background: var(--green-grad);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(35, 211, 102, 0.35);
}
.telegram-icon-wrap {
    width: 48px; height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.telegram-icon-wrap svg { width: 24px; height: 24px; display: block; }
.telegram-chat-text { display: flex; flex-direction: column; line-height: 1.15; }
.telegram-chat-text strong { font-size: 15px; font-weight: 800; color: #fff; }
.telegram-chat-text small { font-size: 12px; color: rgba(255, 255, 255, 0.82); margin-top: 3px; }


/* ==========================================================================
   20 · FOOTER  (unified dark glass)
   ========================================================================== */
footer {
    position: relative;
    background: var(--footer-bg);
    color: var(--footer-text);
    padding: 70px 0 30px;
    margin-top: 60px;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
    font-size: 0.9rem;
}
footer::before,
footer::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.18;
    pointer-events: none;
}
footer::before { top: -120px; left: -100px; background: #0ea5e9; }
footer::after { right: -120px; bottom: -120px; background: var(--accent); }
footer section { position: relative; z-index: 2; }
footer h2 { font-size: 20px; font-weight: 800; margin-bottom: 24px; }
footer a { color: var(--cyan); text-decoration: none; transition: color var(--t-fast) var(--ease); }
footer a:hover { color: #a8ebff; }

#footerBrand { text-align: center; margin-bottom: 28px; }
#footerBrand a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 28px;
    border-radius: var(--r-2xl);
    background: var(--surface);
    border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-lg);
    transition: all var(--t-slow) var(--ease);
}
#footerBrand a:hover { transform: translateY(-3px); border-color: var(--line-blue-2); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45); }
#footerBrand img { max-width: 170px; max-height: 64px; object-fit: contain; display: block; }

#footerSocialMediaLinksSection { margin: 12px 0 28px; }
#footerSocialMediaLinks { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
#footerSocialMediaLinks .social-link {
    width: 48px; height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: all var(--t) var(--ease);
}
#footerSocialMediaLinks .social-link:hover {
    color: var(--on-accent);
    background: linear-gradient(135deg, var(--footer-accent), var(--footer-accent-2));
    transform: translateY(-4px);
    border-color: transparent;
}

#footerLinksSection {
    max-width: 1180px;
    margin: 22px auto 0;
    padding: 26px 28px 20px;
    border-radius: var(--r-2xl);
    background: var(--surface);
    border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-md);
}
#footerLinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 22px; }
#footerLinks a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 10px 16px;
    border-radius: var(--r-md);
    background: var(--surface);
    color: rgba(255, 255, 255, 0.76);
    font-size: 14px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: 0.25s var(--ease);
}
#footerLinks a:hover { color: #fff; background: rgba(26, 167, 255, 0.10); border-color: rgba(26, 167, 255, 0.22); transform: translateY(-2px); }

#footerPaymentMethodsSection,
#footerProvidersSection {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    padding: 40px 20px;
    background: var(--bg-500);
}
#footerPaymentMethodsSection i,
#footerProvidersSection i {
    display: inline-block;
    width: 90px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.85;
    transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
#footerPaymentMethodsSection i:hover,
#footerProvidersSection i:hover { transform: scale(1.08); opacity: 1; }
#footerPayoutSection a {
    border: 1px solid var(--line);
    color: #fff;
    font-size: 13px;
    border-radius: var(--r-sm);
    padding: 8px 24px;
    margin: 8px;
    display: inline-block;
    transition: 0.25s var(--ease);
}
#footerPayoutSection a:hover { border-color: var(--line-blue-2); }

#secureGamingSection {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 18px;
    margin-top: 8px;
    font-size: 13px;
}
#secureGamingLinks { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
#secureGamingLinks img { max-height: 38px; width: auto; opacity: 0.95; }
#secureGamingSection p { margin: 4px 0; color: rgba(255, 255, 255, 0.58); font-size: 14px; }
#secureGamingSection p strong,
#secureGamingSection strong.text-light { color: #fff; font-weight: 700; }
#footerPlatformSection a img { max-height: 30px; }

.footer-links a,
.social-icons a,
.social-icons i { color: #fff; transition: color var(--t-fast) var(--ease); }
.footer-links a { margin: 0 10px; text-decoration: none; }
.social-icons { display: flex; gap: 1rem; justify-content: center; }
.social-icons a, .social-icons i { margin: 0 8px; font-size: 1.25rem; cursor: pointer; }
.social-icons a:hover i { color: var(--accent); }

.footer-links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 24px; }
.footer-col h4 { color: #fff; font-size: 16px; margin-bottom: 12px; font-weight: 700; }
.footer-col a { display: block; color: rgba(255, 255, 255, 0.72); text-decoration: none; margin-bottom: 10px; transition: 0.25s var(--ease); }
.footer-col a:hover { color: var(--accent); padding-left: 4px; }

body.dark-mode footer { background: var(--bg-700); color: #eee; }


/* ==========================================================================
   21 · MOBILE · TOP BAR
   ========================================================================== */
.my-top-nav {
    min-height: 48px;
    padding: 0.4rem 1rem;
    color: #fff;
    background: linear-gradient(180deg, rgba(7, 17, 31, 0.95), rgba(5, 12, 23, 0.92)) !important;
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--line);
}
.my-top-nav .navbar-brand img { height: 24px; }
.my-top-nav .btn { padding: 0.25rem 0.6rem; font-size: 0.85rem; }


/* ==========================================================================
   22 · MOBILE · BOTTOM NAV
   ========================================================================== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--bottom-h);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.25rem 0;
    z-index: 1030;
    background: linear-gradient(0deg, rgba(3, 8, 19, 0.98), rgba(7, 17, 31, 0.92));
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4);
}
.bottom-nav::before {
    content: "";
    position: absolute;
    top: -2px; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(to right, transparent, var(--accent), transparent);
}
.bottom-nav a,
.bottom-nav .menu-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--text-soft);
    text-decoration: none;
    background: none;
    border: none;
    font-size: 0.72rem;
    transition: color var(--t-fast) var(--ease);
}
.bottom-nav a i,
.bottom-nav .menu-btn i { font-size: 1.25rem; margin-bottom: 0.1rem; }
.bottom-nav a:hover,
.bottom-nav a.active,
.bottom-nav .menu-btn:hover { color: var(--accent); }

/* center action button */
.menu-btn {
    width: 52px; height: 52px;
    margin-top: -18px;
    border: none;
    border-radius: 50%;
    background: var(--accent-grad);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(26, 167, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform var(--t-fast) var(--ease-spring), filter var(--t-fast) var(--ease);
}
.bottom-nav .menu-btn { flex: 0 0 auto; padding: 0; }
.menu-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }

.bottom-bar-hidden { transform: translateY(100%); transition: transform var(--t) var(--ease); }
body.bottom-bar-hidden footer { padding-bottom: 0; }


/* ==========================================================================
   23 · MOBILE · OFFCANVAS MENU
   ========================================================================== */
.offcanvas.offcanvas-bottom {
    top: 56px;
    height: calc(100% - 56px - var(--bottom-h)) !important;
    background: var(--bg-700);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-top: 1px solid var(--line);
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.offcanvas.offcanvas-bottom .offcanvas-header { background: transparent; border-bottom: 1px solid var(--line); padding: 0.5rem 1rem; }
.offcanvas.offcanvas-bottom .offcanvas-header .offcanvas-title { font-size: 1rem; margin: 0; color: #fff; }
.offcanvas.offcanvas-bottom .offcanvas-header .btn-close { filter: invert(1); width: 1.2rem; height: 1.2rem; }
.offcanvas.offcanvas-bottom .offcanvas-body { padding: 0.5rem 0; background: transparent; overflow-y: auto; }

.offcanvas .menu-list { list-style: none; margin: 0; padding: 0; }
.offcanvas .menu-list li { position: relative; padding-bottom: 0.4rem; }
.offcanvas .menu-list li a {
    display: flex;
    align-items: center;
    width: 95%;
    margin: 0.15rem auto;
    padding: 0.55rem 0.9rem !important;
    background: var(--surface);
    color: #fff;
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-spring), border-color var(--t-fast) var(--ease);
}
.offcanvas .menu-list li.active a,
.offcanvas .menu-list li a:hover { background: rgba(26, 167, 255, 0.12); border-color: var(--line-blue-2); transform: translateY(-2px); }
.offcanvas .menu-icon { font-size: 1rem !important; margin-right: 0.75rem; color: var(--cyan); }
.offcanvas .menu-label { flex: 1; font-weight: 500; transition: color var(--t-fast) var(--ease); }
.offcanvas .menu-arrow { font-size: 0.85rem !important; opacity: 0.5; transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.offcanvas .menu-list li a:hover .menu-label { color: var(--accent); }
.offcanvas .menu-list li a:hover .menu-arrow { transform: translateX(4px); opacity: 1; }


/* ==========================================================================
   24 · MODALS · SHARED PREMIUM SHELL  (one definition for every modal id)
   ========================================================================== */
.modal-backdrop,
.modal-backdrop.show {
    background: rgba(3, 8, 19, 0.72) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 1 !important;
}

#loginModal, #registerModal, #Account, #Deposit, #Withdraw, #btc_withdraw,
#NowPayment, #Bitcoin, #walletCryp, #bankwire_transfer, #bankwire_transferIRGATE,
#NeuronCash, #forgotPasswordModal, #activityModalD, #activityModalW,
#payitModal, #notification, #memberMenuModal { padding: 0 !important; }

/* dialog sizing — sensible default, a few overrides below */
#loginModal .modal-dialog, #registerModal .register-modal-dialog,
#Account .modal-dialog, #Deposit .modal-dialog, #Withdraw .modal-dialog,
#btc_withdraw .modal-dialog, #NowPayment .modal-dialog, #payitModal .modal-dialog,
#notification .modal-dialog, #Bitcoin .modal-dialog, #walletCryp .modal-dialog,
#bankwire_transfer .modal-dialog, #bankwire_transferIRGATE .modal-dialog,
#NeuronCash .modal-dialog, #forgotPasswordModal .modal-dialog {
    width: 100%;
    max-width: 920px;
    margin: 1.75rem auto !important;
}
#loginModal .modal-dialog { max-width: 460px; }
#forgotPasswordModal .modal-dialog { max-width: 520px; }
#registerModal .register-modal-dialog { max-width: 760px; }
#Account .modal-dialog { max-width: 1100px; }

#loginModal.modal.fade .modal-dialog,
#registerModal.modal.fade .register-modal-dialog,
#Account.modal.fade .modal-dialog, #Deposit.modal.fade .modal-dialog,
#Withdraw.modal.fade .modal-dialog, #btc_withdraw.modal.fade .modal-dialog,
#NowPayment.modal.fade .modal-dialog, #payitModal.modal.fade .modal-dialog,
#notification.modal.fade .modal-dialog { transform: translate(0, 0) !important; }

/* shell */
.modal-content,
#loginModal .modal-content, #registerModal .modal-content, #Account .modal-content,
#Deposit .modal-content, #Withdraw .modal-content, #btc_withdraw .modal-content,
#NowPayment .modal-content, #Bitcoin .modal-content, #walletCryp .modal-content,
#bankwire_transfer .modal-content, #bankwire_transferIRGATE .modal-content,
#NeuronCash .modal-content, #forgotPasswordModal .modal-content,
#payitModal .modal-content, #notification .modal-content, #memberMenuModal .modal-content {
    background: var(--modal-bg);
    color: var(--text-blue);
    border: 1px solid var(--modal-border);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--modal-shadow);
}
#Account .modal-content,
#payitModal .modal-content { border-radius: var(--r-2xl); }

/* header (centered title, right-aligned glass close) */
.modal-header,
#loginModal .modal-header, #registerModal .register-modal-header, #Account .modal-header,
#Deposit .modal-header, #Withdraw .modal-header, #btc_withdraw .modal-header,
#NowPayment .modal-header, #payitModal .modal-header, #notification .modal-header,
#Bitcoin .modal-header, #walletCryp .modal-header, #bankwire_transfer .modal-header,
#bankwire_transferIRGATE .modal-header, #NeuronCash .modal-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 52px 16px 18px;
    border: 0;
    border-bottom: 1px solid var(--line-blue);
    background: var(--modal-header-bg);
}
.modal-header h3, .modal-header h4, .modal-title,
#loginModal .modal-header h3, #registerModal .modal-title, #notification .modal-title {
    width: 100%;
    margin: 0;
    text-align: center;
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.4px;
}
#payitModal .modal-title { color: #63cfff !important; text-transform: uppercase; letter-spacing: 1px; font-size: 20px; }

/* close button — shared */
.modal .close, .modal .btn-close,
#loginModal .modal-header .close, #registerModal .register-close-btn,
#Account .modal-header .close, #Deposit .modal-header .close, #Withdraw .modal-header .close,
#btc_withdraw .modal-header .close, #NowPayment .modal-header .close, #payitModal .close,
#notification .close {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 38px; height: 38px;
    min-width: 38px; min-height: 38px;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-blue-2);
    color: #dff4ff !important;
    opacity: 1 !important;
    line-height: 1;
    text-shadow: none;
    box-shadow: none;
    text-decoration: none;
    transition: all var(--t) var(--ease);
}
.modal .close:hover, .modal .btn-close:hover,
#loginModal .modal-header .close:hover, #registerModal .register-close-btn:hover,
#Account .modal-header .close:hover, #Deposit .modal-header .close:hover,
#Withdraw .modal-header .close:hover, #btc_withdraw .modal-header .close:hover,
#NowPayment .modal-header .close:hover, #payitModal .close:hover, #notification .close:hover {
    background: var(--accent-grad);
    border-color: rgba(89, 215, 255, 0.35);
    color: var(--on-accent) !important;
    box-shadow: var(--glow-blue-strong);
    text-decoration: none;
}
.modal .btn-close { filter: none; }
#registerModal .register-close-btn span,
#notification .close span { display: block; font-size: 20px; line-height: 1; font-weight: 700; margin-top: -1px; }

/* body + dividers */
.modal-body { padding: 20px; background: transparent; color: var(--text-blue); }
.modal hr,
#loginModal hr, #registerModal .register-divider, #Account hr, #btc_withdraw hr {
    border: 0 !important;
    border-top: 1px solid var(--line-blue) !important;
    margin: 18px 0 !important;
}
.modal p, .modal label, .modal .help-block { color: var(--text-soft); }
.modal a { color: var(--cyan); }
.modal a:hover { color: #a8ebff; }

/* shared section headers + info boxes + panels inside modals */
.modal .section-header {
    margin: 0 0 16px;
    padding-bottom: 10px;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--line-blue);
}
.modal .info-box {
    min-height: 1px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: rgba(8, 21, 38, 0.60);
    border: 1px solid var(--line-blue);
    color: #b9dbf7;
}
.modal .payment-section,
.modal #paymentModal,
.modal #drawOptions,
.modal #depositOptions {
    margin-bottom: 20px;
    padding: 18px;
    border-radius: var(--r-xl);
    background: var(--panel);
    border: 1px solid var(--line-blue);
    box-shadow: var(--hair);
}
.modal .loading-spinner { margin: 14px 0; color: var(--cyan); }
.modal .loading-spinner i { font-size: 1.6rem; color: var(--accent); }


/* ==========================================================================
   25 · MODALS · FIELDS & BUTTONS  (shared)
   ========================================================================== */
.modal .form-group { margin-bottom: 16px; position: relative; }
.modal label,
.modal .control-label {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--text-blue);
    font-weight: 700;
    font-size: 14px;
}
.modal .form-control,
.modal .custom-select,
.modal select.form-control,
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="number"],
.modal input[type="tel"],
.modal input[type="date"] {
    min-height: 46px;
    width: 100%;
    background: #091321;
    color: #fff;
    border: 1px solid var(--line-blue);
    border-radius: var(--r-md);
    padding: 10px 14px;
    box-shadow: none;
    transition: all var(--t) var(--ease);
}
.modal .form-control::placeholder,
.modal input::placeholder { color: var(--placeholder); }
.modal .form-control:focus,
.modal .custom-select:focus,
.modal select:focus,
.modal input:focus {
    outline: none;
    border-color: #28a8ff;
    box-shadow: 0 0 0 3px rgba(40, 168, 255, 0.12);
    background: #0c1828;
    color: #fff;
}
.modal .form-control[disabled],
.modal .form-control[readonly],
.modal .custom-select[disabled] {
    background: rgba(11, 22, 36, 0.92);
    color: #9fc6e8;
    opacity: 1;
    cursor: not-allowed;
}
.modal select option,
.modal .custom-select option { background: #0c1828; color: #fff; }
.modal .help-block { margin-top: 8px; color: var(--text-mut); font-size: 12px; line-height: 1.5; }

/* primary buttons — blue gradient */
.modal .btn-primary,
.modal .modal-deposit-action,
.modal .modal-draw-action,
.modal #GonderBtn,
.modal button[type="submit"]:not(.close):not(.register-close-btn),
#registerModal button[type="button"],
#Account button[type="button"],
#Account .btn-secondary,
#Account .btn-block {
    width: 100%;
    border: 0;
    border-radius: var(--r-md);
    min-height: 46px;
    padding: 12px 16px;
    font-weight: 800;
    color: var(--on-accent) !important;
    background: var(--accent-grad);
    box-shadow: var(--glow-blue);
    transition: all var(--t) var(--ease);
}
.modal .btn-primary:hover,
.modal .modal-deposit-action:hover,
.modal .modal-draw-action:hover,
.modal #GonderBtn:hover,
.modal button[type="submit"]:not(.close):not(.register-close-btn):hover,
#registerModal button[type="button"]:hover,
#Account button[type="button"]:hover,
#Account .btn-secondary:hover,
#Account .btn-block:hover {
    background: var(--accent-grad-hover);
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(13, 110, 253, 0.28);
    transform: translateY(-1px);
}

/* secondary / ghost (back buttons, etc.) */
.modal .go-back-to-payment-options,
.modal .btn-secondary:not(#Account .btn-secondary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--line-blue-2);
    border-radius: var(--r-md);
    background: var(--card-blue-hi);
    color: #e7f6ff !important;
    font-weight: 700;
    box-shadow: var(--hair);
    transition: all var(--t) var(--ease);
}
.modal .go-back-to-payment-options:hover {
    background: var(--accent-grad);
    color: var(--on-accent) !important;
    border-color: rgba(89, 215, 255, 0.35);
    box-shadow: var(--glow-blue);
    text-decoration: none;
}

/* alerts */
.modal .alert { border-radius: var(--r-md); border: 1px solid transparent; font-size: 14px; }
.modal .alert-success { background: rgba(0, 153, 102, 0.14); color: #bfffe5; border-color: rgba(0, 204, 136, 0.18); }
.modal .alert-danger { background: rgba(255, 59, 59, 0.12); color: #ffd8d8; border-color: rgba(255, 59, 59, 0.18); }

/* password show/hide */
.password-wrap { position: relative; width: 100%; }
.password-wrap .form-control { width: 100%; padding-right: 52px !important; }
.password-wrap .toggle-password,
.toggle-password-visibility {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    outline: none !important;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.04) !important;
    color: #8fc8ff;
    box-shadow: none !important;
    cursor: pointer;
    z-index: 5;
    transition: all var(--t-fast) var(--ease);
}
.password-wrap .toggle-password:hover,
.toggle-password-visibility:hover { background: rgba(26, 167, 255, 0.12) !important; color: #fff; }
.password-wrap .toggle-password i { font-size: 17px; color: #8fbce6; pointer-events: none; }
.password-wrap .toggle-password:hover i { color: #fff; }


/* ==========================================================================
   26 · MODALS · PAYMENT GRIDS  (Deposit / Withdraw / NowPayment / btc)
   ========================================================================== */
#Deposit .payment-method, #Withdraw .payment-method, #NowPayment .payment-method,
#btc_withdraw .payment-method, #activityModalD .payment-method, #activityModalW .payment-method,
.payment-method {
    height: 100%;
    min-height: 170px;
    padding: 18px 14px;
    border-radius: var(--r-xl);
    text-align: center;
    cursor: pointer;
    background: var(--card-blue);
    border: 1px solid var(--line-blue-2);
    box-shadow: var(--hair), 0 8px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all var(--t) var(--ease);
}
#Deposit .payment-method { min-height: 210px; }
#Deposit .payment-method:hover, #Withdraw .payment-method:hover, #NowPayment .payment-method:hover,
#btc_withdraw .payment-method:hover, #activityModalD .payment-method:hover,
#activityModalW .payment-method:hover, .payment-method:hover {
    transform: translateY(-4px);
    background: var(--card-blue-hi);
    border-color: rgba(89, 215, 255, 0.28);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28), 0 0 20px rgba(26, 167, 255, 0.12);
}
.payment-method i.payment, .payment-method i.coin {
    display: block;
    width: 62px; height: 62px;
    margin: 0 auto 14px;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    filter: drop-shadow(0 0 10px rgba(0, 149, 255, 0.16));
}
#Deposit .payment-method i.payment, #Deposit .payment-method i.coin { width: 64px; height: 64px; }
.payment-method img { display: block; margin: 0 auto 12px !important; max-width: 180px; width: 100%; height: auto; }
.payment-method .name, .payment-method p.name {
    margin: 0 0 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
    word-break: break-word;
}
.payment-method p { margin: 0; color: #b9dbf7; font-size: 14px; line-height: 1.6; }
.payment-method p strong { color: var(--cyan); font-weight: 800; }
.payment-method p span { display: inline-block; color: var(--text-blue); }

#Deposit .row > [class*="col-"],
#Withdraw .row > [class*="col-"] { margin-bottom: 14px; }

/* deposit/withdraw section filter chips */
#btc_withdraw #sectionFilter, #NowPayment #sectionFilter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-blue);
    overflow-x: auto;
}
#btc_withdraw #sectionFilter .swiper-wrapper, #NowPayment #sectionFilter .swiper-wrapper { display: flex; gap: 10px; flex-wrap: nowrap; }
#btc_withdraw #sectionFilter .item, #NowPayment #sectionFilter .item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--line-blue);
    color: #8fc8ff;
    white-space: nowrap;
    text-decoration: none;
    transition: all var(--t) var(--ease);
}
#btc_withdraw #sectionFilter .item:hover, #btc_withdraw #sectionFilter .item.mixitup-control-active,
#NowPayment #sectionFilter .item:hover, #NowPayment #sectionFilter .item.mixitup-control-active {
    background: var(--card-blue-hi);
    border-color: rgba(89, 215, 255, 0.28);
    color: #fff;
    box-shadow: 0 0 18px rgba(26, 167, 255, 0.10);
}

/* inner paymentModal h5 row */
#btc_withdraw #paymentModal h5, #NowPayment #paymentModal h5 {
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-blue);
}


/* ==========================================================================
   27 · MODALS · TABLES / DATATABLES  (Account / notification / btc)
   ========================================================================== */
.modal .table-responsive { border-radius: var(--r-lg); overflow: hidden; }
.modal .table {
    width: 100%;
    margin-bottom: 0;
    color: var(--text-blue);
    background: rgba(8, 21, 38, 0.55);
    border-color: var(--line-blue);
}
.modal .table thead th,
.modal .table thead td {
    background: linear-gradient(180deg, rgba(13, 35, 63, 0.96), rgba(8, 23, 44, 0.98));
    color: #fff;
    font-weight: 800;
    border-color: var(--line-blue) !important;
    white-space: nowrap;
}
.modal .table td,
.modal .table th { border-color: var(--line-blue) !important; vertical-align: middle; padding: 12px; }
.modal .table-striped tbody tr:nth-of-type(odd) { background: rgba(10, 26, 47, 0.92); }
.modal .table-striped tbody tr:nth-of-type(even) { background: rgba(7, 19, 35, 0.78); }
.modal .table-bordered,
.modal .table-bordered td,
.modal .table-bordered th { border: 1px solid var(--line-blue) !important; }

/* dataTables controls */
.modal .dataTables_wrapper { color: var(--text-blue); }
.modal .dataTables_length, .modal .dataTables_filter,
.modal .dataTables_info, .modal .dataTables_paginate { padding: 10px 0; color: #b9dbf7 !important; }
.modal .dataTables_filter input,
.modal .dataTables_length select {
    background: #091321 !important;
    color: #fff !important;
    border: 1px solid var(--line-blue) !important;
    border-radius: var(--r-sm);
    min-height: 36px;
    padding: 6px 10px;
    box-shadow: none !important;
    outline: none !important;
    margin-left: 6px;
}
.modal .dataTables_filter input:focus,
.modal .dataTables_length select:focus {
    border-color: #28a8ff !important;
    box-shadow: 0 0 0 3px rgba(40, 168, 255, 0.12) !important;
    background: #0c1828 !important;
}
.modal .paginate_button {
    border: 1px solid var(--line-blue) !important;
    background: var(--panel-soft) !important;
    color: #dff4ff !important;
    border-radius: var(--r-sm) !important;
    margin: 0 3px;
    transition: all var(--t) var(--ease) !important;
}
.modal .paginate_button:hover,
.modal .paginate_button.current {
    background: var(--accent-grad) !important;
    color: var(--on-accent) !important;
    border-color: rgba(89, 215, 255, 0.30) !important;
}
.modal .dataTables_empty { text-align: center; color: var(--text-dim) !important; padding: 24px 12px !important; }
.modal table.dataTable.no-footer { border-bottom: 0 !important; }


/* ==========================================================================
   28 · MODALS · SPECIFICS
   ========================================================================== */

/* --- Register: step icons --- */
#registerModal .common-container { padding: 18px; }
#registerModal .icons-nav { list-style: none; display: flex; justify-content: space-between; gap: 10px; padding: 0; margin: 0 0 10px; }
#registerModal .icons-nav li { flex: 1 1 0; }
#registerModal .icons-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 82px;
    padding: 10px;
    border-radius: var(--r-lg);
    text-decoration: none;
    text-align: center;
    color: #8fc8ff;
    background: var(--panel-soft);
    border: 1px solid rgba(58, 142, 229, 0.10);
    box-shadow: var(--hair);
    transition: 0.25s var(--ease);
}
#registerModal .icons-link.active,
#registerModal .icons-link:hover {
    background: var(--card-blue-hi);
    border-color: rgba(73, 174, 255, 0.28);
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 149, 255, 0.14);
}
#registerModal .field-info {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    width: calc(100% - 2px);
    padding: 0.5rem;
    background: var(--bg-600);
    color: #fff;
    border: 1px solid var(--line-blue);
    border-radius: var(--r-xs);
    z-index: 10;
}
#registerModal .field-info-btn { position: absolute; top: 50%; right: 0.75rem; transform: translateY(-50%); color: var(--text-soft); cursor: pointer; }
#registerModal .field-info-btn:hover { color: var(--accent); }
#registerModal .field-info-btn:hover + .field-info { display: block; }
#registerModal img { display: block; max-width: 70%; margin: 0.75rem auto; }
#registerModal input[type="checkbox"] { accent-color: var(--accent); margin-right: 0.5rem; }

/* --- Login extras --- */
#loginModal img { display: block; margin: 0 auto 16px; max-width: 100px; height: auto; filter: drop-shadow(0 0 10px rgba(0, 153, 255, 0.14)); }
#loginModal .link { display: inline-block; margin-bottom: 14px; color: var(--cyan) !important; font-size: 14px; }
#loginModal .link:hover { color: #a8ebff !important; }
#loginModal h5 {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--panel-soft) !important;
    color: #fff;
    font-weight: 800;
    text-align: center;
    border: 1px solid rgba(58, 142, 229, 0.10);
}
#loginModal #openRegisterModal {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 11px 16px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-blue-2);
    background: var(--card-blue-hi) !important;
    color: #e7f6ff !important;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--hair);
    transition: all var(--t) var(--ease);
}
#loginModal #openRegisterModal:hover {
    background: var(--accent-grad) !important;
    color: var(--on-accent) !important;
    border-color: rgba(89, 215, 255, 0.35);
    box-shadow: var(--glow-blue);
}
#loginModal .support-link { text-align: center; font-size: 0.85rem; color: var(--text-soft); margin-top: 10px; }
#loginModal .support-link i { margin-right: 6px; }

/* --- Account: tabs / member menu --- */
#Account .modal-header h3 { min-height: 68px; gap: 10px; }
#Account .modal-header h3 i,
#Account h5 i, #Account h6 i { color: var(--cyan); }
#Account #memberMenu {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}
#Account #memberMenu .nav-link {
    border: 1px solid var(--line-blue-2);
    border-radius: var(--r-md);
    background: var(--panel-soft);
    color: #8fc8ff;
    padding: 10px 14px;
    font-weight: 700;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--hair);
    transition: all var(--t) var(--ease);
}
#Account #memberMenu .nav-link:hover,
#Account #memberMenu .nav-link.active {
    background: var(--accent-grad);
    color: var(--on-accent) !important;
    border-color: rgba(89, 215, 255, 0.35);
    box-shadow: 0 0 18px rgba(26, 167, 255, 0.18);
}
#Account .tab-content {
    background: linear-gradient(180deg, rgba(10, 24, 43, 0.84), rgba(6, 15, 28, 0.92));
    border: 1px solid var(--line-blue);
    border-radius: var(--r-xl);
    padding: 18px;
    box-shadow: var(--hair);
}
#Account h5, #Account h6 { color: #fff; font-weight: 800; margin-bottom: 14px; }
#Account .icon-button {
    position: absolute;
    right: 10px;
    top: 38px;
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-blue-2);
    color: #8fc8ff;
    text-decoration: none;
    z-index: 2;
    transition: all var(--t-fast) var(--ease);
}
#Account .icon-button:hover { background: rgba(26, 167, 255, 0.12); color: #fff; }
#Account #A_email, #Account #A_mobile { padding-right: 50px; }
#Account .zero-account td { text-align: center; color: var(--text-dim); padding: 18px 12px; }

/* member-menu modal (separate big tabbed modal) */
#memberMenuModal .modal-dialog { max-width: 600px; margin: 2rem auto; }
#memberMenuModal #memberTopMenu { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
#memberMenuModal #memberTopMenu img { width: 32px; height: 32px; opacity: 0.6; cursor: pointer; transition: opacity 0.2s; }
#memberMenuModal #memberTopMenu img.active { opacity: 1; }
#memberMenuModal #memberMenu,
#memberMenuModal #memberSubMenu {
    display: flex;
    justify-content: center;
    gap: 1rem;
    border-bottom: 1px solid var(--line-blue);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
#memberMenuModal .account-tab {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    color: var(--text-soft);
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: background 0.2s, color 0.2s;
}
#memberMenuModal .account-tab.active { background: var(--accent); color: #fff; }
#memberMenuModal .maintab { display: none; }
#memberMenuModal .maintab.active { display: block; }
#memberMenuModal .balance-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
#memberMenuModal .currentBalance p { margin: 0; font-size: 0.95rem; color: var(--text-soft); }
#memberMenuModal .currentBalance span { font-size: 1.1rem; font-weight: 800; color: #fff; }
#memberMenuModal input.can-disable[disabled] { background: var(--bg-500); color: var(--text-soft); }

/* --- Bonus types (Bitcoin / NowPayment) --- */
#Bitcoin .bonus-types .bonus-type,
#NowPayment .bonus-types .bonus-type,
#NowPayment .bonus-types .list-group-item {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    color: var(--text-blue);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-blue);
    cursor: pointer;
    transition: background 0.2s ease;
}
#Bitcoin .bonus-types { border-radius: var(--r-md); overflow: hidden; }
#NowPayment .bonus-types { border-radius: var(--r-lg); overflow: hidden; background: rgba(8, 21, 38, 0.72); border: 1px solid var(--line-blue); }
#Bitcoin .bonus-types .bonus-type:hover,
#NowPayment .bonus-types .bonus-type:hover,
#NowPayment .bonus-types .list-group-item:hover { background: rgba(20, 54, 94, 0.55); }
#Bitcoin .bonus-types .bonus-type.active { background: var(--accent); color: #fff; }
#NowPayment .confirmation,
#Bitcoin .confirmation,
.confirmation {
    width: 20px; height: 20px;
    margin-right: 0.5rem;
    border: 1px solid var(--line-blue-2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    transition: background 0.2s ease;
}
#NowPayment .bonus-types .bonus-type.active .confirmation {
    background-color: #1aa7ff;
    border-color: #59d7ff;
    box-shadow: 0 0 12px rgba(26, 167, 255, 0.24);
}
#NowPayment .bonus-types .bonus-type.active .confirmation,
.bonus-type.active .confirmation {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
#NowPayment #coinpayments-container,
#NowPayment .game-container {
    min-height: 80px;
    margin-top: 12px;
    padding: 14px;
    border-radius: var(--r-lg);
    background: rgba(8, 21, 38, 0.68);
    border: 1px solid var(--line-blue);
}

/* --- bankwire IRGATE: RTL --- */
#bankwire_transferIRGATE .modal-content { direction: rtl; }

/* --- payit: iframe + spinner --- */
#payitModal .modal-body { position: relative; min-height: 400px; padding: 0 !important; }
#payitModal #payitLoading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    background: linear-gradient(180deg, rgba(5, 12, 23, 0.96), rgba(4, 10, 20, 0.98));
    transition: opacity var(--t) var(--ease);
}
#payitModal #payitLoading > div { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }
#payitModal #payitLoading p { margin: 15px 0 0; color: #9ecff8; font-size: 14px; line-height: 1.7; max-width: 320px; }
#payitModal #payitLoading .payit-spinner {
    width: 44px; height: 44px;
    border: 3px solid rgba(59, 130, 246, 0.20);
    border-top-color: #3b82f6;
    border-right-color: #59d7ff;
    border-radius: 50%;
    animation: payitSpin 0.9s linear infinite;
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.12);
}
@keyframes payitSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
#payitModal #payitIframeContainer { height: 650px; overflow: hidden; border-radius: 0 0 var(--r-xl) var(--r-xl); background: rgba(255, 255, 255, 0.02); }
#payitModal #payitFrame { width: 100%; height: 100%; border: none; background: #fff; display: block; }

/* --- notification table --- */
#notification .modal-body { padding: 0 !important; }
#notification #notifData { overflow-x: auto; border-radius: 0 0 var(--r-xl) var(--r-xl); }
#notification #notifTable { width: 100% !important; margin: 0 !important; border-collapse: separate; border-spacing: 0; background: transparent !important; color: var(--text-blue); }
#notification #notifTable thead th {
    background: linear-gradient(180deg, rgba(13, 35, 63, 0.96), rgba(8, 23, 44, 0.98));
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 0 !important;
    border-bottom: 1px solid var(--line-blue) !important;
    padding: 14px 12px;
    white-space: nowrap;
}
#notification #notifTable tbody tr { background: rgba(7, 19, 35, 0.78) !important; transition: background 0.2s ease; }
#notification #notifTable tbody tr:nth-child(even) { background: rgba(10, 26, 47, 0.92) !important; }
#notification #notifTable tbody tr:hover { background: rgba(16, 43, 76, 0.96) !important; }
#notification #notifTable td { border-top: 1px solid var(--line-blue) !important; border-bottom: 0 !important; color: var(--text-blue) !important; padding: 12px; vertical-align: middle; font-size: 14px; }
#notification #notifTable th:first-child,
#notification #notifTable td:first-child { padding-left: 16px; }
#notification #notifTable th:last-child,
#notification #notifTable td:last-child { padding-right: 16px; }

/* --- activity modals --- */
#activityModalD .modal-dialog { max-width: 900px; }
#activityModalW .modal-dialog { max-width: 800px; }
#activityModalD .integration-body,
#activityModalW .integration-body { min-height: 200px; margin-bottom: 1rem; }


/* ==========================================================================
   29 · FULLSCREEN GAME IFRAME
   ========================================================================== */
.modal-dialog-custom { width: 100%; height: 100%; margin: 0; padding: 0; }
.modal-content-custom { height: 97%; min-height: 90%; border-radius: 0; }
.frameLayoutModal {
    width: calc(100% - 100px) !important;
    margin: 50px auto !important;
    background: #161a24;
    border-radius: var(--r-sm) !important;
    border-top: 1px solid transparent;
}
#iframeContainer,
#gameIFrame {
    width: 100% !important;
    height: 100% !important;
    border: none;
    text-align: center;
    background: #000;
}


/* ==========================================================================
   30 · UTILITIES
   ========================================================================== */
.wizard-step { display: none; }
.wizard-step.active { display: block; }
.progress { background: var(--surface-2); border-radius: var(--r-pill); height: 1.25rem; overflow: hidden; }
.progress-bar { background: var(--accent-grad); font-weight: 700; }
.text-light { color: var(--text) !important; }


/* ==========================================================================
   31 · RESPONSIVE
   ========================================================================== */

/* Tablet & down — collapse desktop rail, switch to mobile nav */
@media (max-width: 991.98px) {
    .aside-menu { display: none; }
    .main-content { margin-left: 0; width: 100%; margin-top: 84px; padding: var(--s-3) var(--s-4); }
    body { padding-bottom: var(--bottom-h); }

    .navbar .divider { display: none; }
    .navbar .nav-item { margin-bottom: 8px; }
    .navbar .btn,
    .lang-toggle-btn,
    #timeOnly { width: 100%; justify-content: center; }
    #toggleNotifications,
    .navbar .btn-danger.logged { width: 44px; }

    .cashier-dropdown { width: 100%; }
    .cashier-btn { width: 100%; min-width: 100%; justify-content: space-between; }
    .cashier-menu { width: 100%; min-width: 100%; border-radius: var(--r-lg); margin-top: 8px; }

    /* modals fill more of the viewport */
    #loginModal .modal-dialog, #registerModal .register-modal-dialog,
    #Account .modal-dialog, #Deposit .modal-dialog, #Withdraw .modal-dialog,
    #btc_withdraw .modal-dialog, #NowPayment .modal-dialog, #payitModal .modal-dialog {
        max-width: calc(100% - 20px);
        margin: 10px auto !important;
    }
    .modal-body { padding: 16px; }
    .modal .payment-section,
    .modal #paymentModal,
    .modal #drawOptions,
    .modal #depositOptions { padding: 14px; }

    footer { padding: 55px 0 24px; }
    #footerLinksSection { padding: 24px 16px; border-radius: var(--r-xl); }
    .provider-card { width: 120px; height: 72px; }

    #gameList > .container.mt-3 { flex-direction: column !important; }
    #gameList > .container.mt-3 .mr-3 {
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--line);
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
}

/* Phones */
@media (max-width: 767.98px) {
    .modal-header { padding: 14px 48px 14px 16px; }
    .modal-header h3, .modal-header h4, .modal-title { font-size: 19px; }
    .modal .section-header { font-size: 16px; margin-bottom: 12px; }
    .payment-method { min-height: 150px; border-radius: var(--r-lg); }
    .payment-method i.payment, .payment-method i.coin { width: 52px; height: 52px; margin-bottom: 12px; }
    .payment-method .name, .payment-method p.name { font-size: 14px; }

    #footerBrand a { padding: 14px 18px; }
    #footerBrand img { max-width: 140px; max-height: 54px; }
    #footerLinks a { width: calc(50% - 10px); text-align: center; padding: 12px 10px; }
    .footer-links-grid { grid-template-columns: 1fr; gap: 18px; }
    .provider-track { animation-duration: 28s; }
    .provider-card { width: 105px; height: 64px; margin: 0 8px; padding: 10px 12px; }
    .provider-card img { max-height: 28px; }

    #defaultListpopuler { flex-wrap: wrap !important; }
    #defaultListpopuler .game { flex: 0 0 calc(50% - 0.5rem) !important; max-width: calc(50% - 0.5rem) !important; }

    .telegram-live-chat { right: 14px; bottom: 78px; min-width: auto; padding: 10px 12px; gap: 8px; }
    .telegram-icon-wrap { width: 42px; height: 42px; flex: 0 0 42px; }
    .telegram-icon-wrap svg { width: 21px; height: 21px; }
    .telegram-chat-text strong { font-size: 13px; }
    .telegram-chat-text small { font-size: 11px; }
    .telegram-chat-badge { top: -6px; left: 10px; font-size: 10px; padding: 3px 7px; }

    #languageMenuWrapper { bottom: calc(var(--bottom-h) + 14px); left: 16px; }
    #payitModal #payitIframeContainer { height: 560px; }
}

/* Small phones */
@media (max-width: 575.98px) {
    #footerLinks { gap: 10px; }
    #footerLinks a { width: 100%; }
    #footerSocialMediaLinks .social-link { width: 44px; height: 44px; border-radius: var(--r-md); }
    #secureGamingSection p { font-size: 13px; }

    #searchAndOrder { flex-direction: column; align-items: stretch; }
    #searchAndOrder select#ordering { width: 100%; flex: 1 1 auto; }

    #Deposit .modal-dialog, #Withdraw .modal-dialog, #btc_withdraw .modal-dialog,
    #NowPayment .modal-dialog, #payitModal .modal-dialog {
        max-width: calc(100% - 14px);
        margin: 8px auto !important;
    }
    .modal-content { border-radius: var(--r-xl); }
    .payment-method { min-height: 140px; padding: 14px 10px; }
    .payment-method i.payment, .payment-method i.coin { width: 44px; height: 44px; }
    .payment-method .name, .payment-method p.name { font-size: 13px; line-height: 1.35; }

    .telegram-live-chat { padding: 10px; min-width: 0; }
    .telegram-chat-text { display: none; }
    .telegram-chat-badge { left: auto; right: -2px; top: -4px; }

    #payitModal #payitIframeContainer { height: 500px; border-radius: 0 0 var(--r-xl) var(--r-xl); }
}


/* ==========================================================================
   32 · REDUCED MOTION / ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* glass fallback */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .navbar, .my-top-nav, .aside-menu, .bottom-nav,
    .offcanvas.offcanvas-bottom, .cashier-menu, .lang-dropdown-menu,
    .modal-content { background: var(--bg-700); }
}