/* ============================================================
   JugaX Visual Polish v1 — 2026-05-22
   Append-only override layer. Backup en *.bak.20260522_visual.
   Objetivo: cerrar el gap "amateur/IA" vs gana24/megabonus.

   - Paleta verde unificada (#1faf6b)
   - Tipografía Sora + Inter
   - Cupón dark consistente + stake chips
   - Logos equipos fallback con iniciales
   - Loading skeletons
   - Match cards con LIVE badge y escudos circulares
   ============================================================ */

/* ---------- Tokens (sobrescriben los previos) ---------- */
:root {
  --jx-brand: #1faf6b;
  --jx-brand-2: #15c97a;
  --jx-brand-dim: rgba(31,175,107,.18);
  --jx-bg-1: #0a0e1f;
  --jx-bg-2: #0d1830;
  --jx-bg-3: #131a32;
  --jx-bg-4: #1a2240;
  --jx-line: rgba(255,255,255,.07);
  --jx-line-2: rgba(255,255,255,.04);
  --jx-text: #e8edf5;
  --jx-mut: rgba(232,237,245,.62);
  --jx-dim: rgba(232,237,245,.4);
  --jx-warn: #facc15;
  --jx-live: #ef4444;
  --jx-radius: 10px;
  --jx-radius-sm: 6px;
  --jx-brand-bar-h: 60px;
}

