/* ==========================================================================
   GBF Action Bar — Liquid Glass Dark Edition
   Hover effect: pseudo-element inset expansion (no transform on label).
   This ensures: text never stretches, bar never reflowS, equal top/bottom bleed.
   All rules carry !important to override any theme or site stylesheet.
   Blue accent preserved for KB button.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
	--gbf-glass-white:         rgba(255, 255, 255, 0.12);
	--gbf-glass-white-md:      rgba(255, 255, 255, 0.20);
	--gbf-glass-white-lg:      rgba(255, 255, 255, 0.30);
	--gbf-glass-dark:          rgba(0, 0, 0, 0.18);
	--gbf-glass-dark-md:       rgba(0, 0, 0, 0.28);
	--gbf-glass-border:        rgba(255, 255, 255, 0.25);
	--gbf-glass-border-subtle: rgba(255, 255, 255, 0.12);
	--gbf-glass-border-bright: rgba(255, 255, 255, 0.50);
	--gbf-blur-sm: blur(8px);
	--gbf-blur-md: blur(18px);
	--gbf-blur-lg: blur(32px);
	--gbf-blur-xl: blur(60px);
	--gbf-shadow-glass:
		0 8px 32px rgba(0, 0, 0, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.30);
	--gbf-shadow-float:
		0 20px 60px rgba(0, 0, 0, 0.40),
		0 4px 16px rgba(0, 0, 0, 0.20);

	/* Bar surface */
	--gbf-ab-bar-bg:     rgba(8, 10, 22, 0.94);
	--gbf-ab-bar-border: rgba(255, 255, 255, 0.18);

	/* Ink */
	--gbf-ab-ink:       rgba(255, 255, 255, 0.85);
	--gbf-ab-ink-muted: rgba(255, 255, 255, 0.50);
	--gbf-ab-ink-dark:  #0d1020;

	/* Blue accent — preserved */
	--gbf-ab-blue:       #6ea5e3;
	--gbf-ab-blue-dark:  #5a93d8;
	--gbf-ab-blue-glass: rgba(102, 157, 217, 0.75);
	--gbf-ab-blue-hover: rgba(48, 98, 175, 0.96);

	/* Non-hover pill — faint visible capsule outline */
	--gbf-ab-pill-bg:       rgba(255, 255, 255, 0.09);
	--gbf-ab-pill-border:   rgba(255, 255, 255, 0.15);

	/* Hover bubble — frosted silver-white glass */
	--gbf-ab-bubble-bg:     rgba(200, 214, 236, 0.34);
	--gbf-ab-bubble-border: rgba(255, 255, 255, 0.92);
	--gbf-ab-icon-sq-bg:    rgba(8, 10, 22, 0.86);

	/* Easing */
	--gbf-ab-ease-liquid: cubic-bezier(0.34, 1.56, 0.64, 1);
	--gbf-ab-ease-smooth: cubic-bezier(0.40, 0.00, 0.20, 1);

	/* Durations */
	--gbf-ab-dur-fast: 210ms;
	--gbf-ab-dur-mid:  360ms;
}

/* --------------------------------------------------------------------------
   2. POSITIONING WRAPPER
   -------------------------------------------------------------------------- */
.gbf-action-bar {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: var(--gbf-ab-bottom, 28px) !important;
	z-index: var(--gbf-ab-z, 2147483000) !important;
	pointer-events: none !important;
	padding: 0 24px !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.gbf-action-bar,
.gbf-action-bar *,
.gbf-action-bar *::before,
.gbf-action-bar *::after {
	box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   3. INNER PILL — dark frosted-glass container
   Size is set once and NEVER changes on hover.
   overflow: visible lets bubble bleed out top/bottom.
   -------------------------------------------------------------------------- */
.gbf-action-bar__inner {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: var(--gbf-ab-justify, center) !important;
	gap: 4px !important;
	width: fit-content !important;
	max-width: min(100%, var(--gbf-ab-max-width, 1180px)) !important;
	margin: 0 auto !important;
	padding: 6px !important;
	min-height: 72px !important;
	pointer-events: auto !important;
	border-radius: 999px !important;
	background: var(--gbf-ab-bar-bg) !important;
	border: 1px solid var(--gbf-ab-bar-border) !important;
	box-shadow:
		0 8px 40px rgba(0, 0, 0, 0.55),
		0 2px 8px  rgba(0, 0, 0, 0.30),
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		inset 0 -1px 0 rgba(0, 0, 0, 0.20) !important;
	-webkit-backdrop-filter: blur(32px) saturate(160%) !important;
	backdrop-filter:         blur(32px) saturate(160%) !important;
	isolation: isolate !important;
	/* visible overflow is essential for the bubble bleed */
	overflow: visible !important;
}

/* Subtle rim light — purely decorative, never changes */
.gbf-action-bar__inner::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	border-radius: inherit !important;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.10) 0%,
		rgba(255, 255, 255, 0.00) 55%
	) !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

