/**
 * Mobile App Bar — distinct style presets.
 */

/* ----- Classic ----- */
.tekton-app-bar-style-classic.tekton-mobile-app-bar {
	border-top: 1px solid var(--app-bar-border, #e2e8f0);
}

/* ----- Minimal (flat bar) ----- */
.tekton-app-bar-style-minimal {
	--tekton-app-bar-shadow: none;
}

.tekton-app-bar-style-minimal.tekton-mobile-app-bar {
	border-top: 2px solid var(--app-bar-border, #cbd5e1) !important;
	box-shadow: none !important;
	background: var(--app-bar-bg, #fff) !important;
}

.tekton-app-bar-style-minimal .tekton-app-icon {
	opacity: 0.65;
	font-size: 10px;
}

.tekton-app-bar-style-minimal .tekton-app-icon.active {
	opacity: 1;
	font-weight: 800;
	letter-spacing: 0.02em;
}

/* ----- Compact (short gray strip) ----- */
.tekton-app-bar-style-compact.tekton-mobile-app-bar {
	background: color-mix(in srgb, var(--app-bar-bg, #fff) 92%, #64748b 8%) !important;
	border-top: none !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

@supports not (background: color-mix(in srgb, white 50%, transparent)) {
	.tekton-app-bar-style-compact.tekton-mobile-app-bar {
		background: #f1f5f9 !important;
	}
}

.tekton-app-bar-style-compact .tekton-app-icon {
	font-size: 9px;
	gap: 2px;
}

.tekton-app-bar-style-compact .tekton-app-icon.active {
	transform: scale(1.08);
}

/* ----- Rounded top (card lip) ----- */
.tekton-app-bar-style-rounded.tekton-mobile-app-bar {
	border-top: none !important;
	overflow: hidden;
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12) !important;
}

/* ----- Floating pill ----- */
.tekton-app-bar-style-floating.tekton-mobile-app-bar {
	inset-inline: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: min(420px, calc(100% - 28px)) !important;
	max-width: min(420px, calc(100% - 28px)) !important;
	margin-inline: auto !important;
	border: 1px solid var(--app-bar-border, rgba(0, 0, 0, 0.08)) !important;
	border-top: 1px solid var(--app-bar-border, rgba(0, 0, 0, 0.08)) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22) !important;
	background: var(--app-bar-bg, #fff) !important;
}

.tekton-app-bar-style-floating .tekton-app-icon.active {
	color: #fff !important;
	background: var(--app-bar-active, #0274be) !important;
	border-radius: 14px;
	margin: 2px 4px;
	padding: 4px 2px;
	min-height: auto;
}

.tekton-app-bar-style-floating .tekton-app-icon.active span:not(.tekton-cart-count) {
	color: inherit;
}

/* ----- Icons only ----- */
.tekton-app-bar-style-icons.tekton-mobile-app-bar {
	background: var(--app-bar-bg, #1a1a1a) !important;
	border-top: none !important;
}

.tekton-app-bar-style-icons .tekton-app-icon {
	color: rgba(255, 255, 255, 0.55);
}

.tekton-app-bar-style-icons .tekton-app-icon > span:not(.tekton-cart-count):not(.tekton-emoji-icon):not([class*='dashicons']) {
	display: none !important;
}

.tekton-app-bar-style-icons .tekton-app-icon {
	gap: 0;
}

.tekton-app-bar-style-icons .tekton-app-icon.active {
	color: #fff !important;
}

/* ----- Elevated (lifted shadow) ----- */
.tekton-app-bar-style-elevated.tekton-mobile-app-bar {
	border-top: none !important;
	margin-top: -6px;
	box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.2), 0 -2px 0 var(--app-bar-active, #0274be) inset !important;
}

.tekton-app-bar-style-elevated .tekton-app-icon.active {
	transform: translateY(-1px);
}

/* ----- Outline (glass + accent line) ----- */
.tekton-app-bar-style-outline.tekton-mobile-app-bar {
	background: color-mix(in srgb, var(--app-bar-bg, #fff) 75%, transparent) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 3px solid var(--app-bar-active, #0274be) !important;
	box-shadow: none !important;
}

@supports not (background: color-mix(in srgb, white 50%, transparent)) {
	.tekton-app-bar-style-outline.tekton-mobile-app-bar {
		background: rgba(255, 255, 255, 0.88) !important;
	}
}

.tekton-app-bar-style-outline .tekton-app-icon {
	font-weight: 600;
}

/* ----- Bubble active ----- */
.tekton-app-bar-style-bubble .tekton-app-icon {
	opacity: 0.55;
}

.tekton-app-bar-style-bubble .tekton-app-icon.active {
	opacity: 1;
	background: color-mix(in srgb, var(--app-bar-active, #0274be) 18%, transparent);
	border-radius: 16px;
	margin: 5px 3px;
	padding: 6px 4px;
	align-self: center;
	min-height: auto;
	transform: scale(1.05);
}

@supports not (background: color-mix(in srgb, white 50%, transparent)) {
	.tekton-app-bar-style-bubble .tekton-app-icon.active {
		background: rgba(2, 116, 190, 0.15);
	}
}

/* ----- Underline active ----- */
.tekton-app-bar-style-underline .tekton-app-icon:not(.active) {
	opacity: 0.45;
}

.tekton-app-bar-style-underline .tekton-app-icon.active::after {
	content: "";
	position: absolute;
	top: 0;
	left: 15%;
	right: 15%;
	height: 4px;
	border-radius: 0 0 4px 4px;
	background: var(--app-bar-active, #0274be);
}

.tekton-app-bar-style-underline .tekton-app-icon.active {
	opacity: 1;
	font-weight: 800;
	font-size: 12px;
}

/* Icon sizing from CSS variables */
.tekton-mobile-app-bar .tekton-app-icon i,
.tekton-mobile-app-bar .tekton-app-icon span[class*='dashicons'],
.tekton-mobile-app-bar .tekton-app-icon .tekton-emoji-icon {
	font-size: var(--tekton-app-bar-icon-size, 24px);
	width: calc(var(--tekton-app-bar-icon-size, 24px) + 4px);
	height: calc(var(--tekton-app-bar-icon-size, 24px) + 4px);
	min-width: calc(var(--tekton-app-bar-icon-size, 24px) + 4px);
	min-height: calc(var(--tekton-app-bar-icon-size, 24px) + 4px);
}