/* EV — short dramas, mobile-first (built for phones, scales up to desktop) */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #0d0d14; color: #e8e8f0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding-bottom: 64px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 14px; }

/* --- header: one clean row (logo + search icon); nav on desktop only --- */
.top { background: #15151f; border-bottom: 1px solid #26263a; position: sticky; top: 0; z-index: 10; }
.top-in { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
.topbar { display: flex; align-items: center; gap: 10px; }
.top-sp { flex: 1; }
.logo { font-size: 22px; font-weight: 800; letter-spacing: 1px; color: #fff; line-height: 1; }
.logo span { color: #8b5cf6; }
.search-toggle { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #33334d; background: #1c1c2b; color: #fff; font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.search-toggle:active { border-color: #8b5cf6; }
/* language switcher (Arabic default) — compact select in the topbar */
.langsel { flex: 0 0 auto; height: 38px; max-width: 118px; border-radius: 19px; border: 1px solid #33334d; background: #1c1c2b; color: #fff; font-size: 13px; padding: 0 8px; cursor: pointer; }
.langsel:focus { border-color: #8b5cf6; outline: none; }
.search { display: none; width: 100%; }
.search.open { display: flex; }
.search input { flex: 1; min-width: 0; padding: 12px 14px; font-size: 16px; border: 1px solid #33334d; border-radius: 10px 0 0 10px; background: #0d0d14; color: #fff; outline: none; }
.search input:focus { border-color: #8b5cf6; }
.search button { padding: 12px 18px; border: 0; border-radius: 0 10px 10px 0; background: #8b5cf6; color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; }
.nav { display: none; }
@media (min-width: 600px) {
  .nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
}
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; background: #1c1c2b; border: 1px solid #33334d; color: #c9c9de; font-size: 14px; white-space: nowrap; }
.nav a.on { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }

/* --- content --- */
main { padding: 16px 0 28px; }
h1 { font-size: 20px; margin: 6px 0 14px; }
h2 { font-size: 17px; margin: 22px 0 12px; }
.muted { color: #9a9ab5; }
.sub { color: #9a9ab5; font-size: 14px; margin: -6px 0 16px; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.card { display: block; background: #15151f; border: 1px solid #26263a; border-radius: 12px; overflow: hidden; }
.card:active { border-color: #8b5cf6; }
.card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; background: #1c1c2b; }
.noimg { width: 100%; aspect-ratio: 2/3; display: flex; align-items: center; justify-content: center; color: #666; background: #1c1c2b; font-size: 13px; }
.card-t { padding: 9px 10px 11px; }
.card-title { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.card-meta { display: flex; gap: 6px; margin-top: 5px; }
.card-prov { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #a78bfa; background: #1c1c2e; border: 1px solid #33334d; padding: 2px 7px; border-radius: 20px; }
.card-eps { font-size: 11px; color: #9a9ab5; padding: 2px 0; }
.desc { margin: 5px 0 0; font-size: 12px; color: #9a9ab5; line-height: 1.45; }

/* --- home sliders: horizontal poster rows --- */
.slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
.slider-head h2 { margin: 0; }
.slider { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.slider::-webkit-scrollbar { display: none; }
.slider .card { flex: 0 0 148px; scroll-snap-align: start; }
.slider .card img { aspect-ratio: 2/3; }
.slider .card-title { font-size: 12.5px; }

/* --- featured hero --- */
.hero { display: flex; gap: 14px; background: #15151f; border: 1px solid #26263a; border-radius: 14px; padding: 14px; margin: 6px 0 4px; }
.hero img { width: 110px; height: 165px; object-fit: cover; border-radius: 10px; border: 1px solid #26263a; flex: 0 0 auto; }
.hero .info { flex: 1; min-width: 0; }
.hero h1 { margin: 2px 0 6px; font-size: 19px; line-height: 1.3; }
.hero p { margin: 0 0 12px; font-size: 13px; color: #9a9ab5; line-height: 1.5; }
.hero .watchbtn { margin: 0; }

/* --- watch page --- */
.watchbtn { display: block; text-align: center; width: 100%; padding: 15px 18px; margin: 14px 0 4px; border-radius: 12px; background: #8b5cf6; color: #fff; font-size: 17px; font-weight: 800; }
.watchbtn:active { background: #7c3aed; }
.player { position: relative; width: 100%; background: #000; overflow: hidden; border: 1px solid #26263a; margin: 0 -14px; width: calc(100% + 28px); border-radius: 0; border-left: 0; border-right: 0; }
.vid-wrap { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.vid-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.spin { display: none; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 4px solid rgba(255,255,255,.25); border-top-color: #8b5cf6; border-radius: 50%; animation: spin 0.9s linear infinite; z-index: 3; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.bigplay { display: flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(139, 92, 246, .9); color: #fff; font-size: 26px; border: 0; cursor: pointer; z-index: 2; }
.controls { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #15151f; border-top: 1px solid #26263a; }
.cbtn { flex: 0 0 auto; background: none; border: 0; color: #e8e8f2; font-size: 18px; padding: 4px 6px; cursor: pointer; }
.ctime { flex: 0 0 auto; font-size: 13px; color: #b9b9d0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.controls input[type="range"] { accent-color: #8b5cf6; }
#seek { flex: 1 1 auto; min-width: 0; }

/* --- quality selector (hls.js levels) --- */
/* Controls-bar button: hidden until hls.js reports >1 level
   (.player.qavail). In reels mode the whole .controls bar is hidden,
   so the floating button below covers that case instead. */
#btn-quality { display: none; min-width: 54px; font-size: 13px; font-weight: 700; }
.player.qavail #btn-quality { display: inline-block; }
/* Floating button for reels mode (controls hidden there): sits left of
   the fullscreen button. Only in reels mode + quality available. */
.qbtn-float { display: none; position: absolute; bottom: 12px; right: 64px; z-index: 6; min-width: 54px; height: 40px; padding: 0 10px; border-radius: 20px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; font-weight: 700; border: 1px solid rgba(255, 255, 255, .35); cursor: pointer; align-items: center; justify-content: center; }
.player.reels.qavail .qbtn-float { display: flex; }
/* Quality menu: pops up above the controls bar (or above the video
   bottom in reels mode). */
.qmenu { position: absolute; bottom: 60px; right: 12px; z-index: 20; background: rgba(21, 21, 31, .97); border: 1px solid #26263a; border-radius: 10px; padding: 6px; min-width: 116px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.qmenu button { display: block; width: 100%; text-align: left; background: none; border: 0; color: #e8e8f2; font-size: 14px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.qmenu button:hover { background: rgba(139, 92, 246, .2); }
.qmenu button.on { color: #a78bfa; font-weight: 700; background: rgba(139, 92, 246, .18); }

/* --- fullscreen --- */
.player:fullscreen, .player:-webkit-full-screen { margin: 0; width: 100%; height: 100%; border-radius: 0; border: 0; display: flex; flex-direction: column; background: #000; }
.player:fullscreen .vid-wrap, .player:-webkit-full-screen .vid-wrap { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
.player:fullscreen .controls, .player:-webkit-full-screen .controls { flex: 0 0 auto; }

/* --- reels mode: vertical short dramas (9:16) play like TikTok/Reels --- */
.player.reels .vid-wrap { aspect-ratio: 9/16; max-height: 78dvh; margin: 0 auto; max-width: 440px; }
.player.reels .vid-wrap video { object-fit: cover; }
.player.reels .controls { display: none; }
.reels-badge { display: none; position: absolute; top: 10px; right: 10px; z-index: 5; background: rgba(139, 92, 246, .9); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 4px 10px; border-radius: 20px; pointer-events: none; }
.player.reels .reels-badge { display: block; }
.reels-count { display: none; position: absolute; top: 10px; right: 78px; z-index: 5; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 20px; pointer-events: none; }
.player.reels .reels-count { display: block; }
.reels-hint { display: none; position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .8); font-size: 12px; z-index: 5; pointer-events: none; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.player.reels .reels-hint { display: block; }
.reels-fs { display: none; position: absolute; bottom: 12px; right: 12px; z-index: 6; width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 18px; border: 1px solid rgba(255, 255, 255, .35); cursor: pointer; align-items: center; justify-content: center; }
.player.reels .reels-fs { display: flex; }
.player.reels:fullscreen .vid-wrap, .player.reels:-webkit-full-screen .vid-wrap { max-height: none; max-width: none; height: 100%; }

.noplayer { display: flex; align-items: center; justify-content: center; height: 100%; color: #9a9ab5; padding: 20px; text-align: center; }
.watch-head { display: flex; gap: 14px; margin: 14px 0 4px; }
.watch-head img { width: 104px; height: 156px; object-fit: cover; border-radius: 10px; border: 1px solid #26263a; flex: 0 0 auto; }
.watch-head .info { flex: 1; min-width: 0; }
.watch-head h1 { margin: 2px 0 8px; font-size: 19px; line-height: 1.3; }
.eps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 4px; }
.eps a { min-height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #1c1c2b; border: 1px solid #33334d; font-size: 15px; font-weight: 600; }
.eps a:active { border-color: #8b5cf6; }
.eps a.on { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
.eps a.locked { opacity: .45; }
.empty { padding: 44px 0; text-align: center; color: #9a9ab5; }
.foot { border-top: 1px solid #26263a; padding: 16px 0 20px; color: #77778f; font-size: 13px; }

/* --- bottom nav (phone app bar, fixed) --- */
.bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #15151f; border-top: 1px solid #26263a; display: flex; }
.bottomnav a { flex: 1; text-align: center; padding: 10px 2px 12px; font-size: 11px; color: #b9b9d0; }
.bottomnav a .ico { display: block; font-size: 20px; line-height: 1.1; }
.bottomnav a.on { color: #a78bfa; font-weight: 700; }

/* --- detail page --- */
.detail-head { display: flex; gap: 14px; margin: 6px 0 4px; }
.detail-head img { width: 120px; height: 180px; object-fit: cover; border-radius: 10px; border: 1px solid #26263a; flex: 0 0 auto; }
.detail-head .info { flex: 1; min-width: 0; }
.detail-head h1 { margin: 2px 0 8px; font-size: 19px; line-height: 1.3; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tags span { font-size: 12px; color: #c9c9de; background: #1c1c2b; border: 1px solid #33334d; padding: 4px 10px; border-radius: 20px; }
.syn { font-size: 14px; color: #b9b9d0; line-height: 1.6; margin: 12px 0 4px; }

/* --- v6.0: desktop navbar (Dracin-style) --- */
.nav-desktop { display: none; }
.search-desktop { display: none; }
@media (min-width: 900px) {
  .topbar { gap: 18px; }
  .nav-desktop { display: flex; gap: 6px; }
  .nav-desktop a { padding: 8px 16px; border-radius: 999px; background: transparent; border: 1px solid transparent; color: #c9c9de; font-size: 15px; font-weight: 600; white-space: nowrap; }
  .nav-desktop a:hover { color: #fff; border-color: #33334d; }
  .nav-desktop a.on { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
  .search-desktop { display: flex; flex: 0 1 340px; }
  .search-desktop input { flex: 1; min-width: 0; padding: 9px 12px; font-size: 14px; border: 1px solid #33334d; border-radius: 20px 0 0 20px; background: #0d0d14; color: #fff; outline: none; }
  .search-desktop input:focus { border-color: #8b5cf6; }
  .search-desktop button { padding: 9px 16px; border: 0; border-radius: 0 20px 20px 0; background: #8b5cf6; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
  .search-toggle { display: none; }
  .nav { display: none; }
}

/* --- v6.0: hero billboard (big trending slider, Dracin-style) --- */
.billboard { position: relative; height: 60vh; min-height: 420px; max-height: 600px; border-radius: 16px; overflow: hidden; margin: 8px 0 8px; background: #15151f; border: 1px solid #26263a; }
.bb-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.bb-slide.on { opacity: 1; pointer-events: auto; }
.bb-bg { position: absolute; inset: 0; background-size: cover; background-position: center 20%; filter: brightness(.6); }
.bb-vignette { position: absolute; inset: 0; background: linear-gradient(0deg, #0d0d14 4%, rgba(13,13,20,.45) 55%, rgba(13,13,20,.75) 100%); }
.bb-content { position: relative; z-index: 2; max-width: 640px; padding: 0 24px 44px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.bb-badge { display: inline-block; align-self: flex-start; padding: 5px 11px; background: #8b5cf6; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1px; border-radius: 6px; margin-bottom: 12px; text-transform: uppercase; }
.bb-title { font-size: 30px; font-weight: 900; line-height: 1.15; margin: 0 0 10px; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.bb-desc { font-size: 14px; color: #d5d5e8; line-height: 1.55; margin: 0 0 18px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.bb-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; font-size: 15px; font-weight: 700; border-radius: 8px; cursor: pointer; border: none; }
.btn-primary { background: #8b5cf6; color: #fff; box-shadow: 0 4px 14px rgba(139,92,246,.45); }
.btn-primary:active { background: #7c3aed; }
.btn-secondary { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.bb-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.5); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bb-prev { left: 14px; }
.bb-next { right: 14px; }
.bb-dots { position: absolute; bottom: 14px; right: 20px; z-index: 3; display: flex; gap: 7px; }
.bb-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.4); cursor: pointer; padding: 0; }
.bb-dot.on { background: #8b5cf6; }
@media (max-width: 599px) {
  .billboard { height: 52vh; min-height: 340px; border-radius: 12px; }
  .bb-title { font-size: 22px; }
  .bb-content { padding: 0 16px 40px; }
  .bb-arrow { display: none; }
}

/* --- v6.0: merged Popular grid --- */
.pop-section { margin-top: 6px; }
.pop-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) { .pop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .pop-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .pop-grid { grid-template-columns: repeat(5, 1fr); } }

/* --- v6.0: watch page 3-column desktop layout (Dracin-style) --- */
.watch-layout { display: block; }
.watch-col-left { display: none; }
.watch-head-mobile { display: flex; }
@media (min-width: 1100px) {
  .wrap { max-width: 1440px; }
  .watch-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr) 360px; gap: 24px; align-items: start; margin-top: 12px; }
  .watch-col-left { display: block; }
  .watch-poster { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 12px; border: 1px solid #26263a; }
  .watch-title { font-size: 24px; margin: 14px 0 6px; line-height: 1.3; }
  .watch-cur-ep { font-size: 15px; color: #a78bfa; font-weight: 700; margin-bottom: 10px; }
  .watch-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
  .chip { font-size: 12px; color: #c9c9de; background: #1c1c2b; border: 1px solid #33334d; padding: 5px 11px; border-radius: 20px; }
  .chip-prov { color: #a78bfa; border-color: #8b5cf6; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  .watch-synopsis { font-size: 14px; color: #b9b9d0; line-height: 1.65; margin: 12px 0; }
  .watch-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
  .watch-actions .btn { flex: 1; justify-content: center; }
  .watch-col-center { min-width: 0; }
  .watch-head-mobile { display: none; }
  .watch-col-right { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
  .watch-eps-title { margin: 0 0 10px; font-size: 17px; }
  .eps.eps-side { grid-template-columns: repeat(6, 1fr); gap: 7px; margin: 0; }
  .eps-side a { min-height: 40px; font-size: 13.5px; }
  /* v6.2: desktop player taller — 175% of the old 16/9 height (aspect 1/1
     ≈ 178%), same width. Phone unchanged (this block is desktop-only).
     :not(.reels) keeps the reels 9/16 mode intact; :not(:fullscreen)
     keeps fullscreen filling the screen. Reels max-height raised to
     90dvh so the playing player never shrinks below the pre-play one. */
  .watch-col-center .player:not(.reels):not(:fullscreen):not(:-webkit-full-screen) .vid-wrap { aspect-ratio: 1/1; }
  .watch-col-center .player.reels .vid-wrap { max-height: 90dvh; }
}

/* --- larger screens (restored from ev.orx.ma) --- */
@media (min-width: 600px) {
  body { padding-bottom: 0; }
  .bottomnav { display: none; }
  .nav { overflow: visible; flex-wrap: wrap; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .watch-head img { width: 150px; height: 225px; }
  .eps { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .eps { grid-template-columns: repeat(8, 1fr); }
}
@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(5, 1fr); }
}

/* --- ED additions: download links + detail --- */
.card-year { font-size: 11px; color: #9a9ab5; padding: 2px 0; }
.dl-list { display: grid; gap: 8px; margin: 12px 0 4px; }
.dl-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-radius: 10px; background: #1c1c2b; border: 1px solid #33334d; font-size: 15px; font-weight: 600; }
.dl-list a:active { border-color: #8b5cf6; }
.dl-list a .q { color: #a78bfa; font-size: 13px; font-weight: 700; }
.dl-list a .host { color: #e8e8f2; }
.notice { padding: 14px 16px; border-radius: 10px; background: #1c1c2b; border: 1px solid #33334d; color: #b9b9d0; font-size: 14px; line-height: 1.6; margin: 12px 0; }
.notice a { color: #a78bfa; font-weight: 700; }
.pager { display: flex; gap: 10px; justify-content: center; margin: 22px 0 4px; }
.pager a { padding: 10px 18px; border-radius: 10px; background: #1c1c2b; border: 1px solid #33334d; font-weight: 700; }
.pager a.on { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
.section-head h2 { margin: 0; }
.section-head a { font-size: 13px; color: #a78bfa; font-weight: 700; }