/**
 * السمة الداكنة — الافتراضية.
 *
 * كل شيء عبر متغيّرات CSS كي يكون تغيير هوية الموقع سطرين لا نسخة معدّلة
 * من الملف. والداكن افتراضي لأن الفيديو يُشاهد في الظلام غالباً، وواجهة
 * فاتحة حول صورة داكنة تُتعب العين وتسرق الانتباه من المحتوى.
 */

.mp-root {
  --mp-accent: #f5a524;
  --mp-bg: #000;
  --mp-fg: #fff;
  --mp-dim: rgba(255, 255, 255, .72);
  --mp-panel: rgba(18, 20, 26, .96);
  --mp-line: rgba(255, 255, 255, .14);
  --mp-track: rgba(255, 255, 255, .28);
  --mp-radius: 10px;
  --mp-shadow: 0 10px 40px rgba(0, 0, 0, .55);

  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--mp-bg);
  color: var(--mp-fg);
  border-radius: var(--mp-radius);
  overflow: hidden;
  font: 14px/1.5 system-ui, "Segoe UI", Tahoma, sans-serif;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mp-root:focus-visible { box-shadow: 0 0 0 3px var(--mp-accent); }

.mp-stage, .mp-stage > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-chrome { position: absolute; inset: 0; pointer-events: none; }
.mp-chrome > * { pointer-events: auto; }

/* ── الوسط ─────────────────────────────────────────────────────── */
.mp-center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.mp-big {
  pointer-events: auto;
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center;
  backdrop-filter: blur(6px);
  transition: transform .15s, background .15s;
}
.mp-big:hover { background: var(--mp-accent); color: #1a1206; transform: scale(1.06); }
.mp-big svg { width: 34px; height: 34px; }

.mp-spin {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .22); border-top-color: var(--mp-accent);
  animation: mp-spin .8s linear infinite;
}
@keyframes mp-spin { to { transform: rotate(360deg); } }

/* ── الشريط السفلي ─────────────────────────────────────────────── */
.mp-bar {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 34px 12px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .82));
  opacity: 1; transition: opacity .22s, transform .22s;
}
.mp-root.playing:not(.awake) .mp-bar { opacity: 0; transform: translateY(8px); }
.mp-root.playing:not(.awake) { cursor: none; }

.mp-progress {
  position: relative; height: 4px; margin-bottom: 8px; cursor: pointer;
  background: var(--mp-track); border-radius: 99px; outline: none;
  transition: height .12s;
}
.mp-progress:hover, .mp-progress:focus-visible { height: 7px; }
.mp-buffered, .mp-played {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  border-radius: 99px; width: 0;
}
.mp-buffered { background: rgba(255, 255, 255, .34); }
.mp-played { background: var(--mp-accent); }
.mp-knob {
  position: absolute; inset-inline-end: -6px; top: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--mp-accent); transform: translateY(-50%) scale(0);
  transition: transform .12s;
}
.mp-progress:hover .mp-knob, .mp-progress:focus-visible .mp-knob { transform: translateY(-50%) scale(1); }

/* ── الفصول على الشريط ─────────────────────────────────────────── */
/*
 * العلامة فوق الطبقتين (المخزَّن والمشغَّل) وتحت المقبض: تبقى مرئية
 * على الجزء المشاهَد وعلى غير المشاهَد معاً، ولا تحجب موضع السحب.
 */
.mp-marks { position: absolute; inset: 0; pointer-events: none; }
.mp-marks i {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: rgba(255, 255, 255, .85);
  /* التحويل نصف العرض: بلا هذا تقع العلامة بعد موضعها بمقدار عرضها،
     وهو فارقٌ يُرى على شريط رفيع. */
  transform: translateX(50%);
  border-radius: 1px;
}
[dir="ltr"] .mp-marks i { transform: translateX(-50%); }

.mp-tip {
  position: absolute; bottom: 14px; transform: translateX(50%);
  background: rgba(0, 0, 0, .9); border: 1px solid var(--mp-line);
  color: var(--mp-fg); font-size: 11.5px; white-space: nowrap;
  padding: 3px 9px; border-radius: 6px; pointer-events: none;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
[dir="ltr"] .mp-tip { transform: translateX(-50%); }

.mp-controls { display: flex; align-items: center; gap: 4px; }
.mp-controls button {
  background: none; border: 0; color: var(--mp-fg); cursor: pointer;
  width: 38px; height: 38px; border-radius: 8px;
  display: grid; place-items: center; padding: 0;
  transition: background .12s, color .12s;
}
.mp-controls button:hover { background: rgba(255, 255, 255, .14); }
.mp-controls button:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: -2px; }
.mp-controls svg { width: 21px; height: 21px; }
.mp-spacer { flex: 1; }

