/* Mega menu / categories button styles
 * 1 Classic (default) · 2 Pill · 3 Outline · 4 Icon chip · 5 Underline · 6 Soft card
 */

.cats-list-title,
.header-mega-menu-btn,
.mg-cat-title {
	--mm-btn-bg: var(--ahura-mm-btn-bg, #1d67e8);
	--mm-btn-color: var(--ahura-mm-btn-color, #ffffff);
}

.cats-list-title[class*="mm-btn-style-"],
.header-mega-menu-btn[class*="mm-btn-style-"],
.mg-cat-title[class*="mm-btn-style-"] {
	position: relative;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, border-radius .2s ease, transform .2s ease;
}

/* Style 1 — Classic: theme default (solid + top rounded) — no override */

/* Style 2 — Pill: full capsule */
.cats-list-title.mm-btn-style-2,
.header-mega-menu-btn.mm-btn-style-2,
.mg-cat-title.mm-btn-style-2 {
	background-color: var(--mm-btn-bg) !important;
	color: var(--mm-btn-color) !important;
	border-radius: 999px !important;
	border: none !important;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--mm-btn-bg) 35%, transparent);
	margin-top: 12px;
	margin-bottom: 10px;
}

.header-mega-menu-btn.mm-btn-style-2 {
	margin-top: 0;
	padding-inline: 18px;
}

.cats-list-title.mm-btn-style-2:hover,
.header-mega-menu-btn.mm-btn-style-2:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px color-mix(in srgb, var(--mm-btn-bg) 42%, transparent);
}

/* Style 3 — Outline: white frame, colored border/text */
.cats-list-title.mm-btn-style-3,
.header-mega-menu-btn.mm-btn-style-3,
.mg-cat-title.mm-btn-style-3 {
	background-color: #fff !important;
	color: var(--mm-btn-bg) !important;
	border: 2px solid var(--mm-btn-bg) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	margin-top: 12px;
	margin-bottom: 10px;
}

.header-mega-menu-btn.mm-btn-style-3 {
	margin-top: 0;
}

.cats-list-title.mm-btn-style-3 .ah-theme-icon,
.cats-list-title.mm-btn-style-3 .ah-isax,
.cats-list-title.mm-btn-style-3 .mega-menu-btn-text,
.header-mega-menu-btn.mm-btn-style-3 .ah-theme-icon,
.header-mega-menu-btn.mm-btn-style-3 .ah-isax,
.header-mega-menu-btn.mm-btn-style-3 .mega-menu-btn-text,
.mg-cat-title.mm-btn-style-3 .ah-theme-icon,
.mg-cat-title.mm-btn-style-3 .ah-isax,
.mg-cat-title.mm-btn-style-3 .mega-menu-btn-text {
	color: var(--mm-btn-bg) !important;
}

