/* ============================================
   UTILITIES - Helper Classes
   ============================================ */

/* Display Utilities */
.hidden {
    display: none !important;
}

.block {
    display: block !important;
}

.inline-block {
    display: inline-block !important;
}

.flex {
    display: flex !important;
}

.inline-flex {
    display: inline-flex !important;
}

.grid {
    display: grid !important;
}

/* Flex Utilities */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

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

/* Text Utilities */
.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

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

.text-uppercase {
    text-transform: uppercase !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

.text-capitalize {
    text-transform: capitalize !important;
}

/* Spacing Utilities */
.m-0 {
    margin: 0 !important;
}

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

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

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

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

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

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

.p-0 {
    padding: 0 !important;
}

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

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

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

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

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

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

/* Width Utilities */
.w-full {
    width: 100% !important;
}

.w-auto {
    width: auto !important;
}

.h-full {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

/* Position Utilities */
.relative {
    position: relative !important;
}

.absolute {
    position: absolute !important;
}

.fixed {
    position: fixed !important;
}

.sticky {
    position: sticky !important;
}

/* Overflow Utilities */
.overflow-hidden {
    overflow: hidden !important;
}

.overflow-auto {
    overflow: auto !important;
}

.overflow-scroll {
    overflow: scroll !important;
}

/* Opacity Utilities */
.opacity-0 {
    opacity: 0 !important;
}

.opacity-50 {
    opacity: 0.5 !important;
}

.opacity-100 {
    opacity: 1 !important;
}

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

.pointer-events-auto {
    pointer-events: auto !important;
}

/* Cursor */
.cursor-pointer {
    cursor: pointer !important;
}

.cursor-default {
    cursor: default !important;
}

/* Z-Index */
.z-0 {
    z-index: 0 !important;
}

.z-10 {
    z-index: 10 !important;
}

.z-20 {
    z-index: 20 !important;
}

.z-50 {
    z-index: 50 !important;
}

.z-100 {
    z-index: 100 !important;
}

.z-999 {
    z-index: 999 !important;
}

.z-9999 {
    z-index: 9999 !important;
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }

    .mobile-block {
        display: block !important;
    }
}

@media (min-width: 769px) {
    .desktop-hidden {
        display: none !important;
    }

    .desktop-block {
        display: block !important;
    }
}