/* ============================================================
   ☁️ 祥興茶行 Main Style - 首頁、商品展示、詳情頁
   (核心變數請見 variables.css)
   ============================================================ */

/* ============================================================
   🍃 基礎設定 & Header (茶霧滑入特效)
   ============================================================ */
/* ============================================================
   ☁️ 祥興茶行 Main Style - 首頁、商品展示、詳情頁
   ============================================================ */

body {
  /* StickyBar 高度 + 送出按鈕預留空間 */
  padding-bottom: 140px !important;
  /* 2. iPhone X+ 安全區域適配 (瀏海/Home條) */
  /* 會自動疊加安全距離，避免按鈕被 iPhone 的黑條擋住 */
  padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
  background: transparent; /* 背景交給 .aurora-bg */
  margin: 0;
  color: var(--text-primary);
  font-family: "Noto Serif TC", "Songti TC", -apple-system, serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hidden { display: none !important; }
/* === Header 主容器 === */
.ios-header {
  position: relative;
  z-index: 100;
  background: linear-gradient(180deg, rgba(250, 252, 250, 0.95), rgba(255,255,255,0.85));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 10px rgba(90, 123, 104, 0.08);
  border-bottom: 1px solid rgba(180, 200, 190, 0.3);
  
  padding: 40px 24px 32px;
  text-align: center;
  border-radius: 0 0 24px 24px;
  
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px);
  animation: teaHeaderEnter 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  margin-bottom: 28px; 
}

/* === 背景特效 (漂浮茶香粒子) === */
.ios-header::before {
  content: ""; position: absolute; inset: 0;
  background-image: 
    radial-gradient(circle at 30% 120%, rgba(180, 200, 180, 0.25) 0%, transparent 60%),
    radial-gradient(circle at 70% -20%, rgba(160, 190, 170, 0.22) 0%, transparent 60%),
    radial-gradient(circle at 50% 80%, rgba(180, 210, 190, 0.18) 0%, transparent 70%);
  background-size: 200% 200%;
  animation: teaMist 10s ease-in-out infinite alternate;
  filter: blur(16px); z-index: 0;
}
/* 確保內容浮在背景之上 */
.ios-header > * { position: relative; z-index: 1; pointer-events: auto; }


/* === 1. 品牌區塊 (Brand) === */
.brand-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 🔥 確保水平置中 */
  width: 100%;             /* 🔥 佔滿寬度 */
  margin-bottom: 12px;
}

