/* public/css/forgot-password.css */

.fp-page {
  --fp-navy: #172a43;
  --fp-navy-deep: #102036;
  --fp-gold: #b99a60;
  --fp-gold-light: #e9dcc0;
  --fp-ivory: #fcfbf8;
  --fp-muted: #7d8999;
  --fp-border: #e9e5dc;
  --fp-white: #ffffff;

  margin: 0;
  color: var(--fp-navy);
  background: var(--fp-ivory);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.fp-page *,
.fp-page *::before,
.fp-page *::after {
  box-sizing: border-box;
}

.fp-page a {
  -webkit-tap-highlight-color: transparent;
}

.fp-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
  width: min(1440px, 100%);
  min-height: 650px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--fp-white);
  border: 1px solid var(--fp-border);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgb(23 42 67 / 6%);
}

.fp-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: clamp(32px, 6vw, 88px);
  background: var(--fp-white);
}

.fp-form-wrap {
  width: 100%;
  max-width: 430px;
  margin: auto;
}

.fp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: #99783e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  line-height: 1.5;
  text-transform: uppercase;
}

.fp-eyebrow::before {
  width: 23px;
  height: 1px;
  background: var(--fp-gold);
  content: "";
}

.fp-title {
  margin: 0 0 15px;
  color: var(--fp-navy);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: -1.2px;
  line-height: 1.17;
}

.fp-lead {
  margin: 0 0 30px;
  color: #788497;
  font-size: 13px;
  line-height: 1.9;
}

.fp-form {
  display: flex;
  flex-direction: column;
  gap: 23px;
}

.fp-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fp-field label {
  color: #34445a;
  font-size: 12px;
  font-weight: 650;
}

.fp-field input {
  width: 100%;
  min-height: 51px;
  padding: 0 15px;
  color: var(--fp-navy);
  background: #fdfcf9;
  border: 1px solid #e5e1d8;
  border-radius: 10px;
  outline: none;
  font: inherit;
  font-size: 13px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.fp-field input::placeholder {
  color: #a2aab5;
}

.fp-field input:hover {
  border-color: #d2c5aa;
}

.fp-field input:focus {
  background: var(--fp-white);
  border-color: var(--fp-gold);
  box-shadow: 0 0 0 4px rgb(185 154 96 / 12%);
}

.fp-field input:focus-visible {
  outline: none;
}

.fp-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  color: #fff;
  background: var(--fp-navy);
  border: 1px solid var(--fp-navy);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.fp-submit:hover {
  background: #243d5d;
  border-color: #243d5d;
}

.fp-submit:active {
  transform: translateY(1px);
}

.fp-submit svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 160ms ease;
}

.fp-submit:hover svg {
  transform: translateX(3px);
}

.fp-submit:focus-visible,
.fp-secondary-link:focus-visible,
.fp-dev-link:focus-visible,
.fp-brand-footer a:focus-visible {
  outline: 3px solid rgb(185 154 96 / 45%);
  outline-offset: 4px;
}

.fp-secondary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 25px;
}

.fp-secondary-link {
  color: #6c7a8e;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: color 150ms ease;
}

.fp-secondary-link:hover {
  color: #a17b38;
}

.fp-secondary-sep {
  color: #c5b99f;
}

.fp-security {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 34px;
  padding: 17px;
  background: #faf8f2;
  border: 1px solid #eee7d8;
  border-radius: 12px;
}

.fp-security > svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  margin-top: 1px;
  color: #a17e3d;
}

.fp-security > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fp-security strong {
  color: #405067;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.6;
}

.fp-security span {
  color: #8791a0;
  font-size: 11px;
  line-height: 1.7;
}

.fp-alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 22px;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.fp-alert svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
}

.fp-alert-error {
  color: #9d4141;
  background: #fff5f3;
  border-color: #f1d9d4;
}

.fp-success {
  width: 100%;
}

.fp-success-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 27px;
  color: #98783e;
  background: #f7f1e5;
  border: 1px solid #e9dcc0;
  border-radius: 18px;
}

.fp-success-icon svg {
  width: 30px;
  height: 30px;
}

.fp-success .fp-lead {
  overflow-wrap: anywhere;
}

.fp-success-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  margin-top: 25px;
}

