/* === 強化版購物 - 前台樣式 === */

/* 會員中心頁籤 AJAX 切換時的載入態 */
.woocommerce-MyAccount-content.twshop-account-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* 會員中心頁籤自訂圖示（Lucide 線條風 SVG，見 assets/icons/）：只加間距與尺寸，顏色沿用連結文字本身的
   顏色（SVG 本身是 stroke="currentColor"，不覆寫主題的強調色變數），只有後台實際設定過圖示的頁籤才會有
   .twshop-tab-icon，其餘頁籤不受影響。間距沿用 Blocksy 主題原生圖示（a:before）的 margin-inline-end:15px，
   讓自訂圖示與主題預設圖示跟文字的距離一致；不額外做 position/top 微調，改依賴主題
   `.woocommerce-MyAccount-navigation ul li a` 本身的 `display:flex; align-items:center;` 做垂直置中，
   跟主題原生圖示的對齊方式一致。SVG 尺寸對齊主題原生圖示的 icon box 寬度（Blocksy 該規則是
   font-size:16px + width:20px——字型圖示的實際視覺墨色通常比 font-size 數字看起來更滿版，
   單純把 SVG 也設成 16px 反而視覺上偏小，改對齊 20px 的 box 寬度比較接近觀感）。 */
.woocommerce-MyAccount-navigation-link a .twshop-tab-icon {
    display: inline-flex;
    margin-inline-end: 15px;
    color: inherit;
}
.woocommerce-MyAccount-navigation-link a .twshop-tab-icon svg {
    width: 20px;
    height: 20px;
}

/* 會員中心頁籤：手機版改為可橫向滑動，按鈕本身樣式（顏色/高度/間距等）與桌機版完全相同，只改排列方向。
   後台「頁籤排序與開關」區塊可關閉此功能（wc_account_tab_mobile_scroll），關閉時不會加上 body class，
   以下規則就不會生效，改沿用佈景主題原本的直向清單。 */
@media (max-width: 689.98px) {
    body.twshop-account-tab-mobile-scroll .woocommerce-MyAccount-navigation ul {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body.twshop-account-tab-mobile-scroll .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
        display: none;
    }
    body.twshop-account-tab-mobile-scroll .woocommerce-MyAccount-navigation ul li {
        flex: 0 0 auto;
    }
    body.twshop-account-tab-mobile-scroll .woocommerce-MyAccount-navigation ul li a {
        white-space: nowrap;
    }
    /* 主題原本 :hover 和 .is-active 共用同一組強調色，觸控裝置點擊後 :hover 容易卡住不放，
       導致「剛點過的頁籤」和「目前真正作用中的頁籤」看起來一樣。手機版拿掉 hover 專屬的強調色，
       只保留 .is-active 一個視覺狀態。 */
    body.twshop-account-tab-mobile-scroll .woocommerce-MyAccount-navigation ul li:hover:not(.is-active) a {
        background: transparent;
        color: var(--account-nav-text-initial-color, var(--theme-palette-color-3));
    }
}

/* 點數異動顏色 (語意色，可由主題覆寫) */
.twshop-points-earn { color: #2e7d32; font-weight: 700; }
.twshop-points-use  { color: #c62828; font-weight: 700; }

/* 點數紀錄滾動容器 */
.twshop-points-history-wrap {
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 1em;
}
.twshop-points-history-wrap table.shop_table {
    margin-bottom: 0;
}
/* 在行動版響應式模式下，時間欄位縮小以避免過長 */
.twshop-points-history-wrap table.shop_table td:first-child {
    font-size: 12px;
    color: var(--theme-text-color, inherit);
    opacity: 0.75;
}

/* 會員中心：兩個區塊之間的分隔線 */
.twshop-section-divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin: 2.5em 0;
}

/* 結帳頁：隱藏移動後在 order review 裡的空白運送列 */
tr.twshop-shipping-hidden { display: none !important; }

/* 結帳頁：移入帳單表單的運送方式選擇區塊 */
#twshop-shipping-placeholder {
    clear: both;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    margin-bottom: 1em;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background: var(--theme-palette-color-8, #f8f9fa);
}
.twshop-shipping-label {
    margin: 0 0 10px;
    font-weight: 600;
    font-size: 14px;
}
#twshop-shipping-placeholder ul#shipping_method {
    margin: 0;
    padding: 0;
    list-style: none;
}
#twshop-shipping-placeholder ul#shipping_method li {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
#twshop-shipping-placeholder ul#shipping_method li:last-child {
    margin-bottom: 0;
}

