/* ================================================================
   ANEX MODA – Poprawki Mobile
   Plik: inc/mobile-fixes.css
   ================================================================ */

/* ─────────────────────────────────────────
   1. HAMBURGER MENU – pierwsza pozycja zasłaniana przez header

   Problem: header ma z-40 (stacking context), menu ma z-30.
   NIE zmieniamy z-index menu (inaczej znika X do zamykania
   bo przycisk jest wewnątrz header z-40).
   Rozwiązanie: samo zwiększenie padding-top ─ content zaczyna
   się wyraźnie poniżej dolnej krawędzi headera (36+52=88px).
───────────────────────────────────────── */
@media (max-width: 1023px) {
    #mobile-menu {
        padding-top: 150px !important;
    }
}

/* ─────────────────────────────────────────
   2. BELKA FILTRÓW – nachodzi na otwarte menu mobilne

   Problem: .anex-toolbar-mobile ma z-index:100 > z-30 menu.
   Rozwiązanie A (zawsze): obniżamy pasek do z-index:28 na
   mobile – menu (z-30) jest powyżej, pasek zawsze schodzi.
   Rozwiązanie B (przy otwartym menu): JS dodaje klasę
   body.anex-menu-open – wtedy ukrywamy pasek całkowicie.
───────────────────────────────────────── */
@media (max-width: 1023px) {
    .anex-toolbar-mobile {
        z-index: 28 !important;
    }
}

body.anex-menu-open .anex-toolbar-mobile {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.15s, visibility 0.15s !important;
}

/* ─────────────────────────────────────────
   3. POLE ILOŚCI – rozciągnięte na całą szerokość
───────────────────────────────────────── */
form.cart .quantity,
.woocommerce-variation-add-to-cart .quantity,
.woocommerce div.product form.cart .quantity {
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
form.cart .quantity input.qty,
.woocommerce-variation-add-to-cart .quantity input.qty,
.woocommerce div.product form.cart .quantity input.qty {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    text-align: center !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    -moz-appearance: textfield !important;
}
form.cart .quantity input.qty::-webkit-inner-spin-button,
form.cart .quantity input.qty::-webkit-outer-spin-button {
    opacity: 1;
}
form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}
form.cart .single_add_to_cart_button {
    flex: 1 !important;
    min-width: 160px !important;
}

/* ─────────────────────────────────────────
   X – przycisk zamykający menu, obok pierwszej pozycji
───────────────────────────────────────── */

/* Wiersz: [pierwsza pozycja nav] + [X] */
.anex-nav-first-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #F8E9EB;
    padding-bottom: 4px;
}

/* Przycisk X */
.anex-m-close {
    background: none !important;
    border: 1px solid #F0E4E5 !important;
    border-radius: 50% !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #2C2A29 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin-left: 12px !important;
    transition: background 0.2s, border-color 0.2s !important;
}
.anex-m-close:hover {
    background: #FAF6F6 !important;
    border-color: #DDA7A5 !important;
}
.anex-m-close svg {
    pointer-events: none;
}