/* Auto Vehicle Form Pro v4.3.0 */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

/* ── Wrapper ── */
.avfp-wrapper {
  max-width: 520px !important;
  width: 520px !important;
  margin: 40px auto !important;
  background: #33853f !important;
  border-radius: 22px !important;
  font-family: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  box-sizing: border-box !important;
  /* NO contain:layout — it causes width recalc on child show/hide */
  flex-shrink: 0 !important;
  /* Force light color scheme — prevents iOS dark mode native pickers */
  color-scheme: light !important;
}
.avfp-form {
  background: #ffffff !important;
  padding: 40px !important;
  border-radius: 22px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* ── Steps – all same full width, no layout shift ── */
.avfp-step {
  display: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}
.avfp-step.active {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* All children of form locked to same width */
.avfp-form > *,
.avfp-step > *,
.avfp-section-card {
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* ── Cards ── */
.avfp-section-card {
  background: #ffffff !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
  border: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Heading – Manrope ── */
.avfp-section-title {
  font-family: "Manrope", sans-serif !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  color: #33853f !important;
  margin: 0 0 28px !important;
  line-height: 1.1 !important;
}

/* ── Fields ── */
.avfp-field {
  margin-bottom: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Step 1 – two columns */
#avfp-step1 .avfp-field-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  width: 100% !important;
}
@media (max-width: 580px) {
  #avfp-step1 .avfp-field-row {
    grid-template-columns: 1fr !important;
  }
}

/* Step 2 – single column, all 100% same width */
#avfp-step2 .avfp-field-row {
  display: block !important;
  width: 100% !important;
}
#avfp-step2 .avfp-field {
  width: 100% !important;
}

/* ── Labels – Manrope, sentence case ── */
.avfp-field label {
  display: block !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  margin-bottom: 7px !important;
  color: #374151 !important;
  text-transform: none !important;
}

/* ── Helper + trust text ── */
.avfp-helper {
  margin: 6px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #6b7280 !important;
  font-family: "Manrope", sans-serif !important;
}
.avfp-helper-top {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

.avfp-trust-note {
  margin: 0 0 18px !important;
  padding: 12px 14px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #f9fafb !important;
  color: #374151 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-family: "Manrope", sans-serif !important;
}

/* ── Progress indicator ── */
.avfp-progress {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 0 18px !important;
}
.avfp-progress-text {
  font-family: "Manrope", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #6b7280 !important;
}

/* ── Progress steps (circles) ── */
.avfp-progress-steps {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
}
.avfp-progress-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  position: relative !important;
}
.avfp-progress-circle {
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  background: #e5e7eb !important;
  color: #6b7280 !important;
}
.avfp-progress-label {
  font-family: "Manrope", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #6b7280 !important;
}
.avfp-progress-step.active .avfp-progress-circle {
  background: #33853f !important;
  color: #ffffff !important;
}
.avfp-progress-step.active .avfp-progress-label {
  color: #111827 !important;
}

/* ── Inputs / selects / textarea ── */
.avfp-field input,
.avfp-field select,
.avfp-field textarea {
  width: 100% !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  background: #ffffff !important;
  border: 2px solid #33853f !important;
  border-radius: 8px !important;
  outline: none !important;
  transition:
    border-color 0.25s,
    box-shadow 0.25s !important;
  color: #111827 !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  /* iOS Safari: force light mode so native picker shows correctly */
  color-scheme: light !important;
}
.avfp-field input::placeholder,
.avfp-field textarea::placeholder {
  color: #d1d5db !important;
}
.avfp-field input:focus,
.avfp-field select:focus,
.avfp-field textarea:focus {
  border-color: #1f5f2d !important;
  box-shadow: 0 0 0 3px rgba(51, 133, 63, 0.12) !important;
}
.avfp-field select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23374151" d="M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 40px !important;
  cursor: pointer !important;
  /* iOS: ensure native picker uses light scheme */
  color-scheme: light !important;
  background-color: #ffffff !important;
}
.avfp-field select option {
  color: #111827 !important;
  background-color: #ffffff !important;
}
/* Prevent TranslatePress from making options white/invisible */
#avfpForm select,
#avfpForm select option,
#avfpForm select optgroup {
  color: #111827 !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  color-scheme: light !important;
}
/* iOS Safari specific: force the native picker wheel to be light */
@supports (-webkit-touch-callout: none) {
  #avfpForm select {
    color-scheme: light !important;
    background-color: #ffffff !important;
    color: #111827 !important;
  }
  #avfpForm select option {
    color: #111827 !important;
    background-color: #ffffff !important;
  }
}
.avfp-field input:disabled,
.avfp-field select:disabled {
  background-color: #f3f4f6 !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}
.avfp-wrapper textarea {
  resize: vertical !important;
  min-height: 90px !important;
}

/* ════════════════════════════════════════
   MODE TOGGLE – pill style
   ════════════════════════════════════════ */
.avfp-mode-toggle {
  display: flex !important;
  justify-content: center !important;
  margin: 22px 0 !important;
  background: #e9ecef !important;
  border-radius: 50px !important;
  padding: 4px !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.avfp-mode-btn {
  min-width: 110px !important;
  padding: 10px 26px !important;
  border: none !important;
  border-radius: 50px !important;
  background: transparent !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  color: #6b7280 !important;
  transition: all 0.25s !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  outline: none !important;
}
.avfp-mode-btn.active {
  background: #33853f !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.1) !important;
}
.avfp-mode-btn:hover:not(.active) {
  color: #374151 !important;
  background: rgba(0, 0, 0, 0.06) !important;
}

/* ── VIN Input group ── */
.avfp-input-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: center !important;
}
.avfp-input-group input {
  width: 100% !important;
}

/* VIN helper should sit between field and Decode button */
.avfp-helper-vin {
  width: 100% !important;
  text-align: left !important;
  margin-top: -2px !important;
}

/* ── Decode button – auto width, centered ── */
.avfp-btn-decode {
  width: auto !important;
  min-width: 160px !important;
  padding: 13px 36px !important;
  border-radius: 50px !important;
  border: none !important;
  background: #d1d5db !important;
  color: #ffffff !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: not-allowed !important;
  transition: all 0.25s !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: block !important;
  margin: 0 auto !important;
}
.avfp-btn-decode.enabled {
  background: #33853f !important;
  cursor: pointer !important;
}
.avfp-btn-decode.enabled:hover {
  background: #1f5f2d !important;
}

/* ── Status bar – no bg, green color, centered ── */
#avfp-statusMsg,
#avfp-statusMsgManual {
  padding: 10px 0 !important;
  margin-top: 12px !important;
  font-size: 13px !important;
  text-align: center !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 500 !important;
  background: transparent !important;
  color: #33853f !important;
  display: none;
  border-radius: 0 !important;
}
#avfp-statusMsg.success,
#avfp-statusMsg.info,
#avfp-statusMsgManual.success,
#avfp-statusMsgManual.info {
  background: transparent !important;
  color: #33853f !important;
}
/* A missing answer printed in the same green as a success is how a seller ends up stuck on
   Step 2 with no idea why. Errors read red, and they read as a sentence, not a caption. */
