/**
 * TrustArc-style override for the Complianz (Cookie Consent) banner.
 * Selectors come from the live #cmplz-cookiebanner-container markup on
 * freshpoint.local. Color/type values pulled directly from the TrustArc
 * widget on sysco.com (accent #0c76bd, 40px pill buttons, 700-weight
 * Source Sans Pro type) via its shadow-DOM `div.truste_popframe` panel.
 * Visual restyle only — button labels/behavior/consent logic are untouched.
 */

:root {
	--fpcmplz-blue: #0c76bd;
	--fpcmplz-blue-dark: #095c93;
	--fpcmplz-text: #1a1a1a;
	--fpcmplz-text-muted: #696969;
	--fpcmplz-border: #e4e7eb;
	--fpcmplz-font: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Bottom bar shell ----------
 * Complianz lays this out as a CSS grid (3 equal columns) on the
 * .cmplz-cookiebanner element itself, with .cmplz-body spanning columns
 * 1-2 and .cmplz-buttons pinned to column 3 — that fixed-width column is
 * what caused the huge gap. Override display:grid -> flex here so the
 * button block sits right after the message instead of in a reserved
 * 1/3-width column.
 */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	column-gap: 24px !important;
	row-gap: 12px !important;
	background: #ffffff !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1) !important;
	padding: 24px 64px 24px 32px !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	font-family: var(--fpcmplz-font) !important;
}

/* ---------- Left slide-in panel (TrustArc "Privacy Preference Center") ----------
 * Complianz adds .cmplz-categories-visible to the banner root once
 * "Customize Settings" is clicked (no separate modal element exists).
 * Hook that state to re-dock the whole banner as a full-height panel on
 * the left, matching the real TrustArc widget on sysco.com, instead of
 * expanding categories inline in the bottom bar.
 */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom.cmplz-categories-visible {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	bottom: 0 !important;
	margin: 0 !important;
	width: 420px !important;
	max-width: 90vw !important;
	height: 100vh !important;
	max-height: 100vh !important;
	border-radius: 0 !important;
	box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18) !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	overflow-y: auto !important;
	padding: 56px 24px 24px 24px !important;
	gap: 20px !important;
	box-sizing: border-box !important;
}

/* Complianz hides the banner by dropping .cmplz-show (adding
   .cmplz-dismissed) rather than toggling display itself — our forced
   display:flex above/below was overriding that and keeping the banner
   (and the left panel) visible even after Accept/Deny/close fired. */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom.cmplz-dismissed,
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom.cmplz-categories-visible.cmplz-dismissed {
	display: none !important;
}

.cmplz-cookiebanner.cmplz-bottom.cmplz-categories-visible .cmplz-body {
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: 16px !important;
	/* Complianz's own JS horizontally scrolls .cmplz-body (its original
	   row layout slides text out / categories in). That scrollLeft is
	   meaningless once we force column layout, but still shifts content
	   — overflow:visible neutralizes it since there's nothing to scroll. */
	overflow: visible !important;
	/* Complianz also caps .cmplz-body at a JS-measured max-height left
	   over from the original bar layout, which made .cmplz-categories
	   overflow past its own box — and since .cmplz-buttons is a sibling
	   laid out from body's (short) box, not its overflowed content, the
	   two visually overlapped. Let body size to its real content. */
	height: auto !important;
	max-height: none !important;
}

/* The WP admin toolbar (logged-in only) is also position:fixed;top:0 and
   sits above the panel in stacking order, covering the close (X) button.
   Push the panel + close icon down to clear it for admins previewing. */
body.admin-bar #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom.cmplz-categories-visible {
	top: 32px !important;
	height: calc(100vh - 32px) !important;
	max-height: calc(100vh - 32px) !important;
}

body.admin-bar .cmplz-cookiebanner.cmplz-bottom.cmplz-categories-visible .cmplz-header {
	top: 48px !important;
}

.cmplz-cookiebanner.cmplz-bottom.cmplz-categories-visible .cmplz-message {
	flex: 0 0 auto !important;
	width: 100% !important;
}

.cmplz-cookiebanner.cmplz-bottom.cmplz-categories-visible .cmplz-categories {
	flex: 0 0 auto !important;
	width: 100% !important;
}

.cmplz-cookiebanner.cmplz-bottom.cmplz-categories-visible .cmplz-buttons {
	flex-direction: column !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-top: auto !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--fpcmplz-border) !important;
	gap: 12px !important;
}

.cmplz-cookiebanner.cmplz-bottom.cmplz-categories-visible .cmplz-btn,
.cmplz-cookiebanner.cmplz-bottom.cmplz-categories-visible a.cmplz-btn {
	width: 100% !important;
}

