/*
 * Split auth layout shared by the standalone pages outside template.html
 * (login, register, reset password, confirm account). Figma ShJHhr4FYAJZsQqu8q8HGv, Auth · Login 64:3.
 * Needs design-tokens.css first.
 */
html, body { height: 100%; }
[v-cloak] { display: none; }
body {
    margin: 0;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
}

.auth { display: flex; min-height: 100vh; }

/* Form side (inline-start: right in RTL) */
.auth-form-side {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    padding: var(--space-32) var(--space-64);
}
.auth-top { display: flex; align-items: center; justify-content: space-between; }
.auth-top img { height: 48px; width: auto; }
.auth-lang { font-size: 13px; font-weight: 600; color: var(--color-primary-ink); text-decoration: none; }
.auth-lang:hover { color: var(--color-primary-default); text-decoration: none; }

.auth-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-24) 0; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card-wide { max-width: 560px; }
.auth-title { font-size: 32px; line-height: 1.3; font-weight: 700; margin: 0 0 var(--space-4); }
.auth-desc { font-size: 14px; color: var(--color-text-secondary); margin: 0 0 var(--space-24); }

.auth-grid-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-16); }
.auth-grid-2 > .auth-span-2 { grid-column: 1 / -1; }

.auth-field { margin-bottom: var(--space-16); }
.auth-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: var(--space-8); }
.auth-field .form-control {
    height: 40px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-size: 14px;
    box-shadow: none;
}
.auth-field .form-control:focus {
    border-color: var(--color-primary-default);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.auth-field .form-control.error,
.auth-field .form-control.is-invalid { border-color: var(--color-danger-default); }
.auth-field label.error,
.auth-field .invalid-feedback { font-size: 12px; font-weight: 500; color: var(--color-danger-default); margin: var(--space-4) 0 0; }
.auth-field .auth-hint { font-size: 12px; color: var(--color-text-secondary); margin-top: var(--space-4); }

/* radio/checkbox choice rows (gender, terms) */
.auth-choices { display: flex; flex-wrap: wrap; gap: var(--space-16); min-height: 40px; align-items: center; font-size: 14px; }
.auth-choices label { display: inline-flex; align-items: center; gap: var(--space-8); margin: 0; font-weight: 500; cursor: pointer; }
.auth-choices input { width: 16px; height: 16px; accent-color: var(--color-primary-default); }

.auth-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-24); font-size: 13px; }
.auth-row label { display: inline-flex; align-items: center; gap: var(--space-8); margin: 0; cursor: pointer; }
.auth-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--color-primary-default); }

.auth-link { color: var(--color-primary-ink); font-weight: 600; }
.auth-link:hover { color: var(--color-primary-default); }

.auth-btn {
    display: flex; align-items: center; justify-content: center; gap: var(--space-8);
    width: 100%; height: 40px;
    border-radius: var(--radius-md);
    font-size: 14px; font-weight: 600;
    text-decoration: none; cursor: pointer;
}
.auth-btn:hover { text-decoration: none; }
.auth-btn-primary { background: var(--color-primary-default); border: 1px solid var(--color-primary-default); color: var(--color-text-on-primary); }
.auth-btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-text-on-primary); }
.auth-btn-secondary { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); color: var(--color-text-primary); }
.auth-btn-secondary:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }

.auth-or { display: flex; align-items: center; gap: var(--space-12); margin: var(--space-24) 0; font-size: 12px; color: var(--color-text-secondary); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border-default); }

.auth-social { display: flex; gap: var(--space-12); }
.auth-social .auth-btn { flex: 1; }

.auth-signup { margin-top: var(--space-24); text-align: center; font-size: 14px; color: var(--color-text-secondary); }

.auth-alert {
    padding: var(--space-12) var(--space-16);
    margin-bottom: var(--space-16);
    border-radius: var(--radius-md);
    background: var(--color-danger-soft);
    color: var(--color-danger-default);
    font-size: 13px;
}
.auth-alert-info { background: var(--color-primary-soft); color: var(--color-primary-ink); }

/* single-message pages (confirm account) */
.auth-status { text-align: center; }
.auth-status-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; margin-bottom: var(--space-16);
    border-radius: var(--radius-full);
    background: var(--color-primary-soft); color: var(--color-primary-default);
    font-size: 26px;
}
.auth-status .auth-btn { margin-top: var(--space-24); }

.auth-back { display: inline-flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-24); font-size: 13px; }
[dir=rtl] .auth-back .fa { transform: scaleX(-1); }

.auth-footer { text-align: center; font-size: 12px; color: var(--color-text-secondary); }

/* Brand side (inline-end: left in RTL) */
.auth-brand-side {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-64);
    background: var(--color-primary-default);
    color: var(--color-text-on-primary);
}
.auth-brand { max-width: 520px; }
.auth-brand h2 { font-size: 44px; line-height: 1.3; font-weight: 700; margin: 0 0 var(--space-16); color: inherit; }
.auth-brand p { font-size: 15px; line-height: 1.7; opacity: .9; margin: 0 0 var(--space-32); }
.auth-features { list-style: none; padding: 0; margin: 0; }
.auth-features li { display: flex; align-items: center; gap: var(--space-12); font-size: 15px; font-weight: 500; margin-bottom: var(--space-16); }
.auth-features .fa {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .12);
    font-size: 15px;
}

/* the long registration forms scroll; keep the brand panel in view */
.auth-form-wide { flex-basis: 58%; }
.auth-form-wide + .auth-brand-side { flex-basis: 42%; position: sticky; top: 0; height: 100vh; }

/* Forgot-password pane uses Bootstrap tabs */
.auth-card .tab-pane { display: none; }
.auth-card .tab-pane.active { display: block; }

@media (max-width: 991.98px) {
    .auth-brand-side { display: none; }
    .auth-form-side { flex-basis: 100%; padding: var(--space-24) var(--space-16); }
}
@media (max-width: 575.98px) {
    .auth-grid-2 { grid-template-columns: 1fr; }
}