/*
 * Thermory claim form. Mirrors the theme's Gravity Forms look
 * (src/sass/components/_components.formblock.scss) with its own class names,
 * so the theme's select/upload scripts leave it alone.
 */

.tcf {
	--tcf-red: #DA291C;
	--tcf-black: #2C2A29;
	--tcf-white: #FFFFFF;
	--tcf-grey-200: #80807F;
	--tcf-grey-100: #9B9B9A;
	--tcf-grey-50: #CDCDCC;
	--tcf-grey-25: #E6E6E6;
	--tcf-grey-10: #FAFAFA;
	--tcf-line: #CCCCCC;
	--tcf-field-height: 56px;
	--tcf-field-font: 20px;

	color: var(--tcf-black);
	font-family: Aeonik, sans-serif;
	font-size: 16px;
	line-height: 24px;
}

.tcf *,
.tcf *::before,
.tcf *::after {
	box-sizing: border-box;
}

.tcf [hidden] {
	display: none !important;
}

.tcf-noscript {
	padding: 24px;
	border: 2px solid var(--tcf-grey-50);
}

/* ---------- Grid ----------
 * Rows are spaced by --tcf-gap below each item rather than by row-gap, so a field
 * can span three rows of this grid (see .tcf-field--aligned). The negative margin
 * takes back the space after the last row.
 */

.tcf-grid {
	--tcf-gap: 28px;

	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 0;
	margin-bottom: calc(-1 * var(--tcf-gap));
}

.tcf-grid > * {
	grid-column: 1 / -1;
	min-width: 0;
	margin-bottom: var(--tcf-gap);
}

.tcf-grid > .tcf-span-1 { grid-column: span 1; }
.tcf-grid > .tcf-span-2 { grid-column: span 2; }
.tcf-grid > .tcf-span-3 { grid-column: span 3; }
.tcf-grid > .tcf-span-4 { grid-column: span 4; }
.tcf-grid > .tcf-span-5 { grid-column: span 5; }
.tcf-grid > .tcf-span-6 { grid-column: span 6; }
.tcf-grid > .tcf-span-7 { grid-column: span 7; }
.tcf-grid > .tcf-span-8 { grid-column: span 8; }
.tcf-grid > .tcf-span-9 { grid-column: span 9; }
.tcf-grid > .tcf-span-10 { grid-column: span 10; }
.tcf-grid > .tcf-span-11 { grid-column: span 11; }
.tcf-grid > .tcf-span-12 { grid-column: 1 / -1; }

/* ---------- Fields ---------- */

.tcf-field {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	padding: 0;
	border: 0;
	scroll-margin-top: 140px;
}

/*
 * Side-by-side fields: label (+ description), control and error each take one row
 * of the parent grid. Controls stay level whatever the label length, and an error
 * pushes the next row down instead of lifting one control above its neighbours.
 * The error element, empty or not, carries the space below the row.
 */
@supports (grid-template-rows: subgrid) {
	.tcf-grid > .tcf-field--aligned {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
		grid-template-columns: minmax(0, 1fr);
		justify-content: stretch;
		row-gap: 0;
		margin-bottom: 0;
	}

	.tcf-field--aligned > .tcf-field__head {
		align-self: end;
	}

	.tcf-field--aligned > .tcf-error,
	.tcf-field--aligned > .tcf-error:empty {
		display: block;
		padding-bottom: var(--tcf-gap);
	}
}

.tcf .tcf-label {
	display: block;
	margin: 0;
	padding: 0;
	color: var(--tcf-black);
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	text-transform: uppercase;
}

.tcf-req {
	margin-left: 2px;
	color: var(--tcf-red);
	font-size: 16px;
}

.tcf-desc,
.tcf-repeater__desc {
	margin: 0;
	color: var(--tcf-grey-100);
	font-size: 16px;
	line-height: 24px;
}

.tcf-label + .tcf-desc {
	margin-top: 4px;
}

.tcf .tcf-input,
.tcf .tcf-select,
.tcf .tcf-textarea {
	display: block;
	width: 100%;
	height: var(--tcf-field-height);
	margin: 8px 0 0;
	padding: 12px 16px;
	border: 2px solid var(--tcf-grey-50);
	border-radius: 0;
	background-color: var(--tcf-white);
	box-shadow: none;
	color: var(--tcf-black);
	font-family: inherit;
	font-size: var(--tcf-field-font);
	line-height: 28px;
	-webkit-appearance: none;
	appearance: none;
}

.tcf .tcf-input::placeholder,
.tcf .tcf-textarea::placeholder {
	color: var(--tcf-grey-100);
	opacity: 1;
}

.tcf .tcf-textarea {
	height: 168px;
	resize: vertical;
}

.tcf .tcf-select {
	padding-right: 46px;
	background-image: url("../../assets/images/dropdown-downarrow.svg");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 20px 15px;
	cursor: pointer;
	text-overflow: ellipsis;
}

.tcf .tcf-select.is-placeholder {
	color: var(--tcf-grey-100);
}

.tcf .tcf-select option {
	color: var(--tcf-black);
}

