/* =========================================
   UTILITIES CSS
   ========================================= */

/* ---- Display & Layout ---- */
.xyz-d-block {
    display: block;
}

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

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

.xyz-d-flex {
    display: flex;
}

.xyz-d-grid {
    display: grid;
}

.xyz-d-none {
    display: none;
}

.xyz-flex-row {
    flex-direction: row;
}

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

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

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

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

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

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

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

.xyz-justify-around {
    justify-content: space-around;
}

.xyz-items-start {
    align-items: flex-start;
}

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

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

/* ---- Position ---- */
.pos-relative {
    position: relative;
}

.pos-absolute {
    position: absolute;
}

.pos-fixed {
    position: fixed;
}

.pos-sticky {
    position: sticky;
}

/* Overflow */
.of-hidden {
    overflow: hidden;
}

/* Center absolute elements */
.abs-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ---- Text & Font ---- */
.xyz-text-left {
    text-align: left;
}

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

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

.text-upper {
    text-transform: uppercase;
}

.text-lower {
    text-transform: lowercase;
}

.text-cap {
    text-transform: capitalize;
}

.fw-b {
    font-weight: bold;
}

.ls-1 {
    letter-spacing: 0.5px;
}

.ls-2 {
    letter-spacing: 1px;
}

.ls-3 {
    letter-spacing: 1.5px;
}

.ls-4 {
    letter-spacing: 2px;
}

.ls-5 {
    letter-spacing: 2.5px;
}


/* ---- Spacing (4px scale) ---- */
/* Margin */
.m-0 {
    margin: 0;
}

.m-4 {
    margin: 4px;
}

.m-8 {
    margin: 8px;
}

.m-12 {
    margin: 12px;
}

.m-16 {
    margin: 16px;
}

.m-20 {
    margin: 20px;
}

.m-24 {
    margin: 24px;
}

.m-1rem {
    margin: 1rem;
}

.m-2rem {
    margin: 2rem;
}

.m-3rem {
    margin: 3rem;
}

.m-4rem {
    margin: 4rem;
}

.m-5rem {
    margin: 5rem;
}

.m-auto {
    margin: auto;
}

.mt-4 {
    margin-top: 4px;
}

.mt-8 {
    margin-top: 8px;
}

.mt-12 {
    margin-top: 12px;
}

