/* Auth pages (login, register, reset, change-password, delete-account).
   Consolidates the card/field/banner CSS that was duplicated inline across
   these pages. Loaded via $page_styles=['auth']. .field lives in components.css. */

.auth-shell { display: flex; justify-content: center; padding: var(--sp-7) var(--sp-5) var(--sp-9); }
.auth-card {
    width: 100%; max-width: 460px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--sp-7);
    box-shadow: var(--shadow-lg);
}
.auth-card--wide { max-width: 520px; }

.auth-emblem {
    width: 60px; height: 60px; margin: 0 auto var(--sp-4);
    border-radius: var(--radius); background: var(--primary);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 24px;
}
.auth-heading { text-align: center; margin-bottom: var(--sp-6); }
.auth-heading h1 { font-size: 26px; margin-bottom: 6px; }
.auth-heading p { color: var(--text-muted); margin: 0; font-size: 15px; }

/* Availability / async hint under a field */
#availability { display: block; margin-top: 6px; font-size: 13px; min-height: 18px; }
#availability .ok { color: var(--ok); font-weight: 600; }
#availability .bad { color: var(--danger); font-weight: 600; }

.auth-submit {
    width: 100%; margin-top: var(--sp-2);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 24px; min-height: 46px;
    border: none; border-radius: var(--radius-full);
    background: var(--primary); color: #fff;
    font-family: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
    transition: background var(--dur), transform var(--dur);
}
.auth-submit:hover:not(:disabled) { background: var(--btn-primary-hover); transform: translateY(-1px); }
.auth-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.auth-submit[aria-busy="true"] .btn-spinner { display: inline-block; }

.helper-row { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-4); font-size: 14px; }
.helper-row a { color: var(--primary-strong); text-decoration: none; font-weight: 600; }
.helper-row a:hover { text-decoration: underline; }
.cta-secondary { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); text-align: center; font-size: 14px; color: var(--text-muted); }
.cta-secondary a { color: var(--primary-strong); text-decoration: none; font-weight: 600; }

/* Legacy banner (kept for pages not yet on .alert) */
.banner { padding: 14px 16px; border-radius: var(--radius); margin-bottom: var(--sp-5); font-weight: 500; font-size: 14px; display: flex; align-items: flex-start; gap: 10px; }
.banner i { margin-top: 3px; }
.banner.success { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-border); }
.banner.error { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-border); }
.banner.error ul { margin: 0; padding-left: 18px; }

.info-banner { background: var(--primary-soft); border: 1px solid var(--info-border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: var(--sp-5); display: flex; gap: 12px; align-items: flex-start; }
.info-banner i { color: var(--primary); font-size: 18px; margin-top: 2px; }
.info-banner strong { display: block; color: var(--primary-strong); margin-bottom: 4px; }
.info-banner p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }

.warn-banner { background: var(--warn-soft); border: 1px solid var(--warn-border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: var(--sp-5); color: var(--warn); font-size: 13px; }
.warn-banner strong { display: block; margin-bottom: 4px; }

.g-recaptcha { margin: 8px 0 18px; }

.note { font-size: 13px; color: var(--text-muted); text-align: center; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.note a { color: var(--primary-strong); text-decoration: none; font-weight: 600; }
.back-row { text-align: center; margin-top: 14px; }
.back-row a { color: var(--primary-strong); text-decoration: none; font-weight: 600; font-size: 14px; }
.back-row a:hover { text-decoration: underline; }
.auth-emblem--warn { background: linear-gradient(135deg, #f59e0b, #ef4444); }

.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: var(--sp-2); }
.form-actions .auth-submit { width: auto; flex: 1 1 200px; }
.link-secondary { color: var(--primary-strong); font-weight: 600; text-decoration: none; font-size: 14px; }
.link-secondary:hover { text-decoration: underline; }

/* Register error modal (focus-trapped via JS in forms.js) */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 100; backdrop-filter: blur(4px); }
.modal-backdrop.show { display: flex; }
.modal-card { background: var(--surface); border-radius: var(--radius-lg); max-width: 500px; width: 100%; box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-header h2 { margin: 0; font-size: 18px; color: var(--danger); display: flex; align-items: center; gap: 10px; }
.modal-body { padding: 18px 22px; }
.error-list { margin: 0; padding-left: 22px; color: var(--text); }
.error-list li + li { margin-top: 8px; }
.modal-footer { padding: 14px 22px 20px; display: flex; justify-content: flex-end; gap: 12px; }
.modal-close { background: transparent; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; padding: 4px 8px; line-height: 1; }

@media (max-width: 520px) {
    .auth-card { padding: var(--sp-6) var(--sp-5); }
    .form-actions { flex-direction: column-reverse; align-items: stretch; }
    .form-actions .link-secondary { text-align: center; }
}