@charset "utf-8";
/* ==========================================================================
   白與黑汽車美容 — 前台自訂樣式
   載入順序：bootstrap.css → fonts.css → style.css → 本檔
   本檔負責覆寫版型（Car Repair）的英文字型、配色與版面，版型原始檔一律不改，
   將來版型要更新才不會把改過的地方蓋掉。
   ========================================================================== */

:root {
  --wb-ink:        #101113;   /* 主要黑 */
  --wb-ink-2:      #1c1e22;   /* 次深 */
  --wb-paper:      #ffffff;
  --wb-mist:       #f4f5f6;   /* 淺灰底 */
  --wb-line:       #e2e4e7;
  --wb-muted:      #6d737c;
  --wb-accent:     #1668dc;   /* 重點藍。版型 css 內原本的紅 #ea202e 已一併換成同色 */
  --wb-accent-dk:  #0f52b3;
  --wb-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. 基礎：字型與保險
   版型原本吃 Google Fonts 的 Lato，已改為本機字型堆疊，不再外連。
   -------------------------------------------------------------------------- */
body,
h1, h2, h3, h4, h5, h6,
.rd-navbar, .btn, .button, input, select, textarea, button {
  font-family: var(--wb-sans);
}

body {
  color: var(--wb-ink);
  background: var(--wb-paper);
  -webkit-font-smoothing: antialiased;
}

/* 版型把 .page 設 opacity:0，等 JS 淡入。JS 若失敗會整頁空白，這裡保底。 */
.page { opacity: 1; }

img { max-width: 100%; height: auto; }

.wb-section { padding: 96px 0; }
.wb-section-tight { padding: 72px 0; }
.wb-section-dark { background: var(--wb-ink); color: #fff; }
.wb-section-mist { background: var(--wb-mist); }

/* 版型把 h1~h6 的預設色設成白色（它原本每個區塊都有底圖），
   我們大多是白底區塊，這裡把標題色改回深色，需要白字的區塊再單獨指定。 */
.wb-title,
.wb-service-body h4,
.wb-care-item h5,
.wb-defense h4,
.wb-voice-title { color: var(--wb-ink); }

/* 區塊標題 */
.wb-heading { margin-bottom: 48px; }
.wb-heading.text-center { margin-left: auto; margin-right: auto; max-width: 760px; }
.wb-eyebrow {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--wb-accent);
  margin-bottom: 14px;
}
.wb-title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
  margin: 0 0 16px;
}
.wb-section-dark .wb-title { color: #fff; }
.wb-subtitle {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--wb-ink);
  margin: -4px 0 12px;
}
.wb-section-dark .wb-subtitle { color: rgba(255, 255, 255, .9); }
.wb-lead {
  font-size: 17px;
  line-height: 2;
  color: var(--wb-muted);
  margin: 0;
}
.wb-section-dark .wb-lead { color: rgba(255, 255, 255, .72); }
.wb-rule {
  width: 56px;
  height: 3px;
  background: var(--wb-accent);
  margin: 0 0 22px;
}
.text-center .wb-rule { margin-left: auto; margin-right: auto; }

/* 按鈕 */
.wb-btn {
  display: inline-block;
  padding: 15px 38px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  border: 2px solid transparent;
  border-radius: 2px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.wb-btn + .wb-btn { margin-left: 12px; }
.wb-btn-solid { background: var(--wb-accent); color: #fff; }
.wb-btn-solid:hover, .wb-btn-solid:focus { background: var(--wb-accent-dk); color: #fff; }
.wb-btn-ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.wb-btn-ghost:hover, .wb-btn-ghost:focus { background: #fff; border-color: #fff; color: var(--wb-ink); }
.wb-btn-dark { border-color: var(--wb-ink); color: var(--wb-ink); }
.wb-btn-dark:hover, .wb-btn-dark:focus { background: var(--wb-ink); color: #fff; }

/* --------------------------------------------------------------------------
   2. 導覽列
   -------------------------------------------------------------------------- */
.brand-wb { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-wb-mark {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  color: #fff;
  background: var(--wb-ink);
  border: 2px solid #fff;
  padding: 7px 10px;
}
.brand-wb-amp { color: var(--wb-accent); }
.brand-wb-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-wb-en { font-size: 15px; font-weight: 700; letter-spacing: .12em; color: #fff; }
.brand-wb-zh { font-size: 11px; letter-spacing: .18em; color: rgba(255, 255, 255, .7); }

/* 捲動後導覽列變白底，品牌字要跟著轉深色 */
.rd-navbar-static.rd-navbar--is-stuck .brand-wb-en,
.rd-navbar-fixed .brand-wb-en { color: var(--wb-ink); }
.rd-navbar-static.rd-navbar--is-stuck .brand-wb-zh,
.rd-navbar-fixed .brand-wb-zh { color: var(--wb-muted); }

/* 會員登入：拿掉外框後與一般選單同一個視覺層級，靠左側留白拉開距離 */
.rd-navbar-static .rd-nav-item.rd-nav-item-cta { margin-left: 34px; }
.rd-nav-item-cta .rd-nav-link {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.rd-nav-item-cta .rd-nav-link { text-transform: none; }
.nav-cta-icon {
  margin-right: 7px;
  font-size: 15px;
  vertical-align: -1px;
}

/* 有下拉的項目，展開箭頭原本是近黑色（#101113），在深色導覽列上幾乎看不見，改成白色。
   展開／作用中時不覆寫，讓箭頭跟著文字一起轉成品牌藍當作狀態回饋。 */
.rd-navbar-static .rd-nav-item:not(.focus):not(.opened):not(.active) > .rd-navbar-submenu-toggle,
.rd-navbar-fixed .rd-nav-item:not(.focus):not(.opened):not(.active) > .rd-navbar-submenu-toggle {
  color: #fff;
}

/* 選單項目一律給手型游標：含只負責展開的父層，以及尚未建置的項目 */
.rd-nav-link,
.rd-dropdown-link { cursor: pointer; }

/* 下拉面板（.rd-menu）有 margin-top:22px，跟只有 23px 高的父項之間是一段空白。
   滑鼠移過那段空白會離開 li，版型 JS 立刻收掉選單，等於點不到裡面的項目。
   展開時補一塊與面板同寬的透明橋接區把兩者連起來；沒展開時不存在，才不會擋到底下內容。 */
.rd-navbar-static .rd-navbar--has-dropdown.focus::after,
.rd-navbar-static .rd-navbar--has-dropdown:hover::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 270px;
  height: 24px;
}

/* 下拉項目：尚未建置的用文字淡化而不是整塊 opacity，
   否則連 hover 的藍底也一起被淡化，滑上去像沒反應 */
.rd-navbar-static .rd-dropdown-link.is-soon {
  opacity: 1;
  color: rgba(255, 255, 255, .62);
}
.rd-navbar-static .rd-dropdown-link.is-soon:hover { color: #fff; }

/* 尚未建置的頁面：看得出來、點了沒作用，用淡化區別 */
.rd-nav-link.is-soon,
.rd-dropdown-link.is-soon,
.site-footer-links .is-soon {
  opacity: .55;
}
.site-footer-links .is-soon { cursor: default; }
.nav-soon-tag {
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: .1em;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 2px;
  vertical-align: 2px;
}

/* --------------------------------------------------------------------------
   3. 首頁 Hero
   -------------------------------------------------------------------------- */
/* 輪播容器。版型的 Swiper 由 js/script.js 依 data-* 初始化，這裡只管尺寸與遮罩 */
.wb-hero-slider {
  position: relative;
  height: 92vh;
  min-height: 560px;
  background: var(--wb-ink);
  overflow: hidden;
}
.wb-hero-slider .swiper-slide {
  position: relative;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  color: #fff;
  text-align: center;
}
/* 深色遮罩：底圖是明亮的車體照，不壓一層字會看不清楚 */
.wb-hero-slider .swiper-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 11, 13, .84) 0%, rgba(10, 11, 13, .60) 45%, rgba(10, 11, 13, .88) 100%);
}
.wb-hero-slider .swiper-slide-caption { position: relative; z-index: 2; }

/* 左右箭頭 */
.wb-hero-slider .swiper-button-prev,
.wb-hero-slider .swiper-button-next {
  width: 52px;
  height: 52px;
  margin-top: -26px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease;
  z-index: 5;
}
.wb-hero-slider .swiper-button-prev { left: 28px; }
.wb-hero-slider .swiper-button-next { right: 28px; }
.wb-hero-slider .swiper-button-prev:hover,
.wb-hero-slider .swiper-button-next:hover { background: var(--wb-accent); border-color: var(--wb-accent); }
.wb-hero-slider .swiper-button-prev::before { content: '\f104'; font-family: FontAwesome; }
.wb-hero-slider .swiper-button-next::before { content: '\f105'; font-family: FontAwesome; }

/* 頁碼點：版型預設藏起來也偏移了位置，這裡重新擺回中間下緣 */
.wb-hero-slider .swiper-pagination {
  display: block;
  left: 0;
  right: 0;
  bottom: 30px;
  z-index: 5;
}
.wb-hero-slider .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 6px;
  background: rgba(255, 255, 255, .45);
  border-radius: 50%;
  opacity: 1;
  transition: background .2s ease, width .2s ease;
}
.wb-hero-slider .swiper-pagination-bullet-active {
  background: var(--wb-accent);
  width: 26px;
  border-radius: 999px;
}
.wb-hero-eyebrow {
  font-size: 14px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  margin-bottom: 26px;
}
.wb-hero-title {
  font-size: 56px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .02em;
  margin: 0 0 26px;
  color: #fff;
}
/* 版型把標題內的 span 設成 block（原本用來做兩行大標），這裡改回行內 */
.wb-hero-title span,
.wb-title span { display: inline; }
.wb-hero-title .accent { color: var(--wb-accent); }
.wb-hero-text {
  max-width: 760px;
  margin: 0 auto 40px;
  font-size: 18px;
  line-height: 2.1;
  color: rgba(255, 255, 255, .82);
}
.wb-hero-actions { margin-bottom: 0; }

/* 數據條：獨立在輪播下方，切換投影片時不會跟著重播動畫 */
.wb-hero-stats { background: var(--wb-ink); padding: 30px 0; }
.wb-hero-stats-inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
.wb-hero-stat { padding: 0 42px; text-align: center; }
.wb-hero-stat + .wb-hero-stat { border-left: 1px solid rgba(255, 255, 255, .18); }
.wb-hero-stat b {
  display: block;
  font-size: 38px;
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
}
.wb-hero-stat span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .62);
}

/* --------------------------------------------------------------------------
   4. 關於我們
   -------------------------------------------------------------------------- */
.wb-about-img {
  position: relative;
  min-height: 460px;
  background: url('../images/home-01-960x710.jpg') center center / cover no-repeat;
}
.wb-about-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  background: var(--wb-accent);
  color: #fff;
  padding: 22px 30px;
  text-align: center;
}
.wb-about-badge b { display: block; font-size: 34px; font-weight: 900; line-height: 1; }
.wb-about-badge span { display: block; margin-top: 6px; font-size: 12px; letter-spacing: .18em; }
.wb-about-body { padding-left: 56px; }
.wb-about-body p { margin-bottom: 20px; font-size: 16px; line-height: 2.1; color: var(--wb-muted); }
.wb-about-body p.is-strong { color: var(--wb-ink); font-weight: 700; font-size: 17px; }
.wb-quote {
  border-left: 3px solid var(--wb-accent);
  padding: 4px 0 4px 22px;
  margin: 30px 0 0;
  font-size: 17px;
  line-height: 2;
  color: var(--wb-ink);
}

/* --------------------------------------------------------------------------
   5. 三大訴求（安心／放心／開心）
   -------------------------------------------------------------------------- */
.wb-promise { display: flex; flex-wrap: wrap; }
.wb-promise-cell {
  flex: 1 1 33.333%;
  min-width: 300px;
  padding: 84px 4vw;
  color: #fff;
}
.wb-promise-cell.is-accent {
  /* 從「細節安心」的淺藍收尾延續過來，兩格之間不會有突兀斷色。 */
  background: linear-gradient(105deg, #86c4ee 0%, var(--wb-accent) 52%, #1c70ba 100%);
}
.wb-promise-cell.is-ink {
  background: linear-gradient(105deg, #e6f5ff 0%, #b9e0fa 66%, #86c4ee 100%);
  color: #15334a;
}
.wb-promise-cell.is-deep { background: var(--wb-accent-dk); }
.wb-promise-num {
  font-size: 13px;
  letter-spacing: .3em;
  opacity: .72;
  margin-bottom: 16px;
}
.wb-promise-title { font-size: 30px; font-weight: 800; margin: 0 0 18px; color: #fff; }
.wb-promise-text { font-size: 16px; line-height: 2.1; color: rgba(255, 255, 255, .86); margin: 0; }
.wb-promise-cell.is-ink .wb-promise-num { color: #296086; opacity: 1; }
.wb-promise-cell.is-ink .wb-promise-title { color: #15334a; }
.wb-promise-cell.is-ink .wb-promise-text { color: rgba(21, 51, 74, .82); }

/* --------------------------------------------------------------------------
   6. 三大品質防線
   -------------------------------------------------------------------------- */
.wb-defense {
  height: 100%;
  background: #fff;
  border: 1px solid var(--wb-line);
  padding: 44px 34px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.wb-defense:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -24px rgba(16, 17, 19, .45); }
.wb-defense-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--wb-mist);
  color: var(--wb-accent);
  font-size: 26px;
  line-height: 62px;
}
.wb-defense-step {
  font-size: 12px;
  letter-spacing: .24em;
  color: var(--wb-muted);
  margin-bottom: 10px;
}
.wb-defense h4 { font-size: 20px; font-weight: 700; margin: 0 0 14px; }
.wb-defense p { font-size: 15px; line-height: 1.95; color: var(--wb-muted); margin: 0; }

/* --------------------------------------------------------------------------
   7. 服務項目
   -------------------------------------------------------------------------- */
.wb-service-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--wb-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wb-service-media {
  height: 208px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.wb-service-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 17, 19, 0) 40%, rgba(16, 17, 19, .55) 100%);
}
.wb-service-body { padding: 30px 28px 34px; flex: 1 1 auto; display: flex; flex-direction: column; }
.wb-service-tag {
  align-self: flex-start;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--wb-accent);
  border: 1px solid currentColor;
  padding: 2px 10px;
  margin-bottom: 14px;
}
.wb-service-body h4 { font-size: 21px; font-weight: 700; margin: 0 0 12px; }
.wb-service-body p { font-size: 15px; line-height: 1.95; color: var(--wb-muted); margin: 0 0 18px; }
.wb-service-list { margin: 0; padding: 0; list-style: none; }
.wb-service-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--wb-muted);
}
.wb-service-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 8px;
  height: 2px;
  background: var(--wb-accent);
}

