/* ----------------------------------------------------
   STC Custom Video Player - CSS
   ---------------------------------------------------- */

.video-container:fullscreen,
.video-container:-webkit-full-screen { 
    width: 100vw !important; 
    height: 100vh !important; 
    max-width: none !important;
    border-radius: 0 !important;
    background: #000;
}
.video-container:fullscreen video,
.video-container:-webkit-full-screen video { 
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
}

.touch-overlay { display: none; }
.desktop-seek { display: flex; }

.video-container.is-touch-device .touch-overlay { display: flex !important; }
.video-container.is-touch-device .desktop-seek { display: none !important; }

/* 🟢 شاهکار CSS: مخفی شدن همه‌چیز در زمان Pause */
.video-container.not-started .controls-wrapper,
.video-container.not-started .touch-overlay,
.video-container.idle .controls-wrapper,
.video-container.idle .touch-overlay,
.video-container.is-paused .controls-wrapper,
.video-container.is-paused .touch-overlay { 
    opacity: 0 !important; 
    visibility: hidden !important; 
    pointer-events: none !important; 
}

.video-container:not(.idle):not(.not-started):not(.is-paused) .touch-overlay { 
    opacity: 1 !important; 
    pointer-events: auto !important; 
}

/* 🟢 آیکون پلی وسط صفحه (نمایش مقتدرانه در زمان توقف) */
.center-play-indicator {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1.1);
    width: 76px; height: 76px;
    background: rgba(45, 53, 60, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-radius: 50%; display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: auto; /* برای قابلیت کلیک شدن */
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.video-container.is-paused .center-play-indicator { 
    opacity: 1; transform: translate(-50%, -50%) scale(1); 
}

/* در موبایل، دکمه مرکزی فقط وقتی که ویدیو در حال پخشه باید غیب بشه */
.video-container.is-touch-device:not(.not-started):not(.is-paused) .center-play-indicator { 
    display: none !important; 
}

@keyframes stc-spin { 
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); } 
}
.stc-loading-spinner { animation: stc-spin 1s linear infinite; }
.seek-indicator.show { opacity: 1; }

.volume-popup::after { content: ''; position: absolute; bottom: -20px; left: -10px; right: -10px; height: 20px; background: transparent; }
.volume-group:hover .volume-popup { visibility: visible; opacity: 1; }

.volume-slider, .progress-bar {
    -webkit-appearance: none !important; appearance: none !important;
    outline: none; cursor: pointer;
    background-image: linear-gradient(#fff, #fff);
    background-size: 100% 100%; background-repeat: no-repeat;
}
.volume-slider {
    background-color: rgba(255,255,255,0.3);
    width: 80px; height: 4px; border-radius: 2px;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
}
.progress-bar { background-size: 0% 100%; }
.progress-container:hover .progress-bar,
.progress-container:hover .stc-buffer-bar { height: 6px; top: 1px; }

.volume-slider::-webkit-slider-thumb, 
.progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none !important; appearance: none !important;
    width: 8px !important; height: 8px !important; border-radius: 50% !important;
    background: #fff !important; border: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}
.volume-slider::-moz-range-thumb, 
.progress-bar::-moz-range-thumb {
    width: 8px !important; height: 8px !important; border-radius: 50% !important;
    background: #fff !important; border: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}

.progress-bar::-webkit-slider-thumb { opacity: 0 !important; transition: opacity 0.2s; }
.progress-bar::-moz-range-thumb { opacity: 0 !important; transition: opacity 0.2s; }

@media (hover: hover) and (pointer: fine) {
    .progress-container:hover .progress-bar::-webkit-slider-thumb { opacity: 1 !important; }
    .progress-container:hover .progress-bar::-moz-range-thumb { opacity: 1 !important; }
}

.speed-menu.active { display: flex; }
.speed-option { padding: 8px 18px 8px 35px; font-size: 14px; cursor: pointer; text-align: right; position: relative; font-variant-numeric: tabular-nums; }
.speed-option:hover { background: rgba(255, 255, 255, 0.15); color: #C5A059; }
.speed-option.selected { background: rgba(255, 255, 255, 0.2); font-weight: 600; }
.speed-option::before { content: '✓'; position: absolute; left: 12px; font-size: 14px; color: #fff; display: none; }
.speed-option.selected::before { display: block; }