@import url('https://cdn.jsdelivr.net/gh/rastikerdar/mikhak-font@v0.1.0/dist/mikhak.css');
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@200;400;600;800;950&display=swap');

@theme {
  --font-sans: 'Mikhak', 'Vazirmatn', sans-serif;
  --font-primary: 'Mikhak', 'Vazirmatn', sans-serif;
}

:root {
  --neon-cyan: #00f0ff;
  --neon-magenta: #ff2e8c; /* Hot Pink */
  --neon-violet: #8b5cf6;
  --neon-yellow: #ff2e8c;
  
  /* Fallback / Default Values */
  --bg-primary: #050508;
  --bg-secondary: #0a0a0f;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --glass-bg: rgba(8, 8, 12, 0.65);
  --glass-border: color-mix(in srgb, var(--neon-magenta) calc(0.15 * 100%), transparent);
  --glass-input-bg: rgba(255, 255, 255, 0.02);
  --glass-input-border: color-mix(in srgb, var(--neon-magenta) calc(0.15 * 100%), transparent);
}

[data-theme='pink-dark'] {
  --bg-primary: #050508;
  --bg-secondary: #0c0810;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --glass-bg: rgba(12, 8, 16, 0.65);
  --glass-border: color-mix(in srgb, var(--neon-magenta) calc(0.15 * 100%), transparent);
  --glass-input-bg: rgba(255, 255, 255, 0.02);
  --glass-input-border: color-mix(in srgb, var(--neon-magenta) calc(0.15 * 100%), transparent);
  --neon-cyan: #00f0ff;
  --neon-magenta: #ff2e8c;
  --neon-violet: #8b5cf6;
  --neon-yellow: #ff2e8c;
}

[data-theme='pink-light'] {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: color-mix(in srgb, var(--neon-magenta) calc(0.15 * 100%), transparent);
  --glass-input-bg: rgba(255, 255, 255, 0.9);
  --glass-input-border: color-mix(in srgb, var(--neon-magenta) calc(0.2 * 100%), transparent);
  --neon-cyan: #0096cc;
  --neon-magenta: #e11d48;
  --neon-violet: #6d28d9;
  --neon-yellow: #e11d48;
}

[data-theme='green-dark'] {
  --bg-primary: #020617;
  --bg-secondary: #051811;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --glass-bg: rgba(5, 24, 17, 0.65);
  --glass-border: rgba(16, 185, 129, 0.15);
  --glass-input-bg: rgba(255, 255, 255, 0.02);
  --glass-input-border: rgba(16, 185, 129, 0.15);
  --neon-cyan: #00f0ff;
  --neon-magenta: #10b981;
  --neon-violet: #8b5cf6;
  --neon-yellow: #10b981;
}

[data-theme='green-light'] {
  --bg-primary: #f8fafc;
  --bg-secondary: #f0fdf4;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(5, 150, 105, 0.15);
  --glass-input-bg: rgba(255, 255, 255, 0.9);
  --glass-input-border: rgba(5, 150, 105, 0.2);
  --neon-cyan: #0096cc;
  --neon-magenta: #059669;
  --neon-violet: #6d28d9;
  --neon-yellow: #059669;
}

* {
  font-family: 'Mikhak', 'Vazirmatn', sans-serif !important;
}