#avfp-statusMsg.error,
#avfp-statusMsg.warning,
#avfp-statusMsg.manual,
#avfp-statusMsgManual.error,
#avfp-statusMsgManual.warning,
#avfp-statusMsgManual.manual {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

/* ── Actions ── */
.avfp-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  margin-top: 28px !important;
}
#avfp-step2 .avfp-actions {
  justify-content: center !important;
}

/* Step 2: stack CTA + trust items */
#avfp-step2 .avfp-actions {
  flex-direction: column !important;
  align-items: center !important;
}

.avfp-review-snippet {
  font-family: "Manrope", sans-serif !important;
  font-size: 12px !important;
  color: #6b7280 !important;
  margin-bottom: 10px !important;
  text-align: left !important;
  width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  line-height: 1.5 !important;
}
.avfp-review-snippet .avfp-stars {
  margin-right: 4px !important;
  flex-shrink: 0 !important;
}
.avfp-review-snippet .avfp-quote {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.avfp-submit-trust {
  margin-top: 12px !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 12px !important;
  color: #374151 !important;
  text-align: left !important;
  width: 100% !important;
  max-width: 420px !important;
  align-self: stretch !important;
}
.avfp-submit-trust div {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin: 6px 0 !important;
  line-height: 1.5 !important;
}
.avfp-submit-trust div::before {
  content: "" !important;
  /* Tick is inline in HTML — use flex so text never wraps under it */
  flex-shrink: 0 !important;
}
.avfp-trust-tick {
  flex-shrink: 0 !important;
  color: #33853f !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  margin-top: 1px !important;
}
.avfp-submit-trust div > span:last-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* ── Primary button ── */
.avfp-btn-primary {
  padding: 16px 40px !important;
  min-width: 200px !important;
  background: #33853f !important;
  color: #fff !important;
  border: 2px solid #33853f !important;
  border-radius: 12px !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08) !important;
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.08s !important;
}
/* A button that moves under the thumb is the cheapest "yes, I got that" there is. */
.avfp-btn-primary:active:not(:disabled) {
  transform: translateY(1px) !important;
  box-shadow: none !important;
}
#avfp-step2 .avfp-btn-primary {
  width: 100% !important;
  display: block !important;
}
.avfp-btn-primary:hover:not(:disabled) {
  background: #000000 !important;
  border-color: #000000 !important;
}
.avfp-btn-primary:disabled {
  background: #9ca3af !important;
  border-color: #9ca3af !important;
  cursor: not-allowed !important;
}

