/* Shared navigation for public, account, and information pages. */
.sc-header,
.sc-header * { box-sizing: border-box; }

.sc-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    height: 68px;
    color: #f7f7ff;
    background: rgba(9, 9, 17, .91);
    border-bottom: 1px solid rgba(166, 171, 255, .14);
    box-shadow: 0 12px 38px rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.sc-header__inner {
    width: min(100%, 1440px);
    height: 68px;
    margin: 0 auto;
    padding: 0 clamp(16px, 2.6vw, 32px);
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.3vw, 34px);
}

.sc-header__brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 9px;
    min-height: 44px;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.sc-header__brand:hover { color: #fff; }
.sc-header__brand img { width: 25px; height: 25px; object-fit: contain; border-radius: 6px; }
.sc-header__brand i,
.sc-header__brand .brand-icon { color: #9094ff; font-size: 20px; }

.sc-header__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
    flex-wrap: nowrap;
}
.sc-header__nav a,
.sc-header__mobile a {
    color: #afb2c7;
    text-decoration: none;
    font-weight: 600;
    transition: color .18s, background-color .18s;
}
.sc-header__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 clamp(8px, .9vw, 13px);
    border-radius: 10px;
    font-size: 13px;
    white-space: nowrap;
}
.sc-header__nav a:hover,
.sc-header__nav a[aria-current="page"] {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.sc-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 9px;
    min-width: 0;
}
.sc-header__signin,
.sc-header__signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 39px;
    padding: 0 13px;
    border-radius: 10px;
    color: #e6e7f5;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s, color .18s, transform .18s;
}
.sc-header__signin:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.sc-header__signup {
    color: #fff;
    background: linear-gradient(120deg, #6468ed, #8e67e6);
    box-shadow: 0 5px 18px rgba(99, 102, 241, .23);
}
.sc-header__signup:hover { color: #fff; transform: translateY(-1px); background: linear-gradient(120deg, #777afb, #a277ef); }

.sc-header__lang { position: relative; flex: 0 0 auto; }
.sc-header__lang-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 72px;
    min-height: 39px;
    padding: 0 10px;
    border: 1px solid rgba(169, 173, 255, .2);
    border-radius: 10px;
    background: rgba(255, 255, 255, .045);
    color: #f1f1fb;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
    user-select: none;
    transition: border-color .18s, background-color .18s;
}
.sc-header__lang-trigger::-webkit-details-marker { display: none; }
.sc-header__lang-trigger::marker { content: ''; }
.sc-header__lang-trigger:hover,
.sc-header__lang[open] .sc-header__lang-trigger {
    background: rgba(112, 106, 240, .15);
    border-color: rgba(160, 157, 255, .54);
}
.sc-header__flag {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .23), 0 1px 3px rgba(0, 0, 0, .26);
}
.sc-header__lang-trigger svg { width: 15px; height: 15px; flex: 0 0 auto; }
.sc-header__lang-trigger i { color: #aaaaff; font-size: 15px; line-height: 1; }
.sc-header__lang-trigger .bi-chevron-down { color: #a4a5bc; font-size: 11px; transition: transform .18s; }
.sc-header__lang[open] .bi-chevron-down { transform: rotate(180deg); }
.sc-header__lang-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1001;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    width: min(380px, calc(100vw - 24px));
    padding: 8px;
    border: 1px solid rgba(172, 175, 255, .22);
    border-radius: 14px;
    background: #151522;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .46);
}
.sc-header__lang-menu-title {
    grid-column: 1 / -1;
    padding: 5px 9px 9px;
    color: #a7a9c2;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .04em;
    border-bottom: 1px solid rgba(172, 175, 255, .14);
}
.sc-header__lang:not([open]) .sc-header__lang-menu { display: none; }
.sc-header__lang-menu a,
.sc-header__lang-soon {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 39px;
    padding: 0 8px;
    border-radius: 8px;
    color: #d7d8e8;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.sc-header__lang-soon {
    color: #9294aa;
    cursor: not-allowed;
}
.sc-header__lang-soon small {
    margin-left: auto;
    padding-left: 12px;
    font-size: 10px;
    font-weight: 600;
    opacity: .8;
}
.sc-header__lang-menu a:hover,
.sc-header__lang-menu a[aria-current="true"] {
    color: #fff;
    background: rgba(106, 104, 230, .2);
}
.sc-header__lang-menu a[aria-current="true"]::after {
    content: '✓';
    margin-left: auto;
    padding-left: 5px;
    color: #aaaaff;
    font-weight: 800;
}

html[lang="ar"] { direction: rtl; }
html[lang="ar"] .sc-header__lang-menu { direction: ltr; right: auto; left: 0; }
html[lang="ar"] :is(input[type="email"], input[type="tel"], input[type="number"], input[type="password"], code, .sms-code, .ri-number, .m-hist-number, .dep-hist-amount) {
    direction: ltr;
    unicode-bidi: isolate;
}

.sc-header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(169, 173, 255, .2);
    border-radius: 10px;
    background: rgba(255, 255, 255, .045);
    color: #fff;
    cursor: pointer;
}
.sc-header__toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s, opacity .2s;
}
.sc-header__toggle.is-open span:first-child { transform: translateY(7px) rotate(45deg); }
.sc-header__toggle.is-open span:nth-child(2) { opacity: 0; }
.sc-header__toggle.is-open span:last-child { transform: translateY(-7px) rotate(-45deg); }