.cmplz-cookiebanner.cmplz-bottom.cmplz-categories-visible .cmplz-links.cmplz-information {
	margin-left: 0 !important;
}

.cmplz-cookiebanner .cmplz-logo,
.cmplz-cookiebanner .cmplz-title {
	display: none !important;
}

/* Keep the header out of flow (it only wraps logo/title/close) and
   float just the close (X) icon in the top-right corner, in both the
   collapsed bar and the expanded left panel. */
.cmplz-cookiebanner .cmplz-header {
	display: block !important;
	position: absolute !important;
	top: 16px !important;
	right: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 2 !important;
}

.cmplz-cookiebanner .cmplz-divider {
	display: none !important;
}

.cmplz-cookiebanner .cmplz-close {
	color: #333333 !important;
	background: transparent !important;
}

/* ---------- Message + layout ----------
 * Complianz's own CSS sets .cmplz-body { width: 100% }. Since flex-basis:
 * auto resolves to the element's `width` property when set, that 100%
 * kept stretching the body to fill the row even with flex-grow:0 —
 * explicitly override width so it sizes to its (capped) content instead.
 */
.cmplz-cookiebanner .cmplz-body {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 40px !important;
	flex-wrap: wrap !important;
	width: auto !important;
	flex: 0 1 auto !important;
}

.cmplz-cookiebanner .cmplz-message {
	color: var(--fpcmplz-text) !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	flex: 0 1 640px !important;
}

/* Complianz wraps the copy in a block-level <p>, which forced a line
   break before the ": Cookie Policy." trustarc-behavior.js appends right
   after it. display:inline lets both flow as one continuous paragraph. */
.cmplz-cookiebanner .cmplz-message p {
	display: inline !important;
	margin: 0 !important;
}

.cmplz-cookiebanner .cmplz-message a {
	color: var(--fpcmplz-blue) !important;
	font-weight: 400 !important;
	font-size: inherit !important;
	text-decoration: underline !important;
}

/* ---------- Category rows (shown via "View preferences") ---------- */
.cmplz-cookiebanner .cmplz-categories {
	flex: 1 1 360px !important;
	border-top: 1px solid var(--fpcmplz-border) !important;
	border-bottom: 1px solid var(--fpcmplz-border) !important;
}

.cmplz-cookiebanner .cmplz-category {
	border-bottom: 1px solid var(--fpcmplz-border) !important;
	background: #ffffff !important;
}

.cmplz-cookiebanner .cmplz-category:last-child {
	border-bottom: none !important;
}

.cmplz-cookiebanner .cmplz-category-header {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 12px 4px !important;
}

.cmplz-cookiebanner .cmplz-category-title {
	color: var(--fpcmplz-text) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	flex: 1 1 auto !important;
}

.cmplz-cookiebanner .cmplz-always-active {
	color: var(--fpcmplz-text-muted) !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
}

.cmplz-cookiebanner .cmplz-category-toggle {
	color: var(--fpcmplz-text-muted) !important;
	background: transparent !important;
}

