/* TKT-007: Vexere sends a distinct React tree to mobile user agents. */
#vexereSearchWidget .mobile-route-item {
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var( --px-line, #e5e5e5 );
	border-radius: 12px;
	color: #000;
	font-size: 13px;
	line-height: 1.5;
}
#vexereSearchWidget .mobile-route-item-content {
	display: grid;
	grid-template-columns: minmax( 96px, 34% ) minmax( 0, 1fr );
	gap: 12px;
	padding: 12px;
	min-width: 0;
}
#vexereSearchWidget :is( .mobile-route-item-left-column, .mobile-route-item-right-column ) { width: auto !important; margin: 0; }
#vexereSearchWidget :is( .mobile-route-item-left-column, .mobile-route-item-right-column, .mobile-route-item-from-to-info ) { min-width: 0; }
/* Vexere ghim khung ảnh 129×133px, rộng hơn cột trái nên ảnh tràn sang cột chữ. */
#vexereSearchWidget .mobile-route-item-image { width: 100%; height: auto; aspect-ratio: 129 / 133; }
#vexereSearchWidget .mobile-route-item-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
/*
 * Giờ đi và giờ đến xếp dọc dưới ảnh. Vexere xếp ngang trong cột ~110px nên khối
 * "Đến 16:30 (Cùng ngày)" chỉ còn ~50px và gãy thành bốn dòng.
 */
#vexereSearchWidget .mobile-route-item-time { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 8px; }
#vexereSearchWidget .mobile-route-item-departure-time { margin: 0; }
#vexereSearchWidget .mobile-route-item-arrive-time-container { width: auto; margin: 0; align-items: flex-start; text-align: left; }
/* Dòng "* Vé chặng thuộc chuyến …" bị Vexere cắt bằng dấu ba chấm; cho xuống dòng để đọc đủ. */
#vexereSearchWidget .mobile-notify-trip .mobile-stage-trip { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
#vexereSearchWidget .mobile-stage-trip > span:first-child { color: var( --px-brand, #c92228 ); }
#vexereSearchWidget :is( .mobile-route-item-vehicle-type, .mobile-route-item-from-info-name, .mobile-route-item-to-info-name, .mobile-route-item-available-seat, .mobile-route-item-available-fare-prefix ) {
	color: #000 !important;
	font-size: 13px !important;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
#vexereSearchWidget .mobile-route-item-vehicle-type { font-weight: 600; }
#vexereSearchWidget :is( .mobile-route-item-from-info-state, .mobile-route-item-to-info-state, .mobile-route-item-arrive-time-container ) {
	color: #000 !important;
	font-size: 12px !important;
	line-height: 1.5;
}
#vexereSearchWidget .mobile-route-item-departure-time { color: #000 !important; font-size: 16px !important; font-weight: 700; line-height: 1.4; }
#vexereSearchWidget .mobile-route-item-available-fare { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px; }
#vexereSearchWidget .mobile-route-item-available-fare-value { color: #000 !important; font-size: 18px !important; font-weight: 700; line-height: 1.4; }
/*
 * Thanh sắp xếp: nhãn một hàng, hai nút chia đều hàng dưới. Vexere ghim mỗi nút
 * 118×28px nên chữ xuống dòng là tràn khỏi viền; ở đây nút tự cao theo chữ.
 */
#vexereSearchWidget .mobile-route-top-container-sorting { display: flex; flex: 1 1 0; flex-wrap: wrap; gap: 8px; align-items: stretch; min-width: 0; }
#vexereSearchWidget .mobile-route-top-container-sorting-heading { flex: 0 0 100%; height: auto; color: #000; font-size: 13px; font-weight: 600; line-height: 1.4; }
#vexereSearchWidget .mobile-route-top-container-sorting-condition {
	box-sizing: border-box;
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 36px;
	margin: 0;
	background: #fff;
	color: #000;
	font-size: 13px;
	line-height: 1.3;
	border-radius: 8px;
	padding: 6px 8px;
	white-space: normal;
	text-align: center;
}
#vexereSearchWidget .mobile-route-top-container-sorting-condition.current-sorting { border-color: var( --px-brand, #c92228 ) !important; background: #fff3f3; color: var( --px-brand, #c92228 ); }

