/* ============================================================
   MindStick Q&A — Auth Pages Stylesheet
   Covers: login, register, forgot password, reset password,
           change password, verification pages
   ============================================================ */

/* ── Spinner (ensures animation works even before main.js injects it) ── */
@keyframes gs-spin { to { transform: rotate(360deg); } }
.qa-spinner-rays {
    width: 16px;
    height: 16px;
    animation: gs-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-left: 6px;
    flex-shrink: 0;
}

/* ── Auth page wrapper ── */
.qa-auth-page {
    /*min-height: calc(80vh - (var(--nav-height) - 20px));*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8) var(--sp-4);
    background: var(--clr-bg);
}

.qa-auth-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-6);
    width: 100%;
    max-width: 480px;
}

/* ── Auth card ── */
.qa-auth-card {
    background: var(--clr-surface);
    border: var(--border-width) solid var(--clr-border);
    border-radius: var(--radius-xl);
    padding: var(--sp-8);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    box-shadow: var(--shadow-md);
}

.qa-auth-card__brand { text-align: center; }

.qa-auth-card__brand-name {
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    color: var(--clr-primary);
    letter-spacing: var(--tracking-tight);
}

.qa-auth-card__title {
    font-size: var(--text-2xl);
    font-weight: var(--fw-bold);
    color: var(--clr-text);
    text-align: center;
}

.qa-auth-card__subtitle {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    text-align: center;
    margin-top: calc(-1 * var(--sp-3));
}

/* ── Password label row (label + forgot link) ── */
.qa-auth-password-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-2);
}

.qa-auth-forgot {
    font-size: var(--text-xs);
    color: var(--clr-primary);
}

/* ── Remember me ── */
.qa-auth-remember {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
}

/* ── Submit button ── */
.qa-auth-submit {
    width: 100%;
    justify-content: center;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--text-base);
}

/* ── Or divider ── */
.qa-auth-divider {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
}

.qa-auth-divider::before,
.qa-auth-divider::after {
    content: '';
    flex: 1;
    height: var(--border-width);
    background: var(--clr-border);
}

/* ── Social login buttons ── */
.qa-auth-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
}

.qa-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    width: auto;
    min-width: 220px;
    padding: var(--sp-2-5, 10px) var(--sp-6, 24px);
    border-radius: var(--radius-lg);
    border: var(--border-width) solid var(--clr-border);
    background: var(--clr-surface);
    color: var(--clr-text);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
    line-height: 1;
}

.qa-social-btn:hover {
    background: var(--clr-surface-low, #f5f7fa);
    border-color: var(--clr-border-strong, #c0c8d8);
    box-shadow: var(--shadow-sm);
}

.qa-social-btn svg { flex-shrink: 0; }

/* ── Register / login link ── */
.qa-auth-register-link {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    text-align: center;
}

.qa-auth-register-link__cta {
    color: var(--clr-primary);
    font-weight: var(--fw-semibold);
}

/* ── Stats bar (login page) ── */
.qa-auth-stats {
    display: flex;
    justify-content: center;
    gap: var(--sp-8);
    padding: var(--sp-4);
    background: var(--clr-surface-low);
    border: var(--border-width) solid var(--clr-border);
    border-radius: var(--radius-lg);
    width: 100%;
}

/* ── Register page ── */
.qa-register-page {
    min-height: calc(100vh - var(--nav-height));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-8) var(--sp-4);
    background: var(--clr-bg);
}

.qa-register-layout {
    width: 100%;
    max-width: 720px;
}

.qa-register-card {
    width: 100%;
    box-shadow: var(--shadow-md);
}

.qa-register-card .qa-auth-card__title {
    text-align: left;
}

.qa-register-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}

.qa-register-row--3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

.qa-register-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

@media (min-width: 640px) {
    .qa-register-row--3 { grid-template-columns: 160px 1fr 1.5fr; }
}

@media (max-width: 500px) {
    .qa-register-row { grid-template-columns: 1fr; }
}

/* ── Forgot / Reset / Change Password pages ── */
.qa-auth-centered {
    min-height: calc(100vh - var(--nav-height));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-8) var(--sp-4);
}

.qa-auth-card--centered {
    width: 100%;
    max-width: 480px;
}

.qa-auth-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    align-items: center;
    width: 100%;
    max-width: 860px;
}

@media (min-width: 640px) {
    .qa-auth-split { grid-template-columns: 1fr 1fr; }
}

.qa-auth-split__img img {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
    display: block;
}

.qa-auth-split__form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.qa-auth-note {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── Alert boxes ── */
.qa-auth-alert {
    border-radius: var(--radius-md);
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--text-sm);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.qa-auth-alert__heading {
    font-weight: var(--fw-semibold);
    font-size: var(--text-base);
}

.qa-auth-alert--success {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.qa-auth-alert--danger {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

/* ── Change password (partial inside settings) ── */
.qa-change-password {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.qa-change-password__footer {
    display: flex;
    justify-content: flex-end;
}

/* ── Reactivate info block ── */
.qa-reactivate-info {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    background: var(--clr-surface-low, #f5f7fa);
    border: var(--border-width) solid var(--clr-border);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: 1.6;
}

.qa-reactivate-info__heading {
    font-weight: var(--fw-semibold);
    color: var(--clr-text);
    margin: 0;
}

/* ── Deactivate partial ── */
.qa-deactivate {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.qa-deactivate__heading {
    font-weight: var(--fw-semibold);
    color: var(--clr-text);
    margin: 0;
    font-size: var(--text-sm);
}

.qa-deactivate__footer {
    display: flex;
    justify-content: flex-end;
}

.qa-btn--danger {
    background: #dc2626;
    color: #fff;
    border: none;
}

.qa-btn--danger:hover {
    background: #b91c1c;
}

.qa-input--error {
    border-color: #dc2626 !important;
    outline-color: #dc2626;
}