/* musicbot4you.net v2: shell extras and the simple pages (login, register, legal texts, results, admin).
   Loaded on every page after site.css. */

/* ---------- shell extras ---------- */
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:var(--grad);color:#fff;font-weight:600;transition:top .2s}
.skip:focus{top:12px;color:#fff}
.lang-menu li{padding:0}
.lang-menu a{display:flex;justify-content:space-between;gap:12px;flex:1;min-height:40px;align-items:center;padding:0 10px;border-radius:8px;color:inherit}
.lang-menu a:hover{color:var(--text);background:color-mix(in srgb,var(--text) 7%,transparent)}
.nav .nav-admin{color:var(--pink)}
.linklike{display:inline-flex;align-items:center;min-height:30px;padding:0;border:0;background:none;color:var(--muted);font:inherit;text-align:start}
.linklike:hover{color:var(--text)}
@media (pointer:coarse){.lang-menu a,.linklike{min-height:44px}}

/* ---------- inner pages ---------- */
.page{padding-block:clamp(32px,5vw,60px) clamp(56px,7vw,96px)}
.page-narrow{max-width:calc(560px + 2 * var(--gutter))}
.page-text{max-width:calc(860px + 2 * var(--gutter))}
.page-head{display:flex;flex-direction:column;gap:10px;margin-bottom:clamp(20px,3vw,32px)}
.msg{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:12px;border:1px solid var(--line-strong);background:var(--bg2);font-size:14.5px}
.msg.ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 9%,transparent)}
.msg.bad{color:#fecdd3;border-color:color-mix(in srgb,var(--danger) 45%,transparent);background:color-mix(in srgb,var(--danger) 9%,transparent)}
.msg.warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 8%,transparent)}
.stack-s{display:flex;flex-direction:column;gap:14px}

