/**
 * Cart and Account menu with Heroicons + text
 * Icons inherit text size automatically
 */

/* Show both icon and text */
.menu-item a[href*="cart"] .nav-text,
.menu-item a[href*="koszyk"] .nav-text,
.menu-item a[href*="my-account"] .nav-text,
.menu-item a[href*="moje-konto"] .nav-text {
    display: inline;
    margin-left: 6px;
}

/* Heroicon SVG styling - inherits parent text size */
.menu-item a[href*="cart"] .heroicon,
.menu-item a[href*="koszyk"] .heroicon,
.menu-item a[href*="my-account"] .heroicon,
.menu-item a[href*="moje-konto"] .heroicon {
    /* Size automatically inherits from parent font-size (1.1em in heroicons.css) */
    stroke-width: 1.1;
    flex-shrink: 0;
}

/* Ensure proper spacing in menu */
.menu-item a[href*="cart"],
.menu-item a[href*="koszyk"],
.menu-item a[href*="my-account"],
.menu-item a[href*="moje-konto"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    position: relative;
}

/* Hover effects */
.menu-item a[href*="cart"]:hover .heroicon,
.menu-item a[href*="koszyk"]:hover .heroicon,
.menu-item a[href*="my-account"]:hover .heroicon,
.menu-item a[href*="moje-konto"]:hover .heroicon {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

/* Cart item count badge (if WooCommerce cart fragment exists) */
.menu-item a[href*="cart"] .cart-contents-count,
.menu-item a[href*="koszyk"] .cart-contents-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff3b30;
    color: #fff;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    min-width: 18px;
    text-align: center;
}

/* Ensure proper spacing in menu */
.menu-item a[href*="cart"],
.menu-item a[href*="koszyk"],
.menu-item a[href*="my-account"],
.menu-item a[href*="moje-konto"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    position: relative;
}

/* Mobile responsive - icons scale automatically with text */
@media (max-width: 768px) {
    /* If you want larger icons on mobile, increase the menu font-size */
    .menu-item a[href*="cart"],
    .menu-item a[href*="koszyk"],
    .menu-item a[href*="my-account"],
    .menu-item a[href*="moje-konto"] {
        /* Example: font-size: 1.1rem; */
    }
}