/* ============================================================
   style.css — AnimeHunt Global Stylesheet
   Saari pages yahi import karti hain
   Netflix-level animations + skeleton shimmer included
   ============================================================ */

/* ============================================================
   1. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #000;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

/* ✅ FIX (bottom-nav positioning bug): the page-enter animation used to
   live directly on <body> and used transform: translateY(...). Per the
   CSS spec, an element with a transform (even a temporary one from an
   animation) becomes the containing block for all of its position:fixed
   descendants — so .bottom-nav (and any other fixed element) was fixed
   relative to <body>, not the viewport, making it visibly drift/scroll
   instead of staying pinned to the screen. The animation now lives on
   .main-header instead (position: sticky, which never causes this
   problem), so <body> never has a transform on it.
*/

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

a {
  color: inherit;
  text-decoration: none !important;
}

/* ============================================================
   2. SCROLLBAR REMOVAL
   ============================================================ */
*::-webkit-scrollbar {
  height: 0 !important;
  width: 0 !important;
  display: none !important;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* ============================================================
   3. HEADER
   ============================================================ */
.main-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 55px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow 0.3s ease, background 0.3s ease;
  /* ✅ Restores the entrance animation here instead of on <body> — see
     the fix note above .page-enter for why it moved. position: sticky
     (not fixed) never becomes a containing-block problem for other
     fixed elements, so this is safe. */
  animation: pageEnter 0.35s ease both;
}

.main-header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.98);
}

.menu-btn {
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: transform 0.2s ease, background 0.2s ease;
  user-select: none;
}

.menu-btn:hover  { background: rgba(255,255,255,0.06); }
.menu-btn:active { transform: scale(0.88); }

