/*!
 * Alee Bottom Menu — Frontend styles
 * License: GPL-2.0-or-later
 */

:root {
	--abm-primary: #2563eb;        /* blue-600  (Tailwind v3) */
	--abm-secondary: #1d4ed8;      /* blue-700 */
	--abm-bar-bg: #ffffff;         /* white */
	--abm-text: #0f172a;           /* slate-900 (WCAG AAA on white) */
	--abm-border: #e2e8f0;         /* slate-200 */
	--abm-radius: 16px;
	--abm-icon: 36px;
	--abm-bar-height: 60px;
	--abm-z: 99990;
	--abm-shadow-bar: 0 -2px 12px rgba(0, 0, 0, 0.08);
	--abm-shadow-icon: 0 4px 12px rgba(15, 23, 42, 0.18);
	--abm-shadow-menu: 0 -8px 24px rgba(15, 23, 42, 0.18);
	/* Premium ease-out curve — sub-100ms ramp, long tail. Snappy yet calm. */
	--abm-ease: cubic-bezier(0.32, 0.72, 0, 1);
	--abm-transition: 0.22s var(--abm-ease);
	--abm-transition-fast: 0.14s var(--abm-ease);
	--abm-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.45);
}

.alee-bm,
.alee-bm * {
	box-sizing: border-box;
}

.alee-bm {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: var(--abm-z);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	padding: 8px 10px;
	padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
	background: var(--abm-bar-bg);
	border-top: 1px solid var(--abm-border);
	box-shadow: var(--abm-shadow-bar);
	font: 500 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, "Apple Color Emoji", sans-serif;
	color: var(--abm-text);
	-webkit-tap-highlight-color: transparent;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translateY(0);
	transition: transform 0.25s var(--abm-ease);
}

/* Item base — links and dropdown buttons share styling */
.alee-bm__item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 6px 2px;
	min-height: var(--abm-bar-height, 60px);
	border-radius: 12px;
	color: var(--abm-text);
	text-decoration: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	font: inherit;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
	transition: transform var(--abm-transition), background var(--abm-transition);
}

.alee-bm__btn {
	all: unset;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 6px 2px;
	min-height: var(--abm-bar-height, 60px);
	border-radius: 12px;
	cursor: pointer;
	color: var(--abm-text);
	font: inherit;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}

.alee-bm__icon {
	width: var(--abm-icon);
	height: var(--abm-icon);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Default (icon_style=flat) — solid per-button color, no gradient bleed. */
	background: var(--btn-color, var(--abm-primary));
	color: #fff;
	box-shadow: var(--abm-shadow-icon);
	position: relative;
	overflow: hidden;
	-webkit-touch-callout: none;
	transition: transform var(--abm-transition),
	            background var(--abm-transition),
	            color var(--abm-transition),
	            box-shadow var(--abm-transition),
	            filter var(--abm-transition);
}

/* Tonal: subtle gradient using ONLY the button's own color (light→dark of itself).
   Uses color-mix() with a flat fallback for older browsers. */
.alee-bm--icon-tonal .alee-bm__icon {
	background: var(--btn-color, var(--abm-primary));
	background: linear-gradient(145deg,
		color-mix(in srgb, var(--btn-color, var(--abm-primary)) 88%, white 12%) 0%,
		color-mix(in srgb, var(--btn-color, var(--abm-primary)) 82%, black 18%) 100%);
}

/* Brand: legacy v1.0 behavior — gradient from button color to global secondary. */
.alee-bm--icon-brand .alee-bm__icon {
	background: linear-gradient(145deg,
		var(--btn-color, var(--abm-primary)) 0%,
		var(--abm-secondary) 100%);
}

.alee-bm__icon > svg {
	width: 60%;
	height: 60%;
	display: block;
	pointer-events: none;
}

/* Brand icons (LINE, FB, etc.) fill the circle and ignore tinting */
.alee-bm__item--brand .alee-bm__icon {
	background: transparent;
	box-shadow: none;
	padding: 0;
}

.alee-bm__item--brand .alee-bm__icon > svg {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: var(--abm-shadow-icon);
}

