/* =========================
   member.css (NEW THEME)
   - 目標：跟原本藍色卡片風格「完全不同」
   - 不改 HTML class，不動 JS
   ========================= */

/* ---- Theme tokens ---- */
:root{
  --m-bg: #fff7ed;          /* 米白橘底 */
  --m-bg2:#fffbf5;          /* 更淡的底 */
  --m-card:#ffffff;
  --m-text:#1f2937;
  --m-muted: rgba(31,41,55,.62);

  --m-line: rgba(31,41,55,.10);
  --m-line2: rgba(31,41,55,.06);

  --m-accent:#f97316;       /* 柿子橘 */
  --m-accent2:#fb7185;      /* 淡粉橘 */
  --m-accent-deep:#c2410c;  /* 深橘 */
  --m-ok:#16a34a;
  --m-err:#dc2626;

  --m-radius: 16px;
  --m-radius2: 22px;
}

/* Page shell */
.member-shell{
  padding-top: 24px;             /* 避免被 fixed navbar 擋住 */
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 12% 10%, rgba(249,115,22,.16), transparent 55%),
    radial-gradient(900px 520px at 92% 20%, rgba(251,113,133,.12), transparent 55%),
    linear-gradient(180deg, var(--m-bg), var(--m-bg2));
  color: var(--m-text);
}

/* 讓 member icon 在 member 頁看起來像 active（不一定有用到，保留） */
.icon-member.is-here{
  background: rgba(249,115,22,.14);
  color: var(--m-accent-deep);
}

/* =========================
   AUTH
   ========================= */
.member-auth{
  max-width: 980px;
  margin: 0 auto;
  padding: 54px 22px 96px;
}

.member-card{
  background: var(--m-card);
  border-radius: var(--m-radius2);
  overflow: hidden;
  border: 1px solid var(--m-line);
  box-shadow:
    0 18px 44px rgba(15, 23, 42, .10),
    0 1px 0 rgba(255,255,255,.9) inset;
  position: relative;
}

/* 頂部做一條「橘粉漸層帶」讓整體更不像原本 */
.member-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height: 10px;
  background: linear-gradient(90deg, var(--m-accent), var(--m-accent2));
}

.member-card-head{
  padding: 26px 26px 18px;
  border-bottom: 1px solid var(--m-line2);
}

.member-title{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .6px;
}

.member-sub{
  margin-top: 10px;
  font-size: 13px;
  color: var(--m-muted);
  letter-spacing: .2px;
}

/* Tabs：改成「膠囊」+ 內陰影，跟你原本方框兩格很不一樣 */
.member-tabs{
  padding: 14px 18px 0;
  display:flex;
  gap: 10px;
}

.tab-btn{
  flex: 1;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--m-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.9));
  cursor: pointer;
  font-size: 14px;
  letter-spacing: .4px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.tab-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(249,115,22,.35);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
}

.tab-btn.is-active{
  border-color: rgba(249,115,22,.55);
  box-shadow:
    0 10px 24px rgba(249,115,22,.18),
    0 1px 0 rgba(255,255,255,.8) inset;
  background:
    linear-gradient(90deg, rgba(249,115,22,.16), rgba(251,113,133,.10));
  color: var(--m-accent-deep);
  font-weight: 900;
}

.member-panels{
  padding: 18px 26px 26px;
}

.panel{ display:none; }
.panel.is-active{ display:block; }

/* Form */
.field{ margin-top: 14px; }

.label{
  display:block;
  font-size: 13px;
  color: rgba(31,41,55,.72);
  margin-bottom: 8px;
}

.input{
  width:100%;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--m-line);
  padding: 0 14px;
  font-size: 14px;
  outline: none;
  background: rgba(255,255,255,.96);
  transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}

.input:focus{
  border-color: rgba(249,115,22,.60);
  box-shadow: 0 0 0 4px rgba(249,115,22,.14);
}

