/*
 * Consent banner.
 *
 * Takes its colours and radius from the design system so it looks like the site
 * it is on. Accept and Reject are deliberately identical in weight and size —
 * see the note in class-grade-consent-frontend.php. Styling one of them to
 * recede is the dark pattern this whole area is enforced against.
 */
.grade-consent {
	position: fixed;
	z-index: 99999;
	left: 0; right: 0; bottom: 0;
	background: var( --grade-consent-bg, #fff );
	color: var( --grade-consent-fg, #16181d );
	box-shadow: 0 -2px 24px rgba( 0, 0, 0, .16 );
	font-size: 15px;
	line-height: 1.55;
}
.grade-consent[data-position="bar-top"] { bottom: auto; top: 0; box-shadow: 0 2px 24px rgba( 0, 0, 0, .16 ); }
.grade-consent[data-position="box-left"],
.grade-consent[data-position="box-right"] {
	left: auto; right: 24px; bottom: 24px;
	max-width: 420px;
	border-radius: var( --grade-consent-radius, 6px );
}
.grade-consent[data-position="box-left"] { right: auto; left: 24px; }

.grade-consent__inner {
	max-width: var( --grade-site-width, 1200px );
	margin: 0 auto;
	padding: 20px 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	align-items: center;
}
.grade-consent[data-position^="box"] .grade-consent__inner { display: block; padding: 22px; }

.grade-consent__text { flex: 1 1 340px; min-width: 0; }
.grade-consent__title { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.grade-consent__body { margin: 0; }
.grade-consent__link { color: inherit; text-underline-offset: 2px; }

.grade-consent__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.grade-consent__btn {
	font: inherit;
	padding: 10px 18px;
	border-radius: var( --grade-consent-radius, 4px );
	border: 1px solid var( --grade-consent-accent, #16181d );
	cursor: pointer;
	white-space: nowrap;
}
.grade-consent__btn--primary {
	background: var( --grade-consent-accent, #16181d );
	color: var( --grade-consent-accent-fg, #fff );
}
.grade-consent__btn--quiet { background: transparent; color: inherit; border-color: transparent; text-decoration: underline; }
.grade-consent__btn:focus-visible { outline: 2px solid var( --grade-consent-accent, #16181d ); outline-offset: 2px; }

.grade-consent__prefs {
	flex: 1 1 100%;
	display: grid;
	gap: 14px;
	padding: 16px 0 4px;
	border-top: 1px solid rgba( 128, 128, 128, .28 );
	margin-top: 4px;
}
.grade-consent__cat { min-width: 0; }
.grade-consent__switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.grade-consent__switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.grade-consent__track {
	width: 38px; height: 22px; flex: 0 0 38px;
	border-radius: 999px;
	background: rgba( 128, 128, 128, .38 );
	position: relative;
	transition: background .15s ease;
}
.grade-consent__track::after {
	content: ""; position: absolute; top: 3px; left: 3px;
	width: 16px; height: 16px; border-radius: 50%;
	background: #fff; transition: transform .15s ease;
}
.grade-consent__switch input:checked + .grade-consent__track { background: var( --grade-consent-accent, #2f6f62 ); }
.grade-consent__switch input:checked + .grade-consent__track::after { transform: translateX( 16px ); }
.grade-consent__switch input:disabled + .grade-consent__track { opacity: .55; }
.grade-consent__switch input:focus-visible + .grade-consent__track { outline: 2px solid var( --grade-consent-accent, #16181d ); outline-offset: 2px; }
.grade-consent__always { font-weight: 400; opacity: .7; font-size: 13px; }
.grade-consent__describe { margin: 6px 0 0 48px; font-size: 13.5px; opacity: .82; }

.grade-consent-reopen {
	position: fixed; z-index: 99998; left: 16px; bottom: 16px;
	font: inherit; font-size: 13px;
	padding: 8px 14px;
	border-radius: var( --grade-consent-radius, 4px );
	border: 1px solid rgba( 128, 128, 128, .4 );
	background: var( --grade-consent-bg, #fff );
	color: var( --grade-consent-fg, #16181d );
	cursor: pointer;
}

@media ( max-width: 640px ) {
	.grade-consent__inner { padding: 16px; }
	.grade-consent__actions { width: 100%; }
	.grade-consent__btn { flex: 1 1 auto; text-align: center; }
	.grade-consent[data-position^="box"] { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.grade-consent__track, .grade-consent__track::after { transition: none; }
}