/*
 * UENI member bar · fixed-position account access button on the customer's
 * frontend site. Theme-adaptive via CSS custom properties. Same defaults as
 * the member area shortcode so the two feel like one system.
 *
 * Theme overrides: set --uenim-mb-* on .ueni-mb or a higher ancestor.
 * Position variants set via body class or wrapper class · see PHP render.
 */

.ueni-mb {
	--uenim-mb-bg:       rgba(255, 255, 255, 0.98);
	--uenim-mb-fg:       #2e2216;
	--uenim-mb-sub:      #7a6a55;
	--uenim-mb-accent:   #b5843a;
	--uenim-mb-border:   #ddd1b5;
	--uenim-mb-danger:   #a63a2a;
	--uenim-mb-shadow:   0 6px 24px rgba(46, 34, 22, 0.14), 0 2px 6px rgba(46, 34, 22, 0.06);

	/* Fixed + very high z-index so no theme header, cart drawer, banner,
	   or Elementor overlay can bury us. Important on the critical rules
	   because Elementor themes sometimes set blanket display / visibility
	   overrides. */
	position: fixed !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	z-index: 99999 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: var(--uenim-mb-fg);
	margin: 0 !important;
	padding: 0 !important;
}

.ueni-mb-top-right    { top: 12px    !important; right: 16px  !important; }
.ueni-mb-top-left     { top: 12px    !important; left: 16px   !important; }
.ueni-mb-bottom-right { bottom: 16px !important; right: 16px  !important; }
.ueni-mb-bottom-left  { bottom: 16px !important; left: 16px   !important; }

/* Inline variant · the Elementor "UENI Account" widget renders the same pill
   in-flow (inside a nav container / header) rather than floating. Cancels
   the fixed positioning + shadows the pill uses when standalone. */
.ueni-mb.ueni-mb-inline {
	position: static !important;
	top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
	display: inline-block;
}
.ueni-mb.ueni-mb-inline .ueni-mb-trigger { box-shadow: none; }
.ueni-mb.ueni-mb-inline.ueni-mb-variant-text-link .ueni-mb-trigger {
	background: transparent; border: 0; padding: 4px 6px; box-shadow: none;
}
.ueni-mb.ueni-mb-inline.ueni-mb-variant-icon-only .ueni-mb-trigger {
	padding: 8px; gap: 0;
}
.ueni-mb.ueni-mb-inline.ueni-mb-variant-icon-only .ueni-mb-label { display: none; }
.ueni-mb.ueni-mb-inline .ueni-mb-menu {
	position: absolute; margin-top: 6px; right: 0;
}

/* Trigger · circular icon-only when signed out, pill with name when signed in.
   line-height 1.4 + generous vertical padding so descenders (g, j, p, y) render
   without clipping. */
.ueni-mb .ueni-mb-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px 9px;
	background: var(--uenim-mb-bg);
	color: var(--uenim-mb-fg);
	border: 1px solid var(--uenim-mb-border);
	border-radius: 100px;
	box-shadow: var(--uenim-mb-shadow);
	cursor: pointer;
	font: inherit;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	appearance: none;
	transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.ueni-mb .ueni-mb-trigger:hover {
	border-color: var(--uenim-mb-accent);
	transform: translateY(-1px);
	box-shadow: 0 10px 28px rgba(46, 34, 22, 0.18), 0 3px 8px rgba(46, 34, 22, 0.08);
}
.ueni-mb .ueni-mb-trigger:active { transform: translateY(0); }
.ueni-mb .ueni-mb-trigger:focus-visible {
	outline: 2px solid var(--uenim-mb-accent);
	outline-offset: 2px;
}
.ueni-mb .ueni-mb-trigger .ti { font-size: 18px; color: var(--uenim-mb-accent); }
.ueni-mb.is-signed-in .ueni-mb-trigger .ti { color: var(--uenim-mb-accent); }

.ueni-mb .ueni-mb-label {
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	line-height: 1.4;
	/* Extra bottom padding on the label absorbs the descender bounding box so
	   overflow:hidden (needed for ellipsis on long names) doesn't clip the tail
	   of a 'g' or 'y'. */
	padding-bottom: 1px;
}

/* On narrow viewports collapse the label · icon-only trigger. */
@media (max-width: 480px) {
	.ueni-mb .ueni-mb-label { display: none; }
	.ueni-mb .ueni-mb-trigger { padding: 10px; }
}

/* Menu · anchored under the trigger, aligned to the trigger's edge. */
.ueni-mb .ueni-mb-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 220px;
	background: var(--uenim-mb-bg);
	border: 1px solid var(--uenim-mb-border);
	border-radius: 10px;
	box-shadow: var(--uenim-mb-shadow);
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ueni-mb-top-left .ueni-mb-menu,
.ueni-mb-bottom-left .ueni-mb-menu { right: auto; left: 0; }
.ueni-mb-bottom-right .ueni-mb-menu,
.ueni-mb-bottom-left  .ueni-mb-menu { top: auto; bottom: calc(100% + 8px); }

.ueni-mb .ueni-mb-menu[hidden] { display: none; }

.ueni-mb .ueni-mb-menu-head {
	padding: 10px 12px 8px;
	border-bottom: 1px solid var(--uenim-mb-border);
	margin-bottom: 4px;
}
.ueni-mb .ueni-mb-menu-eyebrow {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--uenim-mb-sub);
	margin-bottom: 2px;
}
.ueni-mb .ueni-mb-menu-name {
	font-weight: 500;
	color: var(--uenim-mb-fg);
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ueni-mb .ueni-mb-menu-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	font-size: 13.5px;
	color: var(--uenim-mb-fg);
	text-decoration: none;
	border-radius: 6px;
	transition: background-color 100ms ease;
}
.ueni-mb .ueni-mb-menu-item:hover { background: rgba(181, 132, 58, 0.10); }
.ueni-mb .ueni-mb-menu-item .ti { color: var(--uenim-mb-sub); font-size: 15px; }
.ueni-mb .ueni-mb-menu-item-danger { color: var(--uenim-mb-danger); }
.ueni-mb .ueni-mb-menu-item-danger .ti { color: var(--uenim-mb-danger); }

@media (prefers-reduced-motion: reduce) {
	.ueni-mb .ueni-mb-trigger,
	.ueni-mb .ueni-mb-menu-item { transition: none; }
}