/* VstPluginz shared on-page media modal
Plays YouTube / SoundCloud / MP3 previews over the current page instead of
navigating away. Matches the dark/blue-green palette already used by the
Beatport preview player (beatport-preview.css) so it reads as one system. */

.vst-media-modal-overlay{
  position:fixed; inset:0; z-index:99999;
  display:none; align-items:center; justify-content:center;
  padding:32px; background:rgba(3,7,14,.86);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.vst-media-modal-overlay.is-open{ display:flex; }

/* Locks background scroll while a modal is open. JS also pins body to the
current scroll offset so iOS Safari can't rubber-band the page behind it. */
html.vst-modal-open, html.vst-modal-open body{ overflow:hidden!important; }
body.vst-modal-open{ position:fixed; left:0; right:0; width:100%; }

.vst-media-modal{
  position:relative; width:min(920px, 100%);
  background:#070d17; border:1px solid rgba(56,189,248,.24);
  border-radius:18px; box-shadow:0 30px 90px rgba(0,0,0,.55);
  overflow:hidden;
}
.vst-media-modal-body{ position:relative; width:100%; }

.vst-media-modal-frame{ display:block; width:100%; aspect-ratio:16/9; border:0; background:#000; }
.vst-media-modal-frame--audio{ aspect-ratio:auto; height:166px; }

.vst-media-modal-audio{
  padding:30px 22px 26px; display:flex; flex-direction:column; gap:14px;
  align-items:stretch; background:radial-gradient(circle at 15% 0%, rgba(56,189,248,.08), transparent 55%);
}
.vst-media-modal-audio-title{ font:700 13px/1.35 Inter,system-ui,Arial,sans-serif; color:#f5f9ff; text-align:center; }
.vst-media-modal-audio-row{ display:flex; align-items:center; gap:12px; }
.vst-media-modal-audio-play{
  flex-shrink:0; width:46px; height:46px; border-radius:50%;
  border:2px solid #38bdf8; background:rgba(56,189,248,.1); color:#38bdf8;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.vst-media-modal-audio-play:hover{ background:rgba(56,189,248,.2); transform:scale(1.05); }
.vst-media-modal-audio-play:active{ transform:scale(.94); }
.vst-media-modal-audio-play svg{ width:18px; height:18px; }
.vst-media-modal-audio-seek{
  position:relative; flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.1); cursor:pointer;
}
.vst-media-modal-audio-fill{
  position:absolute; inset:0; width:0%; border-radius:3px;
  background:linear-gradient(90deg,#39ff88,#38bdf8); box-shadow:0 0 10px rgba(56,189,248,.5);
}
.vst-media-modal-audio-times{
  display:flex; justify-content:space-between; font:12px/1 ui-monospace,Menlo,Consolas,monospace; color:#8aa4ba;
}

.vst-media-modal-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,12,22,.72); border:2px solid rgba(255,255,255,.3);
  color:#fff; cursor:pointer;
  transition:background .15s ease, transform .15s ease, border-color .15s ease;
}
.vst-media-modal-close svg{ width:20px; height:20px; display:block; }
.vst-media-modal-close:hover{ background:rgba(255,60,90,.85); border-color:rgba(255,60,90,.85); transform:scale(1.06); }
.vst-media-modal-close:active{ transform:scale(.94); }

@media (max-width:767px){
  .vst-media-modal-overlay{ padding:10px; }
  /* Full screen, bordered, with a 10px margin so the page stays visible behind it. */
  .vst-media-modal{
    position:fixed; top:10px; left:10px; right:10px; bottom:10px;
    width:auto; border-radius:14px; border-width:1.5px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .vst-media-modal-frame{ width:100%; height:100%; aspect-ratio:auto; }
  .vst-media-modal-frame--audio{ height:auto; flex:0 0 auto; }
  .vst-media-modal-audio{ padding:22px 18px; }
  .vst-media-modal-close{ top:12px; right:12px; width:48px; height:48px; }
}

/* ── Icon buttons — flat, single border, no motion ──
Deliberately no transform, no transition, no glow/box-shadow. One border,
one fill, one hover state that just swaps color instantly. */
.vst-icon-btn{
  appearance:none; -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.14); background:#171b2b;
  border-radius:50%; width:32px; height:32px; padding:0; margin:0 6px 0 0;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; vertical-align:middle; line-height:0;
  box-shadow:none; outline:none;
}
.vst-icon-btn svg{ width:15px; height:15px; display:block; }
.vst-icon-btn:active{ filter:brightness(.85); }

.vst-icon-btn--youtube{ color:#ff5a5a; }
.vst-icon-btn--youtube:hover{ background:#2c1418; border-color:rgba(255,90,90,.35); }

.vst-icon-btn--soundcloud{ color:#ff9248; }
.vst-icon-btn--soundcloud:hover{ background:#2c1c10; border-color:rgba(255,146,72,.35); }

.vst-icon-btn--mp3{ color:#4fc3ff; }
.vst-icon-btn--mp3:hover{ background:#0f2130; border-color:rgba(79,195,255,.35); }