/* PK Video — Plugin-specific styles (design system base is in pk-design-system.css) */

.pk-video-player-wrap { margin: 20px 0; background: #000; border-radius: var(--pk-radius-md, 12px); overflow: hidden; }
.pk-video-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; color: #fff; }
.pk-video-locked { background: var(--pk-bg, #f8fafc); border: 1px solid var(--pk-border, #e2e8f0); border-radius: var(--pk-radius-md, 12px); padding: 30px; text-align: center; margin: 20px 0; }

/* ── Progress bar ────────────────────────────────────────── */
.pk-video-progress { margin: 12px 0; }
.pk-progress-bar-wrap { width: 100%; background: var(--pk-border, #e2e8f0); border-radius: 6px; height: 10px; overflow: hidden; }
.pk-progress-bar { height: 10px; background: var(--pk-primary, #6366f1); border-radius: 6px; transition: width .5s ease; }
.pk-progress-label { display: flex; justify-content: space-between; font-size: .82em; color: var(--pk-text-secondary, #64748b); margin-top: 6px; }

.pk-error { color: var(--pk-danger, #ef4444); }
.pk-auth-required { color: var(--pk-text-muted, #94a3b8); font-style: italic; }

/* ── Video progress overlay ─────────────────────────── */
.pk-video-card { position: relative; }
.pk-video-pct-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,.3); }
.pk-video-pct-fill { height: 4px; background: var(--pk-danger,#ef4444); border-radius: 2px; transition: width .5s; }
.pk-continue-watching { display: flex; align-items: center; gap: 8px; font-weight: 500; }