/**
 * Default styling for EventFormRenderer-generated fields (see
 * public/campaignhub/js/eventFormRenderer.js). Intentionally minimal and
 * class-scoped (.efr-*) so any host page can override it.
 */
.efr-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.efr-field {
  display: grid;
  gap: 6px;
}

.efr-field-wide {
  grid-column: 1 / -1;
}

.efr-field-hidden {
  display: none;
}

.efr-label {
  font-size: 0.88rem;
  font-weight: 700;
}

.efr-control {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  font: inherit;
  background: #fff;
  color: inherit;
}

textarea.efr-control {
  min-height: 90px;
  resize: vertical;
}

.efr-control:focus {
  outline: none;
  border-color: currentColor;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.efr-error {
  margin: 0;
  color: #c0392b;
  font-size: 0.82rem;
  font-weight: 700;
}

/*
 * Form-level error banner (e.g. "unable to load form" / submit failure).
 * Deliberately does not reuse a host page's `.error-msg` class — many of
 * this repo's event pages scope that class to `display: none` outside a
 * `.form-group.has-error` wrapper, which would keep it hidden even once
 * JS clears the `hidden` attribute. Visibility here is controlled by the
 * `hidden` attribute alone.
 */
.efr-form-error {
  margin: 12px 0 0;
  color: #c0392b;
  font-size: 0.85rem;
  font-weight: 700;
}

.efr-control-row,
.efr-otp-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* These two are shown/hidden at runtime via the `hidden` attribute; the
   unconditional `display: flex/inline-flex` above and below would
   otherwise beat the browser's default `[hidden] { display: none; }`,
   since author CSS always wins over the UA stylesheet regardless of
   specificity or source order. */
.efr-otp-row[hidden],
.efr-otp-verified-badge[hidden] {
  display: none;
}

.efr-control-row .efr-control,
.efr-otp-row .efr-otp-input {
  flex: 1;
  min-width: 0;
}

.efr-otp-row .efr-otp-input {
  letter-spacing: 0.3em;
}

.efr-otp-send-btn,
.efr-otp-verify-btn {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid currentColor;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
  cursor: pointer;
}

.efr-otp-send-btn:disabled,
.efr-otp-verify-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.efr-otp-hint {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
}

.efr-otp-hint-success {
  color: #1a7f37;
}

.efr-otp-hint-error {
  color: #c0392b;
}

.efr-otp-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1a7f37;
}

.efr-otp-verified-badge::before {
  content: "\2713";
}

.efr-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* input[type=checkbox].efr-checkbox (specificity 0,2,1) deliberately beats
   host-page rules like ".registration-form input, .registration-form select,
   .registration-form textarea { width: 100%; min-height: 46px; ... }" —
   those blanket-match every <input> including this checkbox (no [type]
   exclusion), stretching it to fill the whole row and leaving the label
   beside it zero space to occupy. */
input[type="checkbox"].efr-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin-top: 2px;
  accent-color: currentColor;
}

/* Compound class selector (specificity 0,2,0) deliberately beats host-page
   rules like ".registration-form label { display: grid; ... }" that target
   the bare <label> tag — those are written for the label+input stacking
   pattern elsewhere on the page and would otherwise turn this label into an
   independent grid formatting context inside its flex row. Even with that
   neutralized, a flex item's specified "inline" is blockified to "block" by
   the UA (it's still a flex item), and a block flex item doesn't stretch to
   fill the row on its own since flex-grow defaults to 0 — so flex-grow and
   min-width:0 are set explicitly to make the label actually claim the
   remaining row width instead of shrink-wrapping to a sliver.
*/
.efr-label.efr-checkbox-label {
  display: inline;
  flex: 1 1 0%;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 400;
}

@media (max-width: 559px) {
  .efr-fields {
    grid-template-columns: 1fr;
  }

  .efr-control-row,
  .efr-otp-row {
    flex-wrap: wrap;
  }
}