/**
 * 限時搶購標籤相容性檔案
 * 
 * @deprecated 此檔案將逐步淘汰，請使用新的模組化 CSS：
 * - css/01-variables.css (變數)
 * - css/components/badges.css (標籤組件)
 * - css/components/flash-sale.css (限時搶購組件)
 * 
 * 此檔案僅保留必要的相容性樣式，不使用 !important
 */

/* === 過渡期相容性樣式 === */
/* 將舊的 Bootstrap 類別映射到新的變數系統 */

.flash-sale-section .badge.bg-danger {
    background: linear-gradient(135deg, var(--color-flash-sale, #dc3545) 0%, var(--color-flash-sale-hover, #c82333) 100%);
    color: var(--color-white, #ffffff);
    font-size: var(--badge-font-size, 1rem);
    font-weight: var(--badge-font-weight, 700);
    padding: var(--badge-padding-y, 0.5rem) var(--badge-padding-x, 1rem);
    border-radius: var(--badge-border-radius, 0.5rem);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    z-index: var(--z-index-badge-flash-sale, 12);
}

.flash-sale-section .badge.bg-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: var(--color-white, #ffffff);
    font-size: var(--badge-font-size, 1rem);
    font-weight: var(--badge-font-weight, 700);
    padding: var(--badge-padding-y, 0.5rem) var(--badge-padding-x, 1rem);
    border-radius: var(--badge-border-radius, 0.5rem);
    border: 1px solid transparent;
    z-index: var(--z-index-badge-product-type, 15);
}

.flash-sale-section .badge.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    color: var(--color-white, #ffffff);
    font-size: var(--badge-font-size, 1rem);
    font-weight: var(--badge-font-weight, 700);
    padding: var(--badge-padding-y, 0.5rem) var(--badge-padding-x, 1rem);
    border-radius: var(--badge-border-radius, 0.5rem);
    border: 1px solid transparent;
    z-index: var(--z-index-badge-product-type, 15);
}

.flash-sale-section .badge.bg-info {
    background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%);
    color: var(--color-white, #ffffff);
    font-size: var(--badge-font-size, 1rem);
    font-weight: var(--badge-font-weight, 700);
    padding: var(--badge-padding-y, 0.5rem) var(--badge-padding-x, 1rem);
    border-radius: var(--badge-border-radius, 0.5rem);
    border: 1px solid transparent;
    z-index: var(--z-index-badge-product-type, 15);
}

.flash-sale-section .badge.bg-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: var(--color-dark, #343a40);
    font-size: var(--badge-font-size, 1rem);
    font-weight: var(--badge-font-weight, 700);
    padding: var(--badge-padding-y, 0.5rem) var(--badge-padding-x, 1rem);
    border-radius: var(--badge-border-radius, 0.5rem);
    border: 1px solid rgba(0, 0, 0, 0.2);
    z-index: var(--z-index-badge-product-type, 15);
}

.flash-sale-section .badge.bg-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #545b62 100%);
    color: var(--color-white, #ffffff);
    font-size: var(--badge-font-size, 1rem);
    font-weight: var(--badge-font-weight, 700);
    padding: var(--badge-padding-y, 0.5rem) var(--badge-padding-x, 1rem);
    border-radius: var(--badge-border-radius, 0.5rem);
    border: 1px solid transparent;
    z-index: var(--z-index-badge-product-type, 15);
}

/* === 漸進式增強 === */
/* 當新的 CSS 變數載入後，這些樣式會自動使用新的設計 token */

.flash-sale-section .badge:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
    transition: var(--transition-base, all 0.3s ease);
}

/* === 響應式相容性 === */
@media (max-width: 768px) {
    .flash-sale-section .badge {
        font-size: calc(var(--badge-font-size, 1rem) * 0.9);
        padding: calc(var(--badge-padding-y, 0.5rem) * 0.8) calc(var(--badge-padding-x, 1rem) * 0.8);
    }
}

@media (max-width: 576px) {
    .flash-sale-section .badge {
        font-size: calc(var(--badge-font-size, 1rem) * 0.8);
        padding: calc(var(--badge-padding-y, 0.5rem) * 0.7) calc(var(--badge-padding-x, 1rem) * 0.7);
    }
}

/* === 遷移提示 === */
/*
使用指南：
1. 新專案請直接使用 components/badges.css 中的 .shop20-badge 類別
2. 現有專案可以逐步將 .badge 替換為 .shop20-badge
3. 此檔案將在所有專案遷移完成後移除
*/

/* === 已棄用的樣式 === */
/*
以下樣式已移至新的模組化架構：
- 標籤樣式 → css/components/badges.css
- 限時搶購樣式 → css/components/flash-sale.css
- CSS 變數 → css/01-variables.css

此區塊保留空白以避免破壞現有功能
*/