/* CircleFlix Netflix Theme Styles */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --netflix-red: #E50914;
  --netflix-black: #141414;
  --netflix-dark: #181818;
  --netflix-card: #222222;
  --netflix-gray: #AAAAAA;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

html {
  scroll-behavior: auto !important;
}

body {
  background-color: var(--netflix-black);
  color: #FFFFFF;
  overflow-x: hidden;
}

body.overflow-hidden {
  overflow: hidden !important;
}

#player-modal {
  overflow: hidden !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #111;
}
::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Hide number input spin buttons */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide native search cancel and decoration buttons (custom x-circle icon used instead) */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
input[type=number] {
  -moz-appearance: textfield;
}

/* Premium Custom Select with inline SVG chevron */
.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 14px 14px;
  padding-right: 2.25rem !important;
}
.custom-select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F59E0B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Custom scrollbar for subtitle drawer */
#subtitle-results::-webkit-scrollbar {
  width: 5px;
}
#subtitle-results::-webkit-scrollbar-track {
  background: transparent;
}
#subtitle-results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}
#subtitle-results::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Custom scrollbar for episodes list */
#episodes-list::-webkit-scrollbar {
  width: 4px;
}
#episodes-list::-webkit-scrollbar-track {
  background: transparent;
}
#episodes-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
#episodes-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Hide scrollbar for carousel while allowing scroll */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Netflix Navbar Transition */
.navbar-scrolled {
  background-color: rgba(20, 20, 20, 0.95) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

/* Auto-Adjusting Responsive Navbar Dropdown */
#nav-more-menu {
  background-color: #18181b !important;
  opacity: 1 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  z-index: 100 !important;
  transform-origin: top left;
  animation: navDropdownFade 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes navDropdownFade {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#nav-more-list {
  max-height: calc(85vh - 70px);
  overflow-y: auto;
}

#nav-more-list::-webkit-scrollbar {
  width: 4px;
}

#nav-more-list::-webkit-scrollbar-track {
  background: transparent;
}

#nav-more-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

#nav-more-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Performance Optimizations: TanStack Virtualization Row styling & GPU compositing */
.row-container {
  contain: layout;
  content-visibility: auto;
  contain-intrinsic-size: 380px;
}

.virtual-row {
  will-change: transform;
}

.virtual-card-slot {
  will-change: transform;
}

.virtual-card-slot:hover {
  z-index: 30;
}

/* Netflix Poster Card Hover Animation with hardware acceleration */
.media-card {
  contain: content;
  transform: translateZ(0);
  transition: transform 0.22s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.22s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform-origin: center center;
}

.media-card:hover {
  transform: scale(1.06) translateY(-4px) translateZ(0);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.85);
  z-index: 20;
}

/* Fast scrolling track with hardware acceleration */
.scroll-smooth {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  will-change: scroll-position;
}

/* Carousel Scroll Buttons */
.scroll-btn {
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.row-container:hover .scroll-btn {
  opacity: 1;
}

/* Hero Vignette */
.hero-vignette {
  background: linear-gradient(
    180deg,
    rgba(20, 20, 20, 0.2) 0%,
    rgba(20, 20, 20, 0.4) 60%,
    rgba(20, 20, 20, 1) 100%
  );
}

/* Modal Animations */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-content-animated {
  animation: modalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ================= MOBILE APP & PWA STYLES ================= */

/* Eliminate 300ms tap delay & disable callout on touch devices */
button, a, input, select, .media-card {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Standalone PWA adjustments (when installed on Home Screen) */
@media all and (display-mode: standalone) {
  body {
    user-select: none;
    -webkit-user-select: none;
  }
  #navbar {
    padding-top: max(env(safe-area-inset-top, 0px), 12px) !important;
  }
}

/* Safe bottom spacing on mobile so cards are not covered by bottom nav */
@media (max-width: 1023px) {
  #rows-container {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Mobile Bottom Sheet for Detail Modal */
@media (max-width: 640px) {
  #detail-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  #detail-modal > div {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 1.5rem !important;
    border-top-right-radius: 1.5rem !important;
    max-height: 94vh !important;
    height: 94vh !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    animation: sheetSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  #detail-modal .modal-banner-header {
    height: 12.5rem !important;
    flex-shrink: 0 !important;
  }
}

@keyframes sheetSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0.8;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Safe Area Insets for Player in Landscape / Notch */
#player-modal {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Touch active feedback on cards */
@media (hover: none) and (pointer: coarse) {
  .media-card:hover {
    transform: none;
    box-shadow: none;
  }
  .media-card:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
  }
  .scroll-btn {
    display: none !important;
  }
}

/* Player Tools Flyout Menu Animation */
#player-tools-flyout:not(.hidden) {
  animation: playerToolsFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: top right;
}

