/* -------------------------------------------------------------------
   UTILITIES CSS - Complete Bootstrap Override & Extension Layer
   Version: 2.0 (Full Coverage)
   Usage: Include AFTER bootstrap.css
   ------------------------------------------------------------------- */

/* ============================================
   1. CSS VARIABLES (Complete Design Tokens)
   ============================================ */
:root {
  /* Spacing (1-20 for full coverage) */
  --ut-space-0: 0;
  --ut-space-0-5: 0.125rem; /* 2px */
  --ut-space-1: 0.25rem; /* 4px */
  --ut-space-1-5: 0.375rem; /* 6px */
  --ut-space-2: 0.5rem; /* 8px */
  --ut-space-2-5: 0.625rem; /* 10px */
  --ut-space-3: 0.75rem; /* 12px */
  --ut-space-3-5: 0.875rem; /* 14px */
  --ut-space-4: 1rem; /* 16px */
  --ut-space-5: 1.25rem; /* 20px */
  --ut-space-6: 1.5rem; /* 24px */
  --ut-space-7: 1.75rem; /* 28px */
  --ut-space-8: 2rem; /* 32px */
  --ut-space-9: 2.25rem; /* 36px */
  --ut-space-10: 2.5rem; /* 40px */
  --ut-space-11: 2.75rem; /* 44px */
  --ut-space-12: 3rem; /* 48px */
  --ut-space-14: 3.5rem; /* 56px */
  --ut-space-16: 4rem; /* 64px */
  --ut-space-20: 5rem; /* 80px */
  --ut-space-24: 6rem; /* 96px */
  --ut-space-32: 8rem; /* 128px */

  /* Border Radius */
  --ut-radius-none: 0;
  --ut-radius-xs: 0.125rem;
  --ut-radius-sm: 0.25rem;
  --ut-radius-md: 0.375rem;
  --ut-radius-lg: 0.5rem;
  --ut-radius-xl: 0.75rem;
  --ut-radius-2xl: 1rem;
  --ut-radius-3xl: 1.5rem;
  --ut-radius-full: 9999px;

  /* Z-Index Layers */
  --ut-z-0: 0;
  --ut-z-10: 10;
  --ut-z-20: 20;
  --ut-z-30: 30;
  --ut-z-40: 40;
  --ut-z-50: 50;
  --ut-z-auto: auto;
  --ut-z-dropdown: 1000;
  --ut-z-sticky: 1020;
  --ut-z-fixed: 1030;
  --ut-z-modal-backdrop: 1040;
  --ut-z-modal: 1050;
  --ut-z-popover: 1060;
  --ut-z-tooltip: 1070;
  --ut-z-toast: 1080;

  /* Transitions */
  --ut-transition-none: none;
  --ut-transition-fast: 150ms ease;
  --ut-transition-base: 250ms ease;
  --ut-transition-slow: 350ms ease;
  --ut-transition-slower: 500ms ease;

  /* Opacity */
  --ut-opacity-0: 0;
  --ut-opacity-5: 0.05;
  --ut-opacity-10: 0.1;
  --ut-opacity-20: 0.2;
  --ut-opacity-25: 0.25;
  --ut-opacity-30: 0.3;
  --ut-opacity-40: 0.4;
  --ut-opacity-50: 0.5;
  --ut-opacity-60: 0.6;
  --ut-opacity-70: 0.7;
  --ut-opacity-75: 0.75;
  --ut-opacity-80: 0.8;
  --ut-opacity-90: 0.9;
  --ut-opacity-95: 0.95;
  --ut-opacity-100: 1;

  /* Blur Effects */
  --ut-blur-none: blur(0);
  --ut-blur-sm: blur(4px);
  --ut-blur-md: blur(8px);
  --ut-blur-lg: blur(12px);
  --ut-blur-xl: blur(16px);
  --ut-blur-2xl: blur(24px);
  --ut-blur-3xl: blur(40px);

  /* Box Shadow Depths */
  --ut-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --ut-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --ut-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --ut-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --ut-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
  --ut-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --ut-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --ut-shadow-none: none;

  /* Font Sizes */
  --ut-font-xs: 0.75rem;
  --ut-font-sm: 0.875rem;
  --ut-font-base: 1rem;
  --ut-font-lg: 1.125rem;
  --ut-font-xl: 1.25rem;
  --ut-font-2xl: 1.5rem;
  --ut-font-3xl: 1.875rem;
  --ut-font-4xl: 2.25rem;
  --ut-font-5xl: 3rem;
  --ut-font-6xl: 3.75rem;
  --ut-font-7xl: 4.5rem;
  --ut-font-8xl: 6rem;
  --ut-font-9xl: 8rem;
}

/* ============================================
   2. SPACING - MARGIN (Complete: 0, 0.5, 1-20, auto, negative)
   ============================================ */
/* Margin - All Sides */
.ut-m-0 {
  margin: 0 !important;
}
.ut-m-0-5 {
  margin: var(--ut-space-0-5) !important;
}
.ut-m-1 {
  margin: var(--ut-space-1) !important;
}
.ut-m-1-5 {
  margin: var(--ut-space-1-5) !important;
}
.ut-m-2 {
  margin: var(--ut-space-2) !important;
}
.ut-m-2-5 {
  margin: var(--ut-space-2-5) !important;
}
.ut-m-3 {
  margin: var(--ut-space-3) !important;
}
.ut-m-3-5 {
  margin: var(--ut-space-3-5) !important;
}
.ut-m-4 {
  margin: var(--ut-space-4) !important;
}
.ut-m-5 {
  margin: var(--ut-space-5) !important;
}
.ut-m-6 {
  margin: var(--ut-space-6) !important;
}
.ut-m-7 {
  margin: var(--ut-space-7) !important;
}
.ut-m-8 {
  margin: var(--ut-space-8) !important;
}
.ut-m-9 {
  margin: var(--ut-space-9) !important;
}
.ut-m-10 {
  margin: var(--ut-space-10) !important;
}
.ut-m-11 {
  margin: var(--ut-space-11) !important;
}
.ut-m-12 {
  margin: var(--ut-space-12) !important;
}
.ut-m-14 {
  margin: var(--ut-space-14) !important;
}
.ut-m-16 {
  margin: var(--ut-space-16) !important;
}
.ut-m-20 {
  margin: var(--ut-space-20) !important;
}
.ut-m-24 {
  margin: var(--ut-space-24) !important;
}
.ut-m-32 {
  margin: var(--ut-space-32) !important;
}
.ut-m-auto {
  margin: auto !important;
}

/* Negative Margins */
.ut-m-n0-5 {
  margin: calc(var(--ut-space-0-5) * -1) !important;
}
.ut-m-n1 {
  margin: calc(var(--ut-space-1) * -1) !important;
}
.ut-m-n1-5 {
  margin: calc(var(--ut-space-1-5) * -1) !important;
}
.ut-m-n2 {
  margin: calc(var(--ut-space-2) * -1) !important;
}
.ut-m-n2-5 {
  margin: calc(var(--ut-space-2-5) * -1) !important;
}
.ut-m-n3 {
  margin: calc(var(--ut-space-3) * -1) !important;
}
.ut-m-n3-5 {
  margin: calc(var(--ut-space-3-5) * -1) !important;
}
.ut-m-n4 {
  margin: calc(var(--ut-space-4) * -1) !important;
}
.ut-m-n5 {
  margin: calc(var(--ut-space-5) * -1) !important;
}
.ut-m-n6 {
  margin: calc(var(--ut-space-6) * -1) !important;
}
.ut-m-n7 {
  margin: calc(var(--ut-space-7) * -1) !important;
}
.ut-m-n8 {
  margin: calc(var(--ut-space-8) * -1) !important;
}

/* Margin Top */
.ut-mt-0 {
  margin-top: 0 !important;
}
.ut-mt-0-5 {
  margin-top: var(--ut-space-0-5) !important;
}
.ut-mt-1 {
  margin-top: var(--ut-space-1) !important;
}
.ut-mt-1-5 {
  margin-top: var(--ut-space-1-5) !important;
}
.ut-mt-2 {
  margin-top: var(--ut-space-2) !important;
}
.ut-mt-2-5 {
  margin-top: var(--ut-space-2-5) !important;
}
.ut-mt-3 {
  margin-top: var(--ut-space-3) !important;
}
.ut-mt-3-5 {
  margin-top: var(--ut-space-3-5) !important;
}
.ut-mt-4 {
  margin-top: var(--ut-space-4) !important;
}
.ut-mt-5 {
  margin-top: var(--ut-space-5) !important;
}
.ut-mt-6 {
  margin-top: var(--ut-space-6) !important;
}
.ut-mt-7 {
  margin-top: var(--ut-space-7) !important;
}
.ut-mt-8 {
  margin-top: var(--ut-space-8) !important;
}
.ut-mt-9 {
  margin-top: var(--ut-space-9) !important;
}
.ut-mt-10 {
  margin-top: var(--ut-space-10) !important;
}
.ut-mt-11 {
  margin-top: var(--ut-space-11) !important;
}
.ut-mt-12 {
  margin-top: var(--ut-space-12) !important;
}
.ut-mt-14 {
  margin-top: var(--ut-space-14) !important;
}
.ut-mt-16 {
  margin-top: var(--ut-space-16) !important;
}
.ut-mt-20 {
  margin-top: var(--ut-space-20) !important;
}
.ut-mt-auto {
  margin-top: auto !important;
}

/* Negative Margin Top */
.ut-mt-n0-5 {
  margin-top: calc(var(--ut-space-0-5) * -1) !important;
}
.ut-mt-n1 {
  margin-top: calc(var(--ut-space-1) * -1) !important;
}
.ut-mt-n2 {
  margin-top: calc(var(--ut-space-2) * -1) !important;
}
.ut-mt-n3 {
  margin-top: calc(var(--ut-space-3) * -1) !important;
}
.ut-mt-n4 {
  margin-top: calc(var(--ut-space-4) * -1) !important;
}
.ut-mt-n5 {
  margin-top: calc(var(--ut-space-5) * -1) !important;
}

