/**
 * Từ 0.23.0: box Add to Cart (quantity + field booking + nút) được chuyển
 * ra khỏi cột "Summary" xuống 1 section riêng full-width bên dưới phần
 * hero (hình ảnh + tiêu đề + giá + mô tả ngắn) — xem
 * CartHandler::relocate_add_to_cart_for_booking_products().
 *
 * Từ 0.24.0: theme Blocksy không tôn trọng remove_action() nên bản gốc của
 * WooCommerce vẫn còn hiện ở vị trí cũ (trong .summary) — ẩn hẳn bằng CSS
 * thay vì tiếp tục đoán cơ chế nội bộ của theme. Rule này chỉ có tác dụng
 * trên trang sản phẩm Tour/Room/Bus vì file CSS này chỉ được enqueue có
 * điều kiện ở đó (CartHandler::enqueue_scripts()).
 */
.summary form.cart {
	display: none !important;
}

/**
 * Từ 0.25.2: dùng `#booking-engine-add-to-cart` (id, thêm ở
 * CartHandler::render_add_to_cart_box()) làm selector gốc thay vì chỉ
 * `.booking-engine-box` — id có độ ưu tiên CSS cao hơn class, cần thiết để
 * thắng được CSS xung đột từ theme (đã gặp thật 2 lần với Blocksy: box lặp
 * đôi, lưới co về 1 cột dù còn thừa chỗ). Vẫn giữ class `.booking-engine-box`
 * song song trên cùng thẻ để tương thích ngược nếu có CSS tuỳ biến khác đang
 * trỏ vào class này.
 */
#booking-engine-add-to-cart {
	max-width: 100%;
	width: 100%;
	margin: 2em 0;
	padding: 1.5em;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.06 );
	box-sizing: border-box;
}

#booking-engine-add-to-cart h2 {
	margin-top: 0;
	margin-bottom: 1em;
}

/**
 * Ép width:100%/max-width:none xuyên suốt cả chuỗi container (form.cart
 * của WooCommerce → .booking-engine-*-form) — nguyên nhân THẬT đã xác nhận
 * qua DevTools (2026-07-11): các file CSS riêng từng loại
 * (frontend-tour-booking.css/-room-booking.css/-bus-booking.css) còn sót
 * `max-width: 480px` từ bản UI cũ (trước khi box redesign thành lưới
 * full-width) — width:100% không đè được max-width (khác thuộc tính) nên
 * box vẫn bị giới hạn 480px dù đã set width. Đã xoá max-width ở 3 file gốc,
 * nhưng vẫn giữ `max-width: none !important` ở đây làm lớp phòng thủ,
 * phòng trường hợp còn sót/thêm mới ở đâu đó khác trong tương lai.
 */
#booking-engine-add-to-cart form.cart,
#booking-engine-add-to-cart .booking-engine-tour-form,
#booking-engine-add-to-cart .booking-engine-room-form,
#booking-engine-add-to-cart .booking-engine-bus-form {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
}

/**
 * Nội dung box chia thành nhiều nhóm option (.booking-engine-group). Dùng
 * số cột TƯỜNG MINH theo media query thay vì `auto-fit` — auto-fit phụ
 * thuộc vào container có độ rộng "definite" mới tính đúng, rủi ro cao hơn
 * trên theme có thể can thiệp layout ngầm; số cột cố định theo breakpoint
 * chắc chắn hơn dù ít "thông minh" hơn.
 */
#booking-engine-add-to-cart .booking-engine-tour-form,
#booking-engine-add-to-cart .booking-engine-room-form,
#booking-engine-add-to-cart .booking-engine-bus-form {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 1.25em;
	align-items: start;
}

@media ( min-width: 700px ) {
	#booking-engine-add-to-cart .booking-engine-tour-form,
	#booking-engine-add-to-cart .booking-engine-room-form,
	#booking-engine-add-to-cart .booking-engine-bus-form {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1000px ) {
	#booking-engine-add-to-cart .booking-engine-tour-form,
	#booking-engine-add-to-cart .booking-engine-room-form,
	#booking-engine-add-to-cart .booking-engine-bus-form {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.booking-engine-group {
	background: #f9f9f9;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	padding: 1em 1.25em;
	box-sizing: border-box;
	min-width: 0;
}

.booking-engine-group h3 {
	margin: 0 0 0.75em;
	font-size: 1em;
}

.booking-engine-tour-info,
.booking-engine-room-info,
.booking-engine-price-estimate,
.booking-engine-price-note {
	grid-column: 1 / -1;
}

.booking-engine-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25em;
}

.booking-engine-field input[type="date"],
.booking-engine-field input[type="number"],
.booking-engine-field select {
	width: 100%;
	max-width: 260px;
	padding: 0.5em;
	box-sizing: border-box;
}

.booking-engine-price-note {
	font-size: 0.85em;
	opacity: 0.75;
}

.booking-engine-extra-services-heading {
	margin-bottom: 0.5em;
}

.booking-engine-extra-service-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	margin: 0.4em 0;
}

.booking-engine-extra-service-unit {
	font-size: 0.85em;
	opacity: 0.75;
}

.booking-engine-extra-service-qty {
	width: 70px;
	padding: 0.3em;
	box-sizing: border-box;
	flex-shrink: 0;
}

.booking-engine-extra-service-qty[readonly] {
	background: #f5f5f5;
	opacity: 0.8;
}

.booking-engine-extra-service-auto-note {
	font-size: 0.75em;
	opacity: 0.7;
	flex-basis: 100%;
}

.booking-engine-extra-services-subtotal {
	margin-top: 0.5em;
	font-weight: 600;
}

@media ( max-width: 480px ) {
	.booking-engine-field input[type="date"],
	.booking-engine-field input[type="number"],
	.booking-engine-field select {
		max-width: 100%;
	}

	.booking-engine-extra-service-row {
		flex-wrap: wrap;
	}
}