/* Lines-limit-guard: 500 */

/**
 * Wamia Cart Counter Component Styles
 * Minimal CSS for live cart counter badge positioning and accessibility
 */

/* Cart Counter Badge - Desktop and Mobile */
.wamia-action-counter.counter.qty,
.badge-count.counter.qty {
    position: absolute;
    top: -8px;
    right: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    min-height: 18px;
    padding: 2px 6px;
    background-color: #ED6F26; /* Primary brand color */
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* Counter number text */
.counter-number {
    display: block;
}

/* Icon Container - Relative positioning for badge */
.wamia-action-icon-container {
    position: relative;
    display: inline-block;
}

/* Hide counter when empty (Codazon pattern) */
.wamia-action-counter.counter.qty.empty,
.badge-count.counter.qty.empty {
    display: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .wamia-action-counter.counter.qty {
        border-width: 3px;
        font-weight: 700;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .wamia-action-counter.counter.qty {
        transition: none;
    }
}

/* Focus and hover states for accessibility */
.wamia-cart-link:focus .wamia-action-counter.counter.qty,
.wamia-cart-link:hover .wamia-action-counter.counter.qty,
.mobile-cart-link:focus .badge-count.counter.qty,
.mobile-cart-link:hover .badge-count.counter.qty {
    background-color: #F88D46; /* Primary hover color */
    transform: scale(1.1);
    transition: all 0.2s ease-in-out;
}

/* Mobile optimization - Larger touch targets */
@media (max-width: 768px) {
    .wamia-action-counter.counter.qty {
        min-width: 20px;
        min-height: 20px;
        top: -10px;
        right: -10px;
        font-size: 13px;
        padding: 3px 7px;
    }
    
    /* Badge count counters - Deferred to mobile-header-icons.css for enhanced styling */
    .badge-count.counter.qty {
        /* Styling handled in mobile-header-icons.css for better UX */
    }
}

/* RTL support using logical properties */
[dir="rtl"] .wamia-action-counter.counter.qty {
    right: auto;
    left: -8px;
}

@media (max-width: 768px) {
    [dir="rtl"] .wamia-action-counter.counter.qty {
        left: -10px;
    }
}