/*======================================== BORROWER CONNECT — GHL SURVEY STYLES v3.4 — Accessibility audit (WCAG 2.1 AA): ========================================*/ /*======================================== ACCESSIBILITY — MOTION & ANIMATION WCAG 2.3.3: Suppress all transitions and transforms for users who prefer reduced motion. Also disables smooth scrolling. ========================================*/ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* Keep focus rings visible but instant */ #_builder-form .form-builder--item input:focus, #_builder-form .form-builder--item select:focus, #_builder-form .form-builder--item textarea:focus, #_builder-form .vdpWithInput.date-picker-custom-style:focus-within, #_builder-form .date-picker-custom-style.date-picker-field-survey:focus-within { transition: none !important; } /* Remove transforms used for hover lift effects */ #_builder-form .form-builder--item input[type="radio"] + label:hover, #_builder-form button:hover, .ghl-footer .ghl-footer-next:active, .ghl-footer .ghl-submit-btn:active { transform: none !important; } } /*======================================== RESET ========================================*/ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; width: 100%; font-family: var(--font-body, sans-serif); line-height: 1.6; /* scroll-behavior: smooth moved to reduced-motion block */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } input, label, button, [role="button"] { -webkit-tap-highlight-color: transparent !important; tap-highlight-color: transparent !important; } /*======================================== THEME (data-theme on ) ========================================*/ html { /* --bg-start / --bg-end / --text-color removed: tokens.css already sets these to identical values in every theme block. Redeclaring them here was a silent drift risk — a change in tokens.css would not reach this file. Theme flipping is tokens.css's job. */ /* Scroll padding — prevents fixed footer covering focused inputs */ scroll-padding-bottom: calc(60px + max(env(safe-area-inset-bottom), 8px)); } /*======================================== BODY / PAGE Richer gradient — subtle diagonal tint gives depth without being distracting. ========================================*/ body { min-height: 100vh; background: linear-gradient( 155deg, var(--bg-start) 0%, var(--bg-end) 60%, color-mix(in srgb, var(--bg-start) 85%, var(--brand-accent) 15%) 100% ) !important; background-repeat: no-repeat !important; background-attachment: fixed !important; color: var(--text-color); transition: background var(--transition-slow), color var(--transition-slow); } /* Smooth scroll only when motion is acceptable */ @media (prefers-reduced-motion: no-preference) { html, body { scroll-behavior: smooth; } } /* Fix 1: background-attachment:fixed is broken on iOS Safari — remove on mobile */ @media (max-width: 768px) { body { background-attachment: scroll !important; } } /* Fallback for browsers without color-mix */ @supports not (color: color-mix(in srgb, red 50%, blue)) { body { background: linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%) !important; } } form { margin: 0; padding: 0; font-family: inherit; color: inherit; } /*======================================== FORM CARD WRAPPER Elevated card with deeper shadow and a faint brand-accent top border accent. ========================================*/ .ghl-form-wrap { box-shadow: 0 2px 4px rgba(20, 54, 84, 0.04), 0 8px 24px rgba(20, 54, 84, 0.08), 0 24px 48px var(--shadow-light) !important; border-radius: var(--card-radius) !important; /* overflow:hidden removed — clips date picker popup, address autocomplete, and dropdown menus that render outside the card boundary */ border-top: 3px solid var(--brand-accent) !important; margin-top: var(--space-8) !important; } @media (max-width: 768px) { .ghl-form-wrap { box-shadow: none !important; border-radius: 0 !important; border-top: none !important; max-width: 100% !important; margin-top: 0 !important; } } /*======================================== GHL FORM (#_builder-form) Both background + background-color to beat GHL's inline style="background-color:#FFFFFF" ========================================*/ #_builder-form { font-family: var(--font-body) !important; color: var(--neutral-700) !important; background: var(--bg-primary) !important; background-color: var(--bg-primary) !important; /* Generous inner padding — breathing room */ padding: var(--space-6) var(--space-6) var(--space-2) !important; } html[data-theme="dark"] #_builder-form { background: var(--bg-primary) !important; background-color: var(--bg-primary) !important; color: var(--neutral-700) !important; } /* 16px minimum prevents iOS auto-zoom on focus */ #_builder-form input, #_builder-form select, #_builder-form textarea { font-size: var(--text-md) !important; } #_builder-form .form-builder--item { margin-bottom: calc(var(--space-6) - var(--space-1)) !important; display: flex; flex-direction: column; } /* Address autocomplete margin fix */ #_builder-form .form-builder--item.hl-address-autocomplete { margin-bottom: 0 !important; } #_builder-form .col-12:has(.hl-address-autocomplete) { margin-bottom: calc(var(--space-6) - var(--space-1)) !important; } @media (max-width: 768px) { #_builder-form { border-radius: 0 !important; padding: var(--space-5) var(--space-4) var(--space-2) !important; } } /*======================================== LABELS Slightly larger, looser tracking, muted teal accent dot before required fields. ========================================*/ #_builder-form .form-builder--item label:not(input + label):not(.theme-toggle) { font-family: var(--font-heading) !important; font-weight: var(--font-weight-semibold) !important; font-size: var(--text-md) !important; letter-spacing: 0.01em !important; color: var(--neutral-700) !important; margin-bottom: var(--space-2) !important; display: block !important; line-height: 1.4 !important; } #_builder-form .form-builder--item label * { font-family: inherit !important; font-weight: inherit !important; font-size: inherit !important; color: inherit !important; } /* Required asterisk — teal instead of default red */ #_builder-form .form-builder--item label span { color: var(--brand-accent) !important; font-weight: var(--font-weight-semibold) !important; } /* Short helper text beneath sliders */ #_builder-form .form-builder--item .short-label { display: block !important; margin-top: var(--space-1) !important; font-size: var(--text-xs) !important; color: var(--neutral-500) !important; /* WCAG AA: neutral-500 = 4.63:1 on white */ font-style: normal !important; letter-spacing: 0.02em !important; } /*======================================== TEXT / EMAIL / TEL / NUMBER / TEXTAREA 48px tall inputs, warmer border, teal focus ring. Both background and background-color to beat GHL fieldCSS. ========================================*/ #_builder-form .form-builder--item input[type="text"].form-control, #_builder-form .form-builder--item input[type="number"], #_builder-form .form-builder--item input[type="email"], #_builder-form .form-builder--item input[type="tel"], #_builder-form .form-builder--item textarea, #_builder-form .form-builder--item select, #_builder-form input[type="tel"], #_builder-form input[type="email"] { width: 100% !important; min-height: var(--input-height) !important; padding: var(--input-padding-y) var(--input-padding-x) !important; border-radius: var(--input-border-radius) !important; border: var(--input-border-width) solid var(--neutral-200) !important; background: var(--bg-primary) !important; background-color: var(--bg-primary) !important; background-clip: inherit !important; color: var(--neutral-700) !important; font-family: var(--font-body) !important; font-size: var(--text-md) !important; font-weight: var(--font-weight-regular) !important; line-height: 1.5 !important; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast) !important; box-shadow: 0 1px 3px var(--shadow-light) !important; } /* Dark mode inputs */ html[data-theme="dark"] #_builder-form .form-builder--item input[type="text"].form-control, html[data-theme="dark"] #_builder-form .form-builder--item input[type="number"], html[data-theme="dark"] #_builder-form .form-builder--item input[type="email"], html[data-theme="dark"] #_builder-form .form-builder--item input[type="tel"], html[data-theme="dark"] #_builder-form .form-builder--item textarea, html[data-theme="dark"] #_builder-form .form-builder--item select, html[data-theme="dark"] #_builder-form input[type="tel"], html[data-theme="dark"] #_builder-form input[type="email"] { background: var(--bg-secondary) !important; background-color: var(--bg-secondary) !important; color: var(--neutral-700) !important; border-color: var(--neutral-300) !important; } /* Email icon padding */ #_builder-form .email-input input[type="email"] { padding-left: 40px !important; } #_builder-form input::placeholder, #_builder-form textarea::placeholder { color: var(--neutral-400) !important; opacity: 1 !important; font-weight: var(--font-weight-regular) !important; } /* Hover */ #_builder-form .form-builder--item input[type="text"].form-control:hover, #_builder-form .form-builder--item input[type="number"]:hover, #_builder-form .form-builder--item input[type="email"]:hover, #_builder-form .form-builder--item input[type="tel"]:hover, #_builder-form .form-builder--item textarea:hover, #_builder-form input[type="tel"]:hover, #_builder-form input[type="email"]:hover { border-color: var(--brand-accent) !important; box-shadow: 0 1px 4px var(--shadow-accent-sm) !important; } /* Focus — teal ring. :focus-visible shows ring for keyboard only; :focus retained as fallback for older browsers. */ #_builder-form .form-builder--item input[type="text"].form-control:focus-visible, #_builder-form .form-builder--item input[type="text"].form-control:focus, #_builder-form .form-builder--item input[type="number"]:focus-visible, #_builder-form .form-builder--item input[type="number"]:focus, #_builder-form .form-builder--item input[type="email"]:focus-visible, #_builder-form .form-builder--item input[type="email"]:focus, #_builder-form .form-builder--item input[type="tel"]:focus-visible, #_builder-form .form-builder--item input[type="tel"]:focus, #_builder-form .form-builder--item textarea:focus-visible, #_builder-form .form-builder--item textarea:focus, #_builder-form .form-builder--item select:focus-visible, #_builder-form .form-builder--item select:focus, #_builder-form input[type="tel"]:focus-visible, #_builder-form input[type="tel"]:focus, #_builder-form input[type="email"]:focus-visible, #_builder-form input[type="email"]:focus { border-color: var(--brand-accent) !important; box-shadow: 0 0 0 3px var(--shadow-accent-focus) !important; outline: none !important; background: var(--bg-primary) !important; background-color: var(--bg-primary) !important; } /* Disabled */ #_builder-form input:disabled, #_builder-form select:disabled, #_builder-form textarea:disabled { opacity: var(--state-disabled-opacity) !important; cursor: not-allowed !important; } /*======================================== PHONE INPUT ========================================*/ #_builder-form .iti--allow-dropdown input, #_builder-form .iti--allow-dropdown input[type="tel"] { padding-left: 52px !important; } #_builder-form .countryphone { height: inherit; } /*======================================== DATE PICKER (vue-date-picker / vdp) Compound selectors beat GHL's single-class fieldCSS !important rules. ========================================*/ #_builder-form .form-builder--item .vdpWithInput.date-picker-custom-style, #_builder-form .form-builder--item .date-picker-custom-style.date-picker-field-survey, #_builder-form .form-builder--item .vdpComponent.date-picker-custom-style, #_builder-form .vdpWithInput.date-picker-custom-style, #_builder-form .date-picker-custom-style.date-picker-field-survey { width: 100% !important; min-height: var(--input-height) !important; background: var(--bg-primary) !important; background-color: var(--bg-primary) !important; color: var(--neutral-700) !important; border: var(--input-border-width) solid var(--neutral-200) !important; border-radius: var(--input-border-radius) !important; padding: var(--input-padding-y) var(--input-padding-x) !important; transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important; position: relative !important; box-shadow: 0 1px 3px var(--shadow-light) !important; } html[data-theme="dark"] #_builder-form .form-builder--item .vdpWithInput.date-picker-custom-style, html[data-theme="dark"] #_builder-form .form-builder--item .date-picker-custom-style.date-picker-field-survey, html[data-theme="dark"] #_builder-form .vdpWithInput.date-picker-custom-style, html[data-theme="dark"] #_builder-form .date-picker-custom-style.date-picker-field-survey { background: var(--bg-secondary) !important; background-color: var(--bg-secondary) !important; color: var(--neutral-700) !important; border-color: var(--neutral-300) !important; } #_builder-form .vdpWithInput.date-picker-custom-style:hover, #_builder-form .date-picker-custom-style.date-picker-field-survey:hover { border-color: var(--brand-accent) !important; box-shadow: 0 1px 4px var(--shadow-accent-sm) !important; } #_builder-form .vdpWithInput.date-picker-custom-style:focus-within, #_builder-form .date-picker-custom-style.date-picker-field-survey:focus-within { border-color: var(--brand-accent) !important; box-shadow: 0 0 0 3px var(--shadow-accent-focus) !important; background: var(--bg-primary) !important; background-color: var(--bg-primary) !important; } /* Inner text input — transparent, preserves inline icon padding */ #_builder-form .form-builder--item .date-picker-custom-style input[type="text"], #_builder-form .form-builder--item .vdpWithInput input[type="text"], #_builder-form .vdpWithInput.date-picker-custom-style input[type="text"], #_builder-form .date-picker-custom-style.date-picker-field-survey input[type="text"] { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; color: var(--neutral-700) !important; width: 100% !important; font-size: var(--text-md) !important; outline: none !important; min-height: unset !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 0 !important; } html[data-theme="dark"] #_builder-form .form-builder--item .date-picker-custom-style input[type="text"], html[data-theme="dark"] #_builder-form .vdpWithInput.date-picker-custom-style input[type="text"], html[data-theme="dark"] #_builder-form .date-picker-custom-style.date-picker-field-survey input[type="text"] { background: transparent !important; background-color: transparent !important; color: var(--neutral-700) !important; } /* Calendar popup */ .vdpFloating.vdpOuterWrap, .vdpOuterWrap { z-index: 9999 !important; font-family: var(--font-body) !important; } .vdpInnerWrap { background: var(--bg-primary) !important; border: 1px solid var(--neutral-200) !important; border-radius: var(--radius-md) !important; box-shadow: 0 4px 16px var(--shadow-med), 0 16px 48px rgba(20, 54, 84, 0.10) !important; overflow: hidden !important; padding: 0 !important; min-width: 300px !important; max-width: 340px !important; } .vdpHeader { background: var(--brand-accent) !important; padding: 10px 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: var(--input-height) !important; border-bottom: none !important; } .vdpPeriodControls { display: flex !important; gap: 8px !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; } .vdpPeriodControl { position: relative !important; display: inline-block !important; margin: 0 !important; } .vdpPeriodControl > button { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.35) !important; border-radius: var(--radius-xs) !important; padding: 5px 14px !important; font-family: var(--font-body) !important; font-size: var(--text-xs) !important; font-weight: var(--font-weight-medium) !important; cursor: pointer !important; white-space: nowrap !important; height: 30px !important; min-height: 44px !important; /* WCAG 2.5.5 touch target */ min-width: 64px !important; box-shadow: none !important; transition: background var(--transition-fast), border-color var(--transition-fast) !important; -webkit-tap-highlight-color: transparent !important; } .vdpPeriodControl > button:hover { background: rgba(255,255,255,0.14) !important; border-color: rgba(255,255,255,0.65) !important; } .vdpPeriodControl > button svg { display: none !important; } .vdpPeriodControl > select { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; cursor: pointer !important; z-index: 10 !important; font-size: var(--text-md) !important; border: none !important; background: transparent !important; } .vdpArrow { background: transparent !important; border: none !important; cursor: pointer !important; padding: 10px 12px !important; min-width: 44px !important; min-height: 44px !important; color: rgba(255,255,255,0.8) !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* WCAG 2.5.5: 44px touch target */ .vdpArrow:hover { color: #fff !important; } .vdpArrowPrev:after { border-right-color: rgba(255,255,255,0.8) !important; } .vdpArrowNext:after { border-left-color: rgba(255,255,255,0.8) !important; } .vdpTable { width: 100% !important; background: var(--bg-primary) !important; border-collapse: collapse !important; padding: 8px 12px 14px !important; display: table !important; margin-top: 12px !important; } .vdpTable tr, .vdpTable tbody, .vdpTable thead, .vdpRow { background: var(--bg-primary) !important; } .vdpHeadCell { color: var(--neutral-400) !important; font-size: var(--text-2xs) !important; font-weight: var(--font-weight-semibold) !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; text-align: center !important; padding: 10px 0 6px !important; } .vdpHeadCell span { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; } .vdpCell { text-align: center !important; padding: 2px !important; background: var(--bg-primary) !important; } .vdpCellContent { display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Visual 36px, touch target 44px via min-width/height (WCAG 2.5.5) */ width: 36px !important; height: 36px !important; min-width: 44px !important; min-height: 44px !important; border-radius: 50% !important; font-size: var(--text-sm) !important; font-family: var(--font-body) !important; color: var(--neutral-700) !important; cursor: pointer !important; transition: background var(--transition-fast), color var(--transition-fast) !important; -webkit-tap-highlight-color: transparent !important; } @media (hover: hover) and (pointer: fine) { .vdpCell.selectable:not(.selected) .vdpCellContent:hover { background: rgba(47, 127, 122, 0.1) !important; color: var(--brand-accent) !important; } } .vdpCell.today .vdpCellContent { border: 2px solid var(--brand-accent) !important; color: var(--brand-accent) !important; font-weight: var(--font-weight-semibold) !important; } .vdpCell.selected .vdpCellContent, .vdpCell.selectable.selected .vdpCellContent { background: var(--brand-accent) !important; color: #fff !important; font-weight: var(--font-weight-semibold) !important; border: none !important; } .vdpCell.outOfRange .vdpCellContent, .vdpCell.disabled .vdpCellContent { color: var(--neutral-400) !important; /* neutral-300 too faint; neutral-400 more distinguishable */ cursor: default !important; } .vdpClearInput { position: absolute !important; top: 50% !important; right: var(--space-3) !important; transform: translateY(-50%) !important; /* Visual size 24px but touch target padded to 44px (WCAG 2.5.5) */ width: 24px !important; height: 24px !important; min-width: 44px !important; min-height: 44px !important; border-radius: 50% !important; background: var(--bg-tertiary) !important; border: 1px solid var(--neutral-200) !important; color: var(--neutral-400) !important; cursor: pointer !important; font-size: var(--text-xs) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; box-shadow: none !important; transition: background var(--transition-fast) !important; -webkit-tap-highlight-color: transparent !important; } .vdpClearInput:hover { background: var(--neutral-200) !important; border-color: var(--neutral-300) !important; color: var(--neutral-600) !important; } /*======================================== RADIO PILLS Teal checked state — warmer, more inviting than flat navy. display:contents on .option-radio breaks GHL's inline width:100% wrapper. ========================================*/ #_builder-form .form-builder--item .option-radio { display: contents !important; } @media (max-width: 768px) { #_builder-form .form-builder--item .option-radio { display: block !important; width: 100% !important; } } #_builder-form .form-builder--item input[type="radio"] { position: absolute !important; opacity: 0 !important; pointer-events: none !important; -webkit-appearance: none !important; appearance: none !important; width: 0 !important; height: 0 !important; } #_builder-form .form-builder--item input[type="radio"] + label { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 11px 20px !important; border-radius: var(--input-border-radius) !important; background: var(--bg-primary) !important; color: var(--neutral-600) !important; font-weight: var(--font-weight-medium) !important; font-size: var(--text-base) !important; cursor: pointer !important; border: var(--input-border-width) solid var(--neutral-200) !important; text-align: center !important; user-select: none !important; -webkit-user-select: none !important; margin: 4px !important; margin-left: 0 !important; margin-bottom: 0 !important; min-height: var(--input-height) !important; /* 48px — consistent with input height */ -webkit-tap-highlight-color: transparent !important; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-micro) !important; /* Subtle shadow on resting state */ box-shadow: 0 1px 3px var(--shadow-light) !important; } /* Checked — teal fill */ #_builder-form .form-builder--item input[type="radio"]:checked + label { background: var(--brand-accent) !important; background-color: var(--brand-accent) !important; color: #fff !important; border-color: var(--brand-accent) !important; box-shadow: 0 2px 8px var(--shadow-accent-md) !important; } @media (hover: hover) and (pointer: fine) { #_builder-form .form-builder--item input[type="radio"] + label:hover { border-color: var(--brand-accent) !important; color: var(--brand-accent) !important; background: rgba(47, 127, 122, 0.06) !important; box-shadow: 0 2px 8px rgba(47, 127, 122, 0.14) !important; transform: translateY(-1px) !important; } #_builder-form .form-builder--item input[type="radio"]:checked + label:hover { background: var(--brand-accent-hover) !important; background-color: var(--brand-accent-hover) !important; color: #fff !important; } #_builder-form .form-builder--item input[type="radio"] + label:active { transform: translateY(0) !important; box-shadow: 0 1px 3px var(--shadow-accent-sm) !important; } } /* Mobile: full-width stacked */ @media (max-width: 768px) { #_builder-form .form-builder--item input[type="radio"] + label { width: 100% !important; display: flex !important; margin: 0 !important; } /* Container gap replaces per-pill margins for consistent spacing */ .standard-radio-container { display: flex !important; flex-direction: column !important; gap: var(--space-2) !important; width: 100% !important; } } /* Desktop: flex-wrap pills */ @media (min-width: 769px) { .standard-radio-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto; } .standard-radio-container input[type="radio"] + label { flex: 1 1 auto; max-width: 260px; } } /*======================================== CHECKBOXES 22px, teal checked state. ========================================*/ #_builder-form .standard-checkbox-container input[type="checkbox"], #_builder-form .terms-and-conditions input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; width: 22px !important; height: 22px !important; min-width: 22px !important; border: var(--input-border-width) solid var(--neutral-300) !important; border-radius: var(--radius-xs) !important; background: var(--bg-primary) !important; background-color: var(--bg-primary) !important; cursor: pointer !important; position: relative !important; flex-shrink: 0 !important; margin-top: 1px !important; margin-left: 0 !important; -webkit-tap-highlight-color: transparent !important; transition: background var(--transition-fast), border-color var(--transition-fast) !important; } #_builder-form .standard-checkbox-container input[type="checkbox"]:hover, #_builder-form .terms-and-conditions input[type="checkbox"]:hover { border-color: var(--brand-accent) !important; } #_builder-form .standard-checkbox-container input[type="checkbox"]:checked, #_builder-form .terms-and-conditions input[type="checkbox"]:checked { background: var(--brand-accent) !important; background-color: var(--brand-accent) !important; border-color: var(--brand-accent) !important; } #_builder-form .standard-checkbox-container input[type="checkbox"]:checked::after, #_builder-form .terms-and-conditions input[type="checkbox"]:checked::after { content: "" !important; position: absolute !important; left: 6px !important; top: 2px !important; width: 7px !important; height: 12px !important; border: 2px solid #fff !important; border-top: none !important; border-left: none !important; transform: rotate(45deg) !important; } /* Label rows */ #_builder-form .standard-checkbox-container, #_builder-form .terms-and-conditions .checkbox-container { display: flex !important; align-items: flex-start !important; gap: 12px !important; margin-bottom: var(--space-3) !important; } #_builder-form .standard-checkbox-container label, #_builder-form .terms-and-conditions .checkbox-container label { font-size: var(--text-sm) !important; line-height: 1.6 !important; color: var(--neutral-600) !important; cursor: pointer !important; margin-left: 0 !important; font-weight: var(--font-weight-regular) !important; flex: 1 !important; } #_builder-form .standard-checkbox-container label[style], #_builder-form .terms-and-conditions label[style] { margin-left: 0 !important; font-family: var(--font-body) !important; } /* Terms text — override inline Roboto/hardcoded colour */ #_builder-form .terms-and-conditions .terms-text-container p, #_builder-form .terms-and-conditions .terms-text-container p[style] { color: var(--neutral-600) !important; font-family: var(--font-body) !important; font-size: var(--text-xs) !important; line-height: 1.6 !important; } #_builder-form .terms-and-conditions .checkbox-container label[style] { font-family: var(--font-body) !important; margin-left: 0 !important; } /*======================================== MULTISELECT / SELECT DROPDOWN ========================================*/ #_builder-form .form-builder--item .multiselect, #_builder-form .form-builder--item select { width: 100% !important; min-height: var(--input-height) !important; font-family: var(--font-body) !important; font-size: var(--text-md) !important; color: var(--neutral-700) !important; background: var(--bg-primary) !important; background-color: var(--bg-primary) !important; border: var(--input-border-width) solid var(--neutral-200) !important; border-radius: var(--input-border-radius) !important; cursor: pointer !important; } #_builder-form .form-builder--item .multiselect:hover, #_builder-form .form-builder--item select:hover { border-color: var(--brand-accent) !important; } #_builder-form .form-builder--item .multiselect:focus, #_builder-form .form-builder--item select:focus, #_builder-form .form-builder--item .multiselect.active { border-color: var(--brand-accent) !important; box-shadow: 0 0 0 3px var(--shadow-accent-focus) !important; background: var(--bg-primary) !important; outline: none !important; } #_builder-form .form-builder--item .multiselect .multiselect__placeholder { color: var(--neutral-400) !important; opacity: 1; } #_builder-form .form-builder--item .multiselect .multiselect__single, #_builder-form .form-builder--item .multiselect .multiselect__tags { color: var(--neutral-700) !important; background: transparent !important; font-family: var(--font-body) !important; font-size: var(--text-md) !important; } #_builder-form .form-builder--item .multiselect .multiselect__content-wrapper { background: var(--bg-primary) !important; border: var(--input-border-width) solid var(--neutral-200) !important; border-radius: 0 0 10px 10px !important; box-shadow: 0 8px 24px rgba(20, 54, 84, 0.10) !important; } #_builder-form .form-builder--item .multiselect .multiselect__option { color: var(--neutral-700) !important; background: var(--bg-primary) !important; font-size: var(--text-base) !important; padding: 12px 16px !important; } #_builder-form .form-builder--item .multiselect .multiselect__option--highlight, #_builder-form .multiselect__option--highlight, #_builder-form .multiselect__option:hover { background: rgba(47, 127, 122, 0.08) !important; color: var(--brand-accent) !important; } #_builder-form .form-builder--item .multiselect .multiselect__option--selected { background: var(--brand-accent) !important; color: #fff !important; } /* Custom chevron */ #_builder-form .form-builder--item select { background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%236B7280' stroke-width='1.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 14px 8px !important; padding-right: 40px !important; -webkit-appearance: none !important; appearance: none !important; } #_builder-form .multi_select_form { border-radius: var(--input-border-radius) !important; } /*======================================== ADDRESS AUTOCOMPLETE ========================================*/ #_builder-form .form-builder--item.hl-address-autocomplete { position: relative !important; } #_builder-form .hl-address-autocomplete-input-wrapper { position: relative !important; z-index: 200 !important; } #_builder-form .hl-address-autocomplete-input-wrapper input { background-color: var(--bg-primary) !important; color: var(--neutral-700) !important; border: var(--input-border-width) solid var(--neutral-200) !important; border-radius: var(--input-border-radius) !important; font-size: var(--text-md) !important; width: 100% !important; min-height: var(--input-height) !important; font-family: var(--font-body) !important; padding-top: 12px !important; padding-bottom: 12px !important; padding-right: 14px !important; } #_builder-form .hl-address-autocomplete-input-wrapper input:focus { border-color: var(--brand-accent) !important; box-shadow: 0 0 0 3px var(--shadow-accent-focus) !important; outline: none !important; background: var(--bg-primary) !important; } .hl-address-autocomplete-results { position: absolute !important; top: 90px !important; left: 0 !important; right: 0 !important; margin-top: 0 !important; background: var(--bg-primary) !important; border: var(--input-border-width) solid var(--neutral-200) !important; border-radius: var(--input-border-radius) !important; box-shadow: 0 8px 24px var(--shadow-med) !important; z-index: 11000 !important; max-height: 280px !important; overflow-y: auto !important; } @media (max-width: 480px) { .hl-address-autocomplete-results { top: 100px !important; } } .hl-address-autocomplete-results li { display: flex !important; align-items: center !important; gap: var(--space-3) !important; padding: 12px 16px !important; color: var(--neutral-700) !important; cursor: pointer !important; transition: background var(--transition-fast) !important; border-bottom: 1px solid var(--neutral-100) !important; } .hl-address-autocomplete-results li:last-child { border-bottom: none !important; } .hl-address-autocomplete-results li:hover { background: rgba(47, 127, 122, 0.06) !important; color: var(--brand-accent) !important; } .hl-address-autocomplete-render-item-text { color: var(--neutral-700) !important; font-size: var(--text-sm) !important; white-space: normal !important; overflow-wrap: anywhere !important; font-family: var(--font-body) !important; } .hl-address-autocomplete-render-item-image { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; opacity: 0.45 !important; } /*======================================== PHONE VERIFICATION Row: input flexes, button stays visible on all screen sizes. ========================================*/ #_builder-form .otp, #_builder-form input.otp { background: var(--bg-primary) !important; background-color: var(--bg-primary) !important; color: var(--neutral-700) !important; border: var(--input-border-width) solid var(--neutral-200) !important; border-radius: var(--input-border-radius) !important; padding: var(--input-padding-y) var(--input-padding-x) !important; font-size: var(--text-md) !important; font-family: var(--font-body) !important; } #_builder-form .phone-input { display: flex !important; align-items: stretch !important; gap: 8px !important; width: 100% !important; } #_builder-form .phone-input input[type="tel"] { flex: 1 1 0% !important; min-width: 0 !important; } #_builder-form .confirm-btn, #_builder-form .verify-phone-btn, #_builder-form .preview-common-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; min-height: var(--input-height) !important; height: auto !important; padding: 0 18px !important; white-space: nowrap !important; background: var(--brand-accent) !important; background-color: var(--brand-accent) !important; color: #fff !important; border: none !important; border-radius: var(--input-border-radius) !important; font-family: var(--font-body) !important; font-size: var(--text-sm) !important; font-weight: var(--font-weight-semibold) !important; cursor: pointer !important; box-shadow: 0 2px 8px var(--shadow-accent-md) !important; -webkit-tap-highlight-color: transparent !important; overflow: visible !important; transition: background var(--transition-fast), box-shadow var(--transition-fast) !important; } #_builder-form .confirm-btn:hover, #_builder-form .verify-phone-btn:hover { background: var(--brand-accent-hover) !important; background-color: var(--brand-accent-hover) !important; box-shadow: 0 4px 12px var(--shadow-accent-lg) !important; } #_builder-form .verify-phone-btn > div, #_builder-form .verify-phone-btn > span { display: flex !important; align-items: center !important; color: #fff !important; font-size: var(--text-sm) !important; font-weight: var(--font-weight-semibold) !important; white-space: nowrap !important; } #_builder-form .reset-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; background-color: transparent !important; color: var(--neutral-500) !important; border: var(--input-border-width) solid var(--neutral-200) !important; border-radius: var(--input-border-radius) !important; padding: 0 16px !important; font-size: var(--text-sm) !important; font-weight: var(--font-weight-medium) !important; cursor: pointer !important; white-space: nowrap !important; min-height: var(--input-height) !important; } #_builder-form .verified-text { color: var(--brand-success) !important; font-size: var(--text-sm) !important; font-weight: var(--font-weight-medium) !important; } #_builder-form .verification-container { margin-top: var(--space-3) !important; } /*======================================== GENERIC BUTTONS (