/*
 * CineVerse — Aurora
 * Deep-space premium skin. Ink-black backgrounds, electric teal primary,
 * vivid violet secondary, aurora gradient accents. Premium sci-fi streaming feel.
 */

/* Font: Set "Display Font" to "Outfit (Default)" in Design → Typography for best results */

:root {
    /* Core palette */
    --cv-skin-bg:          #060810;
    --cv-skin-bg2:         #0a0d18;
    --cv-skin-card:        #0f1220;
    --cv-skin-card2:       #141828;
    --cv-skin-border:      rgba(0,230,200,0.10);
    --cv-skin-border-hot:  rgba(0,230,200,0.45);
    --cv-skin-accent:      #00e6c8;
    --cv-skin-accent-dim:  rgba(0,230,200,0.14);
    --cv-skin-accent-glow: rgba(0,230,200,0.55);
    --cv-skin-purple:      #7c3aed;
    --cv-skin-purple-dim:  rgba(124,58,237,0.18);
    --cv-skin-gold:        #fbbf24;
    --cv-skin-text:        #c8d0e8;
    --cv-skin-text-dim:    #556080;
    --cv-skin-text-bright: #f0f4ff;
    --cv-skin-grad-main:   linear-gradient(135deg, #7c3aed 0%, #00e6c8 100%);
    --cv-skin-grad-card:   linear-gradient(135deg, rgba(124,58,237,0.08) 0%, rgba(0,230,200,0.05) 100%);
    --cv-skin-radius:      10px;
    --cv-skin-radius-lg:   16px;
    --cv-skin-transition:  0.24s cubic-bezier(0.4,0,0.2,1);

    /* Override theme tokens */
    --cv-bg-primary:      var(--cv-skin-bg);
    --cv-bg-secondary:    var(--cv-skin-bg2);
    --cv-bg-card:         var(--cv-skin-card);
    --cv-bg-elevated:     var(--cv-skin-card2);
    --cv-accent:          var(--cv-skin-accent);
    --cv-accent-dim:      var(--cv-skin-accent-dim);
    --cv-accent-glow:     0 0 24px var(--cv-skin-accent-glow);
    --cv-border:          var(--cv-skin-border);
    --cv-border-hover:    rgba(0,230,200,0.25);
    --cv-text-primary:    var(--cv-skin-text-bright);
    --cv-text-secondary:  var(--cv-skin-text);
    --cv-text-muted:      var(--cv-skin-text-dim);
    --cv-purple:          var(--cv-skin-purple);
    --cv-gold:            var(--cv-skin-gold);

    /* Override netflix-ui.css --nf-* tokens so Aurora palette wins */
    --nf-bg:         var(--cv-skin-bg);
    --nf-card:       var(--cv-skin-card);
    --nf-elevated:   var(--cv-skin-card2);
    --nf-red:        var(--cv-skin-accent);
    --nf-red-hover:  #33ffe8;
    --nf-red-dim:    var(--cv-skin-accent-dim);
    --nf-white:      var(--cv-skin-text-bright);
    --nf-gray:       var(--cv-skin-text-dim);
    --nf-gray-light: var(--cv-skin-text);
    --nf-gold:       var(--cv-skin-gold);
    --nf-border:     var(--cv-skin-border);
}

/* ── Global ─────────────────────────────────────────────────── */
body {
    background: var(--cv-skin-bg) !important;
    background-image:
        radial-gradient(ellipse 70% 40% at 20% 0%, rgba(124,58,237,0.08) 0%, transparent 65%),
        radial-gradient(ellipse 60% 35% at 80% 100%, rgba(0,230,200,0.06) 0%, transparent 60%) !important;
    background-attachment: fixed !important;
    font-family: 'Outfit', 'Helvetica Neue', sans-serif !important;
    color: var(--cv-skin-text) !important;
}

/* Aurora top-bar accent line */
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #7c3aed 0%, #00e6c8 50%, #7c3aed 100%);
    background-size: 200% 100%;
    animation: aurora-shift 4s linear infinite;
    z-index: 9999;
    pointer-events: none;
}
@keyframes aurora-shift {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

a { color: var(--cv-skin-text); transition: color var(--cv-skin-transition); }
a:hover { color: var(--cv-skin-accent); }

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--cv-skin-bg); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--cv-skin-purple) 0%, var(--cv-skin-accent) 100%);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--cv-skin-accent); }
::selection { background: rgba(0,230,200,0.22); color: #fff; }

/* ── Navbar ──────────────────────────────────────────────────── */
.cv-navbar {
    background: linear-gradient(180deg, rgba(6,8,16,0.96) 0%, transparent 100%) !important;
    border-bottom: none !important;
    backdrop-filter: blur(0px) !important;
}
.cv-navbar.scrolled {
    background: rgba(6,8,16,0.97) !important;
    border-bottom: 1px solid var(--cv-skin-border) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.7), 0 1px 0 rgba(0,230,200,0.10) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
.cv-logo {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    font-size: 1.65rem !important;
    background: var(--cv-skin-grad-main) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.cv-logo span { -webkit-text-fill-color: transparent !important; }
.cv-nav-links a {
    color: var(--cv-skin-text-dim) !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    transition: color var(--cv-skin-transition), text-shadow var(--cv-skin-transition) !important;
}
.cv-nav-links a:hover,
.cv-nav-links .current-menu-item a {
    color: var(--cv-skin-accent) !important;
    text-shadow: 0 0 12px var(--cv-skin-accent-glow) !important;
}

/* ── Hero ────────────────────────────────────────────────────── */
.cv-hero { background: var(--cv-skin-bg) !important; }
.cv-hero-overlay {
    background: linear-gradient(
        77deg,
        rgba(6,8,16,0.95) 0%,
        rgba(6,8,16,0.70) 40%,
        rgba(6,8,16,0.20) 75%,
        transparent 100%
    ) !important;
}
.cv-hero-title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    color: #fff !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.6) !important;
}
.cv-hero-meta { color: rgba(200,208,232,0.80) !important; }
.cv-btn-primary {
    background: var(--cv-skin-grad-main) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
    border-radius: var(--cv-skin-radius) !important;
    box-shadow: 0 4px 20px rgba(0,230,200,0.30) !important;
    transition: transform var(--cv-skin-transition), box-shadow var(--cv-skin-transition) !important;
}
.cv-btn-primary:hover {
    transform: scale(1.04) !important;
    box-shadow: 0 6px 30px rgba(0,230,200,0.50) !important;
}
.cv-btn-secondary {
    background: rgba(255,255,255,0.10) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    font-weight: 600 !important;
    border-radius: var(--cv-skin-radius) !important;
    backdrop-filter: blur(8px) !important;
    transition: background var(--cv-skin-transition), border-color var(--cv-skin-transition) !important;
}
.cv-btn-secondary:hover {
    background: rgba(0,230,200,0.14) !important;
    border-color: rgba(0,230,200,0.40) !important;
}

/* ── Cards ───────────────────────────────────────────────────── */
.cv-card {
    background: var(--cv-skin-card) !important;
    border: 1px solid var(--cv-skin-border) !important;
    border-radius: var(--cv-skin-radius) !important;
    transition: transform 0.28s ease, border-color 0.22s ease, box-shadow 0.28s ease !important;
    overflow: hidden !important;
}
.cv-card:hover {
    transform: scale(1.04) translateY(-4px) !important;
    border-color: rgba(0,230,200,0.35) !important;
    box-shadow:
        0 12px 40px rgba(0,0,0,0.7),
        0 0 0 1px rgba(0,230,200,0.15),
        0 0 30px rgba(0,230,200,0.08) !important;
    z-index: 10 !important;
    position: relative !important;
}
.cv-card-img {
    filter: brightness(0.82) saturate(0.90) !important;
    transition: filter 0.28s ease !important;
}
.cv-card:hover .cv-card-img {
    filter: brightness(1.0) saturate(1.10) !important;
}
.cv-card-overlay {
    background: linear-gradient(
        to top,
        rgba(6,8,16,0.96) 0%,
        rgba(6,8,16,0.55) 40%,
        transparent 80%
    ) !important;
}
.cv-card-title {
    color: var(--cv-skin-text-bright) !important;
    font-weight: 600 !important;
    font-size: 0.87rem !important;
}
.cv-card-meta { color: var(--cv-skin-text-dim) !important; font-size: 0.74rem !important; }
.cv-card-rating {
    color: var(--cv-skin-gold) !important;
    font-weight: 700 !important;
    font-size: 0.80rem !important;
}
.cv-card-badge {
    background: var(--cv-skin-grad-main) !important;
    color: #fff !important;
    font-size: 0.60rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
}

/* ── Play button on card ─────────────────────────────────────── */
.cv-card-play {
    background: rgba(0,230,200,0.90) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 20px rgba(0,230,200,0.60) !important;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease !important;
}
.cv-card-play:hover {
    transform: scale(1.18) !important;
    box-shadow: 0 6px 30px rgba(0,230,200,0.80) !important;
}

/* ── Section headings ─────────────────────────────────────────── */
.cv-section-title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.30rem !important;
    color: var(--cv-skin-text-bright) !important;
    letter-spacing: -0.01em !important;
}
.cv-section-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1em;
    background: var(--cv-skin-grad-main);
    border-radius: 2px;
    margin-right: 10px;
    vertical-align: middle;
}
.cv-section-link {
    color: var(--cv-skin-text-dim) !important;
    font-size: 0.80rem !important;
    font-weight: 500 !important;
    transition: color var(--cv-skin-transition) !important;
}
.cv-section-link:hover { color: var(--cv-skin-accent) !important; }

