/* Magoods Ultimate - Responsive Fixes */

/* Global header clearance — fixed header is ~72px; push ALL content below it */
section#main-body {
    padding-top: 100px;
}

/* Tablet & Mobile (Below 992px) */
@media (max-width: 991.98px) {

    /* 1. Global Layout Spacing */
    .main-content {
        margin-top: 1rem !important;
        padding-top: 0 !important;
    }

    /* Reset Sidebar (Critical Fix) */
    .sidebar {
        margin-top: 1rem !important;
        /* Override desktop 6.6rem */
        margin-bottom: 2rem !important;
        position: static !important;
        /* Unstick */
        z-index: 1 !important;
        width: 100% !important;
        display: block !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Sidebar Navigation Items */
    .mg-sidebar-nav__item {
        margin-bottom: 5px;
    }

    /* 2. Global header clearance — keep in sync with base rule above */
    section#main-body {
        padding-top: 80px !important;
    }

    /* Order Form / Checkout — no extra padding needed, global clearance above handles it */
    #order-standard_cart {
        padding-top: 0 !important;
    }

    /* Un-Stick Order Summary */
    #order-standard_cart .order-summary {
        position: static !important;
        width: 100% !important;
        margin-bottom: 2rem;
        margin-top: 2rem;
        z-index: 1;
    }

    /* Stack Sidebar Categories */
    .cart-sidebar {
        margin-bottom: 2rem;
    }

    /* 3. Tables - Force Horizontal Scroll */
    .table-container,
    .table-responsive,
    .dataTables_wrapper,
    div.table-list-container {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table.table,
    table.table-list {
        min-width: 600px;
        /* Force scroll if squeezed */
    }

    /* 4. Breadcrumb Adjustment (Clear Fixed Header) */
    .master-breadcrumb {
        margin-top: 90px !important;
        margin-bottom: 1rem !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 5. Typography Scaling */
    h1,
    .h1 {
        font-size: 1.75rem !important;
    }

    h2,
    .h2 {
        font-size: 1.5rem !important;
    }

    /* 6. PERFORMANCE: Disable Heavy Glass Effects on Mobile */
    .modern-header,
    .dropdown-menu,
    .sidebar,
    .card,
    .panel,
    .modal-content,
    .mobile-nav-menu,
    .order-summary,
    .product,
    .item {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* Optional: Simplify shadows if needed */
        /* box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important; */
    }

    .modern-header {
        background: #032b43 !important;
        /* Solid fallback */
        border-bottom: 1px solid #00a8e8;
    }
}

/* Mobile Phones (Below 768px) — tighten Bootstrap's 2rem container padding */
@media (max-width: 767.98px) {
    .container,
    .container-fluid,
    .mgp-main-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Cart checkout step labels — "ACCOUNT & PAYMENT" overflows on narrow screens */
    .mg-cart-progress .step-label {
        font-size: 0.6rem !important;
        letter-spacing: 0 !important;
    }
}

/* Mobile Phones (Below 576px) */
@media (max-width: 575.98px) {

    /* Typography */
    h1,
    .h1 {
        font-size: 1.4rem !important;
    }

    h2,
    .h2 {
        font-size: 1.25rem !important;
    }

    h3,
    .h3 {
        font-size: 1.1rem !important;
    }

    /* Full Width Actions */
    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
        display: block;
    }

    /* Except small inline buttons (like pagination or grids) */
    .btn-xs,
    .btn-sm,
    .pagination .btn {
        width: auto;
        display: inline-block;
    }

    /* Header Content */
    .header-content {
        padding: 0.5rem 0;
    }

    /* Adjust Cart/Checkout Padding */
    #order-standard_cart {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Modals */
    .modal-dialog {
        margin: 10px;
        width: auto !important;
    }
}