/* ============================================================================
   INTEGRATED FORMS - Full page forms instead of modals
   ============================================================================ */

.integrated-form {
    max-width: 100%;
}

.form-section {
    margin-bottom: 30px;
}

.form-section h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1em;
}

.form-section h4 i {
    color: #6366f1;
}

/* Form animations */
.form-input,
.form-select,
textarea.form-input {
    transition: all 0.3s ease;
}

.form-input:focus,
.form-select:focus,
textarea.form-input:focus {
    transform: translateY(-2px);
}

/* Success animation for form */
@keyframes formSuccess {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

.form-success {
    animation: formSuccess 0.5s ease;
}

/* Form validation styles */
.form-input:invalid:not(:placeholder-shown) {
    border-color: #ef4444;
}

.form-input:valid:not(:placeholder-shown) {
    border-color: #10b981;
}

/* Better spacing for integrated forms */
.integrated-form .form-group {
    margin-bottom: 0;
}

.integrated-form .form-row {
    margin-bottom: 0;
}

/* Preview info box */
.info-preview {
    padding: 15px 20px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.info-preview i {
    font-size: 1.5em;
    color: #3b82f6;
}

.info-preview p {
    margin: 0;
    color: #1e40af;
    font-weight: 500;
}