/* Margin Bottom (same pattern - mb) */
.ut-mb-0 {
  margin-bottom: 0 !important;
}
.ut-mb-0-5 {
  margin-bottom: var(--ut-space-0-5) !important;
}
.ut-mb-1 {
  margin-bottom: var(--ut-space-1) !important;
}
.ut-mb-1-5 {
  margin-bottom: var(--ut-space-1-5) !important;
}
.ut-mb-2 {
  margin-bottom: var(--ut-space-2) !important;
}
.ut-mb-2-5 {
  margin-bottom: var(--ut-space-2-5) !important;
}
.ut-mb-3 {
  margin-bottom: var(--ut-space-3) !important;
}
.ut-mb-3-5 {
  margin-bottom: var(--ut-space-3-5) !important;
}
.ut-mb-4 {
  margin-bottom: var(--ut-space-4) !important;
}
.ut-mb-5 {
  margin-bottom: var(--ut-space-5) !important;
}
.ut-mb-6 {
  margin-bottom: var(--ut-space-6) !important;
}
.ut-mb-7 {
  margin-bottom: var(--ut-space-7) !important;
}
.ut-mb-8 {
  margin-bottom: var(--ut-space-8) !important;
}
.ut-mb-9 {
  margin-bottom: var(--ut-space-9) !important;
}
.ut-mb-10 {
  margin-bottom: var(--ut-space-10) !important;
}
.ut-mb-11 {
  margin-bottom: var(--ut-space-11) !important;
}
.ut-mb-12 {
  margin-bottom: var(--ut-space-12) !important;
}
.ut-mb-14 {
  margin-bottom: var(--ut-space-14) !important;
}
.ut-mb-16 {
  margin-bottom: var(--ut-space-16) !important;
}
.ut-mb-20 {
  margin-bottom: var(--ut-space-20) !important;
}
.ut-mb-auto {
  margin-bottom: auto !important;
}

/* Margin Left */
.ut-ml-0 {
  margin-left: 0 !important;
}
.ut-ml-0-5 {
  margin-left: var(--ut-space-0-5) !important;
}
.ut-ml-1 {
  margin-left: var(--ut-space-1) !important;
}
.ut-ml-1-5 {
  margin-left: var(--ut-space-1-5) !important;
}
.ut-ml-2 {
  margin-left: var(--ut-space-2) !important;
}
.ut-ml-2-5 {
  margin-left: var(--ut-space-2-5) !important;
}
.ut-ml-3 {
  margin-left: var(--ut-space-3) !important;
}
.ut-ml-3-5 {
  margin-left: var(--ut-space-3-5) !important;
}
.ut-ml-4 {
  margin-left: var(--ut-space-4) !important;
}
.ut-ml-5 {
  margin-left: var(--ut-space-5) !important;
}
.ut-ml-6 {
  margin-left: var(--ut-space-6) !important;
}
.ut-ml-7 {
  margin-left: var(--ut-space-7) !important;
}
.ut-ml-8 {
  margin-left: var(--ut-space-8) !important;
}
.ut-ml-9 {
  margin-left: var(--ut-space-9) !important;
}
.ut-ml-10 {
  margin-left: var(--ut-space-10) !important;
}
.ut-ml-auto {
  margin-left: auto !important;
}

/* Margin Right */
.ut-mr-0 {
  margin-right: 0 !important;
}
.ut-mr-0-5 {
  margin-right: var(--ut-space-0-5) !important;
}
.ut-mr-1 {
  margin-right: var(--ut-space-1) !important;
}
.ut-mr-1-5 {
  margin-right: var(--ut-space-1-5) !important;
}
.ut-mr-2 {
  margin-right: var(--ut-space-2) !important;
}
.ut-mr-2-5 {
  margin-right: var(--ut-space-2-5) !important;
}
.ut-mr-3 {
  margin-right: var(--ut-space-3) !important;
}
.ut-mr-3-5 {
  margin-right: var(--ut-space-3-5) !important;
}
.ut-mr-4 {
  margin-right: var(--ut-space-4) !important;
}
.ut-mr-5 {
  margin-right: var(--ut-space-5) !important;
}
.ut-mr-6 {
  margin-right: var(--ut-space-6) !important;
}
.ut-mr-7 {
  margin-right: var(--ut-space-7) !important;
}
.ut-mr-8 {
  margin-right: var(--ut-space-8) !important;
}
.ut-mr-9 {
  margin-right: var(--ut-space-9) !important;
}
.ut-mr-10 {
  margin-right: var(--ut-space-10) !important;
}
.ut-mr-auto {
  margin-right: auto !important;
}

/* Margin X (left + right) */
.ut-mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.ut-mx-0-5 {
  margin-left: var(--ut-space-0-5) !important;
  margin-right: var(--ut-space-0-5) !important;
}
.ut-mx-1 {
  margin-left: var(--ut-space-1) !important;
  margin-right: var(--ut-space-1) !important;
}
.ut-mx-2 {
  margin-left: var(--ut-space-2) !important;
  margin-right: var(--ut-space-2) !important;
}
.ut-mx-3 {
  margin-left: var(--ut-space-3) !important;
  margin-right: var(--ut-space-3) !important;
}
.ut-mx-4 {
  margin-left: var(--ut-space-4) !important;
  margin-right: var(--ut-space-4) !important;
}
.ut-mx-5 {
  margin-left: var(--ut-space-5) !important;
  margin-right: var(--ut-space-5) !important;
}
.ut-mx-6 {
  margin-left: var(--ut-space-6) !important;
  margin-right: var(--ut-space-6) !important;
}
.ut-mx-7 {
  margin-left: var(--ut-space-7) !important;
  margin-right: var(--ut-space-7) !important;
}
.ut-mx-8 {
  margin-left: var(--ut-space-8) !important;
  margin-right: var(--ut-space-8) !important;
}
.ut-mx-9 {
  margin-left: var(--ut-space-9) !important;
  margin-right: var(--ut-space-9) !important;
}
.ut-mx-10 {
  margin-left: var(--ut-space-10) !important;
  margin-right: var(--ut-space-10) !important;
}
.ut-mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Margin Y (top + bottom) */
.ut-my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.ut-my-0-5 {
  margin-top: var(--ut-space-0-5) !important;
  margin-bottom: var(--ut-space-0-5) !important;
}
.ut-my-1 {
  margin-top: var(--ut-space-1) !important;
  margin-bottom: var(--ut-space-1) !important;
}
.ut-my-2 {
  margin-top: var(--ut-space-2) !important;
  margin-bottom: var(--ut-space-2) !important;
}
.ut-my-3 {
  margin-top: var(--ut-space-3) !important;
  margin-bottom: var(--ut-space-3) !important;
}
.ut-my-4 {
  margin-top: var(--ut-space-4) !important;
  margin-bottom: var(--ut-space-4) !important;
}
.ut-my-5 {
  margin-top: var(--ut-space-5) !important;
  margin-bottom: var(--ut-space-5) !important;
}
.ut-my-6 {
  margin-top: var(--ut-space-6) !important;
  margin-bottom: var(--ut-space-6) !important;
}
.ut-my-7 {
  margin-top: var(--ut-space-7) !important;
  margin-bottom: var(--ut-space-7) !important;
}
.ut-my-8 {
  margin-top: var(--ut-space-8) !important;
  margin-bottom: var(--ut-space-8) !important;
}
.ut-my-9 {
  margin-top: var(--ut-space-9) !important;
  margin-bottom: var(--ut-space-9) !important;
}
.ut-my-10 {
  margin-top: var(--ut-space-10) !important;
  margin-bottom: var(--ut-space-10) !important;
}
.ut-my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* ============================================
   3. SPACING - PADDING (Complete)
   ============================================ */
.ut-p-0 {
  padding: 0 !important;
}
.ut-p-0-5 {
  padding: var(--ut-space-0-5) !important;
}
.ut-p-1 {
  padding: var(--ut-space-1) !important;
}
.ut-p-1-5 {
  padding: var(--ut-space-1-5) !important;
}
.ut-p-2 {
  padding: var(--ut-space-2) !important;
}
.ut-p-2-5 {
  padding: var(--ut-space-2-5) !important;
}
.ut-p-3 {
  padding: var(--ut-space-3) !important;
}
.ut-p-3-5 {
  padding: var(--ut-space-3-5) !important;
}
.ut-p-4 {
  padding: var(--ut-space-4) !important;
}
.ut-p-5 {
  padding: var(--ut-space-5) !important;
}
.ut-p-6 {
  padding: var(--ut-space-6) !important;
}
.ut-p-7 {
  padding: var(--ut-space-7) !important;
}
.ut-p-8 {
  padding: var(--ut-space-8) !important;
}
.ut-p-9 {
  padding: var(--ut-space-9) !important;
}
.ut-p-10 {
  padding: var(--ut-space-10) !important;
}
.ut-p-11 {
  padding: var(--ut-space-11) !important;
}
.ut-p-12 {
  padding: var(--ut-space-12) !important;
}
.ut-p-14 {
  padding: var(--ut-space-14) !important;
}
.ut-p-16 {
  padding: var(--ut-space-16) !important;
}
.ut-p-20 {
  padding: var(--ut-space-20) !important;
}
.ut-p-24 {
  padding: var(--ut-space-24) !important;
}
.ut-p-32 {
  padding: var(--ut-space-32) !important;
}

/* Padding Top */
.ut-pt-0 {
  padding-top: 0 !important;
}
.ut-pt-0-5 {
  padding-top: var(--ut-space-0-5) !important;
}
.ut-pt-1 {
  padding-top: var(--ut-space-1) !important;
}
.ut-pt-1-5 {
  padding-top: var(--ut-space-1-5) !important;
}
.ut-pt-2 {
  padding-top: var(--ut-space-2) !important;
}
.ut-pt-2-5 {
  padding-top: var(--ut-space-2-5) !important;
}
.ut-pt-3 {
  padding-top: var(--ut-space-3) !important;
}
.ut-pt-3-5 {
  padding-top: var(--ut-space-3-5) !important;
}
.ut-pt-4 {
  padding-top: var(--ut-space-4) !important;
}
.ut-pt-5 {
  padding-top: var(--ut-space-5) !important;
}
.ut-pt-6 {
  padding-top: var(--ut-space-6) !important;
}
.ut-pt-7 {
  padding-top: var(--ut-space-7) !important;
}
.ut-pt-8 {
  padding-top: var(--ut-space-8) !important;
}
.ut-pt-9 {
  padding-top: var(--ut-space-9) !important;
}
.ut-pt-10 {
  padding-top: var(--ut-space-10) !important;
}
.ut-pt-11 {
  padding-top: var(--ut-space-11) !important;
}
.ut-pt-12 {
  padding-top: var(--ut-space-12) !important;
}
.ut-pt-14 {
  padding-top: var(--ut-space-14) !important;
}
.ut-pt-16 {
  padding-top: var(--ut-space-16) !important;
}
.ut-pt-20 {
  padding-top: var(--ut-space-20) !important;
}

