/**
 * WPC Global — กฎที่เดิมโหลด "ทุกหน้า" จาก CSS 5 ไฟล์ checkout (ยกออกมาให้รอดตอน bundle เป็น checkout-only)
 *
 * ไฟล์นี้โหลดทุกหน้า ไม่ผูก WPC_CHECKOUT_V2 — เป็น behaviour parity ล้วน ไม่ใช่ของใหม่
 * (checkout.css/js ผูก V2 + เฉพาะหน้า cart/checkout อยู่ใน checkout-layout.php)
 * enqueue: includes/assets.php
 */

/* ── 1) มินิ-cart drawer ของ WoodMart (โผล่ทุกหน้า) — ยกจาก shipping-responsive.css:507-527 ── */
@media (max-width: 1024px) {
	.cart-widget-side {
		padding-bottom: 65px !important;
	}
	.cart-widget-side .shopping-cart-widget-footer {
		padding-bottom: 10px !important;
	}
	.cart-widget-side .shopping-cart-widget-body {
		max-height: calc(100vh - 240px) !important;
	}
	.cart-widget-side .wd-scroll-content {
		max-height: calc(100vh - 240px) !important;
	}
}

/* ── 2) select2 dropdown ทั้งเว็บ — ยกจาก checkout-superpart-v2.css:181-189
      (คงไว้เพื่อ parity — select2 ใช้ทั้งเว็บ; พิจารณา scope ให้แคบลงภายหลังได้) ── */
.select2-dropdown {
	border-radius: 12px !important;
	border: 1.5px solid #ddd !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
	overflow: hidden !important;
}
.select2-results__option--highlighted {
	background: #e8430a !important;
}

/* ── 3) หน้า /delivery/ (page 2030) — ยกจาก checkout-delivery.css:7-11 + 227-267 ── */
.page-id-2030 .woodmart-title-container .title,
.page-id-2030 h4.title,
.post-2030 .woodmart-title-container h4 {
	color: #ffffff !important;
}

.wpc-shipping-table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.wpc-shipping-table thead tr {
	background: #E84C1E;
	color: white;
}
.wpc-shipping-table th {
	padding: 14px 18px;
	font-weight: 600;
	font-size: 14px;
	text-align: center;
}
.wpc-shipping-table td {
	padding: 12px 18px;
	border-bottom: 1px solid #f0f0f0;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
}
.wpc-shipping-table tbody tr:nth-child(even) {
	background: #fff8f6;
}
.wpc-shipping-table tbody tr:hover {
	background: #ffede8;
}
.wpc-shipping-table tbody tr:last-child td {
	border-bottom: none;
}

/* ==================================================================
 * [3 ส.ค. 3H รอบ 3] ตะกร้าเล็กที่กางจากหัวเว็บ — รูปจัตุรัส ขอบเหลี่ยม
 *
 * ตะวันแจ้ง: "ส่วนที่กดตะกร้าให้ขยายออกมาจากหน้าแรก ก็เป็นขอบมน"
 * วัดของจริงบน prod ก่อนแก้: รูปแสดง 65×48.75 (4:3) · border-radius 6.67px
 *
 * 🔴 **ทำไมอยู่ในไฟล์นี้ ไม่ใช่ checkout.css** — ตะกร้าเล็กโผล่ **ทุกหน้า**
 *    แต่ `checkout.css` ถูก enqueue เฉพาะหน้า cart/checkout → เขียนไว้ที่นั่น
 *    = โค้ดตายบนหน้าแรก (เจอมาแล้วรอบนี้: กฎไม่ทำงาน เพราะไฟล์ไม่ถูกโหลด)
 *    ไฟล์นี้ (`wpc-global`) โหลดทุกหน้า จึงเป็นที่ที่ถูกต้อง
 *
 * ℹ️ ตัวรูปเองแก้ที่ PHP แล้ว (filter `woocommerce_cart_item_thumbnail` → ไซซ์ 1:1)
 *    ตรงนี้แค่จัดกรอบให้เป็นจัตุรัสและเอาขอบมนออก
 *
 * โครง DOM จริง: ul.cart_list > li.mini_cart_item > a.cart-item-image > img
 * ================================================================== */
