/* ------------------------------------------ MAP PAGE -----------------------------------------*/

.map-page{
    background:var(--cream);
    overflow:hidden;
}

/* ----- NAVBAR ----- */

.map-page .navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:35px;
    z-index:9999;

    display:grid;
    grid-template-columns:max-content 1fr;

    background:var(--orange);
    border-bottom:1px solid #111;
}

.map-page .brand{
    height:35px;

    display:flex;
    align-items:center;

    padding:0 28px;

    background:#050505;
    color:var(--orange);

    text-decoration:none;

    font-size:26px;
    font-weight:800;
    letter-spacing:-.06em;

    white-space:nowrap;
}

.map-page .brand i{
    display:block;

    width:95px;
    height:3px;

    margin:0 8px;

    background:var(--orange);
}

.map-page .nav-links{
    height:35px;

    display:grid;
    grid-template-columns:repeat(4,1fr);

    align-items:center;
}

.map-page .nav-links a{
    height:35px;

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

    color:#111;
    background:var(--orange);

    text-decoration:none;

    font-size:20px;
    font-weight:400;

    letter-spacing:-.03em;
}

.map-page .nav-links a:hover,
.map-page .nav-links a.active{
    background:#050505;
    color:var(--orange);
}


/* ----- MAIN MAP LAYOUT ----- */

.map-layout{
    position:relative;

    width:100%;
    height:100vh;

    padding-top:35px;

    display:grid;
    grid-template-columns:336px minmax(0,1fr);

    background:var(--cream);
}


/* ----- LEFT PANEL ----- */

.map-panel{
    position:relative;

    z-index:1000;

    width:336px;
    height:calc(100vh - 35px);

    background:rgba(242,240,230,.96);

    border-right:1px solid #11111100;

    display:flex;
    flex-direction:column;

    overflow:hidden;
}

.map-panel-head{
    padding:18px 25px 18px;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    flex-shrink:0;
}

.map-panel h1{
    margin-top:12px;
    font-size:clamp(44px,5vw,74px);
    line-height:.70;
    letter-spacing:-.085em;
    font-weight:900;
    margin-bottom:20px;
}


/* ----- TOOL TABS ----- */

.tool-tabs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    padding:0;
    border-bottom:1px solid rgba(0,0,0,.15);
    flex-shrink:0;
}

.tool-tab{
    height:70px;
    border:0;

    background:transparent;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:5px;

    font-family:var(--font);
    font-size:11px;

    cursor:pointer;

    color:#555;

    transition:.25s ease;
}

.tool-tab .tool-icon{
    font-size:20px;
    line-height:1;
}

.tool-tab:hover{
    background:rgba(255,91,46,.12);
}

.tool-tab.active{
    background:#050505;
    color:var(--orange);
    border-radius:0;
}


/* ----- TOOL CONTENT ----- */

.tool-content{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:#111 transparent;
}

.tool-section{
    display:none;
    padding:24px 25px 30px;
}

.tool-section.active{
    display:block;
}

.tool-description{
    margin-bottom:25px;
}

.tool-description h2{
    font-size:32px;
    line-height:.9;
    letter-spacing:-.06em;
    margin-bottom:12px;
}

.tool-description p{
    font-size:12px;
    line-height:1.45;
    max-width:290px;
}


/* ----- ANALYSIS HEADER ----- */

.analysis-heading{
    display:flex;
    gap:15px;
    margin-bottom:28px;
}

.analysis-number{
    font-size:11px;
    font-weight:800;
    padding-top:4px;
    color:var(--orange);
}

.analysis-heading h2{
    font-size:36px;
    line-height:.8;
    letter-spacing:-.07em;
    margin-bottom:12px;
}

.analysis-heading p{
    font-size:12px;
    line-height:1.45;
    color:#555;
}


/* ----- FIELD ----- */

.field{
    margin-bottom:24px;
}

.field > label{
    display:block;
    margin-bottom:11px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;
    color:#666;
}

.field-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.field-heading label{
    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;
    color:#666;
}

.field-heading strong{
    font-size:12px;
    font-weight:700;
    background:#fff;
    padding:7px 10px;
    border-radius:3px;
}


/* ----- SEARCH ----- */

