/* Minimal forms */
input,
textarea,
select {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-secondary-alt);
  background: rgb(var(--color-white-rgb) / 0.96);
  font-size: var(--fs-body);
  transition: background-color var(--transition-fast) ease-in-out,
              box-shadow var(--transition-fast) ease-in-out,
              color var(--transition-fast) ease-in-out,
              border-color var(--transition-fast) ease-in-out;
}

input:hover,
textarea:hover,
select:hover {
  background-color: rgb(var(--color-white-rgb) / 0.98);
  border: 1px solid var(--color-primary);
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* ensure there is extra right padding so native dropdown options don't collide with the chevron */
    padding-right: calc(var(--space-md) + 2.25rem);
    background: url("../../img/chevron-down.svg") no-repeat right var(--space-sm) center;
    background-size: 18px;
}

/* Some browsers accept padding on options — provide a right padding fallback */
select option {
  padding-right: var(--space-md);
}

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  outline: none;
  background-color: var(--color-white);
  box-shadow: 0 0 0 2px var(--color-form-focus-ring);
}

input[type="checkbox"] {
  width: 1.4em;
  height: 1.4em;
  accent-color: var(--color-primary);
}

.form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.form-col-100 { flex: 1 1 100%; }
.form-col-50 { flex: 1 1 calc(50% - var(--space-2xs)); }

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

@media (max-width: 767.98px) {
  .form-col-50 { flex: 1 1 100%; }
}