body .widget_shopping_cart ul.cart_list li.mini_cart_item img,
body ul.woocommerce-mini-cart li.mini_cart_item img {
	width: 65px !important;
	height: 65px !important;
	max-width: 65px !important;
	box-sizing: border-box !important;
	object-fit: contain !important;
	background: #fff !important;
	border-radius: 0 !important;
}

/* ==================================================================
 * [14 ส.ค. C1.3] กล่องชวนรีวิว + แถบคะแนนร้าน
 *
 * 🔴 **อยู่ในไฟล์นี้เพราะโผล่หลายหน้า** — หน้าขอบคุณ (checkout.css โหลด),
 *    หน้าคำสั่งซื้อใน My Account (account.css โหลด) และ shortcode ที่วางที่ไหนก็ได้
 *    เขียนไว้ไฟล์ใดไฟล์หนึ่ง = ตายอีก 2 ที่ (บทเรียน 3H ข้อ 0)
 *
 * ⚠️ ชื่อคลาส `wpc-rev-*` เป็นของใหม่ทั้งชุด — CSS 45KB ใน Customizer ไม่มีคลาสนี้เลย
 *    จึงไม่ต้องแข่ง specificity (แพทเทิร์นเดียวกับ `wpc-acct-*` ใน C1.2)
 * ================================================================== */
.wpc-rev-invite {
	margin: 18px 0;
	padding: 16px;
	border: 1px solid #f0d9cf;
	border-radius: 12px;
	background: #fff8f5;
	color-scheme: only light;
}
.wpc-rev-invite__head {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 600;
	color: #23211f;
	-webkit-text-fill-color: #23211f;
}
.wpc-rev-invite__star {
	color: #f5a623;
	-webkit-text-fill-color: #f5a623;
	font-size: 18px;
	line-height: 1;
}
.wpc-rev-invite__sub {
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: #6d6864;
	-webkit-text-fill-color: #6d6864;
}
.wpc-rev-invite__list {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wpc-rev-invite__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid #eee;
	border-radius: 10px;
	background: #fff;
	text-decoration: none !important;
	box-shadow: none !important;
}
.wpc-rev-invite__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	line-height: 1.4;
	color: #23211f;
	-webkit-text-fill-color: #23211f;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wpc-rev-invite__btn {
	flex: 0 0 auto;
	padding: 8px 14px;
	border-radius: 8px;
	background: #e8430a;
	color: #fff;
	-webkit-text-fill-color: #fff;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
.wpc-rev-invite__item:hover .wpc-rev-invite__btn {
	background: #c9380a;
}

/* แถบคะแนนร้าน — ดาวเทาเต็ม 5 ดวงแล้วทับด้วยดาวส้มตามสัดส่วน */
.wpc-rev-shop {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
	padding: 10px 14px;
	border: 1px solid #eee;
	border-radius: 12px;
	background: #fff;
	color-scheme: only light;
}
.wpc-rev-shop__stars {
	position: relative;
	display: inline-block;
	color: #dcdcdc;
	-webkit-text-fill-color: #dcdcdc;
	font-size: 16px;
	letter-spacing: 1px;
	line-height: 1;
	white-space: nowrap;
}
.wpc-rev-shop__stars-on {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: #f5a623;
	-webkit-text-fill-color: #f5a623;
}
.wpc-rev-shop__score {
	font-size: 16px;
	font-weight: 600;
	color: #23211f;
	-webkit-text-fill-color: #23211f;
}
.wpc-rev-shop__count {
	font-size: 13px;
	color: #6d6864;
	-webkit-text-fill-color: #6d6864;
}

@media (max-width: 768.98px) {
	.wpc-rev-invite__item {
		flex-wrap: wrap;
	}
	.wpc-rev-invite__btn {
		width: 100%;
		text-align: center;
	}
}

