/* ttna-booking form.css — layout dạng "app" 1 trang: 3 thẻ dịch vụ + card tuyến đường/hàng
   hoá/điều kiện bốc xếp + sidebar tóm tắt, kết quả hiện thêm bên dưới sau khi tính giá.
   Màu sắc + font đồng bộ với theme "Chuyển Nhà Nghệ An" (assets/css/style.css của theme):
   cam #F97316 (--btn--cta), xanh lá #15803D (--btn--primary), chữ đậm #1F2937, viền #E5E7EB,
   nền phụ #F3F4F6, font "Be Vietnam Pro". Hard-code giá trị hex (không dùng var() của theme)
   để form không phụ thuộc thứ tự nạp CSS — shortcode có thể được nhúng ở nhiều nơi khác nhau. */

.ttna-form {
	--c-navy: #1F2937;
	--c-navy-dark: #111827;
	--c-orange: #F97316;
	--c-orange-dark: #DB6410;
	--c-green: #15803D;
	--c-green-dark: #116530;
	--c-bg-light: #F9FAFB;
	--c-text: #1F2937;
	--c-text-soft: #6B7280;
	--c-border: #E5E7EB;
	--c-radius: 16px;

	width: 100%; max-width: 1200px; margin: 0 auto; font-size: 15px; color: var(--c-text);
	font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	box-sizing: border-box;
}
.ttna-form *, .ttna-form *::before, .ttna-form *::after { box-sizing: border-box; }

/* Trang dùng shortcode [ttna_booking_form] thường được tạo bằng template "trang hẹp" của theme
   (.page-content--narrow, max-width 860px) — mở rộng riêng cho trang chứa form để khớp bề rộng
   chuẩn của theme (1200px), không đụng tới các trang khác dùng cùng template. */
body:has(.ttna-form) .page-content--narrow { max-width: 1200px; }

/* Tiêu đề trang (H1 "Tính Giá Cước" do theme tự in phía trên nội dung) bị trùng lặp với tiêu đề
   ngay trong card của form ("Tính giá cước chuyển đồ", cũng là H1) — ẩn tiêu đề của theme trên
   trang này, chỉ giữ 1 H1 duy nhất bên trong form. */
body:has(.ttna-form) .single-page__header { display: none; }

