/* =========================================================================
 | Auth App Shell — phone-first sign-in for the mobile wallet
 |
 | Mobile is the design target, not the fallback: every auth screen is a
 | full-height app screen with one job, a thumb-reachable keypad, and safe
 | -area padding so it sits correctly under a notch and above a home bar.
 | Widths above 560px simply centre the same screen in a card.
 |
 | Colours are read from the site palette (_variables.css + the admin theme
 | component) so a brand-colour change in admin flows straight through here.
 ========================================================================= */

:root {
    --pa-brand: var(--front-color-primary, #4663ee);
    --pa-brand-rgb: var(--front-color-primary-rgb, 70, 99, 238);
    --pa-brand-dark: var(--front-color-primary-hover, #354ccc);
    --pa-accent: var(--front-color-accent, var(--front-color-success, #16a34a));
    --pa-bg: var(--front-color-bg, #f3f7fb);
    --pa-card: var(--front-color-card, #ffffff);
    --pa-surface: var(--front-color-surface, #f8faff);
    --pa-ink: var(--front-color-heading, #101828);
    --pa-text: var(--front-color-text, #374151);
    --pa-muted: var(--front-color-muted, #6b7280);
    --pa-line: var(--front-color-border, #e3e7ff);
    --pa-danger: var(--front-color-danger, #ef4444);
    --pa-danger-rgb: var(--front-color-danger-rgb, 239, 68, 68);

    --pa-radius: 22px;
    --pa-radius-sm: 14px;
    --pa-shadow: 0 18px 40px rgba(16, 24, 40, .10);
    --pa-shadow-key: 0 1px 2px rgba(16, 24, 40, .06);

    --pa-safe-top: env(safe-area-inset-top, 0px);
    --pa-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Screen ---------------------------------------------------- */

.pa-screen {
    min-height: 100svh;               /* svh: ignores the collapsing URL bar */
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(var(--pa-brand-rgb), .16) 0%, rgba(var(--pa-brand-rgb), 0) 62%),
        var(--pa-bg);
    padding: calc(var(--pa-safe-top) + 18px) 18px calc(var(--pa-safe-bottom) + 18px);
    font-family: var(--front-font-primary, 'Plus Jakarta Sans', system-ui, sans-serif);
    color: var(--pa-text);
}

.pa-screen__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
}

/* ---------- Top bar --------------------------------------------------- */

.pa-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    min-height: 40px;
}

.pa-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--pa-brand-rgb), .08);
    color: var(--pa-brand);
    font-size: 16px;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}
.pa-back:hover, .pa-back:focus-visible { background: rgba(var(--pa-brand-rgb), .16); color: var(--pa-brand); }
.pa-back:active { transform: scale(.92); }

.pa-steps { display: flex; gap: 6px; margin-inline-start: auto; }
.pa-steps__dot {
    width: 22px; height: 4px; border-radius: 99px;
    background: rgba(var(--pa-brand-rgb), .18);
    transition: background .3s ease, width .3s ease;
}
.pa-steps__dot.is-active { width: 30px; background: var(--pa-brand); }
.pa-steps__dot.is-done { background: rgba(var(--pa-brand-rgb), .55); }

/* ---------- Brand ----------------------------------------------------- */

.pa-brand { text-align: center; margin-bottom: 22px; }

.pa-brand__logo {
    height: 46px; width: auto; max-width: 190px;
    object-fit: contain;
    margin-bottom: 16px;
    animation: pa-drop .5s cubic-bezier(.2, .9, .3, 1.2) both;
}

.pa-brand__title {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--pa-ink);
    animation: pa-rise .45s .05s cubic-bezier(.2, .8, .3, 1) both;
}

.pa-brand__subtitle {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--pa-muted);
    animation: pa-rise .45s .1s cubic-bezier(.2, .8, .3, 1) both;
}
.pa-brand__subtitle strong { color: var(--pa-ink); font-weight: 700; }

/* ---------- Sheet ----------------------------------------------------- */

.pa-sheet {
    background: var(--pa-card);
    border: 1px solid var(--pa-line);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow);
    padding: 20px 18px;
    animation: pa-sheet-in .5s .08s cubic-bezier(.2, .8, .3, 1) both;
}

.pa-sheet + .pa-sheet { margin-top: 14px; }

/* ---------- Fields ---------------------------------------------------- */

.pa-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pa-ink);
}

.pa-phone {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--pa-line);
    border-radius: var(--pa-radius-sm);
    background: var(--pa-surface);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.pa-phone:focus-within {
    border-color: var(--pa-brand);
    box-shadow: 0 0 0 4px rgba(var(--pa-brand-rgb), .12);
}
.pa-phone.is-invalid { border-color: var(--pa-danger); }

.pa-phone__cc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 0;
    border-inline-end: 1.5px solid var(--pa-line);
    background: transparent;
    color: var(--pa-ink);
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    /* The native select is the picker; this element only shows the choice. */
    appearance: none;
}
.pa-phone__cc:focus { outline: none; }

.pa-phone__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 15px 14px;
    border: 0;
    background: transparent;
    color: var(--pa-ink);
    font: inherit;
    font-size: 17px;              /* >=16px so iOS Safari never zooms on focus */
    font-weight: 600;
    letter-spacing: .02em;
}
.pa-phone__input:focus { outline: none; }
.pa-phone__input::placeholder { color: var(--pa-muted); font-weight: 500; letter-spacing: 0; }