/* --------------------------------------------------------------------------
   7.5 商品介紹（鍍膜、包膜）
   -------------------------------------------------------------------------- */
.wb-product-list-hero {
  background: var(--wb-ink) url('../images/products/coating-hero-20260825.png') center 52% / cover no-repeat;
  color: #fff;
  padding: 190px 0 82px;
  position: relative;
  text-align: center;
}
.wb-product-list-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 13, 15, .82), rgba(12, 13, 15, .67) 54%, rgba(12, 13, 15, .48)); }
.wb-product-list-hero .container { position: relative; z-index: 1; }
.wb-product-list-hero .wb-eyebrow { color: var(--wb-accent); margin-bottom: 12px; }
.wb-product-list-hero .wb-rule { margin: 0 auto 22px; }
.wb-product-list-hero .wb-title { color: #fff; margin-bottom: 14px; }
.wb-product-list-hero p:last-child { color: rgba(255, 255, 255, .72); font-size: 16px; margin: 0; }
.wb-product-list-section { padding-top: 100px; }
.wb-product-list-intro { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.wb-product-list-intro .wb-eyebrow { color: var(--wb-accent); margin-bottom: 13px; }
.wb-product-list-intro h2 { color: var(--wb-ink); font-size: 31px; font-weight: 800; line-height: 1.4; margin: 0 0 16px; }
.wb-product-list-intro > p:last-child { color: var(--wb-muted); font-size: 16px; line-height: 2; margin: 0; }
.wb-product-card {
  border: 1px solid var(--wb-line);
  color: var(--wb-ink);
  display: block;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.wb-product-card:hover { border-color: rgba(181, 145, 87, .55); box-shadow: 0 20px 42px rgba(16, 17, 19, .14); color: var(--wb-ink); transform: translateY(-7px); }
.wb-product-card-media { height: 430px; overflow: hidden; position: relative; }
.wb-product-card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 11, 13, .93), rgba(10, 11, 13, .62) 55%, rgba(10, 11, 13, .1)); }
.wb-product-card-media img { height: 100%; object-fit: cover; transition: transform .5s ease; width: 100%; }
.wb-product-card:hover .wb-product-card-media img { transform: scale(1.05); }
.wb-product-card-content { bottom: 0; left: 0; max-width: 76%; padding: 34px 36px 37px; position: absolute; z-index: 1; }
.wb-product-card-content > span,
.wb-product-step-eyebrow { color: var(--wb-accent); display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.wb-product-card-content h2 { color: #fff; font-size: 30px; font-weight: 800; margin: 11px 0 12px; }
.wb-product-card-content p { color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.9; margin: 0 0 23px; }
.wb-product-card-content b { color: #fff; font-size: 14px; letter-spacing: .06em; }
.wb-product-card-content i { color: var(--wb-accent); font-size: 17px; margin-left: 8px; transition: transform .2s ease; }
.wb-product-card:hover .wb-product-card-content i { transform: translateX(4px); }

.wb-product-hero {
  background-color: var(--wb-ink);
  background-position: center;
  background-size: cover;
  color: #fff;
  min-height: 555px;
  padding: 190px 0 88px;
  position: relative;
}
.wb-product-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 13, 15, .92), rgba(12, 13, 15, .68) 55%, rgba(12, 13, 15, .3)); }
.wb-product-hero .container { position: relative; z-index: 1; }
.wb-back-link { color: rgba(255, 255, 255, .75); display: inline-block; font-size: 14px; margin-bottom: 72px; text-decoration: none; }
.wb-back-link:hover { color: var(--wb-accent); }
.wb-back-link i { margin-right: 8px; }
.wb-product-hero .wb-eyebrow { color: var(--wb-accent); margin-bottom: 12px; }
.wb-product-hero h1 { color: #fff; font-size: clamp(48px, 6vw, 78px); font-weight: 800; letter-spacing: .04em; line-height: 1.1; margin: 0 0 20px; }
.wb-product-hero-copy { color: rgba(255, 255, 255, .82); font-size: 17px; line-height: 2; margin: 0; max-width: 570px; }
.wb-product-overview-section { padding-bottom: 92px; padding-top: 94px; }
.wb-product-overview-title { color: var(--wb-ink); font-size: 34px; font-weight: 800; line-height: 1.45; margin: 0 0 20px; }
.wb-product-overview-copy { color: var(--wb-muted); font-size: 16px; line-height: 2.1; margin: 0; }
.wb-product-promise { background: var(--wb-ink); color: #fff; padding: 42px 38px; position: relative; }
.wb-product-promise::before { border: 1px solid rgba(255, 255, 255, .18); content: ''; inset: 12px; pointer-events: none; position: absolute; }
.wb-product-promise > * { position: relative; z-index: 1; }
.wb-product-promise > span { color: var(--wb-accent); display: block; font-size: 29px; margin-bottom: 27px; }
.wb-product-promise p { color: var(--wb-accent); font-size: 11px; font-weight: 700; letter-spacing: .16em; margin: 0 0 14px; }
.wb-product-promise strong { color: #fff; display: block; font-size: 20px; line-height: 1.8; }
.wb-product-steps-section { background: var(--wb-mist); padding-bottom: 108px; padding-top: 100px; }
.wb-product-steps { margin: 54px auto 0; max-width: 1120px; }
.wb-product-step { background: #fff; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 38px; min-height: 385px; }
.wb-product-step.is-reverse .wb-product-step-image { order: 2; }
.wb-product-step.is-reverse .wb-product-step-body { order: 1; }
.wb-product-step-image { min-height: 385px; overflow: hidden; position: relative; }
.wb-product-step-image::after { background: linear-gradient(180deg, rgba(12, 13, 15, 0) 45%, rgba(12, 13, 15, .46)); content: ''; inset: 0; position: absolute; }
.wb-product-step-image img { height: 100%; object-fit: cover; transition: transform .5s ease; width: 100%; }
.wb-product-step:hover .wb-product-step-image img { transform: scale(1.035); }
.wb-product-step-number { align-items: center; background: var(--wb-ink); border: 1px solid rgba(255, 255, 255, .32); color: var(--wb-accent); display: flex; font-size: 15px; font-weight: 800; height: 57px; justify-content: center; left: 25px; letter-spacing: .12em; position: absolute; top: 25px; width: 57px; z-index: 1; }
.wb-product-step-body { border: 1px solid var(--wb-line); display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 45px 48px; }
.wb-product-step-body h3 { color: var(--wb-ink); font-size: 26px; font-weight: 800; margin: 8px 0 8px; }
.wb-product-step-lead { color: var(--wb-muted); font-size: 15px; line-height: 1.85; margin: 0 0 17px; }
.wb-product-step-body ul { border-top: 1px solid var(--wb-line); list-style: none; margin: 0; padding: 17px 0 0; }
.wb-product-step-body li { color: var(--wb-muted); font-size: 14.5px; line-height: 1.9; padding: 6px 0 6px 20px; position: relative; }
.wb-product-step-body li::before { background: var(--wb-accent); content: ''; height: 2px; left: 0; position: absolute; top: 20px; width: 8px; }
.wb-product-cta-section { background: var(--wb-ink) url('../images/home-03-1920x1200.jpg') center / cover no-repeat; color: #fff; padding: 100px 0; position: relative; text-align: center; }
.wb-product-cta-section::before { background: rgba(12, 13, 15, .86); content: ''; inset: 0; position: absolute; }
.wb-product-cta-section .container { max-width: 760px; position: relative; z-index: 1; }
.wb-product-cta-section .wb-eyebrow { color: var(--wb-accent); margin-bottom: 15px; }
.wb-product-cta-section h2 { color: #fff; font-size: 34px; font-weight: 800; margin: 0 0 17px; }
.wb-product-cta-section p { color: rgba(255, 255, 255, .74); font-size: 16px; line-height: 2; margin: 0 auto 30px; }

@media (max-width: 767px) {
  .wb-product-list-hero { padding: 150px 0 62px; }
  .wb-product-list-section { padding-top: 68px; }
  .wb-product-list-intro { margin-bottom: 35px; }
  .wb-product-list-intro h2, .wb-product-overview-title { font-size: 26px; }
  .wb-product-card-media { height: 360px; }
  .wb-product-card-content { max-width: 93%; padding: 27px 25px 29px; }
  .wb-product-card-content h2 { font-size: 27px; }
  .wb-product-hero { min-height: 485px; padding: 145px 0 64px; }
  .wb-back-link { margin-bottom: 56px; }
  .wb-product-hero h1 { font-size: 50px; }
  .wb-product-overview-section, .wb-product-steps-section { padding-bottom: 70px; padding-top: 70px; }
  .wb-product-promise { padding: 34px 30px; }
  .wb-product-steps { margin-top: 38px; }
  .wb-product-step { display: flex; flex-direction: column; margin-bottom: 24px; min-height: 0; }
  .wb-product-step.is-reverse .wb-product-step-image { order: 0; }
  .wb-product-step.is-reverse .wb-product-step-body { order: 0; }
  .wb-product-step-image { min-height: 260px; }
  .wb-product-step-body { padding: 31px 25px 33px; }
  .wb-product-step-body h3 { font-size: 23px; }
  .wb-product-cta-section { padding: 72px 0; }
  .wb-product-cta-section h2 { font-size: 28px; }
}

/* 客製養護清單 */
.wb-care-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--wb-line); border: 1px solid var(--wb-line); }
.wb-care-item { background: #fff; padding: 26px 24px; }
.wb-care-item h5 { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.wb-care-cycle { font-size: 12px; letter-spacing: .12em; color: var(--wb-accent); margin: 0 0 10px; }
.wb-care-item p { font-size: 14.5px; line-height: 1.9; color: var(--wb-muted); margin: 0; }

/* --------------------------------------------------------------------------
   8. 即時回報
   -------------------------------------------------------------------------- */
.wb-report {
  background: var(--wb-ink) url('../images/home-03-1920x1200.jpg') center center / cover no-repeat fixed;
  color: #fff;
  position: relative;
}
.wb-report::before { content: ''; position: absolute; inset: 0; background: rgba(12, 13, 15, .86); }
.wb-report .container { position: relative; z-index: 2; }
.wb-report .wb-title { color: #fff; }
.wb-report .wb-lead { color: rgba(255, 255, 255, .74); }
.wb-report-flow { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.wb-report-step {
  flex: 1 1 150px;
  border: 1px solid rgba(255, 255, 255, .2);
  padding: 22px 18px;
  text-align: center;
}
.wb-report-step b { display: block; font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.wb-report-step span { font-size: 13px; color: rgba(255, 255, 255, .6); letter-spacing: .1em; }
.wb-report-items { margin-top: 34px; font-size: 15px; line-height: 2.1; color: rgba(255, 255, 255, .78); }

/* --------------------------------------------------------------------------
   9. 客戶見證
   -------------------------------------------------------------------------- */
.wb-voice {
  height: 100%;
  background: #fff;
  border: 1px solid var(--wb-line);
  padding: 38px 34px;
}
.wb-voice-mark { font-size: 44px; line-height: 1; color: var(--wb-accent); font-weight: 900; margin-bottom: 14px; }
.wb-voice p { font-size: 16px; line-height: 2.1; color: var(--wb-muted); margin: 0; }
.wb-voice-title { font-size: 20px; font-weight: 700; margin: 0 0 14px; }

/* --------------------------------------------------------------------------
   9.5 條款類單頁（服務條款、隱私權政策）
   內容由後台 TinyMCE 產生，這裡負責把編輯器吐出來的標籤套上本站排版。
   -------------------------------------------------------------------------- */
.wb-page-head {
  background: var(--wb-ink) url('../images/cta-01-1920x350.jpg') center center / cover no-repeat;
  padding: 190px 0 70px;
  position: relative;
  text-align: center;
}
.wb-page-head::before { content: ''; position: absolute; inset: 0; background: rgba(12, 13, 15, .78); }
.wb-page-head .container { position: relative; z-index: 2; }
.wb-page-title { color: #fff; font-size: 36px; font-weight: 800; margin: 0; }

.wb-rich-text { font-size: 16px; line-height: 2.05; color: var(--wb-ink); }
.wb-rich-text h1, .wb-rich-text h2, .wb-rich-text h3,
.wb-rich-text h4, .wb-rich-text h5, .wb-rich-text h6 {
  color: var(--wb-ink);
  font-weight: 700;
  margin: 34px 0 14px;
  line-height: 1.5;
}
.wb-rich-text h2 { font-size: 24px; }
.wb-rich-text h3 { font-size: 20px; }
.wb-rich-text h4 { font-size: 17px; }
.wb-rich-text p { margin: 0 0 18px; }
.wb-rich-text ul, .wb-rich-text ol { margin: 0 0 18px; padding-left: 1.6em; }
.wb-rich-text ul li { list-style: disc; display: list-item; margin-bottom: 8px; }
.wb-rich-text ol li { list-style: decimal; display: list-item; margin-bottom: 8px; }
.wb-rich-text a { color: var(--wb-accent); text-decoration: underline; }
.wb-rich-text table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.wb-rich-text th, .wb-rich-text td { border: 1px solid var(--wb-line); padding: 10px 12px; }
.wb-rich-text th { background: var(--wb-mist); font-weight: 700; }
.wb-rich-text img { max-width: 100%; height: auto; }
.wb-rich-text blockquote {
  border-left: 3px solid var(--wb-accent);
  padding-left: 20px;
  margin: 0 0 18px;
  color: var(--wb-muted);
}
.wb-page-updated {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--wb-line);
  font-size: 14px;
  color: var(--wb-faint, var(--wb-muted));
}

/* --------------------------------------------------------------------------
   10. 頁尾
   -------------------------------------------------------------------------- */
.site-footer { background: var(--wb-ink); color: rgba(255, 255, 255, .72); padding: 72px 0 0; }
.site-footer-main { padding-bottom: 48px; }
.brand-wb-footer { margin-bottom: 20px; }
.site-footer-slogan { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 12px; }
.site-footer-note { font-size: 14.5px; line-height: 1.95; margin: 0; }
.site-footer-social { margin-top: 20px; display: flex; gap: 10px; }
.site-footer-social a {
  width: 38px; height: 38px; line-height: 38px; text-align: center;
  border: 1px solid rgba(255, 255, 255, .25); color: #fff; border-radius: 2px;
}
.site-footer-social a:hover { background: var(--wb-accent); border-color: var(--wb-accent); }
.site-footer-heading {
  font-size: 14px; letter-spacing: .24em; color: #fff;
  margin: 0 0 26px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.store-card { margin-bottom: 26px; }
.store-card-social { display: flex; gap: 8px; margin-top: 12px; }
.store-card-social a {
  width: 32px; height: 32px; line-height: 32px; text-align: center;
  border: 1px solid rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .8);
  border-radius: 2px;
  font-size: 14px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.store-card-social a:hover { background: var(--wb-accent); border-color: var(--wb-accent); color: #fff; }
.store-card-name { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 12px; line-height: 1.35; }
/* 門市名稱拆兩行：上面是品牌抬頭（小、淡），下面才是分店名（大） */
.store-card-brand { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .55); }
.store-card-branch { display: block; font-size: 17px; }
.store-card-line { font-size: 14px; line-height: 1.9; margin: 0 0 6px; }
.store-card-line .fa { width: 20px; color: var(--wb-accent); }
.store-card-line a { color: rgba(255, 255, 255, .72); }
.store-card-line a:hover { color: #fff; }
.site-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding: 22px 0 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 13.5px;
}
.site-footer-bottom p { margin: 0; }
.site-footer-links { color: rgba(255, 255, 255, .55); }
.site-footer-links a { color: rgba(255, 255, 255, .55); }
.site-footer-links .sep { margin: 0 8px; opacity: .5; }

/* --------------------------------------------------------------------------
   11. 響應式
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .wb-about-body { padding-left: 0; padding-top: 40px; }
}

@media (max-width: 991px) {
  .wb-section { padding: 68px 0; }
  .wb-section-tight { padding: 52px 0; }
  .wb-hero-slider { height: auto; min-height: 0; }
  .wb-hero-slider .swiper-slide { min-height: 74vh; padding: 90px 0 70px; }
  .wb-hero-slider .swiper-button-prev { left: 10px; }
  .wb-hero-slider .swiper-button-next { right: 10px; }
  .wb-hero-title { font-size: 40px; }
  .wb-hero-text { font-size: 16px; }
  .wb-title { font-size: 27px; }
  .wb-promise-cell { flex: 1 1 100%; padding: 56px 32px; }
  .wb-care-grid { grid-template-columns: repeat(2, 1fr); }
  .wb-report { background-attachment: scroll; }
}

@media (max-width: 767px) {
  .wb-hero-slider .swiper-slide { min-height: 78vh; }
  .wb-hero-slider .swiper-button-prev,
  .wb-hero-slider .swiper-button-next { width: 40px; height: 40px; margin-top: -20px; font-size: 15px; }
  .wb-hero-title { font-size: 31px; }
  .wb-hero-eyebrow { letter-spacing: .28em; font-size: 12px; }
  .wb-btn { display: block; width: 100%; }
  .wb-btn + .wb-btn { margin-left: 0; margin-top: 12px; }
  .wb-hero-stat { padding: 14px 22px; }
  .wb-hero-stat + .wb-hero-stat { border-left: 0; }
  .wb-hero-stat b { font-size: 30px; }
  .wb-about-img { min-height: 300px; }
  .wb-care-grid { grid-template-columns: 1fr; }
  .site-footer-bottom { justify-content: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   六大安心承諾（wb-vow）
   版面參考 ULTRA COATING：深色底＋玻璃卡＋背後光暈，配色換成我們的藍。
   光暈是兩顆 radial-gradient 圓斑加 blur，不是圖片，不增加載入。
   -------------------------------------------------------------------------- */
.wb-vow { position: relative; background: var(--wb-ink); color: #fff; overflow: hidden; }
.wb-vow::before,
.wb-vow::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.wb-vow::before { width: 520px; height: 520px; top: -190px; left: -150px; background: radial-gradient(circle, rgba(22, 104, 220, .55), rgba(22, 104, 220, 0) 70%); }
.wb-vow::after { width: 620px; height: 620px; bottom: -280px; right: -190px; background: radial-gradient(circle, rgba(22, 104, 220, .3), rgba(22, 104, 220, 0) 70%); }
.wb-vow .container { position: relative; z-index: 2; }
.wb-vow .wb-title { color: #fff; }
.wb-vow .wb-lead { color: rgba(255, 255, 255, .72); }

.wb-vow-card {
  height: 100%;
  padding: 32px 28px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.wb-vow-card:hover {
  transform: translateY(-4px);
  border-color: rgba(22, 104, 220, .6);
  background: rgba(255, 255, 255, .1);
}
.wb-vow-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(22, 104, 220, .18);
  border: 1px solid rgba(22, 104, 220, .4);
  margin-bottom: 18px;
}
.wb-vow-icon .fa { font-size: 22px; color: #5aa2ff; }
.wb-vow-no { font-size: 12px; letter-spacing: .14em; color: rgba(255, 255, 255, .45); margin: 0 0 6px; }
.wb-vow-card h4 { font-size: 19px; font-weight: 700; color: #fff; margin: 0 0 12px; }
.wb-vow-card p { font-size: 15px; line-height: 1.95; color: rgba(255, 255, 255, .74); margin: 0; }

@media (max-width: 991px) { .wb-vow-card { margin-bottom: 20px; } }
@media (max-width: 767px) { .wb-vow-card { padding: 26px 22px; } }

/* --------------------------------------------------------------------------
   視差橫幅（wb-parallax）
   background-attachment: fixed = 底圖釘在視窗上，內容捲過去時圖不動。
   手機一定要退回 scroll：iOS Safari 不支援 fixed，會把背景放大到整個文件高度而破圖。
   -------------------------------------------------------------------------- */
.wb-parallax {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(360px, 44vw, 560px);
  padding: 80px 0;
  color: #fff;
  text-align: center;
  background: var(--wb-ink) url('../images/services-03-1920x1300.jpg') center center / cover no-repeat fixed;
}
/* 遮罩：上下略深、中間稍透，讓字浮起來又不會把車蓋掉 */
.wb-parallax::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 11, 13, .82) 0%, rgba(10, 11, 13, .62) 45%, rgba(10, 11, 13, .88) 100%);
}
.wb-parallax .container { position: relative; z-index: 2; }
.wb-parallax-eyebrow {
  font-size: 13px;
  letter-spacing: .28em;
  color: rgba(255, 255, 255, .6);
  margin: 0 0 18px;
}
.wb-parallax-title {
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 800;
  line-height: 1.45;
  color: #fff;
  margin: 0 0 22px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}
.wb-parallax-text {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 2.1;
  color: rgba(255, 255, 255, .82);
  margin: 0;
}

@media (max-width: 991px) {
  .wb-parallax {
    min-height: 320px;
    padding: 64px 0;
    background-attachment: scroll;
  }
}

/* --------------------------------------------------------------------------
   會員頁（wb-auth / wb-member）
   登入、註冊、忘記密碼、會員中心共用。**白底**版本（2026-08-24 老闆指定改淺色）。
   導覽列本身是深色半透明、絕對定位在頁面最上方，所以這裡上方要留出它的高度。
   -------------------------------------------------------------------------- */
.wb-auth,
.wb-member {
  position: relative;
  background: var(--wb-mist);
  color: var(--wb-ink);
  padding: 150px 0 90px;   /* 上方留給絕對定位的導覽列 */
  min-height: 78vh;
}
/* 右上角的品牌色光暈。白底上只留很淡的一層，當作底色的層次而不是視覺重點 */
.wb-auth::before,
.wb-member::before {
  content: '';
  position: absolute;
  top: -140px;
  right: -80px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 104, 220, .16), transparent 68%);
  filter: blur(90px);
  pointer-events: none;
}
/* z-index 只要壓過上面的光暈就好，**不能到 2**：
   版型的 .rd-navbar-wrap-absolute 也是 z-index 2，同層時 DOM 在後面的贏，
   卡片就會蓋在導覽列上面（捲動時特別明顯）。 */
.wb-auth .container,
.wb-member .container { position: relative; z-index: 1; }

.wb-auth-card {
  max-width: 480px;
  margin: 0 auto;
  padding: 44px 40px 36px;
  background: var(--wb-paper);
  border: 1px solid var(--wb-line);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(16, 17, 19, .07);
}
.wb-auth-head { margin-bottom: 26px; }
.wb-auth-title { font-size: 28px; font-weight: 800; color: var(--wb-ink); margin: 6px 0 10px; }
.wb-auth-sub { font-size: 15px; line-height: 1.9; color: var(--wb-muted); margin: 0; }
.wb-auth-phone {
  font-size: 15px;
  color: var(--wb-muted);
  margin: 0 0 20px;
}
.wb-auth-phone strong { color: var(--wb-ink); letter-spacing: .04em; }

/* 註冊／忘記密碼的三步驟指示 */
.wb-steps {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}
.wb-steps li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #9aa1ac;
  padding-top: 10px;
  border-top: 2px solid var(--wb-line);
}
.wb-steps li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  background: #e6e8ec;
  color: #7d848f;
}
.wb-steps li.is-done { color: var(--wb-muted); border-top-color: var(--wb-accent); }
.wb-steps li.is-done span { background: var(--wb-accent); color: #fff; }
.wb-steps li.is-now { color: var(--wb-ink); font-weight: 700; }

.wb-field { margin-bottom: 18px; }
.wb-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--wb-ink);
  margin-bottom: 8px;
}
.wb-optional {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--wb-muted);
  border: 1px solid var(--wb-line);
  border-radius: 2px;
  padding: 1px 6px;
}
.wb-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--wb-ink);
  background: #fff;
  border: 1px solid #d3d7de;
  border-radius: 4px;
  transition: border-color .2s, box-shadow .2s;
}
.wb-input::placeholder { color: #aeb4bd; }
.wb-input:focus {
  outline: none;
  border-color: var(--wb-accent);
  box-shadow: 0 0 0 3px rgba(22, 104, 220, .14);
}
.wb-input-code { letter-spacing: .5em; font-size: 20px; text-align: center; }
/* Chrome 記住的帳密會用 -webkit-autofill 把底色洗成淺藍，跟白色輸入框差一階。
   背景色改不動（瀏覽器擋），只能用超大的 inset shadow 蓋掉。 */
.wb-input:-webkit-autofill,
.wb-input:-webkit-autofill:hover,
.wb-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--wb-ink);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  caret-color: var(--wb-ink);
  transition: background-color 9999s ease-in-out 0s;
}
.wb-help {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--wb-muted);
}
.wb-auth-submit { width: 100%; margin-top: 8px; }

/* 開發模式才會出現：驗證碼直接顯示在畫面上，串了簡訊商就不會再看到 */
.wb-devcode {
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px dashed #e0a800;
  border-radius: 6px;
  background: #fff9e6;
  text-align: center;
}
.wb-devcode-label {
  margin: 0 0 6px;
  font-size: 11.5px;
  letter-spacing: .14em;
  color: #9a6b00;
}
.wb-devcode-value {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .32em;
  color: var(--wb-ink);
}
.wb-devcode-note { margin: 0; font-size: 12px; color: #8a7746; }

.wb-auth-links {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--wb-line);
  text-align: center;
  font-size: 14px;
  color: var(--wb-muted);
}
.wb-auth-links a { color: var(--wb-ink); }
.wb-auth-links a:hover { color: var(--wb-accent); }
.wb-auth-sep { margin: 0 10px; }
.wb-inline-form { display: inline; }
.wb-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font-size: 14px;
  color: var(--wb-ink);
  cursor: pointer;
}
.wb-linkbtn:hover { color: var(--wb-accent); }

