/**
 * MG Design System - Gap Utility Classes
 * 
 * T-shirt sized gap utilities that ALWAYS override Designer Controls
 * 
 * Available Classes:
 * - mg-gap-* or mg-row-gap-* = Control vertical spacing (row gaps)
 * - mg-col-gap-* = Control horizontal spacing (column gaps)
 * - mg-no-gap = Remove all gaps
 * - mg-no-padding = Remove all padding
 * 
 * Sizes: none, xxs, xs, s, m, l, xl, xxl
 * 
 * Usage: Add class to any Elementor container
 * Example: Add "mg-gap-s" for 12px row gap
 * 
 * @package MG_Leadbuilder_2025
 */

/* =========================
   UNIVERSAL GAP UTILITIES (Both row AND column gaps)
   Use mg-gap-* when you want the same spacing in both directions
   ========================= */

.mg-gap-none,
.mg-gap-none .e-con-inner {
  --row-gap: 0 !important;
  --column-gap: 0 !important;
  --widgets-spacing-row: 0 !important;
  --widgets-spacing-column: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  gap: 0 !important;
}

.mg-gap-xxs,
.mg-gap-xxs .e-con-inner {
  --row-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  --column-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  --widgets-spacing-row: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  --widgets-spacing-column: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  row-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  column-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
}

.mg-gap-xs,
.mg-gap-xs .e-con-inner {
  --row-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --column-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --widgets-spacing-row: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --widgets-spacing-column: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  row-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  column-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
}

.mg-gap-s,
.mg-gap-s .e-con-inner {
  --row-gap: clamp(0.75rem, 1vw, 1rem) !important;
  --column-gap: clamp(0.75rem, 1vw, 1rem) !important;
  --widgets-spacing-row: clamp(0.75rem, 1vw, 1rem) !important;
  --widgets-spacing-column: clamp(0.75rem, 1vw, 1rem) !important;
  row-gap: clamp(0.75rem, 1vw, 1rem) !important;
  column-gap: clamp(0.75rem, 1vw, 1rem) !important;
}

.mg-gap-m,
.mg-gap-m .e-con-inner {
  --row-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
  --column-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
  --widgets-spacing-row: clamp(1rem, 1.25vw, 1.25rem) !important;
  --widgets-spacing-column: clamp(1rem, 1.25vw, 1.25rem) !important;
  row-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
  column-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
}

.mg-gap-l,
.mg-gap-l .e-con-inner {
  --row-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  --column-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  --widgets-spacing-row: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  --widgets-spacing-column: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  row-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  column-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
}

.mg-gap-xl,
.mg-gap-xl .e-con-inner {
  --row-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
  --column-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
  --widgets-spacing-row: clamp(1.5rem, 2vw, 2.5rem) !important;
  --widgets-spacing-column: clamp(1.5rem, 2vw, 2.5rem) !important;
  row-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
  column-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
}

.mg-gap-xxl,
.mg-gap-xxl .e-con-inner {
  --row-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
  --column-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
  --widgets-spacing-row: clamp(2rem, 2.5vw, 3.5rem) !important;
  --widgets-spacing-column: clamp(2rem, 2.5vw, 3.5rem) !important;
  row-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
  column-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
}

/* =========================
   ROW GAP UTILITIES (Vertical spacing ONLY)
   Use mg-row-gap-* when you want different row vs column spacing
   ========================= */

.mg-row-gap-none,
.mg-row-gap-none .e-con-inner {
  --row-gap: 0 !important;
  --widgets-spacing-row: 0 !important;
  row-gap: 0 !important;
}

.mg-row-gap-xxs,
.mg-row-gap-xxs .e-con-inner {
  --row-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  --widgets-spacing-row: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  row-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
}

.mg-row-gap-xs,
.mg-row-gap-xs .e-con-inner {
  --row-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --widgets-spacing-row: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  row-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
}

.mg-row-gap-s,
.mg-row-gap-s .e-con-inner {
  --row-gap: clamp(0.75rem, 1vw, 1rem) !important;
  --widgets-spacing-row: clamp(0.75rem, 1vw, 1rem) !important;
  row-gap: clamp(0.75rem, 1vw, 1rem) !important;
}

