/* ===== 會員登入頁 ===== */
.auth-main {
  background-color: #f5f5f5;
  /* 淡灰藍背景，讓白色卡片凸顯 */
  padding: 60px 0 80px;
}

.auth-section .login-card {
  max-width: 720px;
  margin: 0 auto 25px;
  background-color: #fff;
  border-radius: 16px;
  padding: 40px 60px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e5e5;
  /* 有一點邊框，接近你截圖的感覺 */
}

.login-title {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 32px;
}

.login-input {
  height: 48px;
  border-radius: 4px;
  font-size: 0.95rem;
}

/* ==== 啟用購物網 ====*/
.store-activation-btn {
    background-color: #4A6472;
    border-color: #4A6472;
    color: #fff;
}

.store-activation-btn:hover,
.store-activation-btn:focus {
    background-color: #3F5663;
    border-color: #3F5663;
    color: #fff;
}

/* ==== 啟用購物網驗證 ====*/
.activation-submit-btn {
    background-color: #1ABC9C;
    border-color: #1ABC9C;
    color: #fff;
}

.activation-submit-btn:hover,
.activation-submit-btn:focus {
    background-color: #17A589;
    border-color: #17A589;
    color: #fff;
}

/* ===== 註冊頁：電子郵件格式驗證 ===== */
.email-validation-wrap {
  position: relative;
}

.email-validation-input {
  padding-right: 42px;
}

.email-validation-input.email-valid {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 0.18rem rgba(40, 167, 69, 0.18) !important;
}

.email-validation-input.email-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.18rem rgba(220, 53, 69, 0.12) !important;
}

.email-valid-icon {
  display: none;
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #28a745;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}

.email-validation-input.email-valid + .email-valid-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.email-validation-feedback {
  display: none;
  margin-top: 6px;
  font-size: 13px;
  color: #dc3545;
}

.email-validation-feedback.show {
  display: block;
}

/* ===== 註冊頁：手機號碼格式驗證 ===== */
.phone-validation-wrap {
  position: relative;
}

.phone-validation-input {
  padding-right: 42px;
}

.phone-validation-input.phone-valid {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 0.18rem rgba(40, 167, 69, 0.18) !important;
}

.phone-validation-input.phone-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.18rem rgba(220, 53, 69, 0.12) !important;
}

.phone-valid-icon {
  display: none;
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #28a745;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}

.phone-validation-input.phone-valid + .phone-valid-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.phone-validation-feedback {
  display: none;
  margin-top: 6px;
  font-size: 13px;
  color: #dc3545;
}

.phone-validation-feedback.show {
  display: block;
}

/* ===== 註冊頁：密碼格式與一致性驗證 ===== */
.password-validation-wrap {
  position: relative;
}

.password-validation-input {
  padding-right: 42px;
}

.password-validation-input.password-valid {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 0.18rem rgba(40, 167, 69, 0.18) !important;
}

.password-validation-input.password-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.18rem rgba(220, 53, 69, 0.12) !important;
}

.password-valid-icon {
  display: none;
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #28a745;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}

.password-validation-input.password-valid + .password-valid-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.password-validation-feedback {
  display: none;
  margin-top: 6px;
  font-size: 13px;
  color: #dc3545;
}

.password-validation-feedback.show {
  display: block;
}

/* ===== 註冊頁：密碼顯示 / 隱藏眼睛 ===== */
.password-eye-wrap {
  position: relative;
}

.password-eye-input {
  padding-right: 76px;
}

/* 眼睛：無圓圈、靠右置中 */
.password-eye-toggle {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  border: 0;
  background: transparent !important;
  padding: 0;
  margin: 0;
  color: #6c757d;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  z-index: 4;
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.password-eye-toggle:hover,
.password-eye-toggle:focus,
.password-eye-toggle:active {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: #333;
}

/* 眼睛 icon 大小 */
.password-eye-toggle i {
  font-size: 1.05rem;
  line-height: 1;
}

/* 有眼睛時，綠色打勾放在眼睛左邊 */
.password-valid-icon-with-eye {
  right: 46px;
}

/* 因為 input 後面多了 button，所以原本 + 選不到 icon，要改用 ~ */
.password-validation-input.password-valid ~ .password-valid-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== 修改密碼頁：避免 Bootstrap 驗證圖示跟眼睛重疊 ===== */
.password-eye-input.is-invalid,
.password-eye-input.is-valid {
  padding-right: 76px !important;
  background-position: right 46px center !important;
}

/* 眼睛固定在最右邊，驗證圖示會在眼睛左邊 */
.password-eye-wrap .password-eye-toggle {
  right: 14px;
  z-index: 4;
}

/* ===== 註冊頁：閱讀條款後才可勾選，不改原本排版 ===== */
.terms-read-hint {
  display: block;
  margin-top: 6px;
  padding-left: 24px;
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}

.terms-read-hint.is-ready {
  color: #1ABC9C;
  font-weight: 600;
}

#agreeTerms:disabled + .form-check-label {
  color: #666;
  opacity: 1;
}

.policy-read-modal .modal-body {
  padding: 0;
}

.policy-read-content {
  max-height: 55vh;
  overflow-y: auto;
  padding: 22px 26px;
  font-size: 15px;
  line-height: 1.9;
  color: #333;
}

.policy-read-content h1,
.policy-read-content h2,
.policy-read-content h3 {
  font-weight: 700;
  margin-top: 22px;
  margin-bottom: 10px;
}

.policy-read-content p {
  margin-bottom: 12px;
}

.policy-read-content ul,
.policy-read-content ol {
  padding-left: 1.5rem;
  margin-bottom: 16px;
}

.policy-read-content li {
  margin-bottom: 6px;
}

.policy-read-bottom-notice {
  padding: 10px 16px;
  text-align: center;
  font-size: 13px;
  color: #999;
  border-top: 1px solid #eee;
  background: #fafafa;
}

.policy-read-bottom-notice.is-read {
  color: #1ABC9C;
  font-weight: 600;
}


.login-btn {
  font-size: 1rem;
  letter-spacing: 0.2em;
  /* 讓「會員登入」字中間有點間距 */
  background-color: #1ABC9C;
  border-color: #1ABC9C;
}

.login-btn:hover {
  background-color: #17aa8d;
  /* 深一點 */
  border-color: #17aa8d;
}

/* 底下兩個連結 */
.login-links .login-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  text-decoration: none;
  color: #777;
}

.login-links .login-link i {
  font-size: 1.1rem;
}

.login-links .login-link:hover {
  text-decoration: underline;
}

/* RWD：手機縮小內距與字體 */
@media (max-width: 576px) {
  .auth-section .login-card {
    padding: 32px 20px;
    border-radius: 0;
    /* 小螢幕可以接近全寬 */
  }

  .login-title {
    font-size: 1.2rem;
  }
}


/* ===== 返回登入按鈕 ===== */
/* 已有帳號文字 */
.back-login-title {
  font-size: 20px;
  color: #777;
  letter-spacing: 1px;
  margin-top: 50px;
  font-weight: 600;
}

