/* Mobile Bottom Nav - by default hidden on desktop */
.mbn-bottom-nav {
	display: none;
}

/* শুধু মোবাইল স্ক্রিনে (782px বা কম) দেখাবে */
@media screen and (max-width: 782px) {
	body {
		padding-bottom: 62px; /* nav bar এর জন্য জায়গা রাখা */
	}

	.mbn-bottom-nav {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999999;
		background: var(--mbn-bg, #ffffff);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
		border-top: 1px solid rgba(0, 0, 0, 0.06);
	}

	.mbn-bottom-nav .mbn-item {
		position: relative;
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		color: var(--mbn-icon, #555555);
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
		gap: 2px;
		padding: 6px 2px;
		border-radius: 12px;
		-webkit-tap-highlight-color: transparent; /* ব্রাউজারের ডিফল্ট নীল ফ্ল্যাশ বন্ধ */
		outline: none;
		-webkit-user-select: none;
		user-select: none;
		transition: color 0.18s ease, transform 0.12s ease, background-color 0.18s ease;
	}

	/* সব বাটনে একই রকম tap/click animation — press করলে scale + background + color একসাথে বদলাবে */
	.mbn-bottom-nav .mbn-item:active,
	.mbn-bottom-nav .mbn-item.mbn-tap {
		transform: scale(0.92);
		color: var(--mbn-active, #7f54b3);
		background-color: color-mix(in srgb, var(--mbn-active, #7f54b3) 12%, transparent);
	}

	/* color-mix সাপোর্ট না থাকা ব্রাউজারের জন্য fallback */
	@supports not (background-color: color-mix(in srgb, red 10%, transparent)) {
		.mbn-bottom-nav .mbn-item:active,
		.mbn-bottom-nav .mbn-item.mbn-tap {
			background-color: rgba(127, 84, 179, 0.12);
		}
	}

	.mbn-bottom-nav .mbn-item:active .dashicons,
	.mbn-bottom-nav .mbn-item.mbn-tap .dashicons {
		animation: mbn-pop 0.28s ease;
	}

	@keyframes mbn-pop {
		0%   { transform: scale(1); }
		40%  { transform: scale(1.25); }
		100% { transform: scale(1); }
	}

	.mbn-bottom-nav .mbn-item.mbn-active {
		color: var(--mbn-active, #7f54b3);
	}

	.mbn-bottom-nav .mbn-icon-wrap {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
	}

	.mbn-bottom-nav .dashicons {
		width: 22px;
		height: 22px;
		font-size: 22px;
	}

	.mbn-bottom-nav .mbn-label {
		font-size: 11px;
		line-height: 1;
		white-space: nowrap;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mbn-bottom-nav .mbn-badge {
		position: absolute;
		top: -6px;
		right: -10px;
		min-width: 15px;
		height: 15px;
		padding: 0 3px;
		border-radius: 999px;
		background: #e63946;
		color: #fff;
		font-size: 10px;
		line-height: 15px;
		text-align: center;
		font-weight: 600;
	}
}

/* খুব ছোট স্ক্রিনে (360px এর কম) আইকন সামান্য ছোট */
@media screen and (max-width: 360px) {
	.mbn-bottom-nav .dashicons {
		width: 20px;
		height: 20px;
		font-size: 20px;
	}
	.mbn-bottom-nav .mbn-label {
		font-size: 10px;
	}
}