/**
 * css/checkout-cart.css — หน้า /cart/ + /checkout/ ให้เข้ากับแบรนด์ (เฟส 1)
 *
 * โหลดเฉพาะสองหน้านี้ (ดู includes/woocommerce/checkout-brand.php)
 *
 * ── กฎที่ยึดตลอดทั้งไฟล์ ───────────────────────────────────────────────────
 * 1. **ไม่แตะ markup** — ทุกอย่างทำด้วย CSS + บล็อกที่เพิ่มผ่าน hook เท่านั้น
 *    เพราะธีมแม่ `plant` ปลอมข้อความไทยด้วย `content:` ใน woo-th.css
 *    (หัวข้อ "ที่อยู่ในการจัดส่ง", ข้อความใต้ช่องหมายเหตุ, คำว่า "บาท")
 *    จัดโครงใหม่เมื่อไร ข้อความพวกนั้นหายหรือไปโผล่ผิดที่ทันที
 * 2. **เล็งคลาสเชิงโครงสร้าง ไม่เล็ง id ของช่อง** — prod มีปลั๊กอิน Acowebs
 *    ยุบช่องที่อยู่เหลือช่องเดียว ชุดฟิลด์จึงไม่เหมือน WooCommerce มาตรฐาน
 * 3. ธีมแม่ใช้ **id selector** กับ `#order_review` / `#order_review_heading`
 *    (specificity 1,0,0) → ต้องนำหน้าด้วย `body.woocommerce-checkout` เสมอ
 *    ไม่งั้นแพ้เงียบ ๆ
 * 4. ห้ามแตะคลาสที่ `wc-checkout.js` ใช้ (`.woocommerce-checkout-review-order-table`,
 *    `#place_order`, `.form-row`) — เปลี่ยนได้แค่ "หน้าตา" ห้ามเปลี่ยนโครง
 */

