/* Fluent Forms 'Demo Style 1' Recreation (Lexend Font & Equal Shadow) */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');

/* Apply Lexend Font Globally within the Form */
.fluentform,
.fluentform * {
    font-family: 'Lexend', sans-serif !important;
}

/* Form Container / Card Style */
.fluentform {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 30px !important;
    /* Uniform shadow on all sides (0 offsets for X and Y) */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
}

/* Form Groups / Spacing */
.fluentform .ff-el-group {
    margin-bottom: 20px !important;
}

/* Labels */
.fluentform .ff-el-input--label {
    font-weight: 500 !important;
    color: #0f172a !important; /* Dark navy */
    margin-bottom: 6px !important;
    font-size: 15px !important;
}

.fluentform .ff-el-is-required {
    color: #ef4444 !important; /* Red asterisk */
}

/* Input Fields & Textareas */
.fluentform .ff-el-form-control {
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #334155 !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
}

.fluentform .ff-el-form-control:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
}

/* Placeholders */
.fluentform .ff-el-form-control::placeholder {
    color: #bae6fd !important; /* Very light blue */
    font-weight: 400 !important;
}

/* Error Message Box (Yellow) */
.fluentform .error {
    background-color: #fef08a !important; /* Yellow background */
    color: #ef4444 !important; /* Red text */
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: 4px !important;
    margin-top: 4px !important;
    border: none !important;
}

/* Submit Button */
.fluentform .ff-btn-submit {
    background-color: #3b82f6 !important; /* Bright Blue */
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 12px 32px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    margin-top: 10px !important;
    display: inline-block !important;
}

.fluentform .ff-btn-submit:hover {
    background-color: #2563eb !important;
}

/* Checkboxes / Radio */
.fluentform .ff-el-form-check-label {
    color: #334155 !important;
    font-weight: 400 !important;
}