/* Shared inline video previews and their full-screen viewer. */
.social-video {
    position:relative;
    isolation:isolate;
    display:block;
    width:100%;
    height:100%;
    min-width:0;
    overflow:hidden;
    border-radius:inherit;
    background:#090c0a;
    color:#fff;
}

.social-video>video[data-autoplay-video] {
    display:block;
    width:100%;
    height:100%;
    margin:0;
    object-fit:cover;
    object-position:center;
    border-radius:inherit;
    background:#090c0a;
}

.social-video.detail-photo { height:235px; }
.social-video.chat-media { width:320px; max-width:100%; height:auto; aspect-ratio:4/3; border-radius:9px; }
.social-video.chat-media>video[data-autoplay-video] { position:absolute; inset:0; }
.plan-card:hover .social-video.card-image { transform:none; }
.social-video.card-image>video[data-autoplay-video] { transition:transform .45s; }
.plan-card:hover .social-video.card-image>video[data-autoplay-video] { transform:scale(1.04); }

.social-video .social-video-open {
    position:absolute;
    inset:0;
    z-index:1;
    display:block;
    width:100%;
    height:100%;
    min-height:44px;
    padding:0;
    border:0;
    border-radius:inherit;
    background:transparent;
    color:#fff;
    cursor:pointer;
    touch-action:manipulation;
}

.social-video .social-video-sound {
    position:absolute;
    right:10px;
    bottom:10px;
    z-index:3;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    padding:11px;
    border:1px solid #ffffff38;
    border-radius:50%;
    background:#0b100cbe;
    color:#fff;
    box-shadow:0 2px 10px #0003;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    touch-action:manipulation;
}

.social-video .social-video-sound:hover { background:#0b100ce8; color:#fff; }
.social-video-sound .icon,.social-video-sound svg { display:block; width:20px; height:20px; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.social-video-play-glyph {
    position:absolute;
    top:50%;
    left:50%;
    z-index:2;
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    border:1px solid #ffffff5c;
    border-radius:50%;
    background:#09110c8c;
    color:#fff;
    font-size:20px;
    line-height:1;
    box-shadow:0 3px 20px #0003;
    transform:translate(-50%,-50%);
    pointer-events:none;
    transition:opacity .18s;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}

.social-video-play-glyph .icon,.social-video-play-glyph svg { width:23px; height:23px; }
.social-video[data-video-state="playing"] .social-video-play-glyph { opacity:0; }
.social-video[data-video-state="paused"] .social-video-play-glyph,
.social-video[data-video-state="blocked"] .social-video-play-glyph { opacity:1; }

.social-video-label {
    position:absolute;
    top:10px;
    left:10px;
    z-index:2;
    max-width:calc(100% - 20px);
    padding:5px 8px;
    overflow:hidden;
    border:1px solid #ffffff26;
    border-radius:6px;
    background:#0b100cba;
    color:#fff;
    font-size:11px;
    font-weight:600;
    line-height:1.4;
    text-overflow:ellipsis;
    white-space:nowrap;
    pointer-events:none;
}

.social-video .social-video-open:focus-visible { outline:3px solid #fff; outline-offset:-5px; }
.social-video .social-video-sound:focus-visible { outline:3px solid #fff; outline-offset:3px; }

#video-viewer-dialog.video-viewer-dialog {
    position:fixed;
    inset:0;
    width:100vw;
    min-width:0;
    max-width:none;
    height:100vh;
    height:100dvh;
    min-height:0;
    max-height:none;
    margin:0;
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:0;
    background:#000;
    color:#fff;
    box-shadow:none;
    animation:none;
    overscroll-behavior:contain;
}

#video-viewer-dialog::backdrop { background:#000; backdrop-filter:none; }
#video-viewer-dialog .video-viewer-stage { position:relative; isolation:isolate; width:100%; height:100%; overflow:hidden; background:#000; }

#video-viewer-dialog #video-viewer-media {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    margin:0;
    border:0;
    border-radius:0;
    background:#000;
    object-fit:contain;
}

#video-viewer-dialog #video-viewer-tap {
    position:absolute;
    inset:0;
    z-index:1;
    display:block;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#fff;
    touch-action:manipulation;
}

#video-viewer-dialog[data-video-state="paused"] #video-viewer-tap::after {
    content:'▶';
    position:absolute;
    top:50%;
    left:50%;
    display:grid;
    place-items:center;
    width:64px;
    height:64px;
    border:1px solid #ffffff70;
    border-radius:50%;
    background:#0008;
    color:#fff;
    font-size:24px;
    line-height:1;
    transform:translate(-50%,-50%);
    pointer-events:none;
}

#video-viewer-dialog .video-viewer-topbar {
    position:absolute;
    inset:0 0 auto;
    z-index:3;
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px 12px 32px;
    padding-top:max(12px,env(safe-area-inset-top));
    padding-right:max(12px,env(safe-area-inset-right));
    padding-left:max(16px,env(safe-area-inset-left));
    background:linear-gradient(#000c,#0008 60%,transparent);
    pointer-events:none;
}

#video-viewer-dialog #video-viewer-title {
    flex:1;
    min-width:0;
    margin:0;
    padding:0;
    overflow:hidden;
    color:#fff;
    font-family:var(--heading,sans-serif);
    font-size:16px;
    font-weight:600;
    line-height:1.45;
    letter-spacing:0;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-shadow:0 1px 5px #0008;
}

