/* =========================
   Base Theme + IRANYekanX
   ========================= */

@font-face {
  font-family: "IRANYekanX";
  src: url("../fonts/iranyekanx/IRANYekanXVFaNumVF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html[lang="fa"] body {
  font-family: "IRANYekanX", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}

html[lang="en"] body {
  font-family: "IRANYekanX", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

:root{
  --fb-navbar-h: 72px;
  --fb-overlay-z: 20050;
  --fb-navbar-z: 1040;
  --fb-main-top-gap: 14px;

  /* global rounding */
  --fb-radius-lg: 22px;
  --fb-radius-md: 18px;
  --fb-radius-sm: 14px;
}

body { background-color: #0f0f0f; }

/* =========================
   Navbar
   ========================= */

.navbar { background: #111; }

.navbar{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: var(--fb-navbar-z);
  background: rgba(10,10,10,.55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  margin-bottom: 0 !important;

  /* ✅ FIX: prevent dropdown clipping */
  overflow: visible !important;
}

.navbar .container-fluid,
.navbar .navbar-collapse{
  overflow: visible !important; /* ✅ FIX: prevent dropdown clipping */
}

body{ padding-top: var(--fb-navbar-h); }

main{ padding-top: var(--fb-main-top-gap); }

@media (max-width: 992px){
  :root{
    --fb-navbar-h: 86px;
    --fb-main-top-gap: 16px;
  }
}

/* =========================================================
   Cards / Forms / Tables
   ========================================================= */

.card {
  background: #181818;
  border-color: #2a2a2a;
  color: #fff;
}

.form-control,
.form-select {
  background: #141414;
  color: #fff;
  border-color: #2a2a2a;
}

.form-control::placeholder { color: #bfbfbf; }
.form-label { color: #fff; }

.table { color: #fff; }
.table td, .table th { border-color: #2a2a2a; }

/* =========================
   Video cards
   ========================= */

.video-card {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: #fff;
}

.video-card .card-body { background: #1a1a1a; }

.video-title {
  font-size: 0.95rem;
  font-weight: 600;
}

.episode-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.episode-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}

/* =========================
   Buttons
   ========================= */

.btn-outline-secondary {
  border-color: #555;
  color: #ddd;
}

.btn-outline-secondary:hover {
  background: #2a2a2a;
  color: #fff;
}

.btn-buy {
  background-color: #ff7a00 !important;
  border-color: #ff7a00 !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.btn-buy:hover,
.btn-buy:focus {
  background-color: #e56f00 !important;
  border-color: #e56f00 !important;
  color: #fff !important;
}

.quality-meta {
  color: #fff !important;
  opacity: 0.9 !important;
}

/* =========================
   Media Ratios
   ========================= */

.video-card .card-img-top,
.poster-img {
  aspect-ratio: 850 / 1280;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.slider-img {
  aspect-ratio: 1280 / 720;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* =========================================================
   ✅ Series cards (Archive / Stacked Posters)
   - Used in listing.html when kind != 'video'
   ========================================================= */

.series-card-archive{
  display: block;
  color: #fff;
  text-decoration: none;
}

.series-card-archive .stack-images{
  position: relative;
  width: 100%;
  /* ارتفاع تقریبی هم‌تراز با کارت‌های پوستر */
  aspect-ratio: 850 / 1280;
  border-radius: var(--fb-radius-lg);
}

/* fallback وقتی عکس نداریم */
.series-card-archive .stack-fallback{
  width: 100%;
  height: 100%;
  border-radius: var(--fb-radius-lg);
  border: 1px solid rgba(255,255,255,.10);
}

/* هر لایه پوستر */
.series-card-archive .stack-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--fb-radius-lg);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .20s ease, opacity .20s ease, filter .20s ease;
  will-change: transform;
}

/* لایه‌ها (حالت آرشیوی) */
.series-card-archive .img-1{
  z-index: 3;
  transform: translate(0,0);
  opacity: 1;
}
.series-card-archive .img-2{
  z-index: 2;
  transform: translate(8px, 8px);
  opacity: .65;
  filter: saturate(.9);
}
.series-card-archive .img-3{
  z-index: 1;
  transform: translate(16px, 16px);
  opacity: .42;
  filter: saturate(.85);
}

/* Hover (فقط روی دستگاه‌هایی که hover دارند) */
@media (hover:hover){
  .series-card-archive:hover .img-2{
    transform: translate(4px, 4px);
    opacity: .72;
  }
  .series-card-archive:hover .img-3{
    transform: translate(8px, 8px);
    opacity: .50;
  }
  .series-card-archive:hover .img-1{
    transform: translate(-1px, -2px);
  }
}

/* عنوان زیر کارت */
.series-card-archive .series-title{
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  line-height: 1.35;
}

/* =========================================================
   HERO (fb-hero)
   ========================= */

.fb-hero.fb-hero--fullbleed{
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

.fb-hero {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  border: 0;
  background: #0f0f0f;
  min-height: 520px;
  padding: 0;
  margin-top: 0;
}

.fb-hero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--fb-hero-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  filter: none;
  opacity: 1;
}

.fb-hero__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(65% 70% at 78% 42%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.88) 100%),
    linear-gradient(270deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 52%, rgba(0,0,0,.20) 100%);
}

.fb-hero__container {
  position: relative;
  z-index: 2;
  padding: 48px 6vw;
}

.fb-hero__wrap{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 28px;
  flex-direction: row-reverse;
}

.fb-hero__main {
  max-width: 860px;
  direction: rtl;
  text-align: right;
}

.fb-hero__title {
  margin: 0 0 10px;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.3px;
  text-shadow: 0 10px 40px rgba(0,0,0,.55);
}

.fb-hero__subtitle {
  color: rgba(255,255,255,.75);
  margin-bottom: 18px;
  font-size: 15px;
}

.fb-hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin: 8px 0 16px;
}

.fb-hero__line {
  margin: 8px 0;
  color: rgba(255,255,255,.92);
  line-height: 1.95;
  font-size: 14px;
}

.fb-hero__lineText{
  color: rgba(255,255,255,.92);
}

.fb-muted { color: rgba(255,255,255,.65); }

.fb-hero__desc{
  margin-top: 14px;
  max-width: 720px;
  color: rgba(255,255,255,.78);
  line-height: 2;
  font-size: 14px;
}

.fb-hero__poster {
  width: 240px;
  flex: 0 0 240px;
}

.fb-poster {
  width: 100%;
  aspect-ratio: 850 / 1280;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 18px 60px rgba(0,0,0,.60);
}

.fb-hero__actions{
  display:flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.fb-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 12px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  white-space: nowrap;
}

.fb-chip--dark{
  background: rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.12);
}

.fb-chip--imdb{
  background: rgba(255,193,7,.12);
  border-color: rgba(255,193,7,.32);
  color: rgba(255,193,7,.95);
}

.fb-chip--ok{
  background: rgba(25, 135, 84, .16);
  border-color: rgba(25, 135, 84, .40);
  color: rgba(141, 255, 199, .95);
}


.fb-chip--info{
  background: rgba(13, 110, 253, .14);
  border-color: rgba(13, 110, 253, .38);
  color: rgba(173, 208, 255, .98);
}

.fb-chip--danger{
  background: rgba(220, 53, 69, .14);
  border-color: rgba(220, 53, 69, .40);
  color: rgba(255, 176, 184, .98);
}

.fb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  font-weight: 900;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.14);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.fb-btn:hover{ transform: translateY(-1px); }

.fb-btn--primary{
  background: rgba(13,110,253,.88);
  color:#fff;
}
.fb-btn--primary:hover{
  background: rgba(13,110,253,1);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 14px 38px rgba(0,0,0,.45);
}

.fb-btn--ghost{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.fb-btn--ghost:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

@media (max-width: 900px) {
  .fb-hero { min-height: 420px; }
  .fb-hero__container { padding: 28px 18px; }
  .fb-hero__wrap { flex-direction: column; align-items: flex-start; }
  .fb-hero__main { max-width: 100%; }
  .fb-hero__poster { width: 180px; flex-basis: 180px; }
}

/* =========================
   Close button positioning
   ========================= */

.btn-close,
.close,
.modal-header .btn-close,
.modal-header .close {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  z-index: 9999;
}

.modal-content,
.modal-header,
.popup,
.episode-modal,
.quality-modal,
.fb-modal,
.card,
.fb-section {
  position: relative;
}

/* =========================================================
   Navbar Searchbox
   ========================================================= */

.nav-searchbox{
  display:flex;
  align-items:center;
  gap:12px;
  height: 38px;
  min-width: 360px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
  cursor: pointer;
  user-select: none;
}

.nav-searchbox:hover{
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}

.nav-searchbox__icon{ opacity:.85; }
.nav-searchbox__placeholder{
  font-size: 13px;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 992px){
  .nav-searchbox{ min-width: 260px; width: 100%; }
}

/* =========================================================
   Search Overlay
   ========================================================= */

.search-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.78);
  display:none;
  z-index: var(--fb-overlay-z);
}

.search-overlay.active{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top: calc(var(--fb-navbar-h) + 18px);
}

.search-box{
  width: min(1200px, 96vw);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(22,22,22,.96);
  box-shadow: 0 30px 120px rgba(0,0,0,.65);
  overflow: hidden;
}

.search-head{
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.search-input-wrap{ position: relative; }

.search-input-wrap input{
  width:100%;
  height: 56px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 0 56px 0 56px;
  color:#fff;
  outline:none;
  font-size: 18px;
}

.search-input-wrap input::placeholder{
  color: rgba(255,255,255,.55);
}

.search-close,
.search-go{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  height: 40px;
  width: 40px;
  border-radius: 10px;
  border: 0;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  cursor:pointer;
}

.search-close:hover,
.search-go:hover{
  background: rgba(255,255,255,.10);
  color: #fff;
}

.search-close{ left: 10px; }
.search-go{ right: 10px; }

.search-body{ padding: 10px 18px 18px; }

.search-suggestions{
  display:flex;
  flex-direction:column;
  gap: 12px;
  max-height: 620px;
  overflow: hidden;
  padding-right: 4px;
}

#searchResults{
  overflow: auto;
  flex: 1 1 auto;
  padding-right: 4px;
}

.search-chips{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  overflow-x:auto;
  padding-bottom:6px;
  -webkit-overflow-scrolling:touch;
  flex: 0 0 auto;
  z-index: 2;
}

.search-chip{
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.86);
  padding:7px 14px;
  border-radius:12px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  white-space: nowrap;
}

.search-chip:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.22);
}

#searchSuggestions .search-item{
  display:flex;
  align-items:center;
  gap: 16px;
  text-decoration:none;
  color:#fff;
  padding: 14px 14px;
  border-radius: var(--fb-radius-md);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  direction: rtl;
  justify-content: flex-start;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

#searchSuggestions .search-item:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

#searchSuggestions .search-item__img{
  width: 80px;
  height: 110px;
  object-fit:cover;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  flex: 0 0 auto;
  order: -1;
}

