/* ════════════════════════════════════════
   Venus Video Player – Frontend CSS
   ════════════════════════════════════════ */
:root { --vvp-accent: #7c3aed; }

.vvp-wrapper {
    width: 100%;
    position: relative;
    user-select: none;
    direction: ltr;
    box-sizing: border-box;
}

/* موبایل: همیشه 100% */
@media (max-width: 768px) {
    .vvp-wrapper {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ════ پوستر ════ */
.vvp-poster {
    position: relative;
    overflow: hidden;
    background: #111;
    aspect-ratio: 16/9;
    width: 100%;
    cursor: pointer;
    display: block;
}
.vvp-poster img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .5s ease;
}
.vvp-poster:hover img { transform: scale(1.03); }

/* روکش */
.vvp-overlay {
    position: absolute; inset: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.vvp-poster:hover .vvp-overlay { opacity: 0.8; }

/* عنوان */
.vvp-poster-title {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 40px 16px 14px;
    background: linear-gradient(transparent, rgba(0,0,0,.7));
    color: #fff; font-size: 15px; font-weight: 600;
    direction: rtl; pointer-events: none; z-index: 3;
}

/* ════ دکمه پلی ════ */
.vvp-play-btn {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70px; height: 70px;
    border-radius: 50%; border: none;
    cursor: pointer; z-index: 4;
    padding: 0; background: transparent;
    display: flex; align-items: center; justify-content: center;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.vvp-poster:hover .vvp-play-btn { transform: translate(-50%, -50%) scale(1.1); }

.vvp-play-icon {
    width: 70px; height: 70px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(10px) saturate(1.6);
    -webkit-backdrop-filter: blur(10px) saturate(1.6);
    border: 2px solid rgba(255,255,255,.55);
    box-shadow:
        0 0 0 0 rgba(255,255,255,.3),
        0 6px 28px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.4);
    color: #fff;
    transition: background .3s, border-color .3s, box-shadow .3s;
    animation: vvp-pulse 2.6s ease-in-out infinite;
}
.vvp-play-icon svg {
    width: 28px; height: 28px; margin-left: 3px;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
}
.vvp-poster:hover .vvp-play-icon {
    background: var(--vvp-accent);
    border-color: rgba(255,255,255,.8);
    box-shadow:
        0 0 0 12px rgba(255,255,255,.08),
        0 0 40px color-mix(in srgb, var(--vvp-accent) 60%, transparent),
        0 8px 32px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.35);
    animation: none;
}
@keyframes vvp-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.28), 0 6px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4); }
    50%       { box-shadow: 0 0 0 14px rgba(255,255,255,0), 0 6px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4); }
}

/* ════ باکس پلیر ════ */
.vvp-player-box {
    position: relative; background: #000; overflow: hidden;
}
.vvp-video {
    display: block; width: 100%; aspect-ratio: 16/9; background: #000;
}

/* ════ کنترل‌ها ════ */
.vvp-controls {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.88));
    padding: 30px 12px 8px;
    opacity: 0; transition: opacity .22s; pointer-events: none;
}
.vvp-player-box:hover .vvp-controls,
.vvp-player-box:focus-within .vvp-controls {
    opacity: 1; pointer-events: auto;
}

/* نوار پیشرفت */
.vvp-progress-wrap {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.vvp-progress-bar {
    flex: 1; height: 3px; background: rgba(255,255,255,.22);
    border-radius: 3px; position: relative; cursor: pointer;
    transition: height .15s;
}
.vvp-progress-bar:hover { height: 5px; }
.vvp-buffered {
    position: absolute; height: 100%; top: 0; left: 0;
    background: rgba(255,255,255,.3); border-radius: 3px;
}
.vvp-played {
    position: absolute; height: 100%; top: 0; left: 0;
    background: var(--vvp-accent); border-radius: 3px;
}
.vvp-thumb {
    position: absolute; top: 50%; transform: translate(-50%,-50%);
    width: 13px; height: 13px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,.5);
    transition: transform .15s; pointer-events: none;
}
.vvp-progress-bar:hover .vvp-thumb { transform: translate(-50%,-50%) scale(1.35); }
.vvp-time { color: rgba(255,255,255,.9); font-size: 11px; white-space: nowrap; }

