/* CCM consent banner. Colors come from the policy as custom properties on #ccm-root; layout uses logical properties
   so the same rules work right to left (Hebrew) and left to right. */

#ccm-root {
	--ccm-radius: 8px;
	--ccm-gap: 12px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ccm-text);
}

#ccm-root *,
#ccm-root *::before,
#ccm-root *::after {
	box-sizing: border-box;
}

#ccm-root [hidden] {
	display: none !important;
}

#ccm-root .ccm-banner,
#ccm-root .ccm-prefs {
	background: var(--ccm-background);
	color: var(--ccm-text);
	border: 1px solid rgba(0, 0, 0, 0.15);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
	padding: 20px;
	margin: 0;
}

#ccm-root .ccm-banner {
	position: fixed;
	z-index: 2147483000;
	inset-inline: 0;
	max-height: 90vh;
	overflow-y: auto;
}

#ccm-root.ccm--bottom .ccm-banner {
	bottom: 0;
}

#ccm-root.ccm--top .ccm-banner {
	top: 0;
}

/* Centered banner is a modal <dialog>. */
#ccm-root.ccm--center .ccm-banner {
	inset: 0;
	margin: auto;
	width: min(560px, calc(100vw - 32px));
	height: fit-content;
	border-radius: var(--ccm-radius);
}

/* Compact: a box in the corner instead of a full-width bar. */
#ccm-root.ccm--compact:not(.ccm--center):not(.ccm--bottom-left):not(.ccm--bottom-right) .ccm-banner {
	inset-inline: auto 16px;
	width: min(400px, calc(100vw - 32px));
	border-radius: var(--ccm-radius);
}

#ccm-root.ccm--compact.ccm--bottom .ccm-banner {
	bottom: 16px;
}

#ccm-root.ccm--compact.ccm--top .ccm-banner {
	top: 16px;
}

/* A box in the chosen corner, on the same side whatever the language's direction. */
#ccm-root.ccm--bottom-left .ccm-banner,
#ccm-root.ccm--bottom-right .ccm-banner {
	inset-inline: auto;
	bottom: 16px;
	width: min(400px, calc(100vw - 32px));
	border-radius: var(--ccm-radius);
}

#ccm-root.ccm--bottom-left .ccm-banner {
	left: 16px;
}

#ccm-root.ccm--bottom-right .ccm-banner {
	right: 16px;
}

#ccm-root .ccm-banner::backdrop,
#ccm-root .ccm-prefs::backdrop {
	background: rgba(0, 0, 0, 0.45);
}

#ccm-root .ccm-title {
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 8px;
	color: inherit;
}

#ccm-root .ccm-body p,
#ccm-root .ccm-intro {
	margin: 0 0 var(--ccm-gap);
}

#ccm-root a {
	color: inherit;
	text-decoration: underline;
}

#ccm-root .ccm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* Accept and reject always share size and weight; only their colors can differ (spec section 15). */
#ccm-root .ccm-btn {
	font: inherit;
	font-weight: 600;
	min-height: 44px;
	padding: 10px 20px;
	border-radius: 6px;
	border: 2px solid transparent;
	cursor: pointer;
	flex: 0 1 auto;
}

#ccm-root .ccm-btn--accept {
	background: var(--ccm-accept);
	color: var(--ccm-accept-text);
	border-color: var(--ccm-accept-border, transparent);
}

#ccm-root .ccm-btn--reject {
	background: var(--ccm-reject);
	color: var(--ccm-reject-text);
	border-color: var(--ccm-reject-border, transparent);
}

#ccm-root .ccm-btn--secondary {
	background: transparent;
	color: inherit;
	border-color: currentColor;
}

#ccm-root button:focus-visible,
#ccm-root a:focus-visible,
#ccm-root input:focus-visible {
	outline: 3px solid #005fcc;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px #ffffff;
}

/* Preference center. */
#ccm-root .ccm-prefs {
	width: min(640px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	margin: auto;
	border-radius: var(--ccm-radius);
	z-index: 2147483001;
}

#ccm-root .ccm-prefs:not([open]) {
	display: none;
}

#ccm-root .ccm-prefs-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--ccm-gap);
}

#ccm-root .ccm-close {
	font: inherit;
	font-size: 26px;
	line-height: 1;
	min-width: 44px;
	min-height: 44px;
	background: transparent;
	color: inherit;
	border: 0;
	cursor: pointer;
}

#ccm-root .ccm-cats {
	list-style: none;
	margin: 0 0 var(--ccm-gap);
	padding: 0;
}

#ccm-root .ccm-cat {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "label switch" "desc desc";
	gap: 2px var(--ccm-gap);
	padding: 10px 0;
	border-top: 1px solid rgba(127, 127, 127, 0.3);
}

