/**
 * KYIS Tour Booking — หน้าตาฟอร์มจอง
 *
 * โครง 2 คอลัมน์: ซ้ายเป็นขั้นตอน (.kyis-booking-main) ขวาเป็นการ์ดสรุปราคาแบบ sticky
 * (.kyis-booking-summary) ทั้งสองเป็น sibling กันภายใน form.cart ของ WooCommerce
 * ปุ่ม "จองและชำระเงิน" คือปุ่ม add-to-cart จริงของ WooCommerce เอง จึงเป็น sibling
 * ตัวที่สาม — จัดให้ดูเหมือนต่อท้ายการ์ดสรุปด้วย CSS Grid โดยไม่ต้องแตะ DOM
 *
 * แก้สีแบรนด์ที่ตัวแปร --kyis-* ด้านล่างที่เดียว
 */

:root {
	--kyis-primary:      #005012;
	--kyis-primary-dark: #006b1b;
	--kyis-primary-wash: #b6f2ad;
	--kyis-border:       #dbe6e2;
	--kyis-border-solid: #bfcab9;
	--kyis-muted:        #6e7b6a;
	--kyis-alert:        #ba1a1a;
	--kyis-alert-wash:   #fbeae6;
	--kyis-radius:       10px;
	--kyis-ink:          #191c19;
	--kyis-font-heading: 'Playfair Display', serif;
	--kyis-font-label:   'Lato', sans-serif;
}

/* ══════════════════════════════════════════════════════════════
   โครง 2 คอลัมน์ (จัดที่ form.cart ซึ่งเป็นแม่ร่วมของทั้งสามส่วน)
   ══════════════════════════════════════════════════════════════ */

/* !important จำเป็น: flatsome-shop.css โหลดทีหลังและมี
   `form.cart { display:flex }` specificity เท่ากันเป๊ะ (element+class)
   ชนะด้วยลำดับโหลดทีหลัง ทำให้ grid ของเราไม่เคยทำงานจริงมาก่อน */
form.cart {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 20px;
	align-items: start;
}

/* หน้าสินค้าที่จองได้: ซ่อนรูปแกลเลอรีสินค้า (ไม่มีผลกับการจอง และทำให้
   ฟอร์มจอง/ปฏิทินถูกบีบแคบอยู่ใน .summary ครึ่งเดียวของหน้า) ให้ .summary
   ขยายเต็มแถวแทน — row เดิมเป็น flex อยู่แล้ว ลบ .product-gallery ออก
   .summary (flex:1 1 0%) จะดันมากินพื้นที่ที่เหลือทั้งหมดเอง */
.kyis-bookable-product .product-gallery {
	display: none;
}

.kyis-bookable-product .row.content-row {
	/* เดิมใช้ max-width:none ทำให้ยืดเต็มจอกว้างจนหลุดกรอบเมนู แล้วลองแก้เป็น
	   1300px ก็ยังกว้างกว่ากรอบเมนู (.header-inner.container) ซึ่งจริง ๆ คือ
	   1080px ทำให้ดูไม่ตรงแนวกัน — ใช้ 1080px เท่ากรอบเมนูให้ตรงกันเป๊ะ
	   ความกว้างของปฏิทินที่ขยายขึ้นมาจากการซ่อนแกลเลอรีสินค้าอยู่แล้ว
	   ไม่ต้องพึ่ง max-width ที่กว้างกว่านี้ */
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
	float: none;
	position: relative; /* ใช้อ้างอิงตำแหน่งปุ่มเลื่อนสินค้าด้านล่าง */
}

/* คอลัมน์ขวาสุดของธีม (.product-sidebar-small) กว้าง 180px สูงเต็มหน้า
   แต่ข้างในมีแค่ปุ่มกลม ๆ เลื่อนไปสินค้าถัดไป/ก่อนหน้า 2 ปุ่มเท่านั้น
   ที่เหลือเป็นที่ว่าง ทำให้เนื้อหาทั้งหน้าถูกดันไปชิดซ้าย ดูไม่สมดุล
   — ดึงออกจาก flow ไปวางลอยมุมขวาบนแทน ปุ่มยังอยู่ครบ แต่ .summary
   (flex:1) จะขยายเต็มความกว้างแถวได้ */
