/* =========================================================
   ENOFLIX PUBLIC PORTAL
   File: assets/css/enoflix-portal.css
   Purpose:
   - Public streaming portal
   - Hero layout
   - Spotlight trailer cards
   - Access lock modal
   - Trailer preview modal
   - Cookie banner
   - Full responsive device pack
========================================================= */

/* =========================================================
   01. ROOT VARIABLES
========================================================= */

:root{
  --enoflix-portal-bg: #041931;
  --enoflix-portal-bg-deep: #020c19;
  --enoflix-portal-bg-soft: #072643;
  --enoflix-portal-card: #0b2c4d;
  --enoflix-portal-card-2: #061b33;
  --enoflix-portal-border: rgba(255,255,255,.10);

  --enoflix-portal-text: #ffffff;
  --enoflix-portal-muted: #9bb6d4;
  --enoflix-portal-muted-2: #708fac;

  --enoflix-portal-blue: #0084ff;
  --enoflix-portal-blue-2: #005eff;
  --enoflix-portal-cyan: #15bccf;
  --enoflix-portal-gold: #ffa900;
  --enoflix-portal-gold-2: #ffac00;
  --enoflix-portal-green: #10b981;
  --enoflix-portal-red: #ff4d6d;

  --enoflix-portal-gradient: linear-gradient(116.85deg, #ffa900 0%, #0084ff 100%);
  --enoflix-portal-gradient-blue: linear-gradient(135deg, #005eff 0%, #00d4ff 100%);
  --enoflix-portal-gradient-gold: linear-gradient(135deg, #ffa900 0%, #ff6d00 100%);

  --enoflix-portal-radius: 22px;
  --enoflix-portal-shadow: 0 24px 70px rgba(0,0,0,.32);

  --enoflix-portal-font: "EnoFlix Sans", "EnoFlix Core", "Inter", "Poppins", "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --enoflix-portal-hero-card-x: 40px;
  --enoflix-portal-hero-card-y: 10px;
  --enoflix-portal-slider-x: 0px;
  --enoflix-portal-slider-y: 0px;
}

/* =========================================================
   02. BASE RESET
========================================================= */

*{
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  background: var(--enoflix-portal-bg-deep);
  color: var(--enoflix-portal-text);
  font-family: var(--enoflix-portal-font);
  overflow-x: hidden;
}

body.enoflix-lock-open,
body.enoflix-trailer-open{
  overflow: hidden;
}

a{
  color: inherit;
  text-decoration: none;
}

a:hover{
  color: inherit;
}

img,
video{
  max-width: 100%;
}

button{
  font-family: inherit;
  cursor: pointer;
}

.enoflix-portal{
  min-height: 100vh;
  background:
    radial-gradient(circle at 0 0, rgba(0,132,255,.28), transparent 34%),
    radial-gradient(circle at 100% 10%, rgba(255,169,0,.14), transparent 26%),
    var(--enoflix-portal-bg-deep);
}

.enoflix-portal-container{
  width: min(100% - 42px, 1280px);
  margin-inline: auto;
}

/* =========================================================
   03. ICONS FROM CSS
========================================================= */

.enoflix-css-icon::before,
.enoflix-access-lock__close::before,
.enoflix-trailer-modal__close::before{
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
  font-weight: 900;
  line-height: 1;
}

.enoflix-spotlight-lock::before,
.enoflix-content-lock::before,
.enoflix-access-lock__icon::before{
  content: none;
}

.enoflix-spotlight-lock i,
.enoflix-content-lock i,
.enoflix-access-lock__icon i{
  font-size: 13px;
  line-height: 1;
}

.enoflix-access-lock__icon i{
  font-size: 28px;
}

.enoflix-access-lock__close::before,
.enoflix-trailer-modal__close::before{
  content: "\f00d";
}

.enoflix-portal-btn--watch::before{
  content: "\f04b";
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .86em;
}

/* =========================================================
   04. HEADER / NAVIGATION
========================================================= */

.enoflix-portal-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  padding: 18px 0;
  background:
    linear-gradient(180deg, rgba(2,12,25,.88), rgba(2,12,25,.62), rgba(2,12,25,.08));
  transition:
    background .22s ease,
    box-shadow .22s ease,
    padding .22s ease;
}

.enoflix-portal-header.is-scrolled{
  background: rgba(2,12,25,.96);
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
}

.enoflix-portal-header .enoflix-portal-container{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.enoflix-portal-logo{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 138px;
  color: #fff;
  flex: 0 0 auto;
}

.enoflix-portal-logo__img{
  display: block;
  width: auto;
  max-width: 148px;
  height: 44px;
  object-fit: contain;
}

.enoflix-portal-logo__img--dark{
  display: none;
}

.enoflix-portal-header.is-scrolled .enoflix-portal-logo__img--light{
  display: none;
}

.enoflix-portal-header.is-scrolled .enoflix-portal-logo__img--dark{
  display: block;
}

.enoflix-portal-nav{
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)),
    rgba(7,38,67,.86);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.enoflix-portal-navdrop{
  position: static;
}

.enoflix-portal-nav > a,
.enoflix-portal-navdrop > button{
  min-height: 42px;
  padding: 0 17px;
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  border: 0;
  outline: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -.01em;
  transition:
    color .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.enoflix-portal-navdrop > button i{
  font-size: 12px;
  transition: transform .22s ease;
}

.enoflix-portal-nav > a:hover,
.enoflix-portal-nav > a.is-active,
.enoflix-portal-nav > a:focus,
.enoflix-portal-nav > a:focus-visible,
.enoflix-portal-navdrop:hover > button,
.enoflix-portal-navdrop:focus-within > button{
  color: #fff;
  background: rgba(255,255,255,.12);
}

.enoflix-portal-nav > a:focus-visible,
.enoflix-portal-navdrop > button:focus-visible{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.22),
    0 0 0 5px rgba(0,132,255,.22);
}

.enoflix-portal-navdrop:hover > button i,
.enoflix-portal-navdrop:focus-within > button i{
  transform: rotate(180deg);
}

.enoflix-portal-navdrop::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: min(560px, calc(100vw - 48px));
  height: 20px;
  transform: translateX(-50%);
  pointer-events: none;
}

.enoflix-portal-navdrop:hover::after,
.enoflix-portal-navdrop:focus-within::after{
  pointer-events: auto;
}

.enoflix-portal-mega{
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  width: min(560px, calc(100vw - 48px));
  max-height: 420px;
  overflow: hidden;
  padding: 28px 30px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 18%, rgba(0,132,255,.12), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,251,255,.96));
  color: #061b33;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 34px;
  box-shadow:
    0 28px 70px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.92);
  transform: translateX(-50%) translateY(14px) scale(.985);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .22s ease,
    visibility .22s ease,
    transform .22s ease;
}

