/*
 * BoozePops Truck Tracker — shortcode frontend styles.
 * All selectors are scoped under .bp-tf-root so this never fights Elementor
 * or the active theme.
 */

.bp-tf-root,
.bp-tf-root *,
.bp-tf-root *::before,
.bp-tf-root *::after {
	box-sizing: border-box;
}

.bp-tf-root {
	font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
	/* v2.11.0 — root bg/color follow admin theme. Invisible on the default
	   shortcode flow (inner panels paint over root), but becomes visible when
	   a layout leaves gaps between sections (e.g. show_topbar=no + small map
	   followed by offline state on a resized window). */
	background: var(--bp-panel-bg, #0D0D0D);
	color: var(--bp-panel-heading, #F0F0F0);
	width: 100%;
	overflow-x: hidden;
	--bp-accent: #00E5FF;
}

/* ─── Top bar ─── */
/* v2.11.0 — theme-aware bg/border. Topbar is opt-in via shortcode attr,
   but when used it needs to match the admin-chosen panel theme instead of
   leaving a black stripe across the top on Light theme. */
.bp-tf-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	background: var(--bp-panel-bg, #0D0D0D);
	border-bottom: 1px solid rgba(127,127,127,0.15);
	position: sticky;
	top: 0;
	z-index: 100;
}
.bp-tf-brand {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--bp-panel-heading, #F0F0F0);
	text-transform: uppercase;
}
.bp-tf-live-badge {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bp-accent);
	opacity: 0;
	transition: opacity 0.4s;
}
.bp-tf-live-badge.is-visible { opacity: 1; }
.bp-tf-live-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--bp-accent);
	animation: bp-tf-pulse 1.4s ease-in-out infinite;
}
@keyframes bp-tf-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: 0.4; transform: scale(1.5); }
}
.bp-tf-order-link {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #FF2D78;
	text-decoration: none;
	border: 1px solid #FF2D78;
	padding: 5px 12px;
	border-radius: 3px;
	transition: background 0.2s, color 0.2s;
}
.bp-tf-order-link:hover { background: #FF2D78; color: #fff; }

/* ─── Map ─── */
/* v2.9.3 — Defensive positioning for the map container. We dropped the
   `overflow: hidden` from v2.9.2 because the chip strip is now a sibling
   ABOVE the map (not an absolute overlay), so the overflow trap is no
   longer needed — and removing it lets Mapbox popups extend cleanly past
   the map edges if they're tall enough. position: relative is kept so the
   zone legend + style switcher (still absolute children) anchor correctly. */
.bp-tf-root .bp-tf-map-wrap {
	position: relative !important;
	width: 100% !important;
	min-height: 320px !important;
	background: #111 !important;
	display: block !important;
}
.bp-tf-root .bp-tf-map {
	width: 100% !important;
	height: 100% !important;
	position: relative !important;
}

/* ─── Zone legend ─── */
.bp-tf-zone-legend {
	position: absolute;
	top: 12px; right: 60px;
	background: rgba(13,13,13,0.88);
	border: 1px solid #222;
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	z-index: 10;
	display: none;
	color: #ccc;
}
.bp-tf-zone-legend.is-visible { display: block; }
.bp-tf-legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}
.bp-tf-legend-item:last-child { margin-bottom: 0; }
.bp-tf-legend-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   MAP STYLE SWITCHER — hardened against theme CSS overrides.
   Every critical property carries !important because the theme (Elementor,
   Astra, Hello Theme, etc.) applies global <button> styling with high
   specificity. Without these overrides, buttons inherit pink/purple from
   the brand theme and look broken.
   ════════════════════════════════════════════════════════════════════════ */