.sc-header__mobile {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 3px;
    max-height: calc(100dvh - 68px);
    padding: 13px clamp(16px, 3vw, 28px) 20px;
    overflow-y: auto;
    background: rgba(11, 11, 21, .985);
    border-bottom: 1px solid rgba(166, 171, 255, .2);
    box-shadow: 0 24px 35px rgba(0, 0, 0, .35);
}
.sc-header__mobile:not([hidden]) { display: flex; }
.sc-header__mobile[hidden] { display: none !important; }
.sc-header__mobile a {
    display: flex;
    align-items: center;
    min-height: 47px;
    padding: 0 15px;
    border-radius: 10px;
    font-size: 15px;
}
.sc-header__mobile a:hover,
.sc-header__mobile a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .07); }

.sc-header :is(a, button, summary):focus-visible {
    outline: 2px solid #aaa9ff;
    outline-offset: 3px;
}

/* Account and information templates have their own layout CSS. */
.sc-header ~ .auth-wrap { padding-top: 148px; }
.sc-header ~ .public-main { margin-top: 125px; }
.directory-tools { top: 68px; }
.main-content .top-header { position: relative; z-index: 50; }

@media (max-width: 1180px) {
    .sc-header__inner { justify-content: space-between; }
    .sc-header__nav { display: none; }
    .sc-header__toggle { display: flex; }
}

@media (max-width: 640px) {
    .sc-header__inner { gap: 10px; }
    .sc-header__brand { font-size: 16px; }
    .sc-header__signin,
    .sc-header__signup { display: none; }
    .sc-header__actions { gap: 8px; }
    .sc-header__lang-menu {
        position: fixed;
        top: 73px;
        right: 12px;
        left: 12px;
        width: auto;
    }
    html[lang="ar"] .sc-header__lang-menu { right: 12px; left: 12px; }
    .sc-header ~ .auth-wrap { padding-top: 96px; }
    .sc-header ~ .public-main { margin-top: 106px; }
}

@media (max-width: 360px) {
    .sc-header__inner { padding-inline: 12px; gap: 6px; }
    .sc-header__brand { font-size: 13px; gap: 4px; }
    .sc-header__brand img { width: 20px; height: 20px; }
    .sc-header__actions { gap: 6px; }
    .sc-header__toggle { width: 38px; height: 38px; }
    .sc-header__lang-trigger { min-width: 0; min-height: 38px; padding-inline: 6px; gap: 5px; font-size: 11px; }
    .sc-header__lang-trigger .sc-header__flag { width: 18px; height: 13.5px; }
    .sc-header__lang-menu a { gap: 6px; padding-inline: 6px; font-size: 11.5px; }
    .sc-header__lang-menu a[lang="id"] { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .top-header .page-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .top-header > .d-flex { flex: 0 0 auto; gap: 8px !important; }
    .top-header .balance-card { padding-inline: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .sc-header *, .sc-header *::before, .sc-header *::after { transition-duration: .01ms !important; }
}

/* Keep large native-language lists visible on ordinary portrait phones. */
.sc-header__lang-menu:has(a:nth-of-type(25)) {
  position:fixed;
  top:73px;
  inset-inline:auto;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  grid-template-columns: repeat(3,minmax(0,1fr));
  width: min(600px,calc(100vw - 24px));
}
@media(max-width:640px) {
  .sc-header__lang-menu:has(a:nth-of-type(25)) {
    left:12px;
    right:12px;
    transform:none;
    width:auto;
    gap:2px;
    padding:6px;
  }
  .sc-header__lang-menu:has(a:nth-of-type(25)) a {
    min-height:42px;
    gap:4px;
    padding:3px 4px;
    font-size:11px;
    line-height:1.35;
    white-space:normal;
    grid-column:auto;
  }
  .sc-header__lang-menu:has(a:nth-of-type(25)) a .sc-header__flag {
    width:16px;
    height:12px;
  }
  .sc-header__lang-menu:has(a:nth-of-type(25)) a span {
    min-width:0;
    overflow-wrap:anywhere;
  }
  .sc-header__lang-menu:has(a:nth-of-type(25)) a[aria-current="true"]::after {
    padding:0;
    margin-inline-start:0;
  }
}

/* Keep complete hints visible on narrow account forms; typed values keep their original size. */
@media(max-width:480px){
html:is([lang="en"],[lang="ru"],[lang="es"],[lang="pt-BR"],[lang="de"],[lang="fr"],[lang="id"],[lang="vi"],[lang="uk"],[lang="it"],[lang="nl"],[lang="fa"]) input::placeholder{font-family:Arial,sans-serif!important;font-size:13px!important;letter-spacing:normal!important}
.public-main h1{max-width:100%;overflow-wrap:anywhere}
}

/* Full optional-referral meaning must fit; entered text keeps its original 16px. */
@media(max-width:480px){
html:is([lang="pl"],[lang="tr"],[lang="uz"]) input[name="referral_code"]::placeholder{font-family:Arial,sans-serif!important;font-size:13px!important;letter-spacing:normal!important}
}

/* Actual 320px account forms leave187px for these complete referral hints. */
@media(max-width:480px){
html:is([lang="ru"],[lang="uk"]) input[name="referral_code"]::placeholder{font-size:12px!important}
html[lang="ar"] input[name="referral_code"]::placeholder{font-family:Arial,sans-serif!important;font-size:14px!important;letter-spacing:normal!important}
}

/* Use proportional native glyphs for the multilingual profile menu in Japanese. */
html[lang="ja"] .language-option__body strong[lang]{font-family:Inter,Arial,sans-serif;overflow-wrap:anywhere}