/* ปุ่มในกล่องชวนรีวิว — เป็น <button> จึงโดนกฎปุ่มพื้นฐานของธีมเหมือนกัน
   (`:is(.btn,.button,button,…)` specificity (0,1,0) เท่าคลาสเราแล้วพิมพ์ทีหลัง)
   ต้องยกระดับให้ชนะจริง และใช้ `background-color` longhand ให้ตรงกับที่ธีมตั้ง */
button.wpc-rev-invite__btn,
body .wpc-rev-invite button.wpc-rev-invite__btn {
	border: 0;
	min-height: 0;
	line-height: 1.4;
	text-transform: none;
	background-color: #e8430a;
	color: #fff;
	-webkit-text-fill-color: #fff;
	cursor: pointer;
	font-family: inherit;
}

body .wpc-rev-invite button.wpc-rev-invite__btn:hover {
	background-color: #c9380a;
}

/* ปุ่มในกล่องชวนรีวิวไม่ต้องยาวเต็มบรรทัดบนจอคอม
   (`__list` เป็น flex column → ลูกยืดเต็มความกว้างเป็นค่าเริ่มต้น ซึ่งเหมาะกับ
   แถวรายการแบบ `__item` แต่ไม่เหมาะกับปุ่มเดี่ยว)
   มือถือให้เต็มบรรทัดเหมือนเดิม — นิ้วกดง่ายกว่า */
button.wpc-rev-invite__btn {
	align-self: flex-start;
	padding: 10px 24px;
	min-height: 40px;
}

@media ( max-width: 768.98px ) {
	button.wpc-rev-invite__btn {
		align-self: stretch;
		width: 100%;
		text-align: center;
	}
}

/* ============================================================
   [27 ส.ค. 2026] แถบล่างมือถือ — ให้เหลือ "แถบเดียว" ทั้งช่วง ≤ 1024

   วัดจริงบน staging ก่อนแก้: เว็บมีแถบล่าง 2 ตัวซ้อนกัน
     #mobile-bottom-nav (ของเราใน functions.php · z 9999 · 56px · เห็นที่ ≤ 768.98)
     .wd-toolbar        (ของธีม      · z 350  · 55px · เห็นที่ ≤ 1024 · ปุ่มคนละชุด)
   → ที่ ≤ 768 ของเราบังของธีมมิด แต่ที่ 769–1024 ผู้ใช้เห็น "แถบของธีม" ที่มีปุ่มคนละชุด

   🔴 กฎเดิมของแถบเราอยู่ในก้อน Customizer 45KB ใน DB (CLAUDE.md §12) และผูกกับ
      @media (max-width: 768px) ทั้งชุด — ไม่ใช่แค่ display
      พิสูจน์แล้วตอน verify: บังคับแค่ display:flex ที่ 1024 ได้แถบสูง 244px ลอยกลางหน้า
      เพราะ position/height/ขนาด svg ไม่ตามมาด้วย (svg ไม่มีกฎ = กางเป็น 300×150 ตามปริยาย)
      → จึงต้องยกกฎ "ทั้งชุด" มาไว้ที่นี่ ไม่ใช่บรรทัดเดียว

   ค่าทั้งหมดลอกจากก้อน Customizer ตรง ๆ เพื่อให้หน้าตาที่ ≤ 768 ไม่เปลี่ยนเลย
   specificity: `body #mobile-bottom-nav` (0,1,0,1) ชนะ `#mobile-bottom-nav` (0,1,0,0)
   ที่ !important เท่ากัน (บทเรียน §15 ข้อ 1: ยกให้ชนะจริง ไม่ใช่แค่เท่ากัน)

   ↩️ ถ้าจะย้อน: ลบทั้งบล็อกนี้ แถบจะกลับไปเป็นของเราที่ ≤ 768 + ของธีมที่ 769–1024
   ============================================================ */

