/* ============================================================
   MINIFLIX — Global stylesheet
   Pure vanilla CSS · dark + gold · mobile-first
   ============================================================ */

/* ---------- CSS Variables / Theme ---------- */
:root {
  --bg-0: #000000;
  --bg-1: #0a0a0a;
  --bg-2: #111111;
  --bg-3: #181818;
  --bg-4: #222222;

  --text-0: #ffffff;
  --text-1: #e6e6e6;
  --text-2: #b3b3b3;
  --text-3: #777777;

  --neon: #ffd700;
  --neon-2: #ffd700;
  --neon-dim: rgba(255, 215, 0, 0.18);
  --neon-glow: 0 0 12px rgba(255, 215, 0, 0.45),
               0 0 28px rgba(255, 215, 0, 0.25);

  --radius: 10px;
  --shadow-1: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 10px 32px rgba(0, 0, 0, 0.7);

  --header-h: 64px;

  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, sans-serif;

  --container: 1320px;
}

/* ---------- FOUC prevention ---------- */
html.fouc-hidden { visibility: hidden; }

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { width: 100%; min-height: 100%; }

body {
  font-family: var(--font-stack);
  background: var(--bg-0);
  color: var(--text-1);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a  { color: inherit; text-decoration: none; }
button {
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit;
}
input, select, textarea { font: inherit; color: inherit; }

/* ---------- Scrollbar (mobile + global) ---------- */
::-webkit-scrollbar         { width: 0px; height: 0px; background: transparent; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: transparent; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: transparent; }
* { scrollbar-width: none; scrollbar-color: transparent transparent; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
   HEADER + NAVIGATION
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--neon);
  text-shadow: var(--neon-glow);
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: var(--neon-glow);
}
.nav-links {
  display: flex;
  gap: 6px;
  align-items: center;
  list-style: none;
}
.nav-links a {
  display: inline-block;
  padding: 8px 14px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-1);
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--neon);
  background: var(--neon-dim);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* Mobile-only search list item — hidden on desktop so it doesn't
   push the desktop nav layout around. Enabled again in the mobile
   media query below. */
.nav-search-mobile { display: none; }
.nav-search-form   { display: flex; }

/* Language selector */
.lang-selector {
  position: relative;
}
.lang-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: var(--bg-2);
  font-size: 0.9rem;
}
.lang-toggle:hover { border-color: var(--neon); box-shadow: var(--neon-glow); }
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 170px;
  background: var(--bg-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s, transform 0.18s;
  z-index: 1100;
}
.lang-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.lang-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s;
}
.lang-item:hover { background: var(--bg-3); color: var(--neon); }
.lang-item.active { color: var(--neon); background: var(--neon-dim); }
.lang-flag { font-size: 1.15rem; }

/* Hamburger / mobile nav */
.menu-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
  content: '';
  display: block;
  width: 22px; height: 2px;
  background: var(--text-1);
  position: relative;
  transition: transform 0.2s;
}
.menu-toggle span::before { position: absolute; top: -7px; }
.menu-toggle span::after  { position: absolute; top:  7px; }

/* Search bar */
.search-form {
  display: flex;
  align-items: center;
  gap: 6px;
}
.search-form input {
  width: 180px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  outline: none;
  font-size: 0.88rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-form input:focus {
  border-color: var(--neon);
  box-shadow: var(--neon-glow);
}
.search-form button {
  padding: 8px 12px;
  background: var(--neon);
  color: var(--bg-0);
  border-radius: 8px;
  font-weight: 600;
}
.search-form button:hover { box-shadow: var(--neon-glow); }

/* ============================================================
   HERO SECTION (INDEX)
   ============================================================ */
.hero {
  position: relative;
  height: 90vh;
  min-height: 540px;
  max-height: 760px;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.55) saturate(1.05);
  z-index: -2;
  transition: opacity 0.6s ease;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.20) 0%,
    rgba(0,0,0,0.55) 45%,
    rgba(0,0,0,0.95) 100%
  );
  z-index: -1;
}
.hero-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 20px 80px;
  max-width: var(--container);
  margin: 0 auto;
}
.hero-tag {
  display: inline-block;
  background: var(--neon);
  color: var(--bg-0);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 14px;
  text-transform: uppercase;
  width: max-content;
  box-shadow: var(--neon-glow);
}
.hero-title {
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--text-0);
  margin-bottom: 14px;
  max-width: 800px;
  text-shadow: 0 4px 16px rgba(0,0,0,0.7);
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 14px;
  font-size: 0.95rem;
  color: var(--text-2);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); }