.check{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
  color: rgba(31,41,55,.68);
}

/* Primary button：改成橘色實心＋高光（跟原本藍色描邊完全不同） */
.primary-btn{
  margin-top: 18px;
  width:100%;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(194,65,12,.20);
  background: linear-gradient(180deg, #ff8a3d, var(--m-accent));
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .6px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  box-shadow:
    0 14px 28px rgba(249,115,22,.28),
    0 1px 0 rgba(255,255,255,.35) inset;
}

.primary-btn:hover{
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow:
    0 18px 34px rgba(249,115,22,.34),
    0 1px 0 rgba(255,255,255,.38) inset;
}

.primary-btn:active{
  transform: translateY(0px);
}

.hint-row{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap: 10px;
}

.text-link{
  font-size: 13px;
  color: var(--m-accent-deep);
  text-decoration: none;
  font-weight: 800;
}
.text-link:hover{ opacity:.75; }
.hint{ font-size: 12px; color: rgba(31,41,55,.50); }

/* Benefits：改成「淡橘底 + 虛線框」更像品牌感 */
.benefits{
  margin-top: 18px;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(249,115,22,.08);
  border: 1px dashed rgba(249,115,22,.35);
}
.benefits-title{
  font-size: 13px;
  font-weight: 900;
  color: rgba(31,41,55,.82);
  margin-bottom: 8px;
}
.benefits ul{
  margin-left: 18px;
  color: rgba(31,41,55,.68);
  font-size: 13px;
  line-height: 1.9;
}

/* =========================
   DASHBOARD
   ========================= */
.member-dash{
  max-width: 1180px;
  margin: 0 auto;
  padding: 54px 22px 96px;
}

/* 讓頭區塊變成「白卡 + 柿子淡底」 */
.dash-head{
  display:flex;
  align-items:center;
  gap: 18px;
  padding: 18px 18px;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius2);
  background:
    linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.96));
  box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
}

.avatar{
  width: 54px;
  height: 54px;
  border-radius: 18px; /* 由圓形改成圓角方塊：差異更大 */
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(249,115,22,.14);
  color: var(--m-accent-deep);
  border: 1px solid rgba(249,115,22,.28);
  flex: 0 0 auto;
}
.avatar i{ font-size: 20px; }

.dash-welcome{ flex: 1; }

.welcome-title{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .2px;
}

.welcome-sub{
  margin-top: 6px;
  font-size: 13px;
  color: var(--m-muted);
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(249,115,22,.12);
  border: 1px solid rgba(249,115,22,.22);
  color: var(--m-accent-deep);
  font-size: 12px;
  font-weight: 800;
}

/* Actions：改成更「扁平」膠囊按鈕 */
.dash-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ghost-btn{
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--m-line);
  background: rgba(255,255,255,.95);
  cursor: pointer;
  font-size: 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
  word-break: keep-all;
}

.ghost-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(249,115,22,.35);
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
}

/* admin button highlight */
.ghost-btn.admin-btn{
  border-color: rgba(249,115,22,.45);
  background: rgba(249,115,22,.10);
  color: var(--m-accent-deep);
  font-weight: 900;
}
.ghost-btn.admin-btn:hover{
  background: linear-gradient(180deg, #ff8a3d, var(--m-accent));
  color: #fff;
  border-color: rgba(194,65,12,.25);
}

/* Grid */
.dash-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
}

.box{
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius2);
  padding: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 30px rgba(15,23,42,.06);
}

.box-wide{ grid-column: 1 / -1; }

.box-title{
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .3px;
  margin-bottom: 12px;
}

/* KV */
.kv{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap: 10px 12px;
  font-size: 13px;
  color: rgba(31,41,55,.72);
}
.k{ color: rgba(31,41,55,.48); }
.v{
  color: rgba(31,41,55,.84);
  word-break: break-word;
}