.alee-bm__label {
	font-size: 12px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	transition: color var(--abm-transition);
}

/* ──────────────────────────────────────────────────────────────
   Label color lock (v1.3.3): bind every label inside the bar to
   the global text_color setting, with high specificity AND
   !important. Defeats:
     • Active-state tints (any future regression in this codebase)
     • Theme rules like `button span { color: ... }`
     • Custom CSS in the admin custom_css field
     • Browser default UA :focus/:active text-color shifts
   The only way to change label color now is via the admin's
   Colors → Text color setting, which writes to --abm-text.
   ────────────────────────────────────────────────────────────── */
.alee-bm .alee-bm__label,
.alee-bm__item .alee-bm__label,
.alee-bm__btn .alee-bm__label,
.alee-bm__dropdown .alee-bm__label,
.alee-bm__item--current .alee-bm__label,
.alee-bm__item--current .alee-bm__btn .alee-bm__label,
.alee-bm__btn[aria-expanded="true"] .alee-bm__label,
.alee-bm__dropdown.abm-is-open .alee-bm__btn .alee-bm__label,
.alee-bm__item:active .alee-bm__label,
.alee-bm__btn:active .alee-bm__label {
	color: var(--abm-text) !important;
}

/* ──────────────────────────────────────────────────────────────
   Premium minimal active state (universal).
   On tap / hover / dropdown-open / current page:
     • Icon container (circle + shadow + glyph) stays exactly as
       idle — no chrome melt, no color tint.
     • Only the icon scales to 120% (20% bigger than idle).
     • Label color is unchanged from idle — keeps readability on
       light backgrounds where a tinted label could disappear.
   Touch devices skip :hover (hover:hover guard) to avoid sticky
   hover on iOS Safari and Android Chrome.
   ────────────────────────────────────────────────────────────── */

/* Animation modes are explicit contracts:
   lift = rise + scale, pulse = one short scale pulse, none = no transform animation. */
.alee-bm--anim-lift .alee-bm__item:active .alee-bm__icon,
.alee-bm--anim-lift .alee-bm__btn:active .alee-bm__icon,
.alee-bm--anim-lift .alee-bm__btn[aria-expanded="true"] .alee-bm__icon,
.alee-bm--anim-lift .alee-bm__dropdown.abm-is-open .alee-bm__btn .alee-bm__icon,
.alee-bm--anim-lift .alee-bm__item--current > .alee-bm__icon,
.alee-bm--anim-lift .alee-bm__item--current .alee-bm__btn .alee-bm__icon {
	transform: translateY(-2px) scale(1.20);
}

@media (hover: hover) and (pointer: fine) {
	.alee-bm--anim-lift .alee-bm__item:hover .alee-bm__icon,
	.alee-bm--anim-lift .alee-bm__btn:hover .alee-bm__icon {
		transform: translateY(-2px) scale(1.20);
	}
}


@keyframes abm-action-pulse {
	0%   { transform: scale(1); }
	55%  { transform: scale(1.20); }
	100% { transform: scale(1); }
}

.alee-bm--anim-pulse .alee-bm__item:active .alee-bm__icon,
.alee-bm--anim-pulse .alee-bm__btn:active .alee-bm__icon,
.alee-bm--anim-pulse .alee-bm__btn[aria-expanded="true"] .alee-bm__icon,
.alee-bm--anim-pulse .alee-bm__dropdown.abm-is-open .alee-bm__btn .alee-bm__icon,
.alee-bm--anim-pulse .alee-bm__item--current > .alee-bm__icon,
.alee-bm--anim-pulse .alee-bm__item--current .alee-bm__btn .alee-bm__icon {
	animation: abm-action-pulse 0.42s var(--abm-ease) 1;
}

@media (hover: hover) and (pointer: fine) {
	.alee-bm--anim-pulse .alee-bm__item:hover .alee-bm__icon,
	.alee-bm--anim-pulse .alee-bm__btn:hover .alee-bm__icon {
		animation: abm-action-pulse 0.42s var(--abm-ease) 1;
	}
}

