/* =========================================================
   Ori X Pay - Forgot / Reset password
   Desktop framed layout + mobile layout, built from the
   approved "Password Reset UI" mockup.
   ========================================================= */
:root {
    --pr-page: #faf6ee;
    --pr-cream: #fcf9f2;
    --pr-card: #fcfaf5;
    --pr-dark: #14191a;
    --pr-dark-2: #0a0e0e;
    --pr-ink: #1a212a;
    --pr-sub: #7c8a98;
    --pr-ph: #a1a8ae;
    --pr-line: #e7e3d9;
    --pr-gold: #e8b862;
    --pr-gold-d: #c9a15d;
    --pr-brown: #8d5f24;
    --pr-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --pr-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body.pr-body {
    font-family: var(--pr-font);
    background: var(--pr-page);
    color: var(--pr-ink);
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.pr-body svg { display: block; flex: none; }
.pr-body a { text-decoration: none; }

.pr-stage { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 28px 22px; }

/* ---------- frame ---------- */
.pr-frame {
    width: 100%; max-width: 1100px;
    background: var(--pr-cream);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 34px 80px -34px rgba(70, 48, 14, .30), 0 10px 26px -12px rgba(70, 48, 14, .14);
    display: flex; flex-direction: column;
}

/* ---------- header / footer (dark bars) ---------- */
.pr-bar {
    position: relative; overflow: hidden;
    background: radial-gradient(520px 160px at 88% 120%, rgba(214, 170, 90, .16), transparent 70%), var(--pr-dark);
    color: #fff;
}
.pr-header { height: 76px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; }
.pr-brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.pr-brand img { width: 38px; height: 44px; object-fit: contain; }
.pr-brand-name { font-family: var(--pr-display); font-size: 22px; line-height: 24px; font-weight: 500; letter-spacing: -.005em; color: #fff; }
.pr-brand-tag { margin-top: 2px; font-size: 11px; line-height: 14px; color: #cfd6d8; }
.pr-head-right { display: flex; align-items: center; gap: 34px; font-size: 12.5px; font-weight: 500; color: #eef1f2; }
.pr-secure { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.pr-secure svg { width: 22px; height: 22px; color: var(--pr-gold); }
.pr-back { display: inline-flex; align-items: center; gap: 12px; color: #eef1f2; white-space: nowrap; }
.pr-back svg { width: 15px; height: 15px; color: var(--pr-gold); }
.pr-back:hover { color: #fff; }

.pr-footer { height: 81px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; }
.pr-footer .pr-brand img { width: 34px; height: 40px; }
.pr-footer .pr-brand-name { font-size: 18px; line-height: 21px; }
.pr-footer .pr-brand-tag { font-size: 9.5px; line-height: 12px; }
.pr-links { display: flex; align-items: center; font-size: 11px; font-weight: 500; color: #e8ecee; }
.pr-links a { color: #e8ecee; padding: 0 20px; }
.pr-links a:hover { color: #fff; }
.pr-links i { width: 1px; height: 12px; background: rgba(255, 255, 255, .35); }
.pr-footer .pr-secure { font-size: 12px; }
.pr-footer .pr-secure svg { width: 24px; height: 24px; }

/* ---------- main (cream) ---------- */
.pr-main { padding: 32px 28px 29px 30px; display: grid; grid-template-columns: 455px minmax(0, 1fr); background: var(--pr-cream); }

/* ---------- left dark panel ---------- */
.pr-left {
    position: relative; overflow: hidden;
    min-height: 659px;
    border-radius: 14px 0 0 14px;
    padding: 41px 40px 0;
    color: #fff;
    background:
        radial-gradient(420px 300px at 105% 82%, rgba(214, 170, 90, .13), transparent 70%),
        radial-gradient(300px 220px at 0 0, rgba(214, 170, 90, .05), transparent 70%),
        #0a0e0e;
}
.pr-left > * { position: relative; z-index: 2; }
.pr-art {
    position: absolute !important; z-index: 1 !important; left: 0; right: 0; bottom: 0;
    aspect-ratio: 896 / 616;
    background: url('../img/paynova/reset-art.webp') center bottom / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 100%);
    pointer-events: none;
}
.pr-h1 { font-family: var(--pr-display); font-size: 32px; line-height: 36px; font-weight: 400; letter-spacing: -.01em; color: #fff; }
.pr-h1 b { display: block; font-weight: 700; background: linear-gradient(90deg, #f6c978 0%, #e8b058 55%, #d99a3e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #eeb862; }
.pr-lead { margin-top: 20px; max-width: 322px; font-size: 14.5px; line-height: 21px; color: #f2f4f4; }

.pr-feats { margin-top: 31px; display: grid; gap: 24px; }
.pr-feat { display: flex; align-items: center; gap: 15px; }
.pr-feat-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #f1c987; background: radial-gradient(circle at 50% 35%, #1f2019, #0f130f 72%); border: 1px solid rgba(214, 170, 90, .55); box-shadow: 0 0 14px rgba(214, 170, 90, .12), inset 0 0 10px rgba(214, 170, 90, .08); flex: none; }
.pr-feat-ico svg { width: 18px; height: 18px; }
.pr-feat b { display: block; font-size: 13.5px; line-height: 18px; font-weight: 600; color: #fff; }
.pr-feat span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 18px; color: #d3d9db; }

/* ---------- right card ---------- */
.pr-right {
    border: 1px solid #efeadf; border-left: 0;
    border-radius: 0 14px 14px 0;
    background: linear-gradient(180deg, #fcfaf5, #faf8f2);
    padding: 33px 41px 36px 52px;
    display: flex; flex-direction: column;
}
.pr-card-brand { display: flex; align-items: center; gap: 12px; }
.pr-card-brand img { width: 44px; height: 51px; object-fit: contain; }
.pr-card-brand .pr-brand-name { color: #1a212a; font-size: 24px; line-height: 27px; }
.pr-card-brand .pr-brand-tag { color: #2b333c; font-size: 11px; }

.pr-title { margin-top: 38px; font-family: var(--pr-display); font-size: 27px; line-height: 34px; font-weight: 600; letter-spacing: -.015em; color: #17202a; }
.pr-sub { margin-top: 10px; max-width: 360px; font-size: 14.5px; line-height: 21px; color: #7b8996; }

.pr-form { margin-top: 0; }

/* tabs */
.pr-tabs { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; height: 52px; padding: 0; border-radius: 10px; background: #f1efe9; border: 1px solid #ece9e1; position: relative; }
.pr-tab { appearance: none; border: 1px solid transparent; background: transparent; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 12px; font: 500 14px var(--pr-font); color: #7f858c; cursor: pointer; margin: -1px; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.pr-tab svg { width: 18px; height: 18px; }
.pr-tab:hover { color: #5d646b; }
.pr-tab[aria-selected="true"] { background: #fffcf6; border-color: #dcbb7e; color: var(--pr-brown); font-weight: 600; box-shadow: 0 6px 14px -8px rgba(170, 120, 40, .45), 0 0 0 1px rgba(232, 200, 140, .25); }
.pr-tab:focus-visible { outline: 3px solid rgba(185, 138, 69, .4); outline-offset: 2px; }

.pr-label { display: block; margin-top: 27px; margin-bottom: 11px; font-size: 14.5px; line-height: 20px; font-weight: 600; color: #19202a; }
.pr-field { position: relative; }
.pr-field > svg.pr-i { position: absolute; left: 18px; top: 50%; width: 19px; height: 19px; margin-top: -9.5px; color: #55606b; pointer-events: none; }
.pr-input { width: 100%; height: 49px; padding: 0 16px 0 52px; background: #fdfcf9; border: 1px solid #e8e4da; border-radius: 8px; font: 400 14.5px var(--pr-font); color: var(--pr-ink); outline: none; box-shadow: 0 1px 2px rgba(60, 40, 10, .03); transition: border-color .15s, box-shadow .15s; }
.pr-input::placeholder { color: var(--pr-ph); opacity: 1; }
.pr-input:hover { border-color: #d9d4c8; }
.pr-input:focus { border-color: #b98a45; box-shadow: 0 0 0 4px rgba(185, 138, 69, .14); }
.pr-input:-webkit-autofill { -webkit-text-fill-color: var(--pr-ink); -webkit-box-shadow: 0 0 0 60px #fdfcf9 inset; }

.pr-btn { margin-top: 24px; position: relative; width: 100%; height: 51px; border: 0; border-radius: 7px; color: #fff; font: 600 15.5px var(--pr-font); display: flex; align-items: center; justify-content: center; gap: 14px; cursor: pointer;
    background: linear-gradient(180deg, #c6a15f 0%, #b88a43 38%, #a47630 70%, #8f6527 100%);
    box-shadow: 0 12px 24px -12px rgba(143, 101, 39, .65), inset 0 1px 0 rgba(255, 244, 214, .35), inset 0 -1px 0 rgba(90, 58, 16, .25);
    text-shadow: 0 1px 0 rgba(90, 58, 16, .25);
    transition: transform .15s, box-shadow .2s, filter .2s; }
.pr-btn svg { width: 19px; height: 19px; }
.pr-btn:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 16px 28px -12px rgba(143, 101, 39, .7), inset 0 1px 0 rgba(255, 244, 214, .4), inset 0 -1px 0 rgba(90, 58, 16, .25); }
.pr-btn:active { transform: none; }
.pr-btn:focus-visible { outline: 3px solid rgba(185, 138, 69, .5); outline-offset: 3px; }
.pr-btn:disabled { opacity: .8; cursor: progress; transform: none; }
.pr-btn .pr-spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: prSpin .7s linear infinite; }
.pr-btn.is-loading .pr-spin { display: block; }
.pr-btn.is-loading .pr-btn-i { display: none; }
@keyframes prSpin { to { transform: rotate(360deg); } }

.pr-or { margin-top: 28px; height: 20px; display: flex; align-items: center; gap: 18px; font-size: 11.5px; letter-spacing: .04em; color: #8e9aa4; }
.pr-or::before, .pr-or::after { content: ''; flex: 1; height: 1px; background: #e9e5db; }

.pr-help { margin-top: 24px; display: flex; gap: 16px; padding: 22px 24px 20px 22px; background: #fbf9f3; border: 1px solid #eeeae0; border-radius: 10px; }
.pr-help-ico { width: 24px; height: 24px; margin-top: 1px; color: #c39a52; }
.pr-help b { display: block; font-size: 13.5px; line-height: 18px; font-weight: 600; color: #19202a; }
.pr-help p { margin-top: 5px; font-size: 12px; line-height: 19px; color: #7f8b96; }
.pr-help a { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--pr-brown); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pr-help a svg { width: 13px; height: 13px; }

/* inline alert (client validation) */
.pr-alert { margin-top: 18px; display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 19px; border: 1px solid #ecdcae; background: #fbf4e4; color: #7a5712; }
.pr-alert svg { width: 18px; height: 18px; margin-top: 1px; }
.pr-alert b { display: block; font-weight: 600; }

/* mobile-only blocks hidden on desktop */
.pr-backbar, .pr-hero-m { display: none; }

/* =========================================================
   MOBILE / TABLET  (< 900px)
   ========================================================= */
@media (max-width: 899px) {
    body.pr-body { background: var(--pr-dark-2); }
    .pr-stage { display: block; padding: 0; min-height: 100vh; min-height: 100dvh; }
    .pr-frame { max-width: 560px; margin: 0 auto; border-radius: 0; box-shadow: none; min-height: 100vh; min-height: 100dvh; background: var(--pr-dark-2); }

    .pr-header { height: 74px; padding: 0 22px; background: var(--pr-dark-2); }
    .pr-header .pr-head-right { display: none; }
    .pr-header .pr-brand img { width: 36px; height: 42px; }

    .pr-backbar { display: block; background: var(--pr-dark-2); border-top: 1px solid rgba(255, 255, 255, .07); border-bottom: 1px solid rgba(255, 255, 255, .07); }
    .pr-backbar a { display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 22px; font-size: 12.5px; font-weight: 500; color: #eef1f2; }
    .pr-backbar a svg { width: 16px; height: 16px; color: var(--pr-gold); }

    .pr-hero-m { display: block; position: relative; overflow: hidden; padding: 38px 22px 34px; color: #fff; min-height: 192px;
        background: radial-gradient(260px 200px at 82% 55%, rgba(214, 170, 90, .20), transparent 70%), linear-gradient(180deg, #0c1010, #080b0b); }
    .pr-hero-m::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 46%; background: url('../img/paynova/reset-art-m.webp') right center / auto 100% no-repeat; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28%); mask-image: linear-gradient(to right, transparent 0, #000 28%); z-index: 0; }
    .pr-hero-m > * { position: relative; z-index: 1; }
    .pr-hero-m .pr-h1 { font-size: 26px; line-height: 30px; }
    .pr-hero-m .pr-lead { margin-top: 12px; max-width: 200px; font-size: 11.5px; line-height: 17px; color: #eef1f2; }

    .pr-main { display: block; padding: 0; background: transparent; }
    .pr-left { display: none; }
    .pr-right { border: 0; border-radius: 0; padding: 22px 22px 34px; background: #fcf9f2; }
    .pr-card-brand, .pr-title, .pr-sub { display: none; }
    .pr-tabs { margin-top: 0; }
    .pr-label { margin-top: 22px; }

    .pr-footer { height: auto; padding: 26px 22px 30px; flex-direction: column; align-items: flex-start; gap: 20px; background: var(--pr-dark-2); }
    .pr-footer .pr-links { align-self: center; }
    .pr-footer .pr-links a { padding: 0 14px; }
    
    .pr-footer .pr-secure { align-self: center; }
}
@media (max-width: 380px) {
    .pr-hero-m .pr-h1 { font-size: 23px; line-height: 27px; }
    .pr-hero-m .pr-lead { max-width: 170px; }
    .pr-tab { gap: 8px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .pr-btn, .pr-input, .pr-tab { transition: none; }
    .pr-btn .pr-spin { animation-duration: 1.6s; }
}