/**
 * 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).
 *   - Mode: bb-consent--dark (dark banner, brand colors kept on buttons).
 *
 * 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 coexistence -------------------------------------------- */
/* While a bottom-anchored banner is visible, lift the TP floating switcher
   above it by the measured banner height (+8px). --bb-consent-height and the
   bb-consent-bottom body class are both set by JS. If TP isn't present these
   selectors simply match nothing. */
body.bb-consent-visible.bb-consent-bottom .trp-language-switcher-container,
body.bb-consent-visible.bb-consent-bottom .trp-floater-ls {
	transform: translateY(calc(-1 * (var(--bb-consent-height, 0px) + 8px)));
	transition: transform 0.15s ease;
}

/* The reopen pill can share a bottom corner with the TP switcher. When TP is on
   that same side (bb-consent-tp-right / -left set by JS), stack the pill above
   it by the switcher's measured height (+8px). */
body.bb-consent-tp-right .bb-consent-prefs--bottom-right,
body.bb-consent-tp-right .bb-consent-prefs--bottom-center,
body.bb-consent-tp-left .bb-consent-prefs--bottom-left {
	transform: translateY(calc(-1 * (var(--bb-consent-tp-height, 44px) + 8px)));
}

/* 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;
	}
}