/* Venom Studios shared fixes (all pages). Loaded last so it wins over older rules. */

/* 1. One logo size everywhere (same as the home page) */
header .brand img{height:38px!important;width:auto!important;max-width:120px!important;object-fit:contain!important}
@media(max-width:560px){header .brand img{height:34px!important;max-width:100px!important}}

/* 2. Pages with a simple header: keep the menu exactly in the middle, never drifting left */
@media(min-width:901px){
  header .wrap.nav:not(:has(.nav-quick)){position:relative;justify-content:flex-start}
  header .wrap.nav:not(:has(.nav-quick)) > .menu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:0;white-space:nowrap}
  header .wrap.nav:not(:has(.nav-quick)) > .brand{margin-right:auto}
}
header .wrap.nav:not(:has(.nav-quick)) > .menu a{white-space:nowrap}

/* 3. Pills and buttons: text always centred (Artist Login etc.) */
header .account-btn,header #vsEditBtn,header .nq-btn,header .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center}
header .nav-actions .account-btn{min-width:112px}

/* 4. Phone comfort */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,canvas,svg{max-width:100%}
@media(max-width:700px){
  a,button,.btn,.chip,summary,input,select{touch-action:manipulation}
  .btn,.chip,.nq-btn,.burger{min-height:44px}
  .wrap{padding-left:max(16px,env(safe-area-inset-left))!important;padding-right:max(16px,env(safe-area-inset-right))!important}
  /* many options in a row: swipe sideways instead of a long wall */
  .chips,.subchips,.trust,.faq-chips,.fq-chips,.filter-row,.quick-chips,.bundle-tags,.tags{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;margin-right:-16px;padding-right:16px}
  .chips::-webkit-scrollbar,.subchips::-webkit-scrollbar,.trust::-webkit-scrollbar,.faq-chips::-webkit-scrollbar,.fq-chips::-webkit-scrollbar,.filter-row::-webkit-scrollbar,.quick-chips::-webkit-scrollbar,.bundle-tags::-webkit-scrollbar,.tags::-webkit-scrollbar{display:none}
  .chips>*,.subchips>*,.trust>*,.faq-chips>*,.fq-chips>*,.filter-row>*,.quick-chips>*,.bundle-tags>*,.tags>*{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
  .toolbar{gap:10px}
  .toolbar input[type=search],.toolbar input{width:100%}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  h1,h2{overflow-wrap:break-word}
  .fab-dock{bottom:calc(14px + env(safe-area-inset-bottom,0px))!important}
  body{padding-bottom:env(safe-area-inset-bottom,0px)}
}

/* 5. Header always at the TOP on phones (fixed headers must not slide down) */
@media(max-width:900px){header{top:0!important;bottom:auto!important}}

/* 6. Small header for pages that had none (Terms, Privacy, Refunds) */
.vs-mini{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:0 max(16px,env(safe-area-inset-left));background:rgba(10,10,11,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.vs-mini a{color:#fff;text-decoration:none;font:600 14px/1 system-ui,sans-serif}
.vs-mini .vm-brand img{height:34px;width:auto;display:block}
.vs-mini .vm-shop{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:linear-gradient(135deg,#f43f5e,#be185d)}
.vs-mini .vm-shop svg{width:16px;height:16px}

/* 7. Pop-ups (email sent / update available) */
.vs-pop{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);animation:vsFade .18s ease}
.vs-pop-card{width:min(420px,100%);background:#121217;border:1px solid #2c2c36;border-radius:20px;padding:28px 24px 22px;text-align:center;color:#f4f4f6;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:vsUp .22s ease}
.vs-pop-ic{width:64px;height:64px;margin:0 auto 14px;display:grid;place-items:center;border-radius:18px;background:#fff}
.vs-pop-ic svg{width:40px;height:40px}
.vs-pop-ic.upd{background:linear-gradient(135deg,#8b5cf6,#e5334f);color:#fff}
.vs-pop h3{font:700 21px/1.25 system-ui,sans-serif;margin:0 0 8px;color:#fff}
.vs-pop p{margin:0 0 6px;color:#c9c9d3;font:400 15px/1.55 system-ui,sans-serif}
.vs-pop p b{color:#fff;overflow-wrap:anywhere}
.vs-pop small{display:block;color:#8d8d99;margin-top:6px;font:400 13px/1.5 system-ui,sans-serif}
.vs-pop-btns{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.vs-pop-btns a,.vs-pop-btns button{flex:1 1 140px;min-height:46px;border-radius:12px;border:1px solid #34343f;background:#1b1b22;color:#fff;font:600 15px system-ui,sans-serif;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;padding:0 14px}
.vs-pop-btns .go{background:linear-gradient(135deg,#f43f5e,#be185d);border-color:transparent}
.vs-upd-list{list-style:none;margin:12px 0 0;padding:0;text-align:left}
.vs-upd-list li{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid #2a2a33;border-radius:10px;margin-top:6px;font:600 14px system-ui,sans-serif}
.vs-upd-list li span{color:#9be7b0;font-weight:700}
@keyframes vsFade{from{opacity:0}to{opacity:1}}
@keyframes vsUp{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
/* hide the old small status text once the pop-up shows it */
#authStatus.vs-hidden{display:none}

/* 8. One logo height on every page (index included) */
html body header .brand img{height:36px!important;width:auto!important}
@media(max-width:560px){html body header .brand img{height:34px!important}}

/* 9. Phone/tablet: footer and menu links easy to tap (not only 19px tall) */
@media(max-width:900px){
  footer a,.crumbs a,.legal a,.foot a,.contact-mail,.vs-ob-link,header .menu a{display:inline-block;padding:9px 0;min-height:36px}
  footer li,.foot li{margin:0}
  footer ul{display:flex;flex-direction:column;gap:2px}
}
/* 10. Very wide screens: keep content readable */
@media(min-width:1900px){.wrap{max-width:1400px}}

/* 11. Artist Login / Dashboard button: text centred, no empty space on the right (all widths) */
html body header .nav-actions .account-btn{width:auto!important;max-width:none!important;min-width:0!important;justify-content:center!important;text-align:center!important;padding:0 16px!important;white-space:nowrap!important;font-size:12.5px!important;line-height:1!important}
html body header .nav-actions .account-btn span{max-width:none!important}

/* 12. iPhone/iPad: sticky header (iOS 26 Safari drifts fixed headers to the bottom of the screen) */
html.vs-sticky-head body>header{position:sticky!important;top:0!important;bottom:auto!important;left:auto!important;right:auto!important;transform:none!important;margin-bottom:calc(-1 * var(--vs-hh,62px))!important;width:100%}

/* 13. Footer links on phones: neat wrapped rows, no stray dots at line ends */
@media(max-width:700px){
  footer .legal,footer .legal-links{display:flex!important;flex-wrap:wrap;justify-content:flex-start;gap:0 18px}
  footer .legal>span,footer .legal-links>span{display:none!important}
  footer .legal-links{justify-content:center}
  footer .f-dot{display:none}
  footer .f-row>span .contact-mail{display:block;margin-top:2px}
  footer .fbrand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left}
  footer .fbrand img{width:64px!important;height:auto!important}
  footer .menu-account{font:inherit!important;font-size:inherit!important;padding:9px 0!important;background:none!important;border:0!important;color:inherit;text-align:left;min-height:36px}
}
/* hero photo centred on phones */
@media(max-width:700px){.hero .shot{margin-left:auto!important;margin-right:auto!important;justify-self:center!important;align-self:center!important}}

/* 14. Admin dashboard: wider on PC, tabs slide sideways on phones, tidy selects */
@media(min-width:1100px){body:has(#app.adm-on,#app:not([hidden])) .wrap{max-width:1240px}}
@media(max-width:700px){
  .adm-tabs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;margin-right:-16px;padding-right:16px;padding-bottom:6px}
  .adm-tabs::-webkit-scrollbar{display:none}
  .adm-tabs>*{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
}
#app select:not(.input){background:#15151b;color:#eee;border:1px solid #2c2c36;border-radius:10px;padding:8px 10px;font:inherit;font-size:14px}

/* 15. Phones: text inputs at 16px so iPhone does not zoom in when you tap them */
@media(max-width:900px){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}}

/* 16. Empty toast pill must never peek out (showed as a small white blob) */
#toast:empty{display:none!important}

/* 17. Same header width (logo in the same place) on every inner page; legal pages' logo same size */
@media(min-width:901px){html body header .wrap.nav:not(:has(.nav-quick)){max-width:1200px!important;margin-left:auto!important;margin-right:auto!important}}
.top a.brand img{height:38px!important}
@media(max-width:560px){.top a.brand img{height:34px!important}}

/* 18. Phones: fewer floating bubbles over the page (Spotify/YouTube/Instagram stay in Follow & Listen and the footer) */
@media(max-width:700px){.fab-dock .fab.spotify,.fab-dock .fab.youtube,.fab-dock .fab.ig{display:none!important}}

/* 19. Phone menu: dim the page behind the open menu so it reads clearly */
@media(max-width:900px){header .menu.open{box-shadow:0 0 0 100vmax rgba(0,0,0,.55)!important}}

/* 20. Tablets / phone sideways (641-900px): "DEE Studio Lite" button was squeezed into a 40px box */
@media(min-width:641px) and (max-width:900px){
  html body header .nav-quick .nq-btn.nq-studio{width:auto!important;min-width:0!important;max-width:none!important;padding:0 12px 0 8px!important;gap:7px!important}
  html body header .nav-quick .nq-btn.nq-studio span{display:block!important}
  html body header .nav-quick .nq-btn.nq-shop{width:auto!important;min-width:0!important;max-width:none!important;padding:0 14px!important;gap:7px!important}
  html body header .nav-quick .nq-btn.nq-shop span{display:inline!important}
}
/* hero photo centred on tablets too */
@media(max-width:900px){.hero .shot{margin-left:auto!important;margin-right:auto!important;justify-self:center!important}}
/* short screens (phone sideways): fewer floating bubbles */
@media(max-height:520px){.fab-dock .fab.spotify,.fab-dock .fab.youtube,.fab-dock .fab.ig{display:none!important}}

/* 21. Keyboard users: clear focus ring (mouse/touch clicks unaffected) */
a:focus-visible,button:focus-visible,summary:focus-visible,[role=tab]:focus-visible{outline:2px solid #f13e5d!important;outline-offset:2px}

/* 22. Phone readability and tap targets (QA pass 3) */
@media(max-width:900px){
  details>summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
  .chips .chip,.try button{min-height:40px}
  .dots button{position:relative}
  .dots button::after{content:"";position:absolute;inset:-14px -6px}
  .ba-label,.ba-wave-note{font-size:11.5px!important}
}
.vs-cd small{font-size:10.5px!important}