/*
 * mobile-fixes.css
 * Mobile usability fixes — touch targets and sidebar overflow.
 * ALL rules are scoped to max-width: 768px — zero desktop impact.
 *
 * Bugs addressed: 2, 3, 4, 5, 6, 7, 8, 9
 */

@media (max-width: 768px) {

    /* ---------------------------------------------------------------
     * Bug 9 — Logo aspect ratio (header + footer)
     * HTML width/height attributes are set for CLS prevention.
     * height: auto ensures logos scale correctly with the existing
     * max-width rules in style.css without distortion.
     * --------------------------------------------------------------- */
    .mobile-header-sec .head-column.left-logo img.header-logo,
    .footer-column.center-logo img {
        height: auto !important;
    }

    /* ---------------------------------------------------------------
     * Bug 2 — Marketing modal close button (#SfUserPopupCBtn)
     * Inline style sets height/width to 20px — !important required.
     * --------------------------------------------------------------- */
    #SfUserPopupCBtn {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* ---------------------------------------------------------------
     * Bug 3 — Sidebar close button container
     * Mobile CSS sets the container to 30×30px.
     * --------------------------------------------------------------- */
    .new-afi-pages .left-bar .close-btn {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* ---------------------------------------------------------------
     * Bug 4 — Cart icon link (mobile header)
     * Mobile CSS sets .for-mobile to 30×23px.
     * --------------------------------------------------------------- */
    .mobile-menu .for-mobile {
        min-width: 30px !important;
        min-height: 35px !important;
    }

    /* ---------------------------------------------------------------
     * Bug 5 — Hamburger icon
     * Global rule sets 40×35px. Width is close enough; height needs fix.
     * --------------------------------------------------------------- */
    .main-header button.navbar-toggler {
        min-height: 44px !important;
    }

    /* ---------------------------------------------------------------
     * Bug 6 — Filter toggle container
     * Mobile CSS sets height to 36px.
     * --------------------------------------------------------------- */
    .new-afi-pages .toggle-div {
        min-height: 44px !important;
    }

    /* ---------------------------------------------------------------
     * Bug 7 — Pagination buttons (prev / next)
     * Mobile padding gives ~24px height and ~38px width — both too small.
     * inline-flex + centering ensures content stays aligned after resize.
     * --------------------------------------------------------------- */
    .new-afi-pages a#prev-btn,
    .new-afi-pages a#next-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ---------------------------------------------------------------
     * Bug 8 — Sidebar overflow (collapsed state)
     * width: 0 without overflow: hidden lets child content bleed out.
     * Only the collapsed state (.left-bar without .sidebar-toogle on
     * the parent) receives overflow: hidden.
     * The open-state selector below explicitly resets it so the sidebar
     * content remains fully visible when expanded.
     * --------------------------------------------------------------- */
    .new-afi-pages .left-bar {
        overflow: hidden !important;
    }

    /* Open state — must NOT be clipped */
    .new-afi-pages .store-front-row.sidebar-toogle .left-bar {
        overflow: visible !important;
    }

}