/* Auth pages (login, register, access-denied) — Shapo v4 theme.
   The login renders before the shell, so body.chapo-v4 isn't set; styles are
   scoped under .auth-page and read the v4 design tokens (chapo-tokens.css). */
.auth-page {
    background: var(--chapo-bg, #fafaf8);
    color: var(--chapo-text, #1c1b18);
    min-height: 100vh;
    font-family: var(--chapo-font-sans, "Inter", "Heebo", system-ui, sans-serif);
    -webkit-font-smoothing: antialiased;
}
[dir="rtl"] .auth-page { font-family: var(--chapo-font-heb, "Heebo", "Inter", system-ui, sans-serif); }

.auth-main { padding: 1rem; }

.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 2rem 2rem 1.5rem;
    border-radius: var(--chapo-radius-xl, 18px);
    background: var(--chapo-surface, #ffffff);
    border: 1px solid var(--chapo-border, #e7e5df);
    box-shadow: 0 16px 48px rgba(20, 18, 12, 0.10);
}

.auth-app-icon { width: 64px; height: 64px; border-radius: 16px; }

.auth-app-name {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--chapo-accent, #1a9d5a);
    font-family: var(--chapo-font-sans, "Inter", "Heebo", sans-serif);
}
[dir="rtl"] .auth-app-name { font-family: var(--chapo-font-heb, "Heebo", sans-serif); }

.auth-tagline { font-size: 0.82rem; letter-spacing: 0.01em; color: var(--chapo-text-3, #8e8a81) !important; }

/* The consent sentence under every auth form. */
.auth-legal { line-height: 1.5; }
.auth-legal .chapo-legal-link { color: var(--chapo-accent-ink, #1b5e3a); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Inputs */
.auth-page .form-label { font-weight: 600; font-size: var(--chapo-text-sm, 0.875rem); color: var(--chapo-text-2, #5e5b54); }
.auth-page .form-control {
    border-radius: var(--chapo-radius-md, 10px);
    border: 1px solid var(--chapo-border, #e7e5df);
    background: var(--chapo-surface, #fff);
    color: var(--chapo-text, #1c1b18);
    padding: 0.65rem 0.9rem;
    min-height: 46px;
}
.auth-page .form-control:focus {
    border-color: var(--chapo-accent, #1a9d5a);
    box-shadow: 0 0 0 3px var(--chapo-accent-soft, #e7f4ec);
    outline: none;
}

/* Primary button */
.auth-page .btn-primary {
    border-radius: var(--chapo-radius-pill, 999px);
    background: var(--chapo-accent, #1a9d5a);
    border: 0;
    padding: 0.7rem 1.1rem;
    font-weight: 600;
    box-shadow: 0 4px 16px oklch(0.55 0.14 155 / 0.30);
}
.auth-page .btn-primary:hover { background: var(--chapo-accent-ink, #15683b); }

/* Social / outline buttons */
.auth-page .btn-outline-secondary {
    border-radius: var(--chapo-radius-pill, 999px);
    border: 1px solid var(--chapo-border-strong, #d8d5cd);
    color: var(--chapo-text, #1c1b18);
    background: var(--chapo-surface, #fff);
    padding: 0.6rem 1rem;
}
.auth-page .btn-outline-secondary:hover {
    background: var(--chapo-surface-2, #f4f3ef);
    border-color: var(--chapo-accent, #1a9d5a);
    color: var(--chapo-accent-ink, #15683b);
}

.auth-page a { color: var(--chapo-accent-ink, #15683b); }

.auth-page .alert-danger {
    border-radius: var(--chapo-radius-md, 10px);
    border: 0;
    border-inline-start: 3px solid var(--chapo-danger, #d6453a);
    background: var(--chapo-warn-soft, #fdf0ea);
    color: var(--chapo-danger, #d6453a);
}

.auth-divider hr { border-color: var(--chapo-border, #e7e5df); }
.auth-divider .text-muted { color: var(--chapo-text-3, #8e8a81) !important; }

.auth-strength-bar { height: 4px; background: var(--chapo-surface-2, #f4f3ef); border-radius: 2px; overflow: hidden; }
.auth-strength-fill { height: 100%; width: 0; border-radius: 2px; transition: width 0.3s, background 0.3s; }

/* Language toggle button */
.auth-lang-toggle {
    position: fixed;
    top: 1rem;
    inset-inline-end: 1rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--chapo-border, #e7e5df);
    border-radius: var(--chapo-radius-pill, 999px);
    background: var(--chapo-surface, #fff);
    color: var(--chapo-text-2, #5e5b54);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--chapo-shadow-sm, 0 1px 2px rgba(20,18,12,0.04));
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.auth-lang-toggle:hover {
    background: var(--chapo-surface-2, #f4f3ef);
    color: var(--chapo-text, #1c1b18);
    border-color: var(--chapo-accent, #1a9d5a);
}

@media (max-width: 500px) {
    .auth-lang-toggle { top: 0.5rem; inset-inline-end: 0.5rem; padding: 0.3rem 0.6rem; font-size: 0.75rem; }
}