/* =========================================================
   Vidoba JW8 Themes
   Theme 1: Vidoba Cinema
   Theme 2: Vidoba Gold
   هدف الملف:
   - خفيف
   - آمن على الجوال والتلفزيون
   - بدون مؤثرات مبالغ فيها
   - لا يغيّر منطق تشغيل JW8
========================================================= */

/* ---------- إعدادات عامة ---------- */
#vplayer.jwplayer.jw-skin-vidoba-cinema,
#vplayer.jwplayer.jw-skin-vidoba-gold {
    font-family: Arial, Helvetica, sans-serif;
}

#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-media,
#vplayer.jwplayer.jw-skin-vidoba-gold .jw-media {
    border-radius: 12px;
}

#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-controls,
#vplayer.jwplayer.jw-skin-vidoba-gold .jw-controls {
    background: linear-gradient(to top, rgba(6,10,18,.95), rgba(6,10,18,.55) 45%, rgba(6,10,18,0) 100%);
}

#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-controlbar,
#vplayer.jwplayer.jw-skin-vidoba-gold .jw-controlbar {
    background: transparent !important;
    padding: 0 10px 8px 10px;
}

#vplayer.jwplayer .jw-icon,
#vplayer.jwplayer .jw-button-color,
#vplayer.jwplayer .jw-text,
#vplayer.jwplayer .jw-controlbar .jw-button-container .jw-button-color {
    transition: color .15s ease, opacity .15s ease, background-color .15s ease;
}

#vplayer.jwplayer .jw-settings-menu {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

#vplayer.jwplayer .jw-settings-topbar,
#vplayer.jwplayer .jw-settings-submenu {
    border: 0 !important;
}

#vplayer.jwplayer .jw-tooltip .jw-text,
#vplayer.jwplayer .jw-time-tip,
#vplayer.jwplayer .jw-menu {
    border-radius: 8px;
}

/* تكبير نسبي للأزرار لتحسين الاستخدام على التلفزيون */
#vplayer.jwplayer .jw-controlbar .jw-icon {
    min-width: 34px;
    min-height: 34px;
}

#vplayer.jwplayer.jw-breakpoint-0 .jw-controlbar .jw-icon,
#vplayer.jwplayer.jw-breakpoint-1 .jw-controlbar .jw-icon,
#vplayer.jwplayer.jw-breakpoint-2 .jw-controlbar .jw-icon {
    min-width: 30px;
    min-height: 30px;
}

#vplayer.jwplayer .jw-slider-time,
#vplayer.jwplayer .jw-slider-volume {
    cursor: pointer;
}

#vplayer.jwplayer .jw-slider-horizontal .jw-rail,
#vplayer.jwplayer .jw-slider-horizontal .jw-buffer,
#vplayer.jwplayer .jw-slider-horizontal .jw-progress {
    height: 5px;
    border-radius: 999px;
}

#vplayer.jwplayer .jw-slider-horizontal .jw-knob {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    margin-top: -5px;
}

/* تحسين زر التشغيل الأوسط */
#vplayer.jwplayer .jw-display-icon-container {
    transition: transform .15s ease, opacity .15s ease;
}

#vplayer.jwplayer .jw-display-icon-container .jw-icon {
    border-radius: 999px;
    backdrop-filter: none;
}

#vplayer.jwplayer .jw-display-icon-container:hover {
    transform: scale(1.03);
}

/* تحسين وضوح التركيز لريموت التلفزيون ولوحة المفاتيح */
#vplayer.jwplayer button:focus,
#vplayer.jwplayer .jw-icon:focus,
#vplayer.jwplayer .jw-settings-menu button:focus,
#vplayer.jwplayer .jw-settings-submenu button:focus {
    outline: 2px solid rgba(255,255,255,.9) !important;
    outline-offset: 2px;
}

/* =========================================================
   Theme 1 - Vidoba Cinema
========================================================= */
#vplayer.jwplayer.jw-skin-vidoba-cinema {
    background: #060a12;
}

#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-display-icon-container .jw-icon {
    background: rgba(19, 23, 34, .72);
    border: 2px solid rgba(255, 72, 120, .85);
    box-shadow: 0 0 0 6px rgba(255,72,120,.10), 0 0 30px rgba(255,72,120,.16);
}

#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-display-icon-container .jw-icon:hover {
    background: rgba(28, 33, 48, .88);
}

#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-icon,
#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-button-color,
#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-text,
#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-time-tip {
    color: #f6f7fb !important;
}

#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-icon:hover,
#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-button-color:hover {
    color: #ff4f86 !important;
}

#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-slider-time .jw-rail {
    background: rgba(255,255,255,.18);
}

