/* ======================================================================
   TradeBreak — Split Auth Layout (v9.7: astronaut with slogan, larger shift DOWN)
   - Adjusted background-position to show more of the BOTTOM (astronaut less cropped)
   - Uses WebP with PNG fallback
   ====================================================================== */

: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; /* larger shift DOWN */
    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%; }

  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; }
}

@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; }
}