/* ============================================================
 * forgot-password-screen.css — ITER 517 (2026-05-18)
 *
 * Şifre sıfırlama ekranı stilleri. Login modal içinde
 * #forgotPasswordScreen düğümünü hedefler. Slide-in animasyon
 * + back-link + hint text + alert-box varyantları.
 *
 * Davranış kontratı:
 *   - Default: .d-none ile gizli (mevcut utility)
 *   - Açıkken: forgot-password-bind.min.js .d-none kaldırır,
 *     ardından .forgot-password-anim-in toggle ile keyframe
 *     restart eder (translateX + opacity).
 *   - .login-text-block / .login-form / .login-btn / .login-forgot
 *     gibi mevcut sınıflar login-page-fixes.css'ten miras alır;
 *     bu dosya yalnızca SIFRE SIFIRLAMA'ya özel override + yeni
 *     selector'lar tanımlar (margin, hint, back-link, animasyon).
 *
 * BS referans davranışı (canlı extract, m.bahissende301.com login
 * modal → forgot password tıklaması): sağdan ~24px slide-in +
 * opacity 0→1, ~280-320ms cubic-bezier(0.16,1,0.3,1).
 *
 * Rule refs: rule #20 (numerical proof — translateX 24→0 ölçülmüş),
 *            rule #114 (token cascade — varsayılan tokenlardan
 *            sapmaz, sadece yeni component), rule #115 (transition
 *            timing parity).
 * ============================================================ */

/* ----- Forgot screen container — sayfa-içi mini-screen.
   Login screen ile aynı padding/layout, slide-in için relative+overflow. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  /* Slide-in başlangıç durumu — keyframe çalışmadan önce de OK görünmesi için
     hafif initial offset ver, animasyon class eklenir eklenmez bundan 0'a doğru
     mock-restart hisset. Ancak .d-none aktifken zaten görünmez. */
  transform: translateX(0);
  opacity: 1;
}

/* When the d-none utility is applied, ensure no flash from the animation class
   lingering — d-none has higher specificity normally but defensive override. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen.d-none {
  display: none !important;
}

/* ----- Slide-in animation — class toggled by JS after d-none removed.
   Restart trick: JS removes class, forces reflow (void offsetWidth),
   re-adds class — keyframe runs fresh every open. */
@keyframes forgotPasswordSlideIn {
  0% {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

html.mobile-root body.mobile-site #login2 .forgot-password-screen.forgot-password-anim-in {
  animation: forgotPasswordSlideIn 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
}

/* Respect reduced-motion preference — opacity-only fade, no translate. */
@media (prefers-reduced-motion: reduce) {
  @keyframes forgotPasswordSlideIn {
    0% { opacity: 0; transform: none; }
    100% { opacity: 1; transform: none; }
  }
  html.mobile-root body.mobile-site #login2 .forgot-password-screen.forgot-password-anim-in {
    animation-duration: 150ms;
  }
}

/* ----- Text block — same margins as login-text-block but room for hint */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-text-block {
  margin: 0 0 16px !important;
  padding: 0 7px !important;
  text-align: center !important;
}

/* Top-text + main-title inherit login-text-block sizing from login-page-fixes.css.
   Defensive re-declarations in case selectors miss due to nested scoping. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-top-text {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  line-height: 14px !important;
  text-transform: none !important;
}

html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-main-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: rgb(255, 255, 255) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  line-height: 22px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

/* ----- Hint text — descriptive paragraph beneath the title.
   BS-paralel: 12px, muted white, line-height 16px, top margin 4px. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-hint-text {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin: 4px 0 0 !important;
  padding: 0 4px !important;
  line-height: 16px !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ----- Form — same vertical rhythm as login form.
   .login-form rules from login-page-fixes.css already apply;
   we just nudge form-group spacing slightly so single-input form
   doesn't look cramped. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-form.forgot-form {
  margin-top: 0 !important;
  padding: 0 7px !important;
}

html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-form.forgot-form .form-group {
  margin-bottom: 12px !important;
}

/* Submit button — match login-btn primary CTA, full width.
   Inherits gradient + height from login-page-fixes.css; we just
   ensure the forgot form variant has same top spacing as login. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-btn,
html.mobile-root body.mobile-site #login2 .forgot-password-screen button.login-btn[type="submit"] {
  margin-top: 4px !important;
  width: 100% !important;
}

/* ----- Alert boxes — success/error variants.
   Reuse .login-success-box (green) + .login-error-box (red) from
   login-page-fixes.css. Add forgot-specific margin tightening so
   they don't push the back-link too far down. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-success-box,
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-success {
  font-size: 13px !important;
  color: rgb(34, 197, 94) !important;
  background-color: rgba(34, 197, 94, 0.08) !important;
  border: 1px solid rgba(34, 197, 94, 0.18) !important;
  padding: 8px 10px !important;
  margin: 0 0 8px !important;
  border-radius: 4px !important;
  line-height: 16px !important;
  text-align: center !important;
}

html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-error-box,
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-ajax-alert {
  font-size: 13px !important;
  color: rgb(231, 31, 31) !important;
  background-color: rgba(231, 31, 31, 0.08) !important;
  border: 1px solid rgba(231, 31, 31, 0.18) !important;
  padding: 8px 10px !important;
  margin: 0 0 8px !important;
  border-radius: 4px !important;
  line-height: 16px !important;
  text-align: center !important;
}

/* d-none hides alerts when no message — defensive */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-success-box.d-none,
html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-error-box.d-none {
  display: none !important;
}

/* ----- Back-link — "GİRİŞE GERİ DÖN" anchor with left arrow icon.
   BS-paralel: top margin 16px, centered, fs 14, fw 500, muted-white,
   no underline, arrow + text inline with 6px gap. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-forgot.forgot-back-wrap {
  margin: 16px 0 0 !important;
  padding: 0 7px !important;
  text-align: center !important;
}

html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-back-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  line-height: 16px !important;
  border-radius: 4px !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
}

html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-back-link:hover,
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-back-link:focus {
  color: rgb(255, 255, 255) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  outline: none !important;
}

/* Arrow icon — match BS visual weight. Most BS deployments use the
   bc-i-arrow-left glyph from bc icon font; fallback chevron via
   border-trick if glyph missing. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-back-link i.bc-i-arrow-left,
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-back-link > i {
  font-size: 12px !important;
  line-height: 1 !important;
  display: inline-block !important;
  color: inherit !important;
}

/* CSS-only chevron fallback when icon font is missing — drawn via
   border (left + bottom borders rotated 45deg). Activated only on
   :empty i (no font glyph rendered). */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-back-link > i:empty::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(1px, -1px);
}

/* ----- Defensive: when the forgot screen is visible, ensure the login form
   itself doesn't overlay it. login.min.js's #loginFormScreen toggle should
   handle this, but if a code path forgets to add .d-none on the form, the
   forgot screen still wins via z-index / order. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen:not(.d-none) {
  z-index: 2;
  position: relative;
}