/* Contact Form Styles */
.contact-form {
	position: relative;
	max-width: 500px;
	margin: 2rem auto 0 auto;
	background: #fff8f2;
	padding: 2rem 1.5rem;
	border-radius: 16px;
	box-shadow: 0 2px 16px rgba(203, 166, 123, 0.08);
	text-align: left;
}

.contact-form .agb {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 1rem;
}

.contact-form .result {
	align-items: center;
}

.contact-form label {
	display: block;
	color: var(--dark-blue-color);

	a:visited {
		color: var(--dark-blue-color);
	}
}

.contact-form input,
textarea {
	width: 100%;
	padding: 0.7rem 1rem;
	margin-bottom: 1.2rem;
	border: 1px solid var(--form-color);
	border-radius: 8px;
	resize: vertical;
	background: #fff;
	color: #300122;
	transition: border 0.2s;

	&:focus {
		border-color: var(--form-accent-color);
		outline: none;
	}
}

.contact-form button[type="submit"] {
	width: 100%;
	margin-top: 0.5rem;
	cursor: pointer;
}

.contact-form-result {
	margin-top: 1rem;
	font-weight: 500;
	color: var(--dark-blue-color);
	text-align: center;
}

/* styling for the agb checkbox */
input[type="checkbox"] {
	box-sizing: border-box;
	width: 1.5rem;
	height: 1.5rem;
	margin: 6px;
	padding: 0;
	flex-shrink: 0;
	border: 1px solid var(--form-color);
	appearance: none;
	background-color: white;
	outline: none;
	transition: outline 0.1s;
}

input[type="checkbox"]:checked {
	background-size: cover;
	padding: 1px;
}

input[type="checkbox"]:not(:disabled):checked {
	border-color: var(--form-accent-color);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %23274c77" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
}

.overlay {
	visibility: hidden;
	/* hide initially */
	position: absolute;
	flex-direction: column;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: var(--dark-blue-color);
	background: rgba(255, 255, 255, 0.5);
	font-size: 2rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.message {
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	color: var(--dark-blue-color);
	padding: 1rem;
}

.spinner {
	visibility: hidden;
	width: 3rem;
	aspect-ratio: 1;
	--_c: no-repeat radial-gradient(farthest-side, var(--dark-blue-color) 92%, #0000);
	background:
		var(--_c) top,
		var(--_c) left,
		var(--_c) right,
		var(--_c) bottom;
	background-size: 12px 12px;
	animation: l7 1s infinite;
}

@keyframes l7 {
	to {
		transform: rotate(.5turn)
	}
}