.logo {
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.logo .anime { color: #ffffff; }
.logo .hunt  { color: #ffcc00; }

.search-bar {
  margin-left: auto;
  width: 60%;
  height: 34px;
  border-radius: 25px;
  border: none;
  padding: 0 16px;
  font-size: 12px;
  background: #1a1f2e;
  color: #ccc;
  outline: none;
  transition: box-shadow 0.3s ease, width 0.3s ease, background 0.3s ease;
}

.search-bar::placeholder { color: #666; }

.search-bar:focus {
  box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.45);
  background: #1e253a;
  width: 65%;
}

/* ============================================================
   4. SIDEBAR
   ============================================================ */
.sidebar {
  position: fixed;
  top: 0;
  left: -270px;
  width: 265px;
  height: 100%;
  background: linear-gradient(180deg, #000 0%, #000 100%);
  z-index: 2000;
  padding: 22px 20px;
  transition: left 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s ease;
}

.sidebar.active {
  left: 0;
  box-shadow: 14px 0 60px rgba(0, 0, 0, 0.9);
}

.close-btn {
  font-size: 22px;
  cursor: pointer;
  margin-bottom: 22px;
  color: #fff;
  font-weight: 700;
  display: inline-block;
  transition: transform 0.2s ease, color 0.2s ease;
}

.close-btn:hover {
  transform: rotate(90deg);
  color: #ffcc00;
}

.sidebar-logo {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.sidebar-menu a {
  display: flex;
  align-items: center;
  padding: 12px 0;
  color: #d0d0d0;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: transform 0.22s ease, color 0.22s ease;
}

.sidebar-menu a:last-child { border-bottom: none; }

.sidebar-menu a:hover {
  transform: translateX(8px);
  color: #ffcc00;
}

/* ============================================================
   5. OVERLAY
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1500;
}

.overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* ============================================================
   6. SEARCH DROPDOWN
   ============================================================ */
.search-dropdown {
  position: fixed;
  top: 59px;
  right: 16px;
  width: 230px;
  max-height: 300px;
  background: #131826;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow-y: auto;
  z-index: 99999;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
  animation: dropIn 0.18s ease both;
}

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s ease;
}

.search-item:last-child { border-bottom: none; }
.search-item:hover { background: rgba(255, 204, 0, 0.08); }

.search-item img {
  width: 24px;
  height: 34px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}

.search-item span {
  font-size: 11px;
  color: #ddd;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   7. MOVIE CARD — Netflix-level hover
   ============================================================ */
.movie-card {
  aspect-ratio: 2 / 3;
  background: #1a1f2e;
  border-radius: 10px;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  font-size: 12px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Netflix cubic-bezier */
  transition:
    transform 0.32s cubic-bezier(0.2, 0, 0.2, 1),
    box-shadow 0.32s ease,
    filter 0.32s ease;
  will-change: transform;
}

.movie-card:hover {
  transform: translateY(-9px) scale(1.06);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.85);
  filter: brightness(1.08);
  z-index: 2;
}

.movie-card:active {
  transform: translateY(-4px) scale(1.02);
}

/* Card title overlay */
.card-title {
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px 8px 8px;
  font-size: 10px;
  color: #fff;
  border-radius: 0 0 10px 10px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* Rel cards (related/details) */
.rel-card {
  aspect-ratio: 2 / 3;
  background: #1a1f2e;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  align-items: flex-end;
  font-size: 12px;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.3s ease;
}

.rel-card:hover {
  transform: translateY(-7px) scale(1.05);
  box-shadow: 0 18px 40px rgba(0,0,0,0.8);
}

/* ============================================================
   8. SKELETON SHIMMER — Netflix style
   ============================================================ */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    #161b28 25%,
    #1e2538 50%,
    #161b28 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 10px;
}

/* Card skeleton */
.skeleton-card {
  aspect-ratio: 2 / 3;
  border-radius: 10px;
}

/* Hero banner skeleton */
.skeleton-hero {
  height: 260px;
  border-radius: 0;
}

/* Episode thumb skeleton */
.skeleton-ep {
  aspect-ratio: 16 / 9;
  border-radius: 6px;
}

/* Text line skeleton */
.skeleton-text {
  height: 11px;
  border-radius: 4px;
  margin-bottom: 7px;
  width: 80%;
}

.skeleton-text.w60 { width: 60%; }
.skeleton-text.w40 { width: 40%; }

/* ============================================================
   9. GRIDS
   ============================================================ */
.anime-grid,
.movies-grid,
.series-grid,
.cartoon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  animation: fadeUp 0.38s ease both;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.ep-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   10. CATEGORY / FILTER BAR
   ============================================================ */
.category-bar {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.type-filter {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
}

.category-bar button,
.type-filter button {
  height: 30px;
  padding: 0 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
  color: #ccc;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.22s ease;
}

.category-bar button:hover,
.type-filter button:hover {
  border-color: #ffcc00;
  color: #ffcc00;
  transform: translateY(-2px);
}

.category-bar button.active,
.type-filter button.active,
.category-bar .active,
.type-filter .active {
  background: #ffcc00;
  color: #000;
  border-color: #ffcc00;
  font-weight: bold;
}

/* ============================================================
   11. MOVIE ROW (HOME SCROLL ROWS)
   ============================================================ */
.movie-row {
  padding: 0 16px;
  margin-bottom: 36px;
}

.movie-row h2 {
  font-size: 17px;
  margin-bottom: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 11px;
}

.see-more-btn {
  background: none;
  border: none;
  color: #aaa;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.2s ease;
  text-decoration: none;
}

.see-more-btn:hover { color: #ffcc00; }

.movie-scroll {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 4px;
}

.movie-scroll .movie-card {
  min-width: 22%;
  flex-shrink: 0;
}

/* ============================================================
   12. PAGE BANNER (movies/anime/series/cartoon pages)
   ============================================================ */
.page-banner {
  height: 220px;
  display: flex;
  align-items: flex-end;
  padding: 20px 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.55)),
              #1a1f2e center / cover no-repeat;
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
}

.page-banner h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  position: relative;
  z-index: 1;
}

/* ============================================================
   13. PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 20px 0 80px;
  flex-wrap: wrap;
}

.pagination button {
  min-width: 34px;
  height: 34px;
  border-radius: 7px;
  border: 1px solid #2a3045;
  background: transparent;
  color: #ccc;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination button:hover:not(:disabled) {
  border-color: #ffcc00;
  color: #ffcc00;
  transform: translateY(-2px);
}

.pagination button.active {
  background: #ffcc00;
  color: #000;
  border-color: #ffcc00;
  font-weight: bold;
}

.pagination button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ============================================================
   14. A–Z NAV
   ============================================================ */
.az-nav {
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.az-nav span {
  font-size: 12px;
  cursor: pointer;
  color: #888;
  padding: 3px 5px;
  border-radius: 4px;
  transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
  user-select: none;
}

.az-nav span:hover {
  transform: scale(1.3);
  color: #ffcc00;
  background: rgba(255,204,0,0.08);
}

/* ============================================================
   15. FOOTER
   ============================================================ */
.main-footer {
  padding: 24px 16px 85px;
  background: #000;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.footer-links a {
  color: #777;
  font-size: 12px;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.footer-links a:hover { color: #ffcc00; }

.copyright {
  font-size: 11px;
  color: #444;
}

/* ============================================================
   16. BOTTOM NAV
   ============================================================ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Solid background stays transparent on the nav element itself —
     the black band is drawn by ::before below, sized to only reach
     the height of the 4 small icons (MOVIES/SERIES/ANIME/CARTOON),
     not the full bar (which is taller because it stretches to fit
     the bigger HOME icon). This keeps the HOME wolf icon poking up
     above the black band instead of being covered by it. */
  height: auto;
  padding: 2px 0 6px;
  background: transparent;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  z-index: 1200;
}

/* ✅ Black background band for the footer nav — rises just behind the
   4 regular icons (MOVIES/SERIES/ANIME/CARTOON) and stops there, so
   the taller HOME wolf icon stays uncovered above it. Height = small
   nav-item's natural content height (18px icon + 4px gap + ~12px
   label + 10px bottom padding) plus the bar's own bottom padding. */
.bottom-nav::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background: #000;
  z-index: -1;
}

/* ✅ Icon-based nav item — icon on top, label below, matching the
   provided reference design. */
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex-end still matters here even with an auto-height parent: when
     .bottom-nav stretches to fit its tallest child (HOME), the other
     4 items are stretched to match that height by align-items:stretch
     above — flex-end keeps their labels anchored to the bottom instead
     of floating in the middle of that extra space. */
  justify-content: flex-end;
  gap: 4px;
  font-size: 10px;
  color: #888;
  cursor: pointer;
  text-decoration: none !important;
  padding: 0 10px 10px;
  border-radius: 8px;
  transition: color 0.22s ease, transform 0.22s ease, background 0.22s ease;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.3px;
  font-weight: 600;
  position: relative;
}

.nav-item img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.22s ease, filter 0.22s ease, transform 0.22s ease;
}

.nav-item:hover img { opacity: 0.9; }
.nav-item:hover { color: #ccc; }

.nav-item.active {
  color: #ffcc00;
  font-weight: bold;
}

/* Active state shows via the underline bar only (see .nav-item.active::after
   below) — no icon size or color/glow change, per explicit request. */

/* HOME sits centered and slightly larger, matching the reference design —
   it's the primary tab, so it gets a bit more visual weight than the
   other four. */
.nav-item.nav-home img {
  width: 38px;
  height: 38px;
}

/* HOME's icon does not change when active either — same reasoning as
   the general .nav-item.active rule above. */

/* Active-tab underline bar beneath the icon+label, matching the
   reference design's gold bar under HOME. */
.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: #ffcc00;
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.7);
}

/* ============================================================
   17. EPISODE CARD
   ============================================================ */
.ep-card {
  width: 100%;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.ep-card:hover { transform: translateY(-3px); }

.ep-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111827;
  border-radius: 7px;
  overflow: hidden;
}

.ep-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.ep-card:hover .ep-thumb img {
  transform: scale(1.04);
}

.ep-no {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}

.ep-card p {
  margin-top: 5px;
  font-size: 11px;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   18. SECTION / DIVIDERS
   ============================================================ */
.line {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 12px 0;
}

.section { padding: 16px; }
.section h2 { font-size: 18px; margin-bottom: 12px; }

.grid-wrap { padding: 0 16px 20px; }

/* ============================================================
   19. PLAYER MESSAGE OVERLAY
   ============================================================ */
#player-message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.85);
  color: #ccc;
  font-size: 14px;
  text-align: center;
  z-index: 10;
  line-height: 1.8;
}

/* ============================================================
   20. HERO BANNER (index.html)
   ============================================================ */
.hero-banner {
  position: relative;
  height: 265px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  overflow: hidden;
  background: center / cover no-repeat;
  /* Crossfade transition */
  transition: background-image 0.5s ease;
}

.hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.1) 0%,
    rgba(0,0,0,0.05) 40%,
    rgba(0,0,0,0.7) 100%
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 65%;
}

