/* cookie-consent-mylp banner. Per-site look is overridable via these CSS vars. */
/* Defined on :root so the banner, the floating reopen, AND the server-rendered
   content-blocker facades all inherit them. --ccm-accent / --ccm-accent-text may
   be overridden per-site by the runtime (contrast-safe adoption of the site's
   button colour); everything else stays fixed and clean. */
:root {
	--ccm-surface: #ffffff; --ccm-surface-2: #f4f6f5; --ccm-line: #dce2e0;
	--ccm-text: #13201e; --ccm-muted: #5c6b68; --ccm-hint: #64706c;
	--ccm-accent: #0f6e56; --ccm-accent-on: #1d9e75; --ccm-accent-text: #ffffff;
	--ccm-radius: 12px; --ccm-radius-sm: 8px;
	--ccm-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
	:root {
		--ccm-surface: #15201e; --ccm-surface-2: #1b2725; --ccm-line: #2a3936;
		--ccm-text: #eaf1ef; --ccm-muted: #a7b5b2; --ccm-hint: #8fa09b;
	}
}

#ccm-root[hidden], #ccm-reopen[hidden] { display: none; }

#ccm-root {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 999999;
	display: flex; justify-content: center; padding: 16px;
	font-family: var(--ccm-sans); -webkit-font-smoothing: antialiased;
}
.ccm-banner {
	background: var(--ccm-surface); border: 1px solid var(--ccm-line);
	border-radius: var(--ccm-radius); padding: 18px 20px; max-width: 560px; width: 100%;
	box-shadow: 0 8px 24px rgba(19, 32, 30, .14), 0 2px 6px rgba(19, 32, 30, .08);
	color: var(--ccm-text);
}
.ccm-h { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.ccm-intro { font-size: 13px; line-height: 1.6; color: var(--ccm-muted); margin: 0 0 12px; }
.ccm-intro a { color: var(--ccm-accent); }
.ccm-note { font-size: 12px; line-height: 1.5; color: var(--ccm-hint); margin: 0 0 14px; }

.ccm-groups { max-height: 46vh; overflow-y: auto; margin: 0 0 14px; }
.ccm-ghead { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: var(--ccm-hint); margin: 12px 0 7px; }
.ccm-row { display: flex; gap: 12px; align-items: center; padding: 10px 12px;
	border: 1px solid var(--ccm-line); border-radius: var(--ccm-radius-sm); margin-bottom: 8px; }
.ccm-info { flex: 1; min-width: 0; }
.ccm-nm { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.ccm-ds { font-size: 12px; line-height: 1.4; color: var(--ccm-muted); }
.ccm-lock { width: 14px; height: 14px; border-radius: 3px; background: var(--ccm-hint); opacity: .4; flex: none; }

/* Per-service detail toggle (chevron) + expandable GDPR detail panel.
   #ccm-root-scoped rules below are intentional, base state included: this
   button carries type="button" (for a11y semantics), and some parent themes
   ship a Bootstrap-like reset `[type="button"], button{color:#c36;border:1px
   solid #c36;padding:...;border-radius:...}` at the EXACT SAME specificity
   as a bare `.ccm-dt` class rule (attribute selector and class selector are
   the same specificity tier). A tie is broken by stylesheet load order, and
   a theme loading after our plugin wins, bleeding its color/border/padding
   into an otherwise-fine-looking button. The #ccm-root id anchors our rules
   above that regardless of load order. Same reasoning applies to .ccm-sw
   below (also type="button"). */
#ccm-root .ccm-dt { flex: none; width: 28px; height: 28px; border: 0; background: none; padding: 0;
	display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 6px; color: var(--ccm-hint); }
#ccm-root .ccm-dt:hover, #ccm-root .ccm-dt:focus { background: var(--ccm-surface-2); color: var(--ccm-hint); }
#ccm-root .ccm-dt:focus-visible { outline: 2px solid var(--ccm-accent-on); outline-offset: 2px; }
.ccm-dt-ch { display: block; width: 10px; height: 10px; transition: transform .15s; }
.ccm-dt[aria-expanded="true"] .ccm-dt-ch { transform: rotate(180deg); }

.ccm-detail { border: 1px solid var(--ccm-line); border-radius: var(--ccm-radius-sm);
	background: var(--ccm-surface-2); padding: 10px 12px; margin: -4px 0 8px;
	font-size: 12px; line-height: 1.5; color: var(--ccm-muted); }
.ccm-detail[hidden] { display: none; }
.ccm-detail p { margin: 0 0 8px; }
.ccm-detail p:last-child { margin-bottom: 0; }
.ccm-detail a { color: var(--ccm-accent); }
.ccm-d-cookies-wrap { max-height: 150px; overflow-y: auto; margin: 0 0 8px; }
.ccm-d-cookies { width: 100%; border-collapse: collapse; font-size: 11px; }
.ccm-d-cookies th { text-align: left; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
	font-size: 10px; color: var(--ccm-hint); padding: 0 8px 4px 0; border-bottom: 1px solid var(--ccm-line); }
.ccm-d-cookies td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--ccm-line);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.ccm-d-cookies td:last-child { font-family: var(--ccm-sans); white-space: nowrap; }
.ccm-d-cookies tr:last-child td { border-bottom: 0; }