/* --------------------------------------------------------------------------
   4. TAB WRAPPER
   -------------------------------------------------------------------------- */
.gbf-action-bar__tab,
.gbf-action-bar__kb-host {
	position: relative !important;
	flex: 0 0 auto !important;
	min-width: 0 !important;
	pointer-events: auto !important;
	z-index: 1 !important;
}

.gbf-action-bar__tab:hover,
.gbf-action-bar__tab:focus-visible {
	z-index: 20 !important;
}

.gbf-action-bar__tab {
	display: inline-flex !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-decoration: none !important;
	cursor: pointer !important;
}

/* --------------------------------------------------------------------------
   5. TAB INNER LABEL — FIXED SIZE, NEVER TRANSFORMS
   The label is the flex row container for icon + text.
   Its dimensions never change — only color changes on hover.
   The visual bubble is drawn by ::before (pseudo expansion).
   -------------------------------------------------------------------------- */
.gbf-action-bar__tab-label,
.gbf-action-bar__kb-host .gbf-action-bar__kb-fallback,
.gbf-action-bar__kb-host .gbf-action-bar__kb-moved,
.gbf-action-bar__kb-host .gbf-action-bar__kb-moved a,
.gbf-action-bar__kb-host .gbf-action-bar__kb-moved button {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-direction: row !important;
	gap: 12px !important;
	min-width: 220px !important;
	height: 58px !important;
	padding: 0 32px !important;
	border-radius: 999px !important;
	z-index: 1 !important;

	/* Background/border are transparent — the bubble ::before handles visuals */
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;

	/* Typography — all values driven by :root vars set from the admin */
	color: var(--gbf-ab-ink) !important;
	font-family: var(--gbf-ab-font-family, inherit) !important;
	font-size: var(--gbf-ab-font-size, 16px) !important;
	font-weight: var(--gbf-ab-font-weight, 700) !important;
	letter-spacing: var(--gbf-ab-letter-spacing, 0.02em) !important;
	line-height: 1 !important;
	text-transform: var(--gbf-ab-text-transform, uppercase) !important;
	text-decoration: none !important;
	white-space: nowrap !important;

	/* Only color and text transitions — NO size/layout transitions */
	transition:
		color var(--gbf-ab-dur-fast) var(--gbf-ab-ease-smooth) !important;

	transform: none !important;
	overflow: visible !important;
	cursor: pointer !important;
}

/* --------------------------------------------------------------------------
   6. BUBBLE PSEUDO-ELEMENT (::before)
   Starts at inset:0 (same bounds as label), invisible.
   On hover, expands to negative inset — bleeds equally above and below the bar.
   The label layout is completely unaffected; no text/icon distortion.
   -------------------------------------------------------------------------- */
.gbf-action-bar__tab-label::before {
	content: "" !important;
	position: absolute !important;
	/* Default: matches label bounds exactly */
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	border-radius: 999px !important;
	/* Non-hover: faint pill outline — no backdrop-filter (non-reflective) */
	background: var(--gbf-ab-pill-bg) !important;
	border: 1px solid var(--gbf-ab-pill-border) !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	opacity: 1 !important;
	pointer-events: none !important;
	/* Elastic spring for the expansion + style change */
	transition:
		top            var(--gbf-ab-dur-fast) var(--gbf-ab-ease-liquid),
		right          var(--gbf-ab-dur-fast) var(--gbf-ab-ease-liquid),
		bottom         var(--gbf-ab-dur-fast) var(--gbf-ab-ease-liquid),
		left           var(--gbf-ab-dur-fast) var(--gbf-ab-ease-liquid),
		background     var(--gbf-ab-dur-fast) var(--gbf-ab-ease-smooth),
		border-color   var(--gbf-ab-dur-fast) var(--gbf-ab-ease-smooth),
		box-shadow     var(--gbf-ab-dur-fast) var(--gbf-ab-ease-smooth),
		-webkit-backdrop-filter var(--gbf-ab-dur-fast) var(--gbf-ab-ease-smooth),
		backdrop-filter var(--gbf-ab-dur-fast) var(--gbf-ab-ease-smooth) !important;
	z-index: 0 !important;
}