#searchSuggestions .search-item__meta{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 6px;
  text-align: right;
  min-width: 0;
  flex: 1 1 auto;
}

#searchSuggestions .search-item__title{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#searchSuggestions .search-item__sub{
  color: rgba(255,255,255,.70);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-empty{
  padding: 18px 10px;
  color: rgba(255,255,255,.70);
  text-align: center;
  font-size: 16px;
}

.search-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 14px 18px;
  text-align:center;
  background: rgba(0,0,0,.18);
}

.search-all{
  color: #6dd5ff;
  text-decoration:none;
  font-weight: 900;
  font-size: 16px;
}

.search-all:hover{ text-decoration: underline; }

@media (max-width: 768px){
  .search-overlay.active{ padding-top: calc(var(--fb-navbar-h) + 10px); }
  .search-box{ width: 96vw; }
  #searchSuggestions .search-item__img{ width: 70px; height: 96px; }
}

/* =========================================================
   Navbar genres dropdown
   ========================================================= */

/* ✅ FIX: stable RTL align + keep popper happy */
.nav-genre-dropdown .dropdown-menu{
  text-align: right;
  direction: rtl;
}

.nav-genre-dropdown .dropdown-menu[data-bs-popper]{
  right: 0 !important;
  left: auto !important;
}

/* ✅ FIX: dropdown always above page content */
.navbar .dropdown-menu{
  z-index: calc(var(--fb-navbar-z) + 40) !important;
}