/* ── Custom file upload ── */
.avfp-upload-box {
  border: 2px solid #33853f !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  position: relative !important;
  overflow: hidden !important;
  background: #fff !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.avfp-upload-box:hover,
.avfp-upload-box.dragover {
  background: #f0fdf4 !important;
}
.avfp-upload-icon {
  display: inline-block !important;
  margin-bottom: 6px !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
}
.avfp-upload-icon svg {
  width: 28px !important;
  height: 28px !important;
}
.avfp-upload-title {
  font-family: "Manrope", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #111827 !important;
  margin: 0 0 2px !important;
  display: inline !important;
}
.avfp-upload-sub {
  font-size: 11px !important;
  color: #9ca3af !important;
  margin: 0 !important;
  display: block !important;
}
.avfp-field-photos {
  margin-bottom: 12px !important;
}
.avfp-upload-hint {
  font-size: 12px !important;
  color: #9ca3af !important;
  margin: 10px 0 0 !important;
  text-align: left !important;
  font-family: "Manrope", sans-serif !important;
  font-style: italic !important;
}
.avfp-upload-box input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  padding: 0 !important;
}
.avfp-upload-preview {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 10px !important;
}
.avfp-upload-preview span {
  background: #f0fdf4 !important;
  border: 1px solid #33853f !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  color: #065f46 !important;
  font-family: "Manrope", sans-serif !important;
}

