/* ======================================
   MG LEADBUILDER 2025 – SIMPLIFIED UTILITIES
   Keep-only: shadow, radius, and essential a11y
   Elementor handles layout/structure, spacing is in spacing tab
   
   NAMING CONVENTION: All classes use mg- prefix for proper namespacing
   All classes match the Design System Wiki documentation
   ====================================== */
@layer utilities {
	/* ---- Shadow Effects ---- */
	:where(.mg-shadow-sm) {
		box-shadow: var(--mg-shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
	}
	
	:where(.mg-shadow-md) {
		box-shadow: var(--mg-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06));
	}
	
	:where(.mg-shadow-lg) {
		box-shadow: var(--mg-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05));
	}
	
	:where(.mg-shadow-xl) {
		box-shadow: var(--mg-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04));
	}
	
	/* ---- Border Radius (responsive) ---- */
	:where(.mg-radius-sm) {
		border-radius: clamp(.1875rem, .3vw, .25rem);
	}
	
	:where(.mg-radius-md) {
		border-radius: clamp(.375rem, .5vw, .5rem);
	}
	
	:where(.mg-radius-lg) {
		border-radius: clamp(.625rem, .8vw, .75rem);
	}
	
	:where(.mg-radius-xl) {
		border-radius: clamp(.875rem, 1vw, 1rem);
	}
}

/* End simplified utilities */

/* ---- List Bullet Styles ---- */

/* Accent-colored circular bullet points */

/* Scoped outside @layer for proper specificity - removed :where() for higher specificity */
body.mg-design-system .mg-list-bullet-accent, body.mg-design-system ul.mg-list-bullet-accent, body.mg-design-system ol.mg-list-bullet-accent, body.mg-design-system .mg-list-bullet-list-accent, body.mg-design-system ul.mg-list-bullet-list-accent, body.mg-design-system ol.mg-list-bullet-list-accent {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

body.mg-design-system .mg-list-bullet-accent li, body.mg-design-system ul.mg-list-bullet-accent li, body.mg-design-system ol.mg-list-bullet-accent li, body.mg-design-system .mg-list-bullet-list-accent li, body.mg-design-system ul.mg-list-bullet-list-accent li, body.mg-design-system ol.mg-list-bullet-list-accent li {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
	position: relative !important;
	padding-left: 1.5em !important;
	margin-left: 0 !important;
}

/* Hide the default ::marker pseudo-element completely */
body.mg-design-system .mg-list-bullet-accent li::marker, body.mg-design-system ul.mg-list-bullet-accent li::marker, body.mg-design-system ol.mg-list-bullet-accent li::marker, body.mg-design-system .mg-list-bullet-list-accent li::marker, body.mg-design-system ul.mg-list-bullet-list-accent li::marker, body.mg-design-system ol.mg-list-bullet-list-accent li::marker {
	content: "" !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	font-size: 0 !important;
}

/* Add custom accent-colored bullet with ::before */

/* Use Elementor's global accent color first, then fallback to design system accent */
body.mg-design-system .mg-list-bullet-accent li::before, body.mg-design-system ul.mg-list-bullet-accent li::before, body.mg-design-system ol.mg-list-bullet-accent li::before, body.mg-design-system .mg-list-bullet-list-accent li::before, body.mg-design-system ul.mg-list-bullet-list-accent li::before, body.mg-design-system ol.mg-list-bullet-list-accent li::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: .5em !important;
	width: .5em !important;
	height: .5em !important;
	background-color: var(--e-global-color-accent, var(--mg-color-accent)) !important;
	border-radius: 50% !important;
	display: inline-block !important;
	margin-right: .5em !important;
}