:root {
  --primary: #004aad;
  --primary-dark: #00337a;
  --primary-light: #e8f1fd;
  --accent: #ff9100;
  --accent-hover: #e07f00;
  --dark: #1e293b;
  --darker: #0f172a;
  --light-bg: #f1f5f9;
  --card-bg: #ffffff;
  --text-main: #334155;
  --text-gray: #64748b;
  --border-color: #e2e8f0;
  --success: #10b981;
  --danger: #dc2626;
}

/* 全站字體：避免只有導覽列用 Inter、其他地方還是瀏覽器預設字體造成不一致。
   :not(.admin-body) 排除後台 */
body:not(.admin-body) {
  font-family: 'Inter', 'PingFang TC', sans-serif;
  line-height: 1.7;
  background-color: #f8fafc;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-footer {
  margin-top: auto;
}

/* 課程簡介頁用白底，跟其他頁面的淺灰底做區隔 */
body.courses-detail-page {
  background-color: #ffffff;
}

/* 前台導覽列 */
.site-navbar {
  background: #ffffff;
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  padding-top: 10px;
  padding-bottom: 10px;
}

.site-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--primary);
}

.site-navbar .nav-link {
  color: var(--dark) !important;
  font-weight: 500;
  font-size: 0.95rem;
}

.site-navbar .nav-link:hover {
  color: var(--primary) !important;
}

.site-navbar .nav-link.active-link {
  color: var(--primary) !important;
  font-weight: 700;
}

/* 登入後導覽列右側：購物車圖示 + 會員圖示（滑動顯示選單） */
.nav-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px !important;
}

/* .nav-item 預設是純 li（非 flex），如果內容高度不同（例如購物車 20px icon
   跟 26px 圓形頭像放在一起），在 stretch 過的 li 裡會各自貼齊頂端而不是垂直
   置中，視覺上會像購物車偏高；這裡讓每個 nav-item 自己垂直置中內容 */
.site-navbar .navbar-nav > .nav-item {
  display: flex;
  align-items: center;
}

.member-dropdown-item {
  display: block;
  padding: 8px 16px;
  font-size: 0.9rem;
  color: var(--dark);
  text-decoration: none;
}

.member-dropdown-item:hover {
  background: var(--light-bg);
  color: var(--primary);
}

.member-dropdown-item.active-link {
  color: var(--primary);
  font-weight: 700;
}

@media (max-width: 991.98px) {
  .navbar-toggler-hide-mobile {
    display: none !important;
  }
}

/* 登入後手機版導覽列：購物車 + 會員頭像 + 選單（三橫線）圖示。
   選單圖示只在手機版出現，點開後從左側滑出全高的抽屜選單 */
.site-menu-mobile {
  position: relative;
  margin-left: 6px;
}

.site-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 29;
}

.site-menu-mobile.open .site-menu-backdrop {
  display: block;
}

.site-menu-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 78%;
  max-width: 300px;
  background: var(--card-bg);
  box-shadow: 8px 0 24px rgba(0,0,0,0.12);
  z-index: 30;
  overflow-y: auto;
  padding: 8px 0;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}

.site-menu-mobile.open .site-menu-panel {
  transform: translateX(0);
}

.site-menu-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 8px;
}

.site-menu-panel-title {
  font-weight: 700;
  color: var(--dark);
  font-size: 0.95rem;
}

.site-menu-panel-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-gray);
  cursor: pointer;
  padding: 4px;
}

.site-menu-panel .member-dropdown-item {
  padding: 14px 20px;
  font-size: 1rem;
}

.site-menu-panel-divider {
  height: 1px;
  background: var(--border-color);
  margin: 8px 0;
}

.site-navbar .navbar-nav .nav-link.cta-login {
  color: white !important;
  background: var(--primary);
  border-radius: 6px;
  padding: 6px 14px !important;
  margin-left: 4px;
}

.site-navbar .navbar-nav .nav-link.cta-login:hover {
  background: var(--primary-dark);
  color: white !important;
}

/* 前台頁尾：三欄＝關於我們／顧客服務／客服中心追蹤艾索
   三欄下面再放信用卡付款圖示列＋版權列 */
.site-footer {
  background: var(--dark);
  color: #cbd5e1;
  /* 左右留白跟 .course-carousel/.categories 用同一個 max(5%, 64px) 公式 */
  padding: 50px max(5%, 64px) 20px;
  margin-top: 20px;
}

.footer-container {
  max-width: 1150px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid #334155;
}

.footer-info h4,
.footer-links h4,
.footer-social h4 {
  color: white;
  font-size: 1.1rem;
  margin-bottom: 15px;
}

.footer-info p {
  margin-bottom: 8px;
}

/* 地址下方備注，字級比一般內文小一階、顏色更淺 */
.footer-note {
  font-size: 0.82rem;
  color: #94a3b8;
  margin-top: 4px;
}

.footer-note a {
  color: #cbd5e1;
  text-decoration: none;
}

.footer-note a:hover {
  color: #fff;
  text-decoration: underline;
}

/* 顧客服務欄：隱私政策／服務條款連結 */
.footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: #cbd5e1;
  text-decoration: none;
}

.footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}

/* 客服中心／追蹤艾索欄 */
.footer-social p {
  margin-bottom: 8px;
}

.footer-social .line-hint {
  margin-top: 16px;
  font-size: 0.88rem;
  color: #e2e8f0;
}

.line-btn {
  display: inline-block;
  margin-top: 10px;
  background: #06C755;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
}

.line-btn:hover {
  background: #05a648;
}

/* 信用卡付款 VISA／Mastercard／JCB 官方圖示
   靠左對齊，統一放進同樣大小的白底圓角小卡片 */
.footer-payment {
  max-width: 1150px;
  margin: 20px auto 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.payment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 57px;
  height: 37px;
  border-radius: 4px;
  background: #ffffff;
  padding: 5px 7px;
}

.payment-badge img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.footer-bottom {
  max-width: 1150px;
  margin: 20px auto 0;
  text-align: center;
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  .footer-container {
    grid-template-columns: 1fr;
  }

  .footer-payment {
    justify-content: flex-start;
    padding: 0 5%;
  }
}

/* 首頁英雄區 */
.hero {
  background: linear-gradient(135deg, #004aad 0%, #042d61 100%);
  color: #fff;
  padding: 100px 5%;
  text-align: center;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

/* 首頁輪播圖：沒有設定任何輪播圖時，退回上面純文字的 .hero 區塊。
   aspect-ratio 要跟後台建議上傳比例一致，圖片才不會被裁；
   目前使用 1600×480。max-height 576px＝1600×480 比例下 1920px 算出來的自然高度，
   剛好卡在上限邊界完全不裁；比 1920 更寬的螢幕才會觸發上下裁切 */
.hero-carousel .carousel-item img {
  width: 100%;
  aspect-ratio: 1600 / 480;
  max-height: 576px;
  object-fit: cover;
}

.hero-carousel .carousel-caption {
  bottom: 15%;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.hero-carousel .carousel-caption h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 10px;
}

/* 首頁課程分類區 */
.section-title {
  text-align: center;
  margin: 50px 0 30px;
}

.categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 0 auto;
  /* 跟 .course-carousel 同一個修法（完整說明見那邊）：width:100% +
     box-sizing:border-box + max-width 寫成「1150 + 兩側 padding」，
     容器變窄時才會正確整體跟著縮小，不會被 padding 疊加撐出超過容器 */
  width: 100%;
  max-width: calc(1150px + 2 * max(5%, 64px));
  box-sizing: border-box;
  padding: 0 max(5%, 64px);
}

.cat-card {
  display: block;
  background: var(--light-bg);
  padding: 30px;
  text-align: center;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s;
}

.cat-card:hover {
  transform: translateY(-5px);
  background: #e2e8f0;
}

.cat-card h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
  color: var(--dark);
}

/* 手機寬度強制排 2 欄，不要讓 auto-fit 因為 minmax(200px, 1fr) 容不下
   而退成 1 欄直向清單——分類選單是「快速掃視挑選」的情境，格狀排列比
   一路往下的清單更直覺，也比較省垂直空間。卡片 padding 跟字級跟著縮小，
   避免手機小卡片還維持桌機的鬆散尺寸 */
@media (max-width: 600px) {
  .categories {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .cat-card {
    padding: 18px 12px;
  }

  .cat-card h3 {
    font-size: 1rem;
  }
}

/* 首頁精選課程輪播：超過三張卡片時用左右按鈕橫向捲動，
   跟課程列表頁的卡片視覺是同一套語言 */
.course-carousel {
  position: relative;
  margin: 0 auto;
  /* 使用 box-sizing:border-box，並把 max-width 直接寫成「1150 + 兩側
     padding」，這樣 max-width 夾住的就是含 padding 的總寬度：容器夠寬時
     總寬度剛好等於 1150+padding*2（換算回內容仍是精準的 1150，跟 footer/
     categories 對齊的原始目的沒變），容器變窄時這個總寬度會直接跟著縮小、
     padding 從裡面扣，不會溢出。
     一定要另外寫明 width:100%，才會改成用「容器的 100%」
     去夾 max-width，容器變窄時才會真的跟著縮小 */
  width: 100%;
  max-width: calc(1150px + 2 * max(5%, 64px));
  box-sizing: border-box;
  /* 左右留白桌機用 5%（跟全站其他區塊同一個比例），但 .carousel-btn 是
     固定 40px 寬的圓形按鈕，容器窄於 1280px 時 5% 會小於 64px，按鈕就會
     疊到第一/最後一張卡片上；用 max() 保底至少 64px（40px 按鈕本身＋
     兩側各 12px 緩衝，見下面 .carousel-btn.prev/.next），不論螢幕多窄
     都留得下按鈕的位置，按鈕也不會直接貼齊螢幕邊緣 */
  padding: 0 max(5%, 64px) 40px;
}

.course-carousel .course-grid {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.course-carousel .course-grid::-webkit-scrollbar {
  display: none;
}

.carousel-btn {
  position: absolute;
  top: calc(50% - 20px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--primary);
  cursor: pointer;
  z-index: 2;
}

.carousel-btn:hover {
  background: var(--primary-light);
}

.carousel-btn.prev {
  left: 12px;
}

.carousel-btn.next {
  right: 12px;
}

.course-carousel .course-card {
  box-sizing: border-box;
  /* 減 1px 當緩衝，避免瀏覽器計算 calc() 時的捨入誤差讓第 4 張卡片露出一角 */
  flex: 0 0 calc((100% - 48px) / 3 - 1px);
  scroll-snap-align: start;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: 0.2s;
  text-decoration: none;
  color: inherit;
}

.course-carousel .course-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border-color: var(--primary);
}

.course-carousel .course-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--light-bg) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
}

.course-carousel .course-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-carousel .course-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.course-carousel .course-card-badge {
  font-size: 0.75rem;
  background: var(--light-bg);
  color: var(--text-gray);
  padding: 4px 10px;
  border-radius: 4px;
  width: fit-content;
  font-weight: 600;
  margin-bottom: 10px;
}

.course-carousel .course-card h3 {
  font-size: 1.1rem;
  color: var(--dark);
  margin-bottom: 8px;
}

.course-carousel .course-card p {
  font-size: 0.9rem;
  color: var(--text-gray);
  flex: 1;
  margin-bottom: 16px;
  /* 卡片變窄（螢幕縮小、切換按鈕留白變寬時卡片跟著變窄）文字會換更多行，
     卡片高度就會跟著變動、同一排卡片高度對不齊；限制最多顯示 2 行，
     超過的部分截斷改用刪節號，高度不再受文字長度或卡片寬度影響 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-carousel .course-card .btn-detail {
  align-self: flex-start;
  text-decoration: none;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.92rem;
}

@media (max-width: 900px) {
  .course-carousel .course-card {
    flex-basis: calc((100% - 24px) / 2 - 1px) !important;
  }
}

@media (max-width: 600px) {
  .course-carousel .course-card {
    flex-basis: 85% !important;
  }
}

/* 首頁「瀏覽所有課程」按鈕 */
.browse-all-wrap {
  text-align: center;
  padding: 0 5% 60px;
}

.browse-all-btn {
  display: inline-block;
  background: var(--primary);
  color: white;
  padding: 12px 32px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s;
}

.browse-all-btn:hover {
  background: var(--primary-dark);
}

/* 課程列表頁 */
.catalog-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: white;
  padding: 90px 5% 80px;
  text-align: center;
}

.catalog-header h1 {
  font-size: 2.2rem;
  margin-bottom: 12px;
}

.catalog-header p {
  opacity: 0.9;
  font-size: 1.05rem;
}

.category-filter-bar-wrap {
  padding: 24px 0 0;
}

.category-filter-bar {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-btn {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--light-bg);
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}

.filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.course-list-grid {
  width: 100%;
  max-width: 1150px;
  margin: 40px auto 24px;
  padding: 0 20px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.course-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: 0.2s;
  text-decoration: none;
  color: inherit;
}

.course-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border-color: var(--primary);
}

.course-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--light-bg) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
}

.course-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.course-card-badge {
  font-size: 0.75rem;
  background: var(--light-bg);
  color: var(--text-gray);
  padding: 4px 10px;
  border-radius: 4px;
  width: fit-content;
  font-weight: 600;
  margin-bottom: 10px;
}

.course-card h3 {
  font-size: 1.1rem;
  color: var(--dark);
  margin-bottom: 8px;
}

.course-card p {
  font-size: 0.9rem;
  color: var(--text-gray);
  flex: 1;
  margin-bottom: 16px;
}

.course-card .btn-detail {
  align-self: flex-start;
  text-decoration: none;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.92rem;
}

/* 手機改排 2 欄（蓋掉 .course-list-grid 的 300px 欄寬下限）
   斷點抓 663px：原本 auto-fill + minmax(300px,1fr) 要內容寬度撐到
   2×300px + 24px gap + 40px 左右 padding = 664px 才會自然長出 2 欄 */
