/* ==========================================================
   Sprint 1 — Bloco 9
   Performance e PWA polish.
   ========================================================== */

html,
body {
    background-color: #f8fafc;
}

img {
    max-width: 100%;
}

@media (max-width: 640px) {
    .product-card,
    .marketplace-product-card,
    .store-hero-shell,
    .product-detail-info,
    .product-gallery,
    .seller-info-card {
        will-change: auto !important;
    }

    .product-card:hover,
    .marketplace-product-card:hover {
        transform: none !important;
    }

    .market-strip-scroller,
    .gallery-thumbs,
    .store-toolbar-chips {
        contain: layout paint !important;
    }
}

.market-strip-skeleton-card,
.img-skeleton-large,
.home-skeleton-card {
    background:
        linear-gradient(90deg, #f1f5f9 0%, #f8fafc 45%, #f1f5f9 100%) !important;
}

button,
a,
.mobile-bottom-link,
.mobile-quick-sheet-item,
.product-card,
.marketplace-product-card {
    -webkit-tap-highlight-color: rgba(37, 99, 235, 0.10);
}

.marketplace-card-image,
.product-card img,
.marketplace-product-card img,
.main-image,
.store-hero-logo-image,
.seller-logo {
    content-visibility: auto;
}

html.is-pwa-standalone .app-boot-splash,
body.is-pwa-standalone .app-boot-splash {
    transition-duration: 80ms !important;
}

.mobile-quick-sheet-item[hidden],
[data-pwa-install-trigger][hidden] {
    display: none !important;
}

button.mobile-quick-sheet-item {
    appearance: none;
    border: 0;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

button.mobile-quick-sheet-item:disabled {
    opacity: 0.7;
    cursor: wait;
}

.marketplace-toast-info {
    background: #1d4ed8 !important;
}

.marketplace-toast-success {
    background: #166534 !important;
}

@media (max-width: 640px) {
    .marketplace-toast-container {
        left: 0.8rem !important;
        right: 0.8rem !important;
        bottom: calc(4.8rem + env(safe-area-inset-bottom, 0px)) !important;
        align-items: stretch;
    }

    .marketplace-toast {
        width: 100%;
        max-width: none !important;
        min-width: 0 !important;
        border-radius: 0.95rem !important;
    }
}

body.pwa-keyboard-open .mobile-bottom-nav,
body.pwa-keyboard-open .back-to-top {
    transform: translateY(120%);
    pointer-events: none;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    html,
    body {
        min-height: 100svh;
        overscroll-behavior-y: contain;
    }

    .market-header {
        padding-top: max(0.65rem, env(safe-area-inset-top)) !important;
    }

    .mobile-quick-sheet-panel {
        padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

/* ==========================================================
   Ajuste final da barra inferior do marketplace — iOS + Android
   Mantém todos os ícones dentro da barra, respeita a safe-area
   e reduz o destaque excessivo do carrinho.
   ========================================================== */
@media (max-width: 640px) {
    :root {
        --market-bottom-nav-height: 64px;
        --market-bottom-safe: max(env(safe-area-inset-bottom, 0px), 4px);
    }

    .mobile-bottom-nav {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(var(--market-bottom-nav-height) + var(--market-bottom-safe)) !important;
        min-height: calc(var(--market-bottom-nav-height) + var(--market-bottom-safe)) !important;
        max-height: none !important;
        padding: 4px max(8px, env(safe-area-inset-right, 0px)) var(--market-bottom-safe) max(8px, env(safe-area-inset-left, 0px)) !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 0 !important;
        overflow: visible !important;
        background: rgba(255, 255, 255, 0.97) !important;
        border-top: 1px solid rgba(203, 213, 225, 0.72) !important;
        box-shadow: 0 -5px 18px rgba(15, 23, 42, 0.08) !important;
        -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
        backdrop-filter: blur(16px) saturate(150%) !important;
    }

    .mobile-bottom-link,
    .mobile-bottom-nav button.mobile-bottom-link {
        position: relative !important;
        min-width: 0 !important;
        width: 100% !important;
        height: var(--market-bottom-nav-height) !important;
        min-height: var(--market-bottom-nav-height) !important;
        max-height: var(--market-bottom-nav-height) !important;
        margin: 0 !important;
        padding: 6px 2px 5px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: transparent !important;
        color: #64748b !important;
        font-size: 11px !important;
        font-weight: 650 !important;
        line-height: 1 !important;
        transform: none !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }

    .mobile-bottom-link > i {
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        line-height: 1 !important;
    }

    .mobile-bottom-link > span:last-child {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
        color: inherit !important;
        font-size: 11px !important;
        font-weight: inherit !important;
        line-height: 13px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .mobile-bottom-link.active {
        color: #2563eb !important;
    }

    .mobile-bottom-link.active::before {
        content: "";
        position: absolute;
        top: 2px;
        width: 30px;
        height: 3px;
        border-radius: 999px;
        background: #2563eb;
        opacity: 0.95;
    }

    .mobile-bottom-link-cart {
        margin: 0 !important;
        padding-top: 4px !important;
        transform: none !important;
        justify-content: center !important;
    }

    .mobile-bottom-link-cart-badge {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
        margin: -11px 0 -2px !important;
        flex: 0 0 42px !important;
        border: 3px solid rgba(255, 255, 255, 0.98) !important;
        border-radius: 50% !important;
        transform: none !important;
        box-shadow: 0 7px 18px rgba(37, 99, 235, 0.26) !important;
    }

    .mobile-bottom-link-cart-badge > i,
    .mobile-bottom-link-cart i {
        width: 22px !important;
        height: 22px !important;
        font-size: 19px !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-bottom-link-cart > span:last-child {
        margin: 0 !important;
        line-height: 13px !important;
    }

    .cart-count-badge-bottom {
        top: -5px !important;
        right: -6px !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 4px !important;
        font-size: 10px !important;
        border-width: 2px !important;
    }

    .market-main {
        padding-bottom: calc(var(--market-bottom-nav-height) + var(--market-bottom-safe) + 12px) !important;
    }

    .back-to-top,
    .marketplace-toast-container {
        bottom: calc(var(--market-bottom-nav-height) + var(--market-bottom-safe) + 12px) !important;
    }
}

@media (max-width: 360px) {
    .mobile-bottom-link,
    .mobile-bottom-link > span:last-child {
        font-size: 10px !important;
    }

    .mobile-bottom-link > i {
        font-size: 19px !important;
    }

    .mobile-bottom-link-cart-badge {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        flex-basis: 40px !important;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .mobile-bottom-nav {
        --market-bottom-nav-height: 56px;
    }

    .mobile-bottom-link {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        gap: 1px !important;
    }

    .mobile-bottom-link-cart-badge {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        flex-basis: 38px !important;
        margin-top: -8px !important;
    }
}