/**
 * Wisite Cookie Banner - frontend styles.
 *
 * The banner lives inside someone else's theme, so it defends itself on three
 * levels:
 *   1. every rule is scoped by #wcb-root / #wcb-fab, which outranks any
 *      class-based theme rule on specificity alone;
 *   2. the elements themes style hardest (button, input, a, headings) are reset
 *      with `all: revert`, dropping every author style back to the browser
 *      default before ours is applied;
 *   3. visual properties carry !important, because page builders such as
 *      Elementor and WPBakery use !important themselves and specificity alone
 *      would not beat them.
 *
 * Layout uses logical properties so the same rules work in RTL and LTR. The
 * container defaults to RTL because the shipped texts are Hebrew; a site
 * running in English only needs `#wcb-root{direction:ltr}` to flip it.
 */

/* --- reset --------------------------------------------------------------- *
 * Wipes inherited theme styling from the elements inside the banner. Our own
 * rules below all carry an id plus a class, so they outrank this reset.
 * -------------------------------------------------------------------------- */

#wcb-root button,
#wcb-root input,
#wcb-root a,
#wcb-root h2,
#wcb-root p,
#wcb-root label,
#wcb-root span,
#wcb-fab {
	all: revert;
}

#wcb-root,
#wcb-root *,
#wcb-fab,
#wcb-fab * {
	box-sizing: border-box !important;
	float: none !important;
	max-width: none;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	visibility: visible !important;
}

/* --- container ----------------------------------------------------------- */

#wcb-root {
	direction: rtl;
	position: fixed !important;
	inset: 0 !important;
	z-index: 2147483000 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	pointer-events: none;
	font-family: inherit;
	font-size: 16px !important;
	line-height: 1.6 !important;
	color: var(--wcb-text, #1f2937) !important;
}

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

#wcb-root .wcb-backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(15, 23, 42, 0.55) !important;
	pointer-events: auto;
	animation: wcb-fade 0.2s ease;
}

#wcb-root .wcb-backdrop[hidden] {
	display: none !important;
}

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

#wcb-root .wcb-banner {
	position: absolute !important;
	inset-inline: 16px !important;
	inset-block-end: 16px !important;
	inset-block-start: auto !important;
	width: auto !important;
	max-width: 900px !important;
	margin-inline: auto !important;
	padding: 22px 24px !important;
	background: var(--wcb-bg, #fff) !important;
	border: 0 !important;
	border-radius: var(--wcb-radius, 14px) !important;
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08) !important;
	pointer-events: auto;
	animation: wcb-rise 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

#wcb-root .wcb-banner[hidden],
#wcb-root .wcb-prefs[hidden] {
	display: none !important;
}

#wcb-root.wcb-pos-corner .wcb-banner {
	inset-inline-start: auto !important;
	inset-inline-end: 16px !important;
	max-width: 400px !important;
}

#wcb-root.wcb-pos-center .wcb-banner {
	inset-block-start: 50% !important;
	inset-block-end: auto !important;
	transform: translateY(-50%) !important;
	max-width: 560px !important;
}

#wcb-root .wcb-title {
	display: block !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: 1.12rem !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: inherit !important;
	background: none !important;
	border: 0 !important;
}

#wcb-root .wcb-body {
	margin: 0 0 18px !important;
	padding: 0 !important;
	font-size: 0.94rem !important;
	color: inherit !important;
	opacity: 0.9;
}

#wcb-root .wcb-body p {
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

#wcb-root .wcb-privacy {
	display: inline !important;
	color: var(--wcb-accent, #1a56db) !important;
	background: none !important;
	text-decoration: underline !important;
	font-size: 0.88rem !important;
	font-weight: 400 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* --- actions ------------------------------------------------------------- */

#wcb-root .wcb-actions,
#wcb-root .wcb-prefs-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
}

