/* ==========================================
   Card 標籤系統 (vod_tag)

   基於 Figma 設計規範
   ========================================== */

/* ==========================================
   【右上角】標籤容器
   ========================================== */

/* 單一標籤 - 固定尺寸 36×20px（遵循 Figma 規範） */
.vod-card__tag {
    position: absolute;
    right: 0;
    top: 0;
    width: 36px; /* Figma 規範：固定 36px */
    height: 20px;
    padding: 0 6px; /* Figma 規範：左右 padding 6px */
    border-radius: 0 9.6px 0 9.6px; /* Figma 規範：右上和左下圓角 */
    font-family: Tahoma, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px; /* 垂直居中 */
    color: #FFFFFF;
    text-align: center;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    pointer-events: none; /* 讓點擊事件穿透到下方的連結 */
}

/* ==========================================
   注意：每張卡片只顯示一個標籤
   優先級由 Controller 決定
   ========================================== */

/* ==========================================
   【標籤樣式】依據 Figma 設計
   ========================================== */

/* 會員標籤 - 金色 */
.vod-card__tag--vip {
    background: #D7B272 !important;
}

/* 熱門標籤 - 橙紅色（推測，需確認 Figma）*/
.vod-card__tag--hot {
    background: #FF6B35 !important;
}

/* 獨播標籤 - 紅色（推測，需確認 Figma）*/
.vod-card__tag--exclusive {
    background: #E42112 !important;
}

/* 新片標籤 - 藍色 */
.vod-card__tag--new {
    background: #4A90E2;
}

/* 完結標籤 - 綠色 */
.vod-card__tag--finished {
    background: #5CB85C;
}

/* 高清標籤 - 黑色半透明 */
.vod-card__tag--hd {
    background: rgba(0, 0, 0, 0.7);
}

/* 藍光標籤 - 深藍 */
.vod-card__tag--bluray {
    background: #1E3A8A;
}

/* 預告標籤 - 紫色 */
.vod-card__tag--preview {
    background: #8B5CF6;
}

/* 免費標籤 - 淺綠 */
.vod-card__tag--free {
    background: #10B981;
}

/* 付費標籤 - 琥珀色 */
.vod-card__tag--paid {
    background: #F59E0B;
}

/* ==========================================
   【隱藏標籤】
   ========================================== */

.vod-card__tag--hidden,
.vod-card__tag[data-hidden="true"] {
    display: none !important;
}

/* ==========================================
   【左上角】排行數字
   ========================================== */

.vod-card__rank {
    position: absolute;
    top: 6px;
    left: 6px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Tahoma, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #FFFFFF;
    z-index: 3;
}

/* 前三名特殊顏色 */
.vod-card__rank[data-rank="1"] {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #000000;
}

.vod-card__rank[data-rank="2"] {
    background: linear-gradient(135deg, #C0C0C0 0%, #A9A9A9 100%);
    color: #000000;
}

.vod-card__rank[data-rank="3"] {
    background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%);
    color: #FFFFFF;
}

/* ==========================================
   【右下角】集數 / 畫質資訊
   對應資料庫欄位：vod_remarks
   ========================================== */

.vod-card__remarks {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #FFFFFF;
    padding: 3px 8px;
    border-radius: 10px 0 10px 0;
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    z-index: 2;
}

.vod-card__remarks-text {
    display: inline-block;
}

/* ==========================================
   【響應式調整】
   注意：vod-card__tag 尺寸固定為 36×20px，不隨卡片大小變化
   ========================================== */

/* 小卡片的其他元素調整（標籤尺寸不變） */
.vod-card--s .vod-card__rank {
    min-width: 20px;
    height: 20px;
    font-size: 12px;
}

.vod-card--s .vod-card__remarks {
    font-size: 10px;
}

/* ==========================================
   【標籤優先級】由 Controller 決定

   優先級順序（高到低）：
   1. vip       - 會員
   2. exclusive - 獨播
   3. hot       - 熱門
   4. new       - 新片
   5. finished  - 完結
   6. hd        - 高清
   7. bluray    - 藍光

   每張卡片只顯示最高優先級的標籤
   ========================================== */

/* ==========================================
   【標題旁推薦標籤】「荐」字
   顯示在影片名稱旁邊
   ========================================== */

.vod-card__recommend-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 0 4px;
    background: #E42112;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    border-radius: 2px;
    vertical-align: middle;
}