@media (max-width: 663px) {
  .course-list-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .course-card-body {
    padding: 10px;
  }

  .course-card-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    margin-bottom: 6px;
  }

  .course-card h3 {
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 4px;
  }

  .course-card p {
    font-size: 0.72rem;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 整張卡片本身就是連結，點哪裡都能進詳情頁，所以「查看詳情 →」是多餘的；
     手機窄卡片省下這行，卡片可以再矮一點 */
  .course-card .btn-detail {
    display: none;
  }
}

/* 分頁 */
.pagination-bar {
  max-width: 1150px;
  margin: 0 auto 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#page-number-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: 0.2s;
}

.page-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.page-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 課程詳情頁 */
.page-subnav {
  background: #ffffff;
  border-bottom: 1px solid var(--border-color);
  padding: 12px 5%;
  display: flex;
  justify-content: center;
  gap: 24px;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.page-subnav-link {
  text-decoration: none;
  color: var(--dark);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s;
}

.page-subnav-link:hover {
  color: var(--primary);
}

.course-hero {
  background-image: linear-gradient(135deg, rgba(0, 74, 173, 0.92), rgba(15, 23, 42, 0.92));
  background-size: cover;
  background-position: center;
  color: white;
  padding: 60px 5% 50px;
}

.hero-container {
  max-width: 1150px;
  margin: 0 auto;
  /* box-sizing 改 content-box，理由跟 .categories/.course-carousel 一樣：
     padding 加在 1150 外面，內容才會精準對齊 footer 的 1150。padding 也
     從固定 20px 改成 max(5%, 20px)，跟 footer 的 .site-footer 用同一個
     5% 比例——固定 20px 在寬度還沒撐到 1150 上限前（901~1190px 這段）
     會比 footer 的 5% 窄很多，兩邊看起來對不齊 */
  box-sizing: content-box;
  padding: 0 max(5%, 20px);
}

.course-hero .breadcrumb {
  font-size: 0.9rem;
  margin-bottom: 15px;
  opacity: 0.85;
}

.course-hero .breadcrumb a {
  color: inherit;
}

.course-cat {
  background: var(--accent);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 12px;
}

.hero-container h1 {
  font-size: 2.2rem;
  margin-bottom: 15px;
  line-height: 1.3;
  font-weight: 700;
}

.hero-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 25px;
  max-width: 800px;
}

.quick-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 0.95rem;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.meta-item b {
  display: block;
  color: var(--accent);
}

.main-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 50px;
  max-width: 1150px;
  margin: 40px auto;
  /* padding 用 max(5%, 20px)，理由跟 .hero-container 一樣——固定 20px
     在 901~1190px 這段會比 footer 的 5% 窄，兩邊對不齊 */
  box-sizing: content-box;
  padding: 0 max(5%, 20px);
}

.content-section {
  background: var(--card-bg);
  border-radius: 12px;
  padding-top: 30px;
  padding-right: 30px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.detail-title {
  border-left: 5px solid var(--primary);
  padding-left: 15px;
  margin: 0 0 22px;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 10px;
}

.highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.highlight-card {
  background: #f1f5f9;
  padding: 20px;
  border-radius: 8px;
}

.highlight-card h3 {
  font-size: 1em;
  font-weight: bold;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

.syllabus-item {
  border: 1px solid var(--border-color);
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.syllabus-title {
  padding: 16px 20px;
  background: #ffffff;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.syllabus-arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-left: 12px;
  transition: transform 0.2s;
}

details[open] .syllabus-arrow {
  transform: rotate(-135deg);
}

.syllabus-content {
  padding: 20px;
  background: #ffffff;
  color: var(--text-main);
  font-size: 0.95rem;
}

.syllabus-content ul {
  padding-left: 20px;
}

.syllabus-content li {
  margin-bottom: 8px;
}

/* 課程簡介欄位支援後台輸入 HTML，瀏覽器/Bootstrap 對 ul 的預設 margin/padding 偏大，
   這裡只收斂 .course-description-html 這個範圍內的 ul，不影響網站其他地方的清單 */
.course-description-html ul,
.course-description-html ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.course-description-html li {
  margin-bottom: 4px;
}

.target-audience-list {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.target-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f1f5f9;
  padding: 15px;
  border-radius: 8px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.info-box {
  background: #f1f5f9;
  border-radius: 8px;
  padding: 20px;
}

.info-box h3 {
  font-size: 1.1rem;
  color: var(--primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 15px;
  text-align: center;
}

.step-item {
  background: var(--primary-light);
  border-radius: 8px;
  padding: 15px 10px;
  position: relative;
}

.step-num {
  width: 28px;
  height: 28px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  font-weight: bold;
  font-size: 0.85rem;
}

.step-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark);
}

.price-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 15px;
}

.price-card {
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 20px 15px;
  text-align: center;
  background: white;
  transition: all 0.2s;
  position: relative;
  /* 直向 flex + 下面 .price-card form 的 margin-top:auto，讓「加入購物車」
     按鈕永遠貼齊卡片底部：沒有這個設定的話，如果某張卡片的方案名稱或
     「/ 每人 (省 $X,XXX)」換成 2 行，按鈕只會跟著往下推，跟其他卡片的按鈕對不齊 */
  display: flex;
  flex-direction: column;
}

.price-card form {
  margin-top: auto;
}

.price-card.popular {
  border-color: var(--accent);
  background: #fffcf7;
}

.price-card.popular::before {
  content: "最推薦";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 10px;
}

.price-type {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 5px;
}

.price-amount {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
}

.price-unit {
  font-size: 0.85rem;
  color: var(--text-gray);
  margin-bottom: 5px;
}

.price-add-btn {
  display: block;
  margin-top: 14px;
  padding: 9px 10px;
  border-radius: 6px;
  background: var(--primary);
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.2s;
}

.price-add-btn:hover {
  background: var(--primary-dark);
}

.price-card.popular .price-add-btn {
  background: var(--accent);
}

.price-card.popular .price-add-btn:hover {
  background: var(--accent-hover);
}

/* 課程頁「加入購物車」前先選加購的 modal */
.addon-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 100;
}
.addon-modal-backdrop.open {
  display: block;
}

.addon-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
  z-index: 101;
  overflow: hidden;
  flex-direction: column;
}
.addon-modal.open {
  display: flex;
}

.addon-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  /* .addon-modal 巢狀在 .price-card 底下，會繼承到 .price-card 的
     text-align: center，課程名稱較短時會在置中的外層框裡偏右，這裡蓋掉 */
  text-align: left;
}

.addon-modal-course {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--dark);
  margin-bottom: 4px;
}

.addon-modal-plan {
  font-size: 0.85rem;
  color: var(--text-gray);
}

.addon-modal-close {
  border: none;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-gray);
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.addon-modal-close:hover {
  color: var(--dark);
}

.addon-modal-body {
  padding: 6px 24px 18px;
  overflow-y: auto;
}

.addon-modal-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 4px;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--dark);
}

.addon-modal-optional-tag {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-gray);
  background: var(--light-bg);
  padding: 2px 8px;
  border-radius: 10px;
}

.addon-modal-note {
  font-size: 0.78rem;
  color: var(--text-gray);
  margin: 10px 0 0;
  line-height: 1.5;
}

.addon-modal-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 10px;
  margin: 0 -10px;
  border-radius: 10px;
}
.addon-modal-line + .addon-modal-line {
  margin-top: 2px;
}

.addon-modal-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.addon-modal-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.addon-modal-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--dark);
}

.addon-modal-price {
  font-size: 0.85rem;
  color: var(--text-gray);
  white-space: nowrap;
}

/* 手機寬度不夠時，名稱＋單價硬擠同一行會把名稱本身擠斷成兩行；改成
   永遠上下堆疊（名稱一行、+$／人另起一行），名稱本身就不會被截斷 */
@media (max-width: 480px) {
  .addon-modal-name-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

.addon-stepper {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 3px;
}

.addon-stepper-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text-gray);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.addon-stepper-btn:hover {
  background: var(--light-bg);
  color: var(--dark);
}

.addon-stepper-value {
  min-width: 22px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--dark);
  font-size: 0.9rem;
}

.addon-modal-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border-color);
  background: var(--light-bg);
}

.addon-modal-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.9rem;
  color: var(--text-main);
  margin-bottom: 14px;
}
.addon-modal-total span:last-child {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dark);
}

.addon-modal-actions {
  display: flex;
  gap: 10px;
}

.addon-modal-cancel {
  flex: 1;
  padding: 11px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}
.addon-modal-cancel:hover {
  background: var(--light-bg);
}

.addon-modal-confirm {
  flex: 2;
  padding: 11px;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
}
.addon-modal-confirm:hover {
  background: var(--primary-dark);
}

.side-card {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  position: sticky;
  top: 100px;
}

.side-price-header {
  margin-bottom: 15px;
}

.side-price-label {
  font-size: 0.85rem;
  color: var(--text-gray);
}

.side-price-main {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary);
}

.cta-btn {
  display: block;
  background: var(--primary);
  color: white;
  text-align: center;
  padding: 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  margin-bottom: 12px;
  transition: background 0.2s;
  box-shadow: 0 4px 12px rgba(0, 74, 173, 0.25);
}

.cta-btn:hover {
  background: var(--primary-dark);
  color: white;
}

.cta-btn.line {
  background: #06C755;
  color: white;
  box-shadow: 0 4px 12px rgba(6, 199, 85, 0.2);
}

.cta-btn.line:hover {
  background: #05b34c;
}

.side-features {
  padding-left: 20px;
  margin-top: 15px;
  font-size: 0.9rem;
  color: var(--text-gray);
}

.side-features li {
  margin-bottom: 6px;
}

/* 斷點從 900px 延伸到 1190px：901~1189px 這段主內容欄扣掉側邊欄剩不到
   200px 分給 3 欄，價格卡會被擠得很窄；中間這段維持單欄排版 */
@media (max-width: 1190px) {
  .main-layout {
    grid-template-columns: 1fr;
  }
  /* 側邊欄退到下面之後改用 order 排到 <main> 前面
     進頁面就看的到 */
  .main-layout > aside {
    order: -1;
  }
  .side-card {
    position: static;
    margin-bottom: 20px;
  }
  /* .side-card 維持滿版寬度（跟下面 .content-section 那些卡片一樣寬）
     裡面兩個 CTA 按鈕原本是各自直向堆疊，寬度變寬後改成並排 */
  .side-cta-group {
    display: flex;
    gap: 12px;
  }
  .side-cta-group .cta-btn {
    flex: 1;
    margin-bottom: 0;
  }
  /* .content-section 自己有 padding-right:30px，
     對不到 hero/footer 的右邊界，看起來像整體偏左；這裡蓋掉還原成對齊 */
  .content-section {
    padding-right: 0;
  }
  /* 側邊欄退到下面之後，下面這幾個卡片型區塊改成固定 2 欄
     用固定 repeat(2, 1fr) 而不是 auto-fit/auto-fill，
     這樣即使項目數不是 2 的倍數（例如 3 張價格卡剩 1 張、單數個 highlight），
     寬度還是照 2 欄去計算，落單的那項只佔第一欄寬度，不會自己撐開變成滿版 */
  .highlights,
  .target-audience-list,
  .price-cards,
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 寬度再更窄（跟 .info-grid 用 auto-fit + minmax(280px,1fr) 算出來的
   退版臨界點差不多，約 644px——.content-section 的 padding-right 在
   ≤1190px 已經蓋成 0，.info-grid 的可用寬度變寬，臨界點也跟著從原本的
   677px 往下移了約 33px）之後，固定 2 欄本身也會太擠，退成單欄 */
@media (max-width: 644px) {
  .highlights,
  .target-audience-list,
  .price-cards,
  .process-steps {
    grid-template-columns: 1fr;
  }
}

/* 一般手機寬度（≤600px）改回直向堆疊：並排的話較長的文字會擠成 2 行，
   維持垂直排列比較好按、也好讀 */
@media (max-width: 600px) {
  .side-cta-group {
    flex-direction: column;
  }
}

/* 會員登入頁：.form-group/.form-label/.form-control 是 Bootstrap
   全站共用的通用 class（後台表單也共用同一份 style.css），所以都用 .auth-card 開頭限定範圍 */
.auth-section {
  max-width: 440px;
  margin: 70px auto 90px;
  padding: 0 20px;
}

/* 註冊頁欄位比登入頁多、又要排成雙欄，用 .wide 修飾把寬度加大，
   只影響註冊頁，不影響登入頁 */
.auth-section.wide {
  max-width: 640px;
}

.auth-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 40px 36px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.auth-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark);
  text-align: center;
  margin-bottom: 8px;
}

.auth-subtitle {
  font-size: 0.9rem;
  color: var(--text-gray);
  text-align: center;
  margin-bottom: 28px;
}

.auth-card .form-group,
.profile-card .form-group,
.form-card .form-group {
  margin-bottom: 18px;
}

.profile-card .form-group:last-of-type {
  margin-bottom: 0;
}

.auth-card .form-label,
.profile-card .form-label,
.form-card .form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 6px;
}

.auth-card .form-control,
.profile-card .form-control,
.form-card .form-control,
.form-card .form-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--dark);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-card .form-control:focus,
.profile-card .form-control:focus,
.form-card .form-control:focus,
.form-card .form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.form-card .form-control.company-selected {
  font-weight: 600;
}

.form-card textarea.form-control {
  resize: vertical;
}

/* 檔案上傳欄位：瀏覽器原生的「選擇檔案」按鈕預設是直角，
   這裡讓按鈕本身也帶一點圓角 */
.form-card .form-control[type="file"] {
  padding: 0;
  height: 45px;
  display: flex;
  align-items: center;
}

.form-card .form-control[type="file"]::file-selector-button,
.form-card .form-control[type="file"]::-webkit-file-upload-button {
  height: 100%;
  margin: 0 12px 0 0;
  padding: 0 12px;
  border: none;
  border-right: 1px solid var(--border-color);
  border-radius: 8px 0 0 8px;
  background: var(--light-bg);
  color: var(--dark);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  cursor: pointer;
  transition: 0.2s;
}

.form-card .form-control[type="file"]::file-selector-button:hover,
.form-card .form-control[type="file"]::-webkit-file-upload-button:hover {
  background: var(--border-color);
}