/* ── Thank you – Step 3 ── */
.avfp-thank-you {
  text-align: center !important;
  padding: 50px 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.avfp-thank-you h2 {
  font-family: "Manrope", sans-serif !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: #33853f !important;
  margin-bottom: 20px !important;
  line-height: 35px !important;
}
.avfp-thank-you p {
  color: #374151 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}
.avfp-thank-you p + p {
  margin-top: 10px !important;
}
.avfp-thank-you a {
  color: inherit !important;
}

/* ── Secondary button (Thank you page) ── */
.avfp-btn-secondary {
  display: inline-block !important;
  margin-top: 18px !important;
  padding: 12px 22px !important;
  border-radius: 12px !important;
  border: 2px solid #33853f !important;
  background: #33853f !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  transition: all 0.25s !important;
}
.avfp-btn-secondary:hover {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}
.avfp-sub-id {
  margin-top: 16px !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  font-weight: 600 !important;
}

/* ── Loading overlay ── */
#avfp-loadingOverlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#avfp-loadingOverlay.avfp-visible {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: all !important;
}
.avfp-loading {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
}
.avfp-loading p {
  color: #fff !important;
  margin-top: 18px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.avfp-spinner {
  width: 50px !important;
  height: 50px !important;
  border: 4px solid rgba(255, 255, 255, 0.3) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: avfp-spin 0.8s linear infinite !important;
}
@keyframes avfp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .avfp-wrapper {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    min-width: calc(100% - 20px) !important;
    margin: 10px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  .avfp-form {
    padding: 18px 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* Steps: full width, no overflow */
  .avfp-step,
  .avfp-step.active {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Buttons */
  .avfp-btn-primary {
    width: 100% !important;
  }
  .avfp-btn-decode {
    width: 100% !important;
    min-width: unset !important;
  }

  /* Contact Information heading — smaller on mobile */
  .avfp-section-title {
    font-size: 28px !important;
    margin-bottom: 18px !important;
  }

  /* iOS zoom prevention: ONLY text inputs need 16px.
       Selects use native picker so font-size doesn't cause zoom.
       Setting 16px on select makes the text look huge on iOS. */
  .avfp-field input[type="text"],
  .avfp-field input[type="email"],
  .avfp-field input[type="tel"],
  .avfp-field input[type="number"],
  .avfp-field textarea {
    font-size: 16px !important;
  }
  /* Selects: keep at 14px — native picker handles zoom itself */
  .avfp-field select {
    font-size: 14px !important;
  }

  /* ── Thank You page mobile ── */
  .avfp-thank-you h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 35px !important;
  }
  .avfp-thank-you p {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
}

/* ══ VIN/Manual toggle width-lock ══
   Grid overlay: both sections sit in the same grid cell.
   The hidden one is invisible but still contributes to width.
   This is the only bulletproof way to prevent width jump.    */
.avfp-vehicle-toggle-wrap {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#avfp-vinSection,
#avfp-vehicleSection {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  /* Visible state */
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: all !important;
  height: auto !important;
  overflow: visible !important;
}
#avfp-vinSection.avfp-hidden,
#avfp-vehicleSection.avfp-hidden {
  /* Hidden but still in grid flow — zero height, invisible */
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
  /* Still display:block so grid cell width is preserved */
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Step switching – hold wrapper width */
#avfp-step1,
#avfp-step2,
#avfp-step3 {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Generic avfp-hidden utility */
.avfp-hidden {
  display: none !important;
}

/* ══════════════════════════════════════════
   COLLAPSIBLE SECTIONS (Step 2)
══════════════════════════════════════════ */
.avfp-collapsible {
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.avfp-collapse-toggle {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 11px 14px !important;
  background: #f9fafb !important;
  border: none !important;
  cursor: pointer !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #374151 !important;
  text-align: left !important;
  transition: background 0.2s !important;
  box-sizing: border-box !important;
  /* Prevent label overflow */
  overflow: hidden !important;
}
.avfp-collapse-toggle > span:first-child {
  /* Main label: truncate if too long, never wrap */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.avfp-collapse-toggle:hover {
  background: #f0fdf4 !important;
}
.avfp-collapse-toggle.avfp-collapse-open {
  background: #f0fdf4 !important;
}
.avfp-collapse-arrow {
  margin-left: 4px !important;
  font-size: 10px !important;
  color: #9ca3af !important;
  transition: transform 0.25s !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}
.avfp-collapse-toggle.avfp-collapse-open .avfp-collapse-arrow {
  transform: rotate(180deg) !important;
}
.avfp-optional-badge {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  background: #f3f4f6 !important;
  border-radius: 20px !important;
  padding: 2px 9px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.avfp-collapse-body {
  padding: 14px !important;
  box-sizing: border-box !important;
}
.avfp-collapse-body .avfp-field:last-child {
  margin-bottom: 0 !important;
}

/* ── Step 2 vertical tightening ── */
#avfp-step2 .avfp-field {
  margin-bottom: 18px !important;
}
#avfp-step2 .avfp-section-card {
  margin-bottom: 14px !important;
}
#avfp-step2 .avfp-trust-note {
  margin-bottom: 12px !important;
}

/* ── Auto-grow notes textarea ── */
.avfp-notes-auto {
  min-height: 60px !important;
  resize: none !important;
  overflow-y: hidden !important;
}
.avfp-wrapper textarea {
  min-height: 60px !important;
}

/* ── Label optional suffix ── */
.avfp-label-optional {
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #9ca3af !important;
  font-size: 13px !important;
}

/* ══════════════════════════════════════════
   TRANSLATEPRESS — Force dropdowns visible immediately
   Prevents transparent/invisible options on page load
══════════════════════════════════════════ */
[class*="trp-"],
[id*="trp-"],
[class*="trp_"],
[id*="trp_"],
.trp-language-switcher,
.trp-language-switcher *,
.trp-language-switcher select,
.trp-language-switcher select option,
.wp-block-navigation .trp-language-switcher,
ul.trp-language-switcher-shortcode,
ul.trp-language-switcher-shortcode li,
ul.trp-language-switcher-shortcode li a {
  opacity: 1 !important;
  visibility: visible !important;
  color: inherit !important;
  background-color: initial !important;
  transition: none !important;
  animation: none !important;
}
/* Ensure select options are never transparent */
.trp-language-switcher select option,
select[id*="trp"] option,
select[class*="trp"] option {
  color: #111827 !important;
  background: #ffffff !important;
  opacity: 1 !important;
}

/* ══════════════════════════════════════════
   iOS FIRST-TAP FIX
   touch-action:manipulation removes the 300ms
   tap delay on iOS Safari — dropdowns open
   on first tap without double-tap.
══════════════════════════════════════════ */
.avfp-wrapper,
.avfp-wrapper *,
#avfpForm select,
#avfpForm input,
#avfpForm button,
.avfp-mode-btn,
.avfp-collapse-toggle {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}
/* Cursor pointer on selects for clarity */
#avfpForm select {
  cursor: pointer !important;
}

/* ══════════════════════════════════════════
   Sep 20 2026 — consent row, required-field
   red/flash state, simplified review badge.
   Appended last so it wins on equal specificity.
══════════════════════════════════════════ */

/* ── Email/SMS consent: a checkbox is not a form field, so it must not inherit the
      14px semibold label treatment or it reads as another question. ── */
.avfp-consent label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 11px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #4b5563 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 0 !important;
  cursor: pointer !important;
}
.avfp-consent input[type="checkbox"] {
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  border: 2px solid #9ca3af !important;
  border-radius: 5px !important;
  accent-color: #33853f !important;
  cursor: pointer !important;
}
.avfp-consent input[type="checkbox"]:checked {
  border-color: #33853f !important;
}
#avfp-step2 .avfp-field.avfp-consent {
  margin-bottom: 18px !important;
}

/* ── Required and missing. Evan hit this live on a 2012 F150: the field that blocked him
      was required, nothing on screen said so, and the message printed in success-green.

      Deliberately NOT animated. A pulse is easy to miss, reads as decoration on a slow phone,
      and is gone by the time someone scrolls back. The outline and the sentence beside the
      field stay until the field is answered — that is what a person can actually act on. ── */
.avfp-field.avfp-invalid > label {
  color: #b91c1c !important;
}
.avfp-invalid input,
.avfp-invalid select,
.avfp-invalid textarea,
.avfp-upload-box.avfp-invalid {
  border-color: #dc2626 !important;
  background-color: #fff5f5 !important;
}
.avfp-invalid input:focus,
.avfp-invalid select:focus,
.avfp-invalid textarea:focus {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14) !important;
}
/* The photo field's file input is a transparent overlay on the upload box — it must not
   take the tint, or the box gets two borders and a grey wash over the icon. */