/* desktop hover */
@media (min-width: 992px){
  .navbar .nav-genre-dropdown:hover > .dropdown-menu{
    display: block;
  }
}

/* ✅ MOBILE: tap-friendly dropdown (no hover) */
@media (max-width: 991.98px){
  .navbar .dropdown-menu{
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin-top: .25rem !important;
    max-height: 60vh;
    overflow: auto;
  }
}

/* =========================================================
   TOP SLIDER (Desktop = fullbleed)
   ========================================================= */

#topCarousel{
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0;
  margin-bottom: 22px;
}

/* desktop keeps fullbleed */
#topCarousel .carousel-inner{
  border-radius: 0 !important;
  overflow: hidden;
}

#topCarousel .carousel-item{
  height: clamp(520px, 78vh, 980px);
  position: relative;
  overflow: hidden;
}

#topCarousel .carousel-item img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transform: scale(1.02);
  object-position: center 30% !important;
}

/* overlay caption (desktop) */
#topCarousel .carousel-caption{
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  padding: 0 6vw;
  text-align: right;
  z-index: 5;
  pointer-events: none;
}

#topCarousel .carousel-caption a,
#topCarousel .carousel-caption button{
  pointer-events: auto;
}

/* custom slider overlay (desktop) */
#topCarousel .fb-slider-caption{
  position:absolute;
  inset:0;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:flex-end !important;
  padding: 0 6vw 24px !important;
  z-index: 6;
  pointer-events:none;
}

#topCarousel .fb-slider-content{
  max-width: 520px;
  pointer-events:auto;
}

/* hide titles */
#topCarousel .fb-slider-title,
#topCarousel .carousel-caption h5,
#topCarousel .carousel-caption p{
  display: none !important;
}
#topCarousel .fb-slider-subtitle,
#topCarousel .fb-slider-subtitle-movie{
  display: none !important;
}

/* latest episode badge */
#topCarousel .fb-slider-latest-episode{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 10px;
}

/* CTA button in slider */
#topCarousel .fb-slider-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 900;
  text-decoration:none;
  background: rgba(13,110,253,.90);
  color:#fff;
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  will-change: transform;
}

#topCarousel .carousel-indicators{
  z-index: 9 !important;
  margin-bottom: 14px;
}

#topCarousel .carousel-indicators [data-bs-target]{
  width: 18px;
  height: 4px;
  border-radius: 999px;
  opacity: .40;
}

#topCarousel .carousel-indicators .active{ opacity: 1; }

#topCarousel .carousel-control-prev,
#topCarousel .carousel-control-next{
  display: flex !important;
  width: 70px;
  opacity: .9;
  z-index: 8;
}

/* mobile slider image swap */
#topCarousel .slider-img-mobile { display: none !important; }
@media (max-width: 768px){
  #topCarousel .has-mobile-slider .slider-img-desktop { display: none !important; }
  #topCarousel .has-mobile-slider .slider-img-mobile  { display: block !important; }
}

/* remove overlay/shadow */
#topCarousel .carousel-item::after{
  content: none !important;
  background: none !important;
}

#topCarousel,
#topCarousel .carousel-inner{
  box-shadow: none !important;
}

#topCarousel .fb-slider-btn,
#topCarousel .fb-slider-btn:hover,
#topCarousel .fb-slider-btn:focus,
#topCarousel .fb-slider-btn:focus-visible{
  box-shadow: none !important;
  outline: none !important;
}

#topCarousel .carousel-control-prev-icon,
#topCarousel .carousel-control-next-icon{
  filter: none !important;
}

#topCarousel .fb-slider-latest-episode{
  text-shadow: none !important;
  box-shadow: none !important;
}

/* =========================================================
   FINAL layout fix (navbar gap + py-4 issue)
   ========================================================= */

main.fb-main.py-4{
  padding-top: 0 !important;
  padding-bottom: 1.5rem !important;
}

