/* ═══════════════════════════════════════════════════════════════════════════
   Royals666 header — Turbo246 parity sheet
   ─────────────────────────────────────────────────────────────────────────
   Mined verbatim from turbo246.com's compiled CSS bundle
   (/static/css/main.0fe907a5.css). Applies the exact dimensions, font sizes,
   colors, and responsive breakpoints turbo246 uses on .header / .top_head /
   .bottom_head / .headerRight / .navbar / .btn_signin / .btn_signup.

   Royals666 already has the same class structure (sister sites). This sheet
   layers turbo246's exact pixel values on top, so the only visible difference
   between the two headers should be the logo image + the per-tenant brand
   variables (which whitelabel context controls separately).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --t246-primaryClr:  var(--wl-accent, #e7b008);
    --t246-headClr:     #101520;
    --t246-bodyClr:     #040b1b;
    --t246-secondaryClr:#182838;
    --t246-blackClr:    #000;
    --t246-whiteClr:    #fff;
    --t246-greenClr:    #27ae60;
    --t246-redClr:      #af2f2f;
    --t246-yellowClr:   #edbf2e;
    --t246-borderClr:   #3c424d;
}

/* ── Header container ──────────────────────────────────────────────────── */
.header {
    background: var(--t246-headClr) !important;
    box-shadow: 0 1px 3px 0 rgba(226,232,240,.1), 0 1px 2px -1px rgba(226,232,240,.1);
    padding: .25rem 0 !important;
    margin-top: 8px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
}
.header.aftrlgn { padding: .25rem 0 0 !important; }

/* ── Top row ───────────────────────────────────────────────────────────── */
.header .top_head { padding: 9px 0 !important; }