.auth-card .form-hint,
.profile-card .form-hint,
.form-section .form-hint,
.form-card .form-hint {
  font-size: 0.78rem;
  color: var(--text-gray);
  margin-top: 3px;
  margin-bottom: 0;
  line-height: 1.4;
}

.form-card .form-hint a {
  color: var(--primary);
}

.form-card .required-mark {
  color: #dc2626;
}

/* 新增公休設定頁 */
.form-card .form-section-divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 22px 0;
}

.form-card .form-section-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 14px;
}

.auth-submit-btn {
  display: block;
  width: 100%;
  background: var(--primary);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-top: 6px;
  transition: background 0.2s;
}

.auth-submit-btn:hover {
  background: var(--primary-dark);
}

.auth-footer-link {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-gray);
  margin-top: 22px;
}

.auth-footer-link a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.auth-footer-link a:hover {
  text-decoration: underline;
}

/* Flash 提示訊息：懸浮在畫面上方、不佔文件流的位置，避免把導覽列下面的內容往下推。
   .flash-alert/.flash-icon/.flash-text/.flash-close/.flash-* 顏色這些「內容」樣式
   前後台共用；只有外層定位容器分成 .flash-messages（前台，top 對齊前台較高的
   navbar）跟 .admin-flash-messages（後台，top 對齊較矮的 admin-topbar） */
.flash-messages {
  position: fixed;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  width: min(480px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-flash-messages {
  position: fixed;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  width: min(480px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flash-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  border-left: 4px solid transparent;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  font-size: 0.92rem;
  animation: flash-in 0.25s ease;
}

@keyframes flash-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.flash-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: white;
}

.flash-text {
  flex: 1;
  color: var(--dark);
}

.flash-close {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text-gray);
  cursor: pointer;
  padding: 0;
}

.flash-close:hover {
  color: var(--dark);
}

.flash-success { background: #ecfdf5; border-left-color: var(--success); }
.flash-success .flash-icon { background: var(--success); }

.flash-danger { background: #fef2f2; border-left-color: #dc2626; }
.flash-danger .flash-icon { background: #dc2626; }

.flash-warning { background: #fffbeb; border-left-color: var(--accent); }
.flash-warning .flash-icon { background: var(--accent); }

.flash-info { background: var(--primary-light); border-left-color: var(--primary); }
.flash-info .flash-icon { background: var(--primary); }

/* 會員資料頁：.form-group/.form-label/.form-control
   跟登入/註冊頁共用同一份規則（見上方 .auth-card 那組選擇器一起定義） */
.profile-section {
  max-width: 640px;
  margin: 50px auto 90px;
  padding: 0 20px;
}

.profile-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 28px;
}

/* 會員中心首頁 */
.member-center-greeting {
  color: var(--text-gray);
  font-size: 0.95rem;
  margin-top: -18px;
  margin-bottom: 24px;
}

.member-center-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.member-center-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  padding: 20px;
  text-decoration: none;
  transition: 0.2s;
}

.member-center-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.member-center-card h3 {
  font-size: 1.05rem;
  color: var(--dark);
  margin-bottom: 6px;
}

.member-center-card p {
  font-size: 0.88rem;
  color: var(--text-gray);
}

.member-center-logout {
  display: inline-block;
  padding: 11px 24px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-gray);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: 0.2s;
}

.member-center-logout:hover {
  border-color: #dc2626;
  color: #dc2626;
}

.profile-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  margin-bottom: 28px;
  overflow: hidden;
}

.profile-card-header {
  padding: 18px 28px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--dark);
}

.profile-card-body {
  padding: 28px;
}

.profile-submit-btn {
  display: inline-block;
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-top: 20px;
  transition: background 0.2s;
}

.profile-submit-btn:hover {
  background: var(--primary-dark);
}

/* 購物車頁 */
.cart-section {
  max-width: 1100px;
  margin: 50px auto 90px;
  padding: 0 20px;
}

/* 兩欄排版：左邊課程列表、右邊訂單摘要+結帳按鈕 */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}

/* 側欄用 sticky 固定住，購物車項目一多、往下捲動時，總額跟結帳按鈕
   還是留在畫面上，不用滑到最底部才看得到 */
.cart-sidebar {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cart-sidebar .cart-checkout-btn {
  display: block;
  width: 100%;
  text-align: center;
}


/* 901~991 這段左欄擠得太窄，課程名稱被壓到一直換行；
   把兩欄並排的斷點拉高到 991，這個寬度以下都跟手機版一樣改成上下堆疊 */
@media (max-width: 991px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
  .cart-sidebar {
    position: static;
  }
}

.cart-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 24px;
}

.cart-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  overflow: hidden;
  margin-bottom: 28px;
}

/* 一個課程方案一張卡片：縮圖最左、課程名稱+方案上下並排、價格、叉叉按鈕 */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.cart-item-card {
  /* .cart-item-card 是 .cart-items（display:flex; flex-direction:column）
     底下的 flex item，沒有明確寫 width 時，寬度會用內容本身反推（中文字
     沒有固定的斷行位置，最小內容寬度可以窄到一個字一行），導致 701~1199
     這段寬度中間值算出來的欄寬遠比容器窄，課程名稱被擠成一字一行的直式
     文字（一定要明確寫 width:100%） */
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  overflow: hidden;
}

/* 用 grid-template-areas 命名各區塊，桌機/手機兩邊各自重新排列這幾個
   名字就好，不用搬動 HTML、也不用額外的包裝層。
   動作欄縮到 48px，多出來的寬度讓給名稱欄 */
.cart-item-main,
.cart-addon-line {
  display: grid;
  grid-template-columns: 96px 1fr 90px 48px;
  align-items: center;
  gap: 18px;
}

.cart-item-main {
  padding: 18px 22px;
  grid-template-areas: "thumb info price remove";
}

.cart-item-thumb {
  grid-area: thumb;
  width: 96px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--light-bg) 100%);
}

.cart-item-info {
  grid-area: info;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-course-name {
  font-weight: 600;
  color: var(--dark);
}

.cart-course-name a {
  color: inherit;
  text-decoration: none;
}

.cart-course-name a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.cart-item-plan {
  font-size: 0.88rem;
  color: var(--text-gray);
}

.cart-item-price {
  grid-area: price;
  text-align: right;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--dark);
  white-space: nowrap;
}

.cart-item-remove-form {
  grid-area: remove;
}

.cart-item-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text-gray);
  cursor: pointer;
  transition: 0.2s;
}

.cart-item-remove-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* 加購項目 */
.cart-item-addons {
  border-top: 1px solid var(--border-color);
  background: var(--card-bg);
  padding: 12px 22px 14px;
}

.cart-addon-list-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

/* 加購這一列沿用跟課程列同一組欄寬。
    第一欄留白對齊縮圖、第二欄放標題（對到課程名稱）+「單價 × 份數」（對到方案），
    第三欄是這行加購的金額（對到課程價格），第四欄留空對齊叉叉 */
.cart-item-addons .cart-addon-line {
  padding: 6px 0;
}

/* 加購項目沒有自己的圖片，用一個小圓形標籤圖示取代純空白 */
.cart-addon-line-spacer {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary);
  justify-self: center;
  flex-shrink: 0;
}

.cart-addon-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-addon-name-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cart-addon-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark);
}

.cart-addon-unit-price {
  font-size: 0.78rem;
  color: var(--text-gray);
}

.cart-addon-line-subtotal {
  text-align: right;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--dark);
  white-space: nowrap;
}

/* 斷點用 767，跟訂單列表頁的手機斷點一致 */
@media (max-width: 767px) {
  .cart-item-card {
    position: relative;
  }
  .cart-item-main {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "thumb info"
      "thumb price";
    column-gap: 12px;
    row-gap: 4px;
    padding: 14px 40px 14px 16px;
  }
  .cart-item-thumb {
    width: 56px;
    height: 38px;
  }
  .cart-item-price {
    text-align: left;
  }
  .cart-item-remove-form {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .cart-item-remove-btn {
    width: 28px;
    height: 28px;
    margin-left: 0;
  }
  .cart-course-name {
    font-size: 0.875rem;
  }

  .cart-item-addons {
    padding: 10px 16px 12px;
  }
  .cart-item-addons .cart-addon-line {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "icon info"
      "icon subtotal";
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    padding: 8px 0;
  }
  .cart-addon-line-spacer {
    grid-area: icon;
    width: 56px;
    height: 56px;
  }
  .cart-addon-info {
    grid-area: info;
  }
  .cart-addon-line-subtotal {
    grid-area: subtotal;
    text-align: left;
  }
}

.cart-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-gray);
}

.cart-empty a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.cart-checkout-btn {
  display: inline-block;
  background: var(--primary);
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}

.cart-checkout-btn:hover {
  background: var(--primary-dark);
}

/* 購物車→訂單完成整個流程共用的階段進度條。*/
.checkout-steps {
  display: flex;
  align-items: flex-start;
  margin: 0 0 32px;
}

.checkout-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.checkout-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--card-bg);
  color: var(--text-gray);
  border: 1px solid var(--border-color);
}

.checkout-step-label {
  font-size: 0.9rem;
  color: var(--text-gray);
  white-space: nowrap;
}

.checkout-step.active .checkout-step-circle {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.checkout-step.active .checkout-step-label {
  color: var(--primary);
  font-weight: 700;
}

.checkout-step-line {
  flex: 1;
  height: 2px;
  background: var(--border-color);
  margin-top: 16px;
}

/* 手機專用的簡化版：拿掉 5 個圓圈橫排（窄螢幕塞不下完整文字），改用
   「步驟 X／5：標籤」一行文字＋一條進度條，桌機預設隱藏 */
.checkout-steps-mobile {
  display: none;
}

.checkout-steps-mobile-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 10px;
}

.checkout-progress-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--border-color);
  overflow: hidden;
}

.checkout-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
}

@media (max-width: 560px) {
  .checkout-steps {
    display: none;
  }
  .checkout-steps-mobile {
    display: block;
    margin: 0 0 28px;
  }
}

/* 統編/公司名稱自動完成的候選清單，由 company_autocomplete.js 動態產生，
   不特定綁在哪張卡片上，所以不用 .form-card 之類的範圍限定，全站共用同一份樣式 */
.company-results {
  margin-top: 6px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: 0 10px 24px rgba(0,0,0,0.09);
  overflow: hidden;
}

.company-result-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s;
  font-family: inherit;
}

.company-result-item:last-child {
  border-bottom: none;
}

.company-result-item:hover {
  background: var(--primary-light);
}

.company-result-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark);
}

.company-result-meta {
  font-size: 0.78rem;
  color: var(--text-gray);
  margin-top: 2px;
}

/* 送出查詢後、還沒拿到結果前顯示在同一個候選清單容器裡，避免另外佔一塊版面 */
.company-result-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: 0.85rem;
  color: var(--text-gray);
}

.loading-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary);
  flex-shrink: 0;
  animation: company-lookup-spin 0.7s linear infinite;
}

@keyframes company-lookup-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loading-spinner {
    animation: none;
  }
}

/* 報名資訊填寫頁 */
.form-section {
  max-width: 760px;
  margin: 50px auto 90px;
  padding: 0 20px;
}

.form-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 24px;
}

/* 頁面最上方的重要提醒，比一般 .form-hint 更醒目：跟課程詳情頁「注意事項」
   同一種琥珀色警示框樣式 */
.form-notice {
  background: #fff8f0;
  border: 1px solid #ffe8cc;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #7c2d12;
  line-height: 1.6;
}

/* 同色系但加底線，維持警示框一致的視覺語言，同時看得出可以點擊 */
.form-notice a {
  color: inherit;
  text-decoration: underline;
}

.form-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  max-width: 760px;
  margin-bottom: 22px;
  overflow: hidden;
}

.form-card-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
}

.form-card-header .optional-tag {
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--text-gray);
}

.form-card-body {
  padding: 24px;
}

/* 加購摘要 */
.addon-summary-bar {
  padding: 12px 24px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.85rem;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.addon-summary-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.addon-summary-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  margin-top: 1px;
}

.addon-summary-icon.icon-auto {
  background: var(--success);
}

.addon-summary-icon.icon-pick {
  background: var(--accent);
}

.addon-summary-text strong {
  color: var(--dark);
}

/* 螢幕窄到要換行時，斷在「（購買 n 份）」後面、「—」前面，不要斷在中文字中間
   這裡改成讓 .addon-summary-detail（「— ...」那一整段，不管是已自動套用／需要
   指定／已指定完成，這三種情境共用同一個 class）直接是 block，強制
   自成一行，不再跟前面搶同一行的剩餘空間 */
.addon-summary-name-qty {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .addon-summary-detail {
    display: block;
    margin-top: 2px;
  }
  /* 自成一行之後，開頭的「— 」是接在上一行後面的視覺延續，單獨一行
     反而不需要這個破折號 */
  .addon-summary-dash {
    display: none;
  }
}

.addon-summary-auto {
  color: var(--text-gray);
}

.addon-summary-needs-pick {
  color: #c2410c;
  font-weight: 700;
}

/* 全部指定完成後，整行（icon＋文字＋數字）一起變成跟「已自動套用」一樣的
   沉穩灰色 */
.addon-summary-needs-pick.addon-pick-complete {
  color: var(--text-gray);
  font-weight: 500;
}

.addon-counter {
  font-variant-numeric: tabular-nums;
  /* 「0 / 1」中間的空格是正常的斷行機會，極窄螢幕會斷在斜線後面，
     變成孤伶伶一個數字自己一行；不讓這幾個字元中間斷行 */
  white-space: nowrap;
}

/* 每位參加者底下的加購狀態：已包含的用唯讀勾勾提示，需要指定的才會出現
   真正的 checkbox，避免使用者誤以為每一項都要自己勾 */
.participant-addon-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.addon-included-line {
  font-size: 0.85rem;
  color: var(--success);
  display: flex;
  align-items: center;
  gap: 6px;
}

.addon-assign-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-main);
}

.addon-assign-line input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  margin: 0;
}

.addon-assign-line input[type="checkbox"]:disabled {
  accent-color: var(--text-gray);
}