.avfp-invalid input[type="file"] {
  background-color: transparent !important;
}

/* ── The bar above the Submit button. THE fix for Evan's F150: both existing status divs
      (#avfp-statusMsg, #avfp-statusMsgManual) sit inside #avfp-step1, which is display:none
      on Step 2 — so the reason was written into a hidden element and the button looked dead.
      This one lives in Step 2's own actions block, directly above the button. ── */
.avfp-form-error-bar {
  display: none;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 12px !important;
  padding: 12px 14px !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-left: 4px solid #dc2626 !important;
  border-radius: 10px !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: #b91c1c !important;
  text-align: left !important;
}
/* The reason, under the field it belongs to — not only in the bar at the bottom. */
.avfp-field-error {
  margin: 7px 0 0 !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: #b91c1c !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
}
/* Required marker on the label, so nobody has to press Submit to find out. */
.avfp-req-star {
  color: #dc2626 !important;
  font-weight: 700 !important;
  margin-left: 2px !important;
}
/* Photos are conditionally required, and the suffix is the only thing that says which state
   the field is in. Amber while it is merely required, red once it has actually blocked. */
.avfp-photos-required .avfp-label-optional {
  color: #b45309 !important;
  font-weight: 600 !important;
}
.avfp-field.avfp-invalid .avfp-label-optional {
  color: #b91c1c !important;
  font-weight: 600 !important;
}