.mg-row-gap-m,
.mg-row-gap-m .e-con-inner {
  --row-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
  --widgets-spacing-row: clamp(1rem, 1.25vw, 1.25rem) !important;
  row-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
}

.mg-row-gap-l,
.mg-row-gap-l .e-con-inner {
  --row-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  --widgets-spacing-row: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  row-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
}

.mg-row-gap-xl,
.mg-row-gap-xl .e-con-inner {
  --row-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
  --widgets-spacing-row: clamp(1.5rem, 2vw, 2.5rem) !important;
  row-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
}

.mg-row-gap-xxl,
.mg-row-gap-xxl .e-con-inner {
  --row-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
  --widgets-spacing-row: clamp(2rem, 2.5vw, 3.5rem) !important;
  row-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
}

/* =========================
   COLUMN GAP UTILITIES (Horizontal spacing between columns)
   ========================= */

.mg-col-gap-none,
.mg-col-gap-none .e-con-inner {
  --column-gap: 0 !important;
  --widgets-spacing-column: 0 !important;
  column-gap: 0 !important;
}

.mg-col-gap-xxs,
.mg-col-gap-xxs .e-con-inner {
  --column-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  --widgets-spacing-column: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  column-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
}

.mg-col-gap-xs,
.mg-col-gap-xs .e-con-inner {
  --column-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --widgets-spacing-column: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  column-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
}

.mg-col-gap-s,
.mg-col-gap-s .e-con-inner {
  --column-gap: clamp(0.75rem, 1vw, 1rem) !important;  /* Fluid Small */
  --widgets-spacing-column: clamp(0.75rem, 1vw, 1rem) !important;
  column-gap: clamp(0.75rem, 1vw, 1rem) !important;
}

.mg-col-gap-m,
.mg-col-gap-m .e-con-inner {
  --column-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
  --widgets-spacing-column: clamp(1rem, 1.25vw, 1.25rem) !important;
  column-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
}

.mg-col-gap-l,
.mg-col-gap-l .e-con-inner {
  --column-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  --widgets-spacing-column: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  column-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
}

.mg-col-gap-xl,
.mg-col-gap-xl .e-con-inner {
  --column-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
  --widgets-spacing-column: clamp(1.5rem, 2vw, 2.5rem) !important;
  column-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
}

.mg-col-gap-xxl,
.mg-col-gap-xxl .e-con-inner {
  --column-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
  --widgets-spacing-column: clamp(2rem, 2.5vw, 3.5rem) !important;
  column-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
}

/* =========================
   SPECIAL UTILITIES
   ========================= */

/* Top Bar - minimal padding for compact headers/footers (all sides minimal) */
/* HIGH SPECIFICITY: Utility classes ALWAYS override Designer Controls */
/* 
 * Why so many properties?
 * - Elementor uses CSS variables that it reads via JavaScript
 * - --container-default-padding-* = Legacy container system
 * - --e-con-padding-* = Modern Flexbox container system (.e-con)
 * - padding = Direct CSS fallback (highest priority with !important)
 * 
 * We set all three to ensure compatibility across Elementor versions
 * and container types. The direct padding property ensures it works
 * even if Elementor's JS doesn't read the variables.
 */
body.mg-design-system .mg-top-bar,
body.mg-design-system .mg-top-bar.e-parent,
body.mg-design-system .mg-top-bar[data-element_type="container"] {
  /* Legacy container variables */
  --container-default-padding-top: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --container-default-padding-bottom: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --container-default-padding-left: clamp(1rem, 2vw, 2rem) !important;
  --container-default-padding-right: clamp(1rem, 2vw, 2rem) !important;
  
  /* Modern Flexbox container variables */
  --e-con-padding-top: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --e-con-padding-bottom: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --e-con-padding-left: clamp(1rem, 2vw, 2rem) !important;
  --e-con-padding-right: clamp(1rem, 2vw, 2rem) !important;
  
  /* Direct CSS fallback (ensures it works regardless of Elementor version) */
  padding: clamp(0.5rem, 0.75vw, 0.75rem) clamp(1rem, 2vw, 2rem) !important;
}