/* 會員等級權益總覽表 */
.twshop-tier-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.twshop-tier-table th,
.twshop-tier-table td {
    white-space: nowrap;
}

/*
 * Blocksy 全域規則 table.shop_table tr>*:first-child / :last-child 會把
 * 首末格的 padding-inline-start/end 清零，導致「等級」偏左、「升等禮」偏右。
 * 此處提升特異度（相同 0,0,2,2），靠 CSS 載入順序蓋回去。
 */
table.twshop-tier-table tr > *:first-child { padding-inline-start: 12px; }
table.twshop-tier-table tr > *:last-child  { padding-inline-end:   12px; }

@media screen and (max-width: 600px) {
    .twshop-tier-table thead {
        display: none;
    }
    .twshop-tier-table tr {
        display: block;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 6px;
        margin-bottom: 1em;
        padding: 8px 0;
    }
    table.twshop-tier-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
        padding: 6px 14px;
        border: none;
        white-space: normal;
        text-align: right;
    }
    table.twshop-tier-table tbody td:first-child { padding-inline-start: 14px; }
    table.twshop-tier-table tbody td:last-child  { padding-inline-end:   14px; }
    table.twshop-tier-table tbody td[data-title]::before {
        content: attr(data-title);
        font-weight: 600;
        flex-shrink: 0;
        float: none;
        display: block;
        text-align: left;
        color: var(--theme-text-color, #555);
        opacity: 0.75;
    }
}

/* 等級資訊列：補強手機版換行（視覺樣式由 woocommerce-message 提供） */
.twshop-tier-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    line-height: 1.7;
}

/* 等級表格：目前等級列 */
.twshop-tier-table tr.twshop-tier-current {
    background: rgba(0, 0, 0, 0.04);
    font-weight: 700;
}

@media screen and (max-width: 600px) {
    .twshop-tier-table tr.twshop-tier-current {
        border: 2px solid rgba(0, 0, 0, 0.22);
    }
}

/* 購物車 / 結帳頁點數折抵區塊 */
.twshop-points-redemption-wrapper {
    margin-bottom: 1em;
}
.twshop-points-redemption {
    padding: 15px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    background: var(--theme-palette-color-8, #f8f9fa);
}
.twshop-points-redemption h4 {
    margin: 0 0 8px;
    font-size: 15px;
}
.twshop-points-redemption p {
    margin-bottom: 10px;
    font-size: 14px;
}
.twshop-points-redemption .twshop-points-input-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.twshop-points-redemption .twshop-points-input-row input {
    flex: 1;
    min-width: 130px;
}
.twshop-points-notice {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--theme-text-color, #666);
    opacity: 0.85;
}

/* 會員中心：點數單一卡片 — 餘額置頂最醒目，其餘規則以 label/value 列表呈現（獨立版面，不依賴主題的 woocommerce-message 樣式） */
.twshop-points-card {
    padding: 24px 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: var(--theme-palette-color-8, #f8f9fa);
    box-sizing: border-box;
    margin-bottom: 1.2em;
}
.twshop-points-card__balance {
    text-align: center;
    padding-bottom: 18px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.twshop-points-card__balance-label {
    font-size: 12px;
    opacity: .6;
    margin-bottom: 6px;
}
.twshop-points-card__balance-value {
    font-size: 2.4em;
    font-weight: 700;
    line-height: 1.2;
}
.twshop-points-card__balance-unit {
    font-size: 0.4em;
    font-weight: 400;
    opacity: .7;
}
.twshop-points-card__balance-worth {
    font-size: 13px;
    opacity: .65;
    margin-top: 6px;
}

.twshop-points-card__details {
    display: flex;
    flex-direction: column;
}
.twshop-points-card__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 13px;
    line-height: 1.6;
}
.twshop-points-card__row:first-child {
    border-top: none;
}
.twshop-points-card__row-label {
    flex: 0 0 auto;
    font-weight: 700;
    opacity: .6;
    white-space: nowrap;
}
.twshop-points-card__row-value {
    flex: 1 1 auto;
    text-align: right;
    color: var(--theme-text-color, inherit);
}
.twshop-points-card__row--highlight .twshop-points-card__row-value {
    font-weight: 700;
}