/* ================================================================
   مشغل فديو — Player CSS v1.3
   Author: Abdo Hassn | sexaty.com
   ================================================================ */

:root { --vp-primary: #e50914; --vp-bg: #0a0a0a; --vp-ctrl: rgba(0,0,0,.8); }

/* Wrapper */
.vp-wrap { position:relative; width:100%; font-family:'Cairo',Tahoma,sans-serif; direction:rtl; }

/* ── Embed iframe ── */
.vp-embed-wrap { border-radius:10px; overflow:hidden; box-shadow:0 6px 40px rgba(0,0,0,.6); }
.vp-embed-wrap iframe { display:block; }

/* ── Local video wrapper ── */
.vp-local-wrap { border-radius:10px; overflow:hidden; box-shadow:0 6px 40px rgba(0,0,0,.6); }
.vp-video { display:block; width:100%; max-height:75vh; background:#000; }

/* ── Watermark ── */
.vp-watermark {
    position:absolute; z-index:20; pointer-events:none;
    color:#fff; font-size:13px; font-weight:700;
    text-shadow:0 1px 4px rgba(0,0,0,.9);
    letter-spacing:.5px; white-space:nowrap;
    padding:4px 8px; background:rgba(0,0,0,.35); border-radius:4px;
    user-select:none;
}

/* ── Controls ── */
.vp-controls {
    position:absolute; bottom:0; left:0; right:0; z-index:15;
    background:linear-gradient(to top, rgba(0,0,0,.9) 0%, transparent 100%);
    padding:8px 12px 10px;
    opacity:0; transition:opacity .25s ease;
}
.vp-local-wrap:hover .vp-controls,
.vp-local-wrap.vp-paused .vp-controls { opacity:1; }

/* Progress bar */
.vp-progress-wrap { margin-bottom:8px; cursor:pointer; padding:4px 0; }
.vp-progress-bg   { position:relative; height:4px; background:rgba(255,255,255,.2); border-radius:2px; transition:height .15s; }
.vp-progress-wrap:hover .vp-progress-bg { height:6px; }
.vp-progress-buf  { position:absolute; inset:0; background:rgba(255,255,255,.3); border-radius:2px; width:0; }
.vp-progress-fill { position:absolute; inset:0; background:var(--vp-primary); border-radius:2px; width:0; }
.vp-progress-thumb {
    position:absolute; top:50%; right:0; transform:translate(50%,-50%);
    width:12px; height:12px; background:var(--vp-primary); border-radius:50%;
    box-shadow:0 0 6px rgba(0,0,0,.5); opacity:0; transition:opacity .15s;
}
.vp-progress-wrap:hover .vp-progress-thumb { opacity:1; }

/* Buttons row */
.vp-btns-row { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.vp-btns-left,.vp-btns-right { display:flex; align-items:center; gap:4px; }

.vp-btn {
    background:none; border:none; color:#fff; cursor:pointer;
    font-size:14px; padding:4px 7px; border-radius:5px;
    transition:background .15s,color .15s; white-space:nowrap;
    font-family:inherit;
}
.vp-btn:hover { background:rgba(255,255,255,.15); }
.vp-btn:focus { outline:2px solid var(--vp-primary); outline-offset:2px; }

.vp-play span { font-size:15px; }
.vp-back,.vp-forward { font-size:12px; font-weight:700; }

/* Volume */
.vp-vol-wrap { display:flex; align-items:center; gap:4px; }
.vp-vol-slider {
    width:70px; height:4px; cursor:pointer;
    -webkit-appearance:none; appearance:none;
    background:rgba(255,255,255,.3); border-radius:2px;
    outline:none;
}
.vp-vol-slider::-webkit-slider-thumb {
    -webkit-appearance:none; width:12px; height:12px;
    background:var(--vp-primary); border-radius:50%; cursor:pointer;
}

/* Time */
.vp-time { font-size:12px; color:rgba(255,255,255,.8); font-variant-numeric:tabular-nums; }

/* Quality menu */
.vp-quality-wrap { position:relative; }
.vp-quality-menu {
    display:none; position:absolute; bottom:calc(100% + 6px); right:0;
    background:#1a1a1a; border:1px solid rgba(255,255,255,.1);
    border-radius:8px; list-style:none; margin:0; padding:6px 0;
    min-width:100px; z-index:50; box-shadow:0 4px 20px rgba(0,0,0,.5);
}
.vp-quality-menu.open { display:block; }
.vp-quality-menu li {
    padding:7px 14px; cursor:pointer; color:#ccc; font-size:13px;
    transition:background .15s;
}
.vp-quality-menu li:hover { background:rgba(255,255,255,.08); color:#fff; }
.vp-quality-menu li.active { color:var(--vp-primary); font-weight:700; }

/* ── Banner Ad ── */
.vp-ad-banner {
    position:absolute; left:0; right:0; z-index:30; text-align:center;
    padding:6px; background:rgba(0,0,0,.6);
}
.vp-ad-banner-top    { top:0; }
.vp-ad-banner-bottom { bottom:0; }
.vp-ad-banner img { max-width:100%; max-height:80px; border-radius:4px; display:inline-block; }
.vp-banner-close {
    position:absolute; top:4px; right:6px;
    background:rgba(0,0,0,.7); color:#fff; border:none;
    border-radius:50%; width:22px; height:22px; cursor:pointer; font-size:11px;
}

/* ── HTML Ad Overlay ── */
.vp-ad-html {
    position:absolute; inset:0; z-index:40;
    background:rgba(0,0,0,.92); display:flex; flex-direction:column;
    align-items:center; justify-content:center; padding:20px; text-align:center;
}
.vp-ad-html-inner { color:#fff; font-size:15px; line-height:1.7; }
.vp-ad-skip-bar {
    margin-top:14px; background:rgba(255,255,255,.15);
    border-radius:6px; padding:6px 18px; color:#ccc; font-size:13px;
}
.vp-ad-close {
    position:absolute; top:10px; right:12px;
    background:rgba(255,255,255,.15); color:#fff; border:none;
    border-radius:50%; width:28px; height:28px; cursor:pointer;
    font-size:13px; display:none;
}

/* ── Responsive ── */
@media (max-width:600px) {
    .vp-vol-slider { width:50px; }
    .vp-time { font-size:11px; }
    .vp-btn  { padding:3px 5px; font-size:13px; }
    .vp-watermark { font-size:11px; }
}