.fb-page-container{
  padding-top: 0 !important;
}

/* =========================================================
   Season bar (FULL BLEED + RIGHT + stable)
   ========================================================= */

.season-bar-wrap{
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 18px;
  margin-bottom: 12px;
}

.season-bar-inner{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 0 6vw;
  flex-wrap: wrap;
  direction: ltr;
  margin-right: 0;
  margin-left: auto;
}

/* =========================================================
   Netflix-style Rows (تازه‌ها + ژانرها)
   ========================================================= */

body main .fb-row-scroll{
  direction: rtl !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  gap: 12px !important;
  padding: 6px 2px 12px !important;
  margin-bottom: 6px !important;

  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body main .fb-row-scroll::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

body main .fb-row-item{
  flex: 0 0 auto !important;
  width: 160px;
  scroll-snap-align: start;
  direction: rtl !important;
  text-align: right !important;
}

@media (min-width: 992px){
  body main .fb-row-item{ width: 170px; }
}
@media (max-width: 576px){
  body main .fb-row-item{ width: 140px; }
}

.fb-row-item .video-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.fb-row-item .video-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
}

.fb-row-scroll .video-card .card-body{
  text-align: right !important;
}

.fb-row-scroll .video-card .small{
  direction: rtl !important;
}

.fb-row-scroll .text-muted{
  color: rgba(255,255,255,0.85) !important;
}
.fb-row-scroll .card-body .small{
  color: rgba(255,255,255,0.85) !important;
}

main.fb-main .d-flex.align-items-center.justify-content-between.mt-4.mb-2{
  padding-right: 64px !important;
}

/* =========================================================
   Row arrows (NO hover shadow/box)
   ========================================================= */

.fb-row-wrap{ position: relative; width: 100%; }

@media (min-width: 992px){
  .fb-row-wrap .fb-row-arrow{
    opacity: 0;
    pointer-events: none;
  }
  .fb-row-wrap:hover .fb-row-arrow{
    opacity: .95;
    pointer-events: auto;
  }
}

.fb-row-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 100%;
  border: 0;
  background: transparent !important;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 6;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
  outline: none !important;
}