/* ---------- Tipografía global ---------- */
body, .navbar, .table-parent, .rightbar, .leftbar, .modal-content {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  font-feature-settings: "ss01" on, "cv11" on;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4, h5, h6,
.jx-display, .jx-num, .ratio, .badge, .btn-custom, .navbar-brand,
.bet-slip-place, .stake-chip, .live-indicator, .table-parent .table thead th {
  font-family: 'Sora', 'Inter', system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}
.ratio, .bet-box .badge { font-variant-numeric: tabular-nums; }

/* ---------- Header / navbar unificado ---------- */
.navbar, .top-header {
  min-height: var(--jx-brand-bar-h) !important;
  background: linear-gradient(180deg, #0a0e1f 0%, #0d1830 100%) !important;
  border-bottom: 1px solid var(--jx-line) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter: blur(8px);
}
.navbar-brand, .top-header .logo, .navbar a.logo {
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  letter-spacing: -0.02em;
  color: var(--jx-text) !important;
  text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 6px;
}
.navbar-brand strong, .navbar-brand .brand-x, .top-header .logo strong {
  color: var(--jx-brand) !important;
}
.navbar-brand img { height: 32px !important; width: auto; }

/* ---------- Botones primarios — verde brand único ---------- */
.btn-custom, .btn-bet.active, .table-parent .table tbody td button.selected,
.table-parent .table tbody td button.active {
  background: linear-gradient(135deg, var(--jx-brand) 0%, #0d8654 100%) !important;
  color: #08130d !important;
  border: none !important;
  border-radius: var(--jx-radius-sm) !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  transition: transform .15s, box-shadow .15s, background .15s !important;
  box-shadow: 0 4px 14px rgba(31,175,107,.28);
}
.btn-custom:hover, .btn-bet.active:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(31,175,107,.45);
}
.btn-custom.light, .btn-custom2.light {
  background: rgba(255,255,255,.05) !important;
  color: var(--jx-text) !important;
  border: 1px solid var(--jx-line) !important;
  box-shadow: none !important;
}
a.btn-custom2, .btn-custom2 {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
  color: #fff !important;
  border-radius: var(--jx-radius-sm) !important;
  font-weight: 700 !important;
  border: none !important;
}

/* ---------- Cupón (rightbar) — dark consistente ---------- */
.rightbar, .leftbar {
  background: var(--jx-bg-2) !important;
  border-left: 1px solid var(--jx-line) !important;
  color: var(--jx-text) !important;
}
.rightbar .top { gap: 6px; }
.rightbar .top button { font-size: 12px; padding: 9px 12px !important; }
.rightbar .bet-box {
  background: var(--jx-bg-3) !important;
  border: 1px solid var(--jx-line) !important;
  border-radius: var(--jx-radius) !important;
  padding: 12px !important;
  color: var(--jx-text) !important;
  margin-bottom: 8px;
}
.rightbar .bet-box p,
.rightbar .bet-box .series,
.rightbar .bet-box .teams { color: var(--jx-text) !important; }
.rightbar .bet-box small { color: var(--jx-mut) !important; }
.rightbar .bet-box .badge {
  background: var(--jx-brand) !important;
  color: #08130d !important;
  font-weight: 800 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}
.rightbar .bet-box .close-btn {
  background: transparent; border: none; color: var(--jx-mut);
  position: absolute; top: 8px; right: 8px;
}
.rightbar .bet-box .close-btn:hover i { color: var(--jx-live); }
.rightbar p { color: var(--jx-mut); font-size: 12px; margin-bottom: 6px; }
.rightbar p .float-end { color: var(--jx-text); font-weight: 600; font-variant-numeric: tabular-nums; }

.rightbar .input-group.inc-dec {
  background: var(--jx-bg-1);
  border: 1px solid var(--jx-line);
  border-radius: var(--jx-radius-sm);
  overflow: hidden;
  padding: 0;
}
.rightbar .input-group.inc-dec .form-control {
  background: transparent !important;
  border: none !important;
  color: var(--jx-text) !important;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
}
.rightbar .input-group.inc-dec .btn-custom {
  background: var(--jx-bg-4) !important;
  color: var(--jx-text) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 14px !important;
  min-width: 38px;
}
.rightbar .input-group.inc-dec .btn-custom:hover { background: var(--jx-brand) !important; color: #08130d !important; }

/* Stake quick chips */
.jx-stake-chips { display: flex; gap: 6px; margin: 4px 0 10px; flex-wrap: wrap; }
.jx-stake-chips button {
  flex: 1; min-width: 56px;
  padding: 7px 6px;
  background: var(--jx-bg-1);
  color: var(--jx-text);
  border: 1px solid var(--jx-line);
  border-radius: var(--jx-radius-sm);
  font-size: 11.5px; font-weight: 700;
  cursor: pointer; transition: all .15s;
  font-family: 'Sora', sans-serif;
}
.jx-stake-chips button:hover { border-color: var(--jx-brand); color: var(--jx-brand); }

/* ---------- Logos equipos: fallback iniciales ---------- */
img[data-team-fallback],
.team img, .table-parent .table tbody td p img {
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--jx-bg-4);
  border: 1px solid var(--jx-line);
}
.jx-team-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--jx-bg-4), var(--jx-bg-3));
  color: var(--jx-text);
  font-size: 10px; font-weight: 800;
  border: 1px solid var(--jx-line);
  font-family: 'Sora', sans-serif;
  letter-spacing: 0;
  flex: 0 0 24px;
  margin-right: 8px;
}
.jx-team-badge--lg { width: 38px; height: 38px; font-size: 13px; flex-basis: 38px; }

/* Hide broken images instead of showing icon roto */
img[src=""], img:not([src]), img[src*="undefined"] { visibility: hidden; }

/* ---------- LIVE badge ---------- */
.jx-live-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  background: var(--jx-live);
  color: #fff;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px;
  border-radius: 3px;
  font-family: 'Sora', sans-serif;
}
.jx-live-badge::before {
  content: ""; width: 5px; height: 5px; background: #fff; border-radius: 50%;
  animation: jx-pulse .9s infinite;
}
@keyframes jx-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Match rows polish ---------- */
.match-row, .table-row, .table-parent {
  background: var(--jx-bg-2) !important;
  border: 1px solid var(--jx-line) !important;
  border-radius: var(--jx-radius) !important;
  transition: border-color .2s, transform .15s;
}
.match-row:hover, .table-row:hover, .table-parent:hover {
  border-color: var(--jx-brand-dim) !important;
}

