/**
 * Required Checkbox Validation for Elementor — front-end styles.
 *
 * Colors are driven by CSS custom properties. To restyle per site, override
 * the variables on `.elementor-field-type-checkbox` (see the dark example at
 * the bottom of this file).
 */

.elementor-field-type-checkbox {
	--rcef-size: 20px;
	--rcef-radius: 3px;
	--rcef-gap: 10px;
	--rcef-border: #242424;
	--rcef-check-bg: #242424;
	/* Checkmark SVG. The color lives inside the data-URI as `stroke='%23xxxxxx'`. */
	--rcef-checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6.2l2.5 2.6L10 3'/%3E%3C/svg%3E");
	--rcef-label: #242424;
	--rcef-label-size: 14px;
	--rcef-invalid: #e04141;
	--rcef-focus: #ba967d;
}

.elementor-field-type-checkbox .elementor-field-subgroup {
	display: flex;
	flex-direction: column;
	gap: var(--rcef-gap);
}

.elementor-field-type-checkbox .elementor-field-option {
	display: flex;
	align-items: center;
	gap: var(--rcef-gap);
}

.elementor-field-type-checkbox input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	margin: 0;
	width: var(--rcef-size);
	height: var(--rcef-size);
	border: 1px solid var(--rcef-border);
	border-radius: var(--rcef-radius);
	background: transparent center / 12px 12px no-repeat;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.elementor-field-type-checkbox input[type="checkbox"]:checked {
	background-color: var(--rcef-check-bg);
	border-color: var(--rcef-check-bg);
	background-image: var(--rcef-checkmark);
}

.elementor-field-type-checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--rcef-focus);
	outline-offset: 2px;
}

.elementor-field-type-checkbox label {
	color: var(--rcef-label);
	font-size: var(--rcef-label-size);
	font-weight: 400;
	cursor: pointer;
	margin: 0;
}

.elementor-field-type-checkbox.rcef-invalid input[type="checkbox"] {
	border-color: transparent;
	box-shadow: 0 0 0 2px var(--rcef-invalid);
	animation: rcef-shake .4s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes rcef-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-4px); }
	40%, 60% { transform: translateX(4px); }
}

.elementor-field-group.rcef-no-margin {
	margin-bottom: 0 !important;
}

/**
 * Light-on-dark preset (white border + checked background, dark checkmark) —
 * for forms sitting on a dark modal/section. Adapt per site instead of
 * editing the default rules above.
 *
 * .elementor-field-type-checkbox {
 *     --rcef-border: #ffffff;
 *     --rcef-check-bg: #ffffff;
 *     --rcef-checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6.2l2.5 2.6L10 3'/%3E%3C/svg%3E");
 *     --rcef-label: #c9c9c9;
 * }
 */