/* Baltrix – Brand Enhancement Pack
   Uses existing dark + gold arena theme and adds:
   - Hero background + watermark (non-breaking via pseudo-elements)
   - Login logo uses brand mark
   - Premium styling for language switcher (RO/EN)
*/

:root{
  --bx-gold-1: #f0d78a;
  --bx-gold-2: #d8b86a;
  --bx-gold-3: #b98c2d;
  --bx-ink-0:  #050814;
  --bx-ink-1:  #0a0f1f;
  --bx-ink-2:  #0f172a;
  --bx-glow-gold: 0 0 0 1px rgba(240, 215, 138, .16), 0 12px 40px rgba(216, 184, 106, .10);
}

/* ============ Background system (safe overlays) ============ */
body.bg,
body.bx-login-body,
body.training{
  position: relative;
  isolation: isolate; /* ensures negative z-index pseudos stay behind */
  overflow-x: hidden;
}

body.bg::before,
body.bx-login-body::before,
body.training::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 50% -220px, rgba(78,93,163,.22), transparent 55%),
    radial-gradient(900px 700px at 85% 15%, rgba(216,184,106,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.18)),
    url("./hero.webp");
  background-size: cover;
  background-position: center;
  filter: saturate(1.06) contrast(1.03);
  transform: translate3d(var(--wm-x,0px), var(--wm-y,0px), 0) scale(1.02);
  will-change: transform;
  transform-origin: 90% 28%;
}

body.bg::after,
body.bx-login-body::after,
body.training::after{
  content:"";
  position: fixed;
  inset: -2%;
  z-index: -2;
  pointer-events: none;
  background-image: url("./watermark.clean.webp");
  background-repeat: no-repeat;
  background-position: 90% 28%;
  background-size: min(68vw, 940px);
  opacity: .11;
  filter: blur(.2px);
  transform: translate3d(var(--wm-x,0px), var(--wm-y,0px), 0) scale(1.02);
  will-change: transform;
  transform-origin: 90% 28%;
}

/* Keep content readable by adding subtle vignette on very wide screens */
@media (min-width: 1100px){
  body.bg::after,
  body.bx-login-body::after,
  body.training::after{
    opacity: .10;
  }
}

/* ============ Login logo upgrades (no HTML changes needed) ============ */
.bx-login-logo-circle{
  background-image: url("./logo-64.png");
  background-size: 135%;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent !important;
  text-shadow: none !important;
  border: 1px solid rgba(240,215,138,.18);
  box-shadow: var(--bx-glow-gold);
}

/* Make primary action a bit more “premium” */
.bx-button-primary{
  box-shadow: 0 0 0 1px rgba(240,215,138,.18), 0 18px 45px rgba(0,0,0,.45);
}
.bx-button-primary:hover{
  box-shadow: 0 0 0 1px rgba(240,215,138,.26), 0 22px 55px rgba(0,0,0,.55);
}

/* ============ Language switcher (i18n widget) ============ */
#bx-lang-widget{
  margin-left: 10px;
}

#bx-lang-btn{
  border-radius: 999px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  background: rgba(2,6,23,.52) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#bx-lang-btn:hover{
  border-color: rgba(240,215,138,.22) !important;
  box-shadow: 0 0 0 1px rgba(240,215,138,.12), 0 14px 40px rgba(0,0,0,.42);
}

#bx-lang-menu{
  border: 1px solid rgba(148,163,184,.16) !important;
  background: rgba(2,6,23,.78) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.6) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#bx-lang-menu button[aria-checked="true"]{
  border-color: rgba(240,215,138,.35) !important;
  box-shadow: 0 0 0 1px rgba(240,215,138,.12), 0 14px 35px rgba(0,0,0,.45) !important;
}

/* Optional: gold hairline at top to “anchor” the UI */
header.topbar::after{
  content:"";
  display:block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,215,138,.35), transparent);
  opacity: .45;
}