/* ============================================================================
 * common/pages/user.css — 跨主題共用會員頁面（登入 / 註冊 / 忘記密碼 / 重設密碼 / 個人資料）
 * ============================================================================
 *
 * 用途：
 *   提供 6 個前台主題共用的會員頁面樣式 baseline：登入頁、註冊頁、
 *   忘記密碼、重設密碼、個人資料頁（含 user-side-menu 側邊選單）。
 *
 * 設計意圖：
 *   - common/pages/user.css = default baseline
 *   - themes/default/pages/user.css 故意保持空殼
 *   - 其他主題透過 themes/{theme}/pages/user.css 對 baseline 做差異化
 *
 * 內容索引：
 *   區段 2: .user-side-menu 個人資料頁側邊選單
 *           - .user-side-menu / __header / __title / __subtitle / __list / __item /
 *             __item a / __icon / __text / __arrow / __divider
 *           - hover / is-active 狀態
 *
 * 使用頁面：
 *   - resources/views/web/user/login.blade.php
 *   - resources/views/web/user/register.blade.php
 *   - resources/views/web/user/forgetPassword.blade.php
 *   - resources/views/web/user/resetPassword.blade.php
 *   - resources/views/web/user/profile.blade.php
 *
 * 載入順序：
 *   common/{base,header,sidebar,footer,widget}.css → themes/default/{同}.css →
 *   common/pages/user.css（本檔）→ themes/default/pages/user.css → custom.css
 *
 * 抽取來源：default.css 兩個區段（皆平衡）：
 *   - line 2634~2698：message-box / email-login-box / login-box-title 含 RWD @media
 *   - line 2801~2910：user-side-menu 完整系列
 *
 * 註：.single-product-area / .message-box shared base rule (line 2599-2603) 已抽到
 *     common/pages/product.css；本檔接續 message-box 詳細樣式。
 *
 * 詳細規格：openspec/specs/web-theme-css/spec.md（Requirement R.FUNC.1 / R.FUNC.8）
 * 變更記錄：openspec/changes/issue518-web-theme-css-modularization/（task 6.5）
 * ============================================================================
 */


/* .message-box-section / .message-box / .message-box input 已遷至 common/base.css；
   跨 login / register / forget / resetPassword / contactUs 等頁面共用，
   無法限縮於 user.css。詳見 base.css 末段。 */

/* ============================================================================
 * 區段 2：.user-side-menu（個人資料頁側邊選單）
 *   抽取自 default.css line 2801~2910
 * ============================================================================
 */

/* 註：.user-side-menu 主規則（含 padding: 24px 20px）刻意不抽進本檔 —
 * 原因：HTML 元素 class 同時含 .widget 與 .user-side-menu，原 default.css
 * cascade 中 .widget { padding: 20px 8px }（line 5342）位置較後，覆寫了
 * .user-side-menu 的 padding 24px 20px。若本檔再次套用 .user-side-menu
 * 規則，會載入順序晚於 common/widget/ 內 .widget 規則，反向蓋回 24px 20px
 * → 視覺與 cm12 不一致。
 *
 * 解法：本檔不包含 .user-side-menu 主規則，讓 common/widget/ 內 cluster A
 * 的 .user-side-menu 與 cluster B 的 .widget 維持原 cascade（.widget 勝），
 * 還原 cm12 上 padding 20px 8px 的實際結果。
 *
 * .user-side-menu__* 子規則（specificity 較高、不被 .widget 影響）正常保留。
 */

.user-side-menu__header {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #f3f4f6;
}

.user-side-menu__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #111111;
}

.user-side-menu__subtitle {
  margin: 6px 0 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #9ca3af;
}

.user-side-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.user-side-menu__item {
  margin-bottom: 8px;
}

.user-side-menu__item:last-child {
  margin-bottom: 0;
}

.user-side-menu__item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: #111111;
  border: 1px solid transparent;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.user-side-menu__icon {
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c1c4cc;
  font-size: 16px;
}

.user-side-menu__text {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}

.user-side-menu__arrow {
  margin-left: auto;
  font-size: 12px;
  color: #ffffff;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s, transform 0.3s;
}

.user-side-menu__item a:hover {
  background: #f3f4f6;
  border-color: #f3f4f6;
}

.user-side-menu__item a:hover .user-side-menu__icon {
  color: #111111;
}

.user-side-menu__item.is-active a {
  background: #111827;
  color: #ffffff;
}

.user-side-menu__item.is-active .user-side-menu__icon {
  color: #ffffff;
}

