/* ==================================================
   SPARK MEDIA NETWORKS - PREMIUM STREAMING THEME
   Updated by Codex on July 2, 2026
================================================== */

:root {
  --spark-red: #d62839;
  --spark-blue: #2f6bff;
  --spark-gold: #d7b56d;
  --spark-bg: #030508;
  --spark-bg-soft: #090d14;
  --spark-panel: #0f141d;
  --spark-line: rgba(255,255,255,.08);
  --spark-muted: rgba(255,255,255,.72);
}

html,
body,
body.page-home {
  background:
    radial-gradient(circle at 20% 0%, rgba(47,107,255,.16), transparent 32%),
    radial-gradient(circle at 84% 8%, rgba(214,40,57,.12), transparent 28%),
    linear-gradient(180deg, #07101d 0%, var(--spark-bg) 46%, #010203 100%) !important;
  color: #fff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

body.page-home:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 100% 4px;
  opacity: .25;
  z-index: 0;
}

#searchMain.headerMain,
header,
.navbar {
  background: rgba(3,5,8,.84) !important;
  border-bottom: 1px solid var(--spark-line);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
}

#searchMain.headerMain:after,
header:after {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--spark-red), var(--spark-gold), var(--spark-blue), transparent);
  opacity: .72;
}

.innerHeader.insidePadding {
  min-height: 74px;
}

.logo img,
.site-logo img {
  max-height: 46px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.42));
}

.topNav .nav-link,
.navDropMenu .dropdown-toggle {
  color: rgba(255,255,255,.78) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: color .2s ease, background .2s ease;
}

.topNav .nav-link:hover,
.topNav .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.07);
  border-radius: 999px;
}

.headBtn--login,
.btn-primary,
.btn-editors-pick,
a.btn-editors-pick {
  background: linear-gradient(135deg, var(--spark-red), #a91525) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 14px 28px rgba(214,40,57,.24);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.headBtn--login:hover,
.btn-primary:hover,
.btn-editors-pick:hover,
a.btn-editors-pick:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 18px 34px rgba(214,40,57,.34);
}

.page-home .mainSlider,
.page-home .swiper,
.page-home .swiper-container,
.page-home .editorpickSlider,
.page-home .homeEditorPick,
.page-home .itemSlider {
  position: relative;
}

.page-home .mainSlider:after,
.page-home .editorpickSlider:after,
.page-home .homeEditorPick:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,5,8,.88) 0%, rgba(3,5,8,.50) 38%, rgba(3,5,8,.08) 68%),
    linear-gradient(0deg, var(--spark-bg) 0%, transparent 30%);
  z-index: 1;
}

.page-home .slideContent,
.page-home .sliderContent,
.page-home .caption,
.page-home .innerSlideContent {
  position: relative;
  z-index: 2;
}

.slideTitle,
.page-home h1,
.page-home h2.slideTitle {
  letter-spacing: 0 !important;
  text-shadow: 0 10px 32px rgba(0,0,0,.62);
}

.page-home .slideContent p,
.page-home .sliderContent p,
.page-home .itemDescription,
.page-home .description {
  color: var(--spark-muted) !important;
  max-width: 680px;
  line-height: 1.58;
}

.swiperTitle,
.section-title,
.page-home h2.h5 {
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.swiperTitle:after,
.section-title:after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--spark-red), var(--spark-gold), var(--spark-blue));
}

.page-home .swiper-wrapper,
.page-home .content-row,
.page-home .movie-list,
.page-home .series-list {
  padding-top: 8px;
}

.page-home .thumbnail,
.page-home .poster,
.page-home .movie-card,
.page-home .card,
.page-home .item,
.page-home .swiper-slide {
  border-radius: 12px !important;
  overflow: hidden;
}

.page-home .thumbnail,
.page-home .poster,
.page-home .movie-card,
.page-home .card {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.24);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.page-home .thumbnail:hover,
.page-home .poster:hover,
.page-home .movie-card:hover,
.page-home .card:hover,
.page-home .swiper-slide:hover {
  transform: translateY(-5px);
  border-color: rgba(215,181,109,.42) !important;
  box-shadow: 0 24px 44px rgba(0,0,0,.42), 0 0 0 1px rgba(215,181,109,.12);
}

