/* ==========================================================
   MAP CONTROLS
========================================================== */

.leaflet-top{

    margin-top:18px;

}

.leaflet-left{

    margin-left:18px;

}

.leaflet-control-zoom{

    border:none !important;

    box-shadow:none !important;

    background:transparent;

}

.leaflet-control-zoom a,
.map-home-btn,
.map-full-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    margin-bottom:12px;

    border:none !important;

    border-radius:14px;

    background:#FFFFFF;

    color:#334155;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 12px 30px rgba(15,23,42,.15);

    transition:
        all .25s ease;

}

.leaflet-control-zoom a:hover,
.map-home-btn:hover,
.map-full-btn:hover{

    background:#FF6A00;

    color:#FFFFFF;

    transform:translateY(-2px);

    box-shadow:
        0 18px 35px rgba(255,106,0,.25);

}

.leaflet-control-zoom a:first-child{

    border-radius:14px;

}

.leaflet-control-zoom a:last-child{

    border-radius:14px;

}

.leaflet-control-zoom a{

    text-decoration:none;

    line-height:46px;

}


/* ==========================================================
   MAP FULLSCREEN
========================================================== */

.dreamers-map-panel:fullscreen,
.dreamers-map-panel.map-expanded{

    position: fixed !important;

    inset: 0 !important;

    width:100vw !important;

    height:100vh !important;

    min-height:100vh !important;

    border-radius:0 !important;

    background:#FFFFFF;

    z-index:9999 !important;

}

.dreamers-map-panel:fullscreen #dreamerMap,
.dreamers-map-panel.map-expanded #dreamerMap{

    width:100% !important;

    height:100vh !important;

    min-height:100vh !important;

}


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

.leaflet-tooltip{

    border:none;

    border-radius:12px;

    background:#0F172A;

    color:#FFFFFF;

    padding:8px 12px;

    font-size:13px;

    font-weight:600;

    box-shadow:
        0 10px 30px rgba(15,23,42,.20);

}


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

.leaflet-popup-content-wrapper{

    border-radius:14px;

    box-shadow:
        0 15px 35px rgba(15,23,42,.12);

}

.leaflet-popup-tip{

    box-shadow:none;

}


/* ==========================================================
   REMOVE DEFAULT ATTRIBUTION
========================================================== */

.leaflet-control-attribution{

    display:none;

}



/* ==========================================================
   MAP PANEL
========================================================== */

.dreamers-map-panel{

    position:relative;

    background:#FFFFFF;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
        0 15px 40px rgba(15,23,42,.08);

    z-index: 1;

    isolation: isolate;

    display: flex;

    flex-direction: column;

    height: 100%;

}


/* ==========================================================
   MAP CONTAINER
========================================================== */

#dreamerMap{

    width:100%;

    flex: 1;

    min-height:450px;

    background:#F8FAFC;

}


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

.leaflet-container{

    width:100%;

    height:100%;

    background:#F8FAFC;

    border-radius:24px;

    font-family:inherit;

}

path.leaflet-interactive:focus {

    outline: none;

}


/* ==========================================================
   PANES
========================================================== */

.leaflet-pane{

    z-index:400;

}

.leaflet-overlay-pane{

    z-index:450;

}

.leaflet-marker-pane{

    z-index:500;

}

.leaflet-popup-pane{

    z-index:700;

}


/* ==========================================================
   ZOOM CONTROL
========================================================== */

.leaflet-top.leaflet-left{

    top:18px;

    left:18px;

}

.leaflet-control-zoom{

    border:none !important;

    border-radius:14px;

    overflow:hidden;

    box-shadow:

        0 12px 30px rgba(15,23,42,.12);

}

.leaflet-control-zoom a{

    width:34px;

    height:34px;

    line-height:34px;

    font-size:18px;

    font-weight:700;

    color:#334155;

    background:#FFFFFF;

    transition:.25s;

}

.leaflet-control-zoom a:hover{

    background:#F1F5F9;

    color:#FF6A00;

}


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

.leaflet-popup-content-wrapper{

    border-radius:16px;

    box-shadow:

        0 12px 35px rgba(15,23,42,.12);

}

.leaflet-popup-content{

    margin:14px 18px;

    font-size:14px;

    line-height:1.6;

}

.leaflet-popup-tip{

    box-shadow:none;

}


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

.leaflet-tooltip{

    border:none;

    border-radius:12px;

    background:#0F172A;

    color:#FFFFFF;

    padding:8px 12px;

    font-size:13px;

    font-weight:600;

    box-shadow:

        0 10px 25px rgba(15,23,42,.18);

}


/* ==========================================================
   ATTRIBUTION
========================================================== */

.leaflet-control-attribution{

    display:none;

}


/* ==========================================================
   MAP LOADING
========================================================== */

.map-loading{

    position:absolute;

    inset:0;

    z-index:9999;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

    background:#FFFFFF;

    transition: opacity 0.3s ease;

}

.map-loading::after{

    content:"";

    width:42px;

    height:42px;

    border-radius:50%;

    border:4px solid #E2E8F0;

    border-top-color:#FF6A00;

    animation:mapSpinner .9s linear infinite;

}


/* ==========================================================
   FULLSCREEN BUTTON (Future)
========================================================== */

.map-expand-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    margin-bottom:12px;

    border:none !important;

    border-radius:14px;

    background:#FFFFFF;

    color:#334155;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 12px 30px rgba(15,23,42,.15);

    transition:
        all .25s ease;

}

.map-expand-btn:hover{

    background:#FF6A00;

    color:#FFFFFF;

    transform:translateY(-2px);

    box-shadow:
        0 18px 35px rgba(255,106,0,.25);

}


/* ==========================================================
   LEGEND (Future)
========================================================== */

.map-legend{

    position:absolute;

    left:18px;

    bottom:18px;

    padding:12px 16px;

    border-radius:14px;

    background:#FFFFFF;

    box-shadow:

        0 10px 30px rgba(15,23,42,.12);

    z-index:1000;

}


/* ==========================================================
   MAP ANIMATIONS
========================================================== */

@keyframes mapSpinner{

    to{

        transform:rotate(360deg);

    }

}