﻿/* One click-to-watch player for Website Editor, Web Studio and their previews. */
body.public-video-preview-open{overflow:hidden}
.rel-video-player{position:fixed;inset:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border:0;border-radius:0;background:#090e14;color:#fff;box-sizing:border-box;font:400 16px/1.5 system-ui,-apple-system,sans-serif;overflow:auto;color-scheme:dark}
.rel-video-player[open]{display:flex;flex-direction:column;gap:14px}.rel-video-player::backdrop{background:#090e14ed}
.rel-video-player .rel-video-player-head{display:flex;align-items:center;justify-content:space-between;flex:none;gap:24px;max-width:1600px;width:100%;margin:0 auto;padding:0;background:transparent}
.rel-video-player .rel-video-player-head h2{min-width:0;margin:0;color:#fff;font:500 clamp(16px,2vw,21px)/1.4 system-ui,-apple-system,sans-serif;overflow-wrap:anywhere}
.rel-video-player .rel-video-player-close{display:inline-flex;align-items:center;justify-content:center;flex:none;gap:8px;min-height:44px;padding:8px 16px;background:#ffffff12;border:1px solid #ffffff42;border-radius:999px;color:#fff;font:600 14px/1.4 system-ui,-apple-system,sans-serif;cursor:pointer}
.rel-video-player .rel-video-player-close span{font-size:25px;font-weight:400;line-height:1}.rel-video-player .rel-video-player-close:hover{background:#ffffff25}
.rel-video-player>video{position:static;display:block;flex:1;width:100%;min-height:0;max-width:1600px;max-height:100%;margin:0 auto;background:#090e14;object-fit:contain;border-radius:0}
.rel-video-player .rel-video-player-message{flex:none;text-align:center;color:#d6dde6;font-size:14px}.rel-video-player .rel-video-player-message:has(p[hidden]):has(a[hidden]){display:none}.rel-video-player .rel-video-player-message p{margin:0 0 8px}.rel-video-player .rel-video-player-message a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.rel-video-player :focus-visible{outline:3px solid #d7e7ff;outline-offset:4px}
@media(max-width:500px){.rel-video-player .rel-video-player-head{gap:12px}.rel-video-player .rel-video-player-close{padding:8px 12px}}