.page-home img.imgFull,
.page-home .thumbnail img,
.page-home .poster img,
.page-home .movie-card img,
.page-home .card img {
  filter: saturate(1.08) contrast(1.05);
}

.page-home .viewAll,
.page-home a[href*="contentLists"],
.page-home a[href*="all-movies"] {
  color: rgba(255,255,255,.74);
  font-weight: 700;
}

.page-home .viewAll:hover,
.page-home a[href*="contentLists"]:hover,
.page-home a[href*="all-movies"]:hover {
  color: var(--spark-gold) !important;
}

footer,
.footer,
#footer {
  background: linear-gradient(180deg, #05070a, #010203) !important;
  border-top: 1px solid var(--spark-line);
  color: rgba(255,255,255,.72);
}

footer a,
.footer a,
#footer a {
  color: rgba(255,255,255,.78) !important;
}

footer a:hover,
.footer a:hover,
#footer a:hover {
  color: var(--spark-gold) !important;
}

.modal-content,
.dropdown-menu,
.headerDropMenu {
  background: rgba(9,13,20,.96) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.42);
}

.dropdown-item,
.headerDropMenu .nav-link {
  color: rgba(255,255,255,.82) !important;
}

.dropdown-item:hover,
.headerDropMenu .nav-link:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

@media (max-width: 767px) {
  .innerHeader.insidePadding {
    min-height: 64px;
  }

  .logo img,
  .site-logo img {
    max-height: 38px;
  }

  .swiperTitle,
  .section-title,
  .page-home h2.h5 {
    font-size: 18px !important;
  }

  .page-home .slideContent p,
  .page-home .sliderContent p,
  .page-home .itemDescription,
  .page-home .description {
    line-height: 1.45;
  }
}

/* ==================================================
   SPARK MEDIA NETWORKS - LOGIN + PLANS FUNNEL
   Added by Codex on July 2, 2026
================================================== */

body.page-login,
body.page-plans {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 12%, rgba(214,40,57,.18), transparent 30%),
    radial-gradient(circle at 86% 0%, rgba(47,107,255,.17), transparent 34%),
    linear-gradient(180deg, #070b12 0%, #030508 58%, #010203 100%) !important;
}

body.page-login main,
body.page-login .main,
body.page-login .loginWrapper,
body.page-login .loginContainer,
body.page-login .container,
body.page-plans main,
body.page-plans .main,
body.page-plans .container {
  position: relative;
  z-index: 1;
}

body.page-login:after,
body.page-plans:after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 86px 86px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.74), transparent 72%);
  opacity: .36;
}

body.page-login .card,
body.page-login form,
body.page-login #login-form,
body.page-login #login-otp-form {
  background: linear-gradient(180deg, rgba(15,20,29,.92), rgba(7,10,16,.94)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.06);
}

body.page-login #login-form,
body.page-login #login-otp-form {
  padding: 28px !important;
}

body.page-login .mb-4.h2,
body.page-login h2,
body.page-plans .h2 {
  color: #fff !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 12px 32px rgba(0,0,0,.44);
}

