/*
 * LDT Cookie Consent — banner (first layer) + preference centre (second layer).
 *
 * Both layers share one surface, described by three custom properties so a site can
 * retheme the whole thing without overriding rules. Defaults are the dark bar the
 * plugin has always shipped; flip to a light panel with:
 *
 *   .ldtcc, .ldtcc-modal { --ldtcc-bg: #fff; --ldtcc-fg: #1c1c1c; --ldtcc-line: rgba(0,0,0,.14); }
 */
.ldtcc,
.ldtcc-modal {
	--ldtcc-bg: #1c1c1c;
	--ldtcc-fg: #f5f5f5;
	--ldtcc-line: rgba( 255, 255, 255, 0.18 );
}

/* ---------------------------------------------------------------- */
/* First layer: the banner                                          */
/* ---------------------------------------------------------------- */
.ldtcc {
	position: fixed;
	z-index: 2147483000;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	padding: 18px 22px;
	background: var( --ldtcc-bg );
	color: var( --ldtcc-fg );
	font-size: 14px;
	line-height: 1.5;
	box-shadow: 0 -2px 18px rgba( 0, 0, 0, 0.28 );
}
.ldtcc *,
.ldtcc *::before,
.ldtcc *::after {
	box-sizing: border-box;
}
.ldtcc--bottom {
	left: 0;
	right: 0;
	bottom: 0;
}
.ldtcc--bottom-left,
.ldtcc--bottom-right {
	bottom: 20px;
	max-width: 420px;
	flex-direction: column;
	align-items: flex-start;
	border-radius: 10px;
}
.ldtcc--bottom-left {
	left: 20px;
}
.ldtcc--bottom-right {
	right: 20px;
}
.ldtcc__msg {
	margin: 0;
	flex: 1 1 320px;
	color: inherit;
	/* Stated outright, not inherited: a theme's own `p` rule outranks the
	   font-size inherited from .ldtcc and can double the bar's height. */
	font-size: 14px;
	line-height: 1.5;
}
/* Links the site wrote into its own copy ("See our Cookie Policy for details")
   get the same treatment as the ones this plugin renders, so an author does not
   have to know the class name. When the copy carries its own link, the separate
   policy link is dropped — see links() in ldtcc.js. */
.ldtcc__link,
.ldtcc__msg a,
.ldtcc-modal__msg a {
	font: inherit;
	color: inherit;
	text-decoration: underline;
}
.ldtcc__link {
	white-space: nowrap;
}
.ldtcc__link:hover,
.ldtcc__link:focus,
.ldtcc__msg a:hover,
.ldtcc__msg a:focus,
.ldtcc-modal__msg a:hover,
.ldtcc-modal__msg a:focus {
	color: inherit;
}
/* "Privacy Settings" opens the panel, so it is a button — styled as a link because
   that is what it reads as next to the policy link, but announced as the control
   it actually is. */