.hero-title {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 7px;
  line-height: 1.15;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  /* Animate in per slide */
  animation: heroTextIn 0.5s ease both;
}

@keyframes heroTextIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.hero-meta {
  font-size: 12px;
  color: #ccc;
  margin-bottom: 13px;
  display: flex;
  gap: 8px;
}

.play-btn {
  position: relative;
  z-index: 3;
  height: 36px;
  padding: 0 22px;
  background: #ffcc00;
  border: none;
  border-radius: 20px;
  color: #000;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.play-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(255,204,0,0.4);
}

.play-btn:active { transform: scale(0.97); }

/* ============================================================
   21. HOME GRID (category filter mode)
   ============================================================ */
.home-grid {
  padding: 0 16px 40px;
  display: none;
}

.home-grid.active {
  display: grid;
  gap: 9px;
  animation: fadeUp 0.35s ease both;
}

.home-grid .movie-card { min-width: unset; }
body.grid-mode .movie-row { display: none; }

/* ============================================================
   22. DOWNLOAD PAGE
   ============================================================ */
.download-backdrop {
  height: 200px;
  background: center / cover no-repeat;
  position: relative;
}

.download-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), #000);
}

/* ============================================================
   23. HISTORY PAGE
   ============================================================ */
.grid {
  display: grid;
  gap: 10px;
}

