/*
 * Formidable Forms — ASFC design system integration
 *
 * Replaces Formidable's default stylesheet entirely (suppressed via
 * `frm_load_default_css` filter in inc/enqueue.php). Every rule maps
 * Formidable's output classes to the ASFC design tokens so the forms
 * match `.asfc-input / .asfc-label / .asfc-btn` exactly.
 *
 * Scope: all rules are scoped to `.frm_pro_form` to avoid leaking into
 * other plugin UI or WP admin.
 */

/* ── 1. Field container layout ────────────────────────────────────────── */

.frm_pro_form .frm_fields_container {
  /*display: flex;*/
  flex-direction: column;
  gap: var(--space-5);
}

/* Formidable adds margin-bottom to .form-field — reset it; gap handles spacing */
.frm_pro_form .form-field {
  margin-bottom: 0;
}

/* Two-column helpers (Formidable "half" / "third" section widths) */
.frm_pro_form .frm_half  { width: 50%; }
.frm_pro_form .frm_third { width: 33.333%; }


/* ── 2. Labels ────────────────────────────────────────────────────────── */

.frm_pro_form .frm_primary_label {
  display: block;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
  margin: 0 0 var(--space-2);
}

.frm_pro_form .frm_required {
  color: var(--error);
  margin-left: 3px;
}


/* ── 3. Input controls ────────────────────────────────────────────────── */

.frm_pro_form input[type="text"],
.frm_pro_form input[type="email"],
.frm_pro_form input[type="tel"],
.frm_pro_form input[type="number"],
.frm_pro_form input[type="url"],
.frm_pro_form input[type="password"],
.frm_pro_form input[type="search"],
.frm_pro_form select,
.frm_pro_form textarea {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-default);
  background: var(--surface-default);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  width: 100%;
  box-sizing: border-box;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}

.frm_pro_form input::placeholder,
.frm_pro_form textarea::placeholder {
  color: var(--text-subtle);
}

.frm_pro_form input:focus,
.frm_pro_form select:focus,
.frm_pro_form textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

/* Error state on the control itself */
.frm_pro_form .frm_has_errors input[type="text"],
.frm_pro_form .frm_has_errors input[type="email"],
.frm_pro_form .frm_has_errors input[type="tel"],
.frm_pro_form .frm_has_errors select,
.frm_pro_form .frm_has_errors textarea {
  border-color: var(--error);
}

/* Textarea */
.frm_pro_form textarea {
  min-height: 130px;
  resize: vertical;
  line-height: var(--line-height-relaxed);
}

/* Select — chevron identical to .asfc-select */
.frm_pro_form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c5852' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 38px;
  cursor: pointer;
}


/* ── 4. Checkbox and radio ────────────────────────────────────────────── */

.frm_pro_form .frm_checkbox label,
.frm_pro_form .frm_radio   label {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  font-family: var(--font-body);
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-default);
  cursor: pointer;
}

.frm_pro_form .frm_checkbox input[type="checkbox"],
.frm_pro_form .frm_radio   input[type="radio"] {
  width: 20px;
  height: 20px;
  flex: none;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--surface-inverse);
}


/* ── 5. Help text and inline errors ───────────────────────────────────── */

.frm_pro_form .frm_description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.frm_pro_form .frm_error_style,
.frm_pro_form .frm_error {
  font-size: var(--font-size-sm);
  color: var(--error);
  margin-top: var(--space-1);
}


/* ── 6. Submit button ─────────────────────────────────────────────────── */
/* Mirrors .asfc-btn.asfc-btn--accent.asfc-btn--md exactly */

.frm_pro_form .frm_submit {
  padding-top: var(--space-2);
}

.frm_pro_form .frm_submit button[type="submit"],
.frm_pro_form .frm_submit input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-sm);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background   var(--duration-fast) var(--ease-standard),
    transform    var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard);
  -webkit-appearance: none;
  appearance: none;
}

.frm_pro_form .frm_submit button[type="submit"]:hover,
.frm_pro_form .frm_submit input[type="submit"]:hover {
  background: var(--neutral-0);
  color: var(--neutral-900);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.frm_pro_form .frm_submit button[type="submit"]:focus-visible,
.frm_pro_form .frm_submit input[type="submit"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.frm_pro_form .frm_submit button[type="submit"]:active,
.frm_pro_form .frm_submit input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: none;
}


/* ── 7. Success / confirmation message ────────────────────────────────── */

.frm_message,
.frm_pro_form .frm_message {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--gold-tint-50);
  border: var(--border-width) solid var(--gold-tint-300);
  color: var(--text-default);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}


/* ── 8. Validation summary (rendered above the form) ─────────────────── */

.frm_error_style.frm_above_form {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: #fef2f2;
  border: var(--border-width) solid var(--error);
  color: var(--error);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-5);
}


/* ── 9. Utility / hidden ──────────────────────────────────────────────── */

.frm_pro_form .frm_hidden,
.frm_verify { display: none !important; }


/* ── 10. Inverse (on-dark) variant ───────────────────────────────────── */
/* Used when the form sits inside an .as-inverse surface */

.as-inverse .frm_pro_form .frm_primary_label {
  color: var(--text-inverse);
}

.as-inverse .frm_pro_form .frm_description {
  color: var(--text-inverse-muted);
}

.as-inverse .frm_pro_form input[type="text"],
.as-inverse .frm_pro_form input[type="email"],
.as-inverse .frm_pro_form input[type="tel"],
.as-inverse .frm_pro_form input[type="number"],
.as-inverse .frm_pro_form input[type="url"],
.as-inverse .frm_pro_form input[type="password"],
.as-inverse .frm_pro_form select,
.as-inverse .frm_pro_form textarea {
  color: var(--text-inverse);
  background-color: var(--surface-inverse-raised);
  border-color: var(--border-inverse);
}

.as-inverse .frm_pro_form input::placeholder,
.as-inverse .frm_pro_form textarea::placeholder {
  color: var(--text-inverse-muted);
}

.as-inverse .frm_pro_form input:focus,
.as-inverse .frm_pro_form select:focus,
.as-inverse .frm_pro_form textarea:focus {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(219, 191, 116, 0.25);
}

.as-inverse .frm_pro_form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23eadaa7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.as-inverse .frm_pro_form .frm_checkbox label,
.as-inverse .frm_pro_form .frm_radio   label {
  color: var(--text-inverse);
}

.as-inverse .frm_pro_form .frm_checkbox input[type="checkbox"],
.as-inverse .frm_pro_form .frm_radio   input[type="radio"] {
  accent-color: var(--gold-light);
}