/* =====================================================
PWA / MOBILE — GLOBAL FIX
===================================================== */

@media(max-width:700px){

    body.app-page,
    body.map-page,
    body.nearby-page,
    body.search-page{
        max-width:100vw !important;
        overflow-x:hidden !important;
        background:#071321 !important;
    }

    body.app-page .app-header,
    body.map-page .app-header,
    body.nearby-page .app-header,
    body.search-page .app-header{
        position:sticky !important;
        top:0 !important;
        padding-top:calc(env(safe-area-inset-top, 0px) + 10px) !important;
        padding-bottom:10px !important;
        min-height:calc(env(safe-area-inset-top, 0px) + 58px) !important;
        background:#071321 !important;
        z-index:10000 !important;
    }

    body.app-page .pwa-home,
    body.app-page .profile-app{
        padding-top:14px !important;
    }

    body.map-page .map-page-container{
        padding-top:0 !important;
    }

    body.nearby-page .nearby-hero,
    body.nearby-page .nearby-page-wrap{
        padding-top:8px !important;
    }
}

/* =====================================================
GLOBAL PROFILE PANEL BUTTON
===================================================== */

@media(max-width:700px){

    body:not(.profile-page) #globalProfilePanelBtn,
    body:not(.profile-page) .global-profile-panel-btn,
    body.app-page #profileMenuToggle,
    body.app-page .profile-menu-toggle{
        display:flex !important;
        position:fixed !important;
        top:calc(env(safe-area-inset-top, 0px) + 42px) !important;
        left:18px !important;
        z-index:25000 !important;
    }

    body .profile-sidebar{
        display:block !important;
        position:fixed !important;
        top:calc(env(safe-area-inset-top, 0px) + 48px) !important;
        height:calc(100dvh - env(safe-area-inset-top, 0px) - 48px) !important;
        max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 48px) !important;
        padding-top:28px !important;
        z-index:24000 !important;
    }

    body .profile-sidebar.active{
        transform:translateX(0) !important;
    }

    body .profile-overlay{
        z-index:23000 !important;
    }
}

/* =====================================================
MAPA — CANVAS / TOPBAR
===================================================== */

@media(max-width:700px){

    body.map-page .map-mobile-topbar{
        top:calc(env(safe-area-inset-top, 0px) + 80px) !important;
        z-index:9000 !important;
    }

    body.map-page .fuel-map-canvas-wrap{
        height:calc(100dvh - env(safe-area-inset-top, 0px) - 82px) !important;
        min-height:0 !important;
    }

    body.map-page #fuelMap{
        height:100% !important;
        min-height:100% !important;
    }
}

/* =====================================================
MAPA MOBILE/PWA — PANEL FILTRÓW
===================================================== */