body.woocommerce-cart,
body.woocommerce-checkout {
  --kc-navy: var(--kl-blue, #0B4D8C);
  --kc-gold: var(--kl-gold, #F4B400);
  --kc-gold-soft: #fdf7de;
  --kc-gold-dark: #9c6f00;
  --kc-green: var(--kl-green, #4F772D);
  --kc-green-soft: var(--kl-green-soft, #eaf3de);
  --kc-green-dark: #3b6d11;
  --kc-urg: #c0392b;
  --kc-ink: var(--kl-text, #222);
  --kc-ink-soft: var(--kl-text-soft, #666);
  --kc-ink-faint: #97a4b1;
  --kc-bd: var(--kl-border, #e6edf3);
  --kc-bd-input: #d7e0e8;
  --kc-card: var(--kl-bg, #FAFAF7);
  --kc-panel: #eaf1f8;
  --kc-shadow: 0 4px 14px rgba(4, 80, 147, .05);
  --kc-radius: 14px;
}

/* ── แถบ 3 ขั้น (เพิ่มผ่าน hook) ────────────────────────────────────────── */

.kl-ck-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
/* 🔴 ชื่อคลาสต้องขึ้นต้น `kl-ck-` เสมอ ห้ามใช้ `.kl-steps` / `.kl-step` เฉย ๆ
 * — **Additional CSS ใน Customizer มีคอมโพเนนต์ชื่อนี้อยู่แล้ว** (ชุด
 *   "STEP FLOW" ของหน้าแรก · สำเนาไว้ที่ `docs/additional-css-current.css:805`)
 *   ซึ่งโหลด **ทุกหน้า** และสั่ง `.kl-step{padding:28px 0;display:grid;
 *   border-bottom:...}` → ตอนแรกใช้ชื่อซ้ำ แถบขั้นตอนสูง 82px แทนที่จะเป็น 25px
 *   และผมวินิจฉัยผิดไปรอบหนึ่งว่าเป็น padding ของธีมแม่
 *   ⚠️ Additional CSS อยู่ใน DB ไม่ใช่ในไฟล์ธีม — `grep` ใน repo ไม่เจอ
 *      ต้องเช็ค `docs/additional-css-current.css` ก่อนตั้งชื่อคลาสใหม่เสมอ
 */
.kl-ck-steps .kl-ck-step {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
/* เส้นคั่นระหว่างขั้น — ใช้ ::before ของตัวที่ไม่ใช่ตัวแรก จะได้ไม่ต้องมี markup เพิ่ม */
.kl-ck-steps .kl-ck-step + .kl-ck-step::before {
  content: "";
  width: 22px;
  height: 1px;
  background: #c9d2da;
  display: block;
}
.kl-ck-steps .kl-ck-step span {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--kc-ink-faint);
  background: #fff;
  border: 1px solid var(--kc-bd);
  border-radius: 20px;
  padding: 4px 13px;
  white-space: nowrap;
}
.kl-ck-steps .kl-ck-step.is-done span {
  color: var(--kc-green-dark);
  background: var(--kc-green-soft);
  border-color: transparent;
}
.kl-ck-steps .kl-ck-step.is-now span {
  color: #fff;
  background: var(--kc-navy);
  border-color: var(--kc-navy);
  font-weight: 600;
}

/* ── หัวข้อหน้า: ธีมแม่ทำหัวข้อฟอร์มด้วย ::before — ย้อมสีให้เข้าแบรนด์ ───────
 * ⚠️ ห้ามแตะ `content` ของมัน ปล่อยให้ธีมแม่คุมข้อความไว้เหมือนเดิม
 *    (ถ้าเราเขียนทับ แล้ววันหนึ่งธีมแม่อัปเดต ข้อความจะซ้อนกันหรือหายเงียบ ๆ)
 */
body.woocommerce-checkout .woocommerce-billing-fields > .woocommerce-billing-fields__field-wrapper::before,
body.woocommerce-checkout #order_review_heading {
  font-weight: 800;
  letter-spacing: -.01em;
}
body.woocommerce-checkout .woocommerce-billing-fields > .woocommerce-billing-fields__field-wrapper::before {
  color: var(--kc-navy);
  border-bottom: 2px solid var(--kc-gold);
  padding-bottom: 8px;
  margin-bottom: 1rem;
}

/* ── ช่องกรอก ──────────────────────────────────────────────────────────────
 * เล็งที่ `.form-row` ซึ่งเป็นคลาสที่ WooCommerce ใส่ให้ทุกช่องเสมอ ไม่ว่า
 * ปลั๊กอินจะเพิ่ม/ลบฟิลด์ยังไง
 */
body.woocommerce-checkout .form-row > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--kc-ink);
  margin-bottom: 5px;
  line-height: 1.5;
}
body.woocommerce-checkout .form-row .required,
body.woocommerce-cart .required {
  color: var(--kc-urg);
  text-decoration: none;
}
body.woocommerce-checkout .form-row .optional {
  color: var(--kc-green-dark);
  background: var(--kc-green-soft);
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 11px;
  font-style: normal;
}
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row .select2-container .select2-selection {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kc-ink);
  background: #fff;
  border: 1px solid var(--kc-bd-input);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: none;
}
body.woocommerce-checkout .form-row textarea {
  min-height: 92px;
  resize: vertical;
}
body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus {
  outline: 0;
  border-color: var(--kc-navy);
  box-shadow: 0 0 0 3px rgba(11, 77, 140, .12);
}
/* ช่องที่กรอกไม่ผ่าน — ของเดิมขึ้นขอบแดงจาง มองไม่ค่อยออกบนมือถือ */
body.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .form-row.woocommerce-invalid textarea,
body.woocommerce-checkout .form-row.woocommerce-invalid select {
  border-color: var(--kc-urg);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .10);
}
/* ข้อความช่วยที่ธีมแม่ฉีดไว้ใต้ช่องหมายเหตุ — ทำให้อ่านง่ายขึ้น ไม่แตะข้อความ */
body.woocommerce-checkout #order_comments_field .woocommerce-input-wrapper::before {
  color: var(--kc-ink-faint);
}

/* คำใบ้ใต้ช่อง (ธีมแม่สั่ง placeholder{color:transparent} ทุกช่อง เลยต้อง
   ใส่คำใบ้ที่ `description` แทน — ดู includes/woocommerce/checkout-fields.php) */
body.woocommerce-checkout .form-row .description {
  display: block;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--kc-ink-faint);
  background: none;
  border: 0;
  padding: 0;
  margin: 4px 0 0;
}
body.woocommerce-checkout .form-row .description::before { display: none }

/* ── ช่องประเทศ ────────────────────────────────────────────────────────────
 * ร้านขายในไทยอย่างเดียว · **ไม่ลบฟิลด์ทิ้ง** เพราะ dropdown "จังหวัด" ผูกกับมัน
 * ผ่าน `country_field` — ลบแล้วจังหวัดจะกลายเป็นช่องพิมพ์เปล่าแทนรายการให้เลือก
 * → ซ่อนแทน · ดู includes/woocommerce/checkout-fields.php
 */
body.woocommerce-checkout .form-row.kl-ck-hide { display: none !important }

/* select2 ของช่องจังหวัดต้องสูงเท่าช่องอื่น ไม่งั้นอยู่แถวเดียวกันแต่คนละความสูง */
body.woocommerce-checkout .form-row .select2-container--default .select2-selection--single{
  height: auto;
  min-height: 46px;
  border: 1px solid var(--kc-bd-input);
  border-radius: 8px;
  padding: 6px 2px;
}
body.woocommerce-checkout .form-row .select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 100%;
}

