/* =========================================================
   TabFlix UI Refresh - Premium Modern Streaming Aesthetics
   ========================================================= */

/* Custom Smooth Scrolling & Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #09090b;
}
::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 9999px;
  transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: #e50914;
}

/* Modern Header Glassmorphism */
header {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Mobile Bottom Navigation Bar Polish */
nav[aria-label="Mobile navigation"] {
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  background: rgba(9, 9, 12, 0.94) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.85) !important;
}

/* Navigation Buttons Active State Glow */
nav[aria-label="Mobile navigation"] button:active {
  transform: scale(0.92);
}

/* Movie & TV Card Enhancements */
a[href^="/watch/"] {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}
a[href^="/watch/"]:hover {
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.9), 0 0 20px rgba(229, 9, 20, 0.22) !important;
}
a[href^="/watch/"] img {
  border-radius: 12px !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
a[href^="/watch/"]:hover img {
  transform: scale(1.035) !important;
}

/* Distinct Badges for Content Types */
span:has(> svg):has(span),
.badge-movie {
  letter-spacing: 0.05em;
  font-weight: 700;
}

/* Watch Page Player Container Elevation */
div[data-testid="player-container"],
iframe[data-testid="player-iframe"] {
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9), 0 0 30px rgba(229, 9, 20, 0.12) !important;
}

/* Watch Now Primary Action Button */
button:has(> svg):hover,
a:has(> svg.w-4):hover {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

/* Timeline scrubber styling */
input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0 0 10px #e50914 !important;
}

/* Subtle glowing logo badge */
.tabflix-brand-badge {
  background: linear-gradient(135deg, #ff1e40 0%, #e50914 50%, #d48b00 100%) !important;
  box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}