@media (max-width: 1024px) {
	body #mobile-bottom-nav {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9999;
		display: flex !important;
		align-items: stretch;
		height: 56px;
		border-top: 1px solid #ebebeb;
		background: #fff;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.07);
	}

	body #mobile-bottom-nav .bnav-item {
		position: relative;
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		padding: 6px 0;
		color: #bbb;
		font-size: 10px;
		font-family: Prompt, Arial, sans-serif;
		text-decoration: none;
	}

	body #mobile-bottom-nav .bnav-item.active {
		color: var(--wpc, #ec5a31);
	}

	/* กฎเดิมใน Customizer ใส่ !important ไว้ — ของเราต้อง !important + specificity สูงกว่า */
	body #mobile-bottom-nav .bnav-item svg {
		display: block !important;
		width: 22px !important;
		height: 22px !important;
	}

	body #mobile-bottom-nav .bnav-cart-count {
		position: absolute;
		top: 3px;
		left: calc(50% + 4px);
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 14px;
		height: 14px;
		padding: 0 3px;
		border: 1.5px solid #fff;
		border-radius: 7px;
		background: var(--wpc, #ec5a31);
		color: #fff;
		font-weight: 700;
		font-size: 8px;
	}

	/* แถบของธีมที่ซ้อนอยู่ข้างหลัง — ที่ ≤ 768 ถูกบังมิดอยู่แล้ว ที่ 769–1024 คือตัวที่โผล่แทน */
	body .wd-toolbar {
		display: none !important;
	}
}

/* ============================================================
   🔴🔴 [1 ก.ย. 2026] footer ถูกตั้งให้ "ทับขึ้นมา 150px" → กินคลิกของเนื้อหาท้ายหน้า

   ที่มา: ตะวันแจ้งว่าบนมือถือ หน้า /my-account/ และ /my-account/orders/ กดปุ่ม
   ดูรายละเอียด / ให้คะแนน / ติดต่อร้าน / ซื้ออีกครั้ง ไม่ได้เลย

   ต้นเหตุ (พิสูจน์บน staging ครบวงจร ไม่ใช่เดา):
     footer เป็น Elementor template post 128 · container `df2c24e` ตั้งค่าไว้ว่า
         .elementor-128 .elementor-element.elementor-element-df2c24e { --margin-top: -150px }
     = กล่อง footer เริ่มสูงกว่าตำแหน่งจริง 150px **ทุกหน้า ทุกความกว้าง**
     และ footer เป็น `position: relative` → มันวาดทับและ **รับคลิกแทน** เนื้อหาที่อยู่ข้างล่าง
     ในโซนนั้นมี `a.wd-info-box-link.wd-fill` (ลิงก์เต็มใบของกล่อง Right Parts ฯลฯ) รออยู่ด้วย

   ทำไมเพิ่งเจอ: หน้าที่ยาว (ร้านค้า/สินค้า) ท้ายหน้าเป็นที่ว่าง โซนทับเลยไม่โดนอะไร
   → ยิงทดสอบแล้ว /shop/ = โดน 0 ปุ่ม · หน้า /cart/ ตอนว่าง = ปุ่ม "กลับสู่หน้าร้านค้า" กดไม่ได้
   ⇒ เป็นปัญหาของ **หน้าที่เนื้อหาสั้น** ไม่ใช่เฉพาะหน้าบัญชี

   control test บน staging: วางปุ่มทดสอบท้ายเนื้อหา →
     ก่อนแก้ `elementFromPoint` คืน `div.e-con-inner` ของ footer (กดไม่ได้)
     ตั้ง margin-top:0 → คืนตัวปุ่มเอง (กดได้) → คืนค่าเดิม → กดไม่ได้อีก

   ขอบเขตที่แก้: **เฉพาะหน้าที่ปลั๊กอินเราดูแล** (บัญชี · ตะกร้า · ชำระเงิน)
   ไม่แตะหน้าแรก/ร้านค้า/สินค้า เพื่อไม่ให้หน้าตาส่วนอื่นของเว็บเปลี่ยนโดยไม่ได้ตั้งใจ
   ⚠️ กฎ Elementor เป็น (0,3,0) สูงกว่าของเรา → **ต้องมี !important** ถึงจะชนะ
      (ล้มทั้งตัวแปร `--margin-top` และ `margin-top` เผื่อ Elementor เปลี่ยนวิธีอ่านค่า)
   ============================================================ */