/* CRITICAL: Reset inner container padding to prevent double padding */
body.mg-design-system .mg-top-bar > .e-con-inner {
  padding: 0 !important;
}

/* =========================
   DIRECTIONAL PADDING UTILITIES (Top/Bottom/Left/Right)
   Use these for precise control over individual sides
   Elementor inline styles ALWAYS override these (no !important)
   Sets both CSS variables (for Elementor) and direct properties (fallback)
   Bigger jumps between sizes for more significant differences
   ========================= */

/* PADDING TOP - All Sizes */
body.mg-design-system .mg-padding-t-xxs { 
  --container-default-padding-top: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-top: clamp(0.5rem, 1vw, 0.75rem);
  padding-top: clamp(0.5rem, 1vw, 0.75rem); 
}
body.mg-design-system .mg-padding-t-xs { 
  --container-default-padding-top: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-top: clamp(1rem, 1.5vw, 1.5rem);
  padding-top: clamp(1rem, 1.5vw, 1.5rem); 
}
body.mg-design-system .mg-padding-t-s { 
  --container-default-padding-top: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-top: clamp(1.5rem, 2vw, 2rem);
  padding-top: clamp(1.5rem, 2vw, 2rem); 
}
body.mg-design-system .mg-padding-t-m { 
  --container-default-padding-top: clamp(2rem, 3vw, 3rem);
  --e-con-padding-top: clamp(2rem, 3vw, 3rem);
  padding-top: clamp(2rem, 3vw, 3rem); 
}
body.mg-design-system .mg-padding-t-l { 
  --container-default-padding-top: clamp(3rem, 4vw, 4rem);
  --e-con-padding-top: clamp(3rem, 4vw, 4rem);
  padding-top: clamp(3rem, 4vw, 4rem); 
}
body.mg-design-system .mg-padding-t-xl { 
  --container-default-padding-top: clamp(4rem, 5vw, 5rem);
  --e-con-padding-top: clamp(4rem, 5vw, 5rem);
  padding-top: clamp(4rem, 5vw, 5rem); 
}
body.mg-design-system .mg-padding-t-xxl { 
  --container-default-padding-top: clamp(5rem, 6vw, 6rem);
  --e-con-padding-top: clamp(5rem, 6vw, 6rem);
  padding-top: clamp(5rem, 6vw, 6rem); 
}
body.mg-design-system .mg-padding-t-none { 
  --container-default-padding-top: 0;
  --e-con-padding-top: 0;
  padding-top: 0; 
}

/* PADDING BOTTOM - All Sizes */
body.mg-design-system .mg-padding-b-xxs { 
  --container-default-padding-bottom: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-bottom: clamp(0.5rem, 1vw, 0.75rem);
  padding-bottom: clamp(0.5rem, 1vw, 0.75rem); 
}
body.mg-design-system .mg-padding-b-xs { 
  --container-default-padding-bottom: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-bottom: clamp(1rem, 1.5vw, 1.5rem);
  padding-bottom: clamp(1rem, 1.5vw, 1.5rem); 
}
body.mg-design-system .mg-padding-b-s { 
  --container-default-padding-bottom: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-bottom: clamp(1.5rem, 2vw, 2rem);
  padding-bottom: clamp(1.5rem, 2vw, 2rem); 
}
body.mg-design-system .mg-padding-b-m { 
  --container-default-padding-bottom: clamp(2rem, 3vw, 3rem);
  --e-con-padding-bottom: clamp(2rem, 3vw, 3rem);
  padding-bottom: clamp(2rem, 3vw, 3rem); 
}
body.mg-design-system .mg-padding-b-l { 
  --container-default-padding-bottom: clamp(3rem, 4vw, 4rem);
  --e-con-padding-bottom: clamp(3rem, 4vw, 4rem);
  padding-bottom: clamp(3rem, 4vw, 4rem); 
}
body.mg-design-system .mg-padding-b-xl { 
  --container-default-padding-bottom: clamp(4rem, 5vw, 5rem);
  --e-con-padding-bottom: clamp(4rem, 5vw, 5rem);
  padding-bottom: clamp(4rem, 5vw, 5rem); 
}
body.mg-design-system .mg-padding-b-xxl { 
  --container-default-padding-bottom: clamp(5rem, 6vw, 6rem);
  --e-con-padding-bottom: clamp(5rem, 6vw, 6rem);
  padding-bottom: clamp(5rem, 6vw, 6rem); 
}
body.mg-design-system .mg-padding-b-none { 
  --container-default-padding-bottom: 0;
  --e-con-padding-bottom: 0;
  padding-bottom: 0; 
}

