/**
 * WP User Frontend Pro - Login Form Dynamic Styles
 *
 * This file uses CSS custom properties (variables) for dynamic colors
 * that are set via inline styles in Login_Form_Settings.php
 *
 * @package WP User Frontend Pro
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Variables (Set dynamically via PHP)
   ========================================================================== */

:root {
    --wpuf-login-form-bg: transparent;
    --wpuf-login-form-border: transparent;
    --wpuf-login-form-width: 400px;
    --wpuf-login-field-bg: transparent;
    --wpuf-login-field-border: #D1D5DB;
    --wpuf-login-label-color: #333333;
    --wpuf-login-input-text: #111827;
    --wpuf-login-placeholder: #9CA3AF;
    --wpuf-login-button-bg: #3B82F6;
    --wpuf-login-button-border: transparent;
    --wpuf-login-button-text: #ffffff;
    --wpuf-login-help-text: #6B7280;
}

/* ==========================================================================
   Apply CSS Variables to Elements
   ========================================================================== */

#wpuf-login-form {
    background-color: var(--wpuf-login-form-bg);
    border: 1px solid var(--wpuf-login-form-border);
    max-width: var(--wpuf-login-form-width);
}

#wpuf-login-form label {
    color: var(--wpuf-login-label-color);
}

#wpuf-login-form input[type='text'],
#wpuf-login-form input[type='password'],
#wpuf-login-form input[type='email'] {
    background-color: var(--wpuf-login-field-bg);
    border-color: var(--wpuf-login-field-border);
    color: var(--wpuf-login-input-text);
}

#wpuf-login-form input::placeholder {
    color: var(--wpuf-login-placeholder);
}

#wpuf-login-form input[type='submit'],
#wpuf-login-form button[type='submit'] {
    background-color: var(--wpuf-login-button-bg);
    border: 1px solid var(--wpuf-login-button-border);
    color: var(--wpuf-login-button-text);
}

#wpuf-login-form .description,
#wpuf-login-form .wpuf-help {
    color: var(--wpuf-login-help-text);
}

#wpuf-login-form .wpuf-lost-password a,
#wpuf-login-form .wpuf-lost-password-wrapper a {
    color: var(--wpuf-login-button-bg);
}

/* ==========================================================================
   Layout-Specific Variable Overrides
   ========================================================================== */

/* Layout 2 - Dark variant with white text */
#wpuf-login-form.wpuf-layout-2 .wpuf-login-title,
#wpuf-login-form.wpuf-layout-2 .wpuf-login-subtitle {
    color: #FFFFFF;
}

/* Layout 1 & 2 - Minimal with bottom border only */
#wpuf-login-form.wpuf-layout-1 input[type='text'],
#wpuf-login-form.wpuf-layout-1 input[type='password'],
#wpuf-login-form.wpuf-layout-1 input[type='email'],
#wpuf-login-form.wpuf-layout-2 input[type='text'],
#wpuf-login-form.wpuf-layout-2 input[type='password'],
#wpuf-login-form.wpuf-layout-2 input[type='email'] {
    border-color: transparent;
    border-bottom-color: var(--wpuf-login-field-border);
}

/* Layout 3 & 4 - Minimal with labels */
#wpuf-login-form.wpuf-layout-3 input[type='text'],
#wpuf-login-form.wpuf-layout-3 input[type='password'],
#wpuf-login-form.wpuf-layout-3 input[type='email'],
#wpuf-login-form.wpuf-layout-4 input[type='text'],
#wpuf-login-form.wpuf-layout-4 input[type='password'],
#wpuf-login-form.wpuf-layout-4 input[type='email'] {
    border-color: transparent;
    border-bottom-color: var(--wpuf-login-field-border);
}

/* Layout 5, 6, 7 - Rounded with full borders */
#wpuf-login-form.wpuf-layout-5 input[type='text'],
#wpuf-login-form.wpuf-layout-5 input[type='password'],
#wpuf-login-form.wpuf-layout-5 input[type='email'],
#wpuf-login-form.wpuf-layout-6 input[type='text'],
#wpuf-login-form.wpuf-layout-6 input[type='password'],
#wpuf-login-form.wpuf-layout-6 input[type='email'],
#wpuf-login-form.wpuf-layout-7 input[type='text'],
#wpuf-login-form.wpuf-layout-7 input[type='password'],
#wpuf-login-form.wpuf-layout-7 input[type='email'] {
    border-color: var(--wpuf-login-field-border);
}

#wpuf-login-form.wpuf-layout-5 input:focus,
#wpuf-login-form.wpuf-layout-6 input:focus,
#wpuf-login-form.wpuf-layout-7 input:focus {
    border-color: var(--wpuf-login-field-border);
}

/* Layout 7 - Special background override for fields */
#wpuf-login-form.wpuf-layout-7 input[type='text'],
#wpuf-login-form.wpuf-layout-7 input[type='password'],
#wpuf-login-form.wpuf-layout-7 input[type='email'] {
    background-color: #F4F8FF;
}