/* Luna User Menu Widget — v1.2
 * Same system as the main menu (menu.css): identical stroke + shadow tokens, same animation tokens.
 * Structure:  .lpw-um (outer group) > [.lpw-um-cart] + .lpw-um-user (button + panel)
 */

.lpw-um {
	--lpw-um-tr-bg: #ffffff;
	--lpw-um-tr-fg: #18181b;
	--lpw-um-tr-hover: #f4f4f5;
	--lpw-um-panel-bg: #ffffff;
	--lpw-um-panel-border: rgba(24, 24, 27, .08);   /* separator lines inside the panel */
	--lpw-um-item-fg: #27272a;
	--lpw-um-muted: #71717a;
	--lpw-um-item-hover: #f4f4f5;
	--lpw-um-danger: #dc2626;
	--lpw-um-badge-bg: #18181b;
	--lpw-um-badge-fg: #ffffff;
	--lpw-um-cart-bg: #18181b;
	--lpw-um-cart-fg: #ffffff;
	--lpw-um-cart-ic: 20px;
	--lpw-um-cart-gap: 8px;
	--lpw-um-avatar: 32px;
	--lpw-um-h: 44px;
	--lpw-um-tr-radius: 999px;
	--lpw-um-w: 270px;
	--lpw-um-radius: 16px;

	/* shared surface tokens — SAME values as menu.css (stroke + shadow) */
	--lpw-um-bar-border: 1px solid rgba(24, 24, 27, .10);
	--lpw-um-bar-shadow: 0 1px 2px 0 rgba(24, 24, 27, .05);
	--lpw-um-panel-stroke: 1px solid rgba(24, 24, 27, .08);
	--lpw-um-panel-shadow: 0 12px 32px -8px rgba(24, 24, 27, .18);

	/* animation tokens (all editable from the widget) */
	--lpw-um-ease: cubic-bezier(.22, 1, .36, 1);
	--lpw-um-pdur: 250ms;
	--lpw-um-pdist: 8px;
	--lpw-um-cdur: 300ms;
	--lpw-um-idur: 450ms;
	--lpw-um-istart: 70ms;
	--lpw-um-step: 45ms;
	--lpw-um-dist: 22px;
	--lpw-um-fx: var(--lpw-um-dist);
	--lpw-um-fy: 0px;
	--lpw-um-p-from: translateY(var(--lpw-um-pdist));

	display: inline-flex;
	align-items: center;
	gap: var(--lpw-um-cart-gap);
	font-family: inherit;
	font-size: 14px;
	letter-spacing: -0.01em;
	-webkit-font-smoothing: antialiased;
}
.lpw-um *, .lpw-um *::before, .lpw-um *::after { box-sizing: border-box; }

.lpw-um.lpw-um-ease-ease-out { --lpw-um-ease: cubic-bezier(0, 0, .2, 1); }
.lpw-um.lpw-um-ease-ease-in-out { --lpw-um-ease: cubic-bezier(.65, 0, .35, 1); }
.lpw-um.lpw-um-ease-spring { --lpw-um-ease: cubic-bezier(.34, 1.4, .64, 1); }
.lpw-um.lpw-um-ease-linear { --lpw-um-ease: linear; }
.lpw-um.lpw-um-pfx-fade { --lpw-um-p-from: none; }
.lpw-um.lpw-um-pfx-scale { --lpw-um-p-from: scale(.96); }
.lpw-um.lpw-um-pfx-none { --lpw-um-pdur: 0ms; --lpw-um-p-from: none; }
.lpw-um.lpw-um-from-left { --lpw-um-fx: calc(var(--lpw-um-dist) * -1); }
.lpw-um.lpw-um-from-up { --lpw-um-fx: 0px; --lpw-um-fy: var(--lpw-um-dist); }

.lpw-um-user { position: relative; display: inline-block; }