/* PADDING LEFT - All Sizes */
body.mg-design-system .mg-padding-l-xxs { 
  --container-default-padding-left: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-left: clamp(0.5rem, 1vw, 0.75rem);
  padding-left: clamp(0.5rem, 1vw, 0.75rem); 
}
body.mg-design-system .mg-padding-l-xs { 
  --container-default-padding-left: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-left: clamp(1rem, 1.5vw, 1.5rem);
  padding-left: clamp(1rem, 1.5vw, 1.5rem); 
}
body.mg-design-system .mg-padding-l-s { 
  --container-default-padding-left: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-left: clamp(1.5rem, 2vw, 2rem);
  padding-left: clamp(1.5rem, 2vw, 2rem); 
}
body.mg-design-system .mg-padding-l-m { 
  --container-default-padding-left: clamp(2rem, 3vw, 3rem);
  --e-con-padding-left: clamp(2rem, 3vw, 3rem);
  padding-left: clamp(2rem, 3vw, 3rem); 
}
body.mg-design-system .mg-padding-l-l { 
  --container-default-padding-left: clamp(3rem, 4vw, 4rem);
  --e-con-padding-left: clamp(3rem, 4vw, 4rem);
  padding-left: clamp(3rem, 4vw, 4rem); 
}
body.mg-design-system .mg-padding-l-xl { 
  --container-default-padding-left: clamp(4rem, 5vw, 5rem);
  --e-con-padding-left: clamp(4rem, 5vw, 5rem);
  padding-left: clamp(4rem, 5vw, 5rem); 
}
body.mg-design-system .mg-padding-l-xxl { 
  --container-default-padding-left: clamp(5rem, 6vw, 6rem);
  --e-con-padding-left: clamp(5rem, 6vw, 6rem);
  padding-left: clamp(5rem, 6vw, 6rem); 
}
body.mg-design-system .mg-padding-l-none { 
  --container-default-padding-left: 0;
  --e-con-padding-left: 0;
  padding-left: 0; 
}

/* PADDING RIGHT - All Sizes */
body.mg-design-system .mg-padding-r-xxs { 
  --container-default-padding-right: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-right: clamp(0.5rem, 1vw, 0.75rem);
  padding-right: clamp(0.5rem, 1vw, 0.75rem); 
}
body.mg-design-system .mg-padding-r-xs { 
  --container-default-padding-right: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-right: clamp(1rem, 1.5vw, 1.5rem);
  padding-right: clamp(1rem, 1.5vw, 1.5rem); 
}
body.mg-design-system .mg-padding-r-s { 
  --container-default-padding-right: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-right: clamp(1.5rem, 2vw, 2rem);
  padding-right: clamp(1.5rem, 2vw, 2rem); 
}
body.mg-design-system .mg-padding-r-m { 
  --container-default-padding-right: clamp(2rem, 3vw, 3rem);
  --e-con-padding-right: clamp(2rem, 3vw, 3rem);
  padding-right: clamp(2rem, 3vw, 3rem); 
}
body.mg-design-system .mg-padding-r-l { 
  --container-default-padding-right: clamp(3rem, 4vw, 4rem);
  --e-con-padding-right: clamp(3rem, 4vw, 4rem);
  padding-right: clamp(3rem, 4vw, 4rem); 
}
body.mg-design-system .mg-padding-r-xl { 
  --container-default-padding-right: clamp(4rem, 5vw, 5rem);
  --e-con-padding-right: clamp(4rem, 5vw, 5rem);
  padding-right: clamp(4rem, 5vw, 5rem); 
}
body.mg-design-system .mg-padding-r-xxl { 
  --container-default-padding-right: clamp(5rem, 6vw, 6rem);
  --e-con-padding-right: clamp(5rem, 6vw, 6rem);
  padding-right: clamp(5rem, 6vw, 6rem); 
}
body.mg-design-system .mg-padding-r-none { 
  --container-default-padding-right: 0;
  --e-con-padding-right: 0;
  padding-right: 0; 
}