.user-side-menu__item.is-active .user-side-menu__arrow {
  opacity: 1;
  transform: translateX(0);
}

.user-side-menu__item.is-active a:hover {
  background: #111827;
  border-color: #111827;
}

.user-side-menu__divider {
  height: 1px;
  background: #e5e7eb;
  margin: 12px 0;
}


/* 註：wishList 已獨立為自己的 page key（common/pages/wishList.css）並全面採用 wl- 前綴
   命名，與 base.css 內 .product-* / .pro-thumbnail-* cart 系列 class 完全脫鉤。
   舊覆寫已移除（user.css 不在 wishList 路由載入，覆寫亦無效）。 */


/* ============================================================================
 * 區段 3：會員中心改版 — 個人資料表單（.member-card / .member-form）
 *   卡片式分段、12 欄響應式格線、統一輸入框與焦點態；neutral 公版配色，
 *   主題可於 themes/<theme>/pages/user.css 覆寫品牌色（accent / 按鈕底色等）。
 *   保留欄位 id/name 與 parsley 驗證、recaptcha、.btn-submit JS 掛點不變。
 * ============================================================================ */

/* 會員中心整頁容器加寬至 1550（側選單＋內容更寬鬆；max-width 於小螢幕自動收窄）。
   套在 profile 的 .container 上（class="container member-center-container"） */
.member-center-container {
  max-width: 1550px;
}

/* 會員中心頁區段上下留白：.section 本身無垂直內距，內容會貼齊上方標題與下方 footer，
   於此補上下留白（左右留白由 container 內距負責）；小螢幕收斂 */
.member-center {
  padding: 16px 0 56px;
}

@media (max-width: 767.98px) {
  .member-center {
    padding: 8px 0 40px;
  }
}

/* 會員頁白卡：取代舊 .message-box，padding 與圓角自控（不受跨頁 message-box 約束） */
.member-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 6px 22px rgba(17, 24, 39, 0.07);
  overflow: hidden;
}

@media screen and (max-width: 767.98px) {
  .member-card {
    border-radius: 14px;
  }
}

.member-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.member-form__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 22px 28px 0;
  padding: 6px;
  background: #f3f5f8;
  border-bottom: 1px solid #eef0f3;
  border-radius: 12px;
}

.member-form__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 16px;
  color: #4b5563;
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.member-form__tab:hover,
.member-form__tab:focus-visible {
  color: #111827;
  background: rgba(255, 255, 255, 0.72);
  outline: none;
}

.member-form__tab.is-active {
  color: #111827;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.1);
}

.member-form__section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 40px 34px;
  border-bottom: 1px solid #eef0f3;
}

.member-form__section[data-member-tab-panel] {
  display: none;
}

.member-form__section[data-member-tab-panel].is-active {
  display: flex;
}

.member-form__section:nth-of-type(even) {
  background: #fbfcfd;
}

.member-form__section--security {
  background: #fbfcfd;
}

/* 分段標題：左側 accent bar（主題可覆寫色） */
.member-form__section-title {
  position: relative;
  margin: 0;
  padding-left: 14px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  color: #111827;
}

.member-form__section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  border-radius: 99rem;
  background: #111827;
}

/* 12 欄響應式格線 */
.member-form__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 22px 18px;
  max-width: 980px;
}

