/* ===== elsashopping auth — dadvam-style + brand ===== */
:root{
  --auth-bg:#f6f3ed;
  --auth-card:#fff;
  --auth-ink:#1c1a16;
  --auth-muted:#8a847a;
  --auth-gold:#e9a93c;
  --auth-gold-dark:#c88f2a;
  --auth-cream:#fdf6e8;
  --auth-border:#ece7dd;
  --auth-danger:#c0392b;
  --auth-success:#2d7a4f;
  --auth-radius-lg:16px;
  --auth-radius-md:12px;
  --auth-shadow-card:0 20px 60px rgba(150,120,60,.10),0 4px 16px rgba(233,169,60,.06);
  --auth-shadow-btn:0 8px 24px rgba(233,169,60,.28);
  --auth-transition:.25s cubic-bezier(.4,0,.2,1);
}

.auth-page{
  position:relative;
  background:var(--auth-bg);
  padding:3rem 0 4rem;
  overflow:hidden;
}

/* background blobs */
.auth-background{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.auth-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.38;animation:blobFloat 12s ease-in-out infinite alternate}
.auth-blob--gold{width:380px;height:380px;background:var(--auth-gold);top:-100px;left:-60px}
.auth-blob--cream{width:320px;height:320px;background:#f3dfb2;bottom:-80px;right:-50px;animation-delay:-4s}
@keyframes blobFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(20px,16px) scale(1.05)}}

/* layout */
.auth-wrapper{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:1.5rem 1rem;
}
.auth-card{
  width:100%;max-width:400px;
  background:var(--auth-card);
  border-radius:var(--auth-radius-lg);
  box-shadow:var(--auth-shadow-card);
  padding:2rem 1.75rem 1.75rem;
  border:1px solid rgba(236,231,221,.9);
}
.auth-footer-text{margin:1.25rem 0 0;font-size:.8125rem;color:var(--auth-muted);text-align:center}

