/**
 * Fly-to-Cart Animation & Floating Cart Stylesheet
 * Author: Afghan Awalfajari (Based on user reference)
 */

/* 1. Flying Image Element */
.flying-img {
    position: fixed !important;
    z-index: 9999999 !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    object-fit: cover !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.75s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
}

.flying-img.shape-rounded {
    border-radius: 12px !important;
}

.flying-img.shape-original {
    border-radius: 4px !important;
}

/* 2. Floating Cart Container (Always Visible on Desktop & Mobile) */
#floating-cart-target,
.woo-ui-floating-cart {
    position: fixed !important;
    top: var(--woo-ui-floating-cart-top, 70%) !important;
    bottom: auto !important;
    left: var(--woo-ui-floating-cart-left, auto) !important;
    right: var(--woo-ui-floating-cart-right, 28px) !important;
    width: 54px !important;
    height: 54px !important;
    background: var(--woo-ui-floating-cart-bg, #0065B3) !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999980 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transform: translateY(-50%) scale(1) !important;
    transform-origin: center center;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

#floating-cart-target:hover,
.woo-ui-floating-cart:hover {
    transform: translateY(-50%) scale(1.08) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
}

#floating-cart-target svg,
.woo-ui-floating-cart svg {
    width: 24px !important;
    height: 24px !important;
    fill: none !important;
    stroke: var(--woo-ui-floating-cart-ic, #FFFFFF) !important;
    display: block !important;
}

/* Badge Counter on Floating Cart */
.woo-ui-cart-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--woo-ui-accent, #ED7D31);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border: 1.5px solid #FFFFFF;
}

/* 3. Tablet & Mobile (<= 921px) */
@media (max-width: 921px) {
    #floating-cart-target,
    .woo-ui-floating-cart {
        top: var(--woo-ui-floating-cart-top, 70%) !important;
        bottom: auto !important;
        left: var(--woo-ui-floating-cart-left, auto) !important;
        right: var(--woo-ui-floating-cart-right, 20px) !important;
        width: 48px !important;
        height: 48px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
    }

    #floating-cart-target svg,
    .woo-ui-floating-cart svg {
        width: 22px !important;
        height: 22px !important;
    }
}

/* 4. Pulse Animation (3x upon landing) */
@keyframes containerPulse3x {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}

.container-pulse-active {
    animation: containerPulse3x 0.36s ease-in-out 3 !important;
}

.ast-site-header-cart.container-pulse-active,
.site-header-cart.container-pulse-active,
.header-cart.container-pulse-active {
    display: inline-block !important;
    transform-origin: center center !important;
}