/* 會員專區（2026-10-04）：未登入＝會員說明＋LINE 登入卡；已登入＝會員卡、我的資料、我的預約紀錄。
   訊息氣泡沿用 contact.css 的 .bc__msg（與線上預約對話窗同一套）。 */
.mb [hidden]{display:none!important}
.mb .band{display:grid;gap:var(--gap)}
.mb .card{gap:16px}
.mb-title{margin:0;font-size:clamp(22px,1.35vw,30px);line-height:1.35}
.mb-sub{margin:0;color:var(--ink-3);font-size:16px;line-height:1.6}

/* 讀取中：先佔住一張卡的高度，資料回來再換，不讓頁尾先跳上來 */
.mb-loading{display:flex;align-items:center;justify-content:center;gap:12px;min-height:320px;margin:0;color:var(--ink-3);font-size:17px}
.mb-loading::after{content:"";width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:mb-spin .8s linear infinite}
@keyframes mb-spin{to{transform:rotate(360deg)}}

/* 頁內提示（取代瀏覽器彈窗）：成功綠、失敗紅、一般藍 */
.mb-alert{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 16px;border:1px solid #f3c2c7;border-radius:12px;background:#fff5f6;color:#9b2433;font-size:16px;font-weight:700;line-height:1.6}
.mb-alert::before{content:"!";display:grid;place-items:center;flex:0 0 22px;height:22px;margin-top:1px;border-radius:50%;background:#c43847;color:#fff;font-size:14px;font-weight:900}
.mb-alert--info{border-color:#c9def3;background:#f0f7ff;color:var(--brand-d)}
.mb-alert--info::before{content:"i";background:var(--brand)}

/* ---------- 未登入 ---------- */
.mb-guest{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap);align-items:stretch}
.mb-perks{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.mb-perks li{display:flex;align-items:flex-start;gap:16px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,#fff 40%,var(--tint-2))}
.mb-perk__ico{display:grid;place-items:center;flex:0 0 52px;height:52px;border-bottom:4px solid var(--brand-d);border-radius:15px;background:linear-gradient(145deg,var(--brand-2),var(--brand));color:#fff;box-shadow:var(--depth-1),0 10px 18px -12px rgba(2,103,185,.5)}
.mb-perk__ico svg{width:26px;height:26px}
.mb-perks b{display:block;color:var(--ink);font-size:clamp(18px,1vw,21px);line-height:1.45}
.mb-perks li>div>span{display:block;color:var(--ink-2);font-size:clamp(16px,.85vw,18px);line-height:1.65}
.mb-login{align-items:center;justify-content:center;text-align:center}
.mb .mb-login>:last-child{margin-top:0}
.mb-login__badge{display:grid;place-items:center;width:84px;height:84px;border-bottom:5px solid var(--line-edge);border-radius:24px;background:linear-gradient(var(--line-g2),var(--line-g) 55%,var(--line-gd));box-shadow:var(--depth-1),0 16px 28px -14px rgba(6,199,85,.6)}
.mb-login__badge svg{width:52px;height:50px}
.mb-login p{margin:0;max-width:30em}
.mb-login .mb-alert{width:100%;text-align:left;box-sizing:border-box}
.mb-login__btn{width:min(100%,360px)}
.mb-login>.mb-login__btn{align-self:center} /* 蓋過共用 .card>.btn 的靠左 */
.mb-login__btn svg{width:30px;height:28px;flex:0 0 30px}

/* ---------- 已登入：會員卡 ---------- */
.mb-card{flex-direction:row;align-items:center;gap:clamp(16px,1.4vw,28px)}
.mb-avatar{display:grid;place-items:center;flex:0 0 auto;width:clamp(68px,4.4vw,88px);height:clamp(68px,4.4vw,88px);border-radius:50%;background:linear-gradient(145deg,var(--line-g2),var(--line-gd));color:#fff;font-size:30px;font-weight:900;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--line-g),0 14px 24px -14px #0f274788;overflow:hidden}
.mb-avatar img{width:100%;height:100%;object-fit:cover}
.mb-card__info{display:grid;gap:6px;min-width:0;flex:1 1 auto}
.mb-card__name{margin:0;font-size:clamp(22px,1.4vw,32px);line-height:1.3;overflow-wrap:anywhere}
.mb-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0;color:var(--ink-3);font-size:16px}
.mb-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:30px;background:#e7f9ee;color:#067a37;font-size:15px;font-weight:800}
.mb-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-g)}
.mb .mb-card>.mb-logout{flex:0 0 auto;margin-top:0;align-self:center}

/* ---------- 我的資料 ---------- */
.mb-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
/* 2026-10-04 v3：欄位（公司行號｜個人）由 js/profile-fields.js 畫，樣式沿用 contact.css 的 .bc-pf*（窄於 1100 跟預約頁一樣 6 欄格線）。
   寬螢幕 24 欄、三格一列：公司＝類型｜公司名稱｜統編／姓名｜性別｜電話＋分機／手機｜公司地址；個人＝類型｜姓名｜性別／手機｜地址 */
@media(min-width:1100px){
  .mb-fields>.bc-pf{grid-template-columns:repeat(24,minmax(0,1fr));gap:8px 22px}
  .mb-fields>.bc-pf>.bc-pf__field{grid-column:span 8}
  .mb-fields>.bc-pf>.bc-pf__f--company_tel{grid-column:span 5}
  .mb-fields>.bc-pf>.bc-pf__f--company_ext{grid-column:span 3}
  .mb-fields>.bc-pf>:is(.bc-pf__f--company_address,.bc-pf__f--address){grid-column:span 16}
  .mb-fields>.bc-pf>.bc-pf__f--consent{grid-column:1/-1}
}
.mb-fields>.bc-pf{margin-top:0}
.mb-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px}
.mb .mb-profile>.mb-actions{margin-top:0}
/* 儲存結果固定一行高度，出現與消失都不推動按鈕 */
.mb-status{flex:1 1 auto;min-width:0;min-height:1.6em;margin:0;color:var(--ink-3);font-size:16px;font-weight:700;line-height:1.6;text-align:right}
.mb-status.is-ok{color:#067a37}
.mb-status.is-err{color:#b3261e}
.mb-save{min-width:140px}
.mb-save[disabled],.mb-logout[disabled]{opacity:.6;pointer-events:none}

/* ---------- 我的預約紀錄 ---------- */
.mb-count{padding:4px 12px;border-radius:30px;background:var(--tint);color:var(--brand-d);font-size:15px;font-weight:800;white-space:nowrap}
.mb-rooms{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.mb-room{border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,#fff 50%,var(--tint-2));box-shadow:0 10px 22px -20px #0f274766;overflow:hidden}
.mb-room__head{display:flex;align-items:center;gap:16px;padding:16px 18px}
.mb-room__ico{display:grid;place-items:center;flex:0 0 46px;height:46px;border-radius:14px;background:var(--tint);color:var(--brand)}
.mb-room__ico svg{width:24px;height:24px}
.mb-room__info{display:grid;gap:2px;flex:1 1 auto;min-width:0}
.mb-room__info b{color:var(--ink);font-size:clamp(17px,.95vw,20px);line-height:1.45}
.mb-room__meta{color:var(--ink-3);font-size:16px;line-height:1.5}
.mb-room__preview{margin:0;overflow:hidden;color:var(--ink-2);font-size:16px;line-height:1.6;white-space:nowrap;text-overflow:ellipsis}
.mb-room__toggle{flex:0 0 auto;height:48px;padding-inline:18px;font-size:17px}
.mb-room__toggle svg{width:18px;height:18px;transition:transform .2s}
.mb-room__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.mb-room__log{display:flex;flex-direction:column;gap:14px;max-height:min(560px,62vh);margin:0 18px 18px;padding:18px 14px 18px 18px;border:1px solid var(--line);border-radius:14px;background:#f7fafd;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#b9cbdc transparent}
.mb-room__log::-webkit-scrollbar{width:8px}
.mb-room__log .bc__msg{align-items:flex-start}
.mb-room__log .bc__msg--me{align-items:flex-end}
.mb-room__log::-webkit-scrollbar-thumb{border-radius:8px;background:#b9cbdc}
.mb-empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(24px,2.4vw,44px) 16px;border:1px dashed #bcd3ea;border-radius:18px;background:var(--tint-2);text-align:center}
.mb-empty__ico{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:#fff;color:var(--brand);box-shadow:var(--depth-1)}
.mb-empty__ico svg{width:32px;height:32px}
.mb-empty b{color:var(--ink);font-size:clamp(18px,1vw,21px)}
.mb-empty p{margin:0;color:var(--ink-3);font-size:16px}
.mb .mb-bookings>:last-child{margin-top:0}

/* ---------- 各寬度 ---------- */
@media(max-width:1099px){
  .mb-guest{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
  .mb-card{flex-wrap:wrap}
  .mb-card__info{flex-basis:calc(100% - 100px)}
  .mb .mb-card>.mb-logout{width:100%}
  .mb-actions{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .mb-status{text-align:center}
  .mb-save{width:100%}
  .mb-room__head{flex-wrap:wrap;padding:14px}
  .mb-room__ico{display:none}
  .mb-room__toggle{width:100%}
  .mb-room__log{margin:0 14px 14px;padding:14px 10px 14px 14px}
  .mb-room__log .bc__msg{max-width:92%}
  .mb-perks li{padding:14px;gap:12px}
  .mb-perk__ico{flex-basis:44px;height:44px;border-radius:13px}
  .mb-perk__ico svg{width:22px;height:22px}
}
.mb-member{display:grid;gap:var(--gap)}