.back-login-btn {
  background-color: #4A6472;
  /* 深灰藍 */
  color: #fff !important;
  border-radius: 6px;
  font-size: 0.95rem;
  text-decoration: none;
  display: block;
  width: 100%;
  /* 全寬 */
  text-align: center;
  /* 文字置中 */
  padding: 10px 0;
  transition: 0.25s;
}

.back-login-btn:hover {
  background-color: #3E5662;
  /* 更深的 hover 色 */
  color: #fff !important;
}

/* ===== 其他方式登入 ===== */

/* 其他方式登入 標題 */
.other-login-title {
  color: #999;
  font-size: 0.95rem;
  letter-spacing: 1px;
}

/* 社群媒體按鈕容器 */
.social-login-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

/* LINE 圓形按鈕 */
.social-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #06C755;
  /* LINE 綠 */
  color: #fff;
  font-size: 1.6rem;
  text-decoration: none;
  transition: 0.25s;
}

/* hover 效果 */
.social-icon:hover {
  background-color: #05b24d;
  color: #fff;
}

/* =========== 會員登入頁 ============= */

/* =========== 會員專區頁 ============= */


.member-icon {
  color: #1ABC9C;
  /*你要的顏色*/
  font-size: 1.2em;
  /*可選，調整大小*/
}

.member-summary-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  margin-top: 20px;
}

.msb-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.msb-block {
  background: #fafafa;
  border-radius: 12px;
  padding: 16px 20px;
}

.msb-label {
  font-size: 0.9rem;
  color: #777;
}

.msb-value {
  font-size: 1.3rem;
  font-weight: 600;
  margin-top: 4px;
}

.text-icon {
  color: #FF2D2D;
  /* 你可以改成任何顏色 */
  margin-right: 6px;
}

.key-rotate {
  transform: rotate(135deg);
  /* 向右上旋轉 */
  display: inline-block;
  /* 讓 transform 生效 */
  margin-left: 6px;
  /* icon 與文字間距 */
}

/* ===== 會員購物金紀錄 Modal ===== */
.store-credit-log-row {
  display: grid;
  grid-template-columns: 150px 1fr 130px 130px;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}

.store-credit-log-row:last-child {
  border-bottom: 0;
}

.store-credit-log-date {
  color: #6c757d;
  font-size: 13px;
}

.store-credit-log-title {
  min-width: 0;
}

.store-credit-log-amount {
  font-weight: 700;
  text-align: right;
}

.store-credit-log-balance {
  text-align: right;
}

@media (max-width: 768px) {
  .store-credit-log-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .store-credit-log-amount,
  .store-credit-log-balance {
    text-align: left;
  }
}


/* Bootstrap Modal 永遠在你網站 header / panel / drawer 上面 */
.modal {
  z-index: 5000 !important;
}

.modal-backdrop {
  z-index: 4990 !important;
}

/* ----------- 電腦版：兩欄佈局 ----------- */
.member-page-wrap {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  justify-content: center;
  margin-top: 40px;
}

/* 左右欄都要占一半 */
.member-left,
.member-right {
  flex: 1;
  max-width: 800px;
}

/* 你原本的 login-card 會自動吃這些寬度 */
.login-card {
  width: 100%;
}

/* 共用：按鈕區塊 */
.member-actions {
  margin: 20px auto 40px;
  max-width: 1300px;
  /* 跟上面卡片差不多寬 */
  display: flex;
  justify-content: flex-end;
  /* 電腦版靠右 */
  gap: 8px;
}

/* 電腦版：按鈕維持原本大小 */
.member-actions .btn {
  min-width: 120px;
}

/* ----------- 平板 & 手機：改成上下 ----------- */
@media (max-width: 991px) {
  .member-page-wrap {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .member-left,
  .member-right {
    max-width: 100%;
    width: 100%;
  }

  .member-actions {
    justify-content: stretch;
    /* 主要靠 flex:1 撐滿 */
    gap: 12px;
  }

  .member-actions .btn {
    flex: 1 1 0;
    /* 兩顆按鈕各佔 1/2 寬 */
    width: 100%;
    /* 防止某些瀏覽器縮掉 */
  }
}



/*-------------------*/
.sub-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
}

.sub-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  padding: 8px 20px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  transition: all .2s ease;
  text-decoration: none;
}

/* 電子報（可切換 已訂閱） */
.sub-btn.email-btn {
  color: #555;
}

.sub-btn.email-btn.subscribed,
.sub-btn.email-btn:disabled {
    background: #f3f3f3;
    color: #999;
    border-color: #ccc;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.75;
}

/* LINE 按鈕 */
.sub-btn.line-btn {
  border-color: #06C755;
  color: #06C755;
}

.sub-btn.line-btn:hover {
  background: #06C755;
  color: #fff;
}

/* Facebook（Messenger 藍色） */
.sub-btn.fb-btn {
  border-color: #0084FF;
  color: #0084FF;
}

.sub-btn.fb-btn:hover {
  background: #0084FF;
  color: #fff;
}

/* Instagram（主色） */
.sub-btn.ig-btn {
  border-color: #C13584;
  color: #C13584;
}

.sub-btn.ig-btn:hover {
  background: #C13584;
  color: #fff;
}

/* Youtube（主色） */
.sub-btn.yt-btn {
  border-color: #cc0000;
  color: #cc0000;
}

.sub-btn.yt-btn:hover {
  background: #cc0000;
  color: #fff;
}

.sub-btn.yt-btn:active {
    background-color: #990000;
}

/* 新增送貨地址文字樣式 */
.new-address-link {
  color: #5F7F78 !important;
  text-decoration: none !important;
  font-weight: 500;
  cursor: pointer;
}

.new-address-link:hover {
  color: #4d6762;
}

/* 每一筆送貨地址卡片 */
.ship-address-card {
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 10px 12px 8px;
  background-color: #fffdf6;
  /* 想跟背景一樣可改成 transparent */
}

/* header：標題 + 展開/刪除 icon */
.ship-address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* icon 區 */
.ship-address-actions .btn {
  padding: 0 4px;
  line-height: 1;
}

.ship-address-actions i {
  font-size: 0.9rem;
}

/* 內文（表單）區塊 */
.ship-address-body {
  margin-top: 10px;
}

/* 小小縮進，讓表單看起來在卡片裡面 */
.ship-address-body .form-label {
  font-size: 0.9rem;
}




/* ===== Coupon Page ===== */

.coupon-section {
  /* 沿用原本 auth-section 的背景，如果有就不用再設 */
  padding: 60px 0;
}

.coupon-page-title {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}

/* Tabs */
.coupon-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.coupon-tab {
  border: none;
  background-color: #f2f2f2;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 0.95rem;
  cursor: pointer;
  color: #666;
  transition: background-color 0.2s, color 0.2s;
}

.coupon-tab.is-active {
  background-color: #00b7b0;
  /* 接近圖片的綠藍色 */
  color: #fff;
}

