/* =============================================================================
   odr-wc-my-account-manager — 「我的帳號」原生頁面統一皮膚
   -----------------------------------------------------------------------------
   作用範圍：只在 WooCommerce 帳號頁載入（外掛以 is_account_page() 條件式 enqueue）。
   設計系統：沿用 my-license / downloads（odr-license-bridge）那套 --odr-* 變數，
             讓訂單 / 訂閱 / 地址 / 付款 / 帳戶詳細 5 頁跟既有兩頁同一視覺家族。

   刻意不做的事（維持一致、避免副作用）：
   1. 不改頁面底色、頁首頁尾、整體版型 → wrapper 透明，元件浮在主題原底色上。
   2. 不改左側導覽選單（所有帳號頁共用，動它會波及 license/downloads）。
   3. 不碰 shop_table_responsive 的 td::before 與 display → 保留手機版 collapse 標籤。
   4. 按鈕/通知只 scope 在這 5 頁的專屬 class 下，不外溢到 license/downloads 自訂頁。
   ========================================================================== */

/* ---- 設計 token（定義在 account body 上，非 :root，符合站內慣例）---- */
body.woocommerce-account {
  --odr-ink: #1c1917;
  --odr-muted: #78716c;
  --odr-line: #e7e5e4;
  --odr-line-soft: #f5f5f4;
  --odr-surface: #ffffff;
  --odr-canvas: #fafaf9;
  --odr-accent: #b45309;
  --odr-accent-soft: #fff7ed;
  --odr-ok-bg: #f0fdf4;   --odr-ok-ink: #166534;
  --odr-warn-bg: #fffbeb; --odr-warn-ink: #b45309;
  --odr-err-bg: #fef2f2;  --odr-err-ink: #991b1b;
  --odr-radius: 14px;
  --odr-shadow: 0 1px 2px rgba(28,25,23,.04), 0 8px 24px -12px rgba(28,25,23,.12);
  --odr-ease: cubic-bezier(.16,1,.3,1);
}

/* =========================================================================
   共用：表格外觀（訂單 / 付款方式 / 訂閱）
   以各頁專屬 class 命中，不會套到 license/downloads 的自訂 UI。
   ========================================================================= */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-MyAccount-paymentMethods,
.woocommerce-account .my_account_subscriptions {
  border: 1px solid var(--odr-line) !important;
  border-radius: var(--odr-radius) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  width: 100%;
  background: var(--odr-surface) !important;
  box-shadow: var(--odr-shadow);
  font-variant-numeric: tabular-nums;
}

.woocommerce-account .woocommerce-orders-table thead th,
.woocommerce-account .woocommerce-MyAccount-paymentMethods thead th,
.woocommerce-account .my_account_subscriptions thead th {
  background: var(--odr-canvas) !important;
  color: var(--odr-muted) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  border: 0 !important;
  border-bottom: 1px solid var(--odr-line) !important;
}

.woocommerce-account .woocommerce-orders-table tbody td,
.woocommerce-account .woocommerce-orders-table tbody th,
.woocommerce-account .woocommerce-MyAccount-paymentMethods tbody td,
.woocommerce-account .my_account_subscriptions tbody td,
.woocommerce-account .my_account_subscriptions tbody th {
  border: 0 !important;
  border-bottom: 1px solid var(--odr-line-soft) !important;
  color: var(--odr-ink);
  vertical-align: middle;
  background: transparent !important;
}

.woocommerce-account .woocommerce-orders-table tbody tr:last-child td,
.woocommerce-account .woocommerce-orders-table tbody tr:last-child th,
.woocommerce-account .woocommerce-MyAccount-paymentMethods tbody tr:last-child td,
.woocommerce-account .my_account_subscriptions tbody tr:last-child td,
.woocommerce-account .my_account_subscriptions tbody tr:last-child th {
  border-bottom: 0 !important;
}

/* 桌機才套 cell padding / hover，避免蓋掉手機 collapse 版的排版 */
@media (min-width: 769px) {
  .woocommerce-account .woocommerce-orders-table thead th,
  .woocommerce-account .woocommerce-MyAccount-paymentMethods thead th,
  .woocommerce-account .my_account_subscriptions thead th {
    padding: .9rem 1.1rem !important;
  }
  .woocommerce-account .woocommerce-orders-table tbody td,
  .woocommerce-account .woocommerce-orders-table tbody th,
  .woocommerce-account .woocommerce-MyAccount-paymentMethods tbody td,
  .woocommerce-account .my_account_subscriptions tbody td,
  .woocommerce-account .my_account_subscriptions tbody th {
    padding: 1rem 1.1rem !important;
    text-align: center !important;
  }
  .woocommerce-account .woocommerce-orders-table tbody tr:hover td,
  .woocommerce-account .woocommerce-orders-table tbody tr:hover th,
  .woocommerce-account .woocommerce-MyAccount-paymentMethods tbody tr:hover td,
  .woocommerce-account .my_account_subscriptions tbody tr:hover td {
    background: var(--odr-canvas) !important;
  }
}

