/* ====================================
   ONEONELITE - 購物車 Badge 樣式
   ==================================== */

/* 購物車連結樣式 */
.nav-actions a.flex-middle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Badge 基礎樣式 */
.nav-actions .badge,
.btn-icon .badge {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 20px;
    height: 20px;
    padding: 2px 6px;
    background-color: #D1080F;
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    animation: badgeAppear 0.3s ease-out;
}

/* PC版 Badge 位置調整 - 更往右避免遮蓋文字 */
.nav-actions .badge {
    right: -20px;
}

/* 手機版 Badge 位置調整 */
.btn-icon .badge {
    top: -5px;
    right: -5px;
}

/* Badge 動畫 */
@keyframes badgeAppear {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Badge 更新動畫 */
.badge.updating {
    animation: badgeUpdate 0.5s ease-out;
}

@keyframes badgeUpdate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
        background-color: #ff1a1a;
    }
    100% {
        transform: scale(1);
    }
}

/* 99+ 樣式調整 */
.badge:has-text('99+') {
    min-width: 28px;
    padding: 2px 4px;
}

/* 響應式調整 */
@media (max-width: 768px) {
    .nav-actions .badge {
        top: -6px;
        right: -8px;
        min-width: 18px;
        height: 18px;
        font-size: 10px;
    }
}

/* 購物車圖示容器 */
.cart-link-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* 確保 Livewire 組件內聯顯示 */
[wire\:id] .badge {
    display: inline-flex !important;
}