/* GCF Bloomerang Form Styler — theme-adaptive styling.
   The form inherits the active theme's fonts and text colors, derives neutral
   lines/muted text from the theme's own text color (currentColor), and pulls a
   single accent from the theme palette (set inline at runtime in the PHP). It
   deliberately does NOT impose a card / brand look, so it blends into whatever
   theme it is installed on. The values below are fallbacks. */
.gcf-bloom-shell {
  --gcf-accent: #0e7490;
  --gcf-accent-contrast: #ffffff;
  --gcf-accent-soft: rgba(14, 116, 144, .08);
  --gcf-accent-ring: rgba(14, 116, 144, .30);

  /* Neutral tokens that adapt to the theme's own text color, with safe fallbacks
     for browsers without color-mix (declared first, then overridden). */
  --gcf-border: rgba(120, 128, 138, .30);
  --gcf-border: color-mix(in srgb, currentColor 18%, transparent);
  --gcf-muted: #6b7280;
  --gcf-muted: color-mix(in srgb, currentColor 62%, transparent);

  /* Back-compat aliases (older rules referenced brand names): map onto the theme. */
  --gcf-ink: inherit;
  --gcf-navy: inherit;
  --gcf-green: var(--gcf-accent);
  --gcf-gradient: var(--gcf-accent);

  max-width: 720px;
  margin: clamp(1rem, 3vw, 2.5rem) auto;
  font-family: inherit;
  color: inherit;
  box-sizing: border-box;
}
.gcf-bloom-shell *, .gcf-bloom-shell *::before, .gcf-bloom-shell *::after { box-sizing: border-box; }

/* Intro card text */
.gcf-bloom-intro { max-width: 60ch; margin: 0 0 1.5rem; }
.gcf-bloom-eyebrow {
  display: inline-block;
  margin: 0 0 .6rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--gcf-accent-soft);
  color: var(--gcf-accent);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.gcf-bloom-intro h2 { margin: 0; }              /* inherit the theme's heading style */
.gcf-bloom-intro p { margin: .75rem 0 0; color: var(--gcf-muted); line-height: 1.6; }

/* Form scaffolding — no card chrome; the form sits in the page naturally. */
.donation-form, .interaction-form, .registration-form { color: inherit; font-family: inherit; }
.donation-form .section, .interaction-form .section, .registration-form .section {
  padding: 1rem 0;
  border-bottom: 1px solid var(--gcf-border);
}
.donation-form h3, .interaction-form h3, .registration-form h3 {
  margin: 1.25rem 0 .75rem;
  color: inherit;
  font-size: 1.2rem;
  line-height: 1.25;
}
.donation-form label, .interaction-form label, .registration-form label {
  color: inherit !important;
  font-weight: 600;
  font-size: .95rem;
}

