/**
 * EDD Menu Cart - Public Styles
 *
 * All classes are prefixed with `emc-` to prevent conflicts.
 * All static styles are defined here. Dynamic colors are added via wp_add_inline_style().
 *
 * @version 1.3.0
 */

/* Main container for the cart item */
.emc-item {
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	padding: 0;
	list-style: none; /* In case it's appended to a UL */
}

/* Ensure visibility in themes that might hide new elements */
.emc-item {
	visibility: visible !important;
	opacity: 1 !important;
}

/* The link wrapping the icon */
.emc-link {
	display: inline-flex;
	align-items: center;
	padding: 0 10px; /* Provides some spacing */
	text-decoration: none;
	color: inherit;
	position: relative;
}

.emc-link:hover {
	text-decoration: none;
	opacity: 0.8;
}

/* Wrapper for the icon and bubble, used for positioning */
.emc-icon-wrap {
	position: relative;
	display: inline-block;
	line-height: 1;
}

/* The SVG icon */
.emc-icon {
	width: 22px;
	height: 22px;
	display: inline-block;
	vertical-align: middle;
	transition: color 0.2s ease;
}

/* The bubble showing the item count */
.emc-bubble {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 18px;
	height: 18px;
	display: flex; /* Centering content */
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 11px;
	font-weight: bold;
	line-height: 1;
	border-radius: 50%;
	padding: 0 3px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	z-index: 10;
	transition: transform 0.2s ease, opacity 0.2s ease;
	transform: scale(0); /* Hidden by default */
	opacity: 0;
}

/* Show the bubble when there are items in the cart */
.emc-item[data-quantity]:not([data-quantity="0"]) .emc-bubble {
	transform: scale(1);
	opacity: 1;
}

/* Fix for menus that use flexbox, ensures our item aligns correctly */
.menu,
ul.menu,
.nav-menu,
.primary-menu,
.main-navigation ul {
	display: flex;
	align-items: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.emc-icon {
		width: 24px;
		height: 24px;
	}

	.emc-bubble {
		font-size: 10px;
		min-width: 16px;
		height: 16px;
		top: -6px;
		right: -8px;
	}
}