#video-modal{position:fixed;inset:0;margin:auto;padding:0;border:0;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.4);width:min(960px,calc(100% - 48px));max-width:none;height:fit-content;max-height:calc(100% - 48px)}
#video-modal:not([open]){display:none}
#video-modal::backdrop{background:rgba(15,12,20,.72)}
.video-modal-close{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.video-modal-close:hover{background:rgba(255,255,255,.28)}
.video-modal-frame{position:relative;width:100%;aspect-ratio:16/9}
.video-modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:480px){#video-modal{border-radius:8px;width:calc(100% - 24px)}}
.button-icon-video{display:inline-flex;align-items:center;margin-right:8px;border-radius:50%;box-shadow:0 0 0 3px rgba(116,41,239,.18)}

/* A real, always-clickable unmute control - doesn't depend on the embed's own
   controls bar staying visible, since that auto-hides on its own timer. */
.video-modal-unmute-hint{position:absolute;left:50%;bottom:20px;z-index:3;display:flex;align-items:center;gap:8px;padding:10px 18px;border:0;border-radius:100px;background:rgba(20,16,28,.94);color:#fff;font:600 13px/1.3 'Plus Jakarta Sans',sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.35);cursor:pointer;opacity:0;pointer-events:none;transform:translate(-50%,6px);transition:opacity .25s ease,transform .25s ease,background .15s ease}
.video-modal-unmute-hint.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.video-modal-unmute-hint:hover{background:rgba(35,29,46,.96)}
.video-modal-unmute-hint:focus-visible{outline:2px solid #a477ff;outline-offset:2px}
@media(max-width:600px){.video-modal-unmute-hint{bottom:14px;font-size:12px;padding:8px 14px}}
@media(prefers-reduced-motion:reduce){.video-modal-unmute-hint{transition:none}}