/**
 * DS Elements — Khối báo giá
 *
 * Phần ô nhập style bằng bộ chọn phần tử thuần (input, select, textarea, button)
 * chứ không bám class của plugin form nào. Nhờ vậy form của Elementor Pro, CF7
 * hay plugin khác cắm vào đều mang đúng giao diện panel, và đổi plugin form sau
 * này không phải viết lại CSS.
 */

.elementor-widget-ds-cta-form {
	width: 100%;
	min-width: 0;
}

.ds-cf {
	position: relative;
	width: 100%;
	min-width: 0;
	isolation: isolate;
	overflow: hidden;

	--ds-cf-pad: var(--ds-space-12);
	--ds-cf-text-width: 34%;
	--ds-cf-form-width: 42%;
	--ds-cf-feat-cols: 2;

	--ds-cf-overlay-solid: 62%;
	--ds-cf-overlay-fade: 88%;

	background: var(--ds-cf-overlay, var(--ds-color-brand));
	border-radius: var(--ds-cf-radius, var(--ds-radius-lg));
}

.ds-cf *,
.ds-cf *::before,
.ds-cf *::after {
	box-sizing: border-box;
}

/* --- Ảnh nền + lớp phủ -------------------------------------------------- */

.ds-cf__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: 100% center;
	background-repeat: no-repeat;
}

.ds-cf__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--ds-cf-overlay, var(--ds-color-brand)) 0,
		var(--ds-cf-overlay, var(--ds-color-brand)) var(--ds-cf-overlay-solid),
		transparent var(--ds-cf-overlay-fade)
	);
}

/* --- Khung trong -------------------------------------------------------- */

.ds-cf__inner {
	position: relative;
	z-index: 1;
	padding: var(--ds-cf-pad);

	display: flex;
	align-items: center;
	gap: var(--ds-space-8);
}

.ds-cf__text {
	flex: 0 0 var(--ds-cf-text-width);
	min-width: 0;
}

.ds-cf__form {
	flex: 0 0 var(--ds-cf-form-width);
	min-width: 0;
}

/* --- Chữ ---------------------------------------------------------------- */

.ds-cf__heading {
	margin: 0;
	color: var(--ds-cf-heading-color, var(--ds-color-white));
	font-size: var(--ds-fs-h2);
	font-weight: var(--ds-fw-black);
	line-height: var(--ds-lh-h2);
	text-transform: uppercase;
}

.ds-cf__sub {
	margin: var(--ds-space-3) 0 0;
	color: var(--ds-cf-sub-color, var(--ds-color-accent));
	font-size: var(--ds-fs-small);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-small);
	text-transform: uppercase;
	letter-spacing: var(--ds-ls-nav);
}

.ds-cf__features {
	margin: var(--ds-space-6) 0 0;
	padding: 0;
	list-style: none;

	display: grid;
	grid-template-columns: repeat(var(--ds-cf-feat-cols), minmax(0, auto));
	justify-content: start;
	gap: var(--ds-space-3) var(--ds-space-6);
}

.ds-cf__feature {
	display: flex;
	align-items: center;
	gap: var(--ds-space-2);
	min-width: 0;

	color: var(--ds-cf-feat-color, var(--ds-color-white));
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
}

/* Vòng tròn viền quanh biểu tượng — vẽ bằng border của chính span. */
.ds-cf__feature-icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;

	border: 1px solid var(--ds-cf-feat-icon-color, var(--ds-color-white));
	border-radius: var(--ds-radius-pill);
	color: var(--ds-cf-feat-icon-color, var(--ds-color-white));
}

.ds-cf__feature-icon svg {
	width: 13px;
	height: 13px;
	display: block;
	fill: currentColor;
}

.ds-cf__feature-icon i {
	font-size: 12px;
	line-height: 1;
}

/* --- Biểu mẫu cắm ngoài vào --------------------------------------------- */

/* Các quy tắc bên dưới bọc thêm .ds-cf cho đủ độ ưu tiên: widget Form của
   Elementor Pro tự nạp CSS cho nút gửi, bộ chọn một lớp của mình thua nó và nút
   giữ nguyên màu xanh mặc định. */

.ds-cf__placeholder {
	margin: 0;
	padding: var(--ds-space-8);
	color: var(--ds-color-white);
	font-size: var(--ds-fs-small);
	text-align: center;
	border: 1px dashed var(--ds-color-on-dark-muted);
	border-radius: var(--ds-cf-field-radius, var(--ds-radius-sm));
}

.ds-cf .ds-cf__form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.ds-cf .ds-cf__form select,
.ds-cf .ds-cf__form textarea {
	width: 100%;
	padding: var(--ds-space-3) var(--ds-space-4);

	background: var(--ds-cf-field-bg, var(--ds-color-white));
	color: var(--ds-cf-field-color, var(--ds-color-body));
	border: 1px solid transparent;
	border-radius: var(--ds-cf-field-radius, var(--ds-radius-sm));

	font-size: var(--ds-fs-small);
	font-family: inherit;
	line-height: var(--ds-lh-base);
}

.ds-cf__form textarea {
	min-height: 96px;
	resize: vertical;
}

.ds-cf__form input:focus-visible,
.ds-cf__form select:focus-visible,
.ds-cf__form textarea:focus-visible {
	outline: 2px solid var(--ds-color-accent);
	outline-offset: 2px;
}

.ds-cf__form ::placeholder {
	color: var(--ds-color-muted);
	opacity: 1;
}

.ds-cf .ds-cf__form input[type="submit"],
.ds-cf .ds-cf__form button[type="submit"] {
	width: 100%;
	padding: var(--ds-space-4) var(--ds-space-6);

	background: var(--ds-cf-btn-bg, var(--ds-color-accent));
	color: var(--ds-cf-btn-color, var(--ds-color-white));
	border: 0;
	border-radius: var(--ds-cf-field-radius, var(--ds-radius-sm));

	font-size: var(--ds-fs-button);
	font-family: inherit;
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-button);
	letter-spacing: var(--ds-ls-button);
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--ds-transition);
}

.ds-cf .ds-cf__form input[type="submit"]:hover,
.ds-cf .ds-cf__form button[type="submit"]:hover {
	background: var(--ds-color-accent-dark);
}

/* Nhãn và thông báo lỗi của plugin form nằm trên nền navy — ép sáng lại,
   nếu không chúng thừa hưởng màu chữ tối của theme và biến mất. */
.ds-cf__form label,
.ds-cf__form .wpcf7-not-valid-tip,
.ds-cf__form .wpcf7-response-output {
	color: var(--ds-color-white);
	font-size: var(--ds-fs-small);
}

/* --- Màn nhỏ ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.ds-cf {
		--ds-cf-pad: var(--ds-space-8);
		--ds-cf-text-width: 42%;
		--ds-cf-form-width: 52%;
		--ds-cf-overlay-solid: 92%;
		--ds-cf-overlay-fade: 100%;
	}
}

@media (max-width: 767px) {
	.ds-cf {
		--ds-cf-pad: var(--ds-space-6);
		--ds-cf-radius: var(--ds-radius-md);
	}

	.ds-cf__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--ds-space-6);
	}

	/* Xếp dọc thì hai cột phải chiếm trọn bề ngang, không giữ % của desktop. */
	.ds-cf__text,
	.ds-cf__form {
		flex: 1 1 auto;
	}

	.ds-cf__bg::after {
		background: var(--ds-cf-overlay, var(--ds-color-brand));
		opacity: .92;
	}
}