/*
 * OIT Form -- HubSpot (developer/inline embed) brand styling.
 *
 * The developer embed renders the form as inline HTML using HubSpot's `.hsfc-*`
 * classes (no iframe), so we can repaint it to the OIT brand here. Scoped to
 * `.oit-form__card` (the dark callout). HubSpot ships its own base CSS for the
 * `.hsfc-*` system, so most rules use !important to win.
 */

/* Solid dark card surface -- set explicitly so it does NOT depend on the
   Tailwind `bg-brand-black` token resolving. That token isn't available in
   every template context (e.g. the oit_resource CPT single template), which
   left the card transparent and the white form invisible. The red-gradient
   variant paints an inline background-image over this, so it's unaffected. */
.oit-form__card {
  background-color: #1a0303 !important;
}

/* Form surface: transparent so the dark card shows through. */
.oit-form__card .hsfc-Form,
.oit-form__card .hsfc-Step,
.oit-form__card .hsfc-Step__Content {
  background: transparent !important;
  font-family: "DM Sans", sans-serif;
  color: #ffffff;
}

/* Field rows: stacked, with a comfortable gap. */
.oit-form__card .hsfc-Row {
  margin: 0 0 20px !important;
}
.oit-form__card .hsfc-Row:last-of-type {
  margin-bottom: 0 !important;
}
/* When HubSpot puts two fields on one row, sit them side by side on wider screens. */
@media (min-width: 640px) {
  .oit-form__card .hsfc-Row--multi,
  .oit-form__card .hsfc-Row.hsfc-Row--multiple {
    display: flex !important;
    gap: 20px !important;
  }
  .oit-form__card .hsfc-Row--multi > *,
  .oit-form__card .hsfc-Row.hsfc-Row--multiple > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

/* Labels: white, bold. */
.oit-form__card .hsfc-FieldLabel,
.oit-form__card .hsfc-FieldLabel * {
  color: #ffffff !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  margin: 0 0 8px !important;
}

/* Inputs / selects / textareas: white pills, dark text. */
.oit-form__card .hsfc-Form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="tel"]),
.oit-form__card .hsfc-Form select,
.oit-form__card .hsfc-Form textarea {
  width: 100% !important;
  background: #ffffff !important;
  color: #1a0303 !important;
  border: 1px solid transparent !important;
  border-radius: 24px !important;
  padding: 11px 20px !important;
  min-height: 45px !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}
.oit-form__card .hsfc-Form textarea {
  min-height: 120px !important;
  border-radius: 16px !important;
  padding: 14px 20px !important;
  resize: vertical;
}
.oit-form__card .hsfc-Form input::placeholder,
.oit-form__card .hsfc-Form textarea::placeholder {
  color: rgba(26, 3, 3, 0.5) !important;
}
.oit-form__card .hsfc-Form input:focus,
.oit-form__card .hsfc-Form select:focus,
.oit-form__card .hsfc-Form textarea:focus {
  outline: none !important;
  border-color: rgba(224, 5, 35, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(224, 5, 35, 0.18) !important;
}

/* Phone field -- one cohesive white pill: the country flag + caret sit on the
   left (with a subtle divider), the number input is flush to its right, so the
   selector and the field read as a single control. */
.oit-form__card .hsfc-PhoneInput {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  background: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 24px !important;
  padding: 0 20px !important;
  padding-left: 0 !important;
  min-height: 45px !important;
}
/* The flag/caret carries the left inset instead of the pill, so HubSpot's own
   flag offset doesn't break the layout. */
.oit-form__card .hsfc-PhoneInput__FlagAndCaret {
  padding-left: 16px !important;
}
.oit-form__card .hsfc-PhoneInput:focus-within {
  border-color: rgba(224, 5, 35, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(224, 5, 35, 0.18) !important;
}
.oit-form__card .hsfc-PhoneInput__FlagAndCaret {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  padding-right: 10px !important;
  cursor: pointer !important;
  /* HubSpot gives the flag picker its own light box (background + border) --
     strip it all so the flag sits seamlessly inside the white pill instead of
     looking like a separate box (most visible on the red gradient card). */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.oit-form__card .hsfc-PhoneInput__FlagAndCaret__Caret,
.oit-form__card .hsfc-PhoneInput__FlagAndCaret__Caret svg {
  color: #1a0303 !important;
  fill: #1a0303 !important;
}
/* Number input: flush inside the pill (not its own pill). */
.oit-form__card .hsfc-PhoneInput > input.hsfc-TextInput {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
}
.oit-form__card .hsfc-PhoneInput > input.hsfc-TextInput:focus {
  box-shadow: none !important;
  border: 0 !important;
}
/* Country dropdown: readable on the dark card. */
.oit-form__card .hsfc-DropdownOptions {
  background: #ffffff !important;
  color: #1a0303 !important;
  border-radius: 16px !important;
  z-index: 20 !important;
}

/* Submit button: brand red pill, uppercase. */
.oit-form__card .hsfc-Button,
.oit-form__card .hsfc-Form button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: auto !important;
  background: #e00523 !important;
  color: #ffffff !important;
  border: 1px solid #d1001d !important;
  border-radius: 90px !important;
  padding: 10px 28px !important;
  min-height: 0 !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}
.oit-form__card .hsfc-Button:hover,
.oit-form__card .hsfc-Form button[type="submit"]:hover {
  background: #c40420 !important;
}

/* Double-chevron after the submit label (matches the brand CTA buttons). */
.oit-form__card .hsfc-Button::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 13px;
  margin-left: 2px;
  flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12'%3E%3Cpath fill='%23ffffff' d='M0 1.41L1.36689 0L7.18345 6L1.36689 12L0 10.59L4.43997 6L0 1.41ZM5.81656 1.41L7.18345 0L13 6L7.18345 12L5.81656 10.59L10.2565 6L5.81656 1.41Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Submit row spacing. */
.oit-form__card .hsfc-NavigationRow {
  margin-top: 24px !important;
  padding: 0 !important;
}

/* Required marker + validation messages. */
.oit-form__card .hsfc-FieldLabel abbr,
.oit-form__card .hsfc-FieldLabel [class*="equired"] {
  color: #ffffff !important;
  text-decoration: none !important;
}
.oit-form__card .hsfc-Form [class*="Error"],
.oit-form__card .hsfc-Form [class*="error"] {
  color: #ffd5d5 !important;
}