/**
 * HubSpot Forms — Synergix Bespoke Theme Match
 *
 * Pixel-perfect replica of the CF7 form styling on synergix.ch:
 *   Font: 'HK Grotesk' (body), 'Syne' (headings) — both loaded by theme
 *   Text: #004d6e | BG: transparent | CTA: #d0ff00 | Accent: #ff5b36
 *   Inputs: border-bottom only, no bg, no radius
 *   Button: lime green with arrow ::after, Synergix hover (light-blue bg)
 *   Sizes: vw units to match theme responsive scaling
 */

/* ── Container ──────────────────────────────────────────────── */
.hsfi-form-wrapper {
    max-width: 100%;
    font-family: 'HK Grotesk', sans-serif !important;
    font-weight: 300 !important;
    font-size: clamp(16px, 1.1vw, 22px) !important;
    color: #004d6e !important;
    line-height: 1.5 !important;
    position: relative !important;
    min-height: 120px !important;
    height: fit-content !important;
    align-self: flex-start !important;
}

/* ── Loading skeleton while SDK loads ─────────────────────── */
.hsfi-form-wrapper:empty::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 200px !important;
    background: linear-gradient(90deg, #eef4f7 25%, #dce8ee 50%, #eef4f7 75%) !important;
    background-size: 200% 100% !important;
    animation: hsfi-shimmer 1.5s ease-in-out infinite !important;
    border-radius: 4px !important;
}

@keyframes hsfi-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Smooth form appearance */
.hsfi-form-wrapper .hs-form {
    animation: hsfi-fadeIn 0.3s ease-out !important;
}

@keyframes hsfi-fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.hsfi-form-wrapper .hs-form,
.hsfi-form-wrapper .hs-form fieldset {
    max-width: 100% !important;
    font-family: 'HK Grotesk', sans-serif !important;
}

/* Prevent parent containers from stretching the form */
.hsfi-form-wrapper > div,
.hsfi-form-wrapper > .hbspt-form {
    height: auto !important;
}

/* ── Hidden fields (admin-configured) ─────────────────────── */
.hsfi-form-wrapper .hsfi-hidden,
.hsfi-form-wrapper .hs-form .hsfi-hidden,
.hsfi-form-wrapper .hs-form fieldset.hsfi-hidden {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Labels — small, capitalize, above field ─────────────────── */
.hsfi-form-wrapper .hs-form label,
.hsfi-form-wrapper .hs-form .hs-form-field > label {
    font-family: 'HK Grotesk', sans-serif !important;
    font-size: clamp(11px, 0.75vw, 15px) !important;
    font-weight: 500 !important;
    color: #004d6e !important;
    text-transform: none !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 0.4vw !important;
    display: block !important;
    line-height: 1.3 !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* ── Required asterisk ──────────────────────────────────────── */
.hsfi-form-wrapper .hs-form label .hs-form-required {
    color: #ff5b36 !important;
    margin-left: 2px !important;
}

/* ── Inputs — border-bottom only (exact CF7 match) ──────────── */
.hsfi-form-wrapper .hs-form input[type="text"],
.hsfi-form-wrapper .hs-form input[type="email"],
.hsfi-form-wrapper .hs-form input[type="tel"],
.hsfi-form-wrapper .hs-form input[type="number"],
.hsfi-form-wrapper .hs-form input[type="url"],
.hsfi-form-wrapper .hs-form input[type="password"],
.hsfi-form-wrapper .hs-form input[type="date"],
.hsfi-form-wrapper .hs-form input[type="search"],
.hsfi-form-wrapper .hs-form select,
.hsfi-form-wrapper .hs-form textarea {
    font-family: 'HK Grotesk', sans-serif !important;
    font-size: inherit !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    color: #004d6e !important;
    background: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 77, 110, 0.5) !important;
    border-radius: 0 !important;
    padding: 0 0 0.8vw 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s linear, box-shadow 0.2s linear !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
}

/* ── Placeholders — opaque, inherit color ───────────────────── */
.hsfi-form-wrapper .hs-form input::placeholder,
.hsfi-form-wrapper .hs-form textarea::placeholder {
    opacity: 1 !important;
    color: inherit !important;
}
.hsfi-form-wrapper .hs-form ::-webkit-input-placeholder { opacity: 1 !important; color: inherit !important; }
.hsfi-form-wrapper .hs-form ::-moz-placeholder { opacity: 1 !important; color: inherit !important; }

/* ── Focus — visible indicator for keyboard nav ──────────────── */
.hsfi-form-wrapper .hs-form input:focus,
.hsfi-form-wrapper .hs-form select:focus,
.hsfi-form-wrapper .hs-form textarea:focus {
    outline: none !important;
    border-bottom-color: #004d6e !important;
    box-shadow: 0 2px 0 0 #004d6e !important;
}

.hsfi-form-wrapper .hs-form input:focus-visible,
.hsfi-form-wrapper .hs-form select:focus-visible,
.hsfi-form-wrapper .hs-form textarea:focus-visible {
    outline: 2px solid rgba(0, 77, 110, 0.3) !important;
    outline-offset: 4px !important;
    border-bottom-color: #004d6e !important;
}

/* ── Select dropdown ────────────────────────────────────────── */
.hsfi-form-wrapper .hs-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23004d6e' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0 center !important;
    padding-right: 20px !important;
}