footer.wd-negative-gap {
	--margin-top: 0px !important;
	margin-top: 0 !important;
}

/* ============================================================
   [1 ก.ย. 2026] ซ่อนแถบ Right Parts / Right Price / Fast Delivery / 40 Year Of Service

   คำสั่งลูกค้า (คุณกานต์ ผ่านเหมี่ยว 31 ส.ค.): "ฝากปิดไปก่อนได้เลยค่ะ และเป็นพื้นหลังตามที่ส่งไปค่ะ"
   → รอบนี้ทำแค่ "ปิด" · พื้นหลังตัวใหม่ยังไม่ได้ไฟล์ ทำทีหลัง

   ⚠️ บนมือถือแถบนี้เหลือโชว์แค่กล่องเดียว ("40 Year Of Service") เพราะอีก 3 กล่องติด
      คลาส elementor-hidden-mobile ของ Elementor อยู่แล้ว — ที่ลูกค้าเห็นว่า "แปลก ๆ" คืออาการนี้

   🔴 ผูกกับ **ชื่อ widget** (wd_infobox) ไม่ใช่ Elementor element id — id เปลี่ยนได้เมื่อแก้ในหน้า
      Elementor (บทเรียนเดียวกับที่ซ่อน accordion หน้าตะกร้าใน 3G)
   🔴 ซ่อน **ทั้ง container** ไม่ใช่ซ่อนทีละกล่อง — ถ้าซ่อนแค่แถวข้างในจะเหลือกล่องเปล่าสูง 82px
      ตรวจแล้วว่า `footer.wd-negative-gap` ตัวนี้มีแค่แถบนี้อย่างเดียว (8 widget = infobox 4 + text 4)
      ส่วน **footer จริง** ของเว็บคือ `footer.wd-footer.footer-container` (โลโก้/เมนู/copyright) ไม่ถูกแตะ
   ℹ️ ผูก `:has(.elementor-widget-wd_infobox)` ไว้ด้วย → ถ้าวันหลังเอาแถบนี้ออกแล้วใส่ของใหม่แทน
      กฎนี้จะเลิกทำงานเอง ไม่ไปซ่อนของใหม่ทิ้ง
   ℹ️ ไม่แตะ DB — เอากลับมาแค่ลบบล็อกนี้ทิ้ง
   ============================================================ */

footer.wd-negative-gap:has( .elementor-widget-wd_infobox ) {
	display: none !important;
}

/* ============================================================
   [1 ก.ย. 2026] คืนระยะหายใจให้หัว footer หลังปิดแถบ info box

   ตะวันแจ้ง: บนจอคอม "บริการลูกค้า / นโยบายและข้อตกลง / ติดต่อเรา" ชิดขอบบนเกินไป

   เหตุ: `.main-footer` ของธีมตั้ง padding-top เป็น 0 มาแต่เดิม — เมื่อก่อนไม่มีใครเห็นปัญหา
   เพราะแถบ info box (สูง ~150–274px) กันที่ไว้ให้อยู่แล้ว พอปิดแถบไป ระยะเลยเหลือ **0px จริง ๆ**
   (วัดบน staging: ท้ายเนื้อหา → ขอบบน footer → หัวข้อ = 0 ทั้งคู่)
   และพื้นหลังเนื้อหาเป็นเทา #f6f6f6 ส่วน footer เป็นขาว → รอยต่อเห็นชัด หัวข้อเลยดูแปะขอบ

   ระยะที่เลือก: 40px จอคอม / 28px มือถือ — อิงจังหวะของ footer เอง
   (แถบ copyright ใช้ padding 20px บน-ล่าง · 40 = สองเท่าของจังหวะนั้น)
   ⚠️ ผูกกับ `footer.wd-footer` ตัวจริงเท่านั้น ไม่ใช่ `footer` เปล่า ๆ ที่จะไปโดน container อื่นด้วย
   ============================================================ */

footer.wd-footer .main-footer {
	padding-top: 40px;
}

@media ( max-width: 768.98px ) {
	footer.wd-footer .main-footer {
		padding-top: 28px;
	}
}