.auth-page {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    background: var(--bg);
}
.auth-card {
    background: var(--bg-card);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(11,31,58,.1);
    padding: 40px;
    width: 100%;
    max-width: 440px;
    direction: rtl;
}
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo img { height: 44px; }
.auth-title { font-size: 22px; font-weight: 800; color: var(--navy); margin: 0 0 6px; }
.auth-sub   { font-size: 13.5px; color: var(--text-muted); margin: 0 0 28px; }

.auth-group { margin-bottom: 18px; }
.auth-group label { display: block; font-size: 13px; font-weight: 700; color: var(--text-mid); margin-bottom: 6px; }
.auth-group input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
    outline: none;
    transition: border-color .2s;
    box-sizing: border-box;
}
.auth-group input:focus { border-color: var(--teal); background: #fff; }
.auth-group .err { font-size: 12px; color: var(--danger); margin-top: 5px; }
/* Terms checkbox error is shown below the row — negative margin pulls
   it up close to the offending checkbox visually. */
.err--terms { margin-block-start: -14px; margin-block-end: 14px; }

.pw-wrap { position: relative; }
.pw-wrap input { padding-inline-start: 42px; }
.pw-toggle {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    cursor: pointer; color: var(--text-muted);
    font-size: 16px; line-height: 1;
    padding: 0;
}

.terms-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
    font-size: 13px;
    color: var(--text-mid);
}
.terms-row input[type=checkbox] { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--teal); flex-shrink: 0; }

.auth-btn {
    width: 100%;
    padding: 13px;
    border-radius: 12px;
    border: none;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s, transform .1s;
}
.auth-btn:active { transform: scale(.98); }
.auth-btn-primary { background: var(--teal); color: #fff; }
.auth-btn-primary:hover { background: var(--teal-light); }
.auth-btn-google  {
    background: #fff;
    color: var(--navy);
    border: 1.5px solid var(--border);
    margin-top: 10px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.auth-btn-google:hover { background: var(--bg); }
.auth-btn-google svg { width: 20px; height: 20px; }

.auth-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 18px 0; color: var(--text-muted); font-size: 12.5px;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

.auth-footer { text-align: center; margin-top: 22px; font-size: 13px; color: var(--text-muted); }
.auth-footer a { color: var(--teal); font-weight: 700; }

@media (max-width: 480px) {
    .auth-card { padding: 28px 20px; }
}

/* Auth alert success variant (register page) */
.auth-alert-success {
    border-radius: 10px;
    font-size: 0.95rem;
    border: 1px solid #c3e6cb;
    background-color: var(--success-bg, #d4edda);
    color: #155724;
    padding-inline-start: 3rem;
}
.auth-alert-icon { position: absolute; inset-inline-end: 1rem; top: 1rem; fill: currentColor; }
.auth-alert-close { inset-inline-start: 0; inset-inline-end: auto; padding: 1.2rem; }
.auth-field-hidden { display: none; }