.form-card .form-row,
.auth-card .form-row,
.profile-card .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 20px;
  margin-bottom: 18px;
}

.form-card .form-row.two-col,
.auth-card .form-row.two-col,
.profile-card .form-row.two-col {
  grid-template-columns: 1fr 1fr;
}

.form-card .form-group.form-full,
.auth-card .form-group.form-full,
.profile-card .form-group.form-full {
  grid-column: 1 / -1;
}

/* .form-group 本身的 margin-bottom 在 grid item 裡不會跟外層 .form-row 的 margin-bottom 合併，
   兩者疊加會變成兩倍間距。
   .form-row 本身已經負責跟下一個 .form-row 的間距，欄位自己的 margin-bottom 在這裡歸零即可。
   要蓋過 Bootstrap .mb-3 的 !important 需要一起加 */
.form-card .form-row .form-group,
.auth-card .form-row .form-group,
.profile-card .form-row .form-group {
  margin-bottom: 0 !important;
}

.participant-fieldset {
  padding-top: 22px;
  border-top: 1px solid var(--border-color);
}

.participant-fieldset:first-child {
  padding-top: 0;
  border-top: none;
}

.participant-fieldset + .participant-fieldset {
  margin-top: 22px;
}

.participant-subhead {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 14px;
}

/* 報名資訊填寫頁：每位參加者標頭右上角的「同會員資料」勾選
   只有這裡需要把標題跟勾選框並排，所以另外包一層 .participant-subhead-bar，
   不動 .participant-subhead 本身（訂單明細、購物車確認頁也共用同一個 class） */
.participant-subhead-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.participant-subhead-bar .participant-subhead {
  margin-bottom: 0;
}

.same-as-member-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-gray);
  cursor: pointer;
  margin-bottom: 14px;
}

.same-as-member-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  margin: 0;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.form-submit-btn {
  display: inline-block;
  background: var(--primary);
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}

.form-submit-btn:hover {
  background: var(--primary-dark);
}

.form-back-btn {
  display: inline-block;
  padding: 11px 24px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: 0.2s;
}

.form-back-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

@media (max-width: 560px) {
  .form-card .form-row.two-col,
  .auth-card .form-row.two-col,
  .profile-card .form-row.two-col {
    grid-template-columns: 1fr;
  }
  .form-card .form-group.form-full,
  .auth-card .form-group.form-full,
  .profile-card .form-group.form-full {
    grid-column: auto;
  }
}

/* 後台課程編輯頁 */
.admin-breadcrumb {
  font-size: 0.82rem;
  color: var(--text-gray);
  margin-bottom: 8px;
}

.admin-breadcrumb a {
  color: var(--text-gray);
  text-decoration: none;
}

.admin-breadcrumb a:hover {
  color: var(--primary);
}

.form-card .form-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  margin: -24px -24px 24px;
  padding: 0 16px;
  overflow-x: auto;
}

.form-card .form-tab-btn {
  padding: 14px 14px;
  border: none;
  background: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-gray);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  transition: 0.15s;
}

.form-card .form-tab-btn:hover {
  color: var(--dark);
}

.form-card .form-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.form-card .tab-error-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dc2626;
  vertical-align: middle;
}

.form-card .tab-panel {
  display: none;
}

.form-card .tab-panel.active {
  display: block;
}

.form-card .image-preview-wrap {
  position: relative;
  display: inline-block;
}

.form-card .image-preview-box {
  width: 240px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--light-bg) 100%);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

img.image-preview-box {
  display: block;
  object-fit: cover;
}

/* 輪播圖建議 1600x600 左右，跟課程封面圖/背景圖的 16:9 不同，
   預覽框套 .wide 這個修飾 class 覆蓋預設尺寸 */
.form-card .image-preview-box.wide {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 21 / 8;
}

.form-card .image-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.form-card .image-remove-btn:hover {
  background: #b91c1c;
}

.form-card .form-check,
.profile-card .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
}

.form-card .form-check input,
.profile-card .form-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--primary);
  margin: 0;
}

.form-card .form-check label,
.profile-card .form-check label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark);
}

/* 註冊頁的條款同意／行銷通知勾選、訂單預覽頁的購買條款同意勾選 */
.auth-card .form-check,
.detail-section .form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-left: 0;
}

.auth-card .form-check label,
.detail-section .form-check label {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-main);
}

.auth-card .form-check label a,
.detail-section .form-check label a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.auth-card .form-check label a:hover,
.detail-section .form-check label a:hover {
  text-decoration: underline;
}

.auth-card .form-check input[type="checkbox"],
.detail-section .form-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 3px 0 0;
  accent-color: var(--primary);
  flex-shrink: 0;
}

/* 社會人士／學生身份切換：分段式切換鈕（segmented control） */
.segmented-toggle {
  position: relative;
  display: inline-flex;
  gap: 3px;
  background: var(--light-bg);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 6px;
}

.segmented-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.segmented-toggle-label {
  padding: 7px 18px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-gray);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.segmented-toggle-input:checked + .segmented-toggle-label {
  background: var(--card-bg);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.segmented-toggle-input:focus-visible + .segmented-toggle-label {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 選擇上課地點與時段頁：
   這個頁面的互動元件 (booking_calendar.js) 也被後台訂單明細頁共用，
   所以以下 class 都不特別限定範圍，兩邊都會套用到 */
.booking-section {
  max-width: 800px;
  margin: 50px auto 90px;
  padding: 0 20px;
}

.booking-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}

.booking-subtitle {
  font-size: 0.92rem;
  color: var(--text-gray);
  margin-bottom: 24px;
}

.booking-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  margin-bottom: 22px;
  overflow: hidden;
}

.booking-card-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
}

/* 選時段頁一張卡片對應一位參加者 */
.booking-card-body {
  padding: 24px;
}

.step-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 12px;
}

.location-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.location-btn {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--light-bg);
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: 0.2s;
}

.location-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.location-btn.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.location-address {
  font-size: 0.85rem;
  color: var(--text-gray);
  margin-bottom: 22px;
}

.booking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.calendar-container {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px;
}

.calendar-month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--dark);
  margin-bottom: 10px;
}

.cal-nav-btn {
  border: none;
  background: none;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-gray);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: inherit;
}

.cal-nav-btn:hover {
  background: var(--light-bg);
  color: var(--primary);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}

.calendar-grid .weekday {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-gray);
  padding-bottom: 4px;
}

.calendar-day {
  font-size: 0.82rem;
  padding: 6px 0;
  border-radius: 6px;
  color: var(--text-main);
  cursor: pointer;
}

.calendar-day:hover {
  background: var(--primary-light);
}

.calendar-day.empty {
  visibility: hidden;
  cursor: default;
}

.calendar-day.unavailable {
  color: var(--border-color);
  cursor: not-allowed;
  text-decoration: line-through;
}

.calendar-day.unavailable:hover {
  background: none;
}

.calendar-day.selected {
  background: var(--primary);
  color: white;
  font-weight: 700;
}

.timeslot-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeslot-btn {
  display: block;
  width: 100%;
  padding: 9px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--light-bg);
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
}

.timeslot-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.timeslot-btn.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.selected-summary {
  margin-top: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #15803d;
}

@media (max-width: 560px) {
  .booking-grid {
    grid-template-columns: 1fr;
  }
}

/* 訂單預覽頁 */
.detail-section {
  max-width: 720px;
  margin: 50px auto 90px;
  padding: 0 20px;
}

.review-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 24px;
}

/* 服務條款／隱私權政策頁 */
.legal-page-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
}

.legal-page-updated {
  font-size: 0.85rem;
  color: var(--text-gray);
  margin-bottom: 32px;
}

.legal-page h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  margin: 28px 0 10px;
}

.legal-page h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 20px 0 8px;
}

.legal-page ul.legal-sublist {
  margin: 0 0 4px;
  padding-left: 1.6em;
  list-style: none;
}

.legal-page ul.legal-sublist li {
  position: relative;
  margin-bottom: 2px;
}

.legal-page ul.legal-sublist li::before {
  content: "・";
  position: absolute;
  left: -1.3em;
}

.legal-page p {
  color: var(--text-main);
  margin-bottom: 4px;
}

.legal-page .back-link {
  display: inline-block;
  margin-top: 32px;
}

/* 後台靜態文字編輯頁 */
.legal-editor-card {
  max-width: none;
}

/* 「隱藏預覽」移到最上面右側，讓兩欄標題列高度一致，內容框才能真正切齊 */
.legal-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.legal-editor-split {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.legal-editor-pane {
  flex: 1 1 0;
  min-width: 0;
}

.legal-editor-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.legal-editor-pane-header .form-label {
  margin-bottom: 0;
}

.legal-editor-textarea {
  height: 560px;
  resize: vertical;
}

.legal-editor-preview-box {
  height: 560px;
  overflow-y: auto;
  margin: 0;
  max-width: none;
  padding: 20px;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
}

@media (max-width: 900px) {
  .legal-editor-split {
    flex-direction: column;
  }

  .legal-editor-textarea,
  .legal-editor-preview-box {
    height: 420px;
  }
}

/* 課程注意事項 */
.legal-editor-preview-box.course-notice-preview-box {
  background: #fff8f0;
  border: 1px solid #ffe8cc;
}

.course-notice-preview-title {
  font-size: 1.05rem;
  color: #d97706;
  margin-bottom: 8px;
}

/* 政策條款歷史版本頁 */
.legal-history-item {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 12px;
}

.legal-history-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--dark);
}

.legal-history-item[open] summary {
  margin-bottom: 12px;
}

.legal-history-content {
  margin: 0;
  max-width: none;
  padding: 16px 0 0;
  border-top: 1px dashed var(--border-color);
}

.legal-history-content.course-notice-preview-box {
  padding: 16px;
  border-top: none;
}

.detail-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  max-width: 760px;
  margin-bottom: 22px;
  overflow: hidden;
}

/* 訂單預覽頁選付款方式——整個區塊包成跟其他區塊一樣有標題的 .detail-card，
   裡面每個選項是一整排可點擊的橫向列（直向堆疊，不是並排），整排 label
   都能點擊，不是只有小圓點，選中時邊框變成強調色＋淡色底——參考常見結帳頁
   付款方式選擇的呈現方式（例如 Shopify 結帳頁、Line Pay 等） */

/* 標題＋說明文字疊在分隔線上方，跟課程卡片標題（.review-course-heading／
   .review-course-plan）同一套兩行標題樣式 */
.payment-choice-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.payment-choice-hint {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-gray);
}

.payment-choice-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-choice-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.payment-choice-row:hover {
  border-color: var(--primary);
}

.payment-choice-row:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-light);
}

/* 自己畫圓圈，不用瀏覽器原生 accent-color——原生樣式在不同瀏覽器上選中時
   畫的實心點顏色不一致（容易變成黑色），改成自訂：粗邊框當作「藍圈圈」、
   中間維持白底，不畫實心點 */
.payment-choice-row input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  background: #fff;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, border-width 0.15s ease;
}

.payment-choice-row input[type="radio"]:checked {
  border-color: var(--primary);
  border-width: 6px;
}

.payment-choice-row-label {
  font-weight: 600;
  color: var(--dark);
}

/* 推到最右邊——信用卡放 VISA/Mastercard/JCB（跟頁尾 .footer-payment 共用
   同一組圖檔與 .payment-badge 樣式），ATM 虛擬帳號放一個通用的銀行圖示 */
.payment-choice-row-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--text-gray);
}

/* 訂單金額超過該付款方式的單筆上限時，整排變成不能點選，說明文字獨立
   佔滿一行、放在標籤下方（flex-basis:100% 讓它在 wrap 後另起一行） */
.payment-choice-row-disabled {
  cursor: not-allowed;
  background: var(--light-bg);
  opacity: 0.7;
}

.payment-choice-row-disabled:hover {
  border-color: var(--border-color);
}

.payment-choice-row-disabled input[type="radio"] {
  cursor: not-allowed;
}

.payment-choice-row-note {
  flex-basis: 100%;
  font-size: 0.78rem;
  color: var(--danger);
}

.detail-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
}

.detail-card-body {
  padding: 20px 24px;
}

/* 訂單預覽頁課程卡片標題 */
.review-course-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.review-course-name {
  font-weight: 700;
  color: var(--dark);
}

.review-course-plan {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-gray);
}

/* 選時段頁參加者姓名是主要資訊，左邊放一個較大的圓形人像 icon 當視覺錨點
   這頁一張卡片對應一位參加者，姓名本身就是卡片標題 */
.booking-participant-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.booking-participant-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary);
  flex-shrink: 0;
}

.review-course-price {
  font-weight: 700;
  color: var(--dark);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 16px;
}

/* 手機：名稱+方案+金額同一列會太擠，金額改掉到下面一行。斷點用 767，
   跟這頁其他手機斷點（加購摘要換行）一致 */
@media (max-width: 767px) {
  .review-course-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .review-course-price {
    margin-left: 0;
  }
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px 24px;
}

/* 訂單預覽頁：同一位參加者的欄位拆成兩個各自獨立的 .field-grid（基本資料一組、
   電話/Email 一組），避免學生模式下職稱欄位整個從 DOM 移除時，2 欄 grid
   自動重排導致電話跑去跟學校擠在同一列。兩組緊鄰時補上間距，中間隔了
   .participant-subhead（例如「上課地點與時間」小標題）的情況不受影響 */
.field-grid + .field-grid {
  margin-top: 16px;
}

.participant-item .field-grid,
.field-grid.two-col {
  grid-template-columns: 1fr 1fr;
}

/* 手機：參加者資料裡電話/Email、教室/地址這類固定兩欄的 grid 改成單欄
   堆疊。 */
@media (max-width: 600px) {
  .participant-item .field-grid,
  .field-grid.two-col {
    grid-template-columns: 1fr;
  }
}

/* grid item 預設 min-width: auto，會用內容的 min-content（沒有空格可斷的
   Email 整串文字寬度）當作欄位下限，讓 .field-value 的 overflow-wrap:
   break-word 形同虛設。設成 0 才能真的在欄寬不夠時換行，而不是撐開格線 */
