/**
 * Authentication Forms CSS
 *
 * Shared styles for login and forgot password forms
 * Used by [bagarbeit_login_form] and [bagarbeit_forgot_password_form] shortcodes
 *
 * @package wbtheme
 */

/* ========================================
   Form Containers
   ======================================== */

.bagarbeit-login-form-container,
.bagarbeit-forgot-password-container,
.bagarbeit-reset-password-container {
    max-width: 450px;
    margin: 0 auto;
    background: var(--color-bg-white);
    padding: var(--spacing-5xl);
    box-shadow: var(--shadow-base);
}

/* ========================================
   Form Titles & Descriptions
   ======================================== */

.bagarbeit-form-title {
    font-size: var(--font-size-h2);
    margin: 0 0 var(--spacing-lg) 0;
    color: var(--color-text-dark);
    text-align: center;
}

.bagarbeit-form-description {
    font-size: var(--font-size-body);
    color: var(--color-text-medium);
    margin: 0 0 var(--spacing-2xl) 0;
    text-align: center;
}

/* ========================================
   Form Fields
   ======================================== */

.bagarbeit-login-form .form-field,
.bagarbeit-forgot-password-form .form-field,
.bagarbeit-reset-password-form .form-field,
.bagarbeit-change-password-form .form-field {
    margin-bottom: var(--spacing-2xl);
}

.bagarbeit-login-form label,
.bagarbeit-forgot-password-form label,
.bagarbeit-reset-password-form label,
.bagarbeit-change-password-form label {
    display: block;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-dark);
}

.bagarbeit-login-form .form-control,
.bagarbeit-forgot-password-form .form-control,
.bagarbeit-reset-password-form .form-control,
.bagarbeit-change-password-form .form-control {
    width: 100%;
    padding: var(--spacing-base) var(--spacing-lg);
    font-size: var(--font-size-base);
    border: var(--input-border-width) solid var(--color-border-default);
    height: var(--input-height);
    transition: border-color var(--transition-fast);
}

.bagarbeit-login-form .form-control:focus,
.bagarbeit-forgot-password-form .form-control:focus,
.bagarbeit-reset-password-form .form-control:focus,
.bagarbeit-change-password-form .form-control:focus {
    outline: none;
    border-color: var(--color-primary-blue);
}

/* ========================================
   Remember Me Checkbox
   ======================================== */

.bagarbeit-login-form .remember-me label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: var(--font-weight-normal);
    cursor: pointer;
}

.bagarbeit-login-form .remember-me input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ========================================
   Messages (Error & Success)
   ======================================== */

.bagarbeit-form-error {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger);
    color: var(--color-danger-dark);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.bagarbeit-form-error i {
    flex-shrink: 0;
}

.bagarbeit-form-success {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success);
    color: var(--color-success-dark);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.bagarbeit-form-success i {
    flex-shrink: 0;
}

/* ========================================
   Submit Button
   ======================================== */

.bagarbeit-login-form .btn-login-submit,
.bagarbeit-forgot-password-form .btn-login-submit,
.bagarbeit-reset-password-form .btn-login-submit,
.bagarbeit-change-password-form .btn-login-submit {
    width: 100%;
    justify-content: center;
}

/* ========================================
   Form Links
   ======================================== */

.bagarbeit-form-links {
    text-align: center;
    margin-top: var(--spacing-4xl);
    padding-top: var(--spacing-3xl);
    border-top: 1px solid var(--color-border-light);
}

.bagarbeit-form-links a {
    color: var(--color-primary-green);
    text-decoration: none;
}

.bagarbeit-form-links a:hover {
    text-decoration: underline;
}

.bagarbeit-form-links .separator {
    margin: 0 var(--spacing-md);
    color: var(--color-text-light);
}

/* ========================================
   Inline Form & Link Button
   ======================================== */

.bagarbeit-inline-form {
    display: inline;
}

.bagarbeit-link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary-green);
    text-decoration: none;
    cursor: pointer;
}

.bagarbeit-link-button:hover {
    text-decoration: underline;
}

/* ========================================
   Already Logged In Message
   ======================================== */

/* ========================================
   Password Hint
   ======================================== */

.bagarbeit-password-hint {
    font-size: var(--font-size-small);
    color: var(--color-text-light);
    margin: calc(-1 * var(--spacing-lg)) 0 var(--spacing-2xl) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* ========================================
   Already Logged In Message
   ======================================== */

.bagarbeit-login-form-container .already-logged-in,
.bagarbeit-forgot-password-container .already-logged-in,
.bagarbeit-reset-password-container .already-logged-in {
    text-align: center;
    color: var(--color-text-medium);
    padding: var(--spacing-xl) 0;
}

.bagarbeit-login-form-container .already-logged-in a,
.bagarbeit-forgot-password-container .already-logged-in a,
.bagarbeit-reset-password-container .already-logged-in a {
    color: var(--color-primary-green);
    text-decoration: none;
}

.bagarbeit-login-form-container .already-logged-in a:hover,
.bagarbeit-forgot-password-container .already-logged-in a:hover,
.bagarbeit-reset-password-container .already-logged-in a:hover {
    text-decoration: underline;
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 600px) {
    .bagarbeit-login-form-container,
    .bagarbeit-forgot-password-container,
    .bagarbeit-reset-password-container {
        padding: var(--spacing-2xl);
        margin: 0 var(--spacing-lg);
        box-shadow: none;
        border: 1px solid var(--color-border-light);
    }

    .bagarbeit-form-title {
        font-size: var(--font-size-h3);
    }
}