.fb-row-arrow:hover,
.fb-row-arrow:focus,
.fb-row-arrow:focus-visible{
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.fb-row-arrow--prev{ right: 0; left: auto; }
.fb-row-arrow--next{ left: 0; right: auto; }

.fb-row-arrow .carousel-control-prev-icon,
.fb-row-arrow .carousel-control-next-icon{
  width: 2.4rem;
  height: 2.4rem;
  filter: none !important;
  opacity: .95;
}

.fb-row-wrap .fb-row-scroll{
  padding-left: 72px !important;
  padding-right: 72px !important;
}

@media (max-width: 576px){
  .fb-row-arrow{ width: 54px; }
  .fb-row-wrap .fb-row-scroll{
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}

/* =========================================================
   TEMP: hide votes + comments UI
   ========================================================= */

.fb-interactions,
#fb-interactions,
.fb-commentbox,
.js-vote,
.js-c-name,
.js-c-body,
.text-white-50.small,
.fb-commentbox ~ .text-white-50.small,
.fb-commentbox + .text-white-50.small {
  display: none !important;
}

.fb-hero .row.g-2 { display: none !important; }

/* =========================================================
   Badges in search (no ugly container)
   ========================================================= */

.search-item__type{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.badge{
  font-size:11px;
  padding:3px 8px;
  border-radius:10px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.14);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-kind{ background: rgba(13,110,253,.25); }
.badge-dub { background: rgba(25,135,84,.25); }
.badge-sub { background: rgba(111,66,193,.25); }

/* =========================================================
   Ultra pretty "مشاهده همه"
   ========================================================= */

.d-flex.align-items-center.justify-content-between.mt-4.mb-2 > a.btn.btn-sm.btn-outline-secondary{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px !important;

  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;

  background: linear-gradient(135deg,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.04)
  ) !important;

  border-radius: 999px !important;
  text-decoration: none !important;

  box-shadow:
    0 10px 24px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;

  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important;
}

.d-flex.align-items-center.justify-content-between.mt-4.mb-2 > a.btn.btn-sm.btn-outline-secondary:hover{
  color: #fff !important;
  border-color: rgba(56,189,248,0.55) !important;

  background: linear-gradient(135deg,
    rgba(56,189,248,0.22),
    rgba(59,130,246,0.14)
  ) !important;

  transform: translateY(-2px) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.45),
    0 0 0 1px rgba(56,189,248,0.18),
    0 0 22px rgba(56,189,248,0.18),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.d-flex.align-items-center.justify-content-between.mt-4.mb-2 > a.btn.btn-sm.btn-outline-secondary:active{
  transform: translateY(0) scale(0.98) !important;
}

.d-flex.align-items-center.justify-content-between.mt-4.mb-2 > a.btn.btn-sm.btn-outline-secondary:focus,
.d-flex.align-items-center.justify-content-between.mt-4.mb-2 > a.btn.btn-sm.btn-outline-secondary:focus-visible{
  outline: none !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.45),
    0 0 0 2px rgba(56,189,248,0.22) !important;
}

.d-flex.align-items-center.justify-content-between.mt-4.mb-2 > a.btn.btn-sm.btn-outline-secondary::after{
  content: "⟵";
  font-size: 14px;
  line-height: 1;
  opacity: .9;
  transform: translateY(-.5px);
}

.d-flex.align-items-center.justify-content-between.mt-4.mb-2 > a.btn.btn-sm.btn-outline-secondary:hover::after{
  transform: translateX(-2px);
  transition: transform .18s ease;
}

/* =========================================================
   GLOBAL ROUNDED CARDS (PC + Mobile)
   ========================================================= */

.fb-row-item,
.search-item,
.card,
.video-card,
.series-card{
  border-radius: var(--fb-radius-lg) !important;
  overflow: hidden;
}

.fb-row-item img,
.search-item__img,
.card img,
.video-card img,
.series-card img{
  border-radius: inherit !important;
  display:block;
}

.fb-row-item,
.card,
.video-card,
.series-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

/* soft hover only when hover exists */
@media (hover:hover){
  .fb-row-item:hover,
  .search-item:hover,
  .card:hover,
  .video-card:hover,
  .series-card:hover{
    transform: translateY(-3px);
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 14px 40px rgba(0,0,0,.33);
  }
}

/* =========================================================
   ✅ MOBILE ONLY: Slider becomes 500x500 + button text "تماشا"
   IMPORTANT: this section overrides ONLY mobile, desktop untouched
   ========================================================= */

@media (max-width: 768px){

  /* turn fullbleed off only on mobile (card centered) */
  #topCarousel{
    width: 500px !important;
    height: 500px !important;
    max-width: calc(100vw - 24px) !important;
    margin: 14px auto 18px !important;

    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;

    border-radius: 24px !important;
    overflow: hidden !important;
  }

  /* ensure exact square behavior */
  #topCarousel .carousel-inner{
    width: 100% !important;
    height: 100% !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  #topCarousel .carousel-item{
    width: 100% !important;
    height: 100% !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  /* image fills the square */
  #topCarousel .carousel-item img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
    object-position: center center !important;
  }

  /* keep caption overlay at bottom like a clean mobile hero */
  #topCarousel .fb-slider-caption{
    position: absolute !important;
    inset: auto 0 0 0 !important;
    padding: 0 16px 14px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    pointer-events: none !important;
    z-index: 10 !important;
  }

  #topCarousel .fb-slider-content{
    width: 100% !important;
    max-width: none !important;
    pointer-events: auto !important;
  }

  /* badge first */
  #topCarousel .fb-slider-latest-episode{
    font-size: 12px !important;
    padding: 7px 10px !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
  }

  /* button smaller */
  #topCarousel .fb-slider-btn{
    padding: 9px 14px !important;
    border-radius: 14px !important;
    font-weight: 900 !important;
  }

  /* ✅ VISUAL TEXT CHANGE: show only "تماشا" on mobile */
  #topCarousel .fb-slider-btn{
    font-size: 0 !important; /* hide existing text */
  }
  #topCarousel .fb-slider-btn::before{
    content: "تماشا" !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* if you have bootstrap .btn inside caption too */
  #topCarousel .carousel-caption .btn{
    font-size: 0 !important;
    padding: 9px 14px !important;
    border-radius: 14px !important;
  }
  #topCarousel .carousel-caption .btn::before{
    content: "تماشا" !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* indicators look neat in mobile square */
  #topCarousel .carousel-indicators{
    margin-bottom: 10px !important;
  }

  /* shrink arrows slightly (still usable) */
  #topCarousel .carousel-control-prev,
  #topCarousel .carousel-control-next{
    width: 54px !important;
    opacity: .95 !important;
  }
}

.fb-logo-wrap {
  display: flex;
  align-items: center;
}

.fb-site-logo {
  height: 60px;
  width: auto;
}

@media (max-width: 768px) {
  .fb-site-logo { height: 46px; }
}

/* =========================================================
   FilmBazan HEADER – Ultra Premium VOD Pack (ALL-IN-ONE)
   Paste at END of styles.css
   ========================================================= */

/* ----- Brand tokens ----- */
:root{
  --fb-gold: 255, 200, 0;
  --fb-white: 255, 255, 255;
  --fb-bg1: 7, 9, 12;
  --fb-bg2: 12, 14, 18;

  --fb-radius-lg: 18px;
  --fb-radius-md: 14px;
  --fb-radius-pill: 999px;

  --fb-border: rgba(var(--fb-white), .08);
  --fb-border-2: rgba(var(--fb-white), .12);
  --fb-glass: rgba(var(--fb-bg2), .72);
  --fb-glass-2: rgba(var(--fb-bg2), .55);

  --fb-shadow: 0 18px 55px rgba(0,0,0,.55);
  --fb-shadow-soft: 0 12px 30px rgba(0,0,0,.35);
}

/* =========================================================
   NAVBAR SHELL (glass + spacing + premium line)
   ========================================================= */

/* ✅ FIX: remove sticky conflict, keep fixed navbar system */
.navbar.navbar-dark.bg-dark{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: var(--fb-navbar-z) !important;

  background: linear-gradient(180deg,
    rgba(var(--fb-bg1), .92),
    rgba(var(--fb-bg2), .70)
  ) !important;

  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);

  border-bottom: 1px solid var(--fb-border) !important;

  padding: 12px 12px !important;

  box-shadow: 0 10px 35px rgba(0,0,0,.40);

  /* ✅ FIX: prevent dropdown clipping */
  overflow: visible !important;
}

.navbar.navbar-dark.bg-dark::before{
  /* glow wash */
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 140px at 15% 10%, rgba(var(--fb-gold), .10), transparent 55%),
    radial-gradient(700px 140px at 85% 10%, rgba(80,160,255,.10), transparent 55%);
  pointer-events:none;
}

