/* --- 全新活潑北歐風配色 --- */
:root {
    --primary-mint: #72D5C6;   /* 清爽藍綠 */
    --accent-coral: #FF8C94;   /* 珊瑚粉 */
    --bg-light: #f5faf9;       /* 背景灰白 */
    --text-main: #374151;      /* 深石板灰 */
    --text-soft: #9CA3AF;      /* 淺灰 */
    --white: #ffffff;
    --modal-shadow: 0 15px 40px rgba(114, 213, 198, 0.15);
    --card-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

html {
    scroll-behavior: smooth;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg-light);
    color: var(--text-main);
    margin: 0;
    font-family: -apple-system, "Noto Sans TC", sans-serif;
}

/* --- 修正 1：主選單支援滑動且不破版 --- */
/* --- 需求 1：Header 深色背景設定 --- */
.main-header {
    background: url('../images/bg001.png') center/cover no-repeat; /* 使用相對路徑 */
    color: #ffffff; /* 文字變成淺色 */
    padding: 24px 15px 0;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.main-header2 {
    background: url('../images/bg002.png') center/cover no-repeat; /* 使用相對路徑 */
    color: #ffffff; /* 文字變成淺色 */
    padding: 24px 15px 0;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.logo { text-align: center; color: var(--primary-mint); font-size: 1.4rem; margin-bottom: 10px; }
.logo img {
	max-width: 200px;
}

/* 讓外層容器固定在最上方 */
.sticky-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-light); /* 確保背景不透明 */
}

.main-nav {
    display: flex;
    justify-content: flex-start; /* 改為靠左開始，配合滑動 */
    gap: 10px;
    overflow-x: auto; /* 允許橫向滑動 */
    white-space: nowrap; /* 強制文字不換行 */
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch; /* iOS 滑動順暢 */
}

/* 隱藏惱人的捲軸 */
.main-nav::-webkit-scrollbar { display: none; }
.main-nav { -ms-overflow-style: none; scrollbar-width: none; }

.nav-tab {
    background: none;
    border: none;
    padding: 10px 15px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    position: relative;
    flex-shrink: 0; /* 防止按鈕被擠壓 */
}

.nav-tab.active { color: #ffffff; font-weight: bold; }
.nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    width: 70%;
    height: 3px;
    background: #ffffff;
    border-radius: 3px;
}

/* Chip 樣式 (AI 子選單) */
.filter-wrapper { padding: 15px 20px; overflow-x: auto; white-space: nowrap; }
/* --- 強制單行橫滑的 filter-chips --- */
.filter-chips {
    display: flex;               /* 1. 讓子元素（標籤）變成橫向排列 */
    flex-wrap: nowrap;           /* 2. 強制不換行 */
    overflow-x: auto;            /* 3. 當內容超過寬度時，開啟橫向滾動 */
    -webkit-overflow-scrolling: touch; /* 4. 讓手機版滑起來有彈性、更順暢 */
    scroll-behavior: smooth;
    gap: 10px;
    padding: 12px 20px;
    background: #f5faf9;
    position: relative;
    z-index: 999;
    cursor: grab;                /* PC 版：顯示可拖曳游標提示 */
    user-select: none;           /* 拖曳時避免選取文字 */
}
.filter-chips:active {
    cursor: grabbing;
}

/* 確保標籤本身不會因為空間不夠而被擠壓變形 */
.chip {
    flex-shrink: 0;              /* 關鍵：防止標籤被縮小 */
    background: var(--white);
    border: 1px solid #E5E7EB;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--text-main);
    transition: 0.2s;
}

/* 隱藏捲軸（你原本就有這段，請保留或確認存在） */
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chips { -ms-overflow-style: none; scrollbar-width: none; }
.chip.active { background: var(--primary-mint); color: var(--white); border-color: var(--primary-mint); font-weight: bold; }

/* 卡片與內容樣式 */
.container { padding: 20px 15px 40px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; }

.card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border: none;
    background: white;
}

.card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(114, 213, 198, 0.2); }

.card-img { width: 100%; height: auto; display: block; }
.card-body { padding: 15px; }

.brand-tag {
    font-size: 1rem;
    background: #4dd1ca;
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 8px;
}

/* 品牌 + tag 同行容器 */
.card-brand-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* 讓原本 brand-tag 的 margin-bottom 由容器接管 */
.card-brand-row .brand-tag {
    margin-bottom: 0;
}

