/*
Theme Name: PrimeFlix by DownPrime.com
Theme URI: https://www.downprime.com
Author: DownPrime
Author URI: https://www.downprime.com
Description: Plataforma OTT avanzada tipo Netflix - Películas, Series y Animes con TMDB API en tiempo real
Version: 2.7.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: primeflx
Tags: entertainment, ott, streaming, netflix-like, movies, series, anime
*/

/* ============================================================
   PRIMEFLX - GLOBAL CSS VARIABLES & RESET
   ============================================================ */
:root {
  /* Core Colors */
  --pf-bg:           #050508;
  --pf-bg-2:         #0a0a10;
  --pf-bg-3:         #12121a;
  --pf-bg-card:      #14141e;
  --pf-bg-glass:     rgba(255,255,255,0.04);
  --pf-border:       rgba(255,255,255,0.08);
  --pf-border-hover: rgba(255,255,255,0.18);

  /* Accent Colors */
  --pf-accent:       #7c3aed;
  --pf-accent-2:     #a855f7;
  --pf-accent-3:     #c084fc;
  --pf-accent-glow:  rgba(124,58,237,0.4);
  --pf-red:          #ef4444;
  --pf-gold:         #f59e0b;
  --pf-green:        #10b981;

  /* Text */
  --pf-text:         #f1f0f8;
  --pf-text-2:       #a09bbf;
  --pf-text-3:       #5e5a78;

  /* Gradients */
  --pf-grad-hero:    linear-gradient(135deg, #050508 0%, #1a0a2e 50%, #050508 100%);
  --pf-grad-card:    linear-gradient(180deg, transparent 50%, rgba(5,5,8,0.98) 100%);
  --pf-grad-accent:  linear-gradient(135deg, #7c3aed, #a855f7);
  --pf-grad-shine:   linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%);

  /* Blur */
  --pf-blur-sm:      blur(8px);
  --pf-blur-md:      blur(16px);
  --pf-blur-lg:      blur(32px);

  /* Spacing */
  --pf-radius:       12px;
  --pf-radius-lg:    20px;
  --pf-radius-xl:    28px;

  /* Transitions */
  --pf-transition:   0.3s cubic-bezier(0.4,0,0.2,1);
  --pf-transition-slow: 0.6s cubic-bezier(0.4,0,0.2,1);

  /* Fonts */
  --pf-font-display: 'Outfit', 'Syne', sans-serif;
  --pf-font-body:    'DM Sans', 'Nunito', sans-serif;
  --pf-font-mono:    'JetBrains Mono', monospace;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--pf-font-body);
  background: var(--pf-bg);
  color: var(--pf-text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
ul, ol { list-style: none; }

/* ============================================================
   GLOBAL UTILITY CLASSES
   ============================================================ */
.pf-container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.pf-glass {
  background: var(--pf-bg-glass);
  backdrop-filter: var(--pf-blur-md);
  -webkit-backdrop-filter: var(--pf-blur-md);
  border: 1px solid var(--pf-border);
}
.pf-hidden { display: none !important; }
.pf-flex { display: flex; }
.pf-center { display: flex; align-items: center; justify-content: center; }
.pf-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--pf-bg); }
::-webkit-scrollbar-thumb { background: var(--pf-accent); border-radius: 3px; }

/* ============================================================
   LOADER GLOBAL
   ============================================================ */
.pf-loader-overlay {
  position: fixed; inset: 0;
  background: var(--pf-bg);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.25s, visibility 0.25s;
}
.pf-loader-overlay.hidden,
.pf-loader-overlay.fade-out { opacity: 0; visibility: hidden; pointer-events: none; }
.pf-loader-logo {
  font-family: var(--pf-font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  background: var(--pf-grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pf-pulse 1.5s ease-in-out infinite;
}
@keyframes pf-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.97); }
}

/* ============================================================
   NAVBAR
   ============================================================ */
#pf-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--pf-transition);
}
#pf-navbar.scrolled {
  background: rgba(5,5,8,0.92);
  backdrop-filter: var(--pf-blur-md);
  -webkit-backdrop-filter: var(--pf-blur-md);
  border-bottom: 1px solid var(--pf-border);
  box-shadow: 0 4px 32px rgba(0,0,0,0.5);
}
.pf-nav-logo {
  font-family: var(--pf-font-display);
  font-size: 1.6rem;
  font-weight: 900;
  background: var(--pf-grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}
.pf-nav-links {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pf-nav-link {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pf-text-2);
  transition: var(--pf-transition);
  position: relative;
}
.pf-nav-link:hover, .pf-nav-link.active { color: var(--pf-text); background: var(--pf-bg-glass); }
.pf-nav-right { display: flex; align-items: center; gap: 12px; }

/* Search bar in nav */
.pf-nav-search {
  position: relative;
  display: flex;
  align-items: center;
}
.pf-search-toggle {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--pf-bg-glass);
  border: 1px solid var(--pf-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--pf-text-2);
  transition: var(--pf-transition);
}
.pf-search-toggle:hover { color: var(--pf-text); border-color: var(--pf-border-hover); }
.pf-search-expanded {
  position: absolute;
  right: 0;
  width: 320px;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  overflow: hidden;
  transform-origin: right center;
  transition: var(--pf-transition);
  display: none;
}
.pf-search-expanded.open { display: block; }
.pf-search-input-wrap {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  gap: 10px;
}
.pf-search-input-wrap input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--pf-text);
  font-size: 0.9rem;
}
.pf-search-input-wrap input::placeholder { color: var(--pf-text-3); }
.pf-search-results-dropdown {
  max-height: 380px;
  overflow-y: auto;
  border-top: 1px solid var(--pf-border);
}
.pf-search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: var(--pf-transition);
}
.pf-search-result-item:hover { background: var(--pf-bg-glass); }
.pf-search-result-thumb {
  width: 38px; height: 56px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--pf-bg-3);
  flex-shrink: 0;
}
.pf-search-result-info { flex: 1; overflow: hidden; }
.pf-search-result-title { font-size: 0.85rem; font-weight: 600; }
.pf-search-result-meta { font-size: 0.75rem; color: var(--pf-text-3); margin-top: 2px; }
.pf-search-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pf-badge-movie { background: rgba(124,58,237,0.3); color: var(--pf-accent-3); }
.pf-badge-serie { background: rgba(16,185,129,0.2); color: var(--pf-green); }
.pf-badge-anime { background: rgba(245,158,11,0.2); color: var(--pf-gold); }

/* User avatar */
.pf-user-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--pf-border);
  transition: var(--pf-transition);
  position: relative;
}
.pf-user-avatar:hover { border-color: var(--pf-accent); }
.pf-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-user-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 220px;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  overflow: hidden;
  padding: 8px;
  display: none;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.pf-user-dropdown.open { display: block; }
.pf-dropdown-user-info {
  padding: 12px;
  border-bottom: 1px solid var(--pf-border);
  margin-bottom: 8px;
}
.pf-dropdown-username { font-weight: 700; font-size: 0.9rem; }
.pf-dropdown-email { font-size: 0.75rem; color: var(--pf-text-3); }
.pf-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--pf-text-2);
  cursor: pointer;
  transition: var(--pf-transition);
}
.pf-dropdown-item:hover { background: var(--pf-bg-glass); color: var(--pf-text); }
.pf-dropdown-item.danger:hover { color: var(--pf-red); }
.pf-auth-btn {
  padding: 8px 20px;
  background: var(--pf-grad-accent);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  transition: var(--pf-transition);
}
.pf-auth-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* ============================================================
   HERO SECTION
   ============================================================ */
#pf-hero {
  position: relative;
  height: 85vh;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.pf-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.pf-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: var(--pf-transition-slow);
}
.pf-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(5,5,8,0.95) 30%, rgba(5,5,8,0.3) 70%, rgba(5,5,8,0.1) 100%),
              linear-gradient(to top, rgba(5,5,8,1) 0%, transparent 50%);
}
.pf-hero-content {
  position: relative;
  z-index: 1;
  padding: 0 5% 6%;
  max-width: 620px;
}
.pf-hero-meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pf-text-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pf-hero-badge {
  padding: 3px 10px;
  background: var(--pf-grad-accent);
  border-radius: 20px;
  color: white;
  font-size: 0.7rem;
}
.pf-hero-title {
  font-family: var(--pf-font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.pf-hero-desc {
  font-size: 0.95rem;
  color: var(--pf-text-2);
  line-height: 1.6;
  margin-bottom: 28px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pf-hero-actions { display: flex; gap: 12px; align-items: center; }
.pf-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px;
  background: var(--pf-text);
  color: var(--pf-bg);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: var(--pf-transition);
  border: 2px solid transparent;
}
.pf-btn-primary:hover { background: var(--pf-text-2); transform: scale(1.02); }
.pf-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px;
  background: rgba(255,255,255,0.12);
  color: var(--pf-text);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  backdrop-filter: var(--pf-blur-sm);
  transition: var(--pf-transition);
  border: 1px solid var(--pf-border);
}
.pf-btn-secondary:hover { background: rgba(255,255,255,0.2); transform: scale(1.02); }
.pf-hero-dots {
  position: absolute;
  bottom: 24px; right: 5%;
  display: flex; gap: 8px;
  z-index: 1;
}
.pf-hero-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pf-text-3);
  cursor: pointer;
  transition: var(--pf-transition);
}
.pf-hero-dot.active { background: var(--pf-accent); width: 24px; border-radius: 3px; }

/* ============================================================
   CONTENT ROWS (SLIDERS)
   ============================================================ */
.pf-section { padding: 32px 0; }
.pf-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  margin-bottom: 16px;
}
.pf-section-title {
  font-family: var(--pf-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
.pf-section-title-icon { color: var(--pf-accent); }
.pf-section-see-all {
  font-size: 0.8rem;
  color: var(--pf-text-3);
  display: flex; align-items: center; gap: 4px;
  transition: var(--pf-transition);
}
.pf-section-see-all:hover { color: var(--pf-accent-3); }

.pf-slider-wrap {
  position: relative;
  overflow: hidden;
}
.pf-slider-track {
  display: flex;
  gap: 12px;
  padding: 8px 24px 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pf-slider-track::-webkit-scrollbar { display: none; }

.pf-slider-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 10;
  width: 44px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg, rgba(5,5,8,0.9), transparent);
  color: white;
  cursor: pointer;
  transition: var(--pf-transition);
  border-radius: 4px;
}
.pf-slider-arrow.prev { left: 0; background: linear-gradient(90deg, rgba(5,5,8,0.95), transparent); }
.pf-slider-arrow.next { right: 0; background: linear-gradient(270deg, rgba(5,5,8,0.95), transparent); }
.pf-slider-arrow:hover svg { transform: scale(1.3); }
.pf-slider-arrow svg { transition: var(--pf-transition); }

/* ============================================================
   CONTENT CARDS
   ============================================================ */
.pf-card {
  flex-shrink: 0;
  width: 160px;
  cursor: pointer;
  position: relative;
  transition: transform var(--pf-transition), z-index 0s;
}
@media (min-width: 768px) { .pf-card { width: 180px; } }
@media (min-width: 1200px) { .pf-card { width: 200px; } }

.pf-card:hover { transform: scale(1.08) translateY(-4px); z-index: 10; }
.pf-card-thumb {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: var(--pf-radius);
  overflow: hidden;
  background: var(--pf-bg-3);
  position: relative;
}
.pf-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: var(--pf-transition-slow);
}
.pf-card:hover .pf-card-thumb img { transform: scale(1.05); }
.pf-card-overlay {
  position: absolute;
  inset: 0;
  background: var(--pf-grad-card);
  opacity: 0;
  transition: var(--pf-transition);
  border-radius: var(--pf-radius);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px;
}
.pf-card:hover .pf-card-overlay { opacity: 1; }
.pf-card-play-btn {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: var(--pf-blur-sm);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.3);
  transition: var(--pf-transition);
}
.pf-card-play-btn:hover { background: var(--pf-text); color: var(--pf-bg); }
.pf-card-overlay-actions { display: flex; gap: 6px; }
.pf-card-action-btn {
  width: 32px; height: 32px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  color: var(--pf-text-2);
  transition: var(--pf-transition);
  border: 1px solid var(--pf-border);
}
.pf-card-action-btn:hover { color: var(--pf-text); border-color: var(--pf-border-hover); }
.pf-card-action-btn.liked { color: var(--pf-red); }
.pf-card-info { padding: 8px 2px 0; }
.pf-card-title {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-card-meta { font-size: 0.72rem; color: var(--pf-text-3); margin-top: 2px; }
.pf-card-rating {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--pf-gold);
  font-size: 0.72rem;
  font-weight: 600;
}

/* Progress bar on card (Continue watching) */
.pf-card-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 0 0 var(--pf-radius) var(--pf-radius);
}
.pf-card-progress-bar {
  height: 100%;
  background: var(--pf-accent);
  border-radius: inherit;
  transition: width 0.3s;
}

/* Card skeleton loader */
.pf-card-skeleton .pf-card-thumb {
  background: linear-gradient(90deg, var(--pf-bg-3) 25%, var(--pf-bg-glass) 50%, var(--pf-bg-3) 75%);
  background-size: 200% 100%;
  animation: pf-shimmer 1.5s infinite;
}
@keyframes pf-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ============================================================
   PLAYER PAGE
   ============================================================ */
#pf-player-page { background: #000; min-height: 100vh; }
.pf-player-container {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding-top: 56.25%;
}
.pf-player-iframe-wrap {
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: hidden;
  background: #000;
}
.pf-player-iframe-wrap iframe {
  width: 100%; height: 100%;
  border: none;
}
.pf-player-loader {
  position: absolute;
  inset: 0;
  background: var(--pf-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 5;
  transition: opacity 0.5s;
}
.pf-player-loader.hidden { opacity: 0; pointer-events: none; }
.pf-player-spinner {
  width: 50px; height: 50px;
  border: 3px solid var(--pf-border);
  border-top-color: var(--pf-accent);
  border-radius: 50%;
  animation: pf-spin 0.8s linear infinite;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }

.pf-player-info {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px;
}
.pf-player-meta {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin-bottom: 12px;
}
.pf-player-title {
  font-family: var(--pf-font-display);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pf-tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid;
}
.pf-tag-year { border-color: var(--pf-border); color: var(--pf-text-3); }
.pf-tag-rating { border-color: rgba(245,158,11,0.4); color: var(--pf-gold); }
.pf-tag-hd { border-color: rgba(124,58,237,0.4); color: var(--pf-accent-3); background: rgba(124,58,237,0.1); }

/* Episode selector */
.pf-episode-section { padding: 0 24px 40px; max-width: 1600px; margin: 0 auto; }
.pf-season-tabs {
  display: flex; gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.pf-season-tab {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-border);
  color: var(--pf-text-2);
  cursor: pointer;
  transition: var(--pf-transition);
}
.pf-season-tab.active {
  background: var(--pf-grad-accent);
  border-color: transparent;
  color: white;
}
.pf-episodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.pf-episode-card {
  display: flex; gap: 12px;
  padding: 12px;
  background: var(--pf-bg-card);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  cursor: pointer;
  transition: var(--pf-transition);
}
.pf-episode-card:hover, .pf-episode-card.active {
  background: var(--pf-bg-3);
  border-color: var(--pf-accent);
}
.pf-episode-thumb {
  width: 120px; height: 68px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--pf-bg-3);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.pf-episode-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-episode-thumb-play {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: var(--pf-transition);
}
.pf-episode-card:hover .pf-episode-thumb-play { opacity: 1; }
.pf-episode-details { flex: 1; min-width: 0; }
.pf-episode-num { font-size: 0.72rem; color: var(--pf-text-3); font-weight: 600; }
.pf-episode-title { font-size: 0.875rem; font-weight: 600; margin: 2px 0; }
.pf-episode-desc {
  font-size: 0.75rem;
  color: var(--pf-text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   INTERACTION BAR (Likes, Rating, Reactions)
   ============================================================ */
.pf-interaction-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--pf-border);
  margin-bottom: 20px;
}
.pf-reaction-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-border);
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--pf-text-2);
  transition: var(--pf-transition);
  position: relative;
  overflow: hidden;
}
.pf-reaction-btn:hover { border-color: var(--pf-border-hover); color: var(--pf-text); }
.pf-reaction-btn.active-like { color: var(--pf-green); border-color: var(--pf-green); background: rgba(16,185,129,0.1); }
.pf-reaction-btn.active-dislike { color: var(--pf-red); border-color: var(--pf-red); background: rgba(239,68,68,0.1); }
.pf-reaction-btn.active-fav { color: var(--pf-gold); border-color: var(--pf-gold); background: rgba(245,158,11,0.1); }

