:root{
  --bb-primary:#121212;
  --bb-secondary:#1A1A1A;
  --bb-accent:#D4AF37;
  --bb-accent-soft:#B8962E;
  --bb-text:#F5F5F7;
  --bb-muted:#9A9A9A;
}

/* ===== MOVIE POSTER STYLE ===== */
.movie-poster{
  width:100%;
  height:250px;
  object-fit:cover;
  border-radius:12px;
  background:#000;
  cursor:pointer;
}

.poster-card{
  background:var(--bb-secondary);
  border-radius:14px;
  overflow:hidden;
  transition:transform .2s ease;
}

.poster-card:hover{transform:scale(1.02);}

.play-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:64px;
  color:rgba(255,255,255,.85);
  pointer-events:none;
}

/* ===== CAROUSEL ===== */
.carousel-inner .item::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:55%;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.85),
    rgba(0,0,0,.45),
    rgba(0,0,0,.05)
  );
  z-index:1;
}

.carousel-inner .item{
  position: relative;
}

.carousel-inner .item img{z-index:0; position:relative;}

.carousel-caption{
  z-index:2;
  text-align:left;
  left:5%;
  right:5%;
  bottom:60px;
}

/* Center carousel captions (override cinematic style) */
.carousel-caption{
  text-align:center !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%);
}


.carousel-caption h2{
  font-size:32px;
  font-weight:700;
  color:#FFF;
  text-shadow:0 4px 12px rgba(0,0,0,.9);
}

.carousel-caption h1{
  color:#E50914; /* Netflix / MovieBox red */
}

.bb-brand-title{
  text-align:center;
  color:#E50914;           /* MovieBox / Netflix red */
  font-weight:700;
  letter-spacing:2px;
  margin:20px 0;
}


/* ===== NAV BAR ===== */
.bb-nav{
  background:#1C1F26!important;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.bb-nav .w3-button{
  background:transparent!important;
  color:#EDEDED!important;
  font-weight:500;
}

.bb-nav .w3-button:hover{
  color:var(--bb-accent)!important;
  background:rgba(255,255,255,.04)!important;
}

.bb-nav .w3-dropdown-content{
  background:#1A1D23!important;
  border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,.6);
}

.bb-nav .w3-bar-item{color:#EDEDED!important;}

.bb-nav .w3-bar-item:hover{
  background:rgba(212,175,55,.12)!important;
  color:var(--bb-accent)!important;
}

.bb-nav{
  background:#1C1F26 !important;
}

.bb-nav > *{
  background-color: transparent !important;
}

/* ===== BEBICODE CARD ===== */
.bb-card{
  background:#1A1A1A;
  border-radius:14px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}

.bb-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}

/* Poster */
.bb-card-poster img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}

/* Body */
.bb-card-body{
  padding:12px 14px 16px;
}

/* Title */
.bb-card-title{
  font-size:16px;
  font-weight:600;
  line-height:1.3;
  margin:0 0 4px;
  color:#F5F5F7;
}

/* Meta */
.bb-card-meta{
  font-size:13px;
  color:#9A9A9A;
}


/* ===== GLOBAL ===== */
body{
  background:var(--bb-primary)!important;
  color:var(--bb-text)!important;
}

.w3-white{background:var(--bb-secondary)!important;color:var(--bb-text)!important;}
.w3-lime,.w3-light-green{background:var(--bb-primary)!important;}
.w3-red{color:var(--bb-accent)!important;background:none!important;}

a{color:var(--bb-accent)!important;text-decoration:none;}
a:hover{opacity:.85;}

button,input[type=submit]{
  background:var(--bb-accent)!important;
  color:#000!important;
  border-radius:6px;
  border:none!important;
}

input,select{
  background:#111!important;
  color:var(--bb-text)!important;
  border:1px solid rgba(212,175,55,.3)!important;
}

html, body{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  overflow:auto !important;
}

/* === FORCE OVERLAY FIX === */
.hero,
.carousel,
.carousel-inner,
.carousel-inner .item::before,
.carousel-inner .item::after,
.bb-overlay,
.bb-hero,
.bb-banner {
  pointer-events: none !important;
}

.dashboard-section,
#downloads,
#subscriptions,
#premieres {
  position: relative !important;
  z-index: 10 !important;
}
