/* 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(4,9,16,.5);
  backdrop-filter:blur(16px) saturate(120%); -webkit-backdrop-filter:blur(16px) saturate(120%);
}
.vst-media-modal-overlay.is-open{ display:flex; }

/* Locks background scroll while a modal is open. See lockScroll()/
unlockScroll() in vst-media-modal.js for why this is overflow:hidden only
(no position:fixed body trick) — that avoided iOS rubber-banding too, but
caused a visible reflow flash + scroll jump on close. */
html.vst-modal-open, html.vst-modal-open body{ overflow:hidden!important; }

.vst-media-modal{
  position:relative; width:min(1040px, 100%);
  background:#070d17; border:1px solid rgba(56,189,248,.24);
  border-radius:18px; box-shadow:0 30px 90px rgba(0,0,0,.6);
  overflow:hidden; max-height:92dvh;
  display:flex; flex-direction:column;
}
.vst-media-modal-body{ position:relative; width:100%; min-height:0; display:flex; flex-direction:column; }

/* ── Video (YouTube) ──────────────────────────────────────────────────────
Always keeps true 16:9 proportions and scales by WIDTH first, capped by
max-height. This is what actually makes it rotation-safe: there is no
height:100%/flex-stretch chain to fight with, so it can never collapse to
the browser's tiny default iframe size or blow past the viewport. */
.vst-media-modal-frame{
  display:block; width:100%; aspect-ratio:16/9; max-height:88dvh;
  border:0; background:#000;
}

/* ── Audio-visual (SoundCloud) ────────────────────────────────────────────
SoundCloud only renders its big cover-art+waveform "visual" layout when the
iframe is tall enough — at the old fixed 166px (and worse, height:auto on
mobile) it was forced into the tiny compact bar. Give it real height on
every viewport instead. */
.vst-media-modal-frame--audio{
  aspect-ratio:auto; height:min(58dvh, 460px); min-height:300px;
}

/* ── Our own MP3 player ───────────────────────────────────────────────── */
.vst-media-modal-audio{
  padding:30px 28px 28px; display:flex; flex-direction:column; gap:16px;
  align-items:stretch; overflow-y:auto;
  background:radial-gradient(circle at 15% 0%, rgba(56,189,248,.08), transparent 55%);
}
.vst-media-modal-audio-art-wrap{
  width:100%; max-width:220px; margin:0 auto; aspect-ratio:1/1;
  border-radius:14px; overflow:hidden; flex-shrink:0;
  border:1px solid rgba(56,189,248,.28); box-shadow:0 14px 40px rgba(0,0,0,.45);
  background:#0b1420;
}
.vst-media-modal-audio-art{ width:100%; height:100%; object-fit:cover; display:block; }
.vst-media-modal-audio-title{ font:700 15px/1.35 Inter,system-ui,Arial,sans-serif; color:#f5f9ff; text-align:center; }
.vst-media-modal-audio-row{ display:flex; align-items:center; gap:14px; }
.vst-media-modal-audio-play{
  flex-shrink:0; width:54px; height:54px; 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:20px; height:20px; }
.vst-media-modal-audio-seek{
  position:relative; flex:1; height:7px; border-radius:4px; background:rgba(255,255,255,.1); cursor:pointer;
}
.vst-media-modal-audio-fill{
  position:absolute; inset:0; width:0%; border-radius:4px;
  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); }

