/* Webreta Bottom Menu — frontend
 * Visibility (mobile-only) is enforced via inline @media rule
 * generated from user's breakpoint setting (see WRBM_Frontend::inline_vars).
 */

/* ============================================================
   Theme reset — Flatsome (and many WooCommerce themes) apply aggressive
   defaults to <button>, <a>, <ul>, <li>: min-height, min-width, margin,
   padding, font-size, line-height, letter-spacing, text-transform,
   border, border-radius, background, box-shadow, font-weight. None of
   that should leak into our menu/drawer/popup chrome.

   Wrapped in :where() so the reset has *zero* specificity — every
   component rule below wins by cascade order without us reaching for
   !important everywhere. :where() is supported in Chrome 88+, Safari
   14+, Firefox 78+ (Jan 2021), well covered for our mobile audience.
   ============================================================ */
:where(.wrbm-bar, .wrbm-bar *,
       .wrbm-drawer, .wrbm-drawer *,
       .wrbm-search, .wrbm-search *,
       .wrbm-popup, .wrbm-popup *,
       .wrbm-fab-stack, .wrbm-fab-stack *) {
	box-sizing: border-box;
}
:where(
	.wrbm-bar button, .wrbm-bar a, .wrbm-bar input, .wrbm-bar textarea, .wrbm-bar select,
	.wrbm-drawer button, .wrbm-drawer a, .wrbm-drawer input, .wrbm-drawer textarea, .wrbm-drawer select,
	.wrbm-search button, .wrbm-search a, .wrbm-search input, .wrbm-search textarea, .wrbm-search select,
	.wrbm-popup button, .wrbm-popup a, .wrbm-popup input, .wrbm-popup textarea, .wrbm-popup select,
	.wrbm-fab-stack button, .wrbm-fab-stack a, .wrbm-fab-stack input, .wrbm-fab-stack textarea, .wrbm-fab-stack select
) {
	margin: 0;
	min-height: 0;
	min-width: 0;
	max-width: none;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	font-weight: inherit;
	font-family: inherit;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none;
	color: inherit;
	width: auto;
	height: auto;
}
:where(.wrbm-bar button:hover, .wrbm-bar a:hover,
       .wrbm-drawer button:hover, .wrbm-drawer a:hover,
       .wrbm-search button:hover, .wrbm-search a:hover,
       .wrbm-popup button:hover, .wrbm-popup a:hover,
       .wrbm-fab-stack button:hover, .wrbm-fab-stack a:hover) {
	box-shadow: none;
	transform: none;
	text-decoration: none;
}
:where(.wrbm-bar ul, .wrbm-bar li,
       .wrbm-drawer ul, .wrbm-drawer li,
       .wrbm-popup ul, .wrbm-popup li) {
	list-style: none;
	margin: 0;
	padding: 0;
	background: transparent;
}
/* Some themes still ship `button { … } !important` declarations that beat
   :where(). Catch those with one extra-specific safety belt. */
