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

/* 移除購物車頁原生的「優惠券代碼」輸入框：本外掛的視覺化優惠券卡片＋彈出視窗已完整取代這個入口，
   兩套並存容易讓顧客搞不清楚要用哪一個。這裡只隱藏購物車頁自己的（WooCommerce cart-form.php
   輸出的 `<div class="coupon">`，範圍限定在 `.woocommerce-cart-form` 底下），結帳頁原生的優惠券
   欄位是不同的 class/markup（`.checkout_coupon`），不受影響——本外掛本來就不會在結帳頁自動注入
   視覺化優惠券區塊，所以結帳頁維持原生欄位可用。 */
.woocommerce-cart-form .coupon {
    display: none !important;
}

/* 購物車／結帳頁隱藏原生「已套用優惠券」列的移除按鈕（block-based 版型）：classic 版型
   （wc_cart_totals_coupon_html() 輸出的 `<a class="woocommerce-remove-coupon">`）已在 PHP 端
   用 `twshop_hide_cart_coupon_remove_link` filter 整個拿掉連結，但 Cart/Checkout block 的
   已套用優惠券是 React 元件（Chip 元件，`.wc-block-components-totals-discount__coupon-list-item`
   內的 `.wc-block-components-chip__remove` 按鈕）純前端渲染，無法用 PHP filter 處理，只能用
   CSS 隱藏。scope 同時涵蓋 `.wc-block-cart`（Cart block）與 `.wc-block-checkout`
   （Checkout block）兩種外層 wrapper。 */
.wc-block-cart .wc-block-components-totals-discount__coupon-list-item .wc-block-components-chip__remove,
.wc-block-checkout .wc-block-components-totals-discount__coupon-list-item .wc-block-components-chip__remove {
    display: none !important;
}

/* 購物車頁「已套用優惠券」列，手機版標題後方多一個冒號的修正：
   WooCommerce cart-totals.php 把 wc_cart_totals_coupon_label() 回傳的字串同時用在兩個地方——
   桌機版 <th> 直接顯示全文、手機版當作 <td data-title="..."> 屬性值。twshop_cart_coupon_label_use_title()
   （twshop.php）把這個字串改成「優惠券: 標題」（已經自帶冒號），但主題 Blocksy 手機版的響應式表格樣式
   （table.shop_table_responsive tbody td[data-title]:before { content: attr(data-title) ": "; }，
   @media max-width:689.98px）會再幫每一格自動補一個「: 」，兩者疊加變成「優惠券: 標題: 」，多了一個
   不該有的冒號。其餘列（小計/運費/合計等）的 data-title 是 WC 原生的純標籤文字（沒有冒號），
   Blocksy 補的冒號對那些列是正確、必要的，所以只針對「已套用優惠券」列（.cart-discount）覆寫，
   改成不再額外補冒號；選擇器多了 tr.cart-discount 這層 class，比 Blocksy 原本的規則更精確，
   靠選擇器特異度自然覆蓋，不需要 !important。 */
@media (max-width: 689.98px) {
    table.shop_table_responsive tbody tr.cart-discount td[data-title]:before {
        content: attr(data-title);
    }
}

/* 會員中心頁籤 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-tier-table 的響應式作法），
   並把「時間＋異動點數」提升為卡片標頭同一行顯示，一眼就能看到何時變動多少，
   其餘（說明/餘額/使用期限）維持 label:value 各自一行，比純文字表格直排更容易閱讀。 */
@media screen and (max-width: 600px) {
    .twshop-points-history-wrap {
        max-height: 420px;
    }
    .twshop-points-history-wrap table.shop_table thead {
        display: none;
    }
    .twshop-points-history-wrap table.shop_table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 6px;
        margin-bottom: 10px;
        padding: 10px 14px;
    }
    .twshop-points-history-wrap table.shop_table tr:last-child {
        margin-bottom: 0;
    }
    .twshop-points-history-wrap table.shop_table td {
        border: none;
        white-space: normal;
        padding: 0;
    }
    .twshop-points-history-wrap table.shop_table td:nth-child(1) {
        order: 1;
    }
    .twshop-points-history-wrap table.shop_table td:nth-child(2) {
        order: 2;
        margin-inline-start: auto;
        font-size: 17px;
    }
    .twshop-points-history-wrap table.shop_table td:nth-child(3),
    .twshop-points-history-wrap table.shop_table td:nth-child(4),
    .twshop-points-history-wrap table.shop_table td:nth-child(5) {
        flex-basis: 100%;
        display: flex;
        justify-content: space-between;
        gap: 8px;
        margin-top: 6px;
        text-align: right;
    }
    .twshop-points-history-wrap table.shop_table td:nth-child(3) {
        order: 3;
        padding-top: 8px;
        margin-top: 8px;
        border-top: 1px dashed rgba(0, 0, 0, 0.1);
    }
    .twshop-points-history-wrap table.shop_table td:nth-child(4) { order: 4; }
    .twshop-points-history-wrap table.shop_table td:nth-child(5) { order: 5; }
    .twshop-points-history-wrap table.shop_table td[data-title]::before {
        content: attr(data-title);
        font-weight: 600;
        text-align: left;
        color: var(--theme-text-color, #555);
        opacity: 0.75;
    }
    .twshop-points-history-wrap table.shop_table td:nth-child(1)::before,
    .twshop-points-history-wrap table.shop_table td:nth-child(2)::before {
        content: none;
    }
}

