/**
 * Funnel optimizer form UI — injected last by shell.js on funnel-optimizer pages.
 */

body[data-calculator="funnel-optimizer"] .calc-form-heading {
  display: none !important;
}

body[data-calculator="funnel-optimizer"] .form-section.calc-funnel-panel {
  margin-bottom: 20px !important;
  padding: 22px 24px 24px !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-xl) !important;
  background: var(--panel-bg) !important;
  box-shadow: var(--shadow-sm) !important;
}

body[data-calculator="funnel-optimizer"] .calc-funnel-panel-header h3 {
  margin: 0 !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--black) !important;
}

body[data-calculator="funnel-optimizer"] .calc-funnel-business-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body[data-calculator="funnel-optimizer"] .calc-funnel-business-grid .form-group,
body[data-calculator="funnel-optimizer"] .funnel-stage-field {
  margin-bottom: 0 !important;
}

body[data-calculator="funnel-optimizer"] .funnel-inputs-head,
body[data-calculator="funnel-optimizer"] .funnel-stage {
  display: grid !important;
  grid-template-columns: minmax(180px, 1.5fr) minmax(120px, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
}

body[data-calculator="funnel-optimizer"] .funnel-inputs-head {
  padding: 0 4px 4px !important;
  border-bottom: 1px solid rgba(136, 158, 168, 0.14) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--body-display) !important;
}

body[data-calculator="funnel-optimizer"] .funnel-stages {
  display: grid !important;
  gap: 10px !important;
}

body[data-calculator="funnel-optimizer"] .funnel-stage {
  margin-bottom: 0 !important;
  padding: 14px 16px !important;
  background: var(--surface-elevated) !important;
  border: 1px solid rgba(136, 158, 168, 0.16) !important;
  border-radius: var(--r-lg) !important;
  transform: none !important;
}

body[data-calculator="funnel-optimizer"] .funnel-stage::after {
  display: none !important;
}

body[data-calculator="funnel-optimizer"] .funnel-stage:hover {
  transform: none !important;
  padding-left: 16px !important;
  border-color: rgba(44, 69, 125, 0.22) !important;
  box-shadow: 0 10px 24px rgba(41, 43, 78, 0.06) !important;
}

body[data-calculator="funnel-optimizer"] .funnel-stage-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body[data-calculator="funnel-optimizer"] .funnel-stage-copy h4 {
  margin: 0 0 4px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--black) !important;
}

body[data-calculator="funnel-optimizer"] .funnel-stage-hint {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--body-display) !important;
}

body[data-calculator="funnel-optimizer"] .funnel-field-label {
  display: none !important;
}

body[data-calculator="funnel-optimizer"] .funnel-stage-field input,
body[data-calculator="funnel-optimizer"] .calc-funnel-business-grid .form-group input,
body[data-calculator="funnel-optimizer"] .calc-funnel-business-grid .form-group select {
  width: 100% !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(136, 158, 168, 0.28) !important;
  border-radius: var(--r-pill) !important;
  background: var(--surface-elevated) !important;
  color: var(--black) !important;
  box-sizing: border-box !important;
}

body[data-calculator="funnel-optimizer"] .funnel-stage.weak-stage {
  border-color: rgba(255, 75, 39, 0.35) !important;
  background: rgba(255, 75, 39, 0.05) !important;
}

body[data-calculator="funnel-optimizer"] .funnel-stage.weak-stage .funnel-stage-copy h4 {
  color: var(--orange-red) !important;
}

body[data-calculator="funnel-optimizer"] .form-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 8px !important;
}

body[data-calculator="funnel-optimizer"] .form-buttons .calculate-button {
  flex: 1 1 220px !important;
  min-height: 48px !important;
  border-radius: var(--r-pill) !important;
}

body[data-calculator="funnel-optimizer"] .form-buttons .secondary-button {
  flex: 0 1 140px !important;
  min-height: 48px !important;
  border-radius: var(--r-pill) !important;
  background: var(--surface-elevated) !important;
  color: var(--blue-fisagency) !important;
  border: 1px solid rgba(44, 69, 125, 0.24) !important;
}

@media (max-width: 991px) {
  body[data-calculator="funnel-optimizer"] .funnel-inputs-head {
    display: none !important;
  }

  body[data-calculator="funnel-optimizer"] .funnel-stage {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body[data-calculator="funnel-optimizer"] .funnel-field-label {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--black) !important;
  }

  body[data-calculator="funnel-optimizer"] .calc-funnel-business-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767px) {
  body[data-calculator="funnel-optimizer"] .form-section.calc-funnel-panel {
    padding: 18px 16px 20px !important;
  }

  body[data-calculator="funnel-optimizer"] .form-buttons .calculate-button,
  body[data-calculator="funnel-optimizer"] .form-buttons .secondary-button {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}