/* ==========================================================================
   Client Contact Form — styles
   All key visual properties use !important to stay consistent regardless
   of theme CSS.
   ========================================================================== */

.cf-form-wrapper,
.cf-form-wrapper * {
	box-sizing: border-box !important;
}

.cf-form-wrapper {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	font-family: inherit;
	color: #1f2430;
}

.cf-form-wrapper .cf-field {
	margin-bottom: 22px;
}

.cf-form-wrapper .cf-field:last-of-type {
	margin-bottom: 0;
}

.cf-form-wrapper label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.1px;
	margin-bottom: 8px;
	color: #1f2430;
}

/* ---------- base inputs (compact, not "thick") ---------- */

.cf-form-wrapper input[type="text"],
.cf-form-wrapper input[type="tel"],
.cf-form-wrapper input[type="email"],
.cf-form-wrapper select,
.cf-form-wrapper textarea {
	display: block !important;
	width: 100% !important;
	height: 48px !important;
	padding: 0 14px !important;
	line-height: 46px !important;
	border: 1.5px solid #dfe3ea !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: #1f2430 !important;
	background-color: #fbfbfd !important;
	background-image: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	appearance: none !important;
	-webkit-appearance: none !important;
	margin: 0 !important;
}

.cf-form-wrapper textarea {
	height: auto !important;
	line-height: 1.5 !important;
	padding: 12px 14px !important;
	resize: vertical;
	min-height: 96px !important;
}

.cf-form-wrapper select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23596072' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	padding-right: 36px !important;
}

.cf-form-wrapper input:focus,
.cf-form-wrapper select:focus,
.cf-form-wrapper textarea:focus {
	outline: none !important;
	border-color: #2563eb !important;
	background-color: #ffffff !important;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

.cf-form-wrapper input[readonly] {
	background-color: #f1f5f9 !important;
	color: #64748b !important;
	border-color: #e2e8f0 !important;
}

.cf-form-wrapper small {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: #8a90a2;
}

/* ---------- verify row (input + Send Code button) ---------- */

.cf-verify-row,
.cf-otp-row {
	display: flex !important;
	gap: 10px;
	align-items: stretch;
}

.cf-verify-row input,
.cf-otp-row input {
	flex: 1;
	min-width: 0;
}

.cf-otp-row {
	margin-top: 10px;
}

/* ---------- buttons (forced, theme-proof) ---------- */

.cf-form-wrapper .cf-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 48px !important;
	padding: 0 18px !important;
	border-radius: 10px !important;
	border: none !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 1 !important;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
	text-shadow: none !important;
}

.cf-form-wrapper .cf-btn:active {
	transform: translateY(1px);
}

.cf-form-wrapper .cf-btn-secondary {
	background: #eef2ff !important;
	color: #2f3b6b !important;
	border: 1.5px solid #dfe3ea !important;
}

.cf-form-wrapper .cf-btn-secondary:hover:not(:disabled) {
	background: #e2e8ff !important;
	border-color: #c9d1f5 !important;
}

.cf-form-wrapper .cf-btn-secondary:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Submit button: always shows the bold "hover" blue, not a lighter default */
.cf-form-wrapper .cf-btn-primary {
	background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
	color: #ffffff !important;
	width: 100%;
	height: 48px !important;
	padding: 0 18px !important;
	font-size: 16px !important;
	border-radius: 10px !important;
	box-shadow: 0 6px 16px rgba(29, 78, 216, 0.32) !important;
}