#wcb-root .wcb-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	border: 0 !important;
	cursor: pointer !important;
	font-family: inherit !important;
	font-size: 0.94rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-align: center !important;
	margin: 0 !important;
	padding: 11px 22px !important;
	width: auto !important;
	/* 44px keeps the tap target within accessibility guidance once the theme's
	   own line-height has been reset away. */
	min-height: 44px !important;
	height: auto !important;
	border-radius: calc(var(--wcb-radius, 14px) * 0.6) !important;
	box-shadow: none !important;
	transition: filter 0.15s ease, background-color 0.15s ease !important;
}

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

/*
 * Accept and reject share one class on purpose: giving the reject button less
 * visual weight is exactly what makes a consent banner non-compliant.
 */
#wcb-root .wcb-btn-primary {
	background: var(--wcb-accent, #1a56db) !important;
	background-image: none !important;
	color: #fff !important;
	min-width: 130px !important;
}

#wcb-root .wcb-btn-primary:hover,
#wcb-root .wcb-btn-primary:focus {
	background: var(--wcb-accent, #1a56db) !important;
	color: #fff !important;
	filter: brightness(1.08);
}

#wcb-root .wcb-btn-ghost {
	background: transparent !important;
	background-image: none !important;
	color: var(--wcb-accent, #1a56db) !important;
	box-shadow: inset 0 0 0 1.5px currentColor !important;
	min-width: 120px !important;
}

#wcb-root .wcb-btn-ghost:hover,
#wcb-root .wcb-btn-ghost:focus {
	background: transparent !important;
	color: var(--wcb-accent, #1a56db) !important;
}

#wcb-root .wcb-btn-link {
	background: transparent !important;
	background-image: none !important;
	color: inherit !important;
	opacity: 0.75;
	text-decoration: underline !important;
	padding-inline: 8px !important;
	min-width: 0 !important;
}

#wcb-root .wcb-btn-link:hover {
	opacity: 1;
	color: inherit !important;
}

/* --- preferences panel ---------------------------------------------------- */

#wcb-root .wcb-prefs {
	position: absolute !important;
	inset-block-start: 50% !important;
	inset-inline: 0 !important;
	margin-inline: auto !important;
	transform: translateY(-50%) !important;
	width: min(560px, calc(100vw - 32px)) !important;
	max-width: none !important;
	max-height: min(80vh, 720px) !important;
	overflow-y: auto !important;
	background: var(--wcb-bg, #fff) !important;
	border: 0 !important;
	border-radius: var(--wcb-radius, 14px) !important;
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28) !important;
	pointer-events: auto;
	padding: 22px 24px 20px !important;
	animation: wcb-fade 0.28s ease;
}

#wcb-root .wcb-prefs-head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
}

#wcb-root .wcb-close {
	appearance: none !important;
	-webkit-appearance: none !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	font-family: inherit !important;
	font-size: 1.6rem !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	width: auto !important;
	min-width: 0 !important;
	padding: 4px 8px !important;
	margin: 0 !important;
	color: inherit !important;
	opacity: 0.6;
}

#wcb-root .wcb-close:hover {
	opacity: 1;
	background: transparent !important;
	color: inherit !important;
}

#wcb-root .wcb-prefs-list {
	margin: 14px 0 20px !important;
	padding: 0 !important;
}

#wcb-root .wcb-cat {
	padding: 14px 0 !important;
	margin: 0 !important;
	background: none !important;
	border: 0 !important;
	border-block-end: 1px solid rgba(15, 23, 42, 0.1) !important;
}

#wcb-root .wcb-cat:last-child {
	border-block-end: 0 !important;
}

#wcb-root .wcb-cat-head {
	margin: 0 !important;
	padding: 0 !important;
}

#wcb-root .wcb-cat-desc {
	margin: 6px 0 0 !important;
	padding: 0 !important;
	font-size: 0.86rem !important;
	line-height: 1.55 !important;
	color: inherit !important;
	opacity: 0.75;
}

#wcb-root .wcb-cat-services {
	margin: 6px 0 0 !important;
	padding: 0 !important;
	font-size: 0.78rem !important;
	line-height: 1.5 !important;
	color: inherit !important;
	opacity: 0.55;
}