.field {
  min-width: 0;
}

.field-full {
  grid-column: 1 / -1;
}

.field-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.field-value {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--dark);
  overflow-wrap: break-word;
}

.participant-item {
  padding: 22px 24px;
  border-top: 1px solid var(--border-color);
}

/* 訂單明細頁「加購項目」編輯區塊：.participant-item 包在已經有
   padding 的 .detail-card-body 裡面，自己的 padding 會疊加造成邊界
   過寬，這裡只在這個巢狀情境下縮小 */
.detail-card-body .participant-item {
  padding: 14px 0;
}

.detail-card-body .participant-item:first-child {
  padding-top: 0;
}

.detail-card-body .participant-item:last-child {
  padding-bottom: 14px;
}

.participant-item:first-child {
  border-top: none;
  padding-top: 20px;
}

.participant-item:last-child {
  padding-bottom: 20px;
}

.participant-subhead-spaced {
  margin-top: 18px;
}

/* 這個人有加購項目時，用小標籤呈現在欄位區塊裡，不用另外切一塊出來 */
.addon-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--primary-light);
  color: var(--primary);
  padding: 2px 9px;
  border-radius: 10px;
  margin: 2px 4px 2px 0;
}

/* 加購項目彙總卡片：整張訂單所有加購品項＋對象＋金額的清單，方便使用者
   送出前最後核對一次，跟課程本身的內容分開列。 */
.addon-review-course-group + .addon-review-course-group {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.addon-review-course-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

.addon-review-line {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

.addon-review-line:last-child {
  border-bottom: none;
}

.addon-review-line-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary);
  flex-shrink: 0;
}

.addon-review-line-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.addon-review-line-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark);
}

.addon-review-line-participant {
  font-size: 0.78rem;
  color: var(--text-gray);
}

.addon-review-line-amount {
  text-align: right;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--dark);
  white-space: nowrap;
}

.order-summary-box {
  background: var(--primary-light);
  border-radius: 8px;
  padding: 18px 24px;
  margin-bottom: 28px;
}

/* 訂單預覽頁「同意服務條款」勾選框 */
.detail-section .form-group.form-full {
  margin-bottom: 28px;
}

.order-summary-box .field-value {
  font-size: 1.2rem;
  font-weight: 700;
}

/* 總計拆行：課程小計／加購小計／總計分開列 */
.order-summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--text-main);
  padding: 4px 0;
}

.order-summary-line.order-summary-total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,74,173,0.15);
}

.order-summary-line.order-summary-total .field-value,
.order-summary-line.order-summary-total span:last-child {
  font-size: 1.2rem;
  font-weight: 700;
}

/* 導向付款頁 */
.redirect-section {
  max-width: 480px;
  margin: 110px auto;
  padding: 0 20px;
  text-align: center;
}

.redirect-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid var(--primary-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin: 0 auto 24px;
  animation: redirect-spin 0.9s linear infinite;
}

@keyframes redirect-spin {
  to { transform: rotate(360deg); }
}

.redirect-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 10px;
}

.redirect-hint {
  font-size: 0.92rem;
  color: var(--text-gray);
  margin-bottom: 28px;
}

.redirect-btn {
  display: inline-block;
  background: var(--primary);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}

.redirect-btn:hover {
  background: var(--primary-dark);
  color: white;
}

/* 訂單狀態頁 */
.status-section {
  max-width: 680px;
  margin: 50px auto 90px;
  padding: 0 20px;
}

.status-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}

.status-order-no {
  font-size: 0.9rem;
  color: var(--text-gray);
  margin-bottom: 20px;
}

.status-banner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  padding: 20px 24px;
  margin-bottom: 28px;
}

.status-banner-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-banner-text {
  flex: 1;
  padding-top: 2px;
}

.status-banner-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
}

.status-banner-desc {
  font-size: 0.9rem;
  color: var(--text-gray);
}

.status-banner.success .status-banner-icon {
  background: #dcfce7;
}

.status-banner.success .status-banner-icon::after {
  content: "";
  width: 9px;
  height: 15px;
  border-right: 3px solid #15803d;
  border-bottom: 3px solid #15803d;
  transform: rotate(45deg) translate(-1px, -2px);
}

.status-banner.success .status-banner-title {
  color: #15803d;
}

.status-banner.info .status-banner-icon {
  background: #dbeafe;
  position: relative;
}

/* 時鐘圖示 */
.status-banner.info .status-banner-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2.5px solid #1d4ed8;
  border-radius: 50%;
  box-sizing: border-box;
}

.status-banner.info .status-banner-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5px;
  height: 7px;
  background: #1d4ed8;
  border-radius: 1px;
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(45deg);
}

.status-banner.info .status-banner-title {
  color: #1d4ed8;
}

.status-banner.refunded .status-banner-icon {
  background: #ede9fe;
  color: #6d28d9;
}

.status-banner.refunded .status-banner-title {
  color: #6d28d9;
}

.status-banner.warning .status-banner-icon {
  background: #fef3c7;
}

.status-banner.warning .status-banner-icon::after {
  content: "!";
  font-weight: 800;
  font-size: 1.1rem;
  color: #92400e;
}

.status-banner.warning .status-banner-title {
  color: #92400e;
}

.status-banner.danger .status-banner-icon {
  background: #fee2e2;
  position: relative;
}

.status-banner.danger .status-banner-icon::before,
.status-banner.danger .status-banner-icon::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 3px;
  background: #b91c1c;
  border-radius: 2px;
}

.status-banner.danger .status-banner-icon::before {
  transform: rotate(45deg);
}

.status-banner.danger .status-banner-icon::after {
  transform: rotate(-45deg);
}

.status-banner.danger .status-banner-title {
  color: #b91c1c;
}

.participant-row {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  font-size: 0.92rem;
}

.participant-row:first-child {
  border-top: none;
}

.participant-row strong {
  color: var(--dark);
}

.participant-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

/* 通用的圓形人像 icon，訂單狀態頁的參加者姓名／選時段頁的參加者列都會用到 */
.participant-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary);
  flex-shrink: 0;
}

.participant-row span {
  color: var(--text-gray);
  font-size: 0.88rem;
}

.participant-row .participant-icon {
  color: var(--primary);
}

/* 完成付款頁參加者列 */
.order-location-room,
.order-location-time {
  display: block;
}

.btn-outline-primary-custom {
  display: inline-block;
  padding: 11px 24px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: 0.2s;
}

.btn-outline-primary-custom:hover {
  background: var(--primary);
  color: white;
}

/* 我的訂單列表頁 */
.orders-section {
  max-width: 900px;
  margin: 50px auto 90px;
  padding: 0 20px;
}

.orders-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 24px;
}

.orders-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  margin-bottom: 28px;
  overflow: hidden;
}

/* 每筆訂單一張獨立卡片*/
.order-card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.order-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  padding: 18px 22px;
  text-decoration: none;
  color: inherit;
  transition: 0.2s;
}

.order-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.order-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

/* 訂單編號本身不換行，避免被擠斷成兩行；太窄的手機（如 iPhone SE）
   改在下面的 @media (max-width: 400px) 縮小字級/徽章尺寸讓整列擠得下，
   而不是讓箭頭跟著換到下一行（箭頭代表「往右看更多」，換行會不直觀） */
.order-card-no {
  font-weight: 700;
  color: var(--dark);
  white-space: nowrap;
}

/* 桌機/手機都顯示這一組，但內容不同：桌機只留右箭頭示意可點擊（狀態
   已經顯示在下面 .order-card-left，這裡的狀態徽章預設隱藏，見
   .order-top-status-badge）；手機才會看到狀態徽章＋箭頭一起顯示 */
.order-card-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-status-badge.order-top-status-badge {
  display: none;
}

/* 桌機：日期＋狀態｜課程縮圖+名稱｜訂單金額，三塊排成一列（查看明細用卡片右上角的箭頭示意） */
.order-card-bottom {
  display: flex;
  align-items: center;
  gap: 24px;
}

.order-card-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 240px;
  padding-right: 20px;
  border-right: 1px solid var(--border-color);
}

/* 桌機：日期／狀態各自一列，label 置左、真正的值置右 */
.order-card-left-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.order-card-left-label {
  font-size: 0.85rem;
  color: var(--text-gray);
}

.order-card-date {
  font-size: 0.85rem;
  color: var(--text-main);
  font-weight: 500;
}

.order-card-course {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.order-course-thumb {
  width: 60px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--light-bg) 100%);
}

.order-course-name {
  font-size: 0.92rem;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 手機版才出現的分隔線（課程名稱跟金額之間），桌機是同一列排列，不需要 */
.order-card-divider {
  display: none;
  border: 0;
  border-top: 1px solid var(--border-color);
  margin: 12px 0;
  /* Bootstrap 的 hr reset 預設 opacity: 0.25，會讓這條線看起來比
     .order-card-top 的 border-bottom 淡很多，這裡蓋掉恢復成完全不透明 */
  opacity: 1;
}

.order-card-actions {
  flex-shrink: 0;
}

.order-amount {
  white-space: nowrap;
}

.order-amount-label {
  font-weight: 400;
  color: var(--dark);
}

/* 桌機：「訂單金額」四字改成跟課程名稱同樣大小 */
@media (min-width: 768px) {
  .order-amount-label {
    font-size: 0.92rem;
  }
}

.order-amount-value {
  font-weight: 700;
  color: var(--primary);
}

/* 桌機/手機都顯示，貼在卡片右上角示意「整張可點擊」 */
.order-detail-chevron {
  display: block;
  color: var(--text-gray);
  flex-shrink: 0;
}

.order-status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.status-paid {
  background: #dcfce7;
  color: #15803d;
}

.status-pending {
  background: #fef3c7;
  color: #b45309;
}

.status-failed {
  background: #fee2e2;
  color: #b91c1c;
}

.status-review {
  background: var(--light-bg);
  color: var(--text-gray);
}

.status-refunding {
  background: #ede9fe;
  color: #6d28d9;
}

.status-refunded {
  background: #ede9fe;
  color: #6d28d9;
}

.orders-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-gray);
}

.orders-empty a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

/* 手機：頂部列變成「訂單編號 + 狀態/箭頭」，下面依序改成直向堆疊
   （日期 → 課程名稱 → 分隔線 → 金額），課程縮圖隱藏，桌機才有的日期/狀態
   label 也隱藏，因為手機頂部已經有狀態徽章＋箭頭當作「可點擊」的提示 */
@media (max-width: 767px) {
  .order-status-badge.order-top-status-badge {
    display: inline-block;
  }
  .order-card-bottom {
    display: block;
  }
  .order-card-left {
    display: block;
    flex: none;
    padding-right: 0;
    border-right: none;
  }
  /* 手機的日期這一列不用桌機的兩端對齊，label 跟真正的日期緊接在一起 */
  .order-card-left-row {
    justify-content: flex-start;
    gap: 4px;
  }
  /* 手機的真實日期字體樣式跟「訂單日期：」label 一致 */
  .order-card-date {
    color: var(--text-gray);
    font-weight: 400;
  }
  .order-card-status-row {
    display: none;
  }
  .order-card-course {
    margin-top: 8px;
  }
  .order-course-thumb {
    display: none;
  }
  .order-card-divider {
    display: block;
  }
  /* 「訂單金額」四字置左、「$+金額」置右，
     跟日期那一列同一種 label 左／值右排法 */
  .order-amount {
    display: flex;
    justify-content: space-between;
  }
}

/* 極窄手機縮小訂單編號跟頂部狀態徽章/箭頭的字級與間距，
   讓「訂單編號：xxx」＋狀態徽章＋箭頭擠得下同一行，
   避免編號被斷成兩行，也避免箭頭被擠到下一行 */
@media (max-width: 400px) {
  .order-card-no {
    font-size: 0.9rem;
  }
  .order-status-badge.order-top-status-badge {
    font-size: 0.7rem;
    padding: 3px 8px;
  }
  .order-card-top-right {
    gap: 5px;
  }
  .order-detail-chevron {
    width: 15px;
    height: 15px;
  }
}

/* 訂單明細頁 */
.order-detail-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}

/* 用 flex 而不是 auto-fit 的 grid：這裡固定只有 2 個欄位，如果用 grid 的
   auto-fit 在寬版頁面（例如後台訂單明細頁沒有寬度上限的區塊）會把兩欄拉開到
   幾乎貼齊左右兩側，flex 讓欄位照內容寬度靠在一起、有需要才換行 */
.detail-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin-bottom: 20px;
}

/* 會員中心訂單明細頁：固定兩欄（訂單編號／建立時間 + 狀態徽章／查看轉帳
   資訊按鈕），用 grid 蓋掉上面共用的 flex，讓第二排的徽章跟按鈕精準對齊
   第一排的訂單編號跟建立時間——只在這個頁面（.detail-section 裡）生效，
   不影響後台訂單明細頁那邊欄位數量不固定（2~3 個）的 .detail-meta-grid */
.detail-section .detail-meta-grid {
  display: grid;
  grid-template-columns: max-content max-content;
  /* 徽章跟按鈕高度不一樣，grid item 預設 stretch 到整列高度時，比較矮的
     徽章會貼在格子頂端而不是跟按鈕一樣居中，改成 center 讓每格照自己
     內容高度對齊 */
  align-items: center;
}

@media (max-width: 500px) {
  .detail-section .detail-meta-grid {
    grid-template-columns: 1fr;
  }
}

.participant-subhead-spaced {
  margin-top: 18px;
}

.back-link {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: 0.2s;
}

.back-link:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* 關於我們頁：這裡的標題/資訊卡都用 about- 前綴的新 class，不動到既有頁面 */
.about-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: white;
  padding: 70px 5% 60px;
  text-align: center;
}

.about-header h1 {
  font-size: 2.2rem;
  margin-bottom: 12px;
}

.about-header p {
  opacity: 0.9;
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto;
}

.about-section {
  max-width: 900px;
  margin: 50px auto 90px;
  padding: 0 20px;
}

.about-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  padding: 30px;
  margin-bottom: 30px;
}

.about-card p {
  color: var(--text-main);
}

.about-card p + p {
  margin-top: 14px;
}