/* 會員中心 */
.wb-member-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.wb-member-title {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  color: var(--wb-ink);
  margin: 6px 0 8px;
  text-transform: none;   /* 版型把標題設成大寫，會把客戶姓名一起改掉 */
}
.wb-member-sub { font-size: 14px; color: var(--wb-muted); margin: 0; }
/* 白底頁的登出鈕：版型的 ghost 按鈕是給深色底用的（白框白字），這裡要換成深框深字 */
.wb-member-logout {
  padding: 10px 22px;
  font-size: 14px;
  border-color: #c9ced7;
  color: var(--wb-ink);
}
.wb-member-logout:hover,
.wb-member-logout:focus { background: var(--wb-ink); border-color: var(--wb-ink); color: #fff; }

.wb-note {
  padding: 18px 22px;
  margin-bottom: 26px;
  border-radius: 6px;
  border: 1px solid var(--wb-line);
  background: var(--wb-paper);
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--wb-muted);
}
.wb-note p { margin: 0; }
.wb-note-title { font-weight: 700; color: var(--wb-ink); margin-bottom: 6px !important; }
.wb-note-warn { border-color: #e8c04a; background: #fff9e6; color: #7a6528; }
.wb-note-warn .wb-note-title { color: #7a5b00; }

.wb-member-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-bottom: 40px;
}
.wb-member-grid-4 { grid-template-columns: repeat(4, 1fr); }
.wb-member-card {
  padding: 26px 26px 24px;
  border-radius: 8px;
  border: 1px solid var(--wb-line);
  background: var(--wb-paper);
  box-shadow: 0 10px 26px rgba(16, 17, 19, .05);
}
.wb-member-card-title { font-size: 17px; font-weight: 700; color: var(--wb-ink); margin: 0 0 16px; }
.wb-member-card-text { font-size: 13.5px; line-height: 1.9; color: var(--wb-muted); margin: 0 0 12px; }
.wb-member-empty { font-size: 14px; line-height: 1.9; color: var(--wb-muted); margin: 0; }
.wb-member-section-title { font-size: 18px; font-weight: 700; color: var(--wb-ink); margin: 40px 0 18px; }
/* 尚未開放的四張卡：白底上用虛線＋灰底表示「還沒好」，不要只靠降透明度 */
.wb-member-card-soon {
  background: #f8f9fa;
  border-style: dashed;
  border-color: #d6dae1;
  box-shadow: none;
}
.wb-member-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 18px;
  color: var(--wb-accent);
  background: rgba(22, 104, 220, .1);
}
.wb-member-card-soon .nav-soon-tag { color: var(--wb-muted); }