/* ── Mobile: portrait ──────────────────────────────────────────────────
No more top/left/right/bottom:10px "full screen" box with a flex-centred
tiny child floating in dead space — the panel now sizes itself to its
actual content (aspect-ratio for video, a real height for audio), capped
by the viewport, and centres in the blurred backdrop like on desktop. */
@media (max-width:767px){
  .vst-media-modal-overlay{
    padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  .vst-media-modal{
    width:100%; max-width:600px; max-height:94dvh;
    border-radius:16px; border-width:1.5px;
  }
  .vst-media-modal-frame{ max-height:80dvh; }
  .vst-media-modal-frame--audio{ height:min(50dvh, 420px); min-height:260px; }
  .vst-media-modal-audio{ padding:24px 20px 20px; }
  .vst-media-modal-audio-art-wrap{ max-width:180px; }
  .vst-media-modal-close{ top:10px; right:10px; width:46px; height:46px; }
}

/* ── Mobile: landscape ─────────────────────────────────────────────────
Short viewport height is the constraint here, not width, so we size the
frame off dvh instead of the aspect-ratio-off-width rule above (which
would otherwise blow past the top/bottom of the screen once rotated). The
16:9 ratio is kept either way — only which dimension drives it changes. */
@media (max-width:900px) and (orientation:landscape){
  .vst-media-modal-overlay{ padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .vst-media-modal{ max-height:96dvh; }
  .vst-media-modal-frame{
    width:auto; max-width:100%; height:88dvh; max-height:88dvh; aspect-ratio:16/9; margin:0 auto;
  }
  .vst-media-modal-frame--audio{ height:min(80dvh, 340px); min-height:220px; }
  .vst-media-modal-audio{
    flex-direction:row; align-items:center; gap:18px; padding:16px 22px; overflow-y:auto;
  }
  .vst-media-modal-audio-art-wrap{ max-width:120px; margin:0; }
  .vst-media-modal-audio-title{ text-align:left; }
  .vst-media-modal-audio > div:not(.vst-media-modal-audio-art-wrap){ flex:1; min-width:0; }
}

/* ── Icon buttons — circular, bordered, glyph centred inside ── */
.vst-icon-btn{
  appearance:none; -webkit-appearance:none;
  border:2px solid rgba(255,255,255,.22); background:rgba(10,16,26,.55);
  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; position:relative;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.vst-icon-btn svg{ width:16px; height:16px; display:block; }
.vst-icon-btn:hover{ transform:translateY(-1px) scale(1.08); }
.vst-icon-btn:active{ transform:scale(.94); }

/* YouTube + SoundCloud — solid glowing disc, no hover transition/movement.
   mp3 keeps the original bordered-circle look untouched. */
.vst-icon-btn--youtube,
.vst-icon-btn--soundcloud{
  transition:none; transform:none !important;
}
.vst-icon-btn--youtube:hover,
.vst-icon-btn--youtube:active,
.vst-icon-btn--soundcloud:hover,
.vst-icon-btn--soundcloud:active{
  transform:none !important;
}

.vst-icon-btn--youtube{
  color:#fff;
  border:none;
  background:radial-gradient(circle at 32% 30%, #ff5a5a 0%, #d21f1f 60%, #a81414 100%);
}
.vst-icon-btn--youtube:hover{
  background:radial-gradient(circle at 32% 30%, #ff7a7a 0%, #e02a2a 60%, #b81717 100%);
}
.vst-icon-btn--youtube:active{ background:#a81414; box-shadow:0 0 0 2px rgba(255,90,90,.5); }
.vst-icon-btn--youtube svg{ color:#fff; }

.vst-icon-btn--soundcloud{
  color:#fff;
  border:none;
  background:radial-gradient(circle at 32% 30%, #ffb04d 0%, #ff7a18 60%, #d85e00 100%);
}
.vst-icon-btn--soundcloud:hover{
  background:radial-gradient(circle at 32% 30%, #ffc06e 0%, #ff8b2e 60%, #e2690a 100%);
}
.vst-icon-btn--soundcloud:active{ background:#d85e00; box-shadow:0 0 0 2px rgba(255,140,40,.5); }
.vst-icon-btn--soundcloud svg{ color:#fff; }

.vst-icon-btn--mp3{ color:#38bdf8; border-color:rgba(56,189,248,.45); }
.vst-icon-btn--mp3:hover{ border-color:#38bdf8; background:rgba(56,189,248,.14); }

@media (prefers-reduced-motion:reduce){
  .vst-icon-btn, .vst-media-modal-close, .vst-media-modal-audio-play{ transition:none; }
}