/* PADDING Y-AXIS (Top + Bottom) - All Sizes */
body.mg-design-system .mg-padding-y-xxs { 
  --container-default-padding-top: clamp(0.5rem, 1vw, 0.75rem);
  --container-default-padding-bottom: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-top: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-bottom: clamp(0.5rem, 1vw, 0.75rem);
  padding-top: clamp(0.5rem, 1vw, 0.75rem); 
  padding-bottom: clamp(0.5rem, 1vw, 0.75rem); 
}
body.mg-design-system .mg-padding-y-xs { 
  --container-default-padding-top: clamp(1rem, 1.5vw, 1.5rem);
  --container-default-padding-bottom: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-top: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-bottom: clamp(1rem, 1.5vw, 1.5rem);
  padding-top: clamp(1rem, 1.5vw, 1.5rem); 
  padding-bottom: clamp(1rem, 1.5vw, 1.5rem); 
}
body.mg-design-system .mg-padding-y-s { 
  --container-default-padding-top: clamp(1.5rem, 2vw, 2rem);
  --container-default-padding-bottom: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-top: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-bottom: clamp(1.5rem, 2vw, 2rem);
  padding-top: clamp(1.5rem, 2vw, 2rem); 
  padding-bottom: clamp(1.5rem, 2vw, 2rem); 
}
body.mg-design-system .mg-padding-y-m { 
  --container-default-padding-top: clamp(2rem, 3vw, 3rem);
  --container-default-padding-bottom: clamp(2rem, 3vw, 3rem);
  --e-con-padding-top: clamp(2rem, 3vw, 3rem);
  --e-con-padding-bottom: clamp(2rem, 3vw, 3rem);
  padding-top: clamp(2rem, 3vw, 3rem); 
  padding-bottom: clamp(2rem, 3vw, 3rem); 
}
body.mg-design-system .mg-padding-y-l { 
  --container-default-padding-top: clamp(3rem, 4vw, 4rem);
  --container-default-padding-bottom: clamp(3rem, 4vw, 4rem);
  --e-con-padding-top: clamp(3rem, 4vw, 4rem);
  --e-con-padding-bottom: clamp(3rem, 4vw, 4rem);
  padding-top: clamp(3rem, 4vw, 4rem); 
  padding-bottom: clamp(3rem, 4vw, 4rem); 
}
body.mg-design-system .mg-padding-y-xl { 
  --container-default-padding-top: clamp(4rem, 5vw, 5rem);
  --container-default-padding-bottom: clamp(4rem, 5vw, 5rem);
  --e-con-padding-top: clamp(4rem, 5vw, 5rem);
  --e-con-padding-bottom: clamp(4rem, 5vw, 5rem);
  padding-top: clamp(4rem, 5vw, 5rem); 
  padding-bottom: clamp(4rem, 5vw, 5rem); 
}
body.mg-design-system .mg-padding-y-xxl { 
  --container-default-padding-top: clamp(5rem, 6vw, 6rem);
  --container-default-padding-bottom: clamp(5rem, 6vw, 6rem);
  --e-con-padding-top: clamp(5rem, 6vw, 6rem);
  --e-con-padding-bottom: clamp(5rem, 6vw, 6rem);
  padding-top: clamp(5rem, 6vw, 6rem); 
  padding-bottom: clamp(5rem, 6vw, 6rem); 
}
body.mg-design-system .mg-padding-y-none { 
  --container-default-padding-top: 0;
  --container-default-padding-bottom: 0;
  --e-con-padding-top: 0;
  --e-con-padding-bottom: 0;
  padding-top: 0; 
  padding-bottom: 0; 
}

