/* ============================================================================
   SKMovies — Pixel-perfect clone of mlsbd.co
   Every value extracted from mlsbd.co's actual computed CSS.
   Rebranded (mlsbd → skmovies), ad-free, Cloudflare Pages SPA.
   ============================================================================ */

/* ─── Design Tokens (exact from mlsbd.co :root) ─────────────────────── */
:root {
  --font-primary: 'Exo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-secondary: 'Google Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --red: #fb1114;
  --black: #0a0909;
  --grey: #535353;

  --white: #ffffff;
  --card-bg: #ffffff;
  --card-bg-dark: #2d2d2d;
  --border: #eaeaea;
  --text-muted: #555555;
  --text-hint: #888888;
  --bg-dark: #202529;
  --link-blue: #1a7ae8;
  --link-hover: #c50003;
  --footer-text: #a5a5a5;
  --shadow-card: 0 5px 10px #999;
  --shadow-card-dark: 0 3px 10px var(--black);
  --radius: 10px;
  --radius-lg: 15px;
  --radius-pill: 30px;
  --gold: #f5de50;
  --green: #1ec972;
  --purple: #a86bff;
  --blue: #00d4ff;
  --maxw: 960px;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Reset (exact from mlsbd.co) ───────────────────────────────────── */
*, ::after, ::before { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAKklEQVQYV2N89+7dfwYoeP36NQMjTADEERUVhQjAOCCFjDdv3vwPkoEBAL8XF+r4Wri+AAAAAElFTkSuQmCC) repeat;
  transition: background 0.25s;
  color: var(--black);
  font-family: var(--font-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Dark UI (exact from mlsbd.co) */
.dark-ui body {
  background: #202529 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAKUlEQVQYV2NUUNX8zwAFAtzsDIwwARDnw9efEAEYB6SQ0cDA4D9IBgYAwKgO20hyNUEAAAAASUVORK5CYII=) repeat;
}
.dark-ui h1, .dark-ui h2, .dark-ui h3, .dark-ui h4, .dark-ui h5, .dark-ui h6, .dark-ui p { color: #eaeaea; }
.dark-ui hr { border-top: 1px solid rgb(255 255 255 / .2); }

img, picture { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; -webkit-tap-highlight-color: transparent; }
input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; color: var(--link-hover); }
a:hover h3 { color: var(--red); }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--link-blue); outline-offset: 2px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--grey); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

h1 { font-size: 1.5em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1em; }
h5 { font-size: .83em; }
h6 { font-size: .67em; }
p { margin-top: 0; }

/* ─── Containers (exact from mlsbd.co) ──────────────────────────────── */
.container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

.container-fluid { width: 100%; margin-right: auto; margin-left: auto; padding: 0; }