/* 列表 */
.coupon-panels {
  margin-top: 10px;
}

.coupon-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ===== 可領券：輸入優惠券代碼 ===== */
.coupon-redeem {
  margin: 0 0 18px;
}

.coupon-redeem-form {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.coupon-redeem-input {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  border: 2px solid #1f1f1f;
  border-radius: 0;
  font-size: 16px;
  outline: none;
  border-width: 1.5px;
  /* 視覺更輕 */
}

.coupon-redeem-input:focus {
  border-color: #000;
}

.coupon-redeem-btn {
  width: 100px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.coupon-redeem-msg {
  margin-top: 10px;
  font-size: 14px;
}


/* 卡片外框 */
.coupon-card {
  position: relative;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 15px 16px;
}

/* ===== 優惠券使用條件小視窗 ===== */
.coupon-card {
  cursor: pointer;
}

.coupon-inner {
  position: relative;
}

.coupon-condition-popover {
  display: none;
  position: absolute;
  right: 110px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 280px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
  font-size: 13px;
  color: #374151;
  line-height: 1.7;
}

.coupon-condition-popover::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 0 8px 8px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
}

.coupon-condition-title {
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
  font-size: 14px;
}

.coupon-condition-row + .coupon-condition-row {
  margin-top: 4px;
}

.coupon-card:hover .coupon-condition-popover,
.coupon-card.is-condition-open .coupon-condition-popover {
  display: block;
}

/* 上方黑色「即將過期」標籤 */
.coupon-status-badge {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  background-color: #000;
  color: #fff;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;
}

.coupon-status-badge.usable {
  background-color: #000;
}

.coupon-status-badge.expired {
  background-color: #999;
}

/* 票券主體 */
.coupon-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  gap: 16px;
}

/* 左邊顏色區塊 (票券圖樣) */
.coupon-left {
  display: flex;
  align-items: center;
}

/* 票券圖案本體 */
.coupon-tag-icon {
  position: relative;
  background-color: #3ec3c1;
  /* 左邊整塊顏色 */
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  padding: 20px 18px;
  border-radius: 10px;
}

/* 左邊票券兩邊挖洞效果 */
.coupon-tag-icon::before,
.coupon-tag-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #f7f7f7;
  /* 外層背景色（視實際背景可調整） */
  transform: translateY(-50%);
}

.coupon-tag-icon::before {
  left: -8px;
}

.coupon-tag-icon::after {
  right: -8px;
}

/* 中間文字區 */
.coupon-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.coupon-title-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
}

.coupon-meta {
  font-size: 0.8rem;
  color: #999;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 右邊按鈕 */
.coupon-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
}

.coupon-btn {
  font-size: 0.9rem;
  padding: 6px 16px;
  border-radius: 999px;
  border: none;
}

.coupon-btn-claim,
.coupon-btn-use {
  background-color: #00b7b0;
  color: #fff;
}

.coupon-btn:disabled {
  background-color: #ccc;
  color: #666;
}

.coupon-note {
  font-size: 0.75rem;
  color: #999;
}

/* 已失效整張灰掉 */
.coupon-card.is-expired {
  opacity: 0.6;
}

/* RWD 調整 */
/* ===== 手機版優惠券：改成 momo 票券樣式 ===== */
@media (max-width: 576px) {

  /* 讓卡片更貼近左右邊 */
  .coupon-section .container {
    padding-left: 8px;
    padding-right: 8px;
  }

  .coupon-card {
    padding: 15px 12px;
    border-radius: 14px;
  }

  /* 三個區塊同一排：左票券 / 中文字 / 右按鈕 */
  .coupon-inner {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* 左邊票券＋中間虛線 */
  .coupon-left {
    flex: 0 0 auto;
    position: relative;
    padding-right: 10px;
    margin-right: 4px;
  }

  /* 像 momo 那樣的中間虛線 */
  .coupon-left::after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 0;
    border-right: 2px dotted #e0e0e0;
  }

  /* 票券大小、洞洞顏色 */
  .coupon-tag-icon {
    padding: 16px 14px;
    font-size: 1.05rem;
    min-width: 72px;
    text-align: center;
  }

  .coupon-tag-icon::before,
  .coupon-tag-icon::after {
    width: 14px;
    height: 14px;
    background-color: #fff;
    /* 跟卡片背景一樣，看起來像挖洞 */
  }

  /* 中間文字區 */
  .coupon-middle {
    flex: 1 1 auto;
  }

  .coupon-title-text {
    font-size: 0.9rem;
  }

  /* 將到期：改成紅色小字 */
  .coupon-meta {
    margin-top: 2px;
    font-size: 0.75rem;
    color: #ff4b73;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .coupon-meta i {
    font-size: 0.8rem;
  }

  /* 右邊按鈕靠右垂直置中 */
  .coupon-right {
    flex: 0 0 auto;
    align-items: flex-end;
  }

  .coupon-btn {
    padding: 6px 18px;
    font-size: 0.85rem;
    border-radius: 999px;
  }

  .coupon-note {
    margin-top: 4px;
    font-size: 0.7rem;
  }

  .coupon-condition-popover {
    position: static;
    transform: none;
    width: auto;
    margin: 12px 0 0;
  }

  .coupon-condition-popover::after {
    display: none;
  }
}


/* ===== 已使用過優惠券 ===== */

.coupon-status-badge.used {
  background-color: #777;
  /* 深灰色 */
  color: #fff;
}

.coupon-card.is-expired.used {
  opacity: 0.6;
}

.coupon-btn.used,
.coupon-card .coupon-btn.used,
.coupon-card.is-expired .coupon-btn[disabled] {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
}


/* ===== 收藏清單樣式 ===== */
.favorites-section {
  padding: 60px 0;
}

.fav-page-title {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}

.fav-list {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* 每一筆收藏 */
.fav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid #eee;
}

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

.fav-thumb-wrap {
  flex: 0 0 72px;
}

.fav-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
}

.fav-info {
  flex: 1 1 auto;
  min-width: 0;
}

.fav-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
  text-decoration: none;
}

.fav-title:hover {
  text-decoration: underline;
}

.fav-price {
  margin-top: 4px;
  font-size: 0.9rem;
  color: #00b7b0;
}

/* 收藏清單 — 按鈕組 */
.fav-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  min-width: 110px;
}

/* 按鈕共同樣式 */
.fav-actions .btn {
  min-width: 92px;
  font-size: 0.85rem;
  padding: 4px 10px;
  border-radius: 8px;
}

/* 移除：紅色描邊 */
.fav-actions .btn-remove {
  border: 1px solid #e63946;
  color: #e63946;
  background: #fff;
}

.fav-actions .btn-remove:hover {
  background: #ffe6e6;
}

/* 加入購物車：綠色按鈕 */
.fav-actions .btn-add {
  background: #2a9d8f;
  color: #fff;
  border: none;
}

.fav-actions .btn-add:hover {
  background: #21867a;
}

/* 前往商品：藍色描邊 */
.fav-actions .btn-link {
  border: 1px solid #1d72f3;
  color: #1d72f3;
  background: #fff;
}

.fav-actions .btn-link:hover {
  background: #e6f0ff;
}

/* 商品區域底線分隔（更清晰） */
.fav-item {
  padding-bottom: 18px;
  border-bottom: 1px solid #eee;
  margin-bottom: 18px;
}

/* 最後一筆移除底線 */
.fav-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}


/* 收藏清單價格：舊價 + 新價 + 有優惠 */
.fav-price {
  margin-top: 4px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.fav-price-old {
  color: #999;
  text-decoration: line-through;
}

.fav-price-new {
  color: #00b7b0;
  /* 跟全站優惠綠一樣 */
  font-weight: 600;
}

.fav-price-badge {
  font-size: 0.75rem;
  color: #ff4b73;
  border: 1px solid #ff4b73;
  border-radius: 999px;
  padding: 2px 8px;
}


/* 手機版：一列佔滿、按鈕排成一行 */
@media (max-width: 576px) {
  .fav-item {
    align-items: flex-start;
  }

  .fav-actions {
    flex-direction: column;
    justify-content: flex-end;
  }

  .fav-actions .btn {
    min-width: 100%;
  }
}



/*===== 訂單查詢：空狀態卡片 ======*/
.order-card-empty {
  background: #fff;
  border-radius: 12px;
  padding: 24px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);

  /* 置中文字 + 按鈕 */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 水平置中 */
  justify-content: center;
  /* 垂直置中（可有可無） */
  text-align: center;
}

.order-card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  margin-bottom: 25px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 狀態群組（多個狀態一起排） */
.order-status-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.order-status {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  color: #fff;
  font-weight: 600;
}

/* 待付款 */
.order-status.pending {
  color: #6c757d;
  background: #f1f3f5;
  border-color: #e9ecef;
}

/* 已確認（paid）→ 藍色/青色 */
.order-status.paid {
  color: #0f766e;
  background: #ccfbf1;
  border-color: #5eead4;
}

/* 已完成（shipped）→ 綠色 */
.order-status.shipped {
  color: #166534;
  background: #dcfce7;
  border-color: #86efac;
}

/* 已取消 */
.order-status.cancelled {
  color: #b42318;
  background: #fee4e2;
  border-color: #fda29b;
}

.order-status.processing {
  background: #ffaa00;
}

.order-status.cancel {
  background: #ff5b5b;
}

.order-items {
  margin-top: 10px;
}

.order-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.order-thumb {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 12px;
}

.item-title {
  font-weight: 600;
}

.item-spec {
  font-size: 0.85rem;
  color: #777;
}

.item-price {
  font-weight: 600;
  margin-top: 4px;
}

.order-total-block {
  font-size: 0.95rem;
}

.total-line {
  padding-top: 5px;
  border-top: 1px solid #eee;
  font-size: 1rem;
}

.order-actions .btn {
  border-radius: 6px;
}

@media (max-width: 991.98px) {
  .order-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .order-actions .btn {
    width: 100%;
  }
}


/* 前往購物按鈕：青綠色 */
.btn-shop {
  background-color: #1ABC9C !important;
  border-color: #1ABC9C !important;
  color: #fff !important;
  padding: 6px 16px;
  border-radius: 6px;
  font-weight: 600;
}

/* hover 效果 */
.btn-shop:hover {
  background-color: #17aa8d !important;
  border-color: #17aa8d !important;
  color: #fff !important;
}

/* 精簡版訂單卡片：只顯示訂單總額 */
.simple-order-card .order-total-brief {
  font-size: 1rem;
  padding: 6px 0;
}

.simple-order-card .order-total-price {
  font-size: 1.1rem;
  color: #333;
}

/* 隱藏舊的商品列表與詳細金額區塊（在有 simple-order-card 的情況下） */
.simple-order-card .order-items,
.simple-order-card .order-total-block {
  display: none;
}


/* ===== 訂單頁分頁美化 ===== */
.order-pagination nav {
  display: flex;
  justify-content: center;
}

.order-pagination .pagination {
  gap: 6px;
  margin-bottom: 0;
}

/* 隱藏 Showing x to y */
.order-pagination .pagination-summary,
.order-pagination p.small.text-muted,
.order-pagination .text-muted {
  display: none !important;
}

/* 分頁按鈕 */
.order-pagination .page-link {
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  color: #333;
  min-width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all .2s ease;
}

/* Hover */
.order-pagination .page-link:hover {
  background-color: #f5f5f5;
  color: #000;
}

/* 目前頁 */
.order-pagination .page-item.active .page-link {
  background-color: #000;
  /* AUAR 主色 */
  border-color: #000;
  color: #fff;
}

/* 停用（‹ › 邊界） */
.order-pagination .page-item.disabled .page-link {
  opacity: .4;
}



/* ===== 訂單詳情：外層 ===== */
/*.order-detail-section .coupon-page-title {
  text-align: left;
}*/

.order-detail-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e6e6e6;
  padding: 24px 28px;
  margin-bottom: 24px;
}

/* 上方可點擊列 */
.od-toggle-bar {
  width: 100%;
  border: 0;
  background: #ffffff;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.od-toggle-bar:focus {
  outline: none;
}

.od-toggle-main {
  text-align: center;
  font-size: 0.95rem;
}

.od-toggle-main strong {
  font-size: 1.05rem;
}

.od-toggle-sub {
  color: #666;
  font-size: 0.85rem;
}

.od-toggle-icon {
  font-size: 1rem;
  transition: transform 0.2s ease;
}

/* 收起狀態時，箭頭轉向（朝下） */
.od-toggle-icon.is-collapsed {
  transform: rotate(180deg);
}

/* 被收合的內容區 */
.od-body {
  padding: 0 24px 24px;
}

/* 上方合計列 */
.od-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.od-top-total {
  text-align: right;
  font-size: 0.95rem;
}

.od-top-total strong {
  font-size: 1.05rem;
}

.od-top-cart {
  color: #666;
  font-size: 0.85rem;
}

/* 商品表格 */
.od-table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.od-table th {
  padding: 10px 6px;
  border-bottom: 1px solid #ddd;
  color: #555;
  font-weight: 600;
}

.od-table td {
  padding: 14px 6px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

.od-prod {
  display: flex;
  align-items: center;
  gap: 12px;
}

.od-prod img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.od-prod-info .od-title {
  font-weight: 500;
}

.od-prod-info .od-spec {
  font-size: 0.85rem;
  color: #888;
}

.od-discount {
  color: #666;
}

/* 優惠碼顯示綠色 */
.od-discount .od-coupon {
  color: #1ABC9C;
  /* 奧拉主綠 */
  font-weight: 600;
}

/* ===== 訂單詳情：贈品 / 已享用優惠 ===== */

/* 商品列：贈品 badge */
.od-gift-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: #1f2937;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
}

