.vmpop-dialog{
  max-width:min(92vw,640px);width:100%;border:0;border-radius:8px;
  padding:1.25rem;background:#fff;color:inherit;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.vmpop-dialog::backdrop{background:rgba(0,0,0,.55);}
.vmpop-dialog:not([open]){display:none;}
.vmpop-trigger{cursor:pointer;}
@media (prefers-reduced-motion:no-preference){
  .vmpop-dialog[open]{animation:vmpop-in .18s ease-out;}
}
@keyframes vmpop-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* Button templates: chrome from class, colours from inline custom props (data-driven). */
.vmpop-btn{
  --vmpop-hbg:color-mix(in srgb, var(--vmpop-bg,#1B5E37) 88%, #000);
  --vmpop-hfg:var(--vmpop-fg,#fff);
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.75em 1.5em;border-radius:6px;
  font-weight:600;line-height:1.2;text-align:center;text-decoration:none;
  background:var(--vmpop-bg,#1B5E37);
  color:var(--vmpop-fg,#fff);
  border:2px solid var(--vmpop-bd,transparent);
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.vmpop-btn:hover{background:var(--vmpop-hbg);color:var(--vmpop-hfg);}
.vmpop-btn:focus-visible{outline:2px solid var(--vmpop-bd,#1B5E37);outline-offset:2px;}

/* Icon: inherits text colour via currentColor; sized to the label. */
.vmpop-ico{width:1.1em;height:1.1em;flex:0 0 auto;}
.vmpop-trigger:not(.vmpop-btn) .vmpop-ico{vertical-align:-.15em;margin-right:.4em;}

/* Close (X) button — absolute inside the positioned dialog; no layout impact. */
.vmpop-close{
  position:absolute;top:.5rem;right:.5rem;
  width:2rem;height:2rem;padding:0;margin:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;
  background:rgba(0,0,0,.06);color:inherit;
  cursor:pointer;line-height:0;
  transition:background-color .15s ease;
}
.vmpop-close:hover{background:rgba(0,0,0,.14);}
.vmpop-close:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
.vmpop-close svg{width:1rem;height:1rem;display:block;}

/* Video facade trigger (poster + play button). */
.vmpop-video-trigger{
  position:relative;display:block;width:100%;padding:0;border:0;
  background:#000;cursor:pointer;overflow:hidden;
  aspect-ratio:var(--vmpop-ratio,16/9);
  border-radius:var(--vmpop-radius,0);
}
.vmpop-video-trigger.is-bordered{border:3px solid var(--vmpop-play,#2563EB);}
.vmpop-poster{width:100%;height:100%;object-fit:cover;display:block;}
.vmpop-play{
  position:absolute;inset:0;margin:auto;width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--vmpop-play,#2563EB);box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform .15s ease;
}
.vmpop-video-trigger:hover .vmpop-play{transform:scale(1.08);}
.vmpop-play svg{width:26px;height:26px;color:#fff;margin-left:3px;}

/* Video dialog: edge-to-edge frame. */
.vmpop-dialog--video{padding:0;border-radius:0;background:transparent;box-shadow:none;max-width:min(94vw,960px);}
.vmpop-dialog--video .vmpop-close{background:rgba(0,0,0,.6);color:#fff;}
.vmpop-video-frame{
  position:relative;width:100%;overflow:hidden;background:#000;
  aspect-ratio:var(--vmpop-ratio,16/9);
  border-radius:var(--vmpop-radius,0);
}
.vmpop-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}