/* Shared player controls CSS — used by both VideoPlayer and YouTubePlayer */

.vp { position: relative; width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.vp-screen { position: relative; width: 100%; cursor: pointer; line-height: 0; }
.vp-screen video { width: 100%; display: block; }
.vp-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px; background: #1a1a1a; color: #fff;
}
.vp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: none; border-radius: 4px;
    background: transparent; color: #fff; cursor: pointer; padding: 0; flex-shrink: 0;
}
.vp-btn:hover { background: rgba(255,255,255,.12); }
.vp-btn svg { width: 18px; height: 18px; fill: currentColor; }
.vp-time { font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 68px; flex-shrink: 0; color: #fff; }
.vp-lock { display: inline-flex; align-items: center; color: rgba(255,255,255,.5); flex-shrink: 0; }
.vp-progress {
    flex: 1; min-width: 0; height: 6px; -webkit-appearance: none; appearance: none;
    border-radius: 3px; outline: none; cursor: pointer;
    background: linear-gradient(to right, #fff var(--vp-fill,0%), rgba(255,255,255,.25) var(--vp-fill,0%));
}
.vp-progress::-webkit-slider-runnable-track { background: transparent; height: 6px; border-radius: 3px; }
.vp-progress::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; margin-top: -4px; cursor: pointer; }
.vp-progress::-moz-range-track { background: transparent; height: 6px; border-radius: 3px; }
.vp-progress::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: none; cursor: pointer; }
.vp-sub { padding: .5rem 1rem; text-align: center; font-size: .95rem; line-height: 1.4; color: var(--text-primary,#333); background: var(--gray-50,#f8f8f8); white-space: pre-line; }

/* State-driven icon visibility — JS sets data-state/data-muted/data-fs on .vp */
.vp .vp-ico-pause, .vp .vp-ico-muted, .vp .vp-ico-fsexit { display: none; }
.vp[data-state="playing"] .vp-ico-play { display: none; }
.vp[data-state="playing"] .vp-ico-pause { display: block; }
.vp[data-muted="true"] .vp-ico-vol { display: none; }
.vp[data-muted="true"] .vp-ico-muted { display: block; }
.vp[data-fs="true"] .vp-ico-fs { display: none; }
.vp[data-fs="true"] .vp-ico-fsexit { display: block; }

/* Fullscreen layout */
.vp:fullscreen, .vp:-webkit-full-screen { display: flex; flex-direction: column; border-radius: 0; }
.vp:fullscreen .vp-screen, .vp:-webkit-full-screen .vp-screen { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.vp:fullscreen video, .vp:-webkit-full-screen video { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.vp:fullscreen .vp-bar, .vp:-webkit-full-screen .vp-bar { flex-shrink: 0; }
.vp:fullscreen .vp-sub, .vp:-webkit-full-screen .vp-sub {
    position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%);
    max-width: 80%; padding: .35rem .75rem; border-radius: 4px;
    color: #fff; background: rgba(0,0,0,.75); pointer-events: none;
}

/* YouTube-specific: 16:9 aspect ratio container */
.yt-player .vp-screen { padding-bottom: 56.25%; }
.yt-player .vp-screen iframe,
.yt-player .vp-screen > div { position: absolute; inset: 0; width: 100%; height: 100%; }