/* mini buttons */
.mini-btn{
  margin-top: 14px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--m-line);
  background: rgba(255,255,255,.95);
  cursor: pointer;
  font-size: 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mini-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(249,115,22,.35);
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
}

/* Quick grid：改成更像「功能磁貼」 */
.quick{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.quick .quick-item{
  border-radius: 16px;
  border: 1px solid var(--m-line);
  padding: 12px 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 13px;
  color: rgba(31,41,55,.78);
  background:
    linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.quick .quick-item:hover{
  transform: translateY(-1px);
  border-color: rgba(249,115,22,.35);
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
}

/* 讓 quick 區塊的 button 不要瀏覽器預設灰底 */
.quick button.quick-item{
  appearance: none;
  -webkit-appearance: none;
}

/* Orders table：邊框更淡、表頭改成淡橘 */
.order-table{
  margin-top: 10px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--m-line);
  background: rgba(255,255,255,.96);
}

.order-row{
  display:grid;
  grid-template-columns: 1.2fr .9fr .9fr .7fr 1fr;
  gap: 10px;
  padding: 12px 12px;
  font-size: 13px;
  background: rgba(255,255,255,.98);
  align-items: center;
}
.order-actions{
  display:flex;
  justify-content:flex-start;
}
.order-actions .mini-btn{
  margin-top: 0; /* 你的 mini-btn 預設有 margin-top:14px，這裡要壓掉 */
  height: 36px;
}

.order-row + .order-row{
  border-top: 1px solid var(--m-line2);
}

.order-head{
  background: rgba(249,115,22,.10);
  font-weight: 900;
  color: rgba(31,41,55,.75);
}

/* status chips：走更明顯的色塊 */
.status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--m-line);
  background: rgba(31,41,55,.04);
}
.status.done{ background: rgba(31,41,55,.04); }
.status.ship{ border-color: rgba(249,115,22,.35); background: rgba(249,115,22,.12); color: var(--m-accent-deep); font-weight: 800; }
.status.pay{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.14); color: rgba(120, 80, 0, .95); font-weight: 800; }

/* =========================
   MESSAGES + LOADING
   ========================= */
.form-msg{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 14px;
  display: none;
  border: 1px solid var(--m-line);
  background: rgba(31,41,55,.04);
  color: rgba(31,41,55,.78);
}
.form-msg.is-error{
  display:block;
  color: #7a1c1c;
  background: rgba(220, 38, 38, .10);
  border-color: rgba(220, 38, 38, .25);
}
.form-msg.is-ok{
  display:block;
  color: #135b2c;
  background: rgba(22, 163, 74, .10);
  border-color: rgba(22, 163, 74, .25);
}
/* 你 JS 用 data-type 的訊息也支援 */
.form-msg[data-type="success"]{ display:block; background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.25); }
.form-msg[data-type="error"]{ display:block; background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.25); }
.form-msg[data-type="info"]{ display:block; background: rgba(31,41,55,.04); border-color: var(--m-line); }

.primary-btn.is-loading{
  position: relative;
  opacity: .92;
  pointer-events: none;
}
.primary-btn.is-loading::after{
  content:"";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.85);
  border-top-color: transparent;
  display: inline-block;
  margin-left: 10px;
  vertical-align: -2px;
  animation: spin .8s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }

/* =========================
   MODAL
   ========================= */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 999999;
}
.modal.is-open{ display: flex; }

.modal-card{
  width: min(720px, 100%);
  background: rgba(255,255,255,.98);
  border-radius: var(--m-radius2);
  overflow: hidden;
  border: 1px solid var(--m-line);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--m-line2);
  background: linear-gradient(90deg, rgba(249,115,22,.10), rgba(251,113,133,.08));
}

.modal-title{
  font-size: 15px;
  font-weight: 950;
}