.kyis-bookable-product .product-sidebar-small {
	position: absolute;
	top: 0;
	right: 0;
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	padding: 0 !important;
	z-index: 2;
}

.kyis-bookable-product .product-sidebar-small .next-prev-thumbs {
	margin: 0;
}

/* กันชื่อโปรแกรมยาว ๆ วิ่งไปทับปุ่มเลื่อนที่ลอยอยู่มุมขวาบน */
.kyis-bookable-product h1.product_title,
.kyis-bookable-product .woocommerce-breadcrumb {
	padding-right: 80px;
}

/* ── รูปแบนเนอร์เหนือฟอร์มจอง (แทนแกลเลอรีสินค้าที่ซ่อนไป) ──── */

.kyis-booking-banner {
	margin: 0 0 26px;
	border-radius: 16px;
	overflow: hidden;
}

.kyis-booking-banner img {
	display: block;
	width: 100%;
	height: 340px;
	object-fit: cover;
}

@media (max-width: 849px) {
	.kyis-booking-banner img {
		height: 220px;
	}
}

/* ── รายละเอียดโปรแกรมในแท็บ Description (2 คอลัมน์) ────── */

.kyis-desc {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 48px;
	align-items: start;
}

@media (max-width: 849px) {
	.kyis-desc {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

.kyis-desc h3 {
	font-family: var(--kyis-font-heading);
	font-size: 17px;
	font-weight: 700;
	color: var(--kyis-ink);
	margin: 22px 0 10px;
}

.kyis-desc > div > h3:first-child {
	margin-top: 0;
}

.kyis-desc p {
	margin: 0 0 12px;
	line-height: 1.75;
	color: #40544f;
}

ul.kyis-desc-list {
	margin: 0 0 14px;
	padding-left: 20px;
	list-style: disc;
	line-height: 1.9;
	color: #40544f;
}

ul.kyis-desc-list li {
	margin: 0;
	list-style: disc;
}

ul.kyis-desc-list strong {
	color: var(--kyis-ink);
	font-weight: 600;
}

.kyis-desc-note {
	color: var(--kyis-muted);
	font-size: .92em;
}

.kyis-desc-lead {
	font-family: var(--kyis-font-heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--kyis-primary);
	margin: 0 0 12px;
}

/* ── แกลเลอรีรูปโปรแกรม (ใต้ฟอร์มจอง) ───────────────────── */

.kyis-gallery-section {
	margin: 48px 0 8px;
}

.kyis-gallery-title {
	font-family: var(--kyis-font-heading);
	font-size: 24px;
	margin: 0 0 20px;
	color: var(--kyis-ink);
}

.kyis-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

.kyis-gallery-item {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	line-height: 0;
	background: #eef2ea;
}

.kyis-gallery-item img {
	width: 100%;
	height: 190px;
	object-fit: cover;
	display: block;
	transition: transform .45s ease;
}

.kyis-gallery-item:hover img {
	transform: scale(1.06);
}

@media (max-width: 549px) {
	.kyis-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.kyis-gallery-item img {
		height: 130px;
	}
}

@media (min-width: 900px) {
	form.cart {
		/* เดิม 1.9fr : 1fr ทำให้ฝั่งขวาโดนบีบจนติดค่า min (320px) หน้าเลยดู
		   หนักไปทางซ้าย — ลดสัดส่วนลงให้สองฝั่งใกล้เคียงกันมากขึ้น */
		grid-template-columns: minmax(0, 1.35fr) minmax(330px, 1fr) !important;
		gap: 26px;
	}

	/* เดิมให้ #kyis-booking-form ทับ 2 แถว (grid-row:1/3) เพื่อให้ปุ่มไปอยู่
	   แถว 2 ต่อท้ายการ์ดสรุปพอดี — แต่พอความสูงฝั่งซ้าย (สเต็ปไหนก็ได้)
	   มากกว่าการ์ดสรุป+ปุ่มรวมกัน กริดจะ "ยืด" ทั้งแถว 1 และ 2 เพื่อชดเชย
	   ทำให้ปุ่มลอยไปทับกลางการ์ดสรุปแทนที่จะอยู่ต่อท้าย (บั๊กจริงที่เจอ)
	   แก้โดยให้ทุกอย่างอยู่แถว 1 เดียว (ฝั่งซ้าย/การ์ดสรุปสูงเท่าไหร่ก็ไม่กระทบ
	   กัน) แล้วปุ่มจองเป็นแถบเต็มความกว้างแยกต่างหากที่แถว 2 แทน */
	#kyis-booking-form   { grid-column: 1; grid-row: 1; }
	#kyis-summary-card   { grid-column: 2; grid-row: 1; align-self: start; }

	form.cart > .single_add_to_cart_button {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: 4px;
	}

	/* เดิมลอง position:sticky ให้การ์ดสรุปเลื่อนตามจอ — แต่พบว่า sticky
	   ในเซลล์กริดที่ auto-height ถูกดึงให้สูงตามฝั่งซ้าย (ซึ่งความสูงไม่คงที่
	   เพราะเปลี่ยนไปตามสเต็ป) ทำให้ตำแหน่ง "หลุด" sticky คำนวณผิดพลาด จนการ์ด
	   ไปเหลื่อมทับปุ่ม "Book & Pay" (บั๊กจริงที่ผู้ใช้เจอ) — เอา sticky ออก
	   ให้การ์ดอยู่นิ่งตามตำแหน่งปกติแทน ปลอดภัยกว่าและแต่ละสเต็ปก็สั้นอยู่แล้ว
	   จึงไม่จำเป็นต้องเลื่อนตามจอมากนัก */
}

/* ── คอลัมน์ซ้าย: ขั้นตอน ─────────────────────────────────── */

#kyis-booking-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.kyis-section {
	background: #fff;
	border: 1px solid var(--kyis-border);
	border-radius: var(--kyis-radius);
	padding: 18px 20px 20px;
}

.kyis-section-title {
	display: flex;
	align-items: baseline;
	gap: 9px;
	font-family: var(--kyis-font-heading);
	font-weight: 700;
	font-size: 19px;
	color: var(--kyis-ink);
	margin: 0 0 14px;
}

.kyis-icon {
	width: 19px;
	height: 19px;
	flex: none;
	color: var(--kyis-primary);
	align-self: center;
}

.kyis-hint {
	font-weight: 400;
	font-size: 12px;
	color: var(--kyis-muted);
}

/* ── ตัวชี้ขั้นตอน (1 เลือกวัน → 2 เลือกจำนวน → 3 กรอกข้อมูล) ─ */

.kyis-progress {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kyis-progress-step {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--kyis-font-label);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--kyis-muted);
	position: relative;
}