.cf-form-wrapper .cf-btn-primary:hover:not(:disabled) {
	background: linear-gradient(135deg, #1e40af, #1e3a8a) !important;
	box-shadow: 0 8px 20px rgba(29, 78, 216, 0.38) !important;
}

.cf-form-wrapper .cf-btn-primary:disabled {
	background: #b9c6e6 !important;
	box-shadow: none !important;
	cursor: not-allowed;
}

.cf-form-wrapper .cf-link-btn {
	background: none !important;
	border: none !important;
	color: #2563eb !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer;
	padding: 4px 6px !important;
	height: auto !important;
}

.cf-form-wrapper .cf-link-btn:hover {
	text-decoration: underline;
}

/* ---------- status + messages ---------- */

.cf-status {
	margin-top: 8px;
	font-size: 13px;
	min-height: 16px;
}

.cf-status.cf-success {
	color: #16a34a;
	font-weight: 600;
}

.cf-status.cf-error {
	color: #dc2626;
}

.cf-form-message {
	margin-top: 20px;
	padding: 14px 16px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 14.5px;
	display: none;
}

.cf-form-message.cf-success {
	display: block;
	background: #dcfce7;
	color: #166534;
}

.cf-form-message.cf-error {
	display: block;
	background: #fee2e2;
	color: #991b1b;
}

/* ==========================================================================
   Styled multi-select dropdown (States field) — looks identical to a
   normal select field when closed.
   ========================================================================== */

.cf-multiselect {
	position: relative !important;
}

.cf-form-wrapper .cf-multiselect-trigger {
	display: flex !important;
	width: 100% !important;
	height: 48px !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 14px !important;
	border: 1.5px solid #dfe3ea !important;
	border-radius: 10px !important;
	background-color: #fbfbfd !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: #1f2430 !important;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	text-align: left;
}

.cf-form-wrapper .cf-multiselect-trigger:hover {
	border-color: #c7cede !important;
}

.cf-multiselect.open .cf-multiselect-trigger {
	border-color: #2563eb !important;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
	background-color: #ffffff !important;
}

.cf-multiselect-trigger-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cf-multiselect-trigger-text.cf-placeholder {
	color: #8a90a2 !important;
}

.cf-multiselect-arrow {
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	border-right: 2px solid #596072;
	border-bottom: 2px solid #596072;
	transform: rotate(45deg);
	margin-top: -4px;
	transition: transform 0.15s ease;
}

.cf-multiselect.open .cf-multiselect-arrow {
	transform: rotate(-135deg);
	margin-top: 4px;
}

.cf-multiselect-panel {
	position: absolute !important;
	top: calc(100% + 8px) !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 9999 !important;
	background: #ffffff !important;
	border: 1.5px solid #dfe3ea !important;
	border-radius: 12px !important;
	box-shadow: 0 12px 32px rgba(20, 20, 43, 0.16) !important;
	padding: 12px !important;
}

.cf-form-wrapper .cf-multiselect-search {
	display: block !important;
	width: 100% !important;
	height: 38px !important;
	padding: 0 12px !important;
	line-height: 36px !important;
	border: 1.5px solid #e5e8ee !important;
	border-radius: 8px !important;
	font-size: 13.5px !important;
	margin: 0 0 8px 0 !important;
}

.cf-form-wrapper .cf-multiselect-search:focus {
	outline: none !important;
	border-color: #2563eb !important;
}

.cf-multiselect-actions {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
	padding: 0 2px;
}

.cf-multiselect-options {
	max-height: 220px;
	overflow-y: auto;
	border-top: 1px solid #f0f1f5;
	padding-top: 4px;
}

.cf-multiselect-option {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 8px 8px !important;
	border-radius: 8px;
	font-size: 14px !important;
	font-weight: 400 !important;
	cursor: pointer;
	margin: 0 !important;
}

.cf-multiselect-option:hover {
	background: #f4f6fb;
}

.cf-multiselect-option input[type="checkbox"] {
	width: 16px !important;
	height: 16px !important;
	accent-color: #2563eb;
	flex-shrink: 0;
	cursor: pointer;
	margin: 0 !important;
}

.cf-multiselect-option span {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 560px) {
	.cf-verify-row {
		flex-direction: column !important;
	}

	.cf-verify-row .cf-btn {
		width: 100%;
	}

	.cf-otp-row {
		flex-direction: row !important;
		align-items: stretch;
	}

	.cf-otp-row input {
		flex: 1 1 auto !important;
		min-width: 0;
		max-width: 160px;
	}

	.cf-otp-row .cf-btn {
		flex: 1 1 auto !important;
		width: auto;
	}

	.cf-multiselect-options {
		max-height: 180px;
	}
}

@media (max-width: 380px) {
	.cf-form-wrapper label {
		font-size: 13.5px;
	}

	.cf-form-wrapper .cf-btn-primary {
		font-size: 15px !important;
	}
}

/* ==========================================================================
   Hard override for Phone / Email fields specifically — some themes apply
   their own pill-shaped styling to input[type="tel"] / input[type="email"].
   This forces them to match every other field exactly.
   ========================================================================== */

.cf-form-wrapper #cf-phone,
.cf-form-wrapper #cf-email {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	flex: 1 1 100% !important;
	height: 48px !important;
	line-height: 46px !important;
	padding: 0 14px !important;
	margin: 0 !important;
	border: 1.5px solid #dfe3ea !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: #1f2430 !important;
	background-color: #fbfbfd !important;
	background-image: none !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
}

.cf-form-wrapper #cf-phone:focus,
.cf-form-wrapper #cf-email:focus {
	border-color: #2563eb !important;
	background-color: #ffffff !important;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

@media (max-width: 560px) {
	.cf-form-wrapper #cf-phone,
	.cf-form-wrapper #cf-email {
		height: 0px !important;
		min-height: 0px !important;
	}
}