/* ── Textarea ───────────────────────────────────────────────── */
.hsfi-form-wrapper .hs-form textarea {
    height: 10vw !important;
    min-height: 80px !important;
    resize: vertical !important;
}

/* ── Field layout — flex rows like CF7 ──────────────────────── */
.hsfi-form-wrapper .hs-form .hs-form-field {
    margin-bottom: 3.6vw !important;
    width: 100% !important;
}

.hsfi-form-wrapper .hs-form fieldset {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.hsfi-form-wrapper .hs-form fieldset.form-columns-2 {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 0 !important;
}

.hsfi-form-wrapper .hs-form fieldset.form-columns-2 .hs-form-field {
    width: 50% !important;
    flex: none !important;
    padding: 0 !important;
    float: none !important;
}

.hsfi-form-wrapper .hs-form fieldset.form-columns-3 {
    display: flex !important;
    gap: 0 !important;
}

.hsfi-form-wrapper .hs-form fieldset.form-columns-3 .hs-form-field {
    flex: 1 !important;
    padding: 0 !important;
    float: none !important;
}

/* ── Custom width flex layout (admin-configured columns) ────── */
.hsfi-form-wrapper form.hsfi-flex-layout {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    gap: 0 2% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

.hsfi-form-wrapper form.hsfi-flex-layout > fieldset {
    box-sizing: border-box !important;
}

/* Inside custom-width fieldsets, field fills its parent */
.hsfi-form-wrapper form.hsfi-flex-layout > fieldset.hsfi-custom-width .hs-form-field {
    width: 100% !important;
    margin-bottom: 3.6vw !important;
}

/* Fieldsets without custom width stay full-width */
.hsfi-form-wrapper form.hsfi-flex-layout > fieldset:not(.hsfi-custom-width) {
    width: 100% !important;
    flex: 0 0 100% !important;
}

/* Step containers inherit flex layout for custom-width fieldsets — only when active */
.hsfi-form-wrapper .hsfi-step-content.is-active.hsfi-flex-step {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 0 2% !important;
}

.hsfi-form-wrapper .hsfi-flex-step > fieldset:not(.hsfi-custom-width) {
    width: 100% !important;
    flex: 0 0 100% !important;
}

.hsfi-form-wrapper .hsfi-flex-step > fieldset.hsfi-custom-width .hs-form-field {
    width: 100% !important;
    margin-bottom: 3.6vw !important;
}

/* Full-width elements stay full-width in flex layout */
.hsfi-form-wrapper form.hsfi-flex-layout > .hs_submit,
.hsfi-form-wrapper form.hsfi-flex-layout > .legal-consent-container,
.hsfi-form-wrapper form.hsfi-flex-layout > .hsfi-step-content,
.hsfi-form-wrapper .hsfi-flex-step > .hs_submit,
.hsfi-form-wrapper .hsfi-flex-step > .legal-consent-container {
    width: 100% !important;
    flex: 0 0 100% !important;
}

/* ── Radio & Checkbox — native styled, Synergix accent ──────── */
.hsfi-form-wrapper .hs-form input[type="checkbox"],
.hsfi-form-wrapper .hs-form input[type="radio"] {
    display: inline-block !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 1.2vw !important;
    height: 1.2vw !important;
    min-width: 16px !important;
    min-height: 16px !important;
    border: 1px solid #004d6e !important;
    border-radius: 50% !important;
    background: #fff !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    margin: 0 0.5vw 0 0 !important;
    padding: 0 !important;
    position: relative !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    transition: border-color 0.1s linear !important;
}

.hsfi-form-wrapper .hs-form input[type="checkbox"]:checked,
.hsfi-form-wrapper .hs-form input[type="radio"]:checked {
    background: #ff5b36 !important;
    border-color: #004d6e !important;
    box-shadow: inset 0 0 0 2px #fff !important;
}

/* Radio/checkbox list items */
.hsfi-form-wrapper .hs-form .hs-form-radio,
.hsfi-form-wrapper .hs-form .hs-form-checkbox,
.hsfi-form-wrapper .hs-form .hs-form-booleancheckbox {
    margin-bottom: 0.4vw !important;
}

.hsfi-form-wrapper .hs-form .hs-form-radio label,
.hsfi-form-wrapper .hs-form .hs-form-checkbox label,
.hsfi-form-wrapper .hs-form .hs-form-booleancheckbox label {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    font-size: clamp(14px, 0.9vw, 18px) !important;
    font-weight: 300 !important;
    min-height: 44px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 0.3vw !important;
    line-height: 1.4 !important;
}

.hsfi-form-wrapper .hs-form .hs-form-radio-display,
.hsfi-form-wrapper .hs-form .hs-form-checkbox-display,
.hsfi-form-wrapper .hs-form .hs-form-booleancheckbox-display {
    display: flex !important;
    align-items: center !important;
}

/* Consent links */
.hsfi-form-wrapper .hs-form .hs-form-booleancheckbox-display span a,
.hsfi-form-wrapper .hs-form .hs-form-checkbox-display span a {
    color: #ff5b36 !important;
    text-decoration: underline !important;
}

.hsfi-form-wrapper .hs-form .hs-form-booleancheckbox-display span a:hover,
.hsfi-form-wrapper .hs-form .hs-form-checkbox-display span a:hover {
    text-decoration: none !important;
}

/* Radio/checkbox list container — kill list bullets */
.hsfi-form-wrapper .hs-form ul,
.hsfi-form-wrapper .hs-form ol,
.hsfi-form-wrapper .hs-form .inputs-list,
.hsfi-form-wrapper .hs-form ul.inputs-list,
.hsfi-form-wrapper .hs-form ul.inputs-list li,
.hsfi-form-wrapper .hs-form .hs-form-radio,
.hsfi-form-wrapper .hs-form .hs-form-checkbox,
.hsfi-form-wrapper .hs-form .hs-form-booleancheckbox {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.hsfi-form-wrapper .hs-form ul.inputs-list li::before,
.hsfi-form-wrapper .hs-form ul.inputs-list li::marker {
    content: none !important;
    display: none !important;
}

/* Consent / legal labels */
.hsfi-form-wrapper .hs-form .legal-consent-container label {
    font-size: clamp(12px, 0.8vw, 16px) !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    font-weight: 300 !important;
    letter-spacing: 0 !important;
}

/* ── Submit button — Synergix .button with arrow ────────────── */
.hsfi-form-wrapper .hs-form .hs-button,
.hsfi-form-wrapper .hs-form input[type="submit"],
.hsfi-form-wrapper .hs-form button[type="submit"] {
    display: inline-block !important;
    font-family: 'HK Grotesk', sans-serif !important;
    font-size: clamp(13px, 0.8vw, 16px) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: #004d6e !important;
    background: #d0ff00 !important;
    border: 1px solid #d0ff00 !important;
    border-radius: 0.2vw !important;
    padding: 0.85vw 3.2vw 0.85vw 1vw !important;
    cursor: pointer !important;
    position: relative !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2) !important;
    transition: border 0.2s linear, background 0.2s linear, color 0.2s linear, box-shadow 0.2s linear !important;
    min-height: 44px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Arrow pseudo-element — matches Synergix .button::after */
.hsfi-form-wrapper .hs-form .hs-button::after,
.hsfi-form-wrapper .hs-form input[type="submit"]::after,
.hsfi-form-wrapper .hs-form button[type="submit"]::after {
    content: "" !important;
    display: block !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.81 13.44'><polygon fill='%23004e6d' fill-rule='evenodd' points='16.81 6.72 10.09 0 9.49 .6 15.19 6.3 0 6.3 0 7.14 15.19 7.14 9.49 12.84 10.09 13.44 16.81 6.72'/></svg>") !important;
    background-position: 50% 50% !important;
    background-repeat: no-repeat !important;
    background-size: 1vw 1vw !important;
    position: absolute !important;
    top: 0 !important;
    right: 1.2vw !important;
    width: 1vw !important;
    height: 100% !important;
    transition: transform 0.2s linear !important;
}

/* Hover — Synergix style: light bg, border, no shadow */
.hsfi-form-wrapper .hs-form .hs-button:hover,
.hsfi-form-wrapper .hs-form input[type="submit"]:hover,
.hsfi-form-wrapper .hs-form button[type="submit"]:hover {
    background: #eef4f7 !important;
    color: #004d6e !important;
    border: 1px solid #004d6e !important;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0) !important;
}

.hsfi-form-wrapper .hs-form .hs-button:hover::after,
.hsfi-form-wrapper .hs-form input[type="submit"]:hover::after,
.hsfi-form-wrapper .hs-form button[type="submit"]:hover::after {
    transform: translateX(0.5vw) !important;
}

.hsfi-form-wrapper .hs-form .hs-button:focus-visible,
.hsfi-form-wrapper .hs-form input[type="submit"]:focus-visible,
.hsfi-form-wrapper .hs-form button[type="submit"]:focus-visible {
    outline: 2px solid #d0ff00 !important;
    outline-offset: 2px !important;
}

/* ── Button row spacing (like CF7 .fields-button-row) ───────── */
.hsfi-form-wrapper .hs-form .hs_submit {
    margin-top: 1.2vw !important;
}

/* ── Error messages ─────────────────────────────────────────── */
.hsfi-form-wrapper .hs-form .hs-error-msgs {
    list-style: none !important;
    padding: 0 !important;
    margin: 0.5vw 0 0 0 !important;
}

.hsfi-form-wrapper .hs-form .hs-error-msg {
    color: #b91c1c !important;
    font-size: clamp(12px, 0.8vw, 16px) !important;
    line-height: 1.5 !important;
    padding: 0.5vw 0 !important;
}

.hsfi-form-wrapper .hs-form .hs-input.error,
.hsfi-form-wrapper .hs-form .hs-input.invalid {
    border-bottom-color: #b91c1c !important;
}

/* ── Success message (CF7 style) ────────────────────────────── */
.hsfi-form-wrapper .submitted-message {
    font-family: 'HK Grotesk', sans-serif !important;
    font-size: clamp(14px, 0.8vw, 16px) !important;
    line-height: 1.5 !important;
    color: #004d6e !important;
    padding: 0.5vw 1vw !important;
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 2vw 0 0 !important;
    width: 100% !important;
}

/* ── Legal / GDPR consent ───────────────────────────────────── */
.hsfi-form-wrapper .hs-form .legal-consent-container {
    font-size: clamp(12px, 0.8vw, 16px) !important;
    color: #004d6e !important;
    margin-top: 1.2vw !important;
    line-height: 1.4 !important;
}

.hsfi-form-wrapper .hs-form .legal-consent-container a {
    color: #ff5b36 !important;
    text-decoration: underline !important;
}

.hsfi-form-wrapper .hs-form .legal-consent-container a:hover {
    text-decoration: none !important;
}

/* ── Multi-step: Stepper progress bar ─────────────────────── */
.hsfi-stepper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin-bottom: 3vw !important;
    padding: 0 !important;
}

.hsfi-step {
    display: flex !important;
    align-items: center !important;
    gap: 0.5vw !important;
    position: relative !important;
    transition: opacity 0.2s linear !important;
}

.hsfi-step-num {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(28px, 2.2vw, 40px) !important;
    height: clamp(28px, 2.2vw, 40px) !important;
    border-radius: 50% !important;
    border: 2px solid rgba(0, 77, 110, 0.25) !important;
    font-family: 'HK Grotesk', sans-serif !important;
    font-size: clamp(12px, 0.8vw, 16px) !important;
    font-weight: 500 !important;
    color: rgba(0, 77, 110, 0.4) !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
}

.hsfi-step-label {
    font-family: 'HK Grotesk', sans-serif !important;
    font-size: clamp(10px, 0.7vw, 14px) !important;
    font-weight: 400 !important;
    color: rgba(0, 77, 110, 0.4) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    transition: color 0.3s ease !important;
    white-space: nowrap !important;
}

.hsfi-step-line {
    width: clamp(24px, 3vw, 60px) !important;
    height: 2px !important;
    background: rgba(0, 77, 110, 0.15) !important;
    margin: 0 clamp(8px, 0.8vw, 16px) !important;
    transition: background 0.3s ease !important;
    flex-shrink: 0 !important;
}

/* Active step */
.hsfi-step.is-active .hsfi-step-num {
    border-color: #d0ff00 !important;
    background: #d0ff00 !important;
    color: #004d6e !important;
    box-shadow: 0 2px 8px rgba(208, 255, 0, 0.4) !important;
}

.hsfi-step.is-active .hsfi-step-label {
    color: #004d6e !important;
    font-weight: 500 !important;
}

/* Completed step */
.hsfi-step.is-done .hsfi-step-num {
    border-color: #004d6e !important;
    background: #004d6e !important;
    color: #fff !important;
}

.hsfi-step.is-done .hsfi-step-label {
    color: #004d6e !important;
}

.hsfi-step.is-done + .hsfi-step-line {
    background: #004d6e !important;
}

/* ── Multi-step: Step content panels ─────────────────────── */
.hsfi-multistep .hs-form {
    position: relative !important;
    overflow: visible !important;
    height: auto !important;
}

.hsfi-step-content {
    display: none !important;
    opacity: 0 !important;
    transform: translateX(30px) !important;
}

.hsfi-step-content.is-active {
    display: block !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    animation: hsfi-stepIn 0.3s ease-out !important;
}

.hsfi-step-content.exit-left {
    display: block !important;
    animation: hsfi-stepOutLeft 0.25s ease-in forwards !important;
}

.hsfi-step-content.exit-right {
    display: block !important;
    animation: hsfi-stepOutRight 0.25s ease-in forwards !important;
}

@keyframes hsfi-stepIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes hsfi-stepOutLeft {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-30px); }
}

