Edición: Referencia para Desarrolladores — Free (v2.0+) y PRO (v5.0+) | Assets: assets/css/ y assets/js/

El frontend de Modal COD Form sigue estrictamente las buenas prácticas de WordPress: no imprime etiquetas <style> sueltas ni atributos style="" en línea en los botones, sino que inyecta Propiedades Personalizadas de CSS (CSS Variables) mediante wp_add_inline_style().

1. Variables CSS Globales y por Instancia (CSS Custom Properties)

Puedes sobrescribir cualquiera de estas variables desde Apariencia → Personalizar → CSS Adicional o desde la hoja de estilos de tu tema hijo:

/* Contenedor principal del botón disparador COD */
.cod_container_button_order {
    --cod-btn-bg: #055875;       /* Color de fondo del botón */
    --cod-btn-color: #ffffff;    /* Color del texto e icono SVG */
    --cod-btn-fs: 1.1rem;        /* Tamaño de fuente */
    --cod-btn-width: 100%;       /* Ancho del botón (auto o 100%) */
    --cod-btn-radius: 8px;       /* Radio de borde */
    --cod-btn-bw: 0px;           /* Grosor del borde */
    --cod-btn-bc: transparent;   /* Color del borde */
    --cod-btn-shadow: 0.4rem;    /* Intensidad de sombra */
}

/* Variables de los contenedores de Upsell (1-Tick y 1-Click en PRO) */
[data-upsell-id] {
    --upsell-bg: #f8fafc;
    --upsell-border: #0a6d98;
    --upsell-border-style: dashed; /* solid | dashed */
    --upsell-radius: 10px;
    --upsell-highlight: #10b981;
}

2. Selectores DOM Principales del Modal

3. Objetos JavaScript Localizados en el Frontend

Los scripts del frontend reciben la configuración del servidor a través de wp_localize_script():

Siguientes Pasos