.brand-icon {
/* 移除所有舊的動畫與濾鏡，交給 Lordicon 處理 */
  animation: none !important;
  filter: none !important;
  
  /* 確保置中 */
  margin: 0 auto 4px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* === 標題文字 === */
.ios-title-lg {
  font-family: "Noto Serif TC", "Songti TC", serif; /* 宋體更有茶味 */
  font-size: 26px; 
  font-weight: 800;
  letter-spacing: 2px;
  color: #2f4b3c;
  margin: 0;
  
  /* 茶金漸層文字 */
  background: linear-gradient(135deg, #2f4b3c 0%, #5a7b68 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  text-shadow: 0 2px 4px rgba(90, 123, 104, 0.1);
}

/* === 副標題 (感性文案) === */
.ios-subtitle {
  font-size: 15px;
  color: #6b8c7a;
  line-height: 1.6;
  font-weight: 500;
  margin-bottom: 24px; /* 拉開與膠囊的距離 */
  letter-spacing: 0.5px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* === 3. 運費優惠膠囊 (Promo Pill) === */
.promo-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(180, 200, 190, 0.4);
  border-radius: 50px; /* 圓形膠囊 */
  
  padding: 8px 20px;
  font-size: 13.5px;
  color: #4e6b58;
  font-weight: 600;
  
  box-shadow: 0 2px 10px rgba(90, 123, 104, 0.08);
  backdrop-filter: blur(8px);
  
  transition: all 0.3s ease;
  cursor: default;
}

.promo-pill:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(90, 123, 104, 0.15);
  border-color: #8fb79c;
}

.promo-pill .icon { font-size: 16px; }

/* === 底部裝飾線 === */
.ios-header::after {
  content: ""; display: block; width: 68px; height: 3px;
  background: linear-gradient(90deg, #9bb7a6, #c8dfce);
  border-radius: 999px; 
  margin: 24px auto 0; /* 🔥 增加與膠囊的距離，避免太擠 */
  opacity: 0.9;
  animation: teaLine 1.5s ease-in-out;
}


/* === 動畫關鍵幀 === */
@keyframes teaHeaderEnter {
  0% { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes teaMist { 
  0% { background-position: 50% 0%; } 
  100% { background-position: 52% 0%; } 
}
@keyframes fadeInTitle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInSubtitle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes teaLine { 0% { width: 0; opacity: 0; } 60% { width: 72px; opacity: 1; } 100% { width: 68px; } }


/* === RWD 手機版微調 === */
@media (max-width: 480px) {
  .ios-header { padding-top: 32px; padding-bottom: 24px; margin-bottom: 20px; }
  .ios-title-lg { font-size: 24px; }
  .ios-subtitle { font-size: 14px; margin-bottom: 18px; }
  
  .promo-pill { 
    font-size: 12.5px; 
    padding: 8px 16px;
    width: 100%; /* 手機版拉寬 */
    justify-content: center;
    box-sizing: border-box;
  }
}
/* ============================================================
   🌌 Aurora Mist (極光背景)
   ============================================================ */
.aurora-bg {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  background: #F2F0EB; z-index: 0; 
}

.aurora-layer {
  position: absolute; width: 160%; height: 160%; top: -30%; left: -30%;
  opacity: 0.38; filter: blur(100px);
  background: radial-gradient(circle at 40% 40%, rgba(255, 250, 240, 0.8), rgba(230, 235, 230, 0.2), rgba(255, 255, 255, 0));
  mix-blend-mode: hard-light; transform: translate3d(0,0,0); pointer-events: none;
}
.layer-1 { opacity: 0.40; } 
.layer-2 { opacity: 0.30; filter: blur(140px); }
.layer-3 { opacity: 0.20; }


/* ============================================================
   🏞️ 茶分類場景 (Home Scenes)
   ============================================================ */
.tea-scenes {
  position: relative; display: flex; overflow-x: hidden; overflow-y: visible;
  flex-direction: column; -webkit-overflow-scrolling: touch; z-index: 1;
  gap: 24px; padding: 24px 20px;
}
.tea-scenes::-webkit-scrollbar { display: none; }

.tea-scene {
  scroll-snap-align: start; margin-bottom: 42px; z-index: 1;
  padding: 18px; border-radius: var(--radius-lg);
  background: var(--mist-glass); border: 1px solid var(--mist-border);
  box-shadow: 0 6px 18px var(--mist-shadow);
  backdrop-filter: blur(16px) saturate(135%);
  transition: transform 0.4s var(--ease-soft);
}
.tea-scene:active { transform: scale(0.985); }

/* 分類標題 */
.tea-scene-header {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 8px 4px 14px; margin-bottom: 20px;
  background-image: linear-gradient(to right, var(--auroraA), var(--auroraB));
  background-repeat: no-repeat; background-size: 100% 2px; background-position: 0 100%;
}
.tea-scene-header .cat-zh {
  font-size: 20px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--catA); opacity: 0.92; margin-bottom: 4px; transition: color .45s ease;
}
.tea-scene-header .cat-en {
  font-size: 12px; letter-spacing: 0.18em; color: var(--catB);
  opacity: 0.65; text-transform: uppercase; font-weight: 500; transition: color .45s ease;
}

/* 橫向滾動容器 */
.tea-scroll {
  display: flex; overflow-x: auto; gap: 14px; padding-bottom: 6px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  margin-left: -4px; width: calc(100% + 4px);
}
.tea-scroll::-webkit-scrollbar { height: 4px; }
.tea-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 8px; }


/* ============================================================
   🍵 商品卡片 (Tea Card)
   ============================================================ */
.tea-card {
  /* 基礎佈局 */
  width: 180px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 讓內容撐開 */
  
  /* 尺寸與圓角 */
  padding: 20px 18px;
  border-radius: 24px; /* 更大的圓角，更現代 */
  
  /* 💎 旗艦玻璃質感 */
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 248, 245, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.8);
  
  /* 高級陰影 (多層次) */
  box-shadow: 
    0 10px 30px rgba(90, 123, 104, 0.08), /* 遠處柔光 */
    0 4px 8px rgba(90, 123, 104, 0.04),  /* 近處細節 */
    inset 0 0 0 1px rgba(255, 255, 255, 0.5); /* 內發光邊框 */
    
  backdrop-filter: blur(20px);
  
  /* 動畫 */
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden; /* 為了流光特效 */
}

/* Hover 懸浮效果 */
.tea-card:hover {
  transform: translateY(-6px) scale(1.02);
  background: linear-gradient(145deg, #ffffff, #f0f7f3);
  box-shadow: 
    0 16px 40px rgba(90, 123, 104, 0.15),
    0 6px 12px rgba(90, 123, 104, 0.08);
  border-color: #cde0d6;
}

/* 點擊回饋 */
.tea-card:active {
  transform: scale(0.96);
  box-shadow: 0 4px 12px rgba(90, 123, 104, 0.1);
}

/* 標題文字 */
.tea-card .title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  color: #2a3a32;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  
  /* 讓過長的標題自動省略 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 副標題 (價格或描述) */
.tea-card .meta {
  font-size: 14px;
  color: #6b8c7a;
  font-weight: 500;
  margin-top: auto; /* 推到底部 */
  display: flex;
  align-items: center;
  gap: 4px;
}


/* ✨ 流光掃過特效 (Shimmer) */
.tea-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.tea-card:hover::after {
  opacity: 1;
  animation: cardShine 0.8s ease-in-out forwards;
}

@keyframes cardShine {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* ============================================================
   🏆 會員尊榮專區 (Member Dashboard)
   ============================================================ */

.member-section {
  padding: 10px 20px 20px 20px; /* 調整間距，緊接在 Header 下方 */
  margin-top: -10px; /* 稍微往上拉，銜接視覺 */
}

.member-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- 通用卡片容器 --- */
.member-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

.member-card:active {
  transform: scale(0.98);
}

/* === 1. VIP 金卡 (會員登入) === */
.vip-card {
  /* 深綠色到墨綠色的高級漸層 */
  background: linear-gradient(135deg, #2f4b3c 0%, #1a2e24 100%);
  color: #fff;
  padding: 24px;
  box-shadow: 
    0 10px 25px rgba(47, 75, 60, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1); /* 內發光邊框 */
  min-height: 120px;
  display: flex;
  align-items: center;
}

/* 金屬流光動畫 */
.card-shine {
  position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-25deg);
  animation: vipShine 6s infinite;
  pointer-events: none;
}
@keyframes vipShine {
  0%, 80% { left: -100%; }
  100% { left: 200%; }
}

/* 背景紋理 (茶葉意象) */
.vip-bg-pattern {
  position: absolute; right: -20px; bottom: -40px;
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(184, 134, 11, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.vip-content {
  position: relative; z-index: 2;
  display: flex; align-items: center; width: 100%; gap: 16px;
}

.vip-header {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}

.vip-tag {
  font-size: 10px; letter-spacing: 1px; color: #b8860b; font-weight: 800;
  background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 4px;
  border: 1px solid rgba(184, 134, 11, 0.3);
}

.vip-info { flex: 1; }
.vip-title {
  margin: 0; font-size: 18px; font-weight: 700; letter-spacing: 0.5px;
  background: linear-gradient(to right, #fff, #e0e0e0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.vip-sub {
  margin: 4px 0 0; font-size: 13px; color: rgba(255,255,255,0.7);
}

.vip-action .arrow-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: #b8860b; font-size: 14px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
}

/* ============================================================
   🏆 會員尊榮專區 - 登入後強化版
   ============================================================ */
/* =========================================
   🏆 V2.0 會員卡片 UI 優化
   ========================================= */

/* 1. 卡片容器：更深邃的質感 + 微弱的金色呼吸光 */
.vip-card.logged-in {
  /* 使用 Flex 讓內容垂直置中 */
  display: flex;
  align-items: center;
  padding: 20px 24px; /* 增加內距讓畫面呼吸 */
  
  /* 背景：深松綠色，帶一點點雜訊質感會更好(這裡用漸層模擬) */
  background: 
    radial-gradient(circle at 80% 20%, rgba(184, 134, 11, 0.15) 0%, transparent 40%),
    linear-gradient(135deg, #1a2e25 0%, #0d1411 100%);
  
  border: 1px solid rgba(184, 134, 11, 0.3);
  border-radius: 16px;
  
  /* 陰影：讓卡片浮起來 */
  box-shadow: 
    0 10px 25px -5px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    
  position: relative;
  overflow: hidden; /* 確保光澤不會跑出去 */
}

/* 增加一道掃光動畫 (選用) */
.vip-card.logged-in::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent);
  transform: skewX(-25deg);
  animation: shine 6s infinite;
}

@keyframes shine {
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}

/* 2. 左側頭像區域 */
.vip-avatar-box {
  position: relative;
  width: 56px; 
  height: 56px;
  margin-right: 35px; 
  flex-shrink: 0;
}

.vip-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* 預設底色，當圖片載入慢的時候會先看到這個顏色 */
  background: #2F4B3C; 
  /* 讓圖片或茶杯 emoji 都能置中 */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 圖片溢出圓形要切掉 */
  overflow: hidden; 
  
  border: 2px solid rgba(184, 134, 11, 0.6);
}

.vip-badge-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #e0c388, #b8860b); /* 星星背景改金屬色 */
  border: 2px solid #1a2e25; /* 邊框跟卡片背景色一樣，製造「切割」感 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff; /* 星星改白色 */
  font-size: 10px;
  z-index: 2;
}

/* 3. 文字資訊區塊 (Flex Column) */
.vip-info {
 display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1; 
  /* 如果覺得還不夠開，可以這裡再加一點 padding-left */
  padding-left: 4px; 
}

/* 名字與標籤的容器 */
.vip-title-row {
  display: flex;
  align-items: center;
  gap: 10px; /* 名字跟標籤的距離 */
  margin-bottom: 4px;
}

/* 名字本體 */
.vip-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}

/* 4. 等級標籤 (大改版：精緻路線) */
.vip-tier-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px; /* 膠囊狀 */
  
  /* 風格 A：簍空金邊 (推薦，比較優雅) */
  border: 1px solid #C5A059;
  color: #DEB887;
  background: rgba(197, 160, 89, 0.1); /* 極淡的金色背景 */
  
  /* 風格 B (若喜歡實心)：請解開下面註解 */
  /*
  background: linear-gradient(90deg, #D4AF37, #C5A059);
  color: #1a2e25;
  border: none;
  */
  
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  height: 20px;
}

