/* ttna-booking form-callback.css — form "Yêu cầu gọi lại nhanh" ([ttna_callback_form]), 27/07/2026.
   Cùng bảng màu/token với form-mini.css nhưng file độc lập (không phụ thuộc) — form này thường
   được đặt CẠNH form-mini (vd cùng trang chủ) nên tránh đụng class chung. */

.ttna-cb {
	--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-zalo: #0068FF;

	max-width: 640px; margin: 0 auto; font-size: 14.5px; color: var(--c-text);
	font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background: #fff; border-radius: 18px; padding: 24px 26px;
	box-shadow: 0 20px 50px rgba(15, 23, 42, .18);
	box-sizing: border-box;
}
.ttna-cb *, .ttna-cb *::before, .ttna-cb *::after { box-sizing: border-box; }

/* ---------- Header: icon + tiêu đề + nút đóng ---------- */
.ttna-cb-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.ttna-cb-header-icon {
	flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px;
	background: var(--c-orange); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.ttna-cb-header-icon svg { width: 22px; height: 22px; }
.ttna-cb-header-text { flex: 1; min-width: 0; }
.ttna-cb-header-text h3 { margin: 0 0 2px; font-size: 18px; font-weight: 800; color: var(--c-navy); }
.ttna-cb-header-text p { margin: 0; font-size: 13px; color: var(--c-text-soft); line-height: 1.4; }

/* Ẩn mặc định — theme chỉ "mở khoá" hiển thị nút này khi form nằm trong modal
   (xem .callback-modal .ttna-cb-close trong assets/scss/_footer.scss của theme). Nhúng form
   trực tiếp vào nội dung trang (ngoài modal) sẽ không thấy nút X vô nghĩa này. */
.ttna-cb-close {
	display: none; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
	border: none; background: var(--c-bg-light); color: var(--c-navy);
	align-items: center; justify-content: center; cursor: pointer; padding: 0;
	transition: background-color .15s, color .15s;
}
.ttna-cb-close svg { width: 15px; height: 15px; }
.ttna-cb-close:hover { background: var(--c-orange); color: #fff; }

/* ---------- Field cơ bản ---------- */
.ttna-cb-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ttna-cb-field label, .ttna-cb-subfield label { font-weight: 700; font-size: 12.5px; color: var(--c-navy); }
.ttna-cb-required { color: var(--c-orange); }

.ttna-cb-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.ttna-cb-input-icon { position: relative; display: flex; align-items: center; }
.ttna-cb-input-icon > svg { position: absolute; left: 14px; width: 18px; height: 18px; color: #9CA3AF; pointer-events: none; }
.ttna-cb-input-icon input, .ttna-cb-input-icon select {
	width: 100%; padding: 13px 16px 13px 42px; border: 1px solid var(--c-border); border-radius: 12px;
	font-size: 15px; font-family: inherit; color: var(--c-text); background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.ttna-cb-input-icon--select svg { color: var(--c-orange); }
.ttna-cb-input-icon select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding-right: 36px;
	font-weight: 600;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F97316' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
}
.ttna-cb-input-icon input:focus, .ttna-cb-input-icon select:focus {
	outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}

/* ---------- Nút "Thêm thông tin" — ô viền bo góc dẫn sang màn hình 2 ---------- */
.ttna-cb-extra-toggle {
	display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 16px;
	padding: 13px 14px; border: 1px solid var(--c-border); border-radius: 12px;
	background: #fff; cursor: pointer; font-family: inherit; text-align: left;
	transition: border-color .15s, background-color .15s;
}
.ttna-cb-extra-toggle:hover { border-color: var(--c-orange); background: #FFF7F1; }
.ttna-cb-extra-toggle__icon {
	flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #FFE4D1; color: var(--c-orange);
	display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; line-height: 1;
}
.ttna-cb-extra-toggle__text { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; color: var(--c-navy); }
.ttna-cb-extra-toggle__text small { display: block; font-weight: 500; color: var(--c-text-soft); font-size: 12px; margin-top: 1px; }
.ttna-cb-extra-toggle > svg { flex-shrink: 0; width: 16px; height: 16px; color: #9CA3AF; }

/* ---------- Nút chính (submit) ---------- */
.ttna-cb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 24px; border-radius: 10px; border: none; cursor: pointer;
	font-weight: 700; font-size: 14.5px; font-family: inherit; white-space: nowrap;
	transition: background .15s;
}
.ttna-cb-btn svg { width: 16px; height: 16px; }
.ttna-cb-btn-primary { background: var(--c-orange); color: #fff; }
.ttna-cb-btn-primary:hover:not(:disabled) { background: var(--c-orange-dark); }
.ttna-cb-btn-primary:disabled { background: #FCD9B8; cursor: not-allowed; }
.ttna-cb-btn-block { width: 100%; }

/* ---------- Nút Zalo lớn (kèm badge tròn) — dùng cả ở màn hình 1 và màn hình kết quả ---------- */
.ttna-cb-zalo-btn {
	display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
	margin-top: 12px; padding: 13px; border-radius: 10px; border: 1.5px solid var(--c-zalo); color: var(--c-zalo);
	text-decoration: none; font-weight: 700; font-size: 14.5px; background: #fff;
	transition: background-color .15s;
}
.ttna-cb-zalo-btn:hover { background: #EAF3FF; }
.ttna-cb-zalo-btn[hidden] { display: none; }
.ttna-cb-zalo-badge {
	flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--c-zalo); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.ttna-cb-zalo-badge svg { width: 13px; height: 13px; }

/* ---------- Dòng "Thông tin được bảo mật" ---------- */
.ttna-cb-trust {
	display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0;
	font-size: 12.5px; color: var(--c-text-soft);
}
.ttna-cb-trust svg { width: 14px; height: 14px; flex-shrink: 0; }
.ttna-cb-trust[hidden] { display: none; }

.ttna-cb-error-msg { color: #b3261e; font-weight: 600; margin-top: 12px; font-size: 13.5px; }

/* ---------- Màn hình 2: "Thông tin bổ sung" ---------- */
.ttna-cb-screen[hidden] { display: none; }

.ttna-cb-screen-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.ttna-cb-back {
	flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: none;
	background: var(--c-bg-light); color: var(--c-navy); display: flex; align-items: center; justify-content: center;
	cursor: pointer; padding: 0; transition: background-color .15s;
}
.ttna-cb-back svg { width: 16px; height: 16px; }
.ttna-cb-back:hover { background: #E5E7EB; }
.ttna-cb-screen-header h4 { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 800; color: var(--c-navy); }
.ttna-cb-badge {
	flex-shrink: 0; padding: 4px 10px; border-radius: 999px; background: var(--c-bg-light);
	color: var(--c-text-soft); font-size: 11.5px; font-weight: 700; white-space: nowrap;
}

.ttna-cb-extra-fields { display: flex; flex-direction: column; gap: 16px; }
.ttna-cb-subfield { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ttna-cb-subfield input, .ttna-cb-subfield textarea {
	width: 100%; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 11px;
	font-size: 14.5px; font-family: inherit; color: var(--c-text);
	transition: border-color .15s, box-shadow .15s;
}
.ttna-cb-subfield input:focus, .ttna-cb-subfield textarea:focus {
	outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}
.ttna-cb-subfield .ttna-cb-input-icon input { padding-left: 42px; border-radius: 11px; }

/* Route stepper: 2 chấm số 1/2 nối bằng đường thẳng đứng — trực quan hoá "điểm đi -> điểm đến". */
.ttna-cb-route { display: flex; flex-direction: column; }
.ttna-cb-route-item { display: flex; gap: 12px; position: relative; }
.ttna-cb-route-item:not(:last-child) { padding-bottom: 18px; }
.ttna-cb-route-item:not(:last-child)::after {
	content: ''; position: absolute; left: 10px; top: 26px; bottom: 0; width: 1px; background: var(--c-border);
}
.ttna-cb-route-dot {
	flex-shrink: 0; margin-top: 2px; width: 22px; height: 22px; border-radius: 50%;
	background: var(--c-navy); color: #fff; font-size: 11px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}
.ttna-cb-route-item .ttna-cb-subfield { flex: 1; min-width: 0; }

.ttna-cb-screen-footer {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
	margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--c-border);
}
.ttna-cb-zalo-link {
	display: inline-flex; align-items: center; gap: 6px; color: var(--c-zalo);
	font-weight: 700; font-size: 13.5px; text-decoration: none;
}
.ttna-cb-zalo-link svg { width: 16px; height: 16px; }
.ttna-cb-screen-footer .ttna-cb-btn { flex: 1 1 auto; min-width: 160px; }

/* ---------- Kết quả ---------- */
.ttna-cb-result {
	margin-top: 8px; display: flex; align-items: center; gap: 14px;
	background: #EAFBF0; border: 1px solid #B7EBC6; border-radius: 12px; padding: 16px 18px;
}
.ttna-cb-result[hidden] { display: none; }
.ttna-cb-result-icon {
	flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--c-green); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.ttna-cb-result-icon svg { width: 20px; height: 20px; }
.ttna-cb-result-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ttna-cb-result-text strong { color: var(--c-green-dark); font-size: 15px; }
.ttna-cb-result-text span { color: var(--c-text-soft); font-size: 13px; }

@media (max-width: 640px) {
	.ttna-cb { padding: 20px 16px; border-radius: 16px; }
	.ttna-cb-screen-footer { flex-direction: column-reverse; align-items: stretch; }
	.ttna-cb-screen-footer .ttna-cb-zalo-link { justify-content: center; }
	.ttna-cb-btn-primary { padding: 14px; }
}