/* ── القفز ±ث ──────────────────────────────────────────────────── */
/*
 * الرقم داخل السهم لا بجواره: السهم وحده لا يقول كم ثانية، ورقمٌ منفصل
 * يأكل عرضاً في شريط مزدحم أصلاً. الحرف صغير جداً عمداً — يُقرأ ولا يزاحم.
 */
.mp-back, .mp-fwd { position: relative; }
.mp-back b, .mp-fwd b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 8px; font-weight: 700; font-variant-numeric: tabular-nums;
  /* السهم يلتفّ حول الرقم، فيُزاح قليلاً ليقع في مركز الدائرة لا الوسم. */
  padding-top: 3px; pointer-events: none;
}
.mp-back:active svg, .mp-fwd:active svg { transform: scale(.86); }
.mp-back svg, .mp-fwd svg { transition: transform .1s; }

/* ── زرّ الجودة ────────────────────────────────────────────────── */
/*
 * أيقونة + التسمية الحالية: المشاهد يعرف مستواه بلا فتح القائمة، وهو
 * السؤال الذي يُفتح الترس لأجله في أغلب الأحيان.
 */
.mp-quality {
  width: auto !important; gap: 5px; padding: 0 9px !important;
  display: inline-flex !important; align-items: center;
}
.mp-qlabel {
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--mp-dim); letter-spacing: .01em;
}
.mp-quality:hover .mp-qlabel { color: var(--mp-fg); }
.mp-quality:empty, .mp-qlabel:empty { display: none; }

.mp-vol-wrap { display: flex; align-items: center; }
.mp-vol {
  width: 0; opacity: 0; height: 4px; margin-inline-start: 2px;
  accent-color: var(--mp-accent); cursor: pointer;
  transition: width .18s, opacity .18s;
}
.mp-vol-wrap:hover .mp-vol, .mp-vol:focus-visible { width: 74px; opacity: 1; }

.mp-time { font-variant-numeric: tabular-nums; color: var(--mp-dim); margin-inline: 8px; direction: ltr; }
.mp-time b { color: var(--mp-fg); font-weight: 500; }

.mp-livebadge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-inline: 8px; }
.mp-livebadge i { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: mp-pulse 1.8s infinite; }
@keyframes mp-pulse { 50% { opacity: .35; } }