/* ── กล่องคูปอง: ของเดิมเป็นแถบเทาก้อนใหญ่อยู่บนสุด ─────────────────────── */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: #fff;
  border: 1px solid var(--kc-bd);
  border-top: 1px solid var(--kc-bd);
  border-radius: 10px;
  color: var(--kc-ink-soft);
  font-size: 13.5px;
  padding: 11px 14px;
  box-shadow: none;
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
  color: var(--kc-ink-faint);
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--kc-navy);
  font-weight: 600;
}

/* ── การ์ดสรุปคำสั่งซื้อ (ธีมแม่ให้ขอบเขียว 3px — เปลี่ยนเป็น navy) ────────── */
body.woocommerce-checkout #order_review_heading {
  background: var(--kc-navy);
  border-color: var(--kc-navy);
  color: #fff;
  font-size: 16px;
  padding: 11px 18px;
}
body.woocommerce-checkout #order_review {
  border-color: var(--kc-navy);
  background: var(--kc-card);
  box-shadow: var(--kc-shadow);
}
body.woocommerce-checkout #order_review .shop_table th,
body.woocommerce-checkout #order_review .shop_table td {
  font-size: 14px;
  color: var(--kc-ink-soft);
  border-color: var(--kc-bd);
}
body.woocommerce-checkout #order_review .shop_table .product-name {
  color: var(--kc-ink);
  line-height: 1.6;
}
body.woocommerce-checkout #order_review .shop_table .order-total th,
body.woocommerce-checkout #order_review .shop_table .order-total td {
  color: var(--kc-navy);
  font-weight: 800;
  font-size: 15px;
}
body.woocommerce-checkout #order_review .woocommerce-shipping-totals td {
  color: var(--kc-green-dark);
  font-weight: 600;
}

/* ── ตัวเลือกวิธีชำระเงิน → การ์ดที่กดเลือกได้ ────────────────────────────── */
body.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}
body.woocommerce-checkout #payment ul.payment_methods {
  border: 0;
  padding: 0;
  margin: 0 0 12px;
}
/* ⚠️ ธีมแม่วาง radio เป็น `position:absolute;left:0;top:6px` โดยคิดจาก
   `padding-left:20px` ของมันเอง — พอเราเปลี่ยน padding วงกลมจะไปทับตัวหนังสือ
   (วัดจริง: radio อยู่ที่ 2px แต่ label เริ่มที่ 14px = ซ้อนกัน)
   → เว้นที่ซ้ายให้พอ แล้วย้าย radio เข้ามาเองให้ตรงกัน */
body.woocommerce-checkout #payment ul.payment_methods > li {
  list-style: none;
  background: #fff;
  border: 1px solid var(--kc-bd-input);
  border-radius: 10px;
  padding: 12px 14px 12px 40px;
  margin: 0 0 8px;
  position: relative;
}
body.woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"] {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--kc-navy);
}
body.woocommerce-checkout #payment ul.payment_methods > li label {
  font-size: 14px;
  font-weight: 600;
  color: var(--kc-ink);
  display: inline;
}
/* ขอบหนาเมื่อถูกเลือก — `:has()` เป็นของเสริม เบราว์เซอร์เก่าได้การ์ดธรรมดา
   ซึ่งยังอ่านออกเพราะวงกลม radio บอกอยู่แล้ว ไม่ใช่ของที่ขาดไม่ได้ */