.icon-x{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--m-line);
  background: rgba(255,255,255,.95);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.icon-x:hover{
  transform: translateY(-1px);
  border-color: rgba(249,115,22,.35);
  box-shadow: 0 12px 24px rgba(15,23,42,.10);
  color: var(--m-accent-deep);
}

.modal-body{ padding: 16px; }

.modal-form .mini-hint{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(31,41,55,.50);
}

/* Favorites list (你現在用的是內聯 style，但保留兼容) */
.fav-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 720px){
  .fav-list{ grid-template-columns: 1fr; }
}

/* 你有 fav-card class 的舊樣式也保留，避免未來改回 card 版 */
.fav-card{
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  overflow: hidden;
  background: rgba(255,255,255,.98);
  box-shadow: 0 12px 26px rgba(15,23,42,.08);
  display:flex;
  gap: 12px;
  padding: 12px;
  min-height: 160px;
  align-items: center;
}
.fav-img{
  width: 96px;
  height: 136px;
  border-radius: 14px;
  background: rgba(31,41,55,.04);
  object-fit: cover;
  flex: 0 0 auto;
}
.fav-info{
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fav-name{
  font-weight: 900;
  font-size: 13px;
  color: rgba(31,41,55,.86);
  line-height: 1.4;
}
.fav-meta{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(31,41,55,.56);
}
.fav-actions{
  margin-top: 10px;
  display:flex;
  gap: 8px;
}
.fav-actions .mini-btn{
  margin-top: 0;
  height: 36px;
}

/* ✅ FIX：只把按鈕文字救回來（避免被其他 css 影響） */
.member-shell .mini-btn,
.member-shell .ghost-btn{
  font-size: 13px !important;
  color: inherit !important;
  text-indent: 0 !important;
}

/* =========================
   NAV SEARCH (你原本放在 member.css 的就保留)
   ========================= */
.nav-search{
  display:flex;
  align-items:center;
  gap:10px;
}
.nav-search-input{
  width: 0;
  opacity: 0;
  pointer-events: none;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  transition: width .25s ease, opacity .18s ease;
}
.nav-search.is-open .nav-search-input{
  width: 220px;
  opacity: 1;
  pointer-events: auto;
  border-bottom: 1px solid rgba(0,0,0,.35);
  padding: 6px 2px;
}
#navSearchBtn{
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: #111;
  border-radius: 0;
}
#navSearchBtn:hover{
  color: #000;
  background: transparent;
}
#navSearchBtn:focus,
#navSearchBtn:focus-visible{
  outline: none;
  box-shadow: none;
}

/* =========================
   RWD
   ========================= */
@media (max-width: 720px){
  .order-row{
    grid-template-columns: 1fr 1fr; /* 手機兩欄 */
    row-gap: 8px;
  }

  /* 第5個欄位（操作）跨整行 */
  .order-row > :nth-child(5){
    grid-column: 1 / -1;
  }

  .order-actions{
    justify-content: flex-start;
  }
}

/* 手機：四顆按鈕改成 2 欄 grid（保留你原本想要的效果） */
@media (max-width: 520px){
  .dash-actions{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }
  .dash-actions .ghost-btn{
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 10px 10px;
    font-size: 14px;
    line-height: 1.2;
  }
}
@media (max-width: 360px){
  .dash-actions .ghost-btn{
    font-size: 13px;
    padding: 9px 8px;
  }
}
/* =========================
   Layout overhaul (CSS only)
   加在 member.css 最底部
   ========================= */

/* 1) 頁面容器寬度與間距更像「會員儀表板」 */
.member-dash{
  max-width: 1240px;
}

/* 2) Dash Head：改成 grid 分欄（跟原本一排排完全不同） */
.dash-head{
  display: grid;
  grid-template-columns: 64px 1fr 360px; /* avatar | welcome | actions */
  align-items: center;
  gap: 16px;
  padding: 18px 18px;
}

/* avatar 固定，改得更像 badge */
.avatar{
  width: 64px;
  height: 64px;
  border-radius: 18px;
}

