/* ==========================================================================
   PHONE BUTTON SHORTCODE - CSS COMPLETO (Base + Minimal + Icon-Only + Arcoíris)
   ========================================================================== */

/* Animación para el flujo del degradado arcoíris */
@keyframes realyvax-rainbow-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* ==========================================================================
   1. ESTILOS BASE (Genéricos)
   ========================================================================== */
.realyvax-phone-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

/* ==========================================================================
   2. VARIANTE: SÓLIDO (Default)
   ========================================================================== */
.realyvax-phone-btn:not(.style-minimal) {
    background-color: var(--primary-color, #343a40);
    color: #ffffff;
    padding: 0.85rem 1.5rem;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.realyvax-phone-btn:not(.style-minimal):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    background-color: #212529;
    color: #ffffff;
}

.realyvax-phone-btn:not(.style-minimal) i {
    font-size: 1.2rem;
    color: #ffffff;
}

.realyvax-phone-btn:not(.style-minimal) .phone-label {
    color: inherit;
}

/* ==========================================================================
   3. VARIANTE: MINIMAL
   ========================================================================== */
.realyvax-phone-btn.style-minimal {
    background-color: transparent;
    box-shadow: none;
    padding: 0.5rem 0;
    color: var(--text-color, #333);
    gap: 1rem;
}

.realyvax-phone-btn.style-minimal:hover {
    transform: none;
    box-shadow: none;
    background-color: transparent;
}

.realyvax-phone-btn.style-minimal .phone-icon-circle {
    width: 44px;
    height: 44px;
    background-color: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.realyvax-phone-btn.style-minimal .phone-icon-circle i {
    color: var(--primary-color, #343a40);
    font-size: 1.1rem;
}

.realyvax-phone-btn.style-minimal:hover .phone-icon-circle {
    background-color: var(--primary-color, #343a40);
}

.realyvax-phone-btn.style-minimal:hover .phone-icon-circle i {
    color: #ffffff;
}

.realyvax-phone-btn.style-minimal .phone-label {
    color: var(--text-color, #333);
    font-weight: 700;
    font-size: 1.1rem;
}

.realyvax-phone-btn.style-minimal:hover .phone-label {
    color: var(--primary-color, #343a40);
}

/* ==========================================================================
   4. EFECTO ARCOÍRIS PERSONALIZADO (Fondo transparente, Icono/Texto degradado)
   ========================================================================== */

/* Aplica el degradado arcoíris al ICONO y al TEXTO */
.realyvax-phone-btn.rainbow-effect i,
.realyvax-phone-btn.rainbow-effect .phone-label {
    background-image: linear-gradient(90deg, 
        var(--color-red), var(--color-orange), var(--secondary-color), 
        var(--color-green), var(--color-blue), var(--color-purple), var(--color-red)
    ) !important;
    background-size: 400% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: realyvax-rainbow-flow 4s linear infinite;
}

/* Borde arcoíris para el círculo minimalista (si se desea) */
.realyvax-phone-btn.style-minimal.rainbow-effect .phone-icon-circle {
    background-color: transparent !important;
    border: 2px solid transparent;
    background-image: 
        linear-gradient(#ffffff, #ffffff), /* Fondo interior transparente/blanco */
        linear-gradient(90deg, var(--color-red), var(--color-orange), var(--secondary-color), var(--color-green), var(--color-blue), var(--color-purple));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* ==========================================================================
   5. MODO "SOLO ICONO" (label="none") - A PRUEBA DE FALLOS
   ========================================================================== */

/* Elimina el espacio (gap) para que el icono quede perfectamente centrado */
.realyvax-phone-btn.icon-only {
    gap: 0 !important;
    padding: 0 !important;
}

/* DESTRUCCIÓN VISUAL ABSOLUTA del texto si el PHP fallara y lo imprimiera */
.realyvax-phone-btn.icon-only .phone-label {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important; /* Saca el elemento del flujo visual */
}

/* Asegura que el círculo minimalista quede perfecto y centrado sin texto al lado */
.realyvax-phone-btn.style-minimal.icon-only .phone-icon-circle {
    margin: 0 !important;
}

/* Fallback moderno: si el navegador soporta :has, refuerza el centrado */
.realyvax-phone-btn:not(:has(.phone-label)) {
    gap: 0 !important;
    justify-content: center !important;
}

.realyvax-phone-btn.style-minimal:not(:has(.phone-label)) {
    padding: 0 !important;
}