/* ── Search bar ───────────────────────────────────────────────── */
.cv-search-wrap input,
.cv-search input {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid var(--cv-skin-border) !important;
    color: var(--cv-skin-text-bright) !important;
    border-radius: var(--cv-skin-radius) !important;
    transition: border-color var(--cv-skin-transition), box-shadow var(--cv-skin-transition) !important;
}
.cv-search-wrap input:focus,
.cv-search input:focus {
    border-color: var(--cv-skin-border-hot) !important;
    box-shadow: 0 0 0 3px var(--cv-skin-accent-dim), 0 0 20px var(--cv-skin-accent-dim) !important;
    outline: none !important;
    background: rgba(0,230,200,0.05) !important;
}
.cv-search-wrap input::placeholder { color: var(--cv-skin-text-dim) !important; }

/* ── Single movie/TV page ─────────────────────────────────────── */
.cv-single-backdrop::after {
    background:
        linear-gradient(to right, rgba(6,8,16,1) 0%, rgba(6,8,16,0.80) 40%, rgba(6,8,16,0.20) 80%, transparent 100%),
        linear-gradient(to top, rgba(6,8,16,1) 0%, rgba(6,8,16,0.40) 35%, transparent 100%) !important;
}
.cv-single-title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    color: var(--cv-skin-text-bright) !important;
}
.cv-single-meta { color: var(--cv-skin-text-dim) !important; }
.cv-single-rating-value { color: var(--cv-skin-gold) !important; font-weight: 800 !important; }
.cv-genre-tag {
    background: var(--cv-skin-accent-dim) !important;
    border: 1px solid rgba(0,230,200,0.20) !important;
    color: var(--cv-skin-accent) !important;
    border-radius: 20px !important;
    font-size: 0.78rem !important;
    padding: 3px 10px !important;
    transition: all var(--cv-skin-transition) !important;
}
.cv-genre-tag:hover {
    background: rgba(0,230,200,0.25) !important;
    border-color: var(--cv-skin-border-hot) !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(0,230,200,0.30) !important;
}
.cv-overview { color: var(--cv-skin-text) !important; line-height: 1.75 !important; font-size: 0.95rem !important; }

