/* ============================================================
   SitePex auth pages — register.php + login.php
   Light, blue-brand, matches the checkout. No social SSO.
   ============================================================ */
:root {
    --spx-blue:   #2563eb;
    --spx-blue-d: #1d4fd7;
    --spx-ink:    #0f1b33;
    --spx-muted:  #6b7688;
    --spx-line:   #e4e9f2;
    --spx-bg:     #eef2f8;
    --spx-card:   #ffffff;
    --spx-green:  #009e5b;
    --spx-error:  #d64550;
}

* { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--spx-bg);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--spx-ink);
    -webkit-font-smoothing: antialiased;
}

.checkout-header-inner {
    padding: 0 44px 68px;
}

.spx-auth-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 28px 20px 60px;
}

.spx-auth-back {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: var(--spx-ink);
    text-decoration: none; margin-bottom: 18px;
}
.spx-auth-back:hover { color: var(--spx-blue); }

.spx-auth-card {
    background: var(--spx-card);
    border: 1px solid var(--spx-line);
    border-radius: 20px;
    padding: 38px 34px 34px;
    box-shadow: 0 18px 50px rgba(15,27,51,.06);
}

.spx-auth-title {
    margin: 0 0 26px;
    text-align: center;
    font-size: 30px; font-weight: 800; letter-spacing: -.4px;
}

.spx-field { margin-bottom: 18px; }
.spx-field label {
    display: block; margin-bottom: 7px;
    font-size: 13.5px; font-weight: 600; color: #45506a;
}
.spx-field .opt { font-weight: 500; color: var(--spx-muted); }

.spx-input-wrap { position: relative; }
.spx-input {
    width: 100%;
    padding: 13px 14px;
    font-size: 15px; color: var(--spx-ink);
    background: #fff;
    border: 1.5px solid var(--spx-line);
    border-radius: 11px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.spx-input:focus { border-color: var(--spx-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.spx-input.is-invalid { border-color: var(--spx-error); }

.spx-pw-toggle {
    position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
    background: none; border: 0; cursor: pointer; color: #9aa3b5; line-height: 0;
    padding: 4px;
}
.spx-pw-toggle:hover { color: #5b6478; }

.spx-consent {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 6px 0 22px; font-size: 12.5px; line-height: 1.5; color: var(--spx-muted);
}
.spx-consent input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--spx-blue); flex: 0 0 auto; }
.spx-consent a { color: var(--spx-blue); }

.spx-btn {
    width: 100%; border: 0; cursor: pointer;
    background: linear-gradient(90deg, var(--spx-blue), var(--spx-blue-d));
    color: #fff; font-size: 16px; font-weight: 700;
    padding: 14px; border-radius: 12px;
    box-shadow: 0 10px 22px rgba(37,99,235,.24);
    transition: transform .12s ease, box-shadow .15s ease, opacity .15s;
}
.spx-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(37,99,235,.3); }
.spx-btn:active { transform: none; }
.spx-btn[disabled] { opacity: .65; cursor: default; transform: none; box-shadow: none; }

.spx-auth-alt {
    text-align: center; margin: 20px 0 0; font-size: 14.5px; color: var(--spx-ink);
}
.spx-auth-alt a { color: var(--spx-blue); font-weight: 700; text-decoration: none; }
.spx-auth-alt a:hover { text-decoration: underline; }

.spx-forgot { display: block; margin: -4px 0 20px; font-size: 13.5px; color: var(--spx-blue); font-weight: 600; text-decoration: none; }
.spx-forgot:hover { text-decoration: underline; }

.spx-auth-fine {
    margin: 22px 0 0; font-size: 12px; line-height: 1.6; color: #9aa3b5; text-align: center;
}
.spx-auth-fine a { color: #7c8698; text-decoration: underline; }

/* server message banner */
.spx-msg {
    margin: 0 0 18px; padding: 11px 14px; border-radius: 10px;
    font-size: 13.5px; line-height: 1.45;
}
.spx-msg-error   { background: #fdecee; color: #a4313b; border: 1px solid #f6cfd3; }
.spx-msg-error a { color: #a4313b; font-weight: 700; }
.spx-msg-ok        { background: #eafaf2; color: #0a6b45; border: 1px solid #bfe9d5; }
.spx-msg-ok strong { color: #084f34; }

.spx-auth-hint { margin: 0 0 22px; text-align: center; font-size: 14.5px; color: var(--spx-muted); line-height: 1.5; }

@media (max-width: 480px) {
    .spx-auth-card { padding: 30px 22px 28px; border-radius: 16px; }
    .spx-auth-title { font-size: 26px; }
}