/* =========================================
   1. 變數設定 (CSS Variables)
   ========================================= */
:root {
    /* 基礎顏色 */
    --color-bg: #a5000e; /* 品牌紅底色 */
    --color-text-main: #374151; 
    --color-text-dark: #111827; 
    --color-text-light: #9ca3af; 
    --color-white: #ffffff;
    
    /* 主題色系 */
    --theme-red-100: #fee2e2;
    --theme-red-500: #ef4444;
    --theme-red-600: #dc2626;
    
    --theme-pink-100: #fce7f3;
    --theme-pink-500: #ec4899;
    --theme-pink-600: #db2777;
    
    --theme-amber-100: #fef3c7;
    --theme-amber-500: #f59e0b;
    --theme-amber-600: #d97706;

    --theme-orange-100: #ffedd5;
    --theme-orange-500: #f97316;
    --theme-orange-600: #ea580c;

    --theme-green-100: #dcfce7;
    --theme-green-500: #22c55e;
    --theme-green-600: #16a34a;

    --theme-blue-100: #dbeafe;
    --theme-blue-500: #3b82f6;
    --theme-blue-600: #2563eb;

    /* 字體 */
    --font-serif: "Noto Serif TC", "Songti TC", serif;
    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
    
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* =========================================
   2. 基礎設定 (Reset & Base)
   ========================================= */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--color-text-main);
    
    /* 背景設定：使用紅底圖 */
    background-color: var(--color-bg);
    background-image: url('../img/bg_red.jpg'); /* 請確認圖片路徑正確 */
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    
    -webkit-font-smoothing: antialiased;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* =========================================
   3. 排版系統 (Layout)
   ========================================= */
.container {
    max-width: 1400px; 
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 1.5rem 5rem 1.5rem; 
    position: relative;
}

/* 通用網格系統 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem;
}

@media (min-width: 768px) {
    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================
   修正：為了避免固定導覽列擋住內容，增加容器頂部內距
   ========================================= */
.container {
    padding-top: 7rem; /* 增加頂部空間 (原為 2rem) */
}

/* =========================================
   4. 頂部導覽列 (Navbar) - 固定置頂版
   ========================================= */
.top-nav {
    /* [關鍵] 固定定位 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 確保在最上層 */
    
    /* 背景樣式：深紅半透明 + 模糊效果 */
    background-color: #b52323cd; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    /* 重置舊的排版設定 */
    margin-bottom: 0;
    padding: 0;
}

/* 內部容器 (用來限制內容寬度與對齊) */
.nav-inner-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem; /* 導覽列的高度由此控制 */
    
    display: flex;
    justify-content: space-between; /* Logo在左，選單在右 */
    align-items: center;
}

/* [新增] Logo 圖片樣式 */
.nav-logo-img {
    height: 40px; /* 根據您的 Logo 實際比例調整高度 */
    width: auto;
    display: block;
    /* 如果 Logo 是黑色的，可以加濾鏡轉白 (選用) */
    filter: brightness(0) invert(1); 
}

/* [新增] 右側群組 (讓連結與按鈕排在一起) */
.nav-right-group {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* 連結列表 */
.nav-links {
    display: flex;
    gap: 1.5rem;
}

.nav-item {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    opacity: 0.9;
    transition: opacity 0.2s;
    position: relative;
    white-space: nowrap; /* 防止文字換行 */
}

.nav-item:hover {
    opacity: 1;
    text-shadow: 0 0 8px rgba(255,255,255,0.6);
}

/* 分隔線 | */
.nav-item:not(:last-child)::after {
    content: '|';
    position: absolute;
    right: -0.85rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: normal;
}

/* 購物車按鈕樣式 (維持不變，稍微調整邊距邏輯) */
.btn-cart {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    padding: 0.5rem 1.25rem;
    border-radius: 99px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    white-space: nowrap;
}

.btn-cart:hover {
    background-color: #ffffff;
    color: var(--theme-red-600);
    border-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-cart svg {
    width: 1.2rem;
    height: 1.2rem;
}

/* 手機版響應式微調 */
@media (max-width: 900px) {
    .nav-inner-container {
        padding: 0.75rem 1rem;
    }
    .nav-logo-img {
        height: 32px; /* 手機版 Logo 縮小 */
    }
    .nav-links {
        display: none; /* 手機版通常隱藏文字連結，或改用漢堡選單 */
    }
    /* 如果希望手機版保留文字連結，可以把 display: none 拿掉，並調整 gap */
}


/* =========================================
   5. 主視覺 Hero (圖片版)
   ========================================= */
.hero-section {
    width: 100%;
    /* 設定長寬比，自動適應圖片尺寸 */
    aspect-ratio: 3392 / 1248;
    
    /* 背景圖片設定 */
    background-image: url('../img/bn.jpg'); /* 請確認圖片路徑正確 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 邊框與圓角 */
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius-lg);
    margin-bottom: 6rem; /* 與下方內容保持距離 */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}
/* 手機版響應式微調 */
@media (max-width: 900px) {
    .hero-section  {
        border: 0px solid rgba(255,255,255,0.3);
        width: 100%;
        aspect-ratio: 2000 / 2188;
        background-image: url('../img/bn_mb.jpg');
    }
}

/* =========================================
   6. 獨立白色島嶼區塊 (White Section Wrapper)
   ========================================= */
.white-section-wrapper {
    /* 半透明白色背景 + 磨砂效果 */
    background-color: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-xl);
    
    /* 增加區塊間距 */
    margin-bottom: 4rem; 
    padding: 4rem 2.5rem;
    
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: visible; /* 允許標題凸出去 */
}

