/* Forgot-password flow only — never loaded by login/register/verify pages */

/* Lock viewport — no page scroll */
.zap-login--forgot {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  grid-template-columns: minmax(0, 55%) minmax(0, 45%);
}

.zap-login--forgot .zap-login__brand,
.zap-login--forgot .zap-login__auth {
  min-height: 0;
  overflow: hidden;
}

.zap-login--forgot .zap-login__brand--forgot {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.zap-login--forgot .zap-login__brand--forgot .zap-login__brand-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  width: 100%;
  padding-bottom: 0;
  overflow: visible;
}

/* Compact copy so hero can be large */
.zap-login--forgot .zap-login__brand--forgot .zap-login__tag,
.zap-login--forgot .zap-login__brand--forgot .zap-login__tagline {
  margin: 0 0 14px;
}

.zap-login--forgot .zap-login__brand--forgot .zap-login__headline {
  margin: 0 0 8px;
  font-size: clamp(28px, 2.8vw, 40px);
}

.zap-login--forgot .zap-login__brand--forgot .zap-login__desc {
  margin: 0 0 8px;
  font-size: 13.5px;
}

/* Pull bg wave up (default translateY(20%) pushes it too low) */
.zap-login--forgot .zap-login__brand--forgot .zap-login__shapes:not(.zap-login__shapes--fore) .zap-login__shapes-img {
  height: 72%;
  transform: translateY(6%);
  object-position: 70% 100%;
}

.zap-login--forgot .zap-brand-hero--forgot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 1 1 auto;
  /* Push art into wave so fore crest covers the foot */
  margin: 0 auto clamp(88px, 10vh, 120px);
  width: min(100%, 560px);
  max-width: 560px;
  min-height: 0;
  overflow: visible;
  background: transparent;
  z-index: 2;
  position: relative;
  align-self: center;
}

.zap-login--forgot .zap-forgot-hero-img {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  background: transparent;
  will-change: transform, opacity;
  animation: zapForgotHeroLive 5.2s ease-in-out infinite;
}