.pf-emoji-reactions {
  display: flex; gap: 6px;
  margin-left: auto;
}
.pf-emoji-btn {
  padding: 6px 12px;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-border);
  border-radius: 20px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: var(--pf-transition);
  position: relative;
}
.pf-emoji-btn:hover { transform: scale(1.2) rotate(-5deg); border-color: var(--pf-border-hover); }
.pf-emoji-btn .emoji-count {
  font-size: 0.65rem;
  font-family: var(--pf-font-body);
  color: var(--pf-text-3);
  vertical-align: super;
}

/* ============================================================
   MODAL / LIGHTBOX
   ============================================================ */
.pf-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: var(--pf-blur-md);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: var(--pf-transition);
}
.pf-modal-overlay.open { opacity: 1; visibility: visible; }
.pf-modal {
  width: 100%;
  max-width: 860px;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-xl);
  overflow: hidden;
  transform: translateY(30px) scale(0.97);
  transition: var(--pf-transition);
  max-height: 90vh;
  overflow-y: auto;
}
.pf-modal-overlay.open .pf-modal { transform: translateY(0) scale(1); }
.pf-modal-hero {
  position: relative;
  width: 100%;
  height: 280px;
}
.pf-modal-hero img { width: 100%; height: 100%; object-fit: cover; }
.pf-modal-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), var(--pf-bg-3));
}
.pf-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--pf-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--pf-text);
  cursor: pointer;
  z-index: 1;
  transition: var(--pf-transition);
}
.pf-modal-close:hover { background: var(--pf-red); border-color: var(--pf-red); }
.pf-modal-body { padding: 20px 24px 28px; }
.pf-modal-title {
  font-family: var(--pf-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.pf-modal-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.pf-modal-desc { font-size: 0.9rem; color: var(--pf-text-2); line-height: 1.7; margin-bottom: 20px; }
.pf-modal-actions { display: flex; gap: 10px; }

/* ============================================================
   AUTH MODAL
   ============================================================ */
.pf-auth-modal .pf-modal {
  max-width: 440px;
  border-radius: var(--pf-radius-xl);
}
.pf-auth-header { padding: 32px 32px 0; text-align: center; }
.pf-auth-logo {
  font-family: var(--pf-font-display);
  font-size: 1.8rem;
  font-weight: 900;
  background: var(--pf-grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
.pf-auth-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; }
.pf-auth-sub { font-size: 0.85rem; color: var(--pf-text-3); }
.pf-auth-body { padding: 28px 32px 32px; }
.pf-social-login { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.pf-social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px;
  background: var(--pf-bg-glass);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pf-text);
  cursor: pointer;
  transition: var(--pf-transition);
}
.pf-social-btn:hover { border-color: var(--pf-border-hover); background: var(--pf-bg-3); }
.pf-divider {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
  color: var(--pf-text-3);
  font-size: 0.8rem;
}
.pf-divider::before, .pf-divider::after {
  content: ''; flex: 1;
  height: 1px; background: var(--pf-border);
}
.pf-form-group { margin-bottom: 16px; }
.pf-form-label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 6px; color: var(--pf-text-2); }
.pf-form-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--pf-bg);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  color: var(--pf-text);
  font-size: 0.9rem;
  outline: none;
  transition: var(--pf-transition);
}
.pf-form-input:focus { border-color: var(--pf-accent); box-shadow: 0 0 0 3px rgba(124,58,237,0.15); }
.pf-form-submit {
  width: 100%;
  padding: 13px;
  background: var(--pf-grad-accent);
  color: white;
  border-radius: var(--pf-radius);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--pf-transition);
  margin-top: 8px;
}
.pf-form-submit:hover { opacity: 0.9; transform: translateY(-1px); }
.pf-auth-switch { text-align: center; margin-top: 16px; font-size: 0.85rem; color: var(--pf-text-3); }
.pf-auth-switch a { color: var(--pf-accent-3); font-weight: 600; cursor: pointer; }
.pf-form-error { font-size: 0.8rem; color: var(--pf-red); margin-top: 4px; display: none; }
.pf-form-error.show { display: block; }

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.pf-profile-hero {
  background: linear-gradient(135deg, var(--pf-bg-2), var(--pf-bg-3));
  padding: 100px 24px 48px;
  position: relative;
  overflow: hidden;
}
.pf-profile-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(124,58,237,0.15), transparent 60%);
  pointer-events: none;
}
.pf-profile-info {
  max-width: 960px; margin: 0 auto;
  display: flex; gap: 28px; align-items: flex-end;
  position: relative; z-index: 1;
}
.pf-profile-avatar {
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 3px solid var(--pf-accent);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--pf-bg-3);
}
.pf-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-profile-name { font-family: var(--pf-font-display); font-size: 1.6rem; font-weight: 800; }
.pf-profile-email { font-size: 0.85rem; color: var(--pf-text-3); margin-top: 4px; }
.pf-profile-stats {
  display: flex; gap: 24px;
  margin-top: 16px;
}
.pf-stat-item { text-align: center; }
.pf-stat-num { font-size: 1.2rem; font-weight: 800; color: var(--pf-accent-3); }
.pf-stat-label { font-size: 0.72rem; color: var(--pf-text-3); }

.pf-profile-tabs {
  display: flex; gap: 4px;
  padding: 0 24px;
  border-bottom: 1px solid var(--pf-border);
  max-width: 960px; margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.pf-profile-tab {
  padding: 14px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pf-text-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: var(--pf-transition);
}
.pf-profile-tab.active { color: var(--pf-text); border-bottom-color: var(--pf-accent); }
.pf-profile-content { max-width: 960px; margin: 0 auto; padding: 28px 24px; }

/* ============================================================
   SUBSCRIPTION / PLANS
   ============================================================ */
.pf-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  padding: 0 24px 40px;
  max-width: 960px; margin: 0 auto;
}
.pf-plan-card {
  background: var(--pf-bg-card);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: 28px;
  position: relative;
  transition: var(--pf-transition);
}
.pf-plan-card.featured {
  border-color: var(--pf-accent);
  background: linear-gradient(135deg, rgba(124,58,237,0.1), var(--pf-bg-card));
}
.pf-plan-card:hover { transform: translateY(-4px); border-color: var(--pf-border-hover); }
.pf-plan-card.featured:hover { border-color: var(--pf-accent-2); }
.pf-plan-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 3px 14px;
  background: var(--pf-grad-accent);
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  color: white;
  white-space: nowrap;
}
.pf-plan-name { font-family: var(--pf-font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.pf-plan-price { font-size: 2rem; font-weight: 900; margin-bottom: 4px; }
.pf-plan-price span { font-size: 0.9rem; font-weight: 400; color: var(--pf-text-3); }
.pf-plan-period { font-size: 0.8rem; color: var(--pf-text-3); margin-bottom: 20px; }
.pf-plan-features { margin-bottom: 24px; }
.pf-plan-feature {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  font-size: 0.85rem;
  color: var(--pf-text-2);
  border-bottom: 1px solid var(--pf-border);
}
.pf-plan-feature:last-child { border-bottom: none; }
.pf-plan-feature-icon { color: var(--pf-green); flex-shrink: 0; }
.pf-plan-feature.disabled .pf-plan-feature-icon { color: var(--pf-text-3); }
.pf-plan-feature.disabled { opacity: 0.5; }
.pf-plan-btn {
  width: 100%;
  padding: 12px;
  border-radius: var(--pf-radius);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--pf-transition);
  border: 1px solid var(--pf-border);
  background: var(--pf-bg-glass);
  color: var(--pf-text);
}
.pf-plan-card.featured .pf-plan-btn {
  background: var(--pf-grad-accent);
  border-color: transparent;
  color: white;
}
.pf-plan-btn:hover { transform: translateY(-1px); opacity: 0.9; }

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
#pf-toast-container {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.pf-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--pf-text);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  transform: translateX(120%);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: all;
  max-width: 320px;
}
.pf-toast.show { transform: translateX(0); }
.pf-toast.success { border-left: 3px solid var(--pf-green); }
.pf-toast.error { border-left: 3px solid var(--pf-red); }
.pf-toast.info { border-left: 3px solid var(--pf-accent); }

/* ============================================================
   FOOTER
   ============================================================ */
#pf-footer {
  background: var(--pf-bg-2);
  border-top: 1px solid var(--pf-border);
  padding: 40px 24px;
  margin-top: 40px;
}
.pf-footer-inner {
  max-width: 1400px; margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}
.pf-footer-brand .pf-nav-logo { font-size: 1.4rem; margin-bottom: 12px; }
.pf-footer-desc { font-size: 0.85rem; color: var(--pf-text-3); line-height: 1.6; }
.pf-footer-col-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pf-text-2); }
.pf-footer-links { display: flex; flex-direction: column; gap: 8px; }
.pf-footer-link { font-size: 0.85rem; color: var(--pf-text-3); transition: var(--pf-transition); }
.pf-footer-link:hover { color: var(--pf-text); }
.pf-footer-bottom {
  max-width: 1400px; margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--pf-border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8rem; color: var(--pf-text-3);
  flex-wrap: wrap; gap: 12px;
}

/* ============================================================
   MOBILE APP NAVIGATION (bottom bar)
   ============================================================ */
.pf-mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: rgba(10,10,16,0.95);
  backdrop-filter: var(--pf-blur-md);
  -webkit-backdrop-filter: var(--pf-blur-md);
  border-top: 1px solid var(--pf-border);
  padding: 8px 0 env(safe-area-inset-bottom, 8px);
}
.pf-mobile-nav-items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 480px; margin: 0 auto;
}
.pf-mobile-nav-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 8px;
  cursor: pointer;
  color: var(--pf-text-3);
  transition: var(--pf-transition);
  font-size: 0.62rem;
  font-weight: 600;
}
.pf-mobile-nav-item.active, .pf-mobile-nav-item:hover { color: var(--pf-accent-3); }
.pf-mobile-nav-item svg { width: 22px; height: 22px; }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 768px) {
  .pf-nav-links { display: none; }
  #pf-footer { display: none; }
  .pf-mobile-nav { display: block; }
  body { padding-bottom: 72px; }
  .pf-hero-content { padding: 0 16px 80px; max-width: 100%; }
  .pf-hero-title { font-size: 1.8rem; }
  .pf-hero-desc { font-size: 0.85rem; -webkit-line-clamp: 2; }
  .pf-hero-actions { gap: 8px; }
  .pf-btn-primary, .pf-btn-secondary { padding: 10px 18px; font-size: 0.85rem; }
  .pf-search-expanded { width: 85vw; right: -60px; }
  .pf-episodes-grid { grid-template-columns: 1fr; }
  .pf-footer-inner { grid-template-columns: 1fr; }
  .pf-plans-grid { grid-template-columns: 1fr; }
  .pf-modal { border-radius: var(--pf-radius-lg); }
  .pf-modal-hero { height: 200px; }
  .pf-card { width: 130px; }
  #pf-navbar { padding: 0 16px; }
  .pf-container { padding: 0 16px; }
}

@media (max-width: 480px) {
  .pf-card { width: 120px; }
  .pf-section-header { padding: 0 16px; }
  .pf-slider-track { padding: 8px 16px 16px; gap: 10px; }
}

/* ============================================================
   GENRES / FILTER BAR
   ============================================================ */
.pf-filter-bar {
  display: flex;
  gap: 8px;
  padding: 0 24px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pf-filter-bar::-webkit-scrollbar { display: none; }
.pf-filter-chip {
  flex-shrink: 0;
  padding: 6px 16px;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-border);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pf-text-2);
  cursor: pointer;
  transition: var(--pf-transition);
  white-space: nowrap;
}
.pf-filter-chip:hover, .pf-filter-chip.active {
  background: var(--pf-accent);
  border-color: var(--pf-accent);
  color: white;
}

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.pf-search-page { padding: 90px 24px 40px; }
.pf-search-hero { text-align: center; padding: 40px 0 32px; }
.pf-search-hero-title {
  font-family: var(--pf-font-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 24px;
}
.pf-search-big-input {
  display: flex; align-items: center; gap: 12px;
  max-width: 600px; margin: 0 auto;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: 14px 18px;
  transition: var(--pf-transition);
}
.pf-search-big-input:focus-within { border-color: var(--pf-accent); box-shadow: 0 0 0 3px var(--pf-accent-glow); }
.pf-search-big-input input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--pf-text); font-size: 1.1rem;
}
.pf-search-big-input input::placeholder { color: var(--pf-text-3); }
.pf-search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 32px;
}

/* ============================================================
   ADMIN NOTICE (Only visible in WP admin)
   ============================================================ */
.pf-admin-notice {
  padding: 12px 16px;
  background: rgba(124,58,237,0.1);
  border-left: 4px solid var(--pf-accent);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--pf-text);
}

/* ============================================================
   POINTS & AFFILIATE
   ============================================================ */
.pf-points-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pf-gold);
}

/* ============================================================
   CONTINUE WATCHING PROGRESS
   ============================================================ */
.pf-progress-wrap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 0 0 var(--pf-radius) var(--pf-radius);
}
.pf-progress-fill {
  height: 100%;
  background: var(--pf-accent);
  transition: width 0.3s;
}

/* ADS placeholders */
.pf-ad-slot {
  background: var(--pf-bg-3);
  border: 1px dashed var(--pf-border);
  border-radius: var(--pf-radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--pf-text-3);
  font-size: 0.75rem;
  overflow: hidden;
}
.pf-ad-header { width: 100%; height: 90px; margin-bottom: 20px; }
.pf-ad-sidebar { width: 300px; min-height: 250px; }

/* ══════════════════════════════════════════════
   PRIMEFLX — PATCH v3: Missing classes & fixes
   ══════════════════════════════════════════════ */

/* ── Logo image support ── */
.pf-logo-img {
  height: 36px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}
