/* ==========================================================================
   Manzil360 Global Responsive & Utility Classes (m360-responsive.css)
   Mobile-first & adaptive responsive utilities for clean layout control
   ========================================================================== */

/* Universal Responsive Image & Media */
.m360-img-fluid {
    max-width: 100%;
    height: auto;
    display: block;
}

.m360-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Visibility Utility Classes */
.m360-hide-mobile {
    display: block;
}

.m360-show-mobile {
    display: none;
}

.m360-hide-tablet {
    display: block;
}

.m360-show-tablet {
    display: none;
}

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

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

.m360-flex-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Gap Utilities */
.m360-gap-sm { gap: 8px; }
.m360-gap-md { gap: 16px; }
.m360-gap-lg { gap: 24px; }

/* Responsive Media Queries */
@media (max-width: 992px) {
    .m360-hide-tablet {
        display: none !important;
    }
    .m360-show-tablet {
        display: block !important;
    }
}

@media (max-width: 768px) {
    .m360-hide-mobile {
        display: none !important;
    }
    .m360-show-mobile {
        display: block !important;
    }

    .m360-mobile-stack {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .m360-mobile-w-100 {
        width: 100% !important;
    }

    .m360-mobile-text-center {
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .m360-touch-target {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Header and Drawer Responsive Visibility */
@media (min-width: 992px) {
    .m360-user-drawer,
    .m360-user-drawer-backdrop,
    .m360-mobile-actions {
        display: none !important;
    }
    .m360-desktop-actions {
        display: flex !important;
        align-items: center;
        gap: 16px;
    }
    .m360-header-left {
        display: flex !important;
        align-items: center;
        gap: 20px;
    }
}

@media (max-width: 991px) {
    .m360-desktop-actions,
    .m360-header-left .city-selector-btn,
    .m360-header-left #citySelectorModal {
        display: none !important;
    }
    .m360-mobile-actions {
        display: flex !important;
        align-items: center;
    }
}