/* ==================================================
   SPARK MEDIA - JULY 4TH PREMIUM THEME
   Subtle Patriotic Edition
================================================== */

/* ---------- COLORS ---------- */

:root{

--spark-red:#c62839;
--spark-blue:#1e4fb8;
--spark-white:#ffffff;

--spark-bg:#05070b;
--spark-panel:#0c1119;
--spark-border:#20283a;

}

/* ---------- BACKGROUND ---------- */

body{

background:
linear-gradient(180deg,#071120 0%,#05070b 55%,#020305 100%);

color:#fff;

}

/* ---------- HEADER ---------- */

header,
.navbar{

background:rgba(8,10,18,.92)!important;

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(255,255,255,.05);

}

/* Thin patriotic line */

header:after{

content:"";

display:block;

height:2px;

background:
linear-gradient(
90deg,
var(--spark-red),
#ffffff,
var(--spark-blue)
);

opacity:.55;

}

/* ---------- HERO ---------- */

.hero{

position:relative;

}

.hero:before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
90deg,
rgba(10,20,40,.55),
rgba(0,0,0,.20),
rgba(30,60,140,.18)
);

pointer-events:none;

}

/* ---------- BUTTONS ---------- */

.btn-primary{

background:var(--spark-red);

border:none;

transition:.25s;

}

.btn-primary:hover{

background:var(--spark-blue);

}

/* ---------- CONTENT CARDS ---------- */

.thumbnail,
.poster,
.movie-card{

border-radius:10px;

border:1px solid rgba(255,255,255,.06);

transition:.25s;

}

.thumbnail:hover{

transform:translateY(-4px);

border-color:rgba(70,130,255,.35);

box-shadow:
0 8px 28px rgba(0,0,0,.45);

}

/* ---------- TITLES ---------- */

.section-title{

color:#fff;

font-weight:700;

letter-spacing:.5px;

}

.section-title:after{

content:"";

display:block;

margin-top:10px;

width:60px;

height:3px;

background:
linear-gradient(
90deg,
var(--spark-red),
var(--spark-blue)
);

border-radius:4px;

}

/* ---------- LIVE BADGE ---------- */

.live-badge{

background:var(--spark-red);

border-radius:30px;

font-weight:600;

}

/* ---------- LOGO ---------- */

.site-logo img{

filter:
drop-shadow(0 0 10px rgba(255,255,255,.08));

transition:.3s;

}

.site-logo img:hover{

filter:
drop-shadow(0 0 12px rgba(0,110,255,.25));

}

/* ---------- FOOTER ---------- */

footer{

background:#040608;

border-top:1px solid rgba(255,255,255,.05);

}

/* ---------- JULY 4TH ACCENT ---------- */

.july4-banner{

background:
linear-gradient(
90deg,
rgba(198,40,57,.10),
rgba(255,255,255,.05),
rgba(30,79,184,.10)
);

border:1px solid rgba(255,255,255,.06);

color:#fff;

border-radius:12px;

}