.pf-logo-text {
  font-family: var(--pf-font-display);
  font-size: 1.4rem;
  font-weight: 900;
  background: var(--pf-grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pf-nav-logo { display: flex; align-items: center; gap: 8px; text-decoration: none }

/* ── Search open state ── */
.pf-search-expanded { display: none }
.pf-search-expanded.pf-search-open { display: block !important }

/* ── Autocomplete dropdown items (new IDs from search.js) ── */
.pf-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--pf-text);
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .15s, transform .15s;
}
.pf-search-result:hover { background: rgba(124,58,237,.12); transform: translateX(3px) }
.pf-search-result img { width: 36px; height: 52px; object-fit: cover; border-radius: 4px; flex-shrink: 0 }
.pf-sr-info { flex: 1; min-width: 0 }
.pf-sr-title { font-size: 13px; font-weight: 600; color: var(--pf-text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pf-sr-meta  { font-size: 11px; color: var(--pf-text-3); margin-top: 2px; display: block }
.pf-sr-score { font-size: 11px; color: var(--pf-text-3); white-space: nowrap; flex-shrink: 0 }
.pf-search-all {
  display: block;
  text-align: center;
  padding: 10px;
  font-size: 12px;
  color: var(--pf-accent2);
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.05);
  transition: background .15s;
}
.pf-search-all:hover { background: rgba(124,58,237,.08) }
.pf-search-loading, .pf-search-empty {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--pf-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ── Auth modal active state ── */
.pf-auth-modal { display: none; align-items: center; justify-content: center }
.pf-auth-modal.pf-modal-active { display: flex !important }
.pf-detail-modal { display: none; align-items: flex-start; justify-content: center }
.pf-detail-modal.pf-modal-active { display: flex !important }

#pf-detail-modal { display: none }
#pf-detail-modal.pf-modal-active { display: flex !important }
#pf-auth-modal   { display: none }
#pf-auth-modal.pf-modal-active   { display: flex !important }

/* ── Type pills ── */
.pf-type-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.pf-type-movie { background: rgba(124,58,237,.2); color: #a855f7 }
.pf-type-serie { background: rgba(16,185,129,.2); color: #34d399 }
.pf-type-anime { background: rgba(245,158,11,.2);  color: #fbbf24 }
.pf-genre-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  background: rgba(255,255,255,.07);
  color: var(--pf-text-2);
}

/* ── Card progress bar ── */
.pf-card-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,.15);
  border-radius: 0 0 2px 2px;
}

/* ── Hero bg image transition ── */
#pf-hero-bg-img {
  transition: opacity .4s ease;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ── Loader spinners ── */
.spinner { width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--pf-accent);border-radius:50%;animation:spin .8s linear infinite;margin:auto }
.spinner-sm { width:16px;height:16px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--pf-accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle }
@keyframes spin { to { transform:rotate(360deg) } }

/* ── Form error box ── */
.pf-form-error {
  display: none;
  padding: 8px 12px;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 6px;
  color: #ef4444;
  font-size: 13px;
  margin-top: 8px;
}

/* ── User dropdown toggle ── */
#pf-user-avatar-btn { cursor: pointer }
#pf-user-avatar-btn:hover .pf-user-dropdown { opacity: 1; visibility: visible; transform: translateY(0) }
.pf-user-dropdown {
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: all .2s ease;
}

/* ── Logout button style ── */
#pf-logout-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}

/* ── Admin plan type options ── */
.pfa-logo-type-opts { display: flex; flex-direction: column; gap: 8px }
.pfa-logo-type-opts label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pfa-text, #e8e8f8); cursor: pointer }
.pfa-logo-type-opts input[type="radio"] { accent-color: #7c3aed; width: 15px; height: 15px }

/* ── Hero section fallback bg ── */
#pf-hero { min-height: 60vh; background: linear-gradient(135deg, #0d0d1a 0%, #1a1a2e 100%) }
.pf-hero-bg { position: absolute; inset: 0; overflow: hidden }
#pf-hero-bg-img { width: 100%; height: 100%; object-fit: cover; opacity: .5 }

/* ── Search page results ── */
.search-empty-state { text-align: center; padding: 80px 20px; color: var(--pf-text-3) }
.search-empty-state .empty-icon { font-size: 48px; margin-bottom: 16px }
.search-empty-state h3 { color: var(--pf-text); margin-bottom: 8px }

/* ── Results header ── */
#results-header {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0 0 16px;
  font-size: 14px;
  color: var(--pf-text-2);
}
#results-count { font-weight: 600; color: var(--pf-accent2) }

/* ── Load more button ── */
.btn-load-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(124,58,237,.15);
  border: 1px solid rgba(124,58,237,.3);
  color: var(--pf-accent2);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all .2s;
}
.btn-load-more:hover { background: rgba(124,58,237,.25) }
#load-more-container { display: none; justify-content: center; padding: 24px 0 }

/* ── pf-card missing info styles ── */
.pf-card-info { padding: 8px 4px 4px }
.pf-card-title { font-size: 12px; font-weight: 600; color: var(--pf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3 }
.pf-card-meta  { font-size: 11px; color: var(--pf-text-3); margin-top: 3px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap }

/* ── Suggestion tags (search page) ── */
.suggestion-tag {
  padding: 4px 12px;
  background: rgba(124,58,237,.15);
  border: 1px solid rgba(124,58,237,.3);
  color: var(--pf-accent2);
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  transition: all .2s;
}
.suggestion-tag:hover { background: rgba(124,58,237,.3) }
.trending-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; align-items: center }
.trending-suggestions span { color: var(--pf-text-3); font-size: 13px }

/* ══════════════════════════════════════════════════
   HOME v4 — Server-side rendered components
   ══════════════════════════════════════════════════ */

