/* =========================================================================
   🎬 «Вышло видео о Стрекозе» — виджет в ленте и окно-объявление (27–29.10.2026)
   Логика — js/video_promo.js, сервер — GET /api/promo/video.
   Вид: окно Luna + «экран проигрывателя» со стрекозой. Всё нарисовано своё, без чужих логотипов.
   ========================================================================= */

.vp-widget {
    --vp-blue: #0831d9;
    --vp-panel: #ece9d8;
    --vp-ink: #10204a;
    --vp-teal: #33d1c4;
    box-sizing: border-box;
    width: 100%;
    margin: 10px 0 14px 0;
    background: var(--vp-panel);
    border: 1px solid var(--vp-blue);
    border-radius: 0 !important;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
    font: 12px Tahoma, "Segoe UI", sans-serif;
    color: #000;
    overflow: hidden;
}
.vp-widget *, .vp-overlay * { box-sizing: border-box; }

/* --- Заголовок: синий Luna с бликом --- */
.vp-head {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 7px;
    min-height: 28px; padding: 3px 4px 3px 6px;
    cursor: pointer; user-select: none;
    color: #fff; font-weight: bold; font-size: 12px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
    background: linear-gradient(180deg, #3d95ff 0%, #0a5ee8 9%, #0054e3 42%, #0a66ff 86%, #0049d6 94%, #0033b8 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.vp-head::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.28) 49%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.28) 51%, transparent 65%);
    transform: translateX(-120%);
    animation: vp-glint 7s ease-in-out infinite;
}
.vp-head > * { position: relative; z-index: 1; }
@keyframes vp-glint { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.vp-head-ico { flex: none; width: 20px; height: 20px; display: block; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4)); }
.vp-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-title .vp-short { display: none; }
.vp-new {
    flex: none; padding: 1px 6px;
    font: bold 10px Tahoma, sans-serif; letter-spacing: 0.5px; color: #10204a; text-shadow: none;
    background: linear-gradient(180deg, #fff6b8, #ffd23f); border: 1px solid #a07800;
    animation: vp-pulse 1.6s ease-in-out infinite;
}
@keyframes vp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 220, 80, 0.0); } 50% { box-shadow: 0 0 0 3px rgba(255, 220, 80, 0.45); } }
.vp-head-left {
    flex: none; padding: 1px 6px;
    font: bold 11px Tahoma, sans-serif; color: #bff4ff; text-shadow: none;
    background: rgba(0, 0, 30, 0.38); border: 1px solid rgba(255, 255, 255, 0.45);
}
.vp-widget:not(.collapsed) .vp-head-left { display: none; }
.vp-toggle {
    flex: none; width: 21px; height: 21px; padding: 0;
    font-size: 9px; line-height: 19px; color: #fff; cursor: pointer;
    border: 1px solid #fff; border-radius: 3px;
    background: linear-gradient(180deg, #6aa8ff 0%, #2a6fe8 55%, #1747b8 100%);
}
.vp-toggle:hover { filter: brightness(1.12); }

.vp-widget.collapsed .vp-body { display: none; }
.vp-body { display: flex; gap: 12px; padding: 10px; align-items: flex-start; }

/* --- «Экран проигрывателя» --- */
.vp-screen {
    position: relative; flex: none;
    width: 168px; height: 128px;
    border: 2px solid; border-color: #7a7a7a #fff #fff #7a7a7a;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at 50% 38%, #1e5aa8 0%, #0c2c62 52%, #050f24 100%);
    overflow: hidden; cursor: pointer;
}
.vp-screen .vp-fly {
    position: absolute; left: 50%; top: 30%; width: 96px; height: 61px;
    transform: translate(-50%, -50%);
    animation: vp-hover 3.4s ease-in-out infinite;
}
@keyframes vp-hover { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -58%); } }
.vp-fly .vp-wing { transform-origin: 55px 30px; animation: vp-flap 0.22s ease-in-out infinite alternate; }
.vp-fly .vp-wing.b { animation-delay: 0.11s; }
@keyframes vp-flap { from { transform: scaleY(1); } to { transform: scaleY(0.72); } }