.enoflix-portal-mega::before{
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 22px;
  height: 22px;
  background: rgba(255,255,255,.98);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 5px;
  box-shadow: -1px -1px 0 rgba(255,255,255,.40);
}

.enoflix-portal-mega::after{
  content: "";
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 50%;
  width: 1px;
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(4,25,49,.10),
      rgba(0,132,255,.18),
      rgba(4,25,49,.10),
      transparent
    );
  transform: translateX(-50%);
}

.enoflix-portal-navdrop:hover .enoflix-portal-mega,
.enoflix-portal-navdrop:focus-within .enoflix-portal-mega{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.enoflix-portal-mega__col{
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
}

.enoflix-portal-mega__col h6{
  margin: 0 0 10px;
  color: #061b33;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: -.02em;
}

.enoflix-portal-mega__col a{
  min-height: 46px;
  padding: 0 12px;
  border-radius: 15px;
  outline: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #061b33;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.02em;
  transition:
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.enoflix-portal-mega__col a:hover,
.enoflix-portal-mega__col a:focus,
.enoflix-portal-mega__col a:focus-visible{
  background: rgba(0,132,255,.08);
  color: #005eff;
  transform: translateX(3px);
}

.enoflix-portal-mega__col a:focus-visible{
  box-shadow:
    0 0 0 2px rgba(0,132,255,.18),
    inset 0 0 0 1px rgba(0,132,255,.18);
}

.enoflix-portal-mega__col a i{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(0,132,255,.08);
  color: #0084ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex: 0 0 34px;
  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.enoflix-portal-mega__col a:hover i,
.enoflix-portal-mega__col a:focus-visible i{
  background: var(--enoflix-portal-gradient-blue);
  color: #fff;
  transform: scale(1.04);
}

.enoflix-portal-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

/* =========================================================
   05. BUTTONS
========================================================= */

.enoflix-portal-btn{
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transform: translateZ(0);
  transition:
    transform .22s ease,
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    opacity .22s ease;
}

.enoflix-portal-btn--primary,
.enoflix-cookie__btn--accept{
  background: var(--enoflix-portal-gradient-blue);
  color: #fff;
  border-color: rgba(255,255,255,.10);
}

.enoflix-portal-btn--primary:hover,
.enoflix-cookie__btn--accept:hover{
  background: var(--enoflix-portal-gradient-gold);
  color: #fff;
  transform: translateY(-2px);
}

.enoflix-portal-btn--ghost{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}

.enoflix-portal-btn--ghost:hover{
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.28);
  color: #fff;
  transform: translateY(-2px);
}

.enoflix-portal-btn--light{
  background: #fff;
  border-color: rgba(255,255,255,.85);
  color: #041931;
}

.enoflix-portal-btn--light:hover{
  background: #f4f9ff;
  color: #041931;
  transform: translateY(-2px);
}

.enoflix-portal-btn--dark{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: #fff;
}

.enoflix-portal-btn--dark:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
  color: #fff;
  transform: translateY(-2px);
}

.enoflix-portal-btn i{
  font-size: .95em;
  line-height: 1;
}

.enoflix-portal-btn:active,
.enoflix-cookie__btn:active{
  transform: translateY(0) scale(.99);
}

.enoflix-portal-btn:focus-visible,
.enoflix-cookie__btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 3px;
  box-shadow: none;
}

.enoflix-portal-btn:disabled,
.enoflix-cookie__btn:disabled{
  opacity: .55;
  pointer-events: none;
}

.enoflix-portal-hero__buttons .enoflix-portal-btn{
  min-height: 54px;
  padding: 0 28px;
  font-size: 16px;
}

.enoflix-portal-actions .enoflix-portal-btn{
  min-height: 44px;
  padding: 0 20px;
  font-size: 14px;
}

/* =========================================================
   06. HERO SECTION
========================================================= */

.enoflix-portal-hero{
  min-height: 820px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background:
    linear-gradient(135deg, #d9f0ff 0%, #d7f7f2 45%, #eff8ff 100%);
  color: #041931;
}

.enoflix-portal-hero::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 180px;
  background: linear-gradient(180deg, transparent, var(--enoflix-portal-bg-deep));
  pointer-events: none;
  z-index: 3;
}

.enoflix-portal-hero__orb{
  position: absolute;
  border-radius: 999px;
  filter: none;
  opacity: .7;
}

.enoflix-portal-hero__orb--one{
  width: 420px;
  height: 420px;
  left: -160px;
  top: 120px;
  background: rgba(0,132,255,.16);
}

.enoflix-portal-hero__orb--two{
  width: 520px;
  height: 520px;
  right: -160px;
  bottom: 90px;
  background: rgba(255,169,0,.12);
}

.enoflix-portal-hero__grid{
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: 40px;
  padding: 132px 0 82px;
}

.enoflix-portal-hero__content{
  max-width: 585px;
}

.enoflix-portal-badge{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(0,132,255,.18);
  color: #005eff;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 24px;
}

.enoflix-portal-hero h1{
  margin: 0;
  color: #0084ff;
  font-size: clamp(48px, 5vw, 82px);
  line-height: .98;
  font-weight: 950;
  letter-spacing: -.065em;
}

.enoflix-portal-hero p{
  margin: 24px 0 0;
  max-width: 530px;
  color: #187cc3;
  font-size: 20px;
  line-height: 1.55;
  font-weight: 600;
}

