.elementor-37080 .elementor-element.elementor-element-e2f96af{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;overflow:visible;}.elementor-37080 .elementor-element.elementor-element-647b50a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;overflow:visible;}.elementor-widget-fluent-form-widget .fluentform-widget-description{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-fluent-form-widget .ff-el-progress-status{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-fluent-form-widget .ff-el-progress-bar span{color:var( --e-global-color-primary );}.elementor-widget-fluent-form-widget .step-nav button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-37080 .elementor-element.elementor-element-938cc9e .fluentform-widget-wrapper .ff-el-group .ff-btn-submit{background-color:#FFFFFF !important;color:#000000 !important;}.elementor-37080 .elementor-element.elementor-element-938cc9e .fluentform-widget-wrapper .ff-el-group .ff-btn-submit:hover{background-color:#39FF14 !important;color:#000000 !important;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-bf59717 *//* --- SONG SPROUTS: VIBE MATCH THEME --- */

:root {
    --sprout-green: #39ff14;
    --deep-black: #050505;
    --off-black: #0a0a0a;
    --text-white: #ffffff;
    --text-gray: #b3b3b3;
    --font-main: 'Inter', sans-serif;
}

/* 1. Page Background Override */
body {
    background-color: var(--deep-black) !important;
    font-family: var(--font-main) !important;
}

/* 2. Form Container - "Spread Out" & Clean */
.fluentform {
    background: transparent;
    padding: 4rem 0; /* Lots of breathing room */
    max-width: 650px;
    margin: 0 auto;
}

/* Remove default Fluent Form junk */
.fluentform::before { display: none !important; }

/* 3. Labels - Matching "Hero Eyebrow" Style */
.fluentform .ff-el-input--label {
    color: var(--sprout-green) !important; /* Green accent on labels */
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.2em; /* Wide spacing */
    font-weight: 600;
    margin-bottom: 1rem;
    display: block;
}

/* 4. Inputs - Matching "Deep Black" Style */
.fluentform .ff-el-form-control {
    background-color: var(--off-black) !important; /* #0a0a0a */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Subtle border */
    border-radius: 4px !important;
    color: var(--text-white) !important;
    padding: 1.2rem !important; /* Tall, premium feel */
    font-size: 1rem !important;
    transition: all 0.3s ease;
}

/* Input Focus - White Border glow */
.fluentform .ff-el-form-control:focus {
    border-color: var(--text-white) !important;
    background-color: black !important;
    outline: none;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.05) !important;
}

/* 5. The Submit Button - Matching "Join Roster" Button */
.fluentform .ff-btn-submit {
    /* Base State: White Pill */
    background-color: var(--text-white) !important;
    color: var(--deep-black) !important;
    border: 1px solid var(--text-white) !important;
    
    /* Shape & Typography */
    border-radius: 50px !important;
    padding: 1rem 3rem !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    
    /* Layout */
    width: 100%;
    margin-top: 3rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover State: Sprout Green */
.fluentform .ff-btn-submit:hover {
    background-color: var(--sprout-green) !important;
    border-color: var(--sprout-green) !important;
    color: var(--deep-black) !important;
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.4);
    transform: translateY(-2px);
}

/* 6. Dropdown Arrow Fix */
.fluentform select.ff-el-form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%226%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201l4%204%204-4%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1.5rem center !important;
}

/* 7. Placeholder Text */
.fluentform ::placeholder {
    color: #444 !important;
}/* End custom CSS */