/**
 * 標籤系統組件
 * 統一管理所有標籤樣式，避免重複和衝突
 */

/* === 基礎標籤樣式 === */
.shop20-badge {
    display: inline-block;
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    line-height: var(--badge-line-height);
    padding: var(--badge-padding-y) var(--badge-padding-x);
    border-radius: var(--badge-border-radius);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    text-decoration: none;
    transition: var(--transition-colors);
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm);
}

/* === 限時搶購專用標籤 === */
.flash-sale-section .shop20-badge,
.flash-sale-bg .shop20-badge,
.flash-products-grid .shop20-badge {
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    line-height: var(--badge-line-height);
    padding: var(--badge-padding-y) var(--badge-padding-x);
    border-radius: var(--badge-border-radius);
}

/* 限時搶購標籤 - 紅色系 */
.flash-sale-section .shop20-badge.flash-sale-badge {
    background: linear-gradient(135deg, var(--color-flash-sale) 0%, var(--color-flash-sale-hover) 100%);
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.3);
    position: absolute;
    top: var(--spacing-2);
    left: var(--spacing-2);
    z-index: var(--z-index-badge-flash-sale);
}

.flash-sale-section .shop20-badge.flash-sale-badge:hover {
    background: linear-gradient(135deg, var(--color-flash-sale-hover) 0%, var(--color-flash-sale-dark) 100%);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* === 商品類型標籤 === */
.shop20-badge.product-type-badge {
    position: absolute;
    top: var(--spacing-2);
    right: var(--spacing-2);
    z-index: var(--z-index-badge-product-type);
    border-color: transparent;
}

/* 商品類型 - 各種顏色 */
.shop20-badge.product-type-badge.type-eticket {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: var(--color-white);
}

.shop20-badge.product-type-badge.type-pticket {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    color: var(--color-white);
}

.shop20-badge.product-type-badge.type-coolfood {
    background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%);
    color: var(--color-white);
}

.shop20-badge.product-type-badge.type-booking {
    background: linear-gradient(135deg, #ffc107 0%, #d39e00 100%);
    color: var(--color-dark);
}

.shop20-badge.product-type-badge.type-goods {
    background: linear-gradient(135deg, #6f42c1 0%, #5a2d91 100%);
    color: var(--color-white);
}

.shop20-badge.product-type-badge.type-group {
    background: linear-gradient(135deg, #fd7e14 0%, #e55a00 100%);
    color: var(--color-white);
}

.shop20-badge.product-type-badge.type-external {
    background: linear-gradient(135deg, #6c757d 0%, #545b62 100%);
    color: var(--color-white);
}

.shop20-badge.product-type-badge.type-limited {
    background: linear-gradient(135deg, #e83e8c 0%, #d91a72 100%);
    color: var(--color-white);
}

/* === 倒數計時標籤 === */
.countdown-badge {
    background: linear-gradient(135deg, var(--color-gray-700) 0%, var(--color-gray-800) 100%);
    color: var(--color-white);
    font-family: var(--font-family-monospace);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--border-radius);
    position: absolute;
    bottom: var(--spacing-2);
    left: var(--spacing-2);
    right: var(--spacing-2);
    z-index: var(--z-index-countdown);
    text-align: center;
    animation: pulseCountdown 2s infinite;
}

.countdown-badge.expired {
    background: linear-gradient(135deg, var(--color-danger) 0%, #b91c3c 100%);
    animation: none;
}

/* === 響應式調整 === */
@media (max-width: 768px) {
    .shop20-badge {
        font-size: var(--font-size-sm);
        padding: calc(var(--badge-padding-y) * 0.8) calc(var(--badge-padding-x) * 0.8);
    }
    
    .flash-sale-section .shop20-badge,
    .flash-sale-bg .shop20-badge,
    .flash-products-grid .shop20-badge {
        font-size: var(--font-size-sm);
        padding: calc(var(--badge-padding-y) * 0.8) calc(var(--badge-padding-x) * 0.8);
    }
}

@media (max-width: 576px) {
    .shop20-badge {
        font-size: var(--font-size-xs);
        padding: calc(var(--badge-padding-y) * 0.7) calc(var(--badge-padding-x) * 0.7);
    }
    
    .flash-sale-section .shop20-badge,
    .flash-sale-bg .shop20-badge,
    .flash-products-grid .shop20-badge {
        font-size: var(--font-size-xs);
        padding: calc(var(--badge-padding-y) * 0.7) calc(var(--badge-padding-x) * 0.7);
    }
    
    .countdown-badge {
        font-size: var(--font-size-xs);
        padding: var(--spacing-1) var(--spacing-2);
    }
}

/* === 動畫效果 === */
@keyframes pulseCountdown {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

/* === 懸停效果 === */
.shop20-badge:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.shop20-badge.product-type-badge:hover {
    opacity: 0.9;
}

/* === 舊版相容性 === */
/* 為了不破壞現有功能，保留舊的 class 名稱映射 */
/* 但排除導航欄中的 badge，避免影響購物車徽章 */

/* 只對限時搶購區塊內的 badge 套用自訂樣式 */
.flash-sale-section .badge.bg-danger,
.flash-sale-bg .badge.bg-danger,
.flash-products-grid .badge.bg-danger {
    background: linear-gradient(135deg, var(--color-flash-sale) 0%, var(--color-flash-sale-hover) 100%);
    color: var(--color-white);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    padding: var(--badge-padding-y) var(--badge-padding-x);
    border-radius: var(--badge-border-radius);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.flash-sale-section .badge.bg-primary,
.flash-sale-section .badge.bg-success,
.flash-sale-section .badge.bg-info,
.flash-sale-section .badge.bg-warning,
.flash-sale-section .badge.bg-secondary,
.flash-sale-bg .badge.bg-primary,
.flash-sale-bg .badge.bg-success,
.flash-sale-bg .badge.bg-info,
.flash-sale-bg .badge.bg-warning,
.flash-sale-bg .badge.bg-secondary,
.flash-products-grid .badge.bg-primary,
.flash-products-grid .badge.bg-success,
.flash-products-grid .badge.bg-info,
.flash-products-grid .badge.bg-warning,
.flash-products-grid .badge.bg-secondary {
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    padding: var(--badge-padding-y) var(--badge-padding-x);
    border-radius: var(--badge-border-radius);
    border: 1px solid transparent;
}