@keyframes hsfi-stepOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(30px); }
}

/* ── Multi-step: Navigation buttons ──────────────────────── */
.hsfi-step-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 2vw !important;
    padding-top: 1.5vw !important;
    border-top: 1px solid rgba(0, 77, 110, 0.1) !important;
}

.hsfi-nav-prev,
.hsfi-nav-next {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4vw !important;
    font-family: 'HK Grotesk', sans-serif !important;
    font-size: clamp(12px, 0.75vw, 15px) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: #004d6e !important;
    background: transparent !important;
    border: 1px solid rgba(0, 77, 110, 0.3) !important;
    border-radius: 0.2vw !important;
    padding: 0.6vw 1.4vw !important;
    cursor: pointer !important;
    transition: all 0.2s linear !important;
    min-height: 44px !important;
}

.hsfi-nav-prev:hover,
.hsfi-nav-next:hover {
    border-color: #004d6e !important;
    background: rgba(0, 77, 110, 0.05) !important;
}

.hsfi-nav-next {
    background: #d0ff00 !important;
    border-color: #d0ff00 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
}

.hsfi-nav-next:hover {
    background: #eef4f7 !important;
    border-color: #004d6e !important;
    box-shadow: none !important;
}

.hsfi-nav-prev.is-hidden,
.hsfi-nav-next.is-hidden {
    display: none !important;
}