.od-gift-note {
  color: #6b7280;
}

/* 已享用之優惠外框（對應 blade: od-benefits-box） */
.od-benefits-box {
  margin-top: 20px;
  padding: 14px 12px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #eee;
}

/* 標題（對應 blade: od-benefits-title） */
.od-benefits-title {
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}

/* 基本列 */
.od-benefit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

/* 仿 cart / checkout 的左右排版 */
.od-benefit-row-like-cart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.od-benefit-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.od-benefit-right {
  min-width: 60px;
  text-align: right;
  color: #111827;
  font-size: 14px;
}

/* 左邊綠色標籤 */
.od-benefit-tag {
  display: inline-block;
  padding: 4px 10px;
  min-width: 72px;
  text-align: center;
  background: #dff3e7;
  color: #2f7d57;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* 右邊文字 */
.od-benefit-text {
  font-size: 14px;
  color: #555;
  line-height: 1.7;
  word-break: break-word;
}

.od-benefit-note {
  margin: 0;
  margin-top: 8px;
  font-size: 12px;
  color: #888;
  line-height: 1.6;
}

/* 總額小計 */
.od-summary {
  max-width: 260px;
  margin-left: auto;
  margin-top: 20px;
  font-size: 0.9rem;
}

.od-summary .row-line {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}

.od-summary .total strong {
  font-size: 1.05rem;
}

/* 再次加入購物車：置於總額小計下方、靠右 */
.od-reorder {
  margin-top: 16px;
  text-align: right;
}

.od-reorder-btn {
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid #28C8C3;
  color: #28C8C3;
  background-color: #fff;
}

.od-reorder-btn:hover {
  background-color: #28C8C3;
  color: #fff;
}

/* 手機 / 平板：改成置中、按鈕稍微大一點 */
@media (max-width: 768px) {
  .od-reorder {
    text-align: center;
  }

  .od-reorder-btn {
    min-width: 200px;
  }
}


/* 平板 & 手機：改成滿版（跟卡片同寬） */
@media (max-width: 992px) {
  .od-summary {
    max-width: none;
    /* 取消 260px 限制 */
    width: 100%;
    margin-left: 0;
    margin-top: 16px;
  }
}

/* RWD */
@media (max-width: 768px) {
  .order-detail-card {
    padding: 18px 14px;
  }

    .od-benefit-row-like-cart {
    align-items: flex-start;
  }

  .od-benefit-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .od-benefit-right {
    min-width: auto;
    font-size: 13px;
  }

  .od-gift-badge {
    font-size: 11px;
    padding: 2px 7px;
  }

  .od-toggle-bar {
    padding: 12px 14px;
  }

  .od-body {
    padding: 0 14px 18px;
  }

  .od-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .od-top-total {
    text-align: left;
  }

  .od-table th,
  .od-table td {
    font-size: 0.85rem;
  }

  .od-summary {
    width: 100%;
  }
}

/* ===== 手機板：商品表格改堆疊 ===== */
@media (max-width: 768px) {

  /* 隱藏原本的表頭 */
  .od-table thead {
    display: none;
  }

  /* 每列改為卡片區塊 */
  .od-table tr {
    display: block;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
  }

  /* 每個單元格改成獨立一行 */
  .od-table td {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.9rem;
  }

  /* 商品資料（第一格）特殊處理：圖片 + 文字並排 */
  .od-table td.od-prod {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    justify-content: flex-start; 
  }

  .od-table td.od-prod img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
  }

  /* 其他項目統一 left label / right value */
  .od-table td::before {
    content: var(--label, attr(data-label));
    font-weight: 600;
    color: #444;
  }

  /* 設定每個 TD 的 label */
  .od-table td:nth-child(2) {
    --label: "優惠";
  }

  .od-table td:nth-child(3) {
    --label: "單件價格";
  }

  .od-table td:nth-child(4) {
    --label: "數量";
  }

  .od-table td:nth-child(5) {
    --label: "小計";
  }

  /* 讀取 label */
  .od-table td:not(.od-prod)::before {
    content: var(--label);
  }

  /* 優惠欄（贈品 badge + 文字）包成一組靠右 */
  .od-table td.od-discount {
    justify-content: space-between;
  }

  .od-table td.od-discount > span {
    display: inline;   /* 讓兩個 span 視為同一組 */
  }

  /* 用 wrapper 把 badge 和文字包在一起靠右 */
  .od-table td.od-discount .od-discount-content {
    display: flex;
    align-items: center;
    gap: 6px;
  }
}

/* ===== 訂單資訊卡片 ===== */
.order-info-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e6e6e6;
  padding: 24px 28px;
  margin-top: 16px;
  margin-bottom: 32px;
  font-size: 0.9rem;
}

/* 訂單資訊卡片：最上方的訂單狀態通知 */
.oi-status {
  margin-bottom: 16px;
}

.oi-status .oi-title {
  margin-bottom: 4px;
}

/* 單件價格：舊價 + 新價 */
.od-price-old {
  font-size: 0.8rem;
  color: #999;
  text-decoration: line-through;
}

.od-price-now {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
}

.oi-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.oi-col {
  flex: 1 1 260px;
}

.oi-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.oi-list {
  margin: 0;
}

.oi-list>div {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4px;
}

.oi-list dt {
  width: 120px;
  color: #555;
  flex-shrink: 0;
}

.oi-list dd {
  margin: 0;
  color: #333;
  word-break: break-all;
}

.oi-footer {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 12px;
}

.oi-note {
  margin: 0;
  color: #666;
  font-size: 0.85rem;
}

/* ===== 留言區 ===== */
.oi-msg-label {
  display: block;
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 0.9rem;
  color: #555;
}

.oi-msg-textarea {
  width: 100%;
  resize: vertical;
  min-height: 80px;
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 8px 10px;
  font-size: 0.9rem;
}

.oi-msg-textarea:focus {
  outline: none;
  border-color: #648d7a;
  box-shadow: 0 0 0 2px rgba(100, 141, 122, 0.15);
}

.oi-msg-actions {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* +加入圖片 按鈕 */
.oi-btn-addimg {
  border: 1px solid #666;
  background: #fff;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.85rem;
  color: #333;
}

/* 預覽區：縮圖由左到右排列 */
.oi-preview {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 圖片外層容器 */
.oi-img-wrap {
  position: relative;
  width: 80px;
  height: 80px;
}

/* 圖片縮圖 */
.oi-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* 右上角刪除按鈕（小小圓形） */
.oi-img-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}

.oi-img-del:hover {
  background: rgba(0, 0, 0, 0.8);
}


/* 每張預覽縮圖 */
.oi-preview img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* 留言區按鈕排版保持左右 */
.oi-msg-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}


/* 發送 按鈕 */
.oi-btn-send {
  border: none;
  border-radius: 4px;
  padding: 8px 18px;
  font-size: 0.9rem;
  color: #fff;
  background: #666;
}

.oi-btn-addimg:hover,
.oi-btn-send:hover {
  opacity: 0.9;
}