body.woocommerce-checkout #payment ul.payment_methods > li:has(input:checked) {
  border: 2px solid var(--kc-navy);
  padding: 11px 13px 11px 39px; /* ลบ 1px ทุกด้าน ชดเชยขอบที่หนาขึ้น การ์ดจะได้ไม่ขยับ */
}
body.woocommerce-checkout #payment ul.payment_methods > li:has(input:checked) label {
  color: var(--kc-navy);
}
/* padding-left ไม่ต้องมี เพราะ `li` เว้นที่ให้ radio ไว้แล้ว 40px */
body.woocommerce-checkout #payment .payment_box {
  background: transparent;
  margin: 7px 0 0;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--kc-ink-soft);
}
body.woocommerce-checkout #payment .payment_box::before {
  display: none;
}
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
  font-size: 12px;
  line-height: 1.7;
  color: var(--kc-ink-faint);
}
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text a {
  color: var(--kc-navy);
}

/* ── ปุ่มสั่งซื้อ ───────────────────────────────────────────────────────────
 * ⚠️ ธีมแม่ `plant` ตั้งสไตล์ `<button>` ไว้แรง (บทเรียนปุ่มทองกลายเป็นเทา
 *    ที่หน้า /agrimix/) → ใช้ selector ที่เจาะจงกว่าและ reset ให้ครบ
 */
body.woocommerce-checkout #order_review .button#place_order,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background: var(--kc-gold);
  color: #412402;
  border: 0;
  border-radius: 10px;
  font-weight: 800;
  text-shadow: none;
  box-shadow: none;
}
body.woocommerce-checkout #order_review .button#place_order:hover,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: #e0a600;
  color: #412402;
}

/* ยอดรวมในแถบปุ่ม — เดสก์ท็อปไม่ต้องโชว์ เพราะการ์ดสรุปอยู่ข้าง ๆ อยู่แล้ว */
body.woocommerce-checkout .kl-ck-total {
  display: none;
}

/* ── ทางออกท้ายหน้า ───────────────────────────────────────────────────────── */
.kl-ck-help {
  background: var(--kc-panel);
  border: 1px solid var(--kc-bd-input);
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  margin: 22px 0 0;
  clear: both;
}
.kl-ck-help-t {
  font-size: 14px;
  font-weight: 700;
  color: var(--kc-navy);
}
.kl-ck-help-d {
  font-size: 12.5px;
  color: var(--kc-ink-soft);
  margin-top: 3px;
}
.kl-ck-help-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 11px;
}
.kl-ck-help .kl-ck-line,
.kl-ck-help .kl-ck-tel {
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 16px;
  text-decoration: none;
}
.kl-ck-help .kl-ck-line {
  background: var(--kc-green);
  color: #fff;
}
.kl-ck-help .kl-ck-tel {
  background: #fff;
  color: var(--kc-navy);
  border: 1px solid var(--kc-navy);
}

/* ── หน้าตะกร้า ────────────────────────────────────────────────────────────
 * เดสก์ท็อป: ของเดิมตารางสินค้าเต็มความกว้าง แล้วกล่องยอดรวมลอยอยู่ขวาล่าง
 * ทำให้ครึ่งซ้ายว่างทั้งแถบ — ดันกล่องยอดขึ้นมาอยู่ข้างตารางแทน
 */
body.woocommerce-cart .woocommerce-cart-form table.shop_table {
  border-color: var(--kc-bd);
  border-radius: var(--kc-radius);
  overflow: hidden;
}
body.woocommerce-cart .woocommerce-cart-form table.shop_table th {
  color: var(--kc-navy);
  font-size: 13px;
}
body.woocommerce-cart .woocommerce-cart-form .product-name a {
  color: var(--kc-navy);
  font-weight: 600;
}
body.woocommerce-cart .cart_totals > h2 {
  color: var(--kc-navy);
  font-weight: 800;
  font-size: 17px;
}
body.woocommerce-cart .cart_totals table.shop_table {
  border-color: var(--kc-bd);
}
body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td {
  color: var(--kc-navy);
  font-weight: 800;
}
body.woocommerce-cart .coupon input.input-text {
  border: 1px solid var(--kc-bd-input);
  border-radius: 8px;
  padding: 9px 12px;
}