.about-section-title {
  border-left: 5px solid var(--primary);
  padding-left: 15px;
  margin-bottom: 22px;
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--dark);
}

.about-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

.about-info-box {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
}

.about-info-box h3 {
  font-size: 1.05rem;
  color: var(--primary);
  margin-bottom: 8px;
}

.about-info-box p {
  font-size: 0.9rem;
  color: var(--text-gray);
}

.about-info-box p + p {
  margin-top: 4px;
}

/* 總公司卡片沿用教室據點的 .about-info-box / .about-info-row（左邊資訊、右邊 Google 地圖）版型，
   地址下面電話/Email 各一行、前面多一個線條圖示（電話筒／信封），跟文字左右並排、垂直置中 */
.about-contact-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
}

.about-contact-line svg {
  color: var(--primary);
  flex-shrink: 0;
}

/* 總公司卡片中把地圖改成固定高度（不再吃 aspect-ratio），縮小高度差 */
.about-hq-box .about-map-embed {
  aspect-ratio: auto;
  height: 190px;
}

@media (max-width: 640px) {
  .about-hq-box .about-map-embed {
    height: 200px;
  }
}

.about-transit-text {
  white-space: pre-line;
}

.about-transit-html {
  font-size: 0.9rem;
  color: var(--text-gray);
}

.about-transit-html h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 12px 0 4px;
}

.about-transit-html h4:first-child {
  margin-top: 0;
}

.about-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.about-map-embed {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

@media (max-width: 640px) {
  .about-info-row {
    grid-template-columns: 1fr;
  }
}

.about-map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 後台管理 */
.admin-body {
  background-color: #f8fafc;
}

.admin-topbar {
  background: var(--darker);
  color: #cbd5e1;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  row-gap: 8px;
  font-size: 0.85rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: #ffffff;
  margin-right: auto;
}

.admin-topbar-tag {
  background: var(--accent);
  color: #1e293b;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}

.admin-topbar-email {
  white-space: nowrap;
}

.admin-topbar-link {
  color: #cbd5e1;
  text-decoration: none;
  transition: 0.2s;
}

.admin-topbar-link:hover {
  color: #ffffff;
}

.admin-topbar-link.back-to-site {
  padding: 5px 12px;
  border: 1px solid #334155;
  border-radius: 6px;
}

.admin-topbar-link.back-to-site:hover {
  border-color: #64748b;
}

/* 選單（三橫線）圖示：手機版才顯示，放在 topbar 右側，用來開關左側抽屜式選單；
   桌面版維持側欄常駐顯示，不需要這顆按鈕 */
.admin-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #cbd5e1;
  cursor: pointer;
}

.admin-menu-toggle:hover {
  border-color: #64748b;
  color: #ffffff;
}

/* 手機版 topbar 只留標題、管理員 email、選單圖示 */
.admin-nav-mobile-only {
  display: none;
}

@media (max-width: 991.98px) {
  .admin-topbar-link.back-to-site,
  .admin-topbar-logout,
  .admin-topbar-tag {
    display: none;
  }

  .admin-topbar {
    flex-wrap: nowrap;
    font-size: 0.78rem;
  }

  .admin-topbar-email {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
  }

  .admin-menu-toggle {
    flex-shrink: 0;
  }

  .admin-nav-mobile-only {
    display: block;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  body.admin-login-page .admin-topbar-link.back-to-site {
    display: inline-block;
  }
}

/* 後台登入頁 */
.admin-auth-section {
  min-height: calc(100vh - 49px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.admin-auth-section .auth-card {
  width: 100%;
  max-width: 400px;
}

.auth-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.auth-footer-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-gray);
  margin-top: 22px;
}

.admin-layout {
  display: flex;
  min-height: calc(100vh - 49px);
}

.admin-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--dark);
  padding: 20px 0;
}

/* 側邊選單分組標題：只是把項目視覺分成幾群 */
.admin-nav-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 20px;
  margin: 22px 0 8px;
}

.admin-nav-group-label:first-child {
  margin-top: 0;
}

.admin-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-nav a {
  display: block;
  padding: 10px 20px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: 0.15s;
}

.admin-nav a:hover {
  background: rgba(255,255,255,0.04);
  color: #ffffff;
}

.admin-nav a.active {
  background: rgba(0,74,173,0.25);
  border-left-color: var(--primary-light);
  color: #ffffff;
  font-weight: 700;
}

.admin-content {
  flex: 1;
  min-width: 0;
  padding: 32px 36px;
}

@media (max-width: 600px) {
  .admin-content {
    padding: 20px 16px;
  }

  .form-card .form-row {
    grid-template-columns: 1fr;
  }
}

/* 後台總覽頁 */
.admin-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 24px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  transition: 0.2s;
}

.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--dark);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-gray);
  margin-top: 4px;
}

.admin-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 14px;
}

.alert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.alert-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 18px 20px;
  text-decoration: none;
  transition: 0.2s;
}

.alert-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.alert-card .stat-value {
  color: #dc2626;
}

.alert-card .stat-label {
  color: var(--text-main);
}

/* 後台列表頁 */
.admin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.admin-page-header .admin-page-title {
  margin-bottom: 0;
}

.admin-primary-btn {
  display: inline-block;
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}

.admin-primary-btn:hover {
  background: var(--primary-dark);
  color: white;
}

/* 開放時段設定頁 */
.admin-page-subtitle {
  font-size: 0.9rem;
  color: var(--text-gray);
  margin-bottom: 24px;
}

/* 看板分頁列 */
.board-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 24px;
  overflow-x: auto;
}

.board-tab {
  padding: 12px 18px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-gray);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.board-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* 看板篩選列 */
.board-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.board-filter-bar select,
.board-filter-bar input[type="date"],
.board-filter-bar input[type="text"] {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text-main);
  background: #fff;
}

.board-filter-bar input[type="text"] {
  min-width: 320px;
}

.date-range-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
  gap: 8px;
}

.date-range-sep {
  font-size: 0.85rem;
  color: var(--text-gray);
}

.board-filter-hint {
  font-size: 0.8rem;
  color: var(--text-gray);
  text-decoration: underline;
}

.board-filter-hint:hover {
  color: var(--primary);
}

/* 即將到來看板 */
.day-group {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  margin-bottom: 20px;
  overflow: hidden;
}

.day-group-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  row-gap: 4px;
  padding: 14px 20px;
  background: var(--light-bg);
  border-bottom: 1px solid var(--border-color);
}

.day-group-date {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
}

.day-group-count {
  font-size: 0.8rem;
  color: var(--text-gray);
}

.day-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 10px;
}

.day-badge.today {
  background: var(--danger);
  color: #fff;
}

.day-badge.tomorrow {
  background: var(--accent);
  color: #fff;
}

.session-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.session-table.has-order th:nth-child(1),
.session-table.has-order td:nth-child(1) {
  width: 12%;
}

.session-table.has-order th:nth-child(2),
.session-table.has-order td:nth-child(2) {
  width: 14%;
}

.session-table.has-order th:nth-child(3),
.session-table.has-order td:nth-child(3) {
  width: 44%;
}

.session-table.has-order th:nth-child(4),
.session-table.has-order td:nth-child(4) {
  width: 12%;
}

.session-table.has-order th:nth-child(5),
.session-table.has-order td:nth-child(5) {
  width: 18%;
}

.order-link-tag {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}

.order-link-tag:hover {
  text-decoration: underline;
}

.session-table th {
  text-align: left;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-color);
}

.session-table td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem;
  color: var(--text-main);
}

.session-table tbody tr:last-child td {
  border-bottom: none;
}

.session-time {
  font-weight: 700;
  color: var(--dark);
  white-space: nowrap;
}

.classroom-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--primary-light);
  color: var(--primary);
  white-space: nowrap;
}

.headcount-badge {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark);
}

.headcount-badge .unit {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-gray);
}

.prep-trigger-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--border-color);
}

.prep-trigger-btn {
  padding: 6px 14px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  transition: 0.2s;
}

.prep-trigger-btn:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

/* Modal：openModal/closeModal 切換 .open class + Escape 鍵關閉 */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}

.modal-overlay.open {
  display: flex;
}

.modal-box {
  background: var(--card-bg);
  border-radius: 12px;
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.modal-box.modal-box-wide {
  max-width: 860px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
}

.modal-close-btn {
  border: none;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-gray);
  cursor: pointer;
  padding: 2px 6px;
}

.modal-close-btn:hover {
  color: var(--dark);
}

.modal-body {
  padding: 20px 24px;
  overflow-x: auto;
}

.invoice-cross-day-hint {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-color);
  font-size: 0.8rem;
  color: var(--text-gray);
}

.prep-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.prep-table th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-gray);
  padding: 0 8px 6px 0;
}

.prep-table td {
  padding: 5px 8px 5px 0;
  color: var(--text-main);
  vertical-align: top;
}

.prep-table th.text-end,
.prep-table td.text-end {
  text-align: right;
}

.invoice-prep-table tbody tr + tr td {
  border-top: 1px dashed var(--border-color);
  padding-top: 10px;
}

.addon-review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.addon-review-table th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-gray);
  padding: 0 8px 6px 0;
}

.addon-review-table td {
  padding: 5px 8px 5px 0;
  color: var(--text-main);
  vertical-align: top;
}

.addon-review-table th.text-end,
.addon-review-table td.text-end {
  text-align: right;
}

.invoice-prep-table tbody tr td {
  padding-bottom: 10px;
}

.invoice-personal {
  font-style: italic;
  color: var(--text-gray);
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-gray);
  font-size: 0.92rem;
}

.session-table-wrap {
  overflow-x: auto;
}

@media (max-width: 640px) {
  .session-table.has-order th:nth-child(1),
  .session-table.has-order td:nth-child(1) {
    width: 70px;
  }

  .session-table.has-order th:nth-child(2),
  .session-table.has-order td:nth-child(2) {
    width: 95px;
  }

  .session-table.has-order th:nth-child(3),
  .session-table.has-order td:nth-child(3) {
    width: auto;
  }

  .session-table.has-order th:nth-child(4),
  .session-table.has-order td:nth-child(4) {
    width: 55px;
  }

  .session-table.has-order th:nth-child(5),
  .session-table.has-order td:nth-child(5) {
    width: 165px;
  }

  .session-table th,
  .session-table td {
    padding: 10px 10px;
  }

  .session-table {
    min-width: 560px;
  }

  /* 窄螢幕上讓 prep-table 維持可讀的最小寬度，改靠 .modal-body 的
     overflow-x:auto 橫向捲動，而不是把欄位擠壓到重疊看不清楚 */
  .prep-table {
    min-width: 480px;
  }

  .invoice-prep-table {
    min-width: 640px;
  }
}

/* 教室行事曆看板 */
.calendar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.classroom-switch {
  display: inline-flex;
  background: var(--light-bg);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}

.classroom-switch-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border: none;
  background: none;
  border-radius: 7px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-gray);
  text-decoration: none;
  cursor: pointer;
  transition: 0.15s;
}

.classroom-switch-btn.active {
  background: var(--card-bg);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.month-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.month-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--card-bg);
  color: var(--text-main);
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: 0.15s;
}

.month-nav-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.month-nav-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  min-width: 100px;
  text-align: center;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 16px;
  font-size: 0.82rem;
  color: var(--text-main);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.legend-swatch.booked {
  background: var(--primary-light);
  border: 1px solid var(--primary);
}

.legend-swatch.closed {
  background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 4px, #e2e8f0 4px, #e2e8f0 8px);
  border: 1px solid var(--border-color);
}

.legend-swatch.partial-closed {
  background: #fef2f2;
  border: 1px solid var(--danger);
}

.legend-swatch.today {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: none;
}

.big-calendar {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  overflow: hidden;
}

.big-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--light-bg);
  border-bottom: 1px solid var(--border-color);
}

.big-calendar-weekdays > div {
  padding: 10px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.big-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.big-calendar-day {
  height: 118px;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}

.big-calendar-day:nth-child(7n) {
  border-right: none;
}

.big-calendar-grid > .big-calendar-day:nth-last-child(-n+7) {
  border-bottom: none;
}

.big-calendar-day.empty {
  background: #fafbfc;
}

.big-calendar-day.closed-day {
  background: repeating-linear-gradient(45deg, #fafbfc, #fafbfc 8px, #f1f5f9 8px, #f1f5f9 16px);
}

.day-number {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark);
}

.today .day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.76rem;
}

.day-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.event-chip {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--primary-light);
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

a.event-chip:hover {
  background: #d5e6fb;
}

.event-chip.partial-closed {
  background: #fef2f2;
  color: var(--danger);
}

.clickable-day {
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s;
}

.clickable-day:hover {
  background-color: var(--light-bg);
  box-shadow: 0 2px 8px rgba(0, 74, 173, 0.15);
}

.clickable-day.closed-day:hover {
  background: repeating-linear-gradient(45deg, #fee2e2, #fee2e2 8px, #fecaca 8px, #fecaca 16px);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}

.day-more-hint {
  font-size: 0.66rem;
  color: var(--text-gray);
}

/* 教室行事曆的當日 modal 內容是一串 event-chip（不是表格），跟即將到來頁
   modal-body 預設的 table 版面不同，所以另外包一層 flex 容器 */
.day-modal-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.day-modal-events .event-chip {
  white-space: normal;
}

.closed-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--danger);
  background: #fef2f2;
  padding: 2px 8px;
  border-radius: 10px;
  align-self: flex-start;
}

.closed-reason {
  font-size: 0.68rem;
  color: var(--text-gray);
}

@media (max-width: 640px) {
  .big-calendar-day {
    min-height: 90px;
  }
}

/* 統計看板 */
.top-summary-row {
  display: flex;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 28px;
}

.top-summary-quarter {
  flex: 0 0 calc(25% - 15px);
  min-width: 0;
  margin-bottom: 0;
}

.board-section.top-summary-half {
  flex: 0 0 calc(50% - 10px);
  min-width: 0;
  margin-bottom: 0;
}

.monthly-charts-row {
  display: flex;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 24px;
}