/* ─── Header (exact from mlsbd.co) ──────────────────────────────────── */
header { background: #fff; transition: background-color 0.25s; }
.dark-ui header { background: #202529; color: #eaeaea; }

.bar.social-bar { text-align: center; color: #fff; font-weight: 600; background: var(--bg-dark); padding: 5px 15px; display: flex; justify-content: space-between; align-items: center; }
.night-mode { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bar.social-bar > div { display: flex; align-items: center; gap: 6px; font-size: 14px; }

/* Dark mode toggle (exact moon switch from mlsbd.co) */
.toggleWrapper { display: inline-block; height: 25px; position: relative; top: 9px; margin-left: 5px; }
.toggleWrapper input { position: absolute; left: -99em; }
.toggle { cursor: pointer; display: inline-block; position: relative; width: 44px; height: 25px; background-color: #83d8ff; border-radius: 84px; transition: background-color 200ms cubic-bezier(.445,.05,.55,.95); }
.dark-ui .toggle { background-color: var(--red); }
.toggle__handler { display: inline-block; position: relative; z-index: 1; top: -4px; left: -10px; width: 23px; height: 23px; background-color: #ffcf96; border-radius: 50px; box-shadow: 0 2px 6px rgb(0 0 0 / .3); transition: all 400ms cubic-bezier(.68,-.55,.265,1.55); transform: rotate(-45deg); }
.dark-ui .toggle__handler { transform: rotate(45deg) translate(8px, -8px); background-color: #f5f5f5; }
.toggle__handler .crater { position: absolute; background-color: #e8cda5; opacity: 0; transition: opacity 200ms ease-in-out; border-radius: 100%; }
.dark-ui .toggle__handler .crater { opacity: 1; }
.crater--1 { top: 12px; left: 6px; width: 4px; height: 4px; }
.crater--2 { top: 15px; left: 13px; width: 6px; height: 6px; }
.crater--3 { top: 8px; left: 13px; width: 4px; height: 4px; }
.star { position: absolute; background-color: #fff; transition: 200ms cubic-bezier(.445,.05,.55,.95); }
.dark-ui .star { opacity: 0; }
.star--1 { top: 3px; left: 28px; width: 2px; height: 2px; }
.star--2 { top: 14px; left: 34px; width: 2px; height: 2px; }
.star--3 { top: 8px; left: 38px; width: 1px; height: 1px; }

/* Filter 18+ button (exact) */
.filterWrapper { position: relative; text-align: center; cursor: pointer; }
.filterWrapper input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; margin: 0; opacity: 0; }
.filterWrapper .filterButton { background: #f44336; padding: 3px 8px; border-radius: 5px; color: #fff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; transition: background 0.2s; }
.filterWrapper input:checked + .filterButton { background: #4caf50; }

/* Site info (exact) */
.site-info { text-align: center; font-size: 20px; padding: 10px 5px; display: flex; align-items: center; }
.site-logo { text-align: left; height: auto; width: 50%; padding: 20px; }
.site-logo img { max-width: 100%; height: auto; }
.custom-logo { width: 100%; height: auto; padding: 0 25px 0; }
@media (min-width: 768px) { .custom-logo { height: 100px; width: auto; } }

.notice-board { padding: 10px; text-align: center; font-size: 15px; font-family: var(--font-secondary); font-size: 20px; width: 50%; }
.upcoming-movies {
  margin-top: 20px; background: var(--red); color: #fff; position: relative;
  padding: 5px; overflow: hidden; font-family: var(--font-secondary);
  border-radius: 7px; display: block;
}
.upcoming-movies::after {
  content: 'Upcoming:'; position: absolute; height: 100%; padding: 0 10px;
  line-height: 34px; background: var(--black); color: #fff;
  font-family: var(--font-primary); font-weight: 600; left: 0; top: 0;
}
.upcoming-movies::before {
  content: ''; position: absolute; border-left: 17px solid var(--black);
  border-bottom: 17px solid var(--black); border-top: 17px solid #fff0;
  border-right: 17px solid #fff0; left: 98px; top: 0; z-index: 1;
}

/* Nav bar (sticky sub-header — SKMovies addition) */
.nav-bar { position: sticky; top: 0; z-index: 50; background: var(--red); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: background 0.25s; }
.dark-ui .nav-bar { background: var(--black); }
.nav-bar__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 15px; display: flex; align-items: center; gap: 16px; min-height: 50px; }
.search-form { flex: 1; max-width: 500px; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.15); border-radius: 999px; padding: 6px 14px; transition: background 0.2s; }
.search-form:focus-within { background: rgba(255,255,255,0.25); }
.search-form .ab { color: rgba(255,255,255,0.7); font-size: 18px; }
.search-input { flex: 1; background: transparent; border: none; outline: none; color: #fff; font-size: 15px; min-width: 0; }
.search-input::placeholder { color: rgba(255,255,255,0.6); }
.search-clear { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: rgba(255,255,255,0.7); }
.search-clear:hover { background: rgba(255,255,255,0.15); color: #fff; }
.nav-menu { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-link { padding: 8px 14px; color: #fff; font-weight: 600; font-size: 14px; border-radius: 999px; transition: background 0.2s; white-space: nowrap; }
.nav-link:hover, .nav-link.is-active { background: rgba(255,255,255,0.2); color: #fff; }

/* ─── Section title (exact red bar from mlsbd.co) ───────────────────── */
.section-title { margin: 25px auto; text-align: center; }
.section-title span {
  position: relative; padding: 5px 10px; background: var(--red);
  border: 2px solid var(--black); border-radius: 10px;
  font-family: var(--font-primary); font-size: 18px; font-weight: 600;
  text-transform: uppercase; color: #fff; display: inline-block;
}
.section-title span::after {
  content: ''; position: absolute; height: 140%; width: 87%;
  background: var(--black); top: 50%; left: 50%;
  transform: translate(-50%,-50%); z-index: -1; border-radius: 10px;
}

.section-head { display: flex; align-items: center; justify-content: space-between; margin: 25px auto; gap: 10px; }
.section-head .section-title { margin: 0; }

/* ─── Featured slider (exact from mlsbd.co) ─────────────────────────── */
.featured-section { margin: 20px 0; }
.featured-slider { margin: 0 auto; text-align: center; position: relative; }
.featured-slider .prev, .featured-slider .next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.5); color: #fff; border: none; cursor: pointer;
  z-index: 10; width: 40px; height: 40px; border-radius: 50%; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.featured-slider .prev { left: 10px; }
.featured-slider .next { right: 10px; }
.featured-slider .prev:hover, .featured-slider .next:hover { background: var(--red); }
.slider { display: flex; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; gap: 10px; padding: 0 50px; }
.slider::-webkit-scrollbar { display: none; }
.slider-post { flex-shrink: 0; width: 100%; max-width: 500px; }
.slider-post a:hover h3 { color: var(--red); }
.featured-post { z-index: -1; position: relative; border-radius: 10px; box-shadow: 0 3px 10px var(--black); aspect-ratio: 5/3; overflow: hidden; }
.featured-post img { width: 100% !important; transition: 0.3s; height: 100%; object-fit: cover; }
.featured-post .title { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); padding: 30px 15px 12px; text-align: left; }
.featured-post .title h3 { color: #fff; font-size: 16px; font-family: var(--font-primary); font-weight: 600; line-height: 1.3; }

/* ─── Movies grid (exact single-post from mlsbd.co) ─────────────────── */
.movies-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin: 20px 0; }
@media (min-width: 576px) { .movies-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .movies-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 992px) { .movies-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.single-post { background: var(--card-bg); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.25s var(--ease), box-shadow 0.25s; cursor: pointer; }
.single-post:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
.single-post:active { transform: scale(0.98); }
.thumb { background: #fff; border-radius: 10px 10px 0 0; box-shadow: 0 5px 10px #999; position: relative; aspect-ratio: 2/3; overflow: hidden; }
.dark-ui .thumb { background: var(--card-bg-dark); box-shadow: var(--shadow-card-dark); }
.thumb img { width: 100% !important; transition: 0.3s; height: 100%; object-fit: cover; }
.thumb img:hover { opacity: 0.7; }
.thumb .badges { position: absolute; top: 8px; left: 8px; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 16px); }
.badge { display: inline-block; padding: 3px 7px; font-size: 10px; font-weight: 800; letter-spacing: 0.4px; border-radius: 6px; background: rgba(0,0,0,0.7); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-transform: uppercase; line-height: 1.2; }
.badge--4k { background: rgba(168,107,255,0.92); }
.badge--1080p { background: rgba(0,212,255,0.92); color: #002a36; }
.badge--720p { background: rgba(30,201,114,0.92); color: #002612; }
.badge--480p { background: rgba(245,197,24,0.92); color: #2a2000; }
.badge--bluray { background: rgba(0,212,255,0.92); color: #002a36; }
.badge--web-dl { background: rgba(30,201,114,0.92); color: #002612; }
.badge--hdtc { background: rgba(229,9,20,0.92); }
.badge--hdr { background: rgba(168,107,255,0.92); }
.badge--hevc { background: rgba(30,201,114,0.92); color: #002612; }
.badge--netflix { background: rgba(229,9,20,0.92); }
.badge--hindi { background: rgba(255,138,61,0.92); color: #2a1500; }
.badge--bengali { background: rgba(30,201,114,0.92); color: #002612; }
.badge--english { background: rgba(0,212,255,0.92); color: #002a36; }
.badge--dual { background: rgba(245,197,24,0.92); color: #2a2000; }
.badge--amazon { background: rgba(255,153,0,0.92); color: #2a1500; }
.badge--zee5 { background: rgba(67,78,255,0.92); }
.badge--hotstar { background: rgba(0,144,255,0.92); color: #001a36; }
.badge--hoichoi { background: rgba(255,70,70,0.92); }

.post-desc { padding: 5px; border-radius: 0 0 15px 15px; border-bottom: 3px solid #585858; margin-bottom: 10px; font-family: var(--font-secondary); font-size: 12px; background: #fff; box-shadow: 0 5px 10px #999; }
.dark-ui .post-desc { background: var(--card-bg-dark); border-bottom-color: var(--red); box-shadow: var(--shadow-card-dark); }
.post-title { font-family: var(--font-primary); font-weight: 600; color: var(--black); transition: color 0.2s; font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; padding: 4px 6px; }
.dark-ui .post-title { color: #eaeaea; }
.post-title:hover { color: var(--red); }
.post-meta { padding: 4px 6px 8px; font-size: 11px; color: var(--text-muted); }
.post-meta .post-meta-item { display: inline-block; margin: 3px; color: #555; font-family: var(--font-secondary); }
.post-meta .post-meta-item .ab { font-size: 11px; margin-right: 2px; }
.post-meta .post-meta-item a { color: #555; }
.post-meta .post-meta-item a:hover { border-bottom: 1px dotted #555; }
.post-meta .dot { color: var(--text-hint); opacity: 0.5; margin: 0 2px; }

/* ─── Filters (pills) ───────────────────────────────────────────────── */
.filters { margin: 15px 0; }
.filters__scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.filters__scroll::-webkit-scrollbar { display: none; }
.pill { flex-shrink: 0; padding: 7px 14px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-muted); transition: all 0.2s var(--ease); white-space: nowrap; cursor: pointer; }
.dark-ui .pill { background: var(--card-bg-dark); color: #a5a5a5; }
.pill:hover { background: var(--red); color: #fff; border-color: var(--red); }
.pill.is-active { background: var(--red); color: #fff; border-color: var(--red); }

/* ─── Skeleton loaders ──────────────────────────────────────────────── */
.skeleton-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin: 20px 0; }
@media (min-width: 576px) { .skeleton-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .skeleton-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 992px) { .skeleton-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.skeleton { background: var(--card-bg); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-card); }
.skeleton__poster { aspect-ratio: 2/3; background: linear-gradient(100deg, #eaeaea 30%, #f5f5f5 50%, #eaeaea 70%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.dark-ui .skeleton__poster { background: linear-gradient(100deg, #2d2d2d 30%, #3a3a3a 50%, #2d2d2d 70%); background-size: 200% 100%; }
.skeleton__line { height: 10px; margin: 8px 10px 0; border-radius: 6px; background: linear-gradient(100deg, #eaeaea 30%, #f5f5f5 50%, #eaeaea 70%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.dark-ui .skeleton__line { background: linear-gradient(100deg, #2d2d2d 30%, #3a3a3a 50%, #2d2d2d 70%); background-size: 200% 100%; }
.skeleton__line:last-child { width: 60%; margin-bottom: 10px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skeleton-modal { min-height: 60vh; background: linear-gradient(100deg, #eaeaea 30%, #f5f5f5 50%, #eaeaea 70%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: 10px; }

/* ─── View more button (exact from mlsbd.co) ────────────────────────── */
.view-more { text-align: center; margin: 25px 0; }
.view-more-btn, .view-more button, #loadMoreBtn {
  border: 2px solid var(--red); background: var(--black);
  font-family: var(--font-secondary); border-radius: 10px;
  color: #fff; font-size: 1em; padding: 10px 15px; cursor: pointer;
  transition: all 0.2s;
}
.view-more-btn:hover, .view-more button:hover, #loadMoreBtn:hover { background: var(--red); }

/* ─── Empty ─────────────────────────────────────────────────────────── */
.empty { text-align: center; padding: 50px 20px; color: var(--text-muted); }
.empty h3 { color: var(--black); margin: 10px 0 6px; }
.dark-ui .empty h3 { color: #eaeaea; }

/* ─── Toast ─────────────────────────────────────────────────────────── */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--black); color: #fff; padding: 12px 22px; border-radius: 30px; font-size: 13.5px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 200; opacity: 0; transition: opacity 0.25s, transform 0.25s var(--ease-spring); pointer-events: none; max-width: 90vw; text-align: center; }
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--success { background: var(--green); }
.toast--error { background: var(--red); }

/* ─── Modal (movie detail — exact clone of movie page) ──────────────── */
.modal[hidden] { display: none !important; }
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 12px; animation: fadeIn 0.25s var(--ease-out); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal__card { position: relative; background: #fff; border-radius: 15px; width: 100%; max-width: 900px; max-height: 94vh; overflow-y: auto; overflow-x: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.7); animation: slideUp 0.35s var(--ease-spring); scrollbar-width: thin; transform: translateZ(0); backface-visibility: hidden; }
.dark-ui .modal__card { background: var(--card-bg-dark); color: #eaeaea; }
@keyframes slideUp { from { transform: translateY(40px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.modal__close { position: sticky; top: 12px; float: right; margin: 12px 12px 0 0; z-index: 10; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.2s; font-size: 18px; }
.modal__close:hover { background: var(--red); transform: rotate(90deg); }

/* Movie info (exact from mlsbd.co .movie-info) */
.movie-info { display: grid; grid-template-columns: auto; font-family: var(--font-secondary); text-align: left; padding: 15px; background: #f5f5f5; border-radius: 10px; margin: 15px auto; gap: 15px; }
.dark-ui .movie-info { background: var(--card-bg-dark); }
@media (min-width: 768px) { .movie-info { grid-template-columns: max-content auto; } }
.movie-info .poster { width: 100%; }
@media (min-width: 768px) { .movie-info .poster { width: 300px; } }
.movie-info .poster img { width: 100%; height: auto; margin: 0 0 15px 0; border-radius: 10px; box-shadow: 0 5px 15px var(--black); }
@media (min-width: 768px) { .movie-info .poster img { height: auto; width: 300px; margin: 0 15px 0 0; } }
.movie-info .info { align-self: center; }
.movie-info .name { font-family: var(--font-primary); font-size: 22px; font-weight: 700; color: var(--black); margin: 0 0 10px; }
.dark-ui .movie-info .name { color: #eaeaea; }
.movie-info .misc { color: var(--text-muted); font-size: 14px; margin-bottom: 10px; }
.movie-info .ratings { display: grid; grid-template-columns: max-content auto; align-items: center; margin-bottom: 10px; }
.movie-info .star-imdb { position: relative; margin-right: 15px; font-weight: 700; font-size: 2em; font-family: var(--font-primary); color: var(--gold); }
.movie-info .details { margin: 0; }
.movie-info .details strong { color: var(--black); }
.dark-ui .movie-info .details strong { color: #eaeaea; }
.movie-info .storyline { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 10px 0; }
.movie-info .production, .movie-info .media { font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.movie-info .production strong, .movie-info .media strong { color: var(--black); }
.dark-ui .movie-info .production strong, .dark-ui .movie-info .media strong { color: #eaeaea; }

/* Post section title (exact from mlsbd.co) */
.post-section-title { font-family: 'Exo'; color: #fff; font-size: 1.4em; font-weight: 700; background: var(--red); padding: 10px 30px; border: 3px solid var(--black); border-radius: 10px 10px 25px 10px; position: relative; box-sizing: border-box; margin: 20px 0; }
.post-section-title.screenshots::before { content: '🖼 '; }
.post-section-title.download::before { content: '⬇️ '; }

/* Download buttons (exact .Dbtn from mlsbd.co) */
.Dbtn { text-decoration: none; background: #636363; color: #fff; padding: 10px 15px 10px 50px; position: relative; display: table; border-radius: 30px; height: 50px; box-sizing: border-box; font-family: var(--font-secondary); transition: 0.5s; margin-bottom: 5px; font-size: .9em; white-space: nowrap; max-width: 100%; cursor: pointer; }
.Dbtn:hover { background: var(--red); color: #fff; }
.Dbtn:before { font-family: var(--font-primary); position: absolute; left: 2px; top: 2px; background: rgb(255 255 255 / .3); color: #fff; height: 46px; width: 46px; border-radius: 30px; text-align: center; line-height: 46px; transition: all 0.3s; font-size: 20px; content: '⬇'; }
.Dbtn.sd { background: #ffc107; color: #000; }
.Dbtn.hd { background: #ff5722; }
.Dbtn.watch { background: #8d6e63; }
.Dbtn.watch:before { content: '▶'; }
.Dinfo { text-align: center; color: var(--text-muted); margin: 10px 0; }

/* Screenshots */
.screenshots { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 15px 15px; }
.screenshots::-webkit-scrollbar { display: none; }
.screenshot { flex-shrink: 0; width: 280px; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: var(--card-bg); cursor: pointer; }
.dark-ui .screenshot { background: var(--card-bg-dark); }
.screenshot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.screenshot:hover img { transform: scale(1.05); }

/* Modal body content */
.modal__badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 15px 0; }
.modal__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 15px; }
.modal__actions .Dbtn { display: inline-flex; align-items: center; height: 44px; padding: 10px 20px 10px 20px; border-radius: 30px; background: var(--red); color: #fff; }
.modal__actions .Dbtn:before { display: none; }
.modal__actions .Dbtn:hover { background: var(--black); }

/* ─── Bottom Sheet (player choice) ──────────────────────────────────── */
.sheet[hidden] { display: none !important; }
.sheet { position: fixed; inset: 0; z-index: 110; display: flex; align-items: flex-end; justify-content: center; animation: fadeIn 0.25s var(--ease-out); }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sheet__panel { position: relative; background: var(--card-bg); border-radius: 22px 22px 0 0; width: 100%; max-width: 540px; padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); box-shadow: 0 -10px 30px rgba(0,0,0,0.5); animation: slideUpSheet 0.35s var(--ease-spring); max-height: 88vh; overflow-y: auto; transform: translateZ(0); backface-visibility: hidden; }
.dark-ui .sheet__panel { background: var(--card-bg-dark); color: #eaeaea; }
@keyframes slideUpSheet { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sheet__handle { width: 40px; height: 4px; background: var(--border); border-radius: 4px; margin: 0 auto 12px; }
.sheet__title { font-size: 17px; font-weight: 800; margin-bottom: 4px; font-family: var(--font-primary); }
.sheet__hint { font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px; }
.sheet__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 10px; margin-bottom: 16px; }
.sheet__btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; background: #f5f5f5; border: 1px solid var(--border); border-radius: 10px; font-size: 12px; font-weight: 700; text-align: center; transition: all 0.18s var(--ease); color: var(--black); text-decoration: none; }
.dark-ui .sheet__btn { background: var(--card-bg-dark); color: #eaeaea; }
.sheet__btn:hover { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-2px); }
.sheet__btn:active { transform: scale(0.95); }
.sheet__btn-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 22px; }
.sheet__btn--primary { background: var(--red); color: #fff; border-color: var(--red); }
.sheet__url { display: flex; gap: 8px; margin-bottom: 10px; }
.sheet__url input { flex: 1; min-width: 0; padding: 10px 12px; background: #f5f5f5; border: 1px solid var(--border); border-radius: 10px; font-size: 12px; font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-muted); outline: none; overflow: hidden; text-overflow: ellipsis; }
.dark-ui .sheet__url input { background: var(--card-bg-dark); color: #a5a5a5; }
.sheet__url input:focus { border-color: var(--red); }
.sheet__tip { font-size: 11.5px; color: var(--text-muted); text-align: center; padding: 8px 10px; background: #f5f5f5; border-radius: 10px; border: 1px solid var(--border); line-height: 1.45; }
.dark-ui .sheet__tip { background: var(--card-bg-dark); }

/* ─── Dashboard ─────────────────────────────────────────────────────── */
.dashboard { display: grid; gap: 12px; padding: 12px 0; }
.dash-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 600px) { .dash-stats { grid-template-columns: repeat(4, 1fr); } }
.dash-stat { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px; text-align: center; box-shadow: var(--shadow-card); }
.dark-ui .dash-stat { background: var(--card-bg-dark); }
.dash-stat .num { font-size: clamp(22px, 4vw, 30px); font-weight: 900; letter-spacing: -0.8px; color: var(--red); display: block; font-family: var(--font-primary); }
.dash-stat .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; font-weight: 700; }
.dash-section { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px; box-shadow: var(--shadow-card); }
.dark-ui .dash-section { background: var(--card-bg-dark); }
.dash-section h3 { font-size: 16px; font-weight: 800; margin-bottom: 12px; font-family: var(--font-primary); }
.dash-list { display: flex; flex-direction: column; gap: 8px; }
.dash-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f5f5f5; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.15s; }
.dark-ui .dash-item { background: var(--card-bg-dark); }
.dash-item:hover { border-color: var(--red); transform: translateX(2px); }
.dash-item__poster { width: 40px; height: 60px; border-radius: 6px; overflow: hidden; background: var(--border); flex-shrink: 0; }
.dash-item__poster img { width: 100%; height: 100%; object-fit: cover; }
.dash-item__body { flex: 1; min-width: 0; }
.dash-item__title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-item__meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.dash-item__action { flex-shrink: 0; font-size: 11px; color: var(--red); font-weight: 700; }
.dash-empty { text-align: center; padding: 20px 16px; color: var(--text-muted); font-size: 13px; }
.url-list { display: flex; flex-direction: column; gap: 8px; }
.url-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #f5f5f5; border: 1px solid var(--border); border-radius: 10px; font-size: 12px; }
.dark-ui .url-item { background: var(--card-bg-dark); }
.url-item__quality { flex-shrink: 0; padding: 3px 8px; background: var(--red); color: #fff; border-radius: 6px; font-weight: 800; font-size: 10px; text-transform: uppercase; }
.url-item__url { flex: 1; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.url-item__copy { flex-shrink: 0; padding: 5px 10px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; font-size: 11px; font-weight: 700; cursor: pointer; color: var(--black); }
.dark-ui .url-item__copy { background: var(--card-bg-dark); color: #eaeaea; }
.url-item__copy:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* ─── Footer (exact from mlsbd.co) ──────────────────────────────────── */
footer { font-family: var(--font-secondary); font-size: 15px; text-align: center; margin-top: 10px; }
.footer-top { padding: 10px 0 22px 0; background: var(--grey); color: #fff; font-weight: 600; }
.footer-bottom { position: relative; padding: 22px 0 10px 0; background: var(--black); color: #a5a5a5; }
.footer-text { padding: 0 15px; }
.footer-bottom p { color: #a5a5a5; }
.footer-links { text-align: center; margin-bottom: 10px; }
.footer-links ul { background: var(--grey); padding: 0 10px; margin: 0; display: inline-flex; border-radius: 10px; }
.footer-links ul li { display: inline-block; margin: 8px 10px; list-style: none; }
.footer-links a { color: #fff; transition: color 0.2s; }
.footer-links a:hover { color: #d3d3d3; }
.copyright { color: #fff; font-family: var(--font-primary); margin-top: 10px; font-size: 13px; }
.dark-ui .copyright { color: #eaeaea; }
span.mlsbd { position: absolute; display: inline-block; padding: 5px 15px; background: var(--red); border-radius: 10px; font-family: var(--font-primary); font-weight: 600; font-size: 20px; left: 50%; transform: translateX(-50%); top: -20px; color: #fff; }

/* ─── Go-to-top (exact from mlsbd.co) ───────────────────────────────── */
#go-top { display: inline-block; position: fixed; bottom: 20px; right: 25px; font-size: 20px; padding: 0 10px; background: var(--red); color: #fff; border-radius: 100px; opacity: 0; transition: opacity 0.5s ease-in-out; z-index: 40; text-decoration: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
#go-top.show { opacity: 0.7; }
#go-top:hover { opacity: 1; }

/* ─── Skip link ─────────────────────────────────────────────────────── */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--red); color: #fff; padding: 10px 18px; z-index: 1000; font-weight: 700; font-size: 13px; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

/* ─── Performance (low-end devices) ─────────────────────────────────── */
@media (hover: none) {
  .single-post:hover { transform: none; box-shadow: var(--shadow-card); }
  .thumb img:hover { opacity: 1; }
  .nav-link:hover { background: transparent; }
  .pill:hover { background: var(--card-bg); color: var(--text-muted); }
  .dark-ui .pill:hover { background: var(--card-bg-dark); color: #a5a5a5; }
  .featured-post img:hover { opacity: 1; }
}
@media (max-width: 480px) and (max-resolution: 1.5dppx) {
  .nav-bar { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .modal__backdrop, .sheet__backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .search-form, .modal__close, .sheet__btn-icon { backdrop-filter: none; -webkit-backdrop-filter: none; }
  * { transition-duration: 0.05s !important; animation-duration: 0.05s !important; }
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ─── Responsive header ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-info { flex-direction: column; }
  .site-logo, .notice-board { width: 100%; padding: 10px; }
  .nav-bar__inner { flex-wrap: wrap; padding: 8px 12px; }
  .search-form { order: 2; flex: 1 1 100%; max-width: 100%; }
  .nav-menu { order: 1; flex: 1 1 100%; justify-content: center; overflow-x: auto; scrollbar-width: none; }
  .nav-menu::-webkit-scrollbar { display: none; }
  .nav-link { padding: 6px 10px; font-size: 13px; }
  .bar.social-bar { font-size: 12px; }
  .section-title span { font-size: 16px; padding: 5px 18px; }
  .movies-grid { gap: 10px; }
}

/* ─── Print color adjust ────────────────────────────────────────────── */
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }