/* Stream Webmotor – Prémium (Netflix vibe, modern hero) */
/* Fix: mindig normál méret (ne legyen "nagyítva") */
html{ font-size:16px; }

:root{
  --bg0:#070A12;
  --bg1:#0B1020;
  --glass: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.64);
  --brand: #6D5EF5;
  --brand2:#19C2FF;
  --danger:#FF3B6A;
}

.bg-app{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(109,94,245,.35), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(25,194,255,.25), transparent 55%),
    radial-gradient(900px 700px at 70% 90%, rgba(255,59,106,.16), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 55%, #05060C);
  color: var(--text);
  min-height:100vh;
}

.main-wrap{ min-height: calc(100vh - 140px); }

.nav-glass{
  background: linear-gradient(180deg, rgba(10,14,26,.72), rgba(10,14,26,.35));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke);
}

.brand-dot{
  width:10px;height:10px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #fff, var(--brand) 45%, var(--brand2));
  box-shadow: 0 0 18px rgba(109,94,245,.55);
}

.hover-white:hover{ color: rgba(255,255,255,.92)!important; }

.btn-glow{
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn-glow:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
}

.hero{
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius: 22px;
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(1000px 400px at 15% 15%, rgba(109,94,245,.55), transparent 60%),
    radial-gradient(900px 500px at 75% 15%, rgba(25,194,255,.35), transparent 55%),
    radial-gradient(800px 600px at 60% 110%, rgba(255,59,106,.22), transparent 55%);
  filter: blur(12px);
  opacity: .9;
}
.hero > *{ position:relative; z-index:1; }

.hero-title{
  letter-spacing:-.03em;
  line-height:1.05;
  /* Bootstrap display-* helyett normál, reszponzív méret */
  font-size: clamp(1.55rem, 2.2vw, 2.15rem);
}
.hero-sub{ color: var(--muted); }

/* Hero – full premium (featured) */
.hero-premium{
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  overflow: hidden;
  min-height: clamp(360px, 46vh, 520px);
  background: rgba(255,255,255,.02);
}
.hero-compact{ border-radius: 22px; }

.hero-bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05);
}
.hero-bg-fallback{
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(109,94,245,.45), transparent 60%),
    radial-gradient(800px 520px at 70% 10%, rgba(25,194,255,.25), transparent 55%),
    radial-gradient(900px 700px at 55% 110%, rgba(255,59,106,.18), transparent 55%),
    linear-gradient(180deg, rgba(12,15,24,1), rgba(9,11,16,1));
}

.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(9,11,16,.92) 0%, rgba(9,11,16,.74) 56%, rgba(9,11,16,.20) 100%),
    radial-gradient(700px 520px at 12% 18%, rgba(109,94,245,.25), transparent 60%),
    radial-gradient(700px 520px at 70% 12%, rgba(25,194,255,.16), transparent 55%);
}

.hero-content{
  position: relative;
  z-index: 2;
  padding: 22px;
  max-width: 760px;
}
@media (min-width: 992px){
  .hero-content{ padding: 46px; }
}
.hero-premium .hero-title{
  font-size: clamp(1.75rem, 2.9vw, 2.85rem);
}

/* Navbar search (headerben) */
.nav-search{
  width: 100%;
  max-width: 460px;
}
@media (min-width: 992px){
  .nav-search{ width: 420px; }
}


.search-glass{
  background: rgba(0,0,0,.25)!important;
  border: 1px solid rgba(255,255,255,.12)!important;
  color: var(--text)!important;
}
.search-glass::placeholder{ color: rgba(255,255,255,.45); }

.card-film{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card-film:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 26px 80px rgba(0,0,0,.48);
}

.poster{
  aspect-ratio: 2/3;
  background: linear-gradient(135deg, rgba(109,94,245,.35), rgba(25,194,255,.22), rgba(255,59,106,.16));
  position:relative;
}
.poster img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.poster .fallback{
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  padding:14px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.70));
  color: rgba(255,255,255,.95);
  font-weight:600;
}

/* Korhatár jelzés a poszteren (modern karika) */
.age-badge{
  position:absolute;
  top:10px; left:10px;
  width:36px; height:36px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.2px;
  line-height:1;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.55);
  color: rgba(255,255,255,.95);
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
}
.age-badge.age-12{
  border-color: rgba(255,193,7,.95);
  background: rgba(255,193,7,.14);
  color: rgba(255,236,179,.98);
}
.age-badge.age-16{
  border-color: rgba(13,110,253,.95);
  background: rgba(13,110,253,.30);
  color: rgba(207,226,255,.98);
}
.age-badge.age-18{
  border-color: rgba(220,53,69,.95);
  background: rgba(220,53,69,.14);
  color: rgba(248,215,218,.98);
}

/* Könyvjelző gomb a poszteren */
.bm-btn{
  position:absolute;
  top:10px; right:10px;
  width:36px; height:36px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.32);
  color: rgba(255,255,255,.92);
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.bm-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.72);
  background: rgba(0,0,0,.44);
  box-shadow: 0 18px 48px rgba(0,0,0,.52);
}
.bm-btn.is-saved{
  border-color: rgba(109,94,245,.95);
  background: rgba(109,94,245,.26);
}
.bm-btn.is-saved svg path{
  fill-opacity: .72;
}

/* Hero könyvjelző "pill" gomb */
.bm-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.bm-pill:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.32); background: rgba(0,0,0,.34); }
.bm-pill.is-saved{ border-color: rgba(109,94,245,.65); background: rgba(109,94,245,.18); }

.film-meta{
  color: rgba(255,255,255,.70);
  font-size:.86rem;
}

.badge-soft{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
}

/* Ha több műfaj van egy badge-ben: ne vágja le a Bootstrap (nowrap) */
.badge-wrap{
  white-space: normal !important;
  max-width: 100%;
  line-height: 1.15;
}
.film-meta .badge-wrap{
  flex: 1 1 auto;
}

.page-hero{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
  background: rgba(255,255,255,.03);
}
.backdrop{
  min-height: 280px;
  background-size:cover;
  background-position:center;
  position:relative;
}
.backdrop::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(7,10,18,.92));
}
.backdrop-content{
  position:relative; z-index:1;
  padding: 26px 18px;
}

.form-card{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 26px 80px rgba(0,0,0,.45);
}

.form-control, .form-select{
  background: rgba(0,0,0,.25) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--text) !important;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(109,94,245,.55) !important;
  box-shadow: 0 0 0 .25rem rgba(109,94,245,.18) !important;
}
.form-label{ color: rgba(255,255,255,.75); }

.footer-fade{
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.35));
}

/* Dropdown (menü) – üveg, prémium */
.dropdown-menu-glass{
  background: rgba(10,14,26,.88);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
  border-radius: 16px;
  overflow: hidden;
}
.dropdown-menu-glass .dropdown-item{
  color: rgba(255,255,255,.82);
}
.dropdown-menu-glass .dropdown-item:hover,
.dropdown-menu-glass .dropdown-item:focus{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.95);
}
.dropdown-menu-glass .dropdown-divider{
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Lapozó – sötét/prémium */
.pagination .page-link{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
}
.pagination .page-link:hover{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.95);
}
.pagination .page-item.active .page-link{
  background: linear-gradient(90deg, rgba(109,94,245,.75), rgba(25,194,255,.55));
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.pagination .page-item.disabled .page-link{ opacity: .4; }

/* Premium vízszintes ajánló sáv (Hasonló filmek) */
.rail-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.rail-title-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 240px;
  flex: 1 1 auto;
}
.rail-titlebox{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  backdrop-filter: blur(10px);
  font-weight: 800;
  letter-spacing: -.02em;
  box-shadow:
    0 10px 28px rgba(0,0,0,.30),
    0 0 0 1px rgba(25,194,255,.12) inset,
    0 0 26px rgba(25,194,255,.10);
}
.rail-accent{
  height: 2px;
  border-radius: 999px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, rgba(25,194,255,.85), rgba(25,194,255,.22), rgba(25,194,255,0));
  box-shadow: 0 0 18px rgba(25,194,255,.18);
}
.rail-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 0 auto;
}
.rail-nav{
  width: 38px;
  height: 38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(25,194,255,.92);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.rail-nav:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(25,194,255,.32);
  box-shadow: 0 14px 34px rgba(0,0,0,.35), 0 0 26px rgba(25,194,255,.18);
}
.rail-nav:disabled{
  opacity: .35;
  filter: grayscale(1);
  cursor: not-allowed;
  transform:none;
  box-shadow:none;
}

