/* 
    Estilos para el módulo Action Button 
    Variables inyectadas: --exf-btn-main, --exf-btn-sec, --exf-btn-text 
*/

.exf-action-button-wrapper {
    margin-bottom: 20px;
    font-family: var(--wp--preset--font-family--body, inherit);
    max-width: 100%;
}

.exf-action-link {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    box-sizing: border-box;
    max-width: 100%;
    flex-wrap: wrap;
    word-break: break-word;
}

.exf-action-link:hover, .exf-action-link:focus {
    text-decoration: none !important;
}

/* Alineaciones */
.exf-btn-align-left { text-align: left; }
.exf-btn-align-center { text-align: center; }
.exf-btn-align-center .exf-action-link { margin: 0 auto; }
.exf-btn-align-right { text-align: right; }
.exf-btn-align-right .exf-action-link { margin-left: auto; margin-right: 0; }
.exf-btn-align-justify .exf-action-link { width: 100%; display: flex; }


/* ===========================
   Estilo 1: BANNER
=========================== */
.exf-btn-style-banner .exf-action-link {
    width: 100%;
    background-color: var(--exf-btn-sec);
    border: 1px solid var(--exf-btn-main);
    padding: 20px;
    color: #2b3a2a; /* Fallback oscuro para contraste si no se define */
}

.exf-btn-style-banner .exf-action-link:hover {
    background-color: color-mix(in srgb, var(--exf-btn-sec) 80%, var(--exf-btn-main) 20%);
    border-color: color-mix(in srgb, var(--exf-btn-main) 80%, black 20%);
}

.exf-banner-layout {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 20px;
}

.exf-banner-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background-color: var(--exf-btn-main);
    color: var(--exf-btn-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exf-banner-icon .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.exf-banner-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.exf-banner-title {
    font-family: var(--wp--preset--font-family--heading, inherit);
    font-weight: 800;
    font-size: 1.1em;
    color: var(--exf-btn-main);
    text-transform: uppercase;
    line-height: 1.2;
}

.exf-banner-subtitle {
    font-size: 1em;
    color: #4b5563; /* Gris plomo */
    margin-top: 2px;
}

.exf-banner-arrow {
    flex-shrink: 0;
    color: var(--exf-btn-main);
}
.exf-banner-arrow .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}


/* ===========================
   Estilo 2: SOLID (Llámanos)
=========================== */
.exf-btn-style-solid .exf-action-link {
    background-color: var(--exf-btn-main);
    color: var(--exf-btn-text);
    padding: 12px 24px;
    font-weight: 700;
    font-size: 1.1rem;
    gap: 10px;
}

.exf-btn-style-solid .exf-action-link:hover {
    background-color: color-mix(in srgb, var(--exf-btn-main) 80%, black 20%);
}

.exf-solid-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    transform: rotate(-45deg); /* Para simular flecha noreste con arrow-right */
}


/* ===========================
   Estilo 3: UNDERLINE (Escríbenos)
=========================== */
.exf-btn-style-underline .exf-action-link {
    background-color: transparent;
    color: var(--exf-btn-main);
    padding: 10px 0;
    border-bottom: 2px solid var(--exf-btn-main);
    font-weight: 700;
    font-size: 1.1rem;
    gap: 10px;
}

.exf-btn-style-underline .exf-action-link:hover {
    color: color-mix(in srgb, var(--exf-btn-main) 70%, black 30%);
    border-bottom-color: color-mix(in srgb, var(--exf-btn-main) 70%, black 30%);
}

.exf-underline-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.exf-btn-style-underline .exf-action-link:hover .exf-underline-icon {
    transform: translateX(5px);
}


/* ===========================
   Estilo 4: TEXT DOT (¿Tienes dudas?)
=========================== */
.exf-btn-style-textdot .exf-action-link {
    background-color: transparent;
    color: #4b5563;
    padding: 8px 0;
    gap: 8px;
    font-size: 1.05rem;
}

.exf-textdot-dot {
    width: 14px;
    height: 14px;
    background-color: var(--exf-btn-main);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    border: 3px solid var(--exf-btn-sec);
    box-shadow: 0 0 0 1px var(--exf-btn-sec) inset;
}

.exf-textdot-title {
    font-weight: 700;
    color: #1f2937;
}

.exf-textdot-subtitle {
    color: #4b5563;
}


/* TAMAÑOS */
.exf-btn-size-small .exf-action-link { font-size: 0.9em; padding: 0.5em 1em; }
.exf-btn-size-large .exf-action-link { font-size: 1.3em; padding: 1em 2em; }
.exf-btn-size-large .exf-banner-icon { width: 64px; height: 64px; }
.exf-btn-size-large .exf-banner-icon .dashicons { font-size: 32px; width: 32px; height: 32px; }