.card {
  aspect-ratio: 2 / 3;
  background: #1a1f2e;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 11px;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.28s ease;
}

.card:hover {
  transform: translateY(-7px) scale(1.04);
  box-shadow: 0 18px 40px rgba(0,0,0,0.8);
}

.clear-btn {
  background: #ff4c4c;
  border: none;
  padding: 8px 14px;
  border-radius: 7px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.clear-btn:hover {
  background: #e03030;
  transform: scale(1.03);
}

.actions {
  padding: 16px;
  display: flex;
  justify-content: flex-end;
}

/* ============================================================
   24. SEASON LIST DROPDOWN
   ============================================================ */
.season-list {
  background: #131826;
  border-radius: 9px;
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  animation: dropIn 0.2s ease both;
}

.season-list div {
  padding: 11px 14px;
  font-size: 12px;
  color: #ddd;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.season-list div:last-child { border-bottom: none; }
.season-list div:hover {
  background: rgba(255, 204, 0, 0.07);
  color: #ffcc00;
}

/* ============================================================
   25. ABOUT SECTION (details + watch pages)
   ============================================================ */
.about {
  padding: 18px 16px;
}

.about h2 {
  font-size: 17px;
  margin-bottom: 10px;
}

.about ul {
  list-style: none;
  font-size: 13px;
  margin-bottom: 10px;
}

.about li {
  margin-bottom: 7px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.about p {
  font-size: 12px;
  color: #bbb;
  line-height: 1.65;
}

/* Episodes section */
.episodes { padding: 14px 16px; }
.related  { padding: 14px 16px; }
.related h3 { font-size: 15px; margin-bottom: 10px; }

/* ============================================================
   26. MISC UTILITY
   ============================================================ */
section, div {
  border: 0 !important;
  outline: 0 !important;
}

.imdb {
  background: #ffcc00;
  color: #000;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 11px;
}

/* ============================================================
   27. RESPONSIVE — TABLET & DESKTOP
   ============================================================
   Everything above this point was written mobile-first with no
   breakpoints at all, so on a wide screen the 4-column grid just
   stretched each card to a huge size instead of showing more
   columns — confirmed by measuring an actual card at ~310px wide
   on a 1440px viewport. These breakpoints scale the grid, cap
   content width so it doesn't spread edge-to-edge on very wide
   screens, and move navigation from the mobile bottom-tab-bar to
   the header for larger screens (standard practice — a fixed
   bottom bar is a mobile/touch pattern, not a desktop one).
   ============================================================ */

/* ---- Tablet (≥768px): 2 extra grid columns, wider hero ---- */
@media (min-width: 768px) {
  .anime-grid, .movies-grid, .series-grid, .cartoon-grid, .related-grid, .home-grid, .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .ep-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .movie-scroll .movie-card {
    min-width: 15%;
  }

  .page-banner { height: 280px; }
  .page-banner h1 { font-size: 34px; }

  .main-header, .movie-row, .page-banner, .about, .episodes,
  .related, .category-bar, .type-filter, .az-nav, .main-footer,
  .pagination {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* ---- Desktop (≥1024px): content max-width, more columns,
        bottom-nav replaced by inline header nav ---- */
@media (min-width: 1024px) {
  body {
    max-width: 1400px;
    margin: 0 auto;
  }

  .anime-grid, .movies-grid, .series-grid, .cartoon-grid, .related-grid, .home-grid, .grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
  }

  .ep-grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .movie-scroll .movie-card {
    min-width: 12.5%;
  }

  .search-bar {
    width: 320px;
  }
  .search-bar:focus {
    width: 340px;
  }

  /* The mobile bottom-tab-bar becomes an inline row in the header
     on desktop — hidden here, shown via .desktop-nav below (added
     to each HTML file's header alongside .bottom-nav). */
  .bottom-nav {
    display: none;
  }

  .main-footer {
    padding-bottom: 40px;
  }

  .page-banner { height: 320px; }
  .page-banner h1 { font-size: 40px; }

  .movie-row { margin-bottom: 44px; }
  .movie-row h2 { font-size: 20px; }
}

/* ---- Desktop nav (inline, header-based) — only relevant once
        .desktop-nav exists in the header markup; harmless no-op
        until then. Mirrors .nav-item's look without the mobile
        icon-stack layout. ---- */
.desktop-nav {
  display: none;
}

@media (min-width: 1024px) {
  .desktop-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: 24px;
  }

  .desktop-nav a {
    color: #aaa;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none !important;
    padding: 6px 2px;
    position: relative;
    transition: color 0.2s ease;
  }

  .desktop-nav a:hover { color: #ddd; }

  .desktop-nav a.active {
    color: #ffcc00;
  }

  .desktop-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: #ffcc00;
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.7);
  }
}

/* ---- Wide desktop (≥1440px): one more column ---- */
@media (min-width: 1440px) {
  .anime-grid, .movies-grid, .series-grid, .cartoon-grid, .related-grid, .home-grid, .grid,
  .ep-grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .movie-scroll .movie-card {
    min-width: 11%;
  }
}