/* ═══════════════════════════════════════════════════════════════════════════
   Auth Page — RelyShield 2026
   Modern passwordless-first authentication UI
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --auth-bg: var(--rs-bg, #f5f7fa);
    --auth-card: var(--rs-surface-solid, #ffffff);
    --auth-primary: var(--rs-accent, #2E7B7A);
    --auth-primary-dark: var(--rs-brand-teal-hover, #245e5d);
    --auth-primary-light: rgba(46, 123, 122, 0.10);
    --auth-text: var(--rs-text, #0b2236);
    --auth-text-muted: var(--rs-muted, #64748b);
    --auth-text-subtle: #94a3b8;
    --auth-border: var(--rs-border, #e2e8f0);
    --auth-error: var(--rs-danger, #dc2626);
    --auth-error-bg: var(--rs-danger-bg, #fef2f2);
    --auth-info-bg: #eff6ff;
    --auth-info-text: #1e40af;
    --auth-radius: var(--rs-radius, 16px);
    --auth-radius-sm: var(--rs-radius-sm, 12px);
    --auth-radius-input: var(--rs-input-radius, 14px);
    --auth-shadow: var(--rs-shadow-soft, 0 8px 40px rgba(11, 34, 54, 0.08));
    --auth-transition: var(--rs-transition-base, 0.2s ease);
    --auth-font-body: var(--rs-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
    --auth-font-heading: var(--rs-font-heading, var(--auth-font-body));
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.auth-body {
    min-height: 100dvh;
    background: var(--auth-bg);
    background-image: radial-gradient(ellipse at 30% 0%, rgba(46,123,122,0.06) 0%, transparent 60%),
                      radial-gradient(ellipse at 70% 100%, rgba(46,123,122,0.04) 0%, transparent 60%);
    font-family: var(--auth-font-body);
    color: var(--auth-text);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: max(env(safe-area-inset-top, 0px), 5vh);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.auth-wrapper {
    width: 100%;
    max-width: 420px;
    padding: 24px 16px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-logo {
    display: block;
    margin-bottom: 32px;
}
.auth-logo img {
    height: 36px;
    width: auto;
}

.auth-card {
    width: 100%;
    background: var(--auth-card);
    border-radius: var(--auth-radius);
    box-shadow: var(--auth-shadow);
    padding: 40px 32px 36px;
    position: relative;
    overflow: hidden;
}

/* ── Steps ──────────────────────────────────────────────────────────────── */

.auth-step {
    animation: authFadeIn 0.25s ease;
}
.auth-step[hidden] { display: none !important; }

@keyframes authFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Icon ───────────────────────────────────────────────────────────────── */

.auth-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

/* ── Typography ─────────────────────────────────────────────────────────── */

.auth-title {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--auth-font-heading);
    letter-spacing: -0.3px;
    text-align: center;
    margin-bottom: 8px;
    line-height: 1.3;
}

.auth-subtitle {
    font-size: 14px;
    color: var(--auth-text-muted);
    text-align: center;
    margin-bottom: 28px;
    line-height: 1.5;
}
.auth-subtitle strong {
    color: var(--auth-text);
    word-break: break-all;
}

/* ── Back button ────────────────────────────────────────────────────────── */

.auth-back {
    position: absolute;
    top: 16px;
    left: 16px;
    background: none;
    border: none;
    color: var(--auth-text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: 10px;
    transition: background var(--auth-transition), color var(--auth-transition);
    line-height: 0;
}
.auth-back:hover {
    background: var(--auth-primary-light);
    color: var(--auth-primary);
}

/* ── Form ───────────────────────────────────────────────────────────────── */

.auth-form { width: 100%; }

.auth-field {
    position: relative;
    margin-bottom: 16px;
}

.auth-input {
    width: 100%;
    height: 52px;
    padding: 0 44px 0 16px;
    font-size: 16px;
    font-family: inherit;
    color: var(--auth-text);
    background: #f8fafc;
    border: 1.5px solid var(--auth-border);
    border-radius: var(--auth-radius-input);
    outline: none;
    transition: border-color var(--auth-transition), box-shadow var(--auth-transition), background var(--auth-transition);
    -webkit-appearance: none;
    appearance: none;
}
.auth-input::placeholder { color: var(--auth-text-subtle); }
.auth-input:focus {
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 3px rgba(46,123,122,0.12);
    background: #fff;
}
.auth-input.auth-input--error {
    border-color: var(--auth-error);
    box-shadow: 0 0 0 3px rgba(220,38,38,0.08);
}

.auth-field-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--auth-text-subtle);
    pointer-events: none;
    line-height: 0;
}

/* ── Password toggle ────────────────────────────────────────────────────── */

.auth-field--password .auth-input { padding-right: 48px; }

.auth-toggle-pw {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--auth-text-subtle);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: color var(--auth-transition);
    line-height: 0;
}
.auth-toggle-pw:hover { color: var(--auth-primary); }

/* ── OTP Code inputs ────────────────────────────────────────────────────── */

.auth-code-inputs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
    align-items: center;
}