/* Text fields */
.donation-form input[type="text"], .donation-form input[type="email"], .donation-form input[type="tel"], .donation-form input[type="number"], .donation-form input[type="date"], .donation-form select, .donation-form textarea, .donation-form #card-element,
.interaction-form input[type="text"], .interaction-form input[type="email"], .interaction-form input[type="tel"], .interaction-form input[type="number"], .interaction-form input[type="date"], .interaction-form select, .interaction-form textarea,
.registration-form input[type="text"], .registration-form input[type="email"], .registration-form input[type="tel"], .registration-form input[type="number"], .registration-form input[type="date"], .registration-form select, .registration-form textarea {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  margin-top: .35rem;
  padding: .7rem .85rem !important;
  border: 1px solid var(--gcf-border);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.donation-form textarea, .interaction-form textarea, .registration-form textarea { min-height: 110px; resize: vertical; }
.donation-form input:focus, .donation-form select:focus, .donation-form textarea:focus, .donation-form #card-element:focus-within,
.interaction-form input:focus, .interaction-form select:focus, .interaction-form textarea:focus,
.registration-form input:focus, .registration-form select:focus, .registration-form textarea:focus {
  border-color: var(--gcf-accent);
  box-shadow: 0 0 0 3px var(--gcf-accent-ring);
}

/* Radio / checkbox options */
.donation-form .field.radio label, .donation-form .field.checkbox label,
.interaction-form .field.radio label, .interaction-form .field.checkbox label,
.registration-form .field.radio label, .registration-form .field.checkbox label {
  display: flex !important;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .6rem .8rem;
  border: 1px solid var(--gcf-border);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.donation-form .field.radio label:hover, .donation-form .field.checkbox label:hover,
.interaction-form .field.radio label:hover, .interaction-form .field.checkbox label:hover,
.registration-form .field.radio label:hover, .registration-form .field.checkbox label:hover { border-color: var(--gcf-accent); }
.donation-form input[type="radio"], .donation-form input[type="checkbox"],
.interaction-form input[type="radio"], .interaction-form input[type="checkbox"],
.registration-form input[type="radio"], .registration-form input[type="checkbox"] { width: 1.1rem !important; height: 1.1rem; accent-color: var(--gcf-accent); flex: 0 0 auto; }
.donation-form .field.radio:has(input:checked) label, .donation-form .field.checkbox:has(input:checked) label,
.interaction-form .field.radio:has(input:checked) label, .interaction-form .field.checkbox:has(input:checked) label,
.registration-form .field.radio:has(input:checked) label, .registration-form .field.checkbox:has(input:checked) label {
  border-color: var(--gcf-accent);
  background: var(--gcf-accent-soft);
}

/* Two-column grouping on wider screens (layout, not brand) */
.donation-form .section.contact, .donation-form .section.billing-address, .donation-form .section.custom-fields, .donation-form .section.payment,
.interaction-form .section.contact, .interaction-form .section.address, .interaction-form .section.custom-fields,
.registration-form .section.contact, .registration-form .section.address, .registration-form .section.custom-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
  row-gap: .35rem;
}
.donation-form .section h3, .interaction-form .section h3, .registration-form .section h3,
.donation-form .field.street-address, .donation-form .field.comment, .donation-form #stripe-cc-fields,
.interaction-form .field.street-address, .interaction-form .field.comment,
.registration-form .field.street-address, .registration-form .field.comment { grid-column: 1 / -1; }

/* Submit button — uses the theme accent; otherwise restrained and inheriting. */
.gcf-bloom-submit, .btn-submit-donation, .btn-submit-interaction, .btn-submit-email, .btn-submit-registration {
  width: 100%;
  min-height: 48px;
  margin-top: .5rem;
  padding: .8rem 1.4rem !important;
  border: 0;
  border-radius: 8px;
  background: var(--gcf-accent);
  color: var(--gcf-accent-contrast);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s ease;
}
.gcf-bloom-submit:hover:not(:disabled), .btn-submit-donation:hover:not(:disabled), .btn-submit-interaction:hover:not(:disabled), .btn-submit-email:hover:not(:disabled), .btn-submit-registration:hover:not(:disabled) { filter: brightness(.94); }

/* Errors (semantic red, theme-independent) */
.donation-form .errors, .interaction-form .errors, .registration-form .errors, label.error, #card-errors { color: #b3261e !important; }
.donation-form .errors, .interaction-form .errors, .registration-form .errors {
  margin-bottom: 1rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(179, 38, 30, .3);
  border-radius: 8px;
  background: rgba(179, 38, 30, .06);
}

/* Success */
.donation-success, .gcf-clean-success {
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 12px;
  background: var(--gcf-accent-soft);
  border: 1px solid var(--gcf-border);
  color: inherit;
}
.donation-success h2, .gcf-clean-success h2 { margin-top: 0; color: var(--gcf-accent); }
.donation-success p, .gcf-clean-success p { color: inherit; line-height: 1.65; }

@media (max-width: 760px) {
  .donation-form .section.contact, .donation-form .section.billing-address, .donation-form .section.custom-fields, .donation-form .section.payment,
  .interaction-form .section.contact, .interaction-form .section.address, .interaction-form .section.custom-fields,
  .registration-form .section.contact, .registration-form .section.address, .registration-form .section.custom-fields { grid-template-columns: 1fr; }
  .donation-form .section h3, .interaction-form .section h3, .registration-form .section h3,
  .donation-form .field.street-address, .donation-form .field.comment, .donation-form #stripe-cc-fields,
  .interaction-form .field.street-address, .interaction-form .field.comment,
  .registration-form .field.street-address, .registration-form .field.comment { grid-column: auto; }
}

/* Supplemental fields + warnings (semantic, not brand) */
.gcf-bloom-supplemental-section { margin-top: 1rem; }
.gcf-field-note { margin: .35rem 0 0; color: var(--gcf-muted); font-size: .85rem; }
.gcf-bloom-supp-alert, .gcf-bloom-supp-send-warning, .gcf-bloom-load-warning {
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 8px;
  font-weight: 600;
  color: #7c2d12;
  border: 1px solid rgba(124, 45, 18, .22);
  background: rgba(255, 247, 237, .96);
}
.gcf-bloom-supp-field-file input[type="file"] { padding: .6rem .85rem !important; }
.gcf-bloom-error { color: #b3261e; }

/* Short Form / donation wizard — layout + accent only, no brand chrome. */
.gcf-bloom-short-form-enabled #donation-form-container { overflow: hidden; }
.gcf-bloom-short-form-enabled .gcf-bloom-wizard-header {
  margin: 0 0 1.25rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid var(--gcf-border);
}
.gcf-bloom-short-form-enabled .gcf-bloom-wizard-steps {
  display: flex;
  width: 100%;
  gap: .5rem;
  margin-bottom: 1rem;
}
.gcf-bloom-short-form-enabled .gcf-bloom-wizard-step {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  appearance: none;
  border: 1px solid var(--gcf-border);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  padding: .55rem .8rem;
  cursor: pointer;
}
.gcf-bloom-short-form-enabled .gcf-bloom-wizard-step span {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-right: .4rem;
  border-radius: 999px;
  background: var(--gcf-accent-soft);
  color: inherit;
  font-size: .8rem;
}
.gcf-bloom-short-form-enabled .gcf-bloom-wizard-step.is-active { color: var(--gcf-accent-contrast); border-color: transparent; background: var(--gcf-accent); }
.gcf-bloom-short-form-enabled .gcf-bloom-wizard-step.is-active span { background: rgba(255, 255, 255, .25); color: var(--gcf-accent-contrast); }
.gcf-bloom-short-form-enabled .gcf-bloom-wizard-title { margin: .75rem 0 0; color: inherit; font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
.gcf-bloom-step-hidden,
.gcf-bloom-shell[data-gcf-short-form="1"] .gcf-bloom-step-hidden { display: none !important; }
.gcf-bloom-short-form-enabled .gcf-bloom-wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--gcf-border);
}
.gcf-bloom-short-form-enabled .gcf-bloom-wizard-back, .gcf-bloom-short-form-enabled .gcf-bloom-wizard-next {
  appearance: none;
  border-radius: 8px;
  border: 1px solid var(--gcf-border);
  padding: .7rem 1.2rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: inherit;
}
.gcf-bloom-short-form-enabled .gcf-bloom-wizard-next { margin-left: auto; color: var(--gcf-accent-contrast); border-color: transparent; background: var(--gcf-accent); }
.gcf-bloom-short-form-enabled .donation-form .section.donation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.gcf-bloom-short-form-enabled .donation-form .section.donation h3,
.gcf-bloom-short-form-enabled .donation-form .section.donation .field.other-amount { grid-column: 1 / -1; }

/* Donation / short-form gets a wider shell so two columns have room. */
.gcf-bloom-donation-shell,
.gcf-bloom-short-form-requested,
.gcf-bloom-shell[data-gcf-short-form="1"] { max-width: min(1080px, calc(100vw - 2rem)); }
.gcf-bloom-short-form-enabled .donation-form { max-width: 100%; overflow-x: hidden; }
.gcf-bloom-short-form-enabled .donation-form .section,
.gcf-bloom-short-form-enabled .donation-form .field,
.gcf-bloom-short-form-enabled .donation-form .field input,
.gcf-bloom-short-form-enabled .donation-form .field select,
.gcf-bloom-short-form-enabled .donation-form .field textarea,
.gcf-bloom-short-form-enabled .donation-form #card-element { max-width: 100%; box-sizing: border-box; }

@media (max-width: 760px) {
  .gcf-bloom-short-form-enabled .gcf-bloom-wizard-steps,
  .gcf-bloom-short-form-enabled .donation-form .section.donation { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .gcf-bloom-short-form-enabled .gcf-bloom-wizard-step { font-size: 0; text-align: center; }
  .gcf-bloom-short-form-enabled .gcf-bloom-wizard-step span { margin-right: 0; font-size: .8rem; }
}