.mt-16 {
    margin-top: 16px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-24 {
    margin-top: 24px;
}

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

.mt-2rem {
    margin-top: 2rem;
}

.mt-3rem {
    margin-top: 3rem;
}

.mt-4rem {
    margin-top: 4rem;
}

.mt-5rem {
    margin-top: 5rem;
}

.mb-4 {
    margin-bottom: 4px;
}

.mb-8 {
    margin-bottom: 8px;
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-24 {
    margin-bottom: 24px;
}

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

.mb-2rem {
    margin-bottom: 2rem;
}

.mb-3rem {
    margin-bottom: 3rem;
}

.mb-4rem {
    margin-bottom: 4rem;
}

.mb-5rem {
    margin-bottom: 5rem;
}

.ml-4 {
    margin-left: 4px;
}

.ml-8 {
    margin-left: 8px;
}

.ml-12 {
    margin-left: 12px;
}

.ml-16 {
    margin-left: 16px;
}

.ml-20 {
    margin-left: 20px;
}

.ml-24 {
    margin-left: 24px;
}

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

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

.ml-3rem {
    margin-left: 3rem;
}

.ml-4rem {
    margin-left: 4rem;
}

.ml-5rem {
    margin-left: 5rem;
}

.mr-4 {
    margin-right: 4px;
}

.mr-8 {
    margin-right: 8px;
}

.mr-12 {
    margin-right: 12px;
}

.mr-16 {
    margin-right: 16px;
}

.mr-20 {
    margin-right: 20px;
}

.mr-24 {
    margin-right: 24px;
}

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

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

.mr-3rem {
    margin-right: 3rem;
}

.mr-4rem {
    margin-right: 4rem;
}

.mr-5rem {
    margin-right: 5rem;
}

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

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

.mx-3rem {
    margin-left: 3rem;
    margin-right: 3rem;
}

.mx-4rem {
    margin-left: 4rem;
    margin-right: 4rem;
}

.mx-5rem {
    margin-left: 5rem;
    margin-right: 5rem;
}

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

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

.my-3rem {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.my-4rem {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.my-5rem {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

/* Padding */
.p-0 {
    padding: 0;
}

.p-4 {
    padding: 4px;
}

.p-8 {
    padding: 8px;
}

.p-12 {
    padding: 12px;
}

.p-16 {
    padding: 16px;
}

.p-20 {
    padding: 20px;
}

.p-24 {
    padding: 24px;
}

.p-1rem {
    padding: 1rem;
}

.p-2rem {
    padding: 2rem;
}

.p-3rem {
    padding: 3rem;
}

.p-4rem {
    padding: 4rem;
}

.p-5rem {
    padding: 5rem;
}

.pt-4 {
    padding-top: 4px;
}

.pt-8 {
    padding-top: 8px;
}

.pt-12 {
    padding-top: 12px;
}

.pt-16 {
    padding-top: 16px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-24 {
    padding-top: 24px;
}

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

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

.pt-3rem {
    padding-top: 3rem;
}

.pt-4rem {
    padding-top: 4rem;
}

.pt-5rem {
    padding-top: 5rem;
}

.pb-4 {
    padding-bottom: 4px;
}

.pb-8 {
    padding-bottom: 8px;
}

.pb-12 {
    padding-bottom: 12px;
}

.pb-16 {
    padding-bottom: 16px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-24 {
    padding-bottom: 24px;
}

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

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

.pb-3rem {
    padding-bottom: 3rem;
}

.pb-4rem {
    padding-bottom: 4rem;
}

.pb-5rem {
    padding-bottom: 5rem;
}

.pl-4 {
    padding-left: 4px;
}

.pl-8 {
    padding-left: 8px;
}

.pl-12 {
    padding-left: 12px;
}

.pl-16 {
    padding-left: 16px;
}

.pl-20 {
    padding-left: 20px;
}

.pl-24 {
    padding-left: 24px;
}

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

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

.pl-3rem {
    padding-left: 3rem;
}

.pl-4rem {
    padding-left: 4rem;
}

.pl-5rem {
    padding-left: 5rem;
}

.pr-4 {
    padding-right: 4px;
}

.pr-8 {
    padding-right: 8px;
}

.pr-12 {
    padding-right: 12px;
}

.pr-16 {
    padding-right: 16px;
}

.pr-20 {
    padding-right: 20px;
}

.pr-24 {
    padding-right: 24px;
}

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

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

.pr-3rem {
    padding-right: 3rem;
}

.pr-4rem {
    padding-right: 4rem;
}

.pr-5rem {
    padding-right: 5rem;
}

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

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

.px-3rem {
    padding-left: 3rem;
    padding-right: 3rem;
}

.px-4rem {
    padding-left: 4rem;
    padding-right: 4rem;
}

.px-5rem {
    padding-left: 5rem;
    padding-right: 5rem;
}

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

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

.py-3rem {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.py-4rem {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.py-5rem {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* ---- Width & Height ---- */
.xyz-w-100 {
    width: 100%;
}

.xyz-w-90 {
    width: 90%;
}

.xyz-w-80 {
    width: 80%;
}

.xyz-w-70 {
    width: 70%;
}

.xyz-w-60 {
    width: 60%;
}

.xyz-w-50 {
    width: 50%;
}

.xyz-w-49 {
    width: 49%;
}

.xyz-w-48 {
    width: 48%;
}

.xyz-w-40 {
    width: 40%;
}

.xyz-w-30 {
    width: 30%;
}

.xyz-w-25 {
    width: 25%;
}

.xyz-w-20 {
    width: 20%;
}

.xyz-w-10 {
    width: 10%;
}

.xyz-h-100 {
    height: 100%;
}

/* ---- Borders & Radius ---- */
.br-4 {
    border-radius: 4px;
}

.br-8 {
    border-radius: 8px;
}

.br-12 {
    border-radius: 12px;
}

.br-full {
    border-radius: 999px;
}

/* ---- Shadow ---- */
.shadow-sm {
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.shadow-md {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.shadow-lg {
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* ---- Font Size (Base) ---- */
.fs-12 {
    font-size: 0.75rem;
}

.fs-14 {
    font-size: 0.875rem;
}

.fs-16 {
    font-size: 1rem;
}

.fs-18 {
    font-size: 1.125rem;
}

.fs-20 {
    font-size: 1.25rem;
}

.fs-24 {
    font-size: 1.5rem;
}

.fs-28 {
    font-size: 1.75rem;
}

.fs-32 {
    font-size: 2rem;
}

/* ---- Responsive Overrides ---- */
/* sm (≤ 576px) - Mobile */
@media (max-width: 576px) {
    /* Font Size */
    .sm-fs-12 {
        font-size: 0.75rem;
    }

    .sm-fs-14 {
        font-size: 0.875rem;
    }

    .sm-fs-16 {
        font-size: 1rem;
    }

    .sm-fs-18 {
        font-size: 1.125rem;
    }

    .sm-fs-20 {
        font-size: 1.25rem;
    }

    .sm-fs-24 {
        font-size: 1.5rem;
    }

    /* Display */
    .xyz-sm-d-block {
        display: block;
    }

    .xyz-sm-d-inline {
        display: inline;
    }

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

    .xyz-sm-d-flex {
        display: flex;
    }

    .xyz-sm-d-grid {
        display: grid;
    }

    .xyz-sm-d-none {
        display: none;
    }

    .xyz-sm-flex-row {
        flex-direction: row;
    }

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

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

    .xyz-sm-flex-nowrap {
        flex-wrap: nowrap;
    }

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

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

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

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

    .xyz-sm-justify-around {
        justify-content: space-around;
    }

    .xyz-sm-items-start {
        align-items: flex-start;
    }

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

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


    /* Text Align */
    .xyz-sm-text-left {
        text-align: left;
    }

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

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

    /* Width */
    .xyz-sm-w-100 {
        width: 100%;
    }

    .xyz-sm-w-50 {
        width: 50%;
    }

    .xyz-sm-w-25 {
        width: 25%;
    }

    /* Spacing (optional to add if needed later) */
    /* Example: .sm-m-8 { margin: 8px; } */
}

/* md (≤ 768px) - Tablets */
@media (max-width: 768px) {
    .md-fs-12 {
        font-size: 0.75rem;
    }

    .md-fs-14 {
        font-size: 0.875rem;
    }

    .md-fs-16 {
        font-size: 1rem;
    }

    .md-fs-18 {
        font-size: 1.125rem;
    }

    .md-fs-20 {
        font-size: 1.25rem;
    }

    .md-fs-24 {
        font-size: 1.5rem;
    }

    .md-d-none {
        display: none;
    }

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

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

/* lg (≤ 992px) - Small Laptop */
@media (max-width: 992px) {
    .lg-fs-14 {
        font-size: 0.875rem;
    }

    .lg-fs-16 {
        font-size: 1rem;
    }

    .lg-fs-18 {
        font-size: 1.125rem;
    }

    .lg-fs-20 {
        font-size: 1.25rem;
    }

    .lg-fs-24 {
        font-size: 1.5rem;
    }

    .lg-d-none {
        display: none;
    }

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

/* xl (≤ 1200px) - Desktop / Large Screens */
@media (max-width: 1200px) {
    .xl-fs-16 {
        font-size: 1rem;
    }

    .xl-fs-18 {
        font-size: 1.125rem;
    }

    .xl-fs-20 {
        font-size: 1.25rem;
    }

    .xl-fs-24 {
        font-size: 1.5rem;
    }
}