/* ============================================
   HUBSPOT FORM STYLING - EQL
   Works with Developer Code embed (removes iframe)
   Supports Legacy (.hs-form), New (hsfc-*) AND
   Current-gen (.hs-form__* + --hsf-* vars) Forms
   ============================================ */

/* ---- CURRENT-GEN FORM ENGINE: CSS custom properties ---- */
/* Scoped to the wrapper so it never leaks to other embeds  */
.sneaker-form-embed,
.hs-form-frame,
:root {
  --hsf-global__font-family: inherit;
  --hsf-global__font-size: 0.875rem;
  --hsf-global__color: #000000;
  /* NOTE: the token is --hsf-global__error-color, NOT --hsf-global-error__color.
     The old spelling was a no-op for as long as it was in this file. It feeds
     .hsfc-FieldLabel__RequiredIndicator and the alert colours. */
  --hsf-global__error-color: #ff0000;

  --hsf-field-label__font-family: "Frequenz", sans-serif;
  --hsf-field-label__font-size: 0.875rem;
  --hsf-field-label__color: #000000;

  --hsf-field-input__font-family: inherit;
  --hsf-field-input__font-size: 0.875rem;
  --hsf-field-input__color: #000000;
  --hsf-field-input__background-color: transparent;
  --hsf-field-input__placeholder-color: #000000;
  --hsf-field-input__border-color: #000000;
  --hsf-field-input__border-width: 0 0 0.125rem 0;
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-radius: 0;
  --hsf-field-input__padding: 0.75rem 0;

  --hsf-field-textarea__border-color: #000000;
  --hsf-field-textarea__border-width: 0 0 0.125rem 0;
  --hsf-field-textarea__border-style: solid;
  --hsf-field-textarea__border-radius: 0;
  --hsf-field-textarea__padding: 0.75rem 0;

  --hsf-row__vertical-spacing: 1rem;
  --hsf-module__vertical-spacing: 1rem;

  --hsf-button__font-family: "Frequenz", sans-serif;
  --hsf-button__font-size: 0.875rem;
  --hsf-button__color: #000000;
  --hsf-button__background-color: #FFD700;
  --hsf-button__border-radius: 0;
  --hsf-button__padding: 0.75rem 1.5rem;

  --hsf-background__background-color: transparent;
  --hsf-background__padding: 0;
  --hsf-background__border-style: none;

  /* ---- COVERAGE PASS: tokens HubSpot reads that we previously left
     on their defaults. Setting the token is preferred over an
     !important class override — a token automatically covers every
     component that reads it, including field types not on any EQL
     form yet. ---- */

  /* Textarea: HubSpot falls back textarea -> input -> default, so these
     were already inheriting correctly. Pinned explicitly so a future
     change to the input tokens can't silently drag the textarea along. */
  --hsf-field-textarea__background-color: transparent;
  --hsf-field-textarea__color: #000000;
  --hsf-field-textarea__font-family: inherit;
  --hsf-field-textarea__font-size: 0.875rem;
  --hsf-field-textarea__placeholder-color: #000000;

  /* Dropdown popup radius — square, to match every other control. */
  --hsf-field-dropdown-options__border-radius: 0;

  /* Checkbox / radio. Class rules below already force these with
     !important; the tokens keep any unstyled variant on-brand. */
  --hsf-field-checkbox__background-color: transparent;
  --hsf-field-checkbox__border-color: #000000;
  --hsf-field-checkbox__border-style: solid;
  --hsf-field-checkbox__border-width: 0.125rem;
  --hsf-field-checkbox__color: #000000;
  --hsf-field-radio__background-color: transparent;
  --hsf-field-radio__border-color: #000000;
  --hsf-field-radio__border-style: solid;
  --hsf-field-radio__border-width: 0.125rem;
  --hsf-field-radio__color: #000000;
  /* MUST be 0. These fall back to --hsf-field-input__padding (0.75rem 0),
     which adds 24px of vertical padding to a 20px box — border-box can't
     shrink below padding+border, so the box became 20x28 and the radio
     rendered as an oval instead of a circle. */
  --hsf-field-checkbox__padding: 0;
  --hsf-field-radio__padding: 0;

  /* Required asterisk + form-level alerts. These all chain back to
     --hsf-global__error-color, which was misspelled until now. */
  --hsf-field-label-requiredindicator__color: #000000;
  --hsf-erroralert__color: #ff0000;
  --hsf-erroralert__font-family: inherit;
  --hsf-erroralert__font-size: 0.875rem;
  --hsf-infoalert__color: #000000;
  --hsf-infoalert__font-family: inherit;
  --hsf-infoalert__font-size: 0.875rem;

  /* Helper text under / beside a field. */
  --hsf-field-description__color: #000000;
  --hsf-field-description__font-family: inherit;
  --hsf-field-description__font-size: 0.8125rem;
  --hsf-field-footer__color: #000000;
  --hsf-field-footer__font-family: inherit;
  --hsf-field-footer__font-size: 0.8125rem;

  /* Rich text + headings inside the form body. */
  --hsf-richtext__color: #000000;
  --hsf-richtext__font-family: inherit;
  --hsf-richtext__font-size: 0.875rem;
  --hsf-heading__color: #000000;
  --hsf-heading__font-family: "Frequenz", sans-serif;

  /* Button: the class rule below sets these with !important, but the
     tokens cover HubSpot-rendered buttons the class rule doesn't reach
     (e.g. the loading state). */
  --hsf-button__border-color: #000000;
  --hsf-button__border-style: solid;
  --hsf-button__border-width: 0.125rem;
  --hsf-button__font-weight: 700;
  --hsf-button--hover__background-color: #FFD700;
  --hsf-button--hover__border-color: #000000;
  --hsf-button--hover__color: #000000;
  --hsf-button--focus__background-color: #FFD700;
  --hsf-button--focus__border-color: #000000;
  --hsf-button--focus__color: #000000;

  /* Multi-step progress bar. */
  --hsf-progressbar-trackLine__background-color: #e6e6e6;
  --hsf-progressbar-progressLine__background-color: #FFD700;
  --hsf-progressbar-progressLine__border-color: #000000;
  --hsf-progressbar-progressLine__border-style: solid;
  --hsf-progressbar-progressLine__border-width: 0.0625rem;
  --hsf-progressbar-text__color: #000000;
  --hsf-progressbar-text__font-family: "Frequenz", sans-serif;
  --hsf-progressbar-text__font-size: 0.875rem;

  /* Horizontal gap between fields sharing a row (we only set the
     vertical one before, so side-by-side fields used HubSpot's gap). */
  --hsf-row__horizontal-spacing: 1rem;
}