/* tag 小標籤：灰字白底灰框，比品牌小一級 */
.tag-chip {
    font-size: 0.78rem;
    background: #ffffff;
    color: #6B7280;
    border: 1px solid #D1D5DB;
    padding: 2px 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.tag-chip:hover {
    background: #F3F4F6;
    border-color: #9CA3AF;
    color: #374151;
}

.extra-info {
    font-size: 0.75rem;
    color: #E53E3E;
    background: #FFF5F5;
    padding: 4px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
    display: inline-block;
}

.card-title { font-size: 1rem; font-weight: bold; margin-bottom: 8px; line-height: 1.4; }
.card-summary { font-size: 0.85rem; color: #6B7280; line-height: 1.5; margin-bottom: 12px; }
.card-date { font-size: 0.8rem; color: var(--text-soft); margin-bottom: 12px; }

.btn-go {
    text-align: center; background-color: #FF8C94; color: white;
    padding: 12px 20px; border-radius: 12px; text-decoration: none; font-weight: bold;
    display: inline-block;
    transition: background 0.2s;
	border: none;
	cursor: pointer;
}
.btn-go:hover { background-color: #E07B83; }

/* 狀態顯示 */
.status-message { grid-column: 1 / -1; text-align: center; padding: 60px; color: var(--text-soft); }

/* 搜尋框設計 */
.search-container { padding: 15px 20px; display: flex; justify-content: center; background: #f9f9f9; }
.search-box { width: 100%; max-width: 500px; position: relative; }

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    pointer-events: none; /* 讓點擊穿透到 input */
    color: var(--text-soft);
}

.search-box input {
    width: 100%;
    padding: 12px 40px 12px 45px; /* 左側留空間給放大鏡，右側給 X */
    border-radius: 25px;
    border: 2px solid #E0F2F1;
    outline: none;
    font-size: 1rem;
    transition: 0.3s;
}
.clear-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--text-soft);
    cursor: pointer;
    display: none; /* 預設隱藏，由 JS 控制 */
}
.clear-btn:hover { color: var(--accent-coral); }
.search-box input:focus { border-color: var(--primary-mint); box-shadow: 0 0 10px rgba(114, 213, 198, 0.2); }
.search-section { padding: 10px 20px; background: white; }
.search-bar-wrapper {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}
.search-bar-wrapper input {
    width: 100%;
    padding: 12px 40px 12px 20px;
    border-radius: 25px;
    border: 2px solid var(--secondary-mint);
    outline: none;
    transition: 0.3s;
}
.search-bar-wrapper input:focus { border-color: var(--primary-mint); box-shadow: 0 0 10px rgba(114, 213, 198, 0.2); }
.search-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); }


/* --- 按讚愛心動畫 --- */
.card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
.like-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}
.like-btn { 
    background: none; border: none; font-size: 1.4rem; cursor: pointer; 
    transition: transform 0.2s; padding: 0;
}
.like-btn:active { transform: scale(1.4); }

/* --- 聯絡我們彈窗樣式 --- */

.floating-contact-btn {
    position: fixed; bottom: 30px; right: 30px;
    background: linear-gradient(135deg, #72D5C6 0%, #A1EBE0 100%);
    color: white; border: none; padding: 14px 24px; border-radius: 30px;
    cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.1); z-index: 1000;
    font-weight: bold;
}

.floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--gradient-mint);
    color: white;
    border: none;
    padding: 12px 20px; 
	border-radius: 30px; 
	cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
	z-index: 999;
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.modal.show {
  display: flex;
}

.modal-content {
    background: var(--white);
    margin: 10% auto;
    padding: 35px;
    border-radius: 24px;
    max-width: 80%;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    border: none;
}
.modal-header h3 { color: var(--primary-mint); font-size: 1.5rem; margin-bottom: 10px; text-align: center; }
.modal-header p { text-align: center; font-size: 0.9rem; color: var(--text-soft); margin-bottom: 25px; }
.close-modal { position: absolute; right: 20px; top: 15px; font-size: 24px; color: #bbb; cursor: pointer; transition: 0.2s; }
.close-modal:hover { color: #888; }
.modal-content h3 { color: var(--primary-mint); margin-bottom: 20px; text-align: center; font-size: 1.4rem; }
/* 表單輸入框活潑化 */
.form-group { margin-bottom: 15px; }
.form-group input, .form-group textarea {
    width: 100%; padding: 12px 15px; border-radius: 10px;
    border: 2px solid #E0F2F1; outline: none; transition: 0.3s;
    font-size: 1rem; color: var(--text-main);
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--primary-mint); box-shadow: 0 0 8px rgba(114, 213, 198, 0.2); }

/* 按鈕置中 */
.btn-submit {
    display: block; /* block element */
    margin: 20px auto 0; /* center with auto margin */
    background: var(--primary-mint); color: white; border: none;
    padding: 12px 24px; border-radius: 12px; cursor: pointer; font-weight: bold;
    font-size: 1rem; width: 60%;
    box-shadow: 0 4px 10px rgba(114, 213, 198, 0.2);
    transition: 0.2s;
}
.btn-submit:hover { background: #68CFC0; }


/* --- 網頁底部 Footer 樣式 --- */
.main-footer {
    background-color: #ffffff; /* 跟 Header 呼應使用實心白 */
    padding: 20px;
    margin-top: 50px; /* 與卡片區保持距離 */
    border-top: 1px solid #E0F2F1; /* 淡淡的藍綠色線條 */
    text-align: center;
	margin-bottom: 0px;
	bottom: 0px;
}

.footer-content p {
    font-size: 0.75rem; /* 微小但清晰 */
    color: var(--text-soft);
    line-height: 1.6;
    margin: 0;
}

/* 確保 Footer 不會被懸浮按鈕完全擋住文字 */
@media (max-width: 600px) {
    .main-footer {
        padding: 20px; /* 手機版底部留白，避開聯絡按鈕 */
    }
}


/* 響應式優化 */
@media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; } .logo { font-size: 1.2rem; } }


