/**
 * kl-fav.css — ปุ่ม "เก็บไว้" + แถบแจ้งผล (toast) ของระบบ "ของที่เก็บไว้"
 *
 * โหลดทุกหน้าคู่กับ kl-fav.js (ดู includes/favorites.php) — หน้า
 * template-favorites.php มี CSS ของตัวเองแบบ inline ตามธรรมเนียม page template
 * ของธีมนี้ ไฟล์นี้จึงมีแต่ของที่ต้องใช้ "ทุกหน้า" คือปุ่มกับ toast
 *
 * ใช้ hex จริงพร้อม var() fallback — ธีมแม่ plant เคย override ตัวแปรของเรา
 * (บทเรียนเดียวกับ agri-recipe.css) ค่าที่ใช้คือ token แบรนด์จริง:
 * navy #0B4D8C · gold #F4B400 · green #4F772D · line #e6edf3
 */

/* ── ปุ่มเก็บไว้ ───────────────────────────────────────────────────────────
   ≥44px ทุกแบบ — ชาวสวนนิ้วใหญ่ ใส่ถุงมือ กดกลางแดด

   🔴 ทำไมต้องนำหน้าด้วย `html button.` ทุกกฎ — ห้ามลดเหลือ `.kl-fav-btn`
   ธีมแม่ plant (`mobile.css`) มีกฎ
       button, .button, html [type="button"], [type="reset"] { background-color … }
       html [type="button"]:hover { background-color: var(--s-accent) … }
   `html [type="button"]` = specificity 0-1-1 ชนะคลาสเดี่ยว 0-1-0 ของเรา
   ผลคือปุ่มกลายเป็นพื้นเทาทึบตัวหนังสือขาว และเขียวทึบตอน hover —
   **สถานะ "เก็บแล้ว" กับ "ยังไม่เก็บ" หน้าตาเหมือนกัน** คนใช้แยกไม่ออกเลย

   `html button.kl-fav-btn` = 0-1-2 ชนะได้โดยไม่ต้องใช้ !important (ยังให้คน
   อื่น override ต่อได้) · hover ต้อง 0-2-2 เพราะของธีมแม่เป็น 0-2-1

   ⚠️ บั๊กนี้ **ไม่โผล่บน docker** โผล่เฉพาะ staging/prod — เจอตอนตรวจ stage
   28 ต.ค. 2569 · เป็นกับดักเดียวกับที่เคยเจอรอบเทมเพลตบทความ */