.fp-dev-block {
  margin-top: 24px;
  padding: 17px;
  background: #fff8e9;
  border: 1px solid #ead9b6;
  border-radius: 11px;
}

.fp-dev-label {
  margin-bottom: 9px;
  color: #876a35;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.fp-dev-token {
  margin-bottom: 13px;
  overflow-wrap: anywhere;
}

.fp-dev-token code {
  color: #46536a;
  font-size: 11px;
  line-height: 1.7;
}

.fp-dev-link {
  display: inline-block;
  color: #765a2c;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.fp-dev-link:hover {
  text-decoration: underline;
}

/* Right-side brand panel */

.fp-brand-panel {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: clamp(32px, 5vw, 68px);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse at 90% 10%, rgb(185 154 96 / 17%), transparent 36%),
    radial-gradient(ellipse at 0% 100%, rgb(185 154 96 / 10%), transparent 35%),
    linear-gradient(145deg, #1c324e 0%, #142740 52%, #102036 100%);
}

.fp-brand-panel::before,
.fp-brand-panel::after {
  position: absolute;
  width: 330px;
  height: 330px;
  border: 1px solid rgb(217 190 136 / 13%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.fp-brand-panel::before {
  top: -180px;
  right: -140px;
}

.fp-brand-panel::after {
  right: -205px;
  bottom: -205px;
  width: 430px;
  height: 430px;
}

.fp-brand-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  margin: auto;
}

.fp-brand-mark {
  display: grid;
  place-items: center;
  width: 57px;
  height: 57px;
  margin-bottom: 28px;
  color: #e4cf9e;
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(213 185 128 / 55%);
  border-radius: 16px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 1px;
}

.fp-brand-inner > h2 {
  margin: 0 0 15px;
  color: #fff;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500;
  letter-spacing: -0.6px;
  line-height: 1.25;
}

.fp-brand-inner > p {
  max-width: 370px;
  margin: 0;
  color: #c0cad7;
  font-size: 12px;
  line-height: 2;
}

.fp-brand-section {
  margin-top: 43px;
}

.fp-brand-section > h4 {
  margin: 0 0 23px;
  color: #dfc58e;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.fp-steps {
  display: flex;
  flex-direction: column;
  gap: 23px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fp-steps li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.fp-step-num {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  color: #e0c58d;
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(215 188 132 / 28%);
  border-radius: 11px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.fp-steps li > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
}

.fp-steps strong {
  color: #fff;
  font-size: 12px;
  font-weight: 650;
}

.fp-steps li > div > span {
  color: #b5c1d0;
  font-size: 11px;
  line-height: 1.8;
}

.fp-brand-footer {
  margin-top: 43px;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.fp-brand-footer a {
  color: #e1c68f;
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
}

.fp-brand-footer a:hover {
  color: #fff;
}

/* Responsive layout */

@media (min-width: 1441px) {
  .fp-shell {
    margin-top: 28px;
    margin-bottom: 28px;
  }
}

@media (max-width: 1000px) {
  .fp-shell {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
  }

  .fp-form-panel {
    padding: 40px 30px;
  }

  .fp-brand-panel {
    padding: 40px 30px;
  }
}

@media (max-width: 760px) {
  .fp-shell {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    margin: 0 auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .fp-form-panel {
    padding: 56px 24px 45px;
  }

  .fp-form-wrap {
    max-width: 480px;
  }

  .fp-title {
    font-size: clamp(31px, 7vw, 40px);
  }

  .fp-brand-panel {
    padding: 42px 24px;
  }

  .fp-brand-inner {
    max-width: 480px;
  }

  .fp-brand-section {
    margin-top: 32px;
  }

  .fp-steps {
    gap: 19px;
  }

  .fp-brand-footer {
    margin-top: 32px;
  }
}

@media (max-width: 420px) {
  .fp-form-panel {
    padding: 42px 19px 35px;
  }

  .fp-brand-panel {
    padding: 35px 19px;
  }

  .fp-title {
    letter-spacing: -0.7px;
  }

  .fp-secondary {
    gap: 9px;
  }

  .fp-security {
    padding: 14px;
  }

  .fp-dev-block {
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fp-page *,
  .fp-page *::before,
  .fp-page *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}