/**
 * Dolchester Promo — Gravity Forms con el diseño de la tarjeta.
 *
 * Se carga después de gform_basic (el reset estructural de GF, que también
 * esconde el honeypot) y en lugar del framework "orbital", que inc/gravity.php
 * deregistra.
 *
 * Es el espejo de la sección 5 de style.css: mismas medidas, mismos colores,
 * aplicados al markup que emite GF.
 *
 * @package dolchester-promo
 */

/* ============================================================
   1. LA GRILLA DE DOS COLUMNAS

   GF arma  form > .gform-body > .gform_fields > .gfield
   y deja .gform_footer FUERA de .gform_fields. El diseño necesita el botón
   PARTICIPAR en la columna derecha, junto a los campos.

   `display: contents` disuelve .gform-body y .gform_fields, de modo que los
   .gfield y el .gform_footer quedan como hijos directos del <form>, que es
   el que lleva la grilla.
   ============================================================ */

.dolch-card .gform_wrapper {
  margin: 0;
}

.dolch-card .gform_wrapper form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px 72px;
  align-items: start;
}

.dolch-card .gform_wrapper .gform-body,
.dolch-card .gform_wrapper .gform_fields {
  display: contents;
}

.dolch-card .gform_wrapper .gfield.dolch-f-left {
  grid-column: 1;
}

.dolch-card .gform_wrapper .gfield.dolch-f-right,
.dolch-card .gform_wrapper .gform_footer {
  grid-column: 2;
}

/* Sin fila explícita, la columna derecha arrancaría recién en la fila 6:
   los cinco campos de la izquierda ya ocuparon las filas 1 a 5. El diseño
   los quiere alineados arriba. Las clases vienen de la definición del
   formulario, así que sobreviven a un reordenamiento en el editor de GF. */
.dolch-card .gform_wrapper .gfield.dolch-fila-1 { grid-row: 1; }
.dolch-card .gform_wrapper .gfield.dolch-fila-2 { grid-row: 2; }
.dolch-card .gform_wrapper .gfield.dolch-fila-3 { grid-row: 3; }
.dolch-card .gform_wrapper .gfield.dolch-fila-4 { grid-row: 4; }

.dolch-card .gform_wrapper .gform_footer { grid-row: 4 / span 2; }

.dolch-card .gform_wrapper .gfield {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Las labels quedan en su sitio: el diseño usa placeholders, y gform_basic ya
   las deja visually-hidden vía .hidden_label, que las conserva para lectores
   de pantalla. Esconderlas con display:none dejaría los campos sin nombre
   accesible. Lo que sí sobra es la leyenda de campos requeridos. */
.dolch-card .gform_wrapper .gform_required_legend,
.dolch-card .gform_wrapper .gfield_description:not(.validation_message) {
  display: none;
}

.dolch-card .gform_wrapper .ginput_container {
  margin: 0;
}

/* ============================================================
   2. CAMPOS DE LÍNEA — espejo de .dolch-input
   ============================================================ */

.dolch-card .gform_wrapper .gfield.dolch-linea input[type="text"],
.dolch-card .gform_wrapper .gfield.dolch-linea input[type="email"],
.dolch-card .gform_wrapper .gfield.dolch-linea input[type="tel"] {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #d2d2d2;
  background: transparent;
  font-family: Mulish, "proxima-nova", system-ui, sans-serif;
  font-size: 14px;
  color: #2a2a2a;
  padding: 4px 2px 9px;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  box-shadow: none;
}

.dolch-card .gform_wrapper .gfield.dolch-linea input::placeholder {
  color: #a3a3a3;
  opacity: 1;
}

.dolch-card .gform_wrapper .gfield.dolch-linea input:focus {
  border-bottom-color: #e8843d;
  box-shadow: none;
}

/* ============================================================
   3. SELECTS PILL — espejo de .dolch-select
   ============================================================ */

.dolch-card .gform_wrapper .dolch-select-wrap {
  position: relative;
}

.dolch-card .gform_wrapper .gfield.dolch-pill select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 31px;
  border: 1px solid #1e1e1e;
  border-radius: 999px;
  background: #fff;
  text-align: center;
  text-align-last: center;
  font-family: Mulish, "proxima-nova", system-ui, sans-serif;
  font-size: 12px;
  color: #2a2a2a;
  padding: 0 26px;
  outline: none;
  box-shadow: none;
}

.dolch-card .gform_wrapper .gfield.dolch-pill select:focus {
  border-color: #e8843d;
}

.dolch-card .gform_wrapper .gfield.dolch-pill select:disabled {
  opacity: 0.55;
}

.dolch-card .gform_wrapper .dolch-caret {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: block;
}

