/* =========================================================
   Ori X Pay-style login  (desktop + mobile)
   Colors sampled directly from the approved reference image.
   ========================================================= */
:root {
    --pv-page: #fbf8f3;
    --pv-panel: #fbf9f6;
    --pv-field: #fcfaf8;
    --pv-line: #dfe1e2;
    --pv-ink: #0b1118;
    --pv-sub: #647180;
    --pv-ph: #91959b;
    --pv-btn: #0c161b;
    --pv-brown: #94632b;
    --pv-gold: #f1d28a;
    --pv-dark: #030b0e;
    --pv-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

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

/* ---------- page background (faint arcs, top right) ---------- */
.pv-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pv-bg::before, .pv-bg::after { content: ''; position: absolute; border-radius: 50%; }
.pv-bg::before { width: 760px; height: 760px; top: -560px; right: -250px; background: #f8f4ed; box-shadow: 0 0 0 1px rgba(232,224,208,.35); }
.pv-bg::after { width: 520px; height: 520px; top: 120px; right: -330px; background: #f8f4ee; box-shadow: 0 0 0 1px rgba(232,224,208,.3); }

.pv-stage { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; }

/* ---------- card ---------- */
.pv-card {
    width: 100%; max-width: 1114px;
    display: grid;
    grid-template-columns: 568fr 546fr;
    grid-template-areas: "left right";
    border-radius: 24px;
    overflow: hidden;
    background: var(--pv-panel);
    box-shadow: 0 40px 90px -30px rgba(70,48,14,.22), 0 12px 30px -12px rgba(70,48,14,.10), 0 0 0 .5px rgba(70,48,14,.04);
}
.pv-mhead { display: none; }

/* =========================================================
   LEFT  (dark showcase)
   ========================================================= */
.pv-left {
    grid-area: left;
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column;
    padding: 43px 56px 0 57px;
    color: #fff;
    background: #050d0f url('../img/paynova/panel.webp') -3px -3px / calc(100% + 6px) calc(100% + 6px) no-repeat;
}
.pv-strip { display: none; }

.pv-left > * { position: relative; z-index: 1; }
.pv-left > .pv-strip { position: absolute; z-index: 0; }

.pv-brand { display: flex; align-items: flex-start; gap: 18px; }
.pv-logo { width: 42px; height: 49px; object-fit: contain; flex: none; }
.pv-brand-txt { padding-top: 0; }
.pv-brand-name { font-size: 26px; line-height: 30px; font-weight: 500; letter-spacing: -.005em; color: #fff; }
.pv-brand-tag { margin-top: 5px; font-size: 12.5px; line-height: 18px; color: #d1dadd; letter-spacing: .005em; }

.pv-badge { margin-top: 52px; width: fit-content; max-width: 100%; display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px 0 11px; border-radius: 999px; background: #0f1311; border: 1px solid #493f29; color: var(--pv-gold); font-size: 14px; font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 18px rgba(214,170,90,.06); }
.pv-badge-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #1a1a14; border: 1px solid rgba(214,170,90,.4); color: var(--pv-gold); }
.pv-badge-ico svg { width: 15px; height: 15px; }

.pv-h1 { margin-top: 23px; font-size: 42px; line-height: 45px; font-weight: 600; letter-spacing: -.012em; color: #fff; }
.pv-h1 span { display: block; white-space: nowrap; }
.pv-h1 .pv-gold { background: linear-gradient(90deg, #fadeb2 0%, #fbe0b5 45%, #f5cc94 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #f6d7a8; }
.pv-p { margin-top: 14px; max-width: 398px; font-size: 16px; line-height: 24px; color: #dfe4e6; }

.pv-feats { margin-top: 32px; display: flex; align-items: flex-start; }
.pv-feat { flex: none; width: 110px; }
.pv-feat:nth-child(2) { width: 109px; }
.pv-feat:nth-child(3) { width: 91px; }
.pv-feat:nth-child(4) { width: auto; }
.pv-feat-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #f1c987; background: radial-gradient(circle at 50% 35%, #1f2019, #11140f 70%); border: 1px solid rgba(214,170,90,.30); box-shadow: 0 0 14px rgba(214,170,90,.10), inset 0 0 10px rgba(214,170,90,.06); }
.pv-feat-ico svg { width: 19px; height: 19px; }
.pv-feat-txt { margin-top: 9px; font-size: 12.5px; line-height: 15px; font-weight: 500; color: #fbfcfd; }

.pv-art { margin-top: 15px; margin-left: -57px; margin-right: -56px; aspect-ratio: 568 / 420; position: relative; z-index: 1; flex: none; }

.pv-foot { margin-top: 10px; padding-bottom: 50px; display: flex; align-items: center; gap: 12px; font-size: 11.5px; line-height: 20px; color: #d5ae6f; }
.pv-foot i { width: 40px; height: 1px; background: #f2c678; flex: none; }

/* =========================================================
   RIGHT  (form)
   ========================================================= */
.pv-right { grid-area: right; background: var(--pv-panel); padding: 57px 10.3% 56px 12%; display: flex; flex-direction: column; }
.pv-top { align-self: flex-end; display: flex; align-items: center; gap: 12px; font-size: 13.5px; line-height: 18px; font-weight: 500; color: #0a0f15; white-space: nowrap; margin-right: -4.5%; }
.pv-top a { display: inline-flex; align-items: center; gap: 8px; color: var(--pv-brown); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pv-top a svg { width: 14px; height: 14px; }

.pv-title { margin-top: 59px; font-size: 42px; line-height: 46px; font-weight: 700; letter-spacing: -.025em; color: var(--pv-ink); }
.pv-title .pv-wave { font-size: 36px; letter-spacing: 0; margin-left: 2px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.pv-sub { margin-top: 10px; max-width: 400px; font-size: 17px; line-height: 25px; color: var(--pv-sub); }

.pv-alert { margin-top: 22px; display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 19px; border: 1px solid; }
.pv-alert svg { width: 18px; height: 18px; margin-top: 1px; }
.pv-alert b { display: block; font-weight: 600; }
.pv-alert.err { background: #fdf1ef; border-color: #f2cbc5; color: #8d2b20; }
.pv-alert.warn { background: #fbf4e4; border-color: #ecdcae; color: #7a5712; }

.pv-form { margin-top: 0; }
.pv-label { display: block; margin-top: 33px; margin-bottom: 12px; font-size: 15.5px; line-height: 20px; font-weight: 600; color: var(--pv-ink); }
.pv-form .pv-label:first-of-type { margin-top: 57px; }
.pv-alert + .pv-form .pv-label:first-of-type { margin-top: 30px; }

.pv-field { position: relative; }
.pv-field > svg.pv-i { position: absolute; left: 19px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: #55606b; pointer-events: none; }
.pv-input { width: 100%; height: 55px; padding: 0 50px 0 53px; background: var(--pv-field); border: 1px solid var(--pv-line); border-radius: 12px; font: 400 15px var(--pv-font); color: var(--pv-ink); outline: none; box-shadow: 0 1px 2px rgba(60,40,10,.035); transition: border-color .15s, box-shadow .15s; }
.pv-input::placeholder { color: var(--pv-ph); opacity: 1; }
.pv-input:hover { border-color: #d2d4d6; }
.pv-input:focus { border-color: #b98a45; box-shadow: 0 0 0 4px rgba(185,138,69,.14); }
.pv-input:-webkit-autofill { -webkit-text-fill-color: var(--pv-ink); -webkit-box-shadow: 0 0 0 60px var(--pv-field) inset; }
.pv-eye { position: absolute; right: 10px; top: 50%; margin-top: -19px; width: 38px; height: 38px; border: 0; background: transparent; color: #55606b; cursor: pointer; border-radius: 10px; display: grid; place-items: center; }
.pv-eye svg { width: 20px; height: 20px; }
.pv-eye:hover { background: rgba(0,0,0,.04); }

.pv-forgot { display: block; margin-top: 15px; text-align: right; font-size: 12.5px; line-height: 18px; font-weight: 500; color: #895a23; text-decoration: underline; text-underline-offset: 2px; }

.pv-remember { margin-top: 24px; display: flex; align-items: center; gap: 17px; width: fit-content; font-size: 14px; line-height: 22px; color: #888f96; cursor: pointer; user-select: none; }
.pv-remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.pv-box { width: 22px; height: 22px; border-radius: 5px; background: #946728; display: grid; place-items: center; color: #fff; flex: none; transition: background .15s, box-shadow .15s; }
.pv-box svg { width: 14px; height: 14px; }
.pv-remember input:not(:checked) + .pv-box { background: var(--pv-field); box-shadow: inset 0 0 0 1.5px #cfcbc2; }
.pv-remember input:not(:checked) + .pv-box svg { opacity: 0; }
.pv-remember input:focus-visible + .pv-box { box-shadow: 0 0 0 4px rgba(185,138,69,.22); }

.pv-btn { margin-top: 40px; position: relative; width: 100%; height: 58px; border: 0; border-radius: 12px; background: var(--pv-btn); color: #fff; font: 600 17px var(--pv-font); display: flex; align-items: center; justify-content: center; gap: 16px; cursor: pointer; box-shadow: 0 12px 26px -10px rgba(12,22,27,.55), inset 0 1px 0 rgba(255,255,255,.07); transition: transform .15s, box-shadow .2s, background .2s; }
.pv-btn svg { width: 20px; height: 20px; }
.pv-btn:hover { background: #111f26; transform: translateY(-1px); box-shadow: 0 16px 30px -10px rgba(12,22,27,.6), inset 0 1px 0 rgba(255,255,255,.08); }
.pv-btn:active { transform: none; }
.pv-btn:focus-visible { outline: 3px solid rgba(185,138,69,.5); outline-offset: 3px; }
.pv-btn:disabled { opacity: .75; cursor: progress; transform: none; }
.pv-btn .pv-spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff; animation: pvSpin .7s linear infinite; }
.pv-btn.is-loading .pv-spin { display: block; }
.pv-btn.is-loading .pv-btn-i { display: none; }
@keyframes pvSpin { to { transform: rotate(360deg); } }

.pv-or { margin-top: 27px; height: 20px; display: flex; align-items: center; gap: 16px; padding: 0 17px; font-size: 12px; letter-spacing: .06em; color: #a1a9af; }
.pv-or::before, .pv-or::after { content: ''; flex: 1; height: 1px; background: #e6e3dc; }

.pv-social { margin-top: 25px; width: 100%; height: 55px; display: flex; align-items: center; justify-content: center; gap: 12px; background: #fcfbf9; border: 1px solid var(--pv-line); border-radius: 12px; font: 500 15px var(--pv-font); color: #11181f; cursor: pointer; box-shadow: 0 1px 2px rgba(60,40,10,.035); transition: border-color .15s, background .15s; }
.pv-social + .pv-social { margin-top: 15px; }
.pv-social:hover { background: #fff; border-color: #cfd2d4; }
.pv-social:focus-visible { outline: 3px solid rgba(185,138,69,.4); outline-offset: 2px; }
.pv-social svg { width: 22px; height: 22px; }

.pv-note { margin-top: 12px; display: none; font-size: 12.5px; line-height: 18px; color: #7a5712; background: #fbf4e4; border: 1px solid #ecdcae; border-radius: 10px; padding: 9px 12px; }
.pv-note.show { display: block; }

.pv-terms { margin-top: 54px; text-align: center; font-size: 12px; line-height: 27px; color: #6a737d; }
.pv-terms a { color: #996633; text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================
   MOBILE / TABLET  (< 1024px)
   ========================================================= */
@media (max-width: 1023px) {
    .pv-bg { display: none; }
    body.pv-body { background: #050d0f; }
    .pv-stage { display: block; padding: 0; min-height: 100vh; min-height: 100dvh; }
    .pv-card { display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; min-height: 100vh; min-height: 100dvh; }

    /* dark header on top */
    .pv-mhead { display: block; order: 0; position: relative; padding: 28px 22px 62px; color: #fff;
        background: radial-gradient(280px 170px at 100% 0, rgba(214,170,90,.20), transparent 70%), linear-gradient(180deg, #091113, #030b0e); }
    .pv-mhead .pv-badge { margin-top: 22px; }
    .pv-brand-name { font-size: 24px; }

    /* hide desktop-only brand + badge inside the showcase */
    .pv-left .pv-brand, .pv-left .pv-badge { display: none; }

    /* form sheet */
    .pv-right { order: 1; position: relative; z-index: 2; margin-top: -30px; border-radius: 28px 28px 0 0; padding: 26px 22px 62px; }
    .pv-top { margin-right: 0; font-size: 13px; }
    .pv-title { margin-top: 26px; font-size: 32px; line-height: 38px; }
    .pv-title .pv-wave { font-size: 28px; }
    .pv-sub { font-size: 15.5px; line-height: 23px; margin-top: 8px; max-width: none; }
    .pv-form .pv-label:first-of-type { margin-top: 28px; }
    .pv-alert + .pv-form .pv-label:first-of-type { margin-top: 22px; }
    .pv-label { margin-top: 22px; margin-bottom: 10px; font-size: 15px; }
    .pv-input { height: 54px; font-size: 16px; }
    .pv-btn { margin-top: 30px; height: 56px; }
    .pv-or { margin-top: 24px; }
    .pv-social { margin-top: 20px; height: 54px; }
    .pv-social + .pv-social { margin-top: 12px; }
    .pv-terms { margin-top: 30px; line-height: 24px; }

    /* showcase below the form */
    .pv-left { order: 2; position: relative; z-index: 3; margin-top: -30px; border-radius: 28px 28px 0 0; padding: 40px 24px 0; flex: 1 0 auto; background: linear-gradient(180deg, #091113 0%, #071011 12%, #030b0e 26%, #050d0f 100%); }
    .pv-strip { display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 0; aspect-ratio: 568 / 600; pointer-events: none; background: url('../img/paynova/top-m.webp') -3px -3px / calc(100% + 6px) calc(100% + 6px) no-repeat;
        -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
    .pv-left > .pv-strip { position: absolute; }
    .pv-h1 { margin-top: 0; font-size: 32px; line-height: 36px; }
    .pv-p { margin-top: 12px; font-size: 15px; line-height: 23px; max-width: none; }
    .pv-feats { margin-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .pv-feat, .pv-feat:nth-child(2), .pv-feat:nth-child(3) { width: auto; }
    .pv-feat-txt { font-size: 12px; }
    .pv-art { margin-left: -24px; margin-right: -24px; margin-top: 14px; aspect-ratio: 568 / 410;
        background: url('../img/paynova/art-m.webp') center / 100% 100% no-repeat;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 24px), transparent 100%); }
    .pv-foot { padding-bottom: 34px; font-size: 11.5px; }
}
@media (max-width: 380px) {
    .pv-title { font-size: 29px; line-height: 35px; }
    .pv-h1 { font-size: 28px; line-height: 33px; }
    .pv-badge { font-size: 12.5px; padding-right: 14px; }
    .pv-feat-txt { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .pv-btn, .pv-input { transition: none; }
    .pv-btn .pv-spin { animation-duration: 1.6s; }
}