/* Form công khai đặt xe hộ khách — assets/css/avr-frontend.css
   Font chữ/cỡ chữ lấy từ biến CSS --avr-font-family/--avr-font-size, do
   trang Cài đặt của plugin sinh ra (inline <style> trước file này). Để trống
   font chữ trong Cài đặt = kế thừa font mặc định của theme (không ép riêng). */

.avr-form-wrap {
	/* Màu nhấn (nút gửi, viền focus, link...) ưu tiên "kế thừa" theo màu chủ
	   đạo của theme (biến chuẩn của WordPress block theme) nếu theme có khai
	   báo — theme không khai báo thì mới dùng màu mặc định. Bản đậm hơn dùng
	   color-mix() tự tính từ màu nhấn (không cần biết trước theme dùng màu
	   gì). Màu mặc định (khi theme không khai báo) đổi từ #2271b1 (xanh xám
	   mặc định của khung quản trị WordPress — Juno phản ánh trông "xanh xám",
	   không giống nút của chatbot) sang ĐÚNG #2563eb — cùng màu mặc định
	   plugin Astrohouse Chatbot đang dùng (biến --astro-color trong
	   chat-widget.css) — để 2 plugin trông đồng bộ nếu theme không tự định
	   nghĩa màu riêng (bản 1.15.7). */
	--avr-accent: var( --wp--preset--color--primary, var( --wp--preset--color--contrast, #2563eb ) );
	--avr-accent-dark: color-mix( in srgb, var( --avr-accent ) 78%, black );
	--avr-accent-glow: color-mix( in srgb, var( --avr-accent ) 15%, transparent );
	--avr-accent-glow-strong: color-mix( in srgb, var( --avr-accent ) 30%, transparent );
	--avr-border: #e1e4e8;
	--avr-radius: 10px;
	/* KHÔNG khai báo --avr-font-size cố định ở đây nữa — trước đây có
	   "--avr-font-size: 15px;" ngay tại đây, tự nó luôn thắng giá trị kế
	   thừa từ :root (do trang Cài đặt sinh ra), khiến đổi "Cỡ chữ" trong Cài
	   đặt không có tác dụng gì với form (chỉ tình cờ không lộ ra vì giá trị
	   mặc định của Cài đặt cũng là 15px). Giờ để trống hẳn ở đây, dùng var()
	   với fallback 15px ngay bên dưới — vừa nhận đúng giá trị từ Cài đặt,
	   vừa vẫn có phòng hờ nếu vì lý do gì đó khối <style> của Cài đặt không
	   tải được.
	   --avr-font-size-sm: cỡ chữ dùng CHUNG cho mọi ô điều khiển trong form
	   (input/select/textarea/ô điện thoại/chip "Contact via"/radio Yes-No/
	   checkbox/dòng "Estimated price, may change..."). QUY ĐỊNH MỚI của Juno
	   (bản 1.16.1): LUÔN nhỏ hơn cỡ chữ gốc ĐÚNG 2px (không phải theo %) —
	   Cài đặt để 15px thì đây phải là 13px. Bản 1.15.4 từng cố tình đổi sang
	   % (0.8em) để tránh chữ ô nhập gần bằng nhãn khi Cài đặt để size lớn,
	   nhưng Juno giờ xác nhận muốn quay lại đúng công thức trừ cố định (chỉ
	   khác 1.15.2 ở chỗ trừ 2px thay vì 1px) — tôn trọng đúng con số Juno
	   chốt, không tự suy diễn lại theo %. Vẫn có sàn max(16px, ...) riêng ở
	   input/select/textarea/ô điện thoại bên dưới để tránh Safari iPhone tự
	   zoom trang (xem ghi chú tại đó) — sàn 16px này áp dụng SAU khi trừ 2px,
	   không ảnh hưởng tới công thức "-2px" cho các phần tử KHÔNG phải ô gõ
	   chữ (radio/checkbox/chip/dòng cảnh báo giá). */
	--avr-font-size-sm: calc( var( --avr-font-size, 15px ) - 2px );
	/* Icon trên toàn form ưu tiên màu đen (theo yêu cầu), không ăn theo màu nhấn. */
	--avr-icon-color: #1d2327;

	max-width: 480px;
	margin: 0 auto;
	font-family: var( --avr-font-family, inherit );
	font-size: var( --avr-font-size, 15px );
	line-height: 1.5;
	color: inherit;
	/* Canh chữ trái làm MẶC ĐỊNH GỐC cho toàn bộ form — phòng hờ theme/page-builder của
	   site áp text-align:center (hoặc khác) lên khối bao ngoài chứa shortcode này (khá
	   phổ biến với các theme/section kiểu "hero"/CTA canh giữa) — nếu không khai rõ ở
	   đây, MỌI chữ bên trong form (kể cả input/nhãn) sẽ kế thừa theo giá trị của theme
	   thay vì mặc định trái của trình duyệt (bản 1.16.4, Juno báo nhãn Name/Vehicle/
	   Pickup... không canh trái như "Contact via" — xem thêm rule label bên dưới). */
	text-align: left;
}

/* Phòng trường hợp theme của site có luật CSS ép display trên fieldset/thẻ
   khác (vd "fieldset{display:block}") đè lên hành vi mặc định của thuộc
   tính HTML "hidden" — ép lại bằng !important, chỉ trong phạm vi form này. */
.avr-form-wrap [hidden] {
	display: none !important;
}

.avr-lang-switch {
	display: flex;
	flex-wrap: wrap; /* Từ bản 1.17.0: 4 nút (trước 2) — cho tự xuống dòng trên màn hình hẹp thay vì tràn. */
	justify-content: flex-end;
	gap: 6px;
	margin: 0 0 8px;
}

.avr-lang-btn {
	font-family: inherit;
	font-size: 0.85em;
	background: #fff;
	border: 1px solid var( --avr-border );
	border-radius: 999px;
	padding: 4px 10px;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.avr-lang-btn:hover {
	opacity: 0.85;
}

.avr-lang-btn:active {
	transform: scale( 0.94 );
}

.avr-lang-btn.avr-lang-active {
	opacity: 1;
	border-color: var( --avr-accent );
	font-weight: 400;
}

/* Khung form ngoài cùng — đổi theo đúng "thẻ nổi" (floating card) mà khung
   chatbot dùng cho panel chat (bo góc lớn 20px + bóng đổ mềm lan rộng, xem
   .astro-chat-panel trong chat-widget.css) thay vì viền mảnh + bóng rất nhẹ
   như trước (nhìn "phẳng"/không có điểm nhấn). KHÔNG dùng border cứng nữa —
   thay bằng chính box-shadow thứ 2 (0 0 0 1px...) làm viền mảnh 1px, đúng kỹ
   thuật chatbot đang dùng, để viền + bóng hoà làm 1 lớp mượt mà hơn (bản
   1.15.6). */
.avr-form {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: none;
	border-radius: 20px;
	padding: 20px;
	box-shadow: 0 20px 44px -22px rgba( 0, 0, 0, 0.22 ), 0 0 0 1px rgba( 0, 0, 0, 0.05 );
	animation: avr-form-in 0.35s ease both;
}

/* Hiệu ứng nhẹ lúc form vừa hiện ra trên trang — cùng cảm giác "mượt mà"
   với widget chatbot (chatbot cũng có hiệu ứng trượt/mờ dần khi mở). Chỉ
   chạy 1 lần lúc trang tải xong, không lặp lại. */
@keyframes avr-form-in {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.avr-form {
		animation: none;
	}
}

.avr-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 14px;
	flex: 1 1 0;
}

.avr-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.avr-field-row .avr-field {
	min-width: 160px;
}

.avr-field-narrow {
	max-width: 100px;
	min-width: 80px !important;
	flex: 0 0 auto;
}

/* :not(...) loại trừ 3 kiểu <label> đặc biệt (chip "Contact via", radio Yes/No
   bằng lái, checkbox "Return elsewhere?"/"Add a note?") — tất cả đều là thẻ
   <label> NẰM BÊN TRONG 1 khối có class "avr-field", nên vốn dĩ VẪN khớp
   selector ".avr-field label" ở đây. Vì độ ưu tiên (specificity) của
   ".avr-field label" (class + thẻ) CAO HƠN các rule riêng ".avr-checkbox-label"/
   ".avr-radio"/".avr-chip" (chỉ có 1 class) bên dưới, rule ở đây từng luôn
   thắng, khiến 3 kiểu label đó bị ép về đúng cỡ chữ nhãn thường — dù rule
   riêng của chúng có khai cỡ chữ nhỏ hơn cũng vô tác dụng. Đây chính là lý
   do Juno thấy chữ ở checkbox "vẫn to đùng" dù đã đổi CSS (bản 1.15.2). Loại
   trừ hẳn ở đây để rule riêng của từng loại tự quyết định cỡ chữ của chính
   nó, không bị đè nữa (bản 1.15.3).
   Cỡ chữ: bản 1.16.1 đổi từ 0.9em sang ĐÚNG BẰNG --avr-font-size (không thu
   nhỏ) — Juno quy định mọi nhãn field (Name/Phone number/Contact via/
   Vehicle/Pickup/Pickup & Return/Estimated total/Have a suitable driving
   licence?...) dùng CHUNG 1 cỡ chữ, đúng bằng số Cài đặt admin nhập, không
   còn thu nhỏ theo % nữa — chỉ riêng chữ NẰM TRONG ô nhập/dropdown/kèm
   checkbox-radio mới nhỏ hơn (xem --avr-font-size-sm ở trên). */
.avr-field label:not( .avr-checkbox-label ):not( .avr-radio ):not( .avr-chip ),
.avr-license-field legend {
	font-weight: 400;
	font-size: var( --avr-font-size, 15px );
	/* !important — Juno báo Name/Vehicle/Pickup/Pickup & Return... không canh trái giống
	   "Contact via" (label DUY NHẤT không nằm trong 1 thẻ <p>/<legend> nào khác — nghi
	   nhiều khả năng theme của site áp text-align lên <p>/<legend> mà rule thường không
	   thắng nổi). Đã thêm text-align:left làm nền chung ở .avr-form-wrap (xem trên), thêm
	   !important RIÊNG ở đây để chắc chắn thắng, tránh vòng lặp "sửa nhưng Juno test vẫn
	   không thấy đổi" từng gặp ở dòng .avr-estimate-warning (bản 1.16.4). */
	text-align: left !important;
}

.avr-required {
	color: #c0392b;
}

/* Khoanh đỏ + rung nhẹ tạm thời quanh khối đang thiếu/sai khi gửi form bị
   chặn (xem focusFirstInvalidField() trong avr-frontend.js) — trước đây chỉ
   dựa vào tooltip báo lỗi mặc định của trình duyệt, DỄ BỊ CHE MẤT nếu khách
   đang cuộn xa chỗ đó (Juno gặp thực tế với nhóm chip "Contact via" — input
   radio thật bị ẩn kín (.avr-chip input, xem trên) nên tooltip trình duyệt
   gần như vô hình). JS giờ tự cuộn tới ĐÚNG khối bao ngoài (.avr-chip-group/
   .avr-radio-group/.avr-field) rồi gắn tạm class này để khách nhìn thấy rõ
   ngay trong màn hình hiện tại, không phụ thuộc tooltip nữa (bản 1.15.5). */
.avr-field-invalid {
	outline: 2px solid #c0392b;
	outline-offset: 4px;
	border-radius: var( --avr-radius );
	animation: avr-shake 0.4s ease;
}

@keyframes avr-shake {
	10%, 90% { transform: translateX( -1px ); }
	20%, 80% { transform: translateX( 2px ); }
	30%, 50%, 70% { transform: translateX( -4px ); }
	40%, 60% { transform: translateX( 4px ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.avr-field-invalid {
		animation: none;
	}
}

.avr-field input[type="text"],
.avr-field input[type="number"],
.avr-field input[type="datetime-local"],
.avr-field select,
.avr-field textarea {
	font-family: inherit;
	/* max(16px, ...) — PHẢI luôn >= 16px trên điện thoại, dưới mức này Safari
	   trên iPhone tự động PHÓNG TO (zoom) cả trang mỗi khi chạm vào ô để gõ
	   (Juno gặp thực tế khi gõ SĐT/dòng xe) — đúng lỗi khung chatbot cũng
	   từng gặp và đã xử lý (xem chat-widget.css). Dùng max() thay vì ép cứng
	   16px luôn — máy tính/Android không bị lỗi này nên vẫn giữ đúng tỉ lệ
	   nhỏ hơn cỡ chữ gốc như mong muốn khi --avr-font-size-sm tính ra >= 16px
	   (bản 1.15.5). */
	font-size: max( 16px, var( --avr-font-size-sm ) );
	padding: 9px 11px;
	border: 1px solid #ccd0d4;
	border-radius: var( --avr-radius );
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Viền phát sáng (glow) khi focus thay cho outline cứng mặc định của trình
   duyệt — cùng phong cách "mềm mại" với widget chatbot. */
.avr-field input:focus,
.avr-field select:focus,
.avr-field textarea:focus {
	outline: none;
	border-color: var( --avr-accent );
	box-shadow: 0 0 0 3px var( --avr-accent-glow );
}

.avr-field input[readonly] {
	background: #f0f6fc;
}

/* Ô số điện thoại = "mã vùng" (select) + "số nội địa" (input) — 2 giá trị
   RIÊNG BIỆT (JS tự gộp lại khi gửi form, xem syncContactValue() trong
   avr-frontend.js) nhưng thể hiện thành 1 khối liền mạch duy nhất: viền
   ngoài + nền chung nằm ở .avr-phone-group, 2 phần tử con bên trong tự
   trong suốt/không viền riêng, ngăn cách nhau bằng 1 đường kẻ mảnh. Tự có
   font-family/font-size riêng (không phụ thuộc danh sách selector chung ở
   trên — input[type="tel"] vốn không nằm trong danh sách đó, đây chính là
   nguyên nhân font hiển thị sai/không đồng bộ với các ô khác mà Juno báo). */
.avr-phone-group {
	display: flex;
	align-items: stretch;
	border: 1px solid #ccd0d4;
	border-radius: var( --avr-radius );
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.avr-phone-group:focus-within {
	border-color: var( --avr-accent );
	box-shadow: 0 0 0 3px var( --avr-accent-glow );
}

.avr-phone-country,
.avr-phone-number {
	font-family: inherit;
	/* Cùng lý do max(16px, ...) như nhóm input/select/textarea ở trên — ô số
	   điện thoại là nơi Juno gặp lỗi tự zoom rõ nhất (bản 1.15.5). */
	font-size: max( 16px, var( --avr-font-size-sm ) );
	color: inherit;
	border: none;
	background: transparent;
	box-sizing: border-box;
}

.avr-phone-country:focus,
.avr-phone-number:focus {
	outline: none;
	box-shadow: none;
}

.avr-phone-country {
	flex: 0 0 auto;
	max-width: 6.5em;
	padding: 9px 6px 9px 11px;
	border-right: 1px solid var( --avr-border );
	cursor: pointer;
}

.avr-phone-number {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 11px;
}

.avr-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.avr-hint {
	display: block;
	margin: 6px 0 0;
	font-size: 0.8em;
	color: #767b81;
}

.avr-license-field {
	border: none;
	padding: 0;
}

/* Dòng gợi ý khi khách chọn "Không" cho loại xe yêu cầu bằng lái (thêm bản 1.11.0, xem
   initLicenseVisibility() trong avr-frontend.js) — cố tình nổi bật hơn .avr-hint thường
   (màu cam cảnh báo) vì đây là điều kiện CHẶN gửi form, không chỉ là gợi ý thông thường. */
.avr-license-blocked-hint {
	margin: 6px 0 0;
	font-size: 0.85em;
	color: #b45309;
}

.avr-radio-group {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.avr-radio {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 400;
	font-size: var( --avr-font-size-sm );
}

.avr-checkbox-field {
	margin-top: -8px;
}

.avr-checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	font-size: var( --avr-font-size-sm );
	cursor: pointer;
}

/* Khối ẩn/hiện có điều kiện (ô điện thoại, ô "Khác", số lượng+dòng xe, bằng
   lái, giờ trả xe, trả xe nơi khác, box giá ước tính...) — xem
   setCollapsible() trong avr-frontend.js.
   LUÔN LÀ 1 THẺ BỌC RIÊNG (id + "avr-collapsible" nằm ở đây, KHÔNG chung với
   class avr-field/avr-field-row/avr-license-field/avr-estimate-box — mấy
   class đó nằm ở PHẦN TỬ CON bên trong). Lý do bọc riêng: kỹ thuật "co giãn
   chiều cao mượt bằng CSS Grid" bên dưới cần chính nó là grid container còn
   nội dung thật là 1 item con duy nhất — gộp chung 1 thẻ dễ vỡ layout (đặc
   biệt với <fieldset>: <legend> có cách render đặc biệt, "thoát" khỏi vùng
   bị overflow:hidden của chính fieldset, khiến legend hiện ra nhưng nội
   dung bên trong lại không — đây chính là lỗi Juno gặp phải ở bản trước).
   Mặc định (chưa mở) thu gọn hẳn về 0, không chiếm chỗ; lúc mở thì "nở" ra
   mượt mà thay vì bật/tắt cứng theo thuộc tính "hidden". Chỉ áp dụng SAU KHI
   JS bỏ thuộc tính "hidden" — trong lúc còn "hidden" thì luật display:none
   ở đầu file vẫn thắng như bình thường. */
.avr-collapsible {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	margin-bottom: 0;
	transition: grid-template-rows 0.32s ease, opacity 0.24s ease, margin-bottom 0.32s ease;
}

/* Phần tử con DUY NHẤT bên trong (nội dung thật) — ép co giãn về 0 chiều cao
   được (mặc định grid item có min-height:auto = không co nhỏ hơn nội dung,
   PHẢI ép min-height:0 thì kỹ thuật "0fr -> 1fr" mới thật sự thu gọn về 0). */
.avr-collapsible > * {
	overflow: hidden;
	min-height: 0;
}

.avr-collapsible.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
	margin-bottom: 14px;
}

/* Khi khối bọc nằm cùng hàng với 1 ô khác trong .avr-field-row (vd ô điện
   thoại cạnh ô "Contact via") — tự áp lại đúng hành vi giãn/min-width mà
   trước đây .avr-field vốn có (giờ .avr-field nằm ở thẻ CON, không còn trực
   tiếp là flex-item của hàng nữa nên cần khai báo lại ở đây). */
.avr-field-row > .avr-collapsible {
	flex: 1 1 0;
	min-width: 160px;
}

@media ( prefers-reduced-motion: reduce ) {
	.avr-collapsible {
		transition: none;
	}
}

/* Icon đen nhỏ đặt trước chữ trong nhãn ô (giờ nhận/trả xe, địa điểm, kênh
   liên hệ...) — LUÔN màu đen (không ăn theo màu nhấn của theme) theo đúng
   yêu cầu, dùng chung 1 class cho mọi icon trên form. */
.avr-icon {
	display: inline-block;
	vertical-align: -2px;
	width: 14px;
	height: 14px;
	margin-right: 3px;
	color: var( --avr-icon-color );
	flex-shrink: 0;
}

/* "Contact via" — nhóm chip (radio ẩn + nhãn bo tròn có icon) thay cho
   <select>, vì <option> gốc không thể hiện icon riêng ở bất kỳ trình duyệt
   nào. Icon minh hoạ kênh giữ màu đen (.avr-icon), riêng dấu tick chọn
   dùng màu nhấn của theme để phân biệt rõ chip nào đang được chọn. */
/* "Contact via" (4 chip: Gọi điện/WhatsApp/Zalo/Khác) từng xuống 2 dòng trên điện thoại,
   rơi "Khác" xuống dòng riêng — Juno muốn LUÔN đúng 1 dòng. Bản 1.16.3 từng chỉ ép
   nowrap/cuộn ngang riêng dưới @media(max-width:420px) — Juno test lại vẫn thấy xuống
   dòng, nhiều khả năng do: (a) khung chứa shortcode trên site bị theme/page-builder thu
   hẹp hơn bề rộng màn hình thật (media query dựa theo bề rộng MÀN HÌNH, không phải bề
   rộng khung chứa, nên có thể KHÔNG kích hoạt dù khung chứa thực tế đang hẹp), và/hoặc
   (b) CSS khác của theme thắng specificity. Bản 1.16.4: bỏ hẳn điều kiện @media, ép
   KHÔNG BAO GIỜ xuống dòng (flex-wrap: nowrap !important) áp dụng LUÔN cho mọi bề rộng
   (kể cả máy tính — vô hại vì máy tính thừa chỗ nên hàng chip vẫn hiện đủ, không cần
   cuộn), kèm !important + cho phép cuộn ngang trong chính hàng đó nếu vẫn không đủ chỗ
   (điện thoại cực hẹp/cỡ chữ Cài đặt để rất lớn) — đảm bảo chắc chắn đúng 1 dòng trong
   MỌI trường hợp, không phụ thuộc đoán đúng bối cảnh CSS thật của site. */
.avr-chip-group {
	display: flex;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 6px;
}

.avr-chip-group::-webkit-scrollbar {
	display: none;
}

.avr-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	/* flex-shrink:0 + white-space:nowrap — 1 chip KHÔNG BAO GIỜ tự co nhỏ lại/gãy chữ
	   ngay bên trong chính nó (chữ "WhatsApp" không bao giờ bị bóp/xuống dòng lưng
	   chừng) — !important cùng lý do với .avr-chip-group ở trên. */
	flex-shrink: 0 !important;
	white-space: nowrap !important;
	padding: 6px 8px;
	border: 1px solid #ccd0d4;
	border-radius: 999px;
	cursor: pointer;
	font-size: var( --avr-font-size-sm );
	font-weight: 400;
	background: #fff;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.avr-chip input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.avr-chip:has( input:focus-visible ) {
	box-shadow: 0 0 0 3px var( --avr-accent-glow );
}

.avr-chip-check {
	width: 12px;
	height: 12px;
	margin-left: 3px;
	margin-right: 0;
	color: var( --avr-accent );
	display: none;
}

.avr-chip-selected {
	border-color: var( --avr-accent );
	background: var( --avr-accent-glow );
}

.avr-chip-selected .avr-chip-check {
	display: inline-block;
}

/* Ô "Name" khi tự điền sẵn từ mã đặt phòng — nút "Not you?" nằm lồng bên
   trong, sát mép phải ô (giống nút "xoá" quen thuộc trong nhiều form), thay
   cho khối thông báo riêng bên dưới ở bản trước. */
.avr-input-with-action {
	position: relative;
	display: block;
}

.avr-input-with-action input {
	padding-right: 88px;
}

/* Giờ là thẻ <a> thật (xem class-avr-shortcode.php + avr-frontend.js) — CỐ
   TÌNH không đặt "color" ở đây để nó tự kế thừa đúng màu link mặc định của
   theme (yêu cầu "button/link kế thừa style từ template"), chỉ chỉnh vị
   trí/kích thước. */
.avr-inline-link-btn {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY( -50% );
	font-family: inherit;
	font-size: 0.85em;
	cursor: pointer;
}

/* Khung tổng giá — đổi thành 1 "thẻ" (card) trắng bo góc + viền mảnh + đổ
   bóng nhẹ, ĐÚNG cùng ngôn ngữ hình ảnh với .avr-form (khung form ngoài
   cùng) và với bong bóng tin nhắn của bot trong khung chatbot (nền trắng,
   viền/bóng nhạt thay vì mảng màu đặc) — thay cho nền xám phẳng #f7f9fb
   trước đây trông "lạc" khỏi giao diện chung (bản 1.15.5). */
.avr-estimate-box {
	background: #fff;
	border: 1px solid var( --avr-border );
	border-radius: calc( var( --avr-radius ) + 2px );
	padding: 14px 16px;
	margin: 2px 0 14px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.05 );
}

.avr-estimate-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 0;
}

/* Bản 1.15.5 từng đổi dòng này thành "nhãn phía trên, số tiền phía dưới"
   (flex-direction: column) — Juno KHÔNG muốn vậy (số tiền bị nhảy xuống
   khác hàng với nhãn). Bản 1.15.7: BỎ HẲN, quay lại đúng 1 hàng ngang như
   trước (kế thừa nguyên .avr-estimate-line ở trên, không còn override
   riêng nữa). */

/* "Estimated total" — Juno xếp chung nhóm với các nhãn field khác (Name/
   Vehicle/Pickup...), nên bản 1.16.1 đổi từ --avr-font-size-sm (nhỏ) sang
   đúng --avr-font-size (cỡ nhãn chung). Số tiền thật (#avr-estimate-total
   ngay bên dưới) VẪN giữ nhỏ như trước — Juno từng yêu cầu rõ số tiền
   "không nổi bật bằng cỡ chữ" (bản 1.15.6), lần này không nhắc lại nên giữ
   nguyên, chỉ đổi riêng phần nhãn. */
.avr-estimate-label {
	font-size: var( --avr-font-size, 15px );
	color: #6b7280;
}

.avr-estimate-total #avr-estimate-total {
	font-weight: 400;
	/* Bản 1.15.5 từng để 1.3em (to nổi bật kiểu "thẻ giá") — Juno KHÔNG muốn
	   vậy, muốn nhỏ như các thông số khác trong form. Đưa về đúng cỡ chữ
	   "control" dùng chung (--avr-font-size-sm, giống chữ trong ô nhập/
	   dropdown), chỉ còn nổi bật bằng màu, không còn nổi bật bằng cỡ chữ
	   (bản 1.15.6). */
	font-size: var( --avr-font-size-sm );
	color: var( --avr-accent-dark );
}

/* Dòng "Estimated price, may change..." — theo đúng quy định chung của Juno
   (bản 1.16.1): cùng công thức "-2px" như chữ trong ô nhập/dropdown/checkbox
   (--avr-font-size-sm), thêm in nghiêng. Trước đây (1.15.7) dùng riêng
   0.72em cố định, không ăn theo --avr-font-size-sm — giờ dùng chung biến để
   chỉ cần đổi 1 chỗ (--avr-font-size-sm) là mọi nơi tự đồng bộ. Giữ
   !important cho 2 thuộc tính này (KHÔNG thêm cho margin/color) — phòng hờ
   luật CSS khác (theme, cache/minify gộp file) đang thắng luật này mà không
   rõ nguyên nhân cụ thể (lý do gốc thêm !important từ bản 1.15.7). */
.avr-estimate-warning {
	margin: 6px 0 0;
	font-size: var( --avr-font-size-sm ) !important;
	font-style: italic !important;
	color: #8a8f94;
}

.avr-submit-row {
	margin-top: 4px;
}

/* Nút Gửi — thêm bóng đổ màu accent + hiệu ứng "nhấc nhẹ" khi hover/rê chuột,
   ĐÚNG kiểu nút tròn mở khung chat (.astro-chat-launcher trong
   chat-widget.css: bóng đổ theo màu, translateY(-2px) khi hover) — trước đây
   chỉ đổi màu nền lúc hover, không có bóng/chuyển động nào ở trạng thái bình
   thường nên trông "phẳng" hơn hẳn các nút bên khung chatbot (bản 1.15.6). */
.avr-submit-btn {
	font-family: inherit;
	background: var( --avr-accent );
	color: #fff;
	border: none;
	border-radius: var( --avr-radius );
	padding: 12px 20px;
	/* Trước 1.05em — to hơn hẳn nhãn Name/Vehicle (0.9em), Juno báo "quá to".
	   Giờ bằng đúng cỡ chữ gốc, không phóng to thêm (bản 1.15.5). */
	font-size: 1em;
	font-weight: 400;
	cursor: pointer;
	width: 100%;
	box-shadow: 0 10px 20px -8px var( --avr-accent-glow-strong );
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.avr-submit-btn:hover {
	background: var( --avr-accent-dark );
	transform: translateY( -2px );
	box-shadow: 0 14px 26px -8px var( --avr-accent-glow-strong );
}

.avr-submit-btn:active {
	transform: translateY( 0 ) scale( 0.98 );
	box-shadow: 0 4px 10px -6px var( --avr-accent-glow-strong );
}

.avr-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.avr-message {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: var( --avr-radius );
	font-size: 0.9em;
}

.avr-message-success {
	background: #eefaf0;
	color: #1e6b3a;
}

.avr-message-error {
	background: #fdecea;
	color: #a93226;
}

/* Ghi chú/quy định host tự nhập ở Cài đặt (rich text), hiện dưới cùng form —
   nằm ngoài .avr-form (không phải 1 phần thao tác gửi đơn) nhưng vẫn trong
   .avr-form-wrap nên vẫn ăn theo font/cỡ chữ đã chọn. */
.avr-form-notice {
	max-width: 480px;
	margin: 14px auto 0;
	padding: 14px 16px 2px;
	border-top: 1px solid var( --avr-border );
	font-size: 0.85em;
	line-height: 1.5;
	color: #555;
}

.avr-form-notice :first-child {
	margin-top: 0;
}

.avr-form-notice :last-child {
	margin-bottom: 0;
}

.avr-form-notice a {
	color: var( --avr-accent );
}

.avr-form-notice ul,
.avr-form-notice ol {
	margin: 0 0 12px 20px;
	padding: 0;
}

@media ( max-width: 420px ) {
	.avr-field-row {
		flex-direction: column;
	}
	.avr-field-narrow {
		max-width: 100%;
	}
	.avr-form {
		padding: 16px;
	}

	/* "Contact via" — nowrap/cuộn ngang/đệm chip giờ đã áp dụng UNCONDITIONAL ở base rule
	   .avr-chip-group/.avr-chip phía trên (bản 1.16.4, xem ghi chú đầy đủ ở đó) nên KHÔNG
	   lặp lại ở đây nữa (bản 1.16.3 từng đặt riêng trong @media này). Chỉ còn giữ lại tinh
	   chỉnh icon nhỏ hơn cho màn hình hẹp. */
	.avr-chip .avr-icon {
		margin-right: 2px;
	}
}