/**
 * BB Consent — consent widget styles.
 *
 * Two things are driven by saved settings via classes on the modal/pill:
 *   - Position: bb-consent-modal--bar (full-width bottom bar, default) or
 *     bb-consent-modal--card + bb-consent-modal--{corner} (compact corner card).
 *     bb-consent-modal--auto is a card whose corner JS picks (see the JS).
 *   - Mode: bb-consent--dark (dark banner, brand colors kept on buttons) or
 *     bb-consent--quiet (small dark glass pill, no brand color, fades in).
 *
 * Brand colors come from CSS variables injected per-request (from JetEngine).
 * --bb-consent-on-primary / --on-secondary are computed legible text colors so
 * button labels stay readable on any brand color, in light OR dark mode.
 *
 * Buttons use aggressive resets + explicit values because this plugin is
 * fleet-deployed across many themes that love to restyle <button>.
 */

:root {
	--bb-consent-primary: #404040;
	--bb-consent-secondary: #808080;
	--bb-consent-on-primary: #ffffff;
	--bb-consent-on-secondary: #ffffff;
}

/* Shared shell ---------------------------------------------------------- */
.bb-consent-modal {
	position: fixed;
	/* High enough to sit over page content and sticky headers, but deliberately
	   below TranslatePress overlays/modals (which use ~2.1B / max z-index). */
	z-index: 99990;
	box-sizing: border-box;
	background: #ffffff;
	color: #1f1f1f;
	font-size: 12.5px;
	line-height: 1.4;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.bb-consent-modal[hidden] {
	display: none;
}

.bb-consent-modal.is-visible {
	display: block;
}

.bb-consent-modal__inner {
	box-sizing: border-box;
}

.bb-consent-modal__body {
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: 12.5px;
}

.bb-consent-modal__privacy {
	color: var(--bb-consent-primary);
	text-decoration: underline;
	white-space: nowrap;
}

.bb-consent-modal__actions {
	display: flex;
	gap: 8px;
}

/* Full-width bottom bar (bottom-center / default) ------------------------ */
.bb-consent-modal--bar {
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	padding: 12px 16px;
	border-top: 3px solid var(--bb-consent-primary);
	box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.14);
}

.bb-consent-modal--bar .bb-consent-modal__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	max-width: 1100px;
	margin: 0 auto;
}

.bb-consent-modal--bar .bb-consent-modal__body {
	flex: 1 1 300px;
	min-width: 0;
}

.bb-consent-modal--bar .bb-consent-modal__actions {
	flex: 0 0 auto;
}

/* Compact corner card --------------------------------------------------- */
.bb-consent-modal--card {
	width: 420px;
	max-width: calc(100vw - 40px);
	padding: 14px 16px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
}

.bb-consent-modal--card .bb-consent-modal__inner {
	display: block;
}

.bb-consent-modal--card .bb-consent-modal__body {
	margin: 0 0 10px;
}

/* Corner anchors */
.bb-consent-modal--bottom-left {
	left: 20px;
	bottom: 20px;
}

.bb-consent-modal--bottom-right {
	right: 20px;
	bottom: 20px;
}

.bb-consent-modal--top-left {
	left: 20px;
	top: 20px;
}

.bb-consent-modal--top-right {
	right: 20px;
	top: 20px;
}

/* Buttons — equal weight, brand colored, legible in both modes ---------- */
.bb-consent-modal .bb-consent-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	flex: 0 0 auto;
	margin: 0;
	cursor: pointer;
	box-sizing: border-box;
	border-radius: 6px;
	padding: 7px 14px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	box-shadow: none;
	transition: filter 0.12s ease, background 0.12s ease, color 0.12s ease;
}

/* In the card layout, the two buttons share the row equally. */
.bb-consent-modal--card .bb-consent-btn {
	flex: 1 1 0;
}

.bb-consent-modal .bb-consent-btn--accept,
.bb-consent-modal .bb-consent-btn--accept:link,
.bb-consent-modal .bb-consent-btn--accept:visited {
	background: var(--bb-consent-primary) !important;
	color: var(--bb-consent-on-primary) !important;
	border: 1px solid var(--bb-consent-primary) !important;
}