.ldtcc__link--btn {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin-left: 0.75em;
	cursor: pointer;
}
.ldtcc__actions {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}
.ldtcc__btn {
	appearance: none;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 10px 20px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	transition: opacity 0.15s ease, background 0.15s ease;
}
.ldtcc__btn--accept {
	background: var( --ldtcc-accent, #1a73e8 );
	color: #fff;
}
.ldtcc__btn--decline,
.ldtcc__btn--save {
	background: transparent;
	color: var( --ldtcc-fg );
	border-color: var( --ldtcc-line );
}
.ldtcc__btn:hover {
	opacity: 0.88;
}
.ldtcc__btn:focus-visible {
	outline: 2px solid var( --ldtcc-accent, #1a73e8 );
	outline-offset: 2px;
}
/*
 * Tail of the page kept clear of the fixed bar. Without it the bar covers the
 * last ~75px of the document, which is exactly where footer legal/disclosure
 * copy sits. Height is written inline from the live bar height — see ldtcc.js.
 */
.ldtcc-spacer {
	position: absolute;
	left: 0;
	width: 1px;
	pointer-events: none;
}

@media ( max-width: 640px ) {
	.ldtcc {
		flex-direction: column;
		align-items: stretch;
	}
	.ldtcc__msg {
		/* flex-basis is a HEIGHT once the bar stacks — leaving the 320px basis
		   from the row layout in place makes the bar swallow half the screen. */
		flex: 0 0 auto;
	}
	.ldtcc__actions {
		justify-content: flex-end;
	}
}

/* GPC notice, shown inside the banner when the browser sent the signal */
.ldtcc__gpc {
	display: block;
	margin-top: 0.4em;
	font-size: 0.9em;
	opacity: 0.85;
}

/* ---------------------------------------------------------------- */
/* Second layer: the preference centre                              */
/* ---------------------------------------------------------------- */
.ldtcc-modal {
	position: fixed;
	inset: 0;
	z-index: 2147483001; /* above the banner, which it is opened from */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-size: 14px;
	line-height: 1.5;
}
.ldtcc-modal *,
.ldtcc-modal *::before,
.ldtcc-modal *::after {
	box-sizing: border-box;
}
.ldtcc-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.55 );
}
.ldtcc-modal__card {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: calc( 100vh - 40px );
	overflow-y: auto;
	padding: 28px;
	border-radius: 12px;
	background: var( --ldtcc-bg );
	color: var( --ldtcc-fg );
	box-shadow: 0 12px 48px rgba( 0, 0, 0, 0.45 );
}
.ldtcc-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 6px;
	color: inherit;
	opacity: 0.7;
	cursor: pointer;
}
.ldtcc-modal__close:hover {
	opacity: 1;
}
.ldtcc-modal__close:focus-visible {
	outline: 2px solid var( --ldtcc-accent, #1a73e8 );
	outline-offset: 2px;
}
.ldtcc-modal__title {
	margin: 0 0 12px;
	padding-right: 32px; /* clear of the close button */
	color: inherit;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}
.ldtcc-modal__msg {
	margin: 0 0 20px;
	color: inherit;
	font-size: 14px;
	line-height: 1.55;
	opacity: 0.85;
}
.ldtcc-modal__links {
	margin: 18px 0 20px;
	font-size: 13px;
	opacity: 0.85;
}
.ldtcc-modal__links .ldtcc__link + .ldtcc__link {
	margin-left: 1em;
}

/* Category rows */
.ldtcc-cats {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var( --ldtcc-line );
}
.ldtcc-cat {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var( --ldtcc-line );
}
.ldtcc-cat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.ldtcc-cat__label {
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.ldtcc-cat--locked .ldtcc-cat__label {
	cursor: default;
}
.ldtcc-cat__desc {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: inherit;
	opacity: 0.75;
}

/* Toggle switch. The checkbox stays in the accessibility tree and keeps its own
   focus and keyboard behaviour — it is only visually replaced by the track. */
.ldtcc-switch {
	position: relative;
	flex-shrink: 0;
	display: inline-flex;
	width: 44px;
	height: 24px;
}
.ldtcc-switch input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.ldtcc-switch input:disabled {
	cursor: default;
}
.ldtcc-switch__track {
	pointer-events: none;
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: var( --ldtcc-line );
	transition: background 0.15s ease;
}
.ldtcc-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s ease;
}
.ldtcc-switch input:checked + .ldtcc-switch__track {
	background: var( --ldtcc-accent, #1a73e8 );
}
.ldtcc-switch input:checked + .ldtcc-switch__track::after {
	transform: translateX( 20px );
}
.ldtcc-switch input:disabled + .ldtcc-switch__track {
	opacity: 0.55;
}
.ldtcc-switch input:focus-visible + .ldtcc-switch__track {
	outline: 2px solid var( --ldtcc-accent, #1a73e8 );
	outline-offset: 2px;
}

/* Three buttons in the panel: Save Settings · Deny · Accept All */
.ldtcc__actions--panel {
	flex-wrap: wrap;
	justify-content: flex-end;
}
.ldtcc__actions--panel .ldtcc__btn {
	flex: 1 1 auto;
}

/* The page behind a modal must not scroll under it. */
.ldtcc-modal-open,
.ldtcc-modal-open body {
	overflow: hidden;
}

@media ( max-width: 480px ) {
	.ldtcc-modal {
		padding: 0;
		align-items: flex-end;
	}
	.ldtcc-modal__card {
		max-width: none;
		max-height: 92vh;
		padding: 24px 20px 20px;
		border-radius: 12px 12px 0 0;
	}
	.ldtcc__actions--panel {
		flex-direction: column-reverse;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ldtcc__btn,
	.ldtcc-switch__track,
	.ldtcc-switch__track::after {
		transition: none;
	}
}