/**
 * Floating Icons Pro - Bottom Positions Styles
 * Estilos específicos para las posiciones inferiores
 */

/* ===================================
   Variables CSS para configuración
   =================================== */
:root {
    --fip-sidebar-icon-gap: 10px; /* CONFIGURACIÓN: Distancia entre botón e iconos */
    --fip-sidebar-vertical-gap: 10px;
    --fip-animation-speed: 0.3s;
}

/* ===================================
   Estilos base para posiciones bottom
   =================================== */
.fip-position-bottom-left,
.fip-position-bottom-right,
.fip-position-bottom-center {
    /* Asegurar que los sidebars en bottom tengan el z-index correcto */
    z-index: var(--fip-z-index, 9999);
}

/* ===================================
   Layout Columna - Posiciones Bottom
   =================================== */

/* Bottom Left - Columna */
.fip-position-bottom-left .fip-sidebar[data-layout="column"] .fip-sidebar-content {
    bottom: calc(100% + var(--fip-sidebar-vertical-gap));
    left: 0;
    flex-direction: column-reverse; /* Los iconos crecen hacia arriba */
    align-items: flex-start;
    gap: 10px;
}

/* Bottom Right - Columna */
.fip-position-bottom-right .fip-sidebar[data-layout="column"] .fip-sidebar-content {
    bottom: calc(100% + var(--fip-sidebar-vertical-gap));
    right: 0;
    left: auto;
    flex-direction: column-reverse; /* Los iconos crecen hacia arriba */
    align-items: flex-end;
    gap: 10px;
}

/* Bottom Center - Columna */
.fip-position-bottom-center .fip-sidebar[data-layout="column"] .fip-sidebar-content {
    bottom: calc(100% + var(--fip-sidebar-vertical-gap));
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column-reverse; /* Los iconos crecen hacia arriba */
    align-items: center;
    gap: 10px;
}

/* ===================================
   Layout Semicírculo - Bottom Center
   =================================== */

/* Contenedor del semicírculo */
.fip-position-bottom-center .fip-sidebar[data-layout="semicircle"] .fip-sidebar-content {
    display: block;
    position: absolute;
    width: 400px;
    height: 200px;
    bottom: 100%; /* Directamente encima del botón */
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    /* Debug: descomentar para ver el contenedor */
    /* border: 1px dashed red; */
}

/* Iconos en semicírculo - bottom-center */
.fip-position-bottom-center .fip-sidebar[data-layout="semicircle"] .fip-icon--in-sidebar {
    position: absolute !important;
    margin: 0;
    transform-origin: center;
    transition: transform var(--fip-animation-speed) cubic-bezier(0.4, 0, 0.2, 1),
                opacity var(--fip-animation-speed) cubic-bezier(0.4, 0, 0.2, 1),
                left var(--fip-animation-speed) cubic-bezier(0.4, 0, 0.2, 1),
                top var(--fip-animation-speed) cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    will-change: transform, opacity, left, top;
}

/* Estado cerrado - los iconos están en el centro inferior (sobre el botón) */
.fip-position-bottom-center .fip-sidebar[data-layout="semicircle"]:not(.open) .fip-icon--in-sidebar {
    /* Removido !important para permitir que JavaScript controle las posiciones */
    transform: translate(-50%, -50%) scale(0) !important;
    opacity: 0 !important;
}

/* Estado abierto - controlado por JavaScript */
.fip-position-bottom-center .fip-sidebar[data-layout="semicircle"].open .fip-icon--in-sidebar {
    opacity: 1 !important;
    /* Las posiciones específicas (left, top) se establecen via JavaScript inline styles */
}

/* Hover en iconos del semicírculo */
.fip-position-bottom-center .fip-sidebar[data-layout="semicircle"] .fip-icon--in-sidebar:hover {
    filter: brightness(1.2);
    box-shadow: 0 8px 25px rgba(0,0,0,0.35), 
                0 0 0 2px rgba(255,255,255,0.2);
    z-index: calc(var(--fip-z-index) + 10);
}

/* ===================================
   Animaciones de entrada - Bottom positions
   =================================== */