.bb-consent-modal .bb-consent-btn--decline,
.bb-consent-modal .bb-consent-btn--decline:link,
.bb-consent-modal .bb-consent-btn--decline:visited {
	background: transparent !important;
	color: var(--bb-consent-primary) !important;
	border: 1px solid var(--bb-consent-primary) !important;
}

.bb-consent-modal .bb-consent-btn--accept:hover,
.bb-consent-modal .bb-consent-btn--accept:focus {
	background: var(--bb-consent-primary) !important;
	color: var(--bb-consent-on-primary) !important;
	filter: brightness(1.12);
}

.bb-consent-modal .bb-consent-btn--decline:hover,
.bb-consent-modal .bb-consent-btn--decline:focus {
	background: var(--bb-consent-secondary) !important;
	color: var(--bb-consent-on-secondary) !important;
	border-color: var(--bb-consent-secondary) !important;
}

.bb-consent-modal .bb-consent-btn:focus-visible {
	outline: 2px solid var(--bb-consent-secondary);
	outline-offset: 2px;
}

/* Dark mode ------------------------------------------------------------- */
.bb-consent-modal.bb-consent--dark {
	background: #202020;
	color: #ffffff;
}

/* Only the card has a full border to lighten; the bar keeps its brand top line. */
.bb-consent-modal--card.bb-consent--dark {
	border-color: rgba(255, 255, 255, 0.14);
}

.bb-consent-modal.bb-consent--dark .bb-consent-modal__body {
	color: rgba(255, 255, 255, 0.7);
}

.bb-consent-modal.bb-consent--dark .bb-consent-modal__privacy {
	color: #ffffff;
}

/* Decline reads as an outline on the dark surface; keep the brand accent on
   the border but force legible white text (brand color could be dark). */
.bb-consent-modal.bb-consent--dark .bb-consent-btn--decline,
.bb-consent-modal.bb-consent--dark .bb-consent-btn--decline:link,
.bb-consent-modal.bb-consent--dark .bb-consent-btn--decline:visited {
	background: transparent !important;
	color: #ffffff !important;
	border-color: var(--bb-consent-primary) !important;
}