/* HOVER: bubble expands 5.6px above + below, 1.6px wider each side — frosted glass */
.gbf-action-bar__tab:hover .gbf-action-bar__tab-label::before,
.gbf-action-bar__tab:focus-visible .gbf-action-bar__tab-label::before {
	top: var(--gbf-ab-hover-inset-y, -5.6px) !important;
	right: var(--gbf-ab-hover-inset-x, -1.6px) !important;
	bottom: var(--gbf-ab-hover-inset-y, -5.6px) !important;
	left: var(--gbf-ab-hover-inset-x, -1.6px) !important;
	background: var(--gbf-ab-bubble-bg) !important;
	border: 1.5px solid var(--gbf-ab-bubble-border) !important;
	box-shadow:
		0 -4px 20px rgba(200, 215, 240, 0.22),
		0 14px 38px rgba(0, 0, 0, 0.44),
		0 4px 12px rgba(0, 0, 0, 0.16),
		inset 0 2px 0 rgba(255, 255, 255, 1.00),
		inset 0 -1px 0 rgba(255, 255, 255, 0.30) !important;
	-webkit-backdrop-filter: blur(28px) saturate(260%) brightness(1.08) !important;
	backdrop-filter:         blur(28px) saturate(260%) brightness(1.08) !important;
}

/* --------------------------------------------------------------------------
   7. SPECULAR SHEEN (::after) — strong top-left highlight on the bubble
   -------------------------------------------------------------------------- */
.gbf-action-bar__tab-label::after {
	content: "" !important;
	position: absolute !important;
	top: var(--gbf-ab-hover-inset-y, -5.6px) !important;
	right: var(--gbf-ab-hover-inset-x, -1.6px) !important;
	bottom: var(--gbf-ab-hover-inset-y, -5.6px) !important;
	left: var(--gbf-ab-hover-inset-x, -1.6px) !important;
	border-radius: 999px !important;
	background: linear-gradient(
		148deg,
		rgba(255, 255, 255, 0.90) 0%,
		rgba(255, 255, 255, 0.40) 22%,
		rgba(255, 255, 255, 0.10) 40%,
		rgba(255, 255, 255, 0.00) 58%
	) !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transition: opacity var(--gbf-ab-dur-fast) var(--gbf-ab-ease-smooth) !important;
	z-index: 2 !important;
}