/* Padding Bottom */
.ut-pb-0 {
  padding-bottom: 0 !important;
}
.ut-pb-0-5 {
  padding-bottom: var(--ut-space-0-5) !important;
}
.ut-pb-1 {
  padding-bottom: var(--ut-space-1) !important;
}
.ut-pb-1-5 {
  padding-bottom: var(--ut-space-1-5) !important;
}
.ut-pb-2 {
  padding-bottom: var(--ut-space-2) !important;
}
.ut-pb-2-5 {
  padding-bottom: var(--ut-space-2-5) !important;
}
.ut-pb-3 {
  padding-bottom: var(--ut-space-3) !important;
}
.ut-pb-3-5 {
  padding-bottom: var(--ut-space-3-5) !important;
}
.ut-pb-4 {
  padding-bottom: var(--ut-space-4) !important;
}
.ut-pb-5 {
  padding-bottom: var(--ut-space-5) !important;
}
.ut-pb-6 {
  padding-bottom: var(--ut-space-6) !important;
}
.ut-pb-7 {
  padding-bottom: var(--ut-space-7) !important;
}
.ut-pb-8 {
  padding-bottom: var(--ut-space-8) !important;
}
.ut-pb-9 {
  padding-bottom: var(--ut-space-9) !important;
}
.ut-pb-10 {
  padding-bottom: var(--ut-space-10) !important;
}
.ut-pb-11 {
  padding-bottom: var(--ut-space-11) !important;
}
.ut-pb-12 {
  padding-bottom: var(--ut-space-12) !important;
}
.ut-pb-14 {
  padding-bottom: var(--ut-space-14) !important;
}
.ut-pb-16 {
  padding-bottom: var(--ut-space-16) !important;
}
.ut-pb-20 {
  padding-bottom: var(--ut-space-20) !important;
}

/* Padding Left */
.ut-pl-0 {
  padding-left: 0 !important;
}
.ut-pl-0-5 {
  padding-left: var(--ut-space-0-5) !important;
}
.ut-pl-1 {
  padding-left: var(--ut-space-1) !important;
}
.ut-pl-1-5 {
  padding-left: var(--ut-space-1-5) !important;
}
.ut-pl-2 {
  padding-left: var(--ut-space-2) !important;
}
.ut-pl-2-5 {
  padding-left: var(--ut-space-2-5) !important;
}
.ut-pl-3 {
  padding-left: var(--ut-space-3) !important;
}
.ut-pl-3-5 {
  padding-left: var(--ut-space-3-5) !important;
}
.ut-pl-4 {
  padding-left: var(--ut-space-4) !important;
}
.ut-pl-5 {
  padding-left: var(--ut-space-5) !important;
}
.ut-pl-6 {
  padding-left: var(--ut-space-6) !important;
}
.ut-pl-7 {
  padding-left: var(--ut-space-7) !important;
}
.ut-pl-8 {
  padding-left: var(--ut-space-8) !important;
}
.ut-pl-9 {
  padding-left: var(--ut-space-9) !important;
}
.ut-pl-10 {
  padding-left: var(--ut-space-10) !important;
}

/* Padding Right */
.ut-pr-0 {
  padding-right: 0 !important;
}
.ut-pr-0-5 {
  padding-right: var(--ut-space-0-5) !important;
}
.ut-pr-1 {
  padding-right: var(--ut-space-1) !important;
}
.ut-pr-1-5 {
  padding-right: var(--ut-space-1-5) !important;
}
.ut-pr-2 {
  padding-right: var(--ut-space-2) !important;
}
.ut-pr-2-5 {
  padding-right: var(--ut-space-2-5) !important;
}
.ut-pr-3 {
  padding-right: var(--ut-space-3) !important;
}
.ut-pr-3-5 {
  padding-right: var(--ut-space-3-5) !important;
}
.ut-pr-4 {
  padding-right: var(--ut-space-4) !important;
}
.ut-pr-5 {
  padding-right: var(--ut-space-5) !important;
}
.ut-pr-6 {
  padding-right: var(--ut-space-6) !important;
}
.ut-pr-7 {
  padding-right: var(--ut-space-7) !important;
}
.ut-pr-8 {
  padding-right: var(--ut-space-8) !important;
}
.ut-pr-9 {
  padding-right: var(--ut-space-9) !important;
}
.ut-pr-10 {
  padding-right: var(--ut-space-10) !important;
}

/* Padding X & Y */
.ut-px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.ut-px-1 {
  padding-left: var(--ut-space-1) !important;
  padding-right: var(--ut-space-1) !important;
}
.ut-px-2 {
  padding-left: var(--ut-space-2) !important;
  padding-right: var(--ut-space-2) !important;
}
.ut-px-3 {
  padding-left: var(--ut-space-3) !important;
  padding-right: var(--ut-space-3) !important;
}
.ut-px-4 {
  padding-left: var(--ut-space-4) !important;
  padding-right: var(--ut-space-4) !important;
}
.ut-px-5 {
  padding-left: var(--ut-space-5) !important;
  padding-right: var(--ut-space-5) !important;
}
.ut-px-6 {
  padding-left: var(--ut-space-6) !important;
  padding-right: var(--ut-space-6) !important;
}
.ut-px-7 {
  padding-left: var(--ut-space-7) !important;
  padding-right: var(--ut-space-7) !important;
}
.ut-px-8 {
  padding-left: var(--ut-space-8) !important;
  padding-right: var(--ut-space-8) !important;
}
.ut-px-9 {
  padding-left: var(--ut-space-9) !important;
  padding-right: var(--ut-space-9) !important;
}
.ut-px-10 {
  padding-left: var(--ut-space-10) !important;
  padding-right: var(--ut-space-10) !important;
}

.ut-py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.ut-py-1 {
  padding-top: var(--ut-space-1) !important;
  padding-bottom: var(--ut-space-1) !important;
}
.ut-py-2 {
  padding-top: var(--ut-space-2) !important;
  padding-bottom: var(--ut-space-2) !important;
}
.ut-py-3 {
  padding-top: var(--ut-space-3) !important;
  padding-bottom: var(--ut-space-3) !important;
}
.ut-py-4 {
  padding-top: var(--ut-space-4) !important;
  padding-bottom: var(--ut-space-4) !important;
}
.ut-py-5 {
  padding-top: var(--ut-space-5) !important;
  padding-bottom: var(--ut-space-5) !important;
}
.ut-py-6 {
  padding-top: var(--ut-space-6) !important;
  padding-bottom: var(--ut-space-6) !important;
}
.ut-py-7 {
  padding-top: var(--ut-space-7) !important;
  padding-bottom: var(--ut-space-7) !important;
}
.ut-py-8 {
  padding-top: var(--ut-space-8) !important;
  padding-bottom: var(--ut-space-8) !important;
}
.ut-py-9 {
  padding-top: var(--ut-space-9) !important;
  padding-bottom: var(--ut-space-9) !important;
}
.ut-py-10 {
  padding-top: var(--ut-space-10) !important;
  padding-bottom: var(--ut-space-10) !important;
}

/* ============================================
   4. DISPLAY & VISIBILITY (Complete)
   ============================================ */
.ut-block {
  display: block !important;
}
.ut-inline-block {
  display: inline-block !important;
}
.ut-inline {
  display: inline !important;
}
.ut-flex {
  display: flex !important;
}
.ut-inline-flex {
  display: inline-flex !important;
}
.ut-grid {
  display: grid !important;
}
.ut-inline-grid {
  display: inline-grid !important;
}
.ut-table {
  display: table !important;
}
.ut-table-cell {
  display: table-cell !important;
}
.ut-table-row {
  display: table-row !important;
}
.ut-hidden {
  display: none !important;
}
.ut-contents {
  display: contents !important;
}
.ut-flow-root {
  display: flow-root !important;
}

/* Visibility */
.ut-visible {
  visibility: visible !important;
}
.ut-invisible {
  visibility: hidden !important;
}
.ut-collapse {
  visibility: collapse !important;
}

/* Opacity */
.ut-opacity-0 {
  opacity: 0 !important;
}
.ut-opacity-5 {
  opacity: 0.05 !important;
}
.ut-opacity-10 {
  opacity: 0.1 !important;
}
.ut-opacity-20 {
  opacity: 0.2 !important;
}
.ut-opacity-25 {
  opacity: 0.25 !important;
}
.ut-opacity-30 {
  opacity: 0.3 !important;
}
.ut-opacity-40 {
  opacity: 0.4 !important;
}
.ut-opacity-50 {
  opacity: 0.5 !important;
}
.ut-opacity-60 {
  opacity: 0.6 !important;
}
.ut-opacity-70 {
  opacity: 0.7 !important;
}
.ut-opacity-75 {
  opacity: 0.75 !important;
}
.ut-opacity-80 {
  opacity: 0.8 !important;
}
.ut-opacity-90 {
  opacity: 0.9 !important;
}
.ut-opacity-95 {
  opacity: 0.95 !important;
}
.ut-opacity-100 {
  opacity: 1 !important;
}

/* ============================================
   5. FLEXBOX (Complete Properties)
   ============================================ */
/* Direction */
.ut-flex-row {
  flex-direction: row !important;
}
.ut-flex-row-reverse {
  flex-direction: row-reverse !important;
}
.ut-flex-col {
  flex-direction: column !important;
}
.ut-flex-col-reverse {
  flex-direction: column-reverse !important;
}

/* Wrap */
.ut-flex-wrap {
  flex-wrap: wrap !important;
}
.ut-flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}
.ut-flex-nowrap {
  flex-wrap: nowrap !important;
}

/* Justify Content */
.ut-justify-start {
  justify-content: flex-start !important;
}
.ut-justify-end {
  justify-content: flex-end !important;
}
.ut-justify-center {
  justify-content: center !important;
}
.ut-justify-between {
  justify-content: space-between !important;
}
.ut-justify-around {
  justify-content: space-around !important;
}
.ut-justify-evenly {
  justify-content: space-evenly !important;
}

/* Align Items */
.ut-items-start {
  align-items: flex-start !important;
}
.ut-items-end {
  align-items: flex-end !important;
}
.ut-items-center {
  align-items: center !important;
}
.ut-items-baseline {
  align-items: baseline !important;
}
.ut-items-stretch {
  align-items: stretch !important;
}

/* Align Self */
.ut-self-auto {
  align-self: auto !important;
}
.ut-self-start {
  align-self: flex-start !important;
}
.ut-self-end {
  align-self: flex-end !important;
}
.ut-self-center {
  align-self: center !important;
}
.ut-self-stretch {
  align-self: stretch !important;
}
.ut-self-baseline {
  align-self: baseline !important;
}

/* Align Content */
.ut-content-start {
  align-content: flex-start !important;
}
.ut-content-end {
  align-content: flex-end !important;
}
.ut-content-center {
  align-content: center !important;
}
.ut-content-between {
  align-content: space-between !important;
}
.ut-content-around {
  align-content: space-around !important;
}
.ut-content-stretch {
  align-content: stretch !important;
}

/* Flex Grow & Shrink */
.ut-flex-1 {
  flex: 1 1 0% !important;
}
.ut-flex-auto {
  flex: 1 1 auto !important;
}
.ut-flex-initial {
  flex: 0 1 auto !important;
}
.ut-flex-none {
  flex: none !important;
}
.ut-grow-0 {
  flex-grow: 0 !important;
}
.ut-grow {
  flex-grow: 1 !important;
}
.ut-shrink-0 {
  flex-shrink: 0 !important;
}
.ut-shrink {
  flex-shrink: 1 !important;
}

