.custom-video-player {
 position: relative;
}

.custom-video-player .main-video {
 width: 100%;
 max-height: 70vh;
 object-fit: contain;
 display: block;
 cursor: pointer;
}

/* Центральна кнопка */
.center-play-btn {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background: rgba(0, 0, 0, 0.5);
 color: white;
 border: none;
 border-radius: var(--radius-md);
 width: 64px;
 height: 64px;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 backdrop-filter: blur(4px);
 transition: opacity 0.25s ease, transform 0.25s ease;
 z-index: 10;
}

.center-play-btn:hover {
 transform: translate(-50%, -50%) scale(1.1);
 background: rgba(0, 0, 0, 0.7);
}

.center-play-btn svg {
 width: 32px;
 height: 32px;
 margin-left: 4px; /* центрування трикутника */
}

/* Приховування кнопки, коли відео грає */
.custom-video-player.is-playing .center-play-btn {
 opacity: 0;
 pointer-events: none;
 transform: translate(-50%, -50%) scale(1.2);
}

/* Нижня панель */
.video-bottom-controls {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 padding: 20px 16px 12px;
 background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
 display: flex;
 align-items: center;
 gap: 12px;
 color: white;
 z-index: 10;
 opacity: 1; /* Тепер панель видима завжди */
}

/* Показуємо панель при наведенні або коли на паузі */
.custom-video-player:hover .video-bottom-controls,
.custom-video-player.is-paused .video-bottom-controls {
 opacity: 1;
}

.control-btn {
 background: none;
 border: none;
 color: white;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0;
 width: 24px;
 height: 24px;
 transition: opacity 0.2s;
}

.control-btn:hover {
 opacity: 0.8;
}

.control-btn svg {
 width: 100%;
 height: 100%;
}

.time-text {
 font-size: 13px;
 font-weight: 500;
 font-variant-numeric: tabular-nums;
 text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Смуга прокрутки */
.progress-area {
 flex-grow: 1;
 height: 20px;
 display: flex;
 align-items: center;
 cursor: pointer;
}

.progress-bar {
 width: 100%;
 height: 4px;
 background: rgba(255, 255, 255, 0.3);
 border-radius: 2px;
 position: relative;
 transition: height 0.2s ease;
}

.progress-area:hover .progress-bar {
 height: 6px;
}

.progress-current {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 background: #fff;
 width: 0%;
 border-radius: 2px;
}

.progress-current::after {
 content: '';
 position: absolute;
 right: -5px;
 top: 50%;
 transform: translateY(-50%) scale(0);
 width: 10px;
 height: 10px;
 background: #fff;
 border-radius: 50%;
 transition: transform 0.2s;
}

.progress-area:hover .progress-current::after {
 transform: translateY(-50%) scale(1);
}

.video-top-controls {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 padding: 12px;
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 z-index: 10;
 pointer-events: none;
 transition: opacity 0.2s;
}

.video-top-controls > * {
 pointer-events: auto;
}

.top-logo-links {
 display: block;
 width: 36px;
 height: 36px;
 background: rgba(0, 0, 0, 0.4);
 border-radius: 8px;
 padding: 6px;
 backdrop-filter: blur(4px);
 transition: background 0.2s, transform 0.2s;
}

.top-logo-links:hover {
 background: rgba(0, 0, 0, 0.6);
 transform: scale(1.05);
}
	
.top-logo-links svg {
 width: 100%;
 height: 100%;
 object-fit: contain;
 display: block;
	   
}

.fullscreen-toggle {
 background: rgba(0, 0, 0, 0.4);
 border-radius: var(--radius-md);
 padding: 6px;
 width: 36px;
 height: 36px;
 backdrop-filter: blur(4px);
}

.fullscreen-toggle:hover {
 background: rgba(0, 0, 0, 0.6);
}

.custom-video-player:fullscreen .main-video,
.custom-video-player:-webkit-full-screen .main-video {
 max-height: 100vh;
 height: 100vh;
}