/* dg-vod.css — paid VODs (phase 8): the card (thumbnail + muted hook, the lock badge "VOD · 48:20", Unlock / Watch), the
   composer sheet, the player. */
.dg-vod { margin: 8px 0 0; }
.dg-vod-media { position: relative; width: 100%; max-height: 640px; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.dg-vod-media img, .dg-vod-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dg-vod-badge { position: absolute; left: 10px; bottom: 10px; background: rgba(0, 0, 0, .72); color: #fff; font: 700 13px Inter, system-ui, sans-serif; padding: 5px 10px; border-radius: 6px; }
.dg-vod-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; border: 0; background: #E21B2D; color: #fff; font: 700 15px Inter, system-ui, sans-serif; padding: 11px 12px; cursor: pointer; }
.dg-vod-btn.play { background: #0F1419; }
.dg-vod-btn:disabled { opacity: .6; }
.dg-vod-sheet { max-width: 560px; display: flex; flex-direction: column; gap: 10px; max-height: 88vh; overflow-y: auto; font-family: Inter, system-ui, sans-serif; }
.dg-vod-h { display: flex; justify-content: space-between; align-items: center; font-size: 17px; }
.dg-vod-h button { border: 0; background: none; font-size: 26px; cursor: pointer; }
.dg-vod-note { margin: 0; color: #536471; font-size: 13px; line-height: 1.45; }
.dg-vod-sheet label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: #536471; }
.dg-vod-sheet input[type=number], .dg-vod-sheet textarea { border: 1px solid #CFD9DE; border-radius: 8px; padding: 8px 10px; font: 14px Inter, system-ui, sans-serif; }
.dg-vod-file { border: 1px dashed #CFD9DE; border-radius: 10px; padding: 10px; }
.dg-vod-prev { width: 100%; max-height: 260px; background: #000; border-radius: 10px; }
.dg-vod-prev[hidden], .dg-vod-thumb[hidden], .dg-vod-hook[hidden], .dg-vod-bar[hidden] { display: none; }
.dg-vod-hook { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.dg-vod-hook label { grid-template-columns: 1fr auto; } .dg-vod-hook label input { grid-column: 1; } .dg-vod-hook label button { grid-column: 2; border: 1px solid #CFD9DE; background: #fff; border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.dg-vod-hook small { grid-column: 1 / -1; color: #536471; }
.dg-vod-thumb { max-width: 160px; border-radius: 8px; }
.dg-vod-bar { height: 6px; background: #EFF3F4; border-radius: 999px; overflow: hidden; } .dg-vod-bar i { display: block; height: 100%; width: 0; background: #E21B2D; transition: width .2s; }
.dg-vod-msg { margin: 0; font-size: 13px; color: #536471; min-height: 18px; }
.dg-vod-go { border: 0; border-radius: 8px; background: #E21B2D; color: #fff; font: 700 15px Inter, system-ui, sans-serif; padding: 11px; cursor: pointer; }
.dg-vod-go:disabled { opacity: .6; }
.dg-vod-player { align-items: center; background: rgba(0, 0, 0, .92); }
.dg-vod-pin { position: relative; width: min(1100px, 96vw); }
.dg-vod-pin video { width: 100%; max-height: 86vh; background: #000; border-radius: 8px; }
.dg-vod-pin button { position: absolute; top: -44px; right: 0; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 26px; cursor: pointer; }