.kyis-progress-step:not(:last-child)::after {
	content: '';
	flex: 1;
	height: 1px;
	margin: 0 8px;
	background: var(--kyis-border-solid);
}

.kyis-progress-step i {
	flex: none;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f5f9f8;
	border: 1px solid var(--kyis-border-solid);
	font-style: normal;
	font-size: 12px;
	color: var(--kyis-muted);
}

.kyis-progress-step.is-active {
	color: var(--kyis-ink);
}

.kyis-progress-step.is-active i {
	background: var(--kyis-primary);
	border-color: var(--kyis-primary);
	color: #fff;
}

.kyis-progress-step.is-done i {
	background: var(--kyis-primary-wash);
	border-color: var(--kyis-primary);
	color: var(--kyis-primary-dark);
}

@media (max-width: 560px) {
	.kyis-progress-step span { display: none; }
}

/* ── สเต็ป: แสดงทีละสเต็ป เปลี่ยนเฉพาะการ์ดนี้เท่านั้น ────── */

.kyis-step {
	display: none;
	flex-direction: column;
	gap: 22px;
}

.kyis-step.is-active {
	display: flex;
}

.kyis-btn-back {
	align-self: flex-start;
	margin: 0;
	padding: 6px 4px;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--kyis-muted);
	font-weight: 600;
	font-size: 13px;
}

.kyis-btn-back:hover {
	color: var(--kyis-primary);
	background: none;
}

.kyis-step-actions {
	display: flex;
	justify-content: flex-end;
}