/* Brand copy + form enter */
.zap-login--forgot .zap-login__brand--forgot .zap-login__logo {
  animation: zapForgotFadeUp 0.45s ease both;
}
.zap-login--forgot .zap-login__brand--forgot .zap-login__tag,
.zap-login--forgot .zap-login__brand--forgot .zap-login__tagline {
  animation: zapForgotFadeUp 0.5s ease 0.06s both;
}
.zap-login--forgot .zap-login__brand--forgot .zap-login__headline {
  animation: zapForgotFadeUp 0.55s ease 0.1s both;
}
.zap-login--forgot .zap-login__brand--forgot .zap-login__desc {
  animation: zapForgotFadeUp 0.55s ease 0.16s both;
}
.zap-login--forgot .zap-login__auth-inner {
  overflow-y: auto;
  max-height: 100%;
  animation: zapForgotFadeUp 0.5s ease 0.08s both;
}
.zap-login--forgot .zap-forgot-method:nth-child(1) {
  animation: zapForgotFadeUp 0.45s ease 0.12s both;
}
.zap-login--forgot .zap-forgot-method:nth-child(2) {
  animation: zapForgotFadeUp 0.45s ease 0.2s both;
}
.zap-login--forgot .zap-btn-primary {
  animation: zapForgotFadeUp 0.45s ease 0.24s both;
}
.zap-login--forgot .zap-forgot-success__ico {
  animation: zapForgotPop 0.55s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
.zap-login--forgot .zap-otp-boxes input {
  animation: zapForgotFadeUp 0.4s ease both;
}
.zap-login--forgot .zap-otp-boxes input:nth-child(1) { animation-delay: 0.12s; }
.zap-login--forgot .zap-otp-boxes input:nth-child(2) { animation-delay: 0.16s; }
.zap-login--forgot .zap-otp-boxes input:nth-child(3) { animation-delay: 0.2s; }
.zap-login--forgot .zap-otp-boxes input:nth-child(4) { animation-delay: 0.24s; }
.zap-login--forgot .zap-otp-boxes input:nth-child(5) { animation-delay: 0.28s; }
.zap-login--forgot .zap-otp-boxes input:nth-child(6) { animation-delay: 0.32s; }

/* Method: push phone down so it clears headline/desc */
.zap-login--forgot .zap-login__brand--forgot[data-forgot-step="method"] .zap-brand-hero--forgot {
  margin-top: clamp(28px, 4vh, 48px);
  margin-bottom: clamp(72px, 8vh, 100px);
}

.zap-login--forgot .zap-login__brand--forgot[data-forgot-step="method"] .zap-forgot-hero-img {
  margin-top: 12px;
}

/* Reset (lock): same tuck balance as email identify */
.zap-login--forgot .zap-login__brand--forgot[data-forgot-step="reset"] .zap-brand-hero--forgot {
  margin-bottom: clamp(64px, 8vh, 96px);
  margin-top: auto;
}

.zap-login--forgot .zap-login__brand--forgot[data-forgot-step="reset"] .zap-forgot-hero-img {
  margin-bottom: -28px;
  width: min(100%, 560px);
  max-width: 560px;
}

.zap-login--forgot .zap-login__brand--forgot[data-forgot-step="reset"] .zap-login__shapes-img--fore {
  height: 54%;
  transform: translateY(2%);
  object-position: 58% 100%;
}

/*
 * Identify (email): ~60% visible above crest, ~40% tucked behind blue
 * (match reference — not fully hidden, not floating above).
 */
.zap-login--forgot .zap-login__brand--forgot[data-forgot-step="identify"] .zap-brand-hero--forgot {
  margin-bottom: clamp(64px, 8vh, 96px);
  margin-top: auto;
}

.zap-login--forgot .zap-login__brand--forgot[data-forgot-step="identify"] .zap-forgot-hero-img {
  margin-bottom: -28px;
  width: min(100%, 560px);
  max-width: 560px;
}

/* Fore crest MUST sit above hero (behind blue look) */
.zap-login--forgot .zap-login__brand--forgot .zap-login__shapes--fore {
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.zap-login--forgot .zap-login__brand--forgot .zap-login__shapes-img--fore {
  height: 58%;
  top: auto;
  bottom: 0;
  left: -4%;
  width: 112%;
  transform: translateY(0%);
  opacity: 1;
  object-fit: cover;
  object-position: 58% 100%;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 18%,
    rgba(0, 0, 0, 0.08) 28%,
    rgba(0, 0, 0, 0.35) 38%,
    rgba(0, 0, 0, 0.75) 50%,
    #000 60%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 18%,
    rgba(0, 0, 0, 0.08) 28%,
    rgba(0, 0, 0, 0.35) 38%,
    rgba(0, 0, 0, 0.75) 50%,
    #000 60%,
    #000 100%
  );
}

/* Identify: crest covers only lower ~40% of envelope */
.zap-login--forgot .zap-login__brand--forgot[data-forgot-step="identify"] .zap-login__shapes-img--fore {
  height: 54%;
  transform: translateY(2%);
  object-position: 58% 100%;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 22%,
    rgba(0, 0, 0, 0.08) 32%,
    rgba(0, 0, 0, 0.35) 42%,
    rgba(0, 0, 0, 0.78) 54%,
    #000 64%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 22%,
    rgba(0, 0, 0, 0.08) 32%,
    rgba(0, 0, 0, 0.35) 42%,
    rgba(0, 0, 0, 0.78) 54%,
    #000 64%,
    #000 100%
  );
}

.zap-login--forgot .zap-login__brand--forgot .zap-trusted {
  position: relative;
  z-index: 6;
  flex-shrink: 0;
}