#ccm-root .ccm-cat label {
	grid-area: label;
	font-weight: 600;
	cursor: pointer;
}

#ccm-root .ccm-cat .ccm-switch-wrap {
	grid-area: switch;
}

#ccm-root .ccm-cat-desc {
	grid-area: desc;
	margin: 0;
	font-size: 0.92em;
}

#ccm-root .ccm-always {
	font-weight: 400;
	font-size: 0.85em;
	margin-inline-start: 6px;
	padding: 1px 8px;
	border: 1px solid currentColor;
	border-radius: 10px;
}

/* Switch: a native checkbox, so keyboard and screen readers work as usual, laid transparent over a drawn track. The
   track is a span because themes and plugins restyle checkboxes (background, radius, ::before) with rules that can
   beat ours; they leave a span alone. The checkbox keeps only what it needs to cover the track and take clicks. */
#ccm-root .ccm-switch-wrap {
	position: relative;
	display: inline-block;
	width: 46px;
	height: 26px;
	flex: none;
}

#ccm-root .ccm-switch {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	cursor: pointer;
}

#ccm-root .ccm-switch::before,
#ccm-root .ccm-switch::after {
	display: none !important;
}

#ccm-root .ccm-switch-ui {
	position: absolute;
	inset: 0;
	display: block;
	border-radius: 13px;
	border: 2px solid currentColor;
	background: #8c8f94;
	transition: background-color 0.15s;
	pointer-events: none;
}

#ccm-root .ccm-switch-ui::before {
	content: "";
	position: absolute;
	top: 1px;
	inset-inline-start: 1px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ffffff;
	transition: inset-inline-start 0.15s;
}

#ccm-root .ccm-switch:checked + .ccm-switch-ui {
	background: var(--ccm-switch-on, var(--ccm-accept));
}

#ccm-root .ccm-switch:checked + .ccm-switch-ui::before {
	inset-inline-start: 21px;
	background: var(--ccm-switch-knob, #ffffff);
}

#ccm-root .ccm-switch:focus-visible + .ccm-switch-ui {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

#ccm-root .ccm-switch:disabled {
	cursor: not-allowed;
}

#ccm-root .ccm-switch:disabled + .ccm-switch-ui {
	opacity: 0.6;
}

#ccm-root .ccm-gpc {
	font-size: 0.92em;
	font-style: italic;
}

#ccm-root .ccm-id {
	font-size: 0.85em;
	opacity: 0.8;
	overflow-wrap: anywhere;
}

#ccm-root .ccm-id code {
	font-size: 1em;
	user-select: all;
}

/* Reopens the preference center after a choice. */
#ccm-root .ccm-reopen {
	position: fixed;
	z-index: 2147482999;
	bottom: 16px;
	inset-inline-start: 16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: var(--ccm-background);
	color: var(--ccm-text);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

#ccm-root .ccm-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 600px) {
	#ccm-root .ccm-actions .ccm-btn {
		flex: 1 1 100%;
	}
}

/* Windows high contrast and other forced-color modes replace backgrounds, which would hide the switch's state; draw
   it with system colors instead. Buttons keep their (forced) borders. */
@media (forced-colors: active) {
	#ccm-root .ccm-switch-ui {
		forced-color-adjust: none;
		background: Canvas;
		border-color: CanvasText;
	}

	#ccm-root .ccm-switch-ui::before {
		forced-color-adjust: none;
		background: CanvasText;
	}

	#ccm-root .ccm-switch:checked + .ccm-switch-ui {
		background: Highlight;
		border-color: Highlight;
	}

	#ccm-root .ccm-switch:checked + .ccm-switch-ui::before {
		background: HighlightText;
	}

	#ccm-root .ccm-btn {
		border-color: ButtonText;
	}
}

@media (prefers-reduced-motion: reduce) {
	#ccm-root .ccm-switch-ui,
	#ccm-root .ccm-switch-ui::before {
		transition: none;
	}
}

/* Placeholder shown instead of a blocked iframe (outside #ccm-root, inside the page content). */
.ccm-placeholder {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 200px;
	margin: 0 0 1em;
	padding: 24px;
	background: #f0f0f1;
	color: #1d2327;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	text-align: center;
	font-size: 15px;
	line-height: 1.5;
}

.ccm-placeholder p {
	margin: 0;
	max-width: 40em;
}

.ccm-placeholder-button {
	font: inherit;
	font-weight: 600;
	min-height: 44px;
	padding: 10px 20px;
	border: 0;
	border-radius: 6px;
	background: #2271b1;
	color: #ffffff;
	cursor: pointer;
}

.ccm-placeholder-button:focus-visible {
	outline: 3px solid #005fcc;
	outline-offset: 2px;
}