/* ============================================================================
Turbo theme overrides — patches turbo246's main.css for our static clone:
- Slick slider has no JS, so .slick-list must clip to single slide
- Tablet (768px) had 471px horizontal overflow from .bottom_head + .headerRight
- Mobile spacing tweaks for header/login button
============================================================================ */
/* Header layout: hamburger LEFT, logo LEFT (extreme left, 66px = +10%), [center], login RIGHT — header 70px (original) */
.top_head .d-flex.justify-content-between { gap: 0; align-items: center !important; min-height: 62px; }
.top_head .d-flex.justify-content-between .turbo-mobile-menu-btn { order: 1; display: inline-flex; align-items: center; justify-content: center; }
.top_head .d-flex.justify-content-between .logo { order: 2; display: inline-flex; align-items: center; }
.top_head .d-flex.justify-content-between .middle-part { order: 3; }
.top_head .d-flex.justify-content-between .headerRight {
order: 4;
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.top_head .d-flex.justify-content-between .headerRight .btn_signin,
.top_head .d-flex.justify-content-between .headerRight a.btn_signin {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
padding: 10px 18px;
margin: 0;
}
/* removed — superseded by logo-stack rules */
@media (max-width: 575.98px) {
/* removed — superseded by logo-stack rules */
.top_head .d-flex.justify-content-between .headerRight .btn_signin { padding: 9px 16px; font-size: 13px; }
}
/* Slider — show only the first slide since no slick.js is running.
Let the banner image's natural aspect ratio (1280:514 ≈ 2.49:1) drive the height.
This matches turbo246's actual behavior — they don't force any aspect-ratio. */
.mainBanner, .top_banner_sec, .banner-slider { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
.mainBanner .container, .mainBanner .container-fluid { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }
.slick-slider { width: 100% !important; max-width: 100% !important; }
.slick-list { overflow: hidden !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; height: auto !important; }
.slick-track { display: flex !important; transform: translate3d(0, 0, 0) !important; width: 100% !important; height: auto !important; }
.slick-track > .slick-slide { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; }
.slick-track > .slick-slide:not(:first-child) { display: none !important; }
.slick-track > .slick-slide:first-child { display: block !important; }
.slick-slide img, .slick-slide picture, .slick-slide a img,
.mainBanner img, .top_banner_sec img {
width: 100% !important;
height: auto !important;
max-height: none !important;
max-width: 100% !important;
object-fit: contain !important;
display: block !important;
}
/* Bottom_head — make the in-play sport-nav row horizontally scrollable on narrow viewports */
.bottom_head .col-12 { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.bottom_head ul { display: flex !important; flex-wrap: nowrap !important; gap: 0.5rem; padding: 0.4rem 0.75rem; margin: 0; list-style: none; min-width: max-content; }
.bottom_head ul li { flex-shrink: 0; }
.bottom_head ul a { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
/* Top exchangeitems strip (gold pills) — make scrollable too at narrower widths */
.exchangeitems, .exchangeitems-row, .top_head .row { overflow-x: visible; }
@media (max-width: 991px) {
.top_head .col-12, .bottom_head .col-12 { overflow-x: auto; }
}
/* HeaderRight — let it shrink/scroll on tablet rather than push viewport */
.headerRight { flex-wrap: wrap; gap: 0.4rem; max-width: 100%; }
@media (max-width: 991px) {
.headerRight { gap: 0.3rem; }
.headerRight .language-option, .headerRight .searchbar { display: none !important; }
.headerRight .headicons.support { display: none; }
}
/* Social-icons sticky widget — hide labels on smaller screens to avoid spillover */
.social-icons { position: fixed !important; right: 16px !important; top: calc(33.333% + 113px) !important; margin-top: 15px !important; z-index: 50 !important; opacity: .7 !important; transition: opacity .18s ease !important; }
@media (max-width: 991px) {
.social-icons li a span, .social-icons li .label { display: none; }
.social-icons li a { width: 36px; height: 36px; padding: 0; }
}
/* Mobile login/logo padding */
@media (max-width: 575px) {
.header .logo img { height: 34px !important; }
.top_head { padding: 0.4rem 0; }
.bottom_head ul { padding: 0.3rem 0.5rem; }
}
/* Bound any rogue children that weren't supposed to extend past viewport */
body { overflow-x: hidden; }
.container, .container-fluid { max-width: 100% !important; }
/* Casino game tile section — make sure cards stay grid even on narrow viewports */
@media (max-width: 575px) {
.casino_games, .Live-Casino-listing { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 576px) and (max-width: 991px) {
.casino_games, .Live-Casino-listing { grid-template-columns: repeat(3, 1fr) !important; }
}
/* ============================================================================
Extracted from app.blade.php — critical classes preserved
============================================================================ */
:root {
--primaryClr: #B08A4B;
--primaryClrLight: #E8CC85;
--secondaryClr: #182838;
--accentClr: #D8B870;
--whiteClr: #fff;
--headClr: #111827;
--bodyBg: var(--brand-bg);
}
/* Hero slider */
.hero-slider { position: relative; width: 100%; aspect-ratio: 16/6.4; border-radius: .75rem; overflow: hidden; background: #000; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.hero-slide.active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; }
.hero-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.4); border: 0; cursor: pointer; transition: background .15s, transform .15s; padding: 0; }
.hero-dot.active { background: var(--primaryClr); transform: scale(1.2); }
.hero-dot:hover { background: rgba(255,255,255,.7); }
/* Casino games grid & game_box */
.casino_games { display: grid !important; gap: 10px !important; grid-template-columns: repeat(2, 1fr) !important; }
@media (min-width: 576px) { .casino_games { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 992px) { .casino_games { grid-template-columns: repeat(4, 1fr) !important; } }
.game_box .game_box_link { display: block; position: relative; aspect-ratio: 16/10; border-radius: .5rem; overflow: hidden; background: #1a1a1a; border: 1px solid rgba(255,255,255,.05); transition: transform .15s, box-shadow .15s; text-decoration: none; }
.game_box .game_box_link:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 32px -8px rgba(231,176,8,.4); border-color: var(--primaryClr); }
.game_box .game_tile_img { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.game_box .game_tile_img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game_box .game-section { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; }
.game_box .game-section p { background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 60%, transparent 100%) !important; color: #fff !important; font-size: .82rem !important; font-weight: 600; padding: 1.5rem .65rem .55rem !important; border-radius: 0 !important; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 !important; }
.game_box .casino_overlay { display: none; }
.game_box .game_box_link:hover .casino_overlay { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; background: rgba(231,176,8,.4); z-index: 3; color: #fff; font-size: 2.5rem; }
/* Sport tiles */
.main_card.sport-tiles { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 1rem; flex-wrap: nowrap !important; }
.sport-tile { display: flex; align-items: center; gap: .85rem; padding: 1.25rem 1rem; background: linear-gradient(135deg, var(--tile-tint)22 0%, transparent 100%); border: 1px solid var(--tile-tint)33; border-radius: 1rem; transition: transform .15s, border-color .15s; }
.sport-tile:hover { transform: translateY(-3px); border-color: var(--tile-tint)88; }
.sport-tile .sport-tile-icon { width: 48px; height: 48px; border-radius: .75rem; background: var(--tile-tint); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px var(--tile-tint)33; }
.sport-tile .sport-tile-icon i { color: #fff; font-size: 1.4rem; }
.sport-tile .sport-tile-pre { display: block; font-size: .68rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 2px; }
.sport-tile .sport-tile-name { color: #fff; font-weight: 700; font-size: 1.05rem; }
/* Provider pills */
.provider-pills { background: #0c1427; padding: 6px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-bottom: 1px solid rgba(231,176,8,.1); }
.provider-pills::-webkit-scrollbar { display: none; }
.provider-pills-inner { display: flex !important; gap: 8px !important; padding: 0 16px !important; max-width: 1400px; margin: 0 auto; white-space: nowrap; justify-content: flex-start !important; }
/* Outlined gold tab — px-7 py-3.5 rounded-lg border #B08A4B text-[15px] */
.provider-pill {
display: inline-flex !important;
align-items: center !important;
padding: 14px 28px !important;
background: #0A0E1A !important;
color: #B08A4B !important;
font-weight: 700 !important;
font-size: 15px !important;
letter-spacing: .025em !important;
border-radius: 8px !important;
text-decoration: none !important;
flex-shrink: 0 !important;
text-transform: uppercase !important;
line-height: 1 !important;
border: 1px solid #B08A4B !important;
transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
}
.provider-pill:hover, .provider-pill:focus-visible {
background: rgba(201,162,39,.10) !important;
color: #E8CC85 !important;
border-color: #E8CC85 !important;
outline: none;
}
.provider-pill:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
@media (max-width: 768px) { .provider-pill { padding: 12px 22px !important; font-size: 14px !important; } }
/* Row layout: left-aligned, comfortable gap, scrolls horizontally on small screens */
.provider-pills-inner { gap: 10px !important; justify-content: flex-start !important; }
/* Category tabs — match Turbo246 outlined gold pill style */
.category-tabs { background: var(--bodyBg); padding: 12px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs-inner { display: flex; gap: 10px; padding: 0 12px; max-width: 1400px; margin: 0 auto; white-space: nowrap; justify-content: flex-start; }
.category-tab {
display: inline-flex;
align-items: center;
padding: 9px 20px;
background: #0A0E1A;
color: #B08A4B;
font-weight: 700;
font-size: 13px;
letter-spacing: .055em;
text-transform: uppercase;
line-height: 1;
border: 1.5px solid #B08A4B;
border-radius: 9999px;
text-decoration: none;
flex-shrink: 0;
box-shadow: 0 1px 4px rgba(0,0,0,.35), inset 0 0 0 1px rgba(212,175,55,.05);
transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.category-tab i { color: #B08A4B; margin-right: 6px; font-size: 13px; }
.category-tab:hover,
.category-tab:focus-visible {
background: rgba(212,175,55,.08);
color: #E8CC85;
border-color: #E8CC85;
box-shadow: 0 3px 10px rgba(212,175,55,.18), inset 0 0 0 1px rgba(212,175,55,.14);
transform: translateY(-1px);
outline: none;
}
.category-tab:hover i,
.category-tab:focus-visible i { color: #E8CC85; }
.category-tab.active {
background: #B08A4B;
color: #0A0E1A;
border-color: #B08A4B;
box-shadow: 0 4px 14px rgba(212,175,55,.3);
}
.category-tab.active i { color: #0A0E1A; }
@media (max-width: 768px) {
.category-tab { padding: 8px 16px; font-size: 12px; letter-spacing: .05em; }
.category-tab i { font-size: 12px; }
}
/* TopCategories nav-tabs (Row 2: casino category strip) — text-only + gold-underline active */
.TopCategories { padding: 14px 0 8px !important; margin-bottom: 20px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; }
.TopCategories::-webkit-scrollbar { display: none; }
.TopCategories .nav-tabs { display: flex !important; flex-wrap: nowrap !important; gap: 16px !important; border: 0 !important; padding: 0 16px !important; margin: 0 !important; white-space: nowrap; }
.TopCategories .nav-tabs .nav-item { margin: 0 !important; flex-shrink: 0; }
.TopCategories .nav-tabs .nav-link {
position: relative;
display: inline-flex !important;
align-items: center;
padding: 10px 14px !important;
background: transparent !important;
color: #FFFFFF !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
line-height: 1 !important;
border: 0 !important;
border-radius: 0 !important;
text-decoration: none !important;
box-shadow: none !important;
cursor: pointer;
transition: color .18s ease;
white-space: nowrap !important;
}
.TopCategories .nav-tabs .nav-link::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 2px;
height: 2px;
background: transparent;
border-radius: 2px;
transition: background-color .18s ease;
}
.TopCategories .nav-tabs .nav-link:hover,
.TopCategories .nav-tabs .nav-link:focus-visible {
color: #E8CC85 !important;
outline: none;
}
.TopCategories .nav-tabs .nav-link.active,
.TopCategories .nav-tabs .nav-link[aria-selected="true"] {
color: #B08A4B !important;
}
.TopCategories .nav-tabs .nav-link.active::after,
.TopCategories .nav-tabs .nav-link[aria-selected="true"]::after {
background: #B08A4B;
}
@media (max-width: 768px) {
.TopCategories .nav-tabs .nav-link { padding: 10px 12px !important; font-size: 13px !important; }
.TopCategories .nav-tabs .nav-link::after { left: 12px; right: 12px; }
}
/* Social icons */
/* removed conflicting non-important rule */
.social-icons ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.social-icons li a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-size: 1.1rem; box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: transform .15s; }
.social-icons li a:hover { transform: scale(1.1); color: #fff; }
.social-icons .si-wa { background: #25d366; }
.social-icons .si-tg { background: #229ed9; }
.social-icons .si-em { background: #ef4444; }
.social-icons .si-ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; }
.social-icons .si-fb { background: #1877f2; border-radius: 10px; }
@media (max-width: 768px) {
/* removed conflicting tablet rule */
.social-icons li a { width: 34px; height: 34px; font-size: .95rem; }
}
/* Auth card */
.turbo-auth-card { max-width: 440px; margin: 3rem auto; padding: 2rem; background: var(--secondaryClr); border: 1px solid hsla(0,0%,100%,.05); border-radius: 1.25rem; }
.turbo-auth-card h2 { color: #fff; font-weight: 700; margin: 0 0 .35rem; text-align: center; }
.turbo-auth-card .subtle { color: #94a3b8; font-size: .88rem; text-align: center; margin: 0 0 1.5rem; }
.turbo-auth-card label { display: block; color: #cbd5e1; font-size: .8rem; font-weight: 600; margin-bottom: .35rem; }
.turbo-auth-card .form-input { width: 100%; padding: .75rem 1rem; background: #0d1424; border: 1px solid rgba(231,176,8,.2); border-radius: .5rem; color: #fff; font-size: .9rem; margin-bottom: 1rem; }
.turbo-auth-card .form-input:focus { border-color: var(--primaryClr); box-shadow: 0 0 0 3px rgba(231,176,8,.15); outline: none; }
.turbo-auth-card .auth-submit { width: 100%; background: linear-gradient(135deg, var(--primaryClr), var(--primaryClrLight)); color: #0d0d0d; font-weight: 700; padding: .85rem; border: 0; border-radius: .5rem; cursor: pointer; }
.turbo-auth-card .auth-alert { background: rgba(220,38,38,.15); border: 1px solid rgba(220,38,38,.4); color: #fecaca; padding: .75rem 1rem; border-radius: .5rem; font-size: .85rem; margin-bottom: 1rem; }
.turbo-auth-card .auth-link { display: block; text-align: center; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.05); color: #94a3b8; font-size: .85rem; }
.turbo-auth-card .auth-link a { color: var(--primaryClr); font-weight: 600; }
/* ============================================================================
Mobile header fixes — hamburger, compact headerRight, drawer nav
============================================================================ */
/* Hamburger button (visible only <768px) */
.turbo-mobile-menu-btn { display:none; background:none; border:none; color:#B08A4B; font-size:1.35rem; padding:.25rem .5rem; cursor:pointer; }
@media (max-width: 767.98px) {
.turbo-mobile-menu-btn { display:inline-flex; align-items:center; justify-content:center; }
.header .logo img { height: 32px !important; max-width: 140px; }
.top_head { padding: .35rem 0; }
.top_head .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
}
/* Compact headerRight on mobile */
.turbo-balance-pill {
display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .8rem; border-radius:.5rem;
background:rgba(255,255,255,.06); color:#fff; font-size:.85rem; font-weight:600; margin-left:.4rem;
}
.turbo-user-dropdown { display:inline-block; margin-left:.4rem; }
@media (max-width: 575.98px) {
.turbo-balance-pill { padding: .35rem .5rem; font-size: .72rem; gap: .25rem; margin-left: .25rem; }
.turbo-balance-pill i { font-size: .8rem; }
.turbo-user-dropdown { margin-left: .25rem; }
.turbo-user-dropdown .dropdown-toggle { padding: .35rem .5rem; font-size: .75rem; }
.turbo-deposit-btn { padding: .35rem .5rem; font-size: .75rem; }
.headerRight .btn_signin { padding: .35rem .6rem; font-size: .8rem; }
}
/* Mobile drawer */
.turbo-mobile-drawer { position: fixed; inset: 0; z-index: 1100; display: none; }
.turbo-mobile-drawer.is-open { display: block; }
.turbo-mobile-drawer .tmd-backdrop { position: absolute; inset: 0; background: rgba(4,11,27,.75); backdrop-filter: blur(4px); }
.turbo-mobile-drawer .tmd-panel {
position: absolute; left: 0; top: 0; bottom: 0; width: min(320px, 85vw);
background: #0c1427; border-right: 1px solid rgba(231,176,8,.2);
display: flex; flex-direction: column; overflow-y: auto;
animation: tmd-slide-in 220ms cubic-bezier(.2,.8,.3,1);
}
@keyframes tmd-slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.turbo-mobile-drawer .tmd-head {
display: flex; align-items: center; justify-content: space-between; padding: 1rem;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.turbo-mobile-drawer .tmd-brand { color: #B08A4B; font-weight: 700; font-size: 1.1rem; }
.turbo-mobile-drawer .tmd-close { background: rgba(255,255,255,.06); color: #cfd6e1; border: 0; border-radius: 8px; width: 36px; height: 36px; cursor: pointer; font-size: 1rem; }
.turbo-mobile-drawer .tmd-close:hover { background: rgba(255,255,255,.12); color: #fff; }
/* Drawer nav links */
.turbo-mobile-drawer .tmd-nav { padding: .5rem 0; }
.turbo-mobile-drawer .tmd-nav a {
display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; color: #cbd5e1;
text-decoration: none; font-size: .9rem; font-weight: 600; border-left: 3px solid transparent;
}
.turbo-mobile-drawer .tmd-nav a:hover, .turbo-mobile-drawer .tmd-nav a:focus { background: rgba(231,176,8,.08); color: #fff; border-left-color: #B08A4B; outline: none; }
.turbo-mobile-drawer .tmd-nav a i { color: #B08A4B; width: 20px; text-align: center; }
/* Drawer user section */
.turbo-mobile-drawer .tmd-user { padding: 1rem; border-top: 1px solid rgba(255,255,255,.06); }
.turbo-mobile-drawer .tmd-user-name { color: #fff; font-weight: 700; font-size: 1rem; margin-bottom: .15rem; }
.turbo-mobile-drawer .tmd-user-balance { color: #B08A4B; font-weight: 700; font-size: .9rem; margin-bottom: .75rem; }
.turbo-mobile-drawer .tmd-user-actions { display: flex; gap: .5rem; margin-bottom: .75rem; }
.turbo-mobile-drawer .tmd-user-links { display: flex; flex-direction: column; gap: .4rem; }
.turbo-mobile-drawer .tmd-user-links a { color: #94a3b8; text-decoration: none; font-size: .85rem; padding: .3rem 0; }
.turbo-mobile-drawer .tmd-user-links a:hover { color: #B08A4B; }
/* Drawer guest section */
.turbo-mobile-drawer .tmd-guest { padding: 1rem; border-top: 1px solid rgba(255,255,255,.06); }
/* Drawer buttons */
.tmd-btn { display: inline-block; padding: .55rem 1rem; border-radius: .5rem; font-weight: 700; font-size: .85rem; text-decoration: none; text-align: center; }
.tmd-btn-gold { background: linear-gradient(135deg, #B08A4B, #D8B870); color: #0d0d0d !important; }
.tmd-btn-outline { background: transparent; color: #B08A4B !important; border: 1px solid rgba(231,176,8,.35); }
.tmd-btn-outline:hover { background: rgba(231,176,8,.1); }
/* Footer grid */
.footer-section { background: var(--headClr); margin-top: 3rem; padding: 2.5rem 0 1rem; color: #cbd5e1; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; max-width: 1400px; margin: 0 auto; padding: 0 1rem 1.5rem; }
.footer-grid .footer-col h3 { color: var(--primaryClr); font-size: .9rem; font-weight: 700; margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .08em; }
.footer-grid .footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-grid .footer-col ul li { margin-bottom: .55rem; }
.footer-grid .footer-col ul li a { color: #cbd5e1; font-size: .82rem; }
.footer-grid .footer-col ul li a:hover { color: var(--primaryClr); }
.footer-grid .footer-col.badges { grid-column: 1 / -1 !important; border-top: 1px solid rgba(255,255,255,.06); padding-top: 1.25rem !important; margin-top: .5rem !important; }
.footer-grid .footer-col.badges .badge-item { background: #fff; color: #0d0d0d; padding: .35rem .65rem; border-radius: 4px; font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .35rem; }
.footer-bottom { max-width: 1400px; margin: 0 auto; padding: 1rem; border-top: 1px solid rgba(255,255,255,.07); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-bottom .copyright { color: #64748b; font-size: .76rem; }
.footer-bottom .footer-socials { display: flex; gap: .5rem; }
.footer-bottom .footer-socials a { color: #94a3b8; font-size: 1.05rem; }
.footer-bottom .footer-socials a:hover { color: var(--primaryClr); }
.footer-disclaimer { max-width: 1400px; margin: 0 auto; padding: 1rem; color: rgba(226,232,240,.5); font-size: .72rem; line-height: 1.5; text-align: justify; }
/* ============================================================================
HEADER — exact match to turbo246.com
============================================================================ */
.header, .beforeheader {
background: #111827 !important;
}
.top_head {
background: transparent !important;
padding: .5rem 0;
}
.header .logo img {
max-height: 48px !important;
height: auto;
width: auto;
object-fit: contain;
}
.headerRight
.headerRight .btn_signin:hover {
background: rgba(231,176,8,.12) !important;
}
/* ============================================================================
SCROLL & LAYOUT STABILITY PATCHES (2026-05-02)
- Kill smooth scroll to prevent retained-scroll / hash-jump issues
- Sticky header z-index safety
- Hero slider min-height prevents layout shift while image loads
============================================================================ */
/* 1. Disable smooth scroll globally */
html, body { scroll-behavior: auto !important; }
/* 2. Sticky header must sit above everything */
.header, .beforeheader { position: sticky !important; top: 0 !important; z-index: 9999 !important; }
/* 3. Hero slider must never collapse below 180px while image loads */
.mainBanner, .top_banner_sec, .banner-slider, .slick-list, .slick-slide { min-height: 180px !important; }
@media (min-width: 768px) {
.mainBanner, .top_banner_sec, .banner-slider, .slick-list, .slick-slide { min-height: 260px !important; }
}
/* 4. Logo must never overflow header height */
.logo img, header img[alt*="logo"], .header img[src*="logo"] {
max-height: 60px !important;
height: auto !important;
width: auto !important;
object-fit: contain !important;
}
/* 5. Featured games grid must keep space while fetching */
.featured-games-grid { min-height: 200px !important; }
/* ============================================================================
TOP CATEGORIES — exact match to turbo246.com tab system
============================================================================ */
.TopCategories { background: var(--brand-bg); padding: 0; }
.TopCategories .nav-tabs {
display: flex;
gap: 0;
padding: 0 .75rem;
margin: 0 auto;
max-width: 1400px;
list-style: none;
border-bottom: 1px solid rgba(255,255,255,.06);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
flex-wrap: nowrap;
}
.TopCategories .nav-tabs::-webkit-scrollbar { display: none; }
.TopCategories .nav-item { flex-shrink: 0; }
.TopCategories .nav-link {
display: block;
padding: .75rem 1rem;
color: #9ca3af;
font-size: .82rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
border: 0;
border-bottom: 2.5px solid transparent;
background: transparent;
cursor: pointer;
white-space: nowrap;
transition: color .15s;
}
.TopCategories .nav-link:hover { color: #d1d5db; }
.TopCategories .nav-link.active {
color: #B08A4B;
border-bottom-color: #B08A4B;
background: transparent;
}
/* Tab content panes */
.TopCategories .tab-content { padding: .75rem 0; }
.TopCategories .tab-pane { display: none; }
.TopCategories .tab-pane.active { display: block; }
.TopCategories .tab-pane.show { opacity: 1; }
/* ============================================================================
CASINO GAME CARDS — exact match to turbo246.com
============================================================================ */
.casino-game-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
padding: 0 8px !important;
max-width: 1400px !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
@media (min-width: 768px) { .casino-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 1024px) { .casino-game-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }
.casino-game-card {
display: flex !important;
flex-direction: column !important;
position: relative !important;
border-radius: 8px !important;
overflow: hidden !important;
background: #1A1F2E !important;
border: 0 !important;
text-decoration: none !important;
box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1) !important;
transition: transform .18s ease, box-shadow .18s ease !important;
}
.casino-game-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px -6px rgba(0,0,0,.55);
}
.casino-game-card img {
width: 100% !important;
height: 145px !important;
aspect-ratio: auto !important;
object-fit: cover !important;
display: block !important;
background: #0f1421 !important;
}
.casino-game-card .live-badge {
position: absolute;
top: 8px;
left: 8px;
background: #dc2626;
color: #fff;
font-size: .6rem;
font-weight: 900;
padding: 2px 7px;
border-radius: 3px;
letter-spacing: .1em;
z-index: 2;
animation: livePulse 1.5s ease-in-out infinite;
}
.casino-game-card .game-title-bar {
background: #1A1F2E !important;
padding: 10px 12px !important;
color: #FFFFFF !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: -.01em !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.2 !important;
}
/* Active / focused card — neon blue-silver glow + white play overlay */
.casino-game-card.is-active {
box-shadow:
0 0 0 1.5px rgba(192, 222, 255, .85),
0 0 18px rgba(140, 200, 255, .55),
0 0 38px rgba(120, 180, 255, .35),
0 8px 24px rgba(0, 0, 0, .55);
transform: translateY(-1px);
}
.casino-game-card.is-active img { filter: blur(2px) brightness(.6); }
.casino-game-card.is-active .game-title-bar { color: rgba(255,255,255,.55); }
.casino-game-card .play-overlay {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 3;
}
.casino-game-card.is-active .play-overlay { display: flex; }
.casino-game-card .play-overlay::before {
content: "";
width: 64px; height: 64px;
border-radius: 9999px;
border: 2.5px solid rgba(255,255,255,.92);
background: rgba(0,0,0,.18);
backdrop-filter: blur(2px);
box-shadow: 0 0 24px rgba(140,200,255,.5);
}
.casino-game-card .play-overlay::after {
content: "";
position: absolute;
width: 0; height: 0;
border-left: 18px solid #ffffff;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
margin-left: 4px;
filter: drop-shadow(0 0 6px rgba(140,200,255,.4));
}
/* ============================================================================
MOBILE BOTTOM NAV — exact match to turbo246.com
============================================================================ */
@media (max-width: 767.98px) {
.footer-menu {
background: rgba(17, 24, 39, 0.95) !important;
backdrop-filter: blur(12px);
border-top: 1px solid rgba(255,255,255,.04);
height: 56px;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.footer-menu ul {
height: 100%;
align-items: center;
}
.footer-menu ul li {
flex: 1;
display: flex;
justify-content: center;
}
.footer-menu ul li a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
color: #6b7280;
font-size: .6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
text-decoration: none;
padding: 4px 0;
}
.footer-menu ul li a i {
font-size: 1.1rem;
margin-bottom: 1px;
}
.footer-menu ul li a.active,
.footer-menu ul li a:hover {
color: #B08A4B;
}
.footer-menu ul li a.active i {
filter: drop-shadow(0 2px 4px rgba(231,176,8,.4));
}
}
position: fixed !important;
right: 16px !important;
top: calc(33.333% + 113px) !important;
z-index: 50 !important;
opacity: .7 !important;
transition: opacity .18s ease !important;
}
.social-icons ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.social-icons li { margin: 0 !important; }
.social-icons li a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 43px !important;
height: 43px !important;
border-radius: 9999px !important;
background: rgba(0,0,0,.60) !important;
border: 1px solid rgba(201,162,39,.40) !important;
-webkit-backdrop-filter: blur(12px) !important;
backdrop-filter: blur(12px) !important;
color: #B08A4B !important;
font-size: 18px !important;
transition: border-color .18s ease, color .18s ease, transform .18s ease, background .18s ease !important;
text-decoration: none !important;
box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
}
.social-icons:hover { opacity: 1 !important; }
.social-icons li a:hover,
.social-icons li a:focus-visible {
border-color: #B08A4B !important;
color: #E8CC85 !important;
background: rgba(0,0,0,.75) !important;
transform: translateX(-2px) !important;
outline: none !important;
}
.social-icons li a i {
font-size: 22px !important;
line-height: 1 !important;
}
.social-icons li a svg {
width: 24px !important;
height: 24px !important;
fill: currentColor !important;
display: block !important;
}
.social-icons li a img {
width: 22px !important;
height: 22px !important;
object-fit: contain !important;
display: block !important;
}
@media (max-width: 575.98px) { .social-icons { right: 8px !important; top: calc(33.333% + 113px) !important; margin-top: 15px !important; }
.social-icons ul { gap: 10px !important; }
.social-icons li a { width: 41px !important; height: 41px !important; }
.social-icons li a i,
.social-icons li a svg {
width: 22px !important;
height: 22px !important;
fill: currentColor !important;
display: block !important;
}
.social-icons li a img { font-size: 18px !important; width: 22px !important; height: 22px !important; }
}
/* === LICENSE BADGES (footer) — 18+ / RNG / Gambling Commission */
.license-row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 14px !important; margin-top: 12px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; }
.license-badge { height: 48px !important; width: auto !important; max-height: 48px !important; flex: 0 0 auto !important; display: block !important; opacity: .9; transition: opacity .18s ease; }
.license-row::-webkit-scrollbar { display: none; }
.license-badge:hover { opacity: 1; }
@media (max-width: 575.98px) {
.license-row { gap: 10px !important; }
.license-badge { height: 36px !important; }
}
/* === RGF NUDGE: shift Responsible Gaming logo 1cm left + 5% zoom === */
.license-row img.license-badge[alt="Responsible Gaming Foundation"] {
transform: translateX(-38px) scale(1.05) !important;
transform-origin: right center !important;
margin-right: -10px !important;
}
/* === GC NUDGE: shift Gambling Commission svg 0.5cm left === */
.license-row svg.license-badge[aria-label="Gambling Commission"] {
transform: translateX(-19px) !important;
transform-origin: right center !important;
}
/* === HIDE HAMBURGER (per user request) === */
.turbo-mobile-menu-btn { display: none !important; }
/* === BRAND-COLOR SOCIAL ICONS (override gold currentColor per icon) === */
.social-icons li a[aria-label="WhatsApp"] svg { color: #25D366 !important; fill: #25D366 !important; }
.social-icons li a[aria-label="Telegram"] svg { color: #229ED9 !important; fill: #229ED9 !important; }
.social-icons li a[aria-label="Facebook"] svg { color: #1877F2 !important; fill: #1877F2 !important; }
.social-icons li a[aria-label="Instagram"] svg { color: #E1306C !important; fill: url(#ig-grad) !important; }
/* Inject Instagram gradient via SVG defs trick — fall back to solid magenta if browser ignores it */
.social-icons li a[aria-label="Instagram"] svg path { fill: #E1306C !important; }
/* Tighten the glass circle so brand colors pop */
.social-icons li a {
border: 1px solid rgba(255,255,255,.10) !important;
}
.social-icons li a:hover {
border-color: rgba(255,255,255,.30) !important;
background: rgba(0,0,0,.85) !important;
transform: translateX(-2px) !important;
}
/* === CARD EXACT SIZE: 295w x 215h, auto-fill grid === */
.casino-game-grid {
grid-template-columns: repeat(auto-fill, 295px) !important;
justify-content: center !important;
gap: 12px !important;
}
.casino-game-card {
width: 295px !important;
height: 215px !important;
max-width: 295px !important;
}
.casino-game-card img {
width: 100% !important;
height: 165px !important;
aspect-ratio: auto !important;
object-fit: cover !important;
}
.casino-game-card .game-title-bar {
height: 50px !important;
padding: 14px 16px !important;
display: flex !important;
align-items: center !important;
}
@media (max-width: 575.98px) {
/* On phones the card naturally won't fit 295px — let it shrink to viewport but keep 295/215 ratio */
.casino-game-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)) !important; }
.casino-game-card { width: auto !important; max-width: none !important; height: auto !important; aspect-ratio: 295/215 !important; }
.casino-game-card img { height: auto !important; aspect-ratio: 295/165 !important; }
.casino-game-card .game-title-bar { height: auto !important; padding: 10px 12px !important; }
}
/* === HERO ARROWS: left + right edge, vertically centered === */
#turboHeroSlider { position: relative; }
.hero-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(10, 14, 26, 0.55);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #FFFFFF;
cursor: pointer;
z-index: 5;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color .18s ease, transform .18s ease, border-color .18s ease, opacity .18s ease;
opacity: .7;
padding: 0;
}
.hero-arrow:hover,
.hero-arrow:focus-visible {
background: rgba(10, 14, 26, 0.85);
border-color: rgba(176, 138, 75, 0.7);
opacity: 1;
outline: none;
}
.hero-arrow:active { transform: translateY(-50%) scale(.94); }
.hero-arrow-prev { left: 12px; }
.hero-arrow-next { right: 12px; }
@media (max-width: 575.98px) {
.hero-arrow { width: 34px; height: 34px; }
.hero-arrow-prev { left: 8px; }
.hero-arrow-next { right: 8px; }
.hero-arrow svg { width: 16px; height: 16px; }
}
/* === ZERO PAD LOGO === */
.top_head .d-flex.justify-content-between .logo {
padding: 0 !important;
margin: 0 !important;
}
.top_head .d-flex.justify-content-between .logo a {
padding: 0 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
}
.top_head .d-flex.justify-content-between .logo a img {
margin: 0 !important;
padding: 0 !important;
}
.top_head, .top_head .row, .top_head .col-12 {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* === LOGO STACK: lion mark left (full header height, no top/bottom spacing) + ROYALS 666 wordmark right === */
.top_head .d-flex.justify-content-between .logo a.logo-stack {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
text-decoration: none !important;
}
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-mark {
height: 58px !important;
width: auto !important;
object-fit: contain !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
}
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-text {
height: 36px !important;
width: auto !important;
object-fit: contain !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
}
@media (max-width: 575.98px) {
.top_head .d-flex.justify-content-between .logo a.logo-stack { gap: 4px !important; }
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-mark { height: 50px !important; }
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-text { height: 26px !important; }
}
/* === HEADER ZERO PAD — .header.beforeheader + .top_head === */
.header.beforeheader,
header.header.beforeheader {
padding: 0 !important;
margin: 0 !important;
}
.top_head {
padding: 0 !important;
margin: 0 !important;
}
.top_head .container-fluid,
.top_head .row,
.top_head .col-12 {
padding: 0 !important;
margin: 0 !important;
}
/* === LOGO LEFT PAD — 2px breathing room === */
.top_head .d-flex.justify-content-between .logo,
.top_head .d-flex.justify-content-between .logo a.logo-stack {
padding-left: 2px !important;
}
/* === LOGO STACK PAD V + LOGIN OVERFLOW FIX === */
.top_head .d-flex.justify-content-between .logo a.logo-stack {
padding-top: 2px !important;
padding-bottom: 2px !important;
padding-left: 2px !important;
}
.top_head .d-flex.justify-content-between .headerRight {
padding-right: 8px !important;
}
.top_head .d-flex.justify-content-between {
flex-wrap: nowrap !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* === TURBO246 COMPACT TUNING — match turbo246.com tighter rhythm === */
/* Game cards — smaller image, tighter title, less padding */
.casino-game-card img {
height: 120px !important;
}
.casino-game-card .game-title-bar {
padding: 6px 8px !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
line-height: 1.2 !important;
color: #9ca3af !important;
}
.casino-game-grid {
gap: 8px !important;
padding: 0 12px !important;
}
@media (max-width: 575.98px) {
.casino-game-card img { height: 105px !important; }
.casino-game-card .game-title-bar { padding: 5px 7px !important; font-size: 11px !important; }
.casino-game-grid { gap: 6px !important; padding: 0 8px !important; }
}
/* Provider pills — smaller padding + smaller font */
.provider-pill {
padding: 7px 14px !important;
font-size: 12px !important;
border-radius: 6px !important;
}
.provider-pills-inner {
gap: 6px !important;
padding: 0 10px !important;
}
/* Category tabs Row 2 (ROULETTE/ANDAR BAHAR/...) — smaller */
.TopCategories .nav-tabs .nav-link {
padding: 8px 10px !important;
font-size: 12px !important;
letter-spacing: .03em !important;
}
/* Hero — limit max height so it does not dominate viewport */
.mainBanner, .top_banner_sec, .hero-slider {
max-height: 180px;
overflow: hidden;
}
.hero-slide img, .mainBanner img {
max-height: 180px !important;
width: 100% !important;
object-fit: cover !important;
}
/* Reduce vertical breathing room between sections */
.TopCategories { padding: 8px 0 4px !important; margin-bottom: 8px !important; }
.provider-pills { padding: 4px 0 !important; }
.casino-game-grid { padding-top: 0 !important; padding-bottom: 12px !important; }
/* Active card glow play button — smaller too */
.casino-game-card.is-active .play-overlay::before {
width: 44px !important; height: 44px !important;
border-width: 2px !important;
}
.casino-game-card.is-active .play-overlay::after {
border-left-width: 12px !important;
border-top-width: 7px !important;
border-bottom-width: 7px !important;
}
/* === HERO SPACING — top + bottom breathing room around slider === */
.top_banner_sec, .mainBanner {
margin-top: 12px !important;
margin-bottom: 16px !important;
padding: 0 12px !important;
}
.hero-slider {
border-radius: 12px !important;
overflow: hidden !important;
}
@media (max-width: 575.98px) {
.top_banner_sec, .mainBanner {
margin-top: 8px !important;
margin-bottom: 12px !important;
padding: 0 8px !important;
}
.hero-slider {
border-radius: 10px !important;
}
}
/* === HERO ALIGN FIX — clean, properly cropped 16/9 hero === */
.top_banner_sec, .mainBanner {
margin: 12px auto 16px !important;
padding: 0 12px !important;
max-width: 1400px;
width: 100%;
box-sizing: border-box;
}
.hero-slider {
position: relative !important;
width: 100% !important;
aspect-ratio: 16 / 7 !important;
border-radius: 12px !important;
overflow: hidden !important;
background: #000 !important;
max-height: 220px !important;
}
.hero-slide {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
opacity: 0 !important;
transition: opacity .8s ease !important;
}
.hero-slide.active { opacity: 1 !important; }
.hero-slider img,
.hero-slide img,
.mainBanner img,
.top_banner_sec img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
max-height: none !important;
display: block !important;
}
.hero-arrow { width: 36px !important; height: 36px !important; }
.hero-arrow-prev { left: 8px !important; }
.hero-arrow-next { right: 8px !important; }
@media (max-width: 575.98px) {
.top_banner_sec, .mainBanner {
margin: 8px auto 12px !important;
padding: 0 8px !important;
}
.hero-slider { aspect-ratio: 16 / 8 !important; max-height: 180px !important; border-radius: 10px !important; }
.hero-arrow { width: 32px !important; height: 32px !important; }
}
/* === TURBO246 EXACT MATCH — measured dimensions === */
/* Card: image 164:109 (3:2 landscape), title bar 28px, total 164x137 */
.casino-game-card {
border-radius: 6px !important;
box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
}
.casino-game-card img {
aspect-ratio: 164 / 109 !important;
height: auto !important;
width: 100% !important;
object-fit: cover !important;
}
.casino-game-card .game-title-bar {
background: #1A1F2E !important;
padding: 6px 8px !important;
font-size: 11px !important;
font-weight: 500 !important;
color: #9ca3af !important;
line-height: 1.3 !important;
text-align: center !important;
height: 28px !important;
box-sizing: border-box !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
.casino-game-grid {
display: grid !important;
grid-template-columns: repeat(2, 164px) !important;
justify-content: center !important;
gap: 8px !important;
padding: 0 8px !important;
max-width: 100% !important;
}
@media (min-width: 576px) {
.casino-game-grid { grid-template-columns: repeat(3, 164px) !important; }
}
@media (min-width: 768px) {
.casino-game-grid { grid-template-columns: repeat(4, 164px) !important; }
}
@media (min-width: 992px) {
.casino-game-grid { grid-template-columns: repeat(5, 164px) !important; }
}
@media (min-width: 1200px) {
.casino-game-grid { grid-template-columns: repeat(6, 164px) !important; }
}
/* No active glow / play overlay (Turbo246 doesnt have it) */
.casino-game-card.is-active {
box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
transform: none !important;
}
.casino-game-card.is-active img {
filter: none !important;
}
.casino-game-card.is-active .game-title-bar {
color: #9ca3af !important;
}
.casino-game-card .play-overlay {
display: none !important;
}
/* Hero: 16:6.4 aspect (matches Turbo246 366x147 = 2.49:1) */
.hero-slider {
aspect-ratio: 366 / 147 !important;
max-height: 220px !important;
border-radius: 8px !important;
}
.hero-slider img,
.hero-slide img,
.mainBanner img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
}
.top_banner_sec, .mainBanner {
margin: 8px auto !important;
padding: 0 8px !important;
}
@media (max-width: 575.98px) {
.hero-arrow { display: none !important; }
.hero-dots { bottom: 6px !important; }
.hero-dot { width: 6px !important; height: 6px !important; }
}
/* Tighter section spacing */
.provider-pills { padding: 4px 0 !important; }
.TopCategories { padding: 6px 0 4px !important; margin-bottom: 6px !important; }
/* === TURBO246 FINAL FIX — solid yellow pills + smaller logo + no card shadow === */
/* Provider pills: SOLID YELLOW fill + BLACK text (Turbo246 actual style) */
.provider-pill {
background: #f7c52d !important;
background: linear-gradient(180deg, #f9d34a 0%, #f0b90b 100%) !important;
color: #0a0a0a !important;
border: 1px solid #d49a00 !important;
font-weight: 800 !important;
font-size: 12px !important;
padding: 7px 14px !important;
border-radius: 6px !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
box-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
}
.provider-pill:hover, .provider-pill:focus-visible {
background: linear-gradient(180deg, #fad04a 0%, #f5be1f 100%) !important;
color: #0a0a0a !important;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(247,197,45,.35) !important;
}
.provider-pills-inner { gap: 8px !important; padding: 0 12px !important; }
.provider-pills { padding: 10px 0 !important; }
/* Header: smaller, more compact logo (Turbo246 logo is ~40px tall) */
.top_head .d-flex.justify-content-between { min-height: 56px !important; }
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-mark {
height: 40px !important; max-height: 40px !important;
}
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-text {
height: 24px !important; max-height: 24px !important;
}
@media (max-width: 575.98px) {
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-mark { height: 36px !important; max-height: 36px !important; }
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-text { height: 20px !important; max-height: 20px !important; }
}
/* Game cards: no shadow, completely flat (Turbo246 style) */
.casino-game-card {
box-shadow: none !important;
border: 0 !important;
}
.casino-game-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,.45) !important;
transform: translateY(-2px) !important;
}
/* TopCategories tabs: slightly larger text, more spacing (Turbo246 has bold tabs) */
.TopCategories .nav-tabs .nav-link {
padding: 10px 14px !important;
font-size: 13px !important;
letter-spacing: .04em !important;
font-weight: 700 !important;
}
/* === TURBO246 COLOR CORRECTION (sampled live from turbo246.com 2026-05-03) === */
/* Body background: Turbo246 uses very dark navy */
body { background: var(--brand-bg) !important; }
/* Provider pills: TRANSPARENT bg, GOLD text + GOLD border, NOT solid yellow */
.provider-pill,
.provider-pill:link,
.provider-pill:visited {
background: transparent !important;
background-image: none !important;
color: var(--brand-primary) !important;
border: 1px solid var(--brand-accent) !important;
border-radius: 4px !important;
padding: 4px 10px !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: normal !important;
text-transform: uppercase !important;
box-shadow: none !important;
}
.provider-pill:hover,
.provider-pill:focus-visible,
.provider-pill.active {
background: rgba(231, 176, 8, 0.12) !important;
background-image: none !important;
color: var(--brand-primary) !important;
border-color: var(--brand-primary) !important;
transform: none !important;
box-shadow: none !important;
}
.provider-pills {
background: var(--brand-bg) !important;
padding: 8px 0 !important;
border-bottom: 1px solid rgba(231, 176, 8, 0.12) !important;
}
.provider-pills-inner { gap: 8px !important; padding: 0 12px !important; }
/* Top category tabs: transparent + gold/white text, smaller */
.TopCategories,
.category-tabs {
background: var(--brand-bg) !important;
}
.TopCategories .nav-tabs .nav-link,
.category-tabs .cat-tab,
.category-tab {
background: transparent !important;
color: #ffffff !important;
border: 0 !important;
border-radius: 0 !important;
padding: 6px 10px !important;
font-size: 13px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: normal !important;
box-shadow: none !important;
}
.TopCategories .nav-tabs .nav-link.active,
.TopCategories .nav-tabs .nav-link:hover,
.category-tabs .cat-tab.active,
.category-tab.active,
.category-tab:hover {
color: var(--brand-primary) !important;
background: transparent !important;
border-bottom: 2px solid var(--brand-primary) !important;
}
/* Login button: outlined gold */
.header-login,
.login-btn,
.btn-login,
.top_head .login-button,
header .login {
background: transparent !important;
color: var(--brand-primary) !important;
border: 1px solid var(--brand-primary) !important;
border-radius: 6px !important;
padding: 6px 14px !important;
font-size: 13px !important;
font-weight: 600 !important;
text-transform: none !important;
box-shadow: none !important;
}
.header-login:hover,
.login-btn:hover,
.btn-login:hover {
background: rgba(231, 176, 8, 0.12) !important;
color: var(--brand-primary) !important;
}
/* Section titles + headings: gold accent */
.section-title, .casino_text h2, .TopCategories h2 {
color: #ffffff !important;
}
/* Login button: header uses .btn_signin class — apply outlined gold */
.top_head .btn_signin,
.top_head a.btn_signin,
header .btn_signin,
.btn_signin.button-primary {
background: transparent !important;
background-image: none !important;
color: var(--brand-primary) !important;
border: 1px solid var(--brand-primary) !important;
border-radius: 6px !important;
padding: 6px 14px !important;
font-size: 13px !important;
font-weight: 600 !important;
text-transform: none !important;
box-shadow: none !important;
line-height: 1.2 !important;
}
.top_head .btn_signin:hover,
.top_head a.btn_signin:hover,
.btn_signin.button-primary:hover {
background: rgba(231, 176, 8, 0.12) !important;
color: var(--brand-primary) !important;
border-color: var(--brand-primary) !important;
}
/* === RESPONSIVE FIXES === */
/* Appended by responsive-audit agent. Homepage-focused, CSS-only. */
/* 1. Kill horizontal overflow at the document level */
html, body {
overflow-x: hidden !important;
max-width: 100% !important;
}
/* 2. Bootstrap rows leak negative margins outside container on narrow VPs.
Force rows to stay inside their parent's content box. */
.container, .container-fluid {
overflow-x: clip;
}
@media (max-width: 1199.98px) {
main .row,
section .row,
.casino_text .row,
.TopCategories .row,
.popular-games .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
main .row > [class*="col-"],
section .row > [class*="col-"] {
padding-left: 8px !important;
padding-right: 8px !important;
}
}
/* 3. Provider pill strip: make it a horizontal scroll rail on mobile/tablet
so SPORTSBOOK / EXCHANGE / EZUGI / SLOTS / EVOLUTION etc. don't overflow.
Hide the scrollbar visually. */
@media (max-width: 1199.98px) {
.provider-pills,
.providers,
.provider-strip,
.top-providers,
.top_provider_list,
nav.providers,
.header-providers,
ul.providers,
div:has(> a.provider-pill) {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
gap: 6px !important;
padding: 6px 8px !important;
max-width: 100% !important;
}
.provider-pills::-webkit-scrollbar,
.providers::-webkit-scrollbar,
.top-providers::-webkit-scrollbar,
div:has(> a.provider-pill)::-webkit-scrollbar {
display: none !important;
height: 0 !important;
width: 0 !important;
}
a.provider-pill {
flex: 0 0 auto !important;
white-space: nowrap !important;
min-height: 36px !important;
display: inline-flex !important;
align-items: center !important;
padding: 8px 14px !important;
font-size: 12px !important;
}
}
/* 4. Category tabs (Roulette / Andar Bahar / Baccarat / Blackjack / Dragon Tiger / Poker / Sicbo / Slots / Aviator) overflow same way.
Make the nav-tabs wrapper horizontally scrollable on tablet & below. */
@media (max-width: 1199.98px) {
.TopCategories .nav-tabs,
.category-tabs,
ul.nav-tabs,
.nav.nav-tabs {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
max-width: 100% !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.TopCategories .nav-tabs::-webkit-scrollbar,
.category-tabs::-webkit-scrollbar,
ul.nav-tabs::-webkit-scrollbar {
display: none !important;
height: 0 !important;
}
.TopCategories .nav-tabs .nav-item,
.category-tabs .nav-item,
ul.nav-tabs .nav-item {
flex: 0 0 auto !important;
}
.TopCategories .nav-tabs .nav-link,
.category-tabs .nav-link,
ul.nav-tabs .nav-link {
white-space: nowrap !important;
min-height: 40px !important;
padding: 10px 14px !important;
}
}
/* 5. Casino game cards: cards are fixed 295px wide and overflow at 768/1024/1280.
Convert the popular-games / casino-games rows into a fluid responsive grid
based on viewport, so cards shrink to fit. */
.casino-game-card,
a.casino-game-card {
max-width: 100% !important;
box-sizing: border-box !important;
}
.casino-game-card img {
max-width: 100% !important;
height: auto !important;
display: block !important;
}
.casino-game-card .game-title-bar,
.casino-game-card div.game-title-bar {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Force any direct grid/row containing casino-game-cards to wrap responsively */
.casino-games-grid,
.popular-games .row,
.TopCategories .tab-content .row,
div:has(> a.casino-game-card),
div:has(> .casino-game-card) {
display: grid !important;
gap: 8px !important;
margin: 0 !important;
}
@media (max-width: 374.98px) {
.casino-games-grid,
.popular-games .row,
.TopCategories .tab-content .row,
div:has(> a.casino-game-card),
div:has(> .casino-game-card) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (min-width: 375px) and (max-width: 575.98px) {
.casino-games-grid,
.popular-games .row,
.TopCategories .tab-content .row,
div:has(> a.casino-game-card),
div:has(> .casino-game-card) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
.casino-games-grid,
.popular-games .row,
.TopCategories .tab-content .row,
div:has(> a.casino-game-card),
div:has(> .casino-game-card) {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.casino-games-grid,
.popular-games .row,
.TopCategories .tab-content .row,
div:has(> a.casino-game-card),
div:has(> .casino-game-card) {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
@media (min-width: 992px) and (max-width: 1279.98px) {
.casino-games-grid,
.popular-games .row,
.TopCategories .tab-content .row,
div:has(> a.casino-game-card),
div:has(> .casino-game-card) {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
@media (min-width: 1280px) {
.casino-games-grid,
.popular-games .row,
.TopCategories .tab-content .row,
div:has(> a.casino-game-card),
div:has(> .casino-game-card) {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
}
.casino-games-grid > [class*="col-"],
.popular-games .row > [class*="col-"],
.TopCategories .tab-content .row > [class*="col-"] {
width: 100% !important;
max-width: 100% !important;
flex: unset !important;
padding: 0 !important;
}
/* 6. Mobile bottom-fixed footer-menu (Casino / Sports / Search / Login / Support).
Push body content up so it isn't covered by the 56px fixed nav. */
@media (max-width: 991.98px) {
body {
padding-bottom: 64px !important;
}
.footer-menu {
z-index: 1050 !important;
}
}
/* 7. Top-level Log In button in header (28-29px tall) is below the 40px tap target floor on mobile. */
@media (max-width: 767.98px) {
a.button-primary,
.header-login,
.login-btn,
.btn-login,
.top_head .login-button,
header .login {
min-height: 36px !important;
padding: 8px 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
}
/* 8. Floating .social-icons sidebar (fixed, h~190px) overlays content on small screens.
Hide it below tablet so it doesn't steal taps over game cards. */
@media (max-width: 991.98px) {
.social-icons {
display: none !important;
}
}
/* 9. Make all images respect their container so banner / logo don't blow out narrow VPs. */
img {
max-width: 100% !important;
height: auto;
}
.banner img,
.hero img,
.casino_text img {
max-width: 100% !important;
}
/* 10. Bottom mobile nav text labels are 10px — bump to 11px for readability without breaking layout. */
@media (max-width: 767.98px) {
.footer-menu a,
.footer-menu span,
.footer-menu .nav-label {
font-size: 11px !important;
line-height: 1.2 !important;
}
}
/* ============================================================
TURBO246 PARITY PASS 2 — 2026-05-03
Sampled live: turbo246.com hero=1256x504 (object-fit:contain),
pills=16px font, cat-tab active=full 2px gold box border,
card title=white not gray. Overrides stale clamps above.
============================================================ */
/* (1) HERO — let it render at natural aspect (~2.5:1), not clamped to 180/220px.
Turbo: parent height auto, image height auto, max-height none, object-fit contain. */
.mainBanner,
.top_banner_sec,
.banner-slider,
.hero-slider,
.slick-list,
.slick-slide {
max-height: none !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
.hero-slider {
aspect-ratio: 1280 / 504 !important;
width: 100% !important;
max-width: 1280px !important;
margin: 12px auto 16px !important;
border-radius: 12px !important;
overflow: hidden !important;
}
.hero-slide,
.hero-slide img,
.mainBanner img,
.top_banner_sec img,
.slick-slide img {
width: 100% !important;
height: 100% !important;
max-height: none !important;
object-fit: cover !important;
object-position: 50% 50% !important;
}
@media (max-width: 575.98px) {
.hero-slider {
aspect-ratio: 1280 / 504 !important;
margin: 8px auto 12px !important;
border-radius: 10px !important;
}
}
/* (2) GAME CARD TITLE — white text, matches turbo. Override the dim-gray (#9ca3af) rules. */
.casino-game-card .game-title-bar,
.casino-game-card.is-active .game-title-bar {
color: #ffffff !important;
background: #1A1F2E !important;
font-weight: 600 !important;
}
/* (3) PROVIDER PILLS — turbo uses 16px font, padding 2px 8px, 4px radius, 1px gold border, gold text on transparent.
Override the smaller 12-13px pill rules above. */
.provider-pill {
background: transparent !important;
background-image: none !important;
color: var(--brand-primary) !important;
border: 1px solid var(--brand-accent) !important;
border-radius: 4px !important;
padding: 4px 10px !important;
font-size: 16px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
line-height: 1.4 !important;
letter-spacing: normal !important;
box-shadow: none !important;
}
.provider-pill:hover,
.provider-pill:focus-visible,
.provider-pill.active {
background: rgba(231, 176, 8, 0.10) !important;
color: var(--brand-primary) !important;
border-color: var(--brand-primary) !important;
transform: none !important;
}
.provider-pills {
padding: 10px 0 !important;
border-bottom: 1px solid rgba(231, 176, 8, 0.12) !important;
}
.provider-pills-inner { gap: 10px !important; padding: 0 16px !important; }
@media (max-width: 575.98px) {
.provider-pill { font-size: 13px !important; padding: 3px 8px !important; }
.provider-pills { padding: 8px 0 !important; }
.provider-pills-inner { gap: 8px !important; padding: 0 12px !important; }
}
/* (4) CATEGORY TABS (Roulette/Andar Bahar/...) — turbo active = full boxed 2px gold border, not bottom underline.
Replace the bottom-underline rule. */
.TopCategories .nav-tabs .nav-link,
.category-tabs .cat-tab,
.category-tab {
background: transparent !important;
color: #ffffff !important;
border: 2px solid transparent !important;
border-radius: 4px !important;
padding: 6px 12px !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: normal !important;
line-height: 1.4 !important;
box-shadow: none !important;
}
.TopCategories .nav-tabs .nav-link.active,
.TopCategories .nav-tabs .nav-link[aria-selected="true"],
.category-tabs .cat-tab.active,
.category-tab.active {
color: var(--brand-primary) !important;
background: transparent !important;
border: 2px solid var(--brand-primary) !important;
border-bottom: 2px solid var(--brand-primary) !important;
}
.TopCategories .nav-tabs .nav-link:hover,
.TopCategories .nav-tabs .nav-link:focus-visible {
color: var(--brand-primary) !important;
border-color: rgba(231, 176, 8, 0.5) !important;
}
/* Kill any ::after underline pseudo-element from the older rule */
.TopCategories .nav-tabs .nav-link::after,
.TopCategories .nav-tabs .nav-link.active::after,
.TopCategories .nav-tabs .nav-link[aria-selected="true"]::after {
display: none !important;
content: none !important;
}
.TopCategories { padding: 12px 0 8px !important; margin-bottom: 16px !important; }
.TopCategories .nav-tabs { gap: 12px !important; padding: 0 16px !important; }
@media (max-width: 575.98px) {
.TopCategories .nav-tabs .nav-link { font-size: 12px !important; padding: 5px 10px !important; }
.TopCategories .nav-tabs { gap: 8px !important; padding: 0 10px !important; }
}
/* (5) GAME CARDS — turbo desktop is 300x235 with image ~200px, royals had 164px on desktop.
Open up the desktop grid to use larger cards (≥768px) so it matches turbo's denser/larger feel. */
@media (min-width: 768px) {
.casino-game-grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
gap: 12px !important;
padding: 0 16px !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.casino-game-card { width: auto !important; max-width: none !important; }
.casino-game-card img {
height: auto !important;
aspect-ratio: 300 / 200 !important;
object-fit: cover !important;
}
.casino-game-card .game-title-bar {
height: auto !important;
padding: 10px 12px !important;
font-size: 13px !important;
}
}
/* === Misc UI fixes from site-wide audit === */
/* Cap Toastify z-index so future modals/drawers don't get buried */
.Toastify, .Toastify__toast-container { z-index: 9999 !important; }
/* === LAYOUT MATCH (per user reference image 2026-05-03) === */
/* Category tabs: GOLD UNDERLINE on active (not a gold box) */
.TopCategories .nav-tabs .nav-link.active,
.TopCategories .nav-tabs .nav-link:hover,
.category-tabs .cat-tab.active,
.category-tab.active,
.category-tab:hover {
color: var(--brand-primary) !important;
background: transparent !important;
border: 0 !important;
border-bottom: 3px solid var(--brand-primary) !important;
border-radius: 0 !important;
}
.TopCategories .nav-tabs .nav-link,
.category-tabs .cat-tab,
.category-tab {
border: 0 !important;
border-bottom: 3px solid transparent !important;
border-radius: 0 !important;
padding: 8px 12px !important;
font-size: 14px !important;
color: #ffffff !important;
}
/* Provider pills: bigger, slightly raised, subtle dark-navy bg, soft glow */
.provider-pill,
.provider-pill:link,
.provider-pill:visited {
background: rgba(255, 255, 255, 0.02) !important;
color: var(--brand-primary) !important;
border: 1px solid rgba(231, 176, 8, 0.55) !important;
border-radius: 8px !important;
padding: 12px 18px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
box-shadow: 0 1px 0 rgba(231, 176, 8, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}
.provider-pill:hover,
.provider-pill:focus-visible,
.provider-pill.active {
background: rgba(231, 176, 8, 0.08) !important;
color: var(--brand-primary) !important;
border-color: var(--brand-primary) !important;
box-shadow: 0 0 0 1px rgba(231, 176, 8, 0.25) !important;
}
.provider-pills { padding: 12px 0 !important; }
.provider-pills-inner { gap: 10px !important; }
/* Game cards: play overlay visible on .is-active (first card) and on hover */
.casino-game-card { position: relative !important; }
.casino-game-card::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.95);
background: rgba(0, 0, 0, 0.35) url("data:image/svg+xml;utf8,") no-repeat center / 22px 22px;
opacity: 0;
transition: opacity .2s ease;
pointer-events: none;
z-index: 2;
}
.casino-game-card.is-active::after,
.casino-game-card:hover::after,
.casino-game-card:focus-visible::after { opacity: 1; }
border: 2px solid rgba(255, 255, 255, 0.95);
background: rgba(0, 0, 0, 0.35) url("data:image/svg+xml;utf8,") no-repeat center / 22px 22px;
opacity: 0;
transition: opacity .2s ease;
pointer-events: none;
z-index: 2;
}
.casino-game-card.is-active::after,
.casino-game-card:hover::after,
.casino-game-card:focus-visible::after { opacity: 1; }
/* Casino page (.casino-tab) — match outlined gold design instead of solid yellow */
.casino-tab,
.casino-tab:link,
.casino-tab:visited {
background: rgba(255, 255, 255, 0.02) !important;
color: var(--brand-primary) !important;
border: 1px solid rgba(231, 176, 8, 0.45) !important;
border-radius: 6px !important;
padding: 8px 14px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
}
.casino-tab.active,
.casino-tab:hover {
background: rgba(231, 176, 8, 0.12) !important;
color: var(--brand-primary) !important;
border-color: var(--brand-primary) !important;
}
/* Casino page game cards (.casino-card) — same play overlay as .casino-game-card */
.casino-card { position: relative !important; }
.casino-card::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 52px;
height: 52px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.95);
background: rgba(0, 0, 0, 0.35) url("data:image/svg+xml;utf8,") no-repeat center / 20px 20px;
opacity: 0;
transition: opacity .2s ease;
pointer-events: none;
z-index: 2;
}
.casino-card:hover::after,
.casino-card:focus-visible::after { opacity: 1; }
/* === PIXEL-MATCH PASS (2026-05-03) ============================
Targeted overrides to fix three mismatches the user flagged:
1. Pills had near-white bg tint (rgba(255,255,255,.02)) -> dark navy
2. Pill gold border was washed out (alpha .55) -> clean gold (alpha .9)
3. Outer gold glow (boxShadow gold .08) -> inset-only depth, no glow
Also tightens the active pill so it reads "selected" without a halo,
and asserts the play-overlay on .casino-game-card.is-active.
Cascade: this block must override blocks at ~155, ~968, ~1177, ~1235.
============================================================== */
.provider-pill,
a.provider-pill,
.provider-pill:link,
.provider-pill:visited {
background: rgba(0, 0, 0, 0.25) !important;
color: var(--brand-primary) !important;
border: 1px solid rgba(231, 176, 8, 0.9) !important;
border-radius: 8px !important;
padding: 12px 18px !important;
min-height: 44px !important;
font-weight: 700 !important;
font-size: 13px !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 1px 2px rgba(0, 0, 0, 0.4) !important;
transition: background .15s ease, border-color .15s ease !important;
}
.provider-pill:hover,
.provider-pill:focus-visible {
background: rgba(231, 176, 8, 0.10) !important;
border-color: var(--brand-primary) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 1px 2px rgba(0, 0, 0, 0.45) !important;
}
.provider-pill.active,
.provider-pill[aria-current="page"] {
background: rgba(231, 176, 8, 0.14) !important;
color: var(--brand-primary) !important;
border-color: var(--brand-primary) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 1px 2px rgba(0, 0, 0, 0.45) !important;
}
.provider-pill:active {
transform: none !important;
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.35) !important;
}
/* Tabs: gold underline 3px on active, no boxes anywhere */
.TopCategories .nav-tabs .nav-link,
.TopCategories .nav-tabs button.nav-link,
ul.nav-tabs .nav-link {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #ffffff !important;
padding: 8px 12px !important;
border-bottom: 3px solid transparent !important;
}
.TopCategories .nav-tabs .nav-link.active,
.TopCategories .nav-tabs .nav-link[aria-selected="true"],
ul.nav-tabs .nav-link.active {
color: var(--brand-primary) !important;
border-bottom: 3px solid var(--brand-primary) !important;
background: transparent !important;
}
/* Header: keep flat dark navy, compact, no border-bottom */
.header.beforeheader,
header.header {
background: #111827 !important;
border-bottom: 0 !important;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3) !important;
}
/* Login button: outlined gold, compact (already mostly correct) */
.headerRight .btn_signin,
.top_head .btn_signin,
header .btn_signin,
a.btn_signin.button-primary,
button.btn_signin.button-primary {
background: transparent !important;
color: var(--brand-primary) !important;
border: 1px solid var(--brand-primary) !important;
border-radius: 6px !important;
padding: 6px 14px !important;
font-weight: 600 !important;
font-size: 13px !important;
box-shadow: none !important;
}
.headerRight .btn_signin:hover,
a.btn_signin.button-primary:hover {
background: rgba(231, 176, 8, 0.12) !important;
color: var(--brand-primary) !important;
border-color: var(--brand-primary) !important;
}
/* Active card play-overlay: assert visible center white-circle play */
.casino-game-card.is-active::after,
.casino-game-card.is-active .play-overlay {
display: flex !important;
opacity: 1 !important;
}
/* === LOGO MATCH + LOADERS === */
/* Brand-tint Bootstrap spinners and FA spinners; replace any remaining
hardcoded #e7b008 sportsbook spinner color with the new brand gold. */
.spinner-border,
.spinner-grow {
color: var(--brand-primary) !important;
border-color: var(--brand-primary) !important;
border-right-color: transparent !important;
}
.spinner-grow {
background-color: var(--brand-primary) !important;
border-color: transparent !important;
}
.fa-spinner,
.fa-spin,
i.fa-solid.fa-spinner.fa-spin {
color: var(--brand-primary) !important;
}
.loader-img {
filter: drop-shadow(0 0 4px var(--brand-primary)) hue-rotate(0deg);
}
/* Hero image shimmer skeleton — fades out once the image paints.
Uses CSS-only animation, no extra HTTP requests. */
.banner-section,
.hero {
position: relative;
}
.banner-section img:not([src*="data:"]),
.hero img:not([src*="data:"]) {
background: linear-gradient(
90deg,
rgba(24, 40, 56, 0.6) 0%,
rgba(226, 185, 114, 0.18) 50%,
rgba(24, 40, 56, 0.6) 100%
);
background-size: 200% 100%;
animation: brand-shimmer 1.6s ease-in-out infinite;
}
.banner-section img.loaded,
.hero img.loaded,
.banner-section img[src][complete],
.hero img[src][complete] {
background: transparent;
animation: none;
}
@keyframes brand-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* === END LOGO MATCH + LOADERS === */
/* === POST-LOGIN HEADER === */
/* Phase 2026-05-03: responsive fix for the authenticated client header.
Targets: deposit btn, balance pill, user dropdown inside .headerRight.
Goals: horizontal row at every viewport, no overflow at 390px,
right-anchored dropdown that never clips off-screen, ≥36px touch targets. */
/* 1. Force the parent into a single horizontal row that hugs the right edge. */
.top_head .d-flex.justify-content-between .headerRight {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: .5rem !important;
margin-left: auto !important;
min-width: 0; /* allow children to shrink instead of overflow */
max-width: 100%;
}
/* 2. Make sure each post-login child is an inline-flex row item, not a block. */
.headerRight .turbo-deposit-btn,
.headerRight .turbo-balance-pill,
.headerRight .turbo-user-dropdown,
.headerRight .turbo-user-dropdown > .dropdown-toggle {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto;
white-space: nowrap;
line-height: 1.1;
min-height: 36px; /* a11y: ≥36px touch target */
margin: 0 !important; /* override the legacy .turbo-balance-pill margin-left */
}
/* The .dropdown wrapper itself shouldn't break the row */
.headerRight .turbo-user-dropdown {
position: relative;
}
/* 3. Username text gets bounded so a 30-char username can't break layout. */
.headerRight .turbo-user-dropdown .dropdown-toggle > span {
display: inline-block;
max-width: 12ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
/* 4. Balance pill: cap width so a huge balance can't push the row sideways. */
.headerRight .turbo-balance-pill {
max-width: 9.5rem;
padding: .45rem .7rem;
border: 1px solid rgba(231, 176, 8, .35);
background: rgba(255, 255, 255, .05);
color: var(--brand-primary, #e2b972);
font-weight: 700;
}
.headerRight .turbo-balance-pill > i { flex: 0 0 auto; }
/* 5. Dropdown menu — right-anchored, never wider than the viewport. */
.headerRight .turbo-user-dropdown .dropdown-menu {
right: 0 !important;
left: auto !important;
min-width: 12rem;
max-width: calc(100vw - 1rem);
box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
/* ----- Mobile (<576px): icon-only deposit + user, ₹-only balance, tight gap. */
@media (max-width: 575.98px) {
.top_head .d-flex.justify-content-between .headerRight {
gap: .35rem !important;
padding-right: 4px !important;
}
.headerRight .turbo-deposit-btn {
padding: .4rem .55rem !important;
font-size: .8rem !important;
}
.headerRight .turbo-balance-pill {
padding: .35rem .55rem;
font-size: .78rem;
max-width: 7rem;
}
.headerRight .turbo-balance-pill > i { font-size: .85rem; }
.headerRight .turbo-user-dropdown .dropdown-toggle {
padding: .4rem .55rem !important;
font-size: .8rem !important;
}
/* Username hidden via Blade's .d-none .d-sm-inline; keep ellipsis just in case. */
.headerRight .turbo-user-dropdown .dropdown-toggle > span {
max-width: 8ch;
}
/* Dropdown: right-aligned, slightly smaller items */
.headerRight .turbo-user-dropdown .dropdown-menu {
font-size: .9rem;
}
}
/* ----- Tablet (576-767.98px): show currency, medium spacing, longer username. */
@media (min-width: 576px) and (max-width: 767.98px) {
.top_head .d-flex.justify-content-between .headerRight {
gap: .45rem !important;
}
.headerRight .turbo-balance-pill {
font-size: .82rem;
max-width: 8.5rem;
}
.headerRight .turbo-user-dropdown .dropdown-toggle > span {
max-width: 10ch;
}
}
/* ----- Desktop (≥768px): full balance + full username, comfortable spacing. */
@media (min-width: 768px) {
.top_head .d-flex.justify-content-between .headerRight {
gap: .6rem !important;
}
.headerRight .turbo-balance-pill {
max-width: 11rem;
font-size: .9rem;
}
.headerRight .turbo-user-dropdown .dropdown-toggle > span {
max-width: 16ch;
}
}
/* === END POST-LOGIN HEADER === */
/* === LIVE BALANCE POLISH PASS 2026-05-03 === */
/* Three coordinated tweaks: (1) bigger hero, (2) larger logo, (3) polished social icons. */
/* This block is appended LAST so it overrides earlier rules in turbo-overrides.css. */
/* ---------- (1) HERO / POSTER — slightly bigger across all viewports ---------- */
/* Mobile (default, <576px): 16/8 → ~25% taller than 16/6.4 */
/* Tablet (576-991px): 16/7 */
/* Desktop (>=992px): 16/6 → wider, more cinematic */
.hero-slider,
.turbo-hero,
.top_banner_sec .hero-slider {
aspect-ratio: 16 / 8 !important;
max-height: 260px !important; /* lift the earlier 180/220px ceilings */
overflow: hidden !important;
}
.hero img,
.hero-slider img,
.hero-slide img,
.turbo-hero img,
.top_banner_sec img,
.mainBanner img,
[class*="hero"] img:not(.logo-mark):not(.logo-text) {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
max-height: none !important;
display: block !important;
}
/* Lift mainBanner / top_banner clamps so image can fill the new aspect */
.mainBanner,
.top_banner_sec {
max-height: none !important;
overflow: visible !important;
}
@media (min-width: 576px) and (max-width: 991.98px) {
.hero-slider,
.turbo-hero,
.top_banner_sec .hero-slider {
aspect-ratio: 16 / 7 !important;
max-height: 360px !important;
}
}
@media (min-width: 992px) {
.hero-slider,
.turbo-hero,
.top_banner_sec .hero-slider {
aspect-ratio: 16 / 6 !important;
max-height: 460px !important;
}
}
/* ---------- (2) HEADER LOGO — larger lion + wordmark, taller header ---------- */
.top_head .d-flex.justify-content-between {
min-height: 64px !important; /* was 56px */
}
.top_head .logo a.logo-stack,
.top_head .d-flex.justify-content-between .logo a.logo-stack {
display: inline-flex !important;
align-items: center !important;
gap: .35rem !important;
}
/* Mobile (<576px) */
.top_head .logo a.logo-stack img.logo-mark,
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-mark {
height: 44px !important;
max-height: 44px !important;
width: auto !important;
}
.top_head .logo a.logo-stack img.logo-text,
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-text {
height: 26px !important;
max-height: 26px !important;
width: auto !important;
}
/* Tablet (576-991.98px) */
@media (min-width: 576px) and (max-width: 991.98px) {
.top_head .logo a.logo-stack img.logo-mark,
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-mark {
height: 48px !important;
max-height: 48px !important;
}
.top_head .logo a.logo-stack img.logo-text,
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-text {
height: 28px !important;
max-height: 28px !important;
}
}
/* Desktop (>=992px) */
@media (min-width: 992px) {
.top_head .logo a.logo-stack img.logo-mark,
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-mark {
height: 56px !important;
max-height: 56px !important;
}
.top_head .logo a.logo-stack img.logo-text,
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-text {
height: 32px !important;
max-height: 32px !important;
}
}
/* ---------- (3) SOCIAL-MEDIA STICKY ICONS — 48px circle with elevation ---------- */
.social-icons li a {
width: 48px !important;
height: 48px !important;
border-radius: 9999px !important;
box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
transform: scale(1.0);
transition: transform .15s ease, box-shadow .15s ease, border-color .18s ease, color .18s ease, background .18s ease !important;
}
.social-icons li a:hover,
.social-icons li a:focus-visible {
transform: scale(1.08) !important;
box-shadow: 0 4px 14px rgba(0,0,0,.45) !important;
}
.social-icons li a svg,
.social-icons li a i,
.social-icons li a img {
width: 24px !important;
height: 24px !important;
font-size: 22px !important;
line-height: 1 !important;
display: block !important;
}
/* Apply 48px on every viewport, including the prior 41px mobile override */
@media (max-width: 575.98px) {
.social-icons li a { width: 48px !important; height: 48px !important; }
.social-icons li a svg,
.social-icons li a i,
.social-icons li a img { width: 24px !important; height: 24px !important; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
.social-icons li a { width: 48px !important; height: 48px !important; }
}
@media (min-width: 992px) {
.social-icons li a { width: 48px !important; height: 48px !important; }
}
/* === END LIVE BALANCE POLISH PASS 2026-05-03 === */
/* === CASINO-PAGE TITLE POLISH (2026-05-03) === */
/* The /casino + /casino/{provider} pages use inline-styled h1 — make them brand-consistent and overflow-safe */
.main h1[style*='font-size:1.5rem'],
.main h1[style*='font-size: 1.5rem'] {
color: var(--brand-primary, #e2b972) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .02em !important;
min-width: 0 !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
flex: 1 1 auto !important;
}
.main h1 a[href*='live-casino'],
.main h1 a[style*='color:#94a3b8'] {
color: rgba(255,255,255,.6) !important;
font-weight: 500 !important;
font-size: .85em !important;
margin-right: .25rem !important;
text-transform: none !important;
}
/* Title wrapper container — ensure flex-wrap so subtitle drops to next line if needed */
.main > div[style*='display:flex'][style*='justify-content:space-between'] {
flex-wrap: wrap !important;
gap: .25rem .75rem !important;
}
.main > div[style*='display:flex'][style*='justify-content:space-between'] > div[style*='color:#94a3b8'] {
flex-shrink: 0 !important;
color: rgba(255,255,255,.55) !important;
font-size: .8rem !important;
}
/* === LOGO 50px MOBILE + WALLET RESPONSIVENESS (2026-05-03) === */
/* User asked for 50px logo on mobile. Override Agent A's 44px. */
@media (max-width: 575.98px) {
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-mark { height: 50px !important; max-height: 50px !important; }
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-text { height: 30px !important; max-height: 30px !important; }
.top_head .d-flex.justify-content-between { min-height: 70px !important; }
}
@media (max-width: 419.98px) {
/* Very small phones — keep logo big but tighten gap */
.top_head .logo a.logo-stack { gap: .25rem !important; }
}
/* Post-login wallet: aggressively responsive on mobile so bigger logo fits */
@media (max-width: 575.98px) {
.headerRight, .header-right, [class*=headerRight] {
gap: .35rem !important;
flex-wrap: nowrap !important;
min-width: 0 !important;
flex: 1 1 auto !important;
}
/* Hide the Deposit button label on phones — keep just the icon */
.headerRight .turbo-deposit-btn .d-none.d-sm-inline,
.turbo-deposit-btn .d-none.d-sm-inline { display: none !important; }
.turbo-deposit-btn {
padding: .35rem .55rem !important;
font-size: .75rem !important;
min-height: 36px !important;
}
/* Balance pill: smaller font, tighter padding, ellipsis on long balances */
.turbo-balance-pill {
padding: .3rem .5rem !important;
font-size: .72rem !important;
max-width: 6.5rem !important;
min-height: 36px !important;
line-height: 1.1 !important;
gap: .25rem !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.turbo-balance-pill [data-live-balance-amount] {
font-variant-numeric: tabular-nums !important;
font-weight: 700 !important;
}
/* Username dropdown: hide username text on phones, keep just user icon */
.turbo-user-dropdown .dropdown-toggle .d-none.d-sm-inline,
.turbo-user-dropdown .dropdown-toggle span:not(.fa):not(.fa-solid) {
display: none !important;
}
.turbo-user-dropdown .dropdown-toggle {
padding: .35rem .5rem !important;
font-size: .85rem !important;
min-height: 36px !important;
min-width: 36px !important;
}
.turbo-user-dropdown .dropdown-toggle::after { display: none !important; }
/* Dropdown menu pinned to right so it doesn't clip off-screen */
.turbo-user-dropdown .dropdown-menu {
right: 0 !important; left: auto !important;
min-width: 11rem !important;
max-width: calc(100vw - 1rem) !important;
}
}
@media (max-width: 360px) {
/* Tiny phones — drop the deposit button entirely, just balance + user */
.turbo-deposit-btn { display: none !important; }
.turbo-balance-pill { max-width: 5.5rem !important; font-size: .7rem !important; }
}
/* === HEADER PADDING TIGHTEN + HOMEPAGE SPACING (2026-05-03) === */
/* User wants header padding ~0.5px top/bottom — very tight */
.top_head,
.top_head .d-flex.justify-content-between,
header.beforeheader,
header.header.beforeheader,
header.header {
padding-top: 0.5px !important;
padding-bottom: 0.5px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* The container inside top_head should have minimal vertical padding too */
.top_head > .container,
.top_head > .container-fluid,
.top_head .row {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* === HOMEPAGE TIGHTER SPACING === */
.main { padding-top: 0 !important; margin-top: 0 !important; }
.provider-pills { padding: 6px 0 !important; }
.TopCategories { padding: 4px 0 2px !important; margin-bottom: 4px !important; }
/* Hero/banner section padding tighten */
.hero, .top_banner_sec, [class*='hero'] { margin-bottom: 6px !important; padding: 0 !important; }
.hero .swiper, .top_banner_sec .swiper { margin: 0 !important; }
/* Game grid section tighter */
.casino-game-grid, .casino-grid { gap: 8px !important; }
/* Section spacing in homepage */
section { margin: 8px auto !important; }
/* Don't waste vertical above first content */
body > #root > div { padding-top: 0 !important; }
/* === HEADER MIN-HEIGHT TIGHT (override prior 70px) === */
.top_head .d-flex.justify-content-between {
min-height: auto !important;
padding-top: 0.5px !important;
padding-bottom: 0.5px !important;
}
@media (max-width: 575.98px) {
.top_head .d-flex.justify-content-between { min-height: 51px !important; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
.top_head .d-flex.justify-content-between { min-height: 56px !important; }
}
@media (min-width: 992px) {
.top_head .d-flex.justify-content-between { min-height: 60px !important; }
}
/* === DROPDOWN MENU STYLING (Bootstrap CSS not loaded — provide our own) === */
.dropdown-menu {
position: absolute !important;
z-index: 9999 !important;
min-width: 11rem !important;
padding: .5rem 0 !important;
margin: .25rem 0 0 !important;
background: #0d1424 !important;
border: 1px solid var(--brand-primary, #e2b972) !important;
border-radius: 8px !important;
box-shadow: 0 8px 24px rgba(0,0,0,.45) !important;
list-style: none !important;
font-size: .9rem !important;
text-align: left !important;
}
.dropdown-menu-end { right: 0 !important; left: auto !important; }
.dropdown-menu .dropdown-item,
.dropdown-menu li > a.dropdown-item {
display: block !important;
width: 100% !important;
padding: .5rem 1rem !important;
color: #fff !important;
text-decoration: none !important;
background: transparent !important;
border: 0 !important;
white-space: nowrap !important;
transition: background .12s ease, color .12s ease !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
background: rgba(226, 185, 114, 0.12) !important;
color: var(--brand-primary, #e2b972) !important;
}
.dropdown-menu .dropdown-item[style*='color:#dc3545'],
.dropdown-menu .dropdown-item[style*='color: #dc3545'] {
color: #dc3545 !important;
}
.dropdown-menu .dropdown-item[style*='color:#dc3545']:hover {
background: rgba(220,53,69,.12) !important;
color: #ff5d6e !important;
}
.dropdown-menu .dropdown-divider,
.dropdown-menu hr.dropdown-divider {
height: 0 !important;
margin: .35rem 0 !important;
border: 0 !important;
border-top: 1px solid rgba(255,255,255,.08) !important;
overflow: hidden !important;
}
.dropdown { position: relative !important; }
/* Bootstrap-style 'show' class triggered by our turbo-dropdown.js */
.dropdown-menu.show { display: block !important; }
/* === DROPDOWN POSITIONING (open BELOW button, not above) === */
.dropdown { position: relative !important; }
.dropdown > .dropdown-menu { top: 100% !important; }
.dropdown > .dropdown-menu.dropdown-menu-end {
top: 100% !important; right: 0 !important; left: auto !important;
}
/* === LOGO 60px MOBILE (user request 2026-05-03) === */
@media (max-width: 575.98px) {
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-mark {
height: 60px !important; max-height: 60px !important;
}
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-text {
height: 36px !important; max-height: 36px !important;
}
.top_head .d-flex.justify-content-between { min-height: 64px !important; }
}
@media (max-width: 360px) {
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-mark {
height: 56px !important; max-height: 56px !important;
}
.top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-text {
height: 32px !important; max-height: 32px !important;
}
}
/* === SMOOTH TRANSITIONS POLISH === */
.provider-pill, .casino-tab, .casino-game-card, .casino-card,
.btn_signin, .turbo-deposit-btn, .turbo-balance-pill,
.dropdown-toggle, .dropdown-item,
.floating-social a, .social-icons a, [class*='floating-icons'] a,
.footer-menu a, .footer-menu button,
.turbo-user-dropdown .dropdown-toggle,
a.casino-card, a.casino-game-card {
transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease !important;
}
.dropdown-menu {
transition: opacity .12s ease !important;
}
/* Active-state balance pulse animation (used by live-balance.js) */
@keyframes turbo-balance-pulse {
0% { transform: scale(1); }
40% { transform: scale(1.08); color: var(--brand-primary, #e2b972); }
100% { transform: scale(1); }
}
.turbo-balance-pill.balance-pulse [data-live-balance-amount] {
animation: turbo-balance-pulse .6s ease;
}
/* === LOGO 70px FORCE MOBILE + 80px DESKTOP (final 2026-05-03) === */
/* Maximum specificity to beat any earlier rule */
html body .top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-mark,
.top_head .d-flex .logo .logo-stack img.logo-mark { height: 70px !important; max-height: 70px !important; }
html body .top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-text,
.top_head .d-flex .logo .logo-stack img.logo-text { height: 42px !important; max-height: 42px !important; }
html body .top_head .d-flex.justify-content-between { min-height: 76px !important; }
@media (min-width: 992px) {
html body .top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-mark { height: 80px !important; max-height: 80px !important; }
html body .top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-text { height: 48px !important; max-height: 48px !important; }
html body .top_head .d-flex.justify-content-between { min-height: 88px !important; }
}
@media (max-width: 360px) {
html body .top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-mark { height: 60px !important; max-height: 60px !important; }
html body .top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-text { height: 36px !important; max-height: 36px !important; }
html body .top_head .d-flex.justify-content-between { min-height: 66px !important; }
}
/* === MOBILE SEARCH MODAL — fullscreen overlay (v2 fix 2026-05-03) === */
#turbo-search-modal {
display: none;
position: fixed !important;
inset: 0;
z-index: 9999 !important;
}
#turbo-search-modal.is-open {
display: block !important;
}
#turbo-search-modal .ts-backdrop {
position: fixed;
inset: 0;
background: rgba(4, 11, 27, 0.78);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
z-index: 1;
}
#turbo-search-modal .ts-panel {
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
max-width: 720px;
background: #0d1424;
border-bottom: 1px solid rgba(232, 204, 133, 0.22);
box-shadow: 0 8px 24px rgba(0,0,0,.5);
z-index: 2;
max-height: 100vh;
display: flex;
flex-direction: column;
}
#turbo-search-modal .ts-head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 14px 12px;
background: linear-gradient(180deg, #182838 0%, #0d1424 100%);
border-bottom: 1px solid rgba(232, 204, 133, 0.16);
}
#turbo-search-modal .ts-head > i.fa-magnifying-glass {
color: #E8CC85;
font-size: 18px;
}
#turbo-search-modal #turbo-search-input {
flex: 1;
background: rgba(13, 20, 36, .7);
border: 1px solid rgba(232, 204, 133, .25);
border-radius: 8px;
padding: 10px 12px;
color: #fff;
font-size: 15px;
outline: none;
-webkit-appearance: none;
appearance: none;
}
#turbo-search-modal #turbo-search-input::placeholder { color: rgba(255,255,255,.45); }
#turbo-search-modal #turbo-search-input:focus { border-color: #E8CC85; }
#turbo-search-modal .ts-close {
background: transparent;
border: 0;
color: #E8CC85;
font-size: 22px;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
cursor: pointer;
}
#turbo-search-modal .ts-close:hover { background: rgba(232, 204, 133, .12); }
#turbo-search-modal .ts-results {
flex: 1;
overflow-y: auto;
padding: 10px 12px 24px;
-webkit-overflow-scrolling: touch;
}
#turbo-search-modal .ts-hint {
color: rgba(255, 255, 255, .55);
font-size: 13px;
padding: 18px 6px;
text-align: center;
}
#turbo-search-modal .ts-hint i { color: #E8CC85; margin-right: 6px; }
#turbo-search-modal .ts-empty {
color: rgba(255, 255, 255, .65);
font-size: 13px;
padding: 24px 8px;
text-align: center;
}
#turbo-search-modal .ts-empty strong { color: #E8CC85; }
#turbo-search-modal .ts-tile {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 8px;
border-radius: 10px;
color: #fff;
text-decoration: none;
border: 1px solid transparent;
transition: background .15s ease, border-color .15s ease;
}
#turbo-search-modal .ts-tile + .ts-tile { margin-top: 6px; }
#turbo-search-modal .ts-tile:hover {
background: rgba(232, 204, 133, .07);
border-color: rgba(232, 204, 133, .25);
}
#turbo-search-modal .ts-tile img {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 8px;
background: #0a0e1a;
flex-shrink: 0;
}
#turbo-search-modal .ts-tile-title {
color: #fff;
font-weight: 600;
font-size: 14px;
line-height: 1.2;
}
#turbo-search-modal .ts-tile-meta {
color: #E8CC85;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .04em;
margin-top: 2px;
}
@media (min-width: 768px) {
#turbo-search-modal .ts-panel {
top: 8vh;
max-height: 84vh;
border-radius: 14px;
border: 1px solid rgba(232, 204, 133, 0.22);
}
}
/* === HOMEPAGE GAME CARD POLISH (2026-05-03) === */
.casino-game-card,
.casino-card {
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)) , #0d1424 !important;
border: 1px solid rgba(226, 185, 114, 0.18) !important;
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.casino-game-card:hover,
.casino-game-card.is-active,
.casino-card:hover {
border-color: rgba(226, 185, 114, 0.7) !important;
box-shadow: 0 6px 18px rgba(226, 185, 114, 0.18), 0 4px 14px rgba(0,0,0,0.55) !important;
transform: translateY(-2px) !important;
}
.casino-game-card .game-title-bar,
.casino-card .tile-name {
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85)) !important;
color: #ffffff !important;
font-weight: 600 !important;
font-size: 12.5px !important;
letter-spacing: .01em !important;
padding: 14px 8px 6px !important;
line-height: 1.15 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.casino-game-card img,
.casino-card img {
transition: transform .25s ease !important;
}
.casino-game-card:hover img,
.casino-card:hover img {
transform: scale(1.05) !important;
}
/* === HERO BANNER ARROWS — make visible (was hidden offscreen) === */
.hero-arrow,
.hero-arrow-prev,
.hero-arrow-next {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
background: rgba(0, 0, 0, 0.5) !important;
border: 1px solid rgba(255, 255, 255, 0.6) !important;
color: #fff !important;
font-size: 18px !important;
line-height: 1 !important;
z-index: 5 !important;
cursor: pointer !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
transition: background .15s ease, transform .15s ease !important;
pointer-events: auto !important;
visibility: visible !important;
opacity: 1 !important;
}
.hero-arrow-prev { left: 8px !important; }
.hero-arrow-next { right: 8px !important; }
.hero-arrow:hover,
.hero-arrow-prev:hover,
.hero-arrow-next:hover {
background: rgba(226, 185, 114, 0.85) !important;
color: #0a0e1a !important;
transform: translateY(-50%) scale(1.08) !important;
}
@media (min-width: 992px) {
.hero-arrow,
.hero-arrow-prev,
.hero-arrow-next { width: 44px !important; height: 44px !important; font-size: 22px !important; }
.hero-arrow-prev { left: 16px !important; }
.hero-arrow-next { right: 16px !important; }
}
/* Hero must be the positioning context for absolute arrows */
.hero, .top_banner_sec, [class*='hero-slider'], [class*='swiper-container'][class*='hero'] {
position: relative !important;
}
/* === DROPDOWN Z-INDEX FIX (was hiding behind hero banner) === */
header.beforeheader, header.header, .top_head {
position: relative !important;
z-index: 100000 !important;
}
.headerRight, .turbo-user-dropdown, .turbo-user-dropdown.dropdown {
position: relative !important;
z-index: 100001 !important;
}
.dropdown-menu, .dropdown-menu.show, .turbo-user-dropdown .dropdown-menu {
z-index: 100002 !important;
}
/* Ensure hero/banner doesn't trap stacking context above header */
.hero, .top_banner_sec, [class*='hero-slider'] { z-index: 1 !important; }
/* Fix balance pill icon-removed: tighten spacing */
.turbo-balance-pill { gap: 0 !important; }
/* === DROPDOWN: ESCAPE PARENT STACKING CONTEXT (was hidden behind hero) === */
/* Hero/banner creates its own stacking context (transforms, swiper styles), causing
the dropdown's z-index to be confined inside the header's stacking context.
Switching to position:fixed pulls the menu out to the viewport's top stacking layer. */
.turbo-user-dropdown .dropdown-menu {
position: fixed !important;
top: 64px !important;
right: 8px !important;
left: auto !important;
z-index: 2147483647 !important;
}
@media (min-width: 992px) {
.turbo-user-dropdown .dropdown-menu {
top: 84px !important;
right: 16px !important;
}
}
/* === DROPDOWN POSITION FIX v3 (override prior top:100% rule with higher specificity) === */
html body .turbo-user-dropdown.dropdown .dropdown-menu,
html body .turbo-user-dropdown .dropdown-menu.dropdown-menu-end,
html body .turbo-user-dropdown .dropdown-menu.show {
position: fixed !important;
top: 64px !important;
right: 8px !important;
left: auto !important;
bottom: auto !important;
z-index: 2147483647 !important;
}
@media (min-width: 992px) {
html body .turbo-user-dropdown.dropdown .dropdown-menu,
html body .turbo-user-dropdown .dropdown-menu.dropdown-menu-end,
html body .turbo-user-dropdown .dropdown-menu.show {
top: 84px !important;
right: 16px !important;
}
}
/* ============================================================
MOBILE HEADER + FOOTER FIX (2026-05-03)
Audit findings:
- Logo mark was 50px (<=360) / 59px (>=361) — spec: 60 / 70.
- Header pad was 0.5px top+bot — visibly squished. Restore breathing room with min-height 70.
- Tap targets: deposit-btn icon-only mode = 13x36 (FAIL 44x44), user btn 36x36 (FAIL).
- Footer bg already extends full viewport on mobile; the side gap the user
sees is the 16px L/R padding on .footer-grid / .footer-disclaimer / .footer-bottom
(content inset, not a bg gap). Tighten on <=575.98px.
============================================================ */
/* --- Header: restore vertical breathing room (override prior 0.5px) --- */
html body .header.beforeheader,
html body header.header.beforeheader {
padding: 4px 0 !important;
}
html body .top_head {
padding: 4px 0 !important;
}
@media (max-width: 991.98px) {
html body .top_head .d-flex.justify-content-between {
min-height: 70px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
}
/* --- Logo mark sized per spec: 70px on >=361, 60px on <=360 --- */
@media (min-width: 361px) and (max-width: 991.98px) {
html body .top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-mark {
height: 70px !important;
max-height: 70px !important;
}
html body .top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-text {
height: 38px !important;
max-height: 38px !important;
}
}
@media (max-width: 360px) {
html body .top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-mark {
height: 60px !important;
max-height: 60px !important;
}
html body .top_head .d-flex.justify-content-between .logo a.logo-stack img.logo-text {
height: 32px !important;
max-height: 32px !important;
}
}
/* --- Mobile spacing between logo and right-side group --- */
@media (max-width: 575.98px) {
html body .top_head .d-flex.justify-content-between { gap: 8px !important; padding-left: 8px !important; padding-right: 8px !important; }
html body .top_head .d-flex.justify-content-between .logo a.logo-stack { gap: 6px !important; padding-left: 0 !important; }
}
/* --- Tap targets: deposit icon button + user icon button >= 44x44 --- */
@media (max-width: 575.98px) {
html body .headerRight .turbo-deposit-btn {
min-width: 44px !important;
height: 44px !important;
padding: 0 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
html body .headerRight .turbo-balance-pill {
height: 44px !important;
display: inline-flex !important;
align-items: center !important;
}
html body .headerRight .turbo-user-dropdown .dropdown-toggle {
min-width: 44px !important;
height: 44px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
html body .headerRight .btn_signin {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
}
}
/* --- Footer: kill content inset on mobile so it doesn't look like a side gap --- */
@media (max-width: 575.98px) {
html body footer.turbo-footer {
padding-left: 0 !important;
padding-right: 0 !important;
}
html body footer.turbo-footer .footer-grid,
html body footer.turbo-footer .footer-disclaimer,
html body footer.turbo-footer .footer-bottom {
max-width: 100% !important;
padding-left: 12px !important;
padding-right: 12px !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
html body footer.turbo-footer .license-row {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* --- Footer: ensure bg extends full viewport at every breakpoint --- */
html body footer.turbo-footer {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
/* End MOBILE HEADER + FOOTER FIX */
/* === SHOW SOCIAL ICONS ON MOBILE (override prior display:none) === */
/* Vertical strip on right edge, sitting above the bottom nav, smaller + dimmer */
@media (max-width: 991.98px) {
.social-icons {
display: flex !important;
position: fixed !important;
right: 6px !important;
top: auto !important;
bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
margin-top: 0 !important;
z-index: 60 !important;
opacity: .55 !important;
flex-direction: column !important;
gap: 4px !important;
}
.social-icons:hover, .social-icons:focus-within { opacity: 1 !important; }
.social-icons ul {
flex-direction: column !important;
gap: 4px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
.social-icons li a {
width: 32px !important;
height: 32px !important;
font-size: 14px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
box-shadow: 0 2px 6px rgba(0,0,0,.5) !important;
}
.social-icons li a svg {
width: 16px !important;
height: 16px !important;
}
}
@media (max-width: 360px) {
.social-icons li a { width: 28px !important; height: 28px !important; }
.social-icons li a svg { width: 14px !important; height: 14px !important; }
}
/* === FLOATING SOCIAL V2 (black/gold backdrop-blur per user spec 2026-05-03) === */
.floating-social-v2 {
position: fixed !important;
right: 16px !important;
top: 33.333% !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
z-index: 60 !important;
}
.floating-social-v2 a {
width: 40px !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
background: rgba(0, 0, 0, 0.6) !important;
border: 1px solid rgba(201, 162, 39, 0.4) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
transition: border-color .2s ease, transform .2s ease !important;
text-decoration: none !important;
}
.floating-social-v2 a:hover,
.floating-social-v2 a:focus-visible {
border-color: #C9A227 !important;
transform: scale(1.06) !important;
}
.floating-social-v2 a img {
width: 22px !important;
height: 22px !important;
object-fit: contain !important;
display: block !important;
}
@media (max-width: 991.98px) {
.floating-social-v2 {
right: 8px !important;
top: auto !important;
bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
gap: 8px !important;
opacity: .7 !important;
}
.floating-social-v2:hover, .floating-social-v2:focus-within { opacity: 1 !important; }
.floating-social-v2 a { width: 36px !important; height: 36px !important; }
.floating-social-v2 a img { width: 18px !important; height: 18px !important; }
}
@media (max-width: 360px) {
.floating-social-v2 a { width: 32px !important; height: 32px !important; }
.floating-social-v2 a img { width: 16px !important; height: 16px !important; }
}
.social-icons { display: none !important; }
/* === GAME CARD 2-TAP GLOW OVERLAY === */
.casino-game-card { position: relative !important; }
.casino-game-card .glow-overlay,
.casino-card .glow-overlay {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center, rgba(226, 185, 114, 0.25), rgba(0,0,0,0.6) 70%);
z-index: 3;
pointer-events: none;
border-radius: inherit;
border: 2px solid rgba(226, 185, 114, 0.85);
box-shadow: inset 0 0 24px rgba(226, 185, 114, 0.45), 0 0 18px rgba(226, 185, 114, 0.4);
animation: glow-pulse 1.5s ease-in-out infinite;
}
.casino-game-card.is-tapped .glow-overlay,
.casino-card.is-tapped .glow-overlay,
.casino-game-card .glow-overlay.block { display: flex !important; }
.casino-game-card .glow-overlay::after,
.casino-card .glow-overlay::after {
content: '';
width: 56px; height: 56px;
border-radius: 50%;
border: 3px solid #ffffff;
background: rgba(0,0,0,0.4) url("data:image/svg+xml;utf8,") no-repeat center / 24px 24px;
box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
@keyframes glow-pulse {
0%, 100% { box-shadow: inset 0 0 24px rgba(226, 185, 114, 0.45), 0 0 18px rgba(226, 185, 114, 0.4); }
50% { box-shadow: inset 0 0 32px rgba(226, 185, 114, 0.65), 0 0 28px rgba(226, 185, 114, 0.6); }
}
/* === SQUARE BRAND-FILLED SOCIAL V3 (rounded-2xl 16px, full brand color, scale 1.10 on hover) === */
.floating-social-v2 {
gap: 12px !important;
/* Mobile bottom positioning kept from earlier override */
}
.floating-social-v2 a {
width: 40px !important;
height: 40px !important;
border-radius: 16px !important;
border: 0 !important;
background-color: #25D366 !important; /* default; per-icon overrides below */
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45) !important;
transition: transform .2s ease, box-shadow .2s ease !important;
}
.floating-social-v2 a:hover,
.floating-social-v2 a:focus-visible {
transform: scale(1.10) !important;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55) !important;
border-color: transparent !important;
}
.floating-social-v2 a:nth-child(1) { background-color: #25D366 !important; } /* WhatsApp */
.floating-social-v2 a:nth-child(2) { background-color: #229ED9 !important; } /* Telegram */
.floating-social-v2 a:nth-child(3) {
background: linear-gradient(135deg, #F56040 0%, #C13584 50%, #405DE6 100%) !important;
} /* Instagram */
.floating-social-v2 a:nth-child(4) { background-color: #1877F2 !important; } /* Facebook */
.floating-social-v2 a img {
width: 24px !important;
height: 24px !important;
}
@media (max-width: 991.98px) {
.floating-social-v2 a img { width: 20px !important; height: 20px !important; }
}
/* === HEADER PADDING 0.5px (per user spec, override audit's 4px) === */
html body .top_head .d-flex.justify-content-between {
padding-top: 0.5px !important;
padding-bottom: 0.5px !important;
}
html body .top_head { padding-top: 0.5px !important; padding-bottom: 0.5px !important; }
@media (max-width: 575.98px) {
html body .top_head .d-flex.justify-content-between {
min-height: 64px !important; /* hugs the 60px logo + 4px breathing */
}
}
@media (min-width: 992px) {
html body .top_head .d-flex.justify-content-between {
min-height: 84px !important; /* hugs the 80px logo */
}
}
/* === GAME CARD: IMAGE TOP-ALIGNED + SMOOTHER ANIMATION === */
.casino-game-card,
.casino-card {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
overflow: hidden !important;
transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, border-color .25s ease !important;
}
.casino-game-card img:not(.glow-overlay):not(.fa),
.casino-card img:not(.glow-overlay):not(.fa) {
display: block !important;
width: 100% !important;
aspect-ratio: 16 / 10 !important;
object-fit: cover !important;
object-position: top center !important;
flex: 0 0 auto !important;
align-self: flex-start !important;
transition: transform .35s cubic-bezier(.4,0,.2,1) !important;
}
/* Title bar pinned to bottom of card */
.casino-game-card .game-title-bar,
.casino-card .tile-name {
margin-top: auto !important;
align-self: stretch !important;
}
/* Smoother JS-driven 2-tap animation: scale + shadow */
.casino-game-card.is-tapped,
.casino-card.is-tapped {
transform: scale(1.04) !important;
box-shadow: 0 12px 28px rgba(226, 185, 114, 0.35), 0 6px 18px rgba(0,0,0,0.6) !important;
border-color: rgba(226, 185, 114, 0.85) !important;
z-index: 4 !important;
position: relative !important;
}
.casino-game-card.is-tapped img:not(.glow-overlay),
.casino-card.is-tapped img:not(.glow-overlay) {
transform: scale(1.06) !important;
}
/* Glow overlay enter animation */
.casino-game-card .glow-overlay,
.casino-card .glow-overlay {
transition: opacity .2s ease !important;
opacity: 0;
}
.casino-game-card.is-tapped .glow-overlay,
.casino-card.is-tapped .glow-overlay {
opacity: 1 !important;
}
/* === SOCIAL V3: LEFT MIDDLE position (user spec 2026-05-03) === */
.floating-social-v2 {
right: auto !important;
left: 16px !important;
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
flex-direction: column !important;
gap: 12px !important;
}
@media (max-width: 991.98px) {
.floating-social-v2 {
left: 8px !important;
right: auto !important;
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
gap: 10px !important;
}
}
@media (max-width: 360px) {
.floating-social-v2 { left: 4px !important; gap: 8px !important; }
}
/* === GAME CARD: remove default play overlay; only show on tap (.is-tapped) === */
/* Kill the legacy ::after play button that was always-on for active card */
.casino-game-card::after,
.casino-card::after { content: none !important; display: none !important; }
.casino-game-card.is-active::after,
.casino-game-card:hover::after,
.casino-card:hover::after { content: none !important; display: none !important; opacity: 0 !important; }
/* Reset any always-visible play-btn / guest-overlay UNLESS card is tapped */
.casino-game-card .play-btn,
.casino-game-card .play-overlay,
.casino-card .play-btn,
.casino-card .play-overlay {
opacity: 0 !important;
transition: opacity .25s ease !important;
}
.casino-game-card.is-tapped .play-btn,
.casino-game-card.is-tapped .play-overlay,
.casino-card.is-tapped .play-btn,
.casino-card.is-tapped .play-overlay { opacity: 1 !important; }
/* === IMPROVED GAME CARD ANIMATIONS === */
.casino-game-card,
.casino-card {
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease, border-color .25s ease !important;
will-change: transform !important;
}
.casino-game-card:hover:not(.is-tapped),
.casino-card:hover:not(.is-tapped) {
transform: translateY(-4px) scale(1.02) !important;
box-shadow: 0 14px 28px -8px rgba(0,0,0,0.65), 0 6px 12px -4px rgba(226,185,114,0.25) !important;
border-color: rgba(226,185,114,0.45) !important;
}
.casino-game-card.is-tapped,
.casino-card.is-tapped {
transform: scale(1.06) translateY(-2px) !important;
box-shadow: 0 18px 36px -10px rgba(226,185,114,0.55), 0 8px 18px rgba(0,0,0,0.7) !important;
border-color: rgba(226,185,114,0.95) !important;
z-index: 5 !important;
}
.casino-game-card img,
.casino-card img {
transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) !important;
}
.casino-game-card.is-tapped img:not(.glow-overlay),
.casino-card.is-tapped img:not(.glow-overlay) {
transform: scale(1.08) !important;
}
.casino-game-card .glow-overlay {
transition: opacity .3s ease, transform .3s ease !important;
transform: scale(.9) !important;
}
.casino-game-card.is-tapped .glow-overlay {
transform: scale(1) !important;
}
/* === SOCIAL V4: RIGHT MIDDLE (user reverted from left) === */
.floating-social-v2 {
left: auto !important;
right: 16px !important;
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
}
@media (max-width: 991.98px) {
.floating-social-v2 {
left: auto !important;
right: 8px !important;
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
}
}
@media (max-width: 360px) {
.floating-social-v2 { left: auto !important; right: 4px !important; }
}
/* === PROVIDER PILLS PADDING -2px (user request 2026-05-03) === */
.provider-pill,
.provider-pill:link,
.provider-pill:visited {
padding: 10px 16px !important; /* was 12px 18px → -2px each side */
}
@media (max-width: 575.98px) {
.provider-pill,
.provider-pill:link,
.provider-pill:visited { padding: 8px 14px !important; }
}
.provider-pills { padding: 10px 0 !important; }
/* === SEARCH MODAL Z-INDEX FIX (must beat header's 100000) === */
#turbo-search-modal { z-index: 2147483640 !important; }
#turbo-search-modal .ts-backdrop { z-index: 1 !important; }
#turbo-search-modal .ts-panel { z-index: 2 !important; }
/* Make panel cover full height when results exist (was only top sliver) */
#turbo-search-modal .ts-panel {
bottom: 0 !important;
height: 100vh !important;
height: 100dvh !important;
max-height: none !important;
overflow: hidden !important;
}
#turbo-search-modal .ts-results {
flex: 1 1 auto !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 14px !important;
min-height: 0 !important;
}
#turbo-search-modal .ts-head {
flex: 0 0 auto !important;
background: #0d1424 !important;
border-bottom: 1px solid rgba(232, 204, 133, 0.18) !important;
}
/* When modal open, lock body scroll behind */
body.turbo-search-open { overflow: hidden !important; }