/* Order */
.ut-order-first {
  order: -9999 !important;
}
.ut-order-last {
  order: 9999 !important;
}
.ut-order-0 {
  order: 0 !important;
}
.ut-order-1 {
  order: 1 !important;
}
.ut-order-2 {
  order: 2 !important;
}
.ut-order-3 {
  order: 3 !important;
}
.ut-order-4 {
  order: 4 !important;
}
.ut-order-5 {
  order: 5 !important;
}

/* Gaps (Complete) */
.ut-gap-0 {
  gap: 0 !important;
}
.ut-gap-0-5 {
  gap: var(--ut-space-0-5) !important;
}
.ut-gap-1 {
  gap: var(--ut-space-1) !important;
}
.ut-gap-1-5 {
  gap: var(--ut-space-1-5) !important;
}
.ut-gap-2 {
  gap: var(--ut-space-2) !important;
}
.ut-gap-2-5 {
  gap: var(--ut-space-2-5) !important;
}
.ut-gap-3 {
  gap: var(--ut-space-3) !important;
}
.ut-gap-3-5 {
  gap: var(--ut-space-3-5) !important;
}
.ut-gap-4 {
  gap: var(--ut-space-4) !important;
}
.ut-gap-5 {
  gap: var(--ut-space-5) !important;
}
.ut-gap-6 {
  gap: var(--ut-space-6) !important;
}
.ut-gap-7 {
  gap: var(--ut-space-7) !important;
}
.ut-gap-8 {
  gap: var(--ut-space-8) !important;
}
.ut-gap-9 {
  gap: var(--ut-space-9) !important;
}
.ut-gap-10 {
  gap: var(--ut-space-10) !important;
}
.ut-gap-11 {
  gap: var(--ut-space-11) !important;
}
.ut-gap-12 {
  gap: var(--ut-space-12) !important;
}

.ut-gap-x-0 {
  column-gap: 0 !important;
}
.ut-gap-x-1 {
  column-gap: var(--ut-space-1) !important;
}
.ut-gap-x-2 {
  column-gap: var(--ut-space-2) !important;
}
.ut-gap-x-3 {
  column-gap: var(--ut-space-3) !important;
}
.ut-gap-x-4 {
  column-gap: var(--ut-space-4) !important;
}
.ut-gap-x-5 {
  column-gap: var(--ut-space-5) !important;
}

.ut-gap-y-0 {
  row-gap: 0 !important;
}
.ut-gap-y-1 {
  row-gap: var(--ut-space-1) !important;
}
.ut-gap-y-2 {
  row-gap: var(--ut-space-2) !important;
}
.ut-gap-y-3 {
  row-gap: var(--ut-space-3) !important;
}
.ut-gap-y-4 {
  row-gap: var(--ut-space-4) !important;
}
.ut-gap-y-5 {
  row-gap: var(--ut-space-5) !important;
}

/* ============================================
   6. GRID (Complete)
   ============================================ */
/* Template Columns */
.ut-grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.ut-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ut-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.ut-grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.ut-grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.ut-grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
.ut-grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}
.ut-grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
}
.ut-grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
}
.ut-grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
}
.ut-grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
}
.ut-grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}
.ut-grid-cols-none {
  grid-template-columns: none !important;
}

/* Template Rows */
.ut-grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr)) !important;
}
.ut-grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}
.ut-grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}
.ut-grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
}
.ut-grid-rows-5 {
  grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
}
.ut-grid-rows-6 {
  grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
}
.ut-grid-rows-none {
  grid-template-rows: none !important;
}

/* Span Columns */
.ut-col-span-1 {
  grid-column: span 1 / span 1 !important;
}
.ut-col-span-2 {
  grid-column: span 2 / span 2 !important;
}
.ut-col-span-3 {
  grid-column: span 3 / span 3 !important;
}
.ut-col-span-4 {
  grid-column: span 4 / span 4 !important;
}
.ut-col-span-5 {
  grid-column: span 5 / span 5 !important;
}
.ut-col-span-6 {
  grid-column: span 6 / span 6 !important;
}
.ut-col-span-7 {
  grid-column: span 7 / span 7 !important;
}
.ut-col-span-8 {
  grid-column: span 8 / span 8 !important;
}
.ut-col-span-9 {
  grid-column: span 9 / span 9 !important;
}
.ut-col-span-10 {
  grid-column: span 10 / span 10 !important;
}
.ut-col-span-11 {
  grid-column: span 11 / span 11 !important;
}
.ut-col-span-12 {
  grid-column: span 12 / span 12 !important;
}
.ut-col-span-full {
  grid-column: 1 / -1 !important;
}

/* Span Rows */
.ut-row-span-1 {
  grid-row: span 1 / span 1 !important;
}
.ut-row-span-2 {
  grid-row: span 2 / span 2 !important;
}
.ut-row-span-3 {
  grid-row: span 3 / span 3 !important;
}
.ut-row-span-4 {
  grid-row: span 4 / span 4 !important;
}
.ut-row-span-5 {
  grid-row: span 5 / span 5 !important;
}
.ut-row-span-6 {
  grid-row: span 6 / span 6 !important;
}
.ut-row-span-full {
  grid-row: 1 / -1 !important;
}

/* Place Items */
.ut-place-items-start {
  place-items: start !important;
}
.ut-place-items-end {
  place-items: end !important;
}
.ut-place-items-center {
  place-items: center !important;
}
.ut-place-items-stretch {
  place-items: stretch !important;
}

/* ============================================
   7. SIZING - WIDTH (Complete)
   ============================================ */
.ut-w-0 {
  width: 0 !important;
}
.ut-w-1 {
  width: 0.25rem !important;
}
.ut-w-2 {
  width: 0.5rem !important;
}
.ut-w-3 {
  width: 0.75rem !important;
}
.ut-w-4 {
  width: 1rem !important;
}
.ut-w-5 {
  width: 1.25rem !important;
}
.ut-w-6 {
  width: 1.5rem !important;
}
.ut-w-7 {
  width: 1.75rem !important;
}
.ut-w-8 {
  width: 2rem !important;
}
.ut-w-9 {
  width: 2.25rem !important;
}
.ut-w-10 {
  width: 2.5rem !important;
}
.ut-w-11 {
  width: 2.75rem !important;
}
.ut-w-12 {
  width: 3rem !important;
}
.ut-w-14 {
  width: 3.5rem !important;
}
.ut-w-16 {
  width: 4rem !important;
}
.ut-w-20 {
  width: 5rem !important;
}
.ut-w-24 {
  width: 6rem !important;
}
.ut-w-32 {
  width: 8rem !important;
}
.ut-w-40 {
  width: 10rem !important;
}
.ut-w-48 {
  width: 12rem !important;
}
.ut-w-56 {
  width: 14rem !important;
}
.ut-w-64 {
  width: 16rem !important;
}

/* Percentage Widths */
.ut-w-1\/2 {
  width: 50% !important;
}
.ut-w-1\/3 {
  width: 33.333333% !important;
}
.ut-w-2\/3 {
  width: 66.666667% !important;
}
.ut-w-1\/4 {
  width: 25% !important;
}
.ut-w-2\/4 {
  width: 50% !important;
}
.ut-w-3\/4 {
  width: 75% !important;
}
.ut-w-1\/5 {
  width: 20% !important;
}
.ut-w-2\/5 {
  width: 40% !important;
}
.ut-w-3\/5 {
  width: 60% !important;
}
.ut-w-4\/5 {
  width: 80% !important;
}
.ut-w-1\/6 {
  width: 16.666667% !important;
}
.ut-w-2\/6 {
  width: 33.333333% !important;
}
.ut-w-3\/6 {
  width: 50% !important;
}
.ut-w-4\/6 {
  width: 66.666667% !important;
}
.ut-w-5\/6 {
  width: 83.333333% !important;
}

/* Viewport & Auto */
.ut-w-auto {
  width: auto !important;
}
.ut-w-full {
  width: 100% !important;
}
.ut-w-screen {
  width: 100vw !important;
}
.ut-w-min {
  width: min-content !important;
}
.ut-w-max {
  width: max-content !important;
}
.ut-w-fit {
  width: fit-content !important;
}

/* Max Width */
.ut-max-w-none {
  max-width: none !important;
}
.ut-max-w-xs {
  max-width: 20rem !important;
}
.ut-max-w-sm {
  max-width: 24rem !important;
}
.ut-max-w-md {
  max-width: 28rem !important;
}
.ut-max-w-lg {
  max-width: 32rem !important;
}
.ut-max-w-xl {
  max-width: 36rem !important;
}
.ut-max-w-2xl {
  max-width: 42rem !important;
}
.ut-max-w-3xl {
  max-width: 48rem !important;
}
.ut-max-w-4xl {
  max-width: 56rem !important;
}
.ut-max-w-5xl {
  max-width: 64rem !important;
}
.ut-max-w-6xl {
  max-width: 72rem !important;
}
.ut-max-w-7xl {
  max-width: 80rem !important;
}
.ut-max-w-full {
  max-width: 100% !important;
}
.ut-max-w-screen-sm {
  max-width: 640px !important;
}
.ut-max-w-screen-md {
  max-width: 768px !important;
}
.ut-max-w-screen-lg {
  max-width: 1024px !important;
}
.ut-max-w-screen-xl {
  max-width: 1280px !important;
}
.ut-max-w-screen-2xl {
  max-width: 1536px !important;
}

/* Min Width */
.ut-min-w-0 {
  min-width: 0 !important;
}
.ut-min-w-full {
  min-width: 100% !important;
}
.ut-min-w-min {
  min-width: min-content !important;
}
.ut-min-w-max {
  min-width: max-content !important;
}
.ut-min-w-fit {
  min-width: fit-content !important;
}

/* ============================================
   8. SIZING - HEIGHT (Complete)
   ============================================ */
.ut-h-0 {
  height: 0 !important;
}
.ut-h-1 {
  height: 0.25rem !important;
}
.ut-h-2 {
  height: 0.5rem !important;
}
.ut-h-3 {
  height: 0.75rem !important;
}
.ut-h-4 {
  height: 1rem !important;
}
.ut-h-5 {
  height: 1.25rem !important;
}
.ut-h-6 {
  height: 1.5rem !important;
}
.ut-h-7 {
  height: 1.75rem !important;
}
.ut-h-8 {
  height: 2rem !important;
}
.ut-h-9 {
  height: 2.25rem !important;
}
.ut-h-10 {
  height: 2.5rem !important;
}
.ut-h-11 {
  height: 2.75rem !important;
}
.ut-h-12 {
  height: 3rem !important;
}
.ut-h-14 {
  height: 3.5rem !important;
}
.ut-h-16 {
  height: 4rem !important;
}
.ut-h-20 {
  height: 5rem !important;
}
.ut-h-24 {
  height: 6rem !important;
}
.ut-h-32 {
  height: 8rem !important;
}
.ut-h-40 {
  height: 10rem !important;
}
.ut-h-48 {
  height: 12rem !important;
}
.ut-h-56 {
  height: 14rem !important;
}
.ut-h-64 {
  height: 16rem !important;
}
.ut-h-72 {
  height: 18rem !important;
}
.ut-h-80 {
  height: 20rem !important;
}
.ut-h-96 {
  height: 24rem !important;
}