/* ---------- button (profile) + cart share the same surface ---------- */
.lpw-um-trigger {
	appearance: none;
	display: inline-flex;
	align-items: center;
	height: var(--lpw-um-h);
	margin: 0;
	border: var(--lpw-um-bar-border);
	border-radius: var(--lpw-um-tr-radius);
	background: var(--lpw-um-tr-bg);
	color: var(--lpw-um-tr-fg);
	box-shadow: var(--lpw-um-bar-shadow);
	font: inherit;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .25s var(--lpw-um-ease), border-color .25s var(--lpw-um-ease), box-shadow .25s var(--lpw-um-ease), transform .2s var(--lpw-um-ease);
}
.lpw-um-trigger { gap: 10px; padding: 0 14px 0 6px; padding-inline: 6px 14px; }
.lpw-um-trigger:hover { background: var(--lpw-um-tr-hover); }
.lpw-um-trigger:active { transform: scale(.98); }
.lpw-um-trigger:focus-visible { outline: 2px solid var(--lpw-um-tr-fg); outline-offset: 2px; }
.lpw-um-user.is-open > .lpw-um-trigger { background: var(--lpw-um-tr-hover); }

.lpw-um-avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: var(--lpw-um-avatar);
	height: var(--lpw-um-avatar);
	border-radius: 50%;
	overflow: hidden;
	background: #e4e4e7;
	color: var(--lpw-um-tr-fg);
}
.lpw-um-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.lpw-um-avatar--icon svg { width: 55%; height: 55%; }
.lpw-um-name, .lpw-um-guest-text { white-space: nowrap; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.lpw-um-guest-text { max-width: none; }

/* caret — same design as main menu (.lpw-menu-toggle) */
.lpw-um-caret {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-inline-end: -4px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--lpw-um-muted);
}
.lpw-um-caret svg {
	display: block;
	width: 18px;
	height: 18px;
	transform: translateZ(0) rotate(0deg);
	transform-origin: 50% 50%;
	backface-visibility: hidden;
	will-change: transform;
	shape-rendering: geometricPrecision;
	transition: transform var(--lpw-um-cdur) var(--lpw-um-ease);
}
.lpw-um-user.is-open .lpw-um-caret {
	color: var(--lpw-um-tr-fg);
}
.lpw-um-user.is-open .lpw-um-caret svg {
	transform: translateZ(0) rotate(180deg);
}

