/* ============================================================
   Threeni auth pages — buyer & vendor login (split screen)
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
body.auth-body{font-family:Inter,-apple-system,'Segoe UI',Arial,sans-serif;background:#f7f9fc;color:#182036;min-height:100vh}
a{text-decoration:none;color:inherit}

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

/* ---------- visual panel ---------- */
.auth-visual{position:relative;color:#fff;padding:48px 54px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  background:linear-gradient(135deg,#0b1638,#12225b 60%,#1c3477)}
.auth-visual::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;opacity:.6}
.auth-visual .bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22}
.auth-visual .inner{position:relative;z-index:2;max-width:480px}
.auth-brand{display:inline-flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.16em;font-size:.95rem;margin-bottom:34px}
.auth-brand .dot{width:9px;height:9px;border-radius:50%;background:#ff8833;box-shadow:0 0 0 5px rgba(255,136,51,.18)}
.auth-visual h1{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:900;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px}
.auth-visual h1 span{color:#ff8833}
.auth-visual > .inner > p{color:rgba(255,255,255,.78);line-height:1.7;font-size:.96rem;margin-bottom:26px}
.auth-points{list-style:none;display:grid;gap:13px}
.auth-points li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:rgba(255,255,255,.9)}
.auth-points i{color:#7dd56c;margin-top:3px;font-size:.8rem}
.auth-back{position:absolute;top:34px;left:54px;z-index:3;display:inline-flex;align-items:center;gap:8px;
  font-size:.82rem;font-weight:700;color:rgba(255,255,255,.75);background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);padding:8px 14px;border-radius:30px;transition:.2s}
.auth-back:hover{background:rgba(255,255,255,.18);color:#fff}

/* ---------- form panel ---------- */
.auth-form-wrap{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:#fff}
.auth-card{width:100%;max-width:420px}
.auth-role{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#e62e04;background:rgba(230,46,4,.08);padding:7px 14px;border-radius:30px;margin-bottom:16px}
.auth-card h2{font-size:1.65rem;font-weight:900;letter-spacing:-.02em;margin-bottom:8px;color:#12225b}
.auth-card .sub{color:#687385;font-size:.92rem;margin-bottom:26px;line-height:1.6}

.auth-field{margin-bottom:16px}
.auth-field label{display:block;font-size:.82rem;font-weight:700;color:#33405a;margin-bottom:7px}
.auth-input{position:relative}
.auth-input i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#9aa3b5;font-size:.9rem}
.auth-input input{width:100%;height:50px;border:1.5px solid #e3e7f1;border-radius:12px;padding:0 15px 0 42px;
  font-size:.94rem;font-family:inherit;color:#182036;background:#fff;outline:none;transition:.18s}
.auth-input input:focus{border-color:#12225b;box-shadow:0 0 0 3px rgba(18,34,91,.10)}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 20px;font-size:.84rem}
.auth-row label{display:flex;align-items:center;gap:8px;color:#4a5568;font-weight:600;cursor:pointer}
.auth-row input[type=checkbox]{width:16px;height:16px;accent-color:#e62e04}
.auth-row a{color:#e62e04;font-weight:700}
.auth-submit{width:100%;height:50px;border:none;border-radius:12px;background:#e62e04;color:#fff;font-size:.96rem;
  font-weight:800;cursor:pointer;transition:.18s;font-family:inherit}
.auth-submit:hover{background:#c42600;transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(230,46,4,.6)}
.auth-error{background:#fff1f0;border:1px solid #ffc9c4;color:#b42318;font-size:.82rem;line-height:1.5;
  padding:11px 14px;border-radius:10px;margin-bottom:16px}
.auth-switch{margin-top:22px;padding-top:20px;border-top:1px solid #eef1f7;font-size:.88rem;color:#687385;text-align:center}
.auth-switch a{color:#12225b;font-weight:800}
.auth-signup{margin-top:12px;font-size:.86rem;color:#687385;text-align:center}
.auth-signup a{color:#e62e04;font-weight:800}
.auth-note{margin-top:20px;background:#f6f8fc;border:1px solid #e8edf7;border-radius:12px;padding:13px 15px;
  font-size:.78rem;line-height:1.6;color:#5b6478}
.auth-note b{color:#12225b}

@media(max-width:900px){
  .auth-split{grid-template-columns:1fr}
  .auth-visual{display:none}
  .auth-form-wrap{min-height:100vh;padding:32px 20px}
  .auth-back{position:static;margin-bottom:20px;color:#12225b;background:#eef1f7;border-color:#e3e7f1}
}

/* keep each column inside the viewport; only the form column scrolls if needed */
@media (min-width: 901px) {
  .auth-split { height: 100vh; min-height: 100vh; overflow: hidden }
  .auth-visual, .auth-form-wrap { height: 100vh; overflow-y: auto }
  .auth-card { margin: auto }
  .auth-form-wrap { align-items: center }
}
@media (min-width: 901px) and (max-height: 860px) {
  .auth-visual { padding: 34px 46px }
  .auth-brand { margin-bottom: 20px }
  .auth-visual > .inner > p { margin-bottom: 18px }
  .auth-points { gap: 9px }
  .auth-card h2 { font-size: 1.45rem }
  .auth-card .sub { margin-bottom: 18px }
  .auth-note { margin-top: 14px }
}

@media (min-width: 901px) and (max-height: 700px) {
  .auth-form-wrap { padding: 22px 24px }
  .auth-card h2 { font-size: 1.32rem }
  .auth-card .sub { margin-bottom: 14px; font-size: .87rem }
  .auth-field { margin-bottom: 12px }
  .auth-row { margin: 2px 0 14px }
  .auth-switch { margin-top: 14px; padding-top: 14px }
  .auth-signup { margin-top: 8px }
  .auth-note { margin-top: 10px; padding: 10px 13px; font-size: .75rem }
  .auth-submit { height: 46px }
  .auth-input input { height: 46px }
}