/* Persistent reopen pill — anchors to the same corner as the modal ------ */
.bb-consent-prefs {
	position: fixed;
	z-index: 99989;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	background: var(--bb-consent-primary);
	color: var(--bb-consent-on-primary);
	border: none;
	border-radius: 16px;
	padding: 5px 11px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	opacity: 0.8;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.bb-consent-prefs[hidden] {
	display: none;
}

.bb-consent-prefs.is-visible {
	display: inline-block;
}

.bb-consent-prefs:hover,
.bb-consent-prefs:focus {
	opacity: 1;
	outline: none;
}

/* Pill anchors (bar -> bottom-right). */
.bb-consent-prefs--bottom-left {
	left: 12px;
	bottom: 12px;
}

.bb-consent-prefs--bottom-right,
.bb-consent-prefs--bottom-center {
	right: 12px;
	bottom: 12px;
}

.bb-consent-prefs--top-left {
	left: 12px;
	top: 12px;
}

.bb-consent-prefs--top-right {
	right: 12px;
	top: 12px;
}

.bb-consent-prefs.bb-consent--dark {
	background: #202020;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.18);
}

/* TranslatePress: no special case since 1.3.1. Its floating switcher is
   a pinned element like any call button, so the notice nudges it up (or
   lifts above it) through the JS, and the reopen link lifts itself. */

/* Mobile ---------------------------------------------------------------- */
@media (max-width: 639px) {
	/* Corner cards stay in their corner — just smaller, with a tighter margin. */
	.bb-consent-modal--card {
		width: calc(100vw - 24px);
		max-width: 360px;
	}

	.bb-consent-modal--bottom-left {
		left: 12px;
		bottom: 12px;
	}

	.bb-consent-modal--bottom-right {
		right: 12px;
		bottom: 12px;
	}

	.bb-consent-modal--top-left {
		left: 12px;
		top: 12px;
	}

	.bb-consent-modal--top-right {
		right: 12px;
		top: 12px;
	}

	/* Only Bottom Center is a full-width bar on mobile; make its buttons fill. */
	.bb-consent-modal--bar {
		padding: 12px 14px;
	}

	.bb-consent-modal--bar .bb-consent-modal__inner {
		display: block;
		max-width: none;
		margin: 0;
	}

	.bb-consent-modal--bar .bb-consent-modal__body {
		flex: none;
		margin: 0 0 10px;
	}

	.bb-consent-modal--bar .bb-consent-btn {
		flex: 1 1 0;
	}
}

/* Quiet pill ------------------------------------------------------------ */
/* The brokerboost.com notice (2026-11-02): a small dark glass pill, the
   text in two short lines beside Accept and Decline of equal weight, no
   brand color, fades in after a short delay. About 390px wide on a desktop;
   on a phone (below) it spans the width in one row. The delay is
   --bb-consent-delay (2.5s); JS sets it to 0s when the pill is reopened from
   the Cookies link so nobody waits for it twice. */
.bb-consent-modal--card.bb-consent--quiet {
	width: auto;
	max-width: calc(100vw - 32px);
	padding: 6px 6px 6px 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	background: rgba(30, 30, 28, 0.8);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: none;
	color: #b3b1a8;
	font-size: 12px;
	line-height: 1.3;
	opacity: 0;
	visibility: hidden;
	animation: bb-consent-in 0.6s ease var(--bb-consent-delay, 2.5s) forwards;
}

@keyframes bb-consent-in {
	to {
		opacity: 1;
		visibility: visible;
	}
}

.bb-consent-modal--bottom-left.bb-consent--quiet {
	left: 16px;
	bottom: 16px;
}

.bb-consent-modal--bottom-right.bb-consent--quiet {
	right: 16px;
	bottom: 16px;
}

.bb-consent-modal.bb-consent--quiet .bb-consent-modal__inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
}

/* The text wraps to two short lines so the pill stays narrow; the buttons
   never drop to a second row. */
.bb-consent-modal.bb-consent--quiet .bb-consent-modal__body {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 20em;
	margin: 0;
	font-size: 12px;
	line-height: 1.3;
	color: #b3b1a8;
}

.bb-consent-modal.bb-consent--quiet .bb-consent-modal__privacy {
	color: #d9d7ce;
}

.bb-consent-modal.bb-consent--quiet .bb-consent-modal__actions {
	flex: 0 0 auto;
	gap: 4px;
}

.bb-consent-modal.bb-consent--quiet .bb-consent-btn {
	flex: 0 0 auto;
	padding: 6px 13px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.2;
}

.bb-consent-modal.bb-consent--quiet .bb-consent-btn--accept,
.bb-consent-modal.bb-consent--quiet .bb-consent-btn--accept:link,
.bb-consent-modal.bb-consent--quiet .bb-consent-btn--accept:visited,
.bb-consent-modal.bb-consent--quiet .bb-consent-btn--decline,
.bb-consent-modal.bb-consent--quiet .bb-consent-btn--decline:link,
.bb-consent-modal.bb-consent--quiet .bb-consent-btn--decline:visited {
	background: rgba(255, 255, 255, 0.1) !important;
	color: #edebe3 !important;
	border: 0 !important;
}

.bb-consent-modal.bb-consent--quiet .bb-consent-btn--accept:hover,
.bb-consent-modal.bb-consent--quiet .bb-consent-btn--accept:focus,
.bb-consent-modal.bb-consent--quiet .bb-consent-btn--decline:hover,
.bb-consent-modal.bb-consent--quiet .bb-consent-btn--decline:focus {
	background: rgba(255, 255, 255, 0.2) !important;
	color: #ffffff !important;
	filter: none;
}

.bb-consent-modal.bb-consent--quiet .bb-consent-btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.6);
}