.enoflix-portal-hero__buttons{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.enoflix-portal-hero__meta{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px;
  color: #2787c5;
  font-size: 14px;
  font-weight: 900;
}

.enoflix-portal-hero__meta span{
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.enoflix-portal-hero__meta i{
  color: var(--enoflix-portal-gold);
}

.enoflix-portal-hero__visual{
  position: relative;
  min-height: 560px;
}

.enoflix-portal-visual-card{
  position: absolute;
  overflow: hidden;
  background: #071f38;
  box-shadow: 0 28px 70px rgba(0,0,0,.22);
}

.enoflix-portal-visual-card--main{
  right: var(--enoflix-portal-hero-card-x);
  top: var(--enoflix-portal-hero-card-y);
  width: min(520px, 78%);
  aspect-ratio: 4 / 4.9;
  border-radius: 44px;
  transform: rotate(2deg);
}

.enoflix-portal-visual-card--main img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.enoflix-portal-visual-card__shade{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 30%, rgba(4,25,49,.78)),
    radial-gradient(circle at center, rgba(0,132,255,.10), transparent 52%);
}

.enoflix-portal-play-glow{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: #0084ff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  font-size: 42px;
  box-shadow: none;
  animation: enoflixPlayPulse 2.4s ease-in-out infinite;
}

/* =========================================================
   HERO FLOATING PILLS
========================================================= */

.enoflix-portal-floating-pill{
  --enoflix-pill-px: 18px;
  --enoflix-pill-py: 0px;
  --enoflix-pill-height: 52px;
  --enoflix-pill-gap: 10px;
  --enoflix-pill-font: 14px;

  position: absolute;
  z-index: 4;
  min-height: var(--enoflix-pill-height);
  padding: var(--enoflix-pill-py) var(--enoflix-pill-px);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: var(--enoflix-pill-gap);
  color: #fff;
  background: rgba(0,132,255,.82);
  border: 1px solid rgba(255,255,255,.24);
  font-size: var(--enoflix-pill-font);
  font-weight: 900;
  line-height: 1;
  box-shadow: none;
  animation: enoflixFloatPill 4.8s ease-in-out infinite;
}

.enoflix-portal-floating-pill i{
  font-size: .95em;
  line-height: 1;
}

.enoflix-portal-floating-pill--one{
  left: 0;
  top: 160px;
}

.enoflix-portal-floating-pill--two{
  right: -20px;
  bottom: 140px;
  background: rgba(255,169,0,.90);
  animation-delay: 1.2s;
}

.enoflix-portal-mini-poster{
  position: absolute;
  z-index: 3;
  width: 142px;
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  overflow: hidden;
  border: 8px solid rgba(255,255,255,.78);
  box-shadow: 0 22px 48px rgba(0,0,0,.20);
  animation: enoflixFloatPoster 5.8s ease-in-out infinite;
}

.enoflix-portal-mini-poster img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.enoflix-portal-mini-poster--one{
  left: 70px;
  bottom: 58px;
  transform: rotate(-8deg);
}

.enoflix-portal-mini-poster--two{
  right: 0;
  top: 96px;
  transform: rotate(8deg);
  animation-name: enoflixFloatPosterTwo;
  animation-delay: 1.4s;
}

@keyframes enoflixFloatPill{
  0%, 100%{
    transform: translate3d(0,0,0);
  }
  50%{
    transform: translate3d(0,-14px,0);
  }
}

@keyframes enoflixFloatPoster{
  0%, 100%{
    transform: translate3d(0,0,0) rotate(-8deg);
  }
  50%{
    transform: translate3d(0,-16px,0) rotate(-5deg);
  }
}

@keyframes enoflixFloatPosterTwo{
  0%, 100%{
    transform: translate3d(0,0,0) rotate(8deg);
  }
  50%{
    transform: translate3d(0,-16px,0) rotate(5deg);
  }
}

@keyframes enoflixPlayPulse{
  0%, 100%{
    transform: translate(-50%, -50%) scale(1);
  }
  50%{
    transform: translate(-50%, -50%) scale(1.06);
  }
}

/* =========================================================
   07. GENERAL SECTIONS
========================================================= */

.enoflix-portal-section{
  padding: 105px 0;
  background:
    radial-gradient(circle at 10% 0, rgba(0,132,255,.10), transparent 24%),
    var(--enoflix-portal-bg-deep);
}

.enoflix-portal-section--soft{
  background:
    radial-gradient(circle at 95% 10%, rgba(255,169,0,.10), transparent 24%),
    #061528;
}

.enoflix-portal-section-head{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 34px;
  margin-bottom: 42px;
}

.enoflix-portal-section-head--inline{
  align-items: center;
}

.enoflix-portal-eyebrow{
  display: inline-block;
  margin-bottom: 12px;
  color: var(--enoflix-portal-gold);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.enoflix-portal-section-head h2,
.enoflix-portal-live__content h2,
.enoflix-portal-cta h2{
  margin: 0;
  max-width: 760px;
  color: #fff;
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 1.03;
  font-weight: 950;
  letter-spacing: -.055em;
}

.enoflix-portal-section-head p{
  margin: 0;
  max-width: 540px;
  color: var(--enoflix-portal-muted);
  font-size: 17px;
  line-height: 1.7;
}

.enoflix-portal-mini-link{
  min-height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  background: var(--enoflix-portal-gradient-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 950;
  box-shadow: none;
  transition: .22s ease;
}

.enoflix-portal-mini-link:hover{
  background: var(--enoflix-portal-gradient-gold);
}

/* =========================================================
   08. SPOTLIGHT SLIDER
========================================================= */

.enoflix-portal-spotlight{
  position: relative;
  padding: 76px 0 82px;
  background:
    linear-gradient(180deg, #020c19 0%, #041931 100%);
  overflow: hidden;
}

.enoflix-portal-spotlight::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/hero/bg.jpg") center / cover no-repeat;
  opacity: .055;
}

.enoflix-portal-spotlight::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2,12,25,.30), rgba(2,12,25,.82)),
    rgba(2,12,25,.18);
  pointer-events: none;
}

.enoflix-portal-spotlight .enoflix-portal-container{
  position: relative;
  z-index: 3;
  width: min(100% - 56px, 1480px);
}

.enoflix-spotlight-swiper{
  position: relative;
  overflow: hidden;
  padding: 4px 2px 14px;
  transform: translate(var(--enoflix-portal-slider-x), var(--enoflix-portal-slider-y));
}

.enoflix-spotlight-swiper .swiper-wrapper{
  align-items: stretch;
}

.enoflix-spotlight-swiper .swiper-slide{
  height: auto;
  width: 360px;
  flex: 0 0 360px;
}