/* ── السيرفرات ─────────────────────────────────────────────────── */
.mp-servers {
  position: absolute; inset-inline: 0; bottom: 62px;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 0 12px;
}
.mp-srv-label { font-size: 11px; color: var(--mp-dim); margin-inline-end: 4px; }
.mp-srv {
  background: rgba(0, 0, 0, .6); color: var(--mp-fg);
  border: 1px solid var(--mp-line); border-radius: 99px;
  padding: 5px 11px; font: inherit; font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  backdrop-filter: blur(4px);
}
.mp-srv:hover { border-color: var(--mp-accent); }
.mp-srv.on { background: var(--mp-accent); color: #1a1206; border-color: var(--mp-accent); font-weight: 600; }
.mp-dot { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }
.mp-dot.up { background: #22c55e; } .mp-dot.degraded { background: #eab308; }
.mp-dot.down { background: #ef4444; } .mp-dot.unknown { background: #94a3b8; }

/* ── القائمة ───────────────────────────────────────────────────── */
.mp-menu {
  position: absolute; inset-inline-end: 12px; bottom: 58px;
  min-width: 190px; max-height: 62%; overflow: auto;
  background: var(--mp-panel); border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius); box-shadow: var(--mp-shadow);
  padding: 6px;
}
.mp-mgroup { font-size: 11px; color: var(--mp-dim); padding: 7px 10px 4px; }
.mp-mnote { font-size: 12px; color: var(--mp-dim); padding: 8px 10px; }
.mp-mitem {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; background: none; border: 0; color: var(--mp-fg);
  padding: 8px 10px; border-radius: 7px; cursor: pointer;
  font: inherit; text-align: start;
}
.mp-mitem:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.mp-mitem.on { color: var(--mp-accent); font-weight: 600; }
.mp-mitem:disabled { opacity: .5; cursor: not-allowed; }
.mp-hd { font-size: 9px; background: var(--mp-accent); color: #1a1206; padding: 1px 4px; border-radius: 3px; vertical-align: middle; }
.mp-lock { font-size: 10px; color: var(--mp-dim); font-style: normal; }

/* ── الرسائل ───────────────────────────────────────────────────── */
.mp-toast {
  position: absolute; inset-inline-start: 50%; top: 16px; transform: translateX(-50%);
  background: rgba(0, 0, 0, .82); border: 1px solid var(--mp-line);
  padding: 7px 14px; border-radius: 99px; font-size: 13px;
  backdrop-filter: blur(6px); white-space: nowrap;
}
.mp-message {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background: rgba(0, 0, 0, .78); padding: 24px; font-size: 15px; line-height: 1.8;
}
.mp-message.fatal { color: #fca5a5; }

.mp-root [hidden] { display: none !important; }

/* ── الجوال ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .mp-controls button { width: 44px; height: 44px; }   /* مساحة لمس مقبولة */
  .mp-vol-wrap { display: none; }                       /* أزرار الجهاز أولى */
  /* النقر المزدوج يميناً/يساراً يقفز ±10ث على اللمس، فالزرّان مكرّران
     ويأكلان عرضاً نحتاجه للجودة وملء الشاشة. */
  .mp-back, .mp-fwd { display: none; }
  .mp-quality { padding: 0 6px !important; }
  .mp-qlabel { font-size: 10px; }
  .mp-time { font-size: 12px; margin-inline: 4px; }
  .mp-big { width: 62px; height: 62px; }
  .mp-servers { bottom: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-bar, .mp-progress, .mp-big, .mp-vol { transition: none; }
  .mp-spin { animation-duration: 2s; }
  .mp-livebadge i { animation: none; }
}

/* ── البث المباشر ──────────────────────────────────────────────── */
.mp-livebadge.dim i { animation: none; background: #94a3b8; }
.mp-golive {
  background: #ef4444; color: #fff; border: 0; border-radius: 99px;
  padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; margin-inline: 6px; width: auto !important; height: auto !important;
}
.mp-golive:hover { background: #dc2626; }

.mp-watermark { will-change: top, inset-inline-start, opacity; }

/* ── الإعلانات ─────────────────────────────────────────────────── */
.mp-overlay {
  position: absolute; inset-inline: 0; z-index: 4;
  display: flex; justify-content: center; align-items: flex-end;
  padding: 10px; pointer-events: none;
}
.mp-overlay[data-pos="bottom"] { bottom: 62px; }
.mp-overlay[data-pos="top"]    { top: 10px; align-items: flex-start; }
.mp-overlay[data-pos="center"] { inset-block: 0; align-items: center; }
.mp-overlay-body {
  position: relative; pointer-events: auto;
  max-width: min(560px, 92%); max-height: 30%;
  background: var(--mp-panel); border: 1px solid var(--mp-line);
  border-radius: 8px; overflow: hidden; box-shadow: var(--mp-shadow);
}
.mp-overlay-body img { display: block; width: 100%; height: auto; }
.mp-overlay-x {
  position: absolute; inset-inline-end: 6px; top: 6px; pointer-events: auto;
  /* 32px لا 20px: زرّ إغلاق لا يُصاب بالإبهام هو إعلانٌ بلا مخرج. */
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.75); color: #fff; border: 1px solid var(--mp-line);
  cursor: pointer; font-size: 14px; line-height: 1;
}
.mp-overlay-x:hover { background: #000; }

.mp-pausead {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center; background: rgba(0,0,0,.55);
  padding: 24px;
}
.mp-pausead img, .mp-pausead > * {
  max-width: min(640px, 90%); max-height: 76%;
  border-radius: 10px; box-shadow: var(--mp-shadow);
}

/* ── بوابة الاشتراك ────────────────────────────────────────────── */
.mp-gate {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center; text-align: center;
  background: rgba(6, 8, 12, .82);
  /* المشهد يبقى خلفها مموّهاً: ما يشتريه أمام عينه وهو يقرّر. */
  backdrop-filter: blur(10px) saturate(.7);
  padding: 22px;
}
.mp-gate-card { max-width: 380px; }
.mp-gate-kicker {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mp-accent); margin-bottom: 10px;
}
.mp-gate-msg { font-size: 17px; font-weight: 600; line-height: 1.8; margin-bottom: 16px; }
.mp-gate-cta {
  display: inline-block; background: var(--mp-accent); color: #1a1206;
  border: 0; border-radius: 8px; padding: 10px 26px;
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
}
.mp-gate-cta:hover { filter: brightness(1.08); }

@media (max-width: 640px) {
  .mp-overlay[data-pos="bottom"] { bottom: 70px; }
  .mp-overlay-body { max-width: 96%; }
  .mp-gate-msg { font-size: 15px; }
}