.alee-bm--anim-none .alee-bm__icon {
	transform: none !important;
	animation: none !important;
}

/* ──────────────────────────────────────────────────────────────
   Defensive guards — NO wrapper background on any button/wrap
   in any state. `!important` defeats theme/parent CSS that may
   inject `:focus`, `:active`, `[aria-expanded="true"]`, or
   `.abm-is-open` background overlays. Focus-ring is re-added
   below so keyboard a11y stays intact.
   ────────────────────────────────────────────────────────────── */
.alee-bm__btn,
.alee-bm__btn:hover,
.alee-bm__btn:focus,
.alee-bm__btn:active,
.alee-bm__btn[aria-expanded="true"],
.alee-bm__item,
.alee-bm__item:hover,
.alee-bm__item:focus,
.alee-bm__item:active,
.alee-bm__link,
.alee-bm__dropdown,
.alee-bm__dropdown.abm-is-open,
.alee-bm__dropdown.abm-is-open .alee-bm__btn,
.alee-bm__item--current,
.alee-bm__item--current .alee-bm__btn {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

/* Re-add the keyboard focus ring (only fires for non-touch focus). */
.alee-bm__item:focus-visible,
.alee-bm__btn:focus-visible {
	outline: none;
	box-shadow: var(--abm-focus-ring) !important;
}

.alee-bm__item--pulse .alee-bm__icon::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	opacity: 0.7;
	z-index: -1;
	animation: abm-pulse 1.8s ease-out infinite;
}
.alee-bm__item--brand.alee-bm__item--pulse .alee-bm__icon::before {
	background: var(--btn-color, var(--abm-primary));
}

@keyframes abm-pulse {
	0%   { transform: scale(1); opacity: 0.7; }
	70%  { transform: scale(1.6); opacity: 0; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* Badge */
.alee-bm__badge {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: #ef4444;
	color: #fff;
	border: 2px solid var(--abm-bar-bg);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	line-height: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Dropdown menu */
.alee-bm__dropdown {
	position: relative;
	padding: 0; /* keep dropdown buttons on the same bar-height contract as links */
}

.alee-bm__menu {
	position: fixed;
	left: var(--abm-menu-left, 50%);
	bottom: var(--abm-menu-bottom, calc(var(--abm-bar-height, 60px) + 14px + env(safe-area-inset-bottom, 0px)));
	transform: translateX(-50%) translateY(8px);
	width: min(90vw, var(--abm-menu-width, 320px));
	max-width: calc(100vw - 20px);
	max-height: min(60vh, 420px);
	overflow-y: auto;
	background: var(--abm-bar-bg);
	color: var(--abm-text);
	border: 1px solid var(--abm-border);
	border-radius: var(--abm-radius);
	box-shadow: var(--abm-shadow-menu);
	padding: 6px 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	will-change: opacity, transform;
	transition: opacity var(--abm-transition), transform var(--abm-transition), visibility var(--abm-transition);
	z-index: calc(var(--abm-z) + 10);
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.alee-bm__dropdown.abm-is-open .alee-bm__menu,
.alee-bm__menu[data-open="true"] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.alee-bm__menu a {
	display: block;
	padding: 12px 16px;
	font-size: 14px;
	color: var(--abm-text);
	text-decoration: none;
	border-bottom: 1px solid var(--abm-border);
	min-height: 48px;            /* iOS HIG / Material tap target */
	box-sizing: border-box;
	transition: background 0.12s ease;
}

.alee-bm__menu a:last-child { border-bottom: none; }

.alee-bm__menu a:hover,
.alee-bm__menu a:focus-visible {
	background: rgba(0, 0, 0, 0.05);
	outline: none;
}

/* Body padding so content isn't covered */
body.has-alee-bm--active {
	padding-bottom: calc(var(--abm-base-body-padding, 0px) + var(--abm-body-offset, 0px));
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.alee-bm,
	.alee-bm *,
	.alee-bm__menu {
		transition: none !important;
		animation: none !important;
	}
}

/* Print: hide */
@media print {
	.alee-bm { display: none !important; }
}