.monthly-charts-row > .board-section {
  flex: 1 1 calc(50% - 10px);
  min-width: 0;
  margin-bottom: 0;
}

.revenue-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  padding: 20px 24px;
}

.revenue-stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.revenue-stat-card-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-gray);
}

.revenue-stat-card-select {
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--text-main);
  background: #fff;
}

.revenue-stat-card-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.01em;
}

.revenue-stat-card-value .currency-unit {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-gray);
  margin-right: 4px;
}

.revenue-stat-card-compare {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-gray);
}

.revenue-stat-card-compare .up {
  color: var(--success);
  font-weight: 700;
}

.revenue-stat-card-compare .down {
  color: var(--danger);
  font-weight: 700;
}

/* 區塊卡片 */
.board-section {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  padding: 22px 24px;
  margin-bottom: 24px;
}

.board-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.board-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
}

.board-section-subtitle {
  font-size: 0.78rem;
  color: var(--text-gray);
  margin-top: 3px;
}

/* 純 CSS 柱狀圖：每欄 flex:1，長條高度用 inline style 的百分比控制，
   不引入額外圖表套件 */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 220px;
  padding: 0 4px;
  border-bottom: 1px solid var(--border-color);
}

.bar-chart-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.bar-chart-value {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-gray);
  margin-bottom: 4px;
  white-space: nowrap;
}

.bar-chart-bar {
  width: 60%;
  min-width: 18px;
  background: var(--primary);
  border-radius: 4px 4px 0 0;
}

.bar-chart-labels {
  display: flex;
  gap: 14px;
  padding: 0 4px;
  margin-top: 8px;
}

.bar-chart-labels .bar-chart-col-label {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-main);
}

/* 折線圖，SVG 只負責畫線／漸層填色／格線，圓點跟數字用
   一般 HTML 絕對定位疊上去 */
.line-chart {
  position: relative;
  height: 220px;
  border-bottom: 1px solid var(--border-color);
}

.line-chart-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.line-chart-grid {
  stroke: var(--border-color);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.line-chart-gradient-start {
  stop-color: var(--primary);
}

.line-chart-gradient-end {
  stop-color: var(--primary);
}

.line-chart-area {
  stroke: none;
}

.line-chart-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 3px 5px rgba(15, 23, 42, 0.18));
}

.line-chart-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
  transform: translate(-50%, -50%);
}

.line-chart-dot-highlight {
  width: 10px;
  height: 10px;
  background: var(--primary-dark);
}

/* 滑鼠移到折線圖的點上顯示完整數字。 */
.line-chart-dot::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.line-chart-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 26px;
  background: var(--dark);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 140px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.25);
  z-index: 20;
  text-align: left;
  white-space: nowrap;
}

.line-chart-dot:hover .line-chart-tooltip {
  display: block;
}

.line-chart-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--dark);
}

.line-chart-tooltip-month {
  font-size: 0.74rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  white-space: nowrap;
}

.line-chart-tooltip-amount {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.line-chart-value {
  position: absolute;
  transform: translate(-50%, calc(-100% - 12px));
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-gray);
  white-space: nowrap;
}

.line-chart-value-highlight {
  color: var(--dark);
  font-weight: 700;
}

.line-chart-labels {
  display: flex;
  margin-top: 8px;
}

.line-chart-labels .bar-chart-col-label {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-main);
}

/* 疊加柱狀圖 */
.bar-chart-bar-wrap {
  position: relative;
  width: 60%;
  min-width: 18px;
}

.bar-chart-bar.stacked {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  background: none;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}

/* 疊加順序（DOM 由下而上） */
.segment.status-paid { background: var(--primary); }
.segment.status-failed { background: #ef4444; }
.segment.status-refunded { background: #8b5cf6; }
.segment.status-refunding { background: #c4b5fd; }
.segment.status-pending { background: #f59e0b; }
.segment.status-review { background: #94a3b8; }

.bar-chart-col.hoverable:hover .bar-chart-bar {
  opacity: 0.85;
}

.status-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 34px;
  background: var(--dark);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 190px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.25);
  z-index: 20;
  text-align: left;
}

.bar-chart-col.hoverable:hover .status-tooltip {
  display: block;
}

.status-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--dark);
}

.status-tooltip-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  white-space: nowrap;
}

.status-tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  white-space: nowrap;
}

.status-tooltip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.status-tooltip-label {
  flex: 1;
  font-size: 0.78rem;
  color: #e2e8f0;
}

.status-tooltip-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--text-main);
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chart-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* 熱門課程 */
.rank-toggle {
  display: inline-flex;
  background: var(--light-bg);
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
}

.rank-toggle-btn {
  padding: 7px 16px;
  border: none;
  background: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-gray);
  cursor: pointer;
}

.rank-toggle-btn.active {
  background: var(--card-bg);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(15,23,42,0.12);
}

.rank-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rank-row {
  display: grid;
  grid-template-columns: 28px 1fr 140px 70px;
  align-items: center;
  gap: 12px;
}

.rank-index {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-gray);
  text-align: center;
}

.rank-index.top3 {
  color: var(--primary);
}

.rank-name {
  font-size: 0.88rem;
  color: var(--dark);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-bar-track {
  background: var(--light-bg);
  border-radius: 5px;
  height: 14px;
  overflow: hidden;
}

.rank-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 5px;
}

.rank-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark);
  text-align: right;
}

.rank-panel {
  display: none;
}

.rank-panel.active {
  display: block;
}

.diversity-split {
  display: flex;
  gap: 32px;
}

.diversity-split-chart {
  flex: 1;
  min-width: 0;
}

.diversity-split-chart .bar-chart-col.clickable {
  cursor: pointer;
}

.diversity-split-chart .bar-chart-col.clickable:hover .bar-chart-bar {
  opacity: 0.82;
}

.diversity-split-chart .bar-chart-col.clickable.active .bar-chart-bar {
  background: var(--primary-dark);
}

.diversity-split-list {
  flex: 1;
  min-width: 0;
  padding-left: 32px;
  border-left: 1px solid var(--border-color);
}

.diversity-split-empty {
  font-size: 0.85rem;
  color: var(--text-gray);
}

.diversity-split-detail {
  display: none;
}

.diversity-split-detail.active {
  display: block;
}

.diversity-split-detail-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--dark);
  margin-bottom: 14px;
}

.diversity-split-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.diversity-split-detail-list li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.diversity-split-detail-index {
  flex: 0 0 24px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-gray);
}

.diversity-split-detail-name {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--dark);
}

@media (max-width: 800px) {
  .top-summary-row {
    flex-direction: column;
  }
  .top-summary-quarter,
  .top-summary-half {
    flex: 1 1 auto;
    width: 100%;
  }
  .monthly-charts-row {
    flex-direction: column;
  }
  .monthly-charts-row > .board-section {
    flex: 1 1 auto;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .board-section {
    overflow-x: auto;
  }
  .bar-chart,
  .bar-chart-labels {
    min-width: 480px;
  }
  .rank-row {
    grid-template-columns: 24px 1fr 90px 60px;
  }
  .diversity-split {
    flex-direction: column;
  }
  .diversity-split-list {
    padding-left: 0;
    border-left: none;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
  }
}

.weekday-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}

.weekday-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  overflow: hidden;
}

.weekday-card-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--dark);
}

.slot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.88rem;
  color: var(--text-main);
}

.slot-row:last-child {
  border-bottom: none;
}

.slot-row.empty {
  color: var(--text-gray);
  font-style: italic;
}

.slot-time-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slot-duration {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--light-bg);
  color: var(--text-gray);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.slot-delete-btn {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  background: none;
  color: #dc2626;
  font-weight: 600;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  transition: 0.2s;
}

.slot-delete-btn:hover {
  background: #fee2e2;
}

.time-select-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 開始/結束時間的時/分選單 */
.form-card .time-select-row .form-select {
  width: 72px;
  flex: none;
  padding: 10px 26px 10px 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
}

/* 「新增時段」跳出的表單視窗 */
.form-modal .modal-content {
  background: transparent;
  border: none;
  box-shadow: none;
}

.admin-table-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  overflow: hidden;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  text-align: left;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 13px 18px;
  background: var(--light-bg);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.admin-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem;
  color: var(--text-main);
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-table tbody tr:hover {
  background: #fafbfc;
}

.course-name-cell {
  font-weight: 600;
  color: var(--dark);
}

/* 客戶管理 */
.participant-name-cell {
  font-weight: 600;
  color: var(--dark);
}

.participant-contact-cell {
  font-size: 0.82rem;
  color: var(--text-gray);
}

.participant-contact-cell .contact-email {
  color: var(--text-main);
}

.category-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge.active {
  background: #dcfce7;
  color: #15803d;
}

.status-badge.inactive {
  background: var(--light-bg);
  color: var(--text-gray);
}

.status-badge.featured {
  background: #fff3e0;
  color: #c2660a;
}

/* 公休設定頁 */
.type-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.type-badge.one-time {
  background: #fef3c7;
  color: #92400e;
}

.type-badge.weekly {
  background: var(--primary-light);
  color: var(--primary);
}

/* 會員清單頁 */
.member-name-cell {
  font-weight: 600;
  color: var(--dark);
}

/* 會員明細頁 */
.order-no-cell {
  font-weight: 600;
  color: var(--dark);
}

/* 訂單管理頁 */
.admin-order-no-label,
.admin-order-chevron,
.admin-order-amount-label,
.admin-field-label {
  display: none;
}


.identity-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.identity-badge.professional {
  background: var(--primary-light);
  color: var(--primary);
}

.identity-badge.student {
  background: #fff3e0;
  color: #c2660a;
}

/* 人工處理頁 */
.review-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 24px;
  overflow-x: auto;
}

.review-tab-btn {
  padding: 12px 16px;
  border: none;
  background: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-gray);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  transition: 0.15s;
}

.review-tab-btn:hover {
  color: var(--dark);
}

.review-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.review-tab-btn .count {
  color: inherit;
  opacity: 0.7;
}

.review-tab-btn.has-items .count {
  color: #dc2626;
  opacity: 1;
}

.review-tab-panel {
  display: none;
}

.review-tab-panel.active {
  display: block;
}

.review-section-hint {
  font-size: 0.82rem;
  color: var(--text-gray);
  margin-bottom: 14px;
  margin-left: 16px;
  max-width: 760px;
  line-height: 1.5;
}

.review-empty {
  font-size: 0.88rem;
  color: var(--text-gray);
  padding: 14px 0;
  margin-left: 16px;
}

.review-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  max-width: 860px;
  overflow: hidden;
  margin-bottom: 14px;
}

.review-card:last-child {
  margin-bottom: 0;
}

.review-card-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.review-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 700;
  background: #fee2e2;
  color: #dc2626;
  white-space: nowrap;
}

.review-participant-list {
  list-style: none;
  margin-bottom: 0;
}

.review-participant-list li {
  padding: 12px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  font-size: 0.88rem;
  color: var(--text-main);
}

.review-participant-list li:first-child {
  border-top: none;
}

.review-participant-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.review-participant-line1 {
  font-weight: 600;
  color: var(--dark);
}

.review-participant-line2 {
  font-size: 0.82rem;
  color: var(--text-gray);
}

.reschedule-link {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid var(--primary);
  border-radius: 6px;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.8rem;
  text-decoration: none;
  transition: 0.2s;
  white-space: nowrap;
}

.reschedule-link:hover {
  background: var(--primary);
  color: white;
}

/* 訂單明細頁 */
.order-course-card-body {
  padding: 0;
}

.order-course-card-header {
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.order-course-card-header::-webkit-details-marker {
  display: none;
}

.order-course-card-header:hover {
  background: #fafbfc;
}

.course-toggle-arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-left: 12px;
  transition: transform 0.2s;
}

.order-course-card[open] .course-toggle-arrow {
  transform: rotate(-135deg);
}

.order-course-card:not([open]) .detail-card-header {
  border-bottom-color: transparent;
}

.participant-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

/* 原地編輯切換：預設只顯示 .view-mode，容器加上 .is-editing 後互換成
   .edit-mode；標頭的「編輯」按鈕同時换成「儲存」「取消」兩個按鈕 */
.edit-toggle-btn {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: none;
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  transition: 0.2s;
}

.edit-toggle-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.edit-actions {
  display: inline-flex;
  gap: 6px;
}

.edit-actions .edit-only-show {
  display: none;
}

.edit-actions.is-editing .edit-only-hide {
  display: none;
}

.edit-actions.is-editing .edit-only-show {
  display: inline-block;
}

.edit-save-btn {
  display: inline-block;
  padding: 4px 12px;
  border: none;
  border-radius: 6px;
  background: var(--primary);
  color: white;
  font-weight: 600;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}

.edit-save-btn:hover {
  background: var(--primary-dark);
}

.edit-cancel-btn {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: none;
  color: var(--text-gray);
  font-weight: 600;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  transition: 0.2s;
}

.edit-cancel-btn:hover {
  border-color: #dc2626;
  color: #dc2626;
}

.edit-mode {
  display: none;
}

.is-editing .view-mode {
  display: none;
}

.is-editing .edit-mode {
  display: block;
}

/* 這頁的表單欄位是原地編輯用，比 .form-card 那組更緊湊，獨立一組
   scoped 在 .detail-card 底下的樣式，不共用 .form-card 的尺寸 */
.detail-card .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 16px;
  margin-bottom: 14px;
}

.detail-card .form-row .form-group {
  margin-bottom: 0;
}

.detail-card .form-group {
  margin-bottom: 14px;
}

.detail-card .form-group:last-of-type {
  margin-bottom: 0;
}

.detail-card .form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 5px;
}

.detail-card .form-control,
.detail-card .form-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--dark);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.detail-card .form-control:focus,
.detail-card .form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.detail-card .form-hint {
  font-size: 0.78rem;
  color: var(--text-gray);
  margin-top: 3px;
  margin-bottom: 0;
  line-height: 1.4;
}

.detail-card .form-control.company-selected {
  font-weight: 600;
}

.detail-card .form-save-btn,
.detail-card .form-submit-btn {
  display: inline-block;
  background: var(--primary);
  color: white;
  border: none;
  padding: 7px 18px;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}

