/**
 * Parent Perspective cookie banner.
 *
 * Rebuilt in this site's own tokens rather than copied from another client's banner: the teal (#367887), the
 * mist card (#EAF3F5), Palatino and the 12px card radius all come from pp-widgets.css, so the dialog reads as
 * part of the site and not as a bolt-on.
 *
 * Reject all and Accept all are deliberately identical in size, weight and prominence. Making refusal visually
 * harder than acceptance is a dark pattern and invalidates the consent collected. Do not "improve" that.
 */
.pp-consent {
	--pp-c-accent: #367887;
	--pp-c-ink: #3E3E3E;
	--pp-c-card: #FFFFFF;
	--pp-c-mist: #EAF3F5;
	position: fixed;
	inset: auto 0 0 0;
	z-index: 100000;
	display: flex;
	justify-content: center;
	padding: clamp(12px, 0.5rem + 1.07vw, 24px);
	font-family: "palatino-linotype", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	color: var(--pp-c-ink);
}

.pp-consent[hidden] { display: none; }

.pp-consent__card {
	width: 100%;
	max-width: 760px;
	background: var(--pp-c-card);
	border: 1px solid var(--pp-c-mist);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(54, 120, 135, .18);
	padding: clamp(20px, 1rem + 1.6vw, 32px);
}

.pp-consent__title {
	margin: 0 0 10px;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	line-height: 1.2;
	color: var(--pp-c-ink);
}

.pp-consent__text {
	margin: 0 0 18px;
	font-size: clamp(0.875rem, 0.82rem + 0.23vw, 1rem);
	line-height: 1.6;
}

.pp-consent__link { color: var(--pp-c-accent); text-decoration: underline; }

/* ---- preferences ---- */
.pp-consent__prefs {
	display: grid;
	gap: 10px;
	margin: 0 0 18px;
	padding: 14px;
	background: var(--pp-c-mist);
	border-radius: 10px;
}
.pp-consent__prefs[hidden] { display: none; }

.pp-consent__toggle {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
}
.pp-consent__toggle.is-locked { cursor: default; opacity: .72; }

.pp-consent__switch {
	flex: none;
	width: 42px;
	height: 24px;
	margin-top: 2px;
	border-radius: 12px;
	background: #C7D4D8;
	position: relative;
	transition: background .18s ease;
}
.pp-consent__knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform .18s ease;
}
/* role="switch" carries the state, so the attribute is what gets styled - not a class. */
.pp-consent__toggle[aria-checked="true"] .pp-consent__switch { background: var(--pp-c-accent); }
.pp-consent__toggle[aria-checked="true"] .pp-consent__knob { transform: translateX(18px); }

.pp-consent__toggle-label {
	font-size: .9375rem;
	line-height: 1.4;
}
.pp-consent__toggle-label small {
	display: block;
	font-size: .8125rem;
	opacity: .7;
}

/* ---- actions ---- */
.pp-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pp-consent__btn {
	flex: 1 1 auto;
	min-width: 140px;
	padding: 12px 22px;
	border-radius: 42px;
	border: 2px solid var(--pp-c-accent);
	background: #fff;
	color: var(--pp-c-accent);
	font: inherit;
	font-size: .9375rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.pp-consent__btn:hover { background: var(--pp-c-mist); }
.pp-consent__btn:focus-visible { outline: 3px solid var(--pp-c-accent); outline-offset: 3px; }

/* Reject and Accept are the SAME treatment. Only the middle "Choose" is quieter, because it is not an answer. */
.pp-consent__btn--reject,
.pp-consent__btn--accept {
	background: var(--pp-c-accent);
	color: #fff;
}
.pp-consent__btn--reject:hover,
.pp-consent__btn--accept:hover { background: #2C636F; }

.pp-consent__btn--select { font-weight: 400; }

/* ---- the persistent re-open tab ---- */
.pp-consent-tab {
	position: fixed;
	left: 14px;
	bottom: 14px;
	z-index: 99998;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--pp-c-accent, #367887);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(54, 120, 135, .3);
	opacity: .75;
	transition: opacity .18s ease, transform .18s ease;
}
.pp-consent-tab:hover { opacity: 1; transform: translateY(-2px); }
.pp-consent-tab:focus-visible { outline: 3px solid #367887; outline-offset: 3px; }

@media (max-width: 600px) {
	.pp-consent__btn { flex: 1 1 100%; }
	.pp-consent-tab { width: 38px; height: 38px; left: 10px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.pp-consent__switch, .pp-consent__knob, .pp-consent__btn, .pp-consent-tab { transition: none; }
}