.cmplz-cookiebanner [id^="cmplz-desc-"] {
	padding: 0 4px 14px 4px !important;
	color: var(--fpcmplz-text-muted) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

/* Toggle switches */
.cmplz-cookiebanner .cmplz-banner-checkbox {
	position: relative !important;
	display: inline-block !important;
	width: 36px !important;
	height: 20px !important;
}

.cmplz-cookiebanner .cmplz-banner-checkbox .cmplz-label {
	position: absolute !important;
	inset: 0 !important;
	background: #c9cdd2 !important;
	border-radius: 999px !important;
	border: none !important;
	transition: background-color 0.15s ease !important;
	cursor: pointer !important;
}

/* Complianz paints its own dark track via ::before (offset/sized
   differently from our pill), which doubled up behind our custom
   background + ::after thumb below. Strip it so only ours renders. */
.cmplz-cookiebanner .cmplz-banner-checkbox .cmplz-label::before {
	content: none !important;
	display: none !important;
}

.cmplz-cookiebanner .cmplz-banner-checkbox .cmplz-label::after {
	content: "" !important;
	position: absolute !important;
	top: 2px !important;
	left: 2px !important;
	width: 16px !important;
	height: 16px !important;
	background: #ffffff !important;
	border-radius: 50% !important;
	transition: transform 0.15s ease !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

.cmplz-cookiebanner .cmplz-consent-checkbox:checked + .cmplz-label {
	background: var(--fpcmplz-blue) !important;
}

.cmplz-cookiebanner .cmplz-consent-checkbox:checked + .cmplz-label::after {
	transform: translateX(16px) !important;
}

/* ---------- Action buttons (TrustArc: 40px pill, 700-weight, 14px) ---------- */
.cmplz-cookiebanner .cmplz-buttons {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	flex: 0 0 auto !important;
	margin-left: auto !important;
}

.cmplz-cookiebanner .cmplz-btn,
.cmplz-cookiebanner a.cmplz-btn {
	font-family: var(--fpcmplz-font) !important;
	border-radius: 40px !important;
	padding: 12px 30px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-align: center !important;
	white-space: nowrap !important;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-accept,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
	background: var(--fpcmplz-blue) !important;
	color: #ffffff !important;
	border: 1px solid var(--fpcmplz-blue) !important;
	order: 2 !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover {
	background: var(--fpcmplz-blue-dark) !important;
	border-color: var(--fpcmplz-blue-dark) !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-deny {
	background: transparent !important;
	color: var(--fpcmplz-blue) !important;
	border: 1px solid var(--fpcmplz-blue) !important;
	order: 1 !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover {
	background: rgba(12, 118, 189, 0.08) !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner a.cmplz-btn.cmplz-manage-options {
	background: transparent !important;
	color: var(--fpcmplz-blue) !important;
	border: none !important;
	padding: 4px 0 !important;
	order: 0 !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner a.cmplz-btn.cmplz-manage-options:hover {
	text-decoration: underline !important;
}

.cmplz-manage-third-parties,
.cmplz-deny {
	display: none !important;
}

/* "Allow All" / "Reject All" — injected by trustarc-behavior.js, proxied
   to the real (hidden) .cmplz-accept/.cmplz-deny buttons so consent
   logic stays Complianz's own. Only shown in the left panel, alongside
   "Save preferences", mirroring TrustArc's Confirm/Allow/Reject trio. */
.cmplz-cookiebanner .fpcmplz-allow-all,
.cmplz-cookiebanner .fpcmplz-reject-all {
	display: none;
	background: transparent !important;
	color: var(--fpcmplz-blue) !important;
	border: 1px solid var(--fpcmplz-blue) !important;
	/* .cmplz-save-preferences carries order:2 left over from the
	   collapsed bar's row layout; without an explicit order these
	   (order:0 by default) would render above it instead of below. */
	order: 3 !important;
}

.cmplz-cookiebanner .fpcmplz-reject-all {
	order: 4 !important;
}

.cmplz-cookiebanner .fpcmplz-allow-all:hover,
.cmplz-cookiebanner .fpcmplz-reject-all:hover {
	background: rgba(12, 118, 189, 0.08) !important;
}

.cmplz-cookiebanner.cmplz-bottom.cmplz-categories-visible .fpcmplz-allow-all,
.cmplz-cookiebanner.cmplz-bottom.cmplz-categories-visible .fpcmplz-reject-all {
	display: block;
}

/* "Sounds Good!" (accept) stays the primary CTA in the collapsed bar,
   but is redundant once the panel + its own Allow All button are open. */
.cmplz-cookiebanner.cmplz-bottom.cmplz-categories-visible .cmplz-btn.cmplz-accept {
	display: none !important;
}

/* ---------- Footer links ----------
 * trustarc-behavior.js moves the actual "Cookie Policy" <a> out of this
 * wrapper and appends it inline at the end of .cmplz-message ("...for
 * more details: Cookie Policy."), matching TrustArc's copy. The now-empty
 * wrapper is hidden inline by the same script; this rule is just a
 * fallback in case JS hasn't run yet.
 */
.cmplz-cookiebanner .cmplz-documents.cmplz-links {
	display: none !important;
}

.cmplz-cookiebanner .cmplz-link {
	color: var(--fpcmplz-blue) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
}

.cmplz-cookiebanner .cmplz-links.cmplz-information {
	flex: 0 0 auto !important;
	margin-left: auto !important;
	font-size: 13px !important;
}

.cmplz-cookiebanner .cmplz-links.cmplz-information a {
	color: var(--fpcmplz-blue) !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
}

@media (max-width: 640px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom {
		padding: 20px 40px 20px 20px !important;
	}

	.cmplz-cookiebanner .cmplz-body {
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	.cmplz-cookiebanner .cmplz-buttons {
		flex-wrap: wrap !important;
		width: 100% !important;
	}

	.cmplz-cookiebanner .cmplz-btn,
	.cmplz-cookiebanner a.cmplz-btn {
		flex: 1 1 auto !important;
	}
}