/*
 * Onboarding & Auth — standalone page styles
 * Used by: onboarding/*, auth/otp, auth/register_otp, select
 * Loaded directly alongside Bootstrap 5 CDN.
 */

/* ── Shared page backgrounds & card wrappers ──────────────────── */
.onboard-card  { max-width: 560px; margin: 3rem auto; }
.auth-card     { max-width: 440px; margin: 5rem auto; }
.login-card    { max-width: 400px; margin: 6rem auto; }
.select-card   { max-width: 520px; margin: 5rem auto; }

/* ── Step progress indicator ──────────────────────────────────── */
.step-badge {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #dee2e6; color: #6c757d;
    font-size: .8rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.step-badge.done   { background: #198754; color: #fff; }
.step-badge.active { background: #0d6efd; color: #fff; }
.step-line { flex: 1; height: 2px; background: #dee2e6; margin: 0 .5rem; }
.step-line.done { background: #198754; }

/* ── Section label ────────────────────────────────────────────── */
.section-label {
    font-size: .7rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: #6c757d;
    margin-bottom: .75rem; padding-bottom: .25rem;
    border-bottom: 1px solid #dee2e6;
}

/* ── NCALayer status bar ──────────────────────────────────────── */
.nca-status-bar {
    display: flex; align-items: center; gap: .6rem;
    padding: .65rem .9rem;
    border-radius: .5rem;
    background: #f8f9fa; border: 1px solid #e9ecef;
    font-size: .85rem;
}
.nca-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.nca-dot--connecting { background: #fd7e14; animation: ncaPulse 1.2s infinite; }
.nca-dot--ok         { background: #198754; }
.nca-dot--error      { background: #dc3545; }
@keyframes ncaPulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ── Cert confirmation box ────────────────────────────────────── */
.cert-confirmed {
    background: #d1e7dd; border-radius: .5rem;
    padding: .75rem 1rem; font-size: .85rem; color: #0a3622;
}

/* ── Pending — pulse icon ─────────────────────────────────────── */
.pulse-icon {
    width: 80px; height: 80px; border-radius: 50%;
    background: linear-gradient(135deg, #e7f0ff, #dbeafe);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.5rem;
    animation: pulseScale 2s ease-in-out infinite;
}
.pulse-icon .bi { font-size: 2.25rem; color: #0d6efd; }
@keyframes pulseScale {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.08); opacity: .85; }
}
.pending-status-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #fff3cd; color: #856404;
    font-size: .8rem; font-weight: 600;
    padding: .35rem .75rem;
    border-radius: 20px; border: 1px solid #ffc107;
}

/* ── OTP single input ─────────────────────────────────────────── */
.otp-input { font-size: 1.5rem; letter-spacing: 0.4em; text-align: center; }

/* ── OTP split cells (register flow) ─────────────────────────── */
.otp-cells { display: flex; gap: .6rem; justify-content: center; }
.otp-cell {
    width: 50px; height: 58px;
    border: 1.5px solid #dee2e6; border-radius: .375rem;
    text-align: center; font-size: 1.6rem; font-weight: 800;
    transition: border-color .15s;
}
.otp-cell:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13,110,253,.15);
    outline: none;
}

/* ── Merchant selector ────────────────────────────────────────── */
.merchant-row {
    display: flex; align-items: center; gap: 1rem;
    padding: .875rem 1rem;
    border: 1.5px solid #dee2e6; border-radius: .5rem;
    transition: border-color .15s, background .1s;
    cursor: pointer;
}
.merchant-row:hover  { border-color: #0d6efd; background: #f8fbff; }
.merchant-row.current { border-color: #0d6efd; background: #f0f6ff; }
.merchant-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: #212529; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 700; flex-shrink: 0;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.active                { background: #198754; }
.status-dot.pending_verification  { background: #ffc107; }
.status-dot.pending_manual_review { background: #fd7e14; }
.status-dot.verification_failed   { background: #dc3545; }
.status-dot.suspended             { background: #6c757d; }

/* ── Brand colour vars (auth/login and other standalone pages) ── */
:root {
    --brand:       #675eaa;
    --brand-hover: #5a5294;
}

/* ── Auth page wrapper ───────────────────────────────────────── */
.auth-wrap { max-width: 440px; margin: 5rem auto; padding: 0 1rem; }

/* ── Auth tab navigation ─────────────────────────────────────── */
.auth-tabs {
    display: flex; gap: 0;
    border-bottom: 2px solid #e0ddf0;
    margin-bottom: 0;
}
.auth-tab-btn {
    flex: 1; border: none; background: none;
    padding: .75rem .5rem;
    font-size: .88rem; font-weight: 600; color: #6c757d; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: color .15s, border-color .15s;
    display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.auth-tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }
.auth-tab-btn:hover:not(.active) { color: #495057; }

/* ── Auth panels ─────────────────────────────────────────────── */
.auth-panel { display: none; padding: 1.5rem; }
.auth-panel.active { display: block; }

/* ── Brand button (standalone/auth pages) ────────────────────── */
.btn-brand {
    background: var(--brand); border: none; color: #fff;
    padding: .6rem 1.25rem; border-radius: .375rem; font-weight: 600;
    transition: background .15s;
}
.btn-brand:hover { background: var(--brand-hover); color: #fff; }
.btn-brand:disabled { opacity: .65; }

/* ── QR placeholder (login page) ────────────────────────────── */
.qr-placeholder {
    width: 180px; height: 180px; margin: 0 auto;
    border: 2px dashed #c5bfe6; border-radius: 1rem;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .5rem; color: #8b82c0; background: #f8f7fd;
}
.qr-dot-grid {
    display: grid; grid-template-columns: repeat(7,1fr); gap: 3px;
    width: 112px; height: 112px; padding: 6px;
    background: #fff; border-radius: .5rem; border: 1px solid #e0ddf0;
}
.qr-dot { border-radius: 2px; background: var(--brand); opacity: var(--o, .15); }
.qr-scan-line {
    width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--brand), transparent);
    animation: qrScan 2s ease-in-out infinite;
}
@keyframes qrScan {
    0%, 100% { transform: translateY(-56px); opacity: 0; }
    30%, 70%  { opacity: 1; }
    50%       { transform: translateY(56px); }
}
.qr-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #fd7e14; animation: qrPulse 1.5s infinite;
}
@keyframes qrPulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Suspended page ──────────────────────────────────────────── */
.page-card { max-width: 480px; margin: 6rem auto; }
.suspend-icon {
    width: 80px; height: 80px; border-radius: 50%;
    background: #fff5f5;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.5rem;
    border: 2px solid #fecaca;
}
.suspend-icon .bi { font-size: 2.25rem; color: #dc3545; }