/* Vorgue FM - plain black background + flat promotion panels (loaded by index.html and apply.html) */
:root{--cw:1024px}
html,body{background-color:#02020a!important}
.bg-slate-950{background-color:#02020a!important}
.bg-slate-950\/90{background-color:rgba(2,2,10,.92)!important}
@keyframes vxbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* side panels: desktop only, placed right next to the page content */
.vx-rail{--vxw:clamp(150px,calc((100vw - var(--cw))/2 - 28px),240px);position:fixed;top:84px;width:var(--vxw);height:min(560px,calc(100vh - 110px));z-index:15;display:none}
@media (min-width:1380px){.vx-rail{display:block}}
@media (min-width:1260px){body.promo-narrow .vx-rail{display:block}}
.vx-rail.left{left:max(14px,calc(50vw - var(--cw)/2 - 22px - var(--vxw)))}
.vx-rail.right{right:max(14px,calc(50vw - var(--cw)/2 - 31px - var(--vxw)))}

.vx-card{position:absolute;inset:0 0 16px 0;display:flex;flex-direction:column;gap:10px;padding:16px 14px 14px;border-radius:6px;text-decoration:none;color:#f4f4f8;background:#0a0a12;border:1px solid #23232f;border-top:3px solid var(--vxc,#a78bfa);opacity:0;transition:opacity .6s ease;pointer-events:none}
.vx-card.on{opacity:1;pointer-events:auto}
.vx-card:hover{border-color:#3a3a4c;border-top-color:var(--vxc,#a78bfa)}
.vx-tag{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a8aa0}
.vx-ico{font-size:22px;color:var(--vxc,#a78bfa);margin-top:2px}
.vx-h{font-size:clamp(14px,1.15vw,17px);font-weight:800;line-height:1.25;margin:0;overflow-wrap:anywhere}
.vx-p{font-size:11.5px;line-height:1.5;color:#a0a0b4;margin:0}
.vx-ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;flex:1}
.vx-ul li{font-size:11.5px;color:#e4e4ee;padding-left:14px;position:relative;line-height:1.35}
.vx-ul li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:2px;background:var(--vxc,#a78bfa)}
.vx-cta{display:block;text-align:center;font-size:12px;font-weight:800;padding:10px 8px;border-radius:4px;background:#f4f4f8;color:#02020a;transition:background .2s,color .2s}
.vx-card:hover .vx-cta{background:var(--vxc,#a78bfa);color:#02020a}
.vx-site{text-align:center;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#6a6a82}
.vx-dots{position:absolute;left:0;right:0;bottom:0;height:12px;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 6px}
.vx-dots b{flex:1 1 0;max-width:18px;height:2px;background:#262634;position:relative;overflow:hidden;display:block}
.vx-dots b.on::after{content:'';position:absolute;inset:0;background:#c9c9d8;transform-origin:left;animation:vxbar 7s linear forwards}

/* rotating banner on index.html (all screens) */
#vxBH,#vxBP,#vxBA{transition:opacity .45s ease}
@media (prefers-reduced-motion:reduce){.vx-card{transition:none}.vx-dots b.on::after{animation:none;transform:none}}

/* phones: keep the three top buttons on one line each */
@media (max-width:480px){
  body > header{padding-left:12px;padding-right:12px;gap:6px}
  body > header a,body > header button{white-space:nowrap;font-size:9.5px;padding-left:9px;padding-right:9px}
}

/* ===== professional flat look: no pills/ovals/glows, minimal borders ===== */
[class*="rounded-"],.rounded{border-radius:8px!important}
.rounded-t-\[32px\]{border-radius:12px 12px 0 0!important}
[class*="shadow"]{box-shadow:none!important}
.premium-glow{animation:none!important}
.border{border-width:0!important}
input[class],select[class],textarea[class]{border-width:1px!important;border-style:solid!important;border-color:#232331!important;background-color:#07070e!important}
.bg-gradient-to-r,.bg-gradient-to-br{background-image:none!important}
.bg-gradient-to-r{background-color:#7c3aed!important}
.bg-gradient-to-r:hover{background-color:#6d28d9!important}
.bg-gradient-to-br{background-color:#0a0a12!important}
#offlineBanner{background-color:#b91c1c!important}

/* top buttons */
header a,header button{border:0!important;border-radius:6px!important;animation:none!important;background:#0d0d16!important}
header a:hover,header button:hover{background:#171722!important}

/* player (the DJ-deck play button + radio waves are the app's own design and are left untouched) */
#playerCard{border:0!important;border-radius:12px!important;background:#07070f!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#liveStatusPill{border:0!important;border-radius:6px!important;background:#0c0c15!important}
#muteToggle{border:0!important;border-radius:8px!important;background:#10101a!important}
#visualTicker{border:0!important;border-radius:8px!important;background:#05050c!important}
#tickerInner .border-b,#tickerContent .border-b{border-bottom-width:0!important}

/* phone: calmer sheet that slides over the player */
@media (max-width:1023px){
  main > div:nth-child(2){border-radius:12px 12px 0 0!important;box-shadow:none!important;border-top:1px solid #1a1a26!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (max-width:640px){main > div:nth-child(2){border-radius:12px 12px 0 0!important}}

/* application form layer on top of the player (index.html) */
.vx-ov{position:fixed;inset:0;z-index:70;background:#02020a;display:none;flex-direction:column}
.vx-ov.open{display:flex}
.vx-ov-bar{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:8px 12px;background:#0a0a12;border-bottom:1px solid #1a1a26}
.vx-ov-back{background:#10101a;color:#d8d8e6;border:0;border-radius:6px;padding:9px 12px;font:600 12px Inter,sans-serif;cursor:pointer;white-space:nowrap}
.vx-ov-back:hover{background:#1a1a26}
.vx-ov-play{width:38px;height:38px;flex:0 0 auto;border:0;border-radius:8px;background:#7c3aed;color:#fff;font-size:14px;cursor:pointer}
.vx-ov-play:hover{background:#6d28d9}
.vx-ov-np{min-width:0;flex:1;line-height:1.25}
.vx-ov-np b{display:block;font-size:12.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-ov-np span{display:block;font-size:10.5px;color:#9a9ab0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-ov iframe{flex:1 1 auto;width:100%;border:0;background:#02020a}

/* the form page when shown inside that layer */
.embed header{display:none!important}

/* poster slides inside the side panels */
.vx-pic{padding:12px;gap:8px}
.vx-pic-box{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.vx-pic img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}
/* poster block for screens without side panels (phones / tablets) */
.vx-poster{display:block;position:relative;height:468px;border-radius:6px;background:#0a0a12;text-decoration:none;overflow:hidden}
@media (min-width:1380px){.vx-poster{display:none}}
.vx-poster .vx-tag{position:absolute;top:10px;left:12px;z-index:2}
.vx-poster img{position:absolute;top:30px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);height:calc(100% - 78px);width:auto;object-fit:contain;border-radius:4px;transition:opacity .4s ease}
.vx-poster .vx-cta{position:absolute;left:12px;right:12px;bottom:12px}