/* Estilo de la barra flotante */
.floating-bar {
    position: fixed;
    right: 0px; /* Pegado al borde derecho */
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background-color: transparent; /* Fondo transparente para evitar espacios blancos */
    opacity: 0; /* Inicialmente oculto para el efecto fadeIn */
    animation: fadeIn 0.5s ease-in-out forwards; /* Animación al cargar */
}

.floating-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: <?php echo get_option('fbp_button_size', '60'); ?>px;
    height: <?php echo get_option('fbp_button_size', '60'); ?>px;
    background-color: <?php echo get_option('fbp_button_color', '#25D366'); ?>;
    color: <?php echo get_option('fbp_icon_color', '#ffffff'); ?>;
    border-radius: 25px 0 0 25px; /* Redondeado solo en la izquierda */
    margin-bottom: 15px;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative; /* Asegurar posicionamiento relativo */
    right: 0; /* Asegurar que esté pegado al borde derecho */
    padding: 0; /* Eliminar padding innecesario */
    margin-right: 0; /* Eliminar margen derecho */
}

/* Efecto de zoom si está habilitado */
.floating-btn.zoom-enabled:hover {
    transform: scale(1.1); /* Zoom al pasar el cursor */
}

/* Intercambio de colores si está habilitado */
.floating-btn.color-swap-enabled:hover {
    background-color: <?php echo get_option('fbp_icon_color', '#ffffff'); ?>; /* Color del ícono pasa al botón */
    color: <?php echo get_option('fbp_button_color', '#25D366'); ?>; /* Color del botón pasa al ícono */
}

.floating-btn i {
    font-size: var(--icon-size, 24px);
}

/* Botón de cierre */
#close-bar {
    position: absolute;
    top: -15px;
    right: 0; /* Pegado al borde derecho */
    background-color: #ff4d4d;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    opacity: 0;
    transform: translateX(100%); /* Inicialmente oculto fuera de la pantalla */
}

#close-bar.show {
    opacity: 1;
    transform: translateX(0); /* Aparece en su posición */
}

#close-bar:hover {
    background-color: #cc0000;
}

#close-bar img {
    width: 15px;
    height: 15px;
}

/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}