#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-slider-time .jw-buffer {
    background: rgba(255,255,255,.30);
}

#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-slider-time .jw-progress,
#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-slider-time .jw-knob,
#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-slider-volume .jw-progress,
#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-slider-volume .jw-knob {
    background: #ff4f86 !important;
}

#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-slider-volume .jw-rail,
#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-slider-volume .jw-buffer {
    background: rgba(255,255,255,.20);
}

#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-settings-menu,
#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-tooltip .jw-text,
#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-time-tip {
    background: rgba(13, 17, 27, .98) !important;
    color: #ffffff !important;
}

#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-settings-content-item:hover,
#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-settings-content-item[aria-checked="true"] {
    background: rgba(255,79,134,.14) !important;
}

#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-knob {
    box-shadow: 0 0 0 3px rgba(255,79,134,.18);
}

/* =========================================================
   Theme 2 - Vidoba Gold
========================================================= */
#vplayer.jwplayer.jw-skin-vidoba-gold {
    background: #0b0a08;
}

#vplayer.jwplayer.jw-skin-vidoba-gold .jw-display-icon-container .jw-icon {
    background: rgba(24, 19, 11, .76);
    border: 2px solid rgba(245, 186, 67, .88);
    box-shadow: 0 0 0 6px rgba(245,186,67,.10), 0 0 30px rgba(245,186,67,.14);
}

#vplayer.jwplayer.jw-skin-vidoba-gold .jw-display-icon-container .jw-icon:hover {
    background: rgba(38, 30, 18, .90);
}

#vplayer.jwplayer.jw-skin-vidoba-gold .jw-icon,
#vplayer.jwplayer.jw-skin-vidoba-gold .jw-button-color,
#vplayer.jwplayer.jw-skin-vidoba-gold .jw-text,
#vplayer.jwplayer.jw-skin-vidoba-gold .jw-time-tip {
    color: #f8f5ec !important;
}

#vplayer.jwplayer.jw-skin-vidoba-gold .jw-icon:hover,
#vplayer.jwplayer.jw-skin-vidoba-gold .jw-button-color:hover {
    color: #f5ba43 !important;
}

#vplayer.jwplayer.jw-skin-vidoba-gold .jw-slider-time .jw-rail {
    background: rgba(255,255,255,.18);
}

#vplayer.jwplayer.jw-skin-vidoba-gold .jw-slider-time .jw-buffer {
    background: rgba(255,255,255,.28);
}

#vplayer.jwplayer.jw-skin-vidoba-gold .jw-slider-time .jw-progress,
#vplayer.jwplayer.jw-skin-vidoba-gold .jw-slider-time .jw-knob,
#vplayer.jwplayer.jw-skin-vidoba-gold .jw-slider-volume .jw-progress,
#vplayer.jwplayer.jw-skin-vidoba-gold .jw-slider-volume .jw-knob {
    background: #f5ba43 !important;
}

#vplayer.jwplayer.jw-skin-vidoba-gold .jw-slider-volume .jw-rail,
#vplayer.jwplayer.jw-skin-vidoba-gold .jw-slider-volume .jw-buffer {
    background: rgba(255,255,255,.20);
}

#vplayer.jwplayer.jw-skin-vidoba-gold .jw-settings-menu,
#vplayer.jwplayer.jw-skin-vidoba-gold .jw-tooltip .jw-text,
#vplayer.jwplayer.jw-skin-vidoba-gold .jw-time-tip {
    background: rgba(17, 14, 10, .98) !important;
    color: #fff8ec !important;
}

#vplayer.jwplayer.jw-skin-vidoba-gold .jw-settings-content-item:hover,
#vplayer.jwplayer.jw-skin-vidoba-gold .jw-settings-content-item[aria-checked="true"] {
    background: rgba(245,186,67,.16) !important;
}

#vplayer.jwplayer.jw-skin-vidoba-gold .jw-knob {
    box-shadow: 0 0 0 3px rgba(245,186,67,.18);
}


/* Vidoba: Keep video image clear */
#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-controls,
#vplayer.jwplayer.jw-skin-vidoba-gold .jw-controls {
    background: transparent !important;
}

/* Dark gradient only behind the bottom controls */
#vplayer.jwplayer.jw-skin-vidoba-cinema .jw-controlbar,
#vplayer.jwplayer.jw-skin-vidoba-gold .jw-controlbar {
    background: linear-gradient(
        to top,
        rgba(6, 10, 18, 0.97) 0%,
        rgba(6, 10, 18, 0.80) 55%,
        rgba(6, 10, 18, 0) 100%
    ) !important;
}