body.page-login .form-control,
body.page-login input,
body.page-plans .form-control,
body.page-plans input,
body.page-plans select {
  min-height: 48px;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.page-login .form-control:focus,
body.page-login input:focus,
body.page-plans .form-control:focus,
body.page-plans input:focus,
body.page-plans select:focus {
  border-color: rgba(215,181,109,.62) !important;
  box-shadow: 0 0 0 4px rgba(215,181,109,.12) !important;
}

body.page-login ::placeholder,
body.page-plans ::placeholder {
  color: rgba(255,255,255,.52) !important;
}

body.page-login .forgotLink,
body.page-login a,
body.page-plans a {
  color: rgba(215,181,109,.92) !important;
}

body.page-login .btn-outline-secondary,
body.page-login .btn-white,
body.page-plans .btn-outline-secondary,
body.page-plans .btn-secondary {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

body.page-login .btn-primary,
body.page-login .submitBtn,
body.page-plans .btn-primary,
body.page-plans .continueBTN,
body.page-plans .planBox .btn {
  min-height: 46px;
  background: linear-gradient(135deg, #d62839, #a91525) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 18px 36px rgba(214,40,57,.30) !important;
}

body.page-login .btn-primary:hover,
body.page-login .submitBtn:hover,
body.page-plans .btn-primary:hover,
body.page-plans .continueBTN:hover,
body.page-plans .planBox .btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 24px 48px rgba(214,40,57,.40) !important;
}

body.page-plans .card.py-4.px-3 {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    rgba(7,10,16,.90) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.40);
  backdrop-filter: blur(14px);
}

body.page-plans .card.py-4.px-3 > .text-center,
body.page-plans .card.py-4.px-3 .h2 {
  position: relative;
}

body.page-plans .card.py-4.px-3:before {
  content: "Choose your access";
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 12px;
  padding: 6px 12px;
  border: 1px solid rgba(215,181,109,.34);
  border-radius: 999px;
  color: #d7b56d;
  background: rgba(215,181,109,.08);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

body.page-plans .planBox {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(18,24,34,.96), rgba(7,10,16,.98)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.30);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

body.page-plans .planBox:before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #d62839, #d7b56d, #2f6bff);
  opacity: .9;
}

body.page-plans .planBox:hover {
  transform: translateY(-6px);
  border-color: rgba(215,181,109,.44) !important;
  box-shadow: 0 30px 60px rgba(0,0,0,.46), 0 0 0 1px rgba(215,181,109,.10);
}

body.page-plans .planBox .h3,
body.page-plans .planBox h2 {
  color: #fff !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

body.page-plans .planBox .h1,
body.page-plans .planBox h3 {
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body.page-plans .planBox p,
body.page-plans .planBox li,
body.page-plans .planBox div {
  color: rgba(255,255,255,.78);
}

body.page-plans .planBox hr,
body.page-plans .planBox .border-bottom {
  border-color: rgba(255,255,255,.10) !important;
}

body.page-plans .planBox .mdi-check,
body.page-plans .planBox .mdi-check-circle,
body.page-plans .planBox .text-success {
  color: #d7b56d !important;
}

body.page-plans .planBox .mdi-close,
body.page-plans .planBox .text-danger {
  color: rgba(214,40,57,.86) !important;
}

body.page-plans .card2,
body.page-plans .radioCard,
body.page-plans .paymentHolder {
  background: rgba(12,17,25,.92) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 38px rgba(0,0,0,.26);
}

@media (max-width: 767px) {
  body.page-login #login-form,
  body.page-login #login-otp-form {
    padding: 22px !important;
    border-radius: 14px !important;
  }

  body.page-plans .card.py-4.px-3 {
    border-radius: 14px !important;
  }

  body.page-plans .planBox {
    margin-bottom: 18px;
  }
}

/* ==================================================
   SPARK MEDIA NETWORKS - PLANS POP BOOST
   Added by Codex on July 2, 2026
================================================== */

body.page-plans {
  background:
    radial-gradient(circle at 18% 18%, rgba(214,40,57,.28), transparent 30%),
    radial-gradient(circle at 78% 10%, rgba(47,107,255,.26), transparent 34%),
    radial-gradient(circle at 50% 88%, rgba(215,181,109,.13), transparent 32%),
    linear-gradient(180deg, #060912 0%, #020306 60%, #010101 100%) !important;
}

body.page-plans .card.py-4.px-3 {
  position: relative;
  overflow: hidden;
  padding-top: 34px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.024)),
    rgba(6,9,15,.94) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 34px 90px rgba(0,0,0,.54), 0 0 80px rgba(47,107,255,.10);
}

body.page-plans .card.py-4.px-3:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(214,40,57,.16), transparent 28%, transparent 72%, rgba(47,107,255,.16)),
    radial-gradient(circle at 50% 0%, rgba(215,181,109,.16), transparent 38%);
  opacity: .9;
}

