 * {margin:0;padding:0;box-sizing:border-box;}
:root {--primary-gold:#FFD700;--primary-dark:#1a1a2e;--secondary-dark:#16213e;--accent-blue:#0f3460;--text-light:#ffffff;--text-gray:#a0a0a0;--success-green:#00d084;--border-color:#2a2a3e;--cream-bg:#f5f5f0;--sidebar-width:230px;}
body {font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:linear-gradient(135deg,var(--primary-dark) 0%,var(--secondary-dark) 100%);color:var(--text-light);line-height:1.6;overflow-x:hidden;}
/* ============================================================           SITE LAYOUT:LEFT SIDEBAR (fixed) + MAIN + RIGHT SIDEBAR        ============================================================ */        .site-layout {display:flex;min-height:100vh;}
/* ---- LEFT SIDEBAR (acts as header/nav) ---- */        .sidebar-left {width:var(--sidebar-width);min-width:var(--sidebar-width);background:rgba(10,10,28,0.97);border-right:1px solid var(--border-color);position:fixed;top:0;left:0;height:100vh;overflow-y:auto;overflow-x:hidden;z-index:900;display:flex;flex-direction:column;}
.sidebar-left::-webkit-scrollbar {width:4px;}
.sidebar-left::-webkit-scrollbar-thumb {background:rgba(255,215,0,0.2);border-radius:4px;}
/* Logo area */        .sidebar-logo-area {padding:2rem 1.2rem 1.5rem;border-bottom:1px solid var(--border-color);position:relative;overflow:hidden;text-align:center;}
.sidebar-logo-area::before {content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,215,0,0.35),transparent);animation:logoShine 3s infinite;}
@keyframes logoShine {0% {left:-60%;}
100% {left:120%;}
}
.sidebar-logo {font-size:2.8rem;font-weight:900;background:linear-gradient(135deg,var(--primary-gold) 0%,#FFA500 50%,#FFD700 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:4px;display:block;text-decoration:none;line-height:1.1;}
.sidebar-logo-sub {display:block;font-size:0.72rem;color:var(--text-gray);letter-spacing:1px;margin-top:0.4rem;}
/* Nav menu */        .sidebar-nav {padding:0.8rem 0;flex:1;}
.nav-item {position:relative;}
.nav-item > .nav-link {display:flex;align-items:center;justify-content:space-between;padding:0.65rem 1.2rem;color:var(--text-gray);text-decoration:none;font-size:0.92rem;font-weight:500;transition:all 0.2s;cursor:pointer;border-left:3px solid transparent;}
.nav-item > .nav-link:hover,.nav-item > .nav-link.active {color:var(--primary-gold);background:rgba(255,215,0,0.06);border-left-color:var(--primary-gold);}
.nav-link .nav-icon {font-size:1rem;margin-right:0.6rem;opacity:0.8;}
.nav-link .nav-label {flex:1;}
.nav-link .nav-arrow {font-size:0.7rem;transition:transform 0.25s;opacity:0.6;}
.nav-item.open > .nav-link .nav-arrow {transform:rotate(90deg);}
/* Sub-menu (dropdown appearing to the right) */        .sub-menu {display:none;background:rgba(0,0,0,0.3);border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);max-height:220px;overflow-y:auto;}
.sub-menu::-webkit-scrollbar {width:3px;}
.sub-menu::-webkit-scrollbar-thumb {background:rgba(255,215,0,0.2);}
.nav-item.open > .sub-menu {display:block;}
.sub-menu a {display:block;padding:0.45rem 1.2rem 0.45rem 2.4rem;color:var(--text-gray);text-decoration:none;font-size:0.83rem;transition:all 0.2s;}
.sub-menu a:hover {color:var(--primary-gold);background:rgba(255,215,0,0.05);}
/* Language selector in sidebar */        .sidebar-language {border-top:1px solid var(--border-color);padding:0.8rem 1.2rem;}
.sidebar-language h5 {color:var(--text-gray);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:0.3rem 0;user-select:none;}
.sidebar-language h5:hover {color:var(--primary-gold);}
.lang-toggle-arrow {font-size:0.65rem;transition:transform 0.25s;opacity:0.6;}
.sidebar-language.open .lang-toggle-arrow {transform:rotate(90deg);}
.lang-list {display:none;flex-direction:column;gap:0.1rem;margin-top:0.5rem;}
.sidebar-language.open .lang-list {display:flex;}
.lang-list a {display:flex;align-items:center;gap:0.5rem;color:var(--text-gray);text-decoration:none;font-size:0.82rem;padding:0.3rem 0.5rem;border-radius:6px;transition:all 0.2s;}
.lang-list a:hover,.lang-list a.active {color:var(--primary-gold);background:rgba(255,215,0,0.07);}
/* ---- CONTENT AREA (next to left sidebar) ---- */        .content-area {margin-left:var(--sidebar-width);flex:1;display:grid;grid-template-columns:1fr 240px;gap:1.5rem;padding:0 1rem;max-width:calc(1400px - var(--sidebar-width));align-items:start;}
/* ---- MAIN CONTENT ---- */        .main-content {min-width:0;padding:1.5rem 0;}
/* ---- RIGHT SIDEBAR ---- */        .sidebar-right {padding:1.5rem 0;position:sticky;top:0;}
.sidebar-widget {background:rgba(15,52,96,0.2);border:1px solid var(--border-color);border-radius:15px;padding:1.2rem;margin-bottom:1.2rem;}
.sidebar-widget h4 {color:var(--primary-gold);font-size:0.95rem;margin-bottom:0.8rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border-color);}
.sidebar-news-item {display:flex;gap:0.7rem;margin-bottom:0.9rem;padding-bottom:0.9rem;border-bottom:1px solid var(--border-color);}
.sidebar-news-item:last-child {border-bottom:none;margin-bottom:0;padding-bottom:0;}
.sidebar-news-img {width:55px;height:45px;border-radius:6px;background:var(--accent-blue);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem;}
.sidebar-news-item a {color:var(--text-light);text-decoration:none;font-size:0.82rem;line-height:1.4;font-weight:500;}
.sidebar-news-item a:hover {color:var(--primary-gold);}
.sidebar-bm-row {display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0;border-bottom:1px solid var(--border-color);font-size:0.85rem;}
.sidebar-bm-row:last-child {border-bottom:none;}
.sidebar-bm-name {color:var(--text-light);font-weight:600;}
.sidebar-bm-rating {color:#FFA500;font-size:0.75rem;}
.sidebar-visit {background:linear-gradient(135deg,#D4A017,#B8860B);color:white;padding:0.3rem 0.7rem;border-radius:5px;font-size:0.75rem;font-weight:700;text-decoration:none;}
/* ============================================================           MOBILE HEADER (replaces fixed left sidebar on mobile)        ============================================================ */        .mobile-header {display:none;position:fixed;top:0;left:0;right:0;background:rgba(26,26,46,0.97);backdrop-filter:blur(10px);z-index:1000;border-bottom:1px solid var(--border-color);padding:0.8rem 1rem;align-items:center;justify-content:space-between;}
.mobile-logo {font-size:1.6rem;font-weight:900;background:linear-gradient(135deg,var(--primary-gold),#FFA500);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:2px;position:absolute;left:50%;transform:translateX(-50%);}
.mobile-search-icon {background:none;border:none;color:var(--primary-gold);font-size:1.3rem;cursor:pointer;padding:0.3rem;}
.mobile-hamburger {display:flex;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:0.3rem;}
.mobile-hamburger span {width:25px;height:3px;background:var(--primary-gold);border-radius:3px;display:block;}
/* Mobile drawer overlay */        .mobile-nav-overlay {display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1100;}
.mobile-nav-overlay.active {display:block;}
.mobile-nav-drawer {position:fixed;top:0;left:0;width:270px;height:100%;background:rgba(10,10,28,0.99);z-index:1200;transform:translateX(-100%);transition:transform 0.3s ease;overflow-y:auto;border-right:1px solid var(--border-color);}
.mobile-nav-drawer.open {transform:translateX(0);}
/* Mobile search overlay */        .mobile-search-overlay {display:none;position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:2000;align-items:flex-start;justify-content:center;padding-top:80px;}
.mobile-search-overlay.active {display:flex;}
.mobile-search-form {background:var(--primary-dark);border:1px solid var(--border-color);border-radius:15px;padding:2rem;width:90%;max-width:500px;}
.mobile-search-form h3 {color:var(--primary-gold);margin-bottom:1rem;}
.mobile-search-form input {width:100%;padding:0.8rem 1rem;border-radius:8px;border:1px solid var(--border-color);background:rgba(255,255,255,0.05);color:var(--text-light);font-size:1rem;margin-bottom:0.8rem;}
.mobile-search-form input::placeholder {color:var(--text-gray);}
.mobile-search-actions {display:flex;gap:0.8rem;}
.mobile-search-actions button {flex:1;padding:0.7rem;border-radius:8px;border:none;cursor:pointer;font-weight:700;}
.search-submit {background:linear-gradient(135deg,var(--primary-gold),#FFA500);color:var(--primary-dark);}
.search-cancel {background:rgba(255,255,255,0.1);color:var(--text-light);}
/* ============================================================           HERO        ============================================================ */        .hero {padding:2rem 0 1.5rem;text-align:center;}
.hero h1 {font-size:2.4rem;font-weight:800;margin-bottom:1rem;background:linear-gradient(135deg,var(--primary-gold),#FFA500);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2;}
.hero p {font-size:1rem;color:var(--text-gray);margin:0 auto 1.5rem;}
.hero-stats {display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.5rem;}
.stat-card {background:linear-gradient(135deg,rgba(15,52,96,0.3),rgba(26,26,46,0.5));padding:1.2rem;border-radius:12px;border:1px solid var(--border-color);}
.stat-number {font-size:1.8rem;font-weight:800;color:var(--primary-gold);display:block;}
.stat-label {color:var(--text-gray);font-size:0.85rem;margin-top:0.2rem;}
/* ============================================================           SECTION SHARED        ============================================================ */        .section-header {text-align:center;margin-bottom:1.5rem;}
.section-header h2 {font-size:1.8rem;margin-bottom:0.5rem;color:var(--primary-gold);}
.section-header p {color:var(--text-gray);font-size:0.95rem;}
/* ============================================================           BOOKMAKERS GRID — 3 cards in one row,equal height        ============================================================ */        .featured-section {margin:2.5rem 0;}
.bookmaker-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;}
.bookmaker-card {background:linear-gradient(135deg,rgba(15,52,96,0.2),rgba(26,26,46,0.4));border:1px solid var(--border-color);border-radius:16px;overflow:hidden;transition:all 0.3s;display:flex;flex-direction:column;}
.bookmaker-card:hover {transform:translateY(-4px);border-color:var(--primary-gold);box-shadow:0 8px 30px rgba(255,215,0,0.18);}
.bookmaker-header {background:linear-gradient(135deg,var(--accent-blue),var(--secondary-dark));padding:1rem 1.2rem;display:flex;justify-content:space-between;align-items:center;}
.bookmaker-rank {background:var(--primary-gold);color:var(--primary-dark);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;}
.bookmaker-logo {font-size:1.2rem;font-weight:700;color:var(--text-light);}
.bookmaker-rating {background:var(--success-green);padding:0.3rem 0.8rem;border-radius:25px;font-weight:700;font-size:0.9rem;}
.bookmaker-body {padding:1.2rem;flex:1;display:flex;flex-direction:column;}
.bonus-highlight {background:linear-gradient(135deg,rgba(255,215,0,0.1),rgba(255,165,0,0.1));padding:0.7rem;border-radius:8px;margin-bottom:0.8rem;border-left:3px solid var(--primary-gold);}
.bonus-highlight h4 {color:var(--primary-gold);margin-bottom:0.2rem;font-size:0.9rem;}
.bonus-amount {font-size:1.2rem;font-weight:800;color:var(--text-light);}
.features-list {list-style:none;margin:0.6rem 0;flex:1;}
.features-list li {padding:0.3rem 0;display:flex;align-items:center;gap:0.5rem;color:var(--text-gray);font-size:0.85rem;}
.features-list li::before {content:"✓";color:var(--success-green);font-weight:800;}
.cta-buttons {gap:0.7rem;margin-top:1rem;}
.btn {padding:0.7rem 1rem;border-radius:8px;font-weight:700;text-decoration:none;text-align:center;transition:all 0.3s;border:none;cursor:pointer;font-size:0.88rem;flex:1;}
.btn-primary {background:linear-gradient(135deg,var(--primary-gold),#FFA500);color:var(--primary-dark);}
.btn-primary:hover {transform:scale(1.04);box-shadow:0 4px 16px rgba(255,215,0,0.35);}
.btn-secondary {background:transparent;border:2px solid var(--border-color);color:var(--text-light);}
.btn-secondary:hover {border-color:var(--primary-gold);background:rgba(255,215,0,0.08);}
/* ============================================================           TOP 100 TABLE        ============================================================ */        .top100-section {margin:2.5rem 0;}
.top100-table {width:100%;background:transparent;border-radius:10px;overflow:hidden;border:1px solid var(--border-color);}
.top100-thead {background:linear-gradient(135deg,var(--accent-blue),var(--secondary-dark));display:grid;grid-template-columns:40px 130px 1fr 80px 170px;padding:0.5rem 0.8rem;gap:0.5rem;align-items:center;}
.top100-thead span {color:white;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;}
.top100-row {display:grid;grid-template-columns:40px 130px 1fr 80px 170px;padding:0.38rem 0.8rem;gap:0.5rem;align-items:center;border-bottom:1px solid var(--border-color);transition:background 0.2s;}
.top100-row:last-child {border-bottom:none;}
.top100-row:hover {background:rgba(255,215,0,0.04);}
.top100-row.ad-row {background:rgba(255,215,0,0.07);}
.top100-rank {font-size:0.82rem;font-weight:700;color:#aaa;}
.top100-logo-box {border-radius:5px;padding:0.3rem 0.6rem;display:flex;align-items:center;justify-content:center;min-height:32px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);}
.top100-logo-box span {color:white;font-weight:700;font-size:0.82rem;}
.top100-info {display:flex;align-items:center;gap:0.5rem;}
.top100-verified {color:#FFA500;font-size:0.8rem;}
.top100-visits {color:#ffffff;font-size:0.78rem;}
.top100-rating-box {display:flex;flex-direction:column;align-items:center;}
.top100-rating-score {font-size:0.95rem;font-weight:800;color:#ffffff;line-height:1;}
.top100-rating-stars {color:#D4A017;font-size:0.65rem;}
.top100-na {color:#999;font-size:0.78rem;}
.top100-ad-badge {background:var(--primary-gold);color:var(--primary-dark);padding:0.18rem 0.4rem;border-radius:4px;font-size:0.68rem;font-weight:700;}
.top100-actions {display:flex;gap:0.3rem;}
.t-visit-btn {background:linear-gradient(135deg,#D4A017,#B8860B);color:white;padding:0.3rem 0.8rem;border-radius:5px;border:none;font-weight:700;font-size:0.74rem;cursor:pointer;text-decoration:none;display:inline-block;transition:all 0.2s;}
.t-visit-btn:hover {transform:scale(1.03);}
.t-review-btn {background:#2d2d2d;color:white;padding:0.3rem 0.8rem;border-radius:5px;border:none;font-weight:700;font-size:0.74rem;cursor:pointer;text-decoration:none;display:inline-block;}
.t-review-btn:hover {background:#3d3d3d;}
.sports-section {margin:2.5rem 0;background:linear-gradient(135deg,rgba(15,52,96,0.2),rgba(26,26,46,0.3));border-radius:16px;}
.sports-grid {display:flex;flex-wrap:nowrap;gap:0.5rem;margin-top:1.2rem;overflow-x:auto;padding-bottom:0.4rem;scrollbar-width:thin;scrollbar-color:var(--primary-gold) transparent;}
.sports-grid::-webkit-scrollbar {height:3px;}
.sports-grid::-webkit-scrollbar-thumb {background:var(--primary-gold);border-radius:3px;}
.sport-card {background:rgba(26,26,46,0.5);padding:0.7rem 0.5rem;border-radius:8px;text-align:center;border:2px solid var(--border-color);transition:all 0.25s;cursor:pointer;flex:0 0 auto;min-width:68px;}
.sport-card:hover {border-color:var(--primary-gold);background:rgba(15,52,96,0.3);}
.sport-card.active {border-color:var(--primary-gold);background:rgba(255,215,0,0.1);}
.sport-icon {font-size:1.4rem;margin-bottom:0.2rem;}
.sport-name {font-weight:600;color:var(--text-light);font-size:0.7rem;}
.sport-panels {margin-top:1.2rem;}
.sport-panel {display:none;}
.sport-panel.active {display:block;}
.sport-panel h4 {color:var(--primary-gold);margin-bottom:0.8rem;font-size:1rem;}
/* Sport bookmaker table — same structure as top100 */        .sport-bm-table {width:100%;background:transparent;border-radius:8px;overflow:hidden;border:1px solid var(--border-color);}
.sport-bm-thead {background:linear-gradient(135deg,var(--accent-blue),var(--secondary-dark));display:grid;grid-template-columns:40px 130px 1fr 80px 170px;padding:0.5rem 0.8rem;gap:0.5rem;align-items:center;}
.sport-bm-thead span {color:white;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;}
.sport-bm-row {display:grid;grid-template-columns:40px 130px 1fr 80px 170px;padding:0.38rem 0.8rem;gap:0.5rem;align-items:center;border-bottom:1px solid var(--border-color);transition:background 0.2s;}
.sport-bm-row:last-child {border-bottom:none;}
.sport-bm-row:hover {background:rgba(255,215,0,0.04);}
.sport-bm-row.ad-row {background:rgba(255,215,0,0.07);}
.sbm-rank {font-size:0.82rem;font-weight:700;color:#aaa;}
.sbm-logo {border-radius:5px;padding:0.3rem 0.6rem;display:flex;align-items:center;justify-content:center;min-height:32px;}
.sbm-logo span {color:white;font-weight:700;font-size:0.82rem;}
.sbm-info {display:flex;align-items:center;gap:0.5rem;}
.sbm-verified {color:#FFA500;font-size:0.8rem;}
.sbm-visits {color:#ffffff;font-size:0.78rem;}
.sbm-rating {display:flex;flex-direction:column;align-items:center;}
.sbm-score {font-size:0.95rem;font-weight:800;color:#ffffff;line-height:1;display:block;}
.sbm-stars {color:#D4A017;font-size:0.65rem;}
.sbm-na {color:#999;font-size:0.78rem;}
.sbm-actions {display:flex;gap:0.3rem;}
/* ============================================================           GUIDE SECTION        ============================================================ */        .guide-section {margin:2.5rem 0;}
.guide-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:1.2rem;}
.guide-card {background:linear-gradient(135deg,rgba(15,52,96,0.2),rgba(26,26,46,0.4));padding:1.3rem;border-radius:12px;border:1px solid var(--border-color);transition:all 0.3s;}
.guide-card:hover {border-color:var(--primary-gold);transform:translateY(-3px);}
.guide-icon {font-size:1.8rem;margin-bottom:0.6rem;}
.guide-card h3 {color:var(--primary-gold);margin-bottom:0.6rem;font-size:1rem;}
.guide-card p {color:var(--text-gray);margin-bottom:0.6rem;font-size:0.85rem;}
.guide-card a {color:var(--primary-gold);text-decoration:none;font-weight:600;font-size:0.85rem;}
.guide-card a:hover {text-decoration:underline;}
/* ============================================================           PAYMENT METHODS        ============================================================ */        .payment-section {margin:2.5rem 0;padding:1.8rem 1.2rem;background:linear-gradient(135deg,rgba(15,52,96,0.2),rgba(26,26,46,0.3));border-radius:16px;}
.payment-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:0.8rem;margin-top:1.2rem;}
.payment-card {background:rgba(255,255,255,0.95);padding:0.9rem 0.6rem;border-radius:8px;text-align:center;transition:all 0.3s;border:2px solid transparent;}
.payment-card:hover {border-color:var(--primary-gold);transform:translateY(-3px);box-shadow:0 4px 16px rgba(255,215,0,0.15);}
.payment-icon {font-size:1.8rem;margin-bottom:0.3rem;}
.payment-name {color:var(--primary-dark);font-weight:600;font-size:0.78rem;}
/* ============================================================           TRUST        ============================================================ */        .trust-section {margin:2.5rem 0;text-align:center;}
.trust-badges {display:flex;justify-content:center;align-items:center;gap:2rem;margin-top:1.2rem;flex-wrap:wrap;}
.trust-badge {display:flex;flex-direction:column;align-items:center;gap:0.3rem;}
.trust-badge-icon {font-size:2.2rem;color:var(--primary-gold);}
.trust-badge-text {color:var(--text-gray);font-size:0.82rem;}
/* ============================================================           ABOUT        ============================================================ */        .about-section {margin:2.5rem 0;}
.about-content {background:linear-gradient(135deg,rgba(15,52,96,0.2),rgba(26,26,46,0.4));padding:2rem;border-radius:16px;border:1px solid var(--border-color);}
.about-content h3 {color:var(--primary-gold);font-size:1.5rem;margin-bottom:0.8rem;}
.about-content p {color:var(--text-gray);margin-bottom:1rem;font-size:0.95rem;line-height:1.8;}
.about-features {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem;margin-top:1.2rem;}
.feature-item {display:flex;gap:0.8rem;}
.feature-icon {font-size:1.6rem;color:var(--primary-gold);flex-shrink:0;}
.feature-text h4 {color:var(--text-light);margin-bottom:0.3rem;font-size:0.95rem;}
.feature-text p {color:var(--text-gray);font-size:0.85rem;}
/* ============================================================           NEWS        ============================================================ */        .news-section {margin:2.5rem 0;}
.news-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.2rem;margin-top:1.2rem;}
.news-card {background:linear-gradient(135deg,rgba(15,52,96,0.2),rgba(26,26,46,0.4));border-radius:12px;overflow:hidden;border:1px solid var(--border-color);transition:all 0.3s;}
.news-card:hover {transform:translateY(-4px);border-color:var(--primary-gold);}
/* news image — real img tag with object-fit */        .news-img-wrap {display:block;width:100%;height:170px;overflow:hidden;position:relative;}
.news-img-wrap img {width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s;}
.news-card:hover .news-img-wrap img {transform:scale(1.05);}
.news-content {padding:1rem;}
.news-date {color:var(--primary-gold);font-size:0.82rem;margin-bottom:0.3rem;}
.news-title {font-size:1rem;font-weight:700;margin-bottom:0.6rem;color:var(--text-light);text-decoration:none;display:block;transition:color 0.2s;line-height:1.4;}
.news-title:hover {color:var(--primary-gold);}
.news-excerpt {color:var(--text-gray);margin-bottom:0.6rem;font-size:0.85rem;}
footer {background:var(--primary-dark);border-top:1px solid var(--border-color);padding:2.5rem 2rem 1rem;margin-left:var(--sidebar-width);}
@media (max-width:900px) {footer {margin-left:0;}
}
.footer-content {max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:2rem;}
.footer-section h4 {color:var(--primary-gold);margin-bottom:0.8rem;font-size:1.05rem;}
.footer-section ul {list-style:none;}
.footer-section ul li {margin-bottom:0.4rem;}
.footer-section a {color:var(--text-gray);text-decoration:none;transition:color 0.3s;font-size:0.9rem;}
.footer-section a:hover {color:var(--primary-gold);}
.social-share {display:flex;gap:0.7rem;flex-wrap:wrap;}
.social-btn {width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;transition:all 0.3s;text-decoration:none;}
.social-btn.facebook {background:#1877f2;color:white;}
.social-btn.twitter {background:#1da1f2;color:white;}
.social-btn.telegram {background:#0088cc;color:white;}
.social-btn.whatsapp {background:#25d366;color:white;}
.social-btn.reddit {background:#ff4500;color:white;}
.social-btn.instagram {background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:white;}
.social-btn.youtube {background:#ff0000;color:white;}
.social-btn.linkedin {background:#0077b5;color:white;}
.social-btn:hover {transform:translateY(-3px);box-shadow:0 4px 12px rgba(255,215,0,0.25);}
.footer-bottom {max-width:1200px;margin:1.5rem auto 0;padding-top:1.5rem;border-top:1px solid var(--border-color);text-align:center;color:var(--text-gray);font-size:0.88rem;}
/* ============================================================           RESPONSIVE        ============================================================ */        @media (max-width:1100px) {.content-area {grid-template-columns:1fr;}
.sidebar-right {display:none;}
}
@media (max-width:900px) {.sidebar-left {display:none;}
.mobile-header {display:flex;}
.content-area {margin-left:0;padding-top:60px;}
.hero-stats {grid-template-columns:repeat(2,1fr);}
.bookmaker-grid {grid-template-columns:1fr;}
}
@media (max-width:600px) {.hero h1 {font-size:1.7rem;}
/* Mobile table:only rank,name/logo,actions,rating (if space) */            .top100-thead {display:none;}
.top100-row {grid-template-columns:30px 1fr auto auto;grid-template-areas:"rank name actions rating";gap:0.4rem;}
.top100-row .top100-rank {grid-area:rank;}
.top100-row .top100-logo-box {grid-area:name;justify-content:flex-start;}
.top100-row .top100-info {display:none;}
.top100-row .top100-rating-box {grid-area:rating;display:none;}
.top100-row .top100-actions {grid-area:actions;}
.sport-bm-thead {display:none;}
.sport-bm-row {grid-template-columns:30px 1fr auto auto;grid-template-areas:"rank name actions rating";gap:0.4rem;}
.sport-bm-row .sbm-rank {grid-area:rank;}
.sport-bm-row .sbm-logo {grid-area:name;justify-content:flex-start;}
.sport-bm-row .sbm-info {display:none;}
.sport-bm-row .sbm-rating {grid-area:rating;display:none;}
.sport-bm-row .sbm-actions {grid-area:actions;}
.hero-stats {grid-template-columns:repeat(2,1fr);}
}
/* Mobile nav drawer styles */        .mobile-nav-inner {padding:1rem 0;}
.mobile-nav-inner .nav-item > .nav-link {display:flex;align-items:center;justify-content:space-between;padding:0.65rem 1.2rem;color:var(--text-gray);text-decoration:none;font-size:0.92rem;font-weight:500;transition:all 0.2s;cursor:pointer;border-left:3px solid transparent;}
.mobile-nav-inner .nav-item > .nav-link:hover {color:var(--primary-gold);background:rgba(255,215,0,0.06);border-left-color:var(--primary-gold);}
.mobile-nav-inner .sub-menu {display:none;background:rgba(0,0,0,0.3);border-top:1px solid var(--border-color);}
.mobile-nav-inner .nav-item.open > .sub-menu {display:block;}
.mobile-nav-inner .sub-menu a {display:block;padding:0.45rem 1.2rem 0.45rem 2.4rem;color:var(--text-gray);text-decoration:none;font-size:0.83rem;}
.mobile-nav-inner .sub-menu a:hover {color:var(--primary-gold);}
.mobile-nav-inner .nav-link .nav-icon {font-size:1rem;margin-right:0.6rem;opacity:0.8;}
.mobile-nav-inner .nav-link .nav-label {flex:1;}
.mobile-nav-inner .nav-link .nav-arrow {font-size:0.7rem;transition:transform 0.25s;opacity:0.6;}
.mobile-nav-inner .nav-item.open > .nav-link .nav-arrow {transform:rotate(90deg);}
.mobile-nav-header {padding:1.5rem 1.2rem 1rem;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;}
.mobile-nav-logo {font-size:2rem;font-weight:900;background:linear-gradient(135deg,var(--primary-gold),#FFA500);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:3px;}
.mobile-nav-close {background:none;border:none;color:var(--text-gray);font-size:1.4rem;cursor:pointer;padding:0.3rem;}
.mobile-nav-close:hover {color:var(--primary-gold);}
.mobile-nav-lang {padding:0.8rem 1.2rem;border-top:1px solid var(--border-color);margin-top:0.5rem;}
.mobile-nav-lang h5 {color:var(--text-gray);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.5rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;}
.mobile-nav-lang h5:hover {color:var(--primary-gold);}
.mobile-lang-list {display:none;flex-direction:column;gap:0.1rem;}
.mobile-nav-lang.open .mobile-lang-list {display:flex;}
.mobile-lang-list a {display:flex;align-items:center;gap:0.5rem;color:var(--text-gray);text-decoration:none;font-size:0.82rem;padding:0.3rem 0.5rem;border-radius:6px;}
.mobile-lang-list a:hover {color:var(--primary-gold);background:rgba(255,215,0,0.07);}