body {
  font-family: var(--font-primary, 'Mikhak', 'Vazirmatn', sans-serif) !important;
  background-color: var(--bg-primary) !important;
  color: var(--text-primary);
  overflow-x: hidden;
  user-select: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Fallback & Custom Background Gradient animations */
body {
  background-image: radial-gradient(circle at 50% -20%, #200412 0%, var(--bg-primary) 70%) !important;
}

[data-theme='pink-dark'] body {
  background-image: radial-gradient(circle at 50% -20%, #200412 0%, var(--bg-primary) 70%) !important;
}

[data-theme='pink-light'] body {
  background-image: radial-gradient(circle at 50% -20%, #ffe4e6 0%, var(--bg-primary) 70%) !important;
}

[data-theme='green-dark'] body {
  background-image: radial-gradient(circle at 50% -20%, #042014 0%, var(--bg-primary) 70%) !important;
}

[data-theme='green-light'] body {
  background-image: radial-gradient(circle at 50% -20%, #d1fae5 0%, var(--bg-primary) 70%) !important;
}

/* Glassmorphism Classes */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.glass-premium {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, color-mix(in srgb, var(--neon-magenta) calc(0.05 * 100%), transparent) 100%), var(--glass-bg);
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  border: 1px solid rgba(139, 92, 246, 0.15);
}

.glass-glow-cyan { box-shadow: 0 0 30px rgba(0, 240, 255, 0.08), inset 0 0 12px rgba(0, 240, 255, 0.04); }
.glass-glow-magenta { box-shadow: 0 0 30px color-mix(in srgb, var(--neon-magenta) calc(0.08 * 100%), transparent), inset 0 0 12px color-mix(in srgb, var(--neon-magenta) calc(0.04 * 100%), transparent); }
.glass-glow-violet { box-shadow: 0 0 30px rgba(139, 92, 246, 0.08), inset 0 0 12px rgba(139, 92, 246, 0.04); }

.glass-input {
  background: var(--glass-input-bg);
  border: 1px solid var(--glass-input-border);
  color: var(--text-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-input:focus {
  background: var(--glass-input-bg);
  border-color: var(--neon-magenta);
  box-shadow: 0 0 15px color-mix(in srgb, var(--neon-magenta) calc(0.25 * 100%), transparent);
}

/* Custom Text and Glow Utilities */
.text-neon-cyan {
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.text-neon-magenta {
  color: var(--neon-magenta);
  text-shadow: 0 0 10px color-mix(in srgb, var(--neon-magenta) calc(0.4 * 100%), transparent);
}

.text-neon-violet {
  color: var(--neon-violet);
  text-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

.border-neon-cyan {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.35);
}

.border-neon-magenta {
  border-color: var(--neon-magenta);
  box-shadow: 0 0 15px color-mix(in srgb, var(--neon-magenta) calc(0.35 * 100%), transparent);
}

/* Custom Horizontal Scrolling with No Scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
}

.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Page transitions animations */
.page-enter {
  opacity: 0;
  transform: translateY(12px);
}

.page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms, transform 400ms;
}

/* Skeleton animation */
@keyframes pulseGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.skeleton-pulse {
  animation: pulseGlow 1.8s infinite ease-in-out;
}

/* Unique Neon Glow-lines */
.glow-bottom-line {
  position: relative;
}
.glow-bottom-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-magenta), var(--neon-cyan), transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--neon-magenta) calc(0.5 * 100%), transparent);
}

/* --- ROTATED PLAYER FALLBACK FOR IFRAMES/BROWSERS --- */
.rotated-player {
  transform: rotate(90deg) !important;
  transform-origin: center !important;
  width: 100vh !important;
  height: 100vw !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  margin-top: -50vh !important;
  margin-left: -50vw !important;
  z-index: 9999 !important;
}



/* UI Enhancements for modernizing */
button, .cursor-pointer {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

button:hover:not(:disabled), .cursor-pointer:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px) scale(1.02);
}

button:active:not(:disabled), .cursor-pointer:active:not(:disabled) {
  transform: translateY(1px) scale(0.97);
}

.glass-card, .glass {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2), 0 0 15px color-mix(in srgb, var(--neon-magenta) calc(0.15 * 100%), transparent), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  border-color: color-mix(in srgb, var(--neon-magenta) calc(0.3 * 100%), transparent);
  transform: translateY(-2px);
}

/* Skeleton Loading Enhancement */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.animate-pulse {
  position: relative;
  overflow: hidden;
}

.animate-pulse::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 2s infinite ease-in-out;
  z-index: 1;
}

/* Movie Card Poster Hover Overlay */
.movie-poster-overlay {
  background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.4) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.group:hover .movie-poster-overlay {
  opacity: 1;
}

/* Border Radius & Spacing Enhancements */
.glass-card, .glass, .glass-premium, .glass-input {
  border-radius: 1.5rem !important;
}

button {
  border-radius: 1rem !important;
}

input, select, textarea {
  border-radius: 1rem !important;
}

/* Enhancing inputs */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--neon-magenta) calc(0.3 * 100%), transparent), 0 5px 15px rgba(0,0,0,0.2) !important;
  border-color: var(--neon-magenta) !important;
  transform: translateY(-1px);
}