/**
 * Qlarant Privacy Notices
 *
 * Two sections:
 *   1. The opt-out confirmation notices.
 *   2. Fixes for conflicts between the bootstrapv3 theme and the Complianz UI.
 *
 * Every visual property is declared explicitly. The theme applies site-wide
 * resets to SVG and form elements, and inherited values cannot be trusted.
 */

/* =====================================================================
 * 1. OPT-OUT CONFIRMATION NOTICES
 * ================================================================== */

.qpn-notice {
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	text-decoration: none;
	border: 0;
	border-radius: 0;
}

/* --- Footer variant -------------------------------------------------
 * The footer is dark teal. #ffffff on that background clears WCAG 2.1 AA
 * (4.5:1) comfortably. The rule above it separates the notice from the
 * copyright block without adding decoration.
 * ------------------------------------------------------------------ */
.qpn-notice--footer {
	margin: 0 0 12px 0;
	padding: 12px 0 0 0;
	color: #ffffff;
	background-color: transparent;
	border-top: 1px solid rgba( 255, 255, 255, 0.25 );
    text-align: center; 
}

/* --- Opt-out Preferences page variant -------------------------------
 * Light panel with a solid left rule. #1a1a1a on #f2f5f6 is roughly 15:1.
 * ------------------------------------------------------------------ */
.qpn-notice--inline {
	margin: 16px 0 24px 0;
	padding: 12px 16px;
	color: #1a1a1a;
	background-color: #f2f5f6;
	border-left: 4px solid #1e6b7b;
}

/* =====================================================================
 * 2. THEME / COMPLIANZ CONFLICT FIXES
 *
 * Consolidated here so all compliance-related CSS lives in one
 * version-controlled file. If any of these are currently in Appearance >
 * Customize > Additional CSS, remove them from there.
 * ================================================================== */

/* --- 2a. Manage-consent toggle switches -----------------------------
 * Complianz scopes its toggle styling to a .cmplz-cookiebanner ancestor.
 * On a document page the widget lives inside #cmplz-manage-consent-container
 * instead, so none of those rules match and the ::before / ::after elements
 * that draw the switch are never created. Re-declared here with the same
 * geometry, scoped to the container that actually exists.
 *
 * Reported to Complianz support. Harmless if they fix it upstream.
 * ------------------------------------------------------------------ */

#cmplz-manage-consent-container .cmplz-banner-checkbox .cmplz-label {
	position: relative;
	padding-left: 30px;
	margin: 0;
}

#cmplz-manage-consent-container .cmplz-banner-checkbox .cmplz-label::before,
#cmplz-manage-consent-container .cmplz-banner-checkbox .cmplz-label::after {
	box-sizing: border-box;
	position: absolute;
	border-radius: 10px;
	transition: background-color 0.3s, left 0.3s;
}

/* switch track */
#cmplz-manage-consent-container .cmplz-banner-checkbox .cmplz-label::before {
	display: block;
	content: "";
	color: #ffffff;
	font-family: FontAwesome, sans-serif;
	padding-left: 23px;
	font-size: 12px;
	line-height: 20px;
	background-color: var( --cmplz_slider_inactive_color, #8a8a8a );
	left: 0;
	top: -7px;
	height: 15px;
	width: 28px;
}

/* switch knob */
#cmplz-manage-consent-container .cmplz-banner-checkbox .cmplz-label::after {
	display: block;
	content: "";
	background: var( --cmplz_slider_bullet_color, #ffffff );
	left: 4px;
	top: -5px;
	height: 11px;
	width: 11px;
}

#cmplz-manage-consent-container .cmplz-consent-checkbox:checked + .cmplz-label::before {
	background-color: var( --cmplz_slider_active_color, #1e6b7b );
	padding-left: 6px;
}

#cmplz-manage-consent-container .cmplz-consent-checkbox:checked + .cmplz-label::after {
	left: 14px;
}

#cmplz-manage-consent-container .cmplz-consent-checkbox:focus + .cmplz-label::before {
	box-shadow: 0 0 0 2px rgb( 36, 95, 204 );
}

/* --- 2b. Category expand chevron ------------------------------------
 * bootstrapv3 style.scss line 132: svg:not(.icon) { display: none }
 * The theme hides every SVG outside its own icon system. Complianz's
 * chevron carries .cmplz-icon, not .icon, so it disappears.
 * ------------------------------------------------------------------ */

#cmplz-manage-consent-container svg {
	display: inline-block;
}

/* --- 2c. Data-request form checkboxes -------------------------------
 * bootstrapv3 _form.scss line 2: input[type='checkbox'] { opacity: 0;
 * z-index: -1 } -- the theme hides native checkboxes and draws its own
 * replacement keyed to theme markup. Complianz's form has no such markup,
 * so the boxes are invisible and the form cannot be completed.
 * ------------------------------------------------------------------ */

#cmplz-datarequest-form input[type="checkbox"] {
	opacity: 1;
	z-index: auto;
	appearance: auto;
	-webkit-appearance: checkbox;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin-right: 8px;
}

#cmplz-datarequest-form .cmplz_datarequest label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: normal;
}