/**
 * PD Cookie Consent — banner, preferences modal, floating reopen button.
 * Colours come from CSS custom properties printed by the plugin.
 */

/* Defaults live on :root so the inline style printed by the plugin (also :root,
   but emitted after this file) overrides them instead of losing to specificity. */
:root {
	--pdcc-accent: #111;
	--pdcc-bg: #fff;
	--pdcc-text: #1f2328;
	--pdcc-radius: 10px;
	--pdcc-max-width: 600px;
	--pdcc-muted: color-mix( in srgb, var( --pdcc-text ) 62%, transparent );
	--pdcc-line: color-mix( in srgb, var( --pdcc-text ) 14%, transparent );
}

.pdcc-root {
	position: relative;
	z-index: 99999;
	color: var( --pdcc-text );
	font-size: 14px;
	line-height: 1.5;
}

.pdcc-root[hidden] {
	display: none;
}

.pdcc-root *,
.pdcc-root *::before,
.pdcc-root *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ overlay */

.pdcc-overlay {
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: rgba( 0, 0, 0, 0.5 );
	opacity: 0;
	transition: opacity 0.2s ease;
}

.pdcc-root.is-visible .pdcc-overlay {
	opacity: 1;
}

.pdcc-overlay[hidden] {
	display: none;
}

body.pdcc-locked {
	overflow: hidden;
}

/* ------------------------------------------------------------------- banner */

.pdcc-banner {
	position: fixed;
	z-index: 99999;
	display: flex;
	gap: 20px;
	align-items: center;
	padding: 20px 24px;
	background: var( --pdcc-bg );
	border-radius: var( --pdcc-radius );
	box-shadow: 0 8px 40px rgba( 0, 0, 0, 0.18 );
	opacity: 0;
	transform: translateY( 12px );
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.pdcc-banner[hidden] {
	display: none;
}

.pdcc-root.is-visible .pdcc-banner {
	opacity: 1;
	transform: none;
}

.pdcc-banner__body {
	flex: 1 1 auto;
	min-width: 0;
}

.pdcc-banner__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

.pdcc-banner__text {
	color: var( --pdcc-muted );
}

.pdcc-banner__text p {
	margin: 0 0 4px;
}

.pdcc-banner__text a {
	color: inherit;
	text-decoration: underline;
}

.pdcc-banner__actions {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: 8px;
}

/* Position: centred bar, capped so it never spans the whole viewport */

.pdcc-pos-bottom-bar .pdcc-banner {
	bottom: 16px;
	left: 50%;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	width: min( var( --pdcc-max-width ), calc( 100vw - 32px ) );
	transform: translate( -50%, 12px );
}

.pdcc-pos-bottom-bar.is-visible .pdcc-banner {
	transform: translateX( -50% );
}

.pdcc-pos-bottom-bar .pdcc-banner__actions {
	justify-content: flex-end;
}

/* Position: corner boxes */

.pdcc-pos-bottom-left .pdcc-banner,
.pdcc-pos-bottom-right .pdcc-banner {
	bottom: 16px;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	width: min( 400px, var( --pdcc-max-width ), calc( 100vw - 32px ) );
}

.pdcc-pos-bottom-left .pdcc-banner {
	left: 16px;
}

.pdcc-pos-bottom-right .pdcc-banner {
	right: 16px;
}

.pdcc-pos-bottom-left .pdcc-banner__actions,
.pdcc-pos-bottom-right .pdcc-banner__actions {
	justify-content: flex-end;
}

/* Position: centred modal */

.pdcc-pos-center .pdcc-banner {
	top: 50%;
	left: 50%;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
	width: min( var( --pdcc-max-width ), calc( 100vw - 32px ) );
	transform: translate( -50%, calc( -50% + 12px ) );
}

.pdcc-pos-center.is-visible .pdcc-banner {
	transform: translate( -50%, -50% );
}

.pdcc-pos-center .pdcc-banner__actions {
	justify-content: flex-end;
}

/* -------------------------------------------------------------------- modal */

.pdcc-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	width: min( 560px, calc( 100vw - 32px ) );
	max-height: min( 640px, calc( 100vh - 48px ) );
	background: var( --pdcc-bg );
	border-radius: var( --pdcc-radius );
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.28 );
	transform: translate( -50%, -50% );
}

.pdcc-modal[hidden] {
	display: none;
}

.pdcc-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	border-bottom: 1px solid var( --pdcc-line );
}

.pdcc-modal__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: inherit;
}

