/* ── GF Multi-Step Form ─────────────────────────────────────────────────── */

/* Hide "(Required)" text */
.gfield_required,
.gfield_required_text,
.gfield_required_asterisk {
    display: none !important;
}

/* ── Progress bar ────────────────────────────────────────────────────────── */

/* Wrapper: full width, no padding, overflow visible so icon isn't clipped */
[id^="gf_progressbar_wrapper_"],
.gf_progressbar_wrapper {
    overflow: visible !important;
    padding: 0 !important;
}

/* Track: grey background, thin, full width */
.gf_progressbar {
    background: #e0e0e0 !important;
    border-radius: 4px !important;
    height: 10px !important;
    overflow: visible !important;
    position: relative !important;
    width: 100% !important;
}

/* Fill */
.gf_progressbar_percentage {
    background-color: var(--gmf-bar-color, #333333) !important;
    border-radius: 4px !important;
    height: 100% !important;
    position: relative !important;
    overflow: visible !important;
    transition: width 0.35s ease !important;
    min-width: 4px !important;
}

/* Hide the "25%" text GF renders inside the fill */
.gf_progressbar_percentage > span {
    display: none !important;
}

/* Icon at the tip of the fill */
.gmf-progress-icon {
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--gmf-bar-color, #333333);
    object-fit: contain;
    padding: 3px;
    display: block;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    pointer-events: none;
    z-index: 1;
}

/* ── Form wrapper ────────────────────────────────────────────────────────── */

.gform_wrapper {
    max-width: 680px;
    margin: 0 auto;
    font-family: var(--gmf-font-family, inherit);
    font-size: var(--gmf-font-size-base, 16px);
}

/* ── Field grid (replaces gravity-theme grid which we disabled) ──────────── */

.gform_fields {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 16px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Default: full width */
.gfield {
    grid-column: span 12;
}

/* Half-width fields */
.gfield--width-half,
.gmf-half {
    grid-column: span 6 !important;
}

.gf_progressbar_title {
    font-weight: 600;
    margin-bottom: 6px;
}


/* ── Field labels ────────────────────────────────────────────────────────── */

.gfield_label,
.gform-field-label:not(.gform-field-label--type-inline) {
    font-size: var(--gmf-font-size-label, 14px) !important;
    font-weight: var(--gmf-font-weight-label, 600) !important;
    display: block;
    margin-bottom: 6px;
}

/* Question/legend labels (radio & checkbox group headings) */
legend.gfield_label,
fieldset.gfield > legend {
    font-size: calc( var(--gmf-font-size-label, 14px) * 1.25 ) !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
    padding-bottom: 2px;
}

/* Single-field question labels (textarea, etc.) */
.gfield--type-textarea > .gfield_label,
.gfield--type-radio    > .gfield_label {
    font-size: calc( var(--gmf-font-size-label, 14px) * 1.25 ) !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
}

/* Top breathing room for the first field on each page */
.gform_page_fields {
    padding-top: 24px;
}

/* Cancel the label's own margin-top on the first field so it doesn't double up */
.gform_page_fields .gfield:first-child .gfield_label,
.gform_page_fields .gfield:first-child legend.gfield_label {
    margin-top: 0 !important;
}

/* ── Text inputs, textareas ──────────────────────────────────────────────── */

.gfield input[type="text"],
.gfield input[type="email"],
.gfield input[type="tel"],
.gfield textarea {
    width: 100% !important;
    border-radius: 4px !important;
    border: 1px solid var(--gmf-input-border, #cccccc) !important;
    padding: 10px 12px !important;
    font-size: var(--gmf-font-size-base, 16px) !important;
    font-family: var(--gmf-font-family, inherit) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    background: #fff !important;
}

/* Placeholder inherits font */
.gfield textarea::placeholder,
.gfield input::placeholder {
    font-family: var(--gmf-font-family, inherit) !important;
    font-size: var(--gmf-font-size-base, 16px) !important;
    color: #aaa;
}

.gfield input:focus,
.gfield textarea:focus {
    outline: none !important;
    border-color: var(--gmf-input-focus, #333333) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--gmf-input-focus, #333333) 20%, transparent) !important;
}

/* ── Radio & checkbox choices ────────────────────────────────────────────────
   GF markup:  div.gchoice > input[type="radio"] + label
─────────────────────────────────────────────────────────────────────────── */

.gfield_radio .gchoice,
.gfield_checkbox .gchoice {
    margin-bottom: 8px;
    position: relative;
}

/* Hide native control — keep accessible */
.gfield_radio .gchoice input[type="radio"],
.gfield_checkbox .gchoice input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Card label */
.gfield_radio .gchoice label,
.gfield_checkbox .gchoice label {
    display: block !important;
    padding: 12px 16px !important;
    border: 1px solid var(--gmf-input-border, #dddddd) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: var(--gmf-font-size-base, 16px) !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    transition: background 0.12s, border-color 0.12s !important;
    user-select: none !important;
    background: #fff !important;
    margin: 0 !important;
    color: inherit !important;
}

.gfield_radio .gchoice label:hover,
.gfield_checkbox .gchoice label:hover {
    border-color: var(--gmf-btn-bg, #333333) !important;
    background: color-mix(in srgb, var(--gmf-btn-bg, #333333) 5%, #fff) !important;
}

/* Checked state — both + and ~ cover different GF markup versions */
.gfield_radio .gchoice input[type="radio"]:checked + label,
.gfield_radio .gchoice input[type="radio"]:checked ~ label,
.gfield_checkbox .gchoice input[type="checkbox"]:checked + label,
.gfield_checkbox .gchoice input[type="checkbox"]:checked ~ label {
    border-color: var(--gmf-btn-bg, #333333) !important;
    background: color-mix(in srgb, var(--gmf-btn-bg, #333333) 10%, #fff) !important;
    font-weight: 600 !important;
}

/* ── Button footer spacing ───────────────────────────────────────────────── */

.gform_page_footer,
.gform-page-footer {
    margin-top: 28px !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

input.gform_next_button,
input.gform_button,
button.gform_next_button,
button.gform_button {
    display: inline-block !important;
    padding: 11px 28px !important;
    background: var(--gmf-btn-bg, #333333) !important;
    color: var(--gmf-btn-color, #ffffff) !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: var(--gmf-font-size-btn, 16px) !important;
    font-family: var(--gmf-font-family, inherit) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: opacity 0.2s !important;
}

input.gform_next_button:hover,
input.gform_button:hover {
    opacity: 0.85 !important;
}

input.gform_previous_button,
button.gform_previous_button {
    display: inline-block !important;
    padding: 11px 28px !important;
    background: #888888 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: var(--gmf-font-size-btn, 16px) !important;
    font-family: var(--gmf-font-family, inherit) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    margin-right: 10px !important;
    box-shadow: none !important;
    transition: opacity 0.2s !important;
}

input.gform_previous_button:hover {
    opacity: 0.85 !important;
}