/* 變數：側欄寬度與與內容間隙 */
:root{
  --wmw-sidebar: 360px;
  --wmw-gap: 20px;
}

/* ===== 基本版面 ===== */
.weekly-menu{max-width:1100px;margin:auto}
.weekly-menu .day{padding:16px 0;border-bottom:1px solid #eee}
.weekly-menu .meal{margin:6px 0 16px}
.weekly-menu .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;padding:0;list-style:none}
.weekly-menu .item{padding:0;list-style:none}

/* details 卡片 */
.weekly-menu .dish{border:1px solid #eee;border-radius:12px;overflow:hidden;background:#fff}
.weekly-menu .dish summary{cursor:pointer; list-style:none; padding:12px 14px; position:relative; outline:none; display:flex; align-items:center;}
.weekly-menu .dish summary::-webkit-details-marker{display:none}
.weekly-menu .dish summary::after{content:""; width:10px; height:10px; border-right:2px solid #999; border-bottom:2px solid #999; transform:rotate(-45deg); position:absolute; right:14px; top:50%; margin-top:-6px; transition:.2s;}
.weekly-menu .dish[open] summary::after{ transform:rotate(45deg); margin-top:-3px; }
.weekly-menu .name{font-weight:800;font-size:1.25rem;line-height:1.35}
.weekly-menu .desc, .weekly-menu .alrg{padding:0 14px 10px 14px}
.weekly-menu .alrg{font-size:.9em;opacity:.8}

/* 餐別 CTA（舊結構仍保留，無妨） */
.weekly-menu .order-cta{margin-top:10px}
.weekly-menu .order-cta .order-open-meal{padding:8px 12px;border:1px solid #0a7;border-radius:10px;background:#fff;color:#0a7;cursor:pointer}
.weekly-menu .order-cta .order-open-meal:hover{background:#0a7;color:#fff}

/* 備註 */
.menu-note{background:#fff7e6;border:1px solid #ffe1a8;padding:10px;border-radius:8px;margin-bottom:10px}

@media (min-width:768px){ .weekly-menu .name{font-size:1.35rem} }

/* ===== Modal ===== */
.wmw-modal[hidden]{display:none}
.wmw-modal{position:fixed;inset:0;z-index:999999}
.wmw-modal__mask{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.wmw-modal__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:14px;min-width:320px;max-width:520px;width:90%;box-shadow:0 10px 30px rgba(0,0,0,.15);display:flex;flex-direction:column}
.wmw-modal__head,.wmw-modal__foot{padding:12px 16px;border-bottom:1px solid #eee}
.wmw-modal__foot{border-top:1px solid #eee;border-bottom:none;display:flex;gap:10px;justify-content:flex-end}
.wmw-modal__title{font-weight:700}
.wmw-modal__body{padding:12px 16px;max-height:60vh;overflow:auto}
.wmw-field{margin:8px 0}
.wmw-field label{display:block;font-size:.9rem;color:#666;margin-bottom:4px}
.wmw-radio label{display:inline-flex;align-items:center;gap:6px;margin-right:12px}
.wmw-addons .addon{display:flex;justify-content:space-between;align-items:center;border:1px solid #eee;border-radius:10px;padding:6px 10px;margin:6px 0}
.wmw-addons .qty{display:flex;align-items:center;gap:6px}
.wmw-addons .qty input{width:60px;text-align:center}
.wmw-addons .qty button{width:28px;height:28px;border-radius:6px;border:1px solid #ccc;background:#fff;cursor:pointer}
.wmw-summary{margin-top:8px;font-weight:700}
.wmw-btn{padding:8px 12px;border-radius:8px;border:1px solid #ccc;background:#fff;cursor:pointer}
.wmw-primary{border-color:#0a7;color:#0a7}
.wmw-primary:hover{background:#0a7;color:#fff}
.wmw-close{border:none;background:#fff;font-size:20px;cursor:pointer}

/* ===== Drawer / 本週清單 ===== */
.wmw-drawer[hidden]{display:none}
.wmw-drawer{
  position:fixed;right:0;top:0;bottom:0;
  width:var(--wmw-sidebar);
  background:#fff;border-left:1px solid #eee;z-index:999998;
  display:flex;flex-direction:column;box-shadow:-8px 0 20px rgba(0,0,0,.08)
}
.wmw-drawer__head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #eee;font-weight:700}
.wmw-drawer__body{padding:10px 14px;overflow:auto;flex:1}
.wmw-drawer__foot{padding:12px 14px;border-top:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
.wmw-cart-day{margin:8px 0 4px;font-weight:700}
.wmw-cart-item{border:1px solid #eee;border-radius:10px;padding:8px;margin:6px 0}
.wmw-cart-item .meta{font-weight:600}
.wmw-cart-item .muted{opacity:.8;font-size:.92em}
.wmw-cart-item .line{display:flex;justify-content:space-between;margin-top:4px}
.total{font-weight:800}

/* 浮動按鈕（小螢幕用） */
.wmw-fab{position:fixed;right:16px;bottom:16px;padding:10px 14px;border-radius:999px;border:1px solid #333;background:#111;color:#fff;cursor:pointer;z-index:999998}

/* 列印：只列印清單 */
@media print{
  body *:not(#wmwCartDrawer):not(#wmwCartDrawer * ){visibility:hidden !important}
  #wmwCartDrawer, #wmwCartDrawer *{visibility:visible !important}
  #wmwCartDrawer{position:static;width:auto;height:auto;border:none;box-shadow:none}
}

/* ===== 桌機版：左側常駐清單（不與內容重疊） ===== */
@media (min-width: 1024px){
  .wmw-drawer{
    left:0; right:auto;
    border-right:1px solid #eee; border-left:none;
  }
  /* 直接推開整個頁面，避免與任何主題元素重疊 */
  body.wmw-leftmode{
    padding-left: calc(var(--wmw-sidebar) + var(--wmw-gap));
  }
  #wmwCartFab{ display:none; }
  #wmwDrawerClose{ display:none; }
}

/* 手機/平板維持原本右側抽屜 + 浮動按鈕 */
@media (max-width: 1023px){
  .wmw-drawer{ right:0; left:auto; border-left:1px solid #eee; border-right:none; }
  body.wmw-leftmode{ padding-left:0; } /* 保險，切回小螢幕時移除推開 */
}

/* ===== WordPress 管理工具列（登入時）避開重疊 ===== */
body.admin-bar .wmw-drawer{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar .wmw-drawer{ top:46px; }
}

/* 禁用的「加入本週清單」樣式（逾時） */
.order-open-meal[disabled],
.order-open-meal.is-closed {
  opacity:.5;
  cursor:not-allowed;
  border-color:#ddd;
  color:#aaa;
  background:#f8f8f8;
}

/* === Meal-as-Card 版面 === */
.weekly-menu .wmw-header { margin: 24px 0 12px; }
.weekly-menu .wmw-note {
  background: #fff7e6; border: 1px solid #ffe8bf; border-radius: 10px;
  padding: 10px 12px; margin-top: 8px; font-size: 14px;
}
.weekly-menu .wmw-daytitle { margin: 28px 0 12px; font-weight: 600; font-size: 18px; }

.weekly-menu .wmw-mealgrid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .weekly-menu .wmw-mealgrid { grid-template-columns: 1fr 1fr; } }

/* 卡片本體：加上 flex 讓 CTA 能貼底 */
.weekly-menu .wmw-mealcard{
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  padding:16px; box-shadow:0 1px 3px rgba(0,0,0,.06);
  display:flex; flex-direction:column; min-height:220px;
}

/* 標題置中置上（基礎樣式，實際底色在下方覆寫） */
.weekly-menu .wmw-mealcard__head{ text-align:center; margin-bottom:10px; }
.weekly-menu .wmw-mealcard__title{ font-weight:700; font-size:16px; margin:0; }

/* 菜色清單：撐滿剩餘高度 */
.weekly-menu .wmw-mealcard__items{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 14px;
  margin-top:6px; flex:1 1 auto;
}
@media (max-width:640px){ .weekly-menu .wmw-mealcard__items{ grid-template-columns:1fr; } }

/* CTA 置底置中 */
.weekly-menu .wmw-mealcard__cta{
  margin-top:auto; padding-top:12px; display:flex; justify-content:center;
  border-top:1px dashed #e5e7eb;
}

/* 菜色卡片 */
.weekly-menu .wmw-dish{ border:1px dashed #e5e7eb; border-radius:12px; padding:10px 12px; }
.weekly-menu .wmw-dish__row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.weekly-menu .wmw-dish__name{ font-weight:500; }
.weekly-menu .wmw-dish__price{ font-size:13px; opacity:.75; }
.weekly-menu .wmw-dish__meta{ margin-top:6px; font-size:13px; opacity:.8; }
.weekly-menu .wmw-dish__alrg{ margin-top:4px; font-size:12px; opacity:.75; }
.weekly-menu .wmw-dish--empty{ text-align:center; color:#9ca3af; }

/* === 餐別標題：滿版漸層底色標籤（C：Slate & Copper）=== */
:root{
  --wmw-meal-head-radius: 12px;

  /* 午餐：板岩藍漸層 + 主色 */
  --wmw-lunch-g1:#A7B8D6;
  --wmw-lunch-g2:#516A97;
  --wmw-lunch-accent:#516A97;
  --wmw-lunch-accent-weak:rgba(81,106,151,.10);
  --wmw-lunch-dash:rgba(81,106,151,.35);

  /* 晚餐：銅橘漸層 + 主色 */
  --wmw-dinner-g1:#E8BC91;
  --wmw-dinner-g2:#B86E3E;
  --wmw-dinner-accent:#B86E3E;
  --wmw-dinner-accent-weak:rgba(184,110,62,.10);
  --wmw-dinner-dash:rgba(184,110,62,.35);
}

/* 移除舊的下劃線偽元素（若曾存在） */
.weekly-menu .wmw-mealcard__title::after{ content:none !important; }

/* 標題列：置中、內距、圓角並套滿版漸層底色 */
.weekly-menu .wmw-mealcard__head{
  text-align:center; margin-bottom:12px; padding:10px 12px;
  border-radius:var(--wmw-meal-head-radius); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
/* 午餐＝板岩藍 */
.weekly-menu .meal[data-meal="lunch"] .wmw-mealcard__head{
  background:linear-gradient(90deg, var(--wmw-lunch-g1), var(--wmw-lunch-g2));
}
/* 晚餐＝銅橘 */
.weekly-menu .meal[data-meal="dinner"] .wmw-mealcard__head{
  background:linear-gradient(90deg, var(--wmw-dinner-g1), var(--wmw-dinner-g2));
}
.weekly-menu .wmw-mealcard__title{ color:#fff; font-weight:700; font-size:16px; margin:0; }

/* —— 同系色統一：按鈕、虛線邊框、hover —— */
/* 按鈕（午餐） */
.weekly-menu .meal[data-meal="lunch"] .order-open-meal{
  border:1px solid var(--wmw-lunch-accent);
  background:var(--wmw-lunch-accent-weak);
  color:var(--wmw-lunch-accent);
}
.weekly-menu .meal[data-meal="lunch"] .order-open-meal:hover{
  background:var(--wmw-lunch-accent);
  color:#fff;
}
/* 按鈕（晚餐） */
.weekly-menu .meal[data-meal="dinner"] .order-open-meal{
  border:1px solid var(--wmw-dinner-accent);
  background:var(--wmw-dinner-accent-weak);
  color:var(--wmw-dinner-accent);
}
.weekly-menu .meal[data-meal="dinner"] .order-open-meal:hover{
  background:var(--wmw-dinner-accent);
  color:#fff;
}
/* 虛線邊框（菜色卡片） */
.weekly-menu .meal[data-meal="lunch"] .wmw-dish{ border-color:var(--wmw-lunch-dash); }
.weekly-menu .meal[data-meal="dinner"] .wmw-dish{ border-color:var(--wmw-dinner-dash); }
/* CTA 區塊上緣虛線也統一淡色 */
.weekly-menu .meal[data-meal="lunch"] .wmw-mealcard__cta{ border-top-color:var(--wmw-lunch-dash); }
.weekly-menu .meal[data-meal="dinner"] .wmw-mealcard__cta{ border-top-color:var(--wmw-dinner-dash); }

/* 已關閉/逾時的按鈕仍維持中性禁用色，不與主色混淆 */
.weekly-menu .order-open-meal.is-closed{
  opacity:.6; background:#f2f2f2; border-color:#ddd; color:#aaa;
}

/* === 週幾 + 日期膠囊（修正括號吃字／更易讀） === */
.weekly-menu .wmw-daytitle{
  display:flex; align-items:center; gap:10px;
  margin: 28px 0 12px; font-weight:600; font-size:18px;
}
.weekly-menu .wmw-daytitle .wmw-daydate{
  font-size:13px; line-height:1; font-weight:500;
  color:#4b5563; background:#f7f7f8; border:1px solid #e5e7eb;
  padding:4px 10px; border-radius:999px;
}
/* 若你想保留視覺上的括號，可加上： */
.weekly-menu .wmw-daytitle .wmw-daydate::before{ content:"（"; margin-right:2px; color:#9ca3af; }
.weekly-menu .wmw-daytitle .wmw-daydate::after { content:"）"; margin-left:2px;  color:#9ca3af; }

/* === Hover 動效：光亮 + 放大 + 跳動（含同系色光暈）=== */
.weekly-menu .wmw-mealcard{
  overflow: hidden;                 /* 讓亮片不溢出圓角 */
  transform-origin: center;
  transition: box-shadow .35s ease;
  will-change: transform, box-shadow;
  position: relative;
}

/* 放大彈跳：先 pop 再微幅上下浮動 */
@keyframes wmw-pop {
  0%   { transform: translateY(0) scale(1); }
  55%  { transform: translateY(-3px) scale(1.025); }
  100% { transform: translateY(-1px) scale(1.015); }
}
@keyframes wmw-float {
  0%   { transform: translateY(-1px) scale(1.015); }
  100% { transform: translateY(-3px) scale(1.018); }
}

/* 斜向光亮掃過 */
@keyframes wmw-shine {
  0%   { transform: rotate(25deg) translateX(-120%); }
  100% { transform: rotate(25deg) translateX(220%); }
}
.weekly-menu .wmw-mealcard::after{
  content:"";
  position:absolute; top:-50%; left:-30%;
  width:40%; height:200%;
  background: linear-gradient(120deg,
              rgba(255,255,255,0) 0%,
              rgba(255,255,255,.45) 50%,
              rgba(255,255,255,0) 100%);
  opacity:0;
  transform: rotate(25deg) translateX(-120%);
  pointer-events:none;
  mix-blend-mode: screen;   /* 光亮更自然 */
}

/* 觸發：彈跳＋持續微浮動＋光亮重覆掃過 */
.weekly-menu .wmw-mealcard:hover{
  animation: wmw-pop 450ms cubic-bezier(.2,.8,.2,1) both,
             wmw-float 2s ease-in-out 450ms infinite alternate;
  z-index: 2;
}
.weekly-menu .wmw-mealcard:hover::after{
  opacity:.65;
  animation: wmw-shine 1.6s linear infinite;
}

/* 同系色光暈（午餐＝板岩藍、晚餐＝銅橘） */
.weekly-menu .meal[data-meal="lunch"] .wmw-mealcard:hover{
  box-shadow: 0 12px 28px rgba(81,106,151,.26), 0 6px 16px rgba(0,0,0,.08);
}
.weekly-menu .meal[data-meal="dinner"] .wmw-mealcard:hover{
  box-shadow: 0 12px 28px rgba(184,110,62,.26), 0 6px 16px rgba(0,0,0,.08);
}

/* 無障礙：若使用者偏好減少動態，停用動畫但保留輕微陰影 */
@media (prefers-reduced-motion: reduce){
  .weekly-menu .wmw-mealcard{ transition: none; }
  .weekly-menu .wmw-mealcard:hover{
    animation: none; transform: none;
    box-shadow: 0 8px 20px rgba(0,0,0,.10);
  }
  .weekly-menu .wmw-mealcard::after{ display:none; }
}

/* === Focus 模式：hover 卡片時，頁面其他區域變暗＋卡片底部發光 === */

/* 1) 全頁淡暗背板（當任一卡片 hover 時才出現） */
body::before{
  content:"";
  position: fixed; inset: 0;
  background: rgba(17,24,39,.30);         /* slate-900 with 30% */
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;                    /* 不阻擋點擊 */
  z-index: 1000;                           /* 在主要內容之上、抽屜之下 */
}
/* 使用 :has() 啟用背板；若瀏覽器不支援，僅少了變暗效果，其他不受影響 */
body:has(.weekly-menu .wmw-mealcard:hover)::before{ opacity: 1; }

/* 2) 讓被 hover 的卡片浮在背板上層（並保留既有彈跳動畫） */
.weekly-menu .wmw-mealcard:hover{
  position: relative;
  z-index: 1001; /* 比背板高一層 */
}

/* 3) 同系色「底部發光」：利用 drop-shadow 做暖光暈，午＝板岩藍、晚＝銅橘 */
.weekly-menu .meal[data-meal="lunch"] .wmw-mealcard:hover{
  /* 原本的陰影保留在前面給的樣式中，這裡額外加色光暈 */
  filter:
    drop-shadow(0 22px 26px rgba(81,106,151,.22))
    drop-shadow(0 10px 12px rgba(81,106,151,.12));
}
.weekly-menu .meal[data-meal="dinner"] .wmw-mealcard:hover{
  filter:
    drop-shadow(0 22px 26px rgba(184,110,62,.22))
    drop-shadow(0 10px 12px rgba(184,110,62,.12));
}

/* 4) 無障礙：偏好減少動態時仍可聚焦但不跳動 */
@media (prefers-reduced-motion: reduce){
  body:has(.weekly-menu .wmw-mealcard:hover)::before{ opacity: .9; } /* 更明顯聚焦 */
  .weekly-menu .wmw-mealcard:hover{
    animation: none !important; transform: none !important;
    filter: drop-shadow(0 18px 22px rgba(0,0,0,.14));
  }
}