@media(max-width:700px){

    body.map-page .fuel-map-toolbar{
        position:fixed !important;
        left:10px !important;
        right:10px !important;
        top:calc(env(safe-area-inset-top, 0px) + 118px) !important;
        bottom:calc(84px + env(safe-area-inset-bottom, 0px)) !important;
        width:auto !important;
        height:auto !important;
        max-height:none !important;

        padding:16px 14px 18px !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch !important;
        overscroll-behavior:contain !important;

        border-radius:26px !important;
        background:linear-gradient(180deg, rgba(10,22,38,.96), rgba(7,18,32,.985)) !important;
        border:1px solid rgba(255,255,255,.08) !important;
        backdrop-filter:blur(18px) !important;
        -webkit-backdrop-filter:blur(18px) !important;
        box-shadow:0 20px 60px rgba(0,0,0,.42) !important;

        z-index:85000 !important;
        transform:translateY(calc(100% + 140px)) !important;
        transition:transform .24s ease, opacity .2s ease !important;
    }

    body.map-mobile-filters-open .fuel-map-toolbar{
        transform:translateY(0) !important;
    }

    body.map-mobile-filters-open .map-mobile-topbar{
        opacity:0 !important;
        pointer-events:none !important;
        transform:translateY(-10px) !important;
    }

    body.map-page .fuel-map-toolbar label{
        display:block !important;
        margin-bottom:8px !important;
        color:rgba(255,255,255,.70) !important;
        font-size:14px !important;
        font-weight:600 !important;
    }

    body.map-page .fuel-map-toolbar input,
    body.map-page .fuel-map-toolbar select{
        width:100% !important;
        min-height:54px !important;
        padding:0 16px !important;
        border-radius:18px !important;
        background:rgba(5,18,36,.92) !important;
        border:1px solid rgba(255,255,255,.07) !important;
        color:#fff !important;
        font-size:16px !important;
        box-shadow:none !important;
    }

    body.map-page .fuel-map-toolbar button,
    body.map-page .fuel-map-toolbar .btn{
        min-height:52px !important;
        border-radius:18px !important;
        font-size:16px !important;
        font-weight:700 !important;
        box-shadow:none !important;
    }

    body.map-page .fuel-map-toolbar .btn-warning,
    body.map-page .fuel-map-toolbar .btn-primary{
        background:#ffb400 !important;
        border:none !important;
        color:#111 !important;
    }

    body.map-page .fuel-map-toolbar .btn-secondary,
    body.map-page .fuel-map-toolbar .btn-outline-light{
        background:rgba(255,255,255,.08) !important;
        border:1px solid rgba(255,255,255,.08) !important;
        color:#fff !important;
    }

    body.map-page .fuel-map-toolbar .filters-actions,
    body.map-page .fuel-map-toolbar .toolbar-actions{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:10px !important;
        margin-top:10px !important;
    }

    body.map-page .fuel-map-toolbar .filters-actions .btn-show,
    body.map-page .fuel-map-toolbar .toolbar-actions .btn-show{
        grid-column:1 / -1 !important;
    }

    body.map-page .fuel-map-toolbar .form-check,
    body.map-page .fuel-map-toolbar .checkbox-row{
        display:flex !important;
        align-items:flex-start !important;
        gap:12px !important;
        padding:14px !important;
        border-radius:18px !important;
        background:rgba(255,255,255,.045) !important;
        border:1px solid rgba(255,255,255,.06) !important;
    }

    body.map-page .fuel-map-toolbar input[type="checkbox"]{
        width:22px !important;
        height:22px !important;
        margin-top:1px !important;
        accent-color:#ffb400 !important;
    }

    body.map-page .fuel-map-toolbar .form-check-label{
        margin:0 !important;
        font-size:15px !important;
        line-height:1.35 !important;
        color:#fff !important;
    }
}

/* =====================================================
MAPA MOBILE/PWA — PANEL STACJI + KAFLE 2 OBOK SIEBIE
===================================================== */

