/* ============================================================
   AUTH PAGE STYLES
   Shared styling for login, signup, verify, and signin pages.
   ============================================================ */

.split-wrap{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.4fr 1fr;
}

.split-visual{
  position:relative;
  background:linear-gradient(135deg,#2c2942 0%,#1e1e2c 100%);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:56px;
}

.split-visual canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.split-tag{
  position:absolute;
  top:36px;
  left:56px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#c8d5f6;
  z-index:2;
}

.split-tag .line{
  width:40px;
  height:2px;
  background:#c8d5f6;
}

.split-content{
  position:relative;
  z-index:2;
}

.split-content h2{
  font-family:'Schibsted Grotesk',sans-serif;
  font-size:52px;
  font-weight:700;
  line-height:1.05;
  color:#fff;
  margin-bottom:16px;
}

.split-content p{
  font-size:15px;
  font-weight:500;
  color:#d0cde0;
  line-height:1.7;
  max-width:420px;
}

.split-form-side{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f4f6fd;
  padding:40px;
}

.pw-wrap{
  position:relative;
}

.pw-wrap input{
  padding-right:46px;
}

.pw-toggle{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  background:none;
  border:none;
  padding:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#595571;
}

.pw-toggle:hover{color:#6a6683}

.pw-toggle svg{width:20px;height:20px}

.form-row-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
  margin-top:-6px;
}

.remember-check{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
}

.remember-check input{display:none}

.check-box{
  width:18px;
  height:18px;
  border:1px solid #e4e8f4;
  border-radius:4px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .15s;
}

.check-box svg{
  width:12px;
  height:12px;
  opacity:0;
  transition:opacity .1s;
}

.remember-check input:checked + .check-box{background:#c8d5f6}
.remember-check input:checked + .check-box svg{opacity:1}

.remember-label{
  font-size:13px;
  font-weight:700;
  color:#2c2942;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.forgot-link{
  font-size:13px;
  font-weight:700;
  color:#2c2942;
  text-decoration:underline;
  text-decoration-color:#c8d5f6;
}

/* ---------- SOCIAL SIGN-IN ---------- */
.auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:22px 0 16px;
}

.auth-divider::before,
.auth-divider::after{
  content:'';
  flex:1;
  height:2px;
  background:#e9edf7;
}

.auth-divider span{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#a9a5bd;
}

.social-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:13px;
  margin-bottom:10px;
  background:#fff;
  border:1px solid #e4e8f4;
  border-radius:12px;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#2c2942;
  text-decoration:none;
  transition:transform .15s,box-shadow .15s;
}

.social-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(58,66,120,.10);
}

.auth-wrap--compact{
  min-height:auto;
  padding:0;
}

.code-input{
  font-size:24px;
  letter-spacing:8px;
  text-align:center;
}

.auth-switch--compact{
  margin-top:8px;
}

@media(max-width:768px){
  .split-wrap{grid-template-columns:1fr}
  .split-visual{display:none}
}