/* OTP step: reuse mobile-verification hero SVG + same alignment */
.zap-login--forgot .zap-login__brand--forgot[data-forgot-step="otp"] .zap-brand-hero--forgot {
  margin-top: auto;
  margin-bottom: clamp(88px, 10vh, 120px);
  margin-left: auto;
  margin-right: auto;
  width: min(100%, 580px);
  max-width: 580px;
  min-height: 0;
  display: block;
  overflow: visible;
  background: transparent;
  position: relative;
  z-index: 2;
  flex: 0 1 auto;
  align-self: center;
  padding-top: 0;
  transform: none;
  transform-origin: center bottom;
}

.zap-login--forgot .zap-login__brand--forgot[data-forgot-step="otp"] .zap-mobile-hero {
  position: relative;
  width: 100%;
  margin: 0 auto;
  pointer-events: none;
}

.zap-login--forgot .zap-login__brand--forgot[data-forgot-step="otp"] .zap-mobile-hero__art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.zap-login--forgot .zap-login__brand--forgot[data-forgot-step="otp"] .zap-mobile-hero__orbit-ring {
  transform-origin: 178px 102px;
  animation: zapMobileDash 26s linear infinite;
}

.zap-login--forgot .zap-login__brand--forgot[data-forgot-step="otp"] .zap-mobile-hero__phone {
  transform-box: fill-box;
  transform-origin: center;
  animation: zapMobileFloat 5.2s ease-in-out infinite;
}

.zap-login--forgot .zap-login__brand--forgot[data-forgot-step="otp"] .zap-mobile-hero__chat {
  transform-box: fill-box;
  transform-origin: center;
  animation: zapMobileChat 4.6s ease-in-out 0.35s infinite;
}

.zap-login--forgot .zap-login__brand--forgot[data-forgot-step="otp"] .zap-mobile-hero__check {
  transform-box: fill-box;
  transform-origin: center;
  animation: zapMobileCheck 4.8s ease-in-out 0.7s infinite;
}

@media (max-width: 1200px) and (min-width: 901px) {
  .zap-login--forgot .zap-login__brand--forgot[data-forgot-step="otp"] .zap-brand-hero--forgot {
    width: min(100%, 500px);
    max-width: 500px;
    margin-bottom: clamp(72px, 8vh, 100px);
  }
}

@media (max-width: 980px) and (min-width: 901px) {
  .zap-login--forgot .zap-login__brand--forgot[data-forgot-step="otp"] .zap-brand-hero--forgot {
    width: min(100%, 420px);
    max-width: 420px;
    margin-bottom: 68px;
  }
}

@media (max-width: 900px) {
  .zap-login--forgot .zap-login__brand--forgot[data-forgot-step="otp"] .zap-brand-hero--forgot {
    width: min(100%, 360px);
    max-width: 360px;
    margin-bottom: 56px;
  }
}

@media (max-width: 1200px) {
  .zap-login--forgot .zap-brand-hero--forgot {
    width: min(100%, 460px);
    max-width: 460px;
    margin-bottom: clamp(56px, 7vh, 84px);
  }
}

@media (max-height: 780px) {
  .zap-login--forgot .zap-login__brand--forgot .zap-login__headline {
    font-size: clamp(24px, 2.4vw, 32px);
  }
  .zap-login--forgot .zap-brand-hero--forgot {
    width: min(100%, 400px);
    max-width: 400px;
    margin-bottom: 52px;
  }
}

