/* ============================================================================ WPC AutoParts — หน้าบัญชีของฉัน (Phase C1.2) โหลดเฉพาะ is_account_page() · handle `wpc-account` 🔴 namespace `wpc-acct-*` ทั้งไฟล์โดยตั้งใจ CSS 45,736 ไบต์ใน Customizer (DB, พิมพ์ท้าย เสมอ) จับคลาสเก่าไว้ด้วย `!important` ทุกกฎ 6 ส่วน (PROFILE CARD / NAV / CONTENT / ORDERS TABLE / BUTTONS & FORMS / MOBILE) — พอชื่อไม่ชนกันก็ไม่ต้องแข่ง specificity เลย และไม่ต้องแตะ DB (DB = มือตะวัน) ⚠️ กฎที่ต้องสู้จริงมีเฉพาะคลาสของ WooCommerce เองที่เลี่ยงชื่อไม่ได้ — อยู่ท้ายไฟล์ ⚠️ จุดตัดมือถือใช้ 768.98px ให้ตรงธีม (DB ใช้ 768px — มีช่วงคาบเกี่ยว 0.98px) ⚠️ ตัวแปรสีมีค่าสำรองเสมอ เพราะ --wpc ถูกประกาศไว้ใน Customizer CSS (DB) ถ้าวันหลังก้อนนั้นถูกล้าง หน้านี้ต้องไม่กลายเป็นขาวดำ ========================================================================= */ .wpc-acct { --acct: var(--wpc, #ec5a31); --acct-dk: var(--wpc-dk, #c94520); --acct-lt: var(--wpc-lt, #fff3ef); --acct-line: #f0f0f0; --acct-ink: #1a1a1a; --acct-mute: #888; display: flex; flex-direction: column; gap: 14px; font-family: Prompt, Arial, sans-serif; color: var(--acct-ink); } /* ── การ์ดโปรไฟล์ ─────────────────────────────────────────────────────── */ .wpc-acct-profile { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #eaeaea; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 4px 14px rgba(17, 17, 17, 0.06); color: #222; /* กันเบราว์เซอร์บังคับโหมดมืดแล้วสีเพี้ยน (บทเรียน §15 ข้อ 9) */ color-scheme: only light; } .wpc-acct-profile__avatar img { display: block; width: 56px; height: 56px; border: 1px solid #eaeaea; border-radius: 50%; background: #fdece3; object-fit: cover; } .wpc-acct-profile__text { flex: 1 1 auto; min-width: 0; } .wpc-acct-profile__hello { color: #6b6b6b; font-size: 12px; line-height: 1.25; } .wpc-acct-profile__name { margin-top: 1px; overflow-wrap: anywhere; color: #222; font-weight: 600; font-size: 16px; line-height: 1.35; } .wpc-acct-profile__meta { margin-top: 3px; overflow-wrap: anywhere; color: #6b6b6b; font-size: 12px; line-height: 1.4; } /* ป้าย "เชื่อมต่อ LINE แล้ว" — เดิมเป็นสีขาวโปร่งบนการ์ดส้ม ตอนนี้การ์ดเป็นสีขาวแล้ว */ .wpc-acct-profile__tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 2px 9px; border: 1px solid #d7efd9; border-radius: 20px; background: #f3fbf3; color: #2e7d32; -webkit-text-fill-color: #2e7d32; font-size: 11px; } .wpc-acct-profile__dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; } /* ปุ่ม "แก้ไขข้อมูล" ตาม prototype — ปุ่มเส้นขอบบาง ไม่ใช่ปุ่มทึบ */ .wpc-acct-profile__edit { flex-shrink: 0; align-self: center; padding: 6px 12px; border: 1px solid #eaeaea; border-radius: 8px; color: #3a3a3a; font-weight: 500; font-size: 12px; line-height: 1.4; white-space: nowrap; text-decoration: none; } .wpc-acct-profile__edit:hover { background: #f7f7f7; color: var(--acct, #ec5a31); } /* ── หัวข้อแต่ละส่วน ──────────────────────────────────────────────────── */ .wpc-acct-section { background: #fff; border: 1px solid var(--acct-line); border-radius: 14px; padding: 14px; } .wpc-acct-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .wpc-acct-section__title { font-size: 15px; font-weight: 700; } .wpc-acct-section__more { font-size: 13px; color: var(--acct); text-decoration: none; flex-shrink: 0; } .wpc-acct-section__more::after { content: " ›"; } /* ── แถบสถานะ 4 ช่อง ─────────────────────────────────────────────────── */ /* [28 ส.ค.] ไทล์สถานะมี 3 โหมดตาม prototype (วัดจากของจริง ไม่ได้เดา): มือถือ ≤767 flex + overflow-x:auto · ช่องกว้างตายตัว 72px → **เลื่อนแนวนอน ไม่บีบ** แท็บเล็ต 768–1199 grid 3 คอลัมน์ → 2 แถว แถวละ 3 จอใหญ่ ≥1200 แถวเดียว 6 ช่อง ยืดเท่ากัน (prototype ใช้ 64px บนมือถือ แต่ป้ายไทยของเรายาวกว่า จึงเป็น 72px) */ .wpc-acct-tabs { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .wpc-acct-tabs::-webkit-scrollbar { display: none; } .wpc-acct-tabs > .wpc-acct-tab { flex: 0 0 72px; /* ไม่ยืด ไม่หด — ตัวที่เกินขอบให้เลื่อนเอา */ min-width: 0; } @media (min-width: 768px) and (max-width: 1199.98px) { .wpc-acct-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; overflow-x: visible; } .wpc-acct-tabs > .wpc-acct-tab { flex: initial; } } @media (min-width: 1200px) { .wpc-acct-tabs { overflow-x: visible; } .wpc-acct-tabs > .wpc-acct-tab { flex: 1 1 0; } } .wpc-acct-tab { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 2px; text-decoration: none; color: var(--acct-ink); border-radius: 10px; transition: background 0.15s; } .wpc-acct-tab:hover { background: var(--acct-lt); } /* prototype: ไอคอน 19px อยู่กลางวงกลมส้มอ่อน 40px · ป้ายเลขเกาะมุมขวาบนของวงกลม */ .wpc-acct-tab__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff3ec; color: var(--acct); line-height: 0; } /* ตัวสร้างไอคอนพ่น width/height 24 มาใน attribute — ต้องทับด้วย CSS */ .wpc-acct-tab__icon > svg { width: 19px; height: 19px; } .wpc-acct-tab__badge { position: absolute; top: -6px; right: -8px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e53935; border: 1.5px solid #fff; color: #fff; -webkit-text-fill-color: #fff; font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; color-scheme: only light; } .wpc-acct-tab__label { font-size: 11.5px; text-align: center; line-height: 1.3; overflow-wrap: anywhere; } /* ── การ์ดออเดอร์ ────────────────────────────────────────────────────── */ .wpc-acct-orders { display: flex; flex-direction: column; gap: 10px; } .wpc-acct-order-card { border: 1px solid var(--acct-line); border-radius: 12px; padding: 12px 14px; background: #fff; } .wpc-acct-order-card__head { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #f5f5f5; } .wpc-acct-order-card__no { font-size: 13.5px; font-weight: 600; } .wpc-acct-order-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; } .wpc-acct-order-card__label { color: var(--acct-mute); flex-shrink: 0; } .wpc-acct-order-card__value { text-align: right; min-width: 0; } .wpc-acct-order-card__foot { display: flex; justify-content: flex-end; margin-top: 10px; } .wpc-acct-btn { display: inline-block; padding: 7px 18px; border: 1.5px solid var(--acct); border-radius: 8px; background: #fff; color: var(--acct); font-size: 13px; font-weight: 600; text-decoration: none; } .wpc-acct-btn:hover { background: var(--acct); color: #fff; } /* ── ป้ายสถานะ ───────────────────────────────────────────────────────── */ .wpc-acct-pill { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; color-scheme: only light; } .wpc-acct-pill--done { background: #eaf3de; color: #3b6d11; } .wpc-acct-pill--active { background: #e6f1fb; color: #185fa5; } /* "กำลังจัดส่ง" ต้องมีสีของตัวเอง — ถ้าใช้เขียวเหมือน "จัดส่งแล้ว" ลูกค้าแยกไม่ออก เวลาเห็น 2 สถานะพร้อมกันในรายการเดียว (เจอตอนเทสจริงบน staging 12 ส.ค.) */ .wpc-acct-pill--ship { background: #e8e6f7; color: #40308f; } .wpc-acct-pill--wait { background: #faeeda; color: #854f0b; } .wpc-acct-pill--dead { background: #fcebeb; color: #a32d2d; } /* ── แถบบอกว่ากำลังกรอง ──────────────────────────────────────────────── */ .wpc-acct-filter { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding: 8px 12px; background: var(--acct-lt); border: 1px solid var(--acct); border-radius: 10px; font-size: 13px; } .wpc-acct-filter__clear { color: var(--acct); text-decoration: underline; flex-shrink: 0; } /* ── ยังไม่มีออเดอร์ ─────────────────────────────────────────────────── */ .wpc-acct-empty { padding: 22px 14px; text-align: center; color: var(--acct-mute); font-size: 13.5px; } /* ── จอใหญ่จริง (คอลัมน์เนื้อหา ≥ ~770px) ────────────────────────────── */ /* 1150 มาจากการวัด ไม่ได้ตั้งลอย ๆ: คอลัมน์เนื้อหาจะกลับมากว้างเกิน 738px (เท่าที่จอ 768 เคยได้) ก็ต่อเมื่อจอกว้างประมาณ 1120 ขึ้นไป — เผื่อไว้ที่ 1150 */ @media (min-width: 1150px) { .wpc-acct { gap: 16px; } .wpc-acct-profile { padding: 16px; } .wpc-acct-profile__name { font-size: 17px; } .wpc-acct-section { padding: 18px; } .wpc-acct-tab__label { font-size: 13px; } .wpc-acct-order-card__row { font-size: 13.5px; } } /* ============================================================================ สู้กับกฎที่จับคลาสของ WooCommerce เอง (เลี่ยงชื่อไม่ได้) ทุกกฎในบล็อกนี้ต้องชนะ Customizer CSS ที่เป็น !important — ยกระดับ specificity ให้**ชนะจริง** ไม่ใช่แค่เท่ากัน (บทเรียน 3G ข้อ 1) ========================================================================= */ /* DB: `.woocommerce-MyAccount-content { padding: 0 !important }` — ไม่ขัดกัน ปล่อยไว้ */ /* กันกฎเหมารวม `.shop_table` ของ Customizer มาแต่งกล่องเราเป็นการ์ดซ้อนการ์ด (กฎตัวเดียวกับที่เคยทำ cart/checkout ชิดขอบ — CLAUDE.md §13) */ body.woocommerce-account .woocommerce-MyAccount-content .wpc-acct-order-card, body.woocommerce-account .woocommerce-MyAccount-content .wpc-acct-section { box-shadow: none !important; } /* ============================================================================ สมุดที่อยู่ (Phase C1.1) ========================================================================= */ .wpc-addr { --acct: var(--wpc, #ec5a31); --acct-dk: var(--wpc-dk, #c94520); --acct-lt: var(--wpc-lt, #fff3ef); --acct-line: #f0f0f0; --acct-mute: #888; font-family: Prompt, Arial, sans-serif; color: #1a1a1a; } .wpc-abook-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .wpc-abook-head h2 { font-size: 17px; font-weight: 700; margin: 0; } .wpc-abook-add, .wpc-abook-back { font-size: 13px; color: var(--acct); text-decoration: none; flex-shrink: 0; } .wpc-abook-notice { padding: 10px 14px; margin-bottom: 12px; border-radius: 10px; background: #eaf7ef; border: 1px solid #a8d5b9; font-size: 13px; color-scheme: only light; } .wpc-abook-notice.is-error { background: #fcebeb; border-color: #e8a5a5; color: #a32d2d; } .wpc-abook-empty { padding: 22px 14px; text-align: center; color: var(--acct-mute); font-size: 13.5px; border: 1px dashed #ddd; border-radius: 12px; } /* ── การ์ดที่อยู่ ─────────────────────────────────────────────────────── */ .wpc-abook-list { display: flex; flex-direction: column; gap: 10px; } .wpc-abook-card { border: 1px solid var(--acct-line); border-radius: 12px; padding: 12px 14px; background: #fff; } .wpc-abook-card.is-default { border-color: var(--acct); } .wpc-abook-card__chips { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; } .wpc-abook-chip { display: inline-block; padding: 2px 9px; border-radius: 20px; background: #f4f4f4; color: #555; font-size: 11px; color-scheme: only light; } .wpc-abook-chip--main { background: var(--acct); color: #fff; -webkit-text-fill-color: #fff; } .wpc-abook-card__who { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .wpc-abook-card__name { font-weight: 600; font-size: 14px; } .wpc-abook-card__phone { color: var(--acct-mute); font-size: 13px; } .wpc-abook-card__text { margin-top: 5px; font-size: 13px; line-height: 1.55; color: #444; } .wpc-abook-card__acts { display: flex; gap: 16px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #f5f5f5; } .wpc-abook-act { font-size: 13px; color: var(--acct); text-decoration: none; } .wpc-abook-act--del { color: #c0392b; } /* ── ฟอร์ม ───────────────────────────────────────────────────────────── */ .wpc-abook-form__group { background: #fff; border: 1px solid var(--acct-line); border-radius: 12px; padding: 14px; margin-bottom: 12px; } .wpc-abook-form__group h3 { font-size: 14px; font-weight: 700; margin: 0 0 10px; } .wpc-abook-field { margin: 0 0 10px; } .wpc-abook-field:last-child { margin-bottom: 0; } .wpc-abook-field label { display: block; font-size: 13px; margin-bottom: 4px; color: #444; } .wpc-abook-field abbr { color: var(--acct); text-decoration: none; border: 0; } .wpc-abook-field input, .wpc-abook-field select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; color-scheme: only light; } .wpc-abook-field input:focus, .wpc-abook-field select:focus { border-color: var(--acct); box-shadow: 0 0 0 3px rgba(236, 90, 49, 0.1); outline: none; } .wpc-abook-types { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .wpc-abook-type { cursor: pointer; } .wpc-abook-type input { position: absolute; opacity: 0; pointer-events: none; } .wpc-abook-type span { display: inline-block; padding: 7px 16px; border: 1.5px solid #ddd; border-radius: 20px; font-size: 13px; color-scheme: only light; } .wpc-abook-type input:checked + span { border-color: var(--acct); background: var(--acct-lt); color: var(--acct); font-weight: 600; } .wpc-abook-toggle { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; } .wpc-abook-toggle input { width: 18px; height: 18px; } /* 🔴 ผูก body+button ให้ชนะกฎปุ่มของธีม — ไม่งั้นปุ่มหลักกลายเป็นพื้นส้มอ่อนตัวหนังสือดำ (เหตุผลเต็มอยู่ที่หัวข้อ dialog รีวิวด้านล่าง · เทส tests/test-theme-button-override.php) */ body.woocommerce-account button.wpc-abook-submit { width: 100%; height: 48px; min-height: 0; padding: 0 16px; border: 0; border-radius: 10px; background-color: var(--acct); color: #fff; -webkit-text-fill-color: #fff; font-size: 15px; font-weight: 700; font-family: inherit; line-height: 1.2; text-transform: none; cursor: pointer; color-scheme: only light; } body.woocommerce-account button.wpc-abook-submit:hover { background-color: var(--acct-dk); } /* ระหว่างรอฐานข้อมูลที่อยู่โหลด — บอกให้รู้ว่ายังกดไม่ได้ ไม่ใช่ค้าง */ .wpc-abook-form:not(.is-ready):not(.is-offline) select { opacity: 0.55; } @media (min-width: 768.99px) { .wpc-abook-form__group { padding: 18px; } .wpc-abook-field input, .wpc-abook-field select { height: 42px; } body.woocommerce-account button.wpc-abook-submit { width: auto; min-width: 220px; padding: 0 32px; } } /* ============================================================ สมุดที่อยู่: ฟอร์มเด้งเป็น dialog (Phase C2) ตะวันขอตามภาพ Shopee — จอคอมกล่องลอย · มือถือเต็มจอ ปุ่มยืนยันตรึงล่าง ============================================================ */ body.woocommerce-account dialog.wpc-abook-dialog { width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 64px); padding: 0; border: 0; border-radius: 12px; background: #fff; color: inherit; overflow: hidden auto; color-scheme: only light; /* กัน force-dark ของ Android Chrome กลับสีจนอ่านไม่ออก */ } body.woocommerce-account dialog.wpc-abook-dialog::backdrop { background: rgba(0, 0, 0, 0.45); } /* dialog ที่ยังไม่ถูกเปิด ต้องไม่กินที่บนหน้า (เบราว์เซอร์เก่าที่ไม่รู้จัก ) */ body.woocommerce-account dialog.wpc-abook-dialog:not([open]) { display: none; } body.wpc-dialog-open { overflow: hidden; } .wpc-abook-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #f0f0f0; position: sticky; top: 0; background: #fff; z-index: 2; } .wpc-abook-dialog__head h3 { margin: 0; font-size: 16px; font-weight: 700; } .wpc-abook-dialog__close { font-size: 18px; line-height: 1; color: var(--acct-mute); text-decoration: none; padding: 4px 8px; } body.woocommerce-account .wpc-abook-dialog .wpc-abook-form { padding: 16px 18px 0; } /* ---------- กล่องแปะข้อมูลที่อยู่ ---------- */ .wpc-abook-paste { background: var(--acct-lt); border: 1px dashed var(--acct); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; color-scheme: only light; } .wpc-abook-paste > label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 2px; } .wpc-abook-paste__hint { margin: 0 0 8px; font-size: 12.5px; color: var(--acct-mute); line-height: 1.5; } .wpc-abook-paste__text { width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; resize: vertical; background: #fff; } body.woocommerce-account button.wpc-abook-paste__go { margin-top: 8px; height: 38px; min-height: 0; padding: 0 18px; border: 1.5px solid var(--acct); border-radius: 8px; background-color: #fff; color: var(--acct); -webkit-text-fill-color: var(--acct); font-size: 13.5px; font-weight: 700; font-family: inherit; line-height: 1.2; text-transform: none; cursor: pointer; color-scheme: only light; } body.woocommerce-account button.wpc-abook-paste__go:disabled { opacity: 0.6; cursor: default; } .wpc-abook-paste__msg { display: block; margin-top: 8px; font-size: 12.5px; color: var(--acct-mute); } /* ---------- แถวปุ่มท้ายฟอร์ม ---------- */ .wpc-abook-form__actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 14px 0 18px; background: #fff; } .wpc-abook-cancel { font-size: 14px; color: var(--acct-mute); text-decoration: none; white-space: nowrap; } body.woocommerce-account .wpc-abook-form__actions button.wpc-abook-submit { width: auto; min-width: 180px; padding: 0 28px; } @media (max-width: 768.98px) { body.woocommerce-account dialog.wpc-abook-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; } /* ปุ่มยืนยันเห็นตลอดโดยไม่ต้องเลื่อน (ตามภาพมือถือของ Shopee) */ body.woocommerce-account .wpc-abook-dialog .wpc-abook-form__actions { position: sticky; bottom: 0; padding: 12px 0 14px; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08); } body.woocommerce-account .wpc-abook-form__actions button.wpc-abook-submit { flex: 1; min-width: 0; } } /* ============================================================ หน้าคำสั่งซื้อแบบ marketplace (Phase C2) 7 แท็บเลื่อนแนวนอน + การ์ดที่มีรูปสินค้า + ปุ่ม 3 ตัว ============================================================ */ /* [27 ส.ค.] เดิมที่นี่มีกฎ "แถวเลื่อนแนวนอนเมื่อมี 5 ช่องขึ้นไป" ไว้รองรับ 7 แท็บบนหน้า รายการคำสั่งซื้อ — หน้านั้นย้ายไปใช้ชิป (.wpc-acct-chips) แล้ว และหน้าแรกมี 6 ไทล์ ที่ยืดเท่ากันทั้งแถว จึงไม่ต้องมีโหมดเลื่อนอีก */ .wpc-acct-tab.is-on { background: var(--acct-lt); box-shadow: inset 0 -2px 0 0 var(--acct); } .wpc-acct-tab.is-on .wpc-acct-tab__label { color: var(--acct); font-weight: 700; } /* ---------- หัวการ์ด: ป้ายสถานะ + บรรทัดอธิบาย ---------- */ .wpc-acct-order-card__state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .wpc-acct-order-card__hint { font-size: 12.5px; color: var(--acct-mute); } /* ---------- แถวสินค้า ---------- */ .wpc-acct-order-card__items { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-top: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; } .wpc-acct-item { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px; } .wpc-acct-item__img { display: block; width: 56px; height: 56px; } /* 🔴 ธีมตั้ง min-width ให้รูปในหลายที่ ซึ่งชนะ width เสมอ (บทเรียน §15 ข้อ 2) — ล้างทิ้งตรงนี้ */ body.woocommerce-account .wpc-acct-item__img img { width: 56px; min-width: 0; height: 56px; object-fit: cover; border-radius: 0; border: 1px solid #eee; display: block; } .wpc-acct-item__name { font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wpc-acct-item__qty { font-size: 13px; color: var(--acct-mute); white-space: nowrap; } .wpc-acct-item__more { font-size: 12.5px; color: var(--acct-mute); padding-left: 66px; } /* ---------- แถวยอดรวม ---------- */ .wpc-acct-order-card__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 0 4px; } .wpc-acct-order-card__date { font-size: 12.5px; color: var(--acct-mute); } .wpc-acct-order-card__total { font-size: 14px; font-weight: 700; } .wpc-acct-order-card__total .amount, .wpc-acct-order-card__total bdi { color: var(--acct); font-size: 17px; } /* ---------- ปุ่มท้ายการ์ด ---------- */ .wpc-acct-order-card__foot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .wpc-acct-btn--primary { background: var(--acct); border-color: var(--acct); color: #fff; -webkit-text-fill-color: #fff; font-weight: 700; color-scheme: only light; } .wpc-acct-btn--primary:hover { background: var(--acct-dk); border-color: var(--acct-dk); } /* ปุ่มรีวิวเป็น