/* FreeWatch - Complete Styles */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #0a0a0f;
  color: #fff;
  font-family: 'Heebo', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Scrollbar hide */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Glassmorphism */
.glass-dark {
  background: rgba(26, 26, 37, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Line clamp */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Skeleton shimmer */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Slide up animation */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.animate-slideUp {
  animation: slideUp 0.3s ease-out;
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out;
}

/* Card hover glow */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.03);
}

/* Custom accent color for radio/checkbox */
input[type="radio"] {
  accent-color: #00d4aa;
}

/* Custom scrollbar for desktop */
@media (min-width: 1024px) {
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: #0a0a0f; }
  ::-webkit-scrollbar-thumb { background: #2a2a3a; border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: #00d4aa; }
}

/* Player iframe */
iframe {
  border: none;
}

/* Focus styles */
input:focus, select:focus, button:focus-visible {
  outline: 2px solid rgba(0, 212, 170, 0.3);
  outline-offset: 2px;
}

/* Smooth transitions */
a, button, .transition-colors {
  transition: all 200ms ease-in-out;
}

/* Hero gradient */
.hero-gradient {
  background: linear-gradient(to top, #0a0a0f 0%, rgba(10, 10, 15, 0.7) 40%, transparent 100%);
}

/* Bottom safe area for iOS */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }
  main {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* RTL specific */
[dir="rtl"] .fa-chevron-left {
  transform: scaleX(-1);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .nav-item span {
    font-size: 10px;
  }
}

@media (min-width: 1024px) {
  #bottom-nav {
    max-width: 600px;
    margin: 0 auto;
    border-radius: 20px 20px 0 0;
  }
}

/* Genre chip active state */
.genre-chip.active,
.tv-genre-chip.active {
  background: #00d4aa;
  color: #0a0a0f;
}

/* Toast container positioning */
#toast-container {
  pointer-events: none;
}

#toast-container > * {
  pointer-events: auto;
}

/* Progress bar smooth */
.progress-bar {
  transition: width 0.3s linear;
}

/* Mini player safe positioning */
#mini-player + #bottom-nav,
body:has(#mini-player) #bottom-nav {
  /* Handled by fixed positioning */
}

/* Image error fallback */
img {
  object-fit: cover;
}

img[src=""] {
  display: none;
}