.wb-vehicle-list { list-style: none; padding: 0; margin: 0; }
.wb-vehicle {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--wb-line);
}
.wb-vehicle:last-child { border-bottom: 0; }
.wb-plate {
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--wb-ink);
  padding: 3px 10px;
  border: 1px solid #c9ced7;
  border-radius: 3px;
}
.wb-vehicle-name { font-size: 14.5px; color: var(--wb-ink); }
.wb-vehicle-color { font-size: 13px; color: var(--wb-muted); }

.wb-deflist { margin: 0; font-size: 14.5px; }
.wb-deflist dt {
  float: left;
  clear: left;
  width: 96px;
  font-weight: 400;
  color: var(--wb-muted);
  padding: 7px 0;
}
.wb-deflist dd {
  margin: 0 0 0 96px;
  padding: 7px 0;
  color: var(--wb-ink);
}

@media (max-width: 991px) {
  .wb-auth, .wb-member { padding: 120px 0 70px; }
  .wb-member-grid, .wb-member-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .wb-auth-card { padding: 32px 24px 28px; }
  .wb-member-grid, .wb-member-grid-4 { grid-template-columns: 1fr; }
  .wb-steps li { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   消費紀錄（wb-sumbar / wb-order）
   -------------------------------------------------------------------------- */
.wb-sumbar {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 22px 26px;
  margin-bottom: 26px;
  border-radius: 8px;
  border: 1px solid var(--wb-line);
  background: var(--wb-paper);
  box-shadow: 0 10px 26px rgba(16, 17, 19, .05);
}
.wb-sumbar-item { flex: 1 1 auto; min-width: 9rem; display: flex; flex-direction: column; gap: 4px; }
.wb-sumbar-num { font-size: 24px; font-weight: 800; color: var(--wb-ink); line-height: 1.2; }
.wb-sumbar-label { font-size: 13px; color: var(--wb-muted); }

.wb-order {
  padding: 20px 24px;
  margin-bottom: 16px;
  border-radius: 8px;
  border: 1px solid var(--wb-line);
  background: var(--wb-paper);
}
.wb-order-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.wb-order-when { display: flex; flex-direction: column; }
.wb-order-date { font-size: 16px; font-weight: 700; color: var(--wb-ink); }
.wb-order-no { font-size: 12px; color: var(--wb-muted); letter-spacing: .04em; }
.wb-order-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wb-order-store { font-size: 13px; color: var(--wb-muted); }
.wb-order-total { margin-left: auto; font-size: 20px; font-weight: 800; color: var(--wb-ink); }

.wb-order-table { width: 100%; border-collapse: collapse; }
.wb-order-table td { padding: 10px 0; border-bottom: 1px solid #f0f2f5; font-size: 14.5px; vertical-align: top; }
.wb-order-table tr:last-child td { border-bottom: 0; }
.wb-order-item { color: var(--wb-ink); }
.wb-order-cat { color: var(--wb-muted); font-size: 13px; white-space: nowrap; padding-left: 12px !important; }
.wb-order-amt { text-align: right; color: var(--wb-ink); white-space: nowrap; padding-left: 12px !important; }
/* 折價、優惠這類負數用紅字，跟後台訂單頁一致 */
.wb-order-table tr.is-minus .wb-order-item,
.wb-order-table tr.is-minus .wb-order-amt { color: #c0392b; }
.wb-order-nodetail { padding: 12px 0 14px; margin: 0; font-size: 14px; color: var(--wb-muted); }

.wb-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 26px 0 10px;
  font-size: 14px;
  color: var(--wb-muted);
}
.wb-pager-btn {
  padding: 8px 18px;
  border: 1px solid #c9ced7;
  border-radius: 4px;
  color: var(--wb-ink);
}
.wb-pager-btn:hover { background: var(--wb-ink); border-color: var(--wb-ink); color: #fff; }

@media (max-width: 575px) {
  .wb-order { padding: 16px; }
  .wb-order-total { margin-left: 0; width: 100%; }
  .wb-order-cat { display: none; }   /* 手機空間不夠，分類先讓位給項目與金額 */
}

/* 會員中心的消費紀錄摘要卡（整張可點，進消費紀錄頁） */
.wb-member-consume {
  display: block;
  margin-bottom: 40px;
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
.wb-member-consume:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(16, 17, 19, .1); }
.wb-consume-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.wb-consume-go { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--wb-accent); white-space: nowrap; }
/* 卡片裡面的摘要列不用再有自己的外框與陰影 */
.wb-sumbar-plain { border: 0; box-shadow: none; background: transparent; padding: 6px 0 0; margin: 0; }
.wb-member-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991px) { .wb-member-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .wb-member-grid-3 { grid-template-columns: 1fr; } }

/* ===== 訂單明細頁 member-order-detail ===== */
.wb-od-summary {
  background: var(--wb-ink); color: #fff; border-radius: 16px;
  padding: 22px 24px; margin: 0 0 28px;
}
.wb-od-summary-main { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.wb-od-summary-main .wb-plate { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }
.wb-od-summary-total { margin-left: auto; font-size: 26px; font-weight: 800; letter-spacing: .01em; }
.wb-od-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 24px; margin: 0; }
.wb-od-meta > div { display: flex; flex-direction: column; gap: 3px; }
.wb-od-meta dt { font-size: 12px; color: rgba(255,255,255,.55); margin: 0; }
.wb-od-meta dd { font-size: 15px; color: #fff; margin: 0; font-weight: 600; }

.wb-od-stages { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.wb-od-stage {
  border: 1px solid var(--wb-line); border-radius: 14px; background: var(--wb-paper);
  overflow: hidden;
}
.wb-od-stage[open] { box-shadow: 0 4px 20px rgba(16,17,19,.05); }
.wb-od-stage-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer;
  list-style: none; user-select: none;
}
.wb-od-stage-head::-webkit-details-marker { display: none; }
.wb-od-stage-name { font-size: 16px; font-weight: 700; color: var(--wb-ink); }
.wb-od-stage-tags { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-od-tag {
  font-size: 12px; color: var(--wb-muted); background: var(--wb-mist);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.wb-od-tag-media { color: var(--wb-accent-dk); background: #e8f1fd; }
.wb-od-tag-check { color: #0a7d43; background: #e6f6ec; }
.wb-od-chevron { color: var(--wb-muted); transition: transform .2s ease; font-size: 18px; }
.wb-od-stage[open] .wb-od-chevron { transform: rotate(180deg); }

.wb-od-stage-body { padding: 4px 18px 18px; border-top: 1px solid #f0f2f5; }
.wb-od-reports { list-style: none; margin: 0; padding: 6px 0 0; }
.wb-od-report { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid #f4f5f6; }
.wb-od-report:last-child { border-bottom: 0; }
.wb-od-report-time {
  flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--wb-accent);
  font-variant-numeric: tabular-nums; padding-top: 1px;
}
.wb-od-report-body { display: flex; flex-direction: column; gap: 3px; }
.wb-od-report-text { font-size: 14.5px; line-height: 1.7; color: var(--wb-ink); }
.wb-od-report-text .wb-var { font-weight: 700; color: var(--wb-ink); }
.wb-report-note { display: block; font-size: 13.5px; color: var(--wb-muted); margin-top: 2px; }
.wb-od-report-who { font-size: 12px; color: var(--wb-muted); }

.wb-od-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 14px 0 4px; }
.wb-od-thumb {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--wb-line); cursor: pointer; background: var(--wb-mist);
}
.wb-od-thumb:hover { opacity: .9; }

.wb-od-checks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.wb-od-check {
  font-size: 13px; color: var(--wb-ink); background: var(--wb-mist);
  border-radius: 10px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.wb-od-check-label { font-size: 12px; color: var(--wb-muted); font-weight: 600; }

.wb-od-pay-card { padding: 6px 20px 8px; }
.wb-od-pay { width: 100%; border-collapse: collapse; }
.wb-od-pay th { font-size: 12px; color: var(--wb-muted); font-weight: 600; text-align: left; padding: 12px 0; border-bottom: 1px solid var(--wb-line); }
.wb-od-pay td { font-size: 14.5px; color: var(--wb-ink); padding: 12px 0; border-bottom: 1px solid #f4f5f6; vertical-align: top; }
.wb-od-pay tbody tr:last-child td { border-bottom: 0; }
.wb-od-pay-amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.wb-od-pay tfoot td { padding: 12px 0; font-weight: 800; color: var(--wb-ink); border-top: 2px solid var(--wb-line); }

.wb-od-lightbox {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.86);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.wb-od-lightbox[hidden] { display: none; }
.wb-od-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.wb-od-lightbox-close {
  position: absolute; top: 16px; right: 20px; font-size: 40px; line-height: 1;
  color: #fff; background: none; border: 0; cursor: pointer;
}

@media (max-width: 640px) {
  .wb-od-summary { padding: 18px 18px; }
  .wb-od-summary-total { font-size: 22px; }
  .wb-od-meta { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .wb-od-stage-head { padding: 14px 14px; }
  .wb-od-stage-body { padding: 4px 14px 16px; }
  .wb-od-report-time { flex-basis: 40px; }
  .wb-od-pay-note { display: none; }
  .wb-od-media { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}
/* 消費紀錄列表：整卡可點進明細 */
.wb-order-link {
  display: block; text-decoration: none; color: inherit;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.wb-order-link:hover {
  box-shadow: 0 6px 24px rgba(16,17,19,.08); border-color: var(--wb-accent);
  transform: translateY(-1px); text-decoration: none;
}
/* 訂單明細：關卡內的 項目大類(item) → 項目(detail) → 細項回報 三層 */
.wb-od-item { margin-bottom: 20px; }
.wb-od-item:last-child { margin-bottom: 2px; }
.wb-od-item-title {
  font-size: 15px; font-weight: 800; color: var(--wb-ink);
  margin: 16px 0 4px; padding-left: 10px; border-left: 3px solid var(--wb-ink);
}
.wb-od-item-desc { font-size: 13px; color: var(--wb-muted); line-height: 1.75; margin: 0 0 10px; padding-left: 10px; }
.wb-od-detail { background: var(--wb-mist); border-radius: 12px; padding: 12px 15px; margin: 8px 0; }
.wb-od-detail-title {
  font-size: 14px; font-weight: 700; color: var(--wb-accent-dk);
  margin: 0 0 3px; padding-left: 9px; border-left: 3px solid var(--wb-accent);
}
.wb-od-detail-desc { font-size: 12.5px; color: var(--wb-muted); line-height: 1.65; margin: 3px 0 8px; padding-left: 9px; }
.wb-od-detail .wb-od-reports { padding-top: 2px; }
.wb-od-detail .wb-od-report { border-bottom-color: #e6e8ea; }
.wb-od-detail .wb-od-report:last-child { border-bottom: 0; }
.wb-od-detail .wb-od-media { margin: 10px 0 2px; }
/* 送洗檢查 客戶可操作表單 */
.wb-sw-badge { font-size: 12px; font-weight: 600; color: #fff; background: var(--wb-accent); padding: 3px 10px; border-radius: 999px; vertical-align: middle; margin-left: 6px; }
.wb-sw-card { padding: 18px 20px; }
.wb-sw-intro { font-size: 13.5px; color: var(--wb-muted); line-height: 1.7; margin: 0 0 16px; }
.wb-sw-item { margin-bottom: 18px; }
.wb-sw-item-title { font-size: 15px; font-weight: 800; color: var(--wb-ink); margin: 12px 0 4px; padding-left: 10px; border-left: 3px solid var(--wb-ink); }
.wb-sw-item-desc { font-size: 13px; color: var(--wb-muted); line-height: 1.75; margin: 0 0 12px; padding-left: 10px; }
.wb-sw-detail { background: var(--wb-mist); border-radius: 12px; padding: 12px 15px; margin: 10px 0; }
.wb-sw-detail-title { font-size: 14px; font-weight: 700; color: var(--wb-accent-dk); margin: 0 0 6px; padding-left: 9px; border-left: 3px solid var(--wb-accent); }
.wb-sw-detail-desc { font-size: 12.5px; color: var(--wb-muted); line-height: 1.65; margin: 0 0 10px; padding-left: 9px; }
.wb-sw-opt { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; margin: 4px 0; background: #fff; border: 1px solid var(--wb-line); border-radius: 10px; cursor: pointer; transition: border-color .15s; }
.wb-sw-opt:hover { border-color: var(--wb-accent); }
.wb-sw-check { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--wb-accent); cursor: pointer; }
.wb-sw-opt-label { font-size: 14.5px; line-height: 1.6; color: var(--wb-ink); }
/* 勾選後留下的「幾點、誰勾的」：整行的最後，不要跟選項文字搶注意力 */
.wb-sw-opt-meta { flex: 1 1 100%; margin-left: 28px; font-size: 11.5px; color: var(--wb-muted); }
.wb-sw-opt-sign .wb-sw-opt-meta { margin-left: 0; }
.wb-sw-opt-meta[hidden] { display: none; }
.wb-sw-opt-label .wb-var { font-weight: 700; }
.wb-sw-fill { display: inline-block; min-width: 90px; padding: 3px 8px; margin: 0 3px; font-size: 14px; border: 0; border-bottom: 2px solid var(--wb-accent); background: #eef4fe; border-radius: 4px 4px 0 0; }
.wb-sw-fill:focus { outline: none; background: #dfeafe; }
.wb-sw-text { display: block; width: 100%; margin: 6px 0 2px; padding: 8px 10px; font-size: 14px; font-family: inherit; border: 1px solid var(--wb-line); border-radius: 8px; resize: vertical; min-height: 52px; }
.wb-sw-opt-sign { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px dashed var(--wb-accent); border-radius: 10px; margin: 4px 0; }
.wb-sw-sign-btn { font-size: 14px; font-weight: 600; color: #fff; background: var(--wb-accent); border: 0; border-radius: 8px; padding: 9px 18px; cursor: pointer; }
.wb-sw-sign-btn:hover { background: var(--wb-accent-dk); }
.wb-sw-sign-preview { height: 60px; border: 1px solid var(--wb-line); border-radius: 6px; background: #fff; }
.wb-sw-status { text-align: right; font-size: 13px; margin: 12px 0 0; min-height: 18px; color: var(--wb-muted); }
.wb-sw-status.is-ok { color: #0a7d43; }
.wb-sw-status.is-err { color: #c0392b; }
.wb-sw-status.is-saving { color: var(--wb-muted); }
/* 簽名彈窗 */
.wb-sign-modal { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 20px; }
.wb-sign-modal[hidden] { display: none; }
.wb-sign-box { background: #fff; border-radius: 14px; padding: 18px; width: 100%; max-width: 460px; }
.wb-sign-box h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: var(--wb-ink); }
.wb-sign-box p { font-size: 13px; color: var(--wb-muted); margin: 0 0 12px; }
.wb-sign-pad { width: 100%; height: 200px; border: 2px dashed var(--wb-line); border-radius: 10px; touch-action: none; background: #fff; }
.wb-sign-actions { display: flex; gap: 10px; margin-top: 14px; }
.wb-sign-actions button { flex: 1; font-size: 14px; font-weight: 600; padding: 10px; border-radius: 8px; cursor: pointer; border: 1px solid var(--wb-line); background: #fff; color: var(--wb-ink); }
.wb-sign-actions .wb-sign-save { background: var(--wb-accent); color: #fff; border-color: var(--wb-accent); }
/* 會員中心：進行中的服務 */
.wb-active-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.wb-active-card { display: block; text-decoration: none; color: inherit; background: var(--wb-paper); border: 1px solid var(--wb-line); border-left: 4px solid var(--wb-accent); border-radius: 14px; padding: 16px 18px; transition: box-shadow .18s, transform .18s; }
.wb-active-card:hover { box-shadow: 0 6px 24px rgba(16,17,19,.08); transform: translateY(-1px); text-decoration: none; }
.wb-active-main { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.wb-active-badge { font-size: 12px; font-weight: 600; color: #fff; background: var(--wb-accent); padding: 3px 10px; border-radius: 999px; }
.wb-active-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--wb-muted); }
/* 送洗檢查 確認送出 / 鎖定 */
.wb-sw-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.wb-sw-fieldset:disabled { opacity: .6; }
.wb-sw-badge.is-locked { background: #0a7d43; }
.wb-sw-locked-banner { display: flex; align-items: center; gap: 8px; background: #e6f6ec; color: #0a7d43; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; font-weight: 600; margin-bottom: 16px; }
.wb-sw-confirm-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--wb-line); flex-wrap: wrap; }
.wb-sw-confirm-row .wb-sw-status { margin: 0; text-align: left; flex: 1 1 auto; }
.wb-sw-confirm-btn { font-size: 15px; font-weight: 700; color: #fff; background: var(--wb-accent); border: 0; border-radius: 10px; padding: 12px 30px; cursor: pointer; white-space: nowrap; }
.wb-sw-confirm-btn:hover { background: var(--wb-accent-dk); }

.wb-sw-sign-preview { cursor: pointer; }
/* 送洗檢查 已確認唯讀確認單 */
.wb-sw-readonly { padding: 18px 20px; }
.wb-sw-ro-detail { margin-bottom: 14px; }
.wb-sw-ro-detail:last-of-type { margin-bottom: 4px; }
.wb-sw-ro-detail .wb-sw-detail-title { margin-bottom: 4px; }
.wb-sw-ro-line { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0 7px 9px; flex-wrap: wrap; }
.wb-sw-ro-tick { color: #0a7d43; margin-top: 3px; flex: 0 0 auto; font-size: 14px; }
.wb-sw-ro-text { font-size: 14.5px; line-height: 1.65; color: var(--wb-ink); }
.wb-sw-ro-text .wb-var { font-weight: 700; color: var(--wb-ink); }

.wb-sw-stage { margin-bottom: 12px; }
.wb-sw-body { padding-top: 14px; }
.wb-sw-body .wb-sw-item:first-child .wb-sw-item-title { margin-top: 0; }
.wb-sw-tag-todo { color: var(--wb-accent-dk); background: #e8f1fd; }

/* 訂單明細 服務項目清單 */
.wb-od-svc-card { padding: 6px 20px 8px; }
.wb-od-svc { width: 100%; border-collapse: collapse; }
.wb-od-svc td { font-size: 14.5px; color: var(--wb-ink); padding: 12px 0; border-bottom: 1px solid #f4f5f6; vertical-align: top; }
.wb-od-svc tbody tr:last-child td { border-bottom: 0; }
.wb-od-svc-item { color: var(--wb-ink); }
.wb-od-svc-cat { color: var(--wb-muted); font-size: 13px; white-space: nowrap; padding-left: 12px !important; }
.wb-od-svc-amt { text-align: right; white-space: nowrap; padding-left: 12px !important; font-variant-numeric: tabular-nums; }
.wb-od-svc tr.is-minus .wb-od-svc-item, .wb-od-svc tr.is-minus .wb-od-svc-amt { color: #c0392b; }
.wb-od-svc tfoot td { padding: 12px 0; font-weight: 800; color: var(--wb-ink); border-top: 2px solid var(--wb-line); }
.wb-sw-ro-meta { margin-left: auto; padding-left: 12px; font-size: 12px; color: var(--wb-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 訂單明細 預約通知 */
.wb-od-notify { padding: 18px 20px; }
.wb-od-notify-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.wb-od-notify-title { font-size: 15px; font-weight: 700; color: var(--wb-ink); }
.wb-od-notify-msg { font-size: 14px; line-height: 1.75; color: var(--wb-ink); background: var(--wb-mist); border-radius: 10px; padding: 14px 16px; margin: 0; }

/* 訂單明細 施工進度 */
.wb-od-prog { padding: 18px 20px; }
.wb-od-prog-delivery { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--wb-line); }
.wb-od-prog-delivery-label { font-size: 13px; color: var(--wb-muted); }
.wb-od-prog-delivery-val { font-size: 20px; font-weight: 800; color: var(--wb-ink); }
.wb-od-prog-delivery-val.is-crossday { color: #c0392b; }
.wb-od-prog-list { list-style: none; margin: 0; padding: 0; }
.wb-od-prog-item { margin-bottom: 14px; }
.wb-od-prog-item:last-child { margin-bottom: 0; }
.wb-od-prog-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.wb-od-prog-name { font-size: 14px; font-weight: 600; color: var(--wb-ink); }
.wb-od-prog-pct { font-size: 13px; color: var(--wb-muted); font-variant-numeric: tabular-nums; }
.wb-od-prog-bar { height: 8px; background: var(--wb-mist); border-radius: 999px; overflow: hidden; }
.wb-od-prog-bar span { display: block; height: 100%; background: var(--wb-accent); border-radius: 999px; transition: width .4s ease; }
.wb-od-prog-bar.is-done span { background: #0a7d43; }

/* 到府牽車 牽車進度 */
.wb-od-pickup-track { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--wb-line); }
.wb-od-pickup-track-title { font-size: 13px; font-weight: 700; color: var(--wb-muted); margin-bottom: 8px; }
.wb-od-pickup-step { font-size: 14px; color: var(--wb-ink); padding: 5px 0; }
.wb-od-pickup-step-tick { color: #0a7d43; margin-right: 6px; }

/* 付款明細 收款紀錄 */
.wb-od-pay-received { margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--wb-line); }
.wb-od-pay-received-title { font-size: 13px; font-weight: 700; color: var(--wb-muted); margin-bottom: 8px; }
.wb-od-pay-received-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 14px; color: var(--wb-ink); }
.wb-od-pay-received-time { color: var(--wb-muted); font-size: 13px; }
.wb-od-pay-received-amt { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.wb-od-pay-unpaid { margin: 14px 0 2px; font-size: 14px; color: var(--wb-muted); }

/* sticky/fixed header 背景改不透明，避免捲動時下方內容透出、蓋到選單 */
.rd-navbar.rd-navbar-original,
.rd-navbar-fixed,
.rd-navbar-static.rd-navbar--is-stuck { background-color: rgb(44, 45, 46) !important; }

/* header 所有狀態(含頂部大版 static/absolute)背景一律不透明,避免捲動時內容透出蓋選單 */
.rd-navbar.novi-bg,
.rd-navbar-wrap-absolute .rd-navbar,
.rd-navbar-static,
.rd-navbar-static .rd-navbar-main,
.rd-navbar-original { background-color: rgb(44, 45, 46) !important; }

/* header 層級防禦：不論 sticky 是否觸發，wrap/navbar 都必須在內容之上且不透明。
   版型原本 .rd-navbar-wrap-absolute 只有 z-index:2，捲動時 sticky 若沒即時切換，
   後方 position:relative 的區塊(如六大安心承諾)就會壓在選單上面。 */
.rd-navbar-wrap { z-index: 1080 !important; }
.rd-navbar-wrap-absolute { z-index: 1080 !important; }
.rd-navbar { z-index: 1080 !important; }
.rd-navbar-main { position: relative; z-index: 1080; }

/* 送洗檢查 時間填寫三件組(日期+時+分,30分級距) */
.wb-sw-time { display: inline-flex; align-items: center; gap: 5px; margin: 0 4px; vertical-align: middle; }
.wb-sw-time-d, .wb-sw-time-h, .wb-sw-time-m { padding: 4px 7px; font-size: 14px; font-family: inherit; color: var(--wb-ink); border: 0; border-bottom: 2px solid var(--wb-accent); background: #eef4fe; border-radius: 4px 4px 0 0; cursor: pointer; }
.wb-sw-time-d:focus, .wb-sw-time-h:focus, .wb-sw-time-m:focus { outline: none; background: #dfeafe; }
.wb-sw-time-sep { font-weight: 700; color: var(--wb-muted); }

/* ===== 線上預約 member-booking ===== */
.wb-bk-step { padding: 20px 22px; margin-bottom: 16px; }
.wb-bk-step-title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; color: var(--wb-ink); margin: 0 0 14px; }
.wb-bk-no { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--wb-accent); color: #fff; font-size: 14px; font-weight: 700; }
.wb-bk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.wb-bk-field { display: flex; flex-direction: column; gap: 5px; }
.wb-bk-label { font-size: 13px; font-weight: 600; color: var(--wb-muted); }
.wb-bk-input { width: 100%; padding: 10px 12px; font-size: 15px; font-family: inherit; color: var(--wb-ink); border: 1px solid var(--wb-line); border-radius: 9px; background: #fff; }
.wb-bk-input:focus { outline: none; border-color: var(--wb-accent); }
select.wb-bk-input { cursor: pointer; }
textarea.wb-bk-input { resize: vertical; }
.wb-bk-time { display: flex; align-items: center; gap: 6px; }
.wb-bk-time .wb-bk-input { min-width: 80px; }
.wb-bk-sep { font-weight: 700; color: var(--wb-muted); }
.wb-bk-hint { font-size: 13px; color: var(--wb-muted); line-height: 1.7; margin: 10px 0 0; }

/* 開放時段（2026-08-31 取代原本的「時:分」兩個下拉）
   時段是按鈕不是 select：要同時顯示名稱、時間、還能收幾台，
   而且額滿/已過的要看得出來但不能按，select 做不到這些。 */
.wb-bk-field-slots { grid-column: 1 / -1; }
.wb-bk-slots { display: flex; flex-wrap: wrap; gap: 10px; }
.wb-bk-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 150px; padding: 10px 14px; font-family: inherit; text-align: left;
  border: 1px solid var(--wb-line); border-radius: 9px; background: #fff; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s; }
.wb-bk-slot:hover:not([disabled]) { border-color: var(--wb-accent); }
.wb-bk-slot.is-active { border-color: var(--wb-accent); background: rgba(31,111,235,.06);
  box-shadow: 0 0 0 1px var(--wb-accent) inset; }
.wb-bk-slot[disabled] { cursor: not-allowed; opacity: .55; background: #f6f7f9; }
.wb-bk-slot-name { font-size: 15px; font-weight: 700; color: var(--wb-ink); }
.wb-bk-slot-time { font-size: 12px; color: var(--wb-muted); }
.wb-bk-slot-status { font-size: 12px; font-weight: 600; color: var(--wb-accent); margin-top: 2px; }
.wb-bk-slot.is-full .wb-bk-slot-status,
.wb-bk-slot[disabled] .wb-bk-slot-status { color: #b4262c; }
.wb-bk-slot-soon { font-size: 12px; font-weight: 600; color: #b06a00; }

/* 點數使用 / 完善資料（2026-08-31）
   刻意不編號、底色略淡：這兩塊是選填的加分項，不是預約必經步驟，
   編號會讓客戶以為不填就不能送出。 */
.wb-bk-bonus { background: #fbfcfe; }
.wb-bk-bonus .wb-bk-step-title { align-items: center; }
.wb-bk-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: #eef3fb; color: var(--wb-accent); font-size: 14px; }
.wb-bk-optional { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--wb-muted);
  background: #eef1f6; border-radius: 5px; padding: 2px 8px; }
.wb-bk-optional.is-gift { color: #b06a00; background: #fff4e0; }

.wb-bk-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.wb-bk-point { flex: 1 1 200px; border: 1px solid var(--wb-line); border-radius: 9px; padding: 10px 12px; background: #fff; }
.wb-bk-point-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wb-bk-point-name { font-size: 14px; font-weight: 700; color: var(--wb-ink); }
.wb-bk-point-amt { font-size: 16px; font-weight: 800; color: var(--wb-accent); white-space: nowrap; }
.wb-bk-point-scope { font-size: 12px; color: var(--wb-muted); margin-top: 2px; }
.wb-bk-point-note { font-size: 12px; color: #b06a00; margin-top: 2px; }

.wb-bk-quests { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.wb-bk-quest { display: flex; flex-direction: column; gap: 5px; }
.wb-bk-quest-q { font-size: 13px; font-weight: 600; color: var(--wb-ink); display: flex; align-items: baseline; gap: 6px; }
.wb-bk-quest-pt { font-size: 12px; font-weight: 700; color: #b06a00; white-space: nowrap; }
.wb-bk-quest textarea.wb-bk-input { resize: vertical; }
.wb-bk-slot-loading { font-size: 14px; color: var(--wb-muted); }
/* 整天不營業：這是「今天約不到」而不是「載入中」，要一眼看得出差別 */
.wb-bk-slot-closed { display: inline-block; padding: 10px 14px; font-size: 14px; font-weight: 600;
  color: #b4262c; background: #fdf2f2; border: 1px solid #f3d3d3; border-radius: 9px; }

@media (max-width: 575px) {
  .wb-bk-slot { flex: 1 1 100%; min-width: 0; }
}

.wb-bk-vehicles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 12px; }
.wb-bk-vehicle { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--wb-line); border-radius: 11px; transition: border-color .15s; }
.wb-bk-vehicle:hover { border-color: var(--wb-accent); }
.wb-bk-vehicle-main { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.wb-bk-vehicle-radio { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--wb-accent); cursor: pointer; }
.wb-bk-vehicle-body { display: flex; flex-direction: column; gap: 4px; }
.wb-bk-vehicle-name { font-size: 13.5px; color: var(--wb-muted); }
.wb-bk-vehicle-tier { font-size: 12px; color: var(--wb-accent-dk); background: #e8f1fd; border-radius: 999px; padding: 2px 9px; align-self: flex-start; }
/* 車型別待門市確認 / 還沒選車款 */
.wb-bk-vehicle-tier.is-pending { color: #8a6100; background: #fdf1d6; }
.wb-bk-vehicle-tier.is-need { color: #a63328; background: #fdeae8; }
.wb-bk-vehicle-fill { align-self: flex-start; }

.wb-bk-addcar-toggle { font-size: 14px; font-weight: 600; color: var(--wb-accent); background: none; border: 1px dashed var(--wb-accent); border-radius: 9px; padding: 9px 16px; cursor: pointer; }
.wb-bk-addcar-toggle:hover { background: #eef4fe; }
.wb-bk-addcar { margin-top: 14px; padding: 14px; background: var(--wb-mist); border-radius: 11px; }
.wb-bk-addcar-save { margin-top: 12px; }
/* 車款選擇器：車型別由車款決定，客戶只選車款 */
.wb-bk-plate-row { max-width: 300px; }
.wb-bk-carform-title { font-size: 15px; font-weight: 700; color: var(--wb-ink); margin: 0 0 12px; }
.wb-bk-carform-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.wb-bk-link { font-size: 13.5px; font-weight: 600; color: var(--wb-accent); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.wb-bk-link:hover { color: var(--wb-accent-dk); }
.wb-bk-inline-msg { font-size: 12.5px; color: var(--wb-muted); min-height: 16px; }
.wb-bk-inline-msg.is-err { color: #c0392b; }
.wb-bk-inline-msg.is-note { color: #0a7d43; }
.wb-bk-typerow { margin-top: 12px; }
.wb-bk-typepick { display: flex; gap: 10px; }
.wb-bk-type { display: flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--wb-line); border-radius: 9px; background: #fff; font-size: 14.5px; color: var(--wb-ink); cursor: pointer; }
.wb-bk-type input { width: 17px; height: 17px; accent-color: var(--wb-accent); cursor: pointer; }
.wb-bk-type:has(input:checked) { border-color: var(--wb-accent); background: #eef4fe; }
.wb-bk-catalog { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.wb-bk-catalog-result { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; padding: 8px; background: #fff; border: 1px solid var(--wb-line); border-radius: 9px; }
.wb-bk-catopt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 11px; font-size: 14px; font-family: inherit; text-align: left; color: var(--wb-ink); background: none; border: none; border-radius: 7px; cursor: pointer; }
.wb-bk-catopt:hover { background: #eef4fe; }
.wb-bk-catopt-tier { flex: 0 0 auto; font-size: 12px; color: var(--wb-accent-dk); background: #e8f1fd; border-radius: 999px; padding: 2px 9px; }
.wb-bk-picked { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; padding: 10px 12px; font-size: 14px; color: var(--wb-ink); background: #eef7f0; border-radius: 9px; }
.wb-bk-manual { margin-top: 14px; padding: 14px; background: #fff8e6; border-radius: 11px; }
.wb-bk-warn { color: #8a6100; }

.wb-bk-directions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 12px; }
.wb-bk-directions > .wb-bk-hint { grid-column: 1 / -1; margin: 0; }
.wb-bk-dir { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--wb-line); border-radius: 11px; cursor: pointer; font-size: 15px; color: var(--wb-ink); transition: border-color .15s; }
.wb-bk-dir:hover { border-color: var(--wb-accent); }
.wb-bk-dir input { width: 18px; height: 18px; accent-color: var(--wb-accent); cursor: pointer; }

/* 選車後的歷史服務快捷帶入：三種來源分開，避免客戶把「做過／建議／承諾」混為一談。 */
.wb-bk-quick { padding: 18px 22px; border-color: #cfe0f5; background: #f8fbff; }
.wb-bk-quick .wb-bk-step-title { margin-bottom: 4px; }
.wb-bk-quick > .wb-bk-hint { margin: 0 0 12px; }
.wb-bk-quick-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wb-bk-quick-group { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--wb-line); border-radius: 10px; }
.wb-bk-quick-group h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 10px 12px;
  font-size: 14px; font-weight: 800; color: var(--wb-ink); background: #eef4fc; border-bottom: 1px solid var(--wb-line); }
.wb-bk-quick-group h3 > i { color: var(--wb-accent); }
.wb-bk-quick-ref { display: block; flex-basis: 100%; padding-left: 21px; font-size: 11px; font-weight: 500; color: var(--wb-muted); }
.wb-bk-quick-list { padding: 7px; }
.wb-bk-quick-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border-radius: 8px; cursor: pointer; }
.wb-bk-quick-item:hover { background: #f3f7fc; }
.wb-bk-quick-check { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--wb-accent); cursor: pointer; }
.wb-bk-quick-text { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; min-width: 0; }
.wb-bk-quick-text strong { font-size: 13.5px; color: var(--wb-ink); }
.wb-bk-quick-category { font-size: 11.5px; color: var(--wb-muted); }
.wb-bk-quick-badge { font-size: 10.5px; font-weight: 700; color: #17643b; background: #e9f8ef; border-radius: 999px; padding: 2px 7px; }
.wb-bk-quick-empty { margin: 0; padding: 9px 8px; font-size: 12.5px; color: var(--wb-muted); }

.wb-bk-check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--wb-ink); cursor: pointer; }
.wb-bk-check input { width: 18px; height: 18px; accent-color: var(--wb-accent); cursor: pointer; }
.wb-bk-pickup { margin-top: 14px; padding: 14px; background: var(--wb-mist); border-radius: 11px; display: flex; flex-direction: column; gap: 12px; }
.wb-bk-pickup-note { margin: 0; color: var(--wb-accent-dk); }
.wb-bk-community-wrap { position: relative; }
.wb-bk-community-suggestions { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 230px; overflow-y: auto; padding: 4px; background: #fff; border: 1px solid var(--wb-line);
  border-radius: 9px; box-shadow: 0 10px 28px rgba(25, 36, 55, .14); }
.wb-bk-community-option { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 9px 10px; font-family: inherit; text-align: left; color: var(--wb-ink);
  background: #fff; border: 0; border-radius: 7px; cursor: pointer; }
.wb-bk-community-option:hover, .wb-bk-community-option:focus { outline: none; background: #eef4fe; }
.wb-bk-community-option strong { font-size: 14px; }
.wb-bk-community-option span { font-size: 12px; color: var(--wb-muted); }
.wb-bk-community-help { font-size: 12px; line-height: 1.5; color: var(--wb-muted); }
.wb-bk-note-field { margin-top: 16px; }

.wb-bk-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 6px 0 30px; }
.wb-bk-status { flex: 1 1 auto; margin: 0; font-size: 14px; color: var(--wb-muted); }
.wb-bk-status.is-err { color: #c0392b; }
.wb-bk-status.is-ok { color: #0a7d43; }
.wb-bk-submit { font-size: 16px; padding: 13px 34px; }

@media (max-width: 640px) {
  .wb-bk-step { padding: 16px 16px; }
  .wb-bk-grid { grid-template-columns: 1fr; }
  .wb-bk-vehicles, .wb-bk-directions { grid-template-columns: 1fr; }
  .wb-bk-submit { width: 100%; }
  .wb-bk-typepick { flex-direction: column; }
  .wb-bk-type { justify-content: flex-start; }
  .wb-bk-catalog-result { max-height: 220px; }
  .wb-bk-catopt { flex-direction: column; align-items: flex-start; gap: 4px; }
  .wb-bk-quick-groups { grid-template-columns: 1fr; }
}

/* 會員中心 頁首按鈕組(線上預約+登出) */
.wb-member-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── 我的資料（member-profile.php）───────────────────────────── */
.wb-profile-form .wb-member-card { margin-bottom: 20px; }
.wb-form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 16px;
}
.wb-form-grid .wb-field { margin-bottom: 16px; }
.wb-col-full    { grid-column: span 4; }
.wb-col-wide    { grid-column: span 3; }
.wb-col-half    { grid-column: span 2; }
.wb-col-quarter { grid-column: span 1; }
.wb-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%237d848f' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px;
  padding-right: 34px;
}
.wb-input[readonly] { background: var(--wb-mist); color: var(--wb-muted); cursor: not-allowed; }
.wb-profile-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.wb-profile-actions .wb-help { margin: 0; flex: 1 1 240px; }

@media (max-width: 900px) {
  .wb-form-grid { grid-template-columns: repeat(2, 1fr); }
  .wb-col-full, .wb-col-wide { grid-column: span 2; }
  .wb-col-half { grid-column: span 2; }
  .wb-col-quarter { grid-column: span 1; }
}
@media (max-width: 560px) {
  .wb-form-grid { grid-template-columns: 1fr; }
  .wb-col-full, .wb-col-wide, .wb-col-half, .wb-col-quarter { grid-column: span 1; }
  .wb-profile-actions .wb-btn { width: 100%; }
}

/* 會員中心 帳號資訊卡的編輯入口 */
.wb-member-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wb-card-edit { font-size: 13.5px; color: var(--wb-accent); white-space: nowrap; }
.wb-card-edit:hover { color: var(--wb-accent-dk); }
.wb-card-edit .fa { margin-right: 5px; }

/* ── 我的車輛（member-vehicles.php）──────────────────────────── */
/* 型錄那一排要平均三等份，主格線是四欄塞不下，所以這一區自己用三欄格線 */
.wb-mv-catalog .wb-form-grid { grid-template-columns: repeat(3, 1fr); }
.wb-mv-catalog .wb-col-third { grid-column: span 1; }
.wb-required { color: #c0392b; }
.wb-mv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wb-mv-item {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--wb-line); border-radius: 11px; background: #fff;
}
.wb-mv-item.is-editing { border-color: var(--wb-accent); background: #f5f9ff; }
.wb-mv-main { flex: 1 1 260px; min-width: 0; }
.wb-mv-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wb-mv-tag { font-size: 12px; color: #7a6528; background: #fff3d1; border-radius: 999px; padding: 2px 10px; }
.wb-mv-name { font-size: 15px; color: var(--wb-ink); margin-top: 4px; }
.wb-mv-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; font-size: 13px; color: var(--wb-muted); }
.wb-mv-hint { margin-top: 6px; font-size: 12.5px; color: var(--wb-accent-dk); }
.wb-mv-edit {
  flex: 0 0 auto; padding: 8px 20px;
  color: var(--wb-ink); background: #fff; border: 1px solid var(--wb-line);
}
.wb-mv-edit:hover { color: var(--wb-accent-dk); border-color: var(--wb-accent); background: #fff; }

.wb-mv-typepick { display: flex; gap: 10px; }
.wb-mv-type {
  display: flex; align-items: center; gap: 8px; flex: 1;
  padding: 10px 14px; border: 1px solid var(--wb-line); border-radius: 9px; cursor: pointer; font-size: 15px;
}
.wb-mv-type:hover { border-color: var(--wb-accent); }
.wb-mv-type input { width: 18px; height: 18px; accent-color: var(--wb-accent); cursor: pointer; }

.wb-mv-catalog { margin: 4px 0 18px; padding: 16px; background: var(--wb-mist); border-radius: 11px; }
.wb-mv-picked { margin: 10px 0 0; padding: 10px 12px; font-size: 14px; color: var(--wb-ink); background: #eef7f0; border-radius: 9px; }
.wb-mv-link { margin-top: 10px; padding: 0; font-size: 14px; font-family: inherit; color: var(--wb-accent); background: none; border: none; cursor: pointer; }
.wb-mv-link:hover { color: var(--wb-accent-dk); }
.wb-mv-manual { margin-top: 12px; padding: 14px; background: #fff8e6; border-radius: 9px; }
.wb-mv-manual-note { margin: 0 0 10px; font-size: 13.5px; color: #8a6100; }
.wb-mv-noresult { margin: 0; padding: 8px; font-size: 14px; color: var(--wb-muted); }
.wb-mv-detail { margin-top: 4px; }

@media (max-width: 560px) {
  .wb-mv-catalog .wb-form-grid { grid-template-columns: 1fr; }
  .wb-mv-typepick { flex-direction: column; }
  .wb-mv-edit { width: 100%; }
}

/* 牽車進度底下的現場照片：縮圖比施工紀錄小一點，避免把進度時間軸撐開 */
.wb-od-pickup-media { margin: 8px 0 14px 22px; }
.wb-od-pickup-media .wb-od-thumb { width: 84px; height: 84px; }

/* 訂單明細：關卡狀態與尚未進行的項目（客戶要看得出流程走到哪，沒做的也要列出來） */
.wb-od-tag-doing { background: #e8f1fd; color: var(--wb-accent-dk); }
.wb-od-tag-todo { background: #f0f2f6; color: #9aa3b4; }
.wb-od-stage.is-todo .wb-od-stage-name { color: var(--wb-muted); }
.wb-od-detail-todo { margin: 0; font-size: 13.5px; color: #9aa3b4; }
.wb-od-detail-todo .fa { margin-right: 5px; }
.wb-od-stage-empty { margin: 0; font-size: 14px; color: var(--wb-muted); }