.pa-input {
    width: 100%;
    padding: 15px 14px;
    border: 1.5px solid var(--pa-line);
    border-radius: var(--pa-radius-sm);
    background: var(--pa-surface);
    color: var(--pa-ink);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.pa-input:focus {
    outline: none;
    border-color: var(--pa-brand);
    box-shadow: 0 0 0 4px rgba(var(--pa-brand-rgb), .12);
}
.pa-input::placeholder { color: var(--pa-muted); font-weight: 500; }

.pa-field + .pa-field { margin-top: 14px; }

.pa-hint { margin: 8px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--pa-muted); }

.pa-error {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(var(--pa-danger-rgb), .09);
    color: var(--pa-danger);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    animation: pa-rise .3s cubic-bezier(.2, .8, .3, 1) both;
}

/* ---------- PIN dots -------------------------------------------------- */

.pa-pin { text-align: center; }

.pa-pin__dots {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 4px 0 18px;
}

.pa-pin__dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid rgba(var(--pa-brand-rgb), .30);
    transition: transform .18s cubic-bezier(.2, .9, .3, 1.4), background .18s ease, border-color .18s ease;
}
.pa-pin__dot.is-filled {
    background: var(--pa-brand);
    border-color: var(--pa-brand);
    transform: scale(1.18);
}

.pa-pin.is-error .pa-pin__dots { animation: pa-shake .45s cubic-bezier(.36, .07, .19, .97) both; }
.pa-pin.is-error .pa-pin__dot { border-color: var(--pa-danger); background: var(--pa-danger); }

/* ---------- Keypad ---------------------------------------------------- */

.pa-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 320px;
    margin: 0 auto;
}

.pa-key {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pa-line);
    border-radius: 18px;
    background: var(--pa-card);
    box-shadow: var(--pa-shadow-key);
    color: var(--pa-ink);
    font-family: var(--front-font-mono, 'JetBrains Mono', monospace);
    font-size: 24px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .1s ease, background .16s ease, border-color .16s ease;
}
.pa-key:active,
.pa-key.is-pressed {
    transform: scale(.94);
    background: rgba(var(--pa-brand-rgb), .10);
    border-color: rgba(var(--pa-brand-rgb), .35);
}
.pa-key--ghost { background: transparent; border-color: transparent; box-shadow: none; font-size: 20px; color: var(--pa-muted); }
.pa-key--ghost:active { background: rgba(var(--pa-brand-rgb), .08); }

/* ---------- Buttons --------------------------------------------------- */

.pa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 54px;
    padding: 15px 18px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--pa-brand) 0%, var(--pa-brand-dark) 100%);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(var(--pa-brand-rgb), .28);
    transition: transform .14s ease, box-shadow .2s ease, opacity .2s ease;
}
.pa-btn:hover { color: #fff; }
.pa-btn:active { transform: translateY(1px) scale(.99); box-shadow: 0 6px 14px rgba(var(--pa-brand-rgb), .24); }
.pa-btn[disabled], .pa-btn.is-disabled { opacity: .45; box-shadow: none; cursor: not-allowed; transform: none; }

.pa-btn--ghost {
    background: transparent;
    color: var(--pa-brand);
    box-shadow: none;
    border: 1.5px solid rgba(var(--pa-brand-rgb), .28);
    min-height: 48px;
    font-size: 15px;
}
.pa-btn--ghost:hover { color: var(--pa-brand); background: rgba(var(--pa-brand-rgb), .06); }

.pa-btn__spinner {
    width: 18px; height: 18px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pa-spin .7s linear infinite;
    display: none;
}
.pa-btn.is-loading .pa-btn__spinner { display: block; }
.pa-btn.is-loading .pa-btn__label { opacity: .75; }

.pa-actions { margin-top: 18px; }
.pa-actions .pa-btn + .pa-btn { margin-top: 10px; }

/* ---------- Secondary links ------------------------------------------ */

.pa-alt {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    color: var(--pa-muted);
}
.pa-alt a { color: var(--pa-brand); font-weight: 700; text-decoration: none; }
.pa-alt a:hover { text-decoration: underline; }

.pa-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 14px;
    color: var(--pa-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.pa-divider::before, .pa-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--pa-line);
}

/* ---------- Footer / attribution -------------------------------------- */

.pa-footer {
    margin-top: 22px;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: var(--pa-muted);
}
.pa-footer a { color: inherit; font-weight: 700; text-decoration: none; }
.pa-footer a:hover { color: var(--pa-brand); }

/* ---------- Resend timer ---------------------------------------------- */

.pa-resend { margin-top: 16px; text-align: center; font-size: 13.5px; color: var(--pa-muted); }
.pa-resend button {
    border: 0; background: none; padding: 0;
    color: var(--pa-brand); font: inherit; font-weight: 700; cursor: pointer;
}
.pa-resend button[disabled] { color: var(--pa-muted); cursor: default; }

/* ---------- Animations ------------------------------------------------ */

@keyframes pa-rise   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pa-drop   { from { opacity: 0; transform: translateY(-12px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes pa-sheet-in { from { opacity: 0; transform: translateY(22px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pa-spin   { to { transform: rotate(360deg); } }
@keyframes pa-shake  {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-7px); }
    40%, 60% { transform: translateX(7px); }
}

/* Motion is decoration here — every screen is fully usable without it. */
@media (prefers-reduced-motion: reduce) {
    .pa-brand__logo, .pa-brand__title, .pa-brand__subtitle, .pa-sheet, .pa-error { animation: none; }
    .pa-pin.is-error .pa-pin__dots { animation: none; }
    .pa-key, .pa-btn, .pa-pin__dot { transition: none; }
}

/* ---------- Larger screens: same screen, centred ---------------------- */

@media (min-width: 576px) {
    .pa-screen { padding-block: 40px; }
    .pa-sheet { padding: 26px 24px; }
    .pa-brand__logo { height: 52px; }
    .pa-brand__title { font-size: 26px; }
}