/* 藍戴咖啡坊 會員頁樣式(T0.6.3)。行動優先:主要載體是 LINE 內建瀏覽器,單欄、觸控目標至少 44px、輸入框字級 16px(iOS 才不會自動放大)。
   色票沿用客戶看過的選單示意圖(.agents/docs/landai/藍戴咖啡LINE選單示意圖.html)。後台另載入 /admin/admin.css 疊在這份之上。 */
:root {
  --cream: #F3ECE0;
  --card: #FBF6EC;
  --line: #DDD0B8;
  --espresso: #3B2417;
  --latte: #8A6A4E;
  --caramel: #9A5B1E;
  --ink: #2A211A;
  --ink-soft: #6B5C4E;
  --ok: #1F6F47;
  --ok-bg: #EAF5EE;
  --err: #A8261C;
  --err-bg: #FCEFEE;
  --err-line: #E3B5B0;
}

*, *::before, *::after { box-sizing: border-box; }
/* 有 display 規則的元素會蓋掉瀏覽器內建的 [hidden]{display:none};頁面大量用 hidden 屬性切換區塊,這一條不能少 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 640px; margin: 0 auto; padding: 16px 16px 64px; }

h1 { font-size: 1.4rem; line-height: 1.4; margin: 8px 0 12px; color: var(--espresso); }
h2 { font-size: 1.1rem; line-height: 1.5; margin: 0 0 8px; color: var(--espresso); }
h3 { font-size: 1rem; margin: 12px 0 4px; color: var(--ink-soft); }
p { margin: 8px 0; }
a { color: var(--caramel); }
strong { font-weight: 700; }
.lead { color: var(--ink-soft); margin: 0 0 12px; }
.muted { color: var(--ink-soft); font-size: 0.9rem; }

/* 區塊 */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 0 0 12px; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }

/* 按鈕(button 與長得像按鈕的連結) */
button, .button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--latte); border-radius: 10px;
  background: #fff; color: var(--espresso);
  font: inherit; font-weight: 600; line-height: 1.3; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
button.primary, .button.primary { background: var(--espresso); border-color: var(--espresso); color: #fff; }
button:disabled, .button.disabled { opacity: 0.5; cursor: not-allowed; }
.button.disabled { pointer-events: none; }
button:focus-visible, .button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--caramel); outline-offset: 2px;
}
/* 表單的主要動作撐滿寬度:單手拇指好按 */
form > button.primary, .card > button.primary { width: 100%; margin-top: 8px; }

/* 表單 */
label { display: block; margin: 12px 0; font-weight: 600; }
/* 用「排除」而不是逐一列舉類型:列舉的寫法每多一種類型(datetime-local、沒寫 type 的 input)就會漏掉,
   漏掉的欄位會退回瀏覽器內建的小尺寸(2026-11-10 本機冒煙實測:後台的檔期欄位只有 23px 高) */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="hidden"]), select, textarea {
  display: block; width: 100%; max-width: 100%; min-height: 44px; margin-top: 4px; padding: 8px 12px;
  border: 1px solid var(--latte); border-radius: 8px; background: #fff; color: var(--ink);
  font: inherit; font-size: 16px; font-weight: 400;
}
input[type="date"], input[type="datetime-local"], input[type="number"] { -webkit-appearance: none; appearance: none; }
textarea { min-height: 96px; line-height: 1.6; resize: vertical; }
small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 0.85rem; font-weight: 400; }
fieldset { border: 0; padding: 0; margin: 12px 0; min-width: 0; }
legend { padding: 0; font-weight: 600; }
.req { color: var(--err); margin-left: 2px; }
label.inline { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; min-height: 44px; padding: 8px 0; font-weight: 400; }
label.inline input { flex: none; width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--espresso); }
label.sold-out { color: var(--ink-soft); }

/* 訊息 */
.message { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.message.error { color: var(--err); background: var(--err-bg); border-color: var(--err-line); }
.message.ok { color: var(--ok); background: var(--ok-bg); border-color: #B9DBC6; }
.session-banner {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 10px 16px; color: var(--err); background: var(--err-bg); border-bottom: 1px solid var(--err-line);
}

/* 清單 */
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 10px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
ul.plain li:first-child { border-top: 0; }
ul.plain li a { display: block; }
.timeline { margin: 0; padding-left: 1.4em; }
.timeline li { padding: 4px 0; }
details { margin: 8px 0; }
/* 不改 display:保留瀏覽器的展開箭頭(改成 flex 箭頭會消失,看不出可以點開) */
summary { padding: 10px 0; cursor: pointer; color: var(--caramel); font-weight: 600; }

/* 金額 */
.amount { font-size: 1.2rem; color: var(--espresso); }
.amount strong, .balance .amount { font-size: 1.7rem; font-weight: 800; }
.balance { text-align: center; }
.price { font-weight: 700; color: var(--espresso); }
.summary p { margin: 4px 0; }

/* 條款內文:純文字照原樣換行 */
.legal-body {
  max-height: 240px; overflow-y: auto; margin: 8px 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font: inherit; font-size: 0.9rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere;
}
#doc .legal-body { max-height: none; }
.issuer { margin-top: 12px; font-size: 0.85rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.tabs button[aria-current="page"] { background: var(--espresso); border-color: var(--espresso); color: #fff; }

/* 選購 */
.product-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0 0 12px; padding: 0; }
.product-card a { display: block; height: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: inherit; text-decoration: none; }
.product-card img, .product-card .no-photo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: #EFE6D6; }
/* 沒有照片的商品放一塊同尺寸的底色,卡片才會對齊 */
.product-card .no-photo { display: flex; align-items: center; justify-content: center; color: var(--latte); font-size: 0.85rem; }
.product-card h2 { margin: 8px 0 2px; font-size: 1rem; }
.product-card p { margin: 2px 0; }
.product-card.sold-out { opacity: 0.6; }
.gallery { display: flex; gap: 8px; margin: 0 0 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.gallery:empty { display: none; }
.gallery img { flex: 0 0 100%; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; scroll-snap-align: start; background: #EFE6D6; }
.description { white-space: pre-wrap; overflow-wrap: anywhere; }

/* 購物車 */
.cart-lines { list-style: none; margin: 0 0 12px; padding: 0; }
.cart-line { margin: 0 0 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.cart-line.unavailable { border-color: var(--err-line); background: var(--err-bg); }
.cart-line p { margin: 2px 0; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.row-actions input[type="number"] { width: 96px; margin-top: 0; }

/* 首頁入口 */
.home-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.home-links .button { min-height: 64px; }

@media (min-width: 560px) {
  .product-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}