.tcf .tcf-input:focus,
.tcf .tcf-select:focus,
.tcf .tcf-textarea:focus {
	border-color: var(--tcf-black);
	outline: none;
}

.tcf .tcf-field.is-invalid .tcf-input,
.tcf .tcf-field.is-invalid .tcf-select,
.tcf .tcf-field.is-invalid .tcf-textarea {
	border-color: var(--tcf-red);
}

.tcf-error {
	margin-top: 8px;
	color: var(--tcf-red);
	font-size: 16px;
	line-height: 22px;
}

.tcf-error:empty {
	display: none;
	margin-top: 0;
}

/* Radios, as in the theme */

.tcf-field--radio legend {
	float: left;
	width: 100%;
	padding: 0;
}

.tcf-radios {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 40px;
	padding-top: 16px;
}

.tcf .tcf-radio {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	font-size: 20px;
	line-height: 28px;
	text-transform: none;
	cursor: pointer;
}

.tcf .tcf-radio input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.tcf-radio span::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	margin-right: 16px;
	border: 2px solid var(--tcf-grey-50);
	border-radius: 50%;
	background: var(--tcf-white);
	vertical-align: middle;
	transition: border 0.15s ease;
}

.tcf-radio span {
	display: inline-flex;
	align-items: center;
}

.tcf-radio input:checked + span::before {
	border: 11px solid var(--tcf-black);
}

.tcf-radio input:focus-visible + span::before {
	outline: 2px solid var(--tcf-red);
	outline-offset: 2px;
}

.tcf-field--radio.is-invalid .tcf-radio span::before {
	border-color: var(--tcf-red);
}

.tcf-field--radio.is-invalid .tcf-radio input:checked + span::before {
	border-color: var(--tcf-black);
}

/* ---------- Static content ---------- */

.tcf-divider {
	padding-top: 32px;
	border-bottom: 1px solid var(--tcf-line);
}

.tcf .tcf-heading {
	margin: 0;
	font-size: 28px;
	line-height: 36px;
	font-weight: 500;
}

.tcf-note,
.tcf-note p {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
}

.tcf-note p + p {
	margin-top: 4px;
}

/* ---------- Groups (questionnaires) ---------- */

.tcf .tcf-group__title {
	margin: 4px 0 16px;
	font-size: 20px;
	line-height: 28px;
	font-weight: 500;
}

.tcf-group > .tcf-grid {
	--tcf-gap: 24px;
}

/* ---------- Repeaters ---------- */

.tcf-repeater {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.tcf-repeater > * {
	width: 100%;
}

.tcf-repeater > .tcf-add {
	width: auto;
}

.tcf-sections {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.tcf-section {
	scroll-margin-top: 140px;
}

.tcf-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	padding: 24px 0 8px;
	border-bottom: 1px solid var(--tcf-line);
}

.tcf .tcf-section__title {
	margin: 0;
	font-size: 28px;
	line-height: 36px;
	font-weight: 500;
}

.tcf-rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tcf-row {
	padding: 16px 16px 20px;
	border: 1px solid var(--tcf-grey-25);
	background: var(--tcf-grey-10);
	scroll-margin-top: 140px;
}

.tcf-row__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 24px;
	margin-bottom: 8px;
}

.tcf-row__title {
	color: var(--tcf-grey-200);
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tcf-row > .tcf-grid {
	--tcf-gap: 20px;

	column-gap: 16px;
}

/* ---------- Buttons ---------- */

.tcf .tcf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: auto;
	max-height: none;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: inherit;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease-in, color 0.2s ease-in, border-color 0.2s ease-in;
}

.tcf .tcf-btn--primary {
	padding: 10px 46px;
	border: 2px solid var(--tcf-red);
	background: transparent;
	color: var(--tcf-red);
	font-size: 20px;
	line-height: 24px;
}

.tcf .tcf-btn--primary:hover:not(:disabled),
.tcf .tcf-btn--primary:focus-visible {
	background: var(--tcf-red);
	color: var(--tcf-white);
}

.tcf .tcf-btn--primary:disabled {
	opacity: 0.6;
	cursor: progress;
}

.tcf .tcf-btn--secondary {
	padding: 10px 28px;
	border: 2px solid var(--tcf-black);
	background: var(--tcf-grey-10);
	color: var(--tcf-black);
	font-size: 16px;
	line-height: 24px;
}

.tcf .tcf-btn--secondary:hover,
.tcf .tcf-btn--secondary:focus-visible {
	background: var(--tcf-black);
	color: var(--tcf-white);
}

.tcf .tcf-add--small {
	padding: 6px 20px;
	font-size: 15px;
}

.tcf-add__plus {
	font-size: 22px;
	line-height: 1;
	font-weight: 400;
}

.tcf .tcf-link-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tcf-grey-200);
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
	cursor: pointer;
	transition: color 0.2s ease-in;
}

.tcf .tcf-link-btn:hover,
.tcf .tcf-link-btn:focus-visible {
	color: var(--tcf-red);
}

.tcf .tcf-remove span {
	font-size: 22px;
	line-height: 1;
}

