/* ================================================================
 VIDEO PLAYER STYLES FOR INKANYEZI CREATIONS
 Modern, accessible, responsive controls
 ================================================================= */

:root {
 --icv-accent: var(--brand-gold); /* use site theme gold */
 --icv-bg: rgba(15,23,42,0.85); /* slate-900 alpha */
 --icv-bg-hover: rgba(30,41,59,0.7); /* slate-800 alpha */
 --icv-rail: rgba(255,255,255,0.25);
 --icv-rail-fill: #fff;
 --icv-text: #fff;
 --icv-muted: #cbd5e1; /* slate-300 */
 --icv-shadow:08px24px rgba(0,0,0,0.35);
 --icv-radius:12px;
 --icv-gap:10px;
 --icv-btn-size:36px;
}

.ic-video-player {
 position: relative;
 display: inline-block;
 width:100%;
 max-width:100%;
 background: #000;
 border-radius: var(--icv-radius);
 overflow: hidden;
 box-shadow: var(--icv-shadow);
}

.ic-video-player video.ic-video {
 display: block;
 width:100%;
 height: auto;
 background: #000;
}

/* Big center play */
.icv-big-play {
 position: absolute;
 inset:0;
 display: grid;
 place-items: center;
 pointer-events: none; /* click-through when hidden */
}

.icv-big-play button {
 pointer-events: auto;
 width:76px;
 height:76px;
 border-radius:50%;
 border: none;
 outline: none;
 background: radial-gradient(ellipse at center, var(--icv-accent), var(--brand-gold-90));
 color: var(--icv-text);
 font-size:28px;
 display: grid;
 place-items: center;
 box-shadow: var(--icv-shadow);
 opacity:0.95;
 transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}

.icv-big-play button:hover { transform: scale(1.06); filter: brightness(1.05); }
.icv-big-play.is-hidden { display: none; }

/* Controls bar */
.icv-controls {
 position: absolute;
 left:0; right:0; bottom:0;
 display: flex;
 align-items: center;
 gap: var(--icv-gap);
 padding:10px12px;
 background: linear-gradient(to top, var(--icv-bg), rgba(15,23,42,0.2));
 color: var(--icv-text);
 backdrop-filter: blur(6px);
}

.icv-btn {
 width: var(--icv-btn-size);
 height: var(--icv-btn-size);
 display: inline-grid;
 place-items: center;
 color: var(--icv-text);
 background: transparent;
 border: none;
 border-radius:8px;
 cursor: pointer;
 transition: background .15s ease, transform .15s ease, opacity .15s ease;
 font-size:18px; /* supports glyph icons */
 line-height:1;
}

.icv-btn:hover { background: var(--icv-bg-hover); }
.icv-btn:active { transform: scale(0.96); }
.icv-btn svg { width:22px; height:22px; fill: currentColor; }

/* Time text */
.icv-time {
 font-variant-numeric: tabular-nums;
 font-size:12px;
 color: var(--icv-muted);
 white-space: nowrap;
}

/* Range sliders */
.icv-progress, .icv-volume {
 -webkit-appearance: none;
 appearance: none;
 height:6px;
 background: var(--icv-rail);
 border-radius:999px;
 outline: none;
}

.icv-progress { width:100%; flex:11 auto; }
.icv-volume { width:110px; }

.icv-progress::-webkit-slider-thumb, .icv-volume::-webkit-slider-thumb {
 -webkit-appearance: none;
 appearance: none;
 width:16px; height:16px;
 border-radius:50%;
 background: var(--icv-rail-fill);
 border:2px solid var(--icv-accent);
 cursor: pointer;
}

.icv-progress::-moz-range-thumb, .icv-volume::-moz-range-thumb {
 width:16px; height:16px;
 border-radius:50%;
 background: var(--icv-rail-fill);
 border:2px solid var(--icv-accent);
 cursor: pointer;
}

/* Progress fill using gradient */
.icv-progress {
 background: linear-gradient(to right, var(--icv-accent) var(--icv-progress,0%), var(--icv-rail) var(--icv-progress,0%));
}

/* Speed select */
.icv-speed {
 height: var(--icv-btn-size);
 padding:8px;
 background: transparent;
 border:1px solid rgba(255,255,255,0.2);
 color: var(--icv-text);
 border-radius:8px;
 cursor: pointer;
}

/* Speed select dropdown options */
.icv-speed option {
 background: rgba(15,23,42,0.95); /* dark slate background */
 color: var(--icv-text); /* white text */
 padding:8px;
}

.icv-speed option:hover,
.icv-speed option:focus,
.icv-speed option:checked {
 background: var(--icv-accent); /* gold highlight */
 color: var(--icv-text);
}

/* Hide default video controls if any */
.ic-video-player video::-webkit-media-controls { display: none !important; }

/* Hover-reveal controls on desktop */
@media (hover: hover) and (pointer: fine) {
 .ic-video-player:not(:focus-within):not(.is-forced-controls) .icv-controls { opacity:0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; }
 .ic-video-player:hover .icv-controls { opacity:1; transform: translateY(0); }
}

/* Fullscreen adjustments */
.ic-video-player:fullscreen, .ic-video-player:-webkit-full-screen {
 width:100vw; height:100vh; border-radius:0;
}

/* Click-to-toggle overlay to ensure clicks outside controls still toggle */
.icv-click-surface {
 position: absolute; inset:0; z-index:1;
}

.icv-controls, .icv-big-play { z-index:2; }

/* Buffering indicator */
.ic-video-player.icv-buffering::after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 width: 48px;
 height: 48px;
 margin: -24px 0 0 -24px;
 border: 4px solid rgba(255,255,255,0.3);
 border-top-color: var(--icv-accent);
 border-radius: 50%;
 animation: icv-spin 0.8s linear infinite;
 z-index: 10;
}

@keyframes icv-spin {
 to { transform: rotate(360deg); }
}

/* Error state */
.ic-video-player.icv-error::before {
 content: 'Video failed to load';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background: rgba(220, 38, 38, 0.9);
 color: white;
 padding: 16px 24px;
 border-radius: 8px;
 font-size: 14px;
 z-index: 10;
}