.member-form__field {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.member-form__field--half {
  grid-column: span 6;
}

.member-form__field--third {
  grid-column: span 4;
}

/* 四欄並排（issue #963）：聯絡與地址區塊的國家／縣市／區域／郵遞區號同一列 */
.member-form__field--quarter {
  grid-column: span 3;
}

.member-form__field--full {
  grid-column: span 12;
}

.member-form__field--compact {
  grid-column: span 6;
}

.member-form__field > label {
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #374151;
}

/* issue #713：選擇器同步——必填星號改語意類 form-required-mark */
.member-form__field > label .text-danger,
.member-form__field > label .form-required-mark {
  margin-right: 2px;
}

/* 統一輸入框 / 下拉：覆寫 base 的 .form-control / select 基底，限縮在 .member-form 內 */
.member-form .form-control,
.member-form select.form-control {
  width: 100%;
  height: auto;
  min-height: 48px;
  margin: 0;
  padding: 12px 14px;
  font-size: 15px;
  color: #111827;
  background: #ffffff;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.member-form select.form-control {
  cursor: pointer;
}

.member-form .form-control::placeholder {
  color: #9ca3af;
}

.member-form .form-control:focus,
.member-form select.form-control:focus {
  outline: none;
  border-color: #111827;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

.member-form .form-control.is-invalid {
  border-color: #dc2626;
}

.member-form .form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* 欄位變動提示：值與原始不同時邊框轉紅、focus 紅色 ring，提醒尚未送出的變更（JS 切換 .is-changed） */
.member-form .form-control.is-changed {
  border-color: #dc2626;
}

.member-form .form-control.is-changed:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* 下拉欄位的「未送出變更」提示（issue #1014）
 *
 * 本頁的下拉一律走全站共用元件 web-select（樣式在 common/form-select.css），原生 <select>
 * 會被 select2 隱藏，直接掛在它身上的 .is-changed 紅框看不見；select2 一律把容器插在原
 * <select> 之後，故改用相鄰兄弟選擇器把紅框轉掛到容器上。.is-invalid 已由元件本身處理。
 */
.member-form select.form-control.is-changed + .select2-container--cms .select2-selection--single {
  border-color: #dc2626;
}

.member-form select.form-control.is-changed + .select2-container--cms.select2-container--focus .select2-selection--single,
.member-form select.form-control.is-changed + .select2-container--cms.select2-container--open .select2-selection--single {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.member-birthday__controls {
  display: grid;
  grid-template-columns: minmax(112px, 1.15fr) minmax(86px, 0.85fr) minmax(86px, 0.85fr);
  gap: 10px;
}

.member-form .member-birthday__select {
  padding-right: 34px;
}

.member-form .member-birthday__select.is-invalid,
.member-form .member-birthday__select.is-changed {
  border-color: #dc2626;
}

.member-form__field .form-text,
.member-form__field small {
  margin-top: 6px;
  font-size: 12.5px;
  color: #9ca3af;
}

.member-form .invalid-feedback {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: #dc2626;
}

/* 社群綁定 badge 區 */
.member-form__social {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  max-width: 520px;
}

.member-form__social-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.95fr) minmax(96px, 0.75fr) max-content;
  gap: 12px;
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.member-form__social-provider {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #111827;
  font-size: 14px;
  font-weight: 800;
}

.member-form__social-provider i {
  width: 18px;
  color: #6b7280;
  text-align: center;
}

.member-form__social-row--google .member-form__social-provider i {
  color: #ea4335;
}

.member-form__social-row--facebook .member-form__social-provider i {
  color: #1877f2;
}

.member-form__social-row--line .member-form__social-provider i {
  color: #06c755;
}

.member-form__social-row--github .member-form__social-provider i {
  color: #24292f;
}

.member-form__social-email {
  min-width: 0;
  color: #6b7280;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.member-form__social-status {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  padding: 4px 10px;
  color: #4b5563;
  background: #f3f5f8;
  border-radius: 999rem;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.member-form__social-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: auto !important; /* 覆寫全站 .btn 既有寬度，社群綁定列需要短版動作鈕 */
  min-width: 78px;
  max-width: max-content;
  margin: 0;
  padding: 8px 16px;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 999rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
}

.member-form__social-action:hover,
.member-form__social-action:focus-visible {
  color: #111827;
  background: #f7f9fb;
  border-color: #9ca3af;
}

.member-form__social-action--danger {
  color: #b91c1c;
  background: #ffffff;
  border-color: #fecaca;
}

.member-form__social-action--primary {
  color: #ffffff;
  background: #111827;
  border-color: #111827;
}

.member-form__social-action--danger:hover,
.member-form__social-action--danger:focus-visible {
  color: #991b1b;
  background: #fef2f2;
  border-color: #fca5a5;
}

.member-form__social-action--primary:hover,
.member-form__social-action--primary:focus-visible {
  color: #ffffff;
  background: #374151;
  border-color: #374151;
}

/* footer：驗證碼 + 送出，與上方表單以細線分隔 */
.member-form__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding: 30px 40px 34px;
  background: #ffffff;
}

.member-form__recaptcha-label {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #374151;
}

.member-form__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* 送出按鈕：沿用 .btnNormal.gold 深底，改圓角加大（主題覆寫品牌色仍生效） */
.member-form .member-form__submit.btnNormal {
  width: auto;
  min-width: 180px;
  max-width: none;
  margin: 0;
  padding: 13px 32px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
}

@media screen and (max-width: 767.98px) {
  .member-form {
    gap: 0;
  }

  .member-form__section,
  .member-form__footer {
    padding: 24px 18px;
  }

  .member-form__tabs {
    margin: 14px 14px 0;
  }

  .member-form__tab {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 10px;
  }

  .member-form__field--half,
  .member-form__field--third,
  .member-form__field--quarter,
  .member-form__field--compact {
    grid-column: span 12;
  }

  .member-birthday__controls {
    grid-template-columns: 1fr;
  }

  .member-form .member-form__submit.btnNormal {
    width: 100%;
    min-width: 0;
  }

  .member-form__footer {
    grid-template-columns: 1fr;
  }

  .member-form__actions {
    justify-content: stretch;
  }

  .member-form__social-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .member-form__social-action {
    justify-self: stretch;
    width: 100% !important;
    max-width: none;
  }
}

/* 側選單卡片化：與 .member-card 同語彙（圓角 16 + 細邊 + 柔陰影）；
   .widget.user-side-menu (0,2,0) 勝過 common/widget/ 的 .widget (0,1,0) padding */
.widget.user-side-menu {
  padding: 18px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(17, 24, 39, 0.07);
}


/* ============================================================================
 * 區段 4：登入／註冊改版（.auth-card / .auth-form / .auth-social）— issue #622
 *   有第三方登入時 email 表單（主）＋社群登入（側欄）兩欄並排；無第三方時單欄表單
 *   置中收窄。neutral 公版配色，主題可於 themes/<theme>/pages/user.css 覆寫品牌色。
 *   保留 #loginForm/#registerForm、.btn-submit、.togglePassword、recaptcha、
 *   components.form.input 掛點不變。沿用 .member-form / .contact-form 設計語彙。
 * ============================================================================ */

.auth-center {
  padding: 16px 0 56px;
}

@media (max-width: 767.98px) {
  .auth-center {
    padding: 8px 0 40px;
  }
}

/* 容器寬度依版型：有社群兩欄較寬、無社群單欄收窄置中 */
.auth-center-container--split {
  max-width: 1000px;
}

.auth-center-container--single {
  max-width: 540px;
}

/* 註冊（欄位較多）無第三方時用較寬單欄，搭配密碼/確認密碼並排，避免又高又窄的瘦長卡；
   寬度＝有第三方時主表單同寬，社群開關前後欄位尺寸一致 */
.auth-center-container--single-wide {
  max-width: 680px;
}

.auth-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(17, 24, 39, 0.07);
  overflow: hidden;
}