/* 訂單編號 / 訂閱編號 粗體 */
.woocommerce-account .woocommerce-orders-table__cell-order-number a,
.woocommerce-account .my_account_subscriptions .subscription-id a {
  font-weight: 700;
  color: var(--odr-ink);
}

/* 金額：吃掉主題可能加的顏色（WP 主題常用 -webkit-text-fill-color）*/
.woocommerce-account .woocommerce-orders-table .woocommerce-Price-amount,
.woocommerce-account .my_account_subscriptions .woocommerce-Price-amount {
  font-weight: 700;
  color: var(--odr-ink) !important;
  -webkit-text-fill-color: var(--odr-ink) !important;
}

/* =========================================================================
   訂單 / 訂閱 狀態：用文字顏色表示（不用 td::before，避免破壞手機 collapse）
   ========================================================================= */
.woocommerce-account .woocommerce-orders-table__cell-order-status,
.woocommerce-account .my_account_subscriptions .subscription-status {
  font-weight: 600;
}
.woocommerce-account .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status,
.woocommerce-account .my_account_subscriptions .subscription-status.active {
  color: var(--odr-ok-ink);
}
.woocommerce-account .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status,
.woocommerce-account .my_account_subscriptions .subscription-status.on-hold,
.woocommerce-account .my_account_subscriptions .subscription-status.pending {
  color: var(--odr-warn-ink);
}
.woocommerce-account .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
.woocommerce-account .my_account_subscriptions .subscription-status.cancelled,
.woocommerce-account .my_account_subscriptions .subscription-status.expired {
  color: var(--odr-err-ink);
}
.woocommerce-account .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status {
  color: var(--odr-muted);
}

/* =========================================================================
   按鈕：只 scope 在這 5 頁的專屬容器下（不做全域 .button，避免波及 license/downloads）
   ========================================================================= */
.woocommerce-account .woocommerce-orders-table a.button,
.woocommerce-account .my_account_subscriptions a.button,
.woocommerce-account .woocommerce-MyAccount-paymentMethods a.button,
.woocommerce-account .woocommerce-Address a.edit,
.woocommerce-account .woocommerce-orders-table .woocommerce-pagination a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .84rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  padding: .5rem .95rem !important;
  border-radius: 9px !important;
  border: 1px solid var(--odr-line) !important;
  background: var(--odr-surface) !important;
  color: var(--odr-ink) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: border-color .18s var(--odr-ease), background .18s var(--odr-ease) !important;
}
.woocommerce-account .woocommerce-orders-table a.button:hover,
.woocommerce-account .my_account_subscriptions a.button:hover,
.woocommerce-account .woocommerce-MyAccount-paymentMethods a.button:hover,
.woocommerce-account .woocommerce-Address a.edit:hover,
.woocommerce-account .woocommerce-orders-table .woocommerce-pagination a.button:hover {
  border-color: #d6d3d1 !important;
  background: var(--odr-canvas) !important;
  color: var(--odr-ink) !important;
}
/* 刪除類動作用紅字提示 */
.woocommerce-account .woocommerce-MyAccount-paymentMethods a.button.delete {
  color: var(--odr-err-ink) !important;
  border-color: #f3d3d3 !important;
}
.woocommerce-account .woocommerce-MyAccount-paymentMethods a.button.delete:hover {
  background: var(--odr-err-bg) !important;
}

