/* ==========================================================================
   Campaña «Peticiones y Flores Virgen de Fátima 2026»
   --------------------------------------------------------------------------
   Páginas: /peticiones-flores-virgen-de-fatima-2026/
            /gracias-peticiones-flores-virgen-de-fatima-2026/

   Aquí vive SOLO lo que ningún ajuste de Elementor alcanza. Cada bloque
   lleva encima el motivo por el que no cupo en un ajuste. Todo lo demás
   (colores, tipografías, rellenos, huecos, animaciones) está en los ajustes
   de los widgets, para que el cliente pueda editarlo desde el constructor.

   ÍNDICE DE CLASES
   ----------------
   .fat26-form        Los dos formularios de la campaña (intención y donación)
   .fat26-monto-nota  Nota de ayuda bajo el campo de monto
   ========================================================================== */

/* Elementor no expone la opacidad del texto de sugerencia: es un
   pseudoelemento. Sin esto, Chrome lo pinta al 54 % y sobre el fondo
   #EDE8E0 de los campos no llega al contraste mínimo. */
.fat26-form input::placeholder,
.fat26-form textarea::placeholder {
    opacity: 1;
}

/* El área de texto de la intención: ni «no redimensionable» ni la altura
   mínima son ajustes del widget Formulario. La altura se fija aquí para que
   el campo invite a escribir más de una línea. */
.fat26-form textarea {
    resize: vertical;
    min-height: 120px;
}

/* Los controles de incremento del campo numérico son pseudoelementos del
   navegador. Se quitan porque el monto se escribe, no se pulsa, y porque
   además desplazan el prefijo «Q.» de más abajo. */
.fat26-form input[type="number"]::-webkit-inner-spin-button,
.fat26-form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fat26-form input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* El prefijo de moneda es un pseudoelemento: no existe ningún ajuste de
   Elementor que ponga texto dentro de un campo. Va sobre el grupo del campo
   `amount`, que es la clase que emite Elementor para ese `custom_id`. */
.fat26-form .elementor-field-group-amount {
    position: relative;
}

.fat26-form .elementor-field-group-amount .elementor-field {
    padding-left: 34px;
}

.fat26-form .elementor-field-group-amount::before {
    content: "Q.";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9E002E;
    font-family: "Crimson Text", Georgia, serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
}

/* La nota de ayuda se imprime dentro del HTML de un campo del formulario,
   así que ningún ajuste del widget la alcanza (trampa B7). */
.fat26-monto-nota {
    display: block;
    color: #9D8762;
    font-family: "Crimson Text", Georgia, serif;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
}

/* El texto de sugerencia del teléfono.

   Tres cosas lo tapaban, y hay que deshacer la última aquí:
   1. El plugin telephone-field-for-elementor-forms arma el <input> a mano en
      su render() y nunca imprime el placeholder, aunque Elementor lo tenga
      configurado. Eso se arregla en inc/fatima2026-assets.php.
   2. Al llegar el campo sin placeholder, intl-tel-input lo rellenaba con un
      número de ejemplo del país («5123 4567»): es su autoPlaceholder en modo
      «polite», que solo escribe cuando el campo venía vacío de placeholder.
      Al imprimirlo nosotros, deja de hacerlo.
   3. Para quitarse ese número de ejemplo de encima, el CSS global
      (custom-css-js 436 «Estilo de la pagina», línea 630) hace:
         #form-field-phone::placeholder { opacity: 0 !important; }
      Esa regla es de todo el sitio y no se toca. Se neutraliza solo aquí,
      con un selector más específico, porque esta hoja únicamente se carga en
      las dos páginas de la campaña.

   El 0.7 iguala al del resto de campos de este formulario. */
body #form-field-phone::placeholder {
    opacity: 0.7 !important;
}