/**
 * PS Mobile Override CSS — Parcel Selector Mobile Layer
 * map/Mobilki/ps-mobile-override.css
 *
 * CZEMU TEN PLIK ISTNIEJE:
 * Istniejący mobile-map.css (map/classic/mobile/) ma podstawowe overrides.
 * Ten plik dodaje:
 *   1. Styles dla karuzeli flag z przyciskami < >
 *   2. Większe tap targets (48px min) zgodnie z Google guidelines
 *   3. iOS safe-area-inset support (notch, home indicator)
 *   4. Ulepszone bottom sheet dla detaili punktu
 *   5. Optymalizacje GPU dla mobile (will-change, transform3d)
 *
 * Nie nadpisuje desktop styles (wszystko w media queries).
 *
 * @version 1.0.0
 * @package ParcelSelector/Mobilki
 */

/* ─────────────────────────────────────────────────────────────
   FLAG CAROUSEL — wspólne dla Classic i Anunaki
   ───────────────────────────────────────────────────────────── */

.ps-flags-carousel {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    position: relative;
    z-index: 1000;
}

/* Gesture Handle — Invisible but large touch target */
.ps-panel-gesture-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    z-index: 1001;
    cursor: grab;
    touch-action: none;
}

.ps-flags-track {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

/* Force single row for flags when inside carousel */
.ps-flags-track .inpost-popup-flags,
.ps-flags-track .ank-flags {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 2px 4px !important;
    width: max-content !important;
    transition: transform 0.3s ease;
    overflow: visible !important;
}

/* Strzałki prev/next — UKRYTE NA DESKTOPIE, WIDOCZNE NA MOBILE */
.ps-flag-arrow,
.ank-flag-arrow {
    display: none !important; /* Domyślnie ukryte */
    flex-shrink: 0;
    width: 36px;
    height: 44px;
    min-height: 44px; /* Google Touch Target */
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    color: #666;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    z-index: 1002;
}

.ps-flag-arrow:active,
.ank-flag-arrow:active {
    background: rgba(0, 0, 0, 0.06);
    color: #333;
}

.ps-flag-arrow:disabled,
.ank-flag-arrow:disabled {
    opacity: 0.25;
    cursor: default;
}

.ps-flag-arrow.left, .ank-flag-arrow--prev { padding-right: 2px; }
.ps-flag-arrow.right, .ank-flag-arrow--next { padding-left: 2px; }

/* Dark header variants (Anunaki) */
.ank-header .ank-flag-arrow,
.ank-header .ps-flag-arrow,
[style*="background:#0f172a"] .ps-flag-arrow,
[style*="background:#0f172a"] .ank-flag-arrow {
    color: rgba(255, 255, 255, 0.7);
}
.ank-header .ank-flag-arrow:active,
.ank-header .ps-flag-arrow:active {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* ─────────────────────────────────────────────────────────────
   MOBILE OVERRIDES (≤768px)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* ── iOS safe area ── */
    .inpost-popup-container,
    .ank-container {
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }

    /* ── Wyszukiwarka — full width ── */
    .inpost-popup-search,
    .ank-search-wrap {
        width: 100%;
        flex: 1;
    }

    .inpost-search-input,
    .ank-search-input {
        font-size: 16px !important; /* Zapobiega auto-zoom iOS */
        width: 100%;
    }

    /* ── Przyciski — 48px tap target (Google guidelines) ── */
    .inpost-flag-btn,
    .ank-flag-btn {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .inpost-popup-close,
    .ank-close-btn {
        min-width: 48px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ── GPU optimization — smooth scrolling ── */
    .inpost-popup-flags,
    .ank-flags {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        will-change: scroll-position;
        /* Ukryj scrollbar jeśli karuzela nie jest załadowana */
        scrollbar-width: none;
    }
    .inpost-popup-flags::-webkit-scrollbar,
    .ank-flags::-webkit-scrollbar { display: none; }

    .inpost-flag-btn,
    .ank-flag-btn {
        scroll-snap-align: start;
    }

    /* ── Bottom sheet — lepszy drag hint ── */
    .inpost-popup-sidebar::before,
    .ank-detail-panel::before {
        content: '';
        display: block;
        flex-shrink: 0;
        width: 40px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
        margin: 10px auto 6px;
    }

    /* ── Przycisk "Wybierz" — full width na mobile ── */
    .ank-btn-confirm,
    .inpost-btn-select {
        width: 100%;
        min-height: 52px;
        font-size: 16px;
        border-radius: 12px;
    }

    /* ── Detail panel — więcej miejsca na małych ekranach ── */
    .ank-detail-panel {
        max-height: 75vh;
        max-height: 75dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* ── Clusters — większe target na mobile ── */
    .custom-cluster-icon > div {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ── Leaflet zoom controls — prawa strona, nie nachodzą na UI ── */
    .leaflet-right .leaflet-control-zoom {
        margin-right: 10px;
        margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 60px);
    }
    .leaflet-control-zoom a {
        width: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
        font-size: 20px !important;
    }

    /* ── Overlay — GPU compositing ── */
    .inpost-popup-overlay,
    .ank-overlay {
        transform: translateZ(0);
        will-change: transform;
    }

    /* ── Animacje — wyłącz intensywne na mobile ── */
    .ps-play-ping-a,
    .ps-play-ping-b,
    .ps-play-ping-c {
        animation-duration: 3s; /* wolniej */
    }

    /* ── WŁĄCZ STRZAŁKI NA MOBILE ── */
    .ps-flag-arrow,
    .ank-flag-arrow {
        display: flex !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   MAŁE TELEFONY (≤390px, np. iPhone SE, Galaxy A)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 390px) {
    .ank-header-top {
        padding: 6px 8px;
        gap: 6px;
    }

    .ank-logo-title {
        font-size: 13px;
    }

    .ank-logo-subtitle {
        font-size: 10px;
    }

    .inpost-popup-header-top {
        padding: 4px 8px;
        gap: 4px;
    }

    /* Flagi mniejsze */
    .inpost-flag-btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
}

/* ─────────────────────────────────────────────────────────────
   LANDSCAPE MOBILE — ultra compact
   ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .ps-flag-arrow {
        height: 36px;
        min-height: 36px;
        font-size: 20px;
    }

    /* Sidebar: jeszcze mniejszy max-height w landscape */
    .ank-detail-panel {
        max-height: 55vh;
    }
}

/* ============================================================
   SUCCESS PANEL CENTERING (CLASSIC)
   ============================================================ */
.inpost-success-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 30px 20px !important;
}

.success-point-info, .success-customer-info {
    text-align: center !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.success-icon {
    font-size: 60px !important;
    margin-bottom: 20px !important;
}