#video-viewer-dialog #video-viewer-close,
#video-viewer-dialog #video-viewer-play,
#video-viewer-dialog #video-viewer-sound {
    position:static;
    flex:0 0 44px;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    min-height:44px;
    margin:0;
    padding:10px;
    border:1px solid #ffffff29;
    border-radius:50%;
    background:#ffffff14;
    color:#fff;
    font-size:12px;
    pointer-events:auto;
    touch-action:manipulation;
}

#video-viewer-dialog #video-viewer-close { background:#0006; }
#video-viewer-dialog #video-viewer-close .icon,
#video-viewer-dialog .video-viewer-controls button .icon,
#video-viewer-dialog .video-viewer-topbar button svg,
#video-viewer-dialog .video-viewer-controls button svg { display:block; width:22px; height:22px; }

#video-viewer-dialog .video-viewer-controls {
    position:absolute;
    inset:auto 0 0;
    z-index:3;
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 44px;
    grid-template-rows:44px 44px;
    align-items:center;
    column-gap:12px;
    row-gap:0;
    padding:22px 16px 16px;
    padding-right:max(16px,env(safe-area-inset-right));
    padding-bottom:max(16px,env(safe-area-inset-bottom));
    padding-left:max(16px,env(safe-area-inset-left));
    background:linear-gradient(transparent,#000b 30%,#000e);
}

#video-viewer-dialog #video-viewer-play { grid-column:1; grid-row:2; }
#video-viewer-dialog #video-viewer-sound { grid-column:3; grid-row:2; }

#video-viewer-dialog #video-viewer-progress {
    grid-column:1 / -1;
    grid-row:1;
    display:block;
    width:100%;
    min-width:0;
    height:44px;
    min-height:44px;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#fff;
    accent-color:#fff;
    box-shadow:none;
    cursor:pointer;
    touch-action:pan-y;
    appearance:none;
    -webkit-appearance:none;
}

#video-viewer-dialog #video-viewer-progress::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:#ffffff62; }
#video-viewer-dialog #video-viewer-progress::-webkit-slider-thumb { width:16px; height:16px; margin-top:-6px; border:0; border-radius:50%; background:#fff; box-shadow:0 1px 5px #0005; appearance:none; -webkit-appearance:none; }
#video-viewer-dialog #video-viewer-progress::-moz-range-track { height:4px; border-radius:4px; background:#ffffff62; }
#video-viewer-dialog #video-viewer-progress::-moz-range-progress { height:4px; border-radius:4px; background:#fff; }
#video-viewer-dialog #video-viewer-progress::-moz-range-thumb { width:16px; height:16px; border:0; border-radius:50%; background:#fff; box-shadow:0 1px 5px #0005; }

#video-viewer-dialog #video-viewer-time {
    grid-column:2;
    grid-row:2;
    min-width:0;
    color:#fff;
    font-size:12px;
    font-weight:500;
    font-variant-numeric:tabular-nums;
    line-height:1.5;
    text-align:center;
    white-space:nowrap;
}

#video-viewer-dialog #video-viewer-status {
    position:absolute;
    bottom:calc(142px + env(safe-area-inset-bottom));
    left:50%;
    z-index:2;
    display:none;
    width:max-content;
    max-width:calc(100% - 32px);
    margin:0;
    padding:10px 14px;
    border:1px solid #ffffff36;
    border-radius:10px;
    background:#171d19ed;
    color:#fff;
    font-size:14px;
    line-height:1.5;
    text-align:center;
    overflow-wrap:anywhere;
    transform:translateX(-50%);
    pointer-events:none;
}

#video-viewer-dialog.has-video-error #video-viewer-status:not(:empty) { display:block; }
#video-viewer-dialog #video-viewer-status:empty { display:none; }
#video-viewer-dialog button:disabled,#video-viewer-dialog input:disabled { cursor:default; opacity:.45; }
#video-viewer-dialog button:focus-visible,#video-viewer-dialog #video-viewer-progress:focus-visible { outline:2px solid #fff; outline-offset:4px; }
#video-viewer-dialog #video-viewer-tap:focus-visible { outline-offset:-6px; }

@media(hover:hover) {
    #video-viewer-dialog #video-viewer-close:hover,
    #video-viewer-dialog #video-viewer-play:hover,
    #video-viewer-dialog #video-viewer-sound:hover { background:#ffffff30; color:#fff; }
}

@media(min-width:540px) {
    #video-viewer-dialog .video-viewer-topbar { padding-right:max(24px,env(safe-area-inset-right)); padding-left:max(24px,env(safe-area-inset-left)); }
    #video-viewer-dialog .video-viewer-controls { grid-template-columns:44px minmax(0,1fr) auto 44px; grid-template-rows:44px; gap:16px; padding-top:38px; padding-right:max(24px,env(safe-area-inset-right)); padding-left:max(24px,env(safe-area-inset-left)); }
    #video-viewer-dialog #video-viewer-play { grid-column:1; grid-row:1; }
    #video-viewer-dialog #video-viewer-progress { grid-column:2; grid-row:1; }
    #video-viewer-dialog #video-viewer-time { grid-column:3; grid-row:1; }
    #video-viewer-dialog #video-viewer-sound { grid-column:4; grid-row:1; }
    #video-viewer-dialog #video-viewer-status { bottom:calc(112px + env(safe-area-inset-bottom)); }
}

@media(max-width:550px) {
    .social-video.detail-photo { height:210px; }
}

@media(prefers-reduced-motion:reduce) {
    .social-video.card-image>video[data-autoplay-video],.social-video-play-glyph { transition:none; }
    .plan-card:hover .social-video.card-image>video[data-autoplay-video] { transform:none; }
}