@media (min-width: 992px) {
  /* วางตารางสินค้ากับกล่องยอดรวมให้อยู่แถวเดียวกัน
     (ของเดิมกล่องยอดรวม float:right อยู่ใต้ตาราง ครึ่งซ้ายเลยว่าง) */
  body.woocommerce-cart .woocommerce > .woocommerce-cart-form {
    width: 62%;
    float: left;
  }
  /* ⚠️ ธีมแม่ดันกล่องยอดไปทางขวาด้วย `.cart-collaterals{padding-left:60%}`
     ไม่ใช่ความกว้าง → ถ้าไม่ล้าง padding ก่อน `width:35%` จะไม่มีผลเลย
     (box-sizing:border-box ทำให้ padding 60% ใหญ่กว่า width ที่สั่ง กล่องเลย
     กางเป็น 666px ตามเดิม — วัดจริงบน docker) */
  body.woocommerce-cart .woocommerce > .cart-collaterals {
    width: 35%;
    float: right;
    margin: 0;
    padding-left: 0;
  }
  body.woocommerce-cart .woocommerce > .cart-collaterals .cart_totals {
    width: 100%;
    float: none;
    background: var(--kc-card);
    border: 1px solid var(--kc-navy);
    border-radius: var(--kc-radius);
    padding: 16px 18px;
    box-shadow: var(--kc-shadow);
  }
  body.woocommerce-cart .woocommerce::after {
    content: "";
    display: table;
    clear: both;
  }
}

/* ── มือถือ: แถบล่างติดขอบ = ยอดรวม + ปุ่ม (witt เลือกแบบ ก 13 ต.ค. 2569) ───
 * ของเดิมธีมแม่ตรึงเฉพาะ "ปุ่ม" ไว้ที่ `bottom:0` ความสูง 70px แล้วเผื่อที่
 * ด้วย `.site-footer-space{height:70px}` · เราขยายให้ทั้ง `.place-order`
 * เป็นแถบ แล้วคืนปุ่มกลับเป็น static ข้างใน → ได้ยอดรวมขึ้นมาอยู่ด้วย
 * และต้องขยาย `.site-footer-space` ตามความสูงใหม่ ไม่งั้นแถบบังเนื้อหาท้ายหน้า
 */
@media (max-width: 991px) {
  /* 🔴 ห้ามตรึง `.place-order` ทั้งก้อน — ข้างในมีข้อความนโยบายความเป็นส่วนตัว
   *    ที่ WooCommerce ฉีดเข้ามาทาง `woocommerce_review_order_before_submit`
   *    เหมือนกัน (`wc_checkout_privacy_policy_text()`) ลองแล้วแถบสูง 226px
   *    → ตรึง **เฉพาะแถบยอด** ให้ลอยเหนือปุ่มที่ธีมแม่ตรึงไว้อยู่แล้ว
   *      ข้อความนโยบายจึงอยู่ในเนื้อหาตามเดิม ไม่ต้องย้ายไปไหน
   *
   *    ธีมแม่ตั้งปุ่มไว้ `position:fixed;bottom:0;height:70px;width:100%;z-index:900`
   *    แถบยอดจึงต้องอยู่ที่ `bottom:70px` พอดีหัวปุ่ม
   */
  body.woocommerce-checkout .place-order .kl-ck-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 70px;
    z-index: 899;
    margin: 0;
    padding: 8px 16px;
    background: #fff;
    border-top: 1px solid var(--kc-bd);
    box-shadow: 0 -4px 14px rgba(4, 80, 147, .08);
  }
  body.woocommerce-checkout .place-order .kl-ck-total span {
    font-size: 12.5px;
    color: var(--kc-ink-soft);
  }
  body.woocommerce-checkout .place-order .kl-ck-total strong {
    font-size: 17px;
    font-weight: 800;
    color: var(--kc-navy);
  }
  /* ปล่อยให้ธีมแม่ตรึงปุ่มเหมือนเดิม แค่แต่งหน้าตา */
  body.woocommerce-checkout .woocommerce-checkout .place-order .button#place_order {
    font-size: 17px;
    font-weight: 800;
    border-radius: 0;
  }
  /* ธีมแม่เผื่อที่ไว้ 70px (เท่าปุ่ม) — ต้องบวกความสูงแถบยอดเข้าไปด้วย
     ไม่งั้นแถบบังเนื้อหาท้ายหน้า */
  body.woocommerce-checkout .site-footer-space {
    height: 126px; /* ปุ่ม 70 + แถบยอด 48 + หายใจอีก 8 (วัดจริงบนจอ 375px) */
  }
}

@media (max-width: 575px) {
  .kl-ck-steps {
    gap: 4px;
    margin-bottom: 18px;
  }
  .kl-ck-steps .kl-ck-step + .kl-ck-step::before {
    width: 12px;
  }
  .kl-ck-steps .kl-ck-step span {
    font-size: 11.5px;
    padding: 3px 10px;
  }
}