/**
 * Floating Login Status - Frontend Styles v2.0 (FIXED)
 * Estilos para el icono flotante en el sitio web + Carrito
 */

/* Contenedor del Icono Flotante */
.fls-floating-icon {
    position: fixed;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Hover Effect */
.fls-floating-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Active/Click Effect */
.fls-floating-icon:active {
    transform: scale(0.95);
}

/* SVG Icon */
.fls-floating-icon svg {
    width: 50%;
    height: 50%;
    transition: all 0.3s ease;
}

/* Animación de Pulso */
.fls-floating-icon.fls-animate {
    animation: fls-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes fls-pulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1),
                    0 0 0 8px rgba(255, 255, 255, 0.3);
    }
}

/* Tooltip */
.fls-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    z-index: 1000000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Tooltip Arrow */
.fls-tooltip::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

/* Mostrar tooltip al hacer hover */
.fls-floating-icon:hover .fls-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Posiciones del Tooltip según la ubicación del icono */
/* Derecha - Tooltip a la izquierda */
.fls-floating-icon[data-position^="right"] .fls-tooltip {
    right: calc(100% + 15px);
    top: 50%;
    transform: translateY(-50%) translateX(10px);
}

.fls-floating-icon[data-position^="right"]:hover .fls-tooltip {
    transform: translateY(-50%) translateX(0);
}

.fls-floating-icon[data-position^="right"] .fls-tooltip::before {
    right: -6px;
    top: 50%;
    margin-top: -6px;
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.9);
}

/* Izquierda - Tooltip a la derecha */
.fls-floating-icon[data-position^="left"] .fls-tooltip {
    left: calc(100% + 15px);
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
}

.fls-floating-icon[data-position^="left"]:hover .fls-tooltip {
    transform: translateY(-50%) translateX(0);
}

.fls-floating-icon[data-position^="left"] .fls-tooltip::before {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-width: 6px 6px 6px 0;
    border-color: transparent rgba(0, 0, 0, 0.9) transparent transparent;
}

/* Animación de entrada */
@keyframes fls-fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fls-floating-icon {
    animation: fls-fadeInScale 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   ESTILOS DEL CARRITO - CORREGIDOS
   ============================================ */

/* Icono del Carrito - Flotante como el de cuenta */
.fls-cart-icon {
    position: fixed;
    z-index: 999998; /* Un nivel menos que el icono de cuenta */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* Inicialmente oculto */
    opacity: 0;
    visibility: hidden;
    /* El transform se maneja via JavaScript para posicionamiento */
}

/* Carrito visible - estado activo */
.fls-cart-icon.fls-visible {
    opacity: 1;
    visibility: visible;
    animation: fls-fadeInScaleCart 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fls-fadeInScaleCart {
    0% {
        opacity: 0;
        visibility: visible;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
}

/* Hover del carrito - mejora la sombra sin afectar el transform */
.fls-cart-icon.fls-visible:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* SVG del carrito */
.fls-cart-icon svg {
    width: 50%;
    height: 50%;
    transition: all 0.3s ease;
}

/* Animación de pulso para el carrito (si está activada) */
.fls-cart-icon.fls-animate {
    animation: fls-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Badge del Contador del Carrito */
.fls-cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    padding: 0 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    visibility: visible;
}

/* Sombra más fuerte para mejor visibilidad */
.fls-cart-icon:hover .fls-cart-badge {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: scale(1.1);
}

/* Animación del badge cuando cambia el número */
.fls-cart-badge.fls-badge-update {
    animation: fls-badgePop 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fls-badgePop {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
}

/* Ocultar badge cuando el carrito está vacío */
.fls-cart-icon[data-empty="true"] .fls-cart-badge {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Asegurar que el contador con 0 items se oculte */
.fls-cart-badge .fls-cart-count[data-count="0"] {
    display: none;
}

.fls-cart-badge:empty {
    display: none;
}

/* Ripple effect en el carrito */
.fls-cart-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    pointer-events: none;
    z-index: -1;
}

.fls-cart-icon:active::after {
    width: 100%;
    height: 100%;
    transition: 0s;
}

/* Loading state para actualizaciones del carrito */
.fls-cart-icon.fls-loading {
    opacity: 0.7;
    pointer-events: none;
}

.fls-cart-icon.fls-loading svg {
    animation: fls-spin 1s linear infinite;
}

@keyframes fls-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Notificación de producto agregado - animación mejorada */
@keyframes fls-cartPulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 8px 30px rgba(33, 150, 243, 0.6), 0 4px 12px rgba(33, 150, 243, 0.4);
    }
}

.fls-cart-icon.fls-item-added {
    animation: fls-cartPulse 0.6s ease-out;
}

.fls-cart-icon.fls-item-added .fls-cart-badge {
    animation: fls-badgePop 0.6s ease-out;
}

/* Tooltip del carrito */
.fls-cart-icon .fls-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    z-index: 1000000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.fls-cart-icon:hover .fls-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Posiciones del Tooltip del carrito */
.fls-cart-icon[data-position^="right"] .fls-tooltip {
    right: calc(100% + 15px);
    top: 50%;
    transform: translateY(-50%) translateX(10px);
}

.fls-cart-icon[data-position^="right"]:hover .fls-tooltip {
    transform: translateY(-50%) translateX(0);
}

.fls-cart-icon[data-position^="left"] .fls-tooltip {
    left: calc(100% + 15px);
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
}

.fls-cart-icon[data-position^="left"]:hover .fls-tooltip {
    transform: translateY(-50%) translateX(0);
}

/* Responsive - Dispositivos móviles */
@media (max-width: 768px) {
    .fls-floating-icon,
    .fls-cart-icon {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    }
    
    .fls-floating-icon:hover,
    .fls-cart-icon:hover {
        transform: scale(1.05);
    }
    
    .fls-tooltip {
        font-size: 12px;
        padding: 6px 10px;
    }
    
    /* Badge más pequeño en móviles */
    .fls-cart-badge {
        min-width: 18px;
        height: 18px;
        font-size: 10px;
        padding: 0 5px;
    }
}

/* Modo oscuro opcional */
@media (prefers-color-scheme: dark) {
    .fls-floating-icon,
    .fls-cart-icon {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    .fls-floating-icon:hover,
    .fls-cart-icon:hover {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.25);
    }
}

/* Accesibilidad - Reducir movimiento si está habilitado */
@media (prefers-reduced-motion: reduce) {
    .fls-floating-icon,
    .fls-cart-icon,
    .fls-tooltip,
    .fls-floating-icon svg,
    .fls-cart-icon svg,
    .fls-cart-badge {
        animation: none !important;
        transition: none !important;
    }
    
    .fls-floating-icon.fls-animate,
    .fls-cart-icon.fls-animate {
        animation: none !important;
    }
}

/* Asegurar que funcione en temas con z-index altos */
.fls-floating-icon,
.fls-cart-icon {
    isolation: isolate;
}

/* Efectos adicionales para icono clickeable */
.fls-floating-icon[data-click-url]:hover,
.fls-cart-icon:hover {
    cursor: pointer;
}

/* Ripple effect general en click (opcional) */
.fls-floating-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    pointer-events: none;
    z-index: -1;
}

.fls-floating-icon:active::after {
    width: 100%;
    height: 100%;
    transition: 0s;
}

/* Ajustes para asegurar correcta visualización en todos los navegadores */
.fls-cart-icon,
.fls-floating-icon {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Fix para Safari */
@supports (-webkit-appearance: none) {
    .fls-cart-icon.fls-visible,
    .fls-floating-icon {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}