.vp-play {
    position: absolute; left: 50%; top: 62%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #8ef0e6, #1fb3a6 55%, #0b6c64);
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 0 rgba(51, 209, 196, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5);
    animation: vp-ring 2s ease-out infinite;
}
.vp-play::after {
    content: ""; position: absolute; left: 15px; top: 10px;
    border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff;
    filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.3));
}
@keyframes vp-ring { 0% { box-shadow: 0 0 0 0 rgba(51, 209, 196, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5); } 100% { box-shadow: 0 0 0 16px rgba(51, 209, 196, 0), 0 2px 6px rgba(0, 0, 0, 0.5); } }
.vp-screen:hover .vp-play { filter: brightness(1.15); }

.vp-speed {
    position: absolute; right: 5px; top: 5px; padding: 0 4px;
    font: bold 10px Tahoma, sans-serif; color: #fff;
    background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.5);
}
.vp-cap {
    position: absolute; left: 6px; top: 5px;
    font: bold 10px Tahoma, sans-serif; color: #bff4ff; letter-spacing: 0.4px;
}
.vp-bar {
    position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
    display: flex; align-items: center; gap: 5px; padding: 0 5px;
    background: linear-gradient(180deg, #d9e6fb, #a9c3ee);
    border-top: 1px solid #6d8fd0;
}
.vp-bar i { flex: none; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent #1a3c8a; }
.vp-bar b {
    position: relative; flex: 1; height: 5px; overflow: hidden;
    background: #fff; border: 1px solid #6d8fd0;
}
.vp-bar b::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    background: linear-gradient(90deg, #33d1c4, #0a66ff);
    animation: vp-progress 6s linear infinite;
}
@keyframes vp-progress { from { width: 0; } to { width: 100%; } }
.vp-bar s { flex: none; text-decoration: none; font: 9px Tahoma, sans-serif; color: #1a3c8a; }

/* --- Текст и кнопки --- */
.vp-info { flex: 1; min-width: 0; line-height: 1.45; }
.vp-lead { margin: 0 0 6px; font-size: 13px; color: var(--vp-ink); }
.vp-lead b { color: #0a3fb8; }
.vp-steps { list-style: none; margin: 0 0 8px; padding: 0; counter-reset: vp; }
.vp-steps li { position: relative; padding: 2px 0 2px 24px; counter-increment: vp; }
.vp-steps li::before {
    content: counter(vp);
    position: absolute; left: 0; top: 2px; width: 17px; height: 17px;
    font: bold 10px/15px Tahoma, sans-serif; text-align: center; color: #fff;
    background: linear-gradient(180deg, #5fd7cc, #13958a); border: 1px solid #0b6c64; border-radius: 50%;
}
.vp-why {
    margin: 0 0 9px; padding: 6px 9px;
    background: #fffbe2; border: 1px solid #e0c35a; border-left-width: 4px;
}
.vp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vp-btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 25px; padding: 3px 12px;
    font: 12px Tahoma, sans-serif; color: #000 !important; text-decoration: none !important; cursor: pointer;
    background: linear-gradient(180deg, #fff 0%, #ecebe6 86%, #d6d0c5 100%);
    border: 1px solid #003c74; border-radius: 3px;
    box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.08);
}
.vp-btn:hover { box-shadow: inset 0 0 0 2px #f8b636; }
.vp-btn:active { background: linear-gradient(180deg, #d6d0c5, #ecebe6); }
.vp-btn.vp-go {
    font-weight: bold; color: #fff !important; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
    background: linear-gradient(180deg, #74d36a 0%, #3fae34 50%, #2b8a22 100%);
    border-color: #1d5e15;
}
.vp-btn.vp-go:hover { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); filter: brightness(1.05); }
.vp-btn .vp-tri { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.vp-note { margin-top: 7px; color: #5b5b48; font-size: 11px; }
.vp-note b { color: #0a3fb8; }

@media (max-width: 600px) {
    .vp-title .vp-long { display: none; }
    .vp-title .vp-short { display: inline; }
    .vp-body { flex-direction: column; gap: 9px; }
    .vp-screen { width: 100%; height: 120px; }
    .vp-actions .vp-btn { flex: 1 1 auto; justify-content: center; min-height: 34px; }
}

/* =========================================================================
   Окно-объявление
   ========================================================================= */
.vp-overlay {
    position: fixed; inset: 0; z-index: 100050;
    display: none; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(0, 20, 60, 0.35);
}
.vp-overlay.vp-open { display: flex; animation: vp-fade 0.18s ease-out; }
@keyframes vp-fade { from { opacity: 0; } to { opacity: 1; } }

.vp-win {
    width: 600px; max-width: 100%; max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
    background: #ece9d8;
    border: 3px solid #0831d9; border-top: 0;
    border-radius: 8px 8px 0 0 !important;
    box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.45);
    font: 12px Tahoma, "Segoe UI", sans-serif; color: #000;
    animation: vp-pop 0.22s ease-out;
}
@keyframes vp-pop { from { transform: scale(0.94); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
.vp-win.vp-blink .vp-wtitle { animation: vp-blink 0.12s steps(1) 6; }
@keyframes vp-blink { 50% { filter: saturate(0.2) brightness(1.25); } }

.vp-wtitle {
    flex: none; display: flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 5px 0 7px;
    border-radius: 7px 7px 0 0;
    color: #fff; font-weight: bold; font-size: 13px; text-shadow: 1px 1px 0 #0a1a5a;
    background: linear-gradient(180deg, #0997ff 0%, #0053ee 9%, #0050ee 40%, #0066ff 88%, #005bff 94%, #003dd7 100%);
}
.vp-wtitle span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-x {
    flex: none; width: 22px; height: 22px; padding: 0;
    font: bold 13px/20px Tahoma, sans-serif; color: #fff; cursor: pointer;
    background: linear-gradient(180deg, #e9846b 0%, #d4471f 50%, #b5300e 100%);
    border: 1px solid #fff; border-radius: 3px;
}
.vp-x:hover { filter: brightness(1.12); }

.vp-wbody { flex: 1; min-height: 0; overflow: auto; display: flex; }
.vp-banner {
    flex: none; width: 150px; position: relative; overflow: hidden;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #2a6be0 0%, #0c3ea8 55%, #072a78 100%);
    border-right: 1px solid #7f9db9;
}
.vp-banner .vp-fly { position: absolute; left: 50%; top: 32%; width: 124px; height: 79px; transform: translate(-50%, -50%); animation: vp-hover 3.4s ease-in-out infinite; }
.vp-banner .vp-play { top: 52%; }
.vp-banner-cap {
    position: absolute; left: 0; right: 0; bottom: 14px; padding: 0 10px; text-align: center;
    font: bold 12px Tahoma, sans-serif; color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); line-height: 1.3;
}
.vp-banner-cap small { display: block; font-weight: normal; font-size: 10px; color: #bff4ff; }
.vp-wtext { flex: 1; min-width: 0; padding: 14px 16px 10px; line-height: 1.5; background: #fff; }
.vp-wtext h3 { margin: 0 0 8px; font: bold 15px Tahoma, sans-serif; color: #0a3fb8; }
.vp-wtext p { margin: 0 0 8px; }
.vp-wtext .vp-steps { margin-bottom: 8px; }
.vp-wtext .vp-thanks { margin: 0; font-weight: bold; color: #0b6c64; }

.vp-wfoot {
    flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px;
    padding: 9px 12px; border-top: 1px solid #fff; box-shadow: inset 0 1px 0 #aca899;
}
.vp-wfoot .vp-later { margin-right: auto; }

@media (max-width: 600px) {
    .vp-overlay { padding: 8px; align-items: flex-end; }
    .vp-win { max-height: calc(100vh - 16px); }
    .vp-wbody { flex-direction: column; }
    .vp-banner { width: auto; height: 118px; border-right: 0; border-bottom: 1px solid #7f9db9; }
    .vp-banner .vp-fly { left: 25%; top: 34%; width: 92px; height: 58px; }
    .vp-banner .vp-play { left: 25%; top: 70%; }
    .vp-banner-cap { left: 50%; right: 8px; top: 50%; bottom: auto; transform: translateY(-50%); text-align: left; padding: 0; }
    .vp-wfoot .vp-btn { flex: 1 1 40%; justify-content: center; min-height: 38px; }
    .vp-wfoot .vp-later { flex-basis: 100%; margin-right: 0; order: 9; }
}

@media (prefers-reduced-motion: reduce) {
    .vp-widget *, .vp-overlay * { animation: none !important; }
}