/**
 * Willbe Cookie Consent — front-end styles.
 *
 * Colour values are driven by CSS variables set inline from plugin settings
 * (see Willbe_CC_Frontend::inline_style()).
 *
 * The banner renders into the light DOM, so the active theme's CSS competes
 * with these rules directly. Two defences are used throughout:
 *
 *   1. Every selector is scoped to the #wlbcc-root ID, giving (1,1,0) — higher
 *      than any theme rule built from classes or element selectors.
 *   2. Presentation-critical declarations are marked !important so a theme
 *      cannot win even with its own !important.
 *
 * Because every !important value reads from a --wlbcc-* custom property, site
 * owners can still fully retheme the banner by redefining those properties in
 * the Custom CSS box — that inline block is printed after this file.
 *
 * @package WillbeCookieConsent
 */

#wlbcc-root {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color-scheme: light;
}

#wlbcc-root *,
#wlbcc-root *::before,
#wlbcc-root *::after {
	box-sizing: border-box;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	float: none;
}

/* ---------- banner ---------- */

#wlbcc-root .wlbcc-banner {
	position: fixed;
	z-index: 99999;
	background: var( --wlbcc-bg, #fff ) !important;
	color: var( --wlbcc-text, #2c2c2c ) !important;
	box-shadow: 0 4px 24px rgba( 0, 0, 0, 0.18 );
	border: 0;
	border-radius: 10px;
	max-width: 440px;
	width: calc( 100% - 40px );
	animation: wlbcc-in 0.25s ease;
}

@keyframes wlbcc-in {
	from { opacity: 0; transform: translateY( 12px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

#wlbcc-root .wlbcc-pos-bottom-left  { bottom: 20px; left: 20px; }
#wlbcc-root .wlbcc-pos-bottom-right { bottom: 20px; right: 20px; }
#wlbcc-root .wlbcc-pos-bottom { bottom: 20px; left: 50%; transform: translateX( -50% ); }
#wlbcc-root .wlbcc-pos-top    { top: 20px; left: 50%; transform: translateX( -50% ); }

/* Bar layout spans the viewport width. */
#wlbcc-root .wlbcc-layout-bar {
	max-width: none;
	width: 100%;
	left: 0;
	right: 0;
	border-radius: 0;
}
#wlbcc-root .wlbcc-layout-bar.wlbcc-pos-bottom,
#wlbcc-root .wlbcc-layout-bar.wlbcc-pos-bottom-left,
#wlbcc-root .wlbcc-layout-bar.wlbcc-pos-bottom-right { bottom: 0; left: 0; transform: none; }
#wlbcc-root .wlbcc-layout-bar.wlbcc-pos-top { top: 0; left: 0; transform: none; }
#wlbcc-root .wlbcc-layout-bar .wlbcc-banner__body { max-width: 1200px; margin: 0 auto; }
#wlbcc-root .wlbcc-layout-bar .wlbcc-banner__actions { justify-content: flex-end; }

#wlbcc-root .wlbcc-banner__body { padding: 20px 22px; margin: 0; }

#wlbcc-root .wlbcc-banner__title {
	font-family: inherit;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var( --wlbcc-text, #2c2c2c ) !important;
	margin: 0 0 8px !important;
	padding: 0;
}

#wlbcc-root .wlbcc-banner__msg {
	font-family: inherit;
	font-size: 13.5px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	color: var( --wlbcc-text, #2c2c2c ) !important;
	margin: 0;
	padding: 0;
}

#wlbcc-root .wlbcc-banner__policy,
#wlbcc-root .wlbcc-banner__policy:hover,
#wlbcc-root .wlbcc-banner__policy:focus {
	color: var( --wlbcc-accent, #1a73e8 ) !important;
	background: none !important;
	text-decoration: underline !important;
	box-shadow: none !important;
}
#wlbcc-root .wlbcc-banner__policy:hover {
	color: var( --wlbcc-accent-hover, #1557b0 ) !important;
}

#wlbcc-root .wlbcc-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
	padding: 0;
}

/* ---------- buttons ---------- */

/**
 * Defensive reset. Tailwind Preflight (and most theme resets) strip a button's
 * font, letter-spacing, border-radius and background, so every property a theme
 * is likely to touch is restated here rather than left to inherit.
 *
 * Geometry (padding, margin, radius, sizing) is deliberately NOT !important —
 * the #wlbcc-root scoping already puts it out of reach of theme rules, and
 * leaving it at normal weight keeps it tunable from the Custom CSS box.
 */
#wlbcc-root .wlbcc-btn {
	display: inline-block;
	vertical-align: middle;
	border-radius: 6px;
	padding: 9px 16px;
	margin: 0;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 0;
	max-width: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;

	-webkit-appearance: none !important;
	appearance: none !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	text-transform: none !important;
	text-align: center !important;
	text-decoration: none !important;
	text-shadow: none !important;
	border: 0 !important;
	box-shadow: none !important;
	background-image: none !important;
	opacity: 1 !important;
	filter: none !important;
	transform: none !important;
}

#wlbcc-root .wlbcc-btn--accept {
	background-color: var( --wlbcc-accept-bg, #1a73e8 ) !important;
	color: var( --wlbcc-accept-text, #fff ) !important;
}
#wlbcc-root .wlbcc-btn--accept:hover,
#wlbcc-root .wlbcc-btn--accept:focus,
#wlbcc-root .wlbcc-btn--accept:focus-visible,
#wlbcc-root .wlbcc-btn--accept:active {
	background-color: var( --wlbcc-accept-bg-hover, #1557b0 ) !important;
	color: var( --wlbcc-accept-text-hover, #fff ) !important;
}

#wlbcc-root .wlbcc-btn--reject {
	background-color: var( --wlbcc-reject-bg, #eef1f5 ) !important;
	color: var( --wlbcc-reject-text, #2c2c2c ) !important;
}
#wlbcc-root .wlbcc-btn--reject:hover,
#wlbcc-root .wlbcc-btn--reject:focus,
#wlbcc-root .wlbcc-btn--reject:focus-visible,
#wlbcc-root .wlbcc-btn--reject:active {
	background-color: var( --wlbcc-reject-bg-hover, #dde3ea ) !important;
	color: var( --wlbcc-reject-text-hover, #2c2c2c ) !important;
}

#wlbcc-root .wlbcc-btn--settings {
	background-color: transparent !important;
	color: var( --wlbcc-accent, #1a73e8 ) !important;
	text-decoration: underline !important;
	padding-left: 6px !important;
	padding-right: 6px !important;
}
#wlbcc-root .wlbcc-btn--settings:hover,
#wlbcc-root .wlbcc-btn--settings:focus,
#wlbcc-root .wlbcc-btn--settings:focus-visible,
#wlbcc-root .wlbcc-btn--settings:active {
	background-color: transparent !important;
	color: var( --wlbcc-accent-hover, #1557b0 ) !important;
}

#wlbcc-root .wlbcc-btn:active {
	transform: translateY( 1px ) !important;
}

#wlbcc-root .wlbcc-btn:focus-visible {
	outline: 2px solid var( --wlbcc-accent, #1a73e8 ) !important;
	outline-offset: 2px !important;
}

/* ---------- modal ---------- */

#wlbcc-root .wlbcc-modal__overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba( 0, 0, 0, 0.5 );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
#wlbcc-root .wlbcc-modal {
	background: var( --wlbcc-bg, #fff ) !important;
	color: var( --wlbcc-text, #2c2c2c ) !important;
	font-family: inherit;
	border: 0;
	border-radius: 10px;
	width: 100%;
	max-width: 540px;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
#wlbcc-root .wlbcc-modal__head {
	padding: 16px 20px;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var( --wlbcc-text, #2c2c2c ) !important;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
}
#wlbcc-root .wlbcc-modal__body { padding: 8px 20px; overflow-y: auto; }
#wlbcc-root .wlbcc-modal__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	padding: 14px 20px;
	border-top: 1px solid rgba( 0, 0, 0, 0.08 );
}

#wlbcc-root .wlbcc-cat { padding: 14px 0; border-bottom: 1px solid rgba( 0, 0, 0, 0.06 ); }
#wlbcc-root .wlbcc-cat:last-child { border-bottom: 0; }
#wlbcc-root .wlbcc-cat__head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: var( --wlbcc-text, #2c2c2c ) !important;
	cursor: pointer;
	margin: 0;
	padding: 0;
}
#wlbcc-root .wlbcc-cat__desc {
	font-size: 12.5px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: var( --wlbcc-text, #2c2c2c ) !important;
	margin-top: 6px;
	opacity: 0.85;
}

/* Themes and resets routinely restyle checkboxes into custom controls. */
#wlbcc-root input[type="checkbox"] {
	-webkit-appearance: checkbox !important;
	appearance: checkbox !important;
	width: 16px !important;
	height: 16px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
	position: static !important;
	flex: 0 0 auto !important;
	accent-color: var( --wlbcc-accent, #1a73e8 );
}
#wlbcc-root input[type="checkbox"]::before,
#wlbcc-root input[type="checkbox"]::after {
	content: none !important;
}

/* ---------- revisit ---------- */

#wlbcc-root .wlbcc-revisit {
	position: fixed;
	bottom: 18px;
	left: 18px;
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-appearance: none;
	appearance: none;
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	font-family: inherit !important;
	font-size: 20px !important;
	line-height: 1 !important;
	text-decoration: none !important;
	background-color: var( --wlbcc-accent, #1a73e8 ) !important;
	background-image: none !important;
	color: #fff !important;
	box-shadow: 0 3px 12px rgba( 0, 0, 0, 0.25 ) !important;
	opacity: 1 !important;
	transition: background-color 0.15s ease !important;
}
#wlbcc-root .wlbcc-revisit:hover,
#wlbcc-root .wlbcc-revisit:focus,
#wlbcc-root .wlbcc-revisit:focus-visible {
	background-color: var( --wlbcc-accent-hover, #1557b0 ) !important;
	color: #fff !important;
}
#wlbcc-root .wlbcc-revisit:focus-visible {
	outline: 2px solid var( --wlbcc-accent, #1a73e8 ) !important;
	outline-offset: 2px !important;
}

@media ( max-width: 600px ) {
	#wlbcc-root .wlbcc-banner { left: 10px; right: 10px; width: auto; max-width: none; }
	#wlbcc-root .wlbcc-pos-bottom, #wlbcc-root .wlbcc-pos-top { transform: none; }
	#wlbcc-root .wlbcc-banner__actions .wlbcc-btn { flex: 1 1 auto !important; }
}

@media ( prefers-reduced-motion: reduce ) {
	#wlbcc-root .wlbcc-banner { animation: none; }
	#wlbcc-root .wlbcc-btn,
	#wlbcc-root .wlbcc-revisit { transition: none !important; }
	#wlbcc-root .wlbcc-btn:active { transform: none !important; }
}