body.page-plans .card.py-4.px-3 > * {
  position: relative;
  z-index: 1;
}

body.page-plans .card.py-4.px-3:before {
  content: "Stream the wild side";
  color: #06070a;
  background: linear-gradient(135deg, #f2d487, #d7b56d 55%, #fff2be);
  border: 0;
  box-shadow: 0 10px 30px rgba(215,181,109,.22);
}

body.page-plans .h2.mb-1,
body.page-plans h2.h2 {
  font-size: clamp(32px, 4vw, 52px) !important;
  line-height: 1.03 !important;
  text-transform: uppercase;
}

body.page-plans .planBox {
  min-height: 100%;
  padding-top: 34px !important;
  background:
    linear-gradient(180deg, rgba(22,29,43,.98), rgba(5,8,14,.99)) !important;
  border-width: 1px !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
}

body.page-plans .planBox:nth-of-type(2),
body.page-plans .planBox:nth-child(2) {
  transform: scale(1.045);
  border-color: rgba(215,181,109,.68) !important;
  box-shadow: 0 30px 76px rgba(0,0,0,.58), 0 0 46px rgba(215,181,109,.18), inset 0 1px 0 rgba(255,255,255,.12);
}

body.page-plans .planBox:nth-of-type(2):after,
body.page-plans .planBox:nth-child(2):after {
  content: "Most Popular";
  position: absolute;
  top: 13px;
  right: 16px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #050609;
  background: linear-gradient(135deg, #f7db8f, #d7b56d);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 0 12px 26px rgba(215,181,109,.22);
}

body.page-plans .planBox:before {
  height: 4px;
  background: linear-gradient(90deg, #ff314a, #ffd36f, #2f6bff, #ff314a);
  background-size: 220% 100%;
}

body.page-plans .planBox:hover {
  transform: translateY(-10px) scale(1.015);
  border-color: rgba(255,211,111,.72) !important;
  box-shadow: 0 38px 86px rgba(0,0,0,.62), 0 0 58px rgba(214,40,57,.14), 0 0 58px rgba(47,107,255,.12);
}

body.page-plans .planBox:nth-of-type(2):hover,
body.page-plans .planBox:nth-child(2):hover {
  transform: translateY(-10px) scale(1.06);
}

body.page-plans .planBox h2,
body.page-plans .planBox .h3 {
  font-size: 30px !important;
  text-shadow: 0 12px 30px rgba(0,0,0,.40);
}

body.page-plans .planBox h3,
body.page-plans .planBox .h1 {
  font-size: clamp(42px, 4.5vw, 58px) !important;
  color: #fff !important;
  text-shadow: 0 0 26px rgba(255,255,255,.12), 0 14px 36px rgba(0,0,0,.50);
}

body.page-plans .planBox strong {
  color: #8cffaa !important;
  font-weight: 900 !important;
}

body.page-plans .planBox .btn,
body.page-plans .continueBTN {
  min-height: 52px;
  font-size: 16px !important;
  background: linear-gradient(135deg, #ff314a, #c2182c 58%, #8c101e) !important;
  box-shadow: 0 20px 44px rgba(255,49,74,.34), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

body.page-plans .planBox .btn:after,
body.page-plans .continueBTN:after {
  content: "  >";
  font-weight: 900;
}

body.page-plans .planBox p:last-child {
  color: rgba(255,255,255,.48) !important;
  font-size: 13px;
  letter-spacing: 0;
}

body.page-plans footer,
body.page-plans .footer,
body.page-plans #footer {
  background: linear-gradient(180deg, rgba(4,6,10,.86), #010101) !important;
}

@media (max-width: 991px) {
  body.page-plans .planBox:nth-of-type(2),
  body.page-plans .planBox:nth-child(2) {
    transform: none;
  }

  body.page-plans .planBox:nth-of-type(2):hover,
  body.page-plans .planBox:nth-child(2):hover,
  body.page-plans .planBox:hover {
    transform: translateY(-5px);
  }
}