.tcf .tcf-remove--small {
	font-size: 13px;
	line-height: 16px;
}

.tcf .tcf-remove--small span {
	font-size: 18px;
}

/* ---------- Uploads ---------- */

.tcf-upload {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin-top: 12px;
	padding: 4px;
	margin-left: -4px;
	outline: 2px dashed transparent;
	outline-offset: 4px;
	transition: outline-color 0.15s ease;
}

.tcf-upload.is-dragover {
	outline-color: var(--tcf-black);
}

.tcf .tcf-btn--upload {
	padding: 12px 40px;
	border: 2px solid var(--tcf-black);
	background: var(--tcf-grey-10);
	color: var(--tcf-red);
	font-size: 16px;
	line-height: 24px;
}

.tcf .tcf-btn--upload:hover,
.tcf .tcf-btn--upload:focus-visible {
	background: var(--tcf-black);
	color: var(--tcf-white);
}

.tcf-upload__hint {
	color: var(--tcf-grey-100);
	font-size: 16px;
}

.tcf .tcf-upload__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.tcf-upload__rules {
	margin-top: 12px;
	color: var(--tcf-grey-100);
	font-size: 14px;
	line-height: 20px;
}

.tcf .tcf-files {
	display: grid;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.tcf-files:empty {
	display: none;
}

.tcf .tcf-file {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 8px 8px 8px 8px;
	border: 1px solid var(--tcf-grey-25);
	background: var(--tcf-white);
}

.tcf .tcf-file::before {
	display: none;
}

.tcf-file__thumb {
	display: flex;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	background: var(--tcf-grey-10);
}

.tcf-file__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tcf-file__thumb.is-generic::before {
	content: "";
	width: 18px;
	height: 22px;
	border: 2px solid var(--tcf-grey-50);
	border-top-right-radius: 6px;
}

.tcf-file__main {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.tcf-file__name {
	overflow: hidden;
	font-size: 16px;
	line-height: 20px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tcf-file__meta {
	color: var(--tcf-grey-200);
	font-size: 13px;
	line-height: 16px;
}

.tcf-file.is-error .tcf-file__meta {
	color: var(--tcf-red);
}

.tcf-file__bar {
	display: block;
	height: 3px;
	background: var(--tcf-grey-25);
}

.tcf-file__bar span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--tcf-black);
	transition: width 0.2s linear;
}

.tcf-file.is-done .tcf-file__bar,
.tcf-file.is-error .tcf-file__bar {
	visibility: hidden;
}

.tcf .tcf-file__remove {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tcf-grey-200);
	font-family: inherit;
	font-size: 26px;
	line-height: 36px;
	cursor: pointer;
}

.tcf .tcf-file__remove:hover,
.tcf .tcf-file__remove:focus-visible {
	color: var(--tcf-red);
}

/* ---------- Footer, confirmation ---------- */

.tcf-footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-top: 40px;
}

.tcf-form-error {
	color: var(--tcf-red);
	font-size: 16px;
	line-height: 24px;
}

.tcf-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tcf-confirmation {
	padding: 32px 0 8px;
	border-top: 1px solid var(--tcf-line);
	font-size: 20px;
	line-height: 30px;
	scroll-margin-top: 140px;
}

.tcf-confirmation:focus {
	outline: none;
}

.tcf-confirmation p {
	margin: 0 0 12px;
	font-size: inherit;
	line-height: inherit;
}

.tcf-confirmation .tcf-confirmation__number {
	margin-top: 24px;
	font-weight: 500;
}

/* ---------- Responsive, same breakpoints as the theme ---------- */

@media (max-width: 1360px) {
	.tcf {
		--tcf-field-height: 48px;
		--tcf-field-font: 18px;
	}

	.tcf .tcf-input,
	.tcf .tcf-select,
	.tcf .tcf-textarea {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.tcf .tcf-textarea {
		height: 144px;
	}

	.tcf .tcf-radio {
		font-size: 18px;
	}

	.tcf-radio span::before {
		width: 24px;
		height: 24px;
	}

	.tcf-radio input:checked + span::before {
		border-width: 8px;
	}
}

@media (max-width: 900px) {
	.tcf-grid > [class*="tcf-span-"]:not(.tcf-span-12) {
		grid-column: span 6;
	}

	.tcf .tcf-section__title {
		font-size: 24px;
		line-height: 32px;
	}

	.tcf .tcf-btn--primary {
		width: 100%;
		padding: 12px 46px;
		font-size: 16px;
	}

	.tcf .tcf-textarea {
		height: 180px;
	}
}

@media (max-width: 640px) {
	.tcf-grid {
		--tcf-gap: 24px;
	}

	.tcf-grid > [class*="tcf-span-"]:not(.tcf-span-12) {
		grid-column: 1 / -1;
	}

	.tcf-row > .tcf-grid {
		--tcf-gap: 16px;
	}

	.tcf-upload__hint {
		display: none;
	}

	.tcf .tcf-btn--upload,
	.tcf .tcf-btn--secondary {
		width: 100%;
	}

	.tcf-repeater > .tcf-add {
		width: 100%;
	}
}