.navbar.navbar-dark.bg-dark::after{
  /* premium gradient underline */
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background: linear-gradient(90deg,
    rgba(var(--fb-gold), 0),
    rgba(var(--fb-gold), .65),
    rgba(var(--fb-gold), 0)
  );
  pointer-events:none;
}

.navbar .container-fluid{
  position: relative;
  align-items: center !important;
  gap: 12px !important;
  overflow: visible !important; /* ✅ FIX */
}

/* =========================================================
   LOGO (bigger + card + glow)
   ========================================================= */

.fb-logo-wrap{
  display:flex !important;
  align-items:center !important;

  padding: 8px 12px !important;
  border-radius: var(--fb-radius-lg) !important;

  background: linear-gradient(180deg,
    rgba(var(--fb-white), .06),
    rgba(var(--fb-white), .03)
  ) !important;

  border: 1px solid rgba(var(--fb-white), .10) !important;

  box-shadow:
    0 16px 45px rgba(0,0,0,.45),
    0 0 0 1px rgba(var(--fb-white), .06) inset;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.fb-site-logo{
  height: 92px !important;
  width: auto !important;
  display:block !important;
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,.60))
    drop-shadow(0 0 18px rgba(var(--fb-gold), .22)) !important;
  transition: transform .18s ease, filter .18s ease;
}

.fb-logo-wrap:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--fb-gold), .25) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(var(--fb-gold), .14) inset;
}

.fb-logo-wrap:hover .fb-site-logo{
  transform: scale(1.05);
  filter:
    drop-shadow(0 16px 30px rgba(0,0,0,.75))
    drop-shadow(0 0 24px rgba(var(--fb-gold), .32)) !important;
}

.navbar-brand img{
  height: 92px !important;
  width: auto !important;
}

/* =========================================================
   NAV LINKS (soft + pill + luxury hover)
   ========================================================= */
.navbar-nav{
  gap: 6px !important;
}

.navbar-nav .nav-link{
  position: relative;
  border-radius: var(--fb-radius-md) !important;
  padding: .52rem .78rem !important;

  color: rgba(var(--fb-white), .86) !important;
  font-weight: 500;
  letter-spacing: .15px;

  transition:
    transform .16s ease,
    background-color .16s ease,
    box-shadow .16s ease,
    color .16s ease;
  overflow: hidden;
}

.navbar-nav .nav-link::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(500px 120px at 50% 0%,
    rgba(var(--fb-white), .10),
    transparent 60%
  );
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events:none;
}

.navbar-nav .nav-link::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:8px;
  height:2px;
  background: linear-gradient(90deg,
    rgba(var(--fb-gold), 0),
    rgba(var(--fb-gold), .55),
    rgba(var(--fb-gold), 0)
  );
  opacity:0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
}

.navbar-nav .nav-link:hover{
  background: rgba(var(--fb-white), .06) !important;
  color: rgba(var(--fb-white), 1) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

.navbar-nav .nav-link:hover::before{ opacity:1; }
.navbar-nav .nav-link:hover::after{
  opacity:1;
  transform: translateY(0);
}

/* =========================================================
   DROPDOWN (glass panel + smooth)
   ========================================================= */
.dropdown-menu{
  border-radius: var(--fb-radius-lg) !important;
  padding: 10px !important;

  background: rgba(var(--fb-bg2), .88) !important;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);

  border: 1px solid rgba(var(--fb-white), .10) !important;

  box-shadow: var(--fb-shadow) !important;

  /* ✅ FIX: always above content */
  z-index: calc(var(--fb-navbar-z) + 40) !important;
}

.dropdown-item{
  border-radius: 14px !important;
  padding: .62rem .75rem !important;
  color: rgba(var(--fb-white), .86) !important;
  transition: background-color .16s ease, transform .16s ease, color .16s ease;
}

.dropdown-item:hover{
  background: rgba(var(--fb-white), .08) !important;
  color: rgba(var(--fb-white), 1) !important;
  transform: translateY(-1px);
}

/* =========================================================
   SEARCHBOX (pill + icon glow + focus)
   ========================================================= */
