/* 
 * MEMBRAIN_FLUENT_FORMS // INDUSTRIAL_UI_MANIFEST
 * Sovereign Industrial Form System - v1.1.2 [SPECIFICITY_ENFORCEMENT]
 */

:root {
    --mb-neon: #00ff41;
    --mb-void: #121414;
    --mb-basalt: #1A1A1A;
    --mb-border: #343535;
    --mb-text: #e3e2e2;
    --mb-text-dim: #888;
    --mb-font-tech: 'Space Grotesk', sans-serif;
    --mb-font-head: 'Epilogue', sans-serif;
}

/* CONTAINER_PROTOCOL */
html body .fluentform {
    max-width: 100% !important;
}

/* LABEL_STYLING */
html body .fluentform .ff-el-input--label label,
html body .fluentform .ff-el-input--label {
    font-family: var(--mb-font-tech) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--mb-neon) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 0.75rem !important;
    display: block !important;
}

/* INPUT_FIELD_STYLING */
html body .fluentform input[type="text"],
html body .fluentform input[type="email"],
html body .fluentform input[type="url"],
html body .fluentform input[type="password"],
html body .fluentform input[type="tel"],
html body .fluentform textarea,
html body .fluentform select {
    width: 100% !important;
    background: #000 !important;
    border: 1px solid var(--mb-border) !important;
    padding: 1.25rem !important;
    color: #fff !important;
    font-family: var(--mb-font-tech) !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
}

html body .fluentform input:focus,
html body .fluentform textarea:focus,
html body .fluentform select:focus {
    outline: none !important;
    border-color: var(--mb-neon) !important;
    background: #0d0d0d !important;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.05) !important;
}

/* SUBMIT_BUTTON_PROTOCOL */
html body .fluentform .ff-btn-submit {
    width: 100% !important;
    background: var(--mb-neon) !important;
    color: #000 !important;
    font-family: var(--mb-font-tech) !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    padding: 1.5rem !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: crosshair !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 2rem !important;
}

html body .fluentform .ff-btn-submit::after {
    content: 'send' !important;
    font-family: 'Material Symbols Outlined' !important;
    font-size: 20px !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: inline-block !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    -webkit-font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
    font-feature-settings: 'liga' !important;
}

html body .fluentform .ff-btn-submit:hover {
    background: #fff !important;
    color: #000 !important;
}

/* ERROR_MESSAGE_PROTOCOL */
html body .fluentform .text-danger,
html body .fluentform .ff-errors {
    font-family: var(--mb-font-tech) !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    color: #ff3e3e !important;
    margin-top: 0.5rem !important;
}

/* SECTION_TITLE_CUSTOM (If using Section Break) */
html body .fluentform .ff-section-title {
    font-family: var(--mb-font-head) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--mb-border) !important;
    padding-bottom: 1rem !important;
    margin-bottom: 2rem !important;
}

/* HIDDEN_LABELS_WORKAROUND */
html body .fluentform .ff-el-form-control::placeholder {
    color: #888 !important;
    opacity: 1 !important;
}

/* CHECKBOX_RADIO_STYLING */
html body .fluentform .ff-el-form-check {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 0.5rem !important;
}

html body .fluentform .ff-el-form-check label {
    color: #aaa !important;
    font-size: 12px !important;
    margin: 0 !important;
}

html body .fluentform input[type="checkbox"],
html body .fluentform input[type="radio"] {
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border: 1px solid var(--mb-border) !important;
    background: #000 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    position: relative !important;
}

html body .fluentform input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 10px !important;
    height: 10px !important;
    background: var(--mb-neon) !important;
}