.btn-bet, .bet-btn, td.bet-cell,
.table-parent .table tbody td button:not(.btn-custom) {
  background: var(--jx-bg-4) !important;
  border: 1px solid var(--jx-line) !important;
  color: var(--jx-text) !important;
  font-weight: 700 !important;
  border-radius: var(--jx-radius-sm) !important;
  padding: 8px 10px !important;
  transition: all .12s !important;
  font-family: 'Sora', sans-serif !important;
  font-variant-numeric: tabular-nums;
}
.btn-bet:hover, .bet-btn:hover,
.table-parent .table tbody td button:not(.btn-custom):not(:disabled):hover {
  background: var(--jx-brand) !important;
  color: #08130d !important;
  border-color: var(--jx-brand) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--jx-brand-dim);
}

/* ---------- Inputs ---------- */
input, select, textarea {
  background: var(--jx-bg-1) !important;
  border: 1px solid var(--jx-line) !important;
  color: var(--jx-text) !important;
  border-radius: var(--jx-radius-sm) !important;
  padding: 10px 14px !important;
  font-family: 'Inter', sans-serif !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--jx-brand) !important;
  box-shadow: 0 0 0 3px var(--jx-brand-dim) !important;
  outline: none !important;
}

/* ---------- Loading skeletons ---------- */
@keyframes jx-shimmer {
  0% { background-position: -480px 0; }
  100% { background-position: 480px 0; }
}
.jx-skeleton {
  position: relative;
  background: linear-gradient(90deg, var(--jx-bg-3) 0%, var(--jx-bg-4) 50%, var(--jx-bg-3) 100%);
  background-size: 960px 100%;
  animation: jx-shimmer 1.4s infinite linear;
  border-radius: 6px;
  color: transparent !important;
  pointer-events: none;
}
.jx-skeleton--line { height: 12px; margin: 6px 0; }
.jx-skeleton--card { height: 90px; margin-bottom: 8px; }
.jx-skeleton--circle { width: 24px; height: 24px; border-radius: 50%; display: inline-block; }

/* ---------- Hero del sports — backdrop sutil ---------- */
.banner-area, .banner, #hero-banner {
  background: linear-gradient(135deg, rgba(31,175,107,.10) 0%, transparent 60%), var(--jx-bg-1) !important;
  border-bottom: 1px solid var(--jx-line) !important;
  position: relative;
}
.banner-area::after, .banner::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(31,175,107,.12), transparent 60%);
  pointer-events: none;
}