.enoflix-spotlight-swiper.swiper-initialized .swiper-slide{
  width: auto;
  flex: 0 0 auto;
}

.enoflix-spotlight-card{
  position: relative;
  display: block;
  width: 100%;
  height: 300px;
  border-radius: 22px;
  overflow: hidden;
  background: #061b33;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  transform: translateZ(0);
}

.enoflix-spotlight-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease;
}

.enoflix-spotlight-card:hover img{
  transform: scale(1.07);
}

.enoflix-spotlight-card::after{
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 6;
  width: 42px;
  height: 42px;
  background: url("../img/logo/favicon.png") center / contain no-repeat;
  opacity: .72;
  pointer-events: none;
}

.enoflix-spotlight-quality{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  min-width: 34px;
  min-height: 27px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--enoflix-portal-gold);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 950;
  box-shadow: none;
}

.enoflix-spotlight-lock{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(2,12,25,.82);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.enoflix-spotlight-overlay{
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(2,12,25,0) 18%, rgba(2,12,25,.58) 60%, rgba(2,12,25,.98) 100%);
}

.enoflix-spotlight-play{
  width: 48px;
  height: 48px;
  margin: 0 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #0084ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px) scale(.92);
  transition: .25s ease;
}

.enoflix-spotlight-card:hover .enoflix-spotlight-play{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.enoflix-spotlight-overlay h3{
  margin: 0 0 7px;
  color: #fff;
  font-size: 18px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.enoflix-spotlight-overlay p{
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 9px;
  color: var(--enoflix-portal-muted);
  font-size: 12px;
  font-weight: 800;
}

.enoflix-spotlight-overlay p span:last-child{
  color: var(--enoflix-portal-gold);
}

.enoflix-spotlight-overlay div{
  color: var(--enoflix-portal-gold);
  font-size: 12px;
  font-weight: 950;
}

.enoflix-portal-spotlight-actions{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.enoflix-swiper-btn{
  position: relative;
  z-index: 8;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 0;
  border-radius: 999px;
  background: var(--enoflix-portal-blue);
  color: #fff;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: .22s ease;
}

.enoflix-swiper-btn:hover{
  background: var(--enoflix-portal-gold);
  transform: translateY(-2px);
}

.enoflix-swiper-btn--prev,
.enoflix-swiper-btn--next{
  left: auto;
  right: auto;
}

/* =========================================================
   09. CATEGORIES
========================================================= */

.enoflix-portal-category-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.enoflix-portal-category{
  position: relative;
  min-height: 285px;
  padding: 18px;
  border-radius: var(--enoflix-portal-radius);
  overflow: hidden;
  background: rgba(7,38,67,.72);
  border: 1px solid var(--enoflix-portal-border);
  transition: .25s ease;
}

.enoflix-portal-category:hover{
  transform: translateY(-5px);
  border-color: rgba(255,169,0,.45);
  box-shadow: var(--enoflix-portal-shadow);
}

.enoflix-content-lock{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(2,12,25,.82);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.enoflix-portal-category__poster{
  height: 196px;
  border-radius: 17px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  position: relative;
}

.enoflix-portal-category__poster::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(7,38,67,.90));
}

.enoflix-portal-category__poster--one{
  background-image: url("../img/movie/15.jpg");
}

.enoflix-portal-category__poster--two{
  background-image: url("../img/movie/18.jpg");
}

.enoflix-portal-category__poster--three{
  background-image: url("../img/movie/16.jpg");
}

.enoflix-portal-category__poster--four{
  background-image: url("../img/movie/19.jpg");
}

.enoflix-portal-category h3{
  margin: 18px 0 0;
  color: #fff;
  font-size: 20px;
  font-weight: 950;
}

.enoflix-portal-category > span:last-child{
  position: absolute;
  right: 22px;
  bottom: 20px;
  color: var(--enoflix-portal-gold);
}

/* =========================================================
   10. FEATURES / DEVICES
========================================================= */

.enoflix-portal-feature-grid,
.enoflix-portal-device-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.enoflix-portal-feature-card,
.enoflix-portal-device{
  min-height: 230px;
  padding: 30px;
  border-radius: var(--enoflix-portal-radius);
  background:
    radial-gradient(circle at top right, rgba(0,132,255,.18), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    rgba(7,38,67,.72);
  border: 1px solid var(--enoflix-portal-border);
  transition: .24s ease;
}

.enoflix-portal-feature-card:hover,
.enoflix-portal-device:hover{
  transform: translateY(-5px);
  border-color: rgba(0,132,255,.46);
  box-shadow: var(--enoflix-portal-shadow);
}

.enoflix-portal-feature-card > span,
.enoflix-portal-device > span{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--enoflix-portal-gradient-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 24px;
  box-shadow: none;
}

.enoflix-portal-feature-card h3,
.enoflix-portal-device h3{
  margin: 0 0 13px;
  color: #fff;
  font-size: 22px;
  font-weight: 950;
}

.enoflix-portal-feature-card p,
.enoflix-portal-device p{
  margin: 0;
  color: var(--enoflix-portal-muted);
  line-height: 1.7;
}

/* =========================================================
   11. LIVE EVENTS SECTION
========================================================= */

.enoflix-portal-live{
  padding: 105px 0;
  background:
    radial-gradient(circle at 80% 50%, rgba(0,132,255,.18), transparent 32%),
    linear-gradient(180deg, #041931, #020c19);
}

.enoflix-portal-live__grid{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 34px;
  align-items: center;
}

.enoflix-portal-live__content p{
  margin: 22px 0 30px;
  max-width: 560px;
  color: var(--enoflix-portal-muted);
  font-size: 17px;
  line-height: 1.75;
}

.enoflix-portal-live__panel{
  display: grid;
  gap: 18px;
}

.enoflix-portal-live-card{
  padding: 16px;
  border-radius: 24px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  align-items: center;
  background: rgba(7,38,67,.72);
  border: 1px solid var(--enoflix-portal-border);
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
}

.enoflix-portal-live-card img{
  width: 150px;
  height: 100px;
  border-radius: 18px;
  object-fit: cover;
}

.enoflix-portal-live-card span{
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--enoflix-portal-gold);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.enoflix-portal-live-card h3{
  margin: 0 0 5px;
  color: #fff;
  font-size: 22px;
  font-weight: 950;
}

.enoflix-portal-live-card p{
  margin: 0;
  color: var(--enoflix-portal-muted);
}

/* =========================================================
   12. PRICING
========================================================= */

.enoflix-portal-pricing-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.enoflix-portal-plan{
  position: relative;
  padding: 32px;
  border-radius: var(--enoflix-portal-radius);
  background: rgba(7,38,67,.72);
  border: 1px solid var(--enoflix-portal-border);
  overflow: hidden;
}

.enoflix-portal-plan::before{
  content: "";
  position: absolute;
  right: -50px;
  top: -60px;
  width: 190px;
  height: 190px;
  background: radial-gradient(circle, rgba(0,132,255,.28), transparent 64%);
}

.enoflix-portal-plan--active{
  border-color: rgba(255,169,0,.56);
  box-shadow: 0 24px 62px rgba(255,169,0,.12);
}

.enoflix-portal-plan__tag{
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 2;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--enoflix-portal-gradient-gold);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.enoflix-portal-plan h3{
  margin: 0 0 14px;
  color: #fff;
  font-size: 25px;
  font-weight: 950;
}

.enoflix-portal-plan p{
  margin: 0 0 26px;
  color: var(--enoflix-portal-muted);
  line-height: 1.7;
}

.enoflix-portal-price{
  margin-bottom: 23px;
  color: #fff;
  font-size: 42px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.055em;
}

.enoflix-portal-price span{
  margin-left: 4px;
  color: var(--enoflix-portal-muted);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.enoflix-portal-plan ul{
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 12px;
  color: var(--enoflix-portal-muted);
}

.enoflix-portal-plan li{
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
}

.enoflix-portal-plan li i{
  color: var(--enoflix-portal-gold);
}

.enoflix-portal-plan .enoflix-portal-btn{
  width: 100%;
}

/* =========================================================
   13. FAQ
========================================================= */

.enoflix-portal-faq-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 26px;
}

.enoflix-portal-faq{
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.enoflix-portal-faq summary{
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  color: #fff;
  font-size: 22px;
  font-weight: 950;
}

.enoflix-portal-faq summary::-webkit-details-marker{
  display: none;
}

.enoflix-portal-faq summary::after{
  content: "+";
  margin-left: auto;
  color: var(--enoflix-portal-gold);
  font-size: 30px;
  line-height: 1;
  font-weight: 950;
}

.enoflix-portal-faq[open] summary::after{
  content: "−";
}

.enoflix-portal-faq summary span{
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.enoflix-portal-faq p{
  margin: 16px 0 0 76px;
  color: var(--enoflix-portal-muted);
  line-height: 1.7;
}

/* =========================================================
   14. CTA
========================================================= */

.enoflix-portal-cta{
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #020c19;
}

.enoflix-portal-cta__bg{
  position: absolute;
  inset: 0;
  background: url("../img/hero/bg.jpg") center / cover no-repeat;
  opacity: .38;
}

.enoflix-portal-cta__shade{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #020c19 0%, rgba(2,12,25,.86) 48%, rgba(2,12,25,.30) 100%),
    linear-gradient(180deg, #020c19 0%, transparent 30%, #020c19 100%);
}

.enoflix-portal-cta__content{
  position: relative;
  z-index: 2;
  max-width: 680px;
}

.enoflix-portal-cta p{
  margin: 18px 0 30px;
  color: var(--enoflix-portal-muted);
  font-size: 18px;
  line-height: 1.7;
}

/* =========================================================
   15. FOOTER
========================================================= */

.enoflix-portal-footer{
  padding: 34px 0;
  background: #020814;
  border-top: 1px solid rgba(255,255,255,.08);
}

.enoflix-portal-footer__top,
.enoflix-portal-footer__bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.enoflix-portal-footer__top{
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.enoflix-portal-footer__bottom{
  padding-top: 24px;
}

.enoflix-portal-footer__links,
.enoflix-portal-footer__bottom div{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.enoflix-portal-footer a{
  color: var(--enoflix-portal-muted);
  transition: .2s ease;
}

.enoflix-portal-footer a:hover{
  color: #fff;
}

.enoflix-portal-footer p{
  margin: 0;
  color: var(--enoflix-portal-muted);
}

/* =========================================================
   16. TRAILER PREVIEW MODAL
========================================================= */

.enoflix-trailer-modal{
  position: fixed;
  inset: 0;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.enoflix-trailer-modal[hidden]{
  display: none;
}

.enoflix-trailer-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(2,12,25,.82);
}

.enoflix-trailer-modal__card{
  position: relative;
  z-index: 2;
  width: min(94vw, 720px);
  max-height: calc(100vh - 36px);
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at bottom left, rgba(0,132,255,.16), transparent 34%),
    #061b33;
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 34px 100px rgba(0,0,0,.45);
}

.enoflix-trailer-modal__close{
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(2,12,25,.84);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: none;
  transition: .2s ease;
}

.enoflix-trailer-modal__close:hover{
  background: rgba(255,169,0,.95);
  transform: scale(1.04);
}

.enoflix-trailer-modal__media{
  position: relative;
  background: #020c19;
  aspect-ratio: 16 / 8.4;
  max-height: 390px;
  overflow: hidden;
}

.enoflix-trailer-modal__media::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(2,12,25,.92));
  pointer-events: none;
}

.enoflix-preview-enoplayer-safe,
.enoflix-trailer-modal__media .enoplayer-container{
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.enoflix-trailer-modal__media .enoplayer-container{
  border-radius: 0;
  overflow: hidden;
}

.enoflix-trailer-modal__body{
  padding: 20px 24px 24px;
  background: #061b33;
}

.enoflix-trailer-modal__tags{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 13px;
}

.enoflix-trailer-modal__tags span{
  min-height: 31px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.enoflix-trailer-modal__tags span:first-child{
  background: var(--enoflix-portal-gold);
  color: #fff;
}

.enoflix-trailer-modal__tags i{
  color: var(--enoflix-portal-gold);
}

.enoflix-trailer-modal__body h3{
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.02;
  font-weight: 950;
  letter-spacing: -.05em;
}

.enoflix-trailer-modal__body p{
  margin: 0 0 20px;
  color: var(--enoflix-portal-muted);
  font-size: 15px;
  font-weight: 800;
}

.enoflix-trailer-modal__actions{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.enoflix-trailer-modal__actions .enoflix-portal-btn{
  min-height: 48px;
  padding: 0 22px;
  font-size: 14px;
}

/* =========================================================
   17. ACCESS LOCK MODAL
========================================================= */

.enoflix-access-lock{
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.enoflix-access-lock[hidden]{
  display: none;
}

.enoflix-access-lock__overlay{
  position: absolute;
  inset: 0;
  background: rgba(2,12,25,.78);
}

.enoflix-access-lock__card{
  position: relative;
  z-index: 2;
  width: min(100%, 460px);
  padding: 34px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(0,132,255,.22), transparent 34%),
    rgba(6,27,51,.96);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 32px 90px rgba(0,0,0,.38);
  text-align: center;
}

.enoflix-access-lock__close{
  position: absolute;
  right: 16px;
  top: 16px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.enoflix-access-lock__icon{
  width: 74px;
  height: 74px;
  margin: 0 auto 20px;
  border-radius: 22px;
  background: var(--enoflix-portal-gradient-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
}

.enoflix-access-lock__card h3{
  margin: 0 0 12px;
  color: #fff;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: -.04em;
}

.enoflix-access-lock__card p{
  margin: 0 auto 26px;
  color: var(--enoflix-portal-muted);
  line-height: 1.65;
}

.enoflix-access-lock__actions{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================================================
   18. COOKIE BANNER
========================================================= */

.enoflix-cookie{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 22px;
  z-index: 170;
  padding: 0 20px;
}

.enoflix-cookie[hidden]{
  display: none;
}

.enoflix-cookie__box{
  width: min(100%, 1040px);
  margin-inline: auto;
  padding: 18px;
  border-radius: 24px;
  background: rgba(2,12,25,.96);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 80px rgba(0,0,0,.36);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}

.enoflix-cookie__icon{
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(255,169,0,.14);
  color: var(--enoflix-portal-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
}

.enoflix-cookie__content h4{
  margin: 0 0 5px;
  color: #fff;
  font-size: 18px;
  font-weight: 950;
}

.enoflix-cookie__content p{
  margin: 0;
  color: var(--enoflix-portal-muted);
  line-height: 1.55;
  font-size: 14px;
}

.enoflix-cookie__content a{
  color: var(--enoflix-portal-gold);
  font-weight: 900;
}

.enoflix-cookie__actions{
  display: flex;
  align-items: center;
  gap: 8px;
}

.enoflix-cookie__btn{
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}

.enoflix-cookie__btn--decline{
  background: rgba(255,255,255,.08);
}

/* =========================================================
   19. RESPONSIVE
========================================================= */

@media (max-width: 1199px){
  .enoflix-portal-header .enoflix-portal-container{
    gap: 16px;
  }

  .enoflix-portal-logo{
    min-width: 120px;
  }

  .enoflix-portal-logo__img{
    max-width: 128px;
    height: 40px;
  }

  .enoflix-portal-nav{
    gap: 5px;
    padding: 6px;
  }

  .enoflix-portal-nav > a,
  .enoflix-portal-navdrop > button{
    min-height: 39px;
    padding: 0 13px;
    font-size: 13px;
  }

  .enoflix-portal-mega{
    width: 510px;
    padding: 25px 27px;
    gap: 28px;
  }

  .enoflix-portal-navdrop::after{
    width: 510px;
  }

  .enoflix-portal-mega__col a{
    min-height: 42px;
    font-size: 15px;
  }

  .enoflix-portal-actions .enoflix-portal-btn{
    min-height: 42px;
    padding: 0 17px;
    font-size: 13px;
  }

  .enoflix-portal-hero{
    min-height: 720px;
  }

  .enoflix-portal-hero h1{
    font-size: clamp(46px, 5vw, 68px);
  }

  .enoflix-spotlight-card{
    height: 300px;
  }
}

@media (max-width: 1023px){
  .enoflix-portal-hero{
    min-height: auto;
  }

  .enoflix-portal-hero__grid{
    grid-template-columns: 1fr;
    padding-top: 118px;
    padding-bottom: 70px;
    gap: 36px;
  }

  .enoflix-portal-hero__content{
    max-width: 720px;
    text-align: center;
    margin-inline: auto;
  }

  .enoflix-portal-hero p,
  .enoflix-portal-live__content p{
    margin-inline: auto;
  }

  .enoflix-portal-hero__buttons,
  .enoflix-portal-hero__meta{
    justify-content: center;
  }

  .enoflix-portal-hero__visual{
    min-height: 500px;
  }

  .enoflix-portal-visual-card--main{
    right: 50%;
    top: 0;
    width: min(420px, 72%);
    transform: translateX(50%) rotate(2deg);
  }

  .enoflix-portal-section-head{
    align-items: start;
    flex-direction: column;
  }

  .enoflix-portal-category-grid,
  .enoflix-portal-feature-grid,
  .enoflix-portal-device-grid,
  .enoflix-portal-pricing-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .enoflix-portal-live__grid,
  .enoflix-portal-faq-grid{
    grid-template-columns: 1fr;
  }

  .enoflix-cookie__box{
    grid-template-columns: 1fr;
  }

  .enoflix-cookie__actions{
    justify-content: flex-start;
  }
}

@media (max-width: 991px){
  .enoflix-portal-nav{
    display: none;
  }

  .enoflix-portal-header{
    padding: 14px 0;
    background: rgba(2,12,25,.96);
  }

  .enoflix-portal-header .enoflix-portal-container{
    width: min(100% - 28px, 1280px);
    gap: 12px;
  }

  .enoflix-portal-logo{
    min-width: auto;
  }

  .enoflix-portal-logo__img{
    max-width: 132px;
    height: 40px;
  }

  .enoflix-portal-actions{
    gap: 8px;
  }

  .enoflix-portal-actions .enoflix-portal-btn{
    min-height: 38px;
    padding: 0 13px;
    font-size: 12px;
  }

  .enoflix-spotlight-card{
    height: 270px;
  }
}

@media (max-width: 767px){
  .enoflix-portal-container{
    width: min(100% - 28px, 1280px);
  }

  .enoflix-portal-logo__img{
    max-width: 126px;
    height: 38px;
  }

  .enoflix-portal-actions{
    gap: 7px;
  }

  .enoflix-portal-actions .enoflix-portal-btn{
    min-height: 38px;
    padding: 0 12px;
    font-size: 12px;
  }

  .enoflix-portal-hero{
    align-items: flex-start;
  }

  .enoflix-portal-hero__grid{
    padding-top: 104px;
    padding-bottom: 64px;
    gap: 28px;
  }

  .enoflix-portal-badge{
    min-height: 34px;
    padding: 0 11px;
    font-size: 10px;
    margin-bottom: 16px;
  }

  .enoflix-portal-hero h1{
    font-size: clamp(36px, 11vw, 46px);
    line-height: .96;
    letter-spacing: -.06em;
  }

  .enoflix-portal-hero p{
    max-width: 360px;
    margin: 18px auto 0;
    font-size: 14px;
    line-height: 1.55;
  }

  .enoflix-portal-hero__buttons{
    gap: 10px;
    margin-top: 26px;
  }

  .enoflix-portal-hero__buttons .enoflix-portal-btn{
    min-height: 46px;
    padding: 0 18px;
    font-size: 13px;
  }

  .enoflix-portal-hero__meta{
    gap: 13px;
    margin-top: 22px;
    font-size: 12px;
  }

  .enoflix-portal-hero__visual{
    min-height: 430px;
    width: 100%;
  }

  .enoflix-portal-visual-card--main{
    width: min(320px, 76vw);
    border-radius: 34px;
  }

  .enoflix-portal-play-glow{
    width: 86px;
    height: 86px;
    font-size: 30px;
  }

  .enoflix-portal-floating-pill{
    --enoflix-pill-px: 12px;
    --enoflix-pill-height: 40px;
    --enoflix-pill-gap: 7px;
    --enoflix-pill-font: 11px;
  }

  .enoflix-portal-floating-pill--one{
    left: 4px;
    top: 112px;
  }

  .enoflix-portal-floating-pill--two{
    right: 2px;
    bottom: 98px;
  }

  .enoflix-portal-mini-poster{
    width: 92px;
    border-width: 6px;
    border-radius: 18px;
  }

  .enoflix-portal-mini-poster--one{
    left: 24px;
    bottom: 76px;
  }

  .enoflix-portal-mini-poster--two{
    right: 22px;
    top: 84px;
  }

  .enoflix-portal-section,
  .enoflix-portal-spotlight,
  .enoflix-portal-live{
    padding: 72px 0;
  }

  .enoflix-portal-category-grid,
  .enoflix-portal-feature-grid,
  .enoflix-portal-device-grid,
  .enoflix-portal-pricing-grid{
    grid-template-columns: 1fr;
  }

  .enoflix-spotlight-swiper .swiper-slide{
    width: 82vw;
    flex-basis: 82vw;
  }

  .enoflix-spotlight-card{
    height: 245px;
  }

  .enoflix-spotlight-card::after{
    right: 14px;
    bottom: 14px;
    width: 34px;
    height: 34px;
    opacity: .68;
  }

  .enoflix-spotlight-overlay{
    padding: 13px;
  }

  .enoflix-spotlight-overlay h3{
    font-size: 14px;
  }

  .enoflix-spotlight-overlay p,
  .enoflix-spotlight-overlay div{
    font-size: 10px;
  }

  .enoflix-portal-section-head--inline{
    flex-direction: column;
    align-items: flex-start;
  }

  .enoflix-portal-spotlight-actions{
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }

  .enoflix-swiper-btn{
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .enoflix-portal-mini-link{
    min-height: 40px;
    padding: 0 14px;
  }

  .enoflix-portal-live-card{
    grid-template-columns: 1fr;
  }

  .enoflix-portal-live-card img{
    width: 100%;
    height: 180px;
  }

  .enoflix-portal-footer__top,
  .enoflix-portal-footer__bottom{
    flex-direction: column;
    align-items: flex-start;
  }

  .enoflix-cookie{
    bottom: 14px;
    padding: 0 14px;
  }

  .enoflix-cookie__actions{
    width: 100%;
  }

  .enoflix-cookie__btn{
    flex: 1;
  }

  .enoflix-trailer-modal__body h3{
    font-size: 25px;
  }

  .enoflix-access-lock__card,
  .enoflix-trailer-modal__body{
    padding: 24px;
  }
}

@media (min-width: 576px) and (max-width: 767px){
  .enoflix-spotlight-swiper .swiper-slide{
    width: 285px;
    flex-basis: 285px;
  }

  .enoflix-spotlight-card{
    height: 255px;
  }
}

@media (min-width: 768px) and (max-width: 991px){
  .enoflix-spotlight-swiper .swiper-slide{
    width: 310px;
    flex-basis: 310px;
  }
}

@media (min-width: 992px){
  .enoflix-spotlight-swiper .swiper-slide{
    width: 350px;
    flex-basis: 350px;
  }
}

@media (min-width: 391px) and (max-width: 430px){
  .enoflix-portal-hero__grid{
    padding-top: 104px;
  }

  .enoflix-portal-hero__visual{
    min-height: 455px;
  }

  .enoflix-portal-visual-card--main{
    width: min(330px, 78vw);
  }

  .enoflix-portal-floating-pill{
    --enoflix-pill-px: 11px;
    --enoflix-pill-height: 39px;
    --enoflix-pill-font: 10.5px;
  }

  .enoflix-spotlight-card{
    height: 270px;
  }

  .enoflix-spotlight-overlay h3{
    font-size: 13px;
  }
}

@media (min-width: 360px) and (max-width: 390px){
  .enoflix-portal-hero__grid{
    padding-top: 100px;
  }

  .enoflix-portal-hero h1{
    font-size: 38px;
  }

  .enoflix-portal-hero p{
    font-size: 13px;
  }

  .enoflix-portal-hero__visual{
    min-height: 410px;
  }

  .enoflix-portal-visual-card--main{
    width: min(292px, 76vw);
  }

  .enoflix-portal-floating-pill{
    --enoflix-pill-px: 10px;
    --enoflix-pill-height: 37px;
    --enoflix-pill-gap: 6px;
    --enoflix-pill-font: 10px;
  }

  .enoflix-portal-mini-poster{
    width: 82px;
  }

  .enoflix-portal-mini-poster--one{
    left: 18px;
    bottom: 72px;
  }

  .enoflix-portal-mini-poster--two{
    right: 18px;
    top: 86px;
  }

  .enoflix-spotlight-card{
    height: 250px;
  }

  .enoflix-spotlight-overlay{
    padding: 11px;
  }

  .enoflix-spotlight-overlay h3{
    font-size: 12px;
  }

  .enoflix-spotlight-overlay p,
  .enoflix-spotlight-overlay div{
    font-size: 9px;
  }
}

@media (max-width: 390px){
  .enoflix-portal-logo__img{
    max-width: 118px;
    height: 36px;
  }

  .enoflix-portal-actions .enoflix-portal-btn--ghost{
    display: none;
  }

  .enoflix-portal-actions .enoflix-portal-btn{
    min-height: 38px;
    padding: 0 14px;
  }

  .enoflix-trailer-modal__media{
    max-height: 235px;
  }

  .enoflix-trailer-modal__body h3{
    font-size: 22px;
  }

  .enoflix-trailer-modal__actions{
    flex-direction: column;
    align-items: stretch;
  }

  .enoflix-trailer-modal__actions .enoflix-portal-btn{
    width: 100%;
  }
}

@media (max-width: 359px){
  .enoflix-portal-container{
    width: min(100% - 22px, 1280px);
  }

  .enoflix-portal-logo__img{
    max-width: 108px;
    height: 34px;
  }

  .enoflix-portal-hero__grid{
    padding-top: 98px;
  }

  .enoflix-portal-hero h1{
    font-size: 34px;
  }

  .enoflix-portal-hero p{
    font-size: 12px;
  }

  .enoflix-portal-hero__visual{
    min-height: 360px;
  }

  .enoflix-portal-visual-card--main{
    width: min(260px, 76vw);
    border-radius: 28px;
  }

  .enoflix-portal-play-glow{
    width: 72px;
    height: 72px;
    font-size: 25px;
  }

  .enoflix-portal-floating-pill{
    --enoflix-pill-px: 9px;
    --enoflix-pill-height: 34px;
    --enoflix-pill-gap: 5px;
    --enoflix-pill-font: 9px;
  }

  .enoflix-portal-floating-pill--one{
    left: 0;
    top: 92px;
  }

  .enoflix-portal-floating-pill--two{
    right: 0;
    bottom: 84px;
  }

  .enoflix-portal-mini-poster{
    width: 70px;
    border-width: 5px;
  }

  .enoflix-spotlight-card{
    height: 238px;
  }
}

@media (min-width: 431px) and (max-width: 575px){
  .enoflix-portal-hero__visual{
    min-height: 400px;
  }

  .enoflix-spotlight-card{
    height: 285px;
  }

  .enoflix-spotlight-overlay h3{
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 819px){
  .enoflix-portal-hero__visual{
    min-height: 520px;
  }

  .enoflix-spotlight-card{
    height: 310px;
  }
}

@media (min-width: 820px) and (max-width: 911px){
  .enoflix-portal-hero__visual{
    min-height: 520px;
  }

  .enoflix-spotlight-card{
    height: 315px;
  }
}

@media (min-width: 912px) and (max-width: 1023px){
  .enoflix-portal-hero__visual{
    min-height: 520px;
  }

  .enoflix-spotlight-card{
    height: 320px;
  }
}

@media (width: 1024px) and (max-height: 650px){
  .enoflix-portal-hero{
    min-height: 620px;
  }

  .enoflix-portal-hero__grid{
    grid-template-columns: .9fr 1.1fr;
    padding-top: 105px;
    padding-bottom: 48px;
  }

  .enoflix-portal-hero h1{
    font-size: 48px;
  }

  .enoflix-portal-hero p{
    font-size: 16px;
  }

  .enoflix-portal-hero__visual{
    min-height: 430px;
  }

  .enoflix-portal-visual-card--main{
    width: min(360px, 76%);
  }
}

@media (min-width: 1200px) and (max-height: 850px){
  .enoflix-portal-hero{
    min-height: 680px;
  }

  .enoflix-portal-hero__grid{
    padding-top: 110px;
    padding-bottom: 70px;
  }

  .enoflix-portal-hero h1{
    font-size: 62px;
  }

  .enoflix-portal-hero p{
    font-size: 18px;
  }

  .enoflix-portal-hero__visual{
    min-height: 470px;
  }

  .enoflix-spotlight-card{
    height: 300px;
  }
}

/* =========================================================
   20. TRAILER MODAL RESPONSIVE
========================================================= */

@media (max-width: 1199px){
  .enoflix-trailer-modal__card{
    width: min(94vw, 700px);
  }

  .enoflix-trailer-modal__media{
    max-height: 370px;
  }
}

@media (max-width: 991px){
  .enoflix-trailer-modal__card{
    width: min(94vw, 660px);
  }

  .enoflix-trailer-modal__media{
    aspect-ratio: 16 / 9;
    max-height: 340px;
  }
}

@media (max-width: 575px){
  .enoflix-trailer-modal{
    padding: 12px;
  }

  .enoflix-trailer-modal__card{
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 20px;
  }

  .enoflix-trailer-modal__close{
    right: 12px;
    top: 12px;
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  .enoflix-trailer-modal__media{
    aspect-ratio: 16 / 10;
    max-height: 260px;
  }

  .enoflix-trailer-modal__body{
    padding: 16px;
  }

  .enoflix-trailer-modal__tags{
    gap: 7px;
    margin-bottom: 11px;
  }

  .enoflix-trailer-modal__tags span{
    min-height: 28px;
    padding: 0 10px;
    font-size: 11px;
  }

  .enoflix-trailer-modal__body h3{
    font-size: 24px;
  }

  .enoflix-trailer-modal__body p{
    font-size: 14px;
    margin-bottom: 18px;
  }

  .enoflix-trailer-modal__actions{
    gap: 8px;
  }

  .enoflix-trailer-modal__actions .enoflix-portal-btn{
    flex: 1 1 auto;
    min-height: 46px;
    padding: 0 14px;
    font-size: 13px;
  }

  .enoflix-access-lock__card{
    padding: 24px;
  }
}

/* =========================================================
   21. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}