/* ==========================================================================
   VasthuWalk — Login page  (uses tokens from styles.css)
   ========================================================================== */

.login-body{background:var(--cream);overflow-x:hidden;}

.auth{display:grid;grid-template-columns:1fr 1fr;min-height:100svh;}

/* ---------- left: form ---------- */
.auth-form-side{
  position:relative;display:flex;flex-direction:column;
  padding:2.2rem clamp(1.5rem,5vw,4.5rem);
  background:linear-gradient(180deg,#fffaf0,var(--cream));
}
.back-link{
  display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  font-size:.9rem;font-weight:600;color:var(--muted);
  padding:.5rem .9rem;border-radius:100px;border:1px solid transparent;transition:.25s var(--t);
}
.back-link:hover{color:var(--brown);border-color:#e6d5b0;background:#fff;}

.auth-box{
  width:100%;max-width:26rem;margin:auto;padding:1.5rem 0;
  animation:rise .6s var(--t) both;
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.auth-logo{width:150px;margin-bottom:1.8rem;}
.auth-box h1{font-size:clamp(1.9rem,3vw,2.4rem);margin-bottom:.5rem;color:var(--ink);}
.auth-sub{color:var(--muted);font-size:.98rem;margin-bottom:2rem;}

/* fields */
.auth-fields{display:flex;flex-direction:column;gap:1.15rem;}
.field label{display:block;font-size:.87rem;font-weight:600;color:var(--brown);margin-bottom:.45rem;}
.input-wrap{
  position:relative;display:flex;align-items:center;
  background:#fff;border:1.5px solid #e6d5b0;border-radius:14px;
  transition:border-color .22s var(--t),box-shadow .22s var(--t);
}
.input-wrap:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.16);}
.input-wrap.invalid{border-color:#c0492f;box-shadow:0 0 0 4px rgba(192,73,47,.1);}
.input-wrap .ico{width:19px;height:19px;margin-left:1rem;color:#b39b74;flex:none;}
.input-wrap input{
  flex:1;border:0;outline:0;background:transparent;
  padding:.95rem 1rem;font-family:var(--f-body);font-size:1rem;color:var(--ink);min-width:0;
}
.input-wrap input::placeholder{color:#bcac93;}
.peek{
  background:none;border:0;cursor:pointer;color:#b39b74;padding:.55rem;margin-right:.45rem;
  border-radius:8px;display:grid;place-items:center;transition:.2s;
}
.peek svg{width:19px;height:19px;}
.peek:hover{color:var(--brown);background:#f6ecd8;}
.peek.on{color:var(--gold-dk);}
.err{display:block;min-height:1.05rem;font-size:.8rem;color:#c0492f;margin-top:.32rem;}

/* row */
.field-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:-.35rem;}
.check{display:inline-flex;align-items:center;gap:.55rem;font-size:.9rem;color:var(--muted);cursor:pointer;user-select:none;}
.check input{position:absolute;opacity:0;width:0;height:0;}
.check .box{
  width:20px;height:20px;border-radius:6px;border:1.5px solid #d9c69f;background:#fff;
  display:grid;place-items:center;transition:.22s var(--t);flex:none;
}
.check .box svg{width:12px;height:12px;color:#3a2410;opacity:0;transform:scale(.5);transition:.22s var(--t);}
.check input:checked + .box{background:var(--gg);border-color:transparent;}
.check input:checked + .box svg{opacity:1;transform:none;}
.check input:focus-visible + .box{box-shadow:0 0 0 4px rgba(201,162,39,.25);}
.forgot{font-size:.9rem;font-weight:600;color:var(--gold-dk);}
.forgot:hover{text-decoration:underline;}

/* submit */
.auth-submit{margin-top:.6rem;position:relative;}
.spin{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(58,36,16,.3);border-top-color:#3a2410;animation:sp .7s linear infinite;}
@keyframes sp{to{transform:rotate(360deg)}}
.sending .spin{display:block;}
.sending .label{opacity:.75;}
.sending .auth-submit{pointer-events:none;}

.secure-note{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  margin-top:1.5rem;font-size:.82rem;color:#a9967a;
}

/* social block */
.auth-social{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line);text-align:center;}
.auth-social > span{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#a9967a;margin-bottom:.9rem;font-weight:600;}

.auth-foot{text-align:center;font-size:.82rem;color:#a9967a;padding-top:1rem;}

/* ---------- right: brand panel ---------- */
.auth-brand-side{
  position:relative;overflow:hidden;color:#f3e7d2;
  background:radial-gradient(800px 700px at 70% 15%,#4a2d13,var(--espresso) 68%);
  display:flex;align-items:center;justify-content:center;padding:3rem;
}
.ab-glow{
  position:absolute;width:760px;height:760px;right:-230px;top:-260px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,200,116,.22),transparent 62%);
  animation:float 15s ease-in-out infinite;
}
.ab-inner{position:relative;z-index:2;text-align:center;max-width:26rem;}
.ab-compass{filter:drop-shadow(0 8px 18px rgba(180,140,40,.4));margin-bottom:1.4rem;}
.ab-inner h2{font-size:clamp(1.9rem,2.7vw,2.6rem);color:#fbf1de;margin-bottom:1rem;line-height:1.15;}
.ab-inner p{color:#d8c39c;font-size:1rem;margin-bottom:2rem;}
.ab-stats{display:flex;justify-content:center;gap:2rem;padding-block:1.4rem;border-block:1px solid rgba(232,200,116,.2);margin-bottom:2rem;}
.ab-stats b{display:block;font-family:var(--f-display);font-size:1.5rem;background:var(--gg);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ab-stats span{font-size:.78rem;color:#b39b74;}
.ab-phone{width:min(230px,60%);margin-inline:auto;filter:drop-shadow(0 26px 50px rgba(0,0,0,.6));animation:bob 6s ease-in-out infinite;}

/* ==========================================================================
   Social icons (shared with the main site footer)
   ========================================================================== */
.social{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;}
.s-ico{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(160,120,50,.09);border:1px solid #e6d5b0;color:var(--brown);
  transition:transform .25s var(--t),background .25s var(--t),color .25s var(--t),border-color .25s var(--t);
}
.s-ico svg{width:18px;height:18px;}
.s-ico:hover{transform:translateY(-4px);color:#fff;border-color:transparent;}
.s-ico.fb:hover{background:#1877f2;}
.s-ico.ig:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);}
.s-ico.x:hover{background:#000;}
.s-ico.yt:hover{background:#ff0000;}
.s-ico.li:hover{background:#0a66c2;}
.s-ico.wa:hover{background:#25d366;}

/* dark contexts (site footer, CTA band, dark sections) */
.ftr .s-ico,
.cta .s-ico,
.sec-dark .s-ico,
.auth-brand-side .s-ico{
  background:rgba(255,255,255,.07);
  border-color:rgba(232,200,116,.34);
  color:var(--gold-lt);
}

/* ==========================================================================
   Responsive — desktop / tablet / mobile
   ========================================================================== */

/* tablet & below: stack, brand panel becomes a compact banner */
@media (max-width:1024px){
  .auth{grid-template-columns:1fr;}
  .auth-brand-side{order:-1;padding:2.6rem 2rem;min-height:auto;}
  .ab-inner{max-width:34rem;}
  .ab-phone{display:none;}
  .ab-inner h2{font-size:1.75rem;}
  .ab-inner p{margin-bottom:1.4rem;font-size:.95rem;}
  .ab-stats{margin-bottom:0;gap:2.4rem;}
  .auth-form-side{padding-block:2rem 2.5rem;}
  .auth-box{margin-top:1rem;}
}

@media (max-width:600px){
  .auth-brand-side{padding:2rem 1.25rem;}
  .ab-compass{width:62px;height:62px;margin-bottom:1rem;}
  .ab-inner h2{font-size:1.45rem;}
  .ab-inner p{display:none;}
  .ab-stats{gap:1.5rem;padding-block:1rem;}
  .ab-stats b{font-size:1.2rem;}
  .auth-logo{width:125px;margin-bottom:1.4rem;}
  .auth-box h1{font-size:1.65rem;}
  .auth-sub{font-size:.92rem;margin-bottom:1.5rem;}
  .field-row{gap:.6rem;}
  .s-ico{width:36px;height:36px;}
  .s-ico svg{width:16px;height:16px;}
}

@media (prefers-reduced-motion:reduce){
  .auth-box,.ab-glow,.ab-phone{animation:none!important;}
}