/*
 * 只放 SPA 自己需要、舊站沒有的樣式。版面本身在 public/assets/www/css/（base.css = v2、style.css = classic，跟舊站同一份），
 * 不要把那邊的規則搬過來改 —— 兩邊會走鐘。這裡的規則兩套版面都會吃到，所以顏色寫死、不用 base.css 的變數。
 */

/* 舊站的登入視窗是 modal.js 切 inline display；這裡由 Vue 控制（base.css / style.css 起手都是 display:none） */
.authModal.is-open {
  display: block;
}

.mt-loading {
  padding: 3rem 0;
  text-align: center;
  color: #bbb;
}

.mt-error {
  padding: 2rem 0;
  text-align: center;
  color: #ff8a8a;
}

/* 表單送出後、頁面內的那一行訊息（舊站是 alert() 或整頁重新載入後的 alertMsg） */
.mt-form-msg {
  margin: 0;
  font-size: 0.9rem;
  color: #ff8a8a;
}

.mt-form-msg.ok {
  color: #79dfae;
}

/* 正中央的提示（src/composables/useToast.js）。樣式照 fh6666 的 .fh-toast */
.mt-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 2000;
  transform: translate(-50%, -50%);
  max-width: 90vw;
  padding: 1.1rem 1.8rem;
  border: 1px solid #d4af37;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.92);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.1rem;
  text-align: center;
}

button[disabled],
a.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 註冊視窗的「手機 + 取得驗證碼」那一列（舊站的 #authModal 沒有手機欄，base.css / style.css 沒這條）。
   顏色先吃 base.css 的變數，classic 版面沒有那組變數就用後面的值 */
.authModal .sms-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.authModal .sms-row .sms-btn {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--gold, #c9a24b);
  border-radius: var(--r1, 6px);
  background: transparent;
  color: var(--gold-hi, #e8c77a);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
}

/*
 * 會員看的優惠頁(v2,src/screens/Promotions.jsx 的 loggedIn 分支,2026-11-05)。
 * 這一段只有 v2 版面會畫出 .promo-v2,所以可以用 base.css 的變數(上面那條「顏色寫死」是給兩套版面都吃得到的規則)。
 * 卡片外觀沿用 base.css 的 .pcard;這裡只補 <details> 摺疊與內文。還原 = 刪掉這段。
 */
.promo-v2 {
  padding-top: var(--s5);
}

/* 手機一欄;電腦兩欄(卡片 3:1 橫幅拉滿 1180 太大),各卡自己的高度 —— 點開一張不會把旁邊那張撐高 */
.promo-v2 .promo-list {
  display: grid;
  gap: var(--s4);
}

@media (min-width: 992px) {
  .promo-v2 .promo-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.promo-v2 .promo-lead {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-body);
}

.promo-v2 details.pcard > summary {
  display: block;
  list-style: none;
  cursor: pointer;
}

.promo-v2 details.pcard > summary::-webkit-details-marker {
  display: none;
}

.promo-v2 details.pcard > summary > img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: contain;
  background: var(--ink-2);
}

.promo-v2 details.pcard .crow {
  min-height: 44px;
}

.promo-v2 details.pcard .go .bi {
  display: inline-block;
  transition: transform 0.2s;
}

.promo-v2 details.pcard[open] .go .bi {
  transform: rotate(180deg);
}

.promo-v2 .promo-body {
  padding: var(--s4);
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.promo-v2 .promo-body img {
  max-width: 100%;
  height: auto;
}

.promo-v2 .promo-applied {
  padding: 0 var(--s4) var(--s4);
  text-align: right;
  color: var(--gold-hi);
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  .promo-v2 details.pcard .go .bi {
    transition: none;
  }
}

/* ==== v2 頁首漢堡選單(components/v2/HeaderDrawer.jsx,2026-11-05;只有 AppHeaderV2 的 MENU_BRANDS 與 da2236 門面會掛,還原 = 刪掉這段到「漢堡選單 結束」) ==== */
/* 顏色走 v2 base.css 的 token;da2236 門面頁會關掉 base.css,所以每個 token 都帶預設值(da2236 自己的色票),按鈕也不靠 .hbtn */
.hdr-menu-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; margin: 0;
  border: 1px solid var(--line, rgba(0, 212, 255, .2)); border-radius: var(--r1, 10px);
  background: transparent; color: var(--text, #fff); cursor: pointer;
}
.hdr-menu-btn svg { width: 22px; height: 22px; }
.hdr-menu-btn:hover, .hdr-menu-btn:focus-visible { border-color: var(--gold, #cfa452); color: var(--gold-hi, #e9b950); }
@media (min-width: 1024px) { .hdr-menu-btn { display: none; } }
.hdr-drawer { position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: flex-end; font-family: var(--font, inherit); }
.hdr-drawer-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.hdr-drawer-panel {
  position: relative; display: flex; flex-direction: column; gap: 4px; box-sizing: border-box;
  width: min(300px, 84vw); height: 100%; overflow-y: auto;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--ink-1, #0f0f1e), var(--ink-0, #0a0a0f));
  border-left: 1px solid var(--line, rgba(0, 212, 255, .2));
}
.hdr-drawer-close {
  align-self: flex-end; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 8px; padding: 0;
  border: 1px solid var(--line, rgba(0, 212, 255, .2)); border-radius: var(--r1, 10px);
  background: transparent; color: var(--text, #fff); cursor: pointer;
}
.hdr-drawer-close svg { width: 22px; height: 22px; }
.hdr-drawer .item {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: var(--r1, 10px); color: var(--text, #fff); font-size: 16px; font-weight: 700; text-decoration: none;
}
.hdr-drawer .item:hover, .hdr-drawer .item.on { background: var(--gold-soft, rgba(207, 164, 82, .16)); color: var(--gold-hi, #e9b950); }
.hdr-drawer hr { border: 0; border-top: 1px solid var(--line, rgba(0, 212, 255, .2)); margin: 8px 0; }
.hdr-drawer .acts { display: grid; gap: 8px; margin-top: 16px; }
.hdr-drawer .acts a {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; box-sizing: border-box;
  border: 1px solid var(--gold, #cfa452); border-radius: var(--r1, 10px); font-size: 15px; font-weight: 800; text-decoration: none;
}
.hdr-drawer .acts a.hbtn-ghost, .hdr-drawer .acts a.hbtn-ghost:hover { color: var(--gold-hi, #e9b950); background: transparent; }
.hdr-drawer .acts a.hbtn-solid, .hdr-drawer .acts a.hbtn-solid:hover { color: var(--gold-ink, #1a1200); background: linear-gradient(180deg, var(--gold-hi, #e9b950), var(--gold, #cfa452)); }
/* ==== 漢堡選單 結束 ==== */