/* ---------- login, register, password reset ---------- */
.auth{display:flex;flex-direction:column;gap:18px}
.auth .card{display:flex;flex-direction:column;gap:18px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid .wide{grid-column:1/-1}
.form-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 16px;font-size:14.5px}
.captcha{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.captcha img{border-radius:10px;border:1px solid var(--line-strong);background:#fff}
@media (max-width:560px){.form-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- legal texts and other long copy taken over from the old templates ---------- */
.prose{color:var(--muted);font-size:15.5px;line-height:1.7;overflow-wrap:anywhere}
.prose h1,.prose h2,.prose h3,.prose h4{margin:1.6em 0 .5em;color:var(--text);font-family:var(--display);line-height:1.25}
.prose h1{font-size:30px} .prose h2{font-size:23px} .prose h3{font-size:19px} .prose h4{font-size:16.5px}
.prose>:first-child{margin-top:0}
.prose p,.prose ul,.prose ol,.prose table{margin:0 0 1em}
.prose b,.prose strong{color:var(--text)}
.prose table{width:100%;border-collapse:collapse}
.prose td,.prose th{padding:8px 10px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}

/* ---------- order page and customer area: what the real pages need beyond the mockup styles ---------- */
.muted{color:var(--muted)}
.btn[aria-disabled="true"],.mini[aria-disabled="true"]{opacity:.45;pointer-events:none;box-shadow:none}
a.mini{display:inline-flex;align-items:center}
.pickp a.pcard{color:var(--text)}
.pickp a.pcard:hover{border-color:var(--a60)}
.pickp a.pcard.on{border-color:var(--accent);background:var(--a18)}
.acc-tab[aria-current="page"]{color:var(--text);background:linear-gradient(90deg,var(--a18),color-mix(in srgb,var(--accent) 6%,transparent));box-shadow:inset 0 0 0 1px var(--a30)}
.acc-tab[aria-current="page"]::before{content:"";position:absolute;inset-inline-start:-12px;top:10px;bottom:10px;width:3px;border-radius:0;border-start-end-radius:3px;border-end-end-radius:3px;background:var(--accent)}
.acc-nav a.acc-tab{text-decoration:none}
.pay-row form{display:contents}
@media (max-width:900px){.acc-tab[aria-current="page"]::before{display:none}}

/* ---------- the legal texts come from the old templates: fit their markup into the page ---------- */
.prose [style*="width"]{width:auto!important;max-width:100%}
.prose .centerContainer{width:auto;margin:0}
.prose .button{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--line-strong);background:var(--bg2);color:var(--text);font-weight:600;font-size:14px}

/* ---------- languages ----------
   The self-hosted Outfit, Inter and JetBrains Mono files hold Western European letters only. Languages with
   other letters use the system UI font for the whole text, so that no word mixes two fonts (as on
   ts3musicbot.net). An element with its own lang attribute (the names in the language menu, the English legal
   texts) uses the fonts of that language. */
:lang(en),:lang(de),:lang(fr),:lang(es),:lang(pt),:lang(it),:lang(nl),:lang(da),:lang(sv){
  --display:Outfit,"Segoe UI",system-ui,sans-serif;
  --body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
:lang(pl),:lang(cs),:lang(hu),:lang(ro),:lang(tr),:lang(ru),:lang(uk){
  --display:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
}
:lang(ar){
  --display:"SF Arabic","Geeza Pro","Segoe UI",Tahoma,"Noto Sans Arabic","Noto Naskh Arabic",system-ui,sans-serif;
  --body:"SF Arabic","Geeza Pro","Segoe UI",Tahoma,"Noto Sans Arabic","Noto Naskh Arabic",system-ui,sans-serif;
  /* Arabic words in monospace lines (product subtitles) in the Arabic UI font, not in spaced-out fallback glyphs */
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"SF Arabic","Geeza Pro","Segoe UI",Tahoma,"Noto Sans Arabic",monospace;
}
:lang(ja){
  --display:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","Noto Sans JP",system-ui,sans-serif;
  --body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","Noto Sans JP",system-ui,sans-serif;
}
:lang(ko){
  --display:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  --body:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
}
:lang(zh-Hans){
  --display:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
}
/* the font family is resolved on body: apply it again where a lang attribute changes the variables */
body [lang]{font-family:var(--body)}
/* tracking is made for Latin display type: off where it breaks joined letters (Arabic) or spreads glyphs (CJK),
   lighter for the system UI fonts, which are tight already */
*:lang(ar),*:lang(ja),*:lang(ko),*:lang(zh-Hans){letter-spacing:0!important}
:is(.h1,.h2,.cfg-big,.sum-price,.p-title,.bal-big,.promo-title,.try-free):is(:lang(pl),:lang(cs),:lang(hu),:lang(ro),:lang(tr),:lang(ru),:lang(uk)){letter-spacing:-.015em}
/* room for Arabic marks and for CJK glyphs in display type */
html:lang(ja) :is(.h1,.h2,.h3,.p-title,.promo-title),html:lang(ko) :is(.h1,.h2,.h3,.p-title,.promo-title),html:lang(zh-Hans) :is(.h1,.h2,.h3,.p-title,.promo-title){line-height:1.24}
html:lang(ar) :is(.h1,.h2,.h3,.p-title,.promo-title){line-height:1.34}
html:lang(ar) body{line-height:1.75}
html:lang(ja) body,html:lang(zh-Hans) body{line-break:strict;overflow-wrap:break-word}
html:lang(ko) body{word-break:keep-all;overflow-wrap:break-word}
/* Japanese headings and buttons break between phrases, not inside a word (Chrome) */
html:lang(ja) :is(h1,h2,h3,.h1,.h2,.h3,.p-title,.lead,.btn,.eyebrow,.label){word-break:auto-phrase}
/* no capitals where the script has none (they would only shout the Latin brand names), and none in Turkish,
   where uppercase turns the i of Discord and ServerBridge into İ */
:is(.eyebrow,.label,.acc-nav-label,.grp legend,.tbl th):is(:lang(ar),:lang(ja),:lang(ko),:lang(zh-Hans),:lang(tr)){text-transform:none}

/* language menu: 20 languages in two columns */
.lang-menu{grid-template-columns:repeat(2,minmax(0,1fr));min-width:min(360px,calc(100vw - 32px));max-height:min(72vh,520px);overflow-y:auto;overscroll-behavior:contain}
.lang-menu a small{font:700 11px var(--mono);color:var(--dim)}

/* ---------- right to left (Arabic) ----------
   The layout follows the text direction through flex, grid and the inline-start/end properties. Addresses,
   passwords, prices and the sliders stay left to right. */
[dir="rtl"] :is(code,.range,.ticks,input.mono,input[type="email"],input[type="password"]){direction:ltr}
[dir="rtl"] code{unicode-bidi:isolate}
[dir="rtl"] input:is(.mono,[type="email"],[type="password"]){text-align:right}