/* ====================================
   UTILITIES - UTILITY CLASSES
   ==================================== 
   Table of Contents
   -----------------
   1. MARGIN ............................ ~40
      Margin Top ........................ ~66
      Margin Bottom ..................... ~87
      Margin Left ....................... ~108
      Margin Right ...................... ~133
      Margin Horizontal ................. ~154
      Margin Vertical ................... ~180
   2. PADDING ........................... ~207
      Padding Top ....................... ~228
      Padding Bottom .................... ~253
      Padding Left ...................... ~274
      Padding Right ..................... ~295
      Padding Horizontal ................ ~316
      Padding Vertical .................. ~342
   3. COLORS ............................ ~368
   4. TEXT .............................. ~407
   5. ALIGNMENT ......................... ~472
   6. WIDTH ............................. ~497
   7. DISPLAY ........................... ~526
   8. FLEX .............................. ~551
   9. SCREEN READER ONLY ................ ~595
   
   Definitions:
        xs = 0.25rem
        sm = 0.5rem
        md = 1rem
        lg = 1.5rem
        xl = 2rem
       xxl = 2.5rem
      xxxl = 3rem
    */

/* ---- 1. MARGIN ---- */

.m-0 {
    margin: 0;
}

.m-sm {
    margin: 0.5rem;
}

.m-md {
    margin: 1rem;
}

.m-lg {
    margin: 1.5rem;
}

.m-xl {
    margin: 2rem;
}

.m-xxl {
    margin: 2.5rem;
}

/* ---- Margin Top ---- */

.mt-0 {
    margin-top: 0;
}

.mt-sm {
    margin-top: 0.5rem;
}

.mt-md {
    margin-top: 1rem;
}

.mt-lg {
    margin-top: 1.5rem;
}

.mt-xl {
    margin-top: 2rem !important;
}

/* ---- Margin Bottom ---- */
.mb-0 {
    margin-bottom: 0;
}

.mb-sm {
    margin-bottom: 0.5rem;
}

.mb-md {
    margin-bottom: 1rem;
}

.mb-lg {
    margin-bottom: 1.5rem;
}

.mb-xl {
    margin-bottom: 2rem !important;
}

/* ---- Margin Left ---- */
.ml-0 {
    margin-left: 0;
}

.ml-xs {
    margin-left: 0.25rem;
}

.ml-sm {
    margin-left: 0.5rem;
}

.ml-md {
    margin-left: 1rem;
}

.ml-lg {
    margin-left: 1.5rem;
}

.ml-xl {
    margin-left: 2rem;
}

/* ---- Margin Right ---- */
.mr-0 {
    margin-right: 0;
}

.mr-sm {
    margin-right: 0.5rem;
}

.mr-md {
    margin-right: 1rem;
}

.mr-lg {
    margin-right: 1.5rem;
}

.mr-xl {
    margin-right: 2rem;
}

/* ---- Margin Horizontal (left + right) ---- */
.mx-0 {
    margin-left: 0;
    margin-right: 0;
}

.mx-sm {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.mx-md {
    margin-left: 1rem;
    margin-right: 1rem;
}

.mx-lg {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.mx-xl {
    margin-left: 2rem;
    margin-right: 2rem;
}

/* ---- Margin Vertical (top + bottom) ---- */
.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.my-sm {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.my-md {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.my-lg {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.my-xl {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* ---- 2. PADDING ---- */

.p-0 {
    padding: 0;
}

.p-sm {
    padding: 0.5rem;
}

.p-md {
    padding: 1rem;
}

.p-lg {
    padding: 1.5rem;
}

.p-xl {
    padding: 2rem;
}

/* ---- Padding Top ---- */
.pt-0 {
    padding-top: 0;
}

.pt-xs {
    padding-top: 0.25rem;
}

.pt-sm {
    padding-top: 0.5rem;
}

.pt-md {
    padding-top: 1rem;
}

.pt-lg {
    padding-top: 1.5rem;
}

.pt-xl {
    padding-top: 2rem;
}

.pt-xxl {
    padding-top: 2.5rem;
}

/* ---- Padding Bottom ---- */
.pb-0 {
    padding-bottom: 0;
}

.pb-sm {
    padding-bottom: 0.5rem;
}

.pb-md {
    padding-bottom: 1rem;
}

.pb-lg {
    padding-bottom: 1.5rem;
}

.pb-xl {
    padding-bottom: 2rem;
}

/* ---- Padding Left ---- */
.pl-0 {
    padding-left: 0;
}

.pl-sm {
    padding-left: 0.5rem;
}

.pl-md {
    padding-left: 1rem;
}

.pl-lg {
    padding-left: 1.5rem;
}

.pl-xl {
    padding-left: 2rem;
}

/* ---- Padding Right ---- */
.pr-0 {
    padding-right: 0;
}

.pr-sm {
    padding-right: 0.5rem;
}

.pr-md {
    padding-right: 1rem;
}

.pr-lg {
    padding-right: 1.5rem;
}

.pr-xl {
    padding-right: 2rem;
}

/* ---- Padding Horizontal (left + right) ---- */
.px-0 {
    padding-left: 0;
    padding-right: 0;
}

.px-sm {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-md {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-lg {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-xl {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* ---- Padding Vertical (top + bottom) ---- */
.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.py-sm {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-md {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-lg {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-xl {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* ---- 3. COLORS ---- */
.red {
    color: var(--accent-red-light);
}

.green {
    color: var(--color-success);
}

.blue {
    color: var(--accent-blue);
}

.blue-hover {
    color: var(--accent-blue-hover);
}

.blue-heading {
    color: var(--heading-secondary);
}

.gray {
    color: var(--text-muted);
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.no-border {
    border: none;
}

.bg-primary {
    background-color: var(--bg-primary);
}

.bg-secondary {
    background-color: var(--bg-secondary);
}

.bg-tertiary {
    background-color: var(--bg-tertiary);
}

/* ---- 4 . TEXT ---- */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-bold {
    font-weight: 700;
}

.text-xs {
    font-size: 0.75rem;
}

.text-sm {
    font-size: 0.875rem;
}

.text-md {
    font-size: 1.2rem;
}

.text-lg {
    font-size: 1.2rem;
    color: var(--text-primary);
    font-weight: 600;
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.no-underline {
    text-decoration: none;
}

/* ---- 5. ALIGNMENT (Flexbox/Grid) ---- */
.items-start {
    align-items: flex-start;
}

.items-left {
    align-items: left;
}

.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}

.items-baseline {
    align-items: baseline;
}

.items-stretch {
    align-items: stretch;
}

/* ---- 6. Width ---- */
.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

.max-w-sm {
    max-width: 640px;
}

.max-w-md {
    max-width: 768px;
}

.max-w-lg {
    max-width: 1024px;
}

.max-w-xl {
    max-width: 1200px;
}

.max-w-cont {
    max-width: 900px;
}

/* ---- 7. Display ---- */
.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-inline {
    display: inline;
}

.d-inline-block {
    display: inline-block;
}

.d-flex {
    display: flex;
}

.d-grid {
    display: grid;
}

/* ---- 8. Flex ---- */
.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-1 {
    flex: 1;
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.gap-sm {
    gap: 0.5rem;
}

.gap-md {
    gap: 1rem;
}

.gap-lg {
    gap: 1.5rem;
}

/* ----- Screen Reader Only (accessibility) ----- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}