@media (max-width:900px) {
    .white-section-wrapper {
        padding: 1.5rem 1rem;
        margin-bottom: 4rem;
    }
}

/* =========================================
   [新增] 獨家套書 - 價格與按鈕並排樣式
   ========================================= */

.book-set-action-bar {
    display: flex;
    justify-content: center; /* 水平置中 */
    align-items: center;     /* 垂直對齊 */
    gap: 2rem;               /* 價格與按鈕之間的距離 */
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.05); /* 上方加一條淡淡的分隔線增加層次 */
}

/* 價格群組 */
.book-set-action-bar .price-group {
    display: flex;
    align-items: baseline; /* 讓文字底部對齊 */
    gap: 0.75rem;
}

/* 針對此區塊的原價樣式調整 */
.book-set-action-bar .price-original {
    font-size: 1rem;
    color: #6b7280;
    text-decoration: line-through;
}

/* [重點] 針對此區塊的特價樣式放大 (符合參考圖) */
.book-set-action-bar .price-sale {
    font-family: 'Times New Roman'; /* 字體可依需求調整 */
    font-size: 3rem;       /* 放大字體 */
    line-height: 1;
    font-weight: 700;
    color: var(--theme-red-600);
    letter-spacing:0em;
}

/* 覆蓋原本按鈕的 margin，因為 flex gap 已經處理了間距 */
.book-set-action-bar .btn-pill-white {
    margin: 0; 
}

/* 手機版響應式調整 (空間不夠時變回上下排) */
@media (max-width: 640px) {
    .book-set-action-bar {
        flex-direction: column;
        gap: 1rem;
    }
}

/* 加入購物車大按鈕 */
.btn-pill-white {
    display: block;
    width: fit-content;
    margin: o.5rem auto; 
    background-color: var(--theme-red-600); /* 改為紅底 */
    color: #ffffff;
    font-weight: 700;
    padding: 0.75rem 2rem;
    border-radius: 99px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(220, 38, 38, 0.25);
    transition: all 0.2s;
    font-size: 1.1rem;
}

.btn-pill-white:hover {
    background-color: var(--theme-red-500);
    transform: scale(1.05);
    box-shadow: 0 10px 15px rgba(220, 38, 38, 0.4);
}

/* =========================================
   [新增] 一行兩個 (2欄) 套書網格樣式
   ========================================= */

/* 1. 網格容器設定 */
.book-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 強制兩欄 */
    gap: 2rem;        /* 格子之間的間距 */
    margin-top: 1rem; /* 與上方大套書的距離 */
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.1); /* 加上分隔線區隔上方 */
}

/* 2. 單個橫式卡片 (左圖右文) */
.book-row-card {
    display: flex;
    align-items: center; /* 垂直置中 */
    gap: 1rem;
    background-color: rgba(255, 255, 255, 0.5); /* 稍微有點底色區隔 */
    padding: 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: transform 0.2s;
}

.book-row-card:hover {
    transform: translateY(-3px); /* 滑鼠移過去稍微浮起 */
    background-color: rgba(255, 255, 255, 0.9);
}

/* 左側圖片區 (佔 35%) */
.row-card-img {
    flex: 0 0 35%; 
    display: flex;
    justify-content: center;
}

.row-card-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

/* 右側資訊區 (佔剩餘空間) */
.row-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 小卡標題 */
.row-card-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-red-600);
    margin: 0 0 0.8rem 0;
    line-height: 1.3;
}

.row-card-text {
    font-family: var(--font-serif);
    font-size: 0.8rem;
    font-weight: 500;
    color: #555555;
    margin: 0 0 0.8rem 0;
    line-height: 1.3;
}

/* 底部價格與按鈕列 */
.row-card-action {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 價格靠左，按鈕靠右 */
    flex-wrap: wrap; /* 空間不夠時自動換行 */
    gap: 0.5rem;
}

