/**
 * Penta Cookie — front-end styles.
 * Every colour, radius and size is driven by CSS custom properties that the
 * admin design screen writes into an inline <style> block.
 */

.pc-root,
.pc-badge {
	font-family: var( --pc-font, inherit );
	box-sizing: border-box;
}

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

.pc-root[hidden],
.pc-badge[hidden],
.pc-root [hidden] {
	display: none !important;
}

/* ----------------------------------------------------------------- Layer */

/*
 * Everything lives inside one fixed layer that JavaScript appends to <body>.
 * `position: fixed` resolves against the nearest ancestor carrying a transform,
 * filter, perspective, contain or will-change — a very common thing on theme
 * wrappers, and it silently turns a viewport-pinned banner into one that scrolls
 * away with the page. Having a single element to anchor means there is exactly
 * one place to correct when that happens (see .pc-layer-fallback).
 */
#penta-cookie-layer {
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	pointer-events: none;
	z-index: 2147483000;
}

/* Applied by JS when a transformed ancestor is detected; the layer is then
   absolutely positioned and its offset is kept in sync with the scroll.
   The viewport units are the safety net: JavaScript refines width/height to the
   exact client box, but a measurement can come back as 0 (a backgrounded tab, a
   bfcache restore) and a collapsed layer would throw the badge off screen. */
#penta-cookie-layer.pc-layer-fallback {
	position: absolute !important;
	width: 100vw;
	height: 100vh;
}

#penta-cookie-layer .pc-root {
	position: absolute !important;
}

#penta-cookie-layer .pc-badge {
	position: absolute !important;
	pointer-events: auto;
}

/* ----------------------------------------------------- Stage &amp; overlay */

/*
 * The stage is a fixed, full-viewport flex container and the panels are ordinary
 * flow children inside it. Positioning deliberately does NOT use `transform`:
 * the entry animation ends on `transform: none`, which would wipe out any
 * translate used for centring the moment the animation settles.
 */
.pc-root {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	padding: 20px;
	pointer-events: none;
}

.pc-overlay {
	position: absolute;
	inset: 0;
	background: var( --pc-overlay, rgba( 0, 0, 0, .55 ) );
	pointer-events: auto;
	animation: pc-fade .25s ease both;
}

