/* ==============================================================
   login.css — styles for login.php (Sign In / Create Account
   / OTP verify / Forgot Password / Reset Password)
   Brand palette: #C9A24B gold, #F4D58D highlight, #18110A dark
   ============================================================== */

.lg-wrap{
  min-height:calc(100vh - 220px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px clamp(16px,4vw,24px) 60px;
  background:linear-gradient(180deg, #fdf9ee 0%, #fff 60%);
}

.lg-card{
  width:100%;
  max-width:440px;
  background:#fff;
  border:1px solid #f1eee5;
  border-radius:20px;
  padding:34px 30px 30px;
  box-shadow:0 20px 60px rgba(15,23,42,.08), 0 6px 20px rgba(201,162,75,.06);
  position:relative;
}

.lg-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(135deg, rgba(201,162,75,.3), rgba(244,213,141,0) 50%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

/* Brand strip at top */
.lg-brand{
  text-align:center;
  margin-bottom:18px;
}
.lg-brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:linear-gradient(135deg,#C9A24B 0%,#F4D58D 50%,#C9A24B 100%);
  color:#18110A;
  font-family:'Playfair Display', Georgia, serif;
  font-size:22px;
  font-weight:700;
  margin-bottom:8px;
  box-shadow:0 6px 16px rgba(201,162,75,.3);
}
.lg-brand-name{
  font-family:'Playfair Display', Georgia, serif;
  font-size:1.25rem;
  color:#18110A;
  letter-spacing:.01em;
  font-weight:600;
}
.lg-brand-tag{
  font-size:.75rem;
  color:#888;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-top:2px;
}

/* Tabs (Sign In / Create Account) */
.lg-tabs{
  display:flex;
  background:#f7f2e4;
  border-radius:999px;
  padding:4px;
  margin-bottom:22px;
}
.lg-tab{
  flex:1;
  padding:10px 16px;
  text-align:center;
  border-radius:999px;
  cursor:pointer;
  color:#666;
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.03em;
  text-decoration:none;
  transition:background .18s, color .18s;
  border:0;
  background:transparent;
  font-family:inherit;
}
.lg-tab.active{
  background:#18110A;
  color:#F4D58D;
  box-shadow:0 4px 12px rgba(24,17,10,.25);
}
.lg-tab:not(.active):hover{color:#18110A}

/* Step header (for OTP / Forgot sub-views) */
.lg-step-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.lg-step-back{
  width:34px;height:34px;
  border-radius:50%;
  border:1px solid #e3ddd0;
  background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  color:#18110A;
  cursor:pointer;
  transition:background .15s,border-color .15s;
  text-decoration:none;
  flex-shrink:0;
}
.lg-step-back:hover{background:#faf5e8;border-color:#C9A24B}
.lg-step-title{
  font-family:'Playfair Display', Georgia, serif;
  font-size:1.35rem;
  color:#18110A;
  margin:0;
  flex:1;
}

.lg-title{
  font-family:'Playfair Display', Georgia, serif;
  font-size:1.5rem;
  color:#18110A;
  margin:0 0 6px;
  text-align:center;
}
.lg-subtitle{
  text-align:center;
  color:#777;
  font-size:.88rem;
  margin:0 0 22px;
  line-height:1.5;
}
.lg-subtitle strong{color:#18110A;font-weight:600}

/* Alerts */
.lg-alert{
  padding:11px 14px;
  border-radius:10px;
  font-size:.85rem;
  margin-bottom:16px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  line-height:1.45;
}
.lg-alert svg{flex-shrink:0;margin-top:2px}
.lg-alert-error{background:#fef2f2;color:#8b1d12;border:1px solid #fecaca}
.lg-alert-success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.lg-alert-info{background:#faf5e8;color:#8a6a1f;border:1px solid #e9dfbf}

/* Fields */
.lg-form{margin:0}
.lg-field{margin-bottom:14px}
.lg-field label{
  display:block;
  font-size:.78rem;
  color:#666;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:6px;
}
.lg-input-wrap{position:relative}
.lg-input-wrap svg.lg-icn{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:#C9A24B;
  pointer-events:none;
}
.lg-input{
  width:100%;
  height:48px;
  padding:0 14px 0 42px;
  border:1.5px solid #e3ddd0;
  border-radius:12px;
  background:#fff;
  font-size:.95rem;
  color:#18110A;
  font-family:inherit;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.lg-input:focus{border-color:#C9A24B;box-shadow:0 0 0 3px rgba(201,162,75,.15)}
.lg-input::placeholder{color:#b0aa9b}
.lg-input[readonly]{background:#fafafa;color:#666}

.lg-input-wrap.lg-no-icn .lg-input{padding-left:14px}

.lg-pw-toggle{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:0;
  color:#888;
  cursor:pointer;
  padding:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
}
.lg-pw-toggle:hover{color:#C9A24B;background:#faf5e8}

.lg-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:420px){.lg-row{grid-template-columns:1fr}}

/* OTP input styling */
.lg-otp-input{
  text-align:center;
  letter-spacing:8px;
  font-weight:700;
  font-size:1.1rem;
  font-family:'SF Mono', Menlo, monospace;
}

/* Inline helper text */
.lg-help{
  font-size:.78rem;
  color:#888;
  line-height:1.45;
  margin-top:6px;
}

/* Forgot password link */
.lg-forgot-row{
  display:flex;
  justify-content:flex-end;
  margin:-6px 0 14px;
}
.lg-forgot-link{
  font-size:.78rem;
  color:#8a6a1f;
  text-decoration:none;
  font-weight:500;
}
.lg-forgot-link:hover{color:#C9A24B;text-decoration:underline}

/* Primary CTA button */
.lg-btn{
  width:100%;
  height:52px;
  border:0;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.9rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:transform .15s, box-shadow .15s, background .15s;
  text-decoration:none;
  font-family:inherit;
  margin-top:6px;
}
.lg-btn-primary{background:#18110A;color:#F4D58D}
.lg-btn-primary:hover{background:#2a1d11;color:#fff;transform:translateY(-1px);box-shadow:0 8px 20px rgba(24,17,10,.25)}
.lg-btn-gold{background:linear-gradient(135deg,#C9A24B 0%,#F4D58D 50%,#C9A24B 100%);color:#18110A}
.lg-btn-gold:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(201,162,75,.3)}
.lg-btn[disabled],.lg-btn.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

/* Divider */
.lg-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0;
  color:#aaa;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.lg-divider::before,
.lg-divider::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, #e3ddd0, transparent);
}

/* Google button */
.lg-btn-google{
  width:100%;
  height:50px;
  border:1.5px solid #e3ddd0;
  border-radius:999px;
  background:#fff;
  color:#18110A;
  font-weight:600;
  font-size:.9rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .15s;
  font-family:inherit;
}
.lg-btn-google:hover{background:#faf5e8;border-color:#C9A24B;transform:translateY(-1px)}
.lg-btn-google svg{width:18px;height:18px;flex-shrink:0}

/* Footer link (e.g. "Don't have account?") */
.lg-foot{
  text-align:center;
  margin-top:18px;
  padding-top:18px;
  border-top:1px dashed #efe8d6;
  font-size:.85rem;
  color:#666;
}
.lg-foot a{color:#8a6a1f;font-weight:600;text-decoration:none}
.lg-foot a:hover{color:#C9A24B;text-decoration:underline}

/* Trust row */
.lg-trust{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:18px;
  padding-top:14px;
}
.lg-trust-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:.72rem;
  color:#888;
  letter-spacing:.02em;
}
.lg-trust-item svg{color:#C9A24B;flex-shrink:0}

/* Resend OTP countdown */
.lg-resend{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:10px 0 0;
  font-size:.82rem;
}
.lg-resend .lg-resend-wait{color:#888}
.lg-resend button{
  background:transparent;
  border:0;
  color:#8a6a1f;
  cursor:pointer;
  font-weight:600;
  font-family:inherit;
  font-size:inherit;
}
.lg-resend button:hover{color:#C9A24B;text-decoration:underline}
.lg-resend button[disabled]{color:#bbb;cursor:not-allowed}

/* Small note under password (strength / rules) */
.lg-pw-rules{
  font-size:.75rem;
  color:#888;
  margin-top:6px;
  line-height:1.4;
}

/* Terms text */
.lg-terms{
  font-size:.75rem;
  color:#888;
  text-align:center;
  line-height:1.5;
  margin-top:14px;
}
.lg-terms a{color:#8a6a1f;text-decoration:none}
.lg-terms a:hover{color:#C9A24B;text-decoration:underline}

/* Responsive */
@media (max-width:480px){
  .lg-wrap{padding:24px 14px 40px}
  .lg-card{padding:26px 22px 24px;border-radius:16px}
  .lg-title{font-size:1.35rem}
}