.kyis-btn-continue {
	margin: 0;
	padding: 14px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--kyis-primary);
	color: #fff;
	font-weight: 700;
	font-size: 14.5px;
	box-shadow: none;
}

.kyis-btn-continue:hover {
	background: var(--kyis-primary-dark);
}

@media (max-width: 560px) {
	.kyis-step-actions { justify-content: stretch; }
	.kyis-btn-continue { width: 100%; }
}

/* ── ปฏิทิน ────────────────────────────────────────────── */

.kyis-datepicker {
	border: 1px solid var(--kyis-border);
	border-radius: var(--kyis-radius);
	padding: 10px;
	background: #fff;
}

.kyis-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2px 2px 10px;
}

.kyis-cal-title {
	font-weight: 700;
	font-size: 15px;
}

button.kyis-cal-nav {
	width: 34px;
	height: 34px;
	min-height: 0;
	padding: 0;
	margin: 0;
	line-height: 1;
	font-size: 18px;
	border-radius: 8px;
	border: 1px solid var(--kyis-border);
	background: #f5f9f8;
	color: #40544f;
	box-shadow: none;
}

button.kyis-cal-nav:hover:not(:disabled) {
	border-color: var(--kyis-primary);
	color: var(--kyis-primary);
	background: #fff;
}

button.kyis-cal-nav:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.kyis-cal-loading {
	padding: 30px 10px;
	text-align: center;
	color: var(--kyis-muted);
	font-size: 13px;
}

table.kyis-cal {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	border: 0;
	table-layout: fixed;
}

table.kyis-cal th {
	font-size: 11px;
	font-weight: 600;
	color: var(--kyis-muted);
	padding: 4px 0 8px;
	border: 0;
	background: none;
	text-align: center;
}

table.kyis-cal td {
	padding: 2px;
	border: 0;
	background: none;
	text-align: center;
}

table.kyis-cal td span,
table.kyis-cal td button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.1;
	box-shadow: none;
	background: transparent;
	color: inherit;
	font-variant-numeric: tabular-nums;
}

