/* Dark, easy-on-the-eyes theme + stacked featured cards */

:root{
  --bg: #0f1720;           /* page background */
  --panel: #111827;        /* card background */
  --panel-2: #0f1724;      /* slightly different panel tone */
  --muted: #9aa4af;
  --text: #e6eef6;
  --accent: #5b93ff;
  --card-border: rgba(255,255,255,0.04);
  --caption-bg: rgba(0,0,0,0.45);
  --container-max: 980px;
}

html,body{ height:100%; }

body{
  background: linear-gradient(180deg, var(--bg) 0%, #081018 100%);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  -webkit-font-smoothing:antialiased;
}

/* constrain content width */
.container.py-4 { max-width: var(--container-max); padding-top:1.5rem; padding-bottom:2.5rem; }

/* carousel hero */
.slide-img {
  width:100%;
  height: min(60vh,520px);
  object-fit: contain;      /* show full poster */
  object-position: center;
  background: linear-gradient(180deg,#081018 0%, #0b1622 100%);
  display:block;
}

/* caption */
.carousel-caption {
  background: var(--caption-bg);
  border-radius: .5rem;
  padding: .9rem 1rem;
  color: var(--text);
}

/* cards */
.card {
  background: linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--card-border);
  border-radius: .6rem;
  box-shadow: 0 8px 24px rgba(2,6,23,0.6);
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
  color: var(--text);
}
.card:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(2,8,30,0.65); }

/* thumbnail poster */
.card-img-top {
  width:100%;
  height: 220px;
  object-fit: contain;
  object-position: center;
  background: linear-gradient(180deg,#061018, #0b1420);
  display:block;
  padding: .5rem;
}

/* featured stacked layout */
.featured-section { background: transparent; margin-top: 1.5rem; padding: 1rem 0 2rem; }
.stacked-featured { display: flex; flex-direction: column; gap: 1rem; align-items: center; padding: 0 0.5rem; }
.stacked-featured .stack-item { width: 100%; max-width: 900px; }

/* card body text */
.card-title { color: var(--text); font-weight:600; margin-bottom:.25rem; }
.card-text { color: var(--muted); font-size:.95rem; margin-bottom:.5rem; }

/* modal poster */
#homeModalPoster, #movieModalPoster, #modalPoster {
  max-width:100%;
  max-height:60vh;
  object-fit:contain;
  display:block;
  margin: 0 auto;
}

/* small helpers */
.badge { background: var(--accent); font-weight:600; color:#fff; }
.btn-outline-primary { color: var(--text); border-color: rgba(255,255,255,0.06); }
.btn-outline-primary:hover { background: rgba(91,147,255,0.08); border-color: var(--accent); color:var(--text); }

/* responsive tweaks */
@media (min-width: 992px){
  .slide-img { height: 520px; }
}

/* ...existing code... */

/* Modal: make content dark and text light to match site theme */
.modal-content {
  background: linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);
  color: var(--text);
  border: 1px solid var(--card-border);
  box-shadow: 0 10px 30px rgba(2,8,30,0.6);
}

/* remove white inner backgrounds and keep text readable */
.modal-header,
.modal-body,
.modal-footer {
  background: transparent;
  color: var(--text);
  border: 0;
}

/* ensure close button is visible on dark background */
.modal .btn-close {
  filter: invert(1) brightness(1.2);
  opacity: 0.9;
}

/* carousel caption text should be light */
.carousel-caption { color: var(--text); }

/* small tweak for badges inside dark modal if needed */
.modal .badge { background: var(--accent); color: #fff; }

.rating-badge {
  display:inline-block;
  color:#fff;
  font-weight:700;
  font-size:0.85rem;
  padding:.25rem .5rem;
  border-radius:.5rem;
  line-height:1;
  vertical-align:middle;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.rating-none { background: rgba(255,255,255,0.04); color: var(--muted); box-shadow:none; }
.rating-low  { background: linear-gradient(90deg,#b91c1c,#ef4444); }    /* bad (red) */
.rating-mid  { background: linear-gradient(90deg,#d97706,#f59e0b); }    /* meh (orange) */
.rating-high { background: linear-gradient(90deg,#16a34a,#34d399); }    /* good (green) */
.rating-perfect { background: linear-gradient(90deg,#029221,#098123); } /* great (blue) */
.rating-unwatchable { background: #000000; } /* unwatchable (gray) */