/**
 * Header Cart Icon Styles
 */

/* Cart Icon Container */
.navbar-right .item-cart {
    display: flex;
    align-items: center;
    margin-right: 8px;
}

.cart-icon-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #f8f9fa;
    transition: all 0.3s ease;
    text-decoration: none;
}

.cart-icon-link:hover {
    background: var(--tl-primary,#dc4d28) !important;
    text-decoration: none !important;
}

.cart-icon-link:hover .cart-icon {
    stroke: white !important;
}

.cart-icon-link:hover .cart-count {
    background: white;
    color: var(--tl-primary,#dc4d28);
}

/* Cart Icon */
.cart-icon {
    stroke: #333;
    transition: stroke 0.3s ease;
}

/* Cart Count Badge */
.cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    background: var(--tl-primary,#dc4d28);
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    transition: all 0.3s ease;
}

.cart-count:empty {
    display: none;
}

/* Animation for count update */
@keyframes cartCountPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

.cart-count.updated {
    animation: cartCountPulse 0.4s ease;
}

/* Desktop Cart in Menu */
.menuTop .item-cart-desktop {
    display: flex;
    align-items: center;
}

.menuTop .item-cart-desktop .cart-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.menuTop .item-cart-desktop .cart-icon-link:hover {
    background: transparent;
}

/* Hide mobile cart on desktop */
@media (min-width: 992px) {
    .navbar-right .item-cart {
        display: none;
    }
}

/* Responsive */
@media (max-width: 991px) {
    /* Hide desktop cart on mobile */
    .menuTop .item-cart-desktop {
        display: none;
    }

    .navbar-right .item-cart {
        margin-right: 10px;
    }

    .cart-icon-link {
        width: 40px;
        height: 40px;
    }

    .cart-icon {
        width: 20px;
        height: 20px;
    }

    .cart-count {
        min-width: 18px;
        height: 18px;
        font-size: 10px;
    }
}