.hsfi-nav-prev svg,
.hsfi-nav-next svg {
    width: clamp(12px, 0.8vw, 16px) !important;
    height: clamp(12px, 0.8vw, 16px) !important;
    flex-shrink: 0 !important;
}

.hsfi-step-counter {
    font-family: 'HK Grotesk', sans-serif !important;
    font-size: clamp(11px, 0.7vw, 14px) !important;
    font-weight: 400 !important;
    color: rgba(0, 77, 110, 0.5) !important;
    letter-spacing: 0.06em !important;
}

/* Hide nav when form is not multi-step */
.hsfi-form-wrapper:not(.hsfi-multistep) .hsfi-step-nav,
.hsfi-form-wrapper:not(.hsfi-multistep) .hsfi-stepper {
    display: none !important;
}

/* Hide submit row on non-last steps (JS handles visibility via step containers) */
.hsfi-multistep .hs_submit {
    margin-top: 2vw !important;
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hsfi-form-wrapper * {
        transition: none !important;
        animation: none !important;
    }
    .hsfi-step-content.is-active {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Responsive (mobile < 900px like theme) ─────────────────── */
@media screen and (max-width: 900px) {
    .hsfi-form-wrapper {
        font-size: clamp(16px, 3.5vw, 20px) !important;
    }

    .hsfi-form-wrapper .hs-form fieldset.form-columns-2,
    .hsfi-form-wrapper .hs-form fieldset.form-columns-3 {
        flex-wrap: wrap !important;
    }

    .hsfi-form-wrapper .hs-form fieldset.form-columns-2 .hs-form-field,
    .hsfi-form-wrapper .hs-form fieldset.form-columns-3 .hs-form-field {
        width: 100% !important;
    }

    .hsfi-form-wrapper .hs-form .hs-form-field {
        margin-bottom: 4.8vw !important;
    }

    .hsfi-form-wrapper .hs-form input[type="text"],
    .hsfi-form-wrapper .hs-form input[type="email"],
    .hsfi-form-wrapper .hs-form input[type="tel"],
    .hsfi-form-wrapper .hs-form textarea {
        padding: 0 0 2vw 0 !important;
    }

    .hsfi-form-wrapper .hs-form textarea {
        height: 20vw !important;
    }

    .hsfi-form-wrapper .hs-form .hs-button,
    .hsfi-form-wrapper .hs-form input[type="submit"],
    .hsfi-form-wrapper .hs-form button[type="submit"] {
        font-size: 2.4vw !important;
        padding: 2.55vw 9.6vw 2.25vw 3vw !important;
        border-radius: 0.6vw !important;
    }

    .hsfi-form-wrapper .hs-form .hs-button::after,
    .hsfi-form-wrapper .hs-form input[type="submit"]::after,
    .hsfi-form-wrapper .hs-form button[type="submit"]::after {
        background-size: 3vw 3vw !important;
        right: 3.6vw !important;
        width: 3vw !important;
    }

    .hsfi-form-wrapper .hs-form .hs-button:hover::after,
    .hsfi-form-wrapper .hs-form input[type="submit"]:hover::after,
    .hsfi-form-wrapper .hs-form button[type="submit"]:hover::after {
        transform: translateX(1.5vw) !important;
    }

    .hsfi-form-wrapper .hs-form .hs-error-msg {
        font-size: clamp(13px, 2.5vw, 16px) !important;
        padding: 1vw 0 !important;
    }

    .hsfi-form-wrapper .submitted-message {
        font-size: clamp(14px, 3vw, 18px) !important;
        padding: 1vw 2vw !important;
        margin: 4vw 0 0 !important;
    }

    .hsfi-form-wrapper .hs-form .hs-form-booleancheckbox-display > span,
    .hsfi-form-wrapper .hs-form .hs-form-checkbox-display > span {
        padding-left: 6vw !important;
        font-size: 2.2vw !important;
    }

    .hsfi-form-wrapper .hs-form .hs-form-booleancheckbox-display > span::before,
    .hsfi-form-wrapper .hs-form .hs-form-checkbox-display > span::before {
        width: 3.6vw !important;
        height: 3.6vw !important;
    }

    .hsfi-form-wrapper .hs-form .legal-consent-container label {
        font-size: 2.2vw !important;
    }

    .hsfi-form-wrapper .hs-form .hs_submit {
        margin-top: 4.8vw !important;
    }

    /* Custom-width columns stack on mobile */
    .hsfi-form-wrapper form.hsfi-flex-layout > fieldset.hsfi-custom-width,
    .hsfi-form-wrapper .hsfi-flex-step > fieldset.hsfi-custom-width {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Multi-step mobile */
    .hsfi-stepper {
        gap: 0 !important;
        margin-bottom: 6vw !important;
    }

    .hsfi-step-label {
        display: none !important;
    }

    .hsfi-step-line {
        width: clamp(16px, 6vw, 40px) !important;
        margin: 0 2vw !important;
    }

    .hsfi-step-nav {
        margin-top: 4vw !important;
        padding-top: 3vw !important;
    }

    .hsfi-nav-prev,
    .hsfi-nav-next {
        font-size: clamp(13px, 2.5vw, 16px) !important;
        padding: 2vw 4vw !important;
        border-radius: 1vw !important;
        gap: 1.5vw !important;
    }
}