/*
 * EverCare card-funnel styles. Only loads on pages containing
 * [fluentform id="1"] (Stage A) or [fluentform id="2"] (Stage B).
 * Scoped with form[data-form_id="1"] / form[data-form_id="2"] so it
 * cannot leak into Short form or Guide Gate renders.
 *
 * Steps are SYNTHESIZED by funnel.js — Fluent Forms Lite does not
 * emit multi-step DOM natively. funnel.js wraps consecutive
 * .ff-el-group nodes between .ec-step-break sentinels into
 * .ec-fstep containers and toggles .ec-fstep--active / --hidden.
 */

/* Form wrapper — rounded card */
form[data-form_id="1"],
form[data-form_id="2"] {
  background: var(--ec-bg-paper, #FDFBF5);
  border-radius: 14px;
  border: 1px solid var(--ec-border, #E0D9CA);
  padding: 32px 28px 28px;
  max-width: 720px;
  margin: 32px auto;
  position: relative;
}

/* Step-break sentinels — hidden markers, no visual */
.ec-step-break { display: none; }

/* Virtual step container (injected by funnel.js) */
.ec-fstep { display: block; }
.ec-fstep--hidden { display: none; }

/* Progress bar — injected by funnel.js at the top of the form */
.ec-funnel-progress { margin: -6px -4px 26px; }
.ec-funnel-progress__track {
  height: 3px;
  background: var(--ec-border, #E0D9CA);
  border-radius: 2px;
  overflow: hidden;
}
.ec-funnel-progress__bar {
  height: 100%;
  background: var(--ec-primary, #0F4C4A);
  width: 0%;
  transition: width 220ms ease-out;
}
.ec-funnel-progress__label {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ec-muted, #9C8D7E);
}

/* Back chevron (top-left of form, shown from step 2 onward by JS) */
.ec-funnel-back {
  position: absolute;
  top: 18px;
  left: 20px;
  background: transparent;
  border: 0;
  color: var(--ec-muted, #9C8D7E);
  font-size: 14px;
  padding: 4px 6px;
  cursor: pointer;
  display: none;
}
.ec-funnel-back:hover { color: var(--ec-ink, #241F1B); }

/* Step title — funnel.js injects <h3 class="ec-fstep__title"> above each step */
.ec-fstep__title {
  font-family: var(--ec-font-display, Fraunces), Georgia, serif;
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ec-ink, #241F1B);
  margin: 0 0 24px;
}
.ec-fstep__subtitle {
  color: var(--ec-muted, #5E554D);
  margin: -20px 0 24px;
  line-height: 1.55;
}

/* Hide FF's own field-level radio labels — we use the sentinel title instead */
form[data-form_id="1"] .ff-el-form-check + label,
form[data-form_id="2"] .ff-el-form-check + label { display: none; }

/* Card grid — the parent .ff-el-input--content holds all the sibling
   .ff-el-form-check wrappers (one per radio option). Grid goes on the
   parent so the chip tiles flow across columns. */
form[data-form_id="1"] .ff-el-input--content:has(> .ff-el-form-check),
form[data-form_id="2"] .ff-el-input--content:has(> .ff-el-form-check) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  form[data-form_id="1"] .ff-el-input--content:has(> .ff-el-form-check),
  form[data-form_id="2"] .ff-el-input--content:has(> .ff-el-form-check) {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 960px) {
  form[data-form_id="1"] .ff-el-input--content:has(> .ff-el-form-check),
  form[data-form_id="2"] .ff-el-input--content:has(> .ff-el-form-check) {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Each chip wrapper fills its grid cell */
form[data-form_id="1"] .ff-el-form-check,
form[data-form_id="2"] .ff-el-form-check {
  margin: 0;
  padding: 0;
}

/* Individual chip card — sized to feel substantial on desktop while
   still fitting 2-wide on mobile. */
form[data-form_id="1"] .ff-el-form-check label,
form[data-form_id="2"] .ff-el-form-check label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px 16px;
  background: #fff;
  border: 1.5px solid var(--ec-border, #E0D9CA);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, box-shadow 120ms, transform 120ms;
  font-size: 14px;
  font-weight: 600;
  color: var(--ec-ink, #241F1B);
  line-height: 1.3;
  min-height: 120px;
  margin: 0;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
form[data-form_id="1"] .ff-el-form-check label:hover,
form[data-form_id="2"] .ff-el-form-check label:hover {
  border-color: var(--ec-forest, #1E3A36);
  background: var(--ec-bg-soft, #F2EDE0);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
/* Hide the radio input itself — the label IS the tap target.
   Gated by .ec-funnel-js on <html> (set by funnel.js at load) so users
   with JS disabled still see native radio controls inside the chips. */
html.ec-funnel-js form[data-form_id="1"] .ff-el-form-check input[type="radio"],
html.ec-funnel-js form[data-form_id="2"] .ff-el-form-check input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Selected chip */
form[data-form_id="1"] .ff-el-form-check label:has(input:checked),
form[data-form_id="2"] .ff-el-form-check label:has(input:checked) {
  border: 2px solid var(--ec-primary, #0F4C4A);
  background: #FFF3E9;
  padding: 15.5px 11.5px; /* compensate for the extra 0.5px border */
}

/* Emoji icon + label text (funnel.js wraps them in spans) */
.ec-chip-icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 8px;
  display: block;
}
.ec-chip-text { display: block; }

/* Invalid step — shown when user tries to advance with a required field empty */
.ec-fstep--invalid .ff-el-form-check label {
  border-color: #C33; /* tonal red that matches the warm palette */
}
.ec-fstep-error {
  color: #C33;
  font-size: 13px;
  margin-top: 8px;
}

/* Navigation buttons — funnel.js injects these; style here */
.ec-funnel-nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}
.ec-funnel-nav__next,
form[data-form_id="1"] button[type="submit"],
form[data-form_id="2"] button[type="submit"] {
  background: var(--ec-primary, #0F4C4A);
  color: var(--ec-bg-paper, #FDFBF5);
  border: 0;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.ec-funnel-nav__next:hover,
form[data-form_id="1"] button[type="submit"]:hover,
form[data-form_id="2"] button[type="submit"]:hover { filter: brightness(1.08); }
.ec-funnel-nav__next:disabled { opacity: 0.5; cursor: not-allowed; }

/* Welcome block (Stage B step 1) */
.ec-funnel-welcome h3 {
  font-family: var(--ec-font-display, Fraunces), Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ec-ink, #241F1B);
}
.ec-funnel-welcome p {
  color: var(--ec-muted, #5E554D);
  line-height: 1.55;
  margin: 0;
}

/* Multi-field step layout (step 5 Stage A, step 2 + 5 Stage B) */
form[data-form_id="1"] .ec-fstep .ff-el-group,
form[data-form_id="2"] .ec-fstep .ff-el-group {
  margin-bottom: 18px;
}
form[data-form_id="1"] input[type="text"],
form[data-form_id="1"] input[type="email"],
form[data-form_id="1"] input[type="tel"],
form[data-form_id="1"] textarea,
form[data-form_id="2"] input[type="text"],
form[data-form_id="2"] textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--ec-border, #E0D9CA);
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
  color: var(--ec-ink, #241F1B);
}

/* Hide FF's default step-header/progress-indicator (it's never emitted on
   Lite but just in case a Pro upgrade ships it later, don't double-render). */
form[data-form_id="1"] .ff-step-header,
form[data-form_id="2"] .ff-step-header { display: none; }