.fade-in{animation:fadeInUp .45s ease}
@keyframes fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* logo */
.auth-logo{display:flex;justify-content:center;margin-bottom:1.5rem;color:inherit}
.auth-logo:hover{opacity:.92;color:inherit}
.auth-logo__mark{
  width:72px;height:72px;
  display:flex;align-items:center;justify-content:center;
  font-size:36px;
  background:linear-gradient(145deg,#fff8ec,#fff);
  border:1px solid var(--auth-border);
  border-radius:18px;
  box-shadow:0 10px 24px rgba(233,169,60,.14);
  transition:transform var(--auth-transition);
}
.auth-logo:hover .auth-logo__mark{transform:scale(1.04)}

/* typography */
.auth-title{margin:0 0 .5rem;font-size:1.5rem;font-weight:800;color:var(--auth-ink);text-align:center;line-height:1.4}
.auth-subtitle{margin:0 0 1.75rem;font-size:.9375rem;color:var(--auth-muted);text-align:center;line-height:1.75}
.auth-mobile-display{display:inline-block;direction:ltr;font-weight:700;color:var(--auth-gold-dark);margin-top:.35rem}

/* steps */
.auth-step{display:none}
.auth-step.is-active{display:block;animation:fadeInUp .35s ease}

/* form */
.form-label{font-size:.875rem;font-weight:600;color:var(--auth-ink);margin-bottom:.5rem}
.form-text{font-size:.8125rem;color:var(--auth-muted);margin-top:.5rem}

.input-group-custom{position:relative}
.input-group-custom .form-control{
  padding-inline-start:2.75rem;padding-inline-end:1rem;
  height:52px;border-radius:var(--auth-radius-md);
  border:1.5px solid var(--auth-border);
  font-size:1rem;font-family:inherit;
  direction:ltr;text-align:left;
  background:#faf7f1;
  transition:border-color var(--auth-transition),box-shadow var(--auth-transition),background var(--auth-transition);
  box-shadow:none!important;
}
.input-group-custom .form-control::placeholder{color:#b5aea3;font-family:inherit}
.input-group-custom .form-control:hover{border-color:#ddd4c4;background:#fff}
.input-group-custom .form-control:focus{
  border-color:var(--auth-gold);
  box-shadow:0 0 0 4px rgba(233,169,60,.14);
  background:#fff;
}
.input-group-custom .input-icon{
  position:absolute;inset-inline-start:1rem;top:50%;
  transform:translateY(-50%);
  color:var(--auth-gold);pointer-events:none;z-index:2;
}
.input-group-custom .input-validity{
  position:absolute;inset-inline-end:1rem;top:50%;
  transform:translateY(-50%);
  display:none;color:var(--auth-danger);pointer-events:none;z-index:2;
}
.input-group-custom.is-error .form-control,
.input-field.is-error .form-control{
  border-color:var(--auth-danger);background:#fff8f8;padding-inline-end:2.75rem;
}
.input-group-custom.is-error .form-control:focus{border-color:var(--auth-danger);box-shadow:0 0 0 4px rgba(192,57,43,.1)}
.input-group-custom.is-error .input-icon{color:#c9a0a5}
.input-group-custom.is-error .input-validity,
.input-field.is-error .input-validity{display:flex}
.invalid-feedback{display:none;font-size:.8125rem;margin-top:.5rem;color:var(--auth-danger);font-weight:500}
.input-field.is-error .invalid-feedback{display:block;animation:fadeInUp .3s ease}

/* button */
.btn-primary-gradient{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;min-height:52px;padding:.75rem 1.25rem;
  border:none;border-radius:var(--auth-radius-md);
  background:linear-gradient(135deg,var(--auth-ink) 0%,#3a3428 40%,var(--auth-gold) 100%);
  background-size:200% 200%;
  color:#fff!important;font-size:1rem;font-weight:600;
  cursor:pointer;box-shadow:var(--auth-shadow-btn);
  transition:transform var(--auth-transition),box-shadow var(--auth-transition),background-position .4s ease,opacity var(--auth-transition);
}
.btn-primary-gradient:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(233,169,60,.38);
  background-position:100% 50%;color:#fff!important;
}
.btn-primary-gradient:active:not(:disabled){transform:translateY(0)}
.btn-primary-gradient:disabled{opacity:.65;cursor:not-allowed;transform:none}
.btn-primary-gradient .btn-arrow{flex-shrink:0}

.btn-link-custom{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  width:100%;min-height:44px;margin-top:.75rem;
  padding:.5rem 1rem;border:none;border-radius:var(--auth-radius-md);
  background:transparent;color:var(--auth-gold-dark);
  font-size:.9375rem;font-weight:600;cursor:pointer;
  transition:background var(--auth-transition),color var(--auth-transition),opacity var(--auth-transition);
}
.btn-link-custom:hover:not(:disabled){background:rgba(233,169,60,.1);color:var(--auth-ink)}
.btn-link-custom:disabled{color:var(--auth-muted);cursor:not-allowed;opacity:.85}
.resend-timer{font-variant-numeric:tabular-nums;min-width:3.2em}

.edit-mobile-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  border:none;background:transparent;
  font-size:.8125rem;color:var(--auth-muted);cursor:pointer;padding:0;
  transition:color var(--auth-transition);
}
.edit-mobile-btn:hover{color:var(--auth-gold-dark)}

/* OTP */
.otp-group{display:flex;justify-content:center;gap:.5rem;margin-bottom:1.5rem;direction:ltr}
.otp-input{
  width:46px;height:54px;padding:0;
  border:1.5px solid var(--auth-border);border-radius:var(--auth-radius-md);
  background:#faf7f1;text-align:center;
  font-size:1.375rem;font-weight:700;font-family:inherit;color:var(--auth-ink);
  transition:border-color var(--auth-transition),box-shadow var(--auth-transition),transform var(--auth-transition),background var(--auth-transition);
  caret-color:var(--auth-gold);
}
.otp-input:hover{border-color:#ddd4c4;background:#fff}
.otp-input:focus{
  outline:none;border-color:var(--auth-gold);
  box-shadow:0 0 0 4px rgba(233,169,60,.14);
  background:#fff;transform:translateY(-2px);
}
.otp-input.filled{border-color:var(--auth-gold);background:rgba(233,169,60,.06)}
.otp-input.shake{animation:shake .4s ease}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-4px)}
  40%{transform:translateX(4px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)}
}

/* alerts */
.auth-alert{
  border-radius:var(--auth-radius-md);
  padding:.875rem 1rem;font-size:.875rem;font-weight:500;
  margin-bottom:1.25rem;animation:fadeInUp .35s ease;
}
.auth-alert.is-error{background:rgba(192,57,43,.1);color:#922b21;border-inline-start:4px solid var(--auth-danger)}
.auth-alert.is-success{background:rgba(45,122,79,.1);color:#1e5c38;border-inline-start:4px solid var(--auth-success)}

@media(max-width:575.98px){
  .auth-page{padding:2rem 0 3rem}
  .auth-wrapper{padding:1rem .75rem}
  .auth-card{padding:1.75rem 1.25rem 1.5rem;max-width:100%}
  .auth-title{font-size:1.3rem}
  .otp-input{width:42px;height:50px;font-size:1.25rem}
  .otp-group{gap:.4rem}
}

@media(min-width:576px){
  .auth-card{padding:2.25rem 2rem 2rem}
}