.wrbm-bar button.wrbm-link,
.wrbm-drawer button.wrbm-drawer-close,
.wrbm-search button.wrbm-search-close {
	min-height: 0 !important;
	min-width: 0 !important;
	margin: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.wrbm-bar {
	display: none;
	box-sizing: border-box;
}

.wrbm-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--wrbm-zindex, 9999);
	background: var(--wrbm-bg, #0b3d91);
	color: var(--wrbm-icon, #fff);
	height: calc(var(--wrbm-height, 64px) + var(--wrbm-pad-top, 0px) + env(safe-area-inset-bottom, 0px));
	padding-top: var(--wrbm-pad-top, 0px);
	padding-right: var(--wrbm-pad-right, 0px);
	padding-left: var(--wrbm-pad-left, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	border-top: var(--wrbm-border-top-w, 1px) solid var(--wrbm-border-top-color, rgba(255, 255, 255, 0.08));
	border-top-left-radius: var(--wrbm-radius, 0);
	border-top-right-radius: var(--wrbm-radius, 0);
	box-shadow: var(--wrbm-shadow, 0 -6px 24px rgba(0, 0, 0, 0.10));
	font-family: inherit;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.28s ease;
}

.wrbm-pos-sticky { position: sticky; }

.wrbm-anim-fade { animation: wrbm-fade 0.4s ease both; }
.wrbm-anim-slide { animation: wrbm-slide 0.42s cubic-bezier(.2,.7,.2,1) both; }
.wrbm-anim-pop { animation: wrbm-pop 0.5s cubic-bezier(.34,1.56,.64,1) both; }

@keyframes wrbm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wrbm-slide { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes wrbm-pop { from { transform: translateY(20%) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.wrbm-bar.wrbm-hidden { transform: translateY(110%); }

.wrbm-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 var(--wrbm-gap, 4px) !important;
	display: flex;
	align-items: stretch;
	justify-content: space-around;
	width: 100%;
	height: var(--wrbm-height, 64px);
	gap: var(--wrbm-gap, 4px);
}

.wrbm-item {
	flex: 1 1 0;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: flex;
}

.wrbm-link {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wrbm-icon-label-gap, 3px);
	text-decoration: none !important;
	color: var(--wrbm-icon, #fff) !important;
	background: transparent;
	border: 0;
	cursor: pointer;
	/* Bottom padding reserves space for the absolutely-positioned label below.
	   Without this, the flex-centered icon would extend down into the label
	   area and overlap. */
	padding: 6px 4px 22px;
	font-family: inherit;
	font-size: var(--wrbm-label-size, 11px);
	line-height: 1.1;
	position: relative;
	transition: transform 0.18s ease, color 0.18s ease;
	box-shadow: none !important;
	min-width: 0;
}

/* Labels are absolutely positioned at the bar's bottom so they stay on the
   same horizontal line for every item — no matter how big or raised the
   icon above is (diamond, raised circle, FAB all push the icon's layout box
   upward without dragging the label with them). Pill mode overrides this
   below to use inline row layout. */
.wrbm-link .wrbm-lbl {
	position: absolute;
	bottom: 6px;
	left: 0;
	right: 0;
	text-align: center;
	padding: 0 4px;
}

.wrbm-link:hover,
.wrbm-link:focus-visible {
	color: var(--wrbm-active, #ffd84d) !important;
	outline: none;
}

/* Current page item — visually marks which menu entry matches the open page */
.wrbm-link.wrbm-current { color: var(--wrbm-active-icon, var(--wrbm-active, #ffd84d)) !important; }
.wrbm-link.wrbm-current .wrbm-lbl { color: var(--wrbm-active-label, var(--wrbm-active, #ffd84d)); opacity: 1; }
.wrbm-link.wrbm-current .wrbm-svg { color: var(--wrbm-active-icon, var(--wrbm-active, #ffd84d)); }

/* Highlight (raised circle) must always contrast the circle, even when active —
   otherwise the icon disappears because SVG color matches the circle bg. */
.wrbm-link.wrbm-highlight .wrbm-ico,
.wrbm-link.wrbm-highlight .wrbm-svg,
.wrbm-link.wrbm-highlight.wrbm-current .wrbm-svg {
	color: var(--wrbm-badge-text, #0b3d91) !important;
}

/* ============================================================
   Active-state style variants — applied via class on .wrbm-bar
   ============================================================ */

/* Underline: thin line below the active item */
.wrbm-bar.wrbm-active-underline .wrbm-link.wrbm-current::after {
	content: "";
	position: absolute;
	left: 25%;
	right: 25%;
	bottom: 4px;
	height: 3px;
	border-radius: 2px;
	background: var(--wrbm-active, #ffd84d);
}

/* Dot: small dot below the active item */
.wrbm-bar.wrbm-active-dot .wrbm-link.wrbm-current::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 5px;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: var(--wrbm-active, #ffd84d);
}

/* Pill: every item renders icon+label side-by-side. The active item additionally
   gets a chip background. Apple-style "pill nav" pattern. Override the
   absolute label positioning to put the label back in flex flow next to the
   icon. */
.wrbm-bar.wrbm-active-pill .wrbm-link {
	flex-direction: row;
	gap: 6px;
	padding: 6px 6px 8px;
}
.wrbm-bar.wrbm-active-pill .wrbm-link .wrbm-lbl {
	display: inline-block !important;
	position: static;
	text-align: left;
	padding: 0;
}
.wrbm-bar.wrbm-active-pill .wrbm-link.wrbm-current {
	background: color-mix(in srgb, var(--wrbm-active, #ffd84d) 22%, transparent);
	border-radius: 999px;
	padding: 4px 12px;
	margin: 6px 2px;
}
.wrbm-bar.wrbm-active-pill .wrbm-link.wrbm-current .wrbm-lbl {
	font-weight: 600;
}
/* Pill mode is tighter — let labels truncate gracefully */
.wrbm-bar.wrbm-active-pill .wrbm-link .wrbm-lbl {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Raised: a raised circle for the active item (same shape as highlight) */
.wrbm-bar.wrbm-active-raised .wrbm-link.wrbm-current .wrbm-ico {
	background: var(--wrbm-active, #ffd84d);
	color: var(--wrbm-badge-text, #0b3d91);
	width: calc(var(--wrbm-icon-size, 22px) + 22px);
	height: calc(var(--wrbm-icon-size, 22px) + 22px);
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: -22px;
	margin-bottom: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.wrbm-bar.wrbm-active-raised .wrbm-link.wrbm-current .wrbm-svg {
	color: var(--wrbm-badge-text, #0b3d91) !important;
}

/* Diamond: rotated square highlight */
.wrbm-bar.wrbm-active-diamond .wrbm-link.wrbm-current .wrbm-ico {
	background: var(--wrbm-active, #ffd84d);
	color: var(--wrbm-badge-text, #0b3d91);
	width: calc(var(--wrbm-icon-size, 22px) + 22px);
	height: calc(var(--wrbm-icon-size, 22px) + 22px);
	border-radius: 14px;
	transform: rotate(45deg);
	margin-top: -22px;
	margin-bottom: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.wrbm-bar.wrbm-active-diamond .wrbm-link.wrbm-current .wrbm-svg,
.wrbm-bar.wrbm-active-diamond .wrbm-link.wrbm-current .wrbm-ico > svg,
.wrbm-bar.wrbm-active-diamond .wrbm-link.wrbm-current .wrbm-ico > i,
.wrbm-bar.wrbm-active-diamond .wrbm-link.wrbm-current .wrbm-ico > .material-symbols-outlined {
	color: var(--wrbm-badge-text, #0b3d91) !important;
	transform: rotate(-45deg);
}

/* ============================================================
   Bar shape variants
   ============================================================ */

.wrbm-bar.wrbm-shape-floating {
	left: 12px;
	right: 12px;
	bottom: 12px;
	border-radius: 22px;
	box-shadow: var(--wrbm-shadow, 0 8px 28px rgba(0,0,0,0.15));
}
.wrbm-bar.wrbm-shape-floating { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Notched: a wide ring around the center FAB icon creates the cutout illusion
   without using clip-path (which would also clip the FAB itself). The FAB
   item below applies its own large box-shadow in the bar color, "cutting"
   a circular hole through the bar visually. */
.wrbm-bar.wrbm-shape-notched { overflow: visible; }
.wrbm-bar.wrbm-shape-notched .wrbm-list,
.wrbm-bar.wrbm-shape-notched .wrbm-item,
.wrbm-bar.wrbm-shape-notched .wrbm-link { overflow: visible; }

/* ============================================================
   Label visibility variants
   ============================================================ */

.wrbm-bar.wrbm-labels-hidden .wrbm-lbl { display: none; }
.wrbm-bar.wrbm-labels-active-only .wrbm-link:not(.wrbm-current) .wrbm-lbl { display: none; }

/* ============================================================
   Per-item active shape overrides (apply to specific items)
   ============================================================ */

.wrbm-link.wrbm-shape-item-raised .wrbm-ico,
.wrbm-link.wrbm-shape-item-diamond .wrbm-ico {
	background: var(--wrbm-active, #ffd84d);
	color: var(--wrbm-badge-text, #0b3d91) !important;
	width: calc(var(--wrbm-icon-size, 22px) + 22px);
	height: calc(var(--wrbm-icon-size, 22px) + 22px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: -38px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	margin-bottom: 9px;
}
.wrbm-link.wrbm-shape-item-raised .wrbm-ico { border-radius: 999px; }
.wrbm-link.wrbm-shape-item-diamond .wrbm-ico { border-radius: 14px; transform: rotate(45deg); }
.wrbm-link.wrbm-shape-item-diamond .wrbm-svg,
.wrbm-link.wrbm-shape-item-diamond .wrbm-ico > svg,
.wrbm-link.wrbm-shape-item-diamond .wrbm-ico > i,
.wrbm-link.wrbm-shape-item-diamond .wrbm-ico > .material-symbols-outlined { transform: rotate(-45deg); }
.wrbm-link.wrbm-shape-item-raised .wrbm-svg,
.wrbm-link.wrbm-shape-item-diamond .wrbm-svg { color: var(--wrbm-badge-text, #0b3d91) !important; }

.wrbm-link.wrbm-shape-item-pill {
	background: color-mix(in srgb, var(--wrbm-active, #ffd84d) 18%, transparent);
	border-radius: 999px;
	padding: 4px 14px;
	margin: 6px 2px;
	flex-direction: row;
	gap: 6px;
}

.wrbm-link.wrbm-shape-item-underline::after {
	content: ""; position: absolute; left: 25%; right: 25%; bottom: 4px;
	height: 3px; border-radius: 2px; background: var(--wrbm-active, #ffd84d);
}
.wrbm-link.wrbm-shape-item-dot::after {
	content: ""; position: absolute; left: 50%; bottom: 5px;
	width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
	background: var(--wrbm-active, #ffd84d);
}

/* ============================================================
   FAB (Floating Action Button) — center item that sits above the bar.
   A wide solid box-shadow in the bar's background color creates the
   "cut-out" illusion: the FAB looks punched out of the bar even though
   the bar itself is uninterrupted. Works regardless of bar_shape.
   ============================================================ */

.wrbm-link.wrbm-is-fab {
	overflow: visible !important;
	position: relative;
	z-index: 1;
}
.wrbm-item:has(.wrbm-is-fab) { overflow: visible; }
.wrbm-link.wrbm-is-fab .wrbm-ico {
	background: var(--wrbm-active, #ffd84d);
	color: var(--wrbm-badge-text, #0b3d91) !important;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: -30px;
	margin-bottom: 6px;
	/* First shadow = colored ring in bar bg color → looks like the bar
	   is notched around the FAB. Second shadow = real drop shadow. */
	box-shadow:
		0 0 0 5px var(--wrbm-bg, #0b3d91),
		0 8px 22px rgba(0, 0, 0, 0.32);
}
.wrbm-link.wrbm-is-fab .wrbm-svg {
	color: var(--wrbm-badge-text, #0b3d91) !important;
	width: 26px !important;
	height: 26px !important;
}
.wrbm-link.wrbm-is-fab .wrbm-lbl { margin-top: 0; }

/* ============================================================
   Popup menu (B) — small floating dropdown above the bar item
   ============================================================ */

.wrbm-popup {
	position: fixed;
	/* JS overrides `left` to align the popup with its trigger item's center
	   (data-anchor). Default 50% / translateX(-50%) keeps the popup centered
	   on the viewport before JS hydrates. */
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	/* Bottom offset must clear the tallest possible item shape. A raised
	   circle extends ~22px above the bar; an FAB extends ~30px. We add 30px
	   so the popup arrow never collides with those raised shapes. */
	bottom: calc(var(--wrbm-height, 64px) + env(safe-area-inset-bottom, 0px) + 34px);
	/* z-index well above bar, drawer, FAB items, and any item shape — popup
	   always wins the stacking battle. */
	z-index: calc(var(--wrbm-zindex, 9999) + 10);
	display: flex;
	justify-content: center;
	pointer-events: none;
}
.wrbm-popup[hidden] { display: none; }
.wrbm-popup-list {
	pointer-events: auto;
	list-style: none !important;
	margin: 0 !important;
	padding: 8px !important;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 200px;
	max-width: calc(100vw - 24px);
	transform-origin: bottom center;
	animation: wrbm-popup-in 0.22s cubic-bezier(.2,.7,.2,1) both;
	position: relative;
}
.wrbm-popup-list::after {
	content: "";
	position: absolute;
	bottom: -7px;
	/* Center the arrow at the trigger item even if the popup body was clamped
	   inside the viewport (--wrbm-popup-arrow-shift is set by JS, in px). */
	left: calc(50% + var(--wrbm-popup-arrow-shift, 0px));
	transform: translateX(-50%) rotate(45deg);
	width: 14px; height: 14px;
	background: #fff;
	border-radius: 0 0 4px 0;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.06);
}
.wrbm-popup-item { list-style: none !important; margin: 0 !important; }
.wrbm-popup-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 10px;
	color: #1c2540 !important;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.12s ease;
	min-height: 44px;
}
.wrbm-popup-link:hover { background: #f3f5fa; }
.wrbm-popup-link:active { background: #e6ebf5; }
.wrbm-popup-ico {
	display: inline-flex;
	width: 24px; height: 24px;
	align-items: center; justify-content: center;
	color: var(--wrbm-active, #0b3d91);
	flex-shrink: 0;
}
.wrbm-popup-lbl { line-height: 1.2; }
@keyframes wrbm-popup-in {
	from { opacity: 0; transform: translateY(8px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   FAB Speed-dial (C) — buttons fan out from the bar item
   ============================================================ */

.wrbm-fab-stack {
	position: fixed;
	/* JS overrides `left` to the trigger's anchor percentage. */
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	/* Same z-index philosophy as .wrbm-popup — must clear raised/FAB shapes
	   and any drawer behind. */
	bottom: calc(var(--wrbm-height, 64px) + env(safe-area-inset-bottom, 0px) + 30px);
	z-index: calc(var(--wrbm-zindex, 9999) + 10);
	display: flex;
	justify-content: center;
	pointer-events: none;
	height: 0;
}
.wrbm-fab-stack[hidden] { display: none; }

/* Default (closed) state — items collapsed at the center, invisible. We use
   CSS @keyframes for the open animation (not transitions) because going from
   display:none → display:flex on the parent doesn't reliably trigger transitions
   on freshly-mounted children — the browser sees the "from" and "to" values
   in the same paint and snaps to the end. A keyframe animation fires every
   time the :not([hidden]) selector matches, so each open is a real animation. */
.wrbm-fab-item {
	pointer-events: auto;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 48px; height: 48px;
	background: #fff;
	color: var(--wrbm-active, #0b3d91) !important;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
	transform: translate(-50%, 50%) rotate(var(--wrbm-fab-angle)) translateX(0px) rotate(calc(-1 * var(--wrbm-fab-angle))) scale(0.4);
	opacity: 0;
}
.wrbm-fab-stack:not([hidden]) .wrbm-fab-item {
	animation: wrbm-fab-fan-out 0.45s cubic-bezier(.34, 1.56, .55, 1) forwards;
	animation-delay: var(--wrbm-fab-delay, 0ms);
}

@keyframes wrbm-fab-fan-out {
	0% {
		transform: translate(-50%, 50%) rotate(var(--wrbm-fab-angle)) translateX(0px) rotate(calc(-1 * var(--wrbm-fab-angle))) scale(0.4);
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	100% {
		transform: translate(-50%, 50%) rotate(var(--wrbm-fab-angle)) translateX(90px) rotate(calc(-1 * var(--wrbm-fab-angle))) scale(1);
		opacity: 1;
	}
}
@media (prefers-reduced-motion: reduce) {
	.wrbm-fab-stack:not([hidden]) .wrbm-fab-item {
		animation: none;
		transform: translate(-50%, 50%) rotate(var(--wrbm-fab-angle)) translateX(90px) rotate(calc(-1 * var(--wrbm-fab-angle)));
		opacity: 1;
	}
}
.wrbm-fab-ico {
	display: inline-flex;
	width: 22px; height: 22px;
	align-items: center; justify-content: center;
}
.wrbm-fab-lbl {
	position: absolute;
	top: -28px;
	background: rgba(15, 22, 41, 0.92);
	color: #fff;
	font-size: 11px;
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
	pointer-events: none;
}

.wrbm-link:active {
	transform: scale(0.94);
}

.wrbm-link.wrbm-highlight {
	position: relative;
}

.wrbm-link.wrbm-highlight .wrbm-ico {
	background: var(--wrbm-active, #ffd84d);
	color: var(--wrbm-badge-text, #0b3d91);
	width: calc(var(--wrbm-icon-size, 22px) + 22px);
	height: calc(var(--wrbm-icon-size, 22px) + 22px);
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: -22px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	transition: transform 0.18s ease;
}

.wrbm-link.wrbm-highlight:hover .wrbm-ico {
	transform: translateY(-2px);
}

.wrbm-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}

.wrbm-svg {
	width: var(--wrbm-icon-size, 22px);
	height: var(--wrbm-icon-size, 22px);
	display: block;
}

/* ============================================================
   Icon size equality across all 3 sources (built-in SVG / FA / MS)
   ============================================================

   Our built-in inline SVGs draw their content roughly in the 3..21 range
   of a 24-unit viewBox (≈75% of the viewBox). FA and Material Symbols
   glyphs at a given font-size occupy ~85-90% of that font-size.

   To get the same visual area for all three:
     • Built-in SVG fills its 22×22 box → visible content ≈ 0.75 × 22 = 16.5px
     • FA glyph at font-size 22 → visible ≈ 0.85 × 22 = 18.7px (too big)
     • So scale FA/MS font-size to 0.85 of icon-size → glyph ≈ 0.85 × 0.85 × 22 ≈ 16px
     (Roughly equal to built-in.)

   We boost selector specificity with `.wrbm-bar i.wrbm-svg.fa-*` (0,4,1)
   and use !important — Flatsome ships rules like
   `i { font-size: …; font-family: … }` that would otherwise win. */
.wrbm-bar i.wrbm-svg.fa-solid,
.wrbm-bar i.wrbm-svg.fa-regular,
.wrbm-bar i.wrbm-svg.fa-brands,
.wrbm-bar i.wrbm-svg.fa-light,
.wrbm-bar i.wrbm-svg.fa-duotone,
.wrbm-bar i.wrbm-svg.fa-thin,
.wrbm-popup i.wrbm-svg.fa-solid,
.wrbm-popup i.wrbm-svg.fa-regular,
.wrbm-popup i.wrbm-svg.fa-brands,
.wrbm-drawer i.wrbm-svg.fa-solid,
.wrbm-drawer i.wrbm-svg.fa-regular,
.wrbm-drawer i.wrbm-svg.fa-brands,
i.wrbm-svg.fa-solid,
i.wrbm-svg.fa-regular,
i.wrbm-svg.fa-brands,
i.wrbm-svg.fa-light,
i.wrbm-svg.fa-duotone,
i.wrbm-svg.fa-thin {
	font-size: calc(var(--wrbm-icon-size, 22px) * 0.85) !important;
	line-height: 1 !important;
	font-style: normal !important;
	color: inherit;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: var(--wrbm-icon-size, 22px) !important;
	height: var(--wrbm-icon-size, 22px) !important;
	max-width: var(--wrbm-icon-size, 22px) !important;
	max-height: var(--wrbm-icon-size, 22px) !important;
	flex-shrink: 0;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Force the correct FA font-family/weight per style (themes like Flatsome
   replace `i { font-family }` for their own icon fonts, which silently
   renders our `fa-whatsapp` as a stray "W" letter). */
.wrbm-bar i.wrbm-svg.fa-solid,
i.wrbm-svg.fa-solid {
	font-family: "Font Awesome 6 Free" !important;
	font-weight: 900 !important;
}
.wrbm-bar i.wrbm-svg.fa-regular,
i.wrbm-svg.fa-regular {
	font-family: "Font Awesome 6 Free" !important;
	font-weight: 400 !important;
}
.wrbm-bar i.wrbm-svg.fa-brands,
i.wrbm-svg.fa-brands {
	font-family: "Font Awesome 6 Brands" !important;
	font-weight: 400 !important;
}
.wrbm-bar i.wrbm-svg.fa-light,
i.wrbm-svg.fa-light {
	font-family: "Font Awesome 6 Pro" !important;
	font-weight: 300 !important;
}
.wrbm-bar i.wrbm-svg.fa-duotone,
i.wrbm-svg.fa-duotone {
	font-family: "Font Awesome 6 Duotone" !important;
	font-weight: 900 !important;
}
.wrbm-bar i.wrbm-svg.fa-thin,
i.wrbm-svg.fa-thin {
	font-family: "Font Awesome 6 Pro" !important;
	font-weight: 100 !important;
}

/* Material Symbols font-icons (loaded conditionally from Google Fonts). The
   `wrbm-svg` class is shared with the inline SVGs so sizing variables and
   layout assumptions stay identical. Hard-clip overflow and constrain width
   so that, if the font fails to load and the raw icon name leaks out as
   plain text, the bar layout doesn't collapse. */
/* Material Symbols — scale 0.75 to match the built-in SVG's ~75% effective
   content draw area. Stronger selector + !important so Flatsome/theme rules
   that style `span` globally don't win. */
.wrbm-bar .material-symbols-outlined.wrbm-svg,
.wrbm-popup .material-symbols-outlined.wrbm-svg,
.wrbm-drawer .material-symbols-outlined.wrbm-svg,
.material-symbols-outlined.wrbm-svg {
	font-family: 'Material Symbols Outlined' !important;
	font-weight: normal !important;
	font-style: normal !important;
	font-size: calc(var(--wrbm-icon-size, 22px) * 0.85) !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	font-feature-settings: 'liga' !important;
	-webkit-font-feature-settings: 'liga' !important;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	color: inherit;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: var(--wrbm-icon-size, 22px) !important;
	height: var(--wrbm-icon-size, 22px) !important;
	max-width: var(--wrbm-icon-size, 22px) !important;
	max-height: var(--wrbm-icon-size, 22px) !important;
	overflow: hidden;
	flex-shrink: 0;
}
/* Note: don't lock `.wrbm-ico` to a fixed width/height here — the raised /
   diamond / highlight / FAB variants resize this wrapper to a larger circle
   (icon-size + 22px). Constraints belong on the inner icon element (svg/i/span)
   below, which is what we actually want to clip when an MS font fails to
   load and leaks raw text. */
.wrbm-ico {
	flex-shrink: 0;
}

.wrbm-lbl {
	color: var(--wrbm-label, #fff);
	font-size: var(--wrbm-label-size, 11px);
	font-weight: 500;
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	opacity: 0.92;
}

.wrbm-link:hover .wrbm-lbl,
.wrbm-link:focus-visible .wrbm-lbl {
	color: var(--wrbm-active, #ffd84d);
	opacity: 1;
}

.wrbm-no-labels .wrbm-lbl { display: none; }

.wrbm-cart-badge {
	position: absolute;
	top: 6px;
	right: calc(50% - 22px);
	background: var(--wrbm-badge-bg, #ffd84d);
	color: var(--wrbm-badge-text, #0b3d91);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	min-width: 16px;
	height: 16px;
	border-radius: 999px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.wrbm-cart-badge[data-empty="1"] { display: none; }

/* drawers */
.wrbm-drawer,
.wrbm-search {
	position: fixed;
	inset: 0;
	z-index: calc(var(--wrbm-zindex, 9999) + 1);
}

.wrbm-drawer[hidden],
.wrbm-search[hidden] { display: none; }

.wrbm-drawer-backdrop,
.wrbm-search-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 14, 30, 0.55);
	backdrop-filter: blur(2px);
	animation: wrbm-fade 0.22s ease both;
}

.wrbm-drawer-sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	max-height: 78vh;
	min-height: 220px;
	border-top-left-radius: 18px;
	border-top-right-radius: 18px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	animation: wrbm-slide-up 0.32s cubic-bezier(.2,.7,.2,1) both;
	box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.2);
}

@keyframes wrbm-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

.wrbm-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px 8px;
	border-bottom: 1px solid #eef0f5;
}

.wrbm-drawer-header h3 {
	margin: 0 !important;
	font-size: 16px;
	color: #0b3d91;
	font-weight: 700;
}

.wrbm-drawer-close,
.wrbm-search-close {
	background: #f3f5fa;
	border: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #0b3d91;
	cursor: pointer;
}

.wrbm-drawer-body {
	overflow-y: auto;
	flex: 1;
	padding: 6px 0 18px;
	-webkit-overflow-scrolling: touch;
}

.wrbm-drawer-menu {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.wrbm-drawer-menu li {
	border-bottom: 1px solid #f1f3f8;
	list-style: none !important;
	margin: 0 !important;
}

.wrbm-drawer-menu li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 22px;
	color: #1c2540 !important;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.15s ease;
}

.wrbm-drawer-menu li a:hover,
.wrbm-drawer-menu li a:focus {
	background: #f6f8ff;
	color: #0b3d91 !important;
}

.wrbm-drawer-menu .wrbm-count {
	font-size: 11px;
	color: #8a94ab;
	font-weight: 400;
}

.wrbm-empty {
	padding: 30px;
	text-align: center;
	color: #8a94ab;
}

.wrbm-search-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	background: #fff;
	padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
	animation: wrbm-search-down 0.28s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes wrbm-search-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.wrbm-search-form {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	background: #f3f5fa;
	border: 1px solid #e3e7f0;
	border-radius: 999px;
	padding: 10px 14px;
	box-sizing: border-box;
}
.wrbm-search-form .wrbm-search-ico {
	color: #0b3d91;
	display: inline-flex;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	align-items: center;
	justify-content: center;
}
.wrbm-search-form > svg,
.wrbm-search-form .wrbm-search-ico > svg { width: 22px !important; height: 22px !important; }

.wrbm-search-form input[type="search"] {
	flex: 1 1 auto;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: #1c2540 !important;
	min-width: 0;
	padding: 6px 0 !important;
	height: auto !important;
	min-height: 0 !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
.wrbm-search-form input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.wrbm-search-close {
	background: #fff !important;
	color: #0b3d91 !important;
	border: 1px solid #e3e7f0 !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0 !important;
}
.wrbm-search-close > svg { width: 18px; height: 18px; }

/* Flatsome native mobile sticky nav hide rules (scoped via inline media query in PHP) */
body.wrbm-hide-flatsome .has-mobile-bottom-sticky #ux-mobile-tools,
body.wrbm-hide-flatsome .ux-mobile-nav,
body.wrbm-hide-flatsome #ux-mobile-tools,
body.wrbm-hide-flatsome .mobile-bottom-nav,
body.wrbm-hide-flatsome .sticky-nav-mobile {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.wrbm-bar,
	.wrbm-drawer-sheet,
	.wrbm-search-panel,
	.wrbm-drawer-backdrop,
	.wrbm-search-backdrop { animation: none !important; transition: none !important; }
}