/* welcome 區塊加一點上下層次 */
.dash-welcome .welcome-title{
  font-size: 20px;
}
.dash-welcome .welcome-sub{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* actions：變成 2x2 方塊按鈕群（很不像原本的橫排） */
.dash-actions{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  justify-self: end;
}

.dash-actions .ghost-btn{
  height: 44px;
  border-radius: 16px; /* 不用膠囊，變成方塊卡片感 */
  justify-content: center;
  padding: 0 10px;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));
}

/* 3) 三大區塊：改成 3 欄卡片（個人/快捷/訂單） */
.dash-grid{
  grid-template-columns: 1fr 1fr 1.2fr; /* 右邊訂單稍大 */
  align-items: start;
}

/* 原本 box-wide 會佔整列，現在取消它的跨欄 */
.box-wide{
  grid-column: auto;
}

/* 4) 個人資料：表格改成「一列一列卡片 row」 */
.kv{
  grid-template-columns: 1fr;  /* 不再兩欄表格 */
  gap: 10px;
}

.kv .k{
  font-size: 12px;
  opacity: .75;
  margin-bottom: 4px;
}

.kv .v{
  font-weight: 900;
  opacity: .92;
}

/* 用 :has 讓每一組 k/v 變成卡片列（Chrome/Edge 可用） */
.kv:has(.k){
  display: grid;
}
.kv > .k{
  padding: 12px 12px 0;
  border: 1px solid var(--m-line);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: rgba(255,255,255,.92);
}
.kv > .v{
  margin-top: -2px;
  padding: 0 12px 12px;
  border: 1px solid var(--m-line);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: rgba(255,255,255,.92);
}

/* 讓每對 k/v 看起來是一張卡：用 nth-child 組合 */
.kv > .k:nth-child(4n+1),
.kv > .v:nth-child(4n+2),
.kv > .k:nth-child(4n+3),
.kv > .v:nth-child(4n+4){
  /* 視覺上靠邊就好 */
}

/* 編輯資料按鈕更像「底部操作」 */
#editProfileBtn.mini-btn{
  width: 100%;
  height: 44px;
  border-radius: 16px;
  margin-top: 14px;
  font-weight: 900;
}

/* 5) 快捷功能：改成直向「大磁貼」列表 */
.quick{
  grid-template-columns: 1fr; /* 不再 2x2 */
  gap: 10px;
}

.quick .quick-item{
  padding: 14px 14px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 900;
}

/* icon 放大一點，像 app 快捷 */
.quick .quick-item i{
  font-size: 18px;
  width: 22px;
  text-align: center;
}

.order-table{
  border-radius: 18px;
}

