/* =========================================
   SCROLLBAR
========================================= */

.custom-scroll::-webkit-scrollbar{
    width:4px;
}

.custom-scroll::-webkit-scrollbar-track{
    background:#0f172a;
}

.custom-scroll::-webkit-scrollbar-thumb{
    background:#334155;
    border-radius:4px;
}


/* =========================================
   BASE LAYOUT
========================================= */

html,
body,
#map{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
    background:#000;
}

body{
    overscroll-behavior:none;
}


/* =========================================
   MAP PERFORMANCE
========================================= */

#map{
    transform:translateZ(0);
}

.leaflet-marker-icon{
    backface-visibility:hidden;
}


/* =========================================
   LEAFLET CLEANUP
========================================= */

.leaflet-control-zoom,
.leaflet-control-attribution{
    display:none !important;
}


/* =========================================
   POPUP CLEANUP
========================================= */

.leaflet-popup-content-wrapper{
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
    padding:0 !important;
}

.leaflet-popup-tip{
    display:none !important;
}


/* =========================================
   CUSTOM CHECKBOX
========================================= */

.custom-checkbox{
    appearance:none;
    width:1.2em;
    height:1.2em;
    display:grid;
    place-content:center;
    border:2px solid #64748b;
    border-radius:4px;
    background-color:transparent;
    cursor:pointer;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.custom-checkbox:checked{
    background-color:currentColor;
}

.custom-checkbox::before{
    content:"";
    width:.7em;
    height:.7em;

    transform:scale(0);

    transition:
        transform 120ms ease-in-out;

    box-shadow:
        inset 1em 1em #fff;

    clip-path:polygon(
        14% 44%,
        0 65%,
        50% 100%,
        100% 16%,
        80% 0%,
        43% 62%
    );
}

.custom-checkbox:checked::before{
    transform:scale(1);
}


/* =========================================
   SIDEBAR
========================================= */

.sidebar-transition{
    transition:
        transform .4s cubic-bezier(.4,0,.2,1);
}


/* =========================================
   INTRO
========================================= */

#mapIntro{
    position:fixed;
    inset:0;
    z-index:1200;
    background:#000;

    transition:
        opacity 1.5s cubic-bezier(.4,0,.2,1);
}


/* =========================================
   MARKERS
========================================= */

.marker-pin{
    position:relative;

    width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:9999px;

    box-shadow:
        0 5px 14px rgba(0,0,0,.32);

    transition:
        transform .22s ease,
        opacity .22s ease,
        box-shadow .22s ease;
}


/* ACTIVE PULSE ONLY */

.marker-pin::after{
    content:'';

    position:absolute;
    inset:-6px;

    border-radius:inherit;

    border:2px solid rgba(255,255,255,.15);

    opacity:0;

    pointer-events:none;
}

.marker-active .marker-pin::after{
    animation:
        pulseRing 2.5s infinite;
}


/* PULSE */

@keyframes pulseRing{

    0%{
        transform:scale(.92);
        opacity:.65;
    }

    70%{
        transform:scale(1.28);
        opacity:0;
    }

    100%{
        opacity:0;
    }
}


/* HOVER */

.marker-hover .marker-pin{
    transform:scale(1.08);

    box-shadow:
        0 8px 18px rgba(0,0,0,.4);
}



/* DIM */

.marker-dim{
    opacity:.28;
}


/* =========================================
   POPUP ANIMATION
========================================= */

.leaflet-popup{
    transform-origin:bottom center;

    animation:
        popupEnter .35s cubic-bezier(.22,1,.36,1);
}

@keyframes popupEnter{

    from{
        opacity:0;

        transform:
            translateY(20px)
            scale(.92);
    }

    to{
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================
   ROUTE
========================================= */

.route-line-animated{
    transition:
        opacity .45s ease;

    filter:
        drop-shadow(
            0 0 8px rgba(56,189,248,.8)
        );
}


/* =========================================
   TOOLTIP CLEANUP
========================================= */

.custom-tooltip-clean{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
}

.custom-tooltip-clean::before{
    display:none !important;
}


.map-focus-mode .leaflet-tile {
    filter:
        saturate(1.05)
        contrast(1.02)
        brightness(.92);
}