/* =========================================================================
   Elevate Quote Form — Figma-matched styling for Gravity Form #1
   Scoped to .eq-shell / #gform_wrapper_1 so the rest of the site is untouched.
   ========================================================================= */

/* ---- Two-column shell (progress sidebar | form card) ------------------- */
.eq-shell {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 30px;
    box-sizing: border-box;
}
.eq-shell *,
.eq-shell *::before,
.eq-shell *::after { box-sizing: border-box; }
/* grid/flex children may overflow their track unless min-width is cleared */
#gform_wrapper_1 { max-width: 100%; }
#gform_wrapper_1 .gform_fields .gfield { min-width: 0; }

/* ---- Progress sidebar --------------------------------------------------- */
.eq-progress {
    flex: 0 0 340px;
    width: 340px;
    background: #ffffff;
    border: 1px solid #EAEFF6;
    border-radius: 24px;
    padding: 30px 28px;
    box-shadow: 0 12px 34px rgba(16, 42, 90, 0.05);
}
.eq-plabel {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #8A97AC;
    margin-bottom: 8px;
}
.eq-pnum { font-family: 'Sora', sans-serif; line-height: 1; }
.eq-pnum .eq-cur { font-size: 34px; font-weight: 800; color: #0A1B3A; }
.eq-pnum .eq-tot { font-size: 18px; font-weight: 700; color: #B0BAC9; }
.eq-pbar {
    height: 4px;
    background: #EAEFF6;
    border-radius: 4px;
    margin: 16px 0 26px;
    overflow: hidden;
}
.eq-pbar-fill {
    display: block;
    height: 100%;
    width: 25%;
    background: #1B62E0;
    border-radius: 4px;
    transition: width 0.35s ease;
}
.eq-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.eq-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    transition: background 0.15s ease;
}
.eq-step .eq-ic {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eq-step .eq-ic svg { width: 18px; height: 18px; }
.eq-meta { display: flex; flex-direction: column; }
.eq-meta em {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #98A6BC;
    margin-bottom: 2px;
}
.eq-meta b { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; color: #0A1B3A; }

/* step states */
.eq-step.is-pending .eq-ic { background: #EEF2F8; color: #9AA7BC; }
.eq-step.is-pending .eq-meta b { color: #5B6B85; }
.eq-step.is-active { background: #F3F7FF; }
.eq-step.is-active .eq-ic { background: #1B62E0; color: #ffffff; }
.eq-step.is-done .eq-ic { background: #21C15E; color: #ffffff; }

/* ---- Form card ---------------------------------------------------------- */
#gform_wrapper_1 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    background: #ffffff;
    border: 1px solid #EAEFF6;
    border-radius: 24px;
    padding: 44px 46px;
    box-shadow: 0 12px 34px rgba(16, 42, 90, 0.05);
}

/* hide Gravity Forms' native progress / step indicators (we render our own) */
#gform_wrapper_1 .gf_progressbar_wrapper,
#gform_wrapper_1 .gf_page_steps,
#gform_wrapper_1 .gform_pagination,
#gform_wrapper_1 .gf-progressbar,
#gform_wrapper_1 .percentbar_blue { display: none !important; }

/* per-step header (Gravity HTML field) */
#gform_wrapper_1 .gfield--type-html { margin: 0 0 6px; }
#gform_wrapper_1 .gfield--type-html .gfield_label { display: none; }
.eq-shead .eq-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #1B62E0;
    margin-bottom: 12px;
}
.eq-shead .eq-title {
    font-family: 'Sora', sans-serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.5px;
    color: #0A1B3A;
    margin: 0 0 10px;
}
.eq-shead .eq-sub {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #41506B;
    margin: 0;
}

/* field grid spacing */
/* 2-column field grid (GF's own grid CSS isn't enqueued on this site, so define it here).
   half-width fields sit 2 per row; full-width fields (headers, radios, textarea) span both. */
#gform_wrapper_1 .gform_fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-column-gap: 24px !important;
    grid-row-gap: 22px !important;
    align-items: start;
}
#gform_wrapper_1 .gform_fields > .gfield { grid-column: span 2; }
#gform_wrapper_1 .gform_fields > .gfield--width-half { grid-column: span 1; }

/* labels + required marker */
#gform_wrapper_1 .gfield_label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #0A1B3A;
    margin-bottom: 8px;
}
#gform_wrapper_1 .gfield_required,
#gform_wrapper_1 .gfield_required_text { color: #F2711C !important; }

/* text inputs + textarea */
#gform_wrapper_1 input[type="text"],
#gform_wrapper_1 input[type="email"],
#gform_wrapper_1 input[type="tel"],
#gform_wrapper_1 input[type="url"],
#gform_wrapper_1 input[type="number"],
#gform_wrapper_1 textarea {
    width: 100% !important;
    border: 1px solid #E4E9F0 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    color: #0A1B3A !important;
    background: #ffffff !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#gform_wrapper_1 input:focus,
#gform_wrapper_1 textarea:focus {
    border-color: #1B62E0 !important;
    box-shadow: 0 0 0 3px rgba(27, 98, 224, 0.12) !important;
    outline: none !important;
}
#gform_wrapper_1 ::placeholder { color: #9AA7BC; opacity: 1; }
#gform_wrapper_1 textarea { min-height: 200px; resize: vertical; }

/* radio option cards */
#gform_wrapper_1 .eq-2col .gfield_radio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
#gform_wrapper_1 .eq-2col .gchoice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 15px 18px;
    border: 1px solid #E4E9F0;
    border-radius: 12px;
    background: #FBFCFE;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
#gform_wrapper_1 .eq-2col .gchoice:has(input:checked) {
    border-color: #1B62E0;
    background: #F3F7FF;
}
#gform_wrapper_1 .eq-2col .gchoice input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 20px;
    border: 2px solid #C9D3E0;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    transition: 0.15s ease;
}
#gform_wrapper_1 .eq-2col .gchoice input[type="radio"]:checked {
    border-color: #1B62E0;
    background: #1B62E0;
    box-shadow: inset 0 0 0 3px #ffffff;
}
#gform_wrapper_1 .eq-2col .gchoice label {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #0A1B3A;
    margin: 0;
    cursor: pointer;
}