.hero-overview {
  font-size: 1.0rem;
  color: var(--text-1);
  margin-bottom: 26px;
  max-width: 700px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center;
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 1px;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, color 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--neon);
  color: var(--bg-0);
}
.btn-primary:hover {
  box-shadow: var(--neon-glow);
  transform: translateY(-1px);
}
.btn-secondary {
  background: rgba(255,255,255,0.08);
  color: var(--text-0);
  border: 1px solid rgba(255,255,255,0.16);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.16);
  border-color: var(--neon);
  color: var(--neon);
}
.btn-ghost {
  background: transparent;
  color: var(--text-1);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 10px 18px;
  font-size: 0.85rem;
}
.btn-ghost:hover { border-color: var(--neon); color: var(--neon); }

/* ============================================================
   SECTIONS (Title + Grid)
   ============================================================ */
.section { padding: 60px 0 40px; }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 26px;
  gap: 16px;
}
.section-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-0);
  display: flex; align-items: center; gap: 12px;
}
.section-title::before {
  content: '';
  width: 4px; height: 22px;
  background: var(--neon);
  border-radius: 2px;
  box-shadow: var(--neon-glow);
}
.section-link {
  color: var(--text-2);
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color 0.2s;
}
.section-link:hover { color: var(--neon); }

/* Movie grid */
.movie-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

/* Movie card */
.movie-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
  isolation: isolate;
  display: block;
  text-decoration: none;
  color: inherit;
}
.movie-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2), 0 0 0 1px var(--neon-dim);
}
.poster-wrap {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--bg-3);
}
.poster-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.movie-card:hover .poster-wrap img { transform: scale(1.05); }
.poster-rating {
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(0,0,0,0.7);
  color: var(--neon);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 4px 8px;
  border-radius: 6px;
  display: flex; align-items: center; gap: 4px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,215,0,0.18);
}
.poster-play {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}
.poster-play::before {
  content: '';
  width: 56px; height: 56px;
  background: var(--neon);
  border-radius: 50%;
  box-shadow: var(--neon-glow);
  position: absolute;
}
.poster-play::after {
  content: '';
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--bg-0);
  position: relative;
  margin-left: 4px;
  z-index: 2;
}
.movie-card:hover .poster-play { opacity: 1; }

.card-info {
  padding: 12px 14px 14px;
}
.card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-0);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-meta {
  font-size: 0.78rem;
  color: var(--text-3);
  display: flex; align-items: center; gap: 6px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--bg-1);
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 80px;
  padding: 50px 0 20px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 36px;
}
.footer-brand .brand { margin-bottom: 12px; font-size: 1.6rem; }
.footer-desc {
  color: var(--text-2);
  font-size: 0.92rem;
  max-width: 360px;
  line-height: 1.6;
}
.footer-col h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--neon);
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col a {
  color: var(--text-2);
  font-size: 0.92rem;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--neon); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 20px;
  text-align: center;
  color: var(--text-3);
  font-size: 0.85rem;
}

/* ============================================================
   PAGINATION (Category / Search)
   ============================================================ */
.pagination {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 40px auto 0;
}
.page-btn {
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  transition: all 0.2s;
}
.page-btn:hover:not(:disabled) {
  border-color: var(--neon);
  color: var(--neon);
}
.page-btn.active {
  background: var(--neon);
  color: var(--bg-0);
  border-color: var(--neon);
  box-shadow: var(--neon-glow);
}
.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.page-info {
  color: var(--text-3);
  font-size: 0.88rem;
  padding: 0 8px;
}