/* 7) RWD：平板以下改回兩欄，手機一欄 */
@media (max-width: 980px){
  .dash-head{
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "av wl"
      "ac ac";
  }
  .avatar{ grid-area: av; }
  .dash-welcome{ grid-area: wl; }
  .dash-actions{ grid-area: ac; justify-self: stretch; }

  .dash-grid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px){
  .dash-grid{
    grid-template-columns: 1fr;
  }
  .order-row{
    grid-template-columns: 1fr 1fr;
  }
}
/* ===== Favorites list layout ===== */
.fav-item{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.fav-thumb{
  width:56px;
  height:56px;
  border-radius:12px;
  overflow:hidden;
  background:#f3f4f6;
  flex:0 0 auto;
}
.fav-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.fav-info{
  flex:1;
  min-width:0;
}
.fav-name{
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:4px;
}
.fav-price{
  display:flex;
  gap:10px;
  align-items:baseline;
}
.fav-sale{
  color:#e11d48;
  font-weight:700;
}
.fav-base{
  color:#9ca3af;
  text-decoration:line-through;
  font-size:13px;
}
.fav-regular{
  color:#111;
  font-weight:700;
}

.fav-actions{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}

/* ===== Mobile: 上圖下文 ===== */
@media (max-width: 560px){
  .fav-item{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:12px 0;
  }

  .fav-thumb{
    width:100%;
    height:160px; /* 你想更大/更小改這裡 */
    border-radius:14px;
  }

  .fav-name{
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .fav-actions{
    width:100%;
  }
  .fav-actions .mini-btn{
    flex:1;
  }
}
/* ===== Orders pager ===== */
.order-pager{
  margin-top: 12px;
  padding: 12px 12px;
  border: 1px solid var(--m-line);
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.pager-btn{
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--m-line);
  background: rgba(255,255,255,.95);
  cursor: pointer;
  font-weight: 900;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pager-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(249,115,22,.35);
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
}
.pager-btn:disabled{
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.pager-info{
  font-size: 13px;
  color: rgba(31,41,55,.72);
  font-weight: 800;
  flex: 1;
  text-align: center;
}

.pager-size{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 13px;
  color: rgba(31,41,55,.72);
  font-weight: 800;
}

#orderPageSize{
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--m-line);
  padding: 0 10px;
  background: rgba(255,255,255,.95);
  font-weight: 900;
  outline: none;
}
#orderPageSize:focus{
  border-color: rgba(249,115,22,.55);
  box-shadow: 0 0 0 4px rgba(249,115,22,.12);
}

/* 手機：分頁改成上下排列，資訊靠左 */
@media (max-width: 720px){
  .order-pager{
    justify-content: flex-start;
  }
  .pager-info{
    flex: 0 0 100%;
    text-align: left;
    order: 3;
  }
  .pager-size{
    order: 4;
    width: 100%;
  }
}
/* ✅ 讓右側「最近訂單」固定高度，內容超出只在表格內滾動 */
.box.box-wide{
  height: 520px;              /* 你想更高/更低改這裡 */
  display: flex;
  flex-direction: column;
  min-height: 0;              /* 很重要：讓子元素可以 overflow */
}

.order-table{
  flex: 1;
  min-height: 0;
  overflow: auto;             /* ✅ 只在訂單區內滾 */
}

.order-pager,
#ordersMsg{
  flex: 0 0 auto;             /* 分頁固定在底部 */
}
/* ✅ 訂單編號：最多兩行，超過省略 */
.order-row > :nth-child(1){
  white-space: normal;            /* 允許換行 */
  overflow: hidden;               /* 超過隱藏 */
  text-overflow: ellipsis;
  display: -webkit-box;           /* 兩行截斷 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;          /* 長字串可以斷 */
  line-height: 1.25;
  max-height: calc(1.25em * 2);   /* 保證最多兩行高度 */
}
/* =========================
   AUTH buttons: 不要長一條
   只影響 member.html 的登入畫面 (#authView)
   ========================= */

/* 卡片本身不要太寬（視覺更集中） */
#authView .member-card{
  width: min(560px, 100%);
  margin: 0 auto;
}

/* 讓按鈕群置中（你的 wrapper 是 inline style grid，這裡補一個置中） */
#authView .member-card > div{
  justify-items: center; /* grid items 置中 */
}

/* 兩顆登入按鈕縮窄 + 置中 */
#authView .primary-btn{
  width: min(360px, 100%);
  margin: 0 auto;              /* 置中 */
  border-radius: 999px;        /* 更像登入膠囊 */
  height: 44px;                /* 稍微俐落一點 */
}

/* icon 跟文字更好看一點 */
#authView .primary-btn i{
  font-size: 18px;
}

/* 第二顆（Google）做成「淺底」區分一下（可選） */
#btnGoogleLogin{
  background: rgba(255,255,255,.92);
  color: rgba(31,41,55,.88);
  border: 1px solid rgba(31,41,55,.14);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
}

#btnGoogleLogin:hover{
  border-color: rgba(249,115,22,.35);
  box-shadow: 0 14px 28px rgba(15, 23, 42, .08);
}