/* ══════════════════════════════════════
   FERRANOVA — Formularios
   ══════════════════════════════════════ */

.fn-form-grupo {
  margin-bottom: var(--fn-sp-lg);
}

.fn-form-label {
  display: block;
  font-size: var(--fn-fs-sm);
  font-weight: var(--fn-fw-medium);
  color: var(--fn-gris-700);
  margin-bottom: var(--fn-sp-xs);
}

.fn-form-input,
.fn-form-textarea,
.fn-form-select {
  width: 100%;
  padding: 12px 16px;
  background: var(--fn-blanco);
  border: 1.5px solid var(--fn-borde);
  border-radius: var(--fn-radio-md);
  font-family: var(--fn-fuente-cuerpo);
  font-size: var(--fn-fs-base);
  color: var(--fn-texto);
  transition: all var(--fn-trans-fast);
}

.fn-form-input:focus,
.fn-form-textarea:focus,
.fn-form-select:focus {
  border-color: var(--fn-primario);
  box-shadow: 0 0 0 3px rgba(36, 111, 132, 0.12);
}

.fn-form-input::placeholder,
.fn-form-textarea::placeholder {
  color: var(--fn-gris-400);
}

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

.fn-form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23868e96' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.fn-form-error {
  font-size: var(--fn-fs-xs);
  color: var(--fn-error);
  margin-top: var(--fn-sp-2xs);
}

.fn-form-input--error {
  border-color: var(--fn-error);
}

.fn-form-input--error:focus {
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.12);
}

/* WooCommerce form overrides */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea {
  padding: 12px 16px !important;
  background: var(--fn-blanco) !important;
  border: 1.5px solid var(--fn-borde) !important;
  border-radius: var(--fn-radio-md) !important;
  font-family: var(--fn-fuente-cuerpo) !important;
  font-size: var(--fn-fs-base) !important;
  color: var(--fn-texto) !important;
  transition: all var(--fn-trans-fast) !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--fn-primario) !important;
  box-shadow: 0 0 0 3px rgba(36, 111, 132, 0.12) !important;
}

.woocommerce form .form-row label {
  font-size: var(--fn-fs-sm) !important;
  font-weight: var(--fn-fw-medium) !important;
  color: var(--fn-gris-700) !important;
}