/* ==============================================
   FORMS COMPONENT
   ============================================== */

.form-input,
.modern-input,
.auth-input,
.form-control {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--bg-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-standard);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-family: var(--font-family);
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
    box-sizing: border-box;
}

.form-input:hover,
.modern-input:hover,
.auth-input:hover,
.form-control:hover {
    background-color: var(--bg-tertiary);
}

.form-input:focus,
.modern-input:focus,
.auth-input:focus,
.form-control:focus {
    outline: none;
    background-color: var(--bg-tertiary);
    border-color: var(--bg-tertiary);
}

.form-input::placeholder,
.modern-input::placeholder,
.auth-input::placeholder,
.form-control::placeholder {
    color: var(--text-muted);
}

textarea.form-input,
textarea.form-control,
.considerations-input {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-radius: var(--radius-standard) !important;
    font-family: var(--font-primary);
    width: 100%;
    box-sizing: border-box;
    font-size: var(--text-base) !important;
    border: 1px solid transparent !important;
    padding: var(--space-sm) var(--space-md);
    line-height: var(--line-height-normal);
    resize: vertical;
    min-height: 80px;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

textarea.form-input:hover,
textarea.form-control:hover,
.considerations-input:hover {
    background-color: var(--bg-tertiary);
}

textarea.form-input:focus,
textarea.form-control:focus,
.considerations-input:focus {
    outline: none;
    background-color: var(--bg-tertiary);
    border-color: var(--bg-tertiary) !important;
}

.form-group,
.modern-form-group {
    margin-bottom: var(--space-lg);
    width: 100%;
}