/* ==========================================================================
   Form Widget — Shared Base
   Used by gated tool sidebar widget and story form section.
   Modifier classes handle per-instance layout differences.

   Modifiers:
     rw-form-widget--tool   → sidebar widget (single-tool.php)
     rw-form-widget--story  → centered full-width section (single-story.php)
   ========================================================================== */

.rw-form-widget {
    border-radius: var( --rw-corners );
    overflow:      hidden;
    background:    var( --rw-accent );
    padding:       40px 40px 30px;
}

/* ── Heading ──────────────────────────────────────────────────────────────── */

.rw-form-widget__heading {
    color:         #000;
    display:       flex;
    align-items:   center;
    font-size:     30px;
    font-weight:   600;
    margin-bottom: 20px;
    margin-top:    0;
}

/* ── Optional subtext below heading ──────────────────────────────────────── */

.rw-form-widget__content {
    margin-bottom: 20px;
    color:         #444;
    line-height:   1.6;
}

/* ── Gravity Forms — global resets scoped to widget ──────────────────────── */

.rw-form-widget p.gform_required_legend {
    display: none;
}

.rw-form-widget .gform_wrapper {
    margin: 0;
}

.rw-form-widget .gform_body {
    margin: 0;
}

.rw-form-widget .gfield {
    margin-bottom: 5px;
}

.rw-form-widget .gfield label {
    font-size:     16px;
    margin-bottom: 4px;
}

.rw-form-widget .gfield_label.gform-field-label {
    font-weight: 500;
}

/* ── Inputs ───────────────────────────────────────────────────────────────── */

.rw-form-widget input[type="text"],
.rw-form-widget input[type="email"],
.rw-form-widget input[type="tel"],
.rw-form-widget textarea {
    width:       100%;
    border:      1px solid #fff;
    border-radius: 5px;
    padding:     13px 14px !important;
    background:  #fff;
    box-sizing:  border-box;
    transition:  border-color 0.2s ease;
}

.rw-form-widget input[type="text"]:focus,
.rw-form-widget input[type="email"]:focus,
.rw-form-widget input[type="tel"]:focus,
.rw-form-widget textarea:focus {
    border-color: var( --rw-primary );
    outline:      none;
}

.rw-form-widget select.gfield_select:focus {
    border-color: var( --rw-primary );
    outline:      var( --rw-primary );
}

.rw-form-widget__body select {
    border: white;
    border-radius: 5px;
    min-height: 50px;
    padding-left: 12px !important;
}

.rw-form-widget textarea {
    resize:     vertical;
    min-height: 120px;
}

.gform_confirmation_message .rw-prim-btn.rw-btn-main {
    display: inline-block;
}

/* Default state — "Select One" showing, use placeholder grey */
.rw-form-widget select.gfield_select {
    color: #999;
}

/* Once a real option is chosen, switch to full dark */
.rw-form-widget select.gfield_select:has(option:checked:not([value=""])) {
    color: #000;
}

.rw-form-widget select.gfield_select {
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;

    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 16px center;
    padding-right:       44px;
}

/* ── Footer / submit ──────────────────────────────────────────────────────── */

.rw-form-widget .gform_footer,
.rw-form-widget .gform_page_footer {
    margin:  0;
    padding: 0;
}

.rw-form-widget .gform_button,
.rw-form-widget input[type="submit"],
.rw-form-widget .gform_button:focus,
.rw-form-widget .gform_next_button,
.rw-form-widget .gform_previous_button,
.rw-form-widget .gform_previous_button.button,
.rw-form-widget .gform_wrapper.gravity-theme .gform_previous_button.button {
    width:            auto;
    background-color: var( --rw-primary );
    border:           2px solid var( --rw-primary );
    color:            #fff;
    border-radius:    60px;
    padding:          13px 30px;
    font-size:        16px;
    font-weight:      500;
    cursor:           pointer;
    transition:       background-color 0.2s ease, border-color 0.2s ease;
    margin-top:       8px;
}

.rw-form-widget .gform_button:hover,
.rw-form-widget input[type="submit"]:hover,
.rw-form-widget .gform_next_button:hover,
.rw-form-widget .gform_previous_button:hover,
.rw-form-widget .gform_previous_button.button:hover,
.rw-form-widget .gform_wrapper.gravity-theme .gform_previous_button.button:hover {
    background-color: var( --rw-secondary );
    border:           2px solid var( --rw-secondary );
}

/* ==========================================================================
   Modifier — Tool (sidebar)
   No extra layout needed — inherits base styles as-is.
   ========================================================================== */

/* ==========================================================================
   Modifier — Story (centered section below related slider)
   ========================================================================== */

.rw-form-widget--story {
    max-width: 900px;
    margin:    0 auto;
}

.rw-story-form-section.rw-outer-grid {
    padding: 0 20px 30px;
}

.rw-form-widget--story .rw-form-widget__heading {
    font-size:     40px;
    font-weight:   inherit;
    margin-bottom: 20px;
    margin-top:    0;
}

.rw-story-form-section .rw-form-widget__content {
    max-width: 700px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media ( max-width: 992px ) {

    .rw-form-widget {
        padding: 30px 24px 24px;
    }

    .rw-form-widget__heading {
        font-size: 24px;
    }

}