/* Form Container - Legacy */
.hs-form,
.hbspt-form {
  width: 100% !important;
}

/* Form Container - New Forms (hsfc-*) */
.hsfc-Form,
.hsfc-FormWrapper {
  width: 100% !important;
}

/* Form Container - Current-gen (.hs-form__*) */
.hs-form-frame,
.hs-form__virtual-form,
.hs-form__form {
  width: 100% !important;
}

/* Input Fields - 2px bottom border only */
/* Legacy Forms */
.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="number"],
.hs-form .hs-input,
.hs-form select,
.hs-form textarea,
/* New Forms (hsfc-*) */
.hsfc-TextInput,
.hsfc-Form input[type="text"],
.hsfc-Form input[type="email"],
.hsfc-Form input[type="tel"],
.hsfc-Form input[type="number"],
.hsfc-Form select,
.hsfc-Form textarea,
/* Current-gen (.hs-form__*) */
.hs-form__field__input,
.hs-form__field input[type="text"],
.hs-form__field input[type="email"],
.hs-form__field input[type="tel"],
.hs-form__field input[type="number"],
.hs-form__field select,
.hs-form__field textarea {
  border: none !important;
  border-bottom: 0.125rem solid #000000 !important; /* 2px bottom stroke only */
  border-radius: 0 !important;
  background-color: transparent !important;
  color: #000000 !important;
  font-family: inherit !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  padding: 0.75rem 0 !important;
  width: 100% !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.hs-form input:focus,
.hs-form select:focus,
.hs-form textarea:focus,
.hsfc-TextInput:focus,
.hsfc-Form input:focus,
.hsfc-Form select:focus,
.hsfc-Form textarea:focus,
.hs-form__field__input:focus,
.hs-form__field input:focus,
.hs-form__field select:focus,
.hs-form__field textarea:focus {
  border-bottom: 0.125rem solid #000000 !important;
  outline: none !important;
}

/* Textarea */
.hs-form textarea,
.hs-form__field textarea {
  min-height: 5rem !important;
  resize: vertical !important;
}

/* Placeholder */
.hs-form input::placeholder,
.hs-form textarea::placeholder,
.hs-form select::placeholder,
.hsfc-Form input::placeholder,
.hsfc-Form textarea::placeholder,
.hsfc-Form select::placeholder,
.hsfc-TextInput::placeholder,
.hs-form__field__input::placeholder,
.hs-form__field input::placeholder,
.hs-form__field textarea::placeholder {
  color: #000000 !important;
  opacity: 1 !important;
  font-family: "Frequenz", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
}

/* Labels — field labels get Frequenz/bold/uppercase.
   Checkbox/radio labels excluded (they share .hsfc-FieldLabel). */
.hs-form label:not(:has(input[type="checkbox"])):not(:has(input[type="radio"])),
.hsfc-FieldLabel:not(:has(input[type="checkbox"])):not(:has(input[type="radio"])),
.hs-form__field__label,
.hs-form__field:not(.hs-form__field--checkbox) label {
  font-family: "Frequenz", sans-serif !important;
  color: #000000 !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-bottom: 0.5rem !important;
}

/* Buttons - Match "Get a demo" button: Yellow, 2px black stroke, 0 radius, arrow, Frequenz font */
/* Legacy Forms */
.hs-form .hs-button,
.hs-form input[type="submit"],
.hs-form button[type="submit"],
.hs_submit .actions input,
/* New Forms (hsfc-*) */
.hsfc-Button,
.hsfc-Form .hsfc-Button,
.hsfc-NavigationRow .hsfc-Button,
/* Current-gen (.hs-form__*) */
.hs-form__button,
.hs-form__actions button,
.hs-form__actions input[type="submit"] {
  position: relative !important;
  background-color: #FFD700 !important; /* Yellow */
  color: #000000 !important;
  border: 0.125rem solid #000000 !important; /* 2px stroke */
  border-radius: 0 !important; /* 0 radius */
  font-family: "Frequenz", sans-serif !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 0.75rem 1.5rem !important;
  cursor: pointer !important;
  transition: all 200ms ease !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  text-align: left !important;
  display: inline-flex !important;
  align-items: center !important;
}


.hs-form .hs-button:hover,
.hs-form input[type="submit"]:hover,
.hsfc-Button:hover,
.hsfc-Form .hsfc-Button:hover,
.hs-form__button:hover,
.hs-form__actions button:hover {
  background-color: #FFD700 !important; /* Keep yellow on hover */
  opacity: 0.9 !important;
}

/* Checkboxes - Square, 2px stroke */
.hs-form input[type="checkbox"],
.hsfc-CheckboxInput,
.hsfc-Form input[type="checkbox"],
.hs-form__field input[type="checkbox"] {
  width: 1.25rem !important;
  height: 1.25rem !important;
  /* padding + box-sizing must be pinned or the inherited field-input
     padding inflates this to 20x28. See the token note above. */
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 0.125rem solid #000000 !important;
  border-radius: 0 !important; /* Square */
  background-color: transparent !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  margin-right: 0.75rem !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.hs-form input[type="checkbox"]:checked,
.hsfc-CheckboxInput:checked,
.hsfc-Form input[type="checkbox"]:checked,
.hs-form__field input[type="checkbox"]:checked {
  background-color: #000000 !important;
  border-color: #000000 !important;
}

.hs-form input[type="checkbox"]:checked::after,
.hsfc-CheckboxInput:checked::after,
.hsfc-Form input[type="checkbox"]:checked::after,
.hs-form__field input[type="checkbox"]:checked::after {
  content: '✓' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #ffffff !important;
  font-size: 0.875rem !important;
  font-weight: bold !important;
}

/* Radio Buttons - Round, 2px stroke */
.hs-form input[type="radio"],
.hsfc-RadioInput,
.hsfc-Form input[type="radio"],
.hs-form__field input[type="radio"] {
  width: 1.25rem !important;
  height: 1.25rem !important;
  /* Without these the box is 20x28 and border-radius:50% gives an oval. */
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 0.125rem solid #000000 !important;
  border-radius: 50% !important; /* Round */
  background-color: transparent !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  margin-right: 0.75rem !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.hs-form input[type="radio"]:checked,
.hsfc-RadioInput:checked,
.hsfc-Form input[type="radio"]:checked,
.hs-form__field input[type="radio"]:checked {
  background-color: #000000 !important;
  border-color: #000000 !important;
}

.hs-form input[type="radio"]:checked::after,
.hsfc-RadioInput:checked::after,
.hsfc-Form input[type="radio"]:checked::after,
.hs-form__field input[type="radio"]:checked::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 0.5rem !important;
  height: 0.5rem !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
}

/* Field Groups */
.hs-form .hs-form-field,
.hsfc-TextField,
.hsfc-EmailField,
.hsfc-DropdownField,
.hsfc-CheckboxField,
.hsfc-RadioField,
.hs-form__field {
  margin-bottom: 1rem !important;
}

.hs-form fieldset,
.hsfc-Form fieldset,
.hs-form__form fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Lists */
.hs-form ul,
.hsfc-Form ul,
.hsfc-CheckboxFieldGroup__Options,
.hs-form__field ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Multistep Forms - Navigation Buttons */
.hsfc-NavigationRow__Buttons,
.hs-form__actions {
  display: flex !important;
  gap: 1rem !important;
  margin-top: 1.5rem !important;
}

/* Error Messages */
.hs-form .hs-error-msgs,
.hs-form__field__error,
.hs-form__error {
  color: #ff0000 !important;
  font-size: 0.875rem !important;
  margin-top: 0.5rem !important;
}

.hs-form .hs-error-msgs label {
  color: #ff0000 !important;
}

/* Hide ReCaptcha */
.hs-form .hs-recaptcha {
  display: none !important;
}

/* Responsive.
   MUST be >= 16px. iOS Safari auto-zooms the viewport whenever a focused
   input computes to less than 16px, which jolted the page on every field
   tap. This block also previously listed only .hs-form / .hs-form__field
   selectors, so it never matched the current hsfc-* engine at all. */
@media (max-width: 768px) {
  .hs-form input[type="text"],
  .hs-form input[type="email"],
  .hs-form select,
  .hs-form textarea,
  .hs-form__field__input,
  .hs-form__field input,
  .hs-form__field select,
  .hs-form__field textarea,
  /* Specificity matters here. The main input block above uses
     `.hsfc-Form input[type="text"]` (0,2,1); a bare `.hsfc-TextInput`
     (0,1,0) loses to it and the override silently does nothing — which
     is exactly what happened on the first attempt. Prefixing with the
     Renderer attribute takes these to (0,3,1) so they actually win. */
  [data-hsfc-id="Renderer"] .hsfc-Form input[type="text"],
  [data-hsfc-id="Renderer"] .hsfc-Form input[type="email"],
  [data-hsfc-id="Renderer"] .hsfc-Form input[type="tel"],
  [data-hsfc-id="Renderer"] .hsfc-Form input[type="number"],
  [data-hsfc-id="Renderer"] .hsfc-Form input[type="date"],
  [data-hsfc-id="Renderer"] .hsfc-Form input,
  [data-hsfc-id="Renderer"] .hsfc-Form textarea,
  [data-hsfc-id="Renderer"] .hsfc-TextInput,
  [data-hsfc-id="Renderer"] .hsfc-TextInput--button,
  [data-hsfc-id="Renderer"] .hsfc-TextareaInput,
  [data-hsfc-id="Renderer"] .hsfc-DateInput,
  [data-hsfc-id="Renderer"] .hsfc-DropdownOptions__Search .hsfc-TextInput,
  /* The dropdown rows need (0,3,0) — the DROPDOWN POPUP block further
     down sets them at (0,2,0) and, being later in the file, wins a tie.
     Rows aren't inputs so iOS won't zoom on them; this is purely so they
     match the 16px search field directly above them. */
  [data-hsfc-id="Renderer"] .hsfc-DropdownOptions .hsfc-DropdownOptions__List__ListItem,
  .hsfc-TextInput,
  .hsfc-TextareaInput,
  .hsfc-DateInput {
    font-size: 1rem !important; /* 16px — below this iOS zooms on focus */
  }
}

/* ============================================
   CHECKBOX / RADIO / CONSENT LABELS — readable.
   .hsfc-FieldLabel:has(input) verified live on the
   collectibles form (weight 700/uppercase -> 400/none).
   ============================================ */
.hs-form label:has(input[type="checkbox"]),
.hs-form label:has(input[type="radio"]),
.hs-form-booleancheckbox label,
.hsfc-CheckboxField .hsfc-FieldLabel,
.hsfc-RadioField .hsfc-FieldLabel,
.hsfc-FieldLabel:has(input[type="checkbox"]),
.hsfc-FieldLabel:has(input[type="radio"]),
.hs-form__field--checkbox label,
.hs-form__field label:has(input[type="checkbox"]) {
  font-family: inherit !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #000000 !important;
  font-size: 0.875rem !important;
  margin-bottom: 0 !important;
  line-height: 1.4 !important;
}

/* Consent label text sits in nested spans/em with an inline
   color:#ffffff HubSpot injects — override it on the inner
   elements so the text is actually visible. */
.hsfc-CheckboxField .hsfc-FieldLabel span,
.hsfc-CheckboxField .hsfc-FieldLabel em,
.hsfc-RadioField .hsfc-FieldLabel span,
.hsfc-RadioField .hsfc-FieldLabel em {
  color: #000000 !important;
}

/* ============================================
   DROPDOWN POPUP — hsfc-* engine
   Verified live on /collectibles-report.

   The current form engine renders NO <select>. Every
   `select` selector above matches nothing on these forms.
   The dropdown is a custom combobox:

     .hsfc-DropdownField
       input.hsfc-TextInput--button      (role=combobox, readonly)
       .hsfc-DropdownInput__Caret
       .hsfc-DropdownOptions             (absolute, z-index 10000)
         .hsfc-DropdownOptions__Search
         ul.hsfc-DropdownOptions__List
           li.hsfc-DropdownOptions__List__ListItem

   WHY IT WAS TRANSPARENT: HubSpot paints the option rows with
     background-color: var(--hsf-field-input__background-color)
   and gives the floating panel no background of its own. We set
   that variable to `transparent` at the top of this file so the
   text inputs render as a bare 2px bottom rule over the hero —
   one token, two jobs, so the popup inherited the transparency
   and drew straight over the page content underneath.

   Do NOT fix this by changing the variable; that would put a
   solid box behind every input. Paint the popup explicitly here.
   ============================================ */
.hsfc-DropdownOptions,
[data-hsfc-id="Renderer"] .hsfc-DropdownOptions {
  background-color: #ffffff !important;
  border: 0.125rem solid #000000 !important; /* full 2px box, not the inputs' bottom-only rule */
  border-radius: 0 !important;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* The list and search wrapper sit inside the panel — keep them
   opaque too so a short list never shows the page through. */
.hsfc-DropdownOptions__List,
.hsfc-DropdownOptions__Search,
[data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List,
[data-hsfc-id="Renderer"] .hsfc-DropdownOptions__Search {
  background-color: #ffffff !important;
}

/* Search row and option rows must share one left edge. HubSpot pads
   the search wrapper from --hsf-field-input__padding (0.75rem 0), i.e.
   NO horizontal padding — so its text sat 0.75rem left of the options.
   Give the wrapper horizontal padding only; the search input keeps its
   own 0.75rem vertical from the global input rule above, so both rows
   end up 0.75rem in from the panel border on every side. */
.hsfc-DropdownOptions__Search,
[data-hsfc-id="Renderer"] .hsfc-DropdownOptions__Search {
  padding: 0 0.75rem !important;
}

/* Option rows: override the inherited transparent token. */
.hsfc-DropdownOptions__List__ListItem,
[data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem {
  background-color: #ffffff !important;
  color: #000000 !important;
  font-family: inherit !important;
  font-size: 0.875rem !important;
  padding: 0.75rem !important; /* matches the search row's inset */
  cursor: pointer !important;
  list-style: none !important;
}

/* HubSpot's default hover/selected is `filter: brightness(90%)`,
   which reads as muddy grey. Swap it for the EQL yellow. */
.hsfc-DropdownOptions__List__ListItem:hover,
.hsfc-DropdownOptions__List__ListItem:focus,
.hsfc-DropdownOptions__List__ListItem--selected,
[data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem:hover,
[data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem:focus,
[data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem--selected {
  background-color: #FFD700 !important;
  color: #000000 !important;
  filter: none !important;
  outline: none !important;
}

/* Unselectable option — mute it so it doesn't read as clickable. */
.hsfc-DropdownOptions__List__ListItem--disabled,
[data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem--disabled {
  color: #767676 !important;
  background-color: #ffffff !important;
}

.hsfc-DropdownOptions__List__ListItem--disabled:hover,
[data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem--disabled:hover {
  background-color: #ffffff !important;
}

/* ============================================
   COMPONENTS A TOKEN CAN'T FULLY REACH

   These are the field types no EQL form uses *yet*. They are styled
   pre-emptively because each one reads --hsf-field-input__* tokens
   that we deliberately set to a flat, transparent, bottom-rule-only
   treatment — a treatment that is correct for an inline text input
   and WRONG for a box or a floating panel. That mismatch is exactly
   what produced the transparent dropdown. Same trap, same fix.
   ============================================ */

/* FILE UPLOAD (async dropzone).
   .hsfc-FileInputAsync reads --hsf-field-input__background-color
   (transparent) and --hsf-field-input__border-width (0 0 2px 0), so it
   would render as an invisible drop target with a single underline.
   A dropzone has to read as an enclosed area, so give it a real box. */
.hsfc-FileInputAsync,
[data-hsfc-id="Renderer"] .hsfc-FileInputAsync {
  background-color: #ffffff !important;
  border: 0.125rem dashed #000000 !important;
  border-radius: 0 !important;
  position: relative !important;
}

.hsfc-FileInputAsync--active,
.hsfc-FileInputAsync--dragover,
.hsfc-FileInputAsync:hover,
[data-hsfc-id="Renderer"] .hsfc-FileInputAsync--dragover,
[data-hsfc-id="Renderer"] .hsfc-FileInputAsync:hover {
  border-style: solid !important;
  box-shadow: none !important;
}

/* Inner content row. HubSpot pads this from --hsf-field-input__padding
   (0.75rem 0) — no horizontal padding — so the filename and the browse
   link sat flush against the dashed border. Same token bleed as the
   dropdown search row and the checkbox sizing. */
.hsfc-FileInputAsync__Content,
[data-hsfc-id="Renderer"] .hsfc-FileInputAsync__Content {
  padding: 0.75rem !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

/* Progress fill behind the filename — HubSpot ships it at opacity .05,
   which is invisible against white. Sits at width:0 until an upload
   starts, then animates to 100%. */
.hsfc-FileInputAsync__Progress,
[data-hsfc-id="Renderer"] .hsfc-FileInputAsync__Progress {
  background-color: #FFD700 !important;
  opacity: 0.3 !important;
}

/* Filename / browse text — keep it readable over the progress fill. */
.hsfc-FileInputAsync__Content__Text,
[data-hsfc-id="Renderer"] .hsfc-FileInputAsync__Content__Text {
  gap: 0.25rem !important;
}

.hsfc-FileInputAsync__Content__Text span,
.hsfc-FileInputAsync__Content__Text button,
[data-hsfc-id="Renderer"] .hsfc-FileInputAsync__Content__Text span,
[data-hsfc-id="Renderer"] .hsfc-FileInputAsync__Content__Text button {
  color: #000000 !important;
  font-size: 0.8125rem !important;
  text-decoration: underline !important;
}

/* PHONE.
   The flag/caret block is inline with the input, so transparent is
   correct — but HubSpot divides it with a 1px hairline that reads grey
   against our 2px black rule. Match the weight. */
.hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__FlagAndCaret,
[data-hsfc-id="Renderer"] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__FlagAndCaret {
  border-right: 0.125rem solid #000000 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}

.hsfc-PhoneInput__FlagAndCaret:hover,
[data-hsfc-id="Renderer"] .hsfc-PhoneInput__FlagAndCaret:hover {
  filter: none !important;
  background-color: #FFD700 !important;
}

/* DATE.
   .hsfc-DateInput is a text input driving a picker; it already inherits
   the input tokens. Only the placeholder state needs pinning so an
   empty date doesn't read as a filled one. */
.hsfc-DateInput.hsfc-DateInput--placeholder,
[data-hsfc-id="Renderer"] .hsfc-DateInput.hsfc-DateInput--placeholder {
  color: #000000 !important;
  opacity: 1 !important;
}

/* LINK BUTTON — HubSpot hardcodes rgb(37,51,66); no token exists. */
.hsfc-LinkButton,
[data-hsfc-id="Renderer"] .hsfc-LinkButton {
  color: #000000 !important;
  font-family: inherit !important;
  font-size: 0.875rem !important;
  text-decoration: underline !important;
}

/* reCAPTCHA v3 badge — hidden to match the legacy rule above.
   NOTE: Google's terms require that if the badge is hidden you display
   the "protected by reCAPTCHA / Privacy / Terms" attribution somewhere
   on the form instead. That text is not on the EQL forms today. */
.hsfc-ReCaptchaV3__Badge__Container,
[data-hsfc-id="Renderer"] .hsfc-ReCaptchaV3__Badge__Container {
  display: none !important;
}

/* ============================================
   FOCUS + ERROR STATES

   The blanket `outline: none !important` above removes the browser's
   default ring. On its own that left focused and blurred fields
   visually identical (measured live: the only difference was a 3px
   black blur on a transparent input), which fails WCAG 2.4.7.

   :focus-visible only matches keyboard focus, so a mouse click stays
   clean while tabbing gets a real indicator. These rules sit AFTER the
   `outline: none` block deliberately — same specificity, later wins.
   ============================================ */
.hsfc-TextInput:focus-visible,
.hsfc-TextareaInput:focus-visible,
.hsfc-DateInput:focus-visible,
.hsfc-Form input:focus-visible,
.hsfc-Form textarea:focus-visible,
.hsfc-Button:focus-visible,
.hsfc-CheckboxInput:focus-visible,
.hsfc-RadioInput:focus-visible,
.hsfc-FileInputAsync:focus-visible,
.hs-form input:focus-visible,
.hs-form textarea:focus-visible,
.hs-form select:focus-visible,
.hs-form__field input:focus-visible,
[data-hsfc-id="Renderer"] .hsfc-TextInput:focus-visible,
[data-hsfc-id="Renderer"] .hsfc-Button:focus-visible {
  outline: 0.125rem solid #000000 !important;
  outline-offset: 0.1875rem !important;
}

/* The dropdown option rows are focusable (tabindex=0) — same treatment,
   but inset so the ring isn't clipped by the panel's overflow:hidden. */
.hsfc-DropdownOptions__List__ListItem:focus-visible,
[data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem:focus-visible {
  outline: 0.125rem solid #000000 !important;
  outline-offset: -0.25rem !important;
}

/* Invalid fields. HubSpot sets aria-invalid="true"; our blanket black
   border meant an errored field looked exactly like a valid one, so the
   red message below was the only signal. Colour is not the sole cue —
   the message still carries the text. */
.hsfc-TextInput[aria-invalid="true"],
.hsfc-TextareaInput[aria-invalid="true"],
.hsfc-DateInput[aria-invalid="true"],
.hsfc-Form input[aria-invalid="true"],
.hsfc-Form textarea[aria-invalid="true"],
[data-hsfc-id="Renderer"] .hsfc-TextInput[aria-invalid="true"],
[data-hsfc-id="Renderer"] .hsfc-TextareaInput[aria-invalid="true"] {
  border-bottom-color: #ff0000 !important;
}

/* Keep the red visible while the user is correcting the field. */
.hsfc-TextInput[aria-invalid="true"]:focus,
.hsfc-TextInput[aria-invalid="true"]:focus-visible,
.hsfc-TextareaInput[aria-invalid="true"]:focus,
[data-hsfc-id="Renderer"] .hsfc-TextInput[aria-invalid="true"]:focus {
  border-bottom-color: #ff0000 !important;
}