/* =============================================================================
   odr-wc-my-account-manager — 「我的帳號」橫式選單版型
   -----------------------------------------------------------------------------
   只在後台選擇「橫式」時才載入（外掛以 get_nav_layout() 條件式 enqueue），
   且全部規則都掛在 body.odr-mam-nav-horizontal 底下，直式版型完全不受影響。

   為什麼獨立成一支檔案：
   my-account.css 是共用皮膚（含手機版卡片式表格等），改動頻繁；版型切換屬於
   可開關的功能，分開放才不會互相干擾，也讓直式使用者少載一支 CSS。

   EduMall 的既有樣式需要覆寫的點（來自 woocommerce.min.css）：
     ul       → 有 border + border-radius:5px
     li       → margin:-1px -1px 0（直式的邊框重疊技巧）
     li a     → display:block; padding:13px 30px; border-top
     is-active/hover → 白字 + 主色背景
   因此以下多處需要 !important 才蓋得過。
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. 版面：讓選單欄與內容欄各自佔滿整列
   EduMall：col-lg-3 / col-lg-9 並排
   Blocksy：.ct-woo-account flex + .ct-acount-nav 側欄（寬 ~20% / min 220px）
   若不把側欄拉成全寬，橫式 flex-wrap 會在窄欄裡兩兩擠一列（訂單／登出跑版）。
   -------------------------------------------------------------------------- */
body.odr-mam-nav-horizontal .row:has(> div > .woocommerce-MyAccount-navigation) > div {
  flex: 0 0 100%;
  max-width: 100%;
}

/* 不支援 :has() 的舊瀏覽器：直接命中 EduMall 帳號頁的兩個欄位 */
@supports not selector(:has(*)) {
  body.odr-mam-nav-horizontal.woocommerce-account .col-lg-3.col-md-4,
  body.odr-mam-nav-horizontal.woocommerce-account .col-lg-9.col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Blocksy：改為上下堆疊，選單全寬當頁籤列 */
body.odr-mam-nav-horizontal .ct-woo-account {
  flex-direction: column !important;
  align-items: stretch !important;
}
body.odr-mam-nav-horizontal .ct-acount-nav,
body.odr-mam-nav-horizontal .ct-account-nav {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-inline-end: 0 !important;
  margin-bottom: 1.75rem;
  align-self: stretch !important;
}
/* 全寬時不再需要側欄卡片陰影框住窄清單 */
body.odr-mam-nav-horizontal .ct-acount-nav,
body.odr-mam-nav-horizontal .ct-account-nav {
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

/* -----------------------------------------------------------------------------
   2. 導覽列：直式清單 → 橫式頁籤
   -------------------------------------------------------------------------- */
body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation {
  margin-bottom: 1.75rem;
}

body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0 !important;
  border-bottom: 1px solid var(--odr-line, #e7e5e4) !important;
  border-radius: 0 !important;
}

/* 清掉直式用來讓邊框重疊的負 margin；禁止 li 被撐滿整列 */
body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation li {
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  flex: 0 0 auto;
}

body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation li a,
body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation li:first-child a,
body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation li:last-child a {
  display: flex !important;
  align-items: center;
  height: auto !important;
  min-height: 0 !important;
  padding: .85rem 1.1rem !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  white-space: nowrap;
  color: var(--odr-muted, #78716c) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  transition: color .18s var(--odr-ease, cubic-bezier(.16,1,.3,1)),
              border-color .18s var(--odr-ease, cubic-bezier(.16,1,.3,1));
}

/* Blocksy 側欄 icon（:before）在橫式頁籤仍可保留，略縮間距 */
body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation li a:before {
  margin-inline-end: .45em !important;
  width: 1em !important;
  font-size: .95em !important;
}

body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation li a:hover {
  color: var(--odr-ink, #1c1917) !important;
  background: transparent !important;
  border-bottom-color: var(--odr-line, #e7e5e4) !important;
}

body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--odr-ink, #1c1917) !important;
  background: transparent !important;
  font-weight: 700 !important;
  border-bottom-color: var(--odr-accent, #b45309) !important;
}

/* 清掉 Blocksy 直式分隔線，改由 ul 底線當頁籤軸 */
body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation ul li:not(:last-child) a {
  border-bottom-color: transparent !important;
}
body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation ul li.is-active a {
  border-bottom-color: var(--odr-accent, #b45309) !important;
}

/* 登出擺到最右邊，與其他頁籤拉開（單列時才好看；換行時見下方 media） */
body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-left: auto !important;
}

/* -----------------------------------------------------------------------------
   3. 頭貼區塊：橫式時收成靠左的小卡，不要拉成整列寬
   -------------------------------------------------------------------------- */
body.odr-mam-nav-horizontal .odr-mam-userbox {
  display: inline-flex;
  margin-bottom: 1.1rem;
}

/* -----------------------------------------------------------------------------
   4. 手機：頁籤改成可橫向捲動，不換行擠成一團
   關鍵：flex 祖先鏈必須 min-width:0 + 寬度上限，ul 才會形成可捲動的 scrollport。
   否則 ul 會被子項撐到整頁寬，右側頁籤在視窗外卻捲不動（點不到）。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* 從外層一路壓住寬度，避免 flex 子項把整欄撐破 */
  body.odr-mam-nav-horizontal .ct-woo-account,
  body.odr-mam-nav-horizontal .ct-acount-nav,
  body.odr-mam-nav-horizontal .ct-account-nav,
  body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation,
  body.odr-mam-nav-horizontal .row:has(> div > .woocommerce-MyAccount-navigation),
  body.odr-mam-nav-horizontal .row:has(> div > .woocommerce-MyAccount-navigation) > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation {
    margin-bottom: 1.25rem;
    /* 把橫向溢出關在 nav 裡，真正的捲動交給 ul */
    overflow: hidden;
  }

  body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: stretch;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: thin;          /* 略露捲軸，讓使用者知道可滑 */
    -ms-overflow-style: auto;
    /* 右側留一點內距，最後一項不會貼邊被裁 */
    padding-bottom: 2px;
  }
  /* 仍藏掉粗捲軸，但保留 iOS 慣性滑動；Android 用 thin scrollbar */
  body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
    height: 3px;
  }
  body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation ul::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .2);
    border-radius: 2px;
  }

  body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation li {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation li a {
    padding: .75rem .9rem !important;
    font-size: .9rem !important;
    /* 確保可點：不被父層 pointer 吃掉 */
    pointer-events: auto;
    position: relative;
    z-index: 1;
  }

  /* 手機不硬推到最右，避免捲動時出現大片空白 */
  body.odr-mam-nav-horizontal .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-left: 0 !important;
  }

  body.odr-mam-nav-horizontal .odr-mam-userbox {
    display: flex;
    max-width: 100%;
  }
}