/**
 * Contact Form 7 Styler widget - CRDev Elementor UI Kit
 * https://camilorivera.dev
 */

.ceuk-cf7-styler {
	--ceuk-cf7-gap: 20px;

	--ceuk-cf7-label-color: #1d1f21;
	--ceuk-cf7-label-margin: 6px;

	--ceuk-cf7-field-color: #1d1f21;
	--ceuk-cf7-field-placeholder-color: #8a8a8a;
	--ceuk-cf7-field-bg: #ffffff;
	--ceuk-cf7-field-bg-focus: #ffffff;
	--ceuk-cf7-field-border-color: #d5d8dc;
	--ceuk-cf7-field-border-color-focus: #1d1f21;
	--ceuk-cf7-field-border-width: 1px;
	--ceuk-cf7-field-radius: 6px;
	--ceuk-cf7-field-shadow-focus-color: rgba(29, 31, 33, 0.12);
	--ceuk-cf7-textarea-max-height: 300px;

	--ceuk-cf7-choice-color: #1d1f21;
	--ceuk-cf7-choice-size: 16px;

	--ceuk-cf7-button-color: #ffffff;
	--ceuk-cf7-button-color-hover: #ffffff;
	--ceuk-cf7-button-bg: #1d1f21;
	--ceuk-cf7-button-bg-hover: #3a3d40;
	--ceuk-cf7-button-radius: 6px;
	--ceuk-cf7-button-width: auto;

	--ceuk-cf7-tip-color: #c0392b;

	--ceuk-cf7-response-success-color: #2e7d32;
	--ceuk-cf7-response-success-bg: #eaf6ea;
	--ceuk-cf7-response-error-color: #c0392b;
	--ceuk-cf7-response-error-bg: #fdecea;
}

.ceuk-cf7-styler *,
.ceuk-cf7-styler *::before,
.ceuk-cf7-styler *::after {
	box-sizing: border-box;
}

.ceuk-cf7-styler .wpcf7-form p {
	margin: 0 0 var(--ceuk-cf7-gap);
}

.ceuk-cf7-styler .wpcf7-form label {
	display: block;
	margin-bottom: var(--ceuk-cf7-label-margin);
	color: var(--ceuk-cf7-label-color);
}

.ceuk-cf7-styler .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not([type="checkbox"]):not([type="radio"]) {
	display: block;
	width: 100%;
	color: var(--ceuk-cf7-field-color);
	background-color: var(--ceuk-cf7-field-bg);
	border: var(--ceuk-cf7-field-border-width) solid var(--ceuk-cf7-field-border-color);
	border-radius: var(--ceuk-cf7-field-radius);
	padding: 12px 16px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ceuk-cf7-styler textarea.wpcf7-form-control {
	min-height: 140px;
	max-height: var(--ceuk-cf7-textarea-max-height);
	overflow-y: auto;
	resize: vertical;
}

.ceuk-cf7-styler .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not([type="checkbox"]):not([type="radio"])::placeholder {
	color: var(--ceuk-cf7-field-placeholder-color);
	opacity: 1;
}

.ceuk-cf7-styler .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not([type="checkbox"]):not([type="radio"]):focus {
	outline: none;
	background-color: var(--ceuk-cf7-field-bg-focus);
	border-color: var(--ceuk-cf7-field-border-color-focus);
	box-shadow: 0 0 0 3px var(--ceuk-cf7-field-shadow-focus-color);
}

.ceuk-cf7-styler [type="checkbox"],
.ceuk-cf7-styler [type="radio"] {
	accent-color: var(--ceuk-cf7-choice-color);
	width: var(--ceuk-cf7-choice-size);
	height: var(--ceuk-cf7-choice-size);
	vertical-align: middle;
}

.ceuk-cf7-styler .wpcf7-submit {
	display: inline-block;
	width: var(--ceuk-cf7-button-width);
	color: var(--ceuk-cf7-button-color);
	background-color: var(--ceuk-cf7-button-bg);
	border: 0;
	border-radius: var(--ceuk-cf7-button-radius);
	padding: 12px 28px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ceuk-cf7-styler .wpcf7-submit:hover {
	color: var(--ceuk-cf7-button-color-hover);
	background-color: var(--ceuk-cf7-button-bg-hover);
}

.ceuk-cf7-styler .wpcf7-spinner {
	margin: 0 0 0 10px;
}

.ceuk-cf7-styler .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: var(--ceuk-cf7-tip-color);
	font-size: 0.85em;
}

.ceuk-cf7-styler .wpcf7-response-output {
	margin: var(--ceuk-cf7-gap) 0 0;
	padding: 12px 16px;
	border-radius: var(--ceuk-cf7-field-radius);
	border: 1px solid transparent;
}

.ceuk-cf7-styler .wpcf7-form.sent ~ .wpcf7-response-output,
.ceuk-cf7-styler .wpcf7-form.mail-sent-ok ~ .wpcf7-response-output {
	color: var(--ceuk-cf7-response-success-color);
	background-color: var(--ceuk-cf7-response-success-bg);
	border-color: currentColor;
}

.ceuk-cf7-styler .wpcf7-form.invalid ~ .wpcf7-response-output,
.ceuk-cf7-styler .wpcf7-form.failed ~ .wpcf7-response-output,
.ceuk-cf7-styler .wpcf7-form.spam-blocked ~ .wpcf7-response-output {
	color: var(--ceuk-cf7-response-error-color);
	background-color: var(--ceuk-cf7-response-error-bg);
	border-color: currentColor;
}

.ceuk-cf7-styler__empty {
	padding: 20px;
	text-align: center;
	background: #f5f5f5;
	color: #6d6d6d;
}