/* ── Review badge: one line, one mark, one count. ── */
.avfp-review-snippet {
  font-size: 13px !important;
  color: #6b7280 !important;
  gap: 6px !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}
.avfp-review-snippet .avfp-stars {
  color: #f5a623 !important;
  letter-spacing: 1px !important;
  font-size: 13px !important;
}
.avfp-review-snippet .avfp-google-count {
  font-weight: 600 !important;
  color: #374151 !important;
  white-space: nowrap !important;
}
.avfp-review-snippet .avfp-google {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-weight: 600 !important;
  color: #374151 !important;
}
.avfp-review-snippet .avfp-google svg {
  width: 13px !important;
  height: 13px !important;
}
.avfp-review-snippet .avfp-quote {
  flex: 1 1 100% !important;
  color: #6b7280 !important;
  font-style: italic !important;
}

/* ── Trust ticks and upload text, brought up to the new reading size. ── */
.avfp-submit-trust,
.avfp-upload-hint {
  font-size: 13px !important;
}
.avfp-upload-title {
  font-size: 15px !important;
}
.avfp-upload-sub {
  font-size: 13px !important;
  color: #6b7280 !important;
}
.avfp-upload-box {
  padding: 18px 16px !important;
}

/* ── Mobile: the 16px input size already prevents iOS zoom; labels and helpers follow. ── */
@media (max-width: 640px) {
  .avfp-field label {
    font-size: 14px !important;
  }
  .avfp-field input,
  .avfp-field select,
  .avfp-field textarea {
    font-size: 16px !important;
  }
  .avfp-helper {
    font-size: 13px !important;
  }
  .avfp-btn-primary {
    font-size: 16px !important;
    padding: 15px 28px !important;
  }
}

/* ══════════════════════════════════════════
   Sep 20 2026 — typography override.
   The homepage restyles #avfpForm from its own
   inline CSS, which loads after this file and
   outranks it. These selectors outrank that,
   and change type only — never geometry.
══════════════════════════════════════════ */

