/**
 * Coverage selection on the quote page.
 *
 * Lifted from the inline <style> blocks the previous WPCode implementation emitted,
 * so the page looks the same. Values are unchanged; only their location has moved,
 * into a versioned, cacheable stylesheet.
 */

.crirow {
	display: block;
}

.criprodcol {
	float: left;
	width: 49%;
	margin-right: 2%;
}

.cricartcol {
	float: left;
	width: 49%;
	background: #f1f7ff;
	padding: 20px;
	border-radius: 10px;
}

.cri-product-group {
	background: #f1f7ff;
	padding: 25px;
	margin-bottom: 30px;
	border-radius: 12px;
}

.cri-tier-list {
	margin-bottom: 10px;
}

.cri-tier {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	margin-bottom: 10px;
}

.cri-tier-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 10px;
	justify-content: space-between;
}

.cri-tier-label {
	flex: 1;
}

.cri-tier-price {
	margin-right: 10px;
}

.cri-coverage-description {
	margin-top: -20px;
}

.cri-total {
	background-color: #2196f3;
	padding: 8px;
	margin-bottom: 0;
	color: #fff;
}

.cri-total-amount {
	float: right;
}

.cri-proceed {
	font-size: 22px;
	line-height: 30px;
	margin-top: 0;
	width: 100%;
	color: #fff;
	background-color: #2665b9;
}

.cri-proceed[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

.cri-proceed.is-busy {
	opacity: 0.75;
	cursor: progress;
}

.cri-summary-line strong {
	display: inline;
}

.cri-summary-amount {
	float: right;
}

.cri-exclusions {
	margin-top: 20px;
	padding: 30px;
	overflow: hidden;
}

.cri-notice {
	padding: 12px 16px;
	margin-bottom: 16px;
	border-radius: 8px;
	border-left: 4px solid transparent;
}

.cri-notice--error {
	background: #fdecec;
	border-left-color: #d63638;
	color: #8a1f21;
}

.cri-notice--info {
	background: #eaf4fd;
	border-left-color: #2196f3;
	color: #12496f;
}

.cri-empty-state {
	background: #f1f7ff;
	border-radius: 12px;
	padding: 30px;
	text-align: center;
}

/* The form carries its own panel, so the wrapper only has to centre it. */
.cri-empty-state--form {
	background: none;
	padding: 0;
}

/* The trip form is a glass component: translucent panel, white heading, a shadow
   that assumes depth behind it. On the home page it sits on the hero photograph. The
   quote page is plain white, where its heading would be white on white, so the panel
   brings its own dark ground with it. */
.cri-empty-state__form {
	margin: 26px auto 0;
	max-width: 860px;
	padding: 28px 22px;
	border-radius: 20px;
	text-align: left;
	background: linear-gradient(160deg, #0b1f3a 0%, #102a43 55%, #16375a 100%);
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

@media (max-width: 600px) {
	.cri-empty-state__form {
		padding: 18px 12px;
	}
}

/* Toggle switch */
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: 0.4s;
	border-radius: 34px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: #fff;
	transition: 0.4s;
	border-radius: 50%;
}

input:checked + .slider {
	background-color: #2196f3;
}

input:checked + .slider:before {
	transform: translateX(26px);
}

input:focus-visible + .slider {
	outline: 2px solid #2665b9;
	outline-offset: 2px;
}

@media screen and (max-width: 768px) {
	.criprodcol,
	.cricartcol {
		float: none;
		width: 100%;
	}

	.criprodcol {
		margin-right: 0;
	}
}