.auth-code-dash {
    color: var(--auth-text-subtle);
    font-size: 20px;
    font-weight: 300;
    padding: 0 2px;
    user-select: none;
}

.auth-code-input {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    color: var(--auth-text);
    background: #f8fafc;
    border: 1.5px solid var(--auth-border);
    border-radius: var(--auth-radius-sm);
    outline: none;
    transition: border-color var(--auth-transition), box-shadow var(--auth-transition), background var(--auth-transition);
    caret-color: var(--auth-primary);
    -webkit-appearance: none;
    appearance: none;
}
.auth-code-input:focus {
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 3px rgba(46,123,122,0.12);
    background: #fff;
}
.auth-code-input.auth-code-input--filled {
    border-color: var(--auth-primary);
    background: var(--auth-primary-light);
}
.auth-code-input.auth-code-input--error {
    border-color: var(--auth-error);
    animation: authShake 0.4s ease;
}

@keyframes authShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.auth-btn {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: var(--auth-radius-input);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all var(--auth-transition);
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    text-decoration: none;
}

.auth-btn--primary {
    background: linear-gradient(135deg, var(--auth-primary) 0%, var(--auth-primary-dark) 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(46,123,122,0.25);
}
.auth-btn--primary:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(46,123,122,0.35);
    transform: translateY(-1px);
}
.auth-btn--primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(46,123,122,0.2);
}
.auth-btn--primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.auth-btn--google {
    background: #fff;
    color: var(--auth-text);
    border: 1.5px solid var(--auth-border);
}
.auth-btn--google:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.auth-btn--google svg { flex-shrink: 0; }

.auth-btn__spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: authSpin 0.6s linear infinite;
}
.auth-btn__spinner[hidden] { display: none; }

@keyframes authSpin {
    to { transform: rotate(360deg); }
}

/* ── Dividers ───────────────────────────────────────────────────────────── */

.auth-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
    color: var(--auth-text-subtle);
    font-size: 13px;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--auth-border);
}

.auth-divider--subtle {
    margin: 20px 0 12px;
}

/* ── Links ──────────────────────────────────────────────────────────────── */

.auth-link {
    background: none;
    border: none;
    color: var(--auth-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    padding: 6px 0;
    display: block;
    text-align: center;
    width: 100%;
    transition: color var(--auth-transition);
    text-decoration: none;
}
.auth-link:hover { color: var(--auth-primary-dark); text-decoration: underline; }
.auth-link:disabled { color: var(--auth-text-subtle); cursor: default; text-decoration: none; }
.auth-link--password { font-size: 14px; font-weight: 500; }

.auth-actions {
    text-align: center;
    margin-top: 16px;
}

.auth-actions--sm {
    margin-top: 12px;
}

.auth-actions--lg {
    margin-top: 24px;
}

/* ── Hint ───────────────────────────────────────────────────────────────── */

.auth-hint {
    font-size: 13px;
    color: var(--auth-text-muted);
    margin: -8px 0 16px;
    padding: 0 4px;
    line-height: 1.5;
}
.auth-hint[hidden] { display: none; }

.auth-hint--centered {
    text-align: center;
}

.auth-hint--spaced {
    margin: 16px 0 0;
}

/* ── Error / Info ───────────────────────────────────────────────────────── */

.auth-error {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--auth-radius-sm);
    background: var(--auth-error-bg);
    color: var(--auth-error);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    animation: authFadeIn 0.2s ease;
}
.auth-error[hidden] { display: none; }

.auth-info {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--auth-radius-sm);
    background: var(--auth-info-bg);
    color: var(--auth-info-text);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}
.auth-info[hidden] { display: none; }

.auth-status-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
    font-weight: 700;
}

.auth-status-icon--success {
    background: #d1fae5;
    color: #065f46;
}

.auth-status-icon--error {
    background: #fee2e2;
    color: #991b1b;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.auth-footer {
    margin-top: 24px;
    font-size: 12px;
    color: var(--auth-text-subtle);
    text-align: center;
    line-height: 1.6;
}
.auth-footer a {
    color: var(--auth-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.auth-footer a:hover { color: var(--auth-primary); }

/* ── Desktop vertical centering (enough viewport height) ───────────────── */

@media (min-height: 640px) and (min-width: 481px) {
    .auth-body {
        align-items: center;
        padding-top: 0;
    }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .auth-body { padding-top: 16px; }
    .auth-wrapper { padding: 8px 12px 40vh; }
    .auth-card { padding: 28px 20px 24px; border-radius: var(--auth-radius-sm); }
    .auth-title { font-size: 20px; }
    .auth-code-input { width: 42px; height: 50px; font-size: 22px; }
    .auth-code-inputs { gap: 6px; }
    .auth-logo { margin-bottom: 16px; }
    .auth-logo img { height: 28px; }
}

/* ── Success animation ─────────────────────────────────────────────────── */

.auth-success {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 48px 0;
    animation: authFadeIn 0.3s ease;
}

.auth-success-icon {
    animation: authSuccessPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes authSuccessPop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ── In-app browser banner (shown by JS) ────────────────────────────────── */

.auth-inapp-notice {
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    display: none;
}
.auth-inapp-notice.is-visible { display: block; }