/* ============================================================
   MOVIE DETAIL (movie.html)
   ============================================================ */
.detail-hero {
  position: relative;
  padding-top: calc(var(--header-h) + 30px);
  padding-bottom: 40px;
  background: var(--bg-1);
  overflow: hidden;
}
.detail-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(40px) brightness(0.35) saturate(1.2);
  z-index: 0;
}
.detail-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, var(--bg-1) 95%);
  z-index: 0;
}
.detail-hero-content {
  position: relative; z-index: 1;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.detail-poster {
  width: 280px;
  flex-shrink: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.detail-poster img { width: 100%; display: block; }
.detail-info { flex: 1; min-width: 0; }
.detail-title {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 800;
  color: var(--text-0);
  margin-bottom: 14px;
  line-height: 1.1;
}
.detail-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 18px;
  color: var(--text-2);
  font-size: 0.95rem;
}
.detail-meta .badge {
  background: var(--neon-dim);
  color: var(--neon);
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.82rem;
  border: 1px solid rgba(255,215,0,0.2);
}
.detail-genres {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 22px;
}
.genre-pill {
  padding: 5px 12px;
  background: var(--bg-3);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--text-1);
  border: 1px solid rgba(255,255,255,0.08);
}
.detail-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 30px;
}

/* Player section */
.player-section {
  background: var(--bg-0);
  padding: 30px 0 20px;
}
.player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse at center, rgba(255,215,0,0.06) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(135deg, #0a0a0a 0%, #000 100%);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  border: 1px solid rgba(255,215,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-wrap:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 4px;
}
.player-wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  z-index: 2;
}

/* Big clickable play overlay INSIDE the player */
.player-play-btn {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.15s;
  outline: none;
}
.player-play-btn:hover,
.player-play-btn:focus-visible {
  background: rgba(0, 0, 0, 0.35);
}
.player-play-btn:active {
  transform: scale(0.98);
}
.player-play-btn .play-circle {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--neon);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--neon-glow), 0 0 0 0 rgba(255, 215, 0, 0.4);
  transition: transform 0.2s, box-shadow 0.25s;
}
.player-play-btn:hover .play-circle {
  transform: scale(1.08);
  box-shadow: var(--neon-glow), 0 0 0 10px rgba(255, 215, 0, 0.12);
}
.player-play-btn .play-triangle {
  width: 0; height: 0;
  border-style: solid;
  border-width: 16px 0 16px 24px;
  border-color: transparent transparent transparent var(--bg-0);
  margin-left: 6px;
}
.player-play-btn .play-text {
  color: var(--text-0);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
@media (max-width: 768px) {
  .player-play-btn .play-circle { width: 72px; height: 72px; }
  .player-play-btn .play-triangle {
    border-width: 13px 0 13px 20px;
    margin-left: 4px;
  }
  .player-play-btn .play-text { font-size: 0.85rem; letter-spacing: 2px; }
}
.player-controls {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 14px;
  align-items: center;
}
.player-controls .label {
  color: var(--text-3);
  font-size: 0.85rem;
  margin-right: 4px;
}
.server-btn {
  padding: 8px 18px;
  background: var(--bg-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--text-1);
  font-weight: 600;
  font-size: 0.88rem;
  transition: all 0.2s;
}
.server-btn:hover { color: var(--neon); border-color: var(--neon); }
.server-btn.active {
  background: var(--neon);
  color: var(--bg-0);
  border-color: var(--neon);
  box-shadow: var(--neon-glow);
}

/* Cast */
.cast-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.cast-card { text-align: center; }
.cast-avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-3);
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.06);
}
.cast-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cast-name { font-size: 0.86rem; color: var(--text-1); font-weight: 600; }
.cast-char { font-size: 0.76rem; color: var(--text-3); }