/* RWD */
@media (max-width: 768px) {
  .order-info-card {
    padding: 16px 14px 20px;
  }

  .oi-list dt {
    width: 120px;
  }

  .oi-msg-actions {
    flex-direction: row;
    gap: 8px;
  }
}

/* ===== 訂單詳情：已退貨／已換貨商品反灰 ===== */
.od-table tbody tr.od-item-after-sale > td {
  background-color: #f3f4f6;
  color: #8a8f98;
}

.od-table tbody tr.od-item-after-sale .od-prod img {
  opacity: 0.42;
  filter: grayscale(100%);
}

.od-table tbody tr.od-item-after-sale .od-title,
.od-table tbody tr.od-item-after-sale .od-spec,
.od-table tbody tr.od-item-after-sale .od-price-now,
.od-table tbody tr.od-item-after-sale .od-price-old,
.od-table tbody tr.od-item-after-sale .od-discount {
  color: #8a8f98 !important;
}

.od-after-sale-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.od-after-sale-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.od-returned-badge {
  color: #5f6368;
  background-color: #ffffff;
  border: 1px solid #c9ccd1;
}

.od-exchanged-badge {
  color: #5d6470;
  background-color: #ffffff;
  border: 1px solid #cbd1d8;
}

@media (max-width: 767.98px) {
  .od-after-sale-status {
    margin-top: 5px;
  }

  .od-after-sale-badge {
    padding: 2px 6px;
    font-size: 11px;
  }
}


/*=================== 服務條款 ======================*/
.terms-page {
  padding: 40px 0 80px;
}

.terms-container {
  /* 外層已經有 bootstrap .container，所以這裡只調整內距就好 */
  max-width: 960px;
  /* 想再窄或再寬可以改這個數字 */
  margin: 0 auto;
}

.terms-header {
  margin-bottom: 32px;
}

.terms-title {
  font-size: 2.4rem;
  font-weight: 700;
}

/* 內文 */
.terms-body {
  text-align: left;
  line-height: 1.8;
  font-size: 1rem;
  margin-top: 20px;
}

.terms-body p {
  margin-bottom: 1.1rem;
}

.terms-body h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

/* ===== 隱私權與條款設定：RichEditor 內容 ===== */
.legal-policy-editor-content {
  color: #444;
  font-size: 16px;
  line-height: 1.9;
}

.legal-policy-editor-content h1,
.legal-policy-editor-content h2,
.legal-policy-editor-content h3 {
  color: #222;
  font-weight: 700;
  line-height: 1.4;
  margin: 28px 0 12px;
}

.legal-policy-editor-content p {
  margin-bottom: 12px;
}

.legal-policy-editor-content ul,
.legal-policy-editor-content ol {
  padding-left: 1.5rem;
  margin-bottom: 16px;
}

.legal-policy-editor-content li {
  margin-bottom: 6px;
}

.legal-policy-editor-content a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-policy-editor-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 16px auto;
  border-radius: 0;
}

.legal-policy-editor-content figure,
.legal-policy-editor-content .attachment {
  margin: 18px 0;
  text-align: center;
}

/* 隱藏 RichEditor 圖片附件檔名 / 大小 */
.legal-policy-editor-content .attachment__caption,
.legal-policy-editor-content .attachment__name,
.legal-policy-editor-content .attachment__size,
.legal-policy-editor-content figcaption {
  display: none !important;
}

@media (max-width: 768px) {
  .legal-policy-editor-content {
    font-size: 15px;
  }
}
/* ===== 隱私權與條款設定：RichEditor 內容 END ===== */

/* ===== 退換貨申請：版型（保留灰色背景，僅改內容卡片） ===== */
.return-request-section .rr-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  overflow: hidden;
}

.rr-switch {
  display: flex;
  gap: 10px;
  padding: 14px 14px 0;
}

.rr-switch-btn {
  flex: 1;
  border: 1px solid #e6e6e6;
  background: #fafafa;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 700;
  color: #333;
}

.rr-switch-btn.is-active {
  background: #1ABC9C;
  border-color: #1ABC9C;
  color: #fff;
}

.rr-panel {
  padding: 14px;
}

.rr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}


@media (min-width: 992px) {
  .rr-grid {
    grid-template-columns: 1fr 1fr;
  }

  .rr-address {
    grid-column: 1 / -1;
  }

  .rr-actions {
    grid-column: 1 / -1;
  }
}


/* 商品列可選取（radio） */
.rr-prod-row.is-selectable {
  cursor: pointer;
}

.rr-prod-check {
  width: 22px;
  height: 22px;
  margin-left: 6px;
  accent-color: #648d7a;
  flex: 0 0 auto;
}

.rr-prod-radio {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  accent-color: #648d7a;
}

.rr-prod-row.is-selected {
  border-color: rgba(100, 141, 122, .45);
  box-shadow: 0 0 0 3px rgba(100, 141, 122, .10) inset;
  background: #f7fbf9;
}


.rr-block {
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 16px;
  background: #fff;
}

/* 退換貨詳情頁：每個主要區塊統一間距 */
.rr-result-card > .rr-grid,
.rr-result-card > .rr-block {
  margin-top: 14px;
}

.rr-title {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 12px;
}

.rr-help {
  margin: 8px 0 0;
  font-size: 12px;
  color: #777;
}

.rr-products {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rr-prod-row {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 10px;
  background: #fcfcfc;
}

.rr-prod-row img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  background: #eee;
}

.rr-prod-info {
  flex: 1;
  min-width: 0;
}

.rr-prod-title {
  font-weight: 700;
  line-height: 1.3;
}

.rr-prod-meta {
  font-size: 12px;
  color: #777;
  margin-top: 4px;
}

.rr-field {
  margin-bottom: 14px;
}

.rr-label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
}

.rr-phone-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 768px) {
  .rr-phone-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.rr-textarea {
  resize: vertical;
}

.rr-counter {
  text-align: right;
  font-size: 12px;
  color: #777;
  margin-top: 6px;
}

.rr-twzipcode select {
  width: 100%;
  padding: .375rem .75rem;
  border: 1px solid #dee2e6;
  border-radius: .375rem;
  background: #fff;
  margin-bottom: 10px;
}

.rr-actions {
  padding: 16px 14px 16px;
  display: flex;
  justify-content: flex-end;
}

.rr-submit {
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 800;
}

/* 手機/平板：送出按鈕滿版 */
@media (max-width: 991.98px) {
  .rr-actions {
    justify-content: stretch;
    /* 讓裡面的按鈕可以撐滿 */
  }

  .rr-actions .rr-submit {
    width: 100%;
    display: block;
  }
}

.rr-password-wrap {
    position: relative;
}

.rr-password-input {
    padding-right: 48px !important;
    background-image: none !important;
}

.rr-password-wrap .rr-password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    z-index: 5;
    border: 0;
    background: transparent;
    color: #6c757d;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}

.rr-password-wrap .rr-password-toggle:hover {
    color: #198754;
}

/* 避免 Bootstrap is-valid / is-invalid 的圖示跟眼睛重疊 */
.rr-password-wrap .rr-password-input.is-valid,
.rr-password-wrap .rr-password-input.is-invalid {
    background-image: none !important;
    padding-right: 48px !important;
}

/* 自己控制綠框 / 紅框 */
.rr-password-wrap.is-valid .rr-password-input {
    border-color: #198754;
}

.rr-password-wrap.is-invalid .rr-password-input {
    border-color: #dc3545;
}

/* ===== 退換貨申請詳情 / 送出完成頁 ===== */
.rr-result-card {
  padding: 28px;
}

.rr-result-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid #e9ecef;
  border-radius: 16px;
  background: #f8faf8;
  margin-bottom: 24px;
}