/* ---------- Categorías / sports tabs ---------- */
.categories a, .featured-leagues a {
  background: var(--jx-bg-3) !important;
  border: 1px solid var(--jx-line) !important;
  color: var(--jx-mut) !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 600 !important;
}
.categories a.active, .featured-leagues a:hover {
  background: linear-gradient(135deg, var(--jx-brand) 0%, #0d8654 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px var(--jx-brand-dim);
}

/* ---------- Mobile bottom nav ---------- */
.mobile-bottom-nav, .footer-nav-mobile {
  background: var(--jx-bg-2) !important;
  border-top: 1px solid var(--jx-line) !important;
}
.mobile-bottom-nav a.active,
.mobile-bottom-nav a:hover,
.footer-nav-mobile a.active { color: var(--jx-brand) !important; }

/* ---------- Scrollbar premium ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--jx-bg-1); }
::-webkit-scrollbar-thumb { background: rgba(31,175,107,.32); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(31,175,107,.55); }

/* ---------- Cards (casino-side) shared polish ---------- */
.jx-game-card {
  position: relative;
  border-radius: var(--jx-radius);
  overflow: hidden;
  background: var(--jx-bg-3);
  border: 1px solid var(--jx-line);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.jx-game-card:hover {
  transform: translateY(-3px);
  border-color: var(--jx-brand);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}
.jx-game-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
  display: block;
}
.jx-game-card:hover img { transform: scale(1.04); }
.jx-game-card .jx-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.78) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8px 10px;
  opacity: 1;
  pointer-events: none;
}
.jx-game-card .jx-overlay .title {
  color: #fff; font-size: 12px; font-weight: 700;
  font-family: 'Sora', sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jx-game-card .jx-overlay .provider {
  color: rgba(255,255,255,.7); font-size: 10px;
  text-transform: uppercase; letter-spacing: .4px;
}
.jx-game-card .jx-play-icon {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.6);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--jx-brand);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: all .18s;
  pointer-events: none;
}
.jx-game-card .jx-play-icon::after {
  content: ""; width: 0; height: 0;
  border-left: 14px solid #08130d;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.jx-game-card:hover .jx-play-icon { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* fallback: aplica a thumbnails de Goldsvet existentes ".game-frame", ".game-thumb" */
.game, .game-frame, .game-thumb, .item-game, .games_list_block {
  border-radius: var(--jx-radius) !important;
  overflow: hidden;
  background: var(--jx-bg-3);
  border: 1px solid var(--jx-line);
  transition: transform .18s, box-shadow .18s, border-color .18s !important;
}
.game:hover, .game-frame:hover, .game-thumb:hover, .item-game:hover, .games_list_block:hover {
  transform: translateY(-3px);
  border-color: var(--jx-brand);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}
.game img, .game-frame img, .game-thumb img, .item-game img, .games_list_block img {
  transition: transform .25s ease;
}
.game:hover img, .game-frame:hover img, .game-thumb:hover img, .item-game:hover img, .games_list_block:hover img {
  transform: scale(1.04);
}

/* ===========================================================
   [JUGAX FIX 2026-05-23] Sports header + leftbar visibility
   =========================================================== */

/* Navbar menu items — make them readable (no more invisible gray on dark) */
.navbar .navbar-nav .nav-link {
    color: rgba(255,255,255,0.78) !important;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 14px !important;
    transition: color .2s ease;
}
.navbar .navbar-nav .nav-link:hover { color: #1faf6b !important; }
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link[class*="active"] {
    color: #ff4d6d !important;
    font-weight: 700;
}

/* Right-side buttons container — force horizontal, no overlap */
.navbar .navbar-text {
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap !important;
}
.navbar .navbar-text .btn-custom,
.navbar .navbar-text > a,
.navbar .navbar-text > button {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 13px !important;
    padding: 8px 16px !important;
}

/* Leftbar live/upcoming buttons — full label, no cut */
.leftbar .top {
    display: flex !important;
    gap: 8px;
    padding: 8px !important;
}
.leftbar .top .btn-custom {
    font-size: 13px !important;
    padding: 9px 12px !important;
    white-space: nowrap !important;
    text-align: center;
    flex: 1;
    line-height: 1;
}
.leftbar .top .btn-custom i { margin-right: 5px; font-size: 12px; }

/* Match table — reduce icon column width */
.table-parent table.table thead th:first-child,
.table-parent table.table tbody td:first-child {
    width: 44px !important;
    max-width: 44px !important;
    padding: 8px 4px !important;
    text-align: center;
}
.table-parent table.table thead th:nth-child(2),
.table-parent table.table tbody td:nth-child(2) {
    width: auto !important;
    padding-left: 12px !important;
}
.table-parent table.table thead th { font-size: 12px; }
.table-parent table.table tbody p { margin-bottom: 6px; line-height: 1.3; }

/* Featured leagues row — better spacing/look */
.featured-leagues-row,
.jugax-featured-leagues {
    margin: 8px 0 20px;
}


/* ==================================================
   JUGAX VISUAL-TO-10 — 2026-05-24
   Fix #2: Nav header auth buttons no overflow
   Fix #11: Sidebar hover states
   Fix #12: Match table icon column collapse if empty
   ================================================== */

/* Nav auth (Registro / Ingresar) — compact, never overflow */
.navbar .navbar-text { max-width: 380px; flex-shrink: 0; }
.navbar .navbar-text .btn-custom {
    font-size: 12px !important;
    padding: 7px 14px !important;
    letter-spacing: 0.2px;
    white-space: nowrap;
    min-width: 0;
    border-radius: 8px;
}
.navbar .navbar-text .btn-custom + .btn-custom { margin-left: 6px; }

/* Sidebar items hover (Fix #11) */
.leftbar .sidebar-menu li > a,
.leftbar .nav-menu li > a,
.leftbar .menu-list li > a {
    transition: background-color 0.18s ease, color 0.18s ease, border-left-color 0.18s ease;
    border-left: 3px solid transparent;
}
.leftbar .sidebar-menu li > a:hover,
.leftbar .nav-menu li > a:hover,
.leftbar .menu-list li > a:hover {
    background: rgba(34, 228, 149, 0.06) !important;
    border-left-color: #1faf6b !important;
    color: #ffffff !important;
}
.leftbar .sidebar-menu li.active > a,
.leftbar .nav-menu li.active > a {
    background: rgba(34, 228, 149, 0.10) !important;
    border-left-color: #22e495 !important;
}

/* Match table — hide icon column completely when image src is empty */
.table-parent table.table tbody td:first-child:empty {
    display: none;
}
.table-parent table.table tbody td:first-child img[src=""],
.table-parent table.table tbody td:first-child img:not([src]) {
    display: none;
}

/* Bottom-bar mobile auth buttons compact */
.bottom-bar a { font-size: 11px; padding: 6px 4px; }
.bottom-bar a i { display: block; font-size: 18px; margin-bottom: 2px; }

/* HOT tag — verde JugaX en lugar de rojo (Fix #8) */
.game-tag.hot, .jx-game-tag.hot, .hot-tag, .tag-hot, .badge-hot {
    background: linear-gradient(135deg, #1faf6b, #22e495) !important;
    color: #ffffff !important;
    border: none !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}

/* Skeleton shimmer for odds / cards (Fix #9) */
@keyframes jx-shimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}
.jx-skeleton,
.table-parent table.table tbody .odd-button:empty,
.table-parent table.table tbody .ratio:empty {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%);
    background-size: 800px 100%;
    animation: jx-shimmer 1.6s linear infinite;
    color: transparent !important;
    border-radius: 6px;
    min-height: 18px;
    display: inline-block;
}

/* Smooth entrance for cards (Fix #15) */
@keyframes jx-fadeup {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.featured-matches-section .card,
.featured-leagues-row .league-card,
.jugax-featured-leagues .league-card,
.match-card,
.game-card {
    animation: jx-fadeup 0.45s ease both;
}
.featured-matches-section .card:nth-child(2) { animation-delay: 0.08s; }
.featured-matches-section .card:nth-child(3) { animation-delay: 0.16s; }
.featured-matches-section .card:nth-child(4) { animation-delay: 0.24s; }
.featured-matches-section .card:nth-child(5) { animation-delay: 0.32s; }


/* ==================================================
   SPORTS FOOTER PREMIUM 2026-05-24 (Fix #13)
   ================================================== */
.footer-section {
    background: linear-gradient(180deg, #0c1426 0%, #060b18 100%) !important;
    border-top: 1px solid rgba(34, 228, 149, 0.12) !important;
    padding: 56px 0 0 !important;
    margin-top: 56px !important;
    color: #cfd5e0 !important;
    position: relative;
}
.footer-section::before {
    content: "" !important;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #22e495 50%, transparent 100%);
    opacity: 0.45;
}
.footer-section .overlay { background: transparent !important; padding: 0 !important; }
.footer-section .footer-box { color: #cfd5e0; padding-right: 16px; }
.footer-section .footer-box .navbar-brand img {
    max-height: 44px !important; width: auto !important; margin-bottom: 14px !important;
}
.footer-section .footer-box > p {
    color: #8b94a3 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    max-width: 320px;
    margin-bottom: 16px;
}
.footer-section .footer-box h5 {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin: 0 0 16px !important;
}
.footer-section .footer-box ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.footer-section .footer-box ul li {
    margin-bottom: 8px !important;
    color: #8b94a3;
}
.footer-section .footer-box ul li i {
    color: #22e495 !important;
    margin-right: 8px !important;
    width: 14px;
}
.footer-section .footer-box ul li a {
    color: #8b94a3 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
}
.footer-section .footer-box ul li a:hover { color: #22e495 !important; }

.footer-section .input-group {
    border-radius: 9px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}
.footer-section .input-group .form-control {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    padding: 10px 14px !important;
}
.footer-section .input-group .form-control::placeholder { color: rgba(255,255,255,0.4) !important; }
.footer-section .input-group button {
    background: linear-gradient(135deg, #1faf6b, #22e495) !important;
    border: none !important;
    color: #061611 !important;
    padding: 8px 14px !important;
    font-weight: 800;
}

.footer-section .social-links {
    display: flex !important;
    gap: 10px !important;
    margin-top: 8px;
}
.footer-section .social-links a {
    width: 38px; height: 38px;
    border-radius: 9px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(34, 228, 149, 0.14) !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    color: #cfd5e0 !important;
    transition: all 0.18s;
}
.footer-section .social-links a:hover {
    background: rgba(34, 228, 149, 0.12) !important;
    border-color: rgba(34, 228, 149, 0.45) !important;
    color: #22e495 !important;
    transform: translateY(-2px);
}
.footer-section .social-links a i { font-size: 16px; margin: 0; color: inherit !important; }

.footer-section .footer-bottom {
    margin-top: 28px !important;
    padding: 18px 0 18px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.footer-section .footer-bottom .copyright {
    color: rgba(255,255,255,0.45) !important;
    font-size: 12px !important;
    margin: 0 !important;
}
.footer-section .footer-bottom .language a {
    color: rgba(255,255,255,0.55) !important;
    font-size: 12px !important;
    margin-right: 12px;
    text-decoration: none;
    transition: color 0.15s;
}
.footer-section .footer-bottom .language a:hover { color: #22e495 !important; }

/* ==================================================
   SPORTS AUTH MODAL PREMIUM (Fix #14)
   ================================================== */
#loginModal .modal-content,
#registerModal .modal-content,
.modal.show .modal-content {
    background: linear-gradient(160deg, #131b2e 0%, #070d1a 100%) !important;
    border: 1px solid rgba(34, 228, 149, 0.18) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6) !important;
    color: #e8efe9 !important;
}
.modal-content .modal-header {
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 18px 22px !important;
    background: transparent !important;
}
.modal-content .modal-header .modal-title,
.modal-content .modal-header h4,
.modal-content .modal-header h5 {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px;
}
.modal-content .modal-body { padding: 22px !important; background: transparent !important; }
.modal-content .form-control,
.modal-content input[type=text],
.modal-content input[type=email],
.modal-content input[type=password],
.modal-content input[type=number] {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    border-radius: 9px !important;
    padding: 12px 14px !important;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.modal-content .form-control:focus,
.modal-content input:focus {
    border-color: rgba(34,228,149,0.55) !important;
    box-shadow: 0 0 0 3px rgba(34,228,149,0.14) !important;
    background: rgba(255,255,255,0.05) !important;
}
.modal-content .form-control::placeholder { color: rgba(255,255,255,0.4) !important; }
.modal-content .btn-primary,
.modal-content button[type=submit],
.modal-content .btn-custom {
    background: linear-gradient(135deg, #1faf6b 0%, #22e495 100%) !important;
    border: none !important;
    color: #061611 !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px;
    border-radius: 9px !important;
    padding: 11px 22px !important;
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.modal-content .btn-primary:hover,
.modal-content button[type=submit]:hover,
.modal-content .btn-custom:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(34, 228, 149, 0.35);
    filter: brightness(1.05);
}
.modal-content .modal-footer { border-top: 1px solid rgba(255,255,255,0.06) !important; background: transparent !important; }
.modal-content a { color: #22e495 !important; }
.modal-content a:hover { color: #16d182 !important; }
.modal-content label { color: rgba(255,255,255,0.7) !important; }
.modal-content .btn-close {
    filter: invert(1) brightness(1.5) !important;
    opacity: 0.6 !important;
    transition: opacity 0.15s;
}
.modal-content .btn-close:hover { opacity: 1 !important; }


/* OVERRIDE footer bg image hard */
.footer-section, .footer-section .overlay {
    background-image: none !important;
    background: linear-gradient(180deg, #0c1426 0%, #060b18 100%) !important;
}
.footer-section .overlay { padding: 56px 16px 0 !important; }
.footer-section .container { max-width: 1280px !important; }