.nav-searchbox{
  border-radius: var(--fb-radius-pill) !important;
  padding: .62rem 1rem !important;

  background: rgba(var(--fb-white), .045) !important;
  border: 1px solid rgba(var(--fb-white), .10) !important;

  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition:
    transform .16s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

.nav-searchbox:hover{
  transform: translateY(-1px);
  background: rgba(var(--fb-white), .06) !important;
  border-color: rgba(var(--fb-gold), .22) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

.nav-searchbox:focus,
.nav-searchbox:focus-within{
  border-color: rgba(var(--fb-gold), .35) !important;
  box-shadow: 0 0 0 3px rgba(var(--fb-gold), .12), 0 18px 45px rgba(0,0,0,.40);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.navbar .btn{
  border-radius: var(--fb-radius-pill) !important;
  padding: .44rem 1.02rem !important;
  font-weight: 600;
  transition:
    transform .14s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.navbar .btn:active{
  transform: translateY(1px) scale(.98);
}

.navbar .btn-outline-light{
  border-color: rgba(var(--fb-white), .22) !important;
  color: rgba(var(--fb-white), .95) !important;
  background: rgba(var(--fb-white), .03);
}

.navbar .btn-outline-light:hover{
  background: rgba(var(--fb-white), .08) !important;
  border-color: rgba(var(--fb-gold), .20) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.40);
  transform: translateY(-1px);
}

.navbar .btn-warning{
  border: none !important;
  color: #121212 !important;
  background: linear-gradient(180deg, #ffe07d, #f0b800) !important;
  box-shadow: 0 14px 34px rgba(255, 184, 0, .30);
}

.navbar .btn-warning:hover{
  box-shadow: 0 18px 45px rgba(255, 184, 0, .45);
  transform: translateY(-1px);
}

/* =========================================================
   NAVBAR TOGGLER
   ========================================================= */
.navbar-toggler{
  border-radius: 14px !important;
  border-color: rgba(var(--fb-white), .18) !important;
  background: rgba(var(--fb-white), .03);
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}
.navbar-toggler:hover{
  transform: translateY(-1px);
  background: rgba(var(--fb-white), .06);
  border-color: rgba(var(--fb-gold), .20) !important;
}

/* =========================================================
   MOBILE TUNING
   ========================================================= */
@media (max-width: 992px){
  .fb-site-logo{ height: 64px !important; }
  .navbar-brand img{ height: 64px !important; }
  .fb-logo-wrap{ padding: 6px 10px !important; }
  .navbar-nav .nav-link{ padding: .5rem .7rem !important; }
}

@media (max-width: 576px){
  .fb-site-logo{ height: 56px !important; }
  .navbar-brand img{ height: 56px !important; }
}

/* =========================
   FIX #1: remove top empty space
   ========================= */

html, body{
  margin: 0 !important;
  padding: 0 !important;
}

.navbar.navbar-dark.bg-dark{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

main.fb-main{
  padding-top: 0 !important;
}

body > nav.navbar{
  margin-top: 0 !important;
}

/* =========================
   FIX #2: make dropdown items obvious
   ========================= */

.fb-hover-dd > .fb-nav-split .fb-nav-main{
  position: relative;
  padding-left: .9rem;
}

.fb-hover-dd > .fb-nav-split .fb-nav-main::before{
  content: "";
  position: absolute;
  left: .35rem;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: rgba(255,200,0,.75);
  box-shadow: 0 0 12px rgba(255,200,0,.35);
  opacity: .9;
}

.fb-hover-dd > .fb-nav-split .fb-nav-caret{
  opacity: .85;
  transition: transform .16s ease, opacity .16s ease, filter .16s ease;
}

.fb-hover-dd:hover > .fb-nav-split .fb-nav-caret{
  opacity: 1;
  transform: translateY(-1px) rotate(180deg);
  filter: drop-shadow(0 0 10px rgba(255,200,0,.25));
}

.fb-hover-dd:hover > .fb-nav-split .fb-nav-main{
  color: rgba(255,255,255,1) !important;
}
.fb-hover-dd:hover > .fb-nav-split .fb-nav-main::after{
  content:"";
  position:absolute;
  right:.2rem;
  left:.2rem;
  bottom:.2rem;
  height:2px;
  background: linear-gradient(90deg, rgba(255,200,0,0), rgba(255,200,0,.55), rgba(255,200,0,0));
  opacity: .9;
}

/* =========================
   FIX: search box not clickable
   ========================= */

.nav-searchbox{
  position: relative !important;
  z-index: 3000 !important;
  pointer-events: auto !important;
}

.navbar.navbar-dark.bg-dark::before,
.navbar.navbar-dark.bg-dark::after{
  pointer-events: none !important;
}

.navbar-nav .nav-link::before,
.navbar-nav .nav-link::after{
  pointer-events: none !important;
}

.nav-searchbox *{
  pointer-events: none !important;
}

/* ✅ REMOVE logo box/card */
.fb-logo-wrap{
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.fb-logo-wrap:hover{
  transform: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.fb-site-logo{
  filter: none !important;
  transform: none !important;
}

.fb-logo-wrap:hover .fb-site-logo{
  transform: none !important;
  filter: none !important;
}

/* ✅ Remove dropdown caret + fix spacing in navbar items */
.fb-nav-split{
  gap: 0 !important;
}

/* ✅ FIX: caret hidden ONLY on desktop (hover exists) */
@media (min-width: 992px){
  .fb-nav-split .fb-nav-caret{
    display: none !important;
  }
}

/* ✅ FIX: caret visible on mobile so user can tap to see genres */
@media (max-width: 991.98px){
  .fb-nav-split .fb-nav-caret{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: .35rem .55rem;
  }
}

/* padding for text */
.fb-nav-split .fb-nav-main{
  padding-left: .6rem !important;
  padding-right: .6rem !important;
}

.fb-hover-dd > .fb-nav-split .fb-nav-main{
  padding-left: .75rem !important;
}

/* =========================================================
   ✅ Qualities Modal (SAFE Scoped Dark UI)
   ========================================================= */

#qualitiesModal { z-index: calc(var(--fb-overlay-z, 20050) + 20) !important; }

#qualitiesModal .modal-content{
  background: #0d0f12 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  color: rgba(255,255,255,.92) !important;
}

#qualitiesModal .modal-header{
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  position: relative;
}

#qualitiesModal .modal-title{
  color: #fff !important;
  font-weight: 800;
}

#qualitiesModal .modal-body .border{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
}

#qualitiesModal .modal-body .d-flex{
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#qualitiesModal .modal-body .quality-meta,
#qualitiesModal .modal-body span,
#qualitiesModal .modal-body div{
  color: rgba(255,255,255,.85) !important;
}

#qualitiesModal a.btn{
  background: #ff7a00 !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}
#qualitiesModal a.btn:hover{ background: #ff9f2d !important; }

/* =========================================================
   HARD FIX: navbar must never overlap content
   (JS will set --fb-navbar-h dynamically)
   ========================================================= */

body{
  padding-top: var(--fb-navbar-h, 96px) !important;
}

/* slider / hero always starts below navbar */
#topCarousel,
.fb-hero.fb-hero--fullbleed{
  margin-top: 0 !important;
}

/* =========================================================
   HARD FIX: mobile dropdowns stable inside collapse
   ========================================================= */
@media (max-width: 991.98px){
  /* prevent Popper from absolute positioning in mobile nav */
  .navbar .dropdown-menu,
  .navbar .dropdown-menu[data-bs-popper]{
    position: static !important;
    transform: none !important;
    inset: auto !important;
    width: 100% !important;
    margin-top: .35rem !important;
    max-height: 60vh;
    overflow: auto;
  }

  .navbar .dropdown-menu.show{
    display: block !important;
  }

  /* make caret always tappable on mobile (force override) */
  .navbar .fb-nav-split .fb-nav-caret{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: .45rem .6rem !important;
  }
}

/* hide caret only on desktop */
@media (min-width: 992px){
  .navbar .fb-nav-split .fb-nav-caret{
    display: none !important;
  }
}


/* ======================================================
   QUALITIES MODAL – COMPACT + ALIGNED (LIKE YOUR 2nd PIC)
   Safe override – scoped to #qualitiesModal only
====================================================== */

/* هر ردیف: کیفیت (راست) | متن (وسط) | دکمه (چپ) */
#qualitiesModal .modal-body .border{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  /* فشرده‌تر مثل عکس دوم */
  padding: 10px 12px !important;
}

/* عنصر کیفیت (480p/720p/BLURAY) */
#qualitiesModal .modal-body .border > :is(.fw-semibold, .quality, .quality-label, .quality-name){
  order: 1 !important;              /* اول بیاد (RTL => سمت راست) */
  min-width: 72px !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-weight: 700 !important;
}