.rr-result-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1ABC9C;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  flex-shrink: 0;
}

.rr-result-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #222;
}

.rr-result-desc {
  color: #666;
  line-height: 1.7;
}

/* 狀態區 */
.rr-status-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rr-status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff3cd;
  color: #8a6d3b;
  font-size: 14px;
  font-weight: 700;
}

.rr-status-note {
  color: #666;
  font-size: 14px;
}

/* 進度條 */
.rr-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.rr-step {
  min-width: 120px;
  flex: 1 1 120px;
  padding: 14px 12px;
  border-radius: 12px;
  background: #f3f4f6;
  text-align: center;
  position: relative;
}

.rr-step.is-active {
  background: #e8f8f4;
  border: 1px solid #8fd8c8;
}

.rr-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c4c4c4;
  margin: 0 auto 8px;
}

.rr-step.is-active .rr-step-dot {
  background: #1ABC9C;
}

.rr-step-label {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

/* 詳情資訊 */
.rr-info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rr-info-item {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.rr-info-label {
  color: #666;
  min-width: 100px;
  font-weight: 500;
}

.rr-info-value {
  color: #222;
  text-align: right;
  flex: 1;
  word-break: break-word;
}

/* 商品列（詳情頁用） */
.rr-product-row {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
  margin-bottom: 12px;
}

.rr-product-name {
  font-weight: 700;
  color: #222;
  margin-bottom: 4px;
}

.rr-product-meta {
  color: #666;
  font-size: 14px;
}

/* 後續說明 */
.rr-notice {
  padding: 16px 18px;
  border-radius: 12px;
  background: #f8f9fa;
  color: #444;
  line-height: 1.8;
}

/* 詳情頁按鈕群組 */
.rr-actions-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

.rr-btn {
  min-width: 160px;
  border-radius: 12px;
  font-weight: 700;
  padding: 10px 18px;
}

/* RWD */
@media (max-width: 768px) {
  .rr-result-card {
    padding: 18px 14px;
  }

  .rr-result-head {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }

  .rr-result-title {
    font-size: 20px;
  }

  .rr-info-item {
    flex-direction: column;
    gap: 6px;
  }

  .rr-info-value {
    text-align: left;
  }

  .rr-actions-multi {
    flex-direction: column;
  }

  .rr-btn {
    width: 100%;
  }
}

/*===========顧客評論=============*/
.review-page {
    max-width: 820px;
    margin: 0 auto;
}

.review-back {
    color: #222;
    text-decoration: none;
    font-size: 18px;
}

.review-card {
    border: 1px solid #e5e5e5;
    background: #fff;
}

.review-card-header {
    font-size: 22px;
    font-weight: 700;
    padding: 22px 28px;
    border-bottom: 1px solid #e5e5e5;
    background: #fafafa;
}

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

.review-order-meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 18px;
    color: #333;
    padding-bottom: 24px;
    border-bottom: 1px solid #ececec;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.review-item {
    padding: 20px 0 28px;
    border-bottom: 1px solid #ececec;
}

.review-item-top {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.review-item-image {
    width: 110px;
    min-width: 110px;
    height: 110px;
    border: 1px solid #eee;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.review-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-item-placeholder {
    font-size: 12px;
    color: #999;
}

.review-item-info {
    flex: 1;
}

.review-product-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 14px;
}

.review-rating-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.review-rating-label {
    font-size: 18px;
    color: #333;
}

.star-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 6px;
}

.star-rating input {
    display: none;
}

.star-rating label {
    font-size: 34px;
    color: #d8d8d8;
    cursor: pointer;
    line-height: 1;
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #f4c542;
}

.review-content-wrap {
    margin-top: 18px;
}

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

.review-content-label {
    font-size: 18px;
    font-weight: 500;
}

.review-content-count {
    font-size: 16px;
    color: #888;
}

.review-textarea {
    width: 100%;
    min-height: 160px;
    border: 1px solid #ddd;
    padding: 16px;
    font-size: 18px;
    resize: vertical;
    outline: none;
}

.review-textarea:focus {
    border-color: #bbb;
}

.review-submit-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
}

.review-submit-btn {
    background: #000;
    color: #fff;
    border: 0;
    padding: 14px 32px;
    font-size: 22px;
    border-radius: 6px;
    cursor: pointer;
}

.review-submit-btn:hover {
    opacity: .9;
}

@media (max-width: 768px) {
    .review-card-header,
    .review-card-body {
        padding: 18px;
    }

    .review-item-top {
        gap: 14px;
    }

    .review-item-image {
        width: 84px;
        min-width: 84px;
        height: 84px;
    }

    .review-product-title {
        font-size: 16px;
    }

    .review-rating-label,
    .review-content-label,
    .review-order-meta {
        font-size: 16px;
    }

    .review-textarea {
        font-size: 16px;
    }

    .star-rating label {
        font-size: 28px;
    }

    .review-submit-btn {
        font-size: 18px;
        padding: 12px 24px;
    }
}

/* ===== 退換貨申請詳情：取消申請確認彈窗 ===== */
.rr-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.52);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6000;
  padding: 20px;
}

.rr-modal-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 22px;
  padding: 32px 28px 26px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
  animation: rrModalPop 0.2s ease-out;
}

@keyframes rrModalPop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.rr-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f3f4f6;
  color: #777;
  font-size: 24px;
  line-height: 30px;
  cursor: pointer;
  transition: all .18s ease;
}

.rr-modal-close:hover {
  background: #e5e7eb;
  color: #222;
}

.rr-modal-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #fff3f3;
  color: #b91c1c;
  border: 2px solid #fecaca;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 800;
}

.rr-modal-title {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 800;
  color: #222;
}

.rr-modal-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: #555;
  text-align: left;
}

.rr-modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

.rr-modal-btn {
  min-width: 132px;
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all .18s ease;
}

.rr-modal-btn-light {
  background: #f3f4f6;
  color: #333;
}

.rr-modal-btn-light:hover {
  background: #e5e7eb;
}

.rr-modal-btn-danger {
  background: #b91c1c;
  color: #fff;
}

.rr-modal-btn-danger:hover {
  background: #991b1b;
}

.rr-modal-btn-danger:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