/* ---------- cart button ---------- */
/* the cart lives INSIDE the profile button */
.lpw-um-cart { flex: none; display: inline-flex; align-items: center; gap: var(--lpw-um-cart-gap); padding-inline: 4px; }
.lpw-um-cart-ic { position: relative; flex: none; display: inline-flex; width: var(--lpw-um-cart-ic); height: var(--lpw-um-cart-ic); }
.lpw-um-cart-ic > svg, .lpw-um-cart-ic > i { display: block; width: 100%; height: 100%; font-size: var(--lpw-um-cart-ic); line-height: 1; }
.lpw-um-cart-count {
	position: absolute;
	top: -9px;
	inset-inline-end: -10px;
	min-width: 18px;
	padding: 3px 5px;
	border-radius: 999px;
	background: var(--lpw-um-cart-bg);
	color: var(--lpw-um-cart-fg);
	box-shadow: 0 0 0 2px var(--lpw-um-tr-bg);
	pointer-events: none;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.lpw-um-cart-total { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.lpw-um-cart-total .woocommerce-Price-amount { font-weight: inherit; }
.lpw-um-cart.is-hide-zero [data-n="0"] { display: none; }
.lpw-um-trigger:hover .lpw-um-cart-count { box-shadow: 0 0 0 2px var(--lpw-um-tr-hover); }
.lpw-um-cart.is-bump .lpw-um-cart-ic { animation: lpw-um-bump .55s var(--lpw-um-ease); }
@keyframes lpw-um-bump {
	0% { transform: scale(1); }
	30% { transform: scale(1.28) rotate(-8deg); }
	60% { transform: scale(.94) rotate(4deg); }
	100% { transform: scale(1); }
}

/* ---------- panel ---------- */
.lpw-um-panel {
	position: absolute;
	z-index: 999;
	top: 100%;
	padding-top: 8px; /* hover bridge */
	width: var(--lpw-um-w);
	max-width: calc(100vw - 16px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: var(--lpw-um-p-from);
	transition: opacity calc(var(--lpw-um-pdur) * .8) var(--lpw-um-ease), transform var(--lpw-um-pdur) var(--lpw-um-ease), visibility 0s linear var(--lpw-um-pdur);
}
.lpw-um--a-end .lpw-um-panel { inset-inline-end: 0; transform-origin: 100% 0; }
.lpw-um--a-start .lpw-um-panel { inset-inline-start: 0; transform-origin: 0 0; }
.lpw-um[dir="rtl"].lpw-um--a-end .lpw-um-panel { transform-origin: 0 0; }
.lpw-um[dir="rtl"].lpw-um--a-start .lpw-um-panel { transform-origin: 100% 0; }
.lpw-um--a-end .lpw-um-panel.is-flip { inset-inline-end: auto; inset-inline-start: 0; }
.lpw-um--a-start .lpw-um-panel.is-flip { inset-inline-start: auto; inset-inline-end: 0; }

.lpw-um-user.is-open > .lpw-um-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}
.lpw-um-card {
	padding: 6px;
	border: var(--lpw-um-panel-stroke);
	border-radius: var(--lpw-um-radius);
	background: var(--lpw-um-panel-bg);
	box-shadow: var(--lpw-um-panel-shadow);
}

/* header */
.lpw-um-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 10px 12px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--lpw-um-panel-border);
}
.lpw-um-avatar--lg { --lpw-um-avatar: 44px; }
.lpw-um-head-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lpw-um-head-txt strong { font-size: 14px; font-weight: 600; color: var(--lpw-um-item-fg); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lpw-um-head-txt small { font-size: 12px; color: var(--lpw-um-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; unicode-bidi: plaintext; }

/* list */
.lpw-um-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lpw-um-list > li { margin: 0; padding: 0; }
.lpw-um-sep { height: 1px; margin: 5px 6px !important; background: var(--lpw-um-panel-border); }

.lpw-um-item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 40px;
	padding: 8px 10px;
	border-radius: calc(var(--lpw-um-radius) - 6px);
	color: var(--lpw-um-item-fg);
	text-decoration: none;
	font-weight: 500;
	line-height: 1.3;
	outline: 0;
	transition: background-color .18s var(--lpw-um-ease), color .18s var(--lpw-um-ease), padding .25s var(--lpw-um-ease);
}
.lpw-um-item:hover, .lpw-um-item:focus-visible { background: var(--lpw-um-item-hover); }
.lpw-um-item:focus-visible { box-shadow: inset 0 0 0 2px rgba(24, 24, 27, .35); }
.lpw-um-ic { flex: none; display: inline-flex; width: 18px; height: 18px; color: var(--lpw-um-muted); transition: color .18s, transform .25s var(--lpw-um-ease); }
.lpw-um-ic svg, .lpw-um-ic i { width: 100%; height: 100%; font-size: 18px; line-height: 1; display: block; }
.lpw-um-item:hover .lpw-um-ic, .lpw-um-item:focus-visible .lpw-um-ic { color: var(--lpw-um-item-fg); transform: scale(1.08); }
.lpw-um-label { flex: 1 1 auto; min-width: 0; }
.lpw-um-badge {
	flex: none;
	min-width: 20px;
	padding: 3px 7px;
	border-radius: 999px;
	background: var(--lpw-um-badge-bg);
	color: var(--lpw-um-badge-fg);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.lpw-um-item.is-danger, .lpw-um-item.is-danger .lpw-um-ic { color: var(--lpw-um-danger); }
.lpw-um-item.is-danger:hover, .lpw-um-item.is-danger:focus-visible { background: color-mix(in srgb, var(--lpw-um-danger) 9%, transparent); }

/* ---------- staggered reveal ---------- */
.lpw-um--stagger .lpw-um-head,
.lpw-um--stagger .lpw-um-list > li {
	opacity: 0;
	transform: translate3d(var(--lpw-um-fx), var(--lpw-um-fy), 0);
	transition: opacity 140ms ease, transform 140ms ease;
	transition-delay: 0s;
}
.lpw-um--stagger .lpw-um-user.is-open .lpw-um-head,
.lpw-um--stagger .lpw-um-user.is-open .lpw-um-list > li {
	opacity: 1;
	transform: none;
	transition: opacity var(--lpw-um-idur) var(--lpw-um-ease), transform calc(var(--lpw-um-idur) * 1.2) var(--lpw-um-ease);
	transition-delay: calc(var(--lpw-um-istart) + var(--i, 0) * var(--lpw-um-step));
}

@media (prefers-reduced-motion: reduce) {
	.lpw-um *, .lpw-um *::before, .lpw-um *::after { transition-duration: 1ms !important; transition-delay: 0s !important; animation: none !important; }
}