/* 主要動作（新增付款方式 / 儲存變更）= 實心深色 */
.woocommerce-account .woocommerce-edit-account button[type="submit"],
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content > a.button.add,
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-Button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem !important;
  font-weight: 600 !important;
  padding: .62rem 1.15rem !important;
  border-radius: 9px !important;
  border: 1px solid var(--odr-ink) !important;
  background: var(--odr-ink) !important;
  color: #fff !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background .18s var(--odr-ease), border-color .18s var(--odr-ease) !important;
}
.woocommerce-account .woocommerce-edit-account button[type="submit"]:hover,
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content > a.button.add:hover,
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-Button.button:hover {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

/* =========================================================================
   編輯地址：兩張地址卡
   ========================================================================= */
.woocommerce-account .woocommerce-Addresses {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  width: auto !important;
  float: none !important;
}
/* EduMall 的 col2-set clearfix 偽元素會變成 grid item 佔走第一欄，關掉 */
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
  content: none !important;
  display: none !important;
}
.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
  width: auto !important;
  float: none !important;
  border: 1px solid var(--odr-line);
  border-radius: var(--odr-radius);
  padding: 1.35rem 1.5rem;
  background: var(--odr-surface);
  transition: border-color .2s var(--odr-ease), box-shadow .2s var(--odr-ease);
}
.woocommerce-account .woocommerce-Addresses .woocommerce-Address:hover {
  border-color: #dcd9d6;
  box-shadow: var(--odr-shadow);
}
.woocommerce-account .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .8rem !important;
}
/* 標題實際是 header 內的 <h2>（EduMall），不是 .title 子元素 */
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  color: var(--odr-ink);
}
/* 「編輯 帳單地址」連結：蓋掉 EduMall 的 24px 圖示按鈕（font-size:0 + :before 鉛筆），恢復文字連結 */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit {
  flex: 0 0 auto;
  width: auto !important;
  height: auto !important;
  white-space: nowrap;
  align-self: center;
  font-size: .82rem !important;
  font-weight: 500;
  margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit::before {
  content: none !important;
}
.woocommerce-account .woocommerce-Address address {
  font-style: normal;
  font-size: .9rem;
  line-height: 1.7;
  color: #44403c;
  border: 0;
  padding: 0;
}

/* =========================================================================
   付款方式：預設列輕微強調
   ========================================================================= */
.woocommerce-account .woocommerce-MyAccount-paymentMethods tr.default-payment-method td {
  background: var(--odr-accent-soft) !important;
}

/* =========================================================================
   變更密碼 / 帳戶詳細：表單
   （EduMall 用 .row.form-row > .col-md-6 grid）
   ========================================================================= */
.woocommerce-account .woocommerce-EditAccountForm {
  max-width: 620px;
}
.woocommerce-account .woocommerce-EditAccountForm fieldset {
  border: 0;
  margin: 1.75rem 0 0;
  padding: 0;
}
.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
  width: 100%;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--odr-muted);
  padding: 0 0 .9rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--odr-line);
}
.woocommerce-account .woocommerce-EditAccountForm label {
  font-size: .82rem;
  font-weight: 600;
  color: #44403c;
  margin-bottom: .4rem;
}
.woocommerce-account .woocommerce-EditAccountForm .required {
  color: var(--odr-accent);
  border: 0;
}
.woocommerce-account .woocommerce-EditAccountForm .input-text,
.woocommerce-account .woocommerce-EditAccountForm input[type="text"],
.woocommerce-account .woocommerce-EditAccountForm input[type="email"],
.woocommerce-account .woocommerce-EditAccountForm input[type="password"] {
  width: 100%;
  font-size: .92rem;
  color: var(--odr-ink);
  padding: .62rem .8rem !important;
  border: 1px solid var(--odr-line) !important;
  border-radius: 9px !important;
  background: var(--odr-surface) !important;
  box-shadow: none !important;
  transition: border-color .18s var(--odr-ease), box-shadow .18s var(--odr-ease);
}
.woocommerce-account .woocommerce-EditAccountForm .input-text:focus,
.woocommerce-account .woocommerce-EditAccountForm input:focus {
  outline: none;
  border-color: var(--odr-accent) !important;
  box-shadow: 0 0 0 3px rgba(180,83,9,.14) !important;
}
.woocommerce-account .woocommerce-EditAccountForm span em {
  color: var(--odr-muted);
  font-size: .76rem;
  font-style: normal;
}

/* =========================================================================
   通知 / 空狀態（訂閱空、付款訊息等）— 只 scope 在這 5 個 endpoint，避免波及 downloads
   ========================================================================= */
body.woocommerce-orders .woocommerce-MyAccount-content .woocommerce-info,
body.woocommerce-subscriptions .woocommerce-MyAccount-content .woocommerce-info,
body.woocommerce-edit-address .woocommerce-MyAccount-content .woocommerce-info,
body.woocommerce-payment-methods .woocommerce-MyAccount-content .woocommerce-info,
body.woocommerce-edit-account .woocommerce-MyAccount-content .woocommerce-info {
  background: var(--odr-canvas) !important;
  border: 1px solid var(--odr-line) !important;
  border-left: 3px solid var(--odr-accent) !important;
  border-radius: var(--odr-radius) !important;
  color: #44403c !important;
  box-shadow: none !important;
}
body.woocommerce-orders .woocommerce-MyAccount-content .woocommerce-error,
body.woocommerce-subscriptions .woocommerce-MyAccount-content .woocommerce-error,
body.woocommerce-payment-methods .woocommerce-MyAccount-content .woocommerce-error {
  background: var(--odr-err-bg) !important;
  border: 1px solid #f3d3d3 !important;
  border-left: 3px solid var(--odr-err-ink) !important;
  border-radius: var(--odr-radius) !important;
  color: var(--odr-err-ink) !important;
  box-shadow: none !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error::before {
  color: inherit !important;
}

/* =========================================================================
   頁面標題間距（各 endpoint 內容區塊頭部）
   ========================================================================= */
@media (min-width: 769px) {
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table,
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods,
  .woocommerce-account .woocommerce-MyAccount-content .my_account_subscriptions {
    margin-top: .5rem;
  }
}