#wcb-root .wcb-cat-services[hidden] {
	display: none !important;
}

/* --- switch --------------------------------------------------------------- */

#wcb-root .wcb-switch {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	font-size: 0.96rem !important;
	color: inherit !important;
}

#wcb-root .wcb-switch input {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

#wcb-root .wcb-switch-track {
	position: relative !important;
	display: block !important;
	flex: 0 0 auto !important;
	width: 42px !important;
	height: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: rgba(15, 23, 42, 0.22) !important;
	transition: background-color 0.18s ease !important;
}

#wcb-root .wcb-switch-track::after {
	content: "" !important;
	position: absolute !important;
	inset-block-start: 3px !important;
	inset-inline-start: 3px !important;
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3) !important;
	transition: inset-inline-start 0.18s ease !important;
}

#wcb-root .wcb-switch input:checked + .wcb-switch-track {
	background: var(--wcb-accent, #1a56db) !important;
}

/* Logical offset rather than a transform, so the knob slides the correct way
   in both RTL and LTR without a direction-specific rule. */
#wcb-root .wcb-switch input:checked + .wcb-switch-track::after {
	inset-inline-start: 21px !important;
}

#wcb-root .wcb-switch input:disabled + .wcb-switch-track {
	opacity: 0.55;
	cursor: not-allowed !important;
}

#wcb-root .wcb-switch input:focus-visible + .wcb-switch-track {
	outline: 2px solid var(--wcb-accent, #1a56db) !important;
	outline-offset: 2px !important;
}

#wcb-root .wcb-cat-label {
	font: inherit !important;
	color: inherit !important;
	background: none !important;
}

/* --- floating button ------------------------------------------------------ */

#wcb-fab {
	position: fixed !important;
	inset-block-end: 18px !important;
	inset-block-start: auto !important;
	inset-inline-start: 18px !important;
	inset-inline-end: auto !important;
	z-index: 2147482999 !important;
	width: 42px !important;
	height: 42px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	border: 0 !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	background: var(--wcb-bg, #fff) !important;
	background-image: none !important;
	color: var(--wcb-accent, #1a56db) !important;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2) !important;
	opacity: 0.75;
	transition: opacity 0.15s ease, transform 0.15s ease !important;
}

#wcb-fab:hover {
	opacity: 1;
	background: var(--wcb-bg, #fff) !important;
	color: var(--wcb-accent, #1a56db) !important;
	transform: scale(1.06);
}

#wcb-fab[hidden] {
	display: none !important;
}

#wcb-fab svg {
	display: block !important;
	width: 22px !important;
	height: 22px !important;
	fill: currentColor !important;
}

/* Inline reopen link from the shortcode. It sits in theme content, so it can
   only defend itself with !important. */
.wcb-inline-link {
	appearance: none !important;
	-webkit-appearance: none !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	font: inherit !important;
	color: inherit !important;
	cursor: pointer !important;
	text-decoration: underline !important;
	text-transform: none !important;
}

/* --- motion --------------------------------------------------------------- */

@keyframes wcb-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

@keyframes wcb-fade {
	from {
		opacity: 0;
	}
}

/* The centered banner holds its own transform, so it cannot use wcb-rise. */
#wcb-root.wcb-pos-center .wcb-banner {
	animation-name: wcb-fade;
}

@media (prefers-reduced-motion: reduce) {
	#wcb-root .wcb-banner,
	#wcb-root .wcb-prefs,
	#wcb-root .wcb-backdrop {
		animation: none !important;
	}
}

@media (max-width: 600px) {
	#wcb-root .wcb-banner {
		inset-inline: 10px !important;
		inset-block-end: 10px !important;
		padding: 18px !important;
	}

	#wcb-root .wcb-actions .wcb-btn-primary {
		flex: 1 1 140px !important;
	}

	#wcb-root .wcb-prefs {
		padding: 18px 16px 16px !important;
	}
}