/* Playful Neon Purple/Pink Arcade 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(267, 71%, 7%);
  --bg-card: hsla(267, 59%, 14%, 0.6);
  --border-color: hsla(327, 83%, 60%, 0.15);
  --neon-purple: hsl(271, 91%, 65%);
  --neon-pink: hsl(327, 83%, 60%);
  --accent-gold: hsl(45, 100%, 68%);
  
  --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(267, 71%, 7%) 0%, hsl(267, 60%, 11%) 100%) !important;
  color: #f8fafc !important;
}

header {
  background: hsla(267, 71%, 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;
}

.glass, .shadow-card, .rounded-2xl {
  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;
}

.glass:hover, .shadow-card:hover, a.group:hover {
  transform: translateY(-4px) translateZ(0) !important;
  border-color: var(--neon-pink) !important;
  box-shadow: 0 12px 30px -10px hsla(327, 83%, 60%, 0.25), 0 0 20px -5px hsla(271, 91%, 65%, 0.3) !important;
}

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

.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.7);
  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 40px hsla(0, 0%, 0%, 0.5);
  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);
}

.reel-rolling {
  animation: reel-blur 0.1s linear infinite;
}
@keyframes reel-blur {
  0% { transform: translateY(0); filter: blur(0px); }
  50% { transform: translateY(10px); filter: blur(2px); }
  100% { transform: translateY(-10px); filter: blur(0px); }
}

.slot-month-card {
  background: linear-gradient(135deg, hsla(271, 91%, 65%, 0.15) 0%, hsla(327, 83%, 60%, 0.15) 100%);
  border: 1px solid var(--neon-pink);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 2rem;
  text-align: center;
  -webkit-backdrop-filter:blur(16px);  backdrop-filter:blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateZ(0);
}