/**
 * Forms
 * Base input styling for anything rendered outside Elementor's own
 * form widgets (search form, comment form, WP core widgets, etc.)
 * so they stay visually consistent with the rest of the theme.
 */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select {
  width: 100%;
  font-family: var(--font-family-body);
  font-size: var(--text-base);
  color: var(--color-text-heading);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

textarea {
  min-height: 140px;
  resize: vertical;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--color-brand-gold-500);
  box-shadow: var(--shadow-focus);
}

label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-heading);
  margin-bottom: var(--space-2);
}

::placeholder {
  color: var(--color-neutral-400);
  opacity: 1;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.15em;
  height: 1.15em;
  accent-color: var(--color-brand-gold-500);
}

fieldset {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

legend {
  font-weight: var(--fw-semibold);
  padding-inline: var(--space-2);
}