/* ========================================================================= WPForms theme styling. All colors reference the CSS variables printed in from Customizer settings (inc/customizer.php irq_output_customizer_css_vars), so changing a color in Appearance -> Customize updates every form on the site without touching this file. ========================================================================= */ .wpforms-container { margin: 0 !important; } .wpforms-container .wpforms-form { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Labels */ .wpforms-container .wpforms-field-label { font-weight: 600; color: var(--irq-navy, #0f2438); font-size: 0.92rem; margin-bottom: 6px; } /* Text-like inputs */ .wpforms-container input[type=text], .wpforms-container input[type=email], .wpforms-container input[type=tel], .wpforms-container input[type=number], .wpforms-container input[type=url], .wpforms-container select, .wpforms-container textarea { border: 1.5px solid var(--irq-wpforms-border, #d7dee2) !important; border-radius: 10px !important; padding: 12px 14px !important; font-size: 0.95rem !important; height: auto !important; transition: border-color .15s ease, box-shadow .15s ease; background: #fff !important; } .wpforms-container input:focus, .wpforms-container select:focus, .wpforms-container textarea:focus { border-color: var(--irq-wpforms-focus, #1c8f80) !important; box-shadow: 0 0 0 3px rgba(28, 143, 128, 0.15) !important; outline: none !important; } /* * Phone field fix (build brief requirement): * The smart phone field renders a country flag/dial-code icon absolutely * positioned inside the input's left edge. Left padding must be large * enough that typed digits never render underneath the flag icon. */ .wpforms-container .wpforms-smart-phone-field, .wpforms-container .iti { width: 100% !important; } .wpforms-container .iti input[type=tel] { padding-left: 58px !important; } .wpforms-container .iti__flag-container { padding: 0 6px !important; } .wpforms-container .iti__selected-flag { padding: 0 8px 0 10px !important; width: 48px !important; } /* Checkboxes / radios */ .wpforms-container .wpforms-field-checkbox ul li input[type=checkbox], .wpforms-container .wpforms-field-radio ul li input[type=radio] { width: 18px !important; height: 18px !important; accent-color: var(--irq-primary, #0f6e63); margin-right: 10px !important; } .wpforms-container .wpforms-field-checkbox ul li, .wpforms-container .wpforms-field-radio ul li { display: flex; align-items: center; padding: 6px 0; font-size: 0.92rem; } /* Submit button */ .wpforms-container button[type=submit].wpforms-submit, .wpforms-container button[type=submit][class*="wpforms-submit"] { background: var(--irq-wpforms-submit, #0f6e63) !important; border: none !important; border-radius: 999px !important; color: #fff !important; font-weight: 700 !important; font-size: 1rem !important; padding: 14px 30px !important; width: 100%; cursor: pointer; transition: background .15s ease, transform .15s ease; } .wpforms-container button[type=submit].wpforms-submit:hover, .wpforms-container button[type=submit][class*="wpforms-submit"]:hover { background: var(--irq-wpforms-submit-h, #0b5850) !important; transform: translateY(-1px); } /* * Multi-step progress bar. * WPForms renders this differently across versions/styles (progress bar, * circles, or connector), and the fill color is often driven by WPForms' * own CSS custom property (--wpforms-progress-indicator-color) rather * than a plain class, defaulting to WPForms' own blue if that variable * isn't set. We override the variable directly AND every plausible * class name, using attribute "contains" selectors so this keeps working * even if WPForms changes exact class naming between versions. */ .wpforms-container [class*="progress-indicator"] { --wpforms-progress-indicator-color: var(--irq-wpforms-progress, #0f6e63) !important; } .wpforms-container [class*="wpforms-progress-bar"], .wpforms-container [class*="progress-indicator-page-progress-track"], .wpforms-container [class*="progress-indicator-page-progress-wrap"] { background: #e6ebee !important; border-radius: 999px !important; overflow: hidden; height: 8px !important; } .wpforms-container [class*="wpforms-progress-bar-progress"], .wpforms-container [class*="progress-indicator-page-progress"]:not([class*="track"]):not([class*="wrap"]) { background-color: var(--irq-wpforms-progress, #0f6e63) !important; } /* Numbered/circle page indicators (e.g. "Step 2 of 3" dot style) */ .wpforms-container [class*="progress-indicator-page-number"], .wpforms-container [class*="page-indicator-page-number"] { border-color: var(--irq-wpforms-progress, #0f6e63) !important; color: var(--irq-navy, #0f2438) !important; } .wpforms-container [class*="progress-indicator-page-active"] [class*="page-number"], .wpforms-container [class*="page-indicator-page-active"] [class*="page-number"] { background-color: var(--irq-wpforms-progress, #0f6e63) !important; border-color: var(--irq-wpforms-progress, #0f6e63) !important; color: #fff !important; } .wpforms-container [class*="progress-indicator-page-title"], .wpforms-container [class*="page-indicator-page-title"] { color: var(--irq-navy, #0f2438) !important; font-weight: 600 !important; } /* * Multi-step "Next" / "Previous" page buttons. * These are NOT the same element as the final submit button, and were * previously left completely unstyled, which is why they rendered as a * plain browser-default blue rectangle instead of matching the theme's * pill-shaped buttons. Using attribute "contains" selectors here (rather * than requiring both `.wpforms-page-button` and `.wpforms-page-next` * together) so this matches regardless of exact class combination. */ .wpforms-container button[class*="wpforms-page-next"], .wpforms-container button[class*="wpforms-page-prev"], .wpforms-container button[class*="wpforms-page-button"] { border: none !important; border-radius: 999px !important; font-weight: 700 !important; font-size: 1rem !important; line-height: 1.2 !important; padding: 14px 30px !important; height: auto !important; cursor: pointer; transition: background .15s ease, transform .15s ease, border-color .15s ease, color .15s ease; box-shadow: none !important; } .wpforms-container button[class*="wpforms-page-next"] { background: var(--irq-wpforms-submit, #0f6e63) !important; color: #fff !important; width: 100%; } .wpforms-container button[class*="wpforms-page-next"]:hover { background: var(--irq-wpforms-submit-h, #0b5850) !important; transform: translateY(-1px); } .wpforms-container button[class*="wpforms-page-prev"] { background: transparent !important; color: var(--irq-navy, #0f2438) !important; border: 1.5px solid var(--irq-wpforms-border, #d7dee2) !important; margin-right: 10px; } .wpforms-container button[class*="wpforms-page-prev"]:hover { border-color: var(--irq-wpforms-submit, #0f6e63) !important; color: var(--irq-wpforms-submit, #0f6e63) !important; } /* When Next/Previous appear together, lay them out like the rest of the theme's button groups instead of stacked/full-width by default. */ .wpforms-container [class*="page-button-wrap"]:has(button[class*="wpforms-page-prev"]):has(button[class*="wpforms-page-next"]) { display: flex; gap: 10px; } .wpforms-container [class*="page-button-wrap"]:has(button[class*="wpforms-page-prev"]):has(button[class*="wpforms-page-next"]) button[class*="wpforms-page-next"] { flex: 1; } /* Error and confirmation messages */ .wpforms-container .wpforms-error, .wpforms-container label.wpforms-error { color: #c0392b !important; font-size: 0.85rem !important; margin-top: 4px !important; } .wpforms-container input.wpforms-field-required-error, .wpforms-container select.wpforms-field-required-error, .wpforms-container textarea.wpforms-field-required-error { border-color: #c0392b !important; } .wpforms-confirmation-container-full { background: var(--irq-blue-light, #eaf3fb) !important; border: 1px solid var(--irq-primary, #0f6e63) !important; border-radius: 14px !important; padding: 24px !important; color: var(--irq-navy, #0f2438) !important; } /* Consent / TrustedForm helper text */ .wpforms-container .wpforms-field-description, .wpforms-container .wpforms-disclaimer { font-size: 0.8rem !important; color: #5b6b74 !important; line-height: 1.5 !important; } /* Mobile optimization */ @media (max-width: 600px) { .wpforms-container input[type=text], .wpforms-container input[type=email], .wpforms-container input[type=tel], .wpforms-container select, .wpforms-container textarea { font-size: 1rem !important; /* prevents iOS zoom-on-focus */ } }