@keyframes zapForgotHeroIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes zapForgotHeroLive {
  0% { opacity: 0; transform: translateY(14px) scale(0.97); }
  10% { opacity: 1; transform: translateY(0) scale(1); }
  55% { opacity: 1; transform: translateY(-8px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes zapForgotFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes zapForgotFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes zapForgotPop {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .zap-login--forgot .zap-forgot-hero-img,
  .zap-login--forgot .zap-login__brand--forgot .zap-login__logo,
  .zap-login--forgot .zap-login__brand--forgot .zap-login__tag,
  .zap-login--forgot .zap-login__brand--forgot .zap-login__tagline,
  .zap-login--forgot .zap-login__brand--forgot .zap-login__headline,
  .zap-login--forgot .zap-login__brand--forgot .zap-login__desc,
  .zap-login--forgot .zap-login__auth-inner,
  .zap-login--forgot .zap-forgot-method,
  .zap-login--forgot .zap-btn-primary,
  .zap-login--forgot .zap-forgot-success__ico,
  .zap-login--forgot .zap-otp-boxes input,
  .zap-login--forgot .zap-login__brand--forgot[data-forgot-step="otp"] .zap-mobile-hero__phone,
  .zap-login--forgot .zap-login__brand--forgot[data-forgot-step="otp"] .zap-mobile-hero__chat,
  .zap-login--forgot .zap-login__brand--forgot[data-forgot-step="otp"] .zap-mobile-hero__check,
  .zap-login--forgot .zap-login__brand--forgot[data-forgot-step="otp"] .zap-mobile-hero__orbit-ring {
    animation: none !important;
  }
}

.zap-login--forgot .zap-login__brand--forgot .zap-illust,
.zap-login--forgot .zap-login__brand--forgot .zap-features {
  display: none !important;
}

.zap-forgot-methods {
  display: grid;
  gap: 12px;
  margin: 10px 0 22px;
}

.zap-forgot-method {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--zap-border, #DCE5F2);
  background: #fff;
  color: var(--zap-navy, #172B57);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.zap-forgot-method:hover {
  border-color: rgba(49, 92, 250, 0.4);
  box-shadow: 0 8px 20px rgba(49, 92, 250, 0.08);
}

.zap-forgot-method.is-selected {
  border-color: #315CFA;
  background: linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 100%);
  box-shadow: 0 0 0 3px rgba(49, 92, 250, 0.14);
}

.zap-forgot-method__radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #C5D3E8;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: #fff;
}

.zap-forgot-method.is-selected .zap-forgot-method__radio {
  border-color: #315CFA;
  background: #315CFA;
  color: #fff;
}

.zap-forgot-method__radio svg {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.zap-forgot-method.is-selected .zap-forgot-method__radio svg {
  opacity: 1;
  transform: scale(1);
}

.zap-forgot-method__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.zap-forgot-method__sub {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--zap-muted, #60789B);
}

.zap-forgot-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--zap-muted, #60789B);
}

.zap-forgot-back:hover { color: var(--zap-blue, #2463EB); }

.zap-login--forgot .zap-otp-copy { margin: 0 0 18px; }
.zap-login--forgot .zap-otp-lede {
  margin: 0;
  font-size: 14px;
  color: var(--zap-muted, #60789B);
  line-height: 1.45;
}
.zap-login--forgot .zap-otp-dest {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--zap-navy, #172B57);
}

.zap-forgot-reqs {
  list-style: none;
  margin: -4px 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.zap-forgot-reqs li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--zap-muted, #60789B);
}

.zap-forgot-reqs li.is-met {
  color: #15803D;
  font-weight: 600;
}

.zap-forgot-reqs__ico {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #C5D3E8;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: transparent;
}

.zap-forgot-reqs li.is-met .zap-forgot-reqs__ico {
  border-color: #22C55E;
  background: #22C55E;
  color: #fff;
}

.zap-forgot-success {
  text-align: center;
  padding-top: 12px;
}

.zap-forgot-success__ico {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #34D399, #22D3EE 55%, #2563EB);
  box-shadow: 0 12px 28px rgba(34, 197, 94, 0.28);
}

.zap-forgot-success__ico svg { display: block; }

.zap-login--forgot .zap-forgot-success .zap-login__auth-title,
.zap-login--forgot .zap-forgot-success .zap-login__auth-sub {
  text-align: center;
}

@media (max-width: 960px) {
  .zap-login--forgot .zap-brand-hero--forgot { min-height: 180px; }
  .zap-login--forgot .zap-forgot-hero-img { width: min(100%, 280px); }
}