/* =====================================================================
   NcBose HCS — Reset Password page content (React: reset-password-spa).
   Shell (header/footer/dialog) comes from the Thymeleaf template.
   Builds on ncbose-ds.css; classes prefixed `rp-`.
   ===================================================================== */

.rp-page {
    padding: 64px 0 96px;
    background:
        radial-gradient(1000px 480px at 0% 0%, #DDFBF6 0%, rgba(221, 251, 246, 0) 60%),
        linear-gradient(180deg, #F4FBFA 0%, #FFFFFF 100%);
}
.rp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 72px; align-items: start; }

.rp-ico { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nb-eyebrow .rp-ico { width: 14px; height: 14px; }

/* ---------- Left copy ---------- */
.rp-copy { padding-top: 24px; }
.rp-title { margin-top: 20px; font-size: 52px; font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; }
.rp-title span { color: var(--nb-primary); }
.rp-sub { margin-top: 20px; max-width: 520px; font-size: 17px; line-height: 1.65; color: var(--nb-text-muted); }
.rp-points { display: grid; gap: 14px; margin: 28px 0 0; padding: 24px 0 0; list-style: none; border-top: 1px solid var(--nb-border); max-width: 520px; }
.rp-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--nb-text); }
.rp-points .rp-ico {
    width: 22px; height: 22px; padding: 4px; margin-top: -1px;
    border-radius: 50%; background: var(--nb-surface-tint); color: var(--nb-primary-deep); stroke-width: 2.5;
}
.rp-help {
    display: flex; align-items: center; gap: 14px;
    max-width: 520px; margin-top: 32px; padding: 16px 18px;
    border: 1px solid var(--nb-border); border-radius: var(--nb-r-lg);
    background: var(--nb-surface); box-shadow: var(--nb-shadow-1);
}
.rp-help__icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 42px; height: 42px; border-radius: 12px; background: var(--nb-surface-tint); color: var(--nb-primary-deep);
}
.rp-help strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--nb-ink); }
.rp-help p { margin-top: 2px; font-size: 14px; color: var(--nb-text-muted); }
.rp-help a { font-weight: 600; color: var(--nb-primary-deep); }

/* ---------- Card ---------- */
.rp-card { position: relative; overflow: hidden; padding: 32px; border-radius: var(--nb-r-xl); box-shadow: var(--nb-shadow-3); }
.rp-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--nb-primary), var(--nb-primary-deep)); }
.rp-card__title { font-size: 24px; font-weight: 700; }
.rp-card__sub { margin-top: 6px; font-size: 14.5px; color: var(--nb-text-muted); }
.rp-card__sub strong { color: var(--nb-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.rp-progress { margin-bottom: 26px; }
.rp-progress__row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 13px; color: var(--nb-text-muted); }
.rp-progress__step { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nb-primary-deep); }
.rp-progress__bar { height: 6px; border-radius: var(--nb-r-full); background: var(--nb-surface-tint); overflow: hidden; }
.rp-progress__bar span { display: block; height: 100%; border-radius: inherit; background: var(--nb-primary); transition: width .4s ease; }

/* ---------- Alert ---------- */
.rp-alert {
    display: flex; gap: 12px; margin-top: 20px; padding: 14px 16px;
    border: 1px solid #FBCFCB; border-radius: var(--nb-r-md);
    background: #FEF1F0; color: #B42318; font-size: 14px; line-height: 1.5;
}
.rp-alert .rp-ico { margin-top: 1px; }
.rp-alert strong { display: block; font-weight: 600; }