html body #avfpForm#avfpForm.avfp-form *,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form * {
  font-family: "Manrope", system-ui, sans-serif !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-field label,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-field label {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #374151 !important;
  margin-bottom: 7px !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-label-optional,
html body #avfpForm#avfpForm.avfp-form .avfp-optional-badge,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-label-optional,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-optional-badge {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-progress-label,
html body #avfpForm#avfpForm.avfp-form .avfp-progress-text,
html body #avfpForm#avfpForm.avfp-form .avfp-progress-circle,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-progress-label,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-progress-text,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-progress-circle {
  font-family: "Manrope", system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-progress-label,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-progress-label {
  font-size: 12px !important;
  font-weight: 600 !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-progress-text,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-progress-text {
  font-size: 13px !important;
  font-weight: 600 !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-helper,
html body #avfpForm#avfpForm.avfp-form .avfp-helper-top,
html body #avfpForm#avfpForm.avfp-form .avfp-upload-hint,
html body #avfpForm#avfpForm.avfp-form .avfp-collapse-body > .avfp-helper,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-helper,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-helper-top,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-upload-hint,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-collapse-body > .avfp-helper {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-trust-note,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-trust-note {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-field input:not([type=checkbox]):not([type=radio]):not([type=file]),
html body #avfpForm#avfpForm.avfp-form html body #avfpForm#avfpForm.avfp-form .avfp-field select,
html body #avfpForm#avfpForm.avfp-form html body #avfpForm#avfpForm.avfp-form .avfp-field textarea,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-field input:not([type=checkbox]):not([type=radio]):not([type=file]),
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form html body #avfpForm#avfpForm.avfp-form .avfp-field select,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form html body #avfpForm#avfpForm.avfp-form .avfp-field textarea {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
}
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-field input:not([type=checkbox]):not([type=radio]):not([type=file]),
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-field select,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-field textarea {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-collapse-toggle,
html body #avfpForm#avfpForm.avfp-form .avfp-collapse-toggle > span,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-collapse-toggle,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-collapse-toggle > span {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-btn-primary,
html body #avfpForm#avfpForm.avfp-form .avfp-btn-secondary,
html body #avfpForm#avfpForm.avfp-form .avfp-btn-decode,
html body #avfpForm#avfpForm.avfp-form .avfp-mode-btn,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-btn-primary,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-btn-secondary,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-btn-decode,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-mode-btn {
  font-family: "Manrope", system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-btn-primary,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-btn-primary {
  font-size: 17px !important;
  font-weight: 700 !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-upload-title,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-upload-title {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-upload-sub,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-upload-sub {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-consent label,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-consent label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 11px !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #4b5563 !important;
  margin-bottom: 0 !important;
  cursor: pointer !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-consent input[type="checkbox"],
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-consent input[type="checkbox"] {
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  accent-color: #33853f !important;
  cursor: pointer !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-review-snippet,
html body #avfpForm#avfpForm.avfp-form .avfp-review-snippet .avfp-google-count,
html body #avfpForm#avfpForm.avfp-form .avfp-review-snippet .avfp-google,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-review-snippet,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-review-snippet .avfp-google-count,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-review-snippet .avfp-google {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-review-snippet .avfp-google-count,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-review-snippet .avfp-google-count {
  font-weight: 600 !important;
  color: #374151 !important;
  white-space: nowrap !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-field.avfp-invalid input:not([type=checkbox]):not([type=radio]):not([type=file]),
html body #avfpForm#avfpForm.avfp-form .avfp-field.avfp-invalid select,
html body #avfpForm#avfpForm.avfp-form .avfp-field.avfp-invalid textarea,
html body #avfpForm#avfpForm.avfp-form .avfp-upload-box.avfp-invalid,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-field.avfp-invalid input:not([type=checkbox]):not([type=radio]):not([type=file]),
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-field.avfp-invalid select,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-field.avfp-invalid textarea,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-upload-box.avfp-invalid {
  border: 2px solid #dc2626 !important;
  background-color: #fff5f5 !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-field.avfp-invalid input[type="file"],
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-field.avfp-invalid input[type="file"] {
  border: none !important;
  background-color: transparent !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-field.avfp-invalid > label,
html body #avfpForm#avfpForm.avfp-form .avfp-field.avfp-invalid .avfp-label-optional,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-field.avfp-invalid > label,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-field.avfp-invalid .avfp-label-optional {
  color: #b91c1c !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-field-error,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-field-error {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: #b91c1c !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin: 7px 0 0 !important;
  background: transparent !important;
  text-align: left !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-form-error-bar,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-form-error-bar {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: #b91c1c !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-left: 4px solid #dc2626 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin: 0 0 12px !important;
  text-align: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-req-star,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-req-star {
  color: #dc2626 !important;
  font-weight: 700 !important;
}
html body #avfpForm#avfpForm.avfp-form .avfp-photos-required .avfp-label-optional,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-photos-required .avfp-label-optional {
  color: #b45309 !important;
  font-weight: 600 !important;
}

/* Consent fine print: the identification the Regulations require, sized and coloured so it reads
   as a footnote rather than as part of the question. */
html body #avfpForm#avfpForm.avfp-form .avfp-consent-fine,
html body .mc-page .mc-cardwrap #avfpForm#avfpForm.avfp-form .avfp-consent-fine {
  margin: 6px 0 0 30px !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #9ca3af !important;
  text-align: left !important;
  background: transparent !important;
}