/**
 * Jefi Caffe — mobile-performance.css
 * CLS prevencija, touch targets, iOS zoom fix, horizontal overflow
 */

/* ── 1. Globalni image reset — sprecava CLS ──────────────────────────────── */
img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ── 2. Rezervisi prostor za product slike (WooCommerce) ─────────────────── */
.woocommerce-loop-product__link img,
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Single product gallery */
.woocommerce-product-gallery .woocommerce-product-gallery__image img,
.woocommerce-product-gallery figure img {
    width: 100%;
    height: auto;
}

/* ── 3. Spreci horizontalni scroll ───────────────────────────────────────── */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ── 4. Touch targets — min 44x44px (Google / WCAG 2.5.5) ───────────────── */
@media (max-width: 1024px) {

    /* Jefi Custom Theme — primarni meni */
    .jefi-nav-link,
    .jefi-header__nav a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Mega menu linkovi */
    .jefi-mega-link,
    .jefi-mega-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 8px 12px;
    }

    /* Cart, search, user ikone */
    .jefi-header__actions a,
    .jefi-header__actions button,
    .jefi-cart-btn,
    .jefi-search-btn,
    .jefi-mobile-toggle {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Generalni fallback za sve headere */
    header a,
    nav a {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* Footer linkovi */
    .site-footer a,
    .footer-widget a,
    .widget_nav_menu a,
    footer a {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        padding: 4px 0;
    }

    /* WooCommerce dugmad */
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    .add_to_cart_button,
    .single_add_to_cart_button,
    .checkout-button,
    .wc-proceed-to-checkout .checkout-button {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Hamburger / menu toggle */
    .menu-toggle,
    .hamburger,
    [class*="menu-toggle"],
    [class*="nav-toggle"],
    [class*="mobile-toggle"] {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── 5. iOS input zoom fix — sprecava auto-zoom na font-size < 16px ──────── */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ── 6. Elementor slike — sprecava CLS od lazy-loadanih blokova ──────────── */
.elementor-widget-image img,
.elementor-widget-image-box img,
.elementor-widget-media-carousel img,
.elementor-image img {
    width: 100%;
    height: auto;
}

/* ── 7. Hero / cover slike — rezervisi prostor ───────────────────────────── */
.wp-block-cover,
.wp-block-cover-image,
.elementor-widget-image .elementor-image {
    width: 100%;
}

/* ── 8. Lazy-load placeholder — sprecava skok pri ucitavanju ─────────────── */
img[loading="lazy"] {
    min-height: 1px;
}

/* ── 9. WooCommerce cart / checkout responsive poboljsanja ───────────────── */
@media (max-width: 600px) {
    .woocommerce-cart table.cart,
    .woocommerce-checkout form.checkout {
        width: 100%;
    }

    .woocommerce table.shop_table {
        font-size: 14px;
    }

    .woocommerce .cart-collaterals,
    .woocommerce-cart .cart-collaterals {
        width: 100%;
        float: none;
    }
}

/* ── 10. RevSlider — sprecava layout shift ───────────────────────────────── */
.rev_slider_wrapper,
.rev_slider {
    width: 100% !important;
    overflow: hidden;
}