.cats-list-title.mm-btn-style-3:hover,
.header-mega-menu-btn.mm-btn-style-3:hover {
	background-color: color-mix(in srgb, var(--mm-btn-bg) 8%, #fff) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mm-btn-bg) 12%, transparent);
}

/* Style 4 — Icon chip: icon in its own block */
.cats-list-title.mm-btn-style-4,
.header-mega-menu-btn.mm-btn-style-4,
.mg-cat-title.mm-btn-style-4 {
	background-color: var(--mm-btn-bg) !important;
	color: var(--mm-btn-color) !important;
	border-radius: 12px !important;
	border: none !important;
	justify-content: flex-start !important;
	gap: 0.75em !important;
	padding-inline: 8px 16px !important;
	box-shadow: none !important;
	margin-top: 12px;
	margin-bottom: 10px;
	overflow: hidden;
}

.header-mega-menu-btn.mm-btn-style-4 {
	margin-top: 0;
	height: auto;
	min-height: 45px;
}

.cats-list-title.mm-btn-style-4 .ah-theme-icon,
.cats-list-title.mm-btn-style-4 .ah-isax,
.header-mega-menu-btn.mm-btn-style-4 .ah-theme-icon,
.header-mega-menu-btn.mm-btn-style-4 .ah-isax,
.mg-cat-title.mm-btn-style-4 .ah-theme-icon,
.mg-cat-title.mm-btn-style-4 .ah-isax {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 2.1em;
	height: 2.1em;
	border-radius: 8px;
	background-color: color-mix(in srgb, #000 18%, var(--mm-btn-bg));
	color: var(--mm-btn-color) !important;
	flex-shrink: 0;
}

.cats-list-title.mm-btn-style-4:hover .ah-theme-icon,
.cats-list-title.mm-btn-style-4:hover .ah-isax,
.header-mega-menu-btn.mm-btn-style-4:hover .ah-theme-icon,
.header-mega-menu-btn.mm-btn-style-4:hover .ah-isax {
	background-color: color-mix(in srgb, #000 28%, var(--mm-btn-bg));
}

/* Style 5 — Underline: no fill, accent bottom line */
.cats-list-title.mm-btn-style-5,
.header-mega-menu-btn.mm-btn-style-5,
.mg-cat-title.mm-btn-style-5 {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--mm-btn-bg) !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: inset 0 -3px 0 var(--mm-btn-bg) !important;
	margin-top: 12px;
	margin-bottom: 10px;
	font-weight: 700;
}

.header-mega-menu-btn.mm-btn-style-5 {
	margin-top: 0;
	padding-inline: 6px;
}

.cats-list-title.mm-btn-style-5 .ah-theme-icon,
.cats-list-title.mm-btn-style-5 .ah-isax,
.cats-list-title.mm-btn-style-5 .mega-menu-btn-text,
.header-mega-menu-btn.mm-btn-style-5 .ah-theme-icon,
.header-mega-menu-btn.mm-btn-style-5 .ah-isax,
.header-mega-menu-btn.mm-btn-style-5 .mega-menu-btn-text,
.mg-cat-title.mm-btn-style-5 .ah-theme-icon,
.mg-cat-title.mm-btn-style-5 .ah-isax,
.mg-cat-title.mm-btn-style-5 .mega-menu-btn-text {
	color: var(--mm-btn-bg) !important;
}

.cats-list-title.mm-btn-style-5:hover,
.header-mega-menu-btn.mm-btn-style-5:hover {
	background-color: color-mix(in srgb, var(--mm-btn-bg) 6%, transparent) !important;
	box-shadow: inset 0 -3px 0 var(--mm-btn-bg) !important;
}

/* Style 6 — Soft card: light tint + colored text + soft shadow */
.cats-list-title.mm-btn-style-6,
.header-mega-menu-btn.mm-btn-style-6,
.mg-cat-title.mm-btn-style-6 {
	background-color: color-mix(in srgb, var(--mm-btn-bg) 14%, #fff) !important;
	color: var(--mm-btn-bg) !important;
	border: 1px solid color-mix(in srgb, var(--mm-btn-bg) 22%, transparent) !important;
	border-radius: 14px !important;
	box-shadow: 0 8px 20px color-mix(in srgb, var(--mm-btn-bg) 14%, transparent);
	margin-top: 12px;
	margin-bottom: 10px;
	font-weight: 700;
}

.header-mega-menu-btn.mm-btn-style-6 {
	margin-top: 0;
	padding-inline: 16px;
}

.cats-list-title.mm-btn-style-6 .ah-theme-icon,
.cats-list-title.mm-btn-style-6 .ah-isax,
.cats-list-title.mm-btn-style-6 .mega-menu-btn-text,
.header-mega-menu-btn.mm-btn-style-6 .ah-theme-icon,
.header-mega-menu-btn.mm-btn-style-6 .ah-isax,
.header-mega-menu-btn.mm-btn-style-6 .mega-menu-btn-text,
.mg-cat-title.mm-btn-style-6 .ah-theme-icon,
.mg-cat-title.mm-btn-style-6 .ah-isax,
.mg-cat-title.mm-btn-style-6 .mega-menu-btn-text {
	color: var(--mm-btn-bg) !important;
}

.cats-list-title.mm-btn-style-6:hover,
.header-mega-menu-btn.mm-btn-style-6:hover {
	background-color: color-mix(in srgb, var(--mm-btn-bg) 20%, #fff) !important;
	transform: translateY(-1px);
	box-shadow: 0 12px 26px color-mix(in srgb, var(--mm-btn-bg) 20%, transparent);
}

@supports not (background: color-mix(in srgb, #000 50%, transparent)) {
	.cats-list-title.mm-btn-style-2,
	.header-mega-menu-btn.mm-btn-style-2 {
		box-shadow: 0 6px 18px rgba(29, 103, 232, 0.35);
	}
	.cats-list-title.mm-btn-style-3:hover,
	.header-mega-menu-btn.mm-btn-style-3:hover {
		background-color: #f3f7fe !important;
		box-shadow: 0 0 0 3px rgba(29, 103, 232, 0.12);
	}
	.cats-list-title.mm-btn-style-4 .ah-theme-icon,
	.cats-list-title.mm-btn-style-4 .ah-isax,
	.header-mega-menu-btn.mm-btn-style-4 .ah-theme-icon,
	.header-mega-menu-btn.mm-btn-style-4 .ah-isax {
		background-color: rgba(0, 0, 0, 0.18);
	}
	.cats-list-title.mm-btn-style-5:hover,
	.header-mega-menu-btn.mm-btn-style-5:hover {
		background-color: rgba(29, 103, 232, 0.06) !important;
	}
	.cats-list-title.mm-btn-style-6,
	.header-mega-menu-btn.mm-btn-style-6 {
		background-color: #e8f0fd !important;
		border-color: #c5d8f7 !important;
		box-shadow: 0 8px 20px rgba(29, 103, 232, 0.14);
	}
}