/* ============================================================
   ViaTV Ultimate Elementor — Frontend Styles
   All colors controlled via CSS custom properties.
   Values are overridden at runtime by the Color Palette admin.
   ============================================================ */

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

/* ── Default palette (overridden by saved options via wp_head <style>) ────── */
:root {
    /* Solid colours */
    --viatv-primary:           #8576FF;
    --viatv-primary-dark:      #1C1678;
    --viatv-secondary:         #7BC9FF;
    --viatv-accent:            #A3FFD6;
    --viatv-yellow:            #F4E55B;
    --viatv-gold:              #FFD700;
    --viatv-background:        #06050F;
    --viatv-background-mid:    #0d0b1e;
    --viatv-background-light:  #1C1678;
    --viatv-text-primary:      #FFFFFF;
    --viatv-text-secondary:    #b0b7c3;
    --viatv-success:           #00D084;
    --viatv-warning:           #FFB800;
    --viatv-danger:            #FF4757;
    --viatv-netflix-red:       #E50914;

    /* RGB channels — required for rgba(var(--x-rgb), alpha) pattern */
    --viatv-primary-rgb:       133,118,255;
    --viatv-secondary-rgb:     123,201,255;
    --viatv-accent-rgb:        163,255,214;
    --viatv-bg-rgb:            6,5,15;
    --viatv-gold-rgb:          255,215,0;

    /* Derived / semantic aliases */
    --viatv-border:            rgba(var(--viatv-primary-rgb),0.15);
    --viatv-card-bg:           rgba(var(--viatv-primary-rgb),0.04);
    --viatv-glow:              rgba(var(--viatv-primary-rgb),0.4);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Barlow', 'Alata', sans-serif;
    background: var(--viatv-background);
    color: var(--viatv-text-primary);
    overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 { font-family:'Exo 2',sans-serif; font-weight:800; }

/* ── Scrollbar ── */
::-webkit-scrollbar       { width:6px; }
::-webkit-scrollbar-track { background:var(--viatv-background); }
::-webkit-scrollbar-thumb { background:var(--viatv-primary); border-radius:3px; }

/* ── Animations ── */
@keyframes fadeInUp   { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes spherePulse{
    0%,100%{transform:translateX(-50%) scale(1);opacity:.9}
    50%    {transform:translateX(-50%) scale(1.05);opacity:1}
}
@keyframes flixMarquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
@keyframes glow     {
    0%,100%{box-shadow:0 0 20px rgba(var(--viatv-primary-rgb),0.5)}
    50%    {box-shadow:0 0 40px rgba(var(--viatv-primary-rgb),0.8)}
}
@keyframes gradientShift {
    0%  { background-position:0% 50% }
    50% { background-position:100% 50% }
    100%{ background-position:0% 50% }
}

/* ── Reveal on scroll ── */
.viatv-reveal { opacity:0; transform:translateY(40px); transition:all .7s ease; }
.viatv-reveal.visible { opacity:1; transform:none; }

/* ── Section utilities ── */
.viatv-section-tag {
    display:inline-block; font-size:12px; font-weight:700;
    letter-spacing:2px; color:var(--viatv-accent);
    text-transform:uppercase; margin-bottom:12px;
}
.viatv-section-title {
    font-family:'Exo 2',sans-serif;
    font-size:clamp(28px,3.5vw,44px);
    font-weight:800; color:var(--viatv-text-primary); margin-bottom:14px;
}
.viatv-section-title span { color:var(--viatv-primary); }
.viatv-section-subtitle {
    font-size:16px; color:var(--viatv-text-secondary);
    max-width:600px; line-height:1.7; margin:0 auto;
}

/* ── Button utilities ── */
.viatv-btn-primary {
    background:linear-gradient(135deg,var(--viatv-primary-dark),var(--viatv-primary));
    color:var(--viatv-text-primary); padding:14px 36px; border-radius:8px;
    font-size:15px; font-weight:700; border:none;
    text-decoration:none; display:inline-block; transition:all .3s; cursor:pointer;
}
.viatv-btn-primary:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 30px rgba(var(--viatv-primary-rgb),0.5);
}
.viatv-btn-outline {
    background:transparent; color:var(--viatv-text-primary); padding:14px 36px;
    border-radius:8px; font-size:15px; font-weight:600;
    border:2px solid rgba(var(--viatv-primary-rgb),0.3);
    text-decoration:none; display:inline-block; transition:all .3s; cursor:pointer;
}
.viatv-btn-outline:hover {
    border-color:var(--viatv-primary);
    background:rgba(var(--viatv-primary-rgb),0.1);
}

/* ── Responsive helpers ── */
@media(max-width:1024px){
    .flix-plans-grid  { grid-template-columns:repeat(2,1fr)!important; }
    .flix-why-grid    { grid-template-columns:repeat(2,1fr)!important; }
    .flix-vod-grid    { grid-template-columns:repeat(4,1fr)!important; }
    .flix-banner-grid { grid-template-columns:repeat(4,1fr)!important; }
    .flix-faq-layout  { grid-template-columns:1fr!important; }
}
@media(max-width:768px){
    .flix-plans-grid    { grid-template-columns:1fr!important; }
    .flix-why-grid      { grid-template-columns:1fr!important; }
    .flix-vod-grid      { grid-template-columns:repeat(3,1fr)!important; }
    .flix-banner-grid   { grid-template-columns:repeat(3,1fr)!important; }
    .flix-faq-layout    { grid-template-columns:1fr!important; }
    .flix-faq-side      { display:none!important; }
    .flix-plan-featured { transform:scale(1)!important; }
    .flix-stream-logos  { gap:10px!important; flex-wrap:wrap; }
    .flix-stream-logo   { padding:8px 12px!important; font-size:14px!important; }
    .flix-hero-sphere   { width:400px!important; height:350px!important; }
}