/**

 * Hybrid icon system — wrapper / bay presentation only.

 *

 * Artwork lives in assets/icons/*.svg — never draw icons with CSS.

 * Scope to .mrc-icon-bay so Material UI glyphs (.mrc-icon--material) stay untouched.

 */



:root {

	--mrc-icon-bay-bg: rgba(199, 154, 59, 0.08);

	--mrc-icon-bay-border: rgba(199, 154, 59, 0.22);

	--mrc-icon-bay-fg: #f1e8cd;

	--mrc-icon-bay-bg-hover: rgba(199, 154, 59, 0.14);

	--mrc-icon-bay-border-hover: rgba(199, 154, 59, 0.45);

	--mrc-icon-bay-bg-active: rgba(199, 154, 59, 0.18);

	--mrc-icon-ease: cubic-bezier(0.23, 1, 0.32, 1);

}



.mrc-icon-bay {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	flex: 0 0 auto;

	width: 32px;

	height: 32px;

	padding: 0;

	border-radius: 999px;

	background: var(--mrc-icon-bay-bg);

	border: 1px solid var(--mrc-icon-bay-border);

	box-sizing: border-box;

	overflow: hidden;

	color: var(--mrc-icon-bay-fg);

	line-height: 0;

	transition:

		background-color 150ms var(--mrc-icon-ease),

		border-color 150ms var(--mrc-icon-ease),

		color 150ms var(--mrc-icon-ease),

		transform 150ms var(--mrc-icon-ease);

}



.mrc-icon-bay--20 {

	width: 20px;

	height: 20px;

}



.mrc-icon-bay--28 {

	width: 28px;

	height: 28px;

}



.mrc-icon-bay--32 {

	width: 32px;

	height: 32px;

}



.mrc-icon-bay svg,

.mrc-icon-bay .mrc-icon__svg {

	display: block;

	width: auto;

	height: auto;

	max-width: 100%;

	max-height: 100%;

	flex: 0 0 auto;

}



.mrc-icon-bay .mrc-icon__img,

.mrc-icon-bay img {

	display: block;

	width: auto !important;

	height: auto !important;

	max-width: 100% !important;

	max-height: 100% !important;

	object-fit: contain;

	object-position: center;

	border-radius: 0;

}



.mrc-icon-bay--entity,

.mrc-icon-bay--flag {

	padding: 4px;

}



.mrc-icon-bay--20.mrc-icon-bay--entity,

.mrc-icon-bay--20.mrc-icon-bay--flag {

	padding: 2px;

}



.mrc-icon-bay--entity {

	background: rgba(255, 255, 255, 0.06);

	border-color: rgba(255, 255, 255, 0.1);

}



.mrc-icon-bay--flag {

	background: rgba(255, 255, 255, 0.04);

	border-color: rgba(199, 154, 59, 0.2);

}



.mrc-icon-bay.is-hover,

a:hover .mrc-icon-bay,

button:hover .mrc-icon-bay {

	background: var(--mrc-icon-bay-bg-hover);

	border-color: var(--mrc-icon-bay-border-hover);

}



.mrc-icon-bay.is-active,

a:active .mrc-icon-bay,

button:active .mrc-icon-bay {

	background: var(--mrc-icon-bay-bg-active);

	border-color: var(--mrc-icon-bay-border-hover);

	transform: scale(0.96);

}



@media (prefers-reduced-motion: reduce) {

	.mrc-icon-bay {

		transition: none;

	}



	.mrc-icon-bay.is-active,

	a:active .mrc-icon-bay,

	button:active .mrc-icon-bay {

		transform: none;

	}

}

/* Inline UI icons (outside mega-menu bay) — presentation only */
.mrc-ui-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
	color: inherit;
}

.mrc-ui-icon__svg {
	display: block;
	width: 1em;
	height: 1em;
	max-width: 100%;
	max-height: 100%;
	color: inherit;
}

.mrc-ui-icon--xs { width: 14px; height: 14px; font-size: 14px; }
.mrc-ui-icon--sm { width: 18px; height: 18px; font-size: 18px; }
.mrc-ui-icon--md { width: 20px; height: 20px; font-size: 20px; }
.mrc-ui-icon--lg { width: 24px; height: 24px; font-size: 24px; }

.mrc-ui-icon--xs .mrc-ui-icon__svg,
.mrc-ui-icon--xs svg { width: 14px; height: 14px; }
.mrc-ui-icon--sm .mrc-ui-icon__svg,
.mrc-ui-icon--sm svg { width: 18px; height: 18px; }
.mrc-ui-icon--md .mrc-ui-icon__svg,
.mrc-ui-icon--md svg { width: 20px; height: 20px; }
.mrc-ui-icon--lg .mrc-ui-icon__svg,
.mrc-ui-icon--lg svg { width: 24px; height: 24px; }