/* ── Hero ── */
.pf-hero-section { position:relative; height:88vh; min-height:550px; overflow:hidden; margin-top:0 }
.pf-hero-swiper  { height:100% }
.pf-hero-slide   { position:relative; height:100% }
.pf-hero-bg      { position:absolute; inset:0; background-size:cover; background-position:center top; transition:opacity .4s }
.pf-hero-overlay { position:absolute; inset:0; background:linear-gradient(to right, rgba(5,5,8,.95) 0%, rgba(5,5,8,.6) 50%, rgba(5,5,8,.1) 100%), linear-gradient(to top, rgba(5,5,8,.8) 0%, transparent 60%) }
.pf-hero-content { position:absolute; bottom:15%; left:4%; max-width:580px; z-index:2 }
.pf-hero-badges  { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px }
.pf-hero-badge   { padding:4px 12px; border-radius:20px; font-size:12px; font-weight:700; backdrop-filter:blur(8px) }
.pf-badge-trending { background:rgba(239,68,68,.25); color:#fca5a5; border:1px solid rgba(239,68,68,.3) }
.pf-badge-rating   { background:rgba(245,158,11,.2); color:#fde68a; border:1px solid rgba(245,158,11,.3) }
.pf-badge-type     { border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.8) }
.pf-badge-type.pf-type-movie  { background:rgba(124,58,237,.25); color:#c4b5fd }
.pf-badge-type.pf-type-serie  { background:rgba(16,185,129,.2);  color:#6ee7b7 }
.pf-badge-type.pf-type-anime  { background:rgba(245,158,11,.2);  color:#fde68a }
.pf-hero-title    { font-size:clamp(1.8rem,4vw,3.2rem); font-weight:900; line-height:1.1; margin-bottom:12px; text-shadow:0 2px 20px rgba(0,0,0,.5) }
.pf-hero-genres   { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px }
.pf-hero-genre    { padding:3px 10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:20px; font-size:12px; color:rgba(255,255,255,.7) }
.pf-hero-overview { font-size:14px; line-height:1.6; color:rgba(255,255,255,.75); margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.pf-hero-meta     { display:flex; gap:16px; font-size:13px; color:rgba(255,255,255,.6); margin-bottom:20px }
.pf-hero-actions  { display:flex; gap:12px; flex-wrap:wrap }
.pf-hero-nav      { position:absolute; right:4%; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:5 }
.pf-hero-nav-btn  { width:44px; height:44px; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.15); border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(8px); transition:all .2s }
.pf-hero-nav-btn:hover { background:var(--pf-accent); border-color:var(--pf-accent) }
.pf-hero-progress { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.1) }
.pf-hero-progress-bar { height:100%; background:var(--pf-accent); transition:width .5s linear; width:0 }

/* ── Buttons ── */
.pf-btn-primary  { display:inline-flex; align-items:center; gap:8px; padding:12px 28px; background:var(--pf-accent); color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:700; cursor:pointer; transition:all .2s; box-shadow:0 4px 20px rgba(124,58,237,.4) }
.pf-btn-primary:hover  { background:var(--pf-accent2); transform:translateY(-2px); box-shadow:0 6px 28px rgba(124,58,237,.5) }
.pf-btn-secondary{ display:inline-flex; align-items:center; gap:8px; padding:12px 24px; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; backdrop-filter:blur(8px) }
.pf-btn-secondary:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.35) }

/* ── Content sections ── */
.pf-content-section { padding:24px 4% 16px }
.pf-section-head    { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px }
.pf-section-title   { font-size:1.2rem; font-weight:800; display:flex; align-items:center; gap:10px }
.pf-section-indicator { display:inline-block; width:4px; height:20px; background:var(--pf-accent); border-radius:2px }
.pf-section-nav     { display:flex; gap:8px }
.pf-sec-btn         { width:36px; height:36px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s }
.pf-sec-btn:hover   { background:var(--pf-accent); border-color:var(--pf-accent) }

/* ── Cards ── */
.pf-slider .swiper-slide  { width:160px }
.pf-content-card           { position:relative; border-radius:10px; overflow:hidden; background:var(--pf-bg-2) }
.pf-card-img-wrap          { position:relative; aspect-ratio:2/3; overflow:hidden }
.pf-card-img-wrap img      { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; display:block }
.pf-content-card:hover .pf-card-img-wrap img { transform:scale(1.06) }
.pf-card-overlay           { position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .25s; display:flex; align-items:center; justify-content:center }
.pf-content-card:hover .pf-card-overlay { opacity:1 }
.pf-card-play              { width:52px; height:52px; background:var(--pf-accent); border:none; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .2s; box-shadow:0 4px 20px rgba(124,58,237,.5) }
.pf-card-play:hover        { transform:scale(1.12) }
.pf-card-fav               { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.6); border:none; border-radius:50%; width:30px; height:30px; font-size:13px; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .2s }
.pf-card-fav:hover         { transform:scale(1.2) }
.pf-card-type-badge        { position:absolute; top:8px; left:8px; padding:3px 8px; border-radius:4px; font-size:10px; font-weight:700; text-transform:uppercase }
.pf-card-progress-bar      { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.15); border-radius:2px }
.pf-card-meta-row          { padding:8px 6px 6px; display:flex; align-items:center; justify-content:space-between; gap:6px }
.pf-card-title-text        { font-size:12px; font-weight:600; color:var(--pf-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 }
.pf-card-rating            { font-size:11px; color:rgba(255,255,255,.5); white-space:nowrap; flex-shrink:0 }

/* ── Detail Modal ── */
.pf-modal-bg  { display:none; position:fixed; inset:0; background:rgba(0,0,0,.88); backdrop-filter:blur(10px); z-index:2000; opacity:0; transition:opacity .3s }
.pf-modal-bg.active  { display:block; opacity:1 }
.pf-modal-box { display:none; position:fixed; top:5%; left:50%; transform:translateX(-50%); width:95%; max-width:1000px; max-height:90vh; overflow-y:auto; background:var(--pf-bg-2); border-radius:16px; border:1px solid rgba(255,255,255,.08); z-index:2001; opacity:0; transition:opacity .3s, transform .3s; transform:translateX(-50%) scale(.95) }
.pf-modal-box.active  { display:block; opacity:1; transform:translateX(-50%) scale(1) }
.pf-modal-close { position:sticky; top:12px; float:right; margin:12px 12px 0 0; width:40px; height:40px; background:rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.15); border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; transition:all .2s }
.pf-modal-close:hover { background:var(--pf-accent); transform:rotate(90deg) }
.pf-modal-hero { position:relative; height:380px }
.pf-modal-backdrop { width:100%; height:100%; object-fit:cover }
.pf-modal-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top, var(--pf-bg-2) 0%, rgba(0,0,0,.3) 100%) }
.pf-modal-poster-wrap  { position:absolute; bottom:-50px; left:36px; width:150px; border-radius:12px; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.6); border:3px solid var(--pf-bg-2) }
.pf-modal-poster       { width:100%; aspect-ratio:2/3; object-fit:cover; display:block }
.pf-modal-info         { padding:64px 36px 36px }
.pf-modal-badges       { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px }
.pf-modal-badges span  { padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12) }
.pf-badge-rating       { background:rgba(245,158,11,.15) !important; color:#fde68a !important }
.pf-badge-type         { border:none !important }
.pf-modal-title        { font-size:2rem; font-weight:800; margin-bottom:12px; line-height:1.1 }
.pf-modal-genres       { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px }
.pf-genre-tag          { padding:4px 12px; background:rgba(124,58,237,.15); border:1px solid rgba(124,58,237,.3); border-radius:20px; font-size:12px; color:var(--pf-accent2) }
.pf-modal-overview     { color:rgba(255,255,255,.75); line-height:1.7; margin-bottom:20px }
.pf-modal-actions      { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px }
.pf-fav-btn            { display:inline-flex; align-items:center; gap:6px }
.pf-modal-section      { margin-top:28px }
.pf-modal-section-title{ font-size:1rem; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px }
.pf-season-tabs        { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px }
.pf-season-tab         { padding:6px 16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:20px; color:rgba(255,255,255,.6); cursor:pointer; font-size:13px; transition:all .2s }
.pf-season-tab.active  { background:var(--pf-accent); border-color:var(--pf-accent); color:#fff }
.pf-episodes-grid      { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px }
.pf-episode-card       { display:flex; gap:12px; background:rgba(255,255,255,.04); border-radius:10px; overflow:hidden; cursor:pointer; transition:background .2s }
.pf-episode-card:hover { background:rgba(124,58,237,.15) }
.pf-ep-thumb           { position:relative; width:140px; flex-shrink:0; background:rgba(0,0,0,.3) }
.pf-ep-thumb img       { width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.pf-ep-no-img          { width:140px; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:24px }
.pf-ep-play            { position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; display:flex; align-items:center; justify-content:center; transition:opacity .2s }
.pf-episode-card:hover .pf-ep-play { opacity:1 }
.pf-ep-info            { padding:10px; display:flex; flex-direction:column; justify-content:center; gap:3px; flex:1 }
.pf-ep-num             { font-size:11px; color:var(--pf-accent2); font-weight:700 }
.pf-ep-name            { font-size:13px; font-weight:600; color:#fff }
.pf-ep-runtime         { font-size:11px; color:rgba(255,255,255,.4) }
.pf-trailer-thumb      { position:relative; cursor:pointer; border-radius:12px; overflow:hidden }
.pf-trailer-thumb img  { width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.pf-trailer-play       { position:absolute; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; transition:background .2s }
.pf-trailer-thumb:hover .pf-trailer-play { background:rgba(124,58,237,.4) }
.pf-cast-grid          { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px }
.pf-cast-card          { flex-shrink:0; width:90px; text-align:center }
.pf-cast-card img      { width:80px; height:80px; border-radius:50%; object-fit:cover; margin:0 auto 6px; display:block }
.pf-cast-name          { font-size:11px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pf-cast-char          { font-size:10px; color:rgba(255,255,255,.4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ── Player Modal (full overlay) ── */
.pf-player-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.97); z-index:3000; align-items:center; justify-content:center; flex-direction:column }
.pf-player-modal.active { display:flex }
.pf-player-modal-close { position:absolute; top:16px; right:16px; width:44px; height:44px; background:rgba(255,255,255,.1); border:none; border-radius:50%; color:#fff; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10; transition:background .2s }
.pf-player-modal-close:hover { background:var(--pf-accent) }
.pf-player-modal-wrap { width:95vw; max-width:1400px; aspect-ratio:16/9 }
.pf-player-modal-wrap iframe { width:100%; height:100%; border:none; border-radius:12px }

/* ── Swiper pagination ── */
.pf-hero-swiper .swiper-pagination { bottom:24px !important }
.pf-hero-swiper .swiper-pagination-bullet { background:#fff; opacity:.4; width:8px; height:8px }
.pf-hero-swiper .swiper-pagination-bullet-active { opacity:1; background:var(--pf-accent); width:20px; border-radius:4px }

/* ── Responsive ── */
@media (max-width: 768px) {
    .pf-hero-section    { height:70vh; min-height:480px }
    .pf-hero-title      { font-size:1.6rem }
    .pf-hero-content    { bottom:10%; left:5%; right:5%; max-width:100% }
    .pf-hero-overview   { -webkit-line-clamp:2 }
    .pf-hero-nav        { display:none }
    .pf-content-section { padding:20px 3% 10px }
    .pf-modal-hero      { height:240px }
    .pf-modal-info      { padding:50px 20px 24px }
    .pf-modal-poster-wrap { width:110px; bottom:-35px; left:20px }
    .pf-modal-title     { font-size:1.4rem }
    .pf-modal-actions   { flex-direction:column }
    .pf-btn-primary, .pf-btn-secondary { width:100%; justify-content:center }
    .pf-episodes-grid   { grid-template-columns:1fr }
    .pf-player-modal-wrap { width:100vw; aspect-ratio:16/9 }
}

/* ══════════════════════════════════════════════
   HOME v5 — Hero + Cards + Genre Sliders
   ══════════════════════════════════════════════ */

/* ── Hero ── */
.pf-hero { position:relative; height:88vh; min-height:580px; overflow:hidden }
.pf-hero-sw { height:100% }
.pf-hero-slide { position:relative; height:100%; overflow:hidden }
.pf-hero-bg {
    position:absolute; inset:0;
    background-size:cover; background-position:center 20%;
    transform:scale(1.08);
    animation:heroKen 20s ease-in-out infinite alternate;
}
@keyframes heroKen { 0%{transform:scale(1.08)} 100%{transform:scale(1.14)} }
.pf-hero-overlay {
    position:absolute; inset:0;
    background:
        radial-gradient(ellipse at 15% 50%, transparent, rgba(5,2,10,.5) 60%, #050508 95%),
        linear-gradient(to top,#050508 0%,transparent 45%),
        linear-gradient(to right,#050508 0%,transparent 55%);
}
.pf-hero-body {
    position:relative; z-index:5; height:100%;
    display:grid; grid-template-columns:1.2fr .8fr;
    align-items:center; gap:60px;
    padding:0 5%; max-width:1500px; margin:0 auto;
}
.pf-hero-info { animation:slideL .9s cubic-bezier(.16,1,.3,1) both }
@keyframes slideL { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
.pf-hero-tags { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px }
.pf-hero-tag  { padding:5px 14px; border-radius:20px; font-size:12px; font-weight:700; backdrop-filter:blur(8px) }
.pf-tag-fire  { background:rgba(239,68,68,.2); color:#fca5a5; border:1px solid rgba(239,68,68,.3) }
.pf-tag-rate  { background:rgba(245,158,11,.2); color:#fde68a; border:1px solid rgba(245,158,11,.3) }
.pf-tag-type  { border:1px solid rgba(255,255,255,.2) }
.pf-tag-glass { background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.15) }
.pf-hero-ttl  { font-size:clamp(2rem,5vw,4rem); font-weight:900; line-height:1.05; margin-bottom:14px; text-shadow:0 8px 32px rgba(0,0,0,.6); letter-spacing:-1px }
.pf-hero-genres { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px }
.pf-hero-genre  { padding:4px 12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:20px; font-size:12px; color:rgba(255,255,255,.7) }
.pf-hero-ov   { font-size:15px; line-height:1.7; color:rgba(255,255,255,.75); margin-bottom:20px; max-width:580px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.pf-hero-btns { display:flex; gap:14px; flex-wrap:wrap }

/* ── Poster side with 3D mouse ── */
.pf-hero-poster-wrap { display:flex; align-items:center; justify-content:center; animation:slideR 1.1s cubic-bezier(.16,1,.3,1) both }
@keyframes slideR { from{opacity:0;transform:translateX(40px) rotateY(-12deg)} to{opacity:1;transform:translateX(0) rotateY(-6deg)} }
.pf-hero-poster-card {
    position:relative; width:100%; max-width:340px;
    border-radius:20px; overflow:hidden;
    transform:perspective(1000px) rotateY(-6deg);
    box-shadow:-20px 30px 60px rgba(0,0,0,.8), 0 0 40px rgba(124,58,237,.2);
    border:1px solid rgba(255,255,255,.1);
    transition:transform .15s ease;
}
.pf-hero-poster-card img { width:100%; display:block; aspect-ratio:2/3; object-fit:cover }
.pf-hero-poster-glow { position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 60%); pointer-events:none }
.pf-poster-stats { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-around; align-items:center; padding:12px 8px; background:linear-gradient(to top,rgba(0,0,0,.9),transparent); font-size:12px; color:rgba(255,255,255,.85) }
.pf-hero-nav-btns { position:absolute; right:3%; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:10 }
.pf-hero-nav-btns button { width:44px; height:44px; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.15); border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(8px); transition:all .2s }
.pf-hero-nav-btns button:hover { background:var(--pf-accent); border-color:var(--pf-accent) }
.pf-hero-pag { bottom:22px !important }
.pf-hero-pag .swiper-pagination-bullet { background:#fff; opacity:.4 }
.pf-hero-pag .swiper-pagination-bullet-active { opacity:1; background:var(--pf-accent); width:20px; border-radius:4px }
.pf-hero-prog { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.1); z-index:10 }
.pf-hero-prog-bar { height:100%; background:var(--pf-accent); transition:width .5s linear; width:0 }

/* ── Buttons ── */
.pfbtn-prim { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; background:linear-gradient(135deg,var(--pf-accent),var(--pf-accent2)); color:#fff; border:none; border-radius:50px; font-size:15px; font-weight:800; cursor:pointer; box-shadow:0 4px 24px rgba(124,58,237,.45); transition:all .25s; letter-spacing:.3px }
.pfbtn-prim:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 8px 32px rgba(124,58,237,.6) }
.pfbtn-sec  { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:50px; font-size:14px; font-weight:600; cursor:pointer; backdrop-filter:blur(8px); transition:all .2s }
.pfbtn-sec:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4) }
.pfbtn-lg { padding:16px 40px; font-size:16px }

/* ── Content sections ── */
.pf-sect { padding:20px 4% 10px }
.pf-sect-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px }
.pf-sect-title { font-size:1.15rem; font-weight:800; display:flex; align-items:center; gap:10px }
.pf-sect-bar   { display:inline-block; width:4px; height:22px; background:linear-gradient(to bottom,var(--pf-accent),var(--pf-accent2)); border-radius:2px }
.pf-sect-nav   { display:flex; gap:8px }
.pfn-btn { width:36px; height:36px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s }
.pfn-btn:hover { background:var(--pf-accent); border-color:var(--pf-accent); transform:scale(1.1) }

/* ── Special weekly section ── */
.pf-sect-special { padding-top:0 }
.pf-sect-special-head { padding:16px 4%; margin-bottom:14px }

/* ── Top 10 cards ── */
.pf-top10-card { position:relative; padding-left:48px; cursor:pointer }
.pf-top10-num {
    position:absolute; left:-8px; bottom:0;
    font-size:100px; font-weight:900; line-height:.85;
    background:linear-gradient(180deg,var(--pf-accent) 0%,transparent 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    pointer-events:none; opacity:.9; z-index:2;
}
.pf-swiper { overflow:hidden }
.pf-swiper .swiper-slide { width:160px }
#sw-top10 .swiper-slide { width:210px }

/* ── Card ── */
.pfhc { border-radius:10px; overflow:hidden; background:var(--pf-bg-2); cursor:pointer; transition:transform .25s }
.pfhc:hover { transform:scale(1.04) translateY(-4px) }
.pfhc-img { position:relative; aspect-ratio:2/3; overflow:hidden }
.pfhc-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s }
.pfhc:hover .pfhc-img img { transform:scale(1.07) }
.pfhc-ov { position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .25s; display:flex; align-items:center; justify-content:center }
.pfhc:hover .pfhc-ov { opacity:1 }
.pfhc-play { width:54px; height:54px; background:var(--pf-accent); border:none; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .2s; box-shadow:0 4px 20px rgba(124,58,237,.5) }
.pfhc-play:hover { transform:scale(1.15) }
.pfhc-fav { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.6); border:none; border-radius:50%; width:30px; height:30px; font-size:13px; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .2s }
.pfhc-fav:hover { transform:scale(1.2) }
.pfhc-badge { position:absolute; top:8px; left:8px; padding:3px 8px; border-radius:5px; font-size:10px; font-weight:800; text-transform:uppercase }
.pfhc-movie { background:rgba(124,58,237,.85); color:#fff }
.pfhc-serie { background:rgba(16,185,129,.85); color:#fff }
.pfhc-anime { background:rgba(245,158,11,.9);  color:#000 }
.pfhc-prog  { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.15) }
.pfhc-meta  { padding:8px 6px 6px; display:flex; align-items:center; justify-content:space-between; gap:6px }
.pfhc-title { font-size:12px; font-weight:600; color:var(--pf-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 }
.pfhc-rating{ font-size:11px; color:rgba(255,255,255,.5); white-space:nowrap; flex-shrink:0 }

/* ── Genre sections header ── */
.pf-genre-sliders-wrap { padding-top:10px }
.pf-genre-sliders-head { padding-bottom:4px }

/* ── Player Modal (Netflix fullscreen) ── */
.pfplay-modal { display:none; position:fixed; inset:0; background:#000; z-index:9999; flex-direction:column }
.pfplay-modal.active { display:flex }
.pfplay-back {
    position:absolute; top:20px; left:20px; z-index:100;
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.1); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:50px;
    padding:10px 20px; font-size:14px; font-weight:600; cursor:pointer;
    transition:all .2s;
}
.pfplay-back:hover { background:rgba(255,255,255,.2) }
.pfplay-frame { flex:1; display:flex; align-items:center; justify-content:center; padding:60px 0 20px }
.pfplay-frame iframe { width:95vw; max-width:1600px; height:90vh; border:none; border-radius:8px }

/* ── Detail Modal ── */
.pfmod-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.88); backdrop-filter:blur(12px); z-index:2000 }
.pfmod-bg.active { display:block }
.pfmod-box {
    display:none; position:fixed; top:4vh; left:50%; transform:translateX(-50%) scale(.95);
    width:95%; max-width:1020px; max-height:92vh; overflow-y:auto;
    background:var(--pf-bg-2); border-radius:18px; border:1px solid rgba(255,255,255,.08);
    z-index:2001; transition:transform .3s, opacity .3s; opacity:0;
    scrollbar-width:thin; scrollbar-color:var(--pf-accent) transparent;
}
.pfmod-box.active { display:block; opacity:1; transform:translateX(-50%) scale(1) }
.pfmod-close { position:sticky; top:12px; float:right; margin:12px 12px 0 0; width:40px; height:40px; background:rgba(0,0,0,.8); border:1px solid rgba(255,255,255,.15); border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; transition:all .25s }
.pfmod-close:hover { background:var(--pf-accent); transform:rotate(90deg) }
.pfmod-hero { position:relative; height:380px; overflow:hidden }
.pfmod-backdrop { width:100%; height:100%; object-fit:cover; display:block }
.pfmod-hero-ov { position:absolute; inset:0; background:linear-gradient(to top,var(--pf-bg-2) 0%,rgba(0,0,0,.2) 100%) }
.pfmod-poster-wrap { position:absolute; bottom:-55px; left:36px; width:155px; border-radius:14px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.7); border:3px solid var(--pf-bg-2) }
.pfmod-poster { width:100%; aspect-ratio:2/3; object-fit:cover; display:block }
.pfmod-info { padding:70px 36px 40px }
.pfmod-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px }
.pfmod-badge { padding:5px 14px; border-radius:20px; font-size:12px; font-weight:600; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12) }
.pfmod-badge-rating { background:rgba(245,158,11,.15) !important; color:#fde68a !important; border-color:rgba(245,158,11,.3) !important }
.pfmod-badge-status { background:rgba(16,185,129,.1) !important; color:#6ee7b7 !important }
.pfmod-type-movie { background:rgba(124,58,237,.2) !important; color:#c4b5fd !important }
.pfmod-type-serie, .pfmod-type-tv { background:rgba(16,185,129,.15) !important; color:#6ee7b7 !important }
.pfmod-type-anime { background:rgba(245,158,11,.15) !important; color:#fde68a !important }
.pfmod-title { font-size:2.1rem; font-weight:900; margin-bottom:8px; line-height:1.1 }
.pfmod-tagline { font-size:14px; font-style:italic; color:var(--pf-accent2); margin-bottom:12px }
.pfmod-genres { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px }
.pfmod-genre  { padding:4px 12px; background:rgba(124,58,237,.15); border:1px solid rgba(124,58,237,.3); border-radius:20px; font-size:12px; color:var(--pf-accent2) }
.pfmod-overview { color:rgba(255,255,255,.78); line-height:1.75; margin-bottom:8px; font-size:14px }
.pfmod-votes { font-size:12px; color:rgba(255,255,255,.4); display:block; margin-bottom:20px }
.pfmod-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:28px }
.pfmod-section { margin-top:28px; padding-top:28px; border-top:1px solid rgba(255,255,255,.07) }
.pfmod-sec-title { font-size:15px; font-weight:800; margin-bottom:14px; display:flex; align-items:center; gap:8px }
.pfmod-loading { display:flex; align-items:center; justify-content:center; padding:60px }
.pfsea-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px }
.pfsea-tab { padding:6px 16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:20px; color:rgba(255,255,255,.6); cursor:pointer; font-size:13px; transition:all .2s }
.pfsea-tab.active { background:var(--pf-accent); border-color:var(--pf-accent); color:#fff }
.pfsea-tab small { font-size:10px; opacity:.8 }
.pfsea-grid { display:flex; flex-direction:column; gap:8px }
.pfsea-ep { display:flex; gap:12px; background:rgba(255,255,255,.04); border-radius:10px; overflow:hidden; cursor:pointer; transition:background .2s }
.pfsea-ep:hover { background:rgba(124,58,237,.15) }
.pfsea-thumb { position:relative; width:160px; flex-shrink:0; background:rgba(0,0,0,.3) }
.pfsea-thumb img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.pfsea-noimg { width:160px; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:28px }
.pfsea-play { position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; display:flex; align-items:center; justify-content:center; transition:opacity .2s }
.pfsea-ep:hover .pfsea-play { opacity:1 }
.pfsea-info { padding:12px; display:flex; flex-direction:column; gap:4px; flex:1; justify-content:center }
.pfsea-num  { font-size:11px; color:var(--pf-accent2); font-weight:700 }
.pfsea-name { font-size:13px; font-weight:700; color:#fff }
.pfsea-rt   { font-size:11px; color:rgba(255,255,255,.4) }
.pfsea-ov   { font-size:12px; color:rgba(255,255,255,.55); line-height:1.5; margin:4px 0 0 }
.pftrailer-wrap {}
.pftrailer-thumb { position:relative; cursor:pointer; border-radius:12px; overflow:hidden }
.pftrailer-thumb img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.pftrailer-play { position:absolute; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; transition:background .2s }
.pftrailer-thumb:hover .pftrailer-play { background:rgba(124,58,237,.4) }
.pfcast-grid { display:flex; gap:14px; overflow-x:auto; padding-bottom:8px }
.pfcast-card { flex-shrink:0; width:85px; text-align:center }
.pfcast-card img { width:76px; height:76px; border-radius:50%; object-fit:cover; margin:0 auto 6px; display:block; border:2px solid rgba(124,58,237,.4) }
.pfcast-name { font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pfcast-char { font-size:10px; color:rgba(255,255,255,.4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ── Responsive ── */
@media (max-width:900px) {
    .pf-hero-body { grid-template-columns:1fr }
    .pf-hero-poster-wrap { display:none }
    .pf-hero { height:75vh; min-height:520px }
    .pf-hero-ttl { font-size:2rem }
}
@media (max-width:600px) {
    .pf-hero { height:70vh }
    .pf-hero-info { text-align:center }
    .pf-hero-tags, .pf-hero-genres { justify-content:center }
    .pf-hero-btns { justify-content:center }
    .pf-hero-ov { -webkit-line-clamp:2 }
    .pfmod-hero { height:240px }
    .pfmod-info { padding:55px 18px 28px }
    .pfmod-poster-wrap { width:110px; bottom:-35px; left:18px }
    .pfmod-title { font-size:1.5rem }
    .pfmod-actions { flex-direction:column }
    .pfbtn-prim,.pfbtn-sec { width:100%; justify-content:center }
    .pfsea-thumb { width:120px }
    .pfplay-frame { padding:50px 0 10px }
    .pfplay-frame iframe { width:100vw; height:85vh; border-radius:0 }
}

/* ── Search Page ── */
.pfsrch-page { padding-top:80px; min-height:80vh }
.pfsrch-header { background:linear-gradient(to bottom,rgba(5,5,8,.98),rgba(5,5,8,.85)); padding:30px 4% 20px; position:sticky; top:64px; z-index:100; backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.06) }
.pfsrch-bar-wrap { position:relative; max-width:760px; margin:0 auto 18px }
.pfsrch-bar { display:flex; align-items:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:50px; padding:12px 20px; gap:12px; transition:all .2s }
.pfsrch-bar:focus-within { border-color:var(--pf-accent); box-shadow:0 0 0 4px rgba(124,58,237,.15) }
.pfsrch-icon { color:rgba(255,255,255,.4); flex-shrink:0 }
.pfsrch-input { flex:1; background:transparent; border:none; outline:none; color:#fff; font-size:16px; font-family:inherit }
.pfsrch-input::placeholder { color:rgba(255,255,255,.35) }
.pfsrch-clear { background:rgba(255,255,255,.1); border:none; color:#fff; border-radius:50%; width:26px; height:26px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; transition:background .2s }
.pfsrch-clear:hover { background:rgba(255,255,255,.2) }
.pfsrch-autocomplete { position:absolute; top:calc(100%+8px); left:0; right:0; background:#111122; border:1px solid rgba(255,255,255,.1); border-radius:16px; overflow:hidden; display:none; box-shadow:0 20px 60px rgba(0,0,0,.6); z-index:200 }
.pfsrch-ac-item { display:flex; align-items:center; gap:12px; padding:10px 16px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.05); transition:background .15s }
.pfsrch-ac-item:hover { background:rgba(124,58,237,.15) }
.pfsrch-ac-item img { width:36px; height:52px; object-fit:cover; border-radius:5px; flex-shrink:0 }
.pfsrch-ac-info { flex:1; min-width:0 }
.pfsrch-ac-title { font-size:13px; font-weight:700; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pfsrch-ac-meta  { font-size:11px; color:rgba(255,255,255,.4); display:block; margin-top:2px }
.pfsrch-ac-all   { text-align:center; padding:12px; font-size:13px; color:var(--pf-accent2); cursor:pointer; font-weight:600; transition:background .15s }
.pfsrch-ac-all:hover { background:rgba(124,58,237,.08) }
.pfsrch-ac-loading,.pfsrch-ac-empty { padding:16px; text-align:center; font-size:13px; color:rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center; gap:8px }
.pfsrch-filters { display:flex; justify-content:center }
.pfsrch-chips { display:flex; gap:10px; flex-wrap:wrap; justify-content:center }
.pfsrch-chip { padding:8px 20px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:50px; color:rgba(255,255,255,.7); cursor:pointer; font-size:14px; transition:all .2s }
.pfsrch-chip.active { background:var(--pf-accent); border-color:var(--pf-accent); color:#fff }
.pfsrch-body { padding:24px 4% 60px }
.pfsrch-results-header { display:flex; align-items:center; gap:8px; margin-bottom:20px; font-size:14px; color:rgba(255,255,255,.6) }
.pfsrch-count { font-weight:800; color:var(--pf-accent2); font-size:16px }
.pfsrch-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px }
.pfsrch-empty { text-align:center; padding:80px 20px; color:rgba(255,255,255,.4) }
.pfsrch-empty-icon { font-size:56px; margin-bottom:16px }
.pfsrch-empty h3 { color:#fff; font-size:1.3rem; margin-bottom:8px }
.pfsrch-suggestions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:20px; align-items:center }
.pfsrch-suggestions span { color:rgba(255,255,255,.4); font-size:13px }
.pfsrch-suggestions button { padding:6px 16px; background:rgba(124,58,237,.15); border:1px solid rgba(124,58,237,.3); color:var(--pf-accent2); border-radius:20px; cursor:pointer; font-size:13px; transition:all .2s }
.pfsrch-suggestions button:hover { background:rgba(124,58,237,.3) }
.pfsrch-load-more { display:flex; justify-content:center; padding:24px 0 }
@media (max-width:600px) { .pfsrch-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)) } }

/* ══════════════════════════════════════════════════
   CONTENT PAGE (page-content.php)
   ══════════════════════════════════════════════════ */
.pfcp-wrap { min-height:100vh }

/* Hero */
.pfcp-hero { position:relative; min-height:100vh; overflow:hidden; display:flex; align-items:center }
.pfcp-bg {
    position:absolute; inset:0;
    background-size:cover; background-position:center 20%;
    transform:scale(1.06);
    animation:cpKen 25s ease-in-out infinite alternate;
}
@keyframes cpKen { 0%{transform:scale(1.06)} 100%{transform:scale(1.12)} }
.pfcp-overlay {
    position:absolute; inset:0;
    background:
        radial-gradient(ellipse at 20% 50%, transparent, rgba(5,2,10,.55) 55%, #050508 95%),
        linear-gradient(to top, #050508 0%, transparent 50%),
        linear-gradient(to right, #050508 0%, transparent 60%);
}
.pfcp-back {
    position:absolute; top:90px; left:4%; z-index:20;
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(0,0,0,.5); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.2); color:#fff;
    border-radius:50px; padding:10px 20px; font-size:14px; font-weight:600;
    text-decoration:none; transition:background .2s;
}
.pfcp-back:hover { background:rgba(255,255,255,.15) }
.pfcp-grid {
    position:relative; z-index:10;
    display:grid; grid-template-columns:1.2fr .8fr;
    align-items:center; gap:60px; padding:120px 5% 80px;
    max-width:1440px; margin:0 auto; width:100%;
}
/* Info side - slide from left */
.pfcp-info-side { animation:cpSlideL 1s cubic-bezier(.16,1,.3,1) both }
@keyframes cpSlideL { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
.pfcp-tags { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px }
.pfcp-tag { padding:6px 16px; border-radius:50px; font-size:12px; font-weight:700; backdrop-filter:blur(8px) }
.pfcp-tag-accent { background:linear-gradient(45deg,var(--pf-accent),var(--pf-accent2)); color:#fff }
.pfcp-tag-glass  { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.85) }
.pfcp-tag-rating { background:rgba(245,158,11,.2); border:1px solid rgba(245,158,11,.3); color:#fde68a }
.pfcp-title { font-size:clamp(2.4rem,5vw,4.5rem); font-weight:900; line-height:1.05; margin-bottom:14px; text-shadow:0 8px 40px rgba(0,0,0,.6); letter-spacing:-1px }
.pfcp-genres { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px }
.pfcp-genre { padding:4px 14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:20px; font-size:13px; color:rgba(255,255,255,.75) }
.pfcp-overview { font-size:15px; line-height:1.7; color:rgba(255,255,255,.78); margin-bottom:24px; max-width:580px }
.pfcp-rating-bar { margin-bottom:28px; max-width:340px }
.pfcp-rating-label { display:flex; align-items:center; gap:10px; margin-bottom:8px }
.pfcp-rating-name  { color:rgba(245,197,21,.9); font-weight:700; font-size:14px }
.pfcp-rating-val   { color:#fff; font-size:22px; font-weight:900 }
.pfcp-rating-count { color:rgba(255,255,255,.4); font-size:12px }
.pfcp-rating-track { height:4px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden }
.pfcp-rating-fill  { height:100%; background:linear-gradient(to right,#f59e0b,#ef4444); border-radius:2px; transition:width 1s ease }
.pfcp-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center }

/* Play button (liquid) */
.pfcp-btn-play {
    position:relative; display:inline-flex; align-items:center;
    padding:18px 48px; color:#fff; font-weight:900; font-size:1.1rem;
    border-radius:100px; overflow:hidden; border:none; cursor:pointer;
    text-decoration:none; transition:transform .3s,box-shadow .3s;
}
.pfcp-btn-bg { position:absolute; inset:0; background:linear-gradient(90deg,var(--pf-accent),var(--pf-accent2),var(--pf-accent)); background-size:200% auto; transition:.5s; z-index:0 }
.pfcp-btn-inner { position:relative; z-index:2; display:flex; align-items:center; gap:12px }
.pfcp-btn-glow { position:absolute; inset:-4px; background:var(--pf-accent); filter:blur(20px); opacity:.45; z-index:-1; transition:.3s }
.pfcp-btn-play:hover { transform:scale(1.05) translateY(-3px); box-shadow:0 24px 50px rgba(124,58,237,.5) }
.pfcp-btn-play:hover .pfcp-btn-bg { background-position:right }
.pfcp-btn-play:hover .pfcp-btn-glow { opacity:.75 }

.pfcp-btn-trailer { display:inline-flex; align-items:center; gap:8px; padding:16px 28px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:50px; font-size:14px; font-weight:700; cursor:pointer; backdrop-filter:blur(8px); transition:all .2s }
.pfcp-btn-trailer:hover { background:rgba(255,255,255,.2) }
.pfcp-btn-fav { width:52px; height:52px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; cursor:pointer; transition:all .2s }
.pfcp-btn-fav:hover { background:rgba(239,68,68,.2); border-color:rgba(239,68,68,.4); transform:scale(1.1) }

/* Poster side */
.pfcp-poster-side { display:flex; align-items:center; justify-content:center; animation:cpSlideR 1.2s cubic-bezier(.16,1,.3,1) both }
@keyframes cpSlideR { from{opacity:0;transform:translateX(40px) rotateY(-12deg)} to{opacity:1;transform:translateX(0) rotateY(-6deg)} }
.pfcp-poster-card {
    position:relative; width:100%; max-width:360px;
    border-radius:22px; overflow:hidden;
    transform:perspective(1000px) rotateY(-6deg);
    box-shadow:-20px 30px 70px rgba(0,0,0,.85), 0 0 40px rgba(124,58,237,.15);
    border:1px solid rgba(255,255,255,.1); transition:transform .12s ease;
}
.pfcp-poster-card a { display:block; position:relative; text-decoration:none }
.pfcp-poster-card img { width:100%; display:block; aspect-ratio:2/3; object-fit:cover }
.pfcp-poster-shine { position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,transparent 55%); pointer-events:none }
.pfcp-poster-info-ov { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.96) 0%,rgba(0,0,0,.65) 55%,transparent 100%); opacity:0; transition:opacity .35s; display:flex; align-items:flex-end; padding:20px }
.pfcp-poster-card:hover .pfcp-poster-info-ov { opacity:1 }
.pfcp-poster-info-inner { width:100%; transform:translateY(12px); transition:transform .35s }
.pfcp-poster-card:hover .pfcp-poster-info-inner { transform:translateY(0) }
.pfcp-pi-row { display:flex; flex-direction:column; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.08) }
.pfcp-pi-row:last-child { border-bottom:none }
.pfcp-pi-label { font-size:10px; color:var(--pf-accent2); text-transform:uppercase; letter-spacing:1.5px; font-weight:700; margin-bottom:3px }
.pfcp-pi-val   { font-size:13px; color:#fff; font-weight:500; line-height:1.4 }
.pfcp-poster-stats { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-around; background:linear-gradient(to top,rgba(0,0,0,.9),transparent); padding:14px 8px; color:rgba(255,255,255,.85); font-size:12px; font-weight:600 }

/* Sections below hero */
.pfcp-section { padding:36px 5%; border-top:1px solid rgba(255,255,255,.06) }
.pfcp-sec-title { font-size:1.25rem; font-weight:800; margin-bottom:18px; display:flex; align-items:center; gap:10px }

/* Episodes */
.pfcp-sea-tabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px }
.pfcp-sea-tab  { padding:8px 18px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:20px; color:rgba(255,255,255,.65); cursor:pointer; font-size:13px; transition:all .2s }
.pfcp-sea-tab small { font-size:10px; opacity:.7 }
.pfcp-sea-tab.active { background:var(--pf-accent); border-color:var(--pf-accent); color:#fff }
.pfcp-eps-grid { display:flex; flex-direction:column; gap:10px }
.pfcp-loading { display:flex; justify-content:center; padding:50px }
.pfcp-ep {
    display:flex; gap:14px; background:rgba(255,255,255,.04); border-radius:12px;
    overflow:hidden; cursor:pointer; text-decoration:none; color:#fff;
    transition:background .2s,transform .15s;
}
.pfcp-ep:hover { background:rgba(124,58,237,.18); transform:translateX(4px) }
.pfcp-ep-thumb { position:relative; width:180px; flex-shrink:0; background:rgba(0,0,0,.3) }
.pfcp-ep-thumb img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.pfcp-ep-noimg { width:180px; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:32px }
.pfcp-ep-play  { position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; display:flex; align-items:center; justify-content:center; transition:opacity .2s }
.pfcp-ep:hover .pfcp-ep-play { opacity:1 }
.pfcp-ep-info  { padding:14px; display:flex; flex-direction:column; gap:5px; justify-content:center }
.pfcp-ep-num   { font-size:11px; color:var(--pf-accent2); font-weight:800 }
.pfcp-ep-name  { font-size:14px; font-weight:700 }
.pfcp-ep-rt    { font-size:11px; color:rgba(255,255,255,.4) }
.pfcp-ep-ov    { font-size:12px; color:rgba(255,255,255,.55); line-height:1.5; margin:2px 0 0 }

/* Cast */
.pfcp-cast-scroll { display:flex; gap:14px; overflow-x:auto; padding-bottom:10px }
.pfcp-cast-card   { flex-shrink:0; width:90px; text-align:center }
.pfcp-cast-card img { width:80px; height:80px; border-radius:50%; object-fit:cover; margin:0 auto 6px; display:block; border:2px solid rgba(124,58,237,.4) }
.pfcp-cast-name { font-size:11px; font-weight:700 }
.pfcp-cast-char { font-size:10px; color:rgba(255,255,255,.4) }

/* Full overview */
.pfcp-full-overview { color:rgba(255,255,255,.8); line-height:1.8; font-size:15px; margin-bottom:24px; max-width:860px }
.pfcp-details-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px }
.pfcp-detail-item  { background:rgba(255,255,255,.04); border-radius:10px; padding:14px 16px; display:flex; flex-direction:column; gap:5px }
.pfcp-detail-item.pfcp-di-wide { grid-column:span 2 }
.pfcp-di-label { font-size:11px; color:var(--pf-accent2); text-transform:uppercase; letter-spacing:1px; font-weight:700 }

/* Similar grid */
.pfcp-similar-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px }
.pfcp-similar-card { text-decoration:none; color:inherit }

/* Trailer modal */
.pftr-bg  { display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); backdrop-filter:blur(12px); z-index:9000 }
.pftr-box { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:92%; max-width:960px; z-index:9001; border-radius:14px; overflow:hidden }
.pftr-box iframe { width:100%; aspect-ratio:16/9; display:block; border:none }
.pftr-close { position:absolute; top:-44px; right:0; background:rgba(255,255,255,.15); border:none; color:#fff; border-radius:50%; width:36px; height:36px; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10; transition:background .2s }
.pftr-close:hover { background:var(--pf-accent) }

/* Responsive */
@media (max-width:900px) {
    .pfcp-grid { grid-template-columns:1fr; gap:0; padding:100px 5% 60px }
    .pfcp-poster-side { display:none }
    .pfcp-title { font-size:2.2rem }
}
@media (max-width:600px) {
    .pfcp-title { font-size:1.8rem }
    .pfcp-actions { flex-direction:column }
    .pfcp-btn-play,.pfcp-btn-trailer { width:100%; justify-content:center }
    .pfcp-ep-thumb { width:130px }
    .pfcp-details-grid { grid-template-columns:1fr 1fr }
    .pfcp-detail-item.pfcp-di-wide { grid-column:span 2 }
}

/* ── Genre dropdown nav ── */
.pf-nav-dropdown:hover .pf-genre-menu,
.pf-nav-dropdown:focus-within .pf-genre-menu { display:grid !important }
.pf-genre-menu { display:none !important }
.pf-nav-genre-btn { color:rgba(255,255,255,.85); font-size:.88rem; font-weight:500; padding:6px 4px; transition:color .2s }
.pf-nav-genre-btn:hover { color:#fff }
.pf-genre-menu-item { display:block; padding:8px 12px; color:rgba(255,255,255,.75); font-size:12px; text-decoration:none; border-radius:7px; transition:background .15s,color .15s; white-space:nowrap }
.pf-genre-menu-item:hover { background:rgba(124,58,237,.2); color:#fff }

/* ══════════════════════════════════════════════════════
   NEW SLIDER STYLE — Expand on hover (reference style)
   ══════════════════════════════════════════════════════ */
.pf-xslider-wrap { padding: 0 0 10px }
.pf-xslider .swiper-slide { width: auto }

/* Card expand-on-hover */
.pf-xcrd {
    position: relative;
    width: 170px;
    height: 255px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: width .45s cubic-bezier(.165,.84,.44,1), box-shadow .35s, z-index 0s .45s;
    will-change: width;
    z-index: 1;
    flex-shrink: 0;
    background: #0d0d12;
    border: 1px solid rgba(255,255,255,.1);
}
.pf-xcrd:hover {
    width: 360px;
    z-index: 50;
    box-shadow: 0 28px 60px rgba(0,0,0,.8), 0 0 60px rgba(124,58,237,.18);
    transition: width .45s cubic-bezier(.165,.84,.44,1), box-shadow .35s, z-index 0s;
}
.pf-xcrd-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .55s ease, filter .4s ease;
}
.pf-xcrd:hover .pf-xcrd-img {
    transform: scale(1.12);
    filter: brightness(.38);
}
/* Shine sweep on hover */
.pf-xcrd::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
    transform: rotate(45deg) translateY(-100%);
    transition: transform .7s ease;
    z-index: 3; pointer-events: none;
}
.pf-xcrd:hover::after { transform: rotate(45deg) translateY(100%) }

/* Glass reflection */
.pf-xcrd::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, transparent 50%);
    z-index: 2; pointer-events: none; opacity: 0;
    transition: opacity .4s;
}
.pf-xcrd:hover::before { opacity: 1 }

/* Type badge */
.pf-xcrd-badge {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 10px; border-radius: 5px;
    font-size: 9px; font-weight: 800; text-transform: uppercase;
    z-index: 15; letter-spacing: .5px;
    background: linear-gradient(135deg, var(--pf-accent), var(--pf-accent2)); color: #fff;
    transition: opacity .3s;
}
.pf-xcrd:hover .pf-xcrd-badge { opacity: 0 }

/* Glass overlay info */
.pf-xcrd-ov {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 20px; opacity: 0;
    transition: opacity .35s ease;
    z-index: 10;
}
.pf-xcrd:hover .pf-xcrd-ov { opacity: 1 }

.pf-xcrd-glass {
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
    transform: translateY(16px);
    opacity: 0;
    transition: transform .45s cubic-bezier(.165,.84,.44,1) .1s, opacity .35s .1s;
}
.pf-xcrd:hover .pf-xcrd-glass { transform: translateY(0); opacity: 1 }

.pf-xcrd-rating {
    display: inline-flex; align-items: center; gap: 5px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000; font-weight: 900; font-size: 12px;
    padding: 4px 10px; border-radius: 7px;
    box-shadow: 0 3px 10px rgba(251,191,36,.3);
    margin-bottom: 10px;
}
.pf-xcrd-title {
    color: #fff; font-size: 15px; font-weight: 700;
    line-height: 1.3; margin: 0 0 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-xcrd-meta {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; color: rgba(255,255,255,.75); flex-wrap: wrap;
}
/* Extra info (delayed appear) */
.pf-xcrd-extra {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.1);
    opacity: 0; transform: translateY(8px);
    transition: opacity .35s ease .2s, transform .35s ease .2s;
}
.pf-xcrd:hover .pf-xcrd-extra { opacity: 1; transform: translateY(0) }
.pf-xcrd-desc {
    font-size: 11px; color: rgba(255,255,255,.65); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 10px;
}
.pf-xcrd-actions { display: flex; gap: 8px }
.pf-xcrd-play {
    flex: 1; padding: 8px; border-radius: 8px; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    background: linear-gradient(135deg, var(--pf-accent), var(--pf-accent2)); color: #fff;
    border: none; cursor: pointer; transition: transform .2s; font-family: inherit;
    text-decoration: none;
}
.pf-xcrd-play:hover { transform: scale(1.04) }
.pf-xcrd-more {
    width: 36px; height: 36px; border-radius: 8px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    color: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .2s; font-size: 16px; flex-shrink: 0; text-decoration: none;
}
.pf-xcrd-more:hover { background: rgba(255,255,255,.2) }

/* Mobile: no expand */
@media(max-width:768px){
    .pf-xcrd { width: 130px; height: 195px }
    .pf-xcrd:hover { width: 130px; box-shadow: none }
    .pf-xcrd:hover .pf-xcrd-img { transform: scale(1.04); filter: brightness(.65) }
    .pf-xcrd-ov { opacity: 1; background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%) }
    .pf-xcrd-glass { transform: none; opacity: 1; background: transparent; backdrop-filter: none; border: none; padding: 0; box-shadow: none }
    .pf-xcrd:hover .pf-xcrd-glass { transform: none }
    .pf-xcrd-extra, .pf-xcrd-actions { display: none }
    .pf-xcrd-title { font-size: 11px; -webkit-line-clamp: 1 }
    .pf-xcrd-meta { font-size: 10px }
}

/* ══════════════════════════════════════════════
   PRIMEFLX v9 — Nuevos estilos
══════════════════════════════════════════════ */

/* ── Sección subtítulo ── */
.pf-sect-sub { font-size:12px; color:rgba(255,255,255,.4); margin-top:2px; }

/* ── Continuar viendo ── */
.pf-cont-slide { width:280px !important; }
.pf-cont-card {
  position:relative; width:100%; height:158px;
  border-radius:12px; overflow:hidden; cursor:pointer;
  transition:transform .3s;
}
.pf-cont-card:hover { transform:scale(1.03); }
.pf-cont-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform .4s;
}
.pf-cont-card:hover .pf-cont-bg { transform:scale(1.06); }
.pf-cont-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.1) 60%, transparent 100%);
  display:flex; align-items:flex-end; justify-content:space-between; padding:12px;
}
.pf-cont-info { flex:1; min-width:0; }
.pf-cont-title { font-size:13px; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-cont-ep { font-size:11px; color:rgba(255,255,255,.5); margin-top:2px; }
.pf-cont-play {
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.18); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  color:#fff; flex-shrink:0;
}
.pf-cont-prog { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.15); }

/* ── Top 10 ── */
.pf-top10-slide { width:150px !important; position:relative; }
.pf-top10-rank {
  position:absolute; left:-2px; bottom:10px; z-index:10;
  font-size:5.5rem; font-weight:900; line-height:1;
  color:transparent;
  -webkit-text-stroke:3px rgba(255,255,255,.92);
  text-stroke:3px rgba(255,255,255,.92);
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.9));
  pointer-events:none;
  font-family:'Arial Black', Impact, sans-serif;
}
.pf-top10-card {
  width:120px; height:180px; border-radius:11px;
  overflow:hidden; position:relative;
  margin-left:auto;
  transition:transform .3s, box-shadow .3s;
  border:2px solid rgba(255,255,255,.1);
}
.pf-top10-card:hover {
  transform:scale(1.06) translateY(-5px);
  border-color:rgba(124,58,237,.7);
  box-shadow:0 12px 30px rgba(124,58,237,.35);
}
.pf-top10-card img { width:100%; height:100%; object-fit:cover; }
.pf-top10-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.88) 0%, transparent 60%);
  opacity:0; transition:opacity .3s;
  display:flex; align-items:flex-end; justify-content:space-between; padding:8px;
}
.pf-top10-card:hover .pf-top10-overlay { opacity:1; }
.pf-top10-name {
  font-size:11px; font-weight:700; color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  flex:1; min-width:0; margin-right:6px;
}
.pf-top10-play {
  width:28px; height:28px; border-radius:50%;
  background:rgba(124,58,237,.85); display:flex;
  align-items:center; justify-content:center;
  color:#fff; flex-shrink:0; text-decoration:none;
  transition:background .2s;
}
.pf-top10-play:hover { background:#7c3aed; }
.pf-top10-country {
  font-size:13px; background:rgba(255,255,255,.1);
  padding:3px 10px; border-radius:20px;
  font-weight:500; color:rgba(255,255,255,.7);
}
.pf-weekly-badge {
  font-size:11px;
  background:linear-gradient(135deg,#f97316,#ef4444);
  padding:3px 10px; border-radius:20px;
  font-weight:600; color:#fff;
  margin-left:8px; vertical-align:middle;
}

/* ── Platform sections ── */
.pf-platform-badge {
  display:inline-flex; align-items:center;
  padding:4px 14px; border-radius:7px;
  font-size:13px; font-weight:800; color:#fff; letter-spacing:.5px;
}

/* ── Sorpréndeme button ── */
.pf-btn-surprise {
  background:linear-gradient(135deg,#a855f7,#f59e0b);
  color:#fff; border:none; border-radius:50px;
  padding:12px 24px; font-size:14px; font-weight:700;
  cursor:pointer; font-family:inherit;
  transition:transform .2s, opacity .2s;
}
.pf-btn-surprise:hover { transform:translateY(-2px); opacity:.9; }

/* Sorpréndeme modal */
.pf-surprise-modal {
  display:none; position:fixed; inset:0; z-index:9500;
  background:rgba(0,0,0,.82); backdrop-filter:blur(10px);
  align-items:center; justify-content:center; padding:24px;
}
.pf-surprise-modal.show { display:flex; }
.pf-surprise-content {
  background:#0e0e1e; border:1px solid rgba(255,255,255,.12);
  border-radius:22px; padding:32px; max-width:480px; width:100%;
  position:relative;
  animation:pfAuthIn .4s cubic-bezier(.34,1.56,.64,1);
}
.pf-surprise-close {
  position:absolute; top:14px; right:14px;
  background:rgba(255,255,255,.08); border:none;
  color:rgba(255,255,255,.6); width:32px; height:32px;
  border-radius:50%; cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.pf-surprise-inner { display:flex; gap:20px; align-items:center; }
.pf-surprise-poster { width:100px; border-radius:10px; flex-shrink:0; }
.pf-surprise-tag { font-size:12px; color:rgba(255,255,255,.5); margin-bottom:8px; }
.pf-surprise-title { font-size:1.3rem; font-weight:800; color:#fff; margin-bottom:8px; }
.pf-surprise-meta { display:flex; gap:12px; font-size:12px; color:rgba(255,255,255,.5); margin-bottom:16px; }
.pf-surprise-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* ── Reactions Facebook style ── */
.pfcp-reactions {
  margin-top:18px; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
}
.pfcp-react-row { display:flex; flex-wrap:wrap; gap:7px; }
.pfcp-react-btn {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.75); border-radius:50px;
  padding:7px 13px; font-size:13px;
  cursor:pointer; transition:all .22s; font-family:inherit;
}
.pfcp-react-btn:hover {
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.22);
  transform:scale(1.1) translateY(-2px);
}
.pfcp-react-btn.active {
  background:rgba(124,58,237,.28);
  border-color:rgba(124,58,237,.55); color:#fff;
}
.pfcp-react-emoji { font-size:1.3rem; line-height:1; transition:transform .2s; }
.pfcp-react-btn:hover .pfcp-react-emoji { transform:scale(1.35) translateY(-2px); }
.pfcp-react-count { font-size:12px; font-weight:700; color:rgba(255,255,255,.65); min-width:12px; }
.pfcp-react-login { font-size:12px; color:rgba(255,255,255,.4); margin-top:10px; }
.pfcp-react-login a { color:#a855f7; text-decoration:none; }

/* ── Coming Soon ── */
.pfcp-coming-soon { display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
.pfcp-cs-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,#f97316,#ef4444);
  color:#fff; padding:11px 24px; border-radius:50px;
  font-size:14px; font-weight:800; letter-spacing:.5px;
  width:fit-content; box-shadow:0 6px 20px rgba(239,68,68,.35);
}
.pfcp-cs-date { font-size:13px; color:rgba(255,255,255,.6); margin:0; }
.pfcp-cs-poster-wrap { position:relative; border-radius:14px; overflow:hidden; }
.pfcp-cs-poster-badge {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; font-weight:900; color:#fff;
  letter-spacing:3px; text-align:center;
  background:rgba(0,0,0,.3);
  text-shadow:0 2px 12px rgba(0,0,0,.8);
  writing-mode:horizontal-tb;
}

/* ── Favorite button active ── */
.pfcp-btn-fav.active span { filter:drop-shadow(0 0 8px #ef4444); }

/* ── Mobile responsive sliders ── */
@media (max-width: 600px) {
  .pf-cont-slide { width:240px !important; }
  .pf-top10-slide { width:120px !important; }
  .pf-top10-rank { font-size:4rem; }
  .pf-top10-card { width:96px; height:144px; }
  .pf-surprise-inner { flex-direction:column; }
  .pf-surprise-poster { width:80px; }
}

/* ══ Top 10 redesign ══ */
.pf-t10-slide { width:200px !important; padding:0 8px; }
.pf-t10-item { display:flex; align-items:flex-end; gap:0; position:relative; padding-bottom:4px; }
.pf-t10-num {
  font-size:7rem; font-weight:900; line-height:1;
  color:transparent;
  -webkit-text-stroke:3px rgba(255,255,255,.85);
  text-stroke:3px rgba(255,255,255,.85);
  font-family:'Arial Black',Impact,sans-serif;
  flex-shrink:0; width:68px; text-align:center;
  margin-right:-14px; position:relative; z-index:2;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.9));
  user-select:none;
}
.pf-t10-card {
  width:120px; height:180px; flex-shrink:0;
  border-radius:10px; overflow:hidden; position:relative;
  border:2px solid rgba(255,255,255,.12);
  transition:transform .3s, box-shadow .3s;
  z-index:1;
}
.pf-t10-card:hover {
  transform:scale(1.06) translateY(-4px);
  border-color:rgba(124,58,237,.7);
  box-shadow:0 14px 32px rgba(124,58,237,.35);
}
.pf-t10-card img { width:100%; height:100%; object-fit:cover; }
.pf-t10-hover {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.1) 60%,transparent 100%);
  opacity:0; transition:opacity .3s;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:10px 8px; gap:4px;
}
.pf-t10-card:hover .pf-t10-hover { opacity:1; }
.pf-t10-title { font-size:11px; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-t10-rating { font-size:10px; color:rgba(255,255,255,.7); }
.pf-t10-year   { font-size:10px; color:rgba(255,255,255,.5); }
.pf-t10-play {
  display:flex; align-items:center; gap:5px; justify-content:center;
  background:var(--pf-accent); color:#fff; border-radius:20px;
  padding:5px 10px; font-size:11px; font-weight:700;
  text-decoration:none; margin-top:4px;
  transition:background .2s;
}
.pf-t10-play:hover { background:var(--pf-accent2); }

@media(max-width:600px){
  .pf-t10-slide { width:160px !important; }
  .pf-t10-num { font-size:5rem; width:52px; }
  .pf-t10-card { width:96px; height:144px; }
}

/* ══ Logo in loader ══ */
.pf-loader-logo {
  display:flex; align-items:center; justify-content:center;
}
.pf-loader-logo img {
  max-height:60px; width:auto;
}

/* ══ Similar content slider ══ */
.pf-similar-swiper { overflow:visible; }
.pf-similar-swiper .swiper-wrapper { padding-bottom:4px; }

/* ══════════════════════════════════════════════
   HERO v10 FIX — correct fade without breaking Swiper opacity
   KEY: DO NOT set opacity/visibility on .swiper-slide — Swiper
   needs to control those for the fade effect to work.
══════════════════════════════════════════════ */

/* Section + swiper must have explicit height */
.pf-hero-section         { position:relative !important; height:88vh !important; min-height:560px !important; overflow:hidden !important; }
#pf-hero-swiper          { height:100% !important; }
#pf-hero-swiper .swiper-wrapper { height:100% !important; }

/* Slides: height only — let Swiper handle opacity/visibility for fade */
#pf-hero-swiper .swiper-slide,
#pf-hero-swiper .pf-hero-slide {
    height: 100% !important;
    /* NO opacity/visibility here — Swiper fade sets these */
}

/* Background div — always render, z-index below overlay */
#pf-hero-swiper .pf-hero-bg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center 25% !important;
    background-repeat: no-repeat !important;
    display: block !important;
    z-index: 0 !important;
    transform: scale(1.0);
    transition: transform 9s cubic-bezier(.25,.46,.45,.94);
}
/* Ken Burns on active slide */
#pf-hero-swiper .swiper-slide-active .pf-hero-bg {
    transform: scale(1.07);
}

/* Overlay — rich cinematic gradient */
#pf-hero-swiper .pf-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
        linear-gradient(105deg, rgba(5,5,8,.97) 0%, rgba(5,5,8,.78) 40%, rgba(5,5,8,.25) 68%, transparent 100%),
        linear-gradient(to top,  rgba(5,5,8,.96) 0%, rgba(5,5,8,.5)  38%, transparent 65%) !important;
    pointer-events: none !important;
}

