/**
 * OMS Cookie Consent styles.
 *
 * Two rules worth not breaking:
 *
 *  - .oms-cc__btn--primary is shared by Accept all, Reject all and Save. They must
 *    stay visually identical. Making rejection any harder to see than acceptance is
 *    a dark pattern and would not be valid consent.
 *  - The banner is position: fixed and never occupies layout space, so it cannot
 *    cause layout shift.
 */

:root {
	/* The accent is overridden by an inline style from the settings page, which is
	   why it lives here rather than on .oms-cc: a value set on the component would
	   win over the inline :root rule and the setting would appear to do nothing. */
	--oms-cc-accent: #1d4ed8;
	--oms-cc-accent-fg: #ffffff;
}

html {
	/* Set by the banner while it is on screen, so anything scrolled into view is not
	   hidden behind it. WCAG 2.2, focus not obscured. */
	scroll-padding-bottom: var( --oms-cc-h, 0px );
}

.oms-cc {
	--oms-cc-bg: #ffffff;
	--oms-cc-fg: #16181d;
	--oms-cc-muted: #4c5462;
	--oms-cc-line: #d9dee7;
	--oms-cc-radius: 6px;

	position: fixed;
	z-index: 2147483000;
	left: 1rem;
	right: 1rem;
	background: var( --oms-cc-bg );
	color: var( --oms-cc-fg );
	border: 1px solid var( --oms-cc-line );
	border-radius: var( --oms-cc-radius );
	box-shadow: 0 6px 28px rgba( 12, 16, 24, 0.18 );
	font-family: inherit;
	font-size: 15px;
	line-height: 1.55;
	max-height: calc( 100vh - 2rem );
	overflow-y: auto;
}

.oms-cc--bottom {
	bottom: 1rem;
}

.oms-cc--centre {
	top: 50%;
	transform: translateY( -50% );
	max-width: 34rem;
	margin: 0 auto;
}

.oms-cc__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 1.1rem 1.35rem;
	/* No max-width and no auto centring. The box is the same in both views, so
	   nothing shifts when the preferences panel opens, and the text runs the full
	   width of the bar, which keeps it to fewer lines and a shorter banner. */
}

.oms-cc__title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var( --oms-cc-fg );
}

.oms-cc__title:focus-visible {
	outline: 2px solid var( --oms-cc-accent );
	outline-offset: 3px;
}

.oms-cc__body {
	margin: 0;
	color: var( --oms-cc-muted );
}

.oms-cc__link {
	color: var( --oms-cc-accent );
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---- actions ---- */

.oms-cc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: stretch;
}

.oms-cc__btn {
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	border-radius: 4px;
	padding: 0.6rem 1.1rem;
	min-height: 44px;
	min-width: 44px;
	border: 1px solid transparent;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

/* Accept, Reject and Save. Identical on purpose. */
.oms-cc__btn--primary {
	background: var( --oms-cc-accent );
	color: var( --oms-cc-accent-fg );
	border-color: var( --oms-cc-accent );
	flex: 0 1 auto;
}

.oms-cc__btn--primary:hover {
	filter: brightness( 0.92 );
}

.oms-cc__btn--quiet {
	background: transparent;
	color: var( --oms-cc-fg );
	border-color: var( --oms-cc-line );
}

.oms-cc__btn--quiet:hover {
	border-color: var( --oms-cc-muted );
}

.oms-cc__btn:focus-visible {
	outline: 2px solid var( --oms-cc-fg );
	outline-offset: 2px;
}

/* ---- preferences panel ---- */

.oms-cc__cats {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	border-top: 1px solid var( --oms-cc-line );
	border-bottom: 1px solid var( --oms-cc-line );
	padding: 1rem 0;
}

.oms-cc__cat-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.oms-cc__check {
	width: 24px;
	height: 24px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var( --oms-cc-accent );
	cursor: pointer;
}

.oms-cc__check:disabled {
	cursor: default;
}

.oms-cc__check:focus-visible {
	outline: 2px solid var( --oms-cc-accent );
	outline-offset: 2px;
}

.oms-cc__cat-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	font-weight: 600;
}

.oms-cc__check:disabled + .oms-cc__cat-label {
	cursor: default;
}

.oms-cc__badge {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.15em 0.45em;
	border: 1px solid var( --oms-cc-line );
	border-radius: 3px;
	color: var( --oms-cc-muted );
}

.oms-cc__cat-desc {
	margin: 0.35rem 0 0 2.1rem;
	color: var( --oms-cc-muted );
	font-size: 0.92rem;
}

/* ---- reopen control ---- */

.oms-cc-reopen,
.oms-cc-open {
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	background: #ffffff;
	color: #16181d;
	border: 1px solid #d9dee7;
	border-radius: 4px;
	padding: 0.5rem 0.8rem;
	min-height: 44px;
}

.oms-cc-reopen {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 2147482000;
	box-shadow: 0 3px 14px rgba( 12, 16, 24, 0.16 );
}

.oms-cc-reopen:focus-visible,
.oms-cc-open:focus-visible {
	outline: 2px solid var( --oms-cc-accent, #1d4ed8 );
	outline-offset: 2px;
}

/* ---- blocked embeds ---- */

.oms-cc-embed {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 12rem;
	padding: 1.5rem;
	background: #f3f5f9;
	border: 1px dashed #c6cedb;
	border-radius: 6px;
	color: #3a4150;
}

.oms-cc-embed__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	text-align: center;
	max-width: 34rem;
}

.oms-cc-embed__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
}

.oms-cc-embed__btn {
	background: var( --oms-cc-accent, #1d4ed8 );
	color: #ffffff;
	border: 1px solid var( --oms-cc-accent, #1d4ed8 );
}

/* ---- cookie policy output ---- */

.oms-cc-policy__group {
	margin: 0 0 2.5rem;
}

.oms-cc-policy__service {
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid #e4e8ef;
}

.oms-cc-policy__meta,
.oms-cc-policy__note,
.oms-cc-policy__empty {
	font-size: 0.9rem;
	color: #4c5462;
}

.oms-cc-policy__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
}

.oms-cc-policy__table th,
.oms-cc-policy__table td {
	text-align: left;
	padding: 0.5rem 0.65rem;
	border-bottom: 1px solid #e4e8ef;
	vertical-align: top;
}

.oms-cc-policy__table th {
	font-weight: 600;
	white-space: nowrap;
}

/* ---- dark ---- */

.oms-cc--theme-dark,
.oms-cc--theme-auto {
	color-scheme: light dark;
}

@media ( prefers-color-scheme: dark ) {
	.oms-cc--theme-auto {
		--oms-cc-bg: #171b22;
		--oms-cc-fg: #e8ebf1;
		--oms-cc-muted: #a5aebd;
		--oms-cc-line: #2c333e;
	}
}

.oms-cc--theme-dark {
	--oms-cc-bg: #171b22;
	--oms-cc-fg: #e8ebf1;
	--oms-cc-muted: #a5aebd;
	--oms-cc-line: #2c333e;
}

/* ---- narrow screens ---- */

@media ( max-width: 620px ) {
	.oms-cc {
		left: 0.5rem;
		right: 0.5rem;
		font-size: 14.5px;
	}

	.oms-cc--bottom {
		bottom: 0.5rem;
	}

	.oms-cc__inner {
		padding: 1.1rem;
	}

	.oms-cc__actions .oms-cc__btn {
		flex: 1 1 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.oms-cc,
	.oms-cc__btn {
		transition: none;
	}
}

@media print {
	.oms-cc,
	.oms-cc-reopen {
		display: none;
	}
}