/**
 * Fast Quote
 */

.fast-quote {
	width: 100%;
	font-family: "Hanken Grotesk", sans-serif;
}


/* =========================================
   FORM CONTAINER
   ========================================= */

.fast-quote__form {
	position: relative;

	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: 62px 62px;

	width: 100%;

	background: #FFFFFF;

	border-radius: 15px;

	overflow: hidden;

	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
}


/* =========================================
   FIELDS
   ========================================= */

.fast-quote__fields {
	display: contents;
}

.fast-quote__field {
	position: relative;

	min-width: 0;
	width: 100%;
	height: 100%;
}

.fast-quote__field input {
	display: block;

	width: 100%;
	height: 100%;

	padding: 0 22px;
	margin: 0;

	border: 0;
	border-radius: 0;

	background: transparent;
	color: #222222;

	font-family: "Hanken Grotesk", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;

	box-sizing: border-box;
	outline: none;

	transition: background-color 250ms ease;
}

.fast-quote__field input::placeholder {
	color: #6F6F6F;
	opacity: 1;
}

.fast-quote__field input:focus {
	background-color: rgba(176, 165, 216, 0.08);
}


/* =========================================
   GRID LINES
   ========================================= */

/* Vertical divider */
.fast-quote__field:nth-child(2),
.fast-quote__field:nth-child(4) {
	border-left: 1px solid #D9D9D9;
}

/* Horizontal divider */
.fast-quote__field:nth-child(3),
.fast-quote__field:nth-child(4) {
	border-top: 1px solid #D9D9D9;
}


/* =========================================
   FIELD POSITIONS
   ========================================= */

.fast-quote__field:nth-child(1) {
	grid-column: 1;
	grid-row: 1;
}

.fast-quote__field:nth-child(2) {
	grid-column: 2;
	grid-row: 1;
}

.fast-quote__field:nth-child(3) {
	grid-column: 1;
	grid-row: 2;
}

.fast-quote__field:nth-child(4) {
	grid-column: 2;
	grid-row: 2;
}


/* =========================================
   REMOVE NUMBER INPUT ARROWS
   ========================================= */

.fast-quote__field input[type="number"]::-webkit-inner-spin-button,
.fast-quote__field input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.fast-quote__field input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}


/* =========================================
   SUBMIT BUTTON
   ========================================= */

.fast-quote__submit {
	position: absolute;

	top: 8px;
	right: 8px;

	z-index: 5;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 160px;
	height: 50px;

	padding: 0;
	margin: 0;

	border: 0;
	border-radius: 14px;

	background-color: #B0A5D8;
	color: #FFFFFF;

	font-family: "Lora", serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;

	cursor: pointer;

	box-sizing: border-box;

	transition:
		background-color 350ms ease,
		transform 200ms ease;
}

.fast-quote__submit:hover {
	background-color: #6E60A3;
}

.fast-quote__submit:active {
	transform: scale(0.98);
}

.fast-quote__submit:focus-visible {
	outline: 2px solid #6E60A3;
	outline-offset: 3px;
}

.fast-quote__submit:disabled {
	cursor: not-allowed;
}


/* =========================================
   LOADER
   ========================================= */

.fast-quote__loader {
	display: none;

	width: 16px;
	height: 16px;

	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #FFFFFF;

	border-radius: 50%;

	animation: fastQuoteSpin 700ms linear infinite;
}

.fast-quote__submit.is-loading .fast-quote__submit-text {
	display: none;
}

.fast-quote__submit.is-loading .fast-quote__loader {
	display: block;
}

@keyframes fastQuoteSpin {
	to {
		transform: rotate(360deg);
	}
}


/* =========================================
   MESSAGE
   ========================================= */

.fast-quote__message {
	margin-top: 8px;

	font-family: "Hanken Grotesk", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.fast-quote__message:empty {
	display: none;
}

.fast-quote__message.is-success {
	color: #4F8613;
	font-size: 16px;
}

.fast-quote__message.is-error {
	color: #b42318;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

	.fast-quote__form {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: 52px 52px 52px;

		width: 100%;

		border-radius: 12px;
	}

	/* Remove desktop button positioning */
	.fast-quote__submit {
		position: static;

		grid-column: 1 / -1;
		grid-row: 3;

		width: 100%;
		height: 52px;

		border-radius: 0;

		font-size: 17px;
	}

	/* Re-establish field grid */

	.fast-quote__field:nth-child(1) {
		grid-column: 1;
		grid-row: 1;
	}

	.fast-quote__field:nth-child(2) {
		grid-column: 2;
		grid-row: 1;
	}

	.fast-quote__field:nth-child(3) {
		grid-column: 1;
		grid-row: 2;
	}

	.fast-quote__field:nth-child(4) {
		grid-column: 2;
		grid-row: 2;
	}

	.fast-quote__field input {
		padding: 0 16px;
		font-size: 16px;
	}

}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 480px) {

	.fast-quote__form {
		grid-template-rows: 48px 48px 48px;
	}

	.fast-quote__field input {
		padding: 0 13px;
		font-size: 14px;
	}

	.fast-quote__submit {
		height: 48px;
		font-size: 16px;
	}

}