/* PADDING X-AXIS (Left + Right) - All Sizes */
body.mg-design-system .mg-padding-x-xxs { 
  --container-default-padding-left: clamp(0.5rem, 1vw, 0.75rem);
  --container-default-padding-right: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-left: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-right: clamp(0.5rem, 1vw, 0.75rem);
  padding-left: clamp(0.5rem, 1vw, 0.75rem); 
  padding-right: clamp(0.5rem, 1vw, 0.75rem); 
}
body.mg-design-system .mg-padding-x-xs { 
  --container-default-padding-left: clamp(1rem, 1.5vw, 1.5rem);
  --container-default-padding-right: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-left: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-right: clamp(1rem, 1.5vw, 1.5rem);
  padding-left: clamp(1rem, 1.5vw, 1.5rem); 
  padding-right: clamp(1rem, 1.5vw, 1.5rem); 
}
body.mg-design-system .mg-padding-x-s { 
  --container-default-padding-left: clamp(1.5rem, 2vw, 2rem);
  --container-default-padding-right: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-left: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-right: clamp(1.5rem, 2vw, 2rem);
  padding-left: clamp(1.5rem, 2vw, 2rem); 
  padding-right: clamp(1.5rem, 2vw, 2rem); 
}
body.mg-design-system .mg-padding-x-m { 
  --container-default-padding-left: clamp(2rem, 3vw, 3rem);
  --container-default-padding-right: clamp(2rem, 3vw, 3rem);
  --e-con-padding-left: clamp(2rem, 3vw, 3rem);
  --e-con-padding-right: clamp(2rem, 3vw, 3rem);
  padding-left: clamp(2rem, 3vw, 3rem); 
  padding-right: clamp(2rem, 3vw, 3rem); 
}
body.mg-design-system .mg-padding-x-l { 
  --container-default-padding-left: clamp(3rem, 4vw, 4rem);
  --container-default-padding-right: clamp(3rem, 4vw, 4rem);
  --e-con-padding-left: clamp(3rem, 4vw, 4rem);
  --e-con-padding-right: clamp(3rem, 4vw, 4rem);
  padding-left: clamp(3rem, 4vw, 4rem); 
  padding-right: clamp(3rem, 4vw, 4rem); 
}
body.mg-design-system .mg-padding-x-xl { 
  --container-default-padding-left: clamp(4rem, 5vw, 5rem);
  --container-default-padding-right: clamp(4rem, 5vw, 5rem);
  --e-con-padding-left: clamp(4rem, 5vw, 5rem);
  --e-con-padding-right: clamp(4rem, 5vw, 5rem);
  padding-left: clamp(4rem, 5vw, 5rem); 
  padding-right: clamp(4rem, 5vw, 5rem); 
}
body.mg-design-system .mg-padding-x-xxl { 
  --container-default-padding-left: clamp(5rem, 6vw, 6rem);
  --container-default-padding-right: clamp(5rem, 6vw, 6rem);
  --e-con-padding-left: clamp(5rem, 6vw, 6rem);
  --e-con-padding-right: clamp(5rem, 6vw, 6rem);
  padding-left: clamp(5rem, 6vw, 6rem); 
  padding-right: clamp(5rem, 6vw, 6rem); 
}
body.mg-design-system .mg-padding-x-none { 
  --container-default-padding-left: 0;
  --container-default-padding-right: 0;
  --e-con-padding-left: 0;
  --e-con-padding-right: 0;
  padding-left: 0; 
  padding-right: 0; 
}

/* =========================
   SIMPLE RESET UTILITIES
   ========================= */

/* Remove ALL gaps (row + column) - simpler alternative to mg-gap-all-none */
.mg-no-gap {
  --row-gap: 0 !important;
  --column-gap: 0 !important;
  --widgets-spacing-row: 0 !important;
  --widgets-spacing-column: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  gap: 0 !important;
}

/* Remove ALL padding from container */
/* See .mg-top-bar above for explanation of why we set all three property types */
body.mg-design-system .mg-no-padding,
body.mg-design-system .mg-no-padding.e-parent,
body.mg-design-system .mg-no-padding[data-element_type="container"] {
  /* Legacy container variables */
  --container-default-padding-top: 0 !important;
  --container-default-padding-bottom: 0 !important;
  --container-default-padding-left: 0 !important;
  --container-default-padding-right: 0 !important;
  
  /* Modern Flexbox container variables */
  --e-con-padding-top: 0 !important;
  --e-con-padding-bottom: 0 !important;
  --e-con-padding-left: 0 !important;
  --e-con-padding-right: 0 !important;
  
  /* Direct CSS fallback */
  padding: 0 !important;
}

