/* ==========================================================================
   Base Form Styles
   ========================================================================== */
form {
  font-family: var(--font--primary-family), sans-serif !important;
  color: var(--pattern-library-v2_theme---text) !important;
}

/* ==========================================================================
   Marketo Form Container
   ========================================================================== */
.mktoForm {
  padding: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ==========================================================================
   Form Row — 16px col gap, 24px row gap
   ========================================================================== */
.mktoFormRow {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: stretch;
  column-gap: var(--_spacing---space--2);
  row-gap: var(--_spacing---space--3);
}

.mktoFormCol,
.mktoFieldWrap {
  width: 100% !important;
  padding: 0 !important;
}

/* ==========================================================================
   Labels — 14px bold, flush to input
   ========================================================================== */
.mktoLabel {
  display: flex !important;
  width: 100% !important;
  font-size: 0.875rem !important;
  font-weight: var(--font--primary-bold) !important;
  line-height: 1.25rem !important;
  color: var(--pattern-library-v2_theme---text) !important;
  margin-bottom: 0 !important;
}

/* Required asterisk */
.mktoAsterix {
  color: var(--pattern-library-v2---swatch--error-500) !important;
  font-weight: var(--font--primary-bold) !important;
  margin-right: 0.125rem !important;
  order: -1 !important;
}

/* ==========================================================================
   Inputs, Selects, Textareas
   ========================================================================== */
.mktoForm input[type="text"],
.mktoForm input[type="url"],
.mktoForm input[type="email"],
.mktoForm input[type="tel"],
.mktoForm input[type="number"],
.mktoForm input[type="date"],
.mktoForm select.mktoField,
.mktoForm .mktoField {
  display: flex;
  width: 100% !important;
  height: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  border-radius: var(--pattern-library-v2---radius--md) !important;
  background-color: #ebf0f5 !important;
  color: var(--pattern-library-v2_theme---text) !important;
  padding: 0 var(--_spacing---space--2) !important;
  border: none !important;
  font-size: 1rem !important;
  margin-bottom: 0 !important;
}

.mktoForm select.mktoField {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%237289a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right var(--_spacing---space--2) center !important;
  padding-right: 2.5rem !important;
}

.mktoForm textarea.mktoField {
  display: flex;
  min-height: 5rem;
  border-radius: var(--pattern-library-v2---radius--md) !important;
  background-color: #ebf0f5 !important;
  color: var(--pattern-library-v2_theme---text) !important;
  padding: var(--_spacing---space--2) !important;
  border: none !important;
  font-size: 1rem !important;
}

/* Placeholders — 40% opacity of theme text */
.mktoForm input::placeholder,
.mktoForm textarea.mktoField::placeholder {
  color: color-mix(in srgb, var(--pattern-library-v2_theme---text) 40%, transparent) !important;
}

.mktoForm select.mktoField:invalid,
.mktoForm select.mktoField option[value=""] {
  color: color-mix(in srgb, var(--pattern-library-v2_theme---text) 40%, transparent) !important;
}

/* ==========================================================================
   Privacy / consent copy
   ========================================================================== */
.mktoHtmlText,
.mktoHtmlText * {
  color: var(--pattern-library-v2_theme---text) !important;
}

/* ==========================================================================
   Hide spacer elements
   ========================================================================== */
.mktoOffset,
.mktoClear,
.mktoGutter {
  display: none !important;
  width: 0 !important;
}

.mktoFormRow:has(input[type="hidden"]) {
  display: none !important;
}

/* ==========================================================================
   Submit button row — right-aligned
   ========================================================================== */
.mktoButtonRow {
  margin-top: var(--_spacing---space--2) !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.mktoButtonWrap {
  margin: 0 !important;
}

/* ==========================================================================
   Submit button — purple→blue gradient, 12px radius, 56px height
   ========================================================================== */
.mktoButton {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--_spacing---space--2) !important;
  min-height: 3.5rem !important;
  padding: var(--_spacing---space--2) var(--_spacing---space--3) !important;
  border: none !important;
  border-radius: var(--pattern-library-v2---radius--md) !important;
  background-image: linear-gradient(90deg,
      var(--_swatches---brand--purple),
      var(--_swatches---brand--dark-blue)) !important;
  color: var(--pattern-library-v2---swatch--white) !important;
  font-size: 1.125rem !important;
  font-weight: var(--font--primary-medium) !important;
  letter-spacing: var(--_typography---letter-spacing--0-5px) !important;
  text-transform: none !important;
  transition: opacity 200ms ease !important;
}

.mktoButton:hover {
  opacity: 0.9 !important;
}

.mktoButton:focus {
  outline: 2px solid var(--_swatches---brand--dark-blue);
  outline-offset: 3px;
}