/* Teodor Forms: Contact Form 7 6.1 front-end styles (includes/css/styles.css), unchanged, so the forms look the same without it. */

.wpcf7 .screen-reader-response {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	word-wrap: normal !important;
	word-break: normal !important;
}

.wpcf7 .hidden-fields-container {
	display: none;
}

.wpcf7 form .wpcf7-response-output {
	margin: 2em 0.5em 1em;
	padding: 0.2em 1em;
	border: 2px solid #00a0d2; /* Blue */
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #46b450; /* Green */
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: #dc3232; /* Red */
}

.wpcf7 form.spam .wpcf7-response-output {
	border-color: #f56e28; /* Orange */
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #ffb900; /* Yellow */
}

.wpcf7-form-control-wrap {
	position: relative;
}

.wpcf7-not-valid-tip {
	color: #dc3232; /* Red */
	font-size: 1em;
	font-weight: normal;
	display: block;
}

.use-floating-validation-tip .wpcf7-not-valid-tip {
	position: relative;
	top: -2ex;
	left: 1em;
	z-index: 100;
	border: 1px solid #dc3232;
	background: #fff;
	padding: .2em .8em;
	width: 24em;
}

.wpcf7-list-item {
	display: inline-block;
	margin: 0 0 0 1em;
}

.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
	content: " ";
}

.wpcf7-spinner {
	visibility: hidden;
	display: inline-block;
	background-color: #23282d; /* Dark Gray 800 */
	opacity: 0.75;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 100%;
	padding: 0;
	margin: 0 24px;
	position: relative;
}

form.submitting .wpcf7-spinner {
	visibility: visible;
}

.wpcf7-spinner::before {
	content: '';
	position: absolute;
	background-color: #fbfbfc; /* Light Gray 100 */
	top: 4px;
	left: 4px;
	width: 6px;
	height: 6px;
	border: none;
	border-radius: 100%;
	transform-origin: 8px 8px;
	animation-name: spin;
	animation-duration: 1000ms;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce) {
	.wpcf7-spinner::before {
		animation-name: blink;
		animation-duration: 2000ms;
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes blink {
	from {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.wpcf7 [inert] {
	opacity: 0.5;
}

.wpcf7 input[type="file"] {
	cursor: pointer;
}

.wpcf7 input[type="file"]:disabled {
	cursor: default;
}

.wpcf7 .wpcf7-submit:disabled {
	cursor: not-allowed;
}

.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
	direction: ltr;
}

.wpcf7-reflection > output {
	display: list-item;
	list-style: none;
}

.wpcf7-reflection > output[hidden] {
	display: none;
}

/* 14px between the last field and the submit button in every form (layout template). */
form.wpcf7-form .sc_form_field_button input[type="submit"] {
	margin-top: 14px;
}

/* Every form laid out like the hero form (teodor-blocks tdr.css, .tdr-formcard): the label above
   its field, fields and the submit button the full width of the box. The colours of the box and of
   the labels stay the box's own (white labels on the dark coupon boxes). `body form.wpcf7-form`
   beats the theme's form rules but not the .tdr-formcard ones, which add the hero colours. */
body form.wpcf7-form p,
body form.wpcf7-form br { margin: 0; }
body form.wpcf7-form .row { display: block; margin: 0 0 14px; padding: 0; }
body form.wpcf7-form .sc_form_field_title { position: static; display: block; width: auto; max-width: none; font-size: 14.5px; font-weight: 600; line-height: 1.4; margin: 0 0 5px; padding: 0; text-align: left; text-transform: none; }
body form.wpcf7-form .sc_form_field_wrap { display: block; width: 100%; padding-left: 0; }
body form.wpcf7-form input[type="text"],
body form.wpcf7-form input[type="tel"],
body form.wpcf7-form input[type="email"],
body form.wpcf7-form select,
body form.wpcf7-form textarea {
	width: 100%;
	background: #fff;
	border: 1.5px solid #dde5ea;
	border-radius: 10px;
	color: #16222b;
	font-family: inherit;
	font-size: 17px;
	line-height: 1.4;
	padding: 14px 16px;
	height: auto;
}
body form.wpcf7-form input::placeholder { color: #9bacb7; }
body form.wpcf7-form input:focus,
body form.wpcf7-form select:focus { outline: none; border-color: #50bfff; }
body form.wpcf7-form select,
body form.wpcf7-form .select_container select { -webkit-appearance: none; appearance: none; padding-right: 44px; background-color: #fff !important; border-color: #dde5ea !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2344555f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-position: right 16px center !important; background-size: 18px 18px !important; background-repeat: no-repeat !important; }
body form.wpcf7-form .select_container select.tf-open,
body form.wpcf7-form select.tf-open { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2344555f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E") !important; }
@supports selector(select:open) {
	body form.wpcf7-form .select_container select:open, body form.wpcf7-form select:open { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2344555f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E") !important; }
}
/* The theme wraps selects in a grey .select_container with its own arrow. */
body form.wpcf7-form .select_container { background: none !important; border: 0 !important; padding: 0; }
body form.wpcf7-form .select_container::before,
body form.wpcf7-form .select_container::after { display: none !important; }
body form.wpcf7-form .sc_form_field_submit { margin: 0; text-align: center; }
body form.wpcf7-form input[type="submit"] {
	width: 100%;
	border: 0;
	border-radius: 40px;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 18px !important;
	font-weight: 700;
	line-height: 1;
	padding: 17px 20px;
}
body form.wpcf7-form .wpcf7-spinner { position: absolute; }
