/* Custom Minimalistic Streaming Theme */

:root {
  --bg-main: #0a0d14;
  --bg-card: #111726;
  --bg-hover: #172033;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --accent-primary: #6366f1;
  --accent-glow: rgba(99, 102, 241, 0.25);
}

body {
  background-color: var(--bg-main);
  color: #e2e8f0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0b0f17;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* Video Card Hover Preview Smoothness */
.video-card-container {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 4:5 Poster Aspect Ratio Helper */
.aspect-4-5,
.aspect-\[4\/5\] {
  aspect-ratio: 4 / 5 !important;
}

.video-card-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.preview-video {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

.preview-video.is-active {
  opacity: 1;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-none {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Video.js Modern Minimalist Cinema Theme */
.video-js {
  font-family: inherit !important;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
  background-color: #000 !important;
}

.video-js .vjs-poster {
  background-size: cover !important;
  background-position: center !important;
}

/* Big Play Button in Center - Glassmorphic Circular Badge */
.video-js .vjs-big-play-button {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 72px !important;
  height: 72px !important;
  line-height: 68px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  margin: 0 !important;
  z-index: 10 !important;
}

.video-js:hover .vjs-big-play-button {
  background: #6366f1 !important;
  border-color: #a5b4fc !important;
  box-shadow: 0 0 35px rgba(99, 102, 241, 0.7) !important;
  transform: translate(-50%, -50%) scale(1.08) !important;
}

/* CRITICAL: Big play button MUST hide completely once playback starts */
.video-js.vjs-has-started .vjs-big-play-button {
  display: none !important;
}

/* Control Bar: Smooth Minimalist Cinema Bar */
.video-js .vjs-control-bar {
  background: linear-gradient(to top, rgba(10, 13, 20, 0.95), rgba(10, 13, 20, 0.6) 70%, transparent) !important;
  height: 48px !important;
  padding: 0 8px;
  display: flex !important;
  align-items: center !important;
  z-index: 20 !important;
}

/* Keep control bar visible on hover, user activity, or when paused */
.video-js.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.video-js.vjs-has-started.vjs-user-active .vjs-control-bar,
.video-js.vjs-has-started.vjs-paused .vjs-control-bar,
.video-js .vjs-control-bar:hover {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Video Dragging / Scrubbing Progress Bar - Fully Interactive & Frictionless */
.video-js .vjs-progress-control {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  min-width: 60px !important;
  height: 100% !important;
  cursor: pointer !important;
  touch-action: none !important;
}

.video-js .vjs-progress-holder {
  flex: 1 1 auto !important;
  height: 6px !important;
  margin: 0 8px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  cursor: pointer !important;
  touch-action: none !important;
  position: relative !important;
  transition: height 0.15s ease !important;
}

/* Generous vertical hit target so dragging never drops or slips */
.video-js .vjs-progress-holder::before {
  content: '' !important;
  position: absolute !important;
  top: -16px !important;
  bottom: -16px !important;
  left: 0 !important;
  right: 0 !important;
  cursor: pointer !important;
  z-index: 10 !important;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder,
.video-js .vjs-progress-control.vjs-sliding .vjs-progress-holder {
  height: 8px !important;
}

.video-js .vjs-play-progress {
  background: #6366f1 !important;
  border-radius: 9999px !important;
}

.video-js .vjs-play-progress:before {
  content: "" !important;
  position: absolute !important;
  right: -6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.9), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  border: 2px solid #6366f1 !important;
  cursor: grab !important;
  z-index: 15 !important;
  transition: transform 0.15s ease !important;
}

.video-js:hover .vjs-play-progress:before,
.video-js .vjs-progress-control.vjs-sliding .vjs-play-progress:before {
  transform: translateY(-50%) scale(1.2) !important;
  cursor: grabbing !important;
}

.video-js .vjs-load-progress {
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 9999px !important;
}

.video-js .vjs-load-progress div {
  background: rgba(255, 255, 255, 0.3) !important;
  border-radius: 9999px !important;
}

/* Time & Volume Controls */
.video-js .vjs-time-control {
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: 48px !important;
  padding: 0 4px !important;
  color: #cbd5e1 !important;
}

.video-js .vjs-volume-panel {
  display: flex !important;
  align-items: center !important;
}

.video-js .vjs-volume-bar.vjs-slider-horizontal {
  height: 4px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.25) !important;
}

.video-js .vjs-volume-level {
  background: #6366f1 !important;
  border-radius: 9999px !important;
}

/* Double-Tap Ripple Keyframes */
@keyframes doubleTapAnim {
  0% { transform: scale(0.65); opacity: 0; }
  50% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.animate-double-tap {
  animation: doubleTapAnim 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Subtle line clamp helper */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}