.rail{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  border-radius: 18px;
  padding: 12px;
}
.rail-inner{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 4px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  align-items: stretch;
}
.rail-inner::-webkit-scrollbar{ height: 10px; }
.rail-inner::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}
.rail-inner::-webkit-scrollbar-track{ background: rgba(0,0,0,.18); }

.rail-item{
  flex: 0 0 168px;
  width: 168px;
  scroll-snap-align: start;
  display: flex;
}
@media (min-width: 992px){
  .rail-item{ flex-basis: 196px; width:196px; }
}

.card-film-mini{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.card-film-mini .p-3{ padding: 12px!important; }
.card-film-mini .badge-wrap{ max-width: 100%; }

/* Mini kártya: egységes magasság, szép tördelés */
.card-film-mini .poster{ flex: 0 0 auto; }
.card-film-mini .p-3{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px; /* ettől lesz mind egyforma */
}

.mini-title{
  font-weight: 700;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.3em; /* 2 sor fix hely */
}

.mini-genres{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-film-mini .text-white-50.small{
  margin-top: auto; /* a badge sor mindig alul */
}


/* === Similar movies (compact) v4 === */
/* Make similar cards smaller (less tall) */
.similar-strip .content-card{
  width: 190px;
  min-width: 190px;
  max-width: 190px;
}
/* Poster smaller: keep aspect, reduce height */
.similar-strip .content-card .poster{
  aspect-ratio: 2 / 3;
  height: 250px; /* smaller than before */
  max-height: 250px;
}
.similar-strip .content-card .card-body{
  padding: 10px 12px;
  min-height: 96px; /* keep consistent but shorter */
}
.similar-strip .content-card .title{
  font-size: 0.95rem;
  line-height: 1.2;
  max-height: 2.4em;
}
.similar-strip .content-card .meta-row{
  font-size: 0.78rem;
  line-height: 1.1;
}
.similar-strip .content-card .badge-row{
  gap: 6px;
  margin-top: 8px;
}


/* === Hero tuning v5 === */
.hero,
.film-hero {
  min-height: 78vh;
  padding-top: 80px;
}
@media (max-width: 768px) {
  .hero,
  .film-hero {
    min-height: 68vh;
    padding-top: 60px;
  }
}


/* === Hero tweaks v5 (taller & higher) === */
/* Film adatlap hero legyen magasabb és fentebb */
.page-hero{
  margin-top: -14px; /* feljebb */
  padding-top: 34px;
  padding-bottom: 34px;
  min-height: 420px; /* magasabb */
}
/* Ha van háttérkép / overlay, az is töltse ki */
.page-hero .hero-bg,
.page-hero .hero-backdrop,
.page-hero::before{
  min-height: 420px;
}
@media (max-width: 992px){
  .page-hero{
    margin-top: -10px;
    min-height: 360px;
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .page-hero .hero-bg,
  .page-hero .hero-backdrop,
  .page-hero::before{
    min-height: 360px;
  }
}


/* === Index rails premium header v6 === */

.premium-box{
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(12,16,28,.55);
  border-radius:14px;
  padding:10px 14px;
  margin:18px 0 10px;
  position:relative;
  backdrop-filter: blur(6px);
}
.premium-box::after{
  content:'';
  position:absolute;right:0;top:10%;
  width:2px;height:80%;
  background:linear-gradient(180deg,#39a7ff,transparent);
  box-shadow:0 0 10px #39a7ff;
}
.premium-box h3{
  margin:0;font-size:1.05rem;font-weight:600;
}
.premium-nav{
  display:flex;gap:8px;
}
.premium-nav button{
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(80,160,255,.6);
  background:rgba(10,20,40,.6);
  color:#7fb6ff;
}
.premium-nav button:hover{box-shadow:0 0 12px rgba(80,160,255,.6)}


/* === Premium rails (home) === */
.premium-section{ margin-bottom: 18px; }
.premium-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}
.titlebox{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex: 1 1 auto;
  min-width: 0;
}
.titlebox-inner{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 0;
  flex: 1 1 auto;
}
.titlebox-title{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.titlebox-title h2{ margin:0; }
.titlebox-meta{
  white-space:nowrap;
  padding-left: 10px;
  margin-left: auto;
  border-left: 1px solid rgba(255,255,255,.10);
}
.titlebox-neon{
  width: 2px;
  height: 22px;
  border-radius: 2px;
  background: rgba(64,156,255,.95);
  box-shadow: 0 0 10px rgba(64,156,255,.75), 0 0 18px rgba(64,156,255,.35);
  flex: 0 0 2px;
}

.rail-controls{ display:flex; gap:8px; }
.rail-nav{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  box-shadow: 0 10px 22px rgba(0,0,0,.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.rail-nav:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(64,156,255,.45); }
.rail-nav:disabled{ opacity: .35; transform:none; cursor:not-allowed; }

.premium-rail{
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.premium-rail::-webkit-scrollbar{ height: 8px; }
.premium-rail::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.16); border-radius: 999px; }
.premium-rail::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius: 999px; }

.premium-rail .rail-inner{
  display:flex;
  gap: 14px;
  padding: 2px 2px 8px 2px;
}
.premium-rail .rail-item{
  flex: 0 0 auto;
  width: 210px; /* compact home */
}
.premium-rail .card-film{ height: 100%; }
.premium-rail .card-film .poster{ aspect-ratio: 2/3; }
.premium-rail .card-film .p-3{ padding: 10px 12px !important; }

@media (max-width: 992px){
  .premium-rail .rail-item{ width: 185px; }
  .titlebox{ padding: 9px 10px; border-radius: 12px; }
  .rail-nav{ width: 36px; height: 36px; border-radius: 11px; }
}
@media (max-width: 576px){
  .titlebox-meta{ display:none; }
}


/* === Index premium refine v2 === */
/* Rail: finomabb méretek + stabil poszter arány */
.premium-rail .rail-inner{
  gap: 14px;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}
.premium-rail .rail-item{
  scroll-snap-align: start;
}

/* Kártya méret: egységes, nem túl magas */
.premium-rail .card-film{
  width: clamp(165px, 13vw, 210px);
  border-radius: 18px;
  overflow: hidden;
}
.premium-rail .card-film .poster{
  aspect-ratio: 2 / 3;
  background: rgba(255,255,255,.04);
}
.premium-rail .card-film .poster img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center; /* ne vágja le a tetejét */
  transform: translateZ(0);
}
.premium-rail .card-film .meta{
  padding: 10px 12px 12px 12px;
  min-height: 88px;
}
.premium-rail .card-film .title{
  font-size: .92rem;
  line-height: 1.15;
  letter-spacing: .2px;
}
.premium-rail .card-film:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 28px rgba(64,156,255,.10);
}

/* Rail szélek finom “fade” */
.premium-rail{
  position: relative;
}
.premium-rail:before,
.premium-rail:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width: 34px;
  pointer-events:none;
  z-index: 2;
}
.premium-rail:before{
  left:0;
  background: linear-gradient(90deg, rgba(8,10,14,.85), transparent);
}
.premium-rail:after{
  right:0;
  background: linear-gradient(270deg, rgba(8,10,14,.85), transparent);
}

