/* fotifypay — sign-up / log-in pages.
   Shared between /sign-up/ and /log-in/. Brand palette matches the main
   WordPress vitrine (primary #1A4DBE, accent #1F9D55, bg #F5FAFF). */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    min-height: 100vh;
    font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #04081A;
    background: radial-gradient(1100px 600px at 50% -10%, #E7F0FF 0%, #F5FAFF 55%, #F5FAFF 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.auth-header {
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-header a.logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.auth-header img { height: 28px; width: auto; display: block; }

/* ── Main card ──────────────────────────────────────────────────────────── */
.auth-main {
    display: grid;
    place-items: start center;
    padding: 24px 24px 64px;
}
.auth-card {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border: 1px solid #DDE3EE;
    border-radius: 16px;
    padding: 38px 36px 32px;
    box-shadow: 0 8px 40px rgba(10, 16, 35, 0.08);
}
.auth-card h1 {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.3px;
    text-align: center;
}
.auth-card .auth-sub {
    margin: 0 0 24px;
    color: #6B7080;
    font-size: 14px;
    text-align: center;
}
.auth-card .auth-sub a {
    color: #1A4DBE;
    font-weight: 700;
    text-decoration: none;
}
.auth-card .auth-sub a:hover { text-decoration: underline; }

/* ── OAuth buttons ──────────────────────────────────────────────────────── */
.auth-oauth { display: grid; gap: 10px; margin-bottom: 22px; }
.btn-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 18px;
    border: 1px solid #DDE3EE;
    border-radius: 10px;
    background: #fff;
    color: #04081A;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.btn-oauth:hover { border-color: #1A4DBE; background: #F5FAFF; }
.btn-oauth:active { transform: translateY(1px); }
.btn-oauth[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}
.btn-oauth[aria-disabled="true"]:hover {
    border-color: #DDE3EE;
    background: #fff;
}
.btn-oauth svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-oauth--apple {
    background: #04081A;
    border-color: #04081A;
    color: #fff;
}
.btn-oauth--apple:hover { background: #1A1F33; border-color: #1A1F33; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 22px;
    color: #6B7080;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #DDE3EE;
}

/* ── Form fields ────────────────────────────────────────────────────────── */
.auth-form { display: grid; gap: 14px; }
/* `display: grid` above overrides the user-agent `[hidden] { display: none }`
   rule; re-assert it so the reset form stays hidden until the token check
   succeeds. */
.auth-form[hidden] { display: none; }
.auth-field { display: grid; gap: 6px; }
.auth-field label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6B7080;
}
.auth-field .input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}
.auth-field input {
    flex: 1;
    width: 100%;
    padding: 12px 44px 12px 14px;
    border: 1px solid #DDE3EE;
    border-radius: 10px;
    background: #F5FAFF;
    color: #04081A;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s;
}
.auth-field input::placeholder { color: #9AA0AE; }
.auth-field input:focus {
    outline: none;
    border-color: #1A4DBE;
    background: #fff;
}
.auth-field input[aria-invalid="true"] {
    border-color: #DC2626;
    background: #FEF2F2;
}
.auth-field .field-hint {
    font-size: 12.5px;
    color: #6B7080;
}
.auth-field .field-error {
    font-size: 12.5px;
    color: #DC2626;
    min-height: 16px;
}

.toggle-visibility {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6B7080;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.toggle-visibility:hover { color: #1A4DBE; background: rgba(26, 77, 190, 0.06); }
.toggle-visibility svg { width: 18px; height: 18px; }

/* ── Remember / forgot row ──────────────────────────────────────────────── */
.auth-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-top: 2px;
    flex-wrap: wrap;
    gap: 8px;
}
.auth-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6B7080;
    cursor: pointer;
}
.auth-row input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #DDE3EE;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
}
.auth-row input[type="checkbox"]:checked {
    background: #1A4DBE;
    border-color: #1A4DBE;
}
.auth-row input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px; top: 1px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.auth-row a {
    color: #1A4DBE;
    font-weight: 700;
    text-decoration: none;
}
.auth-row a:hover { text-decoration: underline; }

/* ── Submit button ──────────────────────────────────────────────────────── */
.auth-submit {
    margin-top: 12px;
    width: 100%;
    padding: 14px 22px;
    border: none;
    border-radius: 10px;
    background: #1A4DBE;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s, opacity 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.auth-submit:hover { background: #133B95; }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.auth-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-spin 0.7s linear infinite;
    display: none;
}
.is-loading .auth-spinner { display: inline-block; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* ── Server-side messages ───────────────────────────────────────────────── */
.auth-notice {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.45;
    display: none;
}
.auth-notice--error  { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; }
.auth-notice--success { background: #F0FDF4; border: 1px solid #BBF7D0; color: #15803D; }
.auth-notice.is-visible { display: block; }

/* ── Footer link ────────────────────────────────────────────────────────── */
.auth-footer {
    margin-top: 18px;
    font-size: 13.5px;
    color: #6B7080;
    text-align: center;
}
.auth-footer a {
    color: #1A4DBE;
    font-weight: 700;
    text-decoration: none;
}
.auth-footer a:hover { text-decoration: underline; }

.auth-fineprint {
    margin-top: 16px;
    font-size: 11.5px;
    color: #9AA0AE;
    text-align: center;
    line-height: 1.5;
}
.auth-fineprint a {
    color: #6B7080;
    text-decoration: underline;
    text-decoration-color: rgba(107, 112, 128, 0.4);
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .auth-card { padding: 28px 22px 24px; border-radius: 14px; }
    .auth-card h1 { font-size: 22px; }
    .auth-header { padding: 16px; }
}