/* Animación stagger para columnas inferiores */
.fip-position-bottom-left .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar,
.fip-position-bottom-right .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar,
.fip-position-bottom-center .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar {
    animation: fip-slideInUp 0.3s ease forwards;
}

/* Delays escalonados para efecto cascada hacia arriba */
.fip-position-bottom-left .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar:nth-child(1),
.fip-position-bottom-right .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar:nth-child(1),
.fip-position-bottom-center .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar:nth-child(1) {
    animation-delay: 0ms;
}

.fip-position-bottom-left .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar:nth-child(2),
.fip-position-bottom-right .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar:nth-child(2),
.fip-position-bottom-center .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar:nth-child(2) {
    animation-delay: 50ms;
}

.fip-position-bottom-left .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar:nth-child(3),
.fip-position-bottom-right .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar:nth-child(3),
.fip-position-bottom-center .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar:nth-child(3) {
    animation-delay: 100ms;
}

.fip-position-bottom-left .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar:nth-child(4),
.fip-position-bottom-right .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar:nth-child(4),
.fip-position-bottom-center .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar:nth-child(4) {
    animation-delay: 150ms;
}

.fip-position-bottom-left .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar:nth-child(5),
.fip-position-bottom-right .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar:nth-child(5),
.fip-position-bottom-center .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar:nth-child(5) {
    animation-delay: 200ms;
}

/* Más delays para más iconos */
.fip-position-bottom-left .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar:nth-child(6),
.fip-position-bottom-right .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar:nth-child(6),
.fip-position-bottom-center .fip-sidebar[data-layout="column"].open .fip-icon--in-sidebar:nth-child(6) {
    animation-delay: 250ms;
}

/* Keyframe para animación hacia arriba */
@keyframes fip-slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================
   Responsive - Ajustes móviles
   =================================== */
@media (max-width: 768px) {
    /* Reducir tamaño del contenedor semicírculo en móvil */
    .fip-position-bottom-center .fip-sidebar[data-layout="semicircle"] .fip-sidebar-content {
        width: 300px;
        height: 150px;
    }
    
    /* Ajustar gaps en móvil */
    .fip-position-bottom-left .fip-sidebar[data-layout="column"] .fip-sidebar-content,
    .fip-position-bottom-right .fip-sidebar[data-layout="column"] .fip-sidebar-content,
    .fip-position-bottom-center .fip-sidebar[data-layout="column"] .fip-sidebar-content {
        gap: 8px;
    }
}

/* ===================================
   Z-index management para posiciones inferiores
   =================================== */
.fip-position-bottom-left .fip-sidebar,
.fip-position-bottom-right .fip-sidebar,
.fip-position-bottom-center .fip-sidebar {
    z-index: var(--fip-z-index, 9999);
}

/* El toggle debe estar por encima de los iconos */
.fip-position-bottom-left .fip-sidebar-toggle,
.fip-position-bottom-right .fip-sidebar-toggle,
.fip-position-bottom-center .fip-sidebar-toggle {
    z-index: calc(var(--fip-z-index, 9999) + 2);
    position: relative;
}

/* Los iconos del sidebar deben estar por debajo del toggle pero encima del fondo */
.fip-position-bottom-left .fip-sidebar-content,
.fip-position-bottom-right .fip-sidebar-content,
.fip-position-bottom-center .fip-sidebar-content {
    z-index: calc(var(--fip-z-index, 9999) + 1);
}

/* ===================================
   Mejoras de rendimiento
   =================================== */
.fip-sidebar[data-layout="semicircle"] .fip-icon--in-sidebar {
    /* Optimizar animaciones */
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Deshabilitar pointer events durante la animación */
.fip-sidebar[data-layout="semicircle"]:not(.open) .fip-sidebar-content {
    pointer-events: none;
}

.fip-sidebar[data-layout="semicircle"].open .fip-sidebar-content {
    pointer-events: none;
}

.fip-sidebar[data-layout="semicircle"] .fip-icon--in-sidebar {
    pointer-events: auto !important;
}