@import 'vars.css';

body { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg,#FFF3E8 0%,#FFE0C0 100%); padding:1rem; }

.login-card {
  display:flex; width:100%; max-width:860px;
  background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 16px 48px rgba(255,107,0,.15);
  min-height:520px;
}

/* Left */
.login-left {
  width:42%; background:linear-gradient(150deg,#FF6B00 0%,#E05500 60%,#C04400 100%);
  padding:3rem 2.5rem; display:flex; flex-direction:column;
  justify-content:center; color:#fff;
}
.temple-icon { font-size:3.5rem; margin-bottom:1rem; }
.login-left h2 { font-size:1.6rem; font-weight:800; margin-bottom:.4rem; }
.tagline { opacity:.85; margin-bottom:2rem; font-size:1.05rem; }
.features { display:flex; flex-direction:column; gap:.7rem; }
.feature-item { display:flex; align-items:center; gap:.6rem; font-size:.9rem; opacity:.9; }

/* Right */
.login-right { flex:1; padding:3rem 2.5rem; display:flex; flex-direction:column; justify-content:center; }
.login-right h3 { font-size:1.5rem; font-weight:800; margin-bottom:.25rem; }
.sub { color:var(--text-muted); margin-bottom:1.5rem; font-size:.9rem; }

.error-box {
  display:none; background:var(--red-light); border:1px solid #FECACA;
  color:var(--red); padding:.7rem 1rem; border-radius:8px;
  margin-bottom:1rem; font-size:.88rem; font-weight:500;
}

.input-group { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.input-group label { font-size:.8rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }
.input-icon-wrap { position:relative; }
.input-icon-wrap .icon { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); font-size:1rem; pointer-events:none; }
.input-icon-wrap input { padding-left:2.5rem; }
.toggle-eye { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); cursor:pointer; font-size:1rem; }

.btn-login {
  width:100%; padding:.85rem; margin-top:.5rem;
  background:linear-gradient(135deg,#FF6B00,#E05500);
  color:#fff; border:none; border-radius:10px;
  font-size:1rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  transition:opacity .2s, transform .15s;
}
.btn-login:hover { opacity:.92; transform:translateY(-1px); }
.btn-login:disabled { opacity:.65; transform:none; }

.login-footer { text-align:center; margin-top:1.25rem; font-size:.88rem; color:var(--text-muted); }
.login-footer a { color:var(--saffron); font-weight:600; text-decoration:none; }
.login-footer a:hover { text-decoration:underline; }

@media(max-width:640px) {
  .login-card { flex-direction:column; }
  .login-left { width:100%; padding:2rem 1.5rem; }
  .login-right { padding:2rem 1.5rem; }
}