/* ============================================================
   MODAL (Trailer popup)
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open {
  display: flex;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-shell {
  position: relative;
  width: 100%;
  max-width: 960px;
}
.modal-close {
  position: absolute;
  top: -52px;
  right: -8px;
  width: 42px; height: 42px;
  background: var(--neon);
  color: var(--bg-0);
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--neon-glow);
  cursor: pointer;
  z-index: 5;
  transition: transform 0.15s;
}
.modal-close:hover { transform: scale(1.08); }
.modal-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  border: 1px solid rgba(255,215,0,0.18);
}
.modal-video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--neon);
  color: var(--bg-0);
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 3000;
  box-shadow: var(--neon-glow);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   LOADING / EMPTY STATES
   ============================================================ */
.loader {
  display: inline-block;
  width: 48px; height: 48px;
  border: 4px solid rgba(255,215,0,0.15);
  border-top-color: var(--neon);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.center-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 20px;
  text-align: center;
  color: var(--text-2);
}
.center-state h2 { color: var(--text-0); font-size: 1.6rem; }
.center-state p { max-width: 500px; }

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media (max-width: 1024px) {
  .movie-grid   { grid-template-columns: repeat(4, 1fr); }
  .cast-grid    { grid-template-columns: repeat(4, 1fr); }
  .footer-grid  { grid-template-columns: 1fr 1fr; }
  .detail-poster { width: 220px; }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 768px) {
  /* Header / nav */
  .nav-inner { gap: 8px; padding-right: 8px; }
  .brand { font-size: 1.15rem; letter-spacing: 1.5px; }
  .brand-dot { width: 8px; height: 8px; }
  .lang-toggle { padding: 6px 10px; font-size: 0.85rem; }

  /* Off-canvas mobile menu — full-width drawer under the header.
     We use max-height (with overflow:hidden) instead of transform so
     the menu can never be clipped by any ancestor's overflow rule,
     and we keep a high z-index so it never sits behind the header. */
  .nav-links {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    background: rgba(0,0,0,0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: max-height 0.28s ease, padding 0.28s ease;
    z-index: 1001;          /* sit on TOP of the header bar */
    visibility: hidden;
  }
  .nav-links.open {
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: 12px 20px 20px;
    visibility: visible;
  }
  .nav-links a {
    padding: 14px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    border-radius: 0;
    white-space: nowrap;
  }

  /* Mobile-only search slot inside the off-canvas menu.
     Hidden on desktop; shown on mobile so the search column is
     always reachable, even when the hamburger menu is closed. */
  .nav-search-mobile { display: block; }
  .nav-search-form {
    display: flex;
    gap: 6px;
    width: 100%;
    padding: 6px 0 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 6px;
  }
  .nav-search-form input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    background: var(--bg-2);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    outline: none;
    font-size: 0.95rem;
    color: var(--text-0);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .nav-search-form input:focus {
    border-color: var(--neon);
    box-shadow: var(--neon-glow);
  }
  .nav-search-form button {
    padding: 10px 14px;
    background: var(--neon);
    color: var(--bg-0);
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
  }
  .menu-toggle {
    display: flex;
    flex: 0 0 auto;
    margin-left: 4px;
  }
  .search-form { display: none; }

  /* Hero */
  .hero { height: 80vh; min-height: 480px; }
  .hero-content { padding: 0 16px 50px; }
  .hero-actions { gap: 8px; }
  .btn { padding: 11px 18px; font-size: 0.85rem; }

  /* Sections */
  .section { padding: 40px 0 30px; }
  .section-title { font-size: 1.25rem; }
  .section-head { margin-bottom: 18px; }

  /* Category / Search pages: the first section sits directly under
     the fixed header on mobile, so without extra top padding the title
     gets hidden behind the navbar. Push it below the header. */
  body[data-page="category"] #cat-grid,
  body[data-page="category"] #cat-title,
  body[data-page="search"]   #search-grid,
  body[data-page="search"]   #search-head {
    /* No-op selector, kept for specificity if needed later */
  }
  body[data-page="category"] .section,
  body[data-page="search"]   .section {
    padding-top: 88px; /* header (64) + breathing room (24) */
  }

  /* Align the category/search page title to the RIGHT on mobile so it
     doesn't visually conflict with the back/forward edge of the screen. */
  body[data-page="category"] .section-head,
  body[data-page="search"]   .section-head {
    justify-content: flex-end;
    text-align: right;
  }

  /* Grids — phone: 2 cols on phone for cards */
  .movie-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cast-grid  { grid-template-columns: repeat(3, 1fr); gap: 10px; }

  /* Detail page mobile fix: prevent header overlap AND keep the
     poster close to the top of the viewport (was 100px which, on
     top of the parent's 94px header offset, pushed the poster way
     down the page). */
  .detail-hero-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 16px;
    gap: 24px;
  }
  .detail-poster {
    width: 180px;
    margin: 0 auto;
  }
  .detail-info { width: 100%; }
  .detail-meta, .detail-genres, .detail-actions { justify-content: center; }

  /* Footer — mobile: brand spans full width on top,
     then EXPLORE sits on the LEFT and CATEGORIES on the RIGHT,
     side-by-side. Desktop layout (3 cols) is untouched. Also pull the
     gap above the footer closer so the section/footer boundary looks
     tighter on phone screens. */
  .site-footer {
    margin-top: 32px;   /* was 80px — too far on mobile */
    padding: 28px 0 16px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    text-align: left;
    gap: 16px 24px;
  }
  .footer-brand {
    grid-column: 1 / -1;       /* full row */
    text-align: left;          /* match header brand — keeps MINIFLIX + tagline flush-left so they don't look unbalanced on mobile */
    margin-bottom: 8px;
  }
  .footer-brand .footer-desc { margin: 8px 0 0; max-width: 360px; }

  /* EXPLORE (first column) — left aligned */
  .footer-col:first-of-type {
    grid-column: 1;
    text-align: left;
    align-items: flex-start;
  }
  .footer-col:first-of-type ul {
    align-items: flex-start;
  }

  /* CATEGORIES (last column) — right aligned */
  .footer-col:last-child {
    grid-column: 2;
    text-align: right;
  }
  .footer-col:last-child ul {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }
  .footer-col:last-child li { text-align: right; }

  /* Pagination: tighter but still horizontal */
  .page-btn { min-width: 36px; height: 36px; padding: 0 10px; font-size: 0.85rem; }

  /* Player controls wrap */
  .player-controls { gap: 6px; }
  .server-btn { padding: 7px 12px; font-size: 0.82rem; }

  /* Modal close reposition on small screens */
  .modal-close {
    top: -46px;
    right: 0;
    width: 36px; height: 36px;
    font-size: 1.15rem;
  }

  /* Toast */
  .toast { font-size: 0.82rem; padding: 10px 18px; bottom: 20px; max-width: 90%; }
}

/* Phone extra small */
@media (max-width: 480px) {
  .hero-title { font-size: 1.9rem; }
  .detail-title { font-size: 1.5rem; }
  .movie-grid { gap: 10px; }

  /* Extra-small phones: keep header compact and ensure
     the hamburger is never squeezed off-screen. */
  .brand { font-size: 1rem; letter-spacing: 1px; }
  .brand-dot { width: 7px; height: 7px; }
  .lang-toggle { padding: 5px 8px; font-size: 0.8rem; }
  .menu-toggle { width: 36px; height: 36px; }

  /* Footer two-column can get tight on 360px — keep it but
     give columns a bit more breathing room. */
  .footer-grid { gap: 14px 16px; }
  .footer-col h4 { font-size: 0.85rem; letter-spacing: 1px; }
  .footer-col a  { font-size: 0.88rem; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.flex-center { display: flex; align-items: center; justify-content: center; }