/**
 * Consent Checker front-end styles.
 * Naming follows the site convention: .cbcc--block--element, each -- a hierarchy level.
 */

.cbcc--checker {
	margin: 2em 0;
}

.cbcc--checker--label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.5em;
}

.cbcc--checker--row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.cbcc--checker--input {
	flex: 1 1 20em;
	min-width: 0;
	padding: 0.75em 1em;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 1em;
}

.cbcc--checker--input:focus {
	outline: 2px solid #185a9d;
	outline-offset: 1px;
	border-color: #185a9d;
}

.cbcc--checker--region {
	flex: 0 0 auto;
	padding: 0.75em 0.75em;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 1em;
	background: #fff;
}

.cbcc--checker--region:focus {
	outline: 2px solid #185a9d;
	outline-offset: 1px;
	border-color: #185a9d;
}

.cbcc--checker--submit {
	flex: 0 0 auto;
	padding: 0.75em 1.5em;
	background: #185a9d;
	color: #fff;
	border: 0;
	border-radius: 3px;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
}

.cbcc--checker--submit:hover {
	background: #12467a;
}

.cbcc--checker--submit:disabled,
.cbcc--checker--submit.is-busy {
	opacity: 0.6;
	cursor: default;
}

.cbcc--checker--hint {
	margin: 0.75em 0 0;
	font-size: 0.875em;
	color: #666;
}

.cbcc--checker--status {
	margin-top: 1em;
	padding: 0.75em 1em;
	border-radius: 3px;
	background: #f4f6f8;
}

.cbcc--checker--status.is-error {
	background: #fdecea;
	color: #8a1c14;
}

.cbcc--checker--status.is-busy::after {
	content: '';
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	margin-left: 0.5em;
	border: 2px solid #185a9d;
	border-right-color: transparent;
	border-radius: 50%;
	vertical-align: -1px;
	animation: cbcc-spin 0.7s linear infinite;
}

@keyframes cbcc-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cbcc--checker--status.is-busy::after {
		animation: none;
	}
}

/* Report */

.cbcc--report {
	margin-top: 1.5em;
	padding: 1.5em;
	border: 1px solid #e2e6ea;
	border-left-width: 4px;
	border-radius: 3px;
	background: #fff;
}

.cbcc--report.is-fail {
	border-left-color: #c0392b;
}

.cbcc--report.is-warn {
	border-left-color: #e6a23c;
}

.cbcc--report.is-pass {
	border-left-color: #2e7d32;
}

.cbcc--report--verdict {
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cbcc--report.is-fail .cbcc--report--verdict {
	background: #fdecea;
	color: #8a1c14;
}

.cbcc--report.is-warn .cbcc--report--verdict {
	background: #fdf6ec;
	color: #8a5a12;
}

.cbcc--report.is-pass .cbcc--report--verdict {
	background: #edf7ed;
	color: #1e4620;
}

.cbcc--report--host {
	margin: 0.5em 0 1em;
	font-size: 1.1em;
	word-break: break-all;
}

.cbcc--report--findings {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cbcc--report--finding {
	position: relative;
	padding: 0.6em 0 0.6em 1.75em;
	border-top: 1px solid #f0f2f4;
	line-height: 1.5;
}

.cbcc--report--finding:first-child {
	border-top: 0;
}

.cbcc--report--finding::before {
	position: absolute;
	left: 0;
	top: 0.6em;
	font-weight: 700;
}

.cbcc--report--finding.is-fail::before {
	content: '\2717';
	color: #c0392b;
}

.cbcc--report--finding.is-warn::before {
	content: '\0021';
	color: #b8860b;
}

.cbcc--report--finding.is-pass::before {
	content: '\2713';
	color: #2e7d32;
}

.cbcc--report--finding.is-info::before {
	content: '\2022';
	color: #888;
}

.cbcc--report--finding a {
	color: #185a9d;
	font-weight: 600;
}

.cbcc--report--region {
	margin: -0.25em 0 1em;
	font-size: 0.8125em;
	color: #888;
}

.cbcc--report--cached {
	margin: 1em 0 0;
	font-size: 0.8125em;
	color: #888;
}

.cbcc--report--cta {
	margin-top: 1.5em;
	padding-top: 1.25em;
	border-top: 1px solid #eef0f2;
}

.cbcc--report--cta--intro {
	margin: 0 0 1em;
	font-size: 0.9375em;
	color: #444;
}

.cbcc--report--cta--button {
	display: inline-block;
	padding: 0.7em 1.4em;
	background: #185a9d;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 3px;
}

.cbcc--report--cta--button:hover {
	background: #12467a;
	color: #fff;
}