/* Reset inner container padding for mg-no-padding */
body.mg-design-system .mg-no-padding > .e-con-inner {
  padding: 0 !important;
}

/* =========================
   USAGE EXAMPLES & SIZE SCALE
   ========================= */

/*
 * T-SHIRT SIZING: xxs, xs, s, m, l, xl, xxl
 * 
 * ===================================================
 * UTILITIES AVAILABLE:
 * ===================================================
 * 
 * GAP UTILITIES (for spacing between widgets/columns):
 * - mg-gap-* = Control both row AND column gaps (universal)
 * - mg-row-gap-* = Control vertical spacing ONLY (row gaps)
 * - mg-col-gap-* = Control horizontal spacing ONLY (column gaps)
 * - mg-no-gap = Remove all gaps
 * 
 * PADDING UTILITIES (for container padding):
 * - mg-padding-t-* = Control top padding only
 * - mg-padding-b-* = Control bottom padding only
 * - mg-padding-l-* = Control left padding only
 * - mg-padding-r-* = Control right padding only
 * - mg-padding-y-* = Control top AND bottom padding (vertical axis)
 * - mg-padding-x-* = Control left AND right padding (horizontal axis)
 * - mg-no-padding = Remove all padding
 * 
 * ===================================================
 * SIZE SCALES (Fluid/Responsive using clamp()):
 * ===================================================
 * 
 * GAP SIZES (spacing between elements):
 * xxs = 4-8px    | clamp(0.25rem, 0.5vw, 0.5rem)
 * xs  = 8-12px   | clamp(0.5rem, 0.75vw, 0.75rem)
 * s   = 12-16px  | clamp(0.75rem, 1vw, 1rem)
 * m   = 16-20px  | clamp(1rem, 1.25vw, 1.25rem)
 * l   = 20-28px  | clamp(1.25rem, 1.5vw, 1.75rem)
 * xl  = 24-40px  | clamp(1.5rem, 2vw, 2.5rem)
 * xxl = 32-56px  | clamp(2rem, 2.5vw, 3.5rem)
 * 
 * PADDING SIZES (container padding - bigger jumps):
 * xxs = 8-12px   | clamp(0.5rem, 1vw, 0.75rem)
 * xs  = 16-24px  | clamp(1rem, 1.5vw, 1.5rem)
 * s   = 24-32px  | clamp(1.5rem, 2vw, 2rem)
 * m   = 32-48px  | clamp(2rem, 3vw, 3rem)
 * l   = 48-64px  | clamp(3rem, 4vw, 4rem)
 * xl  = 64-80px  | clamp(4rem, 5vw, 5rem)
 * xxl = 80-96px  | clamp(5rem, 6vw, 6rem)
 * 
 * ===================================================
 * USAGE EXAMPLES:
 * ===================================================
 * 
 * Header with tight row spacing:
 * Add class: mg-gap-xs or mg-row-gap-xs
 * Result: Fluid 8-12px row gap (scales with viewport)
 * 
 * Control both row AND column gaps:
 * Add classes: mg-gap-s mg-col-gap-l
 * Result: Fluid 12-16px row gap, 20-28px column gap
 * 
 * Add top padding only:
 * Add class: mg-padding-t-m
 * Result: Fluid 32-48px top padding
 * 
 * Add vertical padding (top + bottom):
 * Add class: mg-padding-y-l
 * Result: Fluid 48-64px top and bottom padding
 * 
 * Add horizontal padding (left + right):
 * Add class: mg-padding-x-xl
 * Result: Fluid 64-80px left and right padding
 * 
 * Remove all gaps:
 * Add class: mg-no-gap
 * Result: 0px row and column gaps
 * 
 * Remove all padding:
 * Add class: mg-no-padding
 * Result: 0 padding on all sides
 * 
 * Compact top bar:
 * Add class: mg-top-bar
 * Result: Fluid 8-12px top/bottom, 16-32px left/right padding
 */