/* 5. 歡迎標語 */
.vip-sub {
  margin: 0;
  font-size: 13px;
  color: #8F9E96; /* 灰綠色，比純白更有層次 */
  font-weight: 400;
  letter-spacing: 0.5px;
}


/* 整個下半部數據列的容器 */
.vip-stats-row {
  display: flex;
  align-items: flex-end;
  /* 🔥 關鍵修改：改用 space-between 把左右推到最底 */
  justify-content: space-between; 
  
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0;
  
  /* 🔥 關鍵修改：上方距離加大 (12px -> 16px)，左右不設內距讓它自然靠邊 */
  padding: 16px 0 0 0; 
  margin-top: 16px;
}

/* 左側：消費金額區 */
.vip-stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 標題跟數字分開一點 */
  align-items: flex-start; /* 強制靠左 */
}

.stat-label {
  font-size: 11px;
  color: #8F9E96; /* 灰綠色 */
  font-weight: 400;
}

.stat-value {
 font-size: 18px; /* 數字加大一點點 */
  font-weight: 700;
  color: #F5DEB3; /* 小麥金 */
  font-family: 'Roboto', sans-serif;
  line-height: 1.2;
}

/* 中間：分隔線 */
.stat-divider {
display: none;
}

/* 右側：日期文字 */
.vip-stat-date {
  font-size: 12px;
  color: #aaa;
  text-align: right;
  letter-spacing: 0.5px;
  padding-bottom: 2px;
  margin-left: 40px;
}


/* 登出按鈕樣式 */
.vip-logout {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent; /* 半透明黑底 */
    color: rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10; /* 確保在最上層，可以被點擊 */
    transition: all 0.3s ease;
    border: none;
}

.vip-logout:hover {
    background: #c0392b; /* 滑鼠移過去變紅色 (警示色) */
    transform: none;
    border-color: #e74c3c;
}

.vip-logout svg {
    pointer-events: none; /* 讓點擊事件穿透 SVG 打到 div 上 */
}

/* 進度條軌道 (灰色底) */
.vip-progress-container {
  width: 100%;
  height: 4px; /* 極細風格 */
  background: rgba(255, 255, 255, 0.15); /* 軌道顏色 */
  border-radius: 2px;
  margin-top: 4px;    /* 上距 */
  margin-bottom: 12px; /* 下距 (推開底部數據區) */
  overflow: hidden;
  position: relative;
}

/* 進度條本體 (金色光束) */
.vip-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #e0c388, #b8860b);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(184, 134, 11, 0.5);
  transition: width 1s ease-out;
}
/* === 2. 優惠券票卡 (Coupon Ticket) === */
.coupon-ticket {
  background: #fff;
  border: 1px solid rgba(184, 134, 11, 0.2);
  display: flex;
  align-items: center;
  padding: 0;
  height: 70px;
  box-shadow: 0 4px 15px rgba(184, 134, 11, 0.08);
  /* 票券鋸齒邊緣效果 - 使用 CSS Mask 或簡單的 border-left 模擬 */
  position: relative;
}

.ticket-stub {
  width: 60px; height: 100%;
  background: rgba(184, 134, 11, 0.05);
  display: flex; align-items: center; justify-content: center;
  border-right: 2px dashed rgba(184, 134, 11, 0.3);
  position: relative;
}

/* 票券半圓缺口 */
.ticket-stub::before, .ticket-stub::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  background: #F2F0EB; /* 需與網頁背景色相同 */
  border-radius: 50%; right: -6px; border: 1px solid rgba(184, 134, 11, 0.2);
}
.ticket-stub::before { top: -7px; border-bottom-color: transparent; border-left-color: transparent; }
.ticket-stub::after { bottom: -7px; border-top-color: transparent; border-left-color: transparent; }

.ticket-body {
  flex: 1; padding: 0 16px;
}
.ticket-title {
  font-size: 16px; font-weight: 700; color: #2f4b3c;
}
.ticket-sub {
  font-size: 12px; color: #888; margin-top: 2px;
}

.ticket-badge {
  margin-right: 16px;
  background: #b8860b; color: #fff;
  font-size: 12px; font-weight: bold;
  padding: 4px 12px; border-radius: 50px;
}

/* === 優惠券列表樣式 (Modal 內) === */
.coupon-list-container {
  padding: 10px 0;
  min-height: 150px;
  display: flex; flex-direction: column; gap: 12px;
}

.empty-coupon {
  text-align: center; padding: 30px 0;
  color: #aaa;
}
.btn-small {
  margin-top: 15px;
  background: #2f4b3c; color: white; border: none;
  padding: 8px 16px; border-radius: 8px; font-size: 14px;
}

/* RWD 調整 */
@media (min-width: 600px) {
  .member-dashboard {
    flex-direction: row;
  }
  .member-card { flex: 1; }
}
/* =========================================
   🙈 Sticky Bar 自動隱藏機制
   ========================================= */

/* 1. 設定 Sticky Bar 的轉場動畫 (讓它滑動順暢) */
/* 請將 #stickyBar 換成您實際的底部欄位 ID 或 Class */
#stickyBar, .sticky-bar, .bottom-nav {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    /* 確保它是固定在底部的 */
    /* position: fixed; bottom: 0; ... (原本應該就有了) */
}

/* 2. 當 Body 進入 "coupon-mode" 時，把 Sticky Bar 推出去 */
body.coupon-mode #stickyBar,
body.coupon-mode .sticky-bar,
body.coupon-mode .bottom-nav {
    /* 往 Y 軸正方向推 120% (即往下滑出畫面) */
    transform: translateY(120%) !important; 
}

/* =========================================
   🎫 V6.0 高級優惠券 UI
   ========================================= */

/* 網格容器 */
.coupon-grid {
  display: grid;
  grid-template-columns: 1fr; /* 手機版單欄 */
  gap: 16px;
  padding: 10px 4px;
}

