/* ═══════════════════════════════════════════════════════════════════
   FlixTN — Enhancements CSS v8.0
   ✅ Removed duplicate Google Fonts    ✅ Netflix-style mobile layout for series/movie page
   ✅ RTL-aware player controls
   ✅ Skeleton loaders
   ✅ Smooth transitions
   ✅ Better download buttons
   ✅ Error/fallback UI
   ✅ Safe-area insets for notched phones
   ✅ Tablet layout fixes
   ✅ Performance will-change & reduced-motion
   ✅ PLAYER PAGE complete mobile fix (v8)
═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   ─── 0. PLAYER PAGE — صفحة المشاهدة الكاملة على الهاتف ──────
   ══════════════════════════════════════════════════════════════ */

/* ─── قاعدة أساسية: منع overflow أفقي في كل الصفحة ─── */
body,
.player-page,
.p-page {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

@media (max-width: 768px) {

  /* ── الصفحة الكاملة ── */
  .p-page {
    padding: 0 !important;
    min-height: 100vh !important;
    padding-bottom: 5.5rem !important;
  }

  /* ── الهيدر العلوي (زر رجوع + العنوان + أزرار الجودة/اللغة) ── */
  .p-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .6rem !important;
    padding: .7rem .9rem !important;
    background: #000 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
  }

  /* صف أول: زر رجوع + العنوان */
  .p-header > div:first-child {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: .6rem !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  /* صف ثاني: أزرار الجودة/اللغة → تصبح صف كامل */
  .p-header > div:last-child {
    width: 100% !important;
    display: flex !important;
    gap: .5rem !important;
    flex-wrap: wrap !important;
  }

  .p-header > div:last-child button,
  .p-header > div:last-child .btn-ol {
    flex: 1 !important;
    justify-content: center !important;
    font-size: .78rem !important;
    padding: .45rem .6rem !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  /* زر رجوع */
  .p-back {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
  }

  /* العنوان — يُقلَّص إذا طال */
  .p-title {
    font-size: 1rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100vw - 100px) !important;
  }

  .p-subtitle {
    font-size: .72rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100vw - 100px) !important;
  }

  /* ── المنطقة الرئيسية: grid عمودان → عمود واحد ── */
  .p-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    grid-template-columns: unset !important;
  }

  /* ── منطقة المشغّل ── */
  .p-player-area {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  /* ── المشغّل نفسه ── */
  .player-page,
  .player-outer {
    width: 100% !important;
    max-width: 100vw !important;
  }

  .player-inner {
    width: 100% !important;
    max-width: 100vw !important;
    height: 56.25vw !important;
    max-height: 56.25vw !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
  }

  .player-inner iframe,
  .player-inner video {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    border: none !important;
  }

  /* ── شريط أزرار التحكم تحت المشغّل ── */
  .player-controls {
    width: 100% !important;
    padding: .5rem .7rem !important;
    gap: .4rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .pc-btn {
    font-size: .72rem !important;
    padding: .38rem .7rem !important;
    white-space: nowrap !important;
  }

  /* ── شريط التقدم ── */
  .player-progress-wrap {
    padding: .3rem .8rem .25rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── القسم الجانبي (حلقات/مواسم) يأتي تحت المشغّل ── */
  .p-side {
    width: 100% !important;
    max-width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    padding: .8rem .9rem !important;
    box-sizing: border-box !important;
    order: 3 !important;
  }

  /* ── قسم التعليقات ── */
  .p-player-area > div[style*="marginTop"] {
    padding: 0 .9rem !important;
    margin-top: 1rem !important;
  }

  /* ── معلومات الفيلم (player-info) ── */
  .player-info {
    padding: .9rem .9rem 1.5rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── الـ sidebar للحلقات (p-ep-sidebar) ── */
  .p-ep-sidebar {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
}

/* ─── شاشات صغيرة جداً (أقل من 400px) ─── */
@media (max-width: 400px) {
  .p-title  { font-size: .88rem !important; }
  .p-subtitle { font-size: .68rem !important; }
  .pc-btn   { font-size: .67rem !important; padding: .3rem .55rem !important; }
  .player-inner { height: 56vw !important; max-height: 56vw !important; }
}

/* ─── 1. SERIES/MOVIE PAGE MOBILE ──────────────────────────── */
@media (max-width: 767px) {
  .d-hero-c {
    padding: .8rem .9rem 1.5rem !important;
  }
  .d-hero-c > div {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem !important;
  }
  .d-poster {
    width: 120px !important;
    height: 180px !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.6) !important;
  }
  .d-hero-c > div > div:last-child {
    flex: unset !important;
    width: 100% !important;
  }
  .d-hero-c .btn-play,
  .d-hero-c .btn-ol,
  .d-hero-c .fn5-dl-btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .hero-btns {
    flex-direction: column !important;
    gap: .55rem !important;
  }
  .d-hero-c [style*="flex-wrap"] {
    justify-content: center !important;
  }
  .d-title {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
  .d-tabs {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 1.2rem !important;
    padding-bottom: .5rem !important;
    border-bottom-color: rgba(255,255,255,.08) !important;
  }
  .d-tabs::-webkit-scrollbar { display: none; }
  .d-tab {
    white-space: nowrap !important;
    font-size: .8rem !important;
    padding-bottom: .8rem !important;
  }
  .d-content {
    padding: 1rem .9rem 6rem !important;
  }
  .d-grid-info {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .d-side-info,
  .sb-card { display: none !important; }
  .d-tab-view { overflow-x: hidden !important; }
  .season-tabs,
  .fn-sn-tabs {
    flex-wrap: wrap !important;
    gap: .4rem !important;
  }
  .d-hero {
    height: auto !important;
    min-height: 240px !important;
  }
  .d-hero-bg {
    background-attachment: scroll !important;
  }

  /* Episode cards — Netflix vertical layout */
  .ep-detailed {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: var(--s1, #1a1a24) !important;
    border-color: rgba(255,255,255,.06) !important;
  }
  .ep-detailed:hover {
    transform: none !important;
    border-color: rgba(229,9,20,.3) !important;
  }
  .ep-thumb-wrap {
    width: 100% !important;
    height: 170px !important;
    flex-shrink: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }
  .ep-idx { display: none !important; }
  .ep-main {
    width: 100% !important;
    padding: .75rem .85rem .9rem !important;
  }
  .ep-name { font-size: .88rem !important; }
  .ep-metadata {
    flex-wrap: wrap !important;
    gap: .4rem !important;
  }
}

/* ─── 1b. TABLET (640–900px) ────────────────────────────────── */
@media (min-width: 640px) and (max-width: 900px) {
  .ep-detailed { padding: .8rem !important; gap: .9rem !important; }
  .ep-thumb-wrap { width: 140px !important; height: 80px !important; }
  .d-grid-info { grid-template-columns: 1fr !important; }
  .d-poster { width: 160px !important; height: 240px !important; }
}

/* ─── 2. VIDEO PLAYER ───────────────────────────────────────── */
.player-progress {
  cursor: pointer;
  border-radius: 4px !important;
  transition: height .18s ease;
  height: 4px !important;
}
.player-progress:hover { height: 7px !important; }
.player-progress-fill {
  transition: width .35s linear !important;
  border-radius: 4px !important;
}
@media (max-width: 768px) {
  .player-inner { max-height: 56vw !important; }
  .player-controls {
    flex-wrap: wrap !important;
    gap: .4rem !important;
    justify-content: center !important;
    padding: .55rem .7rem !important;
  }
  .pc-btn { font-size: .72rem !important; padding: .4rem .75rem !important; }
}
.fn5-player-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--bg1, #0b0b10);
  color: var(--t3, #666);
  font-family: Cairo, sans-serif;
  font-size: .88rem;
  text-align: center;
  padding: 2rem;
  aspect-ratio: 16/9;
}
.fn5-player-error .fn5-err-icon { font-size: 3rem; opacity: .4; }
.fn5-player-error .fn5-err-msg { color: var(--t2, #999); max-width: 300px; line-height: 1.6; }
.fn5-player-error .fn5-retry-btn {
  background: var(--red, #e50914);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .55rem 1.4rem;
  font-family: Cairo, sans-serif;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.fn5-player-error .fn5-retry-btn:hover {
  background: #ff1f2e;
  transform: translateY(-2px);
}

/* ─── 3. SEASON TABS ────────────────────────────────────────── */
.fn-sn-header { margin-bottom: 1rem; }
.fn-sn-label {
  font-size: .6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--t4, #444);
  margin-bottom: .7rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.fn-sn-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--s3, #333), transparent);
}
.fn-sn-tabs { display: flex; flex-wrap: wrap; gap: .45rem; }
.fn-sn-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .48rem 1.05rem;
  background: var(--s2, #1a1a28);
  border: 1.5px solid var(--s3, #2a2a3a);
  border-radius: 9px;
  color: var(--t2, #888);
  font-family: 'Cairo', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
  outline: none;
}
.fn-sn-btn:hover {
  color: var(--t1, #fff);
  border-color: var(--s4, #3a3a5a);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.fn-sn-btn.active {
  background: linear-gradient(135deg, #e50914, #a00008);
  border-color: #e50914;
  color: #fff;
  box-shadow: 0 4px 14px #e5091450;
}
.fn-sn-count {
  background: rgba(255,255,255,.18);
  border-radius: 20px;
  padding: .08rem .42rem;
  font-size: .67rem;
  font-weight: 900;
}
.fn-sn-btn:not(.active) .fn-sn-count {
  background: var(--s3, #2a2a3a);
  color: var(--t3, #666);
}

/* ─── 4. DOWNLOAD BUTTON — HERO ─────────────────────────────── */
.fn5-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .82rem 1.6rem;
  background: transparent;
  border: 2px solid rgba(245,197,24,.5);
  border-radius: 10px;
  color: #f5c518;
  font-family: Cairo, sans-serif;
  font-size: .88rem;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: all .22s;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.fn5-dl-btn:hover {
  background: linear-gradient(135deg, #f5c518, #e6b800);
  color: #000;
  border-color: #f5c518;
  box-shadow: 0 6px 24px rgba(245,197,24,.4);
  transform: translateY(-2px);
}
.fn5-dl-btn:active { transform: translateY(0); }

/* ─── 5. DOWNLOAD BUTTON — EPISODE ──────────────────────────── */
.fn5-ep-act {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .55rem;
  flex-wrap: wrap;
}
.fn5-ep-dl {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .75rem;
  background: rgba(245,197,24,.07);
  border: 1px solid rgba(245,197,24,.2);
  color: #f5c518;
  border-radius: 7px;
  font-family: Cairo, sans-serif;
  font-size: .73rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all .18s;
  flex-shrink: 0;
}
.fn5-ep-dl:hover {
  background: rgba(245,197,24,.2);
  border-color: #f5c518;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(245,197,24,.2);
}
.fn5-no-dl {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--t4, #3e3828);
  font-size: .72rem;
  font-family: Cairo, sans-serif;
}

/* ─── 6. SKELETON LOADING ───────────────────────────────────── */
.fn5-skel {
  background: linear-gradient(
    90deg,
    var(--s2, #20202e) 25%,
    var(--s3, #28283c) 50%,
    var(--s2, #20202e) 75%
  );
  background-size: 200% 100%;
  border-radius: 8px;
  animation: fn5-shimmer 1.6s infinite;
}
@keyframes fn5-shimmer {
  0%   { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.fn5-skel-ep {
  height: 110px;
  border-radius: 14px;
  margin-bottom: 1rem;
}
@media (max-width: 767px) {
  .fn5-skel-ep { height: 200px; }
}

/* ─── 7. PAGE TRANSITION ────────────────────────────────────── */
.fn5-page-enter {
  animation: fn5-fadein .3s ease-out both;
}
@keyframes fn5-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── 8. AUTOPLAY TOAST ─────────────────────────────────────── */
#fn5-autoplay {
  animation: fn5-slideIn .35s cubic-bezier(.4,0,.2,1);
}
@keyframes fn5-slideIn {
  from { transform: translateX(-110%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ─── 9. MOBILE NAV SAFE AREA ───────────────────────────────── */
@media (max-width: 768px) {
  .mob-bottom-nav {
    padding-bottom: max(.5rem, env(safe-area-inset-bottom)) !important;
  }
  .d-content,.c-page,.prof-page,.adm-page,.auth-page {
    padding-bottom: 5.5rem !important;
  }
  .hero {
    height: 78vh !important;
    min-height: 460px !important;
  }
  .hero-c {
    padding: 1.2rem 1rem max(4.5rem, env(safe-area-inset-bottom, 4.5rem)) !important;
  }
  .c-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .65rem !important;
  }
}

/* ─── 10. CONTENT GRID MOBILE ───────────────────────────────── */
@media (max-width: 600px) {
  .c-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .65rem !important; }
  .card { border-radius: 10px !important; }
  .card-title { font-size: .76rem !important; -webkit-line-clamp: 2 !important; }
  .wide-card { min-width: 150px !important; width: 150px !important; }
  .wide-img { width: 150px !important; height: 85px !important; }
}

/* ─── 11. PERFORMANCE ───────────────────────────────────────── */
.card,.feat-card,.wide-card,.rank-card,.ep-detailed { will-change: transform; }
.card:not(:hover),.feat-card:not(:hover),.wide-card:not(:hover) { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ─── 12. CUSTOM SCROLLBAR ──────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold, #f5c518), var(--red, #e50914));
  border-radius: 4px;
}
* { scrollbar-width: thin; scrollbar-color: var(--gold,#f5c518) transparent; }

/* ─── 13. FOCUS RING ────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold, #f5c518);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── 14. EPISODE ACTIONS ───────────────────────────────────── */
.ep-actions { display:flex; align-items:center; gap:.45rem; margin-top:.5rem; flex-wrap:wrap; }
.ep-watch-btn {
  display:inline-flex; align-items:center; gap:.3rem; padding:.33rem .85rem;
  background:linear-gradient(135deg,var(--red,#e50914),#a00008); border:none;
  border-radius:7px; color:#fff; font-family:'Cairo',sans-serif; font-size:.72rem;
  font-weight:700; cursor:pointer; transition:all .16s; text-decoration:none;
}
.ep-watch-btn:hover { transform:translateY(-1px); box-shadow:0 3px 12px #e5091450; }
.ep-dl-btn {
  display:inline-flex; align-items:center; gap:.3rem; padding:.33rem .75rem;
  background:var(--s2,#1a1a28); border:1.5px solid var(--s3,#2a2a3a);
  border-radius:7px; color:var(--t2,#999); font-family:'Cairo',sans-serif;
  font-size:.72rem; font-weight:700; cursor:pointer; text-decoration:none; transition:all .16s;
}
.ep-dl-btn:hover {
  background:rgba(245,197,24,.1); border-color:var(--gold,#f5c518);
  color:var(--gold,#f5c518); transform:translateY(-1px);
}
@media (max-width:480px) {
  .ep-actions { gap:.35rem; }
  .ep-watch-btn,.ep-dl-btn { font-size:.7rem; padding:.3rem .65rem; }
}

/* ─── 15. IMAGE LAZY FADE-IN ────────────────────────────────── */
.card-img,.ep-thumb-img,.hist-poster,.feat-img,.wide-img { background: var(--s2,#20202e); }

/* ─── 16. TOAST ─────────────────────────────────────────────── */
.fn5-toast {
  position:fixed; bottom:5.5rem; left:50%; transform:translateX(-50%);
  background:rgba(10,10,16,.95); border:1px solid rgba(245,197,24,.3); border-radius:10px;
  color:#f5c518; font-family:Cairo,sans-serif; font-size:.82rem; padding:.65rem 1.4rem;
  z-index:9000; animation:fn5-toast-in .3s ease-out; backdrop-filter:blur(12px);
  white-space:nowrap; pointer-events:none;
}
@keyframes fn5-toast-in {
  from { opacity:0; transform:translateX(-50%) translateY(8px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ─── DOWNLOAD BUTTON — PLAYER PAGE (.player-controls) ──────── */
.fn5-player-dl {
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  color: #f5c518 !important;
  background: rgba(245,197,24,.1) !important;
  border: 1px solid rgba(245,197,24,.35) !important;
  border-radius: 8px !important;
  padding: .52rem 1.1rem !important;
  font-family: Cairo, sans-serif !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all .2s !important;
  white-space: nowrap !important;
}
.fn5-player-dl:hover {
  background: rgba(245,197,24,.22) !important;
  border-color: #f5c518 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(245,197,24,.25) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ─── MOBILE PLAYER PAGE FIX — صفحة المشاهدة على الهاتف ───────
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── الصفحة الكاملة ── */
  .player-page {
    padding-bottom: 5rem !important; /* مسافة للـ nav السفلي */
  }

  /* ── شريط التنقل العلوي ── */
  .player-nav {
    padding: .5rem .8rem !important;
    gap: .5rem !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  .player-nav > * {
    flex-shrink: 0 !important;
  }

  /* عنوان الفيلم في الـ nav — اختصاره إذا طال */
  .player-nav span,
  .player-nav div:not(.player-back) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }

  /* ── المشغّل نفسه ── */
  .player-outer {
    width: 100% !important;
  }

  .player-inner {
    width: 100% !important;
    max-height: 56.25vw !important; /* نسبة 16:9 صحيحة */
    height: 56.25vw !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
  }

  .player-inner iframe,
  .player-inner video {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    border: none !important;
  }

  /* ── شريط التحكم ── */
  .player-controls {
    padding: .55rem .7rem !important;
    gap: .4rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    background: #000 !important;
  }

  .pc-btn {
    font-size: .72rem !important;
    padding: .38rem .7rem !important;
    border-radius: 7px !important;
  }

  /* ── شريط التقدم ── */
  .player-progress-wrap {
    padding: .3rem .8rem .25rem !important;
  }

  /* ── معلومات الفيلم تحت المشغّل ── */
  .player-info {
    padding: 1rem .9rem 1.5rem !important;
    max-width: 100% !important;
  }

  /* ── أزرار الجودة/اللغة ── */
  .player-info .pc-btn,
  .player-info [class*="btn"] {
    width: 100% !important;
    justify-content: center !important;
    margin-bottom: .4rem !important;
  }

  /* ── صندوق التعليقات ── */
  .player-info .comments-section,
  .player-info [class*="comment"] {
    padding: 0 !important;
  }

  /* ── أزرار جودة/لغة كصف أفقي ── */
  .player-controls-row,
  .player-info > div:first-child {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .45rem !important;
  }
}

/* ── صغير جداً (أقل من 420px) ── */
@media (max-width: 420px) {
  .player-nav {
    padding: .4rem .6rem !important;
  }

  .player-back {
    font-size: .72rem !important;
    padding: .32rem .65rem !important;
  }

  .pc-btn {
    font-size: .68rem !important;
    padding: .32rem .55rem !important;
  }

  .player-info {
    padding: .8rem .7rem 1.2rem !important;
  }
}

/* ─── DOWNLOAD BUTTON — BELOW PLAYER (large visible) ────────── */
.fn5-below-dl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: calc(100% - 3rem);
  margin: 0 1.5rem .8rem;
  padding: .75rem;
  background: rgba(245,197,24,.08);
  border: 1.5px solid rgba(245,197,24,.35);
  border-radius: 10px;
  color: #f5c518;
  font-family: Cairo, sans-serif;
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
  transition: all .2s;
  cursor: pointer;
}
.fn5-below-dl:hover {
  background: rgba(245,197,24,.18);
  border-color: #f5c518;
  box-shadow: 0 4px 20px rgba(245,197,24,.2);
}
@media (max-width: 768px) {
  .fn5-below-dl {
    width: calc(100% - 1.8rem);
    margin: 0 .9rem .7rem;
    font-size: .85rem;
    padding: .7rem;
  }
}