/* ---------- Fields ---------- */
.rp-card form > .rp-field:first-of-type, .rp-alert + .rp-field { margin-top: 22px; }
.rp-field { margin-top: 18px; }
.rp-label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nb-ink); }
.rp-label em { font-style: normal; color: var(--nb-critical-text); }
.rp-input {
    display: flex; align-items: center; gap: 10px;
    height: 50px; padding: 0 6px 0 14px;
    border: 1px solid var(--nb-border); border-radius: 12px; background: var(--nb-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.rp-input:focus-within { border-color: var(--nb-primary); box-shadow: var(--nb-focus-ring); }
.rp-input.is-invalid { border-color: var(--nb-critical-text); box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12); }
.rp-input input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15.5px; color: var(--nb-ink); }
.rp-input input::placeholder { color: #8A9A97; }
.rp-lead { color: var(--nb-text-muted); }
.rp-prefix {
    display: inline-flex; align-items: center; align-self: stretch;
    margin-left: -14px; padding: 0 12px;
    border-right: 1px solid var(--nb-border); border-radius: 12px 0 0 12px;
    background: var(--nb-canvas); font-size: 14px; font-weight: 600; color: var(--nb-ink);
}
.rp-eye {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: 0; border-radius: 8px; background: transparent;
    color: var(--nb-text-muted); cursor: pointer;
}
.rp-eye:hover { background: var(--nb-canvas); color: var(--nb-ink); }
.rp-hint { margin-top: 7px; font-size: 12.5px; line-height: 1.5; color: var(--nb-text-muted); }
.rp-hint--icon { display: flex; align-items: center; gap: 6px; }
.rp-hint--icon .rp-ico { width: 15px; height: 15px; color: var(--nb-primary); }
.rp-error { margin-top: 7px; font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--nb-critical-text); }

/* ---------- OTP ---------- */
.rp-otp-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.rp-otp-head__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; margin-bottom: 14px;
    border: 1px solid var(--nb-border-strong); border-radius: 16px; background: var(--nb-surface-tint); color: var(--nb-primary-deep);
}
.rp-otp-head__icon .rp-ico { width: 26px; height: 26px; }
.rp-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.rp-otp input {
    width: 100%; height: 58px; padding: 0;
    border: 1px solid var(--nb-border); border-radius: 12px; outline: 0; background: var(--nb-surface);
    font: inherit; font-size: 22px; font-weight: 700; text-align: center; color: var(--nb-ink); font-variant-numeric: tabular-nums;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.rp-otp input:focus { border-color: var(--nb-primary); box-shadow: var(--nb-focus-ring); }
.rp-otp.is-invalid input { border-color: var(--nb-critical-text); }

/* ---------- Actions ---------- */
.rp-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.rp-actions .nb-btn .rp-ico { width: 18px; height: 18px; }
.rp-actions .nb-btn:disabled { opacity: .65; cursor: not-allowed; }
.rp-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 4px; border: 0; background: none;
    font: inherit; font-size: 14.5px; font-weight: 600; color: var(--nb-text-muted); cursor: pointer;
}
.rp-link:hover { color: var(--nb-primary-deep); }
.rp-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--nb-canvas); font-size: 13.5px; color: var(--nb-text-muted); text-align: center; }

/* ---------- Success ---------- */
.rp-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 0 4px; }
.rp-done__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; margin-bottom: 18px;
    border-radius: 50%; background: var(--nb-success-bg); color: var(--nb-success);
}
.rp-done__icon .rp-ico { width: 30px; height: 30px; }
.rp-done .nb-btn { margin-top: 26px; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .rp-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .rp-copy { order: 2; padding-top: 0; } /* the form comes first on narrow screens */
    .rp-title { font-size: 42px; }
}
@media (max-width: 767px) {
    .rp-page { padding: 32px 0 64px; }
    .rp-title { font-size: 34px; }
    .rp-sub { font-size: 15.5px; }
    .rp-card { padding: 24px 18px; }
    .rp-otp { gap: 6px; }
    .rp-otp input { height: 50px; font-size: 20px; }
    .rp-actions { flex-direction: column-reverse; align-items: stretch; }
    .rp-actions .nb-btn { width: 100%; }
    .rp-actions .rp-link { justify-content: center; }
}