/**=====================
    Botón flotante del carrito: arrastrable por la ventana
    Complementa a .button-item / .item-section de assets/css/style.css
==========================**/

.button-item {
    cursor: -webkit-grab;
    cursor: grab;
    /* evita que el navegador haga scroll/zoom al arrastrar con el dedo */
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.button-item.is-dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.button-item .item-btn,
.button-item .item-btn i {
    cursor: inherit;
}

/* Estado "movido": el botón deja de estar pegado al borde derecho y pasa a
   posicionarse con left/top en píxeles, que le fija el JS. */
body.cart-btn-moved .button-item {
    right: auto;
    -webkit-transform: none;
    transform: none;
    border-radius: 7px;
}

/* El panel acompaña al botón, así que ya no puede esconderse desplazándose
   fuera de la pantalla con right:-130px: se oculta con opacidad. */
body.cart-btn-moved .item-section {
    right: auto;
    -webkit-transform: none;
    transform: none;
    border-radius: 7px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
}

body.cart-btn-moved .item-section.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}