.gbf-action-bar__tab:hover .gbf-action-bar__tab-label::after,
.gbf-action-bar__tab:focus-visible .gbf-action-bar__tab-label::after {
	opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   8. HOVER TEXT COLOR — dark text on white bubble
   -------------------------------------------------------------------------- */
.gbf-action-bar__tab:hover .gbf-action-bar__tab-label,
.gbf-action-bar__tab:focus-visible .gbf-action-bar__tab-label {
	color: var(--gbf-ab-ink-dark) !important;
}

/* --------------------------------------------------------------------------
   9. ICON CONTAINER — fixed size so padding changes don't cause layout reflow
   -------------------------------------------------------------------------- */
.gbf-action-bar__tab-iconimg {
	position: relative !important;
	z-index: 1 !important;
	/* Fixed 42×42 box: icon is 26px so 8px padding on each side is pre-allocated */
	width: 42px !important;
	height: 42px !important;
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border-radius: 0 !important;
	transition:
		background    var(--gbf-ab-dur-fast) var(--gbf-ab-ease-smooth),
		border-radius var(--gbf-ab-dur-fast) var(--gbf-ab-ease-smooth),
		box-shadow    var(--gbf-ab-dur-fast) var(--gbf-ab-ease-smooth) !important;
}

.gbf-action-bar__tab-iconimg img {
	display: block !important;
	width: 26px !important;
	height: 26px !important;
	filter: brightness(0) invert(1) !important;
	opacity: 0.72 !important;
	position: relative !important;
	z-index: 1 !important;
	transition:
		opacity var(--gbf-ab-dur-fast) var(--gbf-ab-ease-smooth) !important;
}

/* On hover: icon stays white, full opacity — no dark square container */
.gbf-action-bar__tab:hover .gbf-action-bar__tab-iconimg,
.gbf-action-bar__tab:focus-visible .gbf-action-bar__tab-iconimg {
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.gbf-action-bar__tab:hover .gbf-action-bar__tab-iconimg img,
.gbf-action-bar__tab:focus-visible .gbf-action-bar__tab-iconimg img {
	filter: brightness(0) !important;   /* dark icon on light bubble */
	opacity: 0.80 !important;
}

/* --------------------------------------------------------------------------
   10. SVG ICONS
   -------------------------------------------------------------------------- */
.gbf-action-bar__tab-icon,
.gbf-action-bar__tab-chevron,
.gbf-action-bar__kb-icon {
	position: relative !important;
	z-index: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	color: currentColor !important;
	text-decoration: none !important;
}

.gbf-action-bar__tab-icon svg,
.gbf-action-bar__tab-chevron svg,
.gbf-action-bar__kb-icon svg {
	display: block !important;
	width: 18px !important;
	height: 18px !important;
}

.gbf-action-bar__tab-chevron {
	display: none !important;
}

/* --------------------------------------------------------------------------
   11. TAB TEXT
   -------------------------------------------------------------------------- */
.gbf-action-bar__tab-text,
.gbf-action-bar__kb-text {
	position: relative !important;
	z-index: 1 !important;
	display: inline-block !important;
	font-weight: inherit !important;
	line-height: 1.2 !important;
	/* All decoration killed */
	text-decoration: none !important;
	text-decoration-line: none !important;
	-webkit-text-decoration: none !important;
	border: none !important;
	border-bottom: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Keyboard focus ring on label */
.gbf-action-bar__tab:focus-visible .gbf-action-bar__tab-label {
	outline: 2px solid rgba(110, 165, 227, 0.75) !important;
	outline-offset: 16px !important; /* offset past the bubble expansion */
}

/* --------------------------------------------------------------------------
   12. KB / CTA BUTTON — blue glass pill, scales identically to regular tabs
   Background lives on ::before so the inset expansion works the same way.
   -------------------------------------------------------------------------- */
.gbf-action-bar__kb-host {
	margin-left: 6px !important;
}

.gbf-action-bar__kb-host .gbf-action-bar__kb-fallback,
.gbf-action-bar__kb-host .gbf-action-bar__kb-moved,
.gbf-action-bar__kb-host .gbf-action-bar__kb-moved a,
.gbf-action-bar__kb-host .gbf-action-bar__kb-moved button {
	min-width: 0 !important;
	padding: 0 30px !important;
	flex-direction: row !important;
	height: 58px !important;
	min-height: 58px !important;

	/* Transparent — color comes from ::before */
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-weight: 700 !important;
	transform: none !important;
	transition: color var(--gbf-ab-dur-fast) var(--gbf-ab-ease-smooth) !important;
	overflow: visible !important;
}

/* KB ::before — the blue glass bubble, starts at inset:0 */
.gbf-action-bar__kb-host .gbf-action-bar__kb-fallback::before,
.gbf-action-bar__kb-host .gbf-action-bar__kb-moved::before,
.gbf-action-bar__kb-host .gbf-action-bar__kb-moved a::before,
.gbf-action-bar__kb-host .gbf-action-bar__kb-moved button::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	border-radius: 999px !important;
	background: var(--gbf-ab-blue-glass) !important;
	border: 1px solid rgba(255, 255, 255, 0.40) !important;
	box-shadow:
		0 4px 24px rgba(110, 165, 227, 0.28),
		inset 0 1px 1px rgba(255, 255, 255, 0.40),
		inset 0 -1px 1px rgba(0, 0, 0, 0.12) !important;
	-webkit-backdrop-filter: blur(18px) saturate(160%) !important;
	backdrop-filter:         blur(18px) saturate(160%) !important;
	opacity: 1 !important;
	pointer-events: none !important;
	transition:
		top            var(--gbf-ab-dur-fast) var(--gbf-ab-ease-liquid),
		right          var(--gbf-ab-dur-fast) var(--gbf-ab-ease-liquid),
		bottom         var(--gbf-ab-dur-fast) var(--gbf-ab-ease-liquid),
		left           var(--gbf-ab-dur-fast) var(--gbf-ab-ease-liquid),
		background     var(--gbf-ab-dur-fast) var(--gbf-ab-ease-smooth),
		border-color   var(--gbf-ab-dur-fast) var(--gbf-ab-ease-smooth),
		box-shadow     var(--gbf-ab-dur-fast) var(--gbf-ab-ease-smooth) !important;
	z-index: 0 !important;
}

/* KB ::after — specular sheen, same as regular tabs */
.gbf-action-bar__kb-host .gbf-action-bar__kb-fallback::after,
.gbf-action-bar__kb-host .gbf-action-bar__kb-moved::after,
.gbf-action-bar__kb-host .gbf-action-bar__kb-moved a::after,
.gbf-action-bar__kb-host .gbf-action-bar__kb-moved button::after {
	content: "" !important;
	position: absolute !important;
	top: var(--gbf-ab-hover-inset-y, -5.6px) !important;
	right: var(--gbf-ab-hover-inset-x, -1.6px) !important;
	bottom: var(--gbf-ab-hover-inset-y, -5.6px) !important;
	left: var(--gbf-ab-hover-inset-x, -1.6px) !important;
	border-radius: 999px !important;
	background: linear-gradient(
		148deg,
		rgba(255, 255, 255, 0.55) 0%,
		rgba(255, 255, 255, 0.18) 28%,
		rgba(255, 255, 255, 0.00) 52%
	) !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transition: opacity var(--gbf-ab-dur-fast) var(--gbf-ab-ease-smooth) !important;
	z-index: 2 !important;
}

/* KB hover — expand ::before exactly like regular tab pills, darker + frosted */
.gbf-action-bar__kb-host:hover .gbf-action-bar__kb-fallback::before,
.gbf-action-bar__kb-host:focus-within .gbf-action-bar__kb-fallback::before,
.gbf-action-bar__kb-host:hover .gbf-action-bar__kb-moved::before,
.gbf-action-bar__kb-host:focus-within .gbf-action-bar__kb-moved::before,
.gbf-action-bar__kb-host:hover .gbf-action-bar__kb-moved a::before,
.gbf-action-bar__kb-host:hover .gbf-action-bar__kb-moved button::before,
.gbf-action-bar__kb-host:focus-within .gbf-action-bar__kb-moved a::before,
.gbf-action-bar__kb-host:focus-within .gbf-action-bar__kb-moved button::before {
	top: var(--gbf-ab-hover-inset-y, -5.6px) !important;
	right: var(--gbf-ab-hover-inset-x, -1.6px) !important;
	bottom: var(--gbf-ab-hover-inset-y, -5.6px) !important;
	left: var(--gbf-ab-hover-inset-x, -1.6px) !important;
	background: var(--gbf-ab-blue-hover) !important;
	border-color: rgba(255, 255, 255, 0.55) !important;
	box-shadow:
		0 -4px 18px rgba(70, 130, 210, 0.30),
		0 14px 38px rgba(0, 0, 0, 0.50),
		0 4px 12px rgba(0, 0, 0, 0.20),
		inset 0 2px 0 rgba(255, 255, 255, 0.65),
		inset 0 -1px 0 rgba(255, 255, 255, 0.20) !important;
	-webkit-backdrop-filter: blur(28px) saturate(240%) brightness(0.92) !important;
	backdrop-filter:         blur(28px) saturate(240%) brightness(0.92) !important;
}

/* KB hover specular reveal */
.gbf-action-bar__kb-host:hover .gbf-action-bar__kb-fallback::after,
.gbf-action-bar__kb-host:focus-within .gbf-action-bar__kb-fallback::after,
.gbf-action-bar__kb-host:hover .gbf-action-bar__kb-moved::after,
.gbf-action-bar__kb-host:focus-within .gbf-action-bar__kb-moved::after,
.gbf-action-bar__kb-host:hover .gbf-action-bar__kb-moved a::after,
.gbf-action-bar__kb-host:hover .gbf-action-bar__kb-moved button::after,
.gbf-action-bar__kb-host:focus-within .gbf-action-bar__kb-moved a::after,
.gbf-action-bar__kb-host:focus-within .gbf-action-bar__kb-moved button::after {
	opacity: 1 !important;
}

/* KB z-index on hover */
.gbf-action-bar__kb-host:hover {
	z-index: 20 !important;
}

/* --------------------------------------------------------------------------
   13. KB MOVED ELEMENT LAYOUT
   -------------------------------------------------------------------------- */
.gbf-action-bar__kb-host .gbf-action-bar__kb-moved {
	position: static !important;
	inset: auto !important;
	margin: 0 !important;
	transform: none !important;
	cursor: pointer !important;
	text-align: center !important;
}

.gbf-action-bar__kb-host .gbf-action-bar__kb-moved a,
.gbf-action-bar__kb-host .gbf-action-bar__kb-moved button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	width: 100% !important;
	padding: 0 24px !important;
	font-size: var(--gbf-ab-font-size, 16px) !important;
	font-weight: var(--gbf-ab-font-weight, 700) !important;
	letter-spacing: var(--gbf-ab-letter-spacing, 0.02em) !important;
	text-transform: var(--gbf-ab-text-transform, uppercase) !important;
	text-decoration: none !important;
	border-bottom: 0 !important;
}

.gbf-action-bar__kb-host .gbf-action-bar__kb-moved .dashicons {
	width: 20px !important;
	height: 20px !important;
	margin-right: 0 !important;
	font-size: 20px !important;
	line-height: 20px !important;
	color: #fff !important;
	text-decoration: none !important;
	border-bottom: 0 !important;
	position: relative !important;
	z-index: 1 !important;
}

.gbf-action-bar__kb-host .gbf-action-bar__kb-moved .gbf-tab-text {
	display: inline !important;
	position: relative !important;
	z-index: 1 !important;
	text-decoration: none !important;
	border-bottom: 0 !important;
}

.gbf-action-bar__kb-host .gbf-action-bar__kb-moved a *,
.gbf-action-bar__kb-host .gbf-action-bar__kb-moved button * {
	position: relative !important;
	z-index: 1 !important;
	text-decoration: none !important;
	border-bottom: 0 !important;
}

.gbf-action-bar__kb-text,
.gbf-action-bar__kb-icon {
	position: relative !important;
	z-index: 1 !important;
	color: currentColor !important;
}

/* --------------------------------------------------------------------------
   14. NUCLEAR THEME OVERRIDE — remove ALL decorations from bar contents
   Covers: text-decoration, border-bottom, box-shadow underlines,
   outline, and theme ::after/::before underline pseudo-elements.
   -------------------------------------------------------------------------- */

/* Every element inside the bar */
.gbf-action-bar *,
.gbf-action-bar *:hover,
.gbf-action-bar *:focus,
.gbf-action-bar *:active,
.gbf-action-bar *:visited {
	text-decoration: none !important;
	text-decoration-line: none !important;
	-webkit-text-decoration: none !important;
}

/* Anchor-specific decoration reset */
.gbf-action-bar a,
.gbf-action-bar a:link,
.gbf-action-bar a:visited,
.gbf-action-bar a:hover,
.gbf-action-bar a:focus,
.gbf-action-bar a:active {
	text-decoration: none !important;
	text-decoration-line: none !important;
	-webkit-text-decoration: none !important;
	border-bottom: none !important;
	border-bottom-width: 0 !important;
	outline: none !important;
}

/* Kill theme link underline pseudo-elements on the anchor tag */
.gbf-action-bar .gbf-action-bar__tab::before,
.gbf-action-bar .gbf-action-bar__tab::after {
	display: none !important;
	content: none !important;
}

/* Kill box-shadow based underlines on text spans */
.gbf-action-bar__tab-text,
.gbf-action-bar__tab-text::before,
.gbf-action-bar__tab-text::after,
.gbf-action-bar__kb-text,
.gbf-action-bar__kb-text::before,
.gbf-action-bar__kb-text::after {
	text-decoration: none !important;
	text-decoration-line: none !important;
	border: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
	outline: none !important;
}

/* --------------------------------------------------------------------------
   15. REVEAL OPEN STATE
   -------------------------------------------------------------------------- */
body.gbf-reveal-open .gbf-action-bar__kb-host .gbf-action-bar__kb-moved,
body.gbf-reveal-open .gbf-action-bar__kb-host .gbf-action-bar__kb-moved a,
body.gbf-reveal-open .gbf-action-bar__kb-host .gbf-action-bar__kb-moved button,
body.gbf-reveal-open .gbf-action-bar__kb-host .gbf-action-bar__kb-moved .gbf-tab-text,
body.gbf-reveal-open .gbf-action-bar__kb-host .gbf-action-bar__kb-moved .dashicons {
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
	visibility: visible !important;
}

/* --------------------------------------------------------------------------
   16. RESPONSIVE — 1180px
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
	.gbf-action-bar__tab-label,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-fallback,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-moved,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-moved a,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-moved button {
		min-width: 0 !important;
		padding: 0 26px !important;
		font-size: 14px !important;
	}

	.gbf-action-bar__tab-iconimg img {
		width: 22px !important;
		height: 22px !important;
	}
}

/* --------------------------------------------------------------------------
   17. RESPONSIVE — 860px (tablet: horizontal scroll)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
	.gbf-action-bar {
		padding: 0 16px !important;
	}

	.gbf-action-bar__inner {
		justify-content: flex-start !important;
		overflow-x: auto !important;
		overflow-y: visible !important;
		scrollbar-width: none !important;
	}

	.gbf-action-bar__inner::-webkit-scrollbar {
		display: none !important;
	}

	.gbf-action-bar__tab-label,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-fallback,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-moved,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-moved a,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-moved button {
		height: 52px !important;
		min-width: auto !important;
		padding: 0 20px !important;
		font-size: 13px !important;
	}
}

/* --------------------------------------------------------------------------
   18. RESPONSIVE — 800px MOBILE: icon-only circular buttons
   CSS vars are overridden by the PHP-injected mobile @media block so all
   colors and sizes respond to the admin Mobile settings automatically.
   -------------------------------------------------------------------------- */
@media (max-width: 800px) {
	/* Bottom comes from the PHP-injected --gbf-ab-bottom mobile var */
	.gbf-action-bar {
		bottom: var(--gbf-ab-bottom, 16px) !important;
		padding: 0 16px !important;
	}

	.gbf-action-bar__inner {
		padding: 7px !important;
		gap: 5px !important;
		min-height: 0 !important;
	}

	/* ── Hide text; show icon only ── */
	.gbf-action-bar__tab-text,
	.gbf-action-bar__kb-text,
	.gbf-action-bar__kb-host .gbf-tab-text {
		display: none !important;
	}

	/* ── Circular label ── */
	.gbf-action-bar__tab-label {
		min-width: 0 !important;
		width: 62px !important;
		height: 62px !important;
		padding: 0 !important;
		gap: 0 !important;
	}

	/* ::before pill → circle */
	.gbf-action-bar__tab-label::before,
	.gbf-action-bar__tab-label::after {
		border-radius: 50% !important;
	}

	/* Icon centered inside the circle */
	.gbf-action-bar__tab-iconimg {
		width: 36px !important;
		height: 36px !important;
		background: transparent !important;
		border-radius: 0 !important;
	}

	.gbf-action-bar__tab-iconimg img {
		width: 24px !important;
		height: 24px !important;
		opacity: 0.85 !important;
	}

	/* ── KB button — circular ── */
	.gbf-action-bar__kb-host {
		margin-left: 0 !important;
	}

	.gbf-action-bar__kb-host .gbf-action-bar__kb-fallback,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-moved,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-moved a,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-moved button {
		min-width: 0 !important;
		width: 62px !important;
		height: 62px !important;
		padding: 0 !important;
	}

	/* KB ::before and ::after also circular */
	.gbf-action-bar__kb-host .gbf-action-bar__kb-fallback::before,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-moved::before,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-moved a::before,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-moved button::before,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-fallback::after,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-moved::after,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-moved a::after,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-moved button::after {
		border-radius: 50% !important;
	}

	.gbf-action-bar__kb-icon svg {
		width: 24px !important;
		height: 24px !important;
	}
}

/* --------------------------------------------------------------------------
   19. GRACEFUL DEGRADATION — no backdrop-filter
   -------------------------------------------------------------------------- */
@supports not (backdrop-filter: blur(1px)) {
	.gbf-action-bar__inner {
		background: rgba(8, 10, 22, 0.96) !important;
		border-color: rgba(255, 255, 255, 0.22) !important;
	}

	.gbf-action-bar__tab:hover .gbf-action-bar__tab-label::before,
	.gbf-action-bar__tab:focus-visible .gbf-action-bar__tab-label::before {
		background: rgba(212, 221, 242, 0.97) !important;
	}

	.gbf-action-bar__kb-host .gbf-action-bar__kb-fallback,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-moved,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-moved a,
	.gbf-action-bar__kb-host .gbf-action-bar__kb-moved button {
		background: rgba(90, 147, 216, 0.90) !important;
	}
}

/* --------------------------------------------------------------------------
   20. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.gbf-action-bar__tab-label::before,
	.gbf-action-bar__tab-label::after {
		transition-duration: 0.01ms !important;
	}
}