/* ================================================
   FUZO365 — PREMIUM THEME v4
   Dark Forest Green + Brushed Gold
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Barlow+Condensed:wght@600;700;800&display=swap');

*, *::before, *::after {
  font-family: 'Inter', sans-serif !important;
  box-sizing: border-box;
}
html, body {
  background-color: #0a1c0e !important;
  color: #e5ede7 !important;
}

/* ================================================
   HEADER
   ================================================ */
header.header-primary, .header-primary {
  background: linear-gradient(180deg, #0d2011 0%, #101e13 100%) !important;
  border-bottom: 1px solid #1f3025 !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.55) !important;
  padding: 0 32px !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
}
/* Header inner container — keep buttons off the right edge */
.header-primary .container,
.header-primary .container-fluid,
.header-primary > .navbar,
.header-primary .navbar {
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Register/Login buttons in header — add breathing room from edge */
.header-primary .navbar-nav.ms-auto,
.header-primary .header-right,
.header-primary [class*="header-right"],
.header-primary .d-flex:last-child {
  margin-right: 8px !important;
}
.navbar-brand img, .header-primary .navbar-brand img {
  height: 40px !important;
  width: auto !important;
  filter: drop-shadow(0 2px 6px rgba(201,146,42,0.25)) !important;
}
.nav-link, .navbar-nav .nav-link, .navbar-nav a {
  color: #9dbfa5 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}
.nav-link:hover { color: #e8b84b !important; background: rgba(201,146,42,0.09) !important; }
.nav-link.active { color: #c9922a !important; background: rgba(201,146,42,0.1) !important; }

/* ================================================
   HIDE DECIMAL ODDS BUTTON — everywhere
   ================================================ */
.select-lang--container,
.oddsType,
.select-lang,
[class*="select-lang"],
.header-primary [class*="odds"],
header [class*="odds"],
.nav-right [class*="odds"],
.header-right [class*="odds"],
input[type="checkbox"] + label[for*="odds"],
label[for*="odds"],
.odds-type-wrapper,
.odds-switch {
  display: none !important;
}

/* ================================================
   LOGIN / REGISTER BUTTONS IN HEADER
   ================================================ */
.btn--signup {
  background: linear-gradient(135deg, #c9922a, #e8b84b) !important;
  color: #0a1c0e !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  padding: 9px 22px !important;
  box-shadow: 0 3px 12px rgba(201,146,42,0.35) !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.btn--signup i, .btn--signup .la { display: none !important; }
.btn--register {
  background: transparent !important;
  border: 2px solid #c9922a !important;
  color: #c9922a !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  padding: 9px 22px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.btn--register:hover {
  background: linear-gradient(135deg, #c9922a, #e8b84b) !important;
  color: #0a1c0e !important;
  border-color: transparent !important;
}

/* ================================================
   LOGIN / REGISTER PAGES — DARK FOREST, NO STADIUM
   ================================================ */

/* The stadium is an inline style on .account-section set by PHP — CSS can't
   kill inline background-image directly. Instead we paint a gradient
   pseudo-element on top of it that covers it completely. */

.login-page .account-section,
.register-page .account-section,
.login-page section,
.register-page section {
  position: relative !important;
  overflow: hidden !important;
}

/* This gradient layer sits above the stadium photo but below the form */
.login-page .account-section::before,
.register-page .account-section::before,
.login-page section::before,
.register-page section::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: radial-gradient(ellipse at 30% 50%, #0d2a12 0%, #060f07 65%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Kill any other pseudo-element dark overlays BetLab adds */
.login-page .account-section::after,
.register-page .account-section::after,
.login-page section::after,
.register-page section::after {
  display: none !important;
}

/* Lift all content above the gradient overlay */
.login-page .account-section > *,
.register-page .account-section > *,
.login-page section > *,
.register-page section > * {
  position: relative !important;
  z-index: 1 !important;
}

/* All inner containers transparent */
.login-page .container,
.login-page .row,
.login-page [class*="col"],
.login-page > div,
.register-page .container,
.register-page .row,
.register-page [class*="col"],
.register-page > div {
  background-color: transparent !important;
  background: transparent !important;
}

/* Hide all decorative images (players, thumbnails, etc.) */
.login-page img:not([class*="logo"]):not([class*="brand"]):not(.navbar-brand img),
.register-page img:not([class*="logo"]):not([class*="brand"]):not(.navbar-brand img) {
  display: none !important;
}

/* Hide the left banner / thumb column entirely */
.login-page .account-banner,
.login-page [class*="account-banner"],
.login-page [class*="account-thumb"],
.login-page [class*="left-col"],
.register-page .account-banner,
.register-page [class*="account-banner"],
.register-page [class*="account-thumb"] {
  display: none !important;
}

/* Center the form column */
.login-page .row,
.register-page .row {
  justify-content: center !important;
}
.login-page .row > [class*="col"],
.register-page .row > [class*="col"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* ================================================
   LOGIN FORM — glass card floating over stadium
   ================================================ */
.login-page,
.register-page {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

.login-page .account-section,
.login-page section,
.login-page .container,
.register-page .account-section,
.register-page section,
.register-page .container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  min-height: calc(100vh - 64px) !important;
}

.login-form,
.register-page .login-form,
.register-page .account-form,
.register-page [class*="register-form"],
.register-page [class*="account-form"] {
  background-color: rgba(10,28,14,0.88) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(201,146,42,0.25) !important;
  border-radius: 14px !important;
  padding: 36px 44px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.7) !important;
  min-width: 460px !important;
  max-width: 520px !important;
  width: 100% !important;
  margin: 24px auto !important;
}

/* Force register form-group inputs full width */
.register-page .form-group,
.register-page .input-group,
.register-page .input--group {
  width: 100% !important;
}
.register-page .form-control,
.register-page input[type="text"],
.register-page input[type="email"],
.register-page input[type="password"],
.register-page input[type="tel"],
.register-page select {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Inputs full width inside register form */
.register-page .form-control,
.register-page input[type="text"],
.register-page input[type="email"],
.register-page input[type="password"],
.register-page input[type="tel"],
.register-page select {
  width: 100% !important;
  min-width: 100% !important;
}

/* Register form title matches login */
.register-page .login-form__title,
.register-page h4,
.register-page h3 {
  color: #e8b84b !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  line-height: 1.2 !important;
  margin-bottom: 20px !important;
}
.login-form__title {
  color: #e8b84b !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  margin-bottom: 20px !important;
}

/* ── Remember Me row — left only, Forgot Password floats out ── */
.login-form form .d-flex.justify-content-between {
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

/* ── Form is relative so we can absolutely place Forgot Password ── */
.login-page .login-form form {
  position: relative !important;
  padding-bottom: 68px !important;
}

/* ── Forgot Password — centered below Login button ── */
.login-page .login-form form a[href*="forget"],
.login-page .login-form form a[href*="forgot"],
.login-page .login-form form a[href*="password"],
.login-page .login-form form a.forget-pass {
  position: absolute !important;
  bottom: 34px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  color: #9dbfa5 !important;
  text-decoration: none !important;
}
.login-page .login-form form a[href*="forget"]:hover,
.login-page .login-form form a[href*="forgot"]:hover,
.login-page .login-form form a[href*="password"]:hover {
  color: #e8b84b !important;
}

/* ── "Don't have account?" + "Create account" — centered at very bottom ── */
.login-page .login-form form .d-flex.justify-content-center {
  position: absolute !important;
  bottom: 6px !important;
  left: 0 !important; right: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
}
.login-form form .d-flex > a:hover,
.login-form form a.forget-pass:hover {
  color: #e8b84b !important;
}

/* ── "Don't have an account?" / "Already have an account?" row ── */
.login-form .have-account,
.login-form [class*="have-account"],
.login-form [class*="sign-up"],
.login-form [class*="create-account"],
.login-form > .text-center,
.login-form > p:last-child,
.login-form .d-flex.justify-content-center,
.register-page .login-form .d-flex.justify-content-between,
.register-page .login-form .d-flex:last-child {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  text-align: center !important;
  margin-top: 14px !important;
  font-size: 13px !important;
  color: #6b8a70 !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(201,146,42,0.12) !important;
}

/* ── Checkbox + "I agree" text — one line ── */
.register-page .form-check,
.login-page .form-check,
.login-form .form-check {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  margin-bottom: 14px !important;
}
.login-form .form-check-input,
.register-page .form-check-input,
.login-page .form-check-input,
input.form-check-input.custom--check,
input[type="checkbox"].form-check-input {
  flex-shrink: 0 !important;
  margin: 0 !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  transform: scale(1) !important;
}
/* Shrink "I agree" text so it fits one line */
.register-page .form-check-label,
.register-page .form-check label,
.register-page .form-check span {
  font-size: 11.5px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}
.register-page .form-check-label a,
.register-page .form-check a {
  font-size: 11.5px !important;
  white-space: nowrap !important;
}

/* ================================================
   MAIN PAGE
   ================================================ */
main.home-page {
  background-color: #0a1c0e !important;
  min-height: calc(100vh - 64px) !important;
}

/* ================================================
   LEFT SIDEBAR
   ================================================ */
nav.sports-category, .sports-category {
  background-color: #0d2011 !important;
  border-right: 1px solid #1a2e1e !important;
  min-width: 72px !important;
  max-width: 72px !important;
}
.sports-category__list {
  background-color: #0d2011 !important;
  padding: 8px 0 !important;
}
.sports-category__link {
  color: #4d7055 !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  padding: 12px 4px !important;
  text-align: center !important;
  border-radius: 0 !important;
  transition: all 0.2s ease !important;
  border-left: 3px solid transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}
.sports-category__link span,
.sports-category__link .text,
.sports-category__link p {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  width: 100% !important;
}
.sports-category__link:hover {
  color: #c9922a !important;
  background: rgba(201,146,42,0.07) !important;
  border-left-color: #c9922a !important;
}
.sports-category__link.active,
.sports-category__link.live-btn {
  color: #e8b84b !important;
  background: rgba(201,146,42,0.1) !important;
  border-left-color: #c9922a !important;
}

/* ================================================
   BETSLIP
   ================================================ */
.betslip {
  background-color: #0d2011 !important;
  border-left: 1px solid #1a2e1e !important;
  min-width: 250px !important;
  max-width: 270px !important;
}
.betslip .nav-tabs {
  background-color: #0a1c0e !important;
  border-bottom: 1px solid #1a2e1e !important;
  padding: 0 8px !important;
}
.betslip .nav-link {
  color: #4d7055 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 11px 14px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
}
.betslip .nav-link:hover { color: #c9922a !important; }
.betslip .nav-link.active {
  color: #e8b84b !important;
  border-bottom: 2px solid #c9922a !important;
  background: transparent !important;
}
.betslip .tab-content, .betslip .tab-pane {
  background-color: #0d2011 !important;
  padding: 16px !important;
}
.betslip p, .betslip span, .betslip div { color: #3d5442 !important; }
.betslip input, .betslip .form-control, .betslip input[type="number"] {
  background-color: #162019 !important;
  border: 1px solid #243d28 !important;
  color: #e5ede7 !important;
  border-radius: 7px !important;
  padding: 10px 14px !important;
}
.betslip input:focus {
  border-color: #c9922a !important;
  box-shadow: 0 0 0 3px rgba(201,146,42,0.12) !important;
  outline: none !important;
}
.betslip select, .betslip .form-select {
  background-color: #162019 !important;
  border: 1px solid #243d28 !important;
  color: #e5ede7 !important;
  border-radius: 7px !important;
}
.betslip .btn,
.betslip button[type="submit"],
.betslip [class*="place"] {
  background: linear-gradient(135deg, #c9922a 0%, #e8b84b 100%) !important;
  color: #0a1c0e !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 9px !important;
  padding: 14px !important;
  width: 100% !important;
  box-shadow: 0 4px 16px rgba(201,146,42,0.35) !important;
}
.betslip *:not(input):not(select):not(button):not(.btn):not(svg):not(img):not(path) {
  background-color: #0d2011 !important;
  border-color: #1a2e1e !important;
}

/* ================================================
   ODDS BUTTONS
   ================================================ */
.odd-btn, [class*="odd-btn"], [class*="-odd"],
[class*="odds-btn"], td .btn {
  background-color: #162b1a !important;
  border: 1px solid #2a4030 !important;
  color: #e8b84b !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  border-radius: 7px !important;
  padding: 8px 12px !important;
  transition: all 0.18s ease !important;
  cursor: pointer !important;
}
.odd-btn:hover, [class*="odd-btn"]:hover {
  background: linear-gradient(135deg, #c9922a, #e8b84b) !important;
  color: #0a1c0e !important;
  border-color: #c9922a !important;
  box-shadow: 0 3px 10px rgba(201,146,42,0.3) !important;
}
.odd-btn.selected, [class*="odd-btn"].active {
  background-color: #c9922a !important;
  color: #0a1c0e !important;
  border-color: #c9922a !important;
}

/* ================================================
   CARDS & PANELS
   ================================================ */
.card, .panel, .widget-box {
  background-color: #122016 !important;
  border: 1px solid #1a2e1e !important;
  color: #e5ede7 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.3) !important;
}
.card-header, .panel-heading {
  background-color: #162b1a !important;
  border-bottom: 1px solid #1a2e1e !important;
  color: #e5ede7 !important;
  font-weight: 600 !important;
  padding: 14px 20px !important;
}
.card-body { background-color: #122016 !important; color: #e5ede7 !important; padding: 20px !important; }

/* ================================================
   BUTTONS
   ================================================ */
.btn-primary {
  background: linear-gradient(135deg, #c9922a, #e8b84b) !important;
  border: none !important;
  color: #0a1c0e !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  box-shadow: 0 3px 10px rgba(201,146,42,0.3) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #e8b84b, #f5d070) !important;
  box-shadow: 0 4px 16px rgba(201,146,42,0.45) !important;
  transform: translateY(-1px) !important;
}
.btn-success { background-color: #1a5c2a !important; border-color: #1a5c2a !important; color: #e5ede7 !important; font-weight: 600 !important; border-radius: 8px !important; }
.btn-danger { background-color: #b03020 !important; border-color: #b03020 !important; border-radius: 8px !important; }
.btn-secondary, .btn-default { background-color: #162b1a !important; border-color: #243d28 !important; color: #9dbfa5 !important; border-radius: 8px !important; }
.btn-warning { background-color: #c9922a !important; border-color: #c9922a !important; color: #0a1c0e !important; }
.btn-outline-primary { border: 2px solid #c9922a !important; color: #c9922a !important; background: transparent !important; border-radius: 8px !important; font-weight: 600 !important; }
.btn-outline-primary:hover { background: linear-gradient(135deg, #c9922a, #e8b84b) !important; color: #0a1c0e !important; border-color: transparent !important; }

/* ================================================
   FORMS
   ================================================ */
.form-control, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="tel"],
textarea, select {
  background-color: #0f2012 !important;
  border: 1px solid #243d28 !important;
  color: #e5ede7 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: #c9922a !important;
  box-shadow: 0 0 0 3px rgba(201,146,42,0.14) !important;
  background-color: #0f2012 !important;
  color: #e5ede7 !important;
  outline: none !important;
}
.form-control::placeholder, input::placeholder { color: #3d5442 !important; }
label, .form-label { color: #6b8a70 !important; font-size: 13px !important; font-weight: 500 !important; margin-bottom: 6px !important; }

/* ================================================
   TABLES
   ================================================ */
.table, table { color: #e5ede7 !important; border-color: #1a2e1e !important; }
.table thead th { background-color: #162b1a !important; border-bottom: 1px solid #1a2e1e !important; color: #c9922a !important; font-weight: 600 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; padding: 12px 16px !important; }
.table td, .table th { border-color: #1a2e1e !important; color: #e5ede7 !important; vertical-align: middle !important; padding: 12px 16px !important; }
.table tbody tr { background-color: #122016 !important; }
.table tbody tr:hover { background-color: #162b1a !important; }

/* ================================================
   MODALS
   ================================================ */
.modal-content { background-color: #122016 !important; border: 1px solid #1a2e1e !important; color: #e5ede7 !important; border-radius: 12px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important; }
.modal-header { background-color: #162b1a !important; border-bottom: 1px solid #1a2e1e !important; border-radius: 12px 12px 0 0 !important; padding: 18px 24px !important; }
.modal-body { padding: 24px !important; }
.modal-footer { background-color: #162b1a !important; border-top: 1px solid #1a2e1e !important; border-radius: 0 0 12px 12px !important; padding: 16px 24px !important; }
.modal-title { color: #e8b84b !important; font-family: 'Barlow Condensed', sans-serif !important; font-size: 22px !important; font-weight: 700 !important; }
.close, .btn-close { filter: invert(1) opacity(0.7) !important; }

/* ================================================
   DROPDOWNS
   ================================================ */
.dropdown-menu { background-color: #122016 !important; border: 1px solid #1a2e1e !important; box-shadow: 0 10px 36px rgba(0,0,0,0.55) !important; border-radius: 10px !important; padding: 8px !important; }
.dropdown-item { color: #9dbfa5 !important; padding: 10px 14px !important; border-radius: 7px !important; font-size: 14px !important; }
.dropdown-item:hover { background-color: #1f3a22 !important; color: #e8b84b !important; }
.dropdown-divider { border-color: #1a2e1e !important; margin: 6px 0 !important; }

/* ================================================
   TABS
   ================================================ */
.nav-tabs { border-bottom: 1px solid #1a2e1e !important; }
.nav-tabs .nav-link { color: #4d7055 !important; border: none !important; background: transparent !important; padding: 10px 18px !important; font-weight: 500 !important; border-bottom: 2px solid transparent !important; }
.nav-tabs .nav-link:hover { color: #c9922a !important; }
.nav-tabs .nav-link.active { color: #e8b84b !important; border-bottom: 2px solid #c9922a !important; background: transparent !important; }
.tab-content, .tab-pane { background-color: #122016 !important; }

/* ================================================
   ALERTS & BADGES
   ================================================ */
.alert { border-radius: 8px !important; padding: 14px 18px !important; font-size: 14px !important; }
.alert-success { background: rgba(26,92,42,0.2) !important; border: 1px solid #22753a !important; color: #7dcf95 !important; }
.alert-danger  { background: rgba(176,48,32,0.2) !important; border: 1px solid #c0392b !important; color: #e07070 !important; }
.alert-warning { background: rgba(201,146,42,0.15) !important; border: 1px solid #c9922a !important; color: #e8b84b !important; }
.badge { border-radius: 5px !important; font-weight: 600 !important; padding: 4px 8px !important; }
.badge.bg-primary, .badge-primary { background-color: #c9922a !important; color: #0a1c0e !important; }
.badge.bg-success, .badge-success { background-color: #1a5c2a !important; color: #e5ede7 !important; }
.live-btn span, [class*="live"] .badge { background-color: #c0392b !important; color: #fff !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: 1px !important; animation: pulse 2s infinite !important; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ================================================
   PAGINATION
   ================================================ */
.page-link { background-color: #122016 !important; border-color: #1a2e1e !important; color: #c9922a !important; border-radius: 7px !important; margin: 0 2px !important; }
.page-link:hover { background-color: #1f3a22 !important; color: #e8b84b !important; }
.page-item.active .page-link { background: linear-gradient(135deg, #c9922a, #e8b84b) !important; border-color: transparent !important; color: #0a1c0e !important; }

/* ================================================
   LINKS & TEXT
   ================================================ */
a { color: #c9922a !important; transition: color 0.15s !important; }
a:hover { color: #e8b84b !important; text-decoration: none !important; }
.text-muted { color: #4d7055 !important; }
.text-primary { color: #c9922a !important; }
.text-success { color: #22753a !important; }
.text-danger { color: #b03020 !important; }
h1, h2, h3, h4, h5, h6 { color: #e5ede7 !important; font-family: 'Barlow Condensed', sans-serif !important; letter-spacing: 0.4px !important; }
hr { border-color: #1a2e1e !important; opacity: 0.5 !important; }

/* ================================================
   MISC
   ================================================ */
.bg-white, .bg-light { background-color: #122016 !important; }
.bg-dark { background-color: #0d1e10 !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: #1a2e1e !important; }
.list-group-item { background-color: #122016 !important; border-color: #1a2e1e !important; color: #e5ede7 !important; }
.list-group-item:hover { background-color: #162b1a !important; }
.list-group-item.active { background-color: #1a5c2a !important; border-color: #1a5c2a !important; }
::-webkit-scrollbar { width: 4px; height: 4px; background: #0a1c0e; }
::-webkit-scrollbar-thumb { background: #1a2e1e; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #c9922a; }
.bg-primary { background: linear-gradient(135deg, #c9922a, #e8b84b) !important; }

/* ================================================
   MOBILE BOTTOM NAV
   ================================================ */
.app-nav { background: linear-gradient(180deg, #0d2011 0%, #0a1c0e 100%) !important; border-top: 1px solid #1a2e1e !important; }
.app-nav a, .app-nav button { color: #4d7055 !important; font-size: 11px !important; font-weight: 500 !important; }
.app-nav a:hover, .app-nav button:hover, .app-nav a.active, .app-nav button.active { color: #c9922a !important; }

/* ================================================
   FOOTER
   ================================================ */
footer, .footer, [class*="footer"] { background-color: #07130a !important; border-top: 1px solid #1a2e1e !important; }
footer h1, footer h2, footer h3, footer h4 { color: #c9922a !important; font-family: 'Barlow Condensed', sans-serif !important; font-size: 18px !important; font-weight: 700 !important; }
footer p, footer span, footer li, .footer p, .footer li { color: #4d7055 !important; font-size: 14px !important; }
footer a, .footer a { color: #4d7055 !important; }
footer a:hover, .footer a:hover { color: #c9922a !important; }
.footer-bottom, .copyright-area, [class*="copyright"], [class*="footer-bottom"] { background-color: #040b05 !important; border-top: 1px solid #111a12 !important; padding: 14px 28px !important; }
[class*="copyright"] * { color: #2a3d2e !important; font-size: 13px !important; }

/* ================================================
   COOKIE BANNER
   ================================================ */
.cookies-card, [class*="cookies-card"] { background: linear-gradient(90deg, #0d2011 0%, #101e13 100%) !important; border-top: 2px solid #c9922a !important; color: #9dbfa5 !important; font-size: 14px !important; }
.cookies-card .btn, .cookies-card button { background: linear-gradient(135deg, #c9922a, #e8b84b) !important; color: #0a1c0e !important; border: none !important; border-radius: 8px !important; font-weight: 700 !important; }

/* ================================================
   PRELOADER / BACK TO TOP
   ================================================ */
.preloader { background-color: #0a1c0e !important; }
.back-to-top { background: linear-gradient(135deg, #c9922a, #e8b84b) !important; color: #0a1c0e !important; border-radius: 8px !important; }

/* ================================================
   ORANGE SQUARE FIX
   ================================================ */
.sports-category-open, .sport-category-open, .sidebar-open-btn,
[class*="category-open"], [class*="sidebar-open"], [class*="sport-open"],
main.home-page > button, .body-inner > button {
  background-color: #162019 !important;
  background: #162019 !important;
  color: #c9922a !important;
  border: 1px solid #1a2e1e !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

/* ================================================
   GLOBAL MOBILE — header, nav, buttons
   ================================================ */
@media (max-width: 767px) {
  /* Keep Register + Login buttons visible in header */
  .header-primary .btn--signup,
  .header-primary .btn--register,
  .navbar .btn--signup,
  .navbar .btn--register,
  header .btn--signup,
  header .btn--register {
    display: inline-flex !important;
    padding: 7px 13px !important;
    font-size: 12px !important;
    height: 34px !important;
  }

  /* Navbar brand always visible */
  .navbar-brand, .header-primary .navbar-brand {
    display: flex !important;
  }

  /* Hamburger toggler — style it */
  .navbar-toggler {
    border-color: rgba(201,146,42,0.4) !important;
    padding: 4px 8px !important;
  }
  .navbar-toggler-icon {
    filter: invert(0.7) sepia(1) saturate(3) hue-rotate(5deg) !important;
  }

  /* Collapsed nav menu background */
  .navbar-collapse, .navbar-collapse.show {
    background-color: #0d2011 !important;
    border: 1px solid #1a2e1e !important;
    border-radius: 0 0 10px 10px !important;
    padding: 12px !important;
    margin-top: 4px !important;
  }
}

/* ================================================
   LOGIN / REGISTER — MOBILE RESPONSIVE
   ================================================ */
@media (max-width: 767px) {
  /* Section scrollable, no fixed height */
  .login-page .account-section,
  .login-page section,
  .login-page .container,
  .register-page .account-section,
  .register-page section,
  .register-page .container {
    min-height: unset !important;
    padding: 12px 16px !important;
    align-items: flex-start !important;
    display: block !important;
    overflow-y: auto !important;
  }

  /* Column full width */
  .login-page .row,
  .register-page .row {
    margin: 0 !important;
  }
  .login-page .row > [class*="col"],
  .register-page .row > [class*="col"] {
    padding: 0 !important;
    width: 100% !important;
  }

  /* Form box: full screen width, compact padding */
  .login-form,
  .register-page .login-form,
  .register-page .account-form {
    min-width: unset !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 18px !important;
    margin: 12px 0 24px !important;
    border-radius: 12px !important;
  }

  /* Title */
  .login-form__title,
  .register-page h3,
  .register-page h4 {
    white-space: normal !important;
    font-size: 24px !important;
    margin-bottom: 14px !important;
  }

  /* Forgot Password - stay inline */
  .login-form form .d-flex > a,
  .login-form form a[href*="forget"],
  .login-form form a[href*="forgot"],
  .login-form form a[href*="password"] {
    font-size: 12px !important;
  }

  /* Buttons full width */
  .login-form .btn,
  .login-form button[type="submit"],
  .register-page .btn,
  .register-page button[type="submit"] {
    width: 100% !important;
    padding: 13px !important;
    font-size: 15px !important;
  }

  /* Inputs — 16px prevents iOS zoom */
  .login-form .form-control,
  .login-form input,
  .register-page .form-control,
  .register-page input {
    font-size: 16px !important;
    padding: 11px 12px !important;
  }

  /* "I agree" on mobile — allow wrap, smaller */
  .register-page .form-check-label,
  .register-page .form-check a {
    font-size: 11px !important;
    white-space: normal !important;
  }

  /* Header on mobile */
  .header-primary {
    padding: 0 16px !important;
  }
  .header-primary .btn--signup,
  .header-primary .btn--register {
    padding: 6px 11px !important;
    font-size: 11px !important;
    height: 32px !important;
  }
}a[href*="forget"], a[href*="forgot"], a[href*="password"] { text-decoration: none; }