/* Header: icon + tiêu đề bên trái 1 hàng, thanh bước (stepper) full-width canh giữa ở hàng dưới */
.ttna-form-header {
	display: flex; flex-direction: column; gap: 16px;
	background: #fff; border: 1px solid var(--c-border); border-radius: var(--c-radius);
	padding: 18px 22px; margin-bottom: 20px; box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
}
.ttna-form-header-left { display: flex; align-items: center; gap: 14px; }
.ttna-form-header-icon {
	flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px;
	background: var(--c-green); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.ttna-form-header-icon svg { width: 26px; height: 26px; }
.ttna-form-header-text h1 { margin: 0 0 2px; font-size: 21px; font-weight: 800; color: var(--c-navy); line-height: 1.25; }
.ttna-form-header-text p { margin: 0; font-size: 13.5px; color: var(--c-text-soft); }

/* Stepper — full-width, canh giữa, có đường kẻ phân cách với hàng tiêu đề phía trên */
.ttna-stepper { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; padding-top: 16px; border-top: 1px solid var(--c-border); }
.ttna-stepper-step { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ttna-stepper-circle {
	width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: #fff; border: 2px solid var(--c-border); color: #9CA3AF; font-weight: 700; font-size: 13px;
	transition: background .2s, color .2s, border-color .2s;
}
.ttna-stepper-label { font-size: 12.5px; font-weight: 600; color: var(--c-text-soft); white-space: nowrap; }
.ttna-stepper-line { flex: 1 1 24px; height: 2px; background: var(--c-border); margin: 0 10px; min-width: 16px; transition: background .2s; }
.ttna-stepper-step.is-active .ttna-stepper-circle { background: var(--c-orange); border-color: var(--c-orange); color: #fff; }
.ttna-stepper-step.is-active .ttna-stepper-label { color: var(--c-orange); }
.ttna-stepper-step.is-done .ttna-stepper-circle { background: var(--c-green); border-color: var(--c-green); color: #fff; }
.ttna-stepper-step.is-done .ttna-stepper-label { color: var(--c-green); }
.ttna-stepper-line.is-done { background: var(--c-green); }
.ttna-stepper-step.is-complete .ttna-stepper-circle { background: var(--c-green); border-color: var(--c-green); color: #fff; }
.ttna-stepper-step.is-complete .ttna-stepper-label { color: var(--c-green); }

.ttna-step-desc { margin: 0 0 18px; color: var(--c-text-soft); font-size: 14px; }

/* ===== Thẻ chọn dịch vụ (3 thẻ luôn hiện, chọn lại bất cứ lúc nào) ===== */
.ttna-service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.ttna-service-card {
	position: relative; text-align: left; cursor: pointer;
	background: #fff; border: 2px solid var(--c-border); border-radius: var(--c-radius);
	padding: 16px; display: flex; align-items: flex-start; gap: 14px;
	font-family: inherit; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ttna-service-card:hover { border-color: #86EFAC; transform: translateY(-2px); }
.ttna-service-card.active { border-color: var(--c-green); box-shadow: 0 6px 18px rgba(21,128,61,.14); }

/* Ô chọn kiểu radio: viền tròn rỗng khi chưa chọn, chấm xanh ở giữa khi đang chọn */
.ttna-service-card-select {
	position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 50%;
	border: 2px solid var(--c-border); background: #fff; transition: border-color .15s;
}
.ttna-service-card-select::after {
	content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--c-green);
	transform: scale(0); transition: transform .15s;
}
.ttna-service-card.active .ttna-service-card-select { border-color: var(--c-green); }
.ttna-service-card.active .ttna-service-card-select::after { transform: scale(1); }

.ttna-service-card-illu {
	flex-shrink: 0; width: 92px; height: 92px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
	background: var(--c-bg-light);
}
.ttna-service-card-illu img { height: 74px; width: auto; max-width: 100%; object-fit: contain; }
.ttna-service-card-illu--trọ { background: #FFF1E6; }
.ttna-service-card-illu--nha { background: #E6F6EB; }
.ttna-service-card-illu--vp { background: #F3F4F6; }
.ttna-service-card-content { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 22px; }
.ttna-service-card-title { font-size: 16px; font-weight: 800; color: var(--c-navy); }
.ttna-service-card-desc { font-size: 13px; color: var(--c-text-soft); line-height: 1.5; }
.ttna-service-card-tag {
	align-self: flex-start; margin-top: 6px; background: #E6F6EB; color: var(--c-green-dark); font-size: 12px; font-weight: 700;
	border-radius: 999px; padding: 4px 12px;
}

/* Info note */
.ttna-info-note {
	display: flex; align-items: flex-start; gap: 10px; margin-top: 18px;
	background: #F3F4F6; color: #374151; border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.5;
}
.ttna-info-note--blue { background: #F3F4F6; color: #374151; }
.ttna-info-note--green { background: #E6F6EB; color: #1E6B3D; }
.ttna-info-note-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.ttna-info-note-icon svg { width: 18px; height: 18px; }
.ttna-info-note--blue .ttna-info-note-icon { color: #4B5563; }
.ttna-info-note--green .ttna-info-note-icon { color: var(--c-green); }

.ttna-secure-note { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--c-text-soft); }
.ttna-secure-note svg { width: 16px; height: 16px; color: var(--c-green); flex-shrink: 0; }
.ttna-secure-note--center { justify-content: center; width: 100%; margin-top: 10px; }

/* 2-column layout chính — flexbox wrap thay vì grid để tự co giãn theo bề rộng container thật
   (form có thể bị nhúng trong cột hẹp của trang), không cần media query. */
.ttna-step-grid { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.ttna-step-main { flex: 2.4 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ttna-step-sidebar {
	flex: 1 1 300px; min-width: 0; background: #fff; border: 1px solid var(--c-border);
	border-radius: var(--c-radius); padding: 20px; position: sticky; top: 16px;
}

/* Thẻ nội dung (Tuyến đường & thời gian / Đồ cần chuyển / Điều kiện bốc xếp) */
.ttna-card {
	background: #fff; border: 1px solid var(--c-border); border-radius: var(--c-radius);
	padding: 22px; box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
}
.ttna-card-title {
	display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
	font-size: 15.5px; font-weight: 800; color: var(--c-navy);
}
.ttna-card-title-icon {
	flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: #E6F6EB; color: var(--c-green);
	display: flex; align-items: center; justify-content: center;
}
.ttna-card-title-icon svg { width: 16px; height: 16px; }

/* Route fields — điểm đi / nút đổi chiều / điểm đến trên cùng 1 hàng */
.ttna-route-fields { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 16px; }
.ttna-route-fields .ttna-field { flex: 1; margin-bottom: 0; }
.ttna-route-swap {
	flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--c-bg-light);
	border: 1px solid var(--c-border); color: var(--c-navy); cursor: pointer;
	display: flex; align-items: center; justify-content: center; margin-bottom: 1px;
	transition: border-color .15s, color .15s;
}
.ttna-route-swap svg { width: 16px; height: 16px; }
.ttna-route-swap:hover { border-color: var(--c-green); color: var(--c-green); }

/* Field / input */
.ttna-field { margin-bottom: 14px; }
.ttna-field:last-child { margin-bottom: 0; }
.ttna-field label { display: block; font-weight: 700; font-size: 13px; color: var(--c-navy); margin-bottom: 6px; }
.ttna-field input[type="text"],
.ttna-field input[type="tel"],
.ttna-field input[type="number"],
.ttna-field input[type="datetime-local"],
.ttna-field select,
.ttna-field textarea {
	width: 100%; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 8px;
	font-size: 14px; font-family: inherit; color: var(--c-text); background: #fff;
}
.ttna-field input:focus, .ttna-field select:focus, .ttna-field textarea:focus {
	outline: none; border-color: var(--c-green); box-shadow: 0 0 0 3px rgba(21,128,61,.13);
}
.ttna-input-icon { position: relative; }
.ttna-input-icon > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: #6B7280; pointer-events: none; }
/* !important cần thiết: các rule field ở trên (.ttna-field input[type="text"]...) có độ đặc thù
   (specificity) cao hơn .ttna-input-icon input do khai báo thêm [type="..."], nên luôn thắng và
   đè mất padding-left: 38px này — khiến icon bị chữ trong ô đè lên (lỗi hiển thị icon). */
.ttna-input-icon input, .ttna-input-icon select { padding-left: 38px !important; }

.ttna-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.ttna-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 14px; }

/* Option cards (VAT / đường nhỏ) */
.ttna-option-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.ttna-option-card {
	display: flex; align-items: center; gap: 10px; cursor: pointer;
	border: 1px solid var(--c-border); border-radius: 10px; padding: 12px; background: #fff;
	transition: border-color .15s, background .15s;
}
.ttna-option-card:has(input:checked) { border-color: var(--c-green); background: #F0FBF4; }
.ttna-option-card input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--c-green); flex-shrink: 0; }
.ttna-option-icon {
	flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; background: #F3F4F6; color: var(--c-navy);
	display: flex; align-items: center; justify-content: center;
}
.ttna-option-icon svg { width: 17px; height: 17px; }
.ttna-option-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ttna-option-text strong { color: var(--c-navy); font-size: 13.5px; }
.ttna-option-text small { color: var(--c-text-soft); }

/* ===== Đồ cần chuyển — accordion theo nhóm ===== */
.ttna-item-group { border: 1px solid var(--c-border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.ttna-item-group:last-child { margin-bottom: 0; }
.ttna-item-group-header {
	width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 16px;
	background: var(--c-bg-light); border: none; cursor: pointer; font-family: inherit;
	font-size: 14px; font-weight: 700; color: var(--c-navy); text-align: left;
}
.ttna-item-group-icon {
	flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; background: #fff; color: var(--c-green);
	display: flex; align-items: center; justify-content: center;
}
.ttna-item-group-icon svg { width: 14px; height: 14px; }
.ttna-item-group-name { flex: 1; }
.ttna-item-group-chevron { flex-shrink: 0; width: 18px; height: 18px; color: var(--c-text-soft); transition: transform .2s; }
.ttna-item-group-chevron svg { width: 18px; height: 18px; }
.ttna-item-group.is-open .ttna-item-group-chevron { transform: rotate(180deg); }
.ttna-item-group-body { display: none; padding: 14px 16px; }
.ttna-item-group.is-open .ttna-item-group-body { display: block; }

.ttna-item-table { display: flex; flex-direction: column; }
.ttna-item-table-head {
	display: grid; grid-template-columns: 1.4fr 1fr 2fr; gap: 10px; padding: 0 0 10px;
	font-size: 12px; font-weight: 700; color: var(--c-text-soft); text-transform: uppercase; letter-spacing: .02em;
}
.ttna-item-row {
	display: grid; grid-template-columns: 1.4fr 1fr 2fr; gap: 10px; align-items: center;
	padding: 10px 0; border-top: 1px solid var(--c-border);
}
.ttna-item-row .ttna-item-name { font-weight: 600; font-size: 13.5px; color: var(--c-text); }
.ttna-item-row .ttna-item-name small { font-weight: 400; color: var(--c-text-soft); }

/* Bộ đếm số lượng dạng nút [-] [số] [+] */
.ttna-qty-stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--c-border); border-radius: 8px; overflow: hidden; width: fit-content; }
.ttna-qty-btn {
	width: 30px; height: 30px; border: none; background: var(--c-bg-light); color: var(--c-navy);
	font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center;
	transition: background .15s;
}
.ttna-qty-btn:hover { background: #E6F6EB; color: var(--c-green); }
.ttna-item-qty {
	width: 40px; height: 30px; border: none; border-left: 1px solid var(--c-border); border-right: 1px solid var(--c-border);
	text-align: center; font-size: 13.5px; font-weight: 700; color: var(--c-text); font-family: inherit;
	-moz-appearance: textfield;
}
.ttna-item-qty::-webkit-outer-spin-button, .ttna-item-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ttna-item-qty:focus { outline: none; }

/* Chip bật/tắt dịch vụ tuỳ chọn (Tháo/Lắp/Đóng gói/Bọc lót) */
.ttna-item-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.ttna-item-toggle { position: relative; cursor: pointer; }
.ttna-item-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ttna-item-toggle span {
	display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
	border: 1px solid var(--c-border); background: #fff; color: var(--c-text-soft);
	font-size: 12px; font-weight: 600; transition: background .15s, border-color .15s, color .15s;
}
.ttna-item-toggle input:checked + span { background: var(--c-green); border-color: var(--c-green); color: #fff; }
.ttna-item-toggle input:focus-visible + span { outline: 2px solid var(--c-orange); outline-offset: 1px; }

/* Buttons — pill-shape đồng bộ với .btn của theme (border-radius: 999px, chữ đậm, hover nhấc nhẹ) */
.ttna-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 24px; border-radius: 999px; border: none; cursor: pointer;
	font-weight: 700; font-size: 14.5px; letter-spacing: .02em; font-family: inherit;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ttna-btn svg { width: 17px; height: 17px; }
.ttna-btn-primary { background: var(--c-orange); color: #fff; box-shadow: 0 8px 18px rgba(249,115,22,.28); }
.ttna-btn-primary:hover:not(:disabled) { background: var(--c-orange-dark); transform: translateY(-2px); }
.ttna-btn-primary:disabled { background: #FCD9B8; box-shadow: none; cursor: not-allowed; }
.ttna-btn-secondary { background: #eee; color: var(--c-text); }
.ttna-btn-block { width: 100%; }
.ttna-link-back, .ttna-link-inline {
	display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
	background: none; border: none; cursor: pointer; font-family: inherit;
	font-size: 13.5px; font-weight: 600; color: var(--c-text-soft); padding: 12px 0 0;
}
.ttna-link-back svg, .ttna-link-inline svg { width: 15px; height: 15px; }
.ttna-link-back:hover, .ttna-link-inline:hover { color: var(--c-navy); }

/* Summary card (sidebar) */
.ttna-summary-card { background: var(--c-bg-light); border: 1px solid var(--c-border); border-radius: 10px; padding: 4px 14px; margin-bottom: 14px; }
.ttna-summary-card-title { font-weight: 800; font-size: 13px; color: var(--c-navy); text-transform: uppercase; letter-spacing: .02em; padding: 12px 0 6px; }
.ttna-summary-service { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--c-border); }
.ttna-summary-icon { width: 34px; height: 34px; border-radius: 8px; background: #E6F6EB; color: var(--c-green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ttna-summary-icon svg { width: 18px; height: 18px; }
.ttna-summary-service-name { flex: 1; font-weight: 700; font-size: 13.5px; color: var(--c-navy); }
.ttna-summary-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--c-border); font-size: 13px; }
.ttna-summary-row:last-child { border-bottom: none; }
.ttna-summary-row > span:first-child { color: var(--c-text-soft); flex-shrink: 0; }
.ttna-summary-row > span:last-child { color: var(--c-navy); font-weight: 600; text-align: right; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Kết quả tính giá (bước 3) ===== */
.ttna-result-box { display: flex; flex-direction: column; gap: 14px; }

.ttna-result-minicards { display: flex; gap: 12px; flex-wrap: wrap; }
.ttna-result-minicard {
	flex: 1 1 180px; display: flex; align-items: center; gap: 10px;
	background: var(--c-bg-light); border: 1px solid var(--c-border); border-radius: 10px; padding: 12px 14px;
}
.ttna-result-minicard-icon { width: 36px; height: 36px; border-radius: 9px; background: #F3F4F6; color: var(--c-navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ttna-result-minicard-icon svg { width: 18px; height: 18px; }
.ttna-result-minicard-label { display: block; font-size: 12px; color: var(--c-text-soft); }
.ttna-result-minicard-value { display: block; font-size: 16px; font-weight: 800; color: var(--c-navy); }

.ttna-result-total-card { background: #FFF1E6; border: 1px solid #FFD5B3; border-radius: var(--c-radius); padding: 18px; text-align: center; }
.ttna-result-total-label { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--c-orange-dark); margin-bottom: 6px; }
.ttna-result-total-amount { display: block; font-size: 27px; font-weight: 800; color: var(--c-navy); }
.ttna-result-total-note { display: block; margin-top: 6px; font-size: 12.5px; color: var(--c-text-soft); }

.ttna-result-lines { background: #fff; border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden; }
.ttna-result-line {
	display: grid; grid-template-columns: 32px auto 1fr; align-items: center;
	gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--c-border); font-size: 13.5px;
}
.ttna-result-line:last-child { border-bottom: none; }
.ttna-result-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #F3F4F6; color: var(--c-navy); }
.ttna-result-icon svg { width: 15px; height: 15px; }
.ttna-result-label { color: var(--c-text-soft); white-space: nowrap; }
.ttna-result-amount { font-weight: 700; color: var(--c-navy); text-align: right; }

.ttna-result-trust { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.ttna-result-trust-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--c-text-soft); }
.ttna-result-trust-item svg { width: 15px; height: 15px; color: var(--c-green); flex-shrink: 0; }

/* Trạng thái thành công (sidebar bước 3 sau khi gửi) */
.ttna-success-icon {
	width: 56px; height: 56px; border-radius: 50%; background: #DCF3E4; color: var(--c-green);
	display: flex; align-items: center; justify-content: center; margin: 4px auto 12px;
}
.ttna-success-icon svg { width: 28px; height: 28px; }
.ttna-success-title { text-align: center; color: var(--c-green); font-size: 17px; margin: 0 0 6px; }
.ttna-success-desc { text-align: center; margin-bottom: 16px; }

.ttna-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ttna-error { color: #b3261e; font-weight: 600; margin-top: 10px; font-size: 13.5px; }
.ttna-success { color: #1e7d34; font-weight: 600; margin-top: 10px; font-size: 13.5px; }
.ttna-field-error { display: block; color: #b3261e; font-size: 12.5px; margin-top: 4px; }
.ttna-input-invalid { border-color: #b3261e !important; }

/* Gợi ý địa chỉ (Goong Place AutoComplete) */
.ttna-autocomplete-wrapper { position: relative; }
.ttna-autocomplete-suggestions {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 50; margin-top: 4px;
	background: #fff; border: 1px solid var(--c-border); border-radius: 8px;
	max-height: 220px; overflow-y: auto; box-shadow: 0 8px 20px rgba(15,23,42,.12);
}
.ttna-autocomplete-item { padding: 9px 12px; cursor: pointer; font-size: 13.5px; }
.ttna-autocomplete-item:hover { background: var(--c-bg-light); }

@media (max-width: 900px) {
	.ttna-service-cards { grid-template-columns: 1fr; }
	.ttna-grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
	.ttna-step-sidebar { position: static; }
}

@media (max-width: 640px) {
	.ttna-item-table-head { display: none; }
	.ttna-item-row { grid-template-columns: 1fr; gap: 8px; padding: 12px 0; }
}

@media (max-width: 480px) {
	.ttna-form-header { padding: 16px; border-radius: 12px; }
	.ttna-form-header-text h2 { font-size: 18px; }
	.ttna-stepper-label { display: none; }
	.ttna-grid-2, .ttna-grid-4, .ttna-option-cards { grid-template-columns: 1fr; }
	.ttna-result-total-amount { font-size: 22px; }
	.ttna-route-fields { flex-direction: column; align-items: stretch; }
	.ttna-route-swap { align-self: center; }
}