/* Cím box: még prémiumabb */
.titlebox-inner{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
}
.titlebox-neon{
  width: 3px;
  border-radius: 999px;
  opacity: .9;
  background: linear-gradient(180deg, rgba(64,156,255,1), rgba(64,156,255,.15));
  box-shadow: 0 0 18px rgba(64,156,255,.35);
}

/* Gombok: kisebb, finomabb */
.rail-nav{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(14,18,28,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 38px rgba(0,0,0,.45);
}
.rail-nav:hover{
  transform: translateY(-1px);
  border-color: rgba(64,156,255,.35);
  box-shadow: 0 18px 50px rgba(0,0,0,.52), 0 0 24px rgba(64,156,255,.12);
}
.rail-nav:disabled{
  opacity: .35;
  transform:none;
  box-shadow: none;
}

/* Hero: kicsit “fentebb” és stabilabb */
.hero-premium{
  margin-top: -10px;
  border-radius: 22px;
  overflow: hidden;
}
.hero-premium .hero-bg{
  background-position: top center !important;
}


/* === Index premium refine v3 (uniform size, no overflow) === */
/* A rail-item legyen a méret forrása, a kártya töltsön ki 100%-ot (ne lógjon ki) */
.premium-rail .rail-item{
  width: clamp(160px, 12vw, 200px) !important;
  flex: 0 0 auto !important;
  display: flex;
}
@media (max-width: 992px){
  .premium-rail .rail-item{ width: 172px !important; }
}
@media (max-width: 576px){
  .premium-rail .rail-item{ width: 156px !important; }
}

.premium-rail .card-film{
  width: 100% !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

/* Egységes magasság: poszter fix arány, meta fix blokk */
.premium-rail .card-film .poster{
  aspect-ratio: 2 / 3;
  flex: 0 0 auto;
}
.premium-rail .card-film .meta{
  flex: 1 1 auto;
  min-height: 92px;
}

/* Ha valahol extra wrapper okoz kilógást */
.premium-rail .rail-inner{
  align-items: stretch;
  padding-right: 6px;
}


/* === Titlebox v3 (boxed title + thin blue neon bar) === */
.titlebox{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(20,24,34,.82), rgba(12,14,18,.72));
  box-shadow: 0 16px 55px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.titlebox-inner{
  display:flex;
  align-items:center;
  gap: 12px;
}
.titlebox-neon{
  width: 3px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(64,156,255,.95), rgba(64,156,255,.18));
  box-shadow: 0 0 18px rgba(64,156,255,.30);
}
.titlebox-title h2{
  font-weight: 800;
  letter-spacing: .2px;
}


/* === Index v4 hotfix (uniform poster + no overflow + page higher) === */
/* Képek mindig a keretben maradnak (ne nőjön meg a poszter) */
.premium-rail .card-film .poster{
  position: relative;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
}
.premium-rail .card-film .poster img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 8%; /* feljebb a kép teteje */
}