/* 價格顯示 */
.row-price-group {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.row-price-group .price-original {
    font-size: 0.7rem;
    color: #888;
    text-decoration: line-through;
}

.row-price-group .price-sale {
    font-family: var(--font-serif);
    font-size: 1.8rem; /* 大紅字價格 */
    font-weight: 700;
    color: var(--theme-red-600);
    line-height: 1;
}

/* 小型的加入購物車按鈕 */
.btn-sm-cart {
    background-color: var(--theme-red-600);
    color: #fff;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 99px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.2s;
    white-space: nowrap;
    margin-top: 1.5rem;
}

.btn-sm-cart:hover {
    background-color: var(--theme-red-500);
}

/* --- 手機版響應式 (螢幕小於 900px 時變單欄) --- */
@media (max-width: 900px) {
    .book-grid-2col {
        grid-template-columns: 1fr; /* 改為一欄 */
        gap: 1.5rem;
        margin-top: 1rem;
        padding-top: 1rem;
    }
    .btn-sm-cart {
    margin-top: 0.5rem;
    }
    /* 手機版圖片可以稍微縮小佔比 */
    .row-card-img {
        flex: 0 0 40%;
    }
}

/* =========================================
   7. 區塊標題設計 (金色膠囊標籤)
   ========================================= */
.section-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff !important; /* 強制白色文字 */
    text-align: center;
    
    /* 標題背景：金色漸層 */
    background: linear-gradient(to right, #b45309, #d97706, #b45309);
    
    /* 讓背景只包覆文字，並往上浮動跨在邊框上 */
    display: table; 
    margin: -5.5rem auto 3rem auto; 
    padding: 0.75rem 3rem;
    border-radius: 99px;
    
    box-shadow: 0 10px 20px -5px rgba(180, 83, 9, 0.5);
    letter-spacing: 0.05em;
    position: relative;
    z-index: 10;
    border: 2px solid rgba(255,255,255,0.3);
    text-shadow: 0 2px 2px rgba(0,0,0,0.2);
}
@media (max-width: 900px) {
.section-title {
    margin-top: -3.5rem !important; /* 調整浮動位置 */
    font-size: 1.8rem;
    letter-spacing: 0.001rem;
}
}

/* =========================================
   8. 書籍卡片樣式
   ========================================= */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

.book-card {
    /* 在白色島嶼上，卡片稍微加點透明度或純白皆可 */
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.book-card:hover {
    background-color: #ffffff;
    border-color: var(--theme-red-500);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.book-cover-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9fafb; /* 淺灰底 */
}

.book-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.discount-badge {
    position: absolute;
    top: 0rem;
    right: 0rem;
    width: 2.5rem;
    height: 2.5rem;
    background-color: #f59e0b;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 2;
}

.book-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.book-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111827; /* 深色文字 */
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}

.book-price-row {
    margin-top: auto;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.price-original {
    font-size: 0.85rem;
    color: #6b7280; /* 灰色 */
    text-decoration: line-through;
}

.price-sale {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--theme-red-600); /* 紅色 */
}

/* 卡片內的加入購物車按鈕 (紅底白字) */
.btn-card-cart {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--theme-red-600);
    color: #ffffff;
    font-weight: 700;
    padding: 0.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-card-cart:hover {
    background-color: var(--theme-red-500);
    transform: translateY(-2px);
}

/* [新增] 購物車計數圓點樣式 */
.cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fbbf24; /* 金黃色 (配合您的設計風格) 或用 var(--theme-red-600) */
    color: #000000;
    font-size: 0.75rem;
    font-weight: 800;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    margin-left: 0.5rem; /* 與文字的距離 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 確保按鈕本身排版正確 */
.btn-cart {
    /* 原本已有樣式，確保這裡不用改太多，只要能容納 badge 即可 */
    padding-right: 1rem; 
}



/* 心跳動畫定義 */
@keyframes heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.1); }
    28% { transform: scale(1); }
    42% { transform: scale(1.1); }
    70% { transform: scale(1); }
}

/* 點擊看更多按鈕 (紅字+動畫) */
.more-arrow-btn {
    display: flex;
    width: fit-content;
    margin: 1rem auto;
    flex-direction: column;
    align-items: center;
    color: var(--theme-red-600); /* 紅色文字 */
    font-weight: 700;
    text-decoration: none;
    font-size: 1.1rem;
    opacity: 0.9;
    transition: opacity 0.2s;
    animation: heartbeat 2s infinite ease-in-out;
}

.more-arrow-btn:hover { 
    opacity: 1; 
    animation-play-state: paused; 
}

.arrow-icon {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid var(--theme-red-600); /* 紅色箭頭 */
    margin-top: 0.5rem;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

/* 分隔線 */
.section-divider {
    margin: 4rem 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.2), transparent);
}

/* =========================================
   10. 活動排程區塊 (Schedule Override)
   ========================================= */
/* 當排程在白色區塊內時，文字顏色需調整為深色 */
.white-section-wrapper .schedule-section-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.white-section-wrapper .schedule-label {
    display: inline-block;
    background-color: #f59e0b;
    color: white;
    font-size: 1.3rem;
    padding: 0.5rem 2rem;
    border-radius: 99px;
    font-weight: 700;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.white-section-wrapper .schedule-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    color: #1f2937; /* 深色 */
    font-weight: 700;
    margin: 0;
    text-shadow: none;
}

.white-section-wrapper .schedule-subtitle {
    color: #6b7280; /* 灰色 */
    margin-top: 0.5rem;
    font-size: 1.1rem;
}

/* Filter Bar */
.filter-bar-sticky {
    position: static;
    top: 1rem;
    z-index: 50;
    margin-bottom: 3rem;
    transition: all 0.3s ease;
}

.filter-wrapper {
    display: flex;
    justify-content: center;
}

.filter-container {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    padding: 0.5rem;
    border-radius: 99px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    max-width: 100%;
    border: 1px solid #e5e7eb;
}

