/* Energetic Sports Stadium Green/Yellow Theme */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+Arabic:wght@300;400;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --bg-primary: hsl(135, 41%, 7%);
  --bg-card: hsla(138, 45%, 14%, 0.65);
  --border-color: hsla(48, 96%, 53%, 0.15);
  --sport-green: hsl(142, 72%, 29%);
  --sport-green-light: hsl(142, 76%, 36%);
  --neon-yellow: hsl(48, 96%, 53%);
  
  --font-inter: 'Inter', sans-serif;
  --font-cairo: 'Cairo', sans-serif;
  --font-arabic: 'Cairo', 'Noto Sans Arabic', sans-serif;
  --font-kurdish: 'Noto Sans Arabic', 'Cairo', sans-serif;
}

[lang="ar"], [lang="ar"] * { font-family: var(--font-arabic) !important; }
[lang="ku"], [lang="ku"] * { font-family: var(--font-kurdish) !important; }
[lang="ckb"], [lang="ckb"] * { font-family: var(--font-kurdish) !important; }
[lang="en"], [lang="en"] * { font-family: var(--font-inter) !important; }

body {
  background: linear-gradient(135deg, hsl(135, 41%, 7%) 0%, hsl(138, 45%, 10%) 100%) !important;
  color: #f8fafc !important;
}

header {
  background: hsla(135, 41%, 7%, 0.85) !important;
  -webkit-backdrop-filter:blur(16px) !important;  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transform: translateZ(0) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.shadow-sm, .rounded-2xl, .glass, .shadow-card {
  background: var(--bg-card) !important;
  -webkit-backdrop-filter:blur(16px) !important;  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transform: translateZ(0) !important;
  border: 1px solid var(--border-color) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.shadow-sm:hover, .rounded-2xl:hover, a.group:hover, .glass:hover, .shadow-card:hover {
  transform: translateY(-4px) translateZ(0) !important;
  border-color: var(--neon-yellow) !important;
  box-shadow: 0 12px 30px -10px hsla(48, 96%, 53%, 0.2) !important;
}

button, a, input, select {
  min-height: 48px;
  min-width: 44px;
}

.btn-gold {
  background: linear-gradient(135deg, #fbbf24 0%, var(--neon-yellow) 55%, #f59e0b 100%) !important;
  color: #111827 !important;
  border: 1px solid var(--neon-yellow) !important;
  box-shadow: 0 10px 24px -8px hsla(48, 96%, 53%, 0.5) !important;
}

.btn-gold:hover {
  filter: brightness(1.06);
  box-shadow: 0 14px 30px -8px hsla(48, 96%, 53%, 0.65) !important;
}

.hidden-filter { display: none !important; }

/* Mobile Sidebar Drawer Styling */
.mobile-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: hsla(0, 0%, 0%, 0.6);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  -webkit-backdrop-filter:blur(16px);  backdrop-filter:blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateZ(0);
}
.mobile-sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.mobile-sidebar-drawer {
  position: fixed;
  top: 0;
  width: 280px;
  height: 100vh;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  z-index: 1001;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 30px hsla(0, 0%, 0%, 0.3);
  display: flex;
  flex-direction: column;
}
.mobile-sidebar-drawer.rtl-sidebar {
  right: 0;
  transform: translateX(100%);
}
.mobile-sidebar-drawer.rtl-sidebar.active {
  transform: translateX(0);
}
.mobile-sidebar-drawer.ltr-sidebar {
  left: 0;
  transform: translateX(-100%);
}
.mobile-sidebar-drawer.ltr-sidebar.active {
  transform: translateX(0);
}

.live-match-card {
  padding: 1rem;
  border-radius: 12px;
  background: hsla(138, 45%, 14%, 0.3);
  border: 1px solid var(--border-color);
  margin-bottom: 0.75rem;
  -webkit-backdrop-filter:blur(16px);  backdrop-filter:blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateZ(0);
}
.odds-btn {
  background: hsla(0, 0%, 100%, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: white;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  transition: all 0.2s;
  min-height: 36px;
  min-width: 48px;
}
.odds-btn:hover {
  background: var(--neon-yellow);
  color: black;
  border-color: var(--neon-yellow);
}
.odds-up {
  color: #22c55e !important;
  animation: odds-flash-green 1s ease;
}
.odds-down {
  color: #ef4444 !important;
  animation: odds-flash-red 1s ease;
}
@keyframes odds-flash-green {
  0% { background: hsla(142, 72%, 45%, 0.2); }
  100% { background: transparent; }
}
@keyframes odds-flash-red {
  0% { background: hsla(0, 84%, 60%, 0.2); }
  100% { background: transparent; }
}