/* Biztosan ne törjön a rail */
.premium-rail .rail-inner{
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
}
.premium-rail .rail-inner::-webkit-scrollbar{ height: 10px; }

/* Egységes kártyamagasság: meta blokk fix */
.premium-rail .card-film .p-3{
  padding: 12px 12px 14px 12px !important;
}
.premium-rail .card-film .film-meta{
  min-height: 28px;
}

/* Index oldal feljebb: kevesebb top spacing */
.premium-section{ margin-top: 26px !important; }
.premium-section:first-of-type{ margin-top: 10px !important; }
.premium-head{ margin-bottom: 10px !important; }


/* === Index v5 strict uniform cards (force same size everywhere) === */
/* Biztos egységes méret: fix kártya + poszter magasság (nem aspect-ratio-ra bízva) */
.premium-rail .rail-item{ 
  width: 190px !important;
  flex: 0 0 190px !important;
}
.premium-rail .rail-item > a{ display:block; width:100%; }

.premium-rail .card-film{
  width: 100% !important;
  height: 320px !important;          /* egységes teljes magasság */
  display:flex !important;
  flex-direction: column !important;
}

.premium-rail .card-film .poster{
  height: 235px !important;          /* egységes poszter magasság */
}
.premium-rail .card-film .poster img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 8% !important;
}