.auth-card__body {
  display: flex;
  flex-wrap: wrap;
}

.auth-card__main {
  flex: 1 1 0;
  min-width: 0;
  padding: 36px 40px;
}

/* 社群側欄：淡底 + 左細線分隔，與主表單區隔 */
.auth-card__aside {
  flex: 0 0 320px;
  padding: 36px 32px;
  background: #f9fafb;
  border-left: 1px solid #eef1f4;
}

@media (max-width: 767.98px) {
  .auth-card__main,
  .auth-card__aside {
    flex: 1 1 100%;
    padding: 24px 20px;
  }

  .auth-card__aside {
    border-left: none;
    border-top: 1px solid #eef1f4;
  }
}

/* ---- email 表單 ---- */
.auth-form__title {
  position: relative;
  margin: 0 0 22px;
  padding-left: 14px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  color: #111827;
}

.auth-form__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 19px;
  border-radius: 99rem;
  background: #111827;
}

.auth-form__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.auth-form__field {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.auth-form__field--half {
  grid-column: span 6;
}

.auth-form__field > label {
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #374151;
}

/* issue #713：選擇器同步——必填星號改語意類 form-required-mark */
.auth-form__field > label .text-danger,
.auth-form__field > label .form-required-mark {
  margin-right: 2px;
}

/* 註冊分段小標（基本資料 / 帳號資料） */
.auth-form__subtitle {
  grid-column: span 12;
  margin: 8px 0 -4px;
  font-size: 14px;
  font-weight: 700;
  color: #6b7280;
}

.auth-form .form-control {
  width: 100%;
  height: auto;
  min-height: 48px;
  margin: 0;
  padding: 12px 14px;
  font-size: 15px;
  color: #111827;
  background: #ffffff;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-form .form-control::placeholder {
  color: #9ca3af;
}

.auth-form .form-control:focus {
  outline: none;
  border-color: #111827;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

.auth-form .form-control.is-invalid {
  border-color: #dc2626;
}

/* 密碼欄 input-group（含顯示密碼眼睛鈕，貼齊輸入框右側） */
.auth-form .input-group {
  margin: 0;
  flex-wrap: wrap;
}

.auth-form .input-group .form-control {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.auth-form .input-group .togglePassword {
  display: flex;
  align-items: center;
  padding: 0 14px;
  margin: 0;
  background: #ffffff;
  border: 1px solid #dfe3e8;
  border-left: 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #6b7280;
  cursor: pointer;
}

.auth-form .invalid-feedback {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-size: 12.5px;
  color: #dc2626;
}

.auth-form .terms-agree__field .form-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 14px 16px;
  background: #f7f9fb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.auth-form .terms-agree__field .form-check-input {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  border-color: #cbd5e1;
}

.auth-form .terms-agree__field .form-check-input:checked {
  background-color: #111827;
  border-color: #111827;
}

.auth-form .terms-agree__field .form-check-input:focus {
  border-color: #111827;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1);
}

.auth-form .terms-agree__field .form-check-label {
  color: #374151;
  font-size: 14px;
  line-height: 1.7;
}

.auth-form .terms-agree__field .form-check-label a {
  color: #111827;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-form .terms-agree__field .form-check-label a:hover,
.auth-form .terms-agree__field .form-check-label a:focus-visible {
  opacity: 0.72;
}

.auth-form__recaptcha-label {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #374151;
}

/* issue #713：選擇器同步——必填星號改語意類 form-required-mark */
.auth-form__recaptcha-label .text-danger,
.auth-form__recaptcha-label .form-required-mark {
  margin-right: 2px;
}

/* 動作列：送出 +（登入頁）忘記密碼 */
.auth-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

/* 雙鈕並排（① 主＋② 次）整列滿版、各佔一半；單鈕表單不掛此修飾、維持非滿版 */
.auth-form__actions--split .btn {
  flex: 1 1 0;
  max-width: none;
}

.auth-form .auth-form__submit.btnSummit {
  width: auto;
  min-width: 150px;
  max-width: none;
  margin: 0;
  padding: 13px 30px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
}

.auth-form__link {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
}

.auth-form__link:hover {
  color: #111827;
  text-decoration: underline;
}

/* ---- 社群登入側欄 ---- */
.auth-social__title {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 700;
  color: #374151;
}

.auth-social__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-social__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 11px 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.05s ease;
}

.auth-social__btn:hover,
.auth-social__btn:focus-visible {
  color: #ffffff;
  opacity: 0.9;
  outline: none;
}

.auth-social__btn:active {
  transform: translateY(1px);
}

.auth-social__btn--google {
  background: #ffffff;
  color: #3c4043;
  border: 1px solid #dadce0;
}

.auth-social__btn--google:hover,
.auth-social__btn--google:focus-visible {
  background: #f7f8f8;
  color: #3c4043;
  opacity: 1;
  outline: none;
}

.auth-social__btn--facebook {
  background: #1877f2;
}

.auth-social__btn--line {
  background: #06c755;
}

.auth-social__btn--github {
  background: #24292f;
}

/* ---- 登入/註冊切換連結 ---- */
.auth-switch {
  margin-top: 22px;
  text-align: center;
}

.auth-switch a {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-switch a:hover {
  opacity: 0.7;
}

/* ============================================================================
 * 區段 5：第三方登入 onboarding 補件頁（.member-onboarding-*）
 *   /member/onboarding 為受限會員的完成註冊頁；沿用 auth-form 控件，
 *   另以專屬容器、側欄與條款區塊做任務型版面。
 * ============================================================================ */

.member-onboarding {
  --member-onboarding-accent: #111827;
  --member-onboarding-accent-soft: #eef2f7;
  --member-onboarding-surface: #ffffff;
  --member-onboarding-surface-muted: #f7f9fb;
  --member-onboarding-text: #111827;
  --member-onboarding-muted: #6b7280;
  --member-onboarding-border: #e5e7eb;
  --member-onboarding-ring: rgba(17, 24, 39, 0.1);
  --member-onboarding-shadow: 0 18px 50px rgba(17, 24, 39, 0.1);
  padding: 28px 0 72px;
}

.member-onboarding__container {
  max-width: 920px;
}

.member-onboarding__card {
  border-radius: 18px;
  border-color: var(--member-onboarding-border);
  box-shadow: var(--member-onboarding-shadow);
}

.member-onboarding__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.member-onboarding__main {
  display: flex;
  align-items: center;
  padding: 42px 48px 48px;
}

.member-onboarding__form {
  width: 100%;
}

.member-onboarding__heading {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 28px;
}

.member-onboarding__heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  color: var(--member-onboarding-accent);
  background: var(--member-onboarding-accent-soft);
  border-radius: 14px;
  font-size: 18px;
}

.member-onboarding__heading-copy {
  min-width: 0;
}

.member-onboarding__title.auth-form__title {
  margin-bottom: 10px;
  padding-left: 0;
  color: var(--member-onboarding-text);
  font-size: 24px;
}

.member-onboarding__title.auth-form__title::before {
  content: none;
}

.member-onboarding__lead {
  margin: 0;
  color: var(--member-onboarding-muted);
  font-size: 15px;
  line-height: 1.8;
}

.member-onboarding__grid {
  gap: 20px;
}

.member-onboarding__field .form-control {
  min-height: 52px;
  border-radius: 12px;
}

.member-onboarding .form-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 16px;
  background: var(--member-onboarding-surface-muted);
  border: 1px solid var(--member-onboarding-border);
  border-radius: 12px;
}

.member-onboarding .form-check-input {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  border-color: #cbd5e1;
}

.member-onboarding .form-check-input:checked {
  background-color: var(--member-onboarding-accent);
  border-color: var(--member-onboarding-accent);
}

.member-onboarding .form-check-input:focus {
  border-color: var(--member-onboarding-accent);
  box-shadow: 0 0 0 3px var(--member-onboarding-ring);
}

.member-onboarding .form-check-label {
  color: var(--member-onboarding-text);
  font-size: 14px;
  line-height: 1.7;
}

.member-onboarding .form-check-label a {
  color: var(--member-onboarding-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.member-onboarding .terms-agree__modal-link {
  cursor: pointer;
}

.terms-agree__modal {
  z-index: 5000;
  --terms-modal-surface: #ffffff;
  --terms-modal-muted: #f7f9fb;
  --terms-modal-text: #111827;
  --terms-modal-secondary: #4b5563;
  --terms-modal-border: #e5e7eb;
  --terms-modal-accent: #111827;
  --terms-modal-shadow: 0 28px 80px rgba(17, 24, 39, 0.28);
}

body.modal-open .modal-backdrop {
  z-index: 4990;
}

.terms-agree__modal .modal-dialog {
  width: min(860px, calc(100vw - 32px));
  max-width: min(860px, calc(100vw - 32px));
  margin: 112px auto 32px;
}

.terms-agree__modal .modal-dialog-scrollable {
  height: auto;
  max-height: calc(100vh - 144px);
}

.terms-agree__modal .modal-content {
  max-height: calc(100vh - 144px);
  background: var(--terms-modal-surface);
  border: 1px solid var(--terms-modal-border);
  border-radius: 16px;
  box-shadow: var(--terms-modal-shadow);
  overflow: hidden;
}

.terms-agree__modal .modal-header {
  padding: 18px 24px;
  background: linear-gradient(180deg, var(--terms-modal-muted), var(--terms-modal-surface));
  border-bottom: 1px solid var(--terms-modal-border);
}

.terms-agree__modal .btn-close {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--terms-modal-muted);
  opacity: 0.72;
}

.terms-agree__modal .btn-close:focus {
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12);
}

.terms-agree__modal .modal-title {
  color: var(--terms-modal-text);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}

.terms-agree__modal-body {
  max-height: calc(100vh - 224px);
  padding: 24px 28px 28px;
  color: var(--terms-modal-secondary);
  font-size: 15px;
  line-height: 1.8;
  background: var(--terms-modal-surface);
  overflow-y: auto;
}

.terms-agree__modal-body p,
.terms-agree__modal-body li {
  color: inherit;
}

.terms-agree__modal-body h1,
.terms-agree__modal-body h2,
.terms-agree__modal-body h3,
.terms-agree__modal-body h4,
.terms-agree__modal-body h5,
.terms-agree__modal-body h6 {
  margin: 18px 0 10px;
  color: var(--terms-modal-text);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.35;
}

.terms-agree__modal-body h1 {
  font-size: 26px;
}

.terms-agree__modal-body h2 {
  font-size: 24px;
}

.terms-agree__modal-body h3 {
  font-size: 21px;
}

.terms-agree__modal-body h4,
.terms-agree__modal-body h5,
.terms-agree__modal-body h6 {
  font-size: 18px;
}

.terms-agree__modal-body h1:first-child,
.terms-agree__modal-body h2:first-child,
.terms-agree__modal-body h3:first-child,
.terms-agree__modal-body h4:first-child,
.terms-agree__modal-body h5:first-child,
.terms-agree__modal-body h6:first-child,
.terms-agree__modal-body p:first-child {
  margin-top: 0;
}

.terms-agree__modal-body a {
  color: var(--terms-modal-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.terms-agree__modal-body ul,
.terms-agree__modal-body ol {
  padding-left: 1.35em;
}

.terms-agree__modal-body table {
  width: 100%;
  margin: 16px 0;
  border-collapse: collapse;
  font-size: 14px;
}

.terms-agree__modal-body th,
.terms-agree__modal-body td {
  padding: 10px 12px;
  border: 1px solid var(--terms-modal-border);
  vertical-align: top;
}

.terms-agree__modal-body th {
  color: var(--terms-modal-text);
  background: var(--terms-modal-muted);
  font-weight: 800;
}

.terms-agree__modal-body img,
.terms-agree__modal-body video {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px;
}

.member-onboarding__actions {
  margin-top: 30px;
}

/* 補件送出鈕已收斂為統一標準 ①（btn btnNormal gold auth-submit-btn），
   原 .member-onboarding__submit 一次性尺寸規則移除，改與登入／註冊同一組樣式 */

@media (max-width: 767.98px) {
  .auth-form__field--half {
    grid-column: span 12;
  }

  .auth-form .auth-form__submit.btnSummit {
    width: 100%;
  }

  .auth-form__actions {
    gap: 10px;
  }

  .member-onboarding {
    padding: 10px 0 44px;
  }

  .member-onboarding__body {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .member-onboarding__main {
    padding: 28px 22px 30px;
  }

  .member-onboarding__heading {
    gap: 12px;
    margin-bottom: 22px;
  }

  .member-onboarding__heading-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 16px;
  }

  .member-onboarding__title.auth-form__title {
    font-size: 21px;
  }

  .member-onboarding__lead {
    font-size: 14px;
  }

  .terms-agree__modal .modal-dialog {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    margin: 24px auto;
  }

  .terms-agree__modal .modal-dialog-scrollable,
  .terms-agree__modal .modal-content {
    max-height: calc(100vh - 48px);
  }

  .terms-agree__modal .modal-header {
    padding: 16px 18px;
  }

  .terms-agree__modal-body {
    max-height: calc(100vh - 128px);
    padding: 20px;
    font-size: 14px;
  }

  .terms-agree__modal-body h1 {
    font-size: 22px;
  }

  .terms-agree__modal-body h2 {
    font-size: 20px;
  }

  .terms-agree__modal-body h3,
  .terms-agree__modal-body h4,
  .terms-agree__modal-body h5,
  .terms-agree__modal-body h6 {
    font-size: 17px;
  }
}


/* ============================================================================
 * 骨架語意化（issue #713）：會員／認證頁原 Bootstrap 佈局 utility 的等價規則。
 * CTA 按鈕、社群綁定列等；utility 鏡射依 SOP 坑 9 帶 !important。
 * text-danger 星號的等價 .form-required-mark 定義於 common/base.css（跨頁共用）。
 * recaptcha／invalid-feedback 的 d-none／d-block 為 JS 狀態與 BS 元件行為，保留於 blade。
 * ============================================================================ */

/* auth-submit-btn／--center 已移至 common/base.css 跨頁共用（auth＋contactUs），issue #713/#714 */
/* profile 未驗證提示列（原 alert 上的 d-flex align-items-center flex-wrap gap-2 mb-0） */
.member-alert-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-bottom: 0 !important;
}

/* profile 第三方綁定列（原 d-flex align-items-center flex-wrap gap-2 mb-2） */
.member-social-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* 原綁定 email 的 text-muted small（common .text-muted 為 16px＋var(--cms-color-text)、
   帶 !important，蓋過 .small 的 .875em；此處等值鏡射） */
.member-social-email {
  font-size: 16px !important;
  color: var(--cms-color-text) !important;
}

/* ============================================================================
 * 區段 6：Email 驗證通知頁（.member-verify-*）
 *   /member/verifyNotice 為尚未完成 Email 驗證的會員提示頁；沿用 auth-card 外殼，
 *   以與 onboarding 一致的任務卡語彙（heading icon + 標題 + lead + 動作）重整版面。
 *   neutral 公版配色，主題於 themes/<theme>/pages/user.css 覆寫品牌色。
 * ============================================================================ */

.member-verify {
  --member-verify-accent: #111827;
  --member-verify-accent-soft: #eef2f7;
  --member-verify-surface: #ffffff;
  --member-verify-surface-muted: #f7f9fb;
  --member-verify-text: #111827;
  --member-verify-muted: #6b7280;
  --member-verify-border: #e5e7eb;
  --member-verify-ring: rgba(17, 24, 39, 0.1);
  --member-verify-shadow: 0 18px 50px rgba(17, 24, 39, 0.1);
  padding: 28px 0 72px;
}

.member-verify__container {
  max-width: 600px;
}

.member-verify__card {
  border-radius: 18px;
  border-color: var(--member-verify-border);
  box-shadow: var(--member-verify-shadow);
}

/* auth-card__body 預設 flex 兩欄，此頁為單欄通知，改為區塊排列 */
.member-verify__body {
  display: block;
}

.member-verify__main {
  padding: 42px 44px 44px;
}

.member-verify__heading {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.member-verify__heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  color: var(--member-verify-accent);
  background: var(--member-verify-accent-soft);
  border-radius: 14px;
  font-size: 18px;
}

.member-verify__heading-copy {
  min-width: 0;
}

.member-verify__title.auth-form__title {
  margin-bottom: 10px;
  padding-left: 0;
  color: var(--member-verify-text);
  font-size: 24px;
}

.member-verify__title.auth-form__title::before {
  content: none;
}

.member-verify__lead {
  margin: 0;
  /* fallback：非 .member-verify 情境（如 reagree 借用此 class）變數解析不到時仍為可讀灰，不致變淺色 */
  color: var(--member-verify-muted, #6b7280);
  font-size: 15px;
  line-height: 1.8;
}

/* reagree 條款重新同意頁的說明文字改為深色（近黑），提高可讀性與對比 */
.member-reagree__lead {
  color: #1f2937;
}

/* 寄送目標信箱：淡底卡片突顯，避免長信箱被壓縮 */
.member-verify__mailbox {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 26px 0;
  padding: 16px 18px;
  background: var(--member-verify-surface-muted);
  border: 1px solid var(--member-verify-border);
  border-radius: 14px;
}

.member-verify__mailbox-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  color: var(--member-verify-accent);
  background: var(--member-verify-accent-soft);
  border-radius: 10px;
  font-size: 15px;
}

.member-verify__mailbox-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.member-verify__mailbox-label {
  font-size: 12.5px;
  color: var(--member-verify-muted);
}

.member-verify__mailbox-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--member-verify-text);
  word-break: break-all;
}