/* Content — high z-index, animated entry */
#pf-hero-swiper .pf-hero-content {
    position: absolute !important;
    z-index: 5 !important;
    bottom: 14% !important;
    left: 4.5% !important;
    max-width: 580px !important;
}

/* ── v10 entry animations ── */
.pf-hero-slide .pf-hero-badges,
.pf-hero-slide .pf-hero-title,
.pf-hero-slide .pf-hero-genres,
.pf-hero-slide .pf-hero-overview,
.pf-hero-slide .pf-hero-meta,
.pf-hero-slide .pf-hero-actions {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.34,1.1,.64,1);
}
.swiper-slide-active .pf-hero-badges  { opacity:1; transform:none; transition-delay:.12s; }
.swiper-slide-active .pf-hero-title   { opacity:1; transform:none; transition-delay:.24s; }
.swiper-slide-active .pf-hero-genres  { opacity:1; transform:none; transition-delay:.34s; }
.swiper-slide-active .pf-hero-overview{ opacity:1; transform:none; transition-delay:.42s; }
.swiper-slide-active .pf-hero-meta    { opacity:1; transform:none; transition-delay:.50s; }
.swiper-slide-active .pf-hero-actions { opacity:1; transform:none; transition-delay:.58s; }

/* ── v10 badge styles ── */
.pf-hero-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.pf-hero-badge  { display:inline-flex; align-items:center; gap:5px; padding:5px 13px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.4px; backdrop-filter:blur(8px); }
.pf-badge-trending { background:rgba(239,68,68,.18); border:1px solid rgba(239,68,68,.35); color:#fca5a5; }
.pf-badge-rating   { background:rgba(234,179,8,.14); border:1px solid rgba(234,179,8,.3);  color:#fde68a; }
.pf-badge-type     { border:1px solid rgba(255,255,255,.18); }
.pf-badge-type.pf-type-movie { background:rgba(124,58,237,.2); color:#c4b5fd; border-color:rgba(124,58,237,.4); }
.pf-badge-type.pf-type-serie { background:rgba(16,185,129,.18); color:#6ee7b7; border-color:rgba(16,185,129,.38); }
.pf-badge-type.pf-type-anime { background:rgba(236,72,153,.18); color:#f9a8d4; border-color:rgba(236,72,153,.38); }

/* ── v10 title ── */
.pf-hero-title {
    font-size: clamp(2rem, 4.5vw, 3.8rem) !important;
    font-weight: 900 !important; line-height: 1.06 !important;
    margin-bottom: 14px !important;
    text-shadow: 0 3px 30px rgba(0,0,0,.75) !important;
    letter-spacing: -.3px;
    color: #fff !important;
}

/* ── v10 genres ── */
.pf-hero-genres { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.pf-hero-genre  { padding:4px 12px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-radius:20px; font-size:12px; color:rgba(255,255,255,.7); }

/* ── v10 overview ── */
.pf-hero-overview {
    font-size:14px; line-height:1.7; color:rgba(255,255,255,.72);
    max-width:540px; margin-bottom:16px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── v10 meta ── */
.pf-hero-meta { display:flex; gap:16px; font-size:13px; color:rgba(255,255,255,.55); margin-bottom:22px; }

/* ── v10 buttons ── */
.pf-hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.pf-btn-primary  { display:inline-flex; align-items:center; gap:8px; padding:13px 30px; background:var(--pf-accent); color:#fff; border:none; border-radius:50px; font-size:15px; font-weight:700; cursor:pointer; transition:all .2s; box-shadow:0 6px 28px rgba(124,58,237,.5); text-decoration:none; }
.pf-btn-primary:hover  { transform:translateY(-3px) scale(1.03); box-shadow:0 10px 36px rgba(124,58,237,.65); color:#fff; }
.pf-btn-secondary{ display:inline-flex; align-items:center; gap:8px; padding:12px 24px; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.22); border-radius:50px; font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; backdrop-filter:blur(10px); text-decoration:none; }
.pf-btn-secondary:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4); }

/* ── Surprise button ── */
.pf-btn-surprise { background:linear-gradient(135deg,#a855f7,#f59e0b); color:#fff; border:none; border-radius:50px; padding:12px 22px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:transform .2s, box-shadow .2s; }
.pf-btn-surprise:hover { transform:translateY(-2px); box-shadow:0 6px 22px rgba(168,85,247,.45); }

/* ── Nav arrows — side buttons ── */
.pf-hero-nav { position:absolute; right:3%; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:10; }
.pf-hero-nav-btn { width:44px; height:44px; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.18); border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(10px); transition:all .22s; }
.pf-hero-nav-btn:hover { background:rgba(124,58,237,.55); border-color:rgba(124,58,237,.8); transform:scale(1.1); }

/* ── Progress bar ── */
.pf-hero-progress { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.08); z-index:10; }
.pf-hero-progress-bar { height:100%; background:var(--pf-accent); width:0; transition:width .15s linear; }

/* ── Pagination ── */
.pf-hero-swiper .swiper-pagination { bottom:28px !important; left:4.5% !important; text-align:left !important; width:auto !important; }
.pf-hero-swiper .swiper-pagination-bullet { background:rgba(255,255,255,.4); width:8px; height:8px; opacity:1; }
.pf-hero-swiper .swiper-pagination-bullet-active { background:var(--pf-accent); width:22px; border-radius:4px; }

/* ── Thumbnail rail (position:absolute — critical, NOT flex child) ── */
.pf-h10-rail {
    position: absolute;
    top: 0; right: 0; bottom: 0; width: 270px; z-index: 10;
    display: flex; flex-direction: column;
    padding: 100px 14px 64px;
    background: linear-gradient(to left, rgba(5,5,8,.9) 0%, rgba(5,5,8,.7) 55%, transparent 100%);
    backdrop-filter: blur(1px);
}
.pf-h10-rail-label { font-size:9px; font-weight:800; letter-spacing:2px; color:rgba(255,255,255,.25); text-transform:uppercase; margin-bottom:10px; padding-left:4px; }
.pf-h10-rail-list  { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:3px; scrollbar-width:none; }
.pf-h10-rail-list::-webkit-scrollbar { display:none; }
.pf-h10-thumb { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:10px; cursor:pointer; border:1px solid transparent; background:rgba(255,255,255,.02); transition:all .22s; position:relative; overflow:hidden; }
.pf-h10-thumb:hover  { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.1); }
.pf-h10-thumb.active { background:rgba(124,58,237,.16); border-color:rgba(124,58,237,.38); }
.pf-h10-thumb-num   { font-size:11px; font-weight:800; color:rgba(255,255,255,.22); min-width:14px; text-align:center; flex-shrink:0; }
.pf-h10-thumb.active .pf-h10-thumb-num { color:var(--pf-accent); }
.pf-h10-thumb-img   { flex-shrink:0; }
.pf-h10-thumb-img img { width:37px; height:54px; border-radius:6px; object-fit:cover; border:1px solid rgba(255,255,255,.06); }
.pf-h10-thumb.active .pf-h10-thumb-img img { border-color:rgba(124,58,237,.5); }
.pf-h10-thumb-info  { flex:1; min-width:0; }
.pf-h10-thumb-title { display:block; font-size:11.5px; font-weight:600; color:rgba(255,255,255,.65); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .2s; }
.pf-h10-thumb.active .pf-h10-thumb-title { color:#fff; }
.pf-h10-thumb-sub   { display:block; font-size:10px; color:rgba(255,255,255,.28); margin-top:2px; }
.pf-h10-thumb-bar   { position:absolute; left:0; top:15%; bottom:15%; width:3px; border-radius:0 2px 2px 0; background:var(--pf-accent); opacity:0; transition:opacity .22s; }
.pf-h10-thumb.active .pf-h10-thumb-bar { opacity:1; }

/* ── v10 poster accent (right of content area) ── */
.pf-h10-poster {
    position:absolute; bottom:14%; left:calc(4.5% + 600px);
    z-index:6; opacity:0; transform:translateY(20px) scale(.96);
    transition:opacity .65s ease .65s, transform .65s cubic-bezier(.34,1.1,.64,1) .65s;
    pointer-events:none;
}
.swiper-slide-active .pf-h10-poster { opacity:1; transform:none; }
.pf-h10-poster img { width:130px; border-radius:14px; box-shadow:0 22px 60px rgba(0,0,0,.75), 0 0 0 2px rgba(255,255,255,.07); }

/* ── Scroll cue ── */
.pf-h10-scroll { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:10; color:rgba(255,255,255,.3); pointer-events:none; animation:pfBounce 2.2s ease-in-out infinite; }
@keyframes pfBounce { 0%,100%{transform:translateX(-50%) translateY(0);opacity:.35} 55%{transform:translateX(-50%) translateY(8px);opacity:.7} }

/* ── Responsive ── */
@media (max-width: 1100px) { .pf-h10-rail { width:230px; } }
@media (max-width: 900px)  { .pf-h10-rail,.pf-h10-poster,.pf-h10-scroll { display:none; } }
@media (max-width: 600px)  {
    .pf-hero-section { height:75vh !important; }
    .pf-hero-title { font-size:1.7rem !important; }
    .pf-btn-primary { padding:11px 22px !important; font-size:14px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   PF10C — EXPANDING CARD SYSTEM v13
   Exactly 6 cards visible on desktop.
   Hover: card expands horizontally showing backdrop + details.
   Click card (collapsed OR expanded) → content page.
═══════════════════════════════════════════════════════════════════ */

/* ── Slider container ── */
.pf10c-slider {
    overflow: visible !important;
    width: 100% !important;
    padding: 16px 0 28px !important;
}
.pf10c-slider .swiper-wrapper { align-items: center; }

/* ── Slide: 6 visibles con espacio ──
   Usamos .swiper-slide.pf10c-slide (especificidad 0,2,0) para superar
   el inline style ".swiper-slide{width:auto!important}" (0,1,0) de home.php.
   Altura FIJA en el slide → el card nunca crece verticalmente al hover.
*/
.pf10c-slide {
    height: 252px !important;    /* FIJA — el card nunca crece verticalmente */
    flex-shrink: 0;
    z-index: 1;
    position: relative;
}
/* Selector doble: mayor especificidad para ganarle al inline width:auto */
.swiper-slide.pf10c-slide {
    width: calc((95vw - 80px) / 6) !important;
    min-width: 120px;
    max-width: 185px;
    transition: width .5s cubic-bezier(.165,.84,.44,1) !important;
}
.swiper-slide.pf10c-slide:hover {
    width: calc((95vw - 80px) / 6 * 2.5) !important;
    max-width: 450px !important;
    z-index: 20 !important;
}

/* ── Card shell: rellena la altura fija del slide ── */
.pf10c-card {
    width: 100%;
    height: 100%;                /* hereda los 252px del slide */
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    background: #0d0d14;
    transition: box-shadow .3s, border-color .3s;
}
.pf10c-slide:hover .pf10c-card {
    border-color: rgba(124,58,237,.4);
    box-shadow: 0 18px 50px rgba(0,0,0,.7), 0 0 0 1px rgba(124,58,237,.25);
}

/* ── Poster layer ── */
.pf10c-poster {
    position: absolute; inset: 0; z-index: 1;
}
.pf10c-poster img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .55s ease, filter .45s ease;
}
.pf10c-slide:hover .pf10c-poster img {
    transform: scale(1.12);
    filter: brightness(.12);
}

/* ── Type badge ── */
.pf10c-badge {
    position: absolute; top: 7px; left: 7px; z-index: 5;
    padding: 2px 7px; border-radius: 4px;
    font-size: 8.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
    transition: opacity .3s;
}
.pf10c-slide:hover .pf10c-badge { opacity: 0; }
.pf10c-badge-movie { background: rgba(124,58,237,.85); color: #e9d5ff; }
.pf10c-badge-serie { background: rgba(16,185,129,.85);  color: #d1fae5; }
.pf10c-badge-anime { background: rgba(236,72,153,.85);  color: #fce7f3; }

/* ── Backdrop panel (hidden until hover) ── */
.pf10c-back {
    position: absolute; inset: 0; z-index: 3;
    background-size: cover; background-position: center;
    opacity: 0;
    transition: opacity .42s ease;
}
.pf10c-slide:hover .pf10c-back { opacity: 1; }

.pf10c-back-grad {
    position: absolute; inset: 0;
    background:
        linear-gradient(to top,  rgba(5,5,12,.97) 0%, rgba(5,5,12,.65) 40%, rgba(5,5,12,.2) 70%, transparent 100%),
        linear-gradient(to right, rgba(5,5,12,.55) 0%, transparent 52%);
}

/* Crystal shimmer sweep */
.pf10c-shimmer {
    position: absolute;
    top: -60%; left: -60%; width: 220%; height: 220%;
    background: linear-gradient(45deg, transparent 38%, rgba(255,255,255,.07) 50%, transparent 62%);
    transform: rotate(45deg) translateY(-120%);
    transition: transform .7s ease;
    pointer-events: none; z-index: 4;
}
.pf10c-slide:hover .pf10c-shimmer { transform: rotate(45deg) translateY(80%); }

/* ── Info overlay (slides up on hover) ── */
.pf10c-info {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
    padding: 16px 14px;
    display: flex; flex-direction: column; gap: 6px;
    transform: translateY(14px); opacity: 0;
    transition:
        transform .48s cubic-bezier(.165,.84,.44,1) .1s,
        opacity    .38s ease .06s;
}
.pf10c-slide:hover .pf10c-info { transform: translateY(0); opacity: 1; }

.pf10c-rating {
    display: inline-flex; align-items: center; gap: 5px;
    background: linear-gradient(135deg,#fbbf24,#f59e0b);
    color: #1a0a00; font-weight: 900; font-size: 11px;
    padding: 3px 9px; border-radius: 7px; width: fit-content;
    box-shadow: 0 3px 10px rgba(251,191,36,.35);
}
.pf10c-title {
    font-size: 14px; font-weight: 800; color: #fff; margin: 0;
    line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.pf10c-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: rgba(255,255,255,.68); flex-wrap: wrap;
}
.pf10c-stars { color: #fbbf24; letter-spacing: 1px; font-size: 10px; }

/* Description — staggered reveal */
.pf10c-desc {
    font-size: 10.5px; line-height: 1.5; color: rgba(255,255,255,.6); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    opacity: 0; transform: translateY(5px);
    transition: opacity .3s ease .22s, transform .3s ease .22s;
}
.pf10c-slide:hover .pf10c-desc { opacity: 1; transform: translateY(0); }

.pf10c-genres {
    display: flex; flex-wrap: wrap; gap: 4px;
    opacity: 0; transform: translateY(5px);
    transition: opacity .3s ease .3s, transform .3s ease .3s;
}
.pf10c-slide:hover .pf10c-genres { opacity: 1; transform: translateY(0); }
.pf10c-genre {
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.78); font-size: 9px; padding: 2px 8px; border-radius: 20px;
}

/* Action buttons */
.pf10c-actions {
    display: flex; align-items: center; gap: 6px;
    opacity: 0; transform: translateY(6px);
    transition: opacity .3s ease .36s, transform .3s ease .36s;
    padding-top: 3px;
}
.pf10c-slide:hover .pf10c-actions { opacity: 1; transform: translateY(0); }

.pf10c-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,.12); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.85);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .2s; font-family: inherit; text-decoration: none; flex-shrink: 0;
}
.pf10c-btn:hover { background: rgba(255,255,255,.22); color: #fff; transform: scale(1.1); }
.pf10c-fav:hover, .pf10c-fav.active { background: rgba(239,68,68,.3); border-color: rgba(239,68,68,.6); color: #fca5a5; }
.pf10c-fav.active svg { fill: #ef4444; stroke: #ef4444; }
.pf10c-list:hover, .pf10c-list.active { background: rgba(16,185,129,.3); border-color: rgba(16,185,129,.6); color: #6ee7b7; }
.pf10c-info-btn { text-decoration: none; }

/* See all link */
.pf10-see-all {
    font-size: 11px; font-weight: 700; color: rgba(124,58,237,.75);
    text-decoration: none; transition: color .2s; white-space: nowrap;
}
.pf10-see-all:hover { color: #a855f7; }

/* ── Breakpoints — selector doble para superar el inline width:auto!important ── */
@media (max-width: 1400px) {
    .pf10c-slide                { height: 236px !important; }
    .swiper-slide.pf10c-slide   { width: calc((95vw - 80px) / 6) !important; }
    .swiper-slide.pf10c-slide:hover { width: calc((95vw - 80px) / 6 * 2.5) !important; max-width: 420px !important; }
}
@media (max-width: 1100px) {
    /* 5 en pantallas medianas */
    .pf10c-slide                { height: 220px !important; }
    .swiper-slide.pf10c-slide   { width: calc((95vw - 64px) / 5) !important; max-width: 210px; }
    .swiper-slide.pf10c-slide:hover { width: calc((95vw - 64px) / 5 * 2.4) !important; max-width: 470px !important; }
}
@media (max-width: 768px) {
    /* 3 en móvil — sin expansión táctil */
    .pf10c-slide                { height: 190px !important; }
    .swiper-slide.pf10c-slide   { width: calc((96vw - 32px) / 3) !important; min-width: 100px; max-width: 160px; }
    .swiper-slide.pf10c-slide:hover { width: calc((96vw - 32px) / 3) !important; max-width: 160px !important; }
    .pf10c-slide:hover .pf10c-poster img { transform: scale(1.04); filter: brightness(.75); }
    .pf10c-back { opacity: 1 !important; background-image: none !important; }
    .pf10c-back-grad { background: linear-gradient(to top, rgba(0,0,0,.9) 0%, transparent 45%); }
    .pf10c-info { transform: none !important; opacity: 1 !important; transition: none !important; padding: 8px 6px; }
    .pf10c-title { font-size: 9.5px; -webkit-line-clamp: 1; }
    .pf10c-desc, .pf10c-genres, .pf10c-actions { display: none !important; }
    .pf10c-rating { font-size: 9px; padding: 2px 6px; }
    .pf10c-meta { font-size: 9px; }
}
@media (max-width: 480px) {
    .pf10c-slide                { height: 172px !important; }
    .swiper-slide.pf10c-slide   { width: calc((96vw - 18px) / 3) !important; min-width: 90px; }
}

/* ── Overflow must be visible for expand effect ── */
.pf-sect { overflow: visible !important; }
.pf10-sect { overflow: visible !important; }
.pf10c-slider { overflow: visible !important; }


/* ═══════════════════════════════════════════════════════
   TOP 10 — HBO MAX STYLE
   Tall backdrop cards with big rank number
═══════════════════════════════════════════════════════ */
.pf10-top10-sect .pf10c-slider { padding: 20px 0 28px !important; }

/* Top 10 slides: más altas para el número de ranking + doble selector para especificidad */
.pf10-top10-sect .pf10c-slide,
.pf10-top10-sect .swiper-slide.pf10c-slide {
    height: 270px !important;
    padding-left: 28px !important;
}
.pf10-top10-sect .swiper-slide.pf10c-slide {
    width: calc((100vw - 6%) / 3.6) !important;
    max-width: 380px !important;
    min-width: 260px !important;
}
.pf10-top10-sect .swiper-slide.pf10c-slide:hover {
    width: calc((100vw - 6%) / 3.6 * 1.35) !important;
    max-width: 520px !important;
}
/* Card del top10: hereda la altura del slide, sin padding-bottom */
.pf10-top10-sect .pf10c-card {
    border-radius: 16px;
}

/* Giant rank number */
.pf10c-rank {
    position: absolute;
    left: -22px; bottom: 6px;
    font-size: 110px; font-weight: 900; line-height: .82;
    z-index: 5; pointer-events: none;
    font-family: 'Arial Black', Impact, sans-serif;
    color: transparent;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.9));
    transition: opacity .5s ease, transform .5s ease;
}

/* Top10 slides: taller to accommodate rank number + landscape backdrop */
.pf10-top10-sect .pf10c-slide {
    height: 270px;
    padding-left: 28px;
}
.pf10-top10-sect .pf10c-slide:hover .pf10c-rank {
    opacity: .1;
    transform: translateX(-12px) scale(.8);
}
/* Bigger title for top10 */
.pf10-top10-sect .pf10c-title { font-size: 18px; }
.pf10-top10-sect .pf10c-info  { padding: 22px 20px; gap: 9px; }
.pf10-top10-sect .pf10c-desc  { -webkit-line-clamp: 3; }

/* Rank badge inside info */
.pf10c-rank-label {
    font-size: 11px; color: rgba(255,255,255,.45); font-style: italic;
}

@media (max-width: 1100px) {
    .pf10-top10-sect .pf10c-slide,
    .pf10-top10-sect .swiper-slide.pf10c-slide { height: 240px !important; }
    .pf10-top10-sect .swiper-slide.pf10c-slide { width: calc((100vw - 6%) / 2.8) !important; min-width: 220px !important; }
}
@media (max-width: 768px) {
    .pf10-top10-sect .pf10c-slide,
    .pf10-top10-sect .swiper-slide.pf10c-slide { height: 210px !important; }
    .pf10-top10-sect .swiper-slide.pf10c-slide { width: calc((100vw - 4%) / 1.6) !important; max-width: 300px !important; padding-left: 20px !important; }
    .pf10-top10-sect .swiper-slide.pf10c-slide:hover { width: calc((100vw - 4%) / 1.6) !important; max-width: 300px !important; }
    .pf10c-rank { font-size: 85px; left: -14px; }
}

/* ═══ PLATFORM BADGES ═══ */
.pf-platform-badge {
    display: inline-flex; align-items: center; padding: 5px 14px;
    border-radius: 8px; font-size: 14px; font-weight: 900; color: #fff;
    letter-spacing: .5px; box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

/* ═══════════════════════════════════════════════════════
   TRAILER MODAL — Perfectly centered 16:9
═══════════════════════════════════════════════════════ */
.pftr-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.93); z-index: 9800;
    backdrop-filter: blur(8px);
}
.pftr-overlay.open { display: block; }
.pftr-box {
    display: none !important; position: fixed; inset: 0; z-index: 9900;
    align-items: center; justify-content: center; padding: 20px;
}
.pftr-box.open { display: flex !important; }
.pftr-close {
    position: fixed; top: 16px; right: 16px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
    color: #fff; width: 44px; height: 44px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    z-index: 9910; font-size: 20px; line-height: 1;
    transition: background .2s; font-family: sans-serif;
}
.pftr-close:hover { background: rgba(239,68,68,.5); border-color: rgba(239,68,68,.7); }
#pftr-frame {
    width: 100%;
    max-width: min(92vw, calc(88vh * 16 / 9));
    aspect-ratio: 16 / 9;
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.85);
    border: 1px solid rgba(255,255,255,.1);
}
#pftr-frame iframe { width: 100%; height: 100%; border: none; display: block; }

/* ═══ PFCHIPS Global ═══ */
.pfchips-wrap { position:relative;z-index:5;background:rgba(5,5,10,.75);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06);padding:12px 0; }
.pfchips-wrap-series { background:rgba(2,14,12,.75); }
.pfchips-wrap-anime  { background:rgba(10,0,20,.75);border-color:rgba(236,72,153,.12); }
.pfchips-slider { overflow:hidden !important; }
.pfchips-center { display:flex !important;justify-content:center; }
.pfchips-slide  { width:auto !important;padding:0 4px; }
.pfchip {
    display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:24px;
    font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer;
    background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.1);color:rgba(255,255,255,.65);
    transition:background .22s,border-color .22s,color .22s,transform .2s,box-shadow .2s;
}
.pfchip:hover,.pfchip.pfchip-active { color:#fff;transform:translateY(-2px); }
.pfchip-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0;transition:transform .2s;opacity:.8; }
.pfchip:hover .pfchip-dot,.pfchip.pfchip-active .pfchip-dot { transform:scale(1.35);opacity:1; }
@keyframes pfChipIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.pfchips-slide{animation:pfChipIn .32s ease both;}
.pfchips-slide:nth-child(1){animation-delay:.02s}.pfchips-slide:nth-child(2){animation-delay:.05s}
.pfchips-slide:nth-child(3){animation-delay:.08s}.pfchips-slide:nth-child(4){animation-delay:.11s}
.pfchips-slide:nth-child(5){animation-delay:.14s}.pfchips-slide:nth-child(6){animation-delay:.17s}
.pfchips-slide:nth-child(7){animation-delay:.20s}.pfchips-slide:nth-child(8){animation-delay:.23s}
.pfchips-slide:nth-child(n+9){animation-delay:.26s}
@media(max-width:900px){.pfchips-center{justify-content:flex-start !important;padding:0 4%}}

/* ═══ Genre banner ═══ */
.pf10-genre-banner{position:relative;overflow:hidden;height:58px;border-radius:12px;margin:20px 5% 0;border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:all .22s;display:flex;align-items:center;background:linear-gradient(135deg,rgba(0,0,0,.3),rgba(0,0,0,.15))}
.pf10-genre-banner:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.35);border-color:var(--gc,rgba(124,58,237,.5))}
.pf10-gb-content{position:relative;z-index:5;display:flex;align-items:center;gap:12px;padding:0 20px}
.pf10-gb-icon{font-size:1.5rem}
.pf10-gb-name{font-size:15px;font-weight:800;color:#fff}
.pf10-gb-arrow{font-size:14px;color:rgba(255,255,255,.4);margin-left:4px;transition:transform .2s,color .2s}
.pf10-genre-banner:hover .pf10-gb-arrow{transform:translateX(4px);color:#fff}
.pf10-gb-glow{position:absolute;top:-20px;right:-20px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,var(--gc,rgba(124,58,237,.3)) 0%,transparent 70%);opacity:.6;pointer-events:none}
.pf10-gb-particles{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}

/* Specific genre banner colors */
.pfx-action  { border-color: rgba(239,68,68,.3)!important; background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(234,88,12,.08))!important; }
.pfx-horror  { border-color: rgba(107,33,168,.4)!important; background: linear-gradient(135deg, rgba(127,0,0,.25), rgba(10,0,5,.15))!important; }
.pfx-scifi   { border-color: rgba(14,165,233,.3)!important; background: linear-gradient(135deg, rgba(14,165,233,.18), rgba(124,58,237,.08))!important; }
.pfx-romance { border-color: rgba(236,72,153,.3)!important; background: linear-gradient(135deg, rgba(236,72,153,.18), rgba(244,63,94,.08))!important; }
.pfx-comedy  { border-color: rgba(234,179,8,.3)!important;  background: linear-gradient(135deg, rgba(234,179,8,.18),  rgba(249,115,22,.08))!important; }
.pfx-drama   { border-color: rgba(124,58,237,.3)!important; background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(79,70,229,.08))!important; }
.pfx-thriller{ border-color: rgba(29,78,216,.3)!important;  background: linear-gradient(135deg, rgba(30,58,95,.3),  rgba(15,23,42,.15))!important; }
.pfx-crime   { border-color: rgba(75,85,99,.35)!important;  background: linear-gradient(135deg, rgba(55,65,81,.25), rgba(17,24,39,.15))!important; }
.pfx-fantasy { border-color: rgba(167,139,250,.3)!important;background: linear-gradient(135deg, rgba(109,40,217,.2), rgba(139,92,246,.08))!important; }
.pfx-adventure{border-color: rgba(5,150,105,.3)!important; background: linear-gradient(135deg, rgba(5,150,105,.18),  rgba(6,182,212,.08))!important; }
.pfx-animation{border-color: rgba(245,158,11,.3)!important;background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(236,72,153,.08))!important; }
.pfx-family  { border-color: rgba(16,185,129,.3)!important; background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(6,182,212,.08))!important; }
.pfx-default { border-color: rgba(124,58,237,.3)!important; background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(6,182,212,.08))!important; }