/* ── Player container ─────────────────────────────────────────── */
.cv-player-container,
.cv-video-wrapper {
    background: #000 !important;
    border-radius: var(--cv-skin-radius-lg) !important;
    overflow: hidden !important;
    box-shadow:
        0 0 0 1px var(--cv-skin-border),
        0 0 40px rgba(0,230,200,0.12),
        0 12px 56px rgba(0,0,0,0.90) !important;
}

/* ── Cast cards ───────────────────────────────────────────────── */
.cv-cast-card {
    background: var(--cv-skin-card) !important;
    border: 1px solid var(--cv-skin-border) !important;
    border-radius: var(--cv-skin-radius) !important;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}
.cv-cast-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(0,230,200,0.30) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 16px rgba(0,230,200,0.08) !important;
}
.cv-cast-name { color: var(--cv-skin-text-bright) !important; font-weight: 600 !important; }
.cv-cast-role { color: var(--cv-skin-text-dim) !important; font-size: 0.78rem !important; }

/* ── Tabs / Pills ─────────────────────────────────────────────── */
.cv-tabs-nav .cv-tab {
    color: var(--cv-skin-text-dim) !important;
    border-bottom: 2px solid transparent !important;
    font-weight: 500 !important;
    transition: color var(--cv-skin-transition), border-color var(--cv-skin-transition) !important;
}
.cv-tabs-nav .cv-tab.active,
.cv-tabs-nav .cv-tab:hover {
    color: var(--cv-skin-accent) !important;
    border-bottom-color: var(--cv-skin-accent) !important;
    text-shadow: 0 0 10px var(--cv-skin-accent-glow) !important;
}