@media(max-width:700px){

    body.map-page.station-drawer-open{
        overflow:hidden !important;
    }

    body.map-page.station-drawer-open .map-mobile-topbar,
    body.map-page.station-drawer-open .fuel-map-toolbar,
    body.map-page.station-drawer-open .fuel-map-results{
        opacity:0 !important;
        pointer-events:none !important;
        transform:translateY(-10px) !important;
    }

    body.map-page .station-drawer{
        z-index:90000 !important;
    }

    body.map-page .station-drawer-backdrop{
        background:rgba(0,0,0,.52) !important;
        backdrop-filter:blur(6px) !important;
        -webkit-backdrop-filter:blur(6px) !important;
    }

    body.map-page .station-drawer-panel{
        left:0 !important;
        right:0 !important;
        bottom:calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        top:auto !important;
        width:100% !important;
        height:auto !important;
        max-height:calc(100dvh - 126px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        padding:12px 12px 14px !important;
        border-radius:22px 22px 0 0 !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch !important;
        background:linear-gradient(180deg, rgba(7,18,32,.99), rgba(5,14,27,.995)) !important;
        box-shadow:0 -20px 55px rgba(0,0,0,.42) !important;
        transform:translateY(calc(100% + 90px)) !important;
    }

    body.map-page .station-drawer.active .station-drawer-panel{
        transform:translateY(0) !important;
    }

    body.map-page .station-drawer-close{
        position:sticky !important;
        top:0 !important;
        z-index:3 !important;
        width:34px !important;
        height:34px !important;
        margin-left:auto !important;
        margin-bottom:-2px !important;
        border-radius:12px !important;
        font-size:22px !important;
        line-height:1 !important;
        background:rgba(255,255,255,.10) !important;
    }

    body.map-page .station-drawer-content{
        margin-top:0 !important;
    }

    body.map-page .drawer-station-header{
        display:grid !important;
        grid-template-columns:52px minmax(0,1fr) !important;
        gap:12px !important;
        align-items:center !important;
        margin:-18px 40px 12px 0 !important;
    }

    body.map-page .drawer-station-logo{
        width:52px !important;
        height:52px !important;
        border-radius:16px !important;
    }

    body.map-page .drawer-station-logo img{
        padding:7px !important;
    }

    body.map-page .drawer-station-title{
        min-width:0 !important;
    }

    body.map-page .drawer-station-title h3{
        margin:0 0 3px !important;
        font-size:21px !important;
        line-height:1.1 !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    body.map-page .drawer-station-title p{
        font-size:13px !important;
        line-height:1.25 !important;
        display:-webkit-box !important;
        -webkit-line-clamp:2 !important;
        -webkit-box-orient:vertical !important;
        overflow:hidden !important;
        color:rgba(255,255,255,.62) !important;
    }

    body.map-page .drawer-prices-grid{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:9px !important;
        margin-bottom:12px !important;
        align-items:stretch !important;
    }

    body.map-page .drawer-price-card{
        position:relative !important;
        min-height:0 !important;
        padding:10px 11px 10px 14px !important;
        border-radius:16px !important;
        overflow:hidden !important;
        background:rgba(255,255,255,.055) !important;
        border:1px solid rgba(255,255,255,.08) !important;
        box-shadow:none !important;
    }

    body.map-page .drawer-price-card::before{
        content:"" !important;
        position:absolute !important;
        left:0 !important;
        top:0 !important;
        bottom:0 !important;
        width:4px !important;
        background:rgba(255,255,255,.20) !important;
    }

    body.map-page .drawer-price-card::after{
        display:none !important;
        content:none !important;
    }

    body.map-page .drawer-price-card .fuel-name,
    body.map-page .drawer-price-card strong,
    body.map-page .drawer-price-card small{
        position:relative !important;
        z-index:1 !important;
    }

    body.map-page .drawer-price-card .fuel-name{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        margin-bottom:3px !important;
        font-size:11px !important;
        line-height:1.1 !important;
        letter-spacing:.02em !important;
        color:rgba(255,255,255,.68) !important;
        text-transform:uppercase !important;
        font-weight:800 !important;
    }

    body.map-page .drawer-price-card strong{
        display:block !important;
        margin-bottom:4px !important;
        font-size:22px !important;
        line-height:1.05 !important;
        letter-spacing:-.03em !important;
        color:#fff !important;
    }

    body.map-page .drawer-price-card small{
        display:inline !important;
        font-size:11px !important;
        line-height:1.25 !important;
        color:rgba(255,255,255,.60) !important;
    }

    body.map-page .drawer-price-time{
        display:inline !important;
        margin-left:3px !important;
    }

    body.map-page .drawer-price-card.fuel-pb95{
        background:rgba(34,197,94,.105) !important;
        border-color:rgba(34,197,94,.18) !important;
    }

    body.map-page .drawer-price-card.fuel-pb95::before{
        background:#22c55e !important;
    }

    body.map-page .drawer-price-card.fuel-pb95-plus{
        background:rgba(20,184,166,.105) !important;
        border-color:rgba(20,184,166,.18) !important;
    }

    body.map-page .drawer-price-card.fuel-pb95-plus::before{
        background:#14b8a6 !important;
    }

    body.map-page .drawer-price-card.fuel-pb98{
        background:rgba(168,85,247,.105) !important;
        border-color:rgba(168,85,247,.18) !important;
    }

    body.map-page .drawer-price-card.fuel-pb98::before{
        background:#a855f7 !important;
    }

    body.map-page .drawer-price-card.fuel-on{
        background:rgba(59,130,246,.105) !important;
        border-color:rgba(59,130,246,.18) !important;
    }

    body.map-page .drawer-price-card.fuel-on::before{
        background:#3b82f6 !important;
    }

    body.map-page .drawer-price-card.fuel-on-plus{
        background:rgba(99,102,241,.105) !important;
        border-color:rgba(99,102,241,.18) !important;
    }

    body.map-page .drawer-price-card.fuel-on-plus::before{
        background:#6366f1 !important;
    }

    body.map-page .drawer-price-card.fuel-lpg{
        background:rgba(245,158,11,.105) !important;
        border-color:rgba(245,158,11,.18) !important;
    }

    body.map-page .drawer-price-card.fuel-lpg::before{
        background:#f59e0b !important;
    }

    body.map-page .drawer-price-card.fuel-photo{
        background:rgba(236,72,153,.095) !important;
        border-color:rgba(236,72,153,.16) !important;
    }

    body.map-page .drawer-price-card.fuel-photo::before{
        background:#ec4899 !important;
    }

    body.map-page .drawer-stale-label{
        display:inline-flex !important;
        width:max-content !important;
        margin:0 0 4px !important;
        padding:3px 7px !important;
        border-radius:999px !important;
        background:rgba(255,255,255,.07) !important;
        color:rgba(255,255,255,.62) !important;
        border:1px solid rgba(255,255,255,.10) !important;
        font-size:10px !important;
        font-weight:800 !important;
        text-transform:uppercase !important;
        letter-spacing:.02em !important;
    }

    body.map-page .drawer-price-card.stale{
        opacity:.74 !important;
        filter:saturate(.65) !important;
        background:rgba(255,255,255,.035) !important;
        border-color:rgba(255,255,255,.07) !important;
    }

    body.map-page .drawer-price-card.stale strong{
        color:rgba(255,255,255,.76) !important;
    }

    body.map-page .drawer-price-card.stale::before{
        opacity:.55 !important;
    }

    body.map-page .drawer-station-actions{
        position:sticky !important;
        bottom:0 !important;
        z-index:2 !important;
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        padding-top:10px !important;
        background:linear-gradient(180deg, rgba(5,14,27,0), rgba(5,14,27,.98) 26%, rgba(5,14,27,1)) !important;
    }

    body.map-page .drawer-station-actions .map-btn{
        width:100% !important;
        min-height:40px !important;
        padding:9px 10px !important;
        border-radius:14px !important;
        font-size:12px !important;
        justify-content:center !important;
        text-align:center !important;
    }
}

/* =====================================================
SZUKAJ — FILTRY FULLSCREEN OVERLAY
===================================================== */

@media(max-width:767.98px){

body.search-filters-open{
    overflow:hidden !important;
    height:100dvh !important;
}

body.search-page .search-sidebar{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    z-index:120000 !important;
    padding:
        calc(env(safe-area-inset-top, 0px) + 92px)
        14px
        calc(92px + env(safe-area-inset-bottom, 0px))
        14px !important;
    background:rgba(3,12,24,.78) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
}

body.search-page .search-sidebar .search-panel-card{
    position:relative !important;
    z-index:120001 !important;
    width:100% !important;
    max-height:none !important;
    overflow:visible !important;
    margin:0 !important;
    border-radius:26px !important;
    padding:18px 16px 22px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,193,7,.08), transparent 32%),
        linear-gradient(180deg, rgba(7,20,36,.98), rgba(4,14,28,.99)) !important;
    box-shadow:0 20px 60px rgba(0,0,0,.42) !important;
}

body.search-page .search-panel-card .search-input-row,
body.search-page .search-panel-card .search-actions-row,
body.search-page .search-panel-card input[type="search"],
body.search-page .search-panel-card input[type="text"]{
    z-index:auto !important;
}

body.search-filters-open .search-topbar-section,
body.search-filters-open .search-hero,
body.search-filters-open .search-floating-box,
body.search-filters-open .search-main-search,
body.search-filters-open .search-mobile-search{
    z-index:1 !important;
}

body.search-page .search-panel-card .filter-title,
body.search-page .search-panel-card .filters-title,
body.search-page .search-panel-card h3,
body.search-page .search-panel-card h4{
    margin-top:14px !important;
}

body.search-page .bottom-nav,
body.search-page .pwa-bottom-nav,
body.search-page .mobile-bottom-nav{
    z-index:130000 !important;
}

}

