/* ============================================================
   WBR auth — premium split-screen for login / register / OTP.
   Loaded ONLY by client_v2/layouts/auth.php (auth pages),
   so it never touches the in-app screens.
   Left  : deep-green brand panel (logo + trust points).
   Right : clean white sign-in card. Stacks on mobile.
   ============================================================ */

.wbr-auth-body{
  margin:0;
  min-height:100vh;
  background:var(--wbr-page);
}

.wbr-auth-split{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  min-height:100vh;
}

/* ---------- LEFT: brand panel ---------- */
.wbr-auth-brand{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:54px 56px;
  color:#fff;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(124,201,106,.34), transparent 60%),
    radial-gradient(820px 620px at 8% 112%, rgba(20,122,0,.40), transparent 58%),
    linear-gradient(150deg, #155416 0%, #0f3d10 56%, #0c310d 100%);
}
/* faint botanical glow rings, purely decorative */
.wbr-auth-brand::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 84% 22%, rgba(255,255,255,.06) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 30%, rgba(255,255,255,.05) 0 1px, transparent 2px);
  pointer-events:none;
}

.wbr-auth-brand-inner{ position:relative; z-index:1; max-width:430px; }

.wbr-auth-tagline{
  font-size:30px;
  line-height:1.18;
  font-weight:700;
  letter-spacing:-.01em;
  margin:0 0 14px;
}
.wbr-auth-sub{
  font-size:15px;
  line-height:1.6;
  color:rgba(255,255,255,.82);
  margin:0 0 30px;
}

.wbr-auth-points{ list-style:none; margin:0; padding:0; display:grid; gap:15px; }
.wbr-auth-points li{
  display:flex; align-items:center; gap:13px;
  font-size:14.5px; color:rgba(255,255,255,.92);
}
.wbr-auth-points i{
  flex:none;
  width:38px; height:38px;
  display:grid; place-items:center;
  font-size:19px;
  border-radius:11px;
  color:#d7f3cc;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
}

.wbr-auth-brand-foot{
  position:relative; z-index:1;
  font-size:12.5px;
  color:rgba(255,255,255,.62);
}

/* ---------- RIGHT: form column ---------- */
.wbr-auth-form-col{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 28px;
  background:var(--wbr-card);
}
.wbr-auth-theme{
  position:absolute; top:18px; right:18px;
}

.wbr-auth-form-card{
  width:100%;
  max-width:372px;
}

/* logo sits centered above the form heading on all screen sizes (form side, on white) */
.wbr-auth-formlogo{ display:block; text-align:center; margin-bottom:20px; }
.wbr-auth-formlogo img{ display:inline-block; height:48px; width:auto; }

.wbr-auth-head{ margin-bottom:22px; text-align:center; }
.wbr-auth-head h1{
  font-size:23px; font-weight:700; letter-spacing:-.01em;
  margin:0 0 6px; color:var(--wbr-text);
}
.wbr-auth-head p{ margin:0; font-size:14px; color:var(--wbr-muted); }

/* slightly larger, calmer inputs/buttons on the auth screens */
.wbr-auth-form-card .wbr-input{ height:46px; font-size:15px; }
.wbr-auth-form-card .wbr-btn-block{ height:48px; font-size:15px; font-weight:600; }

.wbr-auth-foot{
  text-align:center; margin-top:22px; padding-top:18px;
  border-top:1px solid var(--wbr-border);
  font-size:13px; color:var(--wbr-muted);
}
.wbr-auth-foot a{ color:var(--wbr-brand); font-weight:600; text-decoration:none; }
.wbr-auth-foot a:hover{ text-decoration:underline; }

/* ---------- responsive ---------- */
@media (max-width:880px){
  .wbr-auth-split{ grid-template-columns:1fr; }
  .wbr-auth-brand{ display:none; }
  .wbr-auth-form-col{ min-height:100vh; padding:34px 22px; }
}