/* ── Pagination ───────────────────────────────────────────────── */
.cv-pagination a,
.cv-pagination span {
    background: var(--cv-skin-card) !important;
    border: 1px solid var(--cv-skin-border) !important;
    color: var(--cv-skin-text-dim) !important;
    border-radius: var(--cv-skin-radius) !important;
    transition: all var(--cv-skin-transition) !important;
}
.cv-pagination a:hover,
.cv-pagination .current {
    background: var(--cv-skin-accent-dim) !important;
    border-color: var(--cv-skin-border-hot) !important;
    color: var(--cv-skin-accent) !important;
    box-shadow: 0 4px 16px var(--cv-skin-accent-dim) !important;
}

/* ── Footer ───────────────────────────────────────────────────── */
.cv-footer {
    background: linear-gradient(180deg, var(--cv-skin-bg2) 0%, #030407 100%) !important;
    border-top: 1px solid var(--cv-skin-border) !important;
    color: var(--cv-skin-text-dim) !important;
    position: relative !important;
}
.cv-footer::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cv-skin-purple), var(--cv-skin-accent), transparent);
    opacity: 0.5;
}
.cv-footer a { color: var(--cv-skin-text-dim) !important; transition: color var(--cv-skin-transition) !important; }
.cv-footer a:hover { color: var(--cv-skin-accent) !important; }
.cv-footer-logo {
    background: var(--cv-skin-grad-main) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 900 !important;
}

/* ── Badges / Labels ──────────────────────────────────────────── */
.cv-badge-new    { background: var(--cv-skin-grad-main) !important; color: #fff !important; }
.cv-badge-hd     { background: rgba(0,230,200,0.12) !important; color: var(--cv-skin-accent) !important; border: 1px solid rgba(0,230,200,0.22) !important; }
.cv-badge-top    { background: linear-gradient(135deg, #92400e 0%, var(--cv-skin-gold) 100%) !important; color: #000 !important; }

/* ── Loading / skeleton ───────────────────────────────────────── */
.cv-skeleton {
    background: linear-gradient(90deg, var(--cv-skin-card) 0%, var(--cv-skin-card2) 50%, var(--cv-skin-card) 100%) !important;
    background-size: 200% 100% !important;
    animation: cv-aurora-shimmer 1.6s ease-in-out infinite !important;
}
@keyframes cv-aurora-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Rating stars ─────────────────────────────────────────────── */
.cv-stars .filled { color: var(--cv-skin-gold) !important; }
.cv-stars .empty  { color: rgba(255,255,255,0.15) !important; }
.cv-rating-count  { color: var(--cv-skin-text-dim) !important; }

/* ── Form elements ────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--cv-skin-border) !important;
    color: var(--cv-skin-text-bright) !important;
    border-radius: var(--cv-skin-radius) !important;
    transition: border-color var(--cv-skin-transition), box-shadow var(--cv-skin-transition) !important;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--cv-skin-border-hot) !important;
    box-shadow: 0 0 0 3px var(--cv-skin-accent-dim) !important;
    outline: none !important;
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cv-card:hover { transform: none !important; }
    .cv-hero-title { font-size: 1.5rem !important; }
}
@media (prefers-reduced-motion: reduce) {
    *, .cv-card, body::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}