/* ============================================================================
   Kostenhinweis vor dem Absenden (includes/fee-note.php): ein ruhiger Kasten
   direkt über dem Absende-Knopf — in der Gesprächsform, im letzten Schritt
   der allgemeinen Anfrage und in den Anfragefenstern der Sachverständigen.
   In der Gesprächsform nimmt er die Neutraltöne der Seite an, sonst den
   hellen Markenton der Hinweise.
   ========================================================================= */

.fee-note {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1rem;
  border: 1px solid var(--color-primary-200);
  border-radius: .75rem;
  background: var(--color-primary-50);
  color: var(--color-primary-950);
  font-size: .9375rem;
  line-height: 1.5;
  text-align: left;
}

.fee-note[hidden],
[data-funnel-last][hidden] {
  display: none;
}

.fee-note p {
  margin: 0;
}

.fee-note-icon {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: .0625rem;
  color: var(--color-primary-700);
}

.fee-note-body {
  min-width: 0;
}

.fee-note-title {
  font-weight: 700;
  line-height: 1.35;
}

.fee-note-text {
  padding-top: .1875rem;
  color: var(--color-primary-900);
}

/* Allgemeine Anfrage: über der Navigation des letzten Schritts. */
.funnel-fee {
  margin-top: 1.5rem;
}

/* Anfragefenster: zwischen Einwilligung und Knopf. */
.ec-modal .fee-note {
  margin-top: 1rem;
  font-size: .9rem;
}

/* Gesprächsform: im Aktionsblock über dem Knopf, in Tinte und Haarlinie der
   Seite wie die Kacheln der Antworten. So breit wie der Einwilligungstext
   darüber und dicht an ihm, damit beide als ein Block vor dem Knopf stehen. */
.cf-fee {
  flex-basis: 100%;
}

.cf-page .cf-step .cf-actions--fee {
  margin-top: 1.5rem;
}

.cf-page .fee-note {
  border-color: var(--cf-line);
  border-radius: 3px;
  background: #fff;
  color: var(--cf-ink);
  font-size: 1rem;
}

.cf-page .fee-note-icon {
  color: var(--cf-ink);
}

.cf-page .fee-note-text {
  color: var(--cf-quiet);
}

@media (max-width: 30rem) {
  .fee-note {
    gap: .625rem;
    padding: .75rem .875rem;
  }

  .cf-page .fee-note {
    font-size: .9375rem;
  }
}