/* بار پایین */
.vvp-bottom-bar {
    display: flex; align-items: center; justify-content: space-between;
}
.vvp-left-btns,
.vvp-right-btns { display: flex; align-items: center; gap: 2px; }

.vvp-btn {
    background: none; border: none; cursor: pointer; color: rgba(255,255,255,.9);
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; transition: background .18s, color .18s; padding: 0;
    flex-shrink: 0;
}
.vvp-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.vvp-btn svg   { width: 19px; height: 19px; }

/* ════ Volume ════ */
.vvp-vol-group {
    display: flex; align-items: center; gap: 2px;
}
.vvp-volume {
    -webkit-appearance: none;
    appearance: none;
    width: 70px; height: 3px;
    border-radius: 3px; outline: none; cursor: pointer;
    /* ترک رنگی از JS آپدیت میشه */
    background: rgba(255,255,255,.28);
    transition: height .15s;
}
.vvp-volume:hover { height: 5px; }
.vvp-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px; height: 13px; border-radius: 50%;
    background: #fff; cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,.4);
    transition: transform .15s;
}
.vvp-volume::-webkit-slider-thumb:hover { transform: scale(1.3); }
.vvp-volume::-moz-range-thumb {
    width: 13px; height: 13px; border-radius: 50%;
    background: #fff; border: none; cursor: pointer;
}
.vvp-volume::-moz-range-progress { background: var(--vvp-accent); height: 3px; border-radius: 3px; }

/* ════ سرعت ════ */
.vvp-speed-wrap { position: relative; }
.vvp-speed-btn {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 5px; color: rgba(255,255,255,.9);
    font-size: 11px; font-weight: 700; cursor: pointer;
    padding: 3px 7px; line-height: 1.4; height: auto; width: auto;
    transition: background .18s;
}
.vvp-speed-btn:hover { background: rgba(255,255,255,.2); }
.vvp-speed-menu {
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    background: rgba(18,18,20,.97);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px; overflow: hidden;
    min-width: 82px; display: none; flex-direction: column;
    box-shadow: 0 8px 30px rgba(0,0,0,.65);
}
.vvp-speed-menu.open { display: flex; }
.vvp-speed-menu button {
    background: none; border: none; color: rgba(255,255,255,.8);
    font-size: 12px; cursor: pointer; padding: 8px 14px;
    text-align: center; transition: background .14s; font-family: inherit;
}
.vvp-speed-menu button:hover  { background: rgba(255,255,255,.1); color: #fff; }
.vvp-speed-menu button.active { color: var(--vvp-accent); font-weight: 700; }

/* ════ Fullscreen ════ */
.vvp-player-box:fullscreen       { border-radius: 0 !important; }
.vvp-player-box:fullscreen video { height: 100vh; aspect-ratio: auto; }

/* ════ Login wall ════ */
.vvp-login-wall {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: #0d0d0f; aspect-ratio: 16/9;
    color: #fff; gap: 14px; border-radius: inherit;
}
.vvp-login-wall svg { width: 44px; height: 44px; opacity: .45; }
.vvp-login-wall p   { margin: 0; font-size: 14px; opacity: .8; direction: rtl; }
.vvp-login-link {
    display: inline-block; padding: 9px 26px; border-radius: 8px;
    background: var(--vvp-accent); color: #fff; text-decoration: none;
    font-weight: 600; font-size: 13px; transition: opacity .2s;
}
.vvp-login-link:hover { opacity: .85; }

/* ════ خطا ════ */
.vvp-error {
    padding: 16px; background: #fff3cd; color: #856404;
    border-radius: 8px; text-align: center; direction: rtl; font-size: 13px;
}