.pdcc-close {
	padding: 0;
	font-size: 26px;
	line-height: 1;
	color: var( --pdcc-muted );
	cursor: pointer;
	background: none;
	border: 0;
}

.pdcc-close:hover {
	color: var( --pdcc-text );
}

.pdcc-modal__body {
	flex: 1 1 auto;
	padding: 8px 24px;
	overflow-y: auto;
}

.pdcc-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	padding: 16px 24px;
	border-top: 1px solid var( --pdcc-line );
}

.pdcc-modal__policy {
	margin: 4px 0 12px;
}

.pdcc-modal__policy a {
	color: var( --pdcc-muted );
	text-decoration: underline;
}

/* --------------------------------------------------------------- categories */

.pdcc-cat {
	padding: 16px 0;
	border-bottom: 1px solid var( --pdcc-line );
}

.pdcc-cat:last-child {
	border-bottom: 0;
}

.pdcc-cat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.pdcc-cat__label {
	font-weight: 600;
}

.pdcc-cat__always {
	font-size: 12px;
	color: var( --pdcc-muted );
}

.pdcc-cat__desc {
	margin: 6px 0 0;
	color: var( --pdcc-muted );
}

/* Toggle */

.pdcc-switch {
	position: relative;
	flex: 0 0 auto;
	cursor: pointer;
}

.pdcc-switch input {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	opacity: 0;
}

.pdcc-switch__track {
	position: relative;
	display: block;
	width: 42px;
	height: 24px;
	background: color-mix( in srgb, var( --pdcc-text ) 22%, transparent );
	border-radius: 999px;
	transition: background 0.18s ease;
}

.pdcc-switch__track::after {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	content: "";
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
	transition: transform 0.18s ease;
}

.pdcc-switch input:checked + .pdcc-switch__track {
	background: var( --pdcc-accent );
}

.pdcc-switch input:checked + .pdcc-switch__track::after {
	transform: translateX( 18px );
}

.pdcc-switch input:focus-visible + .pdcc-switch__track {
	outline: 2px solid var( --pdcc-accent );
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ buttons */

.pdcc-btn {
	padding: 10px 18px;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: calc( var( --pdcc-radius ) * 0.6 );
	transition: opacity 0.15s ease, background 0.15s ease;
}

.pdcc-btn:focus-visible {
	outline: 2px solid var( --pdcc-accent );
	outline-offset: 2px;
}

.pdcc-btn--solid {
	color: var( --pdcc-bg );
	background: var( --pdcc-accent );
}

.pdcc-btn--solid:hover {
	opacity: 0.85;
}

.pdcc-btn--ghost {
	color: var( --pdcc-text );
	background: transparent;
	border-color: var( --pdcc-line );
}

.pdcc-btn--ghost:hover {
	background: color-mix( in srgb, var( --pdcc-text ) 6%, transparent );
}

/* Inline link rendered by the [pd_cookie_settings] shortcode. */

.pdcc-link {
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
	background: none;
	border: 0;
}

/* ------------------------------------------------------------ reopen button */

.pdcc-reopen {
	position: fixed;
	bottom: 16px;
	left: 16px;
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	color: var( --pdcc-text );
	cursor: pointer;
	background: var( --pdcc-bg );
	border: 1px solid var( --pdcc-line );
	border-radius: 50%;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.16 );
	opacity: 0.75;
	transition: opacity 0.15s ease;
}

.pdcc-reopen:hover {
	opacity: 1;
}

.pdcc-reopen[hidden] {
	display: none;
}

.pdcc-root .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}

/* ------------------------------------------------------------------- mobile */

@media ( max-width: 782px ) {
	.pdcc-banner {
		top: auto !important;
		right: 12px !important;
		bottom: 12px !important;
		left: 12px !important;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		width: auto !important;
		padding: 18px;
		transform: translateY( 12px ) !important;
	}

	.pdcc-root.is-visible .pdcc-banner {
		transform: none !important;
	}

	.pdcc-banner__actions .pdcc-btn {
		flex: 1 1 auto;
	}

	.pdcc-modal {
		bottom: 0;
		top: auto;
		left: 0;
		width: 100%;
		max-height: 88vh;
		border-radius: var( --pdcc-radius ) var( --pdcc-radius ) 0 0;
		transform: none;
	}

	.pdcc-modal__actions .pdcc-btn {
		flex: 1 1 auto;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.pdcc-banner,
	.pdcc-overlay,
	.pdcc-switch__track,
	.pdcc-switch__track::after {
		transition: none;
	}
}