@keyframes playerToolsFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Search Overlay Solid Backdrop & Isolation */
#search-overlay {
  background-color: #141414 !important;
  opacity: 1 !important;
}

#search-overlay:not(.hidden) {
  animation: searchOverlayFadeIn 0.15s ease-out forwards;
}

@keyframes searchOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Ensure cards in search-grid always conform to column width */
#search-grid .media-card {
  width: 100% !important;
  max-width: 100% !important;
}

/* Suppress movi-player internal broken screen in favor of CircleFlix VLC player overlay */
movi-player::part(error-screen) {
  display: none !important;
}
.movi-broken-indicator.movi-custom-error .movi-broken-container {
  display: none !important;
}

/* ========================================================
   YOUTUBE-STYLE DOUBLE-TAP & ARROW SEEK RIPPLE OVERLAY
   ======================================================== */
.yt-seek-ripple-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 25;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease-out, visibility 0.22s ease-out;
}

.yt-seek-ripple-container.active {
  opacity: 1;
  visibility: visible;
}

.yt-seek-ripple-left {
  left: 0;
}

.yt-seek-ripple-right {
  right: 0;
}

/* Semi-circular ripple arc backdrop */
.yt-seek-arc-left {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 0% 50%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.12) 55%, rgba(255, 255, 255, 0) 80%);
  border-radius: 0 1000px 1000px 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.yt-seek-ripple-container.active .yt-seek-arc-left {
  transform: scaleX(1);
}

.yt-seek-arc-right {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 100% 50%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.12) 55%, rgba(255, 255, 255, 0) 80%);
  border-radius: 1000px 0 0 1000px;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.28s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.yt-seek-ripple-container.active .yt-seek-arc-right {
  transform: scaleX(1);
}

/* Center badge with arrows & text */
.yt-seek-badge {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  user-select: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
  transform: scale(0.9);
  transition: transform 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.yt-seek-ripple-container.active .yt-seek-badge {
  transform: scale(1);
}

.yt-seek-arrows {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-bottom: 2px;
}

.yt-seek-arrows svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  opacity: 0.35;
  transition: opacity 0.15s, transform 0.15s;
}

/* Running arrow pulse animation (YouTube flowing waves) */
@keyframes ytArrowPulseLeft {
  0% { opacity: 0.3; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(-4px); }
  100% { opacity: 0.3; transform: translateX(0); }
}

@keyframes ytArrowPulseRight {
  0% { opacity: 0.3; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(4px); }
  100% { opacity: 0.3; transform: translateX(0); }
}

.yt-seek-ripple-container.active .yt-arrows-left svg:nth-child(1) {
  animation: ytArrowPulseLeft 0.55s infinite 0.22s;
}
.yt-seek-ripple-container.active .yt-arrows-left svg:nth-child(2) {
  animation: ytArrowPulseLeft 0.55s infinite 0.11s;
}
.yt-seek-ripple-container.active .yt-arrows-left svg:nth-child(3) {
  animation: ytArrowPulseLeft 0.55s infinite 0s;
}

.yt-seek-ripple-container.active .yt-arrows-right svg:nth-child(1) {
  animation: ytArrowPulseRight 0.55s infinite 0s;
}
.yt-seek-ripple-container.active .yt-arrows-right svg:nth-child(2) {
  animation: ytArrowPulseRight 0.55s infinite 0.11s;
}
.yt-seek-ripple-container.active .yt-arrows-right svg:nth-child(3) {
  animation: ytArrowPulseRight 0.55s infinite 0.22s;
}

.yt-seek-text {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.yt-seek-text.bounce {
  transform: scale(1.18);
}