.btn-filter {
    white-space: nowrap;
    padding: 0.6rem 1.5rem;
    border-radius: 99px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4b5563; 
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-filter:hover {
    color: var(--theme-red-600);
    background-color: #f3f4f6;
}

.btn-filter.active {
    background-color: var(--theme-red-600);
    color: var(--color-white);
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.white-section-wrapper .day-header {
    border-top: 1px solid rgba(0,0,0,0.1); /* 底部細灰線 */
    padding-bottom: 0.5rem;
    margin-top: 3rem;
}
.white-section-wrapper .day-title-text {
    background: transparent;
    color: hsl(0, 100%, 2%); /* 深紅 */
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 700;
    padding-left: 1rem;
    border-left: 8px solid #ad0b0b; /* 左側亮紅線 */
    line-height: 1.5;
    border-radius: 0;
    box-shadow: none;
}

/* =========================================
   [修改] 活動排程預設隱藏 (折疊效果)
   ========================================= */
.day-group {
    display: none; /* 關鍵：預設不顯示任何一天的內容 */
}

/* 活動卡片樣式維持 (不需要覆蓋太多，因為卡片本身就是白底) */
.event-card {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    border: 3px solid transparent;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s ease;
    opacity: 0;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); 
}
.event-card:hover { transform: translateY(-0.5rem); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }

/* 卡片內部元素樣式 (保持原樣) */
.card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.25rem; }
.time-wrapper { display: flex; flex-direction: column; }
.time-start { font-family: var(--font-serif); font-size: 1.875rem; font-weight: 700; color: #37251f; line-height: 1.2; }
.time-end { font-size: 0.875rem; color: var(--color-text-light); font-weight: 500; padding-left: 0.25rem; margin-top: 0.2rem; }
.badge-type { font-size: 0.875rem; font-weight: 700; padding: 0.4rem 1rem; border-radius: 9999px; color: var(--color-white); box-shadow: var(--shadow-md); }
/* =========================================
   [修正] 活動卡片圖片容器 (相框模式)
   ========================================= */
.card-image-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;    
    margin-bottom: 1.25rem;
    border-radius: var(--radius-lg); /* 圓角 */
    overflow: hidden;    /* 關鍵：讓超出的圖片被切掉，保持圓角 */
    position: relative;
    background-color: #f3f4f6; /* 預設底色 (圖片沒跑出來時顯示) */
    animation: none;     /* 移除動畫 */
}

/* 控制內部的 img 標籤 */
.card-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 關鍵：像 background-size: cover 一樣自動填滿 */
    object-position: top center; /* 居中 */
    display: block;      /* 消除圖片底部空隙 */
    transition: transform 0.5s ease; /* 加一點滑鼠特效 */
}

/* (選用) 滑鼠移過去圖片稍微放大 */
.event-card:hover .card-image-placeholder img {
    transform: scale(1.1);
}
/* =========================================
   [修正] 活動標題高度一致化 (改為 3 行)
   ========================================= */