.bp-tf-root .bp-tf-style-switcher {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	z-index: 11 !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Trigger button — clean white square with map-layers icon */
.bp-tf-root .bp-tf-switcher-btn {
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;
	background: #ffffff !important;
	background-image: none !important;
	border: 1px solid #D1D5DB !important;
	border-radius: 4px !important;
	color: #374151 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
	padding: 0 !important;
	margin: 0 !important;
	transition: background 0.15s, border-color 0.15s !important;
	text-transform: none !important;
	text-shadow: none !important;
	font-family: inherit !important;
	line-height: 1 !important;
}
.bp-tf-root .bp-tf-switcher-btn:hover  { background: #F9FAFB !important; border-color: #9CA3AF !important; }
.bp-tf-root .bp-tf-switcher-btn:focus  { outline: 2px solid #0B6BCB !important; outline-offset: 1px !important; }
.bp-tf-root .bp-tf-switcher-btn svg    { opacity: 0.8 !important; width: 18px !important; height: 18px !important; }

/* Dropdown menu panel */
.bp-tf-root .bp-tf-switcher-menu {
	position: absolute !important;
	top: 44px !important;
	right: 0 !important;
	background: #ffffff !important;
	background-image: none !important;
	border: 1px solid #E5E7EB !important;
	border-radius: 6px !important;
	padding: 4px !important;
	min-width: 180px !important;
	box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important;
	z-index: 11 !important;
	list-style: none !important;
	margin: 0 !important;
}

/* Option buttons — the pink-pill problem. Force clean typography + neutral bg. */
.bp-tf-root .bp-tf-switcher-menu .bp-tf-style-opt,
.bp-tf-root button.bp-tf-style-opt {
	display: block !important;
	width: 100% !important;
	text-align: left !important;
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	color: #1F2937 !important;
	padding: 9px 14px !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
	cursor: pointer !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
	transition: background 0.12s, color 0.12s !important;
	/* Kill any Elementor "--e-global-color-*" variable leakage */
	min-height: 0 !important;
}
.bp-tf-root .bp-tf-switcher-menu .bp-tf-style-opt:hover {
	background: #F3F4F6 !important;
	color: #111827 !important;
}
.bp-tf-root .bp-tf-switcher-menu .bp-tf-style-opt.is-active {
	background: #DBEAFE !important;
	color: #1E40AF !important;
	font-weight: 700 !important;
}
.bp-tf-root .bp-tf-switcher-menu .bp-tf-style-opt.is-active::before {
	content: "✓ " !important;
	font-weight: 800 !important;
	margin-right: 2px !important;
	color: #1E40AF !important;
}
.bp-tf-root .bp-tf-switcher-menu .bp-tf-style-opt:focus-visible {
	outline: 2px solid #0B6BCB !important;
	outline-offset: -2px !important;
}

/* ─── Distance bar ─── */
/* v2.11.0 — follows the admin theme preset via --bp-strip-bg (derived from
   panel_bg in truck-finder.php). Light preset → light bar with darker text. */
.bp-tf-distance-bar {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 10px 16px;
	background: var(--bp-strip-bg, #111);
	border-bottom: 1px solid rgba(127,127,127,0.15);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bp-panel-text, #aaa);
}
.bp-tf-distance-bar.is-visible { display: flex; }
.bp-tf-dist-item {
	display: flex;
	align-items: center;
	gap: 6px;
}
.bp-tf-dist-dot {
	width: 8px; height: 8px; border-radius: 50%;
}

/* ─── Offline state ─── */
/* v2.10.0 — All `background: #0D0D0D` and text-color values below now read
   from CSS custom properties set on .bp-tf-root by the public template
   (see truck-finder.php). Defaults match the pre-2.10.0 dark theme so any
   install that doesn't touch the new color settings sees no visual change. */
.bp-tf-offline {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 48px 24px 40px;
	background: var(--bp-panel-bg, #0D0D0D);
}
.bp-tf-offline.is-visible { display: flex; }
/* v2.9.10 — small hint pointing to chip strip above */
.bp-tf-root .bp-tf-offline-hint {
	font-size: 12px !important;
	color: var(--bp-panel-text, #888) !important;
	opacity: 0.8 !important;
	margin: 4px 0 14px !important;
	letter-spacing: 0.04em !important;
	font-style: italic !important;
}
.bp-tf-offline svg { opacity: 0.7; margin-bottom: 20px; }
.bp-tf-offline h2 {
	font-size: clamp(22px, 5vw, 36px);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bp-panel-heading, #F0F0F0);
	margin: 0 0 12px;
	line-height: 1.1;
}
.bp-tf-offline p {
	font-size: 16px;
	color: var(--bp-panel-text, #D0D0D0);
	max-width: 360px;
	line-height: 1.7;
	margin: 0 0 20px;
}
.bp-tf-ig-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bp-panel-heading, #F0F0F0);
	border: 1px solid currentColor;
	opacity: 0.85;
	padding: 10px 20px;
	border-radius: 3px;
	text-decoration: none;
	transition: opacity 0.2s, color 0.2s;
}
.bp-tf-ig-btn:hover { opacity: 1; color: var(--bp-panel-accent, #FF2D78); }

/* ─── Hours ─── */
.bp-tf-hours {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid rgba(127,127,127,0.15);
	border-bottom: 1px solid rgba(127,127,127,0.15);
	background: var(--bp-hours-bg, #0D0D0D);
}
.bp-tf-hour-cell {
	padding: 14px 10px;
	text-align: center;
	border-right: 1px solid rgba(127,127,127,0.15);
}
.bp-tf-hour-cell:last-child { border-right: none; }
.bp-tf-hour-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bp-panel-text, #AAA);
	opacity: 0.85;
	margin-bottom: 4px;
}
.bp-tf-hour-time {
	font-size: 16px;
	font-weight: 700;
	color: var(--bp-panel-accent, var(--bp-accent));
	letter-spacing: 0.04em;
}

/* ─── Address search ─── */
.bp-tf-addr-wrap {
	padding: 20px 16px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	background: var(--bp-panel-bg, #0D0D0D);
}
.bp-tf-addr-row {
	display: flex;
	width: 100%;
	max-width: 420px;
	gap: 8px;
}
.bp-tf-addr-input {
	flex: 1;
	font: inherit;
	font-weight: 600;
	letter-spacing: 0.04em;
	font-size: 14px;
	/* v2.10.1 — semi-transparent grays render correctly on BOTH dark and
	   light admin-chosen panel backgrounds. Heading-color text inherits the
	   admin's high-contrast color choice automatically. */
	background: rgba(127,127,127,0.12);
	border: 1px solid rgba(127,127,127,0.3);
	color: var(--bp-panel-heading, #F0F0F0);
	padding: 12px 14px;
	border-radius: 3px;
	outline: none;
	transition: border-color 0.2s;
}
/* v2.11.0 — placeholder inherits from --bp-panel-heading at 0.5 opacity so it
   passes WCAG AA contrast (4.5:1) on both themes. Previous `--bp-panel-text`
   @ 0.7 opacity was ~3.0:1 on Light — failed AA. */
.bp-tf-addr-input::placeholder { color: var(--bp-panel-heading, #999); opacity: 0.55; }
.bp-tf-addr-input:focus { border-color: var(--bp-accent); }
.bp-tf-addr-btn {
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #0D0D0D;
	background: var(--bp-accent);
	border: none;
	padding: 12px 16px;
	border-radius: 3px;
	cursor: pointer;
	white-space: nowrap;
	transition: filter 0.2s;
}
.bp-tf-addr-btn:hover { filter: brightness(1.15); }
.bp-tf-addr-divider {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #444;
	padding: 4px 0;
}
.bp-tf-gps-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #0D0D0D;
	background: var(--bp-accent);
	border: none;
	padding: 13px 28px;
	border-radius: 3px;
	cursor: pointer;
	transition: filter 0.2s, transform 0.1s;
	margin-top: 4px;
}
.bp-tf-gps-btn:hover  { filter: brightness(1.15); }
.bp-tf-gps-btn:active { transform: scale(0.97); }
.bp-tf-gps-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* v2.11.1 — outer .bp-tf-status stays a centered block wrapper. The loud
   badge is rendered as an inner <span class="bp-tf-status-badge"> (see
   setStatus() in truck-finder.js). This decouples the container alignment
   from the pill styling so centering works reliably across themes + screen
   sizes without inline-block / margin:auto conflicts. */
.bp-tf-root .bp-tf-status {
	display: block !important;
	text-align: center !important;
	color: var(--bp-panel-text, #CCCCCC);
	padding: 4px 16px 8px !important;
	background: var(--bp-panel-bg, #0D0D0D);
	min-height: 22px;
}
.bp-tf-root .bp-tf-status-badge {
	display: inline-block !important;
	padding: 7px 14px !important;
	border-radius: 20px !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: 0.02em !important;
	line-height: 1.2 !important;
	background: rgba(127,127,127,0.16) !important;
	border: 1px solid rgba(127,127,127,0.3) !important;
	color: var(--bp-panel-heading, inherit) !important;
	max-width: calc(100% - 32px) !important;
	white-space: normal !important;
	word-break: break-word !important;
	animation: bp-tf-status-in 0.22s ease-out;
}
/* v2.12.1 — text colors read theme-aware CSS variables emitted from
   truck-finder.php based on panel luminance. Previously hardcoded dark-ink
   colors were invisible on Dark theme (UX audit HIGH finding). */
.bp-tf-root .bp-tf-status-badge.is-info {
	background: rgba(59,130,246,0.14) !important;
	border-color: rgba(59,130,246,0.45) !important;
	color: var(--bp-badge-info-text, #1D4ED8) !important;
}
.bp-tf-root .bp-tf-status-badge.is-success {
	background: rgba(16,185,129,0.16) !important;
	border-color: rgba(16,185,129,0.5) !important;
	color: var(--bp-badge-success-text, #065F46) !important;
}
.bp-tf-root .bp-tf-status-badge.is-error {
	background: rgba(239,68,68,0.14) !important;
	border-color: rgba(239,68,68,0.5) !important;
	color: var(--bp-badge-error-text, #991B1B) !important;
}
@keyframes bp-tf-status-in {
	from { opacity: 0; transform: translateY( -4px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}
/* v2.12.1 — status fade-out when cleared. Applied via the .is-fading-out
   class that setStatus adds 350ms before removing text, so the exit is
   smooth instead of yanked. */
.bp-tf-root .bp-tf-status-badge.is-fading-out {
	animation: bp-tf-status-out 0.32s ease-in forwards;
}
@keyframes bp-tf-status-out {
	from { opacity: 1; transform: translateY( 0 ); }
	to   { opacity: 0; transform: translateY( -4px ); }
}

/* v2.12.1 — a11y: focus outlines for keyboard users on every interactive
   button in the public widget. Uses --bp-accent so it matches the brand
   color rather than the browser default blue. */
.bp-tf-root .bp-tf-addr-btn:focus-visible,
.bp-tf-root .bp-tf-gps-btn:focus-visible,
.bp-tf-root .bp-tf-ig-btn:focus-visible,
.bp-tf-root .bp-tf-order-link:focus-visible,
.bp-tf-root .bp-tf-order-cta a:focus-visible,
.bp-tf-root .bp-tf-nearest-order:focus-visible,
.bp-tf-root .bp-tf-nearest-view:focus-visible,
.bp-tf-root .bp-tf-footer a:focus-visible {
	outline: 2px solid var(--bp-accent, #00E5FF) !important;
	outline-offset: 2px !important;
}
.bp-tf-root .bp-tf-addr-input:focus-visible {
	outline: 2px solid var(--bp-accent, #00E5FF) !important;
	outline-offset: 1px !important;
}

/* v2.12.1 — prefers-reduced-motion: customers who've enabled the OS-level
   motion sensitivity setting get reduced or no animations. Mapbox flyTo
   easing is handled separately in the JS via `essential: true` vs not.
   This covers all the CSS-driven pulses + fades. */
@media (prefers-reduced-motion: reduce) {
	.bp-tf-root .bp-tf-live-dot,
	.bp-tf-root .bp-tf-truck-chip.is-live .bp-tf-truck-chip-dot,
	.bp-tf-root .bp-tf-nearest-dot {
		animation: none !important;
	}
	.bp-tf-root .bp-tf-status-badge,
	.bp-tf-root .bp-tf-nearest,
	.bp-tf-root .bp-tf-status-badge.is-fading-out {
		animation: none !important;
		transition: opacity 0.15s !important;
	}
}

/* ─── v2.12.0 — Nearest-truck callout card ─────────────────────────────
   Appears below the search section when (a) customer has set a location
   and (b) at least one truck is LIVE. Shows nearest truck + distance +
   Order Now CTA + View-on-map button. Theme-aware (reads panel vars).
   Styled like a food-delivery "driver near you" banner. */
.bp-tf-root .bp-tf-nearest {
	margin: 10px 16px 4px;
	padding: 14px 16px;
	border-radius: 12px;
	background: rgba(127,127,127,0.08);
	border: 1px solid rgba(127,127,127,0.25);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	animation: bp-tf-nearest-in 0.28s ease-out;
}
.bp-tf-root .bp-tf-nearest[hidden] { display: none !important; }
@keyframes bp-tf-nearest-in {
	from { opacity: 0; transform: translateY( 6px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}
.bp-tf-root .bp-tf-nearest-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 200px;
}
.bp-tf-root .bp-tf-nearest-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: 0 0 0 3px rgba(127,127,127,0.2), 0 0 12px currentColor;
	animation: bp-tf-pulse 1.8s ease-in-out infinite;
}
.bp-tf-root .bp-tf-nearest-text {
	flex: 1;
	min-width: 0;
}
.bp-tf-root .bp-tf-nearest-tag {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bp-panel-text, #888);
	opacity: 0.85;
	margin-bottom: 2px;
}
.bp-tf-root .bp-tf-nearest-name {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bp-panel-heading, #F0F0F0);
	line-height: 1.1;
}
.bp-tf-root .bp-tf-nearest-dist {
	font-size: 13px;
	font-weight: 600;
	color: var(--bp-panel-accent, var(--bp-accent, #FF2D78));
	margin-top: 3px;
}
.bp-tf-root .bp-tf-nearest-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
	flex-wrap: wrap;
}
.bp-tf-root .bp-tf-nearest-order,
.bp-tf-root a.bp-tf-nearest-order,
.bp-tf-root .bp-tf-nearest-view,
.bp-tf-root button.bp-tf-nearest-view {
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	padding: 10px 16px !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1.2 !important;
	transition: transform 0.1s, filter 0.2s, background 0.2s !important;
	white-space: nowrap !important;
	margin: 0 !important;
	box-shadow: none !important;
}
.bp-tf-root .bp-tf-nearest-order,
.bp-tf-root a.bp-tf-nearest-order {
	background: #FF2D78 !important;
	color: #fff !important;
	border: none !important;
}
.bp-tf-root .bp-tf-nearest-order:hover,
.bp-tf-root a.bp-tf-nearest-order:hover {
	background: #ff4d8f !important;
	color: #fff !important;
	filter: brightness(1.05) !important;
}
.bp-tf-root .bp-tf-nearest-order:active,
.bp-tf-root a.bp-tf-nearest-order:active {
	transform: scale(0.97) !important;
}
.bp-tf-root .bp-tf-nearest-view,
.bp-tf-root button.bp-tf-nearest-view {
	background: transparent !important;
	color: var(--bp-panel-heading, #F0F0F0) !important;
	border: 1px solid rgba(127,127,127,0.4) !important;
}
.bp-tf-root .bp-tf-nearest-view:hover,
.bp-tf-root button.bp-tf-nearest-view:hover {
	border-color: var(--bp-panel-accent, var(--bp-accent, #FF2D78)) !important;
	color: var(--bp-panel-accent, var(--bp-accent, #FF2D78)) !important;
	background: transparent !important;
}
/* Mobile: stack actions under the text */
@media (max-width: 520px) {
	.bp-tf-root .bp-tf-nearest { flex-direction: column; align-items: stretch; }
	.bp-tf-root .bp-tf-nearest-actions { justify-content: stretch; }
	.bp-tf-root .bp-tf-nearest-actions > * { flex: 1; }
}
/* Hide in compact shortcode mode (sidebar embed) */
.bp-tf-root.is-compact .bp-tf-nearest { display: none !important; }

/* ─── Order CTA ─── */
/* v2.10.1 — outer wrapper bg now reads the admin panel-bg setting so the
   light-theme config doesn't show a black bar around the pink CTA. */
.bp-tf-order-cta { margin: 8px 16px 16px; background: var(--bp-panel-bg, #0D0D0D); }
.bp-tf-order-cta a {
	display: block;
	text-align: center;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	background: #FF2D78;
	padding: 16px 20px;
	border-radius: 3px;
	text-decoration: none;
	transition: background 0.2s, transform 0.1s;
}
.bp-tf-order-cta a:hover  { background: #ff4d8f; }
.bp-tf-order-cta a:active { transform: scale(0.98); }

/* ─── Footer ─── */
/* v2.11.0 — theme-aware. Previously hardcoded `#0D0D0D` left a black band at
   the bottom when admin chose the Light preset. Now reads --bp-panel-bg and
   --bp-panel-text so the footer matches the panel above it. */
.bp-tf-footer {
	display: flex;
	justify-content: center;
	gap: 24px;
	padding: 16px;
	border-top: 1px solid rgba(127,127,127,0.15);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--bp-panel-bg, #0D0D0D);
}
.bp-tf-footer a { color: var(--bp-panel-text, #AAA); text-decoration: none; transition: color 0.2s; }
.bp-tf-footer a:hover { color: var(--bp-panel-heading, #fff); }

/* ─── Truck marker — pin-drop shape with clear silhouette ─── */
.bp-tf-truck-marker {
	width: 52px; height: 65px;
	cursor: pointer;
	filter: drop-shadow(0 3px 10px rgba(0,0,0,0.55));
	transition: transform 0.25s ease;
	/* anchor the pin-tip at the GPS coordinate */
	transform-origin: 50% 95%;
}
.bp-tf-truck-marker:hover { transform: scale(1.15); }

/* ─── Mapbox popup ─── */
.bp-tf-root + .mapboxgl-popup .mapboxgl-popup-content,
.bp-tf-root .mapboxgl-popup-content {
	background: #111 !important;
	border: 1px solid #222 !important;
	border-radius: 6px !important;
	padding: 12px 16px !important;
	color: #F0F0F0 !important;
	font-family: 'Barlow Condensed', Arial, sans-serif !important;
	font-size: 13px !important;
	min-width: 160px;
}
.bp-tf-popup-title {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.bp-tf-popup-order {
	display: block;
	margin-top: 10px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: #FF2D78;
	padding: 7px 12px;
	border-radius: 3px;
	text-decoration: none;
}
.bp-tf-popup-order:hover { background: #ff4d8f; }

/* v2.13.0 — driver name line in the truck popup + nearest card. Only
   rendered when admin has enabled "show driver on public map" AND a name
   is set. Small font, muted color so it doesn't compete with the truck
   name but still reads cleanly.
   v2.13.1 — popup driver color now inherits from the popup parent (white-
   ish `#F0F0F0` via popup content rule) rather than hard-coding `#E5E7EB`.
   Added max-width + ellipsis so 80-char names can't overflow the popup. */
.bp-tf-popup-driver {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: inherit !important;
	opacity: 0.9;
	margin-bottom: 8px !important;
	letter-spacing: 0.02em !important;
	max-width: 220px !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}
.bp-tf-root .bp-tf-nearest-driver {
	font-size: 13px;
	font-weight: 600;
	color: var(--bp-panel-text, #D0D0D0);
	margin-top: 3px;
	letter-spacing: 0.02em;
	/* Same overflow protection for the nearest card — long names won't
	   push the layout. Allows wrap on multi-word names to avoid truncating
	   a last name awkwardly. */
	overflow-wrap: break-word;
	word-break: break-word;
	max-width: 100%;
}

/* v2.14.0 — phone line (popup + nearest card). Rendered as a tel: link
   so tapping on mobile kicks off a call. Color uses panel-accent so it
   reads as "clickable" on both themes. */
.bp-tf-popup-phone {
	font-size: 12px !important;
	font-weight: 600 !important;
	margin-bottom: 8px !important;
	letter-spacing: 0.02em !important;
	max-width: 220px !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}
.bp-tf-popup-phone a {
	color: var(--bp-accent, #00E5FF) !important;
	text-decoration: none !important;
	transition: opacity 0.15s !important;
}
.bp-tf-popup-phone a:hover { opacity: 0.85 !important; }
.bp-tf-root .bp-tf-nearest-phone {
	font-size: 13px;
	font-weight: 600;
	margin-top: 2px;
	letter-spacing: 0.02em;
}
.bp-tf-root .bp-tf-nearest-phone a {
	color: var(--bp-panel-accent, var(--bp-accent, #FF2D78)) !important;
	text-decoration: none;
	transition: opacity 0.15s;
}
.bp-tf-root .bp-tf-nearest-phone a:hover { opacity: 0.8; text-decoration: underline; }

/* v2.9.0 — Clickable-zone popup (separate from truck popup) */
.mapboxgl-popup.bp-tf-zone-popup .mapboxgl-popup-content {
	font-family: 'Barlow Condensed', Arial, sans-serif;
	background: #1a1a1a !important;
	color: #f5f5f5 !important;
	border-radius: 6px !important;
	padding: 12px 14px !important;
	box-shadow: 0 6px 20px rgba(0,0,0,0.45) !important;
}
.mapboxgl-popup.bp-tf-zone-popup .mapboxgl-popup-tip {
	border-top-color: #1a1a1a !important;
}
.mapboxgl-popup.bp-tf-zone-popup .mapboxgl-popup-close-button {
	color: #fff !important;
	font-size: 18px !important;
	padding: 2px 6px 4px !important;
}

/* v2.9.7 — Defensive close-button reset for ALL Mapbox popups our plugin
   creates. Themes that style every <button> globally (BoozePops applies a
   cyan accent + circle border-radius to all buttons) leak into the Mapbox
   popup's close × and render it as a huge accent-colored circle covering
   the popup. The bp-tf-zone-popup rule above is too narrow — only catches
   popups that opt in. This rule catches ANY Mapbox popup near our root. */
.bp-tf-root + .mapboxgl-popup .mapboxgl-popup-close-button,
.bp-tf-root .mapboxgl-popup .mapboxgl-popup-close-button {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #fff !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	padding: 4px 8px !important;
	margin: 0 !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	cursor: pointer !important;
	opacity: 0.7 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	transition: opacity 0.15s !important;
}
.bp-tf-root + .mapboxgl-popup .mapboxgl-popup-close-button:hover,
.bp-tf-root .mapboxgl-popup .mapboxgl-popup-close-button:hover {
	opacity: 1 !important;
	background: transparent !important;
	background-color: transparent !important;
	color: #fff !important;
}
.bp-tf-zone-popup-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}
.bp-tf-zone-popup-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}
.bp-tf-zone-popup-name {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.1;
}
.bp-tf-zone-popup-desc {
	font-size: 12px;
	color: #d1d5db;
	margin-bottom: 8px;
	line-height: 1.4;
}
.bp-tf-zone-popup-meta {
	font-size: 11px;
	color: #cbd5e1;
	margin-top: 3px;
	letter-spacing: 0.02em;
}
.bp-tf-zone-popup-meta strong {
	color: #fff;
	margin-right: 4px;
}

/* ─── Compact mode (widget embed) ─── */
/* v2.11.0 — added distance-bar + truck-strip to the compact hide list. In
   compact mode (sidebar widget), the extra chrome is visual noise. Just the
   map is what the shortcode caller wants. */
.bp-tf-root.is-compact .bp-tf-topbar,
.bp-tf-root.is-compact .bp-tf-truck-strip,
.bp-tf-root.is-compact .bp-tf-distance-bar,
.bp-tf-root.is-compact .bp-tf-hours,
.bp-tf-root.is-compact .bp-tf-addr-wrap,
.bp-tf-root.is-compact .bp-tf-status,
.bp-tf-root.is-compact .bp-tf-order-cta,
.bp-tf-root.is-compact .bp-tf-footer { display: none !important; }

/* ─── Responsive ─── */
@media (max-width: 480px) {
	.bp-tf-hours { grid-template-columns: repeat(2, 1fr); }
	.bp-tf-hour-cell:nth-child(2) { border-right: none; }
	.bp-tf-hour-cell:nth-child(3) { border-right: 1px solid rgba(127,127,127,0.15); }
	.bp-tf-zone-legend { right: 60px; font-size: 10px; padding: 6px 10px; }
}

/* ════════════════════════════════════════════════════════════════════════
   TRUCK CHIP STRIP — clickable fleet bar at top of map.
   Click a LIVE chip → map flies to that truck. STALE/OFF chips show a toast.
   "📍 Show All" button fits every live truck in view.
   ════════════════════════════════════════════════════════════════════════ */

/* v2.9.3 — Chip strip is now a normal block sibling ABOVE the map (was an
   absolute-positioned overlay inside the map). The new placement plays nice
   with sticky / fixed / transparent page headers since it sits in normal
   document flow. The legend + style switcher inside the map no longer need
   the `has-truck-strip` offset hack — chip strip isn't covering them. */
.bp-tf-root .bp-tf-truck-strip {
	position: relative !important;
	width: 100% !important;
	box-sizing: border-box !important;
	display: flex !important;
	gap: 6px !important;
	padding: 10px 12px !important;
	/* v2.11.0 — theme-aware via --bp-strip-bg (derived from panel_bg in
	   truck-finder.php). Light preset → warm off-white bar; dark preset →
	   near-black bar. */
	background: var(--bp-strip-bg, #0D0D0D) !important;
	overflow-x: auto !important;
	align-items: center !important;
	min-height: 48px !important;
	/* Theme-neutral separator: semi-transparent gray reads correctly on both
	   dark and light strip backgrounds. Bottom shadow kept for depth. */
	border-bottom: 1px solid rgba(127,127,127,0.22) !important;
	box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.15 ) !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(127,127,127,0.3) transparent;
}
/* v2.9.4 — Hide the empty strip element until JS populates it on first
   /trucks fetch. Prevents a flash-of-empty-dark-bar (~1-2s) on page load.
   The first call to renderTruckStrip() in JS clears this attribute. */
.bp-tf-root .bp-tf-truck-strip:empty {
	display: none !important;
}
.bp-tf-root .bp-tf-truck-strip::-webkit-scrollbar        { height: 4px; }
.bp-tf-root .bp-tf-truck-strip::-webkit-scrollbar-thumb  { background: rgba(127,127,127,0.3); border-radius: 3px; }
.bp-tf-root .bp-tf-truck-strip::-webkit-scrollbar-track  { background: transparent; }

/* Individual truck chips */
/* v2.11.0 — chip bg/border use semi-transparent grays so the same rule reads
   correctly on both dark and light strip backgrounds. Chip text + label
   inherit from --bp-strip-text (derived from panel_heading in truck-finder.php). */
.bp-tf-root .bp-tf-truck-chip,
.bp-tf-root button.bp-tf-truck-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 7px 12px !important;
	background: rgba(127,127,127,0.14) !important;
	background-image: none !important;
	border: 1px solid rgba(127,127,127,0.28) !important;
	border-radius: 100px !important;
	cursor: pointer !important;
	color: var(--bp-strip-text, #fff) !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	line-height: 1 !important;
	margin: 0 !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	transition: background 0.15s, transform 0.15s, border-color 0.15s !important;
	outline: none !important;
}
.bp-tf-root .bp-tf-truck-chip:hover {
	background: rgba(127,127,127,0.22) !important;
	transform: translateY( -1px ) !important;
}
.bp-tf-root .bp-tf-truck-chip:focus-visible {
	outline: 2px solid var(--bp-accent) !important;
	outline-offset: 2px !important;
}
/* v2.11.0 — is-live + is-stale border alpha bumped (0.6 → 0.8) for stronger
   visibility on light-theme backgrounds. Still subtle on dark since the bg
   of the chip already adds saturation. */
.bp-tf-root .bp-tf-truck-chip.is-live {
	border-color: rgba(16, 185, 129, 0.8) !important;
	background: rgba(16, 185, 129, 0.15) !important;
}
.bp-tf-root .bp-tf-truck-chip.is-stale {
	border-color: rgba(245, 158, 11, 0.8) !important;
	background: rgba(245, 158, 11, 0.14) !important;
}
.bp-tf-root .bp-tf-truck-chip.is-off {
	opacity: 0.75 !important;
}

.bp-tf-root .bp-tf-truck-chip-dot {
	width: 10px !important;
	height: 10px !important;
	border-radius: 50% !important;
	display: inline-block !important;
	flex-shrink: 0 !important;
	box-shadow: 0 0 0 1px rgba(127,127,127,0.4) !important;
}
.bp-tf-root .bp-tf-truck-chip.is-live .bp-tf-truck-chip-dot {
	animation: bp-tf-pulse 1.4s ease-in-out infinite;
}

.bp-tf-root .bp-tf-truck-chip-label {
	font-weight: 700 !important;
	font-size: 11px !important;
	color: var(--bp-strip-text, #fff) !important;
}
.bp-tf-root .bp-tf-truck-chip-age {
	opacity: 0.7 !important;
	font-size: 10px !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	color: var(--bp-strip-text, inherit) !important;
}
.bp-tf-root .bp-tf-truck-chip-status {
	display: inline-block !important;
	font-size: 9px !important;
	padding: 2px 7px !important;
	border-radius: 10px !important;
	background: rgba(127,127,127,0.22) !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	line-height: 1.2 !important;
}
/* v2.11.0 — status pill text reads theme-aware variables emitted from
   truck-finder.php based on panel luminance. Dark theme → pale mint/amber
   on dark pill. Light theme → deep emerald/amber on light pill. Both pass
   WCAG AA ≥4.5:1 contrast for small text. */
.bp-tf-root .bp-tf-truck-chip.is-live .bp-tf-truck-chip-status {
	background: rgba(16, 185, 129, 0.35) !important;
	color: var(--bp-status-live-text, #6EE7B7) !important;
}
.bp-tf-root .bp-tf-truck-chip.is-stale .bp-tf-truck-chip-status {
	background: rgba(245, 158, 11, 0.35) !important;
	color: var(--bp-status-stale-text, #FDE68A) !important;
}

/* v2.17.4 — Offline state (phone went silent 30+ min ago). Same visual
   language as 'stale' (amber) since they're semantically similar — the
   distinction is only that 'offline' is the v2.17.3+ classifier output
   and 'stale' is the legacy back-compat flag. Both render identically. */
.bp-tf-root .bp-tf-truck-chip.is-offline {
	border-color: rgba(245, 158, 11, 0.8) !important;
	background: rgba(245, 158, 11, 0.14) !important;
}
.bp-tf-root .bp-tf-truck-chip.is-offline .bp-tf-truck-chip-status {
	background: rgba(245, 158, 11, 0.35) !important;
	color: var(--bp-status-stale-text, #FDE68A) !important;
}

/* v2.17.3 — Pending state (admin toggled active but driver hasn't opened
   OwnTracks yet). Distinct from offline — this is "starting up" not
   "went silent." Lighter amber + soft pulse so customers see "something
   is happening" rather than "broken." */
.bp-tf-root .bp-tf-truck-chip.is-pending {
	border-color: rgba(217, 119, 6, 0.6) !important;
	background: rgba(254, 243, 199, 0.4) !important;
}
.bp-tf-root .bp-tf-truck-chip.is-pending .bp-tf-truck-chip-dot {
	animation: bp-tf-pulse 1.8s ease-in-out infinite;
}
.bp-tf-root .bp-tf-truck-chip.is-pending .bp-tf-truck-chip-status {
	background: rgba(217, 119, 6, 0.3) !important;
	color: var(--bp-status-stale-text, #FDE68A) !important;
}

/* v2.17.4 — Faded marker on the map for offline trucks. Customer sees
   the truck at its last known position but with a clear "this is not
   live right now" visual cue (45% opacity + slight desaturation).
   Mapbox markers wrap the marker element in a parent <div>, so we apply
   to both .is-offline and (defense-in-depth) any contained icon. */
.mapboxgl-marker.is-offline,
.mapboxgl-marker .is-offline {
	opacity: 0.45 !important;
	filter: grayscale(60%) !important;
	transition: opacity 0.3s ease, filter 0.3s ease;
}

/* "Show All" reset-view button */
/* v2.11.0 — theme-neutral semi-transparent grays + strip-text color so it
   renders correctly on both dark and light strip backgrounds. */
.bp-tf-root .bp-tf-show-all-btn,
.bp-tf-root button.bp-tf-show-all-btn {
	margin-left: auto !important;
	padding: 7px 14px !important;
	background: rgba(127,127,127,0.16) !important;
	background-image: none !important;
	border: 1px solid rgba(127,127,127,0.3) !important;
	border-radius: 100px !important;
	color: var(--bp-strip-text, #fff) !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
	box-shadow: none !important;
	line-height: 1 !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	white-space: nowrap !important;
}
.bp-tf-root .bp-tf-show-all-btn:hover { background: rgba(127,127,127,0.26) !important; }
.bp-tf-root .bp-tf-show-all-btn:focus-visible {
	outline: 2px solid var(--bp-accent) !important;
	outline-offset: 2px !important;
}

/* Mobile: smaller chips, tighter padding */
@media (max-width: 640px) {
	.bp-tf-root .bp-tf-truck-strip { padding: 8px 10px !important; gap: 4px !important; min-height: 44px !important; }
	.bp-tf-root .bp-tf-truck-chip { padding: 6px 10px !important; font-size: 10px !important; }
	.bp-tf-root .bp-tf-truck-chip-label { font-size: 10px !important; }
	.bp-tf-root .bp-tf-truck-chip-status { display: none !important; } /* save space on mobile */
	/* v2.17.4 — Exception: SHOW the status pill on mobile for OFFLINE and
	   STALE states. Color alone (amber chip background) is not enough for
	   color-blind users to know a truck is offline. The status text is the
	   accessible label. Other states (LIVE / STARTING / OFF) remain hidden
	   on mobile to save horizontal space. */
	.bp-tf-root .bp-tf-truck-chip.is-offline .bp-tf-truck-chip-status,
	.bp-tf-root .bp-tf-truck-chip.is-stale .bp-tf-truck-chip-status {
		display: inline-block !important;
		font-size: 8.5px !important;
		padding: 1px 5px !important;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   DEFENSIVE OVERRIDES — protect all interactive public-widget elements
   from aggressive theme / page-builder CSS (Elementor, Astra, Hello, etc.)
   that applies sweeping button + input styles site-wide. Every critical
   visual property carries !important to prevent theme leakage.
   ════════════════════════════════════════════════════════════════════════ */

/* Address input */
/* v2.10.1 — defensive overrides also use CSS variables / semi-transparent
   grays so admin-picked panel colors don't lose contrast on the search input. */
.bp-tf-root .bp-tf-addr-input {
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	background: rgba(127,127,127,0.12) !important;
	color: var(--bp-panel-heading, #F0F0F0) !important;
	border: 1px solid rgba(127,127,127,0.3) !important;
	border-radius: 3px !important;
	padding: 12px 14px !important;
	text-transform: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	line-height: 1.2 !important;
	margin: 0 !important;
}
.bp-tf-root .bp-tf-addr-input:focus {
	border-color: var(--bp-accent) !important;
	outline: none !important;
}

/* Address search button + GPS button — accent-colored CTAs */
.bp-tf-root .bp-tf-addr-btn,
.bp-tf-root .bp-tf-gps-btn {
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
	color: #0D0D0D !important;
	background: var(--bp-accent) !important;
	background-image: none !important;
	border: none !important;
	border-radius: 3px !important;
	padding: 12px 20px !important;
	cursor: pointer !important;
	margin: 0 !important;
	box-shadow: none !important;
	line-height: 1.2 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	text-decoration: none !important;
}
.bp-tf-root .bp-tf-addr-btn:hover,
.bp-tf-root .bp-tf-gps-btn:hover {
	filter: brightness(1.15) !important;
	color: #0D0D0D !important;
}
.bp-tf-root .bp-tf-gps-btn svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }

/* Order Now link in top bar + footer — pink outlined button */
.bp-tf-root .bp-tf-order-link {
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: #FF2D78 !important;
	background: transparent !important;
	background-image: none !important;
	border: 1px solid #FF2D78 !important;
	padding: 5px 12px !important;
	border-radius: 3px !important;
	text-decoration: none !important;
	text-shadow: none !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	box-shadow: none !important;
	display: inline-block !important;
}
.bp-tf-root .bp-tf-order-link:hover {
	background: #FF2D78 !important;
	color: #fff !important;
}

/* Order Now CTA block (big pink bar) */
.bp-tf-root .bp-tf-order-cta a {
	font-family: inherit !important;
	display: block !important;
	text-align: center !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: #fff !important;
	background: #FF2D78 !important;
	background-image: none !important;
	padding: 16px 20px !important;
	border-radius: 3px !important;
	text-decoration: none !important;
	text-shadow: none !important;
	border: none !important;
	box-shadow: none !important;
}
.bp-tf-root .bp-tf-order-cta a:hover {
	background: #ff4d8f !important;
	color: #fff !important;
}

/* Instagram button (offline state) */
/* v2.11.0 — border + text use CSS variables so the button is visible on
   both Dark and Light themes. Hover color still uses the brand accent. */
.bp-tf-root .bp-tf-ig-btn {
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--bp-panel-heading, #F0F0F0) !important;
	background: transparent !important;
	background-image: none !important;
	border: 1px solid rgba(127,127,127,0.4) !important;
	padding: 10px 20px !important;
	border-radius: 3px !important;
	text-decoration: none !important;
	text-shadow: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.bp-tf-root .bp-tf-ig-btn:hover {
	border-color: var(--bp-panel-accent, #FF2D78) !important;
	color: var(--bp-panel-accent, #FF2D78) !important;
	background: transparent !important;
}

/* Footer links */
.bp-tf-root .bp-tf-footer a {
	font-family: inherit !important;
	color: var(--bp-panel-text, #AAA) !important;
	text-decoration: none !important;
	text-shadow: none !important;
	background: transparent !important;
	font-weight: normal !important;
}
.bp-tf-root .bp-tf-footer a:hover { color: var(--bp-panel-heading, #FFFFFF) !important; }

/* Live badge dot + label (if top bar shown) */
.bp-tf-root .bp-tf-live-badge {
	font-family: inherit !important;
	color: var(--bp-accent) !important;
	background: transparent !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
}
.bp-tf-root .bp-tf-live-dot {
	background: var(--bp-accent) !important;
}

/* Brand name in top bar */
.bp-tf-root .bp-tf-brand {
	font-family: inherit !important;
	color: var(--bp-panel-heading, #F0F0F0) !important;
	text-shadow: none !important;
	background: transparent !important;
}