/* ═══ pf-sect overflow fix ═══ */
.pf-sect { overflow: visible !important; }
.pf10-sect { overflow: visible !important; }

/* ═══ Genre title bigger on home ═══ */
.pf10-genre-main-title { font-size: 1.6rem !important; font-weight: 900 !important; }

/* ═══ Platform badge ═══ */
.pf-platform-badge { display:inline-flex;align-items:center;padding:5px 14px;border-radius:8px;font-size:14px;font-weight:900;color:#fff;letter-spacing:.5px;box-shadow:0 4px 16px rgba(0,0,0,.4); }

/* ═══════════════════════════════════════════════════════
   TOP 10 — 6 visible, poster 2:3 collapsed, expands horizontal
═══════════════════════════════════════════════════════ */
.pf10-top10-sect .pf10c-slider { padding: 20px 0 28px !important; }
.pf10-top10-sect .pf10c-slide {
    width: calc((95vw - 60px) / 6 + 26px) !important;
    min-width: 140px;
    max-width: 216px !important;
    padding-left: 26px !important;
}
.pf10-top10-sect .pf10c-slide:hover {
    width: calc((95vw - 60px) / 6 * 2.5 + 26px) !important;
    max-width: 486px !important;
}
.pf10-top10-sect .pf10c-card   { padding-bottom: 150% !important; border-radius: 10px !important; }
.pf10-top10-sect .pf10c-title  { font-size: 16px !important; }
.pf10-top10-sect .pf10c-info   { padding: 18px 14px !important; gap: 8px !important; }
@media (max-width: 1100px) {
    .pf10-top10-sect .pf10c-slide       { width: calc((95vw - 40px) / 5 + 22px) !important; padding-left:22px !important; max-width:190px !important; }
    .pf10-top10-sect .pf10c-slide:hover { width: calc((95vw - 40px) / 5 * 2.4 + 22px) !important; max-width:450px !important; }
}
@media (max-width: 768px) {
    .pf10-top10-sect .pf10c-slide       { width: calc((96vw - 24px) / 3 + 16px) !important; max-width:155px !important; padding-left:16px !important; }
    .pf10-top10-sect .pf10c-slide:hover { width: calc((96vw - 24px) / 3 + 16px) !important; max-width:155px !important; }
    .pf10c-rank { font-size: 70px !important; left: -8px !important; }
}


/* ============================================================
   GLOBAL FAV & LIST BUTTON STATES — PrimeFlix v1.3
   Works across all pages: cards, hero, sliders, content, search
   ============================================================ */

/* Fav — active (filled red heart) */
.pf-fav-active,
.pf10c-fav.active,
.pf10-btn-fav.active,
.pfcp-btn-fav.active,
.card-fav-btn.active,
[class*="btn-fav"].active {
  color: #ef4444 !important;
  border-color: rgba(239,68,68,.5) !important;
  background: rgba(239,68,68,.15) !important;
}
.pf-fav-active svg,
.pf10c-fav.active svg,
.pf10-btn-fav.active svg,
.pfcp-btn-fav.active svg,
.card-fav-btn.active svg {
  fill: #ef4444;
  stroke: #ef4444;
}

/* List — active (green checkmark) */
.pf-list-active,
.pf10c-list.active,
.pf10-btn-list.active,
.pfcp-btn-mylist.active,
[class*="btn-list"].active {
  color: #22c55e !important;
  border-color: rgba(34,197,94,.5) !important;
  background: rgba(34,197,94,.12) !important;
}
.pf-list-active svg,
.pf10c-list.active svg,
.pf10-btn-list.active svg,
.pfcp-btn-mylist.active svg {
  stroke: #22c55e;
}

/* Hover states */
.pf10c-fav:hover, .pf10-btn-fav:hover, .pfcp-btn-fav:hover { 
  background: rgba(239,68,68,.12) !important; 
  border-color: rgba(239,68,68,.4) !important;
}
.pf10c-list:hover, .pf10-btn-list:hover, .pfcp-btn-mylist:hover { 
  background: rgba(34,197,94,.1) !important; 
  border-color: rgba(34,197,94,.4) !important;
}