.ut-h-auto {
  height: auto !important;
}
.ut-h-full {
  height: 100% !important;
}
.ut-h-screen {
  height: 100vh !important;
}
.ut-h-min {
  height: min-content !important;
}
.ut-h-max {
  height: max-content !important;
}
.ut-h-fit {
  height: fit-content !important;
}

/* Max Height */
.ut-max-h-none {
  max-height: none !important;
}
.ut-max-h-full {
  max-height: 100% !important;
}
.ut-max-h-screen {
  max-height: 100vh !important;
}
.ut-max-h-0 {
  max-height: 0 !important;
}
.ut-max-h-8 {
  max-height: 2rem !important;
}
.ut-max-h-16 {
  max-height: 4rem !important;
}
.ut-max-h-24 {
  max-height: 6rem !important;
}
.ut-max-h-32 {
  max-height: 8rem !important;
}
.ut-max-h-40 {
  max-height: 10rem !important;
}
.ut-max-h-48 {
  max-height: 12rem !important;
}
.ut-max-h-56 {
  max-height: 14rem !important;
}
.ut-max-h-64 {
  max-height: 16rem !important;
}

/* Min Height */
.ut-min-h-0 {
  min-height: 0 !important;
}
.ut-min-h-full {
  min-height: 100% !important;
}
.ut-min-h-screen {
  min-height: 100vh !important;
}

/* ============================================
   9. BACKGROUNDS (Complete)
   ============================================ */
