/* css/auth.css - Styles for Login and Register Pages */

.auth-page-bg {
    background-color: var(--light-bg); /* Use a light background for the whole page */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.auth-header {
    background-color: var(--light-text);
    border-bottom: 1px solid var(--border-color);
}
.auth-header .logo { /* Reusing logo styles from style.css if they are global enough */
    font-family: var(--font-display);
    font-size: 1.8rem; /* Or match exactly from style.css */
    font-weight: 700;
    color: var(--dark-text);
}
.auth-header .logo .logo-icon {
    color: var(--primary-color);
}
.auth-header .logo .logo-accent {
    color: var(--primary-color);
    font-weight: 400;
}

.register-page-content,
.login-page-content { /* Common class for content area */
    flex-grow: 1;
}

.auth-form-container.card {
    border: none; /* Remove default card border if using shadow */
    border-radius: var(--border-radius); /* Consistent border radius */
}

.auth-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--dark-text);
}

.auth-form-container .form-label {
    font-weight: 500;
    color: var(--muted-text);
    font-size: 0.9rem;
}

.auth-form-container .form-control-lg {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border-color: var(--border-color);
}
.auth-form-container .form-control-lg:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}
.auth-form-container .input-group-text {
    background-color: var(--light-bg);
    border-color: var(--border-color);
    color: var(--muted-text);
}

.password-toggle-btn {
    border-left: 0; /* Remove left border to merge with input */
    color: var(--muted-text);
}
.password-toggle-btn:hover {
    color: var(--primary-color);
}

.auth-form-container .form-check-label.small a {
    text-decoration: underline;
}
.auth-form-container .form-check-label.small a:hover {
    color: darken(var(--primary-color), 10%);
}

.auth-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 500;
}

.auth-footer {
    background-color: var(--light-text);
    border-top: 1px solid var(--border-color);
}