/* Native mobile booking is a full-screen modal with its own class names. */
.ant-modal:has( .mobile-booking-form ) .mobile-booking-form-top-container { background: var( --wp--preset--color--brand, #c92228 ) !important; }
.ant-modal:has( .mobile-booking-form ) :is( .booking-steps-title, .booking-steps-header-container, .booking-steps-container .ant-steps ) { background: #fff3f3 !important; }
.ant-modal:has( .mobile-booking-form ) .mobile-booking-form-title { font-size: 18px !important; font-weight: 700; }
.ant-modal:has( .mobile-booking-form ) .booking-steps-content-container { color: #000; font-size: 13px; line-height: 1.5; }
.ant-modal:has( .mobile-booking-form ) .seat-footer-container { padding-bottom: max( 8px, env( safe-area-inset-bottom ) ); }
.ant-modal:has( .mobile-booking-form ) :is( .seat-template-nextstep, .seat-template-view-utilities ) { font-size: 13px !important; line-height: 1.5; border-radius: 999px; }
.ant-modal:has( .mobile-booking-form ) .seat-template-nextstep:not( .disabled ) { background: var( --wp--preset--color--brand, #c92228 ) !important; color: #fff !important; }
.ant-modal:has( .mobile-booking-form ) .seat-template-view-utilities { color: var( --wp--preset--color--brand, #c92228 ) !important; border-color: var( --wp--preset--color--brand, #c92228 ) !important; }
/*
 * Dải 3 bước. Luật nền đỏ cho `.ant-steps-item-icon` của desktop (vexere-skin.css)
 * cũng trúng bản mobile, nơi Vexere vẽ icon bằng SVG tròn xanh #019875 cao 25px
 * trong ô 20×20: ô đỏ lòi ra sau vòng tròn. Bỏ nền ô, rồi đổi chính màu SVG:
 * bước đang chạy/đã xong màu thương hiệu, bước chưa tới màu xám.
 * Tiền tố `:is( #vexereSearchWidget, body )` chỉ để đủ độ ưu tiên thắng luật id kia.
 */
:is( #vexereSearchWidget, body ) .mobile-booking-form .booking-steps-header-container .ant-steps-item-icon { background: transparent !important; border-color: transparent !important; }
:is( #vexereSearchWidget, body ) .mobile-booking-form .booking-steps-header-container svg [fill="#019875"] { fill: var( --wp--preset--color--brand, #c92228 ); }
:is( #vexereSearchWidget, body ) .mobile-booking-form .booking-steps-header-container svg [stroke="#019875"] { stroke: var( --wp--preset--color--brand, #c92228 ); }
:is( #vexereSearchWidget, body ) .mobile-booking-form .booking-steps-header-container .ant-steps-item-wait svg [fill="#019875"] { fill: #b3b3b3; }
:is( #vexereSearchWidget, body ) .mobile-booking-form .booking-steps-header-container .ant-steps-item-wait svg [stroke="#019875"] { stroke: #b3b3b3; }
:is( #vexereSearchWidget, body ) .mobile-booking-form .booking-steps-header-container .ant-steps-item .ant-steps-item-tail::after { background-color: #e6cfce !important; }
:is( #vexereSearchWidget, body ) .mobile-booking-form .booking-steps-header-container .ant-steps-item-finish .ant-steps-item-tail::after { background-color: var( --wp--preset--color--brand, #c92228 ) !important; }

/*
 * Bước chọn ghế: Vexere không cho khối nội dung cao bằng màn hình, nên thanh
 * "Số ghế / Xem tiện ích / Tiếp tục" nằm lơ lửng giữa modal với ~190px trắng bên
 * dưới. Kéo khung cao bằng màn hình rồi đẩy thanh xuống đáy; nếu sơ đồ ghế dài
 * hơn màn hình thì thanh dính đáy khi cuộn.
 */
.ant-modal:has( .mobile-booking-form ) .booking-steps-container:has( .booking-steps-seat-content-container-mobile ) { display: flex; flex-direction: column; min-height: calc( 100vh - 39px ); min-height: calc( 100dvh - 39px ); }
.ant-modal:has( .mobile-booking-form ) .booking-steps-content-container:has( > .booking-steps-seat-content-container-mobile ) { display: flex; flex: 1 1 auto; flex-direction: column; }
/*
 * Trong khối flex lề không còn gộp: lề 20 + 20 + 15px của Vexere, vốn gộp thành
 * 20px, giờ cộng dồn thành 55px. Trả về 5 + 0 + 15 = 20px như bản gốc.
 */
.ant-modal:has( .mobile-booking-form ) .booking-steps-seat-content-container-mobile { display: flex; flex: 1 1 auto; flex-direction: column; margin-top: 5px; }
.ant-modal:has( .mobile-booking-form ) .booking-steps-seat-content-container-mobile > .seat-main-container { margin-top: 0; }
.ant-modal:has( .mobile-booking-form ) .seat-footer-container { position: sticky; bottom: 0; z-index: 2; margin-top: auto; background: #fff; box-shadow: 0 -4px 12px rgba( 0, 0, 0, 0.06 ); }
/* Hàng giá theo loại ghế dính sát thanh phía dưới; thêm đệm và cho xuống dòng khi có nhiều hạng. */
.ant-modal:has( .mobile-booking-form ) .seat-type-color { height: auto; flex-wrap: wrap; row-gap: 4px; padding-bottom: 12px; }

/*
 * Luật `#vexereSearchWidget .ant-btn-default:hover` của skin (viết cho nút "Xem
 * thêm" nền trắng) ép chữ về màu thương hiệu cho MỌI nút `.ant-btn-default`,
 * kể cả các nút "Tiếp tục" nền đỏ đặc: rê chuột hay chạm vào là chữ đỏ trên nền
 * đỏ, nút trống trơn. Giữ chữ trắng ở mọi trạng thái của ba nút "Tiếp tục".
 */
:is( #vexereSearchWidget, body ) .mobile-booking-form :is( .pickup-transfer-next-step, .customer-next-step ):is( :hover, :focus, :active ),
:is( #vexereSearchWidget, body ) .ant-modal:has( .mobile-booking-form ) .seat-template-nextstep:not( .disabled ):is( :hover, :focus, :active ) {
	background: var( --wp--preset--color--brand, #c92228 ) !important;
	border-color: var( --wp--preset--color--brand, #c92228 ) !important;
	color: #fff !important;
}

.mobile-booking-form .pickup-transfer-list-item {
	display: grid !important;
	grid-template-columns: 48px minmax( 0, 1fr ) auto;
	gap: 12px;
	align-items: start;
}
.mobile-booking-form :is( .pickup-transfer-list-item-location, .pickup-transfer-list-item-info, .pickup-transfer-list-item-time ) { width: auto !important; margin: 0; }
.mobile-booking-form .pickup-transfer-list-item-time { white-space: nowrap; color: #000; font-size: 13px; }
.mobile-booking-form .pickup-transfer-list-item-info-title { color: #000; font-size: 13px; font-weight: 600; }
.mobile-booking-form .pickup-transfer-list-item-info-description { color: #000; font-size: 12px; }
.mobile-booking-form :is( .pickup-transfer-next-step, .customer-next-step ) {
	background: var( --wp--preset--color--brand, #c92228 ) !important;
	color: #fff !important;
	font-size: 13px;
	border-radius: 999px;
}
.mobile-booking-form .control-label { color: #000 !important; font-size: 13px !important; line-height: 1.5; }
/*
 * Vexere đặt ô nhập chỉ có gạch dưới (`border: 0; border-bottom: 1px`), thắng luật
 * viền ở độ ưu tiên thường nên ô bo tròn chỉ hiện một nửa đường cong ở đáy.
 * Tiền tố `:is( #vexereSearchWidget, body )` + !important để viền đủ bốn cạnh.
 */
:is( #vexereSearchWidget, body ) .mobile-booking-form .customer-info-input.ant-input-affix-wrapper {
	border: 1px solid var( --wp--preset--color--line, #e5e5e5 ) !important;
	border-radius: 999px;
	min-height: 44px;
	padding: 8px 12px;
}
/* 16px fields prevent Safari's automatic form zoom; surrounding copy is 13px. */
.mobile-booking-form :is( .customer-info-input input, textarea.customer-info-input ) { color: #000; font-size: 16px !important; line-height: 1.5; }
/* Ô ghi chú cao 4 dòng chữ 16px: chữ gợi ý của Vexere dài, 3 dòng thì bị cắt giữa câu. */
:is( #vexereSearchWidget, body ) .mobile-booking-form textarea.customer-info-input { min-height: 104px; border: 1px solid var( --wp--preset--color--line, #e5e5e5 ) !important; border-radius: 12px; padding: 8px 12px; }
.mobile-booking-form :is( .customer-info-input input, textarea.customer-info-input )::placeholder { color: #666; }