/* Meta blokk fix: ne nyúljon szét */
.premium-rail .card-film .p-3{
  padding: 12px 12px 14px 12px !important;
  flex: 1 1 auto !important;
  overflow: hidden;
}
.premium-rail .card-film .fw-semibold{
  line-height: 1.15;
}
.premium-rail .card-film .badge-wrap{
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reszponzív */
@media (max-width: 992px){
  .premium-rail .rail-item{ width: 176px !important; flex-basis:176px !important; }
  .premium-rail .card-film{ height: 306px !important; }
  .premium-rail .card-film .poster{ height: 225px !important; }
}
@media (max-width: 576px){
  .premium-rail .rail-item{ width: 160px !important; flex-basis:160px !important; }
  .premium-rail .card-film{ height: 292px !important; }
  .premium-rail .card-film .poster{ height: 214px !important; }
}


/* === Index strict uniform v6 (spacing + shorter titles) === */
/* Ne legyenek egymáson: fix gap a rail-ben */
.premium-rail .rail-inner{
  gap: 14px !important;
  padding-left: 10px;
  padding-right: 10px;
}
.premium-rail .rail-item{
  margin: 0 !important;
}

/* Ha valahol transform / negative margin volt, semlegesítsük */
.premium-rail .card-film{
  transform: none !important;
}

/* Cím ne legyen túl hosszú: max 2 sor, utána ... */
.premium-rail .card-film .film-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.15;
  max-height: calc(1.15em * 2);
}

/* Műfaj/infó is rövidüljön */
.premium-rail .card-film .film-genres,
.premium-rail .card-film .badge-row{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Meta blokk: ne nyomja szét */
.premium-rail .card-film .meta{
  padding: 10px 12px 12px 12px !important;
}

/* Mobilon kicsit több gap */
@media (max-width: 576px){
  .premium-rail .rail-inner{ gap: 12px !important; }
}


/* === Index v7 (more breathing room) === */
/* Még több távolság a kártyák között (ne legyenek 'egymáson') */
.premium-rail .rail-inner{
  gap: 24px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* Biztonsági ráhagyás ha egy böngésző nem támogatja a flex gap-et */
.premium-rail .rail-item{
  margin-right: 24px !important;
}
.premium-rail .rail-inner > .rail-item:last-child{
  margin-right: 0 !important;
}

/* A kártyák hover ne tolja rá a szomszédra */
.premium-rail .card-film{
  will-change: transform;
}
.premium-rail .card-film:hover{
  transform: translateY(-2px) scale(1.01) !important;
}

/* Mobilon is maradjon levegő */
@media (max-width: 576px){
  .premium-rail .rail-inner{
    gap: 18px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .premium-rail .rail-item{
    margin-right: 18px !important;
  }
}


/* ---------------- Premium HERO (film/sorozat adatlap) ----------------
   - háttér pontosan kitölti a hero boxot
   - fókusz Y állítható: --hero-focus: 15% (0% = teteje, 50% = közép)
--------------------------------------------------------------------- */
.page-hero{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  min-height: clamp(320px, 46vh, 520px);
}

.page-hero .backdrop{
  position:absolute;
  inset:0;
  height:100%;
  min-height:100%;
  width:100%;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: 50% var(--hero-focus, 12%) !important; /* TETEJE LÁTSZIK */
  transform: translateZ(0);
}

.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(70% 90% at 50% 20%, rgba(0,0,0,.18), rgba(0,0,0,.55) 55%, rgba(0,0,0,.78) 100%),
    linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.18));
  pointer-events:none;
}