/* 會員中心：兩個區塊之間的分隔線 */
.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);
    }
}

/* 視覺化優惠券卡片：外觀跟隨 Blocksy 主題的圓角/陰影/邊框色變數，讓卡片風格與主題其他區塊（表單、按鈕）一致；
   按鈕沿用 WooCommerce/主題既有的 .button / .button.alt class，不再另外覆寫顏色，套用哪個佈景主題按鈕長怎樣，卡片按鈕就跟著長怎樣。 */
.twshop-visual-coupons-wrapper {
    clear: both;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}
/* 購物車頁：優惠券按鈕緊接在點數區塊下方，點數區塊本身已有 margin-bottom，這裡不用再疊加上緣間距 */
.twshop-points-redemption-wrapper + .twshop-visual-coupons-wrapper {
    margin-top: 0;
}
.twshop-visual-coupons-wrapper,
.twshop-coupons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.twshop-no-coupon-msg {
    color: var(--theme-text-color, #666);
    margin-top: 20px;
    width: 100%;
    grid-column: 1 / -1;
}

/* 購物車/結帳頁的優惠券入口按鈕＋彈出視窗：帳戶頁（我的優惠券）不使用這組樣式，維持原本一律展開的網格 */
.twshop-coupons-dialog {
    width: min(560px, calc(100% - 32px));
    max-height: min(80vh, 640px);
    padding: 0;
    margin: auto;
    border: none;
    border-radius: var(--theme-border-radius, 8px);
    background: var(--theme-content-background, #fff);
    box-shadow: var(--theme-box-shadow, 0 10px 40px rgba(0, 0, 0, 0.25));
    /* 開關動畫：淡入＋輕微上移縮放，比原生 <dialog> 預設的「瞬間出現/消失」自然。
       display/overlay 搭配 allow-discrete，讓 close() 觸發的關閉也會播放同一組轉場，
       瀏覽器會延後真正把 dialog 移出畫面，直到轉場結束（不支援 @starting-style 的舊瀏覽器則優雅退化為無動畫直接顯示）。 */
    opacity: 0;
    transform: scale(0.96) translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete;
}
.twshop-coupons-dialog[open] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
@starting-style {
    .twshop-coupons-dialog[open] {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
}
.twshop-coupons-dialog::backdrop {
    background: rgba(0, 0, 0, 0);
    transition: background-color 0.2s ease allow-discrete;
}
.twshop-coupons-dialog[open]::backdrop {
    background: rgba(0, 0, 0, 0.5);
}
@starting-style {
    .twshop-coupons-dialog[open]::backdrop {
        background: rgba(0, 0, 0, 0);
    }
}
.twshop-coupons-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--theme-border-color, #eee);
}
.twshop-coupons-dialog-head h3 {
    margin: 0;
    font-size: 16px;
    color: var(--theme-text-color, #333);
}
.twshop-coupons-dialog-close {
    flex-shrink: 0;
    padding: 4px;
    border: none;
    background: none;
    color: var(--theme-text-color, #666);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.twshop-coupons-dialog-close:hover {
    opacity: 0.7;
}
.twshop-coupons-dialog .twshop-coupons-grid {
    grid-template-columns: 1fr;
    padding: 16px 18px 20px;
    margin: 0;
    max-height: calc(min(80vh, 640px) - 56px);
    overflow-y: auto;
}
.visual-coupon-card {
    border: 1px solid var(--theme-border-color, #e2e8f0);
    padding: 15px;
    border-radius: var(--theme-border-radius, 8px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--theme-content-background, #fff);
    box-shadow: var(--theme-box-shadow, 0 1px 3px rgba(0, 0, 0, 0.05));
    box-sizing: border-box;
    text-align: left;
    transition: 0.3s;
}
.visual-coupon-card.is-used {
    filter: grayscale(100%);
    opacity: 0.6;
}
.twshop-coupon-card-body {
    flex: 1;
    padding-right: 15px;
    overflow: hidden;
}
.twshop-coupon-price {
    margin-bottom: 5px;
    font-size: 1.5em;
    line-height: 1;
}
.twshop-coupon-title {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.2;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: var(--theme-text-color, #333);
}
.twshop-coupon-desc {
    margin: 0;
    font-size: 12px;
    color: var(--theme-text-color, #666);
    line-height: 1.4;
}
.twshop-coupon-expiry {
    font-size: 11px;
    color: var(--theme-text-color, #999);
    margin-top: 8px;
    opacity: 0.8;
}
.visual-coupon-card .v-coupon-message {
    display: none;
    font-size: 11px;
    font-weight: bold;
    margin-top: 6px;
}
.twshop-coupon-btn {
    padding: 6px 12px;
    font-size: 12px;
    min-width: 80px;
    white-space: nowrap;
    text-align: center;
}
.twshop-coupon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.twshop-coupon-btn-remove {
    background-color: #dc3232 !important;
    color: #fff !important;
    border-color: #dc3232 !important;
}

/* 極窄螢幕：卡片內容跟按鈕並排會太擠，改成上下堆疊、按鈕滿版方便點按 */
@media screen and (max-width: 400px) {
    .visual-coupon-card {
        flex-direction: column;
        align-items: stretch;
    }
    .twshop-coupon-card-body {
        padding-right: 0;
        margin-bottom: 10px;
    }
    .twshop-coupon-btn {
        width: 100%;
        box-sizing: border-box;
    }
}

/* 購物車 / 結帳頁點數折抵區塊 */
.twshop-points-redemption-wrapper {
    margin-bottom: 1em;
}
.twshop-points-redemption {
    padding: 0 0 15px;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 15px;
    background: none;
}
.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;
    /* 強制跟主題表單元件同一個高度變數，避免 type="number" 的原生上下箭頭（spinner）
       在部分行動瀏覽器（尤其 iOS Safari）撐高輸入框，導致跟按鈕/主題其他欄位對不齊、
       看起來像是「另外定義」的高度。桌機版原本就沒有明顯落差，這裡統一套用不分斷點。 */
    height: var(--theme-form-field-height, 40px);
    box-sizing: border-box;
}
/* 隱藏 number input 原生的上下箭頭：這組箭頭在不同瀏覽器/系統的預設尺寸不一致，
   是實際撐高輸入框、讓它看起來跳出主題風格的主因；點數只需要文字輸入，不需要這組控制項。 */
.twshop-points-redemption .twshop-points-input-row input[type="number"]::-webkit-outer-spin-button,
.twshop-points-redemption .twshop-points-input-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.twshop-points-redemption .twshop-points-input-row input[type="number"] {
    -moz-appearance: textfield;
}
.twshop-points-notice {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--theme-text-color, #666);
    opacity: 0.85;
}

/* 手機版：輸入框與按鈕改為上下堆疊，只調整排列方向，寬度交給主題表單元件的預設 100% 寬，
   不額外覆寫 width，避免跟主題自己的輸入框樣式打架。
   已用實際頁面（Chrome DevTools 量測）驗證找到根因並修正：input 原本的 `flex: 1`
   在橫向排列（flex-direction: row）時只影響「寬度」沒問題，但改成 column 後，
   flex:1 等同 flex-basis:0%，這時 flex-basis 影響的是主軸＝「高度」，會讓 input
   的高度被 flex 排版邏輯搶去（實測整個崩塌到 20px），而旁邊沒有 flex:1 的按鈕仍是
   正常的 40px，兩者高度對不齊，就是「輸入框在手機版另外定義」的真正原因。
   這裡改回 `flex: none`，讓 input 在直排時维持自己原本的 height（40px）。 */
@media screen and (max-width: 480px) {
    .twshop-points-redemption .twshop-points-input-row {
        flex-direction: column;
        align-items: stretch;
    }
    .twshop-points-redemption .twshop-points-input-row input {
        flex: none;
    }
}

/* 會員中心：點數單一卡片 — 餘額置頂最醒目，其餘規則以 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;
}