.card-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 1.25rem;
    line-height: 1.5; /* 行高 */
    /* [修改 1] 高度計算：字體(1.25) * 行高(1.5) * 行數(3) = 5.625rem */
    height: 4rem;       
    /* [修改 2] 限制顯示 3 行，超過顯示 ... */
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: flex;         
    align-items: flex-start; 
}
.speaker-box { display: flex;align-items: center; gap: 0.5rem; padding: 0.75rem; border-radius: var(--radius-lg); margin-bottom: 1.5rem; border: 1px solid transparent; min-height: 6rem;  box-sizing: border-box;}
.speaker-box > div:last-child {display: flex; flex-direction: column; justify-content: center;}
.speaker-icon { width: 3rem; height: 3rem; border-radius: 50%; background-color: var(--color-white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-sm); border-width: 2px; border-style: solid; }
.speaker-icon svg { width: 2rem; height: 2rem; }
.speaker-label { font-size: 1rem; font-weight: 600; text-transform: uppercase; margin-bottom: 0rem; }
.speaker-name { font-weight: 700; color: #1f2937;margin-top: 0;line-height: 1.6; }
.card-footer { margin-top: auto; display: flex; flex-direction: column; gap: 0.75rem; }
.location-tag { display: flex; align-items: center; font-size: 0.875rem; color: #6b7280; }
.location-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 0.5rem; }
.btn-calendar { width: 100%; padding: 0.75rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 700; border-width: 2px; border-style: solid; background-color: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s; }
.btn-calendar svg { width: 1rem; height: 1rem; }

/* 主題配色 (Red, Pink, Orange, Green, Blue) - 保持不變 */
.theme-red { border-color: #fca5a5; } .theme-red:hover { border-color: var(--theme-red-500); } .theme-red .badge-type { background-color: var(--theme-red-500); } .theme-red .speaker-box { background-color: rgba(254, 226, 226, 0.5); border-color: var(--theme-red-100); } .theme-red .speaker-icon { border-color: #fecaca; color: #fca5a5; } .theme-red .speaker-label { color: #f87171; } .theme-red .location-dot { background-color: #f87171; } .theme-red .btn-calendar { border-color: var(--theme-red-100); color: var(--theme-red-600); } .theme-red .btn-calendar:hover { background-color: var(--theme-red-500); color: #fff; border-color: var(--theme-red-500); }
.theme-pink { border-color: #f9a8d4; } .theme-pink:hover { border-color: var(--theme-pink-500); } .theme-pink .badge-type { background-color: var(--theme-pink-500); } .theme-pink .speaker-box { background-color: rgba(252, 231, 243, 0.5); border-color: var(--theme-pink-100); } .theme-pink .speaker-icon { border-color: #fbcfe8; color: #f9a8d4; } .theme-pink .speaker-label { color: #f472b6; } .theme-pink .location-dot { background-color: #f472b6; } .theme-pink .btn-calendar { border-color: var(--theme-pink-100); color: var(--theme-pink-600); } .theme-pink .btn-calendar:hover { background-color: var(--theme-pink-500); color: #fff; border-color: var(--theme-pink-500); }
.theme-orange { border-color: #fdba74; } .theme-orange:hover { border-color: var(--theme-orange-500); } .theme-orange .badge-type { background-color: var(--theme-orange-500); } .theme-orange .speaker-box { background-color: rgba(255, 237, 213, 0.5); border-color: var(--theme-orange-100); } .theme-orange .speaker-icon { border-color: #fed7aa; color: var(--theme-orange-500); } .theme-orange .speaker-label { color: var(--theme-orange-500); } .theme-orange .location-dot { background-color: var(--theme-orange-500); } .theme-orange .btn-calendar { border-color: var(--theme-orange-100); color: var(--theme-orange-600); } .theme-orange .btn-calendar:hover { background-color: var(--theme-orange-500); color: #fff; border-color: var(--theme-orange-500); }
.theme-green { border-color: #86efac; } .theme-green:hover { border-color: #22c55e; } .theme-green .badge-type { background-color: #22c55e; } .theme-green .speaker-box { background-color: rgba(220, 252, 231, 0.5); border-color: #dcfce7; } .theme-green .speaker-icon { border-color: #bbf7d0; color: #22c55e; } .theme-green .speaker-label { color: #22c55e; } .theme-green .location-dot { background-color: #22c55e; } .theme-green .btn-calendar { border-color: #dcfce7; color: #16a34a; } .theme-green .btn-calendar:hover { background-color: #22c55e; color: #fff; border-color: #22c55e; }
.theme-blue { border-color: #93c5fd; } .theme-blue:hover { border-color: var(--theme-blue-500); } .theme-blue .badge-type { background-color: var(--theme-blue-500); } .theme-blue .speaker-box { background-color: rgba(219, 234, 254, 0.5); border-color: var(--theme-blue-100); } .theme-blue .speaker-icon { border-color: #bfdbfe; color: #93c5fd; } .theme-blue .speaker-label { color: var(--theme-blue-500); } .theme-blue .location-dot { background-color: #60a5fa; } .theme-blue .btn-calendar { border-color: var(--theme-blue-100); color: var(--theme-blue-600); } .theme-blue .btn-calendar:hover { background-color: var(--theme-blue-500); color: #fff; border-color: var(--theme-blue-500); }


/* =========================================
   11. 動畫 (Animation)
   ========================================= */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse { 
    0%, 100% { opacity: 1; } 
    50% { opacity: .5; } 
}

.animate-card {
    opacity: 0;
    animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* =========================================
   12. Footer (頁尾) - 最終修正版
   ========================================= */
.main-footer {
    width: 100%;
    margin-top: 0;       /* 原本是 5rem，直接歸零，讓它貼近上方 */
    padding-top: 3rem;
    background-color: #000000; /* 全黑背景 */
    color: #ffffff;
    padding: 2rem 0 2rem 0;
    position: relative;
    z-index: 10;
}

/* [關鍵] 內容置中容器 */
.footer-container {
    width: 100%;
    max-width: 1400px; /* 與上方內容寬度一致 */
    margin: 0 auto;    /* 置中 */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* 網格排版 */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr; /* 手機版單欄 */
    gap: 2rem;
    margin-bottom: 2rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 分隔線 */
    padding-bottom: 2rem;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr; /* 桌機版 */
        gap: 6rem;
    }
}

/* 標題樣式 */
.footer-heading {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #ffffff;
    position: relative;
    padding-bottom: 0.75rem;
    letter-spacing: 0.05em;
}

/* 紅色底線裝飾 */
.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120px;
    height: 4px;
    background-color: #e70012; /* 品牌紅 */
}

/* 內文樣式 */
.footer-desc, 
.footer-info {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin: 0;
}

.footer-info-group .footer-info {
    margin-bottom: 0.5rem;
}

/* 版權宣告 */
.footer-copyright {
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

/* =========================================
   [新增] 獨家套書 - 橫式大圖排版
   ========================================= */

.book-set-container {
    display: flex;
    gap: 2rem; /* 左右欄間距 */
    align-items: stretch; /* 等高 */
    margin-top: 1rem;
}

/* 左側圖片區 */
.book-set-image {
    flex: 1; /* 佔用剩餘空間 */
    border-radius: var(--radius-lg);
    padding: 0rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.book-set-image img {
    max-width: 100%;
    max-height: 400px;
    object-fit: cover;
}

/* 右側資訊區 */
.book-set-info {
    flex: 1.2; /* 右側稍微寬一點 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem;
    position: relative; /* 為了定位裝飾框 */
}

/* 標題樣式 */
.set-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--theme-red-600); /* 紅色標題 */
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1;
}

/* 內文樣式 */
.set-text {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 300;
    color: #343434; 
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    line-height: 2  ;
}

/* 特色列表 */
.set-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.set-features li {
    font-size: 1.1rem;
    color: #4b5563;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
    font-weight: 500;
}

/* 列表項目前面的小圖示 (可用箭頭或圓點) */
.set-features li::before {
    content: '➔';
    color: var(--theme-red-500);
    position: absolute;
    left: 0;
    font-size: 0.9rem;
}

/* 覆蓋之前的 Action Bar 樣式，適應右側欄寬度 */
.book-set-info .book-set-action-bar {
    margin-top: auto; /* 推到底部 */
    padding-top: 0;
    border-top: none;
    justify-content: flex-end; /* 靠右對齊 (或 space-between) */
}

/* 手機版響應式 (變成上下排列) */
@media (max-width: 900px) {
    .book-set-container {
        flex-direction: column;
        gap: 0rem;
    }
    
    .book-set-image {
        padding: 0rem;
    }
    
    .book-set-info {
        border: none; /* 手機版可以拿掉外框，避免太擁擠 */
        padding: 0;
        background: transparent;
    }
    
    .book-set-info .book-set-action-bar {
        justify-content: center; /* 手機版置中 */
        flex-direction: column;
    }
}

/* =========================================
   [新增] 地圖區塊樣式 (互動式定位)
   ========================================= */

.map-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

@media (min-width: 900px) {
    .map-layout {
        flex-direction: row; /* 電腦版改為左右排列 */
        align-items: flex-start;
    }
}

/* --- 地圖外框 (像是一個視窗) --- */
.map-frame {
    position: relative;
    width: 90%;
    /* 設定一個固定高度，讓視覺聚焦 */
    height: 500px; 
    border-radius: var(--radius-lg);
    overflow: hidden; /* 超出的地圖部分會被藏起來，形成裁切效果 */
    border: 2px solid #e5e7eb;
    background-color: #f3f4f6;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
    flex: 1;
}

.map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* [關鍵] 這裡控制地圖預設顯示的中心點 */
    /* 根據您的圖片，遠見天下在右上方，所以我們把焦點設在 center right 或自訂 % */
    object-position: 60% 30%; 
    transition: transform 0.5s ease;
}

/* 滑鼠移過去可以看更細 */
.map-frame:hover .map-img {
    transform: scale(1.1);
}

/* --- 定位紅點動畫 (Pulse) --- */
.map-pin {
    position: absolute;
    /* 位置由 inline-style (top/left) 控制，方便微調 */
    transform: translate(-50%, -50%); /* 居中校正 */
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

/* 實心紅點 */
.pin-dot {
    width: 16px;
    height: 16px;
    background-color: var(--theme-red-600);
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    position: relative;
    z-index: 2;
}

/* 擴散波紋動畫 */
.pin-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-color: rgba(220, 38, 38, 0.6);
    border-radius: 50%;
    animation: mapPulse 2s infinite;
    z-index: 1;
}

@keyframes mapPulse {
    0% {
        width: 16px;
        height: 16px;
        opacity: 0.8;
    }
    100% {
        width: 80px; /* 波紋擴散大小 */
        height: 80px;
        opacity: 0;
    }
}

/* 浮動標籤 (顯示 "我們在這裡") */
.pin-label {
    background-color: #ffffff;
    color: var(--theme-red-600);
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 0.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    white-space: nowrap;
    opacity: 0.9;
    animation: floatLabel 3s ease-in-out infinite;
}

@keyframes floatLabel {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* --- 右側資訊卡 --- */
.map-info-card {
    flex: 1;
    background-color: #ffffff;
    padding: 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 300px;
}

.booth-number {
    font-size: 2rem;
    font-family: 'Times New Roman', serif;
    color: var(--theme-red-600);
    margin: 0;
    line-height: 1;
    font-weight: 700;
}

.booth-name {
    font-size: 1.5rem;
    color: #1f2937;
    margin: 0.5rem 0 1.5rem 0;
    font-weight: 600;
}

.landmark-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0 0;
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.8;
}

/* =========================================
   [新增] 地圖路線切換按鈕樣式
   ========================================= */
.route-selection {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.route-label {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.route-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.route-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    color: #4b5563;
    border-radius: 99px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.route-btn:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
}

/* 選中狀態 (深紅色) */
.route-btn.active {
    background-color: var(--theme-red-600);
    color: #ffffff;
    border-color: var(--theme-red-600);
    box-shadow: 0 4px 6px rgba(220, 38, 38, 0.2);
}


/* =========================================
   [新增] 注意事項區塊樣式
   ========================================= */

.notice-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .notice-content {
        grid-template-columns: repeat(2, 1fr); /* 桌機版分三欄 */
        gap: 3rem;
    }
}

.notice-group {
    font-size: 0.9rem;
    color: #4b5563; /* 使用較淡的深灰色，降低視覺干擾 */
}

.notice-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb; /* 加上底線區隔 */
}

.notice-list {
    margin: 0;
    padding-left: 1.2rem;
    line-height: 1.6;
}

.notice-list li {
    margin-bottom: 0.5rem;
}

/* 針對注意事項標題的特殊覆蓋 (改為灰色系，不要那麼搶眼的金色) */
#notice .section-title {
    background: linear-gradient(to right, #6b7280, #9ca3af, #6b7280) !important;
    box-shadow: none !important;
    font-size: 1.5rem !important; /* 稍微縮小 */
    padding: 0.5rem 2rem !important;
    margin-top: -5.5rem !important; /* 調整浮動位置 */
}
@media (max-width: 900px) {
    #notice .section-title {
    margin-top: -2.5rem !important; /* 調整浮動位置 */
}
}

/* =========================================
   [新增] 手機版導覽列固定在下方 & 回到頂部按鈕
   ========================================= */

/* --- 1. 回到頂部按鈕樣式 --- */
.back-to-top-btn {
    position: fixed;
    bottom: 2rem;       /* 預設位置 (桌機版) */
    right: 2rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: var(--theme-red-600); /* 品牌紅 */
    color: #ffffff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    
    display: flex;       /* 讓圖示置中 */
    align-items: center;
    justify-content: center;
    
    opacity: 0;          /* 預設隱藏 (透過 JS 控制顯示) */
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 900;        /* 層級比導覽列低一點點，避免蓋住選單 */
}

.back-to-top-btn:hover {
    background-color: var(--theme-red-500);
    transform: translateY(-5px);
}

.back-to-top-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* 顯示狀態 (JS 會切換這個 class) */
.back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
}

/* --- 2. 手機版導覽列特殊設定 (螢幕小於 768px) --- */
@media (max-width: 768px) {
 .back-to-top-btn {
        bottom: 5.5rem; /* 必須比底部 Navbar 高，才不會疊在一起 */
        right: 1rem;
        width: 3rem;    /* 手機版稍微小一點 */
        height: 3rem;
    }
}

/* =========================================
   [新增] 手機版底部固定導航列 (Mobile Bottom Nav)
   ========================================= */

/* 1. 預設狀態：隱藏 (電腦版不顯示) */
.mobile-bottom-nav {
    display: none;
}

/* 2. 手機版樣式 (螢幕小於 900px 時顯示) */
@media (max-width: 900px) {
    
    /* 為了避免內容被底部導航擋住，增加網頁底部內距 */
    body {
        padding-bottom: 4rem; 
    }

    .mobile-bottom-nav {
        display: flex; /* 開啟彈性排版 */
        justify-content: space-around; /* 平均分配間距 */
        align-items: center;
        
        position: fixed; /* 固定在視窗上 */
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3.5rem; /* 導航列高度 */
        z-index: 2000;  /* 確保層級最高，蓋過其他內容 */
        
        /* 背景色：深紅 + 磨砂玻璃效果 */
        background-color: rgba(165, 0, 14, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
    }

    .mobile-nav-item {
        flex: 1; /* 每個按鈕等寬 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: rgba(255, 255, 255, 0.7); /* 預設文字顏色 (淡白) */
        text-decoration: none;
        font-size: 0.95rem; /* 字體大小 */
        font-weight: 700;
        transition: all 0.2s;
        border-right: 1px solid rgba(255,255,255,0.1); /* 分隔線 (選用) */
    }

    .mobile-nav-item:last-child {
        border-right: none; /* 最後一個不要分隔線 */
    }

    /* 點擊或選中時的樣式 */
    .mobile-nav-item:active,
    .mobile-nav-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #ffffff; /* 變亮白 */
        font-weight: 700;
    }

    /* 1. 容器設定：移除原本的長條白底，改為透明且自動換行 */
    .filter-container {
        /* 重置背景與邊框 */
        background-color: transparent !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        
        /* 排版設定：網格狀 */
        display: flex;
        flex-wrap: wrap;       /* 關鍵：允許換行 */
        justify-content: center; /* 居中對齊 */
        gap: 0.8rem;           /* 按鈕之間的間距 */
        overflow-x: visible;   /* 移除滑動卷軸 */
    }

    /* 2. 按鈕設定：變成獨立的白色小卡片 */
    .btn-filter {
        /* 外觀：白底圓角 */
        background-color: #ffffff !important;
        color: #555555;
        border: 1px solid rgba(0,0,0,0.05) !important;
        border-radius: 50px !important; /* 圓角矩形 */
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        
        /* 尺寸與排版 */
        flex: 0 0 calc(30% - 0.5rem); /* 設定寬度：讓一排大約顯示 3 個 (30% * 3 + 間距) */
        padding: 0.6rem 0.2rem !important; /* 上下留白，左右縮小避免字太擠 */
        margin: 0 !important;
        text-align: center;
        font-size: 0.9rem;
        font-weight: 700;
        
        /* 讓文字不換行，如果日期太長可考慮拿掉這行 */
        white-space: nowrap; 
    }

    /* 第一顆「全部」按鈕，可以讓它寬一點或是維持一樣 */
    .btn-filter:first-child {
        flex: 0 0 95%; /* 讓「全部」單獨佔一行，比較好按 (選用) */
        /* 或者維持 flex: 0 0 calc(30% - 0.5rem); 讓它跟其他一樣大 */
        margin-bottom: 0.5rem !important;
    }

    /* 3. 選中狀態 (Active)：變成深紅色 */
    .btn-filter.active {
        background-color: #b91c1c !important; /* 品牌紅 */
        color: #ffffff !important;
        box-shadow: 0 4px 10px rgba(185, 28, 28, 0.3);
        border-color: #b91c1c !important;
    }
}

/* =========================================
   [修改] 優惠浮動小圖樣式 (純展示版)
   ========================================= */
.promo-float-btn {
    position: fixed;
    /* 電腦版定位 */
    bottom: 6.5rem; 
    right: 2rem;
    z-index: 950;
    
    /* [修改] 設定游標為預設箭頭，表示不可點擊 */
    cursor: default; 
    /* pointer-events: none;  <-- 如果希望滑鼠可以穿透它點到後面的東西，可以加這行 */

    transition: transform 0.3s ease;
    animation: floatY 2s infinite ease-in-out;
}

.promo-float-btn:hover {
    transform: scale(1.1);
    animation-play-state: paused;
}

/* 圖片樣式 */
.promo-float-btn img {
    width: 4rem;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}

/* CSS 繪製的圓形樣式 (維持不變) */
.promo-content {
    width: 4rem;
    height: 4rem;
    background-color: #fff3c1;
    border: 3px solid #ffd900;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #000000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    text-align: center;
    line-height: 1.2;
}
.promo-text-small { font-size: 0.9rem; font-weight: 800; }
.promo-text-large { font-size: 1rem; font-weight: 1000; }

/* 浮動動畫 */
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* =========================================
   [修正] 手機版浮動按鈕位置 (避開底部導航列)
   ========================================= */

/* =========================================
   [修改] 手機版優惠提醒 - 橫式浮動條
   ========================================= */
@media (max-width: 900px) {

    /* 1. 調整 Back to Top 按鈕位置 (往上移，避免被橫幅擋住) */
    .back-to-top-btn {
        display: none;
    }

    /* 2. 優惠橫幅容器定位 */
    .promo-float-btn {
        /* 定位：緊貼底部導覽列上方 */
        position: fixed;
        bottom: 3.5rem; /* 剛好坐在導覽列(3.5rem)的肩膀上 */
        left: 0;
        width: 100%;    /* 關鍵：與選單等寬 */
        height: 2.5rem; /* 設定一個固定的高度 */
        z-index: 1900;  
        
        /* 外觀：滿版粉紅底 */
        background-color: #7e0101; /* 淺紅底 */
        border-top: 1px solid rgba(185, 28, 28, 0.2); /* 上緣加一條細線增加質感 */
        box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* 往上的陰影 */
        
        /* 排版 */
        display: flex;
        justify-content: center; /* 內容置中 */
        align-items: center;
        
        /* 移除原本的浮動動畫，因為它是固定的 */
        animation: none; 
        transform: none;
        cursor: default;
    }

    /* 3. 優惠內容樣式 (移除原本的框框，改為純文字排列) */
    .promo-content {
        /* 重置原本的膠囊樣式 */
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
        width: auto;
        height: auto;
        padding: 0;
        
        /* 排版：橫向排列 */
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    /* 文字調整 */
    .promo-text-small {
        font-size: 1.8rem;
        font-family: sans-serif;
        color: #ffebeb; /* 鮮紅色強調 */
        font-weight: 800;
        letter-spacing: 0.05em;
    }
    
    .promo-text-large {
        font-size: 1.8rem;
        font-family: sans-serif;
        color: #ffebeb; /* 鮮紅色強調 */
        font-weight: 800;
        letter-spacing: 0.05em;
    }
}
/* =========================================
   [修改] 優惠提醒 - 內容切換設定
   ========================================= */

/* 1. 預設 (電腦版) 狀態 */
.mobile-promo-text {
    display: none; /* 電腦版隱藏這行長文字 */
}

.desktop-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 2. 手機版狀態 (覆蓋設定) */
@media (max-width: 900px) {
    
    /* 隱藏原本的電腦版圓形內容 */
    .desktop-promo, 
    .promo-text-small, 
    .promo-text-large {
        display: none !important;
    }

    /* 顯示手機版專用文字 */
    .mobile-promo-text {
        display: block !important;
        
        /* 文字樣式設定 */
        font-size: 1rem;       /* 字體大小 */
        font-weight: 700;      /* 粗體 */
        color: #ffffff;        /* 深紅色文字 (配合粉紅底) */
                               /* 若底色是深紅，請改 color: #ffffff; */
        letter-spacing: 0.05em;
        white-space: nowrap;   /* 強制不換行 */
    }

    /* 確保容器排版置中 */
    .promo-content {
        justify-content: center;
        align-items: center;
    }
}