/**
 * Estilos CSS para el Botón de Cookies (Complianz)
 * -----------------------------------------------------------------------------
 * Descripción: Define el posicionamiento fijo en la esquina inferior derecha, 
 *              los efectos estéticos de vidrio esmerilado (backdrop-filter), 
 *              transiciones fluidas y reglas de ocultación inteligente para WooCommerce.
 */

/* =========================================================================
   1. ESTILOS BASE Y POSICIONAMIENTO (#cookieConsentBtn)
   ========================================================================= */
#cookieConsentBtn {
    /* Posicionamiento fijo en la esquina inferior derecha */
    position: fixed !important;
    bottom: 12px !important;            /* Separación reducida respecto al borde inferior */
    right: 12px !important;             /* Separación reducida respecto al borde derecho */
    left: auto !important;              /* Desactiva cualquier herencia izquierda */
    z-index: 999998 !important;         /* Capa de prioridad alta para flotar sobre el contenido */

    /* Diseño flexbox para centrar el icono perfectamente */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px;
    height: 44px;

    /* Reset de bordes y contornos nativos */
    border: 0 !important;
    outline: none !important;
    
    /* Estética visual: Fondo translúcido con efecto de vidrio esmerilado (Glassmorphism) */
    background-color: rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    
    color: #333333 !important;
    font-size: 30px !important;
    cursor: pointer;
    border-radius: 10px !important;
    box-shadow: none !important;

    /* Estado inicial visible por defecto */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    
    /* Transiciones suaves para cambios de estado, fondo y transformación */
    transition: opacity 0.1s ease, 
                visibility 0.3s ease, 
                background-color 0.2s ease, 
                color 0.2s ease, 
                transform 0.2s ease !important;
}

/* Control de dimensiones y transición para los elementos internos (SVG, iconos, imágenes) */
#cookieConsentBtn svg,
#cookieConsentBtn i,
#cookieConsentBtn img {
    width: 85% !important;
    height: 85% !important;
    object-fit: contain !important;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}


/* =========================================================================
   2. REGLAS DE OCULTACIÓN Y EXCEPCIONES (WOOCOMMERCE)
   ========================================================================= */

/* Excepción absoluta: Ocultar el botón por completo en la pasarela de pagos (Checkout) */
.woocommerce-checkout #cookieConsentBtn {
    display: none !important;
}

/* Excepción inteligente: Ocultar si el mini carrito lateral de WooCommerce está abierto o desplegándose */
body:has(.wc-block-mini-cart__overlay) #cookieConsentBtn,
body:has(.wc-block-mini-cart__drawer.is-open) #cookieConsentBtn,
body:has(.wc-block-mini-cart__drawer[aria-hidden="false"]) #cookieConsentBtn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* =========================================================================
   3. ANIMACIONES Y HOVER EXCLUSIVOS PARA RATÓN / TRACKPAD (DISPOSITIVOS NO TÁCTILES)
   ========================================================================= */
@media (hover: hover) and (pointer: fine) {
    
    /* Oscurecimiento sutil del fondo, cambio de color y ligero zoom al pasar el cursor */
    #cookieConsentBtn:hover {
        background-color: rgba(0, 0, 0, 0.22) !important;
        color: #000000 !important;
        transform: scale(1.05);
    }

    /* Animación de rotación completa (360 grados) del icono SVG al hacer hover */
    #cookieConsentBtn:hover svg,
    #cookieConsentBtn:hover i,
    #cookieConsentBtn:hover img {
        transform: rotate(360deg) !important;
    }
}


/* =========================================================================
   4. ADAPTACIÓN DE DIMENSIONES Y POSICIÓN EN PANTALLAS MÓVILES (RESPONSIVE)
   ========================================================================= */
@media (max-width: 768px) {
    #cookieConsentBtn {
        bottom: 10px !important;
        right: 10px !important;
        width: 40px;
        height: 40px;
    }
}