.dolch-card .gform_wrapper select:disabled + .dolch-caret {
  opacity: 0.55;
}

/* ============================================================
   4. ERRORES — espejo de .dolch-error
   ============================================================ */

/* El resumen de arriba del formulario no está en el diseño: el error se
   muestra campo por campo. */
.dolch-card .gform_wrapper .gform_validation_errors {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.dolch-card .gform_wrapper .gform_validation_errors > h2 {
  font-size: 12px;
  font-weight: 600;
  color: #e02020;
  margin: 0;
  padding: 0;
}

.dolch-card .gform_wrapper .gform_validation_errors > h2 .gform-icon {
  display: none;
}

/* GF le da foco al aviso por programa para que lo anuncien los lectores de
   pantalla. El anillo del navegador lo hacía parecer un campo de texto más;
   para el foco real de teclado sigue estando :focus-visible. */
.dolch-card .gform_wrapper .gform_validation_errors:focus {
  outline: none;
}

.dolch-card .gform_wrapper .gform_validation_errors:focus-visible {
  outline: 2px solid #e8843d;
  outline-offset: 2px;
}

.dolch-card .gform_wrapper .gfield_validation_message,
.dolch-card .gform_wrapper .validation_message {
  color: #e02020;
  font-size: 11px;
  margin-top: 5px;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 400;
}

.dolch-card .gform_wrapper .gfield_error.dolch-linea input {
  border-bottom-color: #e02020;
}

.dolch-card .gform_wrapper .gfield_error.dolch-pill select {
  border-color: #e02020;
}

/* ============================================================
   5. BOTÓN Y PIE — espejo de .dolch-actions / .dolch-btn
   ============================================================ */

.dolch-card .gform_wrapper .gform_footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  margin: 2px 0 0;
  padding: 0;
}

.dolch-card .gform_wrapper .gform_footer input[type="submit"],
.dolch-card .gform_wrapper .gform_footer button {
  border: 0;
  background: #e8843d;
  color: #fff;
  font-family: Mulish, "proxima-nova", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  padding: 11px 44px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s;
  width: auto;
  margin: 0;
}

.dolch-card .gform_wrapper .gform_footer input[type="submit"]:hover { background: #f0954f; }
.dolch-card .gform_wrapper .gform_footer input[type="submit"]:active { background: #cf6f2c; }
.dolch-card .gform_wrapper .gform_footer input[type="submit"]:disabled {
  background: #d6d6d6;
  cursor: not-allowed;
}

/* "Todos los campos son obligatorios" — el HTML lo agrega
   dolch_gf_nota_obligatorios(); el estilo de .dolch-required ya está en
   style.css, incluido el asterisco rojo. */

/* Spinner del envío por AJAX. */
.dolch-card .gform_wrapper .gform_ajax_spinner {
  display: block;
  margin: 6px auto 0;
  width: 20px;
  height: 20px;
}

/* ============================================================
   6. HUECO DE reCAPTCHA v2

   Se activa desde inc/gf-form-definition.php (filtro dolch_gf_captcha).
   ============================================================ */

.dolch-card .gform_wrapper .gfield.dolch-f-captcha .ginput_container_captcha {
  display: flex;
  justify-content: center;
}

.dolch-card .gform_wrapper .gfield.dolch-f-captcha .g-recaptcha {
  transform-origin: center top;
}

/* ============================================================
   7. CONFIRMACIÓN

   El HTML lo pone dolch_gf_confirmacion_html(); los estilos de .dolch-done
   ya viven en style.css. Acá sólo se neutraliza el envoltorio de GF.
   ============================================================ */

.dolch-card .gform_confirmation_wrapper,
.dolch-card .gform_confirmation_message {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

/* Aviso de que el formulario no está disponible (GF desactivado). */
.dolch-aviso {
  color: #e02020;
  font-size: 13px;
  margin: 0;
}

/* ============================================================
   8. MOBILE — mismo corte que style.css
   ============================================================ */

@media (max-width: 759px) {

  .dolch-card .gform_wrapper form {
    gap: 14px 0;
  }

  /* Con una sola columna hay que soltar TODO el posicionamiento explícito.
     La columna sola es obvia; las filas no: dejar dolch-fila-1 en la fila 1
     mandaría Provincia arriba de Nombre. Con `auto` vuelve el orden natural
     del documento, que es el del diseño en mobile. */
  .dolch-card .gform_wrapper .gfield.dolch-f-left,
  .dolch-card .gform_wrapper .gfield.dolch-f-right,
  .dolch-card .gform_wrapper .gform_footer {
    grid-column: 1;
    grid-row: auto;
  }

  .dolch-card .gform_wrapper .gform_footer {
    margin-top: 6px;
  }
}