.search-box{
    height:44px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 13px;

    background:#fff;
    border:1px solid rgba(0,0,0,.12);
    transition:.2s ease;
}

.search-box:focus-within{
    border-color:#111;
    box-shadow:3px 3px 0 rgba(0,0,0,.08);
}

.search-box span{
    font-size:18px;
    color:#666;
}

.search-box input{
    width:100%;
    border:0;
    outline:0;

    background:transparent;

    font-family:var(--font);
    font-size:11px;
}


/* ----- RADIO ----- */

.radio-list{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.radio-option{
    min-height:42px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:0 12px;

    background:rgba(255,255,255,.5);
    border:1px solid rgba(0,0,0,.08);

    cursor:pointer;
    font-size:11px;
}

.radio-option input{
    display:none;
}

.radio-circle{
    width:17px;
    height:17px;

    border:1px solid #777;
    border-radius:50%;
    position:relative;
    flex-shrink:0;
}

.radio-option input:checked + .radio-circle{
    border:2px solid #111;
}

.radio-option input:checked + .radio-circle::after{
    content:"";

    position:absolute;
    width:7px;
    height:7px;
    left:3px;
    top:3px;

    background:var(--green-dark);
    border-radius:50%;
}


/* ----- RANGE ----- */

input[type="range"]{
    width:100%;
    height:4px;

    appearance:none;

    background:#d4d5cc;
    border-radius:20px;

    outline:0;
}

input[type="range"]::-webkit-slider-thumb{
    appearance:none;

    width:17px;
    height:17px;

    border-radius:50%;

    background:#111;
    border:3px solid var(--cream);
    box-shadow:0 0 0 1px #111;

    cursor:pointer;
}

input[type="range"]::-moz-range-thumb{
    width:13px;
    height:13px;

    border-radius:50%;

    background:#111;
    border:2px solid var(--cream);

    cursor:pointer;
}

.range-labels{
    display:flex;
    justify-content:space-between;
    margin-top:6px;

    font-size:8px;
    color:#999;
}


/* ----- LAYERS ----- */

.layer-list{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.layer-item{
    min-height:46px;
    padding:0 10px;
    display:flex;
    justify-content:space-between;
    align-items:center;

    background:rgba(255,255,255,.5);
    border-bottom:1px solid rgba(0,0,0,.06);
}

.layer-name{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:11px;
}

.layer-dot{
    width:10px;
    height:10px;

    border-radius:50%;

    flex-shrink:0;
}

.layer-dot.tourism{
    background:#627552;
}

.layer-dot.hotel{
    background:#c46a43;
}

.layer-dot.transport{
    background:#4d78a8;
}

.layer-dot.admin{
    background:#555;
}


/* ----- SWITCH ----- */

.switch{
    position:relative;

    width:38px;
    height:21px;

    display:block;
}

.switch input{
    display:none;
}

.switch span{
    position:absolute;
    inset:0;

    background:#d0d3ce;
    border-radius:30px;

    cursor:pointer;

    transition:.25s ease;
}

.switch span::after{
    content:"";

    position:absolute;

    width:15px;
    height:15px;

    top:3px;
    left:3px;

    background:#fff;
    border-radius:50%;

    transition:.25s ease;
}

.switch input:checked + span{
    background:#111;
}

.switch input:checked + span::after{
    transform:translateX(17px);
}


/* ----- BASEMAP ----- */

.basemap-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.basemap{
    border:0;
    background:transparent;
    padding:0;

    font-family:var(--font);
    cursor:pointer;
    font-size:9px;
}

.basemap-preview{
    display:block;
    height:48px;
    margin-bottom:6px;

    border:2px solid transparent;
    border-radius:6px;
}

.basemap.active .basemap-preview{
    border-color:#111;
}

.street-preview{
    background:
        linear-gradient(45deg,#ddd 25%,transparent 25%),
        linear-gradient(-45deg,#ddd 25%,transparent 25%),
        #edf0df;

    background-size:15px 15px;
}

.dark-preview{
    background:
        linear-gradient(45deg,#263026,#141914);
}

.light-preview{
    background:
        linear-gradient(0deg,rgba(255,255,255,.8),rgba(255,255,255,.8)),
        repeating-linear-gradient(45deg,#d8d8d8 0,#d8d8d8 2px,#f4f4f4 2px,#f4f4f4 8px);
}

.satellite-preview{
    background:
        linear-gradient(135deg,#5b7049,#253c29,#6e7446);
}


/* ----- MAP PICK BUTTON ----- */

.map-pick-button{
    width:100%;
    margin-top:10px;
    height:42px;
    border:1px solid #111;

    background:transparent;
    font-family:var(--font);
    font-size:10px;
    font-weight:700;

    cursor:pointer;

    transition:.2s ease;
}

.map-pick-button:hover,
.map-pick-button.active{
    background:var(--orange);
    border-color:var(--orange);
    color:#111;
}


/* ----- OR ----- */

.or-divider{
    display:flex;
    align-items:center;
    gap:10px;
    margin:18px 0;
}

.or-divider::before,
.or-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:rgba(0,0,0,.12);
}

.or-divider span{
    font-size:9px;
    color:#999;
}


/* ----- SELECTED PLACE ----- */

.selected-place{
    min-height:40px;
    padding:11px 12px;
    margin-bottom:22px;

    background:#fff;
    border-left:3px solid var(--orange);

    font-size:10px;
    color:#777;
}

.selected-place.selected{
    color:#111;
    font-weight:600;
}


/* ----- PRIMARY BUTTON ----- */

.primary-action{
    width:100%;
    height:45px;

    border:0;
    background:var(--orange);
    color:#111;

    font-family:var(--font);
    font-size:11px;
    font-weight:700;

    cursor:pointer;

    transition:.25s ease;
}

.primary-action:hover{
    background:#111;
    color:#fff;
}

.green-action{
    background:#111;
    color:#fff;
}

.green-action:hover{
    background:var(--green-dark);
}


/* ----- SECONDARY BUTTON ----- */

.secondary-action{
    width:100%;
    height:38px;
    margin-top:8px;

    border:1px solid #111;
    background:transparent;

    font-family:var(--font);
    font-size:10px;

    cursor:pointer;
}

.secondary-action:hover{
    background:#111;
    color:#fff;
}


/* ----- MODE BUTTON ----- */

.mode-list,
.route-mode-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
}

.mode-button,
.route-mode{
    min-height:48px;

    border:1px solid rgba(0,0,0,.1);
    background:#fff;

    font-family:var(--font);
    font-size:9px;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
}

.mode-button span{
    font-size:15px;
}

.mode-button.active,
.route-mode.active{
    background:#111;
    color:#fff;
    border-color:#111;
}


/* ----- ANALYSIS RESULT ----- */

.analysis-result{
    margin-top:15px;
    padding:14px;

    background:#fff;
    border:1px solid rgba(0,0,0,.08);

    font-size:10px;
    line-height:1.4;
}

.result-title{
    display:block;
    margin-bottom:7px;
    font-size:8px;
    letter-spacing:.08em;
    color:#888;
}


/* ----- ROUTE RESULT ----- */

.route-list{
    margin-top:15px;
    background:#fff;
    padding:14px;
    font-size:10px;
}

.route-stop{
    display:flex;
    gap:10px;
    padding:9px 0;
    border-bottom:1px solid #eee;
}

.route-stop:last-child{
    border-bottom:0;
}

.route-number{
    width:22px;
    height:22px;

    flex-shrink:0;

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

    background:#111;
    color:#fff;
    border-radius:50%;

    font-size:9px;
}


/* ----- PANEL FOOTER ----- */

.panel-footer{
    min-height:45px;
    padding:0 20px;
    border-top:1px solid rgba(0,0,0,.12);

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

    flex-shrink:0;

    font-size:8px;
}

.panel-footer a{
    text-decoration:none;
    font-weight:700;
}


/* ----- MAP CONTAINER ----- */

.map-container{
    position:relative;
    min-width:0;
    height:calc(100vh - 35px);
    background:#ddd;
}

#map{
    width:100%;
    height:100%;
}


/* ----- LEAFLET OVERRIDE ----- */

.leaflet-control-zoom{
    margin-top:12px !important;
    margin-left:12px !important;
    border:0 !important;
    box-shadow:0 4px 18px rgba(0,0,0,.12) !important;
}

.leaflet-control-zoom a{
    width:38px !important;
    height:38px !important;
    line-height:38px !important;

    background:rgba(242,240,230,.95) !important;
    color:#111 !important;
    border:0 !important;
}

.leaflet-control-attribution{
    font-family:var(--font);
    font-size:8px;
    background:rgba(242,240,230,.85) !important;
}


/* ----- MAP STATUS ----- */

.map-status{
    position:absolute;
    z-index:900;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    min-height:50px;
    padding:0 15px;

    background:rgba(242,240,230,.95);
    border-radius:30px;

    display:flex;
    align-items:center;
    gap:25px;
    box-shadow:0 8px 30px rgba(0,0,0,.12);
    white-space:nowrap;
}

.status-count{
    display:flex;
    align-items:center;
    gap:18px;
}

.status-count span{
    font-size:10px;
    display:flex;
    align-items:center;
    gap:6px;
}

.status-dot{
    width:8px;
    height:8px;
    display:inline-block;
    border-radius:50%;
}

.status-dot.tourism{
    background:#627552;
}

.status-dot.hotel{
    background:#c46a43;
}

.status-dot.transport{
    background:#4d78a8;
}


/* ----- TOAST ----- */

.map-toast{
    position:absolute;
    z-index:950;
    top:85px;
    left:50%;
    transform:translate(-50%,-15px);

    opacity:0;
    pointer-events:none;

    background:#111;
    color:#fff;

    padding:12px 20px;
    border-radius:30px;

    font-size:10px;

    transition:.35s ease;
}

.map-toast.show{
    opacity:1;
    transform:translate(-50%,0);
}


/* ----- TOGGLE BUTTON LAYER & LEGENDA ----- */

.layers-head button,
.legend-head button{
    width:38px;
    height:38px;

    border:0;

    background:#111;
    color:var(--orange);

    cursor:pointer;

    border-radius:50%;

    font-size:16px;
    font-weight:700;

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

    transition:
        background .25s ease,
        color .25s ease;

    flex-shrink:0;
}

.layers-head button:hover,
.legend-head button:hover{
    background:var(--orange);
    color:#111;
}


/* ----- MAP LAYERS ----- */

.map-layers{
    position:absolute;
    z-index:1001;
    right:18px;
    bottom:340px;
    width:190px;

    background:rgba(242,240,230,.95);
    border-radius:14px;
    box-shadow:0 8px 30px rgba(0,0,0,.13);

    overflow:hidden;
}

.layers-head{
    min-height:45px;
    padding:0 15px;
    display:flex;

    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid rgba(0,0,0,.08);
}

.layers-head strong{
    font-size:10px;
    letter-spacing:.08em;
}

.layers-body{
    padding:10px 12px 12px;
}

.map-layer-item{
    min-height:42px;
    padding:0 5px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid rgba(0,0,0,.06);
}

.map-layer-item:last-child{
    border-bottom:0;
}

.map-layer-name{
    display:flex;
    align-items:center;
    gap:0;
    font-size:11px;

    margin-left:-8px;
}

.map-layer-icon{
    width:8px;
    height:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:8px;
    border-radius:50%;
}

.map-layer-icon.tourism{
    color:#627552;
}

.map-layer-icon.hotel{
    color:#c46a43;
}

.map-layer-icon.transport{
    color:#4d78a8;
}

.map-layer-icon.admin{
    color:#555;
}


/* ----- MAP LAYER SWITCH ----- */

.layer-switch{
    position:relative;

    width:36px;
    height:20px;

    display:block;

    cursor:pointer;
}

.layer-switch input{
    display:none;
}

.layer-switch span{
    position:absolute;
    inset:0;

    background:#d6d8d2;
    border:1px solid rgba(0,0,0,.15);
    border-radius:5px;

    transition:.25s ease;
}

.layer-switch span::before{
    content:"OFF";
    position:absolute;
    left:5px;
    top:50%;

    transform:translateY(-50%);

    font-size:6px;
    font-weight:800;
    color:#777;

    transition:.25s ease;
}

.layer-switch span i{
    position:absolute;
    width:12px;
    height:12px;
    top:3px;
    left:3px;

    background:#fff;
    border-radius:3px;
    box-shadow:0 1px 3px rgba(0,0,0,.2);

    transition:.25s ease;
}

.layer-switch input:checked + span{
    background:#111;
    border-color:#111;
}

.layer-switch input:checked + span::before{
    content:"ON";
    left:auto;
    right:5px;
    color:var(--orange);
}

.layer-switch input:checked + span i{
    transform:translateX(16px);
    background:var(--orange);
}


/* ----- LEGEND ----- */

.map-legend{
    position:absolute;
    z-index:900;
    right:18px;
    bottom:22px;
    width:190px;

    background:rgba(242,240,230,.95);
    border-radius:14px;
    box-shadow:0 8px 30px rgba(0,0,0,.13);

    overflow:hidden;
    max-height:260px;

    transition:.25s ease;
}

.legend-head{
    min-height:45px;
    padding:0 15px;
    display:flex;

    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid rgba(0,0,0,.08);
}

.legend-head strong{
    font-size:10px;
    letter-spacing:.08em;
}

.legend-body{
    padding:12px 15px 15px;
    max-height:195px;
    overflow-y:auto;
    overflow-x:hidden;
}

.layers-body.collapsed,
.legend-body.collapsed{
    display:none;
}

.legend-body::-webkit-scrollbar{
    width:5px;
}

.legend-body::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.25);
    border-radius:10px;
}

.admin-line{
    width:25px;
    height:0;
    border-top:3px dashed #555;
    flex-shrink:0;
}

.legend-item{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:10px;
    font-size:10px;
}

.legend-item:last-child{
    margin-bottom:0;
}

/* ----- LEGEND DIVIDER ----- */

.legend-divider{
    width:100%;
    height:1px;
    background:rgba(0,0,0,.18);
    margin:12px 0 12px;
}

/* ----- ADMINISTRATIVE BOUNDARY ----- */

.legend-admin{
    display:flex;
    align-items:center;
    gap:9px;
    margin:0;
    font-size:10px;
    white-space:nowrap;
}

/* ----- ADMINISTRATIVE LINE SYMBOL ----- */

.legend-admin .admin-line{
    display:block;
    width:34px;
    min-width:34px;
    height:0;
    border-top:3px dashed #555;
    flex-shrink:0;
}

/* ----- LEGEND MARKER ----- */

.legend-marker{
    width:30px;
    height:30px;

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

    flex-shrink:0;

    border:3px solid #fff;
    border-radius:50%;

    color:#fff;

    font-size:11px;

    box-shadow:0 2px 5px rgba(0,0,0,.18);
}


/* ----- CULTURAL TOURISM ----- */
.legend-marker.culture{
    background:#7d4b91;
}


/* ----- NATURE TOURISM ----- */
.legend-marker.nature{
    background:#f2a900;
}


/* ----- COFFEE SHOP ----- */
.legend-marker.coffee{
    background:#9b6b2e;
}


/* ----- RESTAURANT & CAFE ----- */
.legend-marker.restaurant{
    background:#f47a1f;
}


/* ----- CULINARY ----- */
.legend-marker.food{
    background:#f47a1f;
}


/* ----- HOTEL & ACCOMMODATION ----- */
.legend-marker.hotel{
    background:#4f9187;
}


/* ----- TRANSPORTATION ----- */
.legend-marker.transport{
    background:#6b6b6b;
}


/* ----- CUSTOM MAP MARKER ----- */

.custom-marker-wrapper{
  background:transparent !important;
  border:none !important;
}


        /* ----- MARKER BASE ----- */

        .custom-marker{
        position:relative;

        width:30px;
        height:30px;

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

        border:3px solid #ffffff;
        border-radius:50%;

        color:#ffffff;

        font-size:13px;

        box-shadow:
            0 2px 6px rgba(0,0,0,.22);

        box-sizing:border-box;
        }


        /* ----- MARKER PIN ----- */

        .custom-marker::after{
        content:"";

        position:absolute;

        left:50%;
        bottom:-7px;

        width:10px;
        height:10px;

        background:inherit;

        transform:
            translateX(-50%)
            rotate(45deg);

        z-index:-1;
        }


        /* ----- WISATA BUDAYA COLOR ----- */

        .marker-culture{
        background:#7d4b91;
        }


        /* ----- WISATA ALAM COLOR ----- */

        .marker-nature{
        background:#f2a900;
        }


        /* ----- COFFEE SHOP COLOR ----- */

        .marker-coffee{
        background:#9b6b2e;
        }


        /* ----- HOTEL COLOR ----- */

        .marker-hotel{
        background:#4f9187;
        }


        /* ----- TRANSPORTATION COLOR ----- */

        .marker-transport{
        background:#6b6b6b;
        }


        /* ----- RESTAURANT COLOR ----- */

        .marker-restaurant{
        background:#f47a1f;
        }


        /* ----- KULINER COLOR ----- */

        .marker-food{
        background:#f47a1f;
        }


        /* ----- MARKER ICON ----- */

        .custom-marker i{
        position:relative;
        z-index:2;

        color:#ffffff;

        font-size:13px;

        line-height:1;
        }

/* ----- ANALYSIS LAYERS ----- */
.buffer-circle{
    fill:var(--orange);
    fill-opacity:.12;
    stroke:#111;
    stroke-width:2;
}

.isochrone-area{
    fill:#08a957;
    fill-opacity:.18;
    stroke:#087e45;
    stroke-width:2;
}

.analysis-point{
    width:18px;
    height:18px;

    background:#111;
    border:3px solid #fff;
    border-radius:50%;
    box-shadow:0 0 0 2px #111;
}

/* ----- BUFFER HOTEL RESULTS ----- */

.buffer-summary{
    display:block;
    margin-top:6px;
    line-height:1.5;
}


.buffer-hotel-list{
    margin-top:14px;

    display:flex;
    flex-direction:column;

    gap:7px;

    max-height:230px;

    overflow-y:auto;

    padding-right:4px;
}


.buffer-hotel-item{
    display:flex;

    align-items:center;

    gap:9px;

    padding:8px 9px;

    border:1px solid #e2e1da;

    border-radius:9px;

    background:#f8f7f1;

    box-sizing:border-box;
}


.buffer-hotel-number{
    flex:0 0 23px;

    width:23px;
    height:23px;

    display:flex;

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

    border-radius:50%;

    background:#2e3d37;

    color:#ffffff;

    font:700 10px var(--font);
}


.buffer-hotel-info{
    min-width:0;

    flex:1;

    display:flex;

    flex-direction:column;

    gap:2px;
}


.buffer-hotel-info strong{
    color:#26312e;

    font:700 11px var(--font);

    line-height:1.35;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.buffer-hotel-info span{
    color:#737b77;

    font:600 10px var(--font);
}


.buffer-empty{
    margin-top:12px;

    padding:10px;

    border-radius:9px;

    background:#f5f3eb;

    color:#737b77;

    font:600 10px var(--font);

    line-height:1.5;

    text-align:center;
}


        /* ----- HOTEL RESULTS SCROLLBAR ----- */

        .buffer-hotel-list::-webkit-scrollbar{
            width:4px;
        }


        .buffer-hotel-list::-webkit-scrollbar-thumb{
            background:#b8bbb4;

            border-radius:10px;
        }


        .buffer-hotel-list::-webkit-scrollbar-track{
            background:transparent;
        }


        /* ----- HOTEL RESULT HOVER ----- */

        .buffer-hotel-item{
            transition:
                transform 0.18s ease,
                background-color 0.18s ease,
                border-color 0.18s ease,
                box-shadow 0.18s ease;

            cursor:pointer;


        /* ----- REMOVE TEXT DECORATION ----- */

            text-decoration:none !important;
        }


        /* ----- VISITED STATE ----- */

        .buffer-hotel-item:visited{
            text-decoration:none !important;
        }


        /* ----- HOVER STATE ----- */

        .buffer-hotel-item:hover{

            /*----- THEME COLOR ----- */

            background:#ff5633 !important;

            border-color:#ff5633 !important;

            transform:translateY(-2px);

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

            text-decoration:none !important;
        }


        /* ----- HOVER TEXT COLOR ----- */

        .buffer-hotel-item:hover .buffer-hotel-info strong,
        .buffer-hotel-item:hover .buffer-hotel-info span{
            color:#ffffff !important;
        }


/* ----- MOBILE ----- */

.open-panel-button{
    display:none;
    position:absolute;
    z-index:1200;
    left:15px;
    bottom:15px;
    height:42px;
    padding:0 18px;
    border:0;

    background:#111;
    color:#fff;

    font-family:var(--font);
    font-size:10px;
    font-weight:700;
    border-radius:30px;
}

@media(max-width:900px){

    .map-layout{
        grid-template-columns:310px minmax(0,1fr);
    }

    .map-status{
        left:auto;
        right:15px;
        transform:none;
    }

    .status-brand{
        display:none;
    }

}

@media(max-width:760px){

    .map-page{
        overflow:hidden;
    }

    .map-page .navbar{
        height:40px;
        grid-template-columns:1fr 45px;
    }

    .map-page .brand{
        height:40px;
        font-size:22px;
        padding:0 15px;
    }

    .map-page .brand i{
        width:55px;
    }

    .map-page .nav-links{
        display:none;
    }

    .menu-toggle{
        display:block;
        border:0;
        background:var(--orange);
        font-size:20px;
        cursor:pointer;
    }

    .map-layout{
        padding-top:40px;
        display:block;
        height:100vh;
    }

    .map-container{
        width:100%;
        height:calc(100vh - 40px);
    }

    .map-panel{
        position:absolute;
        left:0;
        top:40px;
        width:340px;
        max-width:90vw;
        height:calc(100vh - 40px);

        transform:translateX(-105%);
        transition:.35s ease;
        box-shadow:8px 0 30px rgba(0,0,0,.15);
    }

    .map-panel.open{
        transform:translateX(0);
    }

    .panel-close{
        display:block;
    }

    .open-panel-button{
        display:block;
    }

    .map-status{
        top:12px;
        right:12px;
        left:auto;
        width:auto;
        padding:0 13px;
        min-height:42px;
    }

    .status-count{
        gap:10px;
    }

    .status-count span{
        font-size:8px;
    }


    /* ----- MOBILE: LAYERS & LEGEND ----- */

    .map-layers{
      right:12px;
      bottom:300px;
      width:165px;
    }

    .map-legend{
      right:12px;
      bottom:15px;
      width:165px;
      max-height:260px;
    }

    .legend-body{
      max-height:205px;
    }

    .layers-head button,
    .legend-head button{
        width:38px;
        height:38px;
        font-size:16px;
    }

}

/* ----- PLACE POPUP ----- */

.leaflet-popup.place-popup-wrap .leaflet-popup-content-wrapper{
    border-radius:22px;
    overflow:hidden;
    background:var(--cream);
    box-shadow:0 16px 38px rgba(0,0,0,.22);
}

.leaflet-popup.place-popup-wrap .leaflet-popup-content{
    width:260px !important;
    margin:0;
    padding:14px;
    box-sizing:border-box;
}

        /* ----- POPUP CLOSE BUTTON ----- */

        .leaflet-popup.place-popup-wrap .leaflet-popup-close-button{
            top:10px !important;
            right:10px !important;

            width:30px !important;
            height:30px !important;

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

            padding:0 !important;

            border:0 !important;
            border-radius:50% !important;

            background:rgba(45,52,52,.75) !important;

            color:#fff !important;

            font-size:19px !important;
            font-weight:400 !important;

            line-height:30px !important;

            opacity:1 !important;
        }

        .leaflet-popup.place-popup-wrap .leaflet-popup-close-button:hover{
            background:rgba(45,52,52,.9) !important;
        }

        .place-popup{font-family:var(--font);color:#26312e}
        .popup-photo{
            width:calc(100% + 28px);
            height:118px;
            margin:-14px -14px 14px;
            display:block;
            object-fit:cover;
        }
        .place-popup .popup-category{
            display:inline-flex;
            padding:6px 10px;
            margin:0 0 10px;
            border-radius:999px;
            background:#26312e;
            color:#f6f3e8;
            font-size:9px;
            font-weight:900;
            letter-spacing:.06em;
            text-transform:uppercase;
        }
        .place-popup .popup-title{
            margin:0 0 8px;
            font-size:24px;
            line-height:.95;
            letter-spacing:-.045em;
            color:#3f4a47;
        }

        .popup-row{
            display:grid;
            grid-template-columns:70px 1fr;
            gap:8px;
            margin:7px 0;
            font-size:11px;
            line-height:1.45;
        }
        .popup-row b{font-size:11px;color:#47514e}
        .popup-row span{color:#6b7472}
        .popup-description{
            margin:10px 0;
            color:#69706d;
            font-size:10px;
            line-height:1.5;
        }
        .popup-actions{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:8px;
            margin-top:14px;
        }
        .popup-actions a,
        .popup-actions button{
            min-height:38px;
            border:1px solid #c7cbc4;
            border-radius:14px;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:0 9px;
            box-sizing:border-box;
            background:transparent;
            color:#46514e;
            text-decoration:none;
            font:700 10px var(--font);
            cursor:pointer;
        }
        .popup-actions a{
            background:#2e3d37;
            border-color:#2e3d37;
            color:#fff;
        }
        .popup-actions button:hover{background:#e7e6df}


/* ----- DISTRICT HOVER LABEL ----- */

.kecamatan-tooltip{
    background:#111 !important;
    border:2px solid var(--orange) !important;
    border-radius:8px !important;

    color:var(--orange) !important;

    padding:7px 11px !important;

    font-family:var(--font) !important;

    font-size:11px !important;

    font-weight:800 !important;

    letter-spacing:.02em;

    box-shadow:
        0 5px 15px rgba(0,0,0,.20) !important;
}


        /* ----- REMOVE DEFAULT LEAFLET ARROW ----- */

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

        @media(max-width:760px){

        .map-layout{
            height:auto;
            min-height:100vh;
            grid-template-columns:1fr;
        }

        .map-panel{
            min-height:360px;
        }

        #map{
            height:65vh;
            min-height:470px;
        }

        }

/* ----- CATEGORY TREE ----- */

.category-tree{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.category-group{
    border:1px solid rgba(0,0,0,.08);
    background:rgba(255,255,255,.32);
}

.category-group > .category-parent{
    border:0;
    border-bottom:1px solid rgba(0,0,0,.07);
    background:rgba(255,255,255,.62);
    font-weight:800;
    min-height:44px;
}

.category-children{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:3px 0;
}

.category-child{
    min-height:36px;
    border:0;
    border-bottom:1px solid rgba(0,0,0,.045);
    background:transparent;
    padding-left:34px;
    font-size:10px;
}

.category-child:last-child{
    border-bottom:0;
}

.category-all{
    font-weight:800;
    background:#fff;
    text-transform:uppercase;
}

.category-parent,
.category-child{
    text-transform:uppercase;
}

.category-parent:hover,
.category-child:hover,
.category-all:hover{
    background:rgba(255,91,46,.08);
}

        /* ----- SHARED MARKER & LEGEND STYLE ----- */

        .custom-marker{
            background:var(--marker-color) !important;
        }

        .legend-marker{
            position:relative;
            background:var(--marker-color) !important;
        }

        .legend-marker::after{
            content:"";
            position:absolute;
            left:50%;
            bottom:-7px;
            width:10px;
            height:10px;
            background:var(--marker-color);
            transform:translateX(-50%) rotate(45deg);
            z-index:-1;
        }

        .legend-marker i{
            position:relative;
            z-index:2;
            color:#fff;
            font-size:10px;
            line-height:1;
        }

.marker-religion{ background:#8b5e83; }
.marker-education{ background:#3d7894; }
.marker-cafe{ background:#d9783a; }
.marker-restaurant{ background:#f47a1f; }
.marker-warung{ background:#c85d2e; }
.marker-foodcourt{ background:#7c5a3a; }

[class*="marker-dynamic-"]{
    background:var(--marker-color) !important;
}

@media(max-width:760px){
    .category-child{
        padding-left:30px;
    }
}

/* ----- FINAL CATEGORY MARKERS ----- */

.marker-fastfood{ background:#e05a33; }
.marker-bakery{ background:#c48a3a; }
.marker-cafe{ background:#d9783a; }
.marker-foodcourt{ background:#7c5a3a; }