.member-verify__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* form 外殼不佔版位，讓內部按鈕直接成為 actions 的 flex 子項與返回鍵對齊 */
.member-verify__resend {
  display: contents;
}

/* 三鈕版（registerVerifyNotice：重寄＋會員登入＋返回首頁）。
   卡片寬度容不下三顆並排（每顆 min-width 200px），改二欄網格：
   重寄鈕橫跨整列在上，下排兩顆各半，左右邊界對齊不落單 */
.member-verify__actions--stacked {
  display: grid;
  grid-template-columns: repeat(2, 200px);
  justify-content: start;
}

/* btnNormal base 的 max-width:200px 與 auto margin 會讓格子內的鈕縮寬又左右飄，
   在本排版內改為填滿所屬格子、邊界對齊 */
.member-verify__actions--stacked .member-verify__btn {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}

.member-verify__actions--stacked .js-resend-btn {
  grid-column: 1 / -1;
}

.member-verify__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 28px;
  border-radius: 12px;
  font-size: 15px;
}

.member-verify__btn--ghost {
  border-color: var(--member-verify-border);
}

.member-verify__escape {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--member-verify-border);
  font-size: 13.5px;
}

.member-verify__escape-link {
  color: var(--member-verify-muted);
  text-decoration: none;
}

.member-verify__escape-link:hover {
  color: var(--member-verify-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.member-verify__escape-sep {
  color: var(--member-verify-border);
}

@media (max-width: 767.98px) {
  .member-verify {
    padding: 10px 0 44px;
  }

  .member-verify__main {
    padding: 28px 22px 30px;
  }

  .member-verify__heading {
    gap: 12px;
    margin-bottom: 20px;
  }

  .member-verify__heading-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 16px;
  }

  .member-verify__title.auth-form__title {
    font-size: 21px;
  }

  .member-verify__lead {
    font-size: 14px;
  }

  .member-verify__actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* 三鈕版手機改單欄直排（grid 不吃 flex-direction） */
  .member-verify__actions--stacked {
    grid-template-columns: minmax(0, 1fr);
  }

  .member-verify__btn {
    width: 100%;
  }
}