/*
 * Contact Form 7 renders its own markup for acceptance checkboxes and
 * response text; this maps that default output onto the existing
 * .ui-check / .ui-checklist look from app.css instead of duplicating it.
 */

.feedback__form .wpcf7-form-control-wrap {
	display: block;
}

.feedback__form .ui-checklist .wpcf7-list-item {
	margin: 0;
}

.feedback__form .ui-checklist label {
	display: -ms-inline-flexbox;
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	position: relative;
	cursor: pointer;
}

.feedback__form .ui-checklist input[type='checkbox'] {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
}

.feedback__form .ui-checklist label::before {
	content: '';
	display: block;
	flex: 0 0 auto;
	width: 4.8rem;
	height: 4.8rem;
	background-color: rgba(255, 255, 255, 0.2);
	border: 0.2rem solid #fff;
	border-radius: 1rem;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 60%;
	transition: 0.4s;
}

.feedback__form .ui-checklist label:has(input:checked)::before {
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.16602 9.88091L8.40844 14.1666L15.8327 6.66663' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.feedback__form .ui-checklist .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.5rem;
	font-size: 1.2rem;
}

@media (min-width: 1200px) {
	.feedback__form .ui-checklist label::before {
		width: 5rem;
		height: 5rem;
	}
}

.feedback__form .wpcf7-response-output {
	width: 100%;
	margin: 1rem 0 0;
	font-size: 1.3rem;
}

.feedback__form .wpcf7-not-valid-tip {
	display: block;
	font-size: 1.2rem;
	color: #ffb4b4;
}

.feedback__form .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