/* ── Logo: 125px desktop / 90px mobile (matches turbo246 exactly) ─────── */
.header .logo,
.header .logo img,
.header .spade-logo {
    max-width: 125px !important;
    height: auto;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ── Navbar links (Home / Casino / Exchange / Sports) ──────────────────── */
.header .navbar { padding: 0; }
.header .navbar .navbar-collapse { border-radius: 22px; }
.header .navbar .navbar-collapse .navbar-nav a,
.header .nav-link {
    align-items: center;
    color: var(--t246-whiteClr) !important;
    display: flex;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 8px !important;
    text-decoration: none;
}
.header .navbar .navbar-collapse .navbar-nav a:hover { opacity: .8; }
.header .navbar .navbar-collapse .navbar-nav a svg,
.header .nav-link svg {
    fill: var(--t246-whiteClr);
    height: 20px;
    margin-right: 5px;
    width: 20px;
}

/* ── Right cluster (search, icons, balance, deposit, profile) ────────── */
.header .headerRight {
    align-items: center;
    display: flex;
    fill: var(--t246-whiteClr);
    gap: 6px;
}

/* Search input (existing royals666 search box) */
.header .headerRight .searchbar,
.header [data-search-wrap] {
    margin-right: 1.15rem;
    width: 384px;
    position: relative;
}
.header .headerRight .searchbar input,
.header [data-search-wrap] input {
    background: transparent !important;
    border: 1px solid var(--t246-borderClr);
    border-radius: 7px;
    box-shadow: 1px 0 2px var(--t246-borderClr);
    color: var(--t246-whiteClr) !important;
    height: 36px;
    padding-left: 35px;
    width: 100%;
}

/* Compact head icons row (Sports / Support / Bonus) */
.header .headerRight .headicons,
.header .t246-header-right-buttons .t246-hbtn {
    align-items: center;
    color: var(--t246-whiteClr);
    display: flex;
    font-size: 14px;
    font-weight: 600;
    margin-left: 6px;
    margin-right: 0;
    height: 36px;
    padding: 0 8px;
    border-radius: 6px;
    transition: background .15s;
}
.header .headerRight .headicons img,
.header .t246-header-right-buttons .t246-hbtn i {
    height: 20px;
    width: 20px;
    margin-right: 6px;
    font-size: 18px;
}
.header .headerRight .headicons:hover,
.header .t246-header-right-buttons .t246-hbtn:hover {
    background: rgba(255,255,255,.06);
}

/* Balance pill (when logged in) */
.header .headerRight .balance-web ul,
.header .turbo-balance-pill {
    align-items: center;
    border: 1px solid var(--t246-borderClr);
    border-radius: 7px;
    box-shadow: 1px 0 2px var(--t246-borderClr);
    color: var(--t246-whiteClr) !important;
    display: flex;
    height: 36px;
    padding: 3px;
}
.header .headerRight .balance-web ul li {
    border-right: 1px solid var(--t246-whiteClr);
    font-size: .85rem;
    padding: 0 .75rem;
}
.header .headerRight .balance-web ul li:last-child { border-right: 0; }

/* Deposit button (green, primary call-to-action) */
.header .headerRight a.deposit,
.header .headerRight button.deposit,
.header .headerRight .turbo-deposit-btn {
    background: var(--t246-greenClr) !important;
    border-radius: 5px !important;
    color: var(--t246-whiteClr) !important;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    height: 36px;
    margin: 0 6px;
    padding: 0 14px;
    text-decoration: none;
    border: 0;
}

/* Sign In / Sign Up (logged-out CTAs) — match turbo246 spec */
.header .headerRight .btn_signin,
.header .btn_signin {
    background-color: transparent !important;
    border: 1.5px solid var(--t246-primaryClr) !important;
    color: var(--t246-primaryClr) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    height: 32px !important;
    line-height: 13px !important;
    padding: 8px 14px !important;
    width: auto !important;
    min-width: 64px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.header .headerRight .btn_signin:hover,
.header .btn_signin:hover {
    background-color: var(--t246-primaryClr) !important;
    color: #733f12 !important;
}
.header .headerRight .btn_signup,
.header .btn_signup {
    background-color: var(--t246-primaryClr) !important;
    border: 1.5px solid var(--t246-primaryClr) !important;
    color: #733f12 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    height: 32px !important;
    line-height: 13px !important;
    padding: 8px 14px !important;
    width: auto !important;
    min-width: 64px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.header .headerRight .btn_signup:hover,
.header .btn_signup:hover {
    background-color: #b38e23 !important;
}

/* Avatar / profile dropdown trigger */
.header .headerRight .dropdown .btn,
.header .turbo-user-dropdown .dropdown-toggle {
    background: transparent;
    border: 0;
    padding: 0;
}
.header .headerRight .dropdown .dropdown-menu { min-width: 250px; }

/* ── Bottom row (provider/category nav pills) ─────────────────────────── */
.header .bottom_head {
    height: 40px;
    margin: 5px 0 0 !important;
}
.header .bottom_head ul {
    align-items: center;
    display: flex;
    font-size: 16px !important;
    height: 40px;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding-left: 0;
    margin: 0;
}
.header .bottom_head ul::-webkit-scrollbar,
.header .bottom_head ul::-webkit-scrollbar-track,
.header .bottom_head ul::-webkit-scrollbar-thumb {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}
.header .bottom_head ul li {
    display: inline-block;
    padding: 0 6px !important;
    position: relative;
}
.header .bottom_head ul li a {
    border: 1px solid var(--t246-primaryClr);
    border-radius: .25rem;
    color: var(--t246-primaryClr);
    cursor: pointer;
    display: block;
    font-weight: 600;
    padding: 2px 5px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.header .bottom_head ul li a:hover,
.header .bottom_head ul li a.active,
.header .bottom_head ul li a[aria-current="page"] {
    background: var(--t246-primaryClr);
    color: var(--t246-headClr);
}

/* ── Responsive breakpoints (verbatim from turbo246) ──────────────────── */
@media screen and (max-width: 1199.98px) {
    .header .headerRight .searchbar { width: 280px; }
}
@media screen and (max-width: 991.98px) {
    .header .bottom_head ul { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .header .headerRight .searchbar { display: none; }
}
@media screen and (max-width: 767.98px) {
    .header .logo,
    .header .logo img,
    .header .spade-logo { max-width: 90px !important; }
    /* 2026-05-21 — mobile pill strip tightened per user spec. */
    .header .bottom_head { height: 30px; }
    .header .bottom_head ul { font-size: 11px !important; height: 30px; }
    .header .bottom_head ul li { padding: 0 3px !important; }
    .header .bottom_head ul li a { padding: 1px 5px; font-size: 10.5px; border-radius: 4px; }
    .header .headerRight .balance-web ul,
    .header .turbo-balance-pill { height: 30px; font-size: 11px; }
    .header .headerRight .btn_signin,
    .header .btn_signin { width: auto !important; min-width: 56px; font-size: 12px !important; padding: 6px 12px !important; }
    .header .headerRight .btn_signup,
    .header .btn_signup { width: auto !important; min-width: 56px; font-size: 12px !important; padding: 6px 12px !important; }
    .header .headerRight a.deposit,
    .header .turbo-deposit-btn { padding: 0 10px; height: 30px; font-size: 12px; }
}
@media screen and (max-width: 575.98px) {
    /* 2026-05-21 — smaller provider pills on mobile. */
    .header .bottom_head { height: 30px; }
    .header .bottom_head ul { font-size: 10px !important; height: 30px; }
    .header .bottom_head ul li { padding: 0 2px !important; }
    .header .bottom_head ul li a { padding: 2px 6px; font-size: 10px; border-radius: 4px; min-height: 22px; line-height: 1.3; }
}
@media screen and (max-width: 374.98px) {
    .header .headerRight .funds ul li a { font-size: 11px; padding: 0 6px; }
}

/* Sportsbook & Exchange mobile logo sizing */
@media screen and (max-width: 767.98px) {
    body.exchange-page .header .logo img,
    body.sports-page .header .logo img,
    body[data-route="exchange"] .header .logo img,
    body[data-route="sports"] .header .logo img {
        max-width: 60px !important;
        height: auto !important;
    }
}