#ccm-root .ccm-sw { position: relative; width: 40px; height: 23px; flex: none; border: 0; background: none; padding: 0; cursor: pointer; }
#ccm-root .ccm-sw:hover, #ccm-root .ccm-sw:focus { background: none; }
.ccm-tr { position: absolute; inset: 0; border-radius: 23px; background: var(--ccm-line); transition: background .18s; }
.ccm-kn { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: left .18s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ccm-sw[aria-checked="true"] .ccm-tr { background: var(--ccm-accent-on); }
.ccm-sw[aria-checked="true"] .ccm-kn { left: 19px; }
.ccm-locked { opacity: .8; }

.ccm-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ccm-b { flex: 1; min-width: 120px; padding: 12px 14px; border-radius: var(--ccm-radius-sm);
	font-size: 13px; font-weight: 600; font-family: var(--ccm-sans); cursor: pointer; }
.ccm-accept { border: 0; background: var(--ccm-accent); color: var(--ccm-accent-text); }
.ccm-alt { border: 1px solid var(--ccm-line); background: var(--ccm-surface-2); color: var(--ccm-text); }
#ccm-root .ccm-accept:hover, #ccm-root .ccm-accept:focus { background: var(--ccm-accent); color: var(--ccm-accent-text); }
#ccm-root .ccm-alt:hover, #ccm-root .ccm-alt:focus { background: var(--ccm-surface-2); color: var(--ccm-text); }
.ccm-b:focus-visible { outline: 2px solid var(--ccm-accent-on); outline-offset: 2px; }

#ccm-reopen {
	position: fixed; left: 16px; bottom: 16px; z-index: 999998;
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ccm-line);
	background: var(--ccm-surface); color: var(--ccm-text); font-size: 20px; line-height: 1;
	cursor: pointer; box-shadow: 0 4px 12px rgba(19, 32, 30, .18);
}
#ccm-reopen:focus-visible { outline: 2px solid var(--ccm-accent-on); outline-offset: 2px; }

/* Content-blocker facade (click-to-load) */
.ccm-content-blocker {
	font-family: var(--ccm-sans); background: var(--ccm-surface-2);
	border: 1px solid var(--ccm-line); border-radius: var(--ccm-radius);
	padding: 20px; text-align: center; color: var(--ccm-text);
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	min-height: 160px; justify-content: center;
}
.ccm-content-blocker .ccm-cb-msg { font-size: 13px; line-height: 1.5; color: var(--ccm-muted); margin: 0; max-width: 46ch; }
.ccm-content-blocker .ccm-cb-btn {
	padding: 11px 18px; border: 0; border-radius: var(--ccm-radius-sm);
	background: var(--ccm-accent); color: var(--ccm-accent-text); font-size: 13px; font-weight: 600; cursor: pointer;
}
.ccm-content-blocker .ccm-cb-prefs {
	padding: 6px 10px; border: 0; background: none; color: var(--ccm-hint);
	font-size: 12px; text-decoration: underline; cursor: pointer;
}
.ccm-content-blocker .ccm-cb-btn:focus-visible,
.ccm-content-blocker .ccm-cb-prefs:focus-visible { outline: 2px solid var(--ccm-accent-on); outline-offset: 2px; }

/* position:relative scoped to the spinner phase only: once ccm-cb-spin is
   removed (content loaded), .ccm-cb-loaded must fall back to static so an
   injected absolute+100%-height iframe (the theme's responsive video embeds)
   sizes against the real aspect-ratio wrapper instead of this 60px holder. */
.ccm-cb-loaded.ccm-cb-spin { position: relative; min-height: 60px; }
.ccm-cb-loaded.ccm-cb-spin::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px;
	margin: -14px 0 0 -14px; border: 3px solid var(--ccm-line); border-top-color: var(--ccm-accent);
	border-radius: 50%; animation: ccm-spin .7s linear infinite;
}
@keyframes ccm-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.ccm-tr, .ccm-kn, .ccm-dt-ch { transition: none; }
	.ccm-cb-loaded.ccm-cb-spin::after { animation: none; }
}