/* Background Color */
.ut-bg-transparent {
  background-color: transparent !important;
}
.ut-bg-white {
  background-color: white !important;
}
.ut-bg-black {
  background-color: black !important;
}
.ut-bg-primary {
  background-color: var(--bs-primary, #0d6efd) !important;
}
.ut-bg-secondary {
  background-color: var(--bs-secondary, #6c757d) !important;
}
.ut-bg-success {
  background-color: var(--bs-success, #198754) !important;
}
.ut-bg-danger {
  background-color: var(--bs-danger, #dc3545) !important;
}
.ut-bg-warning {
  background-color: var(--bs-warning, #ffc107) !important;
}
.ut-bg-info {
  background-color: var(--bs-info, #0dcaf0) !important;
}
.ut-bg-light {
  background-color: var(--bs-light, #f8f9fa) !important;
}
.ut-bg-dark {
  background-color: var(--bs-dark, #212529) !important;
}

/* Soft Backgrounds (with opacity) */
.ut-bg-primary-soft {
  background-color: rgba(13, 110, 253, 0.1) !important;
}
.ut-bg-success-soft {
  background-color: rgba(25, 135, 84, 0.1) !important;
}
.ut-bg-danger-soft {
  background-color: rgba(220, 53, 69, 0.1) !important;
}
.ut-bg-warning-soft {
  background-color: rgba(255, 193, 7, 0.1) !important;
}
.ut-bg-info-soft {
  background-color: rgba(13, 202, 240, 0.1) !important;
}

/* Background Position */
.ut-bg-center {
  background-position: center !important;
}
.ut-bg-top {
  background-position: top !important;
}
.ut-bg-bottom {
  background-position: bottom !important;
}
.ut-bg-left {
  background-position: left !important;
}
.ut-bg-right {
  background-position: right !important;
}

/* Background Repeat */
.ut-bg-repeat {
  background-repeat: repeat !important;
}
.ut-bg-no-repeat {
  background-repeat: no-repeat !important;
}
.ut-bg-repeat-x {
  background-repeat: repeat-x !important;
}
.ut-bg-repeat-y {
  background-repeat: repeat-y !important;
}
.ut-bg-round {
  background-repeat: round !important;
}
.ut-bg-space {
  background-repeat: space !important;
}

/* Background Size */
.ut-bg-auto {
  background-size: auto !important;
}
.ut-bg-cover {
  background-size: cover !important;
}
.ut-bg-contain {
  background-size: contain !important;
}

/* Background Attachment */
.ut-bg-fixed {
  background-attachment: fixed !important;
}
.ut-bg-local {
  background-attachment: local !important;
}
.ut-bg-scroll {
  background-attachment: scroll !important;
}

/* Background Clip */
.ut-bg-clip-border {
  background-clip: border-box !important;
}
.ut-bg-clip-padding {
  background-clip: padding-box !important;
}
.ut-bg-clip-content {
  background-clip: content-box !important;
}
.ut-bg-clip-text {
  background-clip: text !important;
}

/* ============================================
   10. BORDERS (Complete)
   ============================================ */
/* Border Widths */
.ut-border {
  border: 1px solid var(--bs-border-color, #dee2e6) !important;
}
.ut-border-0 {
  border-width: 0 !important;
}
.ut-border-2 {
  border-width: 2px !important;
}
.ut-border-4 {
  border-width: 4px !important;
}
.ut-border-8 {
  border-width: 8px !important;
}

/* Border Top */
.ut-border-t {
  border-top: 1px solid var(--bs-border-color, #dee2e6) !important;
}
.ut-border-t-0 {
  border-top-width: 0 !important;
}
.ut-border-t-2 {
  border-top-width: 2px !important;
}
.ut-border-t-4 {
  border-top-width: 4px !important;
}

/* Border Right */
.ut-border-r {
  border-right: 1px solid var(--bs-border-color, #dee2e6) !important;
}
.ut-border-r-0 {
  border-right-width: 0 !important;
}
.ut-border-r-2 {
  border-right-width: 2px !important;
}

/* Border Bottom */
.ut-border-b {
  border-bottom: 1px solid var(--bs-border-color, #dee2e6) !important;
}
.ut-border-b-0 {
  border-bottom-width: 0 !important;
}
.ut-border-b-2 {
  border-bottom-width: 2px !important;
}

/* Border Left */
.ut-border-l {
  border-left: 1px solid var(--bs-border-color, #dee2e6) !important;
}
.ut-border-l-0 {
  border-left-width: 0 !important;
}
.ut-border-l-2 {
  border-left-width: 2px !important;
}

/* Border Colors */
.ut-border-transparent {
  border-color: transparent !important;
}
.ut-border-white {
  border-color: white !important;
}
.ut-border-black {
  border-color: black !important;
}
.ut-border-primary {
  border-color: var(--bs-primary, #0d6efd) !important;
}
.ut-border-secondary {
  border-color: var(--bs-secondary, #6c757d) !important;
}
.ut-border-success {
  border-color: var(--bs-success, #198754) !important;
}
.ut-border-danger {
  border-color: var(--bs-danger, #dc3545) !important;
}
.ut-border-warning {
  border-color: var(--bs-warning, #ffc107) !important;
}
.ut-border-info {
  border-color: var(--bs-info, #0dcaf0) !important;
}
.ut-border-light {
  border-color: var(--bs-light, #f8f9fa) !important;
}
.ut-border-dark {
  border-color: var(--bs-dark, #212529) !important;
}

/* Border Style */
.ut-border-solid {
  border-style: solid !important;
}
.ut-border-dashed {
  border-style: dashed !important;
}
.ut-border-dotted {
  border-style: dotted !important;
}
.ut-border-double {
  border-style: double !important;
}
.ut-border-none {
  border-style: none !important;
}

/* Border Radius - Complete */
.ut-rounded-none {
  border-radius: 0 !important;
}
.ut-rounded-xs {
  border-radius: var(--ut-radius-xs) !important;
}
.ut-rounded-sm {
  border-radius: var(--ut-radius-sm) !important;
}
.ut-rounded {
  border-radius: var(--ut-radius-md) !important;
}
.ut-rounded-md {
  border-radius: var(--ut-radius-md) !important;
}
.ut-rounded-lg {
  border-radius: var(--ut-radius-lg) !important;
}
.ut-rounded-xl {
  border-radius: var(--ut-radius-xl) !important;
}
.ut-rounded-2xl {
  border-radius: var(--ut-radius-2xl) !important;
}
.ut-rounded-3xl {
  border-radius: var(--ut-radius-3xl) !important;
}
.ut-rounded-full {
  border-radius: var(--ut-radius-full) !important;
}

/* Border Radius - Specific Corners */
.ut-rounded-t-none {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.ut-rounded-t-sm {
  border-top-left-radius: var(--ut-radius-sm) !important;
  border-top-right-radius: var(--ut-radius-sm) !important;
}
.ut-rounded-t {
  border-top-left-radius: var(--ut-radius-md) !important;
  border-top-right-radius: var(--ut-radius-md) !important;
}
.ut-rounded-t-lg {
  border-top-left-radius: var(--ut-radius-lg) !important;
  border-top-right-radius: var(--ut-radius-lg) !important;
}
.ut-rounded-t-xl {
  border-top-left-radius: var(--ut-radius-xl) !important;
  border-top-right-radius: var(--ut-radius-xl) !important;
}
.ut-rounded-t-2xl {
  border-top-left-radius: var(--ut-radius-2xl) !important;
  border-top-right-radius: var(--ut-radius-2xl) !important;
}
.ut-rounded-t-full {
  border-top-left-radius: var(--ut-radius-full) !important;
  border-top-right-radius: var(--ut-radius-full) !important;
}

.ut-rounded-b-none {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.ut-rounded-b-sm {
  border-bottom-left-radius: var(--ut-radius-sm) !important;
  border-bottom-right-radius: var(--ut-radius-sm) !important;
}
.ut-rounded-b {
  border-bottom-left-radius: var(--ut-radius-md) !important;
  border-bottom-right-radius: var(--ut-radius-md) !important;
}
.ut-rounded-b-lg {
  border-bottom-left-radius: var(--ut-radius-lg) !important;
  border-bottom-right-radius: var(--ut-radius-lg) !important;
}
.ut-rounded-b-full {
  border-bottom-left-radius: var(--ut-radius-full) !important;
  border-bottom-right-radius: var(--ut-radius-full) !important;
}

.ut-rounded-l-none {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.ut-rounded-l-sm {
  border-top-left-radius: var(--ut-radius-sm) !important;
  border-bottom-left-radius: var(--ut-radius-sm) !important;
}
.ut-rounded-l {
  border-top-left-radius: var(--ut-radius-md) !important;
  border-bottom-left-radius: var(--ut-radius-md) !important;
}

.ut-rounded-r-none {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.ut-rounded-r-sm {
  border-top-right-radius: var(--ut-radius-sm) !important;
  border-bottom-right-radius: var(--ut-radius-sm) !important;
}
.ut-rounded-r {
  border-top-right-radius: var(--ut-radius-md) !important;
  border-bottom-right-radius: var(--ut-radius-md) !important;
}

.ut-rounded-tl-none {
  border-top-left-radius: 0 !important;
}
.ut-rounded-tr-none {
  border-top-right-radius: 0 !important;
}
.ut-rounded-bl-none {
  border-bottom-left-radius: 0 !important;
}
.ut-rounded-br-none {
  border-bottom-right-radius: 0 !important;
}

/* ============================================
   11. TYPOGRAPHY (Complete)
   ============================================ */
/* Font Size */
.ut-text-xs {
  font-size: var(--ut-font-xs) !important;
}
.ut-text-sm {
  font-size: var(--ut-font-sm) !important;
}
.ut-text-base {
  font-size: var(--ut-font-base) !important;
}
.ut-text-lg {
  font-size: var(--ut-font-lg) !important;
}
.ut-text-xl {
  font-size: var(--ut-font-xl) !important;
}
.ut-text-2xl {
  font-size: var(--ut-font-2xl) !important;
}
.ut-text-3xl {
  font-size: var(--ut-font-3xl) !important;
}
.ut-text-4xl {
  font-size: var(--ut-font-4xl) !important;
}
.ut-text-5xl {
  font-size: var(--ut-font-5xl) !important;
}
.ut-text-6xl {
  font-size: var(--ut-font-6xl) !important;
}
.ut-text-7xl {
  font-size: var(--ut-font-7xl) !important;
}
.ut-text-8xl {
  font-size: var(--ut-font-8xl) !important;
}
.ut-text-9xl {
  font-size: var(--ut-font-9xl) !important;
}

/* Font Weight */
.ut-font-thin {
  font-weight: 100 !important;
}
.ut-font-extralight {
  font-weight: 200 !important;
}
.ut-font-light {
  font-weight: 300 !important;
}
.ut-font-normal {
  font-weight: 400 !important;
}
.ut-font-medium {
  font-weight: 500 !important;
}
.ut-font-semibold {
  font-weight: 600 !important;
}
.ut-font-bold {
  font-weight: 700 !important;
}
.ut-font-extrabold {
  font-weight: 800 !important;
}
.ut-font-black {
  font-weight: 900 !important;
}

/* Text Alignment */
.ut-text-left {
  text-align: left !important;
}
.ut-text-center {
  text-align: center !important;
}
.ut-text-right {
  text-align: right !important;
}
.ut-text-justify {
  text-align: justify !important;
}
.ut-text-start {
  text-align: start !important;
}
.ut-text-end {
  text-align: end !important;
}

/* Text Color */
.ut-text-white {
  color: white !important;
}
.ut-text-black {
  color: black !important;
}
.ut-text-primary {
  color: var(--bs-primary, #0d6efd) !important;
}
.ut-text-secondary {
  color: var(--bs-secondary, #6c757d) !important;
}
.ut-text-success {
  color: var(--bs-success, #198754) !important;
}
.ut-text-danger {
  color: var(--bs-danger, #dc3545) !important;
}
.ut-text-warning {
  color: var(--bs-warning, #ffc107) !important;
}
.ut-text-info {
  color: var(--bs-info, #0dcaf0) !important;
}
.ut-text-light {
  color: var(--bs-light, #f8f9fa) !important;
}
.ut-text-dark {
  color: var(--bs-dark, #212529) !important;
}
.ut-text-muted {
  color: var(--bs-secondary-color, #6c757d) !important;
}

/* Text Transform */
.ut-uppercase {
  text-transform: uppercase !important;
}
.ut-lowercase {
  text-transform: lowercase !important;
}
.ut-capitalize {
  text-transform: capitalize !important;
}
.ut-normal-case {
  text-transform: none !important;
}

/* Text Decoration */
.ut-underline {
  text-decoration: underline !important;
}
.ut-line-through {
  text-decoration: line-through !important;
}
.ut-no-underline {
  text-decoration: none !important;
}

/* Text Style */
.ut-italic {
  font-style: italic !important;
}
.ut-not-italic {
  font-style: normal !important;
}

/* Letter Spacing */
.ut-tracking-tighter {
  letter-spacing: -0.05em !important;
}
.ut-tracking-tight {
  letter-spacing: -0.025em !important;
}
.ut-tracking-normal {
  letter-spacing: 0 !important;
}
.ut-tracking-wide {
  letter-spacing: 0.025em !important;
}
.ut-tracking-wider {
  letter-spacing: 0.05em !important;
}
.ut-tracking-widest {
  letter-spacing: 0.1em !important;
}

/* Line Height */
.ut-leading-none {
  line-height: 1 !important;
}
.ut-leading-tight {
  line-height: 1.25 !important;
}
.ut-leading-snug {
  line-height: 1.375 !important;
}
.ut-leading-normal {
  line-height: 1.5 !important;
}
.ut-leading-relaxed {
  line-height: 1.625 !important;
}
.ut-leading-loose {
  line-height: 2 !important;
}

/* Text Overflow */
.ut-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.ut-text-ellipsis {
  text-overflow: ellipsis !important;
}
.ut-text-clip {
  text-overflow: clip !important;
}

/* Word Break & White Space */
.ut-break-normal {
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.ut-break-words {
  overflow-wrap: break-word !important;
}
.ut-break-all {
  word-break: break-all !important;
}
.ut-whitespace-normal {
  white-space: normal !important;
}
.ut-whitespace-nowrap {
  white-space: nowrap !important;
}
.ut-whitespace-pre {
  white-space: pre !important;
}
.ut-whitespace-pre-line {
  white-space: pre-line !important;
}
.ut-whitespace-pre-wrap {
  white-space: pre-wrap !important;
}

/* Vertical Align */
.ut-align-baseline {
  vertical-align: baseline !important;
}
.ut-align-top {
  vertical-align: top !important;
}
.ut-align-middle {
  vertical-align: middle !important;
}
.ut-align-bottom {
  vertical-align: bottom !important;
}
.ut-align-text-top {
  vertical-align: text-top !important;
}
.ut-align-text-bottom {
  vertical-align: text-bottom !important;
}

/* ============================================
   12. SHADOWS & EFFECTS (Complete)
   ============================================ */
/* Box Shadows */
.ut-shadow-xs {
  box-shadow: var(--ut-shadow-xs) !important;
}
.ut-shadow-sm {
  box-shadow: var(--ut-shadow-sm) !important;
}
.ut-shadow {
  box-shadow: var(--ut-shadow-md) !important;
}
.ut-shadow-md {
  box-shadow: var(--ut-shadow-md) !important;
}
.ut-shadow-lg {
  box-shadow: var(--ut-shadow-lg) !important;
}
.ut-shadow-xl {
  box-shadow: var(--ut-shadow-xl) !important;
}
.ut-shadow-2xl {
  box-shadow: var(--ut-shadow-2xl) !important;
}
.ut-shadow-inner {
  box-shadow: var(--ut-shadow-inner) !important;
}
.ut-shadow-none {
  box-shadow: none !important;
}

/* Blur Effects */
.ut-blur-none {
  filter: blur(0) !important;
}
.ut-blur-sm {
  filter: blur(4px) !important;
}
.ut-blur-md {
  filter: blur(8px) !important;
}
.ut-blur-lg {
  filter: blur(12px) !important;
}
.ut-blur-xl {
  filter: blur(16px) !important;
}
.ut-blur-2xl {
  filter: blur(24px) !important;
}
.ut-blur-3xl {
  filter: blur(40px) !important;
}

/* Drop Shadow */
.ut-drop-shadow-sm {
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)) !important;
}
.ut-drop-shadow {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1))
    drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)) !important;
}
.ut-drop-shadow-md {
  filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07))
    drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)) !important;
}
.ut-drop-shadow-lg {
  filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04))
    drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)) !important;
}
.ut-drop-shadow-xl {
  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03))
    drop-shadow(0 8px 5px rgb(0 0 0 / 0.08)) !important;
}
.ut-drop-shadow-none {
  filter: drop-shadow(0 0 #0000) !important;
}

/* Backdrop Blur */
.ut-backdrop-blur-none {
  backdrop-filter: blur(0) !important;
}
.ut-backdrop-blur-sm {
  backdrop-filter: blur(4px) !important;
}
.ut-backdrop-blur-md {
  backdrop-filter: blur(8px) !important;
}
.ut-backdrop-blur-lg {
  backdrop-filter: blur(12px) !important;
}
.ut-backdrop-blur-xl {
  backdrop-filter: blur(16px) !important;
}
.ut-backdrop-blur-2xl {
  backdrop-filter: blur(24px) !important;
}

/* Mix Blend Mode */
.ut-mix-blend-normal {
  mix-blend-mode: normal !important;
}
.ut-mix-blend-multiply {
  mix-blend-mode: multiply !important;
}
.ut-mix-blend-screen {
  mix-blend-mode: screen !important;
}
.ut-mix-blend-overlay {
  mix-blend-mode: overlay !important;
}
.ut-mix-blend-darken {
  mix-blend-mode: darken !important;
}
.ut-mix-blend-lighten {
  mix-blend-mode: lighten !important;
}

/* ============================================
   13. POSITIONING (Complete)
   ============================================ */
.ut-static {
  position: static !important;
}
.ut-fixed {
  position: fixed !important;
}
.ut-absolute {
  position: absolute !important;
}
.ut-relative {
  position: relative !important;
}
.ut-sticky {
  position: sticky !important;
}

/* Positioning Values */
.ut-inset-0 {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}
.ut-inset-auto {
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}
.ut-inset-x-0 {
  left: 0 !important;
  right: 0 !important;
}
.ut-inset-y-0 {
  top: 0 !important;
  bottom: 0 !important;
}

.ut-top-0 {
  top: 0 !important;
}
.ut-top-auto {
  top: auto !important;
}
.ut-top-full {
  top: 100% !important;
}
.ut-right-0 {
  right: 0 !important;
}
.ut-right-auto {
  right: auto !important;
}
.ut-right-full {
  right: 100% !important;
}
.ut-bottom-0 {
  bottom: 0 !important;
}
.ut-bottom-auto {
  bottom: auto !important;
}
.ut-bottom-full {
  bottom: 100% !important;
}
.ut-left-0 {
  left: 0 !important;
}
.ut-left-auto {
  left: auto !important;
}
.ut-left-full {
  left: 100% !important;
}

/* Z-Index */
.ut-z-0 {
  z-index: 0 !important;
}
.ut-z-10 {
  z-index: 10 !important;
}
.ut-z-20 {
  z-index: 20 !important;
}
.ut-z-30 {
  z-index: 30 !important;
}
.ut-z-40 {
  z-index: 40 !important;
}
.ut-z-50 {
  z-index: 50 !important;
}
.ut-z-auto {
  z-index: auto !important;
}
.ut-z-dropdown {
  z-index: var(--ut-z-dropdown) !important;
}
.ut-z-sticky {
  z-index: var(--ut-z-sticky) !important;
}
.ut-z-fixed {
  z-index: var(--ut-z-fixed) !important;
}
.ut-z-modal-backdrop {
  z-index: var(--ut-z-modal-backdrop) !important;
}
.ut-z-modal {
  z-index: var(--ut-z-modal) !important;
}
.ut-z-popover {
  z-index: var(--ut-z-popover) !important;
}
.ut-z-tooltip {
  z-index: var(--ut-z-tooltip) !important;
}
.ut-z-toast {
  z-index: var(--ut-z-toast) !important;
}

/* ============================================
   14. OVERFLOW & SCROLLING (Complete)
   ============================================ */
.ut-overflow-auto {
  overflow: auto !important;
}
.ut-overflow-hidden {
  overflow: hidden !important;
}
.ut-overflow-visible {
  overflow: visible !important;
}
.ut-overflow-scroll {
  overflow: scroll !important;
}
.ut-overflow-x-auto {
  overflow-x: auto !important;
}
.ut-overflow-y-auto {
  overflow-y: auto !important;
}
.ut-overflow-x-hidden {
  overflow-x: hidden !important;
}
.ut-overflow-y-hidden {
  overflow-y: hidden !important;
}
.ut-overflow-x-visible {
  overflow-x: visible !important;
}
.ut-overflow-y-visible {
  overflow-y: visible !important;
}
.ut-overflow-x-scroll {
  overflow-x: scroll !important;
}
.ut-overflow-y-scroll {
  overflow-y: scroll !important;
}

/* Scrolling Behavior */
.ut-scroll-auto {
  scroll-behavior: auto !important;
}
.ut-scroll-smooth {
  scroll-behavior: smooth !important;
}

/* Scroll Margin */
.ut-scroll-m-1 {
  scroll-margin: var(--ut-space-1) !important;
}
.ut-scroll-mt-1 {
  scroll-margin-top: var(--ut-space-1) !important;
}

/* Scroll Padding */
.ut-scroll-p-1 {
  scroll-padding: var(--ut-space-1) !important;
}

/* ============================================
   15. CURSOR & POINTER EVENTS (Complete)
   ============================================ */
.ut-cursor-auto {
  cursor: auto !important;
}
.ut-cursor-default {
  cursor: default !important;
}
.ut-cursor-pointer {
  cursor: pointer !important;
}
.ut-cursor-wait {
  cursor: wait !important;
}
.ut-cursor-text {
  cursor: text !important;
}
.ut-cursor-move {
  cursor: move !important;
}
.ut-cursor-help {
  cursor: help !important;
}
.ut-cursor-not-allowed {
  cursor: not-allowed !important;
}
.ut-cursor-grab {
  cursor: grab !important;
}
.ut-cursor-grabbing {
  cursor: grabbing !important;
}
.ut-cursor-zoom-in {
  cursor: zoom-in !important;
}
.ut-cursor-zoom-out {
  cursor: zoom-out !important;
}

/* Pointer Events */
.ut-pointer-events-none {
  pointer-events: none !important;
}
.ut-pointer-events-auto {
  pointer-events: auto !important;
}

/* User Select */
.ut-select-none {
  user-select: none !important;
}
.ut-select-text {
  user-select: text !important;
}
.ut-select-all {
  user-select: all !important;
}
.ut-select-auto {
  user-select: auto !important;
}

/* ============================================
   16. TRANSITIONS & ANIMATIONS (Complete)
   ============================================ */
.ut-transition-none {
  transition-property: none !important;
}
.ut-transition-all {
  transition-property: all !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: var(--ut-transition-base) !important;
}
.ut-transition {
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke,
    opacity, box-shadow, transform, filter, backdrop-filter !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: var(--ut-transition-base) !important;
}
.ut-transition-colors {
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: var(--ut-transition-base) !important;
}
.ut-transition-opacity {
  transition-property: opacity !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: var(--ut-transition-base) !important;
}
.ut-transition-shadow {
  transition-property: box-shadow !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: var(--ut-transition-base) !important;
}
.ut-transition-transform {
  transition-property: transform !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: var(--ut-transition-base) !important;
}

/* Transition Duration */
.ut-duration-75 {
  transition-duration: 75ms !important;
}
.ut-duration-100 {
  transition-duration: 100ms !important;
}
.ut-duration-150 {
  transition-duration: 150ms !important;
}
.ut-duration-200 {
  transition-duration: 200ms !important;
}
.ut-duration-300 {
  transition-duration: 300ms !important;
}
.ut-duration-500 {
  transition-duration: 500ms !important;
}
.ut-duration-700 {
  transition-duration: 700ms !important;
}
.ut-duration-1000 {
  transition-duration: 1000ms !important;
}

/* Transition Delay */
.ut-delay-75 {
  transition-delay: 75ms !important;
}
.ut-delay-100 {
  transition-delay: 100ms !important;
}
.ut-delay-150 {
  transition-delay: 150ms !important;
}
.ut-delay-200 {
  transition-delay: 200ms !important;
}
.ut-delay-300 {
  transition-delay: 300ms !important;
}
.ut-delay-500 {
  transition-delay: 500ms !important;
}
.ut-delay-700 {
  transition-delay: 700ms !important;
}
.ut-delay-1000 {
  transition-delay: 1000ms !important;
}

/* Transition Timing Function */
.ut-ease-linear {
  transition-timing-function: linear !important;
}
.ut-ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
}
.ut-ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
}
.ut-ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Transform Properties */
.ut-scale-0 {
  transform: scale(0) !important;
}
.ut-scale-50 {
  transform: scale(0.5) !important;
}
.ut-scale-75 {
  transform: scale(0.75) !important;
}
.ut-scale-90 {
  transform: scale(0.9) !important;
}
.ut-scale-95 {
  transform: scale(0.95) !important;
}
.ut-scale-100 {
  transform: scale(1) !important;
}
.ut-scale-105 {
  transform: scale(1.05) !important;
}
.ut-scale-110 {
  transform: scale(1.1) !important;
}
.ut-scale-125 {
  transform: scale(1.25) !important;
}
.ut-scale-150 {
  transform: scale(1.5) !important;
}

.ut-rotate-0 {
  transform: rotate(0deg) !important;
}
.ut-rotate-45 {
  transform: rotate(45deg) !important;
}
.ut-rotate-90 {
  transform: rotate(90deg) !important;
}
.ut-rotate-180 {
  transform: rotate(180deg) !important;
}
.ut-rotate-270 {
  transform: rotate(270deg) !important;
}
.ut-rotate-360 {
  transform: rotate(360deg) !important;
}

/* Hover & Focus Transforms */
.ut-hover-scale:hover {
  transform: scale(1.05) !important;
  transition: transform var(--ut-transition-fast) !important;
}
.ut-hover-scale-down:hover {
  transform: scale(0.95) !important;
}
.ut-hover-rotate:hover {
  transform: rotate(5deg) !important;
}
.ut-hover-shadow:hover {
  box-shadow: var(--ut-shadow-lg) !important;
}
.ut-hover-opacity:hover {
  opacity: 0.8 !important;
}
.ut-hover-brightness:hover {
  filter: brightness(1.1) !important;
}
.ut-focus-ring:focus {
  outline: 2px solid var(--bs-primary, #0d6efd) !important;
  outline-offset: 2px !important;
}
.ut-focus-ring-none:focus {
  outline: none !important;
}

/* ============================================
   17. RESPONSIVE BREAKPOINTS (Complete)
   Usage: .ut-sm-mt-4, .ut-lg-hidden, etc.
   ============================================ */
/* Small (≥576px) */
@media (min-width: 576px) {
  .ut-sm-block {
    display: block !important;
  }
  .ut-sm-inline-block {
    display: inline-block !important;
  }
  .ut-sm-inline {
    display: inline !important;
  }
  .ut-sm-flex {
    display: flex !important;
  }
  .ut-sm-inline-flex {
    display: inline-flex !important;
  }
  .ut-sm-grid {
    display: grid !important;
  }
  .ut-sm-hidden {
    display: none !important;
  }

  .ut-sm-text-left {
    text-align: left !important;
  }
  .ut-sm-text-center {
    text-align: center !important;
  }
  .ut-sm-text-right {
    text-align: right !important;
  }

  .ut-sm-w-auto {
    width: auto !important;
  }
  .ut-sm-w-full {
    width: 100% !important;
  }
  .ut-sm-w-1\/2 {
    width: 50% !important;
  }

  .ut-sm-m-0 {
    margin: 0 !important;
  }
  .ut-sm-mt-0 {
    margin-top: 0 !important;
  }
  .ut-sm-mb-0 {
    margin-bottom: 0 !important;
  }
  .ut-sm-ml-0 {
    margin-left: 0 !important;
  }
  .ut-sm-mr-0 {
    margin-right: 0 !important;
  }
  .ut-sm-p-0 {
    padding: 0 !important;
  }
  .ut-sm-pt-0 {
    padding-top: 0 !important;
  }
  .ut-sm-pb-0 {
    padding-bottom: 0 !important;
  }

  .ut-sm-flex-row {
    flex-direction: row !important;
  }
  .ut-sm-flex-col {
    flex-direction: column !important;
  }
  .ut-sm-items-center {
    align-items: center !important;
  }
  .ut-sm-justify-center {
    justify-content: center !important;
  }

  .ut-sm-order-first {
    order: -9999 !important;
  }
  .ut-sm-order-last {
    order: 9999 !important;
  }
}

/* Medium (≥768px) */
@media (min-width: 768px) {
  .ut-md-block {
    display: block !important;
  }
  .ut-md-inline-block {
    display: inline-block !important;
  }
  .ut-md-flex {
    display: flex !important;
  }
  .ut-md-inline-flex {
    display: inline-flex !important;
  }
  .ut-md-grid {
    display: grid !important;
  }
  .ut-md-hidden {
    display: none !important;
  }

  .ut-md-text-left {
    text-align: left !important;
  }
  .ut-md-text-center {
    text-align: center !important;
  }
  .ut-md-text-right {
    text-align: right !important;
  }

  .ut-md-w-auto {
    width: auto !important;
  }
  .ut-md-w-full {
    width: 100% !important;
  }
  .ut-md-w-1\/2 {
    width: 50% !important;
  }
  .ut-md-w-1\/3 {
    width: 33.333333% !important;
  }
  .ut-md-w-2\/3 {
    width: 66.666667% !important;
  }
  .ut-md-w-1\/4 {
    width: 25% !important;
  }
  .ut-md-w-3\/4 {
    width: 75% !important;
  }

  .ut-md-mt-0 {
    margin-top: 0 !important;
  }
  .ut-md-mt-1 {
    margin-top: var(--ut-space-1) !important;
  }
  .ut-md-mt-2 {
    margin-top: var(--ut-space-2) !important;
  }
  .ut-md-mt-3 {
    margin-top: var(--ut-space-3) !important;
  }
  .ut-md-mt-4 {
    margin-top: var(--ut-space-4) !important;
  }
  .ut-md-mt-5 {
    margin-top: var(--ut-space-5) !important;
  }
  .ut-md-mb-0 {
    margin-bottom: 0 !important;
  }
  .ut-md-mb-4 {
    margin-bottom: var(--ut-space-4) !important;
  }

  .ut-md-flex-row {
    flex-direction: row !important;
  }
  .ut-md-flex-col {
    flex-direction: column !important;
  }
  .ut-md-flex-wrap {
    flex-wrap: wrap !important;
  }
  .ut-md-flex-nowrap {
    flex-wrap: nowrap !important;
  }
  .ut-md-items-center {
    align-items: center !important;
  }
  .ut-md-items-start {
    align-items: flex-start !important;
  }
  .ut-md-justify-between {
    justify-content: space-between !important;
  }
  .ut-md-justify-center {
    justify-content: center !important;
  }
  .ut-md-justify-end {
    justify-content: flex-end !important;
  }

  .ut-md-gap-1 {
    gap: var(--ut-space-1) !important;
  }
  .ut-md-gap-2 {
    gap: var(--ut-space-2) !important;
  }
  .ut-md-gap-3 {
    gap: var(--ut-space-3) !important;
  }
  .ut-md-gap-4 {
    gap: var(--ut-space-4) !important;
  }

  .ut-md-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .ut-md-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .ut-md-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .ut-md-order-first {
    order: -9999 !important;
  }
  .ut-md-order-last {
    order: 9999 !important;
  }
  .ut-md-order-1 {
    order: 1 !important;
  }
  .ut-md-order-2 {
    order: 2 !important;
  }

  .ut-md-absolute {
    position: absolute !important;
  }
  .ut-md-relative {
    position: relative !important;
  }
}

/* Large (≥992px) */
@media (min-width: 992px) {
  .ut-lg-block {
    display: block !important;
  }
  .ut-lg-flex {
    display: flex !important;
  }
  .ut-lg-grid {
    display: grid !important;
  }
  .ut-lg-hidden {
    display: none !important;
  }

  .ut-lg-w-auto {
    width: auto !important;
  }
  .ut-lg-w-full {
    width: 100% !important;
  }
  .ut-lg-w-1\/3 {
    width: 33.333333% !important;
  }
  .ut-lg-w-2\/3 {
    width: 66.666667% !important;
  }
  .ut-lg-w-1\/4 {
    width: 25% !important;
  }
  .ut-lg-w-3\/4 {
    width: 75% !important;
  }

  .ut-lg-mt-0 {
    margin-top: 0 !important;
  }
  .ut-lg-mt-4 {
    margin-top: var(--ut-space-4) !important;
  }
  .ut-lg-mt-5 {
    margin-top: var(--ut-space-5) !important;
  }

  .ut-lg-flex-row {
    flex-direction: row !important;
  }
  .ut-lg-items-center {
    align-items: center !important;
  }
  .ut-lg-justify-between {
    justify-content: space-between !important;
  }

  .ut-lg-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .ut-lg-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .ut-lg-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .ut-lg-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .ut-lg-col-span-2 {
    grid-column: span 2 / span 2 !important;
  }
  .ut-lg-col-span-3 {
    grid-column: span 3 / span 3 !important;
  }
}

/* Extra Large (≥1200px) */
@media (min-width: 1200px) {
  .ut-xl-block {
    display: block !important;
  }
  .ut-xl-flex {
    display: flex !important;
  }
  .ut-xl-hidden {
    display: none !important;
  }
  .ut-xl-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .ut-xl-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .ut-xl-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

/* XXL (≥1400px) */
@media (min-width: 1400px) {
  .ut-xxl-block {
    display: block !important;
  }
  .ut-xxl-flex {
    display: flex !important;
  }
  .ut-xxl-hidden {
    display: none !important;
  }
  .ut-xxl-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .ut-xxl-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

/* ============================================
   18. BOOTSTRAP COMPONENT OVERRIDES
   Common fixes for Bootstrap components
   ============================================ */
/* Modal fixes */
.modal-backdrop {
  z-index: var(--ut-z-modal-backdrop) !important;
}
.modal {
  z-index: var(--ut-z-modal) !important;
}

/* Dropdown fixes */
.dropdown-menu {
  z-index: var(--ut-z-dropdown) !important;
}
.dropdown-toggle::after {
  transition: transform var(--ut-transition-fast) !important;
}
.dropdown.show .dropdown-toggle::after {
  transform: rotate(180deg) !important;
}

/* Navbar fixes */
.sticky-top {
  z-index: var(--ut-z-sticky) !important;
}
.navbar-nav .nav-link {
  transition: color var(--ut-transition-fast) !important;
}

/* Tooltip & Popover */
.tooltip {
  z-index: var(--ut-z-tooltip) !important;
}
.popover {
  z-index: var(--ut-z-popover) !important;
}

/* Toast notifications */
.toast {
  z-index: var(--ut-z-toast) !important;
}

/* Card fixes */
.card {
  transition:
    box-shadow var(--ut-transition-fast),
    transform var(--ut-transition-fast) !important;
}
.card-hover:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--ut-shadow-lg) !important;
}

/* Button fixes */
.btn {
  transition: all var(--ut-transition-fast) !important;
}
.btn:active {
  transform: scale(0.98) !important;
}

/* Form control fixes */
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
  border-color: var(--bs-primary, #0d6efd) !important;
}

/* List group fixes */
.list-group-item {
  transition: background-color var(--ut-transition-fast) !important;
}

/* Alert fixes */
.alert {
  transition: opacity var(--ut-transition-fast) !important;
}

/* Offcanvas fixes */
.offcanvas {
  z-index: 1050 !important;
}

/* ============================================
   19. UTILITY HELPER CLASSES
   ============================================ */
/* Clearfix */
.ut-clearfix::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

/* Screen Reader Only */
.ut-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}
.ut-not-sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* Debug Helper - Red outline for debugging layout issues */
.ut-debug {
  outline: 1px solid red !important;
  background-color: rgba(255, 0, 0, 0.05) !important;
}
.ut-debug * {
  outline: 1px solid rgba(255, 0, 0, 0.3) !important;
}

.ut-debug-green {
  outline: 2px solid green !important;
  background-color: rgba(0, 255, 0, 0.05) !important;
}

.ut-debug-blue {
  outline: 2px solid blue !important;
  background-color: rgba(0, 0, 255, 0.05) !important;
}

/* Disable interaction temporarily */
.ut-disable-interaction {
  pointer-events: none !important;
  opacity: 0.6 !important;
}

/* Full-bleed / Full-width helper */
.ut-full-bleed {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* Maintain aspect ratio */
.ut-aspect-square {
  aspect-ratio: 1 / 1 !important;
}
.ut-aspect-video {
  aspect-ratio: 16 / 9 !important;
}
.ut-aspect-portrait {
  aspect-ratio: 3 / 4 !important;
}
.ut-aspect-4\/3 {
  aspect-ratio: 4 / 3 !important;
}

/* Object Fit for images */
.ut-object-contain {
  object-fit: contain !important;
}
.ut-object-cover {
  object-fit: cover !important;
}
.ut-object-fill {
  object-fit: fill !important;
}
.ut-object-none {
  object-fit: none !important;
}
.ut-object-scale-down {
  object-fit: scale-down !important;
}

/* Object Position */
.ut-object-top {
  object-position: top !important;
}
.ut-object-bottom {
  object-position: bottom !important;
}
.ut-object-left {
  object-position: left !important;
}
.ut-object-right {
  object-position: right !important;
}
.ut-object-center {
  object-position: center !important;
}

/* Ring effect (focus style alternative) */
.ut-ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--ut-space-0-5)
    var(--tw-ring-offset-color, #fff);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
    calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, #0d6efd);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow, 0 0 #0000) !important;
}
.ut-ring-0 {
  box-shadow: 0 0 #0000 !important;
}

.ut-form-wrapper {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  padding: 24px 24px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.35s ease;
}

.ut-form-wrapper:hover {
  box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.01);
}

.ut-form-wrapper fieldset .form-group.required {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ut-form-wrapper fieldset .form-group.required .control-label {
  display: contents;
}

.ut-form-wrapper fieldset .form-group.required .col-sm-10 {
  display: flex;
  gap: 16px;
  padding: 0;
}

.ut-form-wrapper .btn-outline-primary-2 {
  max-width: 120px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
}

.asp-llldg .col-md-3 {
  display: flex;
}

/* ============================================
   20. PRINT UTILITIES
   ============================================ */
@media print {
  .ut-print-hidden {
    display: none !important;
  }
  .ut-print-block {
    display: block !important;
  }
  .ut-print-flex {
    display: flex !important;
  }
  .ut-print-text-left {
    text-align: left !important;
  }
  .ut-print-text-black {
    color: black !important;
  }
  .ut-print-bg-white {
    background-color: white !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Blog */
  .blog-posts.bg-light .row {
    gap: 12px;
  }
  .blog-posts.bg-light .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .blog-posts.bg-light .pht-bbbshgterfd .vggsftwr img {
    width: 100%;
  }

  /* Contact */
  .new-contact-nhhhdur .row {
    gap: 0;
  }
}

@media (max-width: 767px) {
  .header-12 .header-middle {
    border-bottom: 1px solid #c3c3c3;
  }
  .header-middle .ut-py-8 {
    padding-top: var(--ut-space-4) !important;
    padding-bottom: var(--ut-space-4) !important;
    justify-content: space-between;
  }
  .header-middle .ut-py-8 .header-left {
    margin-right: 0px;
  }
  .header-middle .ut-py-8 .header-right {
    margin-left: 0 !important;
    gap: 12px;
    align-items: baseline;
  }
  .header-12 .header-dropdown-link {
    display: flex;
    align-items: flex-end;
    align-items: center;
    gap: 10px;
  }

  .header-12 .account a {
    line-height: 1;
    width: 24px;
  }
  .header-12 .header-middle .ut-py-8 .header-right .wishlist,
  .header-12 .header-middle .ut-py-8 .header-right .cart-dropdown,
  .header-12 .header-middle .ut-py-8 .header-right .account {
    padding-left: 0;
  }

  .heading .title {
    line-height: 32px;
    text-align: left;
  }

  /* Home 4 -- Cart -- */
  .asp-llldg .row {
    gap: 12px;
  }

  .asp-llldg .row .mrs-1 {
    width: 100%;
    padding: 24px 20px;
  }

  /* Blog Post */
  .blog-posts.bg-light .row {
    gap: 12px;
  }

  /* Events */
  .main-hjjsh-nhhsg .vggsftwr img {
    width: 100%;
  }

  /* Footer */
  .footer .widget-title {
    margin-bottom: 8px;
  }

  /* Classes - Pages */
  #product-category .ut-mb-12 .col-sm-9 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  #product-category .ut-mb-12 .product-media img {
    width: 100%;
  }

  /* Contact Page */
  .new-contact-nhhhdur {
    padding: 10px 0 40px;
  }

  .new-contact-nhhhdur .row {
    gap: 16px;
  }
}