.detail-card .form-save-btn:hover,
.detail-card .form-submit-btn:hover {
  background: var(--primary-dark);
}

.danger-card {
  border-color: #fca5a5;
}

.danger-card .detail-card-header {
  color: #dc2626;
  border-bottom-color: #fee2e2;
}

.danger-hint {
  font-size: 0.82rem;
  color: var(--text-gray);
  margin-bottom: 14px;
}

.edit-link {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid var(--primary);
  border-radius: 6px;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.2s;
}

.edit-link:hover {
  background: var(--primary);
  color: white;
}

.edit-link.secondary {
  border-color: var(--border-color);
  color: var(--text-main);
}

.edit-link.secondary:hover {
  background: var(--light-bg);
  border-color: var(--text-gray);
  color: var(--dark);
}

/* 教室管理頁 */
.row-actions {
  display: inline-flex;
  gap: 8px;
}

.classroom-name-cell {
  font-weight: 600;
  color: var(--dark);
}

/* 分類管理頁 */
.category-name-cell {
  font-weight: 600;
  color: var(--dark);
}

.delete-btn {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  background: none;
  color: #dc2626;
  font-weight: 600;
  font-size: 0.82rem;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.2s;
}

.delete-btn:hover {
  background: #fee2e2;
}

/* 編輯／刪除合併成同一個儲存格，靠右並排顯示，避免各自佔一整欄，
   刪除欄位（原本是表格最後一欄）不會因為吃掉多餘欄寬而看起來過大 */
.admin-actions-cell {
  text-align: right;
}

.admin-actions-cell .edit-link,
.admin-actions-cell form {
  display: inline-block;
  vertical-align: middle;
}

.admin-actions-cell form {
  margin-left: 8px;
}

/* 首頁管理頁 */
.slide-thumb {
  width: 96px;
  height: 54px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--light-bg) 100%);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 600;
  text-align: center;
  overflow: hidden;
}

.slide-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-title-cell {
  font-weight: 600;
  color: var(--dark);
}

.slide-title-cell.empty {
  font-weight: 400;
  color: var(--text-gray);
}

.admin-empty-row td {
  padding: 40px 18px;
  text-align: center;
  color: var(--text-gray);
  font-size: 0.9rem;
}

.admin-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* 會員清單頁搜尋框 */
.admin-search-bar {
  margin-bottom: 16px;
}

.admin-search-input {
  width: 100%;
  max-width: 360px;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--dark);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* 訂單管理頁 */
.orders-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.orders-filter-row .status-filter,
.orders-filter-row .admin-search-bar {
  margin-bottom: 0;
}

.orders-filter-row .admin-search-bar {
  flex: 1 1 320px;
}

.orders-filter-row .admin-search-input {
  width: 100%;
  max-width: 420px;
}

.status-filter {
  margin-bottom: 20px;
}

.status-filter select {
  width: auto;
  min-width: 220px;
  padding: 9px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--dark);
  background: #fff;
}

.status-filter select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.admin-pagination-info {
  font-size: 0.85rem;
  color: var(--text-gray);
}

.admin-pagination-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: 0.2s;
}

.admin-page-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.admin-page-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.admin-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .admin-table-card {
    overflow-x: auto;
  }
  .admin-table {
    min-width: 900px;
  }
}

/* 手機版改成卡片式呈現，隱藏 thead，但這裡改用 flex（而非單純 block 往下
   堆疊，會員中心訂單列表頁後來也改成獨立卡片、不再是表格了）。這幾條是任何
   .admin-table 共用的結構轉換規則，各頁欄位不同的隱藏/排序邏輯各自用
   .admin-table-courses / .admin-table-categories 這類頁面專屬 class 再往下細分，
   避免用不限定範圍的 nth-child 選到別頁去（courses 9 欄跟 categories 6 欄
   欄位數不同，共用 nth-child 會選錯欄） */
@media (max-width: 700px) {
  .admin-table-card {
    overflow-x: visible;
  }

  .admin-table, .admin-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .admin-table thead {
    display: none;
  }

  .admin-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
  }

  .admin-table td {
    border-bottom: none;
    padding: 0;
  }

  /* 課程管理頁 */
  .admin-table-card-courses {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }

  .admin-table-courses tr {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 16px 18px;
  }

  .admin-table-courses td {
    width: 100%;
  }

  .admin-table-courses td:nth-child(1),
  .admin-table-courses td:nth-child(2),
  .admin-table-courses td:nth-child(7),
  .admin-table-courses td:nth-child(8) {
    display: none;
  }

  .admin-table-courses td.course-name-cell {
    order: 1;
    font-weight: 700;
    font-size: 1rem;
    color: var(--dark);
    padding-right: 90px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
  }

  .admin-table-courses td.admin-course-category-cell {
    position: absolute;
    top: 14px;
    right: 38px;
    width: auto;
  }

  .admin-table-courses td:nth-child(5),
  .admin-table-courses td:nth-child(6) {
    font-size: 0.85rem;
    color: var(--text-gray);
  }

  .admin-table-courses td:nth-child(6) {
    order: 2;
  }

  .admin-table-courses td:nth-child(5) {
    order: 3;
  }

  .admin-table-courses td.admin-actions-cell {
    position: absolute;
    inset: 0;
    padding: 0;
    order: 3;
  }

  .admin-table-courses td.admin-actions-cell .edit-link {
    position: absolute;
    inset: 0;
    border: none;
    border-radius: 0;
    padding: 0;
    background: none;
  }

  /* 分類管理頁 */
  .admin-table-categories td:nth-child(1),
  .admin-table-categories td:nth-child(3),
  .admin-table-categories td:nth-child(4) {
    display: none;
  }

  .admin-table-categories td.category-name-cell {
    order: 1;
    font-size: 1rem;
  }

  .admin-table-categories td.admin-actions-cell {
    order: 2;
    margin-left: auto;
  }

  /* 首頁管理頁 */
  .admin-table-heroslides td.slide-title-cell,
  .admin-table-heroslides td:nth-child(1) {
    display: none;
  }

  .admin-table-heroslides td:nth-child(2) {
    order: 1;
  }

  .admin-table-heroslides td:nth-child(4) {
    order: 2;
    margin-left: auto;
  }

  .admin-table-heroslides td.admin-actions-cell {
    order: 3;
  }

  /* 教室管理頁 */
  .admin-table-classrooms td:nth-child(1),
  .admin-table-classrooms td:nth-child(3),
  .admin-table-classrooms td:nth-child(4) {
    display: none;
  }

  .admin-table-classrooms td.classroom-name-cell {
    order: 1;
    font-size: 1rem;
  }

  .admin-table-classrooms td:nth-child(5) {
    order: 2;
  }

  .admin-table-classrooms td.admin-actions-cell {
    order: 3;
    margin-left: auto;
  }

  .admin-table-classrooms td.admin-actions-cell .row-actions {
    display: flex;
    gap: 8px;
  }

  .admin-table-classrooms td.admin-actions-cell .row-actions .edit-link {
    white-space: nowrap;
  }

  /* 加購品項頁 */
  .admin-table-addons td:nth-child(1),
  .admin-table-addons td:nth-child(3) {
    display: none;
  }

  .admin-table-addons td:nth-child(2) {
    order: 1;
    font-size: 1rem;
  }

  .admin-table-addons td:nth-child(4) {
    order: 2;
  }

  .admin-table-addons td.admin-actions-cell {
    order: 3;
    margin-left: auto;
  }

  /* 公休設定頁 */
  .admin-table-closures td:nth-child(3) {
    order: 1;
    font-size: 1rem;
  }

  .admin-table-closures td:nth-child(2) {
    order: 2;
    margin-left: auto;
  }

  .admin-table-closures td:nth-child(4) {
    order: 3;
    flex: 1 1 100%;
    font-size: 0.85rem;
    color: var(--text-gray);
  }

  .admin-table-closures td.classroom-name-cell {
    order: 4;
    flex: 1 1 100%;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--text-gray);
  }

  .admin-table-closures td:nth-child(5) {
    order: 5;
    flex: 1 1 100%;
    font-size: 0.85rem;
    color: var(--text-gray);
  }

  .admin-table-closures td.admin-actions-cell {
    order: 6;
    flex: 1 1 100%;
    margin-top: 6px;
  }

  .admin-table-closures td.admin-actions-cell form {
    display: block;
    margin-left: 0;
  }

  .admin-table-closures td.admin-actions-cell .delete-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 8px 14px;
  }

  /* 會員清單頁 */
  .admin-table-card-members {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }

  .admin-table-members tr {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 16px 18px;
  }

  .admin-table-members td {
    width: 100%;
  }

  .admin-table-members td.member-name-cell {
    order: 1;
    font-weight: 700;
    font-size: 1rem;
    color: var(--dark);
    padding-right: 110px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
  }

  .admin-table-members td:nth-child(2),
  .admin-table-members td:nth-child(3),
  .admin-table-members td:nth-child(4) {
    font-size: 0.85rem;
    color: var(--text-gray);
  }

  .admin-table-members td:nth-child(4) {
    order: 2;
  }

  .admin-table-members td:nth-child(2) {
    order: 3;
  }

  .admin-table-members td:nth-child(3) {
    order: 4;
  }

  .admin-table-members td:nth-child(5) {
    position: absolute;
    top: 14px;
    right: 38px;
    width: auto;
  }

  .admin-table-members td.admin-actions-cell {
    position: absolute;
    inset: 0;
    padding: 0;
    order: 6;
  }

  .admin-table-members td.admin-actions-cell .edit-link {
    position: absolute;
    inset: 0;
    border: none;
    border-radius: 0;
    padding: 0;
    background: none;
  }

  /* 客戶管理／參加者清單頁 */
  .admin-table-card-participants {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }

  .admin-table-participants tr {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 16px 18px;
  }

  .admin-table-participants td {
    width: 100%;
  }

  .admin-table-participants td.participant-name-cell {
    order: 1;
    font-weight: 700;
    font-size: 1rem;
    color: var(--dark);
    padding-right: 90px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
  }

  .admin-table-participants td:nth-child(4) {
    position: absolute;
    top: 14px;
    right: 38px;
    width: auto;
  }

  .admin-table-participants td:nth-child(2),
  .admin-table-participants td:nth-child(3),
  .admin-table-participants td:nth-child(5),
  .admin-table-participants td:nth-child(6) {
    font-size: 0.85rem;
    color: var(--text-gray);
  }

  .admin-table-participants td:nth-child(2) {
    order: 2;
  }

  .admin-table-participants td:nth-child(3) {
    order: 3;
  }

  .admin-table-participants td:nth-child(5) {
    order: 4;
  }

  .admin-table-participants td:nth-child(6) {
    order: 5;
  }

  /* Email 另外有 .contact-email 設定自己的顏色（桌機版用），這裡蓋掉
     讓中間五行顏色一致；email 跟電話中間補 margin-bottom 湊齊跟其他
     行一樣的 4px 間距（那兩行同一個 td 裡的內容，不吃 tr 的 row-gap） */
  .admin-table-participants .participant-contact-cell .contact-email {
    color: inherit;
    margin-bottom: 4px;
  }

  /* 上課時間的 .session-time 桌機版是粗體深色（時間軸表格要凸顯），
     手機卡片這裡要蓋掉，跟其他四行的字重/顏色一致 */
  .admin-table-participants .session-time {
    font-weight: 400;
    color: inherit;
  }

  .admin-table-participants td:nth-child(7) {
    order: 6;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid var(--border-color);
  }

  /* 訂單管理頁 */
  .admin-table-card-orders {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }

  .admin-table-orders tr {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 16px 18px;
  }

  .admin-table-orders td {
    width: 100%;
  }

  .admin-order-no-label,
  .admin-order-chevron,
  .admin-order-amount-label,
  .admin-field-label {
    display: inline;
  }

  /* 第一條分隔線 */
  .admin-table-orders td.order-no-cell {
    order: 1;
    font-weight: 700;
    font-size: 1rem;
    color: var(--dark);
    padding-right: 110px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
  }

  /* 會員姓名／聯絡方式（Email+電話）／訂單時間這三格字級、顏色、間距
     都要一致 */
  .admin-table-orders td:nth-child(2),
  .admin-table-orders td.participant-contact-cell,
  .admin-table-orders td:nth-child(4) {
    order: 2;
    font-size: 0.85rem;
    color: var(--text-gray);
  }

  .admin-table-orders td.participant-contact-cell {
    order: 3;
  }

  .admin-table-orders td:nth-child(4) {
    order: 4;
  }

  .admin-table-orders .participant-contact-cell .contact-email {
    color: inherit;
    margin-bottom: 4px;
  }

  /* 狀態徽章跟箭頭一起放在卡片右上角，比照會員中心訂單列表頁的排法。*/
  .admin-table-orders td:nth-child(5) {
    position: absolute;
    top: 14px;
    right: 38px;
    width: auto;
  }

  /* 第二條分隔線 */
  .admin-table-orders td.text-end {
    order: 6;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid var(--border-color);
  }

  .admin-order-amount-label {
    font-weight: 400;
    color: var(--dark);
  }

  .admin-order-amount-value {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--primary);
  }

  .admin-table-orders td.admin-actions-cell {
    position: absolute;
    inset: 0;
    padding: 0;
    order: 7;
  }

  .admin-table-orders td.admin-actions-cell .edit-link {
    position: absolute;
    inset: 0;
    border: none;
    border-radius: 0;
    padding: 0;
    background: none;
  }

  .admin-order-view-text {
    display: none;
  }

  .admin-order-chevron {
    position: absolute;
    top: 16px;
    right: 14px;
    color: var(--text-gray);
  }
}

/* 手機版側欄改成左側滑出的抽屜選單，跟前台的選單抽屜是同一套做法 */
.admin-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 149;
}

@media (max-width: 991.98px) {
  .admin-menu-toggle {
    display: inline-flex;
  }

  .admin-layout.sidebar-open .admin-sidebar-backdrop {
    display: block;
  }

  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 78%;
    max-width: 280px;
    z-index: 150;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  .admin-layout.sidebar-open .admin-sidebar {
    transform: translateX(0);
  }
}