/* ==========================================================================
   選擇我的優惠券彈窗（購物車頁＋結帳頁共用；片 cc-coupon-picker-modal-both-pages；coupon-picker.js）
   ⚠️ 彈窗節點掛在 document.body（CCPM-C06），不在任一頁的券欄裡 ⇒ 樣式必須是全域的、不能掛在 .cart-coupon 之下。
   ⚠️ 前台「全域直角」、字級下限 14px（同 member-coupons.css）。
   ========================================================================== */

.coupon-pick-btn { margin-top: var(--s-2, 8px); }
.coupon-pick-btn[hidden] { display: none; }

.coupon-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.45);
}

.coupon-picker {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    background: var(--bg, #fff);
    color: var(--fg, #303133);
    border-radius: 0;
    outline: none;
    font-size: 16px;
    line-height: 1.6;
}

.coupon-picker__title { margin: 0; padding: 16px 20px; font-size: 18px; font-weight: 600; border-bottom: 1px solid var(--border-light, #ebeef5); }
.coupon-picker__body { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px; }
.coupon-picker__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border-light, #ebeef5); }

.coupon-picker__state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0; text-align: center; }
.coupon-picker__msg { margin: 0; }

.coupon-picker__list { display: grid; gap: 12px; }

.coupon-picker__card {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 12px 16px 12px 20px;
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--bg, #fff);
    border: 1px solid var(--border, #dcdfe6);
    border-left: 8px solid #409EFF;
    border-radius: 0;
    cursor: pointer;
}
.coupon-picker__card:hover { background: var(--fill-200, #fafafa); }
.coupon-picker__card.is-selected { border-color: var(--brand, #303133); border-left-color: var(--brand, #303133); background: var(--brand-soft, #f4f4f5); }
.coupon-picker__card[disabled] { opacity: 0.6; cursor: not-allowed; }

.coupon-picker__discount { font-size: 20px; font-weight: 600; }
.coupon-picker__name { font-weight: 500; overflow-wrap: anywhere; }
.coupon-picker__code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 14px; color: var(--fg-muted, #606266); overflow-wrap: anywhere; }
.coupon-picker__cond, .coupon-picker__date { font-size: 14px; color: var(--fg-muted, #606266); }
.coupon-picker__warning { color: #E6A23C; }