.page-hero .hero-content,
.page-hero .hero-inner,
.page-hero .content{
  position: relative;
  z-index: 1;
}

@media (max-width: 768px){
  .page-hero{ min-height: clamp(260px, 44vh, 420px); border-radius: 18px; }
  .page-hero .backdrop{ background-position: 50% var(--hero-focus-mobile, 18%) !important; }
}


/* -------- Premium HERO leírás (FILM + SOROZAT) --------
   Fix sor-szám, szép fade a végén + opcionális "Tovább" gomb.
-------------------------------------------------------- */
.page-hero .hero-desc{
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--hero-desc-lines, 3);
  overflow: hidden;

  line-height: 1.45;
  min-height: calc(1.45em * var(--hero-desc-lines, 3));
  max-width: 72ch;
  opacity: .92;
}

/* finom fade a szöveg vége felé */
.page-hero .hero-desc::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 2.4em;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
  pointer-events:none;
}

/* kinyitott állapot (ha később JS-sel kapcsolod) */
.page-hero .hero-desc.is-open{
  -webkit-line-clamp: unset;
  max-height: none;
  min-height: 0;
}
.page-hero .hero-desc.is-open::after{ display:none; }

/* opcionális gomb stílus */
.page-hero .hero-desc-toggle{
  margin-top: 10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,15,25,.45);
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.page-hero .hero-desc-toggle:hover{
  background: rgba(10,15,25,.62);
}


/* ---- Megtekintési keret eltűnés animáció ---- */
.view-limit.auto-hide,
.megtekintesi-keret.auto-hide,
.limit-box.auto-hide{
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity .6s ease, transform .6s ease;
}



.limit-card{transition:opacity .35s ease,transform .35s ease,max-height .35s ease;max-height:520px;overflow:hidden}
.limit-card.is-collapsed{opacity:0;transform:translateY(-10px);max-height:0!important;pointer-events:none}


/* -------- Megtekintési keret: mini popup (jobb alsó sarok) -------- */
.limit-toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;

  width: min(320px, calc(100vw - 36px));
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,15,25,.72);
  color: rgba(255,255,255,.92);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);

  overflow: hidden;
  transform: translateY(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.limit-toast.is-show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.limit-toast .lt-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 12px 12px 6px 14px;
}
.limit-toast .lt-title{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
}
.limit-toast .lt-close{
  appearance:none;
  border:0;
  background: transparent;
  color: rgba(255,255,255,.82);
  padding: 2px 6px;
  line-height: 1;
  border-radius: 10px;
  cursor:pointer;
}
.limit-toast .lt-close:hover{
  background: rgba(255,255,255,.08);
}
.limit-toast .lt-body{
  padding: 0 14px 12px 14px;
  font-size: 13px;
  color: rgba(255,255,255,.80);
}
.limit-toast .lt-body b{ color: rgba(255,255,255,.95); }
.limit-toast .lt-actions{
  padding: 0 14px 14px 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.limit-toast .lt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 13px;
  cursor:pointer;
}
.limit-toast .lt-btn:hover{ background: rgba(255,255,255,.12); }


/* -------- Mini megtekintési keret popup (jobb alsó sarok) -------- */
.limit-mini-popup{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,15,25,.58);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 45px rgba(0,0,0,.32);
  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.limit-mini-popup.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.limit-mini-popup__title{
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  white-space: nowrap;
}
.limit-mini-popup__actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.limit-mini-open{
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 12px;
}
.limit-mini-open:hover{ background: rgba(255,255,255,.14); }
.limit-mini-close{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  line-height: 1;
}
.limit-mini-close:hover{ background: rgba(255,255,255,.12); }


/* ---- Könyvjelző: biztonságos kattintás (ne legyen <a>-ba ágyazott gomb) ---- */
.card-wrap{ position: relative; }
.card-wrap > a{ display:block; }
.card-wrap .bm-btn{
  position:absolute;
  top:10px; right:10px;
  z-index: 6; /* a link fölé */
}