/* ---- Buttons ------------------------------------------------------------ */
#gform_wrapper_1 .gform_page_footer,
#gform_wrapper_1 .gform_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
    padding: 0;
    border: 0;
}
/* Step 1 has no "Back" (no previous step) — keep Continue on the right on its own. */
#gform_wrapper_1 #gform_page_1_1 .gform_page_footer { justify-content: flex-end; }

/* primary (Continue / Submit) */
#gform_wrapper_1 .gform_next_button,
#gform_wrapper_1 .gform_footer input[type="submit"],
#gform_wrapper_1 .gform_button {
    order: 2;
    -webkit-appearance: none;
    appearance: none;
    background-color: #1B62E0;
    color: #ffffff;
    border: 0;
    border-radius: 12px;
    padding: 15px 30px;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 14px 26px rgba(27, 98, 224, 0.28);
    background-repeat: no-repeat;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
#gform_wrapper_1 .gform_next_button:hover,
#gform_wrapper_1 .gform_footer input[type="submit"]:hover,
#gform_wrapper_1 .gform_button:hover { background-color: #164FBF; }

/* Continue → right arrow */
#gform_wrapper_1 .gform_next_button {
    padding-right: 54px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
    background-position: right 22px center;
    background-size: 18px 18px;
}
/* Submit → paper plane */
#gform_wrapper_1 .gform_footer input[type="submit"],
#gform_wrapper_1 .gform_button {
    padding-right: 56px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E");
    background-position: right 22px center;
    background-size: 18px 18px;
}

/* Back (native previous button — pages 2 & 3 only) */
#gform_wrapper_1 .gform_previous_button {
    order: 1;
    -webkit-appearance: none;
    appearance: none;
    background-color: #ffffff;
    color: #0A1B3A;
    border: 1px solid #E4E9F0;
    border-radius: 12px;
    padding: 15px 24px 15px 48px;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    box-shadow: none;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1B3A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6'/%3E%3Cpath d='M11 6l-6 6 6 6'/%3E%3C/svg%3E");
    background-position: left 22px center;
    background-size: 18px 18px;
    transition: border-color 0.15s ease;
}
#gform_wrapper_1 .gform_previous_button:hover { border-color: #C9D3E0; }

/* validation */
#gform_wrapper_1 .gfield_validation_message,
#gform_wrapper_1 .validation_message {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #E23B3B;
    background: transparent;
    border: 0;
    padding: 6px 0 0;
}
#gform_wrapper_1 .gfield_error input,
#gform_wrapper_1 .gfield_error textarea { border-color: #E23B3B !important; }
#gform_wrapper_1 .gform_validation_errors { display: none; }

/* confirmation message */
.eq-shell .gform_confirmation_message {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    color: #0A1B3A;
    text-align: center;
    padding: 20px 10px;
}

/* ---- Loading popup (small, theme-blue; replaces GF's grey AJAX spinner) - */
#gform_wrapper_1 .gform_ajax_spinner { display: none !important; }
.eq-loading {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(10, 27, 58, 0.35);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.eq-loading.is-on { display: flex; }
.eq-loading-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(16, 42, 90, 0.25);
}
.eq-spinner {
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 4px solid #E4E9F0;
    border-top-color: #1B62E0;
    animation: eq-spin 0.7s linear infinite;
}
@keyframes eq-spin { to { transform: rotate(360deg); } }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
    .eq-shell { flex-direction: column; gap: 22px; }
    .eq-progress { flex: 1 1 auto; width: 100%; }
    #gform_wrapper_1 { width: 100%; }
}
@media (max-width: 600px) {
    #gform_wrapper_1 { padding: 28px 22px; }
    .eq-shead .eq-title { font-size: 27px; }
    .eq-shead .eq-sub { font-size: 16px; }
    #gform_wrapper_1 .eq-2col .gfield_radio { grid-template-columns: 1fr; }
    #gform_wrapper_1 .gform_fields { grid-template-columns: 1fr !important; }
    #gform_wrapper_1 .gform_fields .gfield { grid-column: 1 / -1 !important; }

    /* Buttons stack full-width so the long "Submit Quote Request" label never overflows. */
    #gform_wrapper_1 .gform_page_footer,
    #gform_wrapper_1 .gform_footer {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 12px;
    }
    #gform_wrapper_1 #gform_page_1_1 .gform_page_footer { justify-content: flex-start; }
    #gform_wrapper_1 .gform_next_button,
    #gform_wrapper_1 .gform_previous_button,
    #gform_wrapper_1 .gform_footer input[type="submit"],
    #gform_wrapper_1 .gform_button {
        width: 100%;
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
        background-position: right 18px center;
    }
}