table.kyis-cal td.is-open button {
	background: var(--kyis-primary-wash);
	color: var(--kyis-primary-dark);
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

table.kyis-cal td.is-open button:hover {
	background: var(--kyis-primary);
	color: #fff;
}

table.kyis-cal td.is-selected button {
	background: var(--kyis-primary);
	color: #fff;
	box-shadow: 0 0 0 3px var(--kyis-primary-wash);
}

table.kyis-cal td.is-full span {
	color: var(--kyis-muted);
	opacity: .5;
	text-decoration: line-through;
	cursor: not-allowed;
}

table.kyis-cal td.is-empty span {
	opacity: 0;
}

.kyis-cal-key {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 10px;
	font-size: 11.5px;
	color: var(--kyis-muted);
}

.kyis-cal-key i {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	margin-right: 5px;
	vertical-align: -1px;
}

.kyis-cal-key .k-open { background: var(--kyis-primary-wash); border: 1px solid var(--kyis-primary); }
.kyis-cal-key .k-sel  { background: var(--kyis-primary); }
.kyis-cal-key .k-full { background: var(--kyis-border-solid); }

/* ── รอบเวลา ───────────────────────────────────────────── */

ul.kyis-slots {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.kyis-slots li {
	margin: 0;
	list-style: none;
}

button.kyis-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 100%;
	min-height: 62px;
	margin: 0;
	padding: 12px 8px;
	border: 1.5px solid var(--kyis-border);
	border-radius: 9px;
	background: #fff;
	color: #333;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	box-shadow: none;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

button.kyis-slot .kyis-slot-time {
	font-variant-numeric: tabular-nums;
}

button.kyis-slot small {
	font-size: 11px;
	font-weight: 400;
	color: var(--kyis-muted);
}

button.kyis-slot:hover:not(:disabled) {
	border-color: var(--kyis-primary);
	color: var(--kyis-primary-dark);
	background: #fff;
}

button.kyis-slot.is-selected {
	background: var(--kyis-primary);
	border-color: var(--kyis-primary);
	color: #fff;
}

button.kyis-slot.is-selected small {
	color: rgba(255, 255, 255, .82);
}

button.kyis-slot.is-sold {
	opacity: .45;
	cursor: not-allowed;
	text-decoration: line-through;
}

.kyis-slots-empty {
	font-size: 13px;
	color: var(--kyis-muted);
	background: #f5f9f8;
	border: 1px dashed var(--kyis-border-solid);
	border-radius: 9px;
	padding: 16px;
	text-align: center;
}

/* ── ฟิลด์ผู้เดินทาง (โรงแรม/เลขห้อง/เบอร์/หมายเหตุ) ────────── */

.kyis-guest-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}

.kyis-field--full {
	grid-column: 1 / -1;
}

@media (max-width: 560px) {
	.kyis-guest-grid { grid-template-columns: 1fr; }
}

.kyis-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.kyis-field label {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-weight: 600;
	font-size: 14px;
	text-transform: none;
	margin: 0;
}

.kyis-field input[type="text"],
.kyis-field textarea {
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	font-size: 16px;
	border: 1px solid var(--kyis-border-solid);
	border-radius: 8px;
	box-shadow: none;
	background: #fff;
}

.kyis-field input:focus,
.kyis-field textarea:focus {
	border-color: var(--kyis-primary);
	outline: none;
}

.kyis-field small {
	font-size: 12px;
	color: var(--kyis-muted);
}

.kyis-required {
	color: var(--kyis-alert);
	text-decoration: none;
	border: 0;
}

.kyis-optional {
	font-weight: 400;
	font-size: 12px;
	color: var(--kyis-muted);
}

.kyis-field.has-error input,
.kyis-field.has-error textarea {
	border-color: var(--kyis-alert);
	background: var(--kyis-alert-wash);
}

/* ── ข้อความเตือน ──────────────────────────────────────── */

.kyis-error {
	display: none;
	align-items: flex-start;
	gap: 9px;
	padding: 11px 13px;
	border-left: 3px solid var(--kyis-alert);
	border-radius: 8px;
	background: var(--kyis-alert-wash);
	color: var(--kyis-alert);
	font-size: 13px;
	font-weight: 500;
}

.kyis-error.is-visible {
	display: flex;
}

/* ══════════════════════════════════════════════════════════════
   คอลัมน์ขวา: การ์ดสรุปราคา (sticky)
   ══════════════════════════════════════════════════════════════ */

.kyis-booking-summary {
	background: rgba(248, 250, 244, .85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(110, 123, 106, .2);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(53, 106, 52, .12);
}

.kyis-summary-head {
	background: var(--kyis-primary);
	color: #fff;
	padding: 16px 20px;
}

.kyis-summary-head h3 {
	margin: 0;
	font-family: var(--kyis-font-heading);
	font-size: 19px;
	line-height: 1.3;
	color: #fff;
}

.kyis-summary-head span {
	display: block;
	margin-top: 3px;
	font-family: var(--kyis-font-label);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}

.kyis-summary-body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.kyis-summary-when {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-bottom: 16px;
	border-bottom: 1px dashed var(--kyis-border);
}

.kyis-summary-when .kyis-icon {
	margin-top: 2px;
}

.kyis-summary-when strong {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--kyis-ink);
}

.kyis-summary-when span {
	display: block;
	font-size: 12.5px;
	color: var(--kyis-muted);
	margin-top: 2px;
}

.kyis-summary-persons {
	display: flex;
	flex-direction: column;
}

/* ── จำนวนคน (ใช้ในการ์ดสรุปฝั่งขวา) ──────────────────────── */

.kyis-person {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px dashed var(--kyis-border);
}

.kyis-person:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}

.kyis-person-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.kyis-person-name { font-weight: 700; font-size: 14px; color: var(--kyis-ink); }
.kyis-person-desc { font-size: 11.5px; color: var(--kyis-muted); }

.kyis-stepper {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: none;
	padding: 3px;
	border-radius: 99px;
	background: #f5f9f8;
}

.kyis-stepper button {
	width: 30px;
	height: 30px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--kyis-primary);
	font-size: 16px;
	line-height: 1;
	box-shadow: 0 1px 1px rgba(15, 32, 28, .06);
	cursor: pointer;
}