/* --- 新增：合併分頁中的區塊標題樣式 --- */
.area-section-header {
    grid-column: 1 / -1;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--primary-mint);
    padding: 10px 0;
    margin-top: 20px;
    border-bottom: 2px solid var(--secondary-mint);
    display: flex;
    align-items: center;
    /* 重點：留出 Header 的高度空間 (約 100px) */
    scroll-margin-top: 140px;
}

.area-section-header::before {
    content: '🏷️';
    margin-right: 10px;
}

.hgTracking {
  cursor: pointer;
}


/* KFC/必勝客 雙按鈕區 */
.card-footer-kfc {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.kfc-btn-group {
    display: flex;
    gap: 8px;
    flex: 1;
	font-size: 0.95rem !important;
}
/* KFC/必勝客 雙按鈕 — 配合網站風格 */
.btn-kfc {
    flex: 1;
    padding: 12px 18px !important;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem !important; /* 強制統一口徑 */
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

/* 複製優惠代碼：次要色（空心或灰白） */
.btn-coupon {
    background: #FF8C94;
    color: #ffffff;          /* ← 改成你網站的主色 */
    border: 2px solid #FF8C94;
}

/* 立刻買：主要色，跟 .btn-go 一樣 */
.btn-buy {
    background: #00AEAE;     /* ← 改成你網站的主色 */
    color: #fff;
}



/* ── Wow好康 Dropdown ── */
.wow-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.wow-arrow {
    font-size: 0.65em;
    margin-left: 4px;
    vertical-align: middle;
}

.wow-dropdown-menu {
    position: fixed;          /* ← 改這裡，脫離所有父層限制 */
    background: #d6eaf0;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 130px;
    z-index: 9999;            /* ← 拉高確保蓋在最上層 */
    padding: 8px 0;
}

.wow-dropdown-item {
    padding: 14px 28px;
    font-size: 1.05rem;
    color: #1a3a4a;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
}

.wow-dropdown-item:hover {
    background: rgba(255,255,255,0.5);
    border-radius: 8px;
}

/* ── 未登入提示 Lightbox ── */
.login-alert-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.login-alert-overlay.show {
    display: flex;
}
.login-alert-box {
    background: var(--white);
    border-radius: 24px;
    padding: 36px 28px 28px;
    max-width: 320px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    animation: loginAlertIn 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes loginAlertIn {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.login-alert-icon {
    font-size: 2.8rem;
    margin-bottom: 12px;
}
.login-alert-title {
    font-size: 1.15rem;
    font-weight: bold;
    color: var(--text-main);
    margin: 0 0 10px;
}
.login-alert-msg {
    font-size: 0.92rem;
    color: var(--text-soft);
    line-height: 1.65;
    margin: 0 0 24px;
}
.login-alert-btn {
    background: var(--primary-mint);
    color: var(--white);
    border: none;
    border-radius: 12px;
    padding: 12px 0;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
    box-shadow: 0 4px 10px rgba(114, 213, 198, 0.25);
}
.login-alert-btn:hover  { background: #68CFC0; }
.login-alert-btn:active { background: #5BBFB0; }



/* Wow好康 子選單：話題分隔標題 */
.chip-divider {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    font-size: 0.72rem;
    color: #aaa;
    white-space: nowrap;
    user-select: none;
    gap: 4px;
}
.chip-divider::before,
.chip-divider::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 14px;
    background: #ddd;
    vertical-align: middle;
    margin: 0 4px;
}

/* 話題 chip：視覺上與 category chip 稍做區分（可選） */
.chip.chip-tag {
    background-color: #f0fbf9;
    border-color: #72D5C6;
    color: #2b9e92;
}
.chip.chip-tag.active {
    background-color: #72D5C6;
    color: #fff;
}