/* Light glass: the JS adds bb-consent--on-light when what sits behind the
   pill is a light surface, so a dark pill never squats on a white section
   (and goes back to dark glass over a dark hero or photo). */
.bb-consent-modal--card.bb-consent--quiet {
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.bb-consent-modal--card.bb-consent--quiet.bb-consent--on-light {
	background: rgba(255, 255, 255, 0.78);
	border-color: rgba(0, 0, 0, 0.08);
	color: #5a5852;
}

.bb-consent-modal.bb-consent--quiet.bb-consent--on-light .bb-consent-modal__body {
	color: #5a5852;
}

.bb-consent-modal.bb-consent--quiet.bb-consent--on-light .bb-consent-modal__privacy {
	color: #2a2924;
}

.bb-consent-modal.bb-consent--quiet.bb-consent--on-light .bb-consent-btn--accept,
.bb-consent-modal.bb-consent--quiet.bb-consent--on-light .bb-consent-btn--accept:link,
.bb-consent-modal.bb-consent--quiet.bb-consent--on-light .bb-consent-btn--accept:visited,
.bb-consent-modal.bb-consent--quiet.bb-consent--on-light .bb-consent-btn--decline,
.bb-consent-modal.bb-consent--quiet.bb-consent--on-light .bb-consent-btn--decline:link,
.bb-consent-modal.bb-consent--quiet.bb-consent--on-light .bb-consent-btn--decline:visited {
	background: rgba(0, 0, 0, 0.07) !important;
	color: #1f1e1b !important;
}

.bb-consent-modal.bb-consent--quiet.bb-consent--on-light .bb-consent-btn--accept:hover,
.bb-consent-modal.bb-consent--quiet.bb-consent--on-light .bb-consent-btn--accept:focus,
.bb-consent-modal.bb-consent--quiet.bb-consent--on-light .bb-consent-btn--decline:hover,
.bb-consent-modal.bb-consent--quiet.bb-consent--on-light .bb-consent-btn--decline:focus {
	background: rgba(0, 0, 0, 0.14) !important;
	color: #000000 !important;
}

.bb-consent-modal.bb-consent--quiet.bb-consent--on-light .bb-consent-btn:focus-visible {
	outline-color: rgba(0, 0, 0, 0.5);
}

.bb-consent-prefs.bb-consent--quiet.bb-consent--on-light {
	background: rgba(255, 255, 255, 0.82);
	color: #1f1e1b;
	border-color: rgba(0, 0, 0, 0.08);
}

/* The reopen pill matches the glass. */
.bb-consent-prefs.bb-consent--quiet {
	background: rgba(30, 30, 28, 0.8);
	color: #edebe3;
	border: 1px solid rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: none;
	opacity: 0.85;
}

@media (max-width: 639px) {
	/* On a phone the pill spans the width, still one row: the text wraps to
	   two short lines in what the buttons leave. */
	.bb-consent-modal--card.bb-consent--quiet {
		width: auto;
		max-width: none;
		left: 10px;
		right: 10px;
		padding: 5px 5px 5px 13px;
		border-radius: 20px;
		font-size: 11.5px;
		line-height: 1.25;
	}

	.bb-consent-modal.bb-consent--quiet .bb-consent-modal__inner {
		gap: 10px;
	}

	.bb-consent-modal.bb-consent--quiet .bb-consent-modal__body {
		max-width: none;
		font-size: 11.5px;
		line-height: 1.25;
	}

	.bb-consent-modal.bb-consent--quiet .bb-consent-modal__actions {
		gap: 2px;
	}

	.bb-consent-modal.bb-consent--quiet .bb-consent-btn {
		padding: 5px 11px;
		font-size: 11.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bb-consent-modal--card.bb-consent--quiet {
		animation: none;
		opacity: 1;
		visibility: visible;
	}
}

/* A floating button the notice nudged up (see clear() in the JS) slides
   rather than jumps, unless the site already animates it. */
[data-bb-consent-pushed="1"] {
	transition: margin-bottom 0.25s ease;
}