/* Lazy facade video with its transcript (Pages/Shared/_ProductVideo.cshtml).
   Hand-written, not Tailwind: the same partial renders on the landing pages and on the Deal Radar layout,
   which does not load site.css. */

.pv {
    --pv-accent: #2563eb;
    --pv-radius: 1rem;
    --pv-frame-bg: #111827;
    --pv-shade: linear-gradient(135deg, rgba(37, 99, 235, .22) 0%, rgba(126, 34, 206, .12) 45%, rgba(17, 24, 39, .55) 100%);
    --pv-muted: #6b7280;
    margin: 0 auto;
    max-width: 48rem;
    width: 100%;
    scroll-margin-top: 2rem;
}

.pv-frame {
    --plyr-color-main: var(--pv-accent);
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: var(--pv-radius);
    background: var(--pv-frame-bg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .05);
}

.pv-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.pv-shade { position: absolute; inset: 0; background: var(--pv-shade); transition: opacity .25s ease; }

.pv-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.pv-play:focus-visible { outline: 3px solid var(--pv-accent); outline-offset: -3px; border-radius: var(--pv-radius); }

.pv-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .92);
    color: var(--pv-accent);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .3);
    transition: transform .2s ease, background-color .2s ease;
}

.pv-play-icon svg { width: 2rem; height: 2rem; margin-left: .25rem; }

.pv-frame:hover .pv-play-icon { transform: scale(1.1); background: #fff; }

.pv-frame:hover .pv-shade { opacity: .7; }

.pv-duration {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    padding: .25rem .65rem;
    border-radius: 9999px;
    background: rgba(17, 24, 39, .7);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    backdrop-filter: blur(4px);
}

.pv-frame .plyr { width: 100%; height: 100%; }
.pv-frame .plyr__video-wrapper { height: 100%; }
.pv-frame video { width: 100%; height: 100%; object-fit: cover; }

.pv-transcript {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.pv-cta { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: 2rem; }

.pv-cta-audience { color: var(--pv-muted); font-size: .9rem; font-weight: 500; }

.pv-cta-button {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    border-radius: .5rem;
    background: var(--pv-accent);
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    transition: background-color .15s ease, box-shadow .15s ease;
}

.pv-cta-button:hover { background: #1d4ed8; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); }

/* Deal Radar: ink, brass and hairlines instead of the landing's blue and soft shadow. */
.pv--deal {
    --pv-accent: #BE9B5B;
    --pv-radius: 3px;
    --pv-frame-bg: var(--ink-panel, #132520);
    --pv-shade: linear-gradient(180deg, rgba(12, 23, 20, 0) 60%, rgba(12, 23, 20, .16) 100%);
    --pv-muted: var(--muted-light, #9AACA2);
    max-width: none;
}

.pv--deal .pv-frame { box-shadow: 0 0 0 1px var(--hairline, #294138), 0 30px 60px -30px rgba(0, 0, 0, .6); }

.pv--deal .pv-play-icon {
    width: 4.5rem;
    height: 4.5rem;
    background: rgba(12, 23, 20, .6);
    border: 1px solid var(--brass-soft, #C9AE78);
    color: var(--brass-soft, #C9AE78);
    backdrop-filter: blur(6px);
}

.pv--deal .pv-frame:hover .pv-play-icon { background: rgba(12, 23, 20, .8); }

.pv--deal .pv-duration { background: rgba(12, 23, 20, .88); color: var(--brass-soft, #C9AE78); border-radius: 2px; font-size: .8rem; }

.pv--deal .pv-cta { align-items: flex-start; margin-top: 22px; }

.pv--deal .pv-cta-button {
    min-height: 44px;
    padding: 0 24px;
    border-radius: 2px;
    background: var(--brass, #BE9B5B);
    color: #0C1714;
    font-size: 13.5px;
    letter-spacing: .02em;
    box-shadow: none;
}

.pv--deal .pv-cta-button:hover { background: var(--brass-soft, #C9AE78); box-shadow: none; }

@media (max-width: 640px) {
    .pv-play-icon { width: 4rem; height: 4rem; }
    .pv-play-icon svg { width: 1.6rem; height: 1.6rem; }
    .pv-duration { left: .75rem; bottom: .75rem; }
    .pv-cta-button { padding: .85rem 1.5rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pv-play-icon, .pv-shade, .pv-cta-button { transition: none; }
}

/* Posters that carry their own play button (the VSL thumbnails): keep the whole frame clickable, hide ours. */
.pv--own-play .pv-play-icon, .pv--own-play .pv-shade { opacity: 0; }

.pv--own-play .pv-duration { left: auto; right: 1rem; top: 1rem; bottom: auto; }

.pv-unmute {
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .9rem;
    border: 0;
    border-radius: 9999px;
    background: rgba(17, 24, 39, .82);
    color: #fff;
    font: 600 .875rem/1 system-ui, sans-serif;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

.pv-unmute svg { width: 1rem; height: 1rem; }