body.rr-modal-open {
  overflow: hidden;
}

@media (max-width: 576px) {
  .rr-modal-card {
    padding: 28px 20px 22px;
    border-radius: 18px;
  }

  .rr-modal-title {
    font-size: 21px;
  }

  .rr-modal-text {
    font-size: 14px;
  }

  .rr-modal-actions {
    flex-direction: column-reverse;
  }

  .rr-modal-btn {
    width: 100%;
  }
}

/* ===== 會員等級說明 Modal：卡片版 ===== */
.member-level-modal-dialog {
  max-width: 760px;
}

#tierModal .modal-content {
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

#tierModal .modal-header {
  padding: 22px 26px 18px;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #ffffff 0%, #f6fbfa 100%);
}

#tierModal .modal-title {
  font-size: 22px;
  font-weight: 800;
  color: #222;
}

#tierModal .modal-header .text-muted {
  margin-top: 4px;
  color: #777 !important;
  font-size: 14px;
  line-height: 1.7;
}

.member-level-modal-body {
  padding: 24px 26px 26px;
  background: #fbfbfb;
}

.member-level-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.member-level-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eeeeee;
  border-radius: 18px;
  padding: 18px 16px 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.member-level-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: #c9c9c9;
}

.member-level-card.is-vip::before {
  background: linear-gradient(90deg, #e8a829, #ffe35c);
}

.member-level-card.is-vvip::before {
  background: linear-gradient(90deg, #7367f0, #1abc9c);
}

.member-level-card.is-current {
  border-color: rgba(26, 188, 156, 0.5);
  box-shadow: 0 12px 32px rgba(26, 188, 156, 0.16);
}

.member-level-card-top {
  min-height: 76px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.member-level-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f2f2f2;
  color: #555;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.member-level-card.is-vip .member-level-tag {
  background: #fff3cd;
  color: #9a6500;
}

.member-level-card.is-vvip .member-level-tag {
  background: #e7f7ff;
  color: #087ea4;
}

.member-level-name {
  margin: 10px 0 0;
  font-size: 20px;
  font-weight: 800;
  color: #111;
}

.member-level-current-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #1abc9c;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.member-level-rule-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.member-level-rule {
  flex: 1;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 12px;
  border-radius: 14px;
  background: #f8faf9;
  border: 1px solid #f0f0f0;
}

.member-level-rule-label {
  margin-bottom: 6px;
  color: #777;
  font-size: 13px;
  font-weight: 700;
}

.member-level-rule-value {
  color: #222;
  font-size: 15px;
  line-height: 1.6;
}

.member-level-rule-value span {
  display: block;
  color: #555;
  font-size: 13px;
}

.member-level-rule-value strong {
  font-size: 16px;
  font-weight: 800;
}

#tierModal .modal-footer {
  padding: 14px 26px 20px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
}

#tierModal .modal-footer .btn {
  min-width: 96px;
  border-radius: 999px;
  padding: 7px 18px;
}

.member-level-benefit-list {
  margin: 0;
  padding-left: 18px;
  color: #222;
  font-size: 15px;
  line-height: 1.8;
}

.member-level-benefit-list li {
  margin-bottom: 2px;
}

.member-level-benefit-list li:last-child {
  margin-bottom: 0;
}

/* 手機版：改成一張一張往下排 */
@media (max-width: 768px) {
  .member-level-modal-dialog {
    margin: 12px;
  }

  #tierModal .modal-header {
    padding: 20px 20px 16px;
  }

  .member-level-modal-body {
    padding: 20px;
  }

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

  .member-level-card {
    height: auto;
  }

  .member-level-card-top {
    min-height: auto;
  }

  .member-level-rule {
    flex: unset;
    min-height: auto;
  }
}

/* ===== 會員購物金紀錄 Modal：分頁按鈕顏色 ===== */
#storeCreditLogModal .pagination .page-link {
  color: #6c757d;
  border-color: #d1d5db;
  background-color: #ffffff;
}

#storeCreditLogModal .pagination .page-link:hover {
  color: #ffffff;
  background-color: #6c757d;
  border-color: #6c757d;
}

#storeCreditLogModal .pagination .page-item.active .page-link {
  color: #ffffff;
  background-color: #6c757d;
  border-color: #6c757d;
}

#storeCreditLogModal .pagination .page-item.disabled .page-link {
  color: #9ca3af;
  background-color: #f3f4f6;
  border-color: #e5e7eb;
}


/* ================= 收藏清單頁：根據收藏推薦 ================= */

.wishlist-related {
  margin-top: 40px;
}

.wishlist-related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.wishlist-related-more {
  font-size: 14px;
  color: #0066ff;
  text-decoration: none;
  white-space: nowrap;
}

.wishlist-related-more:hover {
  text-decoration: underline;
}

/* 桌機：固定一排 4 個，第 5 個開始左右滑 */
.wishlist-related-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 220px;
  grid-template-columns: none !important;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}

/* 單張小卡 */
.wishlist-related-list .wishlist-rel-card {
  min-width: 0;
  scroll-snap-align: start;
}

/* 小卡圖片區，讓它跟商品內頁相關產品一樣比較小 */
.wishlist-related-list .pd-rel-img {
  width: 100%;
  height: 170px;
  background: #fff;
  overflow: hidden;
}

.wishlist-related-list .pd-rel-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 商品名稱 */
.wishlist-related-list .pd-rel-name {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: #111;
  min-height: 38px;
}

/* 價格 */
.wishlist-related-list .pd-rel-price {
  margin-top: 6px;
  text-align: center;
  font-size: 13px;
}

.wishlist-related-list .pd-price-old {
  color: #888;
  text-decoration: line-through;
  margin-right: 6px;
}

.wishlist-related-list .pd-price-new {
  color: #111;
  font-weight: 600;
}

/* 加入購物車按鈕 */
.wishlist-related-list .pd-rel-add {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 78%;
  min-height: 46px;
  margin: 10px auto 0;
  padding: 8px 10px;

  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
}

/* 捲軸 */
.wishlist-related-list::-webkit-scrollbar {
  height: 8px;
}

.wishlist-related-list::-webkit-scrollbar-thumb {
  background: #cfcfcf;
  border-radius: 999px;
}

.wishlist-related-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 999px;
}

/* 平板：一排 2 個 */
@media (max-width: 991.98px) {
  .wishlist-related-list {
    grid-auto-columns: 200px;
    gap: 16px;
  }

  .wishlist-related-list .pd-rel-img {
    height: 150px;
  }
}

/* 手機：一張卡約 78%，左右滑 */
@media (max-width: 575.98px) {
  .wishlist-related-head {
    align-items: flex-start;
  }

  .wishlist-related-list {
    grid-auto-columns: 180px;
    gap: 14px;
  }

  .wishlist-related-list .pd-rel-img {
    height: 135px;
  }

  .wishlist-related-list .pd-rel-add {
    width: 100%;
    min-height: 42px;
    font-size: 13px;
    padding: 7px 8px;
  }
}