.kyis-stepper button:hover:not(:disabled) {
	background: var(--kyis-primary);
	color: #fff;
}

.kyis-stepper button:disabled {
	opacity: .35;
	cursor: not-allowed;
	box-shadow: none;
}

.kyis-stepper input.kyis-count {
	width: 30px;
	height: 30px;
	min-height: 0;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	border: 0;
	background: transparent;
	box-shadow: none;
	-moz-appearance: textfield;
	font-variant-numeric: tabular-nums;
	color: var(--kyis-ink);
}

.kyis-stepper input.kyis-count::-webkit-outer-spin-button,
.kyis-stepper input.kyis-count::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ── กล่องราคารวม ──────────────────────────────────────── */

.kyis-cost {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px;
	border-radius: 9px;
	background: var(--kyis-primary-wash);
}

.kyis-cost-lines {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12.5px;
	color: var(--kyis-ink);
	opacity: .82;
}

.kyis-cost-lines div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-variant-numeric: tabular-nums;
}

.kyis-cost-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-top: 8px;
	border-top: 1px solid rgba(0, 107, 27, .22);
}

.kyis-cost-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--kyis-ink);
}

.kyis-cost-amount {
	font-size: 22px;
	font-weight: 700;
	color: var(--kyis-primary-dark);
	font-variant-numeric: tabular-nums;
}

.kyis-cost-amount .amount {
	font-weight: 700;
}

/* ── สรุปเงื่อนไขย่อ ๆ ใต้กล่องราคา ───────────────────────── */

ul.kyis-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

ul.kyis-facts li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 11px 0;
	border-bottom: 1px dashed var(--kyis-border);
	list-style: none;
}

ul.kyis-facts li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

ul.kyis-facts .kyis-icon {
	margin-top: 1px;
	width: 17px;
	height: 17px;
}

ul.kyis-facts span {
	display: block;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--kyis-muted);
}

ul.kyis-facts strong {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--kyis-ink);
}

/* ── ปุ่มจอง (ปุ่ม add to cart จริงของ WooCommerce) ─────────
   ต่อท้ายการ์ดสรุปด้วย CSS Grid โดยไม่แตะ DOM — ดูรายละเอียด
   ที่หัวไฟล์ ทำให้มันดูเหมือนเป็นส่วนหนึ่งของการ์ดเดียวกัน
   ──────────────────────────────────────────────────────── */

.product-type-simple .single_add_to_cart_button.kyis-disabled {
	opacity: .45;
	cursor: not-allowed;
}

form.cart .single_add_to_cart_button {
	width: 100%;
	min-height: 54px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 999px;
	background: var(--kyis-primary);
	color: #fff;
	border: 0;
	transition: background .15s ease;
}

form.cart .single_add_to_cart_button:hover {
	background: var(--kyis-primary-dark);
}

/* ราคาในหน้าร้าน */
.kyis-price-from { font-weight: 700; }
.kyis-price-child,
.kyis-price-infant { color: var(--kyis-muted); font-weight: 400; }

/* ── มือถือ — 849px คือ breakpoint ของ Flatsome ─────────── */

@media (max-width: 849px) {

	.kyis-section {
		padding: 14px 16px 16px;
	}

	table.kyis-cal td span,
	table.kyis-cal td button {
		min-height: 46px;
		font-size: 16px;
	}

	ul.kyis-slots {
		grid-template-columns: repeat(2, 1fr);
	}

	.kyis-field input,
	.kyis-field textarea {
		font-size: 16px !important;
	}

	form.cart .single_add_to_cart_button {
		position: sticky;
		bottom: 10px;
		z-index: 5;
		box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
	}
}

/* ── ปิดแถบ sticky add-to-cart ของ Flatsome/Astra ในหน้าสินค้าที่จองได้ ──
 * แถบนี้มีปุ่ม Add to cart ซ้อน ลูกค้าจะกดจองโดยยังไม่เลือกวันแล้วเจอ error
 * ใช้คู่กับการปิดใน Theme Options → WooCommerce → Product Page
 * ──────────────────────────────────────────────────────── */

.single-product .sticky-add-to-cart,
.single-product .sticky-add-to-cart--active {
	display: none !important;
}