html button.kl-fav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid var(--kl-blue, #0B4D8C);
	border-radius: 10px;
	font-family: 'Sarabun', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--kl-blue, #0B4D8C);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* ⚠️ ต้องตั้ง color + border-color ด้วย ไม่ใช่แค่ background — ธีมแม่มี
   `html [type="button"]:hover { color: var(--s-bg) }` = ขาว (0-2-1) ซึ่งชนะ
   color ของกฎพื้นฐานเรา (0-1-2) เฉพาะตอน hover → ตัวหนังสือขาวบนพื้นฟ้าอ่อน
   = ปุ่มกลายเป็นกล่องว่าง (เจอบน stage 28 ต.ค. หลังแก้รอบแรก) */
html button.kl-fav-btn:hover {
	background: var(--kl-blue-soft, #F4F8FC);
	border-color: var(--kl-blue, #0B4D8C);
	color: var(--kl-blue, #0B4D8C);
}

/* เก็บแล้ว + hover — คงพื้นทึบไว้ ไม่ให้ธีมแม่เปลี่ยนเป็นเขียว accent */
html button.kl-fav-btn.is-on:hover {
	background: var(--kl-blue, #0B4D8C);
	border-color: var(--kl-blue, #0B4D8C);
	color: #fff;
}

html button.kl-fav-btn svg {
	width: 19px;
	height: 19px;
	display: block;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* เก็บแล้ว — ทึบ + ไอคอนเติมสี ให้แยกจาก "ยังไม่เก็บ" ด้วยทั้งสีและน้ำหนัก
   ไม่พึ่งสีเดียว (ชาวสวนสูงอายุ ตาสู้แดด) */
html button.kl-fav-btn.is-on {
	background: var(--kl-blue, #0B4D8C);
	border-color: var(--kl-blue, #0B4D8C);
	color: #fff;
}
html button.kl-fav-btn.is-on svg { fill: #fff; }

/* แบบเต็มความกว้าง — ใช้ท้ายบทความ (บทความที่ไม่ได้ใช้เทมเพลตใหม่) */
html button.kl-fav-btn--block {
	display: flex;
	width: 100%;
	min-height: 52px;
	font-size: 16px;
}

/* ในแถบแชร์ของเทมเพลตบทความใหม่ (.kla-sharebar เป็น flex row) — ให้ปุ่มเก็บไว้
   กินที่ที่เหลือ จะอ่านเป็นปุ่มหลัก ส่วนไอคอนแชร์เป็นของรอง */
html button.kl-fav-btn--bar {
	flex: 1 1 auto;
	min-width: 0;
}

/* แถบเก็บไว้ท้ายบทความ — เว้นระยะจากเนื้อหาให้ไม่ติดย่อหน้าสุดท้าย */
.kl-fav-bar {
	margin: 28px 0 8px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--kl-line, #e6edf3);
	border-radius: 14px;
}
.kl-fav-bar-hint {
	display: block;
	margin-top: 9px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--kl-text-soft, #666);
}

/* ── toast ────────────────────────────────────────────────────────────────
   กลางล่าง ไม่ใช่มุม — มุมขวาล่างมีปุ่มแชตน้องเลิฟ (#kbot-widget) และปุ่มลอย
   พากลับแอป (.kl-app-fab) อยู่แล้ว ทับกันแน่ถ้าวางมุม */
.kl-fav-toast {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 16px;
	z-index: 100000;   /* สูงกว่า #kbot-widget (99999) ไม่งั้นปุ่มแชตกินคลิก "ยกเลิก" */
	display: none;
	align-items: center;
	gap: 10px;
	max-width: 520px;
	margin: 0 auto;
	padding: 12px 14px;
	background: #17334D;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
	font-family: 'Sarabun', sans-serif;
}
.kl-fav-toast.is-on { display: flex; }

.kl-fav-toast-msg {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
}

html button.kl-fav-toast-undo,
.kl-fav-toast-go {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 8px;
	background: none;
	border: none;
	font-family: 'Sarabun', sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
html button.kl-fav-toast-undo { color: #FFD775; }
/* กันธีมแม่เปลี่ยนปุ่ม "ยกเลิก" เป็นพื้นเขียวตอน hover (กฎเดียวกับข้างบน) */
html button.kl-fav-toast-undo:hover { background: none; color: #FFD775; }
.kl-fav-toast-go { color: #CFE3F3; }

/* app mode (?app=1) มี tab bar ยึดขอบล่างอยู่ — ดัน toast ขึ้นให้พ้น
   ใช้ตัวแปรของ tab bar เอง ไม่ hardcode 60px (บทเรียนปุ่มแชตทับ tab bar) */
body.kl-app-mode .kl-fav-toast {
	bottom: calc(var(--kl-app-tabbar-h, 60px) + env(safe-area-inset-bottom) + 12px);
}

/* เปิดจากแอปที่ติดตั้งแล้ว แต่หน้านั้นยังไม่รองรับ app mode (เช่นหน้าบทความ,
   หน้าพืช) → ธีมโชว์ปุ่มลอยวงกลมพากลับหน้าแรกแอป `#kl-app-fab` ที่มุม
   **ซ้ายล่าง** (left:16px bottom:16px สูง 48px — ดู kl_app_floating_back_button()
   ใน functions.php) · toast ของเรากินเต็มความกว้างที่ bottom:16px เหมือนกัน
   จึงทับปุ่มนั้นมิด 7 วินาที = ชาวสวนกดกลับหน้าแรกไม่ได้พอดีจังหวะที่เพิ่งเก็บของ
   ดันขึ้นให้พ้น · เงื่อนไขตรงกับของปุ่มลอยเป๊ะ (standalone + ไม่มี tab bar) */
@media all and (display-mode: standalone) {
	body:not(.kl-app-mode) .kl-fav-toast {
		bottom: calc(76px + env(safe-area-inset-bottom));
	}
}