/* ======================================================================
   TradeBreak — Split Auth Layout (v9.9: astronaut with slogan + centered header)
   - Based on v9.7 with background-position at 35%
   - Centered the "Log In to Your Account" header inside the login card
   ====================================================================== */

:root {
  --tb-split-radius: 24px;
  --tb-split-gap: 16px;
}

body.body-auth {
  background:#ffffff;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
body.body-auth #react-view {
  position:relative;
  z-index:1;
  background:transparent !important;
}

@media (min-width:1024px){
  body.body-auth::before{
    content:"";
    position:fixed;
    top:var(--tb-split-gap);
    left:var(--tb-split-gap);
    bottom:var(--tb-split-gap);
    width:calc(50vw - (var(--tb-split-gap) * 1.5));
    border-radius:var(--tb-split-radius);
    background-image: url("https://tradebreak.com/assets/css/authtbimg-v9-2000.webp");
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 50% 35% !important;
    background-color:#000;
    box-shadow:0 12px 36px rgba(15,23,42,.18);
    pointer-events:none;
    z-index:0;
  }

  @supports not (background-image: url("image.webp")) {
    body.body-auth::before {
      background-image: url("https://tradebreak.com/assets/css/authtbimg-v9-2000.png");
      background-repeat: no-repeat !important;
      background-size: cover !important;
      background-position: 50% 35% !important;
    }
  }

  body.body-auth #react-view{
    margin-left:50vw;
    min-height:calc(100vh - (var(--tb-split-gap) * 2));
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(24px,4vw,56px) clamp(20px,4vw,72px);
    box-sizing:border-box;
  }
  body.body-auth #react-view > *{
    max-width:520px;
    width:100%;
  }

  /* Clean up logo area */
  body.body-auth .layout-login,
  body.body-auth .layout-login *:where(.logo-host){ background:transparent !important; }
  body.body-auth .layout-login::before,
  body.body-auth .layout-login::after{ content:none !important; display:none !important; }
  body.body-auth .logo-auth{ background:transparent !important; box-shadow:none !important; }

  /* Center the login card header */
  body.body-auth .layout-title {
    text-align: center;
    width: 100%;
    display: block;
    margin: 0 auto 16px;
    font-size: 22px;
    font-weight: 700;
    color: #122957;
  }
}

@media (max-width:1023.98px){
  body.body-auth::before{ display:none; }
  body.body-auth #react-view{
    margin-left:0 !important;
    padding:0 !important;
    min-height:auto !important;
    display:block !important;
  }
  body.body-auth #react-view > *{
    max-width:none !important;
    width:auto !important;
  }
}