/* Video variant of the shared app card (qr-app-promo.css) -
   Pages/Shared/_VideoDownloaderAppPromo.cshtml */

.qap--video .qap-card {
    background:
        radial-gradient(600px 300px at 0% 0%, rgba(255, 82, 116, .32), transparent 60%),
        radial-gradient(520px 280px at 100% 100%, rgba(99, 132, 255, .28), transparent 60%),
        linear-gradient(135deg, #1a1033 0%, #26164d 55%, #13184a 100%);
}

.qap--video .qap-kicker { background: rgba(255, 110, 140, .16); color: #ffb3c4; }

.vap-player {
    position: relative; width: 104px; height: 64px; border-radius: 10px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #ff4f79, #7b5cff);
    box-shadow: 0 8px 18px rgba(123, 92, 255, .35);
    overflow: hidden;
}
.vap-player::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: vap-shine 2.8s ease-in-out infinite;
}
.vap-play {
    width: 0; height: 0; margin-left: 4px;
    border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 19px solid #fff;
}
.vap-progress { width: 104px; height: 6px; border-radius: 4px; background: rgba(27, 35, 86, .15); overflow: hidden; }
.vap-progress span {
    display: block; height: 100%; width: 0; border-radius: 4px;
    background: linear-gradient(90deg, #22a55b, #4ade80);
    animation: vap-fill 3.2s ease-in-out infinite;
}

@keyframes vap-shine { 0%, 40% { transform: translateX(-100%); } 70%, 100% { transform: translateX(100%); } }
@keyframes vap-fill { 0% { width: 0; } 70% { width: 100%; } 100% { width: 100%; } }

@media (max-width: 640px) {
    .vap-player { width: 84px; height: 52px; }
    .vap-progress { width: 84px; }
}
@media (prefers-reduced-motion: reduce) {
    .vap-player::after, .vap-progress span { animation: none; }
    .vap-progress span { width: 70%; }
}