@keyframes pc-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes pc-rise {
	from { opacity: 0; transform: translateY( 16px ); }
	to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- Panels */

.pc-banner,
.pc-prefs {
	position: relative;
	z-index: 1;
	pointer-events: auto;
	background: var( --pc-bg, #fff );
	color: var( --pc-text, #5b6067 );
	border-radius: var( --pc-radius, 14px );
	box-shadow: var( --pc-shadow, 0 24px 60px rgba( 0, 0, 0, .22 ) );
	width: min( var( --pc-width, 480px ), 100% );
	max-height: calc( 100vh - 40px );
	overflow-y: auto;
	overscroll-behavior: contain;
	animation: pc-rise .28s ease both;
	-webkit-overflow-scrolling: touch;
}

.pc-banner {
	padding: 30px 32px 22px;
}

/* The leading glyph belongs to the pill layout only. */
.pc-banner-icon { display: none; }

/* Position variants — plain flex alignment, no transforms involved. */

.pc-pos-center       { align-items: center; justify-content: center; }
.pc-pos-top          { align-items: flex-start; justify-content: center; }
.pc-pos-bottom       { align-items: flex-end; justify-content: center; }
.pc-pos-bottom-left  { align-items: flex-end; justify-content: flex-start; }
.pc-pos-bottom-right { align-items: flex-end; justify-content: flex-end; }

.pc-root.pc-layout-bar {
	padding: 0;
	align-items: flex-end;
	justify-content: center;
}

.pc-root.pc-layout-bar .pc-banner {
	width: 100%;
	max-width: 100%;
	border-radius: 0;
	padding: 13px clamp( 14px, 3.5vw, 40px );
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
}

/*
 * The bar is a dense strip across the viewport, not a panel. The configured type
 * scale is stepped down proportionally here so the same design settings do not
 * produce a band twice as tall as it needs to be — the admin's relative sizing
 * still applies, it is simply denser in this layout.
 */
.pc-root.pc-layout-bar .pc-title {
	font-size: calc( var( --pc-title-size, 20px ) * .7 );
	margin-bottom: 1px;
}

.pc-root.pc-layout-bar .pc-body {
	font-size: calc( var( --pc-text-size, 14px ) * .9 );
	line-height: 1.4;
}

.pc-root.pc-layout-bar .pc-btn {
	min-height: 36px;
	padding: 8px 14px;
	font-size: calc( var( --pc-btn-size, 14px ) * .92 );
}

.pc-root.pc-layout-bar .pc-foot .pc-policy { font-size: 13px; }

.pc-layout-bar .pc-banner .pc-body { flex: 1 1 420px; }

.pc-layout-bar .pc-banner .pc-title { width: 100%; }

.pc-layout-bar .pc-actions {
	display: flex;
	flex: 0 1 auto;
	margin: 0;
}

.pc-layout-bar .pc-btn-wide { grid-column: auto; }

/* The bar is already one horizontal strip; a rule above the policy link only
   adds noise, and the link sits inline with the actions rather than under them. */
.pc-root.pc-layout-bar .pc-foot {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------ Pill layout */

/*
 * A single floating row: glyph, one line of copy, the secondary actions as
 * plain links and one prominent call to action. It is a distinct arrangement
 * rather than a restyled bar, so the pieces are laid out from scratch here.
 */
.pc-root.pc-layout-pill {
	padding: 18px clamp( 12px, 3vw, 28px );
}

.pc-root.pc-layout-pill .pc-banner {
	width: min( var( --pc-pill-width, 1120px ), 100% );
	max-width: 100%;
	border-radius: 999px;
	border: 1px solid var( --pc-border, #e6e6e6 );
	padding: 12px 12px 12px 26px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 24px;
}

/* The pill has no room for a heading; the body carries the message. */
.pc-root.pc-layout-pill .pc-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.pc-root.pc-layout-pill .pc-banner-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	color: var( --pc-text, #5b6067 );
}

.pc-root.pc-layout-pill .pc-banner-icon .pc-opener-icon,
.pc-root.pc-layout-pill .pc-banner-icon svg {
	width: 26px;
	height: 26px;
}

.pc-root.pc-layout-pill .pc-body {
	flex: 1 1 260px;
	font-size: calc( var( --pc-text-size, 14px ) * .95 );
	line-height: 1.45;
}

.pc-root.pc-layout-pill .pc-actions {
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	margin: 0;
}

.pc-root.pc-layout-pill .pc-btn-wide { grid-column: auto; }

/* Visual order: manage, reject, then the call to action on the far right. */
.pc-root.pc-layout-pill .pc-btn-settings { order: 1; }
.pc-root.pc-layout-pill .pc-btn-reject   { order: 2; }
.pc-root.pc-layout-pill .pc-btn-accept   { order: 3; }

/*
 * Reading order across the row: glyph, message, then every text link, and the
 * call to action last. The policy link belongs with the other links rather than
 * trailing the primary button, where it would sit flush against the edge.
 */
.pc-root.pc-layout-pill .pc-banner-icon { order: 0; }
.pc-root.pc-layout-pill .pc-body        { order: 1; }
.pc-root.pc-layout-pill .pc-foot        { order: 2; }
.pc-root.pc-layout-pill .pc-actions     { order: 3; }

.pc-root.pc-layout-pill .pc-foot {
	flex: 0 0 auto;
	border-top: 0;
	margin: 0;
	padding: 0;
}

.pc-root.pc-layout-pill .pc-foot .pc-policy { font-size: 13px; }

/* The preference centre is always centred, whatever the banner position is. */
.pc-prefs {
	width: min( 720px, 100% );
	padding: 22px 24px 18px;
	align-self: center;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------- Typography */

.pc-title {
	margin: 0 0 9px;
	padding: 0;
	color: var( --pc-title, #111 );
	font-size: var( --pc-title-size, 20px );
	font-weight: var( --pc-title-weight, 800 );
	line-height: 1.2;
	letter-spacing: .02em;
	text-transform: var( --pc-title-transform, uppercase );
}

.pc-body,
.pc-prefs-intro {
	font-size: var( --pc-text-size, 14px );
	line-height: 1.5;
	color: var( --pc-text, #5b6067 );
}

.pc-body p,
.pc-prefs-intro p { margin: 0 0 7px; }

.pc-body p:last-child { margin-bottom: 0; }

.pc-root a {
	color: var( --pc-link, #111 );
	text-decoration: none;
}

.pc-root a:hover,
.pc-root a:focus-visible { text-decoration: underline; }

/* --------------------------------------------------------------- Buttons */

.pc-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 18px;
}

.pc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 18px;
	border: 0;
	border-radius: var( --pc-btn-radius, 0 );
	font-family: inherit;
	font-size: var( --pc-btn-size, 14px );
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: filter .15s ease, opacity .15s ease;
	appearance: none;
}

.pc-btn:hover { filter: brightness( 1.12 ); }

/* The panel itself takes focus when it opens, so no button starts out ringed.
   Keyboard users still get a ring the moment they tab. */
.pc-banner:focus,
.pc-prefs:focus { outline: none; }

.pc-btn:focus:not( :focus-visible ) { outline: none; }

.pc-btn:focus-visible {
	outline: 2px solid var( --pc-accept-bg, #e03a34 );
	outline-offset: 2px;
}

.pc-btn-wide { grid-column: 1 / -1; }

.pc-btn-accept {
	background-color: var( --pc-accept-bg, #e03a34 );
	background-image: linear-gradient( 135deg, var( --pc-accept-bg, #e03a34 ) 0%, var( --pc-accept-gradient, var( --pc-accept-bg, #e03a34 ) ) 100% );
	color: var( --pc-accept-text, #fff );
}
.pc-btn-reject   { background: var( --pc-reject-bg, #000 ); color: var( --pc-reject-text, #fff ); }
.pc-btn-settings { background: var( --pc-settings-bg, #000 ); color: var( --pc-settings-text, #fff ); }
.pc-btn-save     { background: var( --pc-save-bg, #000 ); color: var( --pc-save-text, #fff ); }

/* ---------------------------------------------------------------- Footer */

.pc-foot {
	margin-top: 16px;
	padding-top: 13px;
	border-top: 1px solid var( --pc-border, #e6e6e6 );
	text-align: center;
}

.pc-foot .pc-policy {
	font-size: 14px;
	color: var( --pc-text, #5b6067 );
}

/* ----------------------------------------------------- Preference centre */

.pc-prefs-head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin-bottom: 16px;
	min-height: 32px;
}

/* No padding on the row itself — the content is capped instead, which keeps the
   text clear of the absolutely placed close button without insetting the row. */
.pc-prefs-head .pc-title {
	margin: 0;
	flex: 1 1 auto;
	max-width: calc( 100% - 46px );
}

.pc-prefs-head .pc-policy {
	font-size: 15px;
	color: var( --pc-text, #5b6067 );
	max-width: calc( 100% - 46px );
	/* Clears the close button without insetting the whole header row. */
	margin-right: 44px;
}

/*
 * Absolute rather than a flex child: when the title wraps on a narrow screen a
 * flex-placed close button gets pushed out of the panel entirely.
 */
.pc-close {
	position: absolute;
	top: 0;
	right: 0;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --pc-text, #5b6067 );
	cursor: pointer;
}

.pc-close:hover { background: rgba( 0, 0, 0, .06 ); }

.pc-close-glyph {
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	color: inherit;
	/* Optically centre the glyph inside the round button. */
	margin-top: -3px;
}

.pc-prefs-body {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 16px;
}

.pc-cat {
	border: 1px solid var( --pc-border, #e6e6e6 );
	border-radius: 10px;
	padding: 14px 16px;
}

.pc-cat-top {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.pc-cat-info { flex: 1 1 auto; }

.pc-cat-name {
	margin: 0 0 3px;
	font-size: 15px;
	font-weight: 700;
	color: var( --pc-title, #111 );
	line-height: 1.3;
}

.pc-cat-desc {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var( --pc-text, #5b6067 );
}

.pc-cat-ctrl {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	min-height: 26px;
}

.pc-always {
	display: inline-block;
	padding: 6px 13px;
	border-radius: 999px;
	background: #eceef0;
	color: #4b5157;
	font-size: 12.5px;
	font-weight: 500;
	white-space: nowrap;
}

/* Toggle */

.pc-switch {
	position: relative;
	display: inline-block;
	width: 46px;
	height: 26px;
	flex: 0 0 auto;
	cursor: pointer;
}

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

.pc-slider {
	position: absolute;
	inset: 0;
	background: var( --pc-toggle-off, #cfd3d8 );
	border-radius: 999px;
	transition: background .2s ease;
	pointer-events: none;
}

.pc-slider::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, .25 );
	transition: transform .2s ease;
}

.pc-switch input:checked + .pc-slider { background: var( --pc-toggle-on, #e03a34 ); }
.pc-switch input:checked + .pc-slider::before { transform: translateX( 20px ); }

.pc-switch input:focus-visible + .pc-slider {
	outline: 3px solid var( --pc-toggle-on, #e03a34 );
	outline-offset: 2px;
}

.pc-sr,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

/* Cookie tables */

.pc-details-toggle {
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: none;
	color: var( --pc-link, #111 );
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.pc-details-toggle .pc-details-hide { display: none; }
.pc-details-toggle[aria-expanded="true"] .pc-details-hide { display: inline; }
.pc-details-toggle[aria-expanded="true"] .pc-details-show { display: none; }

.pc-details { margin-top: 10px; overflow-x: auto; }

.pc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
	line-height: 1.45;
}

.pc-table th,
.pc-table td {
	text-align: left;
	padding: 7px 10px;
	border-bottom: 1px solid var( --pc-border, #e6e6e6 );
	vertical-align: top;
	color: var( --pc-text, #5b6067 );
}

.pc-table th {
	font-weight: 700;
	color: var( --pc-title, #111 );
	white-space: nowrap;
}

.pc-table code {
	font-size: 12px;
	background: rgba( 0, 0, 0, .05 );
	padding: 2px 6px;
	border-radius: 4px;
	word-break: break-all;
}

.pc-provider {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	opacity: .7;
}

.pc-prefs-foot {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 8px;
}

/* ---------------------------------------------------------------- Badge */

.pc-badge {
	position: fixed;
	z-index: 2147482000;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	border: 1px solid var( --pc-badge-border, transparent );
	border-radius: 999px;
	background: var( --pc-badge-bg, #fff );
	color: var( --pc-badge-text, #111 );
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	box-shadow: var( --pc-badge-shadow, 0 4px 16px rgba( 0, 0, 0, .16 ) );
	cursor: pointer;
}

.pc-badge:hover { filter: brightness( .97 ); }

.pc-badge-bottom-left  { bottom: 18px; left: 18px; }
.pc-badge-bottom-right { bottom: 18px; right: 18px; }
.pc-badge-middle-left  { top: 50%; left: 0; transform: translateY( -50% ); border-radius: 0 999px 999px 0; }
.pc-badge-middle-right { top: 50%; right: 0; transform: translateY( -50% ); border-radius: 999px 0 0 999px; }

/* The glyph takes its own colour so it can be picked out from the label. */
.pc-badge .pc-opener-icon { color: var( --pc-badge-icon, currentColor ); }

/* Label cleared: a round icon button, equal padding all round. */
.pc-badge-round {
	padding: 12px;
	gap: 0;
}

.pc-badge-round .pc-opener-icon,
.pc-badge-round .pc-opener-icon svg {
	width: 20px;
	height: 20px;
}

/*
 * Edge-hugging positions are half pills, which looks wrong on a round button;
 * detach it from the edge and keep it circular.
 */
.pc-badge-round.pc-badge-middle-left  { left: 18px; border-radius: 999px; }
.pc-badge-round.pc-badge-middle-right { right: 18px; border-radius: 999px; }

/* --------------------------------------------------- Embed placeholders */

.pc-embed-holder {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 11px;
	min-height: 140px;
	padding: 20px;
	background: #f3f4f6;
	border: 1px dashed #c9ced4;
	border-radius: 10px;
	text-align: center;
	color: #4b5157;
	font-size: 14px;
	line-height: 1.5;
}

.pc-embed-holder .pc-btn {
	min-height: 38px;
	padding: 9px 18px;
	background: var( --pc-accept-bg, #e03a34 );
	color: var( --pc-accept-text, #fff );
	border-radius: var( --pc-btn-radius, 0 );
	font-size: 14px;
}

/* --------------------------------------------------------------- Mobile */

@media ( max-width: 600px ) {

	.pc-root { padding: 10px; }

	.pc-banner {
		padding: 22px 18px 18px;
		width: 100%;
		max-height: calc( 100vh - 20px );
	}

	.pc-prefs {
		padding: 18px 15px 16px;
		width: 100%;
		max-height: calc( 100vh - 20px );
	}

	.pc-actions,
	.pc-prefs-foot { grid-template-columns: 1fr; }

	.pc-root.pc-layout-pill .pc-banner {
		border-radius: var( --pc-radius, 14px );
		padding: 18px;
		gap: 10px 16px;
	}

	.pc-root.pc-layout-pill .pc-actions {
		width: 100%;
		justify-content: space-between;
	}

	#penta-cookie-layer .pc-layout-pill .pc-btn-accept {
		flex: 1 1 100%;
		order: 3;
	}

	/* Long compound words (Cookie-Einstellungen) must not force a wide panel. */
	.pc-prefs .pc-title {
		font-size: calc( var( --pc-title-size, 20px ) * .78 );
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.pc-prefs-head .pc-policy { flex: 1 1 100%; }

	.pc-btn-wide { grid-column: auto; }

	.pc-cat-top { flex-direction: column; gap: 14px; }

	.pc-cat-ctrl { align-self: flex-start; }

	.pc-badge {
		padding: 11px 18px;
		font-size: 14px;
	}

	.pc-badge-bottom-left  { bottom: 14px; left: 14px; }
	.pc-badge-bottom-right { bottom: 14px; right: 14px; }

	.pc-table thead { display: none; }

	.pc-table,
	.pc-table tbody,
	.pc-table tr,
	.pc-table td { display: block; width: 100%; }

	.pc-table tr {
		border-bottom: 1px solid var( --pc-border, #e6e6e6 );
		padding: 8px 0;
	}

	.pc-table td { border: 0; padding: 4px 0; }

	.pc-table td::before {
		content: attr( data-label ) ": ";
		font-weight: 700;
		color: var( --pc-title, #111 );
	}
}

/* ----------------------------------------------------------- Theme reset */

/*
 * Themes style every <button>, <section> and <table> on the page, routinely with
 * selectors that outrank a single class (`button[type="button"]`) or with
 * `!important` outright. When that happens the design settings look broken:
 * the corner radius, the accept colour and the button shape are silently
 * replaced by the theme's own.
 *
 * These rules re-assert only what the design screen is supposed to control.
 * They are scoped to the layer id so they win on specificity, and marked
 * important so they also survive a theme that shouts. Anything not listed here
 * — spacing between cards, hover behaviour, custom additions — stays open to
 * the theme and to the Custom CSS box.
 *
 * Overriding these from Custom CSS needs the same weight, for example:
 *   #penta-cookie-layer .pc-btn { border-radius: 8px !important; }
 */

#penta-cookie-layer .pc-banner,
#penta-cookie-layer .pc-prefs {
	background: var( --pc-bg, #fff ) !important;
	border: 0 !important;
	border-radius: var( --pc-radius, 14px ) !important;
	box-shadow: var( --pc-shadow, 0 24px 60px rgba( 0, 0, 0, .22 ) ) !important;
	color: var( --pc-text, #5b6067 ) !important;
}

#penta-cookie-layer .pc-layout-bar .pc-banner {
	border-radius: 0 !important;
}

#penta-cookie-layer .pc-btn {
	border: 0 !important;
	border-radius: var( --pc-btn-radius, 0 ) !important;
	font-family: inherit !important;
	font-size: var( --pc-btn-size, 14px ) !important;
	font-weight: 700 !important;
	letter-spacing: normal !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	min-height: 44px !important;
	height: auto !important;
	width: auto !important;
	padding: 11px 18px !important;
	background-image: none !important;
}

#penta-cookie-layer .pc-layout-bar .pc-btn {
	min-height: 36px !important;
	padding: 8px 14px !important;
	font-size: calc( var( --pc-btn-size, 14px ) * .92 ) !important;
}

#penta-cookie-layer .pc-btn:focus:not( :focus-visible ),
#penta-cookie-layer .pc-details-toggle:focus:not( :focus-visible ),
#penta-cookie-layer .pc-close:focus:not( :focus-visible ),
#penta-cookie-layer .pc-badge:focus:not( :focus-visible ) {
	outline: 0 !important;
	box-shadow: none !important;
}

#penta-cookie-layer .pc-btn-accept {
	background-color: var( --pc-accept-bg, #e03a34 ) !important;
	background-image: linear-gradient( 135deg, var( --pc-accept-bg, #e03a34 ) 0%, var( --pc-accept-gradient, var( --pc-accept-bg, #e03a34 ) ) 100% ) !important;
	color: var( --pc-accept-text, #fff ) !important;
}

#penta-cookie-layer .pc-btn-reject {
	background-color: var( --pc-reject-bg, #000 ) !important;
	color: var( --pc-reject-text, #fff ) !important;
}

#penta-cookie-layer .pc-btn-settings {
	background-color: var( --pc-settings-bg, #000 ) !important;
	color: var( --pc-settings-text, #fff ) !important;
}

#penta-cookie-layer .pc-btn-save {
	background-color: var( --pc-save-bg, #000 ) !important;
	color: var( --pc-save-text, #fff ) !important;
}

/* Secondary actions read as links in this layout, not as filled buttons. */
#penta-cookie-layer .pc-layout-pill .pc-btn-settings,
#penta-cookie-layer .pc-layout-pill .pc-btn-reject {
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var( --pc-text, #5b6067 ) !important;
	min-height: 0 !important;
	padding: 2px 0 !important;
	font-weight: 500 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

#penta-cookie-layer .pc-layout-pill .pc-btn-settings:hover,
#penta-cookie-layer .pc-layout-pill .pc-btn-reject:hover {
	filter: none !important;
	color: var( --pc-title, #111 ) !important;
}

#penta-cookie-layer .pc-layout-pill .pc-btn-accept {
	border-radius: 999px !important;
	min-height: 46px !important;
	padding: 12px 32px !important;
	font-weight: 600 !important;
}

#penta-cookie-layer .pc-cat {
	background: transparent !important;
	border: 1px solid var( --pc-border, #e6e6e6 ) !important;
	border-radius: 12px !important;
}

#penta-cookie-layer .pc-details-toggle {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: underline !important;
	color: var( --pc-link, #111 ) !important;
}

#penta-cookie-layer .pc-close {
	background: transparent !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: 0 !important;
	color: var( --pc-text, #5b6067 ) !important;
}

#penta-cookie-layer .pc-always {
	background: #eceef0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #4b5157 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

#penta-cookie-layer .pc-slider {
	border: 0 !important;
	border-radius: 999px !important;
	background-color: var( --pc-toggle-off, #cfd3d8 ) !important;
}

#penta-cookie-layer .pc-switch input:checked + .pc-slider {
	background-color: var( --pc-toggle-on, #e03a34 ) !important;
}

#penta-cookie-layer .pc-badge {
	border: 1px solid var( --pc-badge-border, transparent ) !important;
	border-radius: 999px !important;
	background-color: var( --pc-badge-bg, #fff ) !important;
	color: var( --pc-badge-text, #111 ) !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	line-height: 1 !important;
	min-height: 0 !important;
	width: auto !important;
	padding: 9px 15px !important;
	background-image: none !important;
	box-shadow: var( --pc-badge-shadow, 0 4px 16px rgba( 0, 0, 0, .16 ) ) !important;
}

#penta-cookie-layer .pc-badge-round {
	padding: 12px !important;
}

/*
 * Themes that size every `button svg` blow the glyph up to whatever they use
 * for their own icons and paint it their own colour, which pushes it out of the
 * button entirely. Sizes are re-asserted for each place the opener appears.
 */
#penta-cookie-layer .pc-opener-icon,
#penta-cookie-layer .pc-opener-icon svg,
button.pc-opener-link .pc-opener-icon,
button.pc-opener-link .pc-opener-icon svg,
.pc-btn .pc-opener-icon,
.pc-btn .pc-opener-icon svg {
	width: 18px !important;
	height: 18px !important;
	min-width: 0 !important;
	max-width: none !important;
	fill: currentColor !important;
}

#penta-cookie-layer .pc-badge-round .pc-opener-icon,
#penta-cookie-layer .pc-badge-round .pc-opener-icon svg {
	width: 20px !important;
	height: 20px !important;
}

#penta-cookie-layer .pc-layout-pill .pc-banner-icon .pc-opener-icon,
#penta-cookie-layer .pc-layout-pill .pc-banner-icon .pc-opener-icon svg {
	width: 26px !important;
	height: 26px !important;
}

#penta-cookie-layer .pc-badge .pc-opener-icon {
	color: var( --pc-badge-icon, currentColor ) !important;
}

#penta-cookie-layer .pc-badge-middle-left {
	border-radius: 0 999px 999px 0 !important;
}

#penta-cookie-layer .pc-badge-middle-right {
	border-radius: 999px 0 0 999px !important;
}

#penta-cookie-layer .pc-badge-round.pc-badge-middle-left,
#penta-cookie-layer .pc-badge-round.pc-badge-middle-right {
	border-radius: 999px !important;
}

#penta-cookie-layer .pc-table {
	width: 100% !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-collapse: collapse !important;
}

#penta-cookie-layer .pc-table th,
#penta-cookie-layer .pc-table td {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var( --pc-border, #e6e6e6 ) !important;
	text-transform: none !important;
}

@media ( prefers-reduced-motion: reduce ) {

	.pc-overlay,
	.pc-banner,
	.pc-prefs { animation: none; }

	.pc-slider,
	.pc-slider::before { transition: none; }
}

/* ------------------------------------------------- Footer opener (Viewron) */

/*
 * Lives inside the theme footer rather than floating over the page, so it must
 * inherit the footer's own colour. Only the properties a theme's generic
 * `button` rules would clobber are forced.
 */
.pc-footer-opener {
	width: 100%;
	margin: 10px 0 0;
	padding: 0;
	text-align: center;
	font-family: var( --pc-font, inherit );
}

.pc-footer-opener[hidden] { display: none !important; }

button.pc-opener-link {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 4px 2px !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	text-decoration: underline !important;
	text-shadow: none !important;
	cursor: pointer;
	opacity: .85;
}

button.pc-opener-link:hover,
button.pc-opener-link:focus-visible { opacity: 1; }

button.pc-opener-link:focus:not( :focus-visible ) {
	outline: 0 !important;
	box-shadow: none !important;
}

/* The button variant of the shortcode needs the same icon spacing. */
#penta-cookie-layer .pc-btn .pc-opener-icon,
.pc-btn .pc-opener-icon { margin-right: 7px; }

/* Nothing beside the glyph: no gap to keep and no text to underline. */
#penta-cookie-layer .pc-btn.pc-opener-icon-only .pc-opener-icon,
.pc-opener-icon-only .pc-opener-icon { margin-right: 0 !important; }

button.pc-opener-link.pc-opener-icon-only {
	gap: 0;
	padding: 4px !important;
	text-decoration: none !important;
}

.pc-opener-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.pc-opener-icon svg {
	display: block;
	width: 18px;
	height: 18px;
	max-width: none;
	fill: currentColor;
}