/* 平板以上雙欄 */
@media (min-width: 600px) {
  .coupon-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* 票券本體 */
.coupon-card {
  display: flex;
  background: linear-gradient(135deg, #1a2e25 0%, #0d1411 100%);
  border: 1px solid rgba(184, 134, 11, 0.3);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer; /* 讓整張卡片看起來可點擊 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.coupon-card:hover {
  transform: translateY(-2px);
  border-color: rgba(184, 134, 11, 0.6);
  box-shadow: 0 8px 15px rgba(0,0,0,0.4);
}

/* 左側：金額視覺區 */
.coupon-left {
  width: 90px;
  background: linear-gradient(180deg, #b8860b 0%, #8a660a 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-right: 2px dashed #0d1411; /* 票券撕線效果 */
  position: relative;
}

/* 票券缺口裝飾 (上下半圓) */
.coupon-left::before, .coupon-left::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: #232323; /* 配合背景色，製造挖洞感，請依您的 Modal 背景調整 */
  border-radius: 50%;
  left: -8px; 
}
.coupon-left::before { top: -8px; }
.coupon-left::after { bottom: -8px; }

.coupon-val {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}
.coupon-type {
  font-size: 10px;
  opacity: 0.9;
  margin-top: 4px;
}

/* 右側：資訊與按鈕區 */
.coupon-right {
  flex: 1;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.coupon-title {
  color: #F5DEB3; /* 小麥金 */
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.coupon-cond {
  color: #8F9E96;
  font-size: 12px;
}

.coupon-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 8px;
}

.coupon-date {
  font-size: 11px;
  color: #666;
}

/* 立即使用按鈕 */
.btn-apply {
  background: transparent;
  border: 1px solid #b8860b;
  color: #b8860b;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-apply:hover {
  background: #b8860b;
  color: #fff;
}
/* ============================================================
   📱 商品詳情 Modal (Tea Modal)
   ============================================================ */
.tea-modal {
  position: fixed; inset: 0; display: flex; justify-content: center; align-items: flex-end;
  pointer-events: none; opacity: 0; transition: opacity .35s ease; z-index: 10001;
}
.tea-modal.show { pointer-events: auto!important; opacity: 1; }

.tea-modal-bg {
  position: absolute; inset: 0; background: rgba(0,0,0,0.32); opacity: 0;
  transition: opacity .35s ease; z-index: 9000; pointer-events: none;
}
.tea-modal.show .tea-modal-bg { opacity: 1; pointer-events: auto!important; }

.tea-modal-content {
  /* 頂部加大圓角 */
  border-radius: 32px 32px 0 0; 
  /* 極致玻璃質感背景 */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  
  /* 加上頂部光澤 */
  box-shadow: 
    0 -10px 40px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
    
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
  width: 100%; max-height: 88%; background: rgba(255,255,255,0.88);
  border-radius: 24px 24px 0 0; padding-bottom: calc(32px + env(safe-area-inset-bottom));
  backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 -6px 24px rgba(0,0,0,0.12);
  transform: translateY(100%); transition: transform .45s var(--ease-soft);
  overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; z-index: 9500; pointer-events: auto;
}
.tea-modal.show .tea-modal-content { transform: translateY(0)!important; }
/* 讓商品詳情的內文區塊不要被底下 StickyBar 蓋住 */
.tea-modal .tea-collection {
  padding-bottom: calc(160px + env(safe-area-inset-bottom)) !important;
}

.tea-modal-header {
padding: 20px 24px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  /* 茶韻漸層背景 */
  background: linear-gradient(180deg, rgba(240, 250, 245, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
#modalTitle { 
  /* 1. 字體加大，提升份量感 */
  font-size: 22px !important; 
  font-weight: 800;
  
  /* 2. 顏色設定 (這裡會被 JS 的 style.color 覆蓋，但設個預設值比較保險) */
  color: #5a7b68; 
  
  letter-spacing: 1.5px; /* 增加字距，更有質感 */
  text-transform: uppercase;
  
  display: flex;
  align-items: center;
  justify-content: center; /* 如果你想要置中 */
  gap: 8px;
}
  /* 分類前的小圖示 (用 CSS 畫葉子) */
#modalTitle::before {
  content: "" !important;      /* 必須有內容才能顯示 */
  display: inline-block !important;
  
  width: 24px;  /* 圖示大小 */
  height: 24px;
  margin-right: 6px;
  margin-bottom: 2px; /* 微調垂直對齊 */

  /* 🔥 關鍵：使用 currentColor 讓圖示顏色自動跟隨文字顏色 */
  background-color: currentColor; 
  
  /* 使用 SVG Mask 載入精美的茶葉圖示 */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16.5 3C19.58 3 22 5.42 22 8.5C22 11.13 19.2 14.28 16.97 16.26C15.83 17.25 14.38 17.9 12.85 17.9C11.69 17.9 10.57 17.52 9.63 16.81C6.48 14.43 2.32 11.35 2.32 7.57C2.32 4.49 4.74 2.07 7.82 2.07C9.56 2.07 11.23 2.88 12.32 4.16C13.41 2.88 15.08 3 16.5 3Z' style='fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round'/%3E%3Cpath d='M12 18V22' style='stroke:currentColor;stroke-width:2;stroke-linecap:round'/%3E%3C/svg%3E") no-repeat center;
  
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 22l10-10'/%3E%3Cpath d='M12 12c.5-3 2.5-5 5-5 3 0 5 2 5 5 0 5-4.5 9.5-10 10'/%3E%3Cpath d='M12 12c-.5-3-2.5-5-5-5-3 0-5 2-5 5 0 5 4.5 9.5 10 10'/%3E%3C/svg%3E") no-repeat center;

  -webkit-mask-size: contain;
  mask-size: contain;
  
  opacity: 0.9; /* 微微透明增加質感 */
}
.close-btn {
  width: 32px; height: 32px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #555;
  transition: all 0.2s;
}
.close-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: rotate(90deg);
}

.tea-collection { padding: 18px 16px 40px; display: flex; flex-direction: column; gap: 22px; }

/* Item Card inside Modal */
.itemcard {
  margin-top: 10px;
  padding: 24px 20px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(90, 123, 104, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
}
/* 背景裝飾紋理 */
.itemcard::before {
  content: "";
  position: absolute; top: -20px; right: -20px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, #e8f3ed 0%, transparent 70%);
  opacity: 0.6; pointer-events: none;
}
.itemcard .title {font-size: 24px;
  font-weight: 800;
  color: #2f4b3c;
  margin-bottom: 8px;
  line-height: 1.3;
  font-family: "Noto Serif TC", serif; /* 宋體更有茶味 */}
.itemcard .meta { font-size: 15px;
  color: #6b8c7a;
  margin-bottom: 16px;
  font-weight: 500;}

  /* Modal 內的分享按鈕樣式 */
.modal-share-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #f5f5f7; /* 淺灰背景，很像 iOS 原生按鈕 */
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #5a7b68; /* 配合您的品牌綠色 */
    transition: all 0.2s ease;
    z-index: 5;
}

.modal-share-btn:hover {
    background-color: #e8f5e9; /* Hover 時變淡綠色 */
    transform: scale(1.05);
}

.modal-share-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    margin-top: -2px; /* 視覺微調置中 */
}

/* 點擊後的複製成功提示樣式 */
.modal-share-btn.copied {
    background-color: #4caf50;
    color: white;
}
/* 數量控制 */
.qty-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.qty-btn {
  width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(145deg,#fafcfa,#eef3ef);
  border: 1.5px solid rgba(160,180,165,0.4); display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 600; color: #2f4b3c; cursor: pointer; transition: all .2s ease;
}
.qty-btn:hover { transform: translateY(-2px); box-shadow: 0 3px 6px rgba(90,123,104,0.15); }
.qty-input {
  width: 48px; font-size: 18px; font-weight: 700; color: #2f4b3c; padding: 6px 4px;
  border-radius: 8px; border: 1px solid rgba(170,190,180,0.4); background: rgba(255,255,255,0.75); text-align: center;
}
/* 錯誤訊息文字樣式 */
.qty-error-text {
  color: #ef4444; /* 紅色 */
  font-size: 0.9rem;
  font-weight: bold;
  animation: shake 0.4s ease-in-out; /* 加入搖晃動畫更明顯 */
}

/* 定義搖晃動畫 (如果你原本沒有的話) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
/* 庫存標籤 */
.stock-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  background: #f0f5f3;
  color: #4a6b58;
  margin-bottom: 16px;
}
.stock-tag.low { background: #fff4e6; color: #c46a4a; }
.stock-tag.soldout { background: #ffe6e6; color: #b03535; }

/* Pack Row (裝罐) */
/* Pack Row 容器 */
.pack-row {
  background: #f8faf9;
  padding: 12px;
  border-radius: 12px;
  margin-top: 10px;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  flex-direction: column; /* 改為垂直排列 */
  align-items: stretch;
}
.pack-row.active {
  background: #fff;
  border-color: #8fb79c;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 標題與開關 */
.pack-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
}
.pack-toggle {
  font-weight: 700;
  color: #305c46;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* 分配狀態文字 */
.pack-status {
  font-size: 12px;
  color: #666;
  font-weight: 400;
}
.pack-status.ok { color: #2ecc71; font-weight: bold; } /* 全數裝完 */
.pack-status.warn { color: #e67e22; } /* 還有剩 */

/* 隱藏區塊 */
.pack-options.hidden {
  display: none;
}
.pack-options {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  animation: slideDown 0.3s ease-out;
}

/* 單個裝罐選項列 */
.pack-option-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.pack-option-item:last-child { margin-bottom: 0; }

.pack-option-item .lbl {
  font-size: 14px;
  color: #444;
  display: flex;
  flex-direction: column;
}
.pack-option-item .lbl small {
  font-size: 11px;
  color: #888;
}

/* 輸入框微調 */
.stepper {
  display: flex;
  align-items: center;
  gap: 5px;
}
.stepper input {
  width: 40px;
  height: 30px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  font-weight: bold;
  color: #333;
}
.stepper .step {
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: #f9f9f9;
  cursor: pointer;
}
.stepper .step:active { background: #eee; }

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Step Button (小加減鈕) */
.step {
  width: 28px; height: 28px; border-radius: 8px; background: #fff;
  border: 1px solid rgba(160, 180, 165, 0.4); color: #305c46; font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;
}
.step:hover { background: #e8f3ed; border-color: #8fb79c; transform: translateY(-1px); }

.qty-bubble {
  position: absolute; /* 絕對定位，相對於 body */
  z-index: 9999;      /* 確保在最上層 */
  
  /* 視覺樣式 */
  font-size: 16px;
  font-weight: 800;
  color: #2f4b3c;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
  pointer-events: none;
  white-space: nowrap; /* 強制不換行 */
  width: auto;         /* 確保寬度自動 */
  will-change: transform; /* 強制手機開啟 GPU 加速，有時候是渲染延遲導致 */
  
  /* 這裡不需要定義 top/left，因為 JS 會寫入 inline style */
  
  /* 關鍵：水平置中修正 */
  /* JS 計算的是按鈕中心點，CSS 要把氣泡往左拉回 50% 才會剛好對齊中心 */
  transform: translate3d(-50%, 0, 0); 
  
  animation: qtyBubbleMoveBody 0.8s forwards;
}

@keyframes qtyBubbleMoveBody {
  0% {
    opacity: 0;
    /* 這裡一定要保留 translate3d(-50%, ...) 否則水平會歪掉 */
    transform: translate3d(-50%, 0, 0) scale(0.5);
  }
  20% {
    opacity: 1;
    /* 往上飄移 -20px */
    transform: translate3d(-50%, -20px, 0) scale(1.2);
  }
  100% {
    opacity: 0;
    /* 繼續往上飄到 -50px */
    transform: translate3d(-50%, -50px, 0) scale(1);
  }
}

/* ============================================================
   📘 詳細說明與功能 (Details & Profile - No Toggle Version)
   ============================================================ */

/* 通用進場動畫：往上浮現 */
@keyframes cardSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === 1. 詳細說明區塊 (預設展開) === */
.detailblock {
  background: #ffffff;
  border-radius: 24px;
  padding: 24px; /* 增加內距 */
  margin-bottom: 16px;
  
  /* 懸浮質感 */
  box-shadow: 0 4px 20px rgba(90, 123, 104, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.02);

  /* 動畫設定 */
  opacity: 0; /* 初始隱藏，等動畫 */
  animation: cardSlideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 0.1s; /* 第 1 個出現 */
}

/* 內文排版優化 */
.detailblock p {
  font-size: 15.5px;
  line-height: 1.85; /* 更寬鬆的行距，閱讀更舒適 */
  color: #4a4a4a;
  text-align: justify;
  letter-spacing: 0.03em;
  margin: 0;
}


/* === 2. 茶性格儀表板 (Profile Section) === */
.profile-section {
  background: #ffffff;
  border-radius: 24px;
  padding: 24px;
  margin-top: 0; /* 緊接在說明下方 */
  margin-bottom: 16px;
  
  box-shadow: 0 4px 20px rgba(90, 123, 104, 0.05);
  border: 1px solid rgba(0,0,0,0.02);
  
  /* 動畫設定 */
  opacity: 0;
  animation: cardSlideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 0.2s; /* 第 2 個出現 */
}

/* 標題 */
.profile-title {
  font-size: 13px;
  color: #8fa396;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}
/* 裝飾條 */
.profile-title::before {
  content: ""; display: block; width: 4px; height: 14px;
  background: var(--pcolor, #5a7b68);
  border-radius: 2px;
}

/* 內容容器 */
.profile-blocks {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 單行 (標籤 + 燈條) */
.profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-label {
  font-size: 15px;
  font-weight: 600;
  color: #2f4b3c;
  width: 55px;
}

/* 燈條容器 */
.profile-bar {
  flex: 1;
  display: flex;
  gap: 6px;
  padding-left: 12px;
}

/* 燈號 (光膠囊) */
.profile-bar .blk {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: #f0f2f1;
  transition: all 0.3s ease;
}

/* 亮起狀態 */
.profile-bar .blk.on {
  background: var(--pcolor, #5a7b68);
  box-shadow: 0 0 10px var(--pcolor, rgba(90, 123, 104, 0.4));
  opacity: 0;
  /* 燈條內部的依序亮起 */
  animation: barPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 燈條延遲 (加上原本卡片的延遲 0.2s) */
.profile-bar .blk:nth-child(1) { animation-delay: 0.3s; }
.profile-bar .blk:nth-child(2) { animation-delay: 0.35s; }
.profile-bar .blk:nth-child(3) { animation-delay: 0.4s; }
.profile-bar .blk:nth-child(4) { animation-delay: 0.45s; }
.profile-bar .blk:nth-child(5) { animation-delay: 0.5s; }

@keyframes barPop {
  0% { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}


/* === 3. 泡法資訊 (Brew Section) === */
.brew-section {
  background: #ffffff;
  border-radius: 24px;
  padding: 24px;
  margin-top: 0;
  
  border: 1px solid rgba(0,0,0,0.02);
  box-shadow: 0 4px 20px rgba(90, 123, 104, 0.05);
  
  /* 動畫設定 */
  opacity: 0;
  animation: cardSlideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 0.3s; /* 第 3 個出現 */
}

.brew-title {
  font-size: 15px;
  font-weight: 700;
  color: #2f4b3c;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f5f3; /* 極細分隔線 */
}

.brew-row {
  font-size: 15px;
  color: #555;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}

/* 分隔線只在項目之間顯示，最後一項不要 */
.brew-row:not(:last-child) {
  border-bottom: 1px dashed #f0f0f0;
}

.brew-row:hover {
  background: #fafcfb;
  padding-left: 10px; padding-right: 10px;
  margin: 0 -10px; /* 負邊距讓背景填滿 */
  border-radius: 12px;
}

.brew-row span:last-child {
  font-weight: 600;
  color: #2f4b3c;
  font-family: "Noto Serif TC", serif;
  letter-spacing: 0.5px;
}

.ice-icon { font-size: 16px; margin-left: 4px; }

/* ============================================================
   🌀 Embla Carousel 核心樣式
   ============================================================ */
.embla { position: relative; width: 100%; max-width: 100vw; }
.embla__viewport { overflow: hidden; width: 100%; overflow-x: scroll; scrollbar-width: none; }
.embla__container { display: flex; gap: 14px; padding: 6px 4px 10px 0px; touch-action: pan-y pinch-zoom; }
.embla__slide { flex: 0 0 auto; width: auto; min-width: 0; }


/* ============================================================
   ✅ 隱私同意與送出按鈕 (Premium Tea Style)
   ============================================================ */

/* === 隱私同意區塊容器 === */
.consent-row {
  margin: 24px 0 12px;
  padding: 18px 20px;
  border-radius: 16px;
  
  /* 玻璃擬態背景 */
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(160, 180, 170, 0.45);
  box-shadow: 
    0 4px 12px rgba(90, 123, 104, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
    
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.consent-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(90, 123, 104, 0.1);
}

/* === Toggle Switch (開關本體) === */
.sp-toggle {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  user-select: none;
}

.sp-toggle input {
  display: none; /* 隱藏原生 checkbox */
}

/* === 滑軌 === */
.sp-toggle-slider {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 28px;
  border-radius: 28px;
  margin-top: 2px;
  
  /* OFF 狀態：茶灰綠 */
  background: rgba(200, 215, 205, 0.6);
  border: 1px solid rgba(180, 200, 190, 0.3);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  
  transition: all 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* === 圓形按鈕 (Knob) === */
.sp-toggle-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  
  background: #fff;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.15),
    0 1px 1px rgba(0, 0, 0, 0.05);
    
  transition: all 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* === ON 狀態：茶湯漸層 + 光暈 === */
.sp-toggle input:checked + .sp-toggle-slider {
  background: linear-gradient(135deg, #7fa38a 0%, #5a7b68 100%);
  border-color: transparent;
  box-shadow: 
    0 2px 8px rgba(90, 123, 104, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.sp-toggle input:checked + .sp-toggle-slider::after {
  transform: translateX(18px); /* 移動距離 */
  background: #fff;
}

/* === 文字描述 === */
.sp-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sp-toggle-label {
  font-size: 15.5px;
  font-weight: 700;
  color: #2f4b3c; /* 深茶綠 */
  line-height: 1.4;
}

.sp-consent-note {
  font-size: 13.5px;
  color: #66776e; /* 淺灰綠 */
  line-height: 1.5;
}

/* ============================================================
   🚀 送出按鈕區域
   ============================================================ */
.submit-area {
  margin-top: 32px;
  margin-bottom: 24px;
  padding: 0 8px;
  display: flex;
  justify-content: center;
}

.submit-btn {
  width: 100%;
  height: 56px;
  border-radius: 18px;
  
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  
  border: none;
  background: linear-gradient(135deg, #5a7b68, #8fb79c);
  
  /* 懸浮陰影 */
  box-shadow: 
    0 8px 20px rgba(90, 123, 104, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
    
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover 效果 */
.submit-btn:not(:disabled):hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #668a75, #9cc3aa);
  box-shadow: 
    0 12px 28px rgba(90, 123, 104, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Active 點擊效果 */
.submit-btn:not(:disabled):active {
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(90, 123, 104, 0.2);
}

/* ✨ 流光動畫 (Shine Effect) */
.submit-btn:not(:disabled)::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: btnShine 3s infinite;
}

@keyframes btnShine {
  0% { left: -100%; opacity: 0; }
  20% { left: 200%; opacity: 1; }
  100% { left: 200%; opacity: 0; }
}

/* 🚫 Disabled 狀態 */
.submit-btn:disabled {
  background: #e0e0e0;
  color: #a0a0a0;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.submit-btn:disabled::after {
  display: none;
}

/* 手機版底部安全距離 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .submit-area {
    margin-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}
/* ============================================================
   🚑 行動端滾動急救包 (Mobile Scroll Fixes) - 貼在 style.css 最下方
   ============================================================ */

/* 1. 解鎖橫向滑動 (針對首頁商品列表) */
.tea-scroll, 
.embla__container {
  display: flex !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  /* iOS 慣性滑動必備 */
  -webkit-overflow-scrolling: touch !important;
  /* 告訴瀏覽器：這裡允許橫向操作，不要攔截 */
  touch-action: pan-x !important; 
  cursor: grab;
  pointer-events: auto !important; /* 確保能點擊 */
}

/* 2. 解鎖垂直滑動 (針對 Modal 內容) */
/* 1. Modal 內容容器：允許垂直捲動，禁止水平溢出 */
.tea-modal-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  
  /* iOS 慣性滑動必備 */
  -webkit-overflow-scrolling: touch !important;
  
  /* 告訴瀏覽器：這裡允許垂直操作，不要攔截 */
  touch-action: pan-y !important;
  
  /* 防止滑到底部時，連帶捲動到後面的 body */
  overscroll-behavior: contain !important;
  
  /* 確保高度被限制，不然無法捲動 */
  max-height: 85vh !important;
  height: auto !important;
}

/* 2. 確保 Modal 本身不會擋住捲動 */
.tea-modal {
  /* 讓點擊穿透到 content，但不要擋住 scroll */
  touch-action: none; 
}

/* 3. 如果有用了 Hammer.js，這行能救命 */
.tea-modal-content * {
  touch-action: pan-y !important; /* 強制子元素也允許捲動 */
}

/* 4. 確保 AI 視窗內容可以滑 */
.ai-chat-area {
  flex-grow: 1;
  height: 0; /* Flexbox trick: 讓它吃滿剩餘空間並允許捲動 */
  min-height: 200px; 
}

/* ============================================================
   🚑 數量輸入框樣式急救 (防止被 store.css 的大表單樣式覆蓋)
   ============================================================ */

/* 針對「主數量」與「裝罐數量」的輸入框進行強制重置 */
.qty-input,
.pack-qty input {
  /* 1. 尺寸重置：改回小巧方形 */
  width: 40px !important;
  height: 30px !important;
  
  /* 2. 樣式重置：移除大表單的留白與背景 */
  padding: 0 !important;
  margin: 0 4px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(160, 180, 170, 0.5) !important;
  border-radius: 8px !important;
  
  /* 3. 文字重置 */
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: #2f4b3c !important;
  
  /* 4. 移除聚焦時的巨大光暈 */
  box-shadow: none !important;
}

/* 聚焦時只給一點點顏色 */
.qty-input:focus,
.pack-qty input:focus {
  border-color: #5a7b68 !important;
  background: #fff !important;
}

/* 加在 style.css 中 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- 高質感 Footer --- */
.site-footer {
    /* 上方漸層讓它自然融入背景，不突兀 */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(248,248,248,0.8) 100%);
    padding: 60px 20px 120px; /* 下方留 120px 是為了避開 stickybar 購物車列 */
    text-align: center;
    position: relative;
    z-index: 1;
}

.footer-content {
    max-width: 680px; /* 縮窄寬度，增加閱讀精緻感 */
    margin: 0 auto;
}

.footer-icon {
    margin-bottom: 20px;
    opacity: 0.6;
}

/* 標題樣式：極簡、纖細 */
.footer-heading {
    font-family: 'Zen Kurenaido', 'Noto Serif TC', serif; /* 使用質感字體 */
    font-size: 15px;
    color: #8e8e93; /* iOS 次要文字灰 */
    letter-spacing: 0.15em;
    margin-bottom: 24px;
    font-weight: 500;
    position: relative;
    display: inline-block;
}

/* 裝飾線：標題下方的小短線 */
.footer-heading::after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background-color: #d1d1d6;
    margin: 12px auto 0;
}

/* 內文樣式：高雅、易讀 */
.seo-intro p {
    font-family: 'Noto Serif TC', serif; /* 襯線體看起來更有茶文化的感覺 */
    font-size: 13px;
    line-height: 2; /* 拉大行高，呼吸感 */
    color: #999;
    letter-spacing: 0.08em;
    text-align: justify; /* 左右對齊 */
    text-align-last: center; /* 最後一行置中 */
}

/* 關鍵字微亮，但不刺眼 */
.seo-intro strong {
    font-weight: 600;
    color: #7a8b80; /* 淡淡的莫蘭迪綠，呼應品牌 */
}

/* 底部版權區 */
.footer-bottom {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(0,0,0,0.05); /* 極淡的分隔線 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: sans-serif; /* 版權資訊改回無襯線體，比較清晰 */
}

.copyright {
    font-size: 11px;
    color: #c7c7cc;
    letter-spacing: 0.05em;
}

.footer-links {
    font-size: 11px;
}

.footer-links a {
    color: #aeaeb2;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #5a7b68;
}

.footer-links .sep {
    color: #e5e5ea;
    margin: 0 8px;
}

/* 手機版微調 */
@media (max-width: 480px) {
    .site-footer {
        padding-top: 40px;
    }
    .seo-intro p {
        font-size: 12px;
        text-align: center; /* 手機版置中比較自然 */
    }
}

/* --- 高級分享面板 (iOS 毛玻璃風格 + 橫向滾動) --- */
.share-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 🔥 確保層級最高，蓋過購物車 */
    z-index: 20000; 
    visibility: hidden;
    transition: visibility 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.share-modal.active {
    visibility: visible;
}

.share-backdrop {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); /* 遮罩濃度 */
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
    /* 加上 backdrop-filter 讓背景也微微模糊，聚焦感更強 */
    backdrop-filter: blur(2px); 
    -webkit-backdrop-filter: blur(2px);
}

.share-modal.active .share-backdrop {
    opacity: 1;
}

.share-sheet {
    position: relative;
    width: 100%;
    
    /* 🔥 iOS 原生毛玻璃核心設定 */
    background: rgba(255, 255, 255, 0.75); /* 高透明度 */
    backdrop-filter: blur(30px) saturate(180%); /* 高模糊 + 增豔 */
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    
    /* 底部安全距離 */
    padding: 24px 0 calc(30px + env(safe-area-inset-bottom));
    
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); /* iOS 物理彈性曲線 */
    box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
    z-index: 20001;
    border-top: 1px solid rgba(255,255,255,0.3); /* 頂部高光線 */
}

.share-modal.active .share-sheet {
    transform: translateY(0);
}

.share-header {
    margin-bottom: 20px;
    padding: 0 24px; /* 標題對齊 */
    text-align: left;
}

.share-header h3 {
    margin: 0;
    font-size: 19px; /* 稍微加大 */
    color: #1c1c1e;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* --- 橫向滾動容器 --- */
.share-grid {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px; /* 圖示間距 */
    
    /* 滾動設定 */
    overflow-x: auto;
    padding: 10px 24px 20px; /* 左右留白，下方預留陰影空間 */
    
    /* iOS 滾動回彈手感 */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    
    /* 隱藏捲軸 */
    scrollbar-width: none; /* Firefox */
}
.share-grid::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* --- 單個選項 --- */
.share-item {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 0;
    
    /* 🔥 關鍵：防止被擠壓，強迫產生滾動條 */
    flex-shrink: 0; 
    width: 64px; /* 固定寬度 */
}

.share-item:active {
    opacity: 0.6;
    transform: scale(0.96);
    transition: all 0.1s;
}

.share-item span {
    font-size: 11px;
    color: #333; /* 深灰字體 */
    letter-spacing: 0.2px;
    margin-top: 4px;
    font-weight: 500;
}

/* --- Icon 容器 --- */
.share-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px; /* iOS 標準圓角 */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06); /* 極淡的陰影 */
    position: relative;
    overflow: hidden; /* 確保背景不溢出 */
}

/* 確保 SVG 居中且大小適中 */
.share-icon svg {
    width: 32px;
    height: 32px;
    fill: #fff;
    z-index: 2;
}

/* --- 原廠品牌色與背景 --- */
.line-bg { background-color: #06C755; }
.fb-bg { background-color: #1877F2; }
.threads-bg { background-color: #000000; }
.ig-bg { 
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); 
}
.copy-bg { 
    background-color: #F2F2F7; /* iOS 系統灰 */
    border: 1px solid rgba(0,0,0,0.05);
}
.copy-bg svg {
    fill: #3a3a3c;
    width: 26px;
}
/* 針對 Font Awesome 6 Brands 系列的強制設定 */
.fa-brands.fa-line {
    font-family: "Font Awesome 6 Brands" !important; /* 確保沒被系統字體覆蓋 */
    font-weight: 400 !important; /* Brands 必須是 400 */
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   🍱 Feature Bento Grid (便當盒佈局)
   ============================================================ */
.bento-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr; /* 左寬右窄 */
  grid-template-rows: auto auto;
  gap: 12px;
  width: 100%;
}

.bento-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(90, 123, 104, 0.06);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  position: relative;
}

/* Hover 浮動效果 */
.bento-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(90, 123, 104, 0.12);
}

/* 格線佈局設定 */
.bento-card.large {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(240,250,245,0.8));
}

.bento-card.tall {
  grid-column: 2 / 3;
  grid-row: 1 / 3; /* 跨兩行 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,248,240,0.8)); /* 微微的金黃色澤代表禮盒 */
}

.bento-card.medium {
  grid-column: 1 / 2;
  /* 自動排列 */
}

/* 內容排版 */
.bento-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.bento-content.row {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.bento-content.center {
  align-items: center;
  justify-content: center;
}

/* 文字樣式 */
.bento-text h3, .bento-content h3 {
  margin: 0 0 6px 0;
  font-size: 17px;
  font-weight: 800;
  color: #2f4b3c;
  font-family: "Noto Serif TC", serif;
}

.bento-text p, .bento-content p {
  margin: 0;
  font-size: 13.5px;
  color: #6b8c7a;
  line-height: 1.5;
}

/* 特殊 Icon 背景裝飾 */
.bento-icon-bg {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

/* RWD 手機版調整：變成單欄或調整比例 */
@media (max-width: 480px) {
  .bento-grid {
    grid-template-columns: 1fr; /* 手機變單欄 */
    grid-template-rows: auto;
  }
  .bento-card.tall {
    grid-column: auto;
    grid-row: auto;
    flex-direction: row; /* 手機版改橫向比較省空間 */
    text-align: left;
    justify-content: flex-start;
    padding: 16px 20px;
  }
  .bento-content.center {
    flex-direction: row;
    gap: 16px;
    align-items: center;
  }
}

/* ============================================================
   📞 Contact Section (數位名片風格)
   ============================================================ */
.contact-card-glass {
  display: flex;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(90, 123, 104, 0.08);
  margin-top: 12px;
}

/* 左側資訊區 */
.contact-info {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.shop-name {
  font-size: 22px;
  font-weight: 800;
  color: #2f4b3c;
  font-family: "Noto Serif TC", serif;
  margin-bottom: 4px;
}

.shop-desc {
  font-size: 14px;
  color: #6b8c7a;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

/* 行動列表 */
.action-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(160, 180, 170, 0.2);
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.action-item:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(90, 123, 104, 0.1);
  border-color: #8fb79c;
}

/* Icon 樣式 */
.icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.icon-box.phone { background: #e8f5e9; color: #2e7d32; }
.icon-box.map   { background: #e3f2fd; color: #1565c0; }
.icon-box.mail  { background: #fff3e0; color: #ef6c00; }

/* 文字區域 */
.text-box {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0; /* 防止過長文字破版 */
}

.text-box .label {
  font-size: 12px;
  color: #8fa396;
  margin-bottom: 2px;
}

.text-box .value {
  font-size: 15px;
  font-weight: 600;
  color: #2f4b3c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arrow {
  color: #bccdc3;
  font-size: 20px;
  font-weight: bold;
}

/* 右側地圖區 */
.map-visual {
  width: 40%;
  min-height: 200px;
  background: #f0f0f0;
  position: relative;
  border-left: 1px solid rgba(0,0,0,0.05);
}

.map-visual iframe {
  filter: grayscale(20%) contrast(95%); /* 讓地圖顏色比較柔和，配合網站風格 */
}

/* RWD: 手機版變成垂直排列 */
@media (max-width: 768px) {
  .contact-card-glass {
    flex-direction: column-reverse; /* 地圖放上面或下面皆可，這裡設為反轉讓地圖在下 */
  }
  
  .map-visual {
    width: 100%;
    height: 180px; /* 手機版地圖高度 */
    border-left: none;
    border-top: 1px solid rgba(0,0,0,0.05);
  }

  .contact-info {
    padding: 20px;
  }
}

/* ============================================================
   📜 Policy Modal (法律條款彈窗)
   ============================================================ */
.policy-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; justify-content: center; align-items: flex-end; /* 手機版從下方滑出 */
  pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
}

.policy-modal.active { opacity: 1; pointer-events: auto; }

.policy-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
}

.policy-sheet {
  position: relative; width: 100%; max-width: 600px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px 20px 0 0; /* 手機版只有上面圓角 */
  box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; flex-direction: column;
  max-height: 85vh; /* 不會佔滿全螢幕 */
}

.policy-modal.active .policy-sheet { transform: translateY(0); }

/* 電腦版微調：置中顯示 */
@media (min-width: 768px) {
  .policy-modal { align-items: center; }
  .policy-sheet { border-radius: 20px; max-height: 80vh; margin: 20px; }
}

.policy-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex; justify-content: space-between; align-items: center;
}

.policy-header h3 {
  margin: 0; font-size: 18px; color: #2f4b3c; font-weight: 700;
}

.policy-close {
  background: transparent; border: none; font-size: 24px; color: #888;
  cursor: pointer; padding: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background 0.2s;
}
.policy-close:hover { background: rgba(0,0,0,0.05); }

.policy-body {
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  color: #4a4a4a; font-size: 15px; line-height: 1.8;
}

/* 內文樣式 */
.policy-text h4 {
  color: #2f4b3c; margin: 24px 0 8px 0; font-size: 16px;
}
.policy-text h4:first-child { margin-top: 0; }
.policy-text p { margin-bottom: 0; text-align: justify; }
.policy-text strong { color: #b8860b; }

/* ============================================================
   🔍 Order Check Modal Styles
   ============================================================ */
.check-form-group {
  margin-bottom: 24px;
  background: #f9f9f9;
  padding: 16px;
  border-radius: 16px;
}
.check-form-group label {
  display: block; font-size: 13px; color: #666; margin-bottom: 8px;
}
.input-row {
  display: flex; gap: 8px;
}
.input-row input {
  flex: 1; padding: 10px 14px; border: 1px solid #ddd; border-radius: 10px;
  font-size: 16px; outline: none; transition: border 0.2s;
}
.input-row input:focus { border-color: #5a7b68; }

.input-row button {
  padding: 0 20px; background: #5a7b68; color: #fff; border: none;
  border-radius: 10px; font-weight: 600; cursor: pointer;
}
.input-row button:active { transform: scale(0.96); }

/* 訂單列表 */
.order-list {
  min-height: 200px;
  display: flex; flex-direction: column; gap: 12px;
}

/* 空狀態 */
.empty-state {
  text-align: center; color: #999; margin-top: 40px;
}
.empty-state p { font-size: 14px; margin-top: 10px; }

/* 訂單卡片 */
.order-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  border-radius: 12px;
  padding: 16px;
  transition: transform 0.2s;
}

.oc-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dashed #eee;
}
.oc-date { font-size: 13px; color: #888; }
.oc-status {
  font-size: 12px; padding: 4px 8px; border-radius: 4px; font-weight: bold;
}

/* 狀態顏色 */
.status-pending { background: #f0f0f0; color: #666; } /* 待處理 */
.status-process { background: #fff7e6; color: #fa8c16; } /* 處理中 */
.status-shipped { background: #f6ffed; color: #52c41a; } /* 已出貨 */
.status-cancel  { background: #fff1f0; color: #f5222d; } /* 取消 */

.oc-body { font-size: 14px; color: #333; }
.oc-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
.font-mono { font-family: monospace; letter-spacing: 0.5px; color: #555; }
.price { color: #b8860b; font-weight: 700; }

/* 讓查詢按鈕稍微特別一點，區分功能 */
.action-item.highlight {
  background: rgba(255, 255, 255, 0.8); /* 比其他按鈕更白、更亮 */
  border-color: #b8860b; /* 金色邊框 */
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.15);
}

.action-item.highlight .icon-box {
  background: #fff8e1; /* 淡金色背景 */
  color: #b8860b;      /* 金色圖示 */
}

.action-item.highlight:hover {
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(184, 134, 11, 0.25);
}


/* 物流單號連結樣式 */
.track-link {
  color: #1a73e8; /* Google 藍 */
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.track-link:hover {
  text-decoration: underline;
  color: #0d47a1;
}

.carrier-tag {
  color: #555;
  font-weight: normal;
  font-size: 0.9em;
}