/* =============================================================
   D-NOVA — MOBILE OPTIMIZATION LAYER
   -------------------------------------------------------------
   Globalna warstwa usprawnień mobilnych. Ładowana JAKO OSTATNIA
   w _Layout.cshtml, dzięki czemu może nadpisać wcześniejsze style.

   Zakres:
   1. Fundament (każdy ekran): brak poziomego scrolla, responsywne
      media, brak "auto-zoom" iOS, bezpieczne wcięcia notcha.
   2. Telefon/tablet (<=768px): dolna nawigacja typu "tab bar",
      siatki na 1 kolumnę (koniec z poziomym overflow), dopasowane
      okna/dropdowny, lepsze cele dotyku, mniej pustej przestrzeni.

   Powiązane: water-nav.css (dolny pasek), floating-cart.css.
   ============================================================= */

/* =============================================================
   1. FUNDAMENT GLOBALNY (wszystkie ekrany)
   ============================================================= */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Koniec z przypadkowym poziomym przewijaniem.
   `clip` (a nie `hidden`) — nie tworzy kontekstu przewijania,
   więc NIE psuje position: sticky w środku strony. */
body {
    overflow-x: clip;
    max-width: 100%;
}

/* Media nigdy nie wychodzą poza swój kontener */
img,
svg,
video,
canvas {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* Brak szarego błysku przy tapnięciu (Android/iOS) */
* {
    -webkit-tap-highlight-color: transparent;
}

/* =============================================================
   2. TELEFON / TABLET  (<= 768px)
   ============================================================= */
@media (max-width: 768px) {

    /* ---------- 2a. Koniec auto-zoomu iOS ----------
       iOS Safari zoomuje stronę, gdy pole ma font < 16px.
       Wymuszamy 16px na wszystkich polach formularza. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* ---------- 2b. Miejsce na dolną nawigację ----------
       Treść nie chowa się pod paskiem (poza stronami,
       które jawnie ukrywają nawigację, np. koszyk).
       Zerujemy też stary margin-bottom: 60px z szablonu (site.css),
       żeby nie tworzyć podwójnego odstępu na dole. */
    body {
        margin-bottom: 0 !important;
    }

    body:not([data-hide-navigation="true"]) {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* Kotwice (#anchor) nie chowają się pod paskiem */
    html {
        scroll-padding-bottom: 80px;
    }

    /* ---------- 2c. Odzyskanie górnej przestrzeni ----------
       Nawigacja przeniosła się na dół, więc duży górny padding
       (rezerwowany kiedyś pod górny pasek) jest zbędny. */
    .contact-page {
        padding-top: 90px !important;
    }

    .account-dashboard {
        padding: 84px 16px 32px !important;
    }

    /* ---------- 2d. Siatki → 1 kolumna (koniec z overflow) ----------
       Te układy miały sztywne kolumny (np. 1fr 400px) albo
       minmax(400px) szersze niż telefon. */
    .cart-grid,
    .dashboard-grid,
    .addresses-layout,
    .product-detail-grid,
    .checkout-grid,
    .shipping-grid,
    .payment-grid,
    .products-grid,
    .adapters-grid,
    .workshops-grid,
    .solution-grid,
    .functions-grid,
    .lift-grid-advanced {
        grid-template-columns: 1fr !important;
    }

    /* Pozycja koszyka: zamiast 5 sztywnych kolumn — zwarty układ 2-kol. */
    .cart-item {
        grid-template-columns: 64px 1fr !important;
        gap: 10px 12px !important;
    }

    /* Sticky panele (galeria produktu, sidebar) nie chowają się pod paskiem */
    .product-gallery,
    .add-address-section,
    .car-visualization-sidebar {
        position: static !important;
        top: auto !important;
        max-height: none !important;
    }

    /* Konfigurator: gigantyczna wymuszona wysokość scrolla — wyłączamy */
    .configurator-steps {
        min-height: auto !important;
        padding-bottom: 40px !important;
    }

    /* ---------- 2e. Pływające okna/dropdowny dopasowane do ekranu ----------
       Sztywne szerokości (400px, 320px, 200px) wychodziły poza telefon. */
    .notifications-dropdown {
        width: min(360px, calc(100vw - 24px)) !important;
        right: 0 !important;
        left: auto !important;
        max-width: calc(100vw - 24px) !important;
    }

    .cart-notification {
        width: calc(100vw - 24px) !important;
        right: 12px !important;
        left: auto !important;
    }

    .language-dropdown,
    .language-menu {
        min-width: 0 !important;
        width: max-content !important;
        max-width: calc(100vw - 32px) !important;
    }

    /* Pole wyszukiwania warsztatów: zdejmujemy min-width: 300px */
    .search-input-wrapper {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ---------- 2f. Hero: 100vh -> 100svh ----------
       100vh nie uwzględnia paska adresu przeglądarki mobilnej
       (treść chowa się pod chrome). svh = mała wysokość viewportu. */
    .hero-section,
    .shop-hero {
        height: auto !important;
        min-height: 100svh;
    }

    /* ---------- 2g. Mniej pustej przestrzeni dekoracyjnej ---------- */
    .section-separator {
        height: 60px !important;
    }

    /* ---------- 2h. Lepsze cele dotyku (min. 44px) ---------- */
    .filter-btn,
    .btn-search,
    .btn-clear {
        min-height: 44px;
    }

    /* Wiersz szczegółów zamówienia: pionowo zamiast ściśniętych kolumn */
    .order-details-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* ---------- 2i. Pływający koszyk ponad dolną nawigacją ---------- */
    .floating-cart {
        bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
        right: 16px !important;
    }
}

/* Bardzo wąskie telefony (<= 380px) — najciaśniejsze przypadki */
@media (max-width: 380px) {
    .notifications-dropdown {
        width: calc(100vw - 16px) !important;
    }

    /* Karty produktów/list na pełną szerokość */
    .products-grid,
    .adapters-grid,
    .workshops-grid {
        gap: 14px !important;
    }
}