/*
 * Los campos NO llevan estilos: heredan el aspecto de tu tema. Aquí solo hay
 * dos reglas funcionales (honeypot y etiquetas) y el estilo del botón.
 *
 * Las clases ccp-phonex__* siguen en el HTML para que puedas engancharlas
 * desde tu tema, desde Elementor o desde CSS adicional.
 */

/*
 * 1. Honeypot. Es un campo señuelo: las personas no lo ven, los bots lo
 *    rellenan, y el servidor descarta cualquier envío que venga con él lleno.
 *    Sin esta regla se ve un input "No rellenar este campo" en el formulario,
 *    y además deja de funcionar como trampa.
 */
.ccp-phonex__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*
 * 2. Etiquetas. Ocultas a la vista porque los placeholders ya hacen de guía,
 *    pero presentes para los lectores de pantalla. No se usa display:none a
 *    propósito: eso también las ocultaría a quien navega con lector, y un
 *    placeholder por sí solo no es una etiqueta accesible.
 *
 *    ¿Prefieres ver "Nombre", "Apellidos" y "Correo electrónico" encima de
 *    cada campo? Borra esta regla entera y aparecen.
 */
.ccp-phonex__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * 3. El botón. Lo único con aspecto propio del plugin.
 *
 *    Va con doble clase (.ccp-phonex .ccp-phonex__boton) a propósito: Elementor
 *    y el tema traen sus propias reglas para <button> y le ganarían a una clase
 *    suelta. Así no hace falta recurrir a !important.
 *
 *    El texto NO es blanco por un motivo medible: sobre este cian, el blanco da
 *    un contraste de 1.80:1, muy por debajo del mínimo legible de 4.5:1 (WCAG
 *    AA). El azul oscuro de abajo da 8.46:1. Si cambias el fondo, recalcula.
 */
.ccp-phonex .ccp-phonex__boton {
    background-color: #15D5E4;
    color: #062A2F;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    /* Hereda tipografía del tema; el <button> no lo hace solo. */
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    /* Evita que iOS le meta su propio degradado. */
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.15s ease;
}

.ccp-phonex .ccp-phonex__boton:hover:enabled {
    background-color: #12BDCA; /* 6.64:1 con el texto: sigue pasando AA */
}

/* Foco visible para quien navega con teclado. */
.ccp-phonex .ccp-phonex__boton:focus-visible {
    outline: 2px solid #062A2F;
    outline-offset: 2px;
}

/* El JS lo desactiva mientras se envía el formulario. */
.ccp-phonex .ccp-phonex__boton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/*
 * 4. El aviso de resultado. Solo color y peso: el tamaño y la fuente los pone
 *    tu tema.
 *
 *    Contrastes medidos sobre fondo blanco: rojo 6.54:1, verde 6.53:1 (el
 *    mínimo AA es 4.5:1). Si el formulario acaba sobre un fondo oscuro, estos
 *    dos colores dejan de valer y hay que recalcularlos.
 *
 *    El color NO es el único indicador: el mensaje se explica con palabras y va
 *    en un aria-live, así que también funciona para quien no distingue colores.
 */
.ccp-phonex__aviso--error {
    color: #B3261E;
    font-weight: 600;
}

.ccp-phonex__aviso--exito {
    color: #146C2E;
    font-weight: 600;
}