/* متن حجم و قیمت (وسط) */
#qualitiesModal .modal-body .border > :is(.quality-meta, .meta, .download-meta, small){
  order: 2 !important;
  flex: 1 1 auto !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  opacity: .9 !important;
}

/* دکمه خرید و دانلود (چپ) — هم a هم button */
#qualitiesModal .modal-body .border > :is(a.btn, button.btn, a.download-btn, button.download-btn){
  order: 3 !important;              /* آخر بیاد (RTL => سمت چپ) */
  min-width: 120px !important;
  white-space: nowrap !important;
}

/* اگر بعضی ردیف‌ها کیفیت/متا کلاس نداشتن و ترتیب بهم می‌ریخت،
   این دو تا حالت رایج رو هم پوشش می‌ده */
#qualitiesModal .modal-body .border > :is(a.btn, button.btn):first-child{ order: 3 !important; }
#qualitiesModal .modal-body .border > :is(a.btn, button.btn):last-child{  order: 3 !important; }

/* ضربدر مودال سفید */
#qualitiesModal .modal-header .btn-close{
  filter: invert(1) !important;
  opacity: .9 !important;
}
#qualitiesModal .modal-header .btn-close:hover{
  opacity: 1 !important;
}

/* ===========================
   Series stacked poster effect
   =========================== */

.fb-row-item.fb-has-stack{
  position: relative;
  overflow: visible !important; /* مهم: تا لایه‌های پشت قیچی نشن */
}

/* دو لایه پشت کارت */
.fb-row-item.fb-has-stack::before,
.fb-row-item.fb-has-stack::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;        /* با کارت هماهنگ کن */
  background-image: var(--fb-stack-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* لایه‌ها پشت کارت */
  z-index: 0;
  pointer-events: none;

  /* حالت نرم مثل نمونه */
  opacity: .22;
  filter: blur(.2px) saturate(.9) contrast(.95);
}

/* لایه اول پشت */
.fb-row-item.fb-has-stack::before{
  transform: translate(10px, -10px) rotate(1.2deg);
  opacity: .18;
}

/* لایه دوم پشت */
.fb-row-item.fb-has-stack::after{
  transform: translate(5px, -5px) rotate(.6deg);
  opacity: .26;
}

/* خود کارت باید بالاتر از لایه‌های پشت باشه */
.fb-row-item.fb-has-stack > a{
  position: relative;
  z-index: 2;
  border-radius: 18px;
}

/* اگر خود کارت/تصویر overflow hidden دارد مشکلی نیست،
   چون افکت روی fb-row-item است و بیرون کارت دیده می‌شود. */

/* ===============================
   FB Mega Menu (3 columns)
   اضافه شود ته styles.css
   =============================== */

.fb-mega-menu{
  width: min(780px, 92vw);
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10, 12, 16, .97);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* grid 3 ستونه */
.fb-mega-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 12px;
}

/* آیتم */
.fb-mega-item{
  padding: 9px 10px;
  border-radius: 10px;
  white-space: normal;
  line-height: 1.4;
}

/* hover */
.fb-mega-item:hover{
  background: rgba(255,255,255,.08) !important;
}

/* موبایل: 2 ستون */
@media (max-width: 768px){
  .fb-mega-menu{ width: min(560px, 92vw); }
  .fb-mega-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* خیلی کوچیک: 1 ستون */
@media (max-width: 420px){
  .fb-mega-grid{ grid-template-columns: 1fr; }
}