/* =====================================================
SEARCH MOBILE + IOS FIX
===================================================== */

@media(max-width:767.98px){

    body.search-page .site-footer,
    body.search-page footer.site-footer{
        display:none !important;
    }

    body.search-page .search-results-page{
        padding-bottom:calc(150px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.search-page .search-results-list{
        gap:14px !important;
    }

    body.search-page .search-station-card--featured{
        margin-bottom:14px !important;
    }

    body.search-page .search-bottom-cta{
        margin-bottom:90px !important;
    }

    input,
    select,
    textarea,
    button{
        font-size:16px !important;
    }

    html,
    body{
        max-width:100% !important;
        overflow-x:hidden !important;
    }

    body{
        position:relative;
        touch-action:pan-y;
    }

    .modal,
    .modal-dialog,
    .modal-content{
        max-width:100vw !important;
        overflow-x:hidden !important;
    }

    .modal-dialog{
        margin-left:auto !important;
        margin-right:auto !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }
}

/* =====================================================
STATION PAGE — OSTATNIA AKTUALIZACJA MOBILE
===================================================== */

@media(max-width:767.98px){

    body.station-page .station2-last-update-box{
        width:100% !important;
        max-width:100% !important;
        display:grid !important;
        grid-template-columns:24px minmax(0,1fr) 34px !important;
        align-items:center !important;
        gap:7px !important;
        padding:7px 8px !important;
        border-radius:999px !important;
        overflow:hidden !important;
    }

    body.station-page .station2-last-update-icon{
        width:24px !important;
        height:24px !important;
        min-width:24px !important;
        font-size:13px !important;
    }

    body.station-page .station2-last-update-content,
    body.station-page .station2-last-update-meta{
        min-width:0 !important;
        overflow:hidden !important;
    }

    body.station-page .station2-last-update-meta{
        display:flex !important;
        align-items:center !important;
        gap:4px !important;
        white-space:nowrap !important;
        font-size:11px !important;
        line-height:1 !important;
    }

    body.station-page .station2-last-update-meta > span:first-child{
        font-size:0 !important;
    }

    body.station-page .station2-last-update-meta > span:first-child::after{
        content:"Ostatnia akt." !important;
        font-size:11px !important;
    }

    body.station-page .station2-last-update-meta a,
    body.station-page .station2-last-update-meta strong{
        max-width:95px !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
        display:inline-block !important;
        vertical-align:middle !important;
    }

    body.station-page .station2-last-update-separator{
        flex:0 0 auto !important;
    }

    body.station-page .station2-last-update-like{
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
        padding:0 !important;
        border-radius:999px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        font-size:15px !important;
        line-height:1 !important;
    }

    body.station-page .station2-last-update-like span{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:100% !important;
        height:100% !important;
        line-height:1 !important;
    }

    body.station-page .station2-last-update-liked{
        height:32px !important;
        min-width:34px !important;
        padding:0 8px !important;
        border-radius:999px !important;
        font-size:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    body.station-page .station2-last-update-liked::before{
        content:"👍" !important;
        font-size:15px !important;
    }
}

/* =====================================================
SMALL MOBILE
===================================================== */

@media(max-width:380px){

    body.map-page .fuel-map-toolbar{
        left:8px !important;
        right:8px !important;
        top:calc(env(safe-area-inset-top, 0px) + 110px) !important;
        padding:14px 12px 16px !important;
    }

    body.map-page .drawer-prices-grid{
        gap:7px !important;
    }

    body.map-page .drawer-price-card{
        padding:9px 9px 9px 12px !important;
        border-radius:14px !important;
    }

    body.map-page .drawer-price-card .fuel-name{
        font-size:10px !important;
    }

    body.map-page .drawer-price-card strong{
        font-size:20px !important;
    }

    body.map-page .drawer-price-card small{
        font-size:10px !important;
    }

    body.map-page .drawer-station-actions .map-btn{
        font-size:11px !important;
        padding-left:6px !important;
        padding-right:6px !important;
    }
}

.search-city-quicklink{
    margin:16px 0 24px;
    padding:14px 18px;
    border-radius:18px;
    background:rgba(255,193,7,.08);
    border:1px solid rgba(255,193,7,.18);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    width:100%;
}

.search-city-quicklink span{
    color:#aeb8c6;
    font-size:14px;
    font-weight:800;
}

.search-city-quicklink a{
    color:#fff;
    font-size:15px;
    font-weight:900;
    text-decoration:none;
}

.search-city-quicklink a strong{
    color:#ffc107;
}

.search-city-quicklink a:hover{
    text-decoration:underline;
}

@media(max-width:900px){
    .search-city-quicklink{
        display:block;
    }

    .search-city-quicklink span{
        display:block;
        margin-bottom:6px;
    }
}

@media(max-width:640px){
    .search-city-quicklink{
        margin:12px 0 18px;
        padding:13px 14px;
        border-radius:16px;
    }

    .search-city-quicklink a{
        font-size:15px;
        line-height:1.45;
    }
}