body{
margin:0;
font-family:Arial,sans-serif;
}

#map{
width:100%;
height:70vh;
min-height:500px;
border-radius:12px;
}

#searchAreaBtn{
position:absolute;
top:20px;
left:50%;
transform:translateX(-50%);
z-index:1000;
background:white;
border:none;
padding:10px 16px;
border-radius:20px;
box-shadow:0 2px 10px rgba(0,0,0,0.2);
cursor:pointer;
display:none;
transition:all .2s ease;
}

#searchAreaBtn:hover{
transform:translateX(-50%) scale(1.05);
box-shadow:0 4px 14px rgba(0,0,0,0.25);
}

#filters{
position:absolute;
top:80px;
right:16px;
z-index:1000;

background:white;

padding:10px 12px;

border-radius:14px;

box-shadow:0 6px 20px rgba(0,0,0,0.18);

display:flex;
flex-direction:column;
gap:8px;

font-size:14px;

min-width:140px;
}

#filters label{
display:flex;
align-items:center;
gap:8px;
cursor:pointer;
padding:4px 6px;
border-radius:6px;
transition:background .15s ease;
}

#filters label:hover{
background:#f5f5f5;
}

#filters input{
transform:scale(1.1);
}

.popup-card{
min-width:220px;
max-width:260px;
font-size:15px;
line-height:1.35;
padding:0;
}

.popup-card img{
width:100%;
height:120px;
object-fit:cover;
border-radius:10px 10px 0 0;
margin:0;
}

.popup-title{
font-weight:600;
font-size:16px;
margin:10px 12px 6px;
}

.popup-card a{
display:inline-block;
margin:8px 12px 12px;
color:#0a7cff;
text-decoration:none;
font-weight:600;
}

.popup-card a:hover{
opacity:.7;
}

/* MOBILE */

@media (max-width:700px){

.popup-card{
min-width:200px;
max-width:240px;
font-size:14px;
}

.popup-card img{
height:110px;
}

.popup-title{
font-size:15px;
}

#filters{

position:absolute;
top:80px;
right:10px;
display:flex;
flex-direction:column;
gap:6px;
background:white;
padding:8px 10px;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,0.2);
font-size:13px;
z-index:2000;
}

#filters label{
display:flex;
align-items:center;
gap:6px;
}

#filters input{
transform:scale(1.4);
}

.marker-box{
font-size:15px;
padding:8px 10px;
}

}
/* MOBILE SHEET */

#mobileSheet{
position:fixed;
left:0;
bottom:0;
width:100%;
height:160px;
background:#fff;
border-radius:18px 18px 0 0;
box-shadow:0 -8px 24px rgba(0,0,0,0.25);
z-index:2000;

display:flex;
flex-direction:column;
}

@media (max-width:700px){

#mobileSheet{
height:220px;
}

}

#mobileSheet.collapsed{
height:28px;
overflow:hidden;
}

#sheetHandle{
width:100%;
text-align:center;
font-size:12px;
color:#666;
padding:6px 0;
cursor:pointer;
}

#sheetHandle span{
background:#fff;
padding:2px 10px;
border-radius:10px;
}

#sheetContent{
overflow-y:auto;
flex:1;
padding-bottom:20px;
}

.sheet-card{
display:flex;
gap:10px;
padding:10px 14px;
border-bottom:1px solid #eee;
cursor:pointer;
max-width:420px;
}

.sheet-img{
width:70px;
height:55px;
object-fit:cover;
border-radius:6px;
flex-shrink:0;
}

.sheet-info{
flex:1;
}

.sheet-price{
font-size:13px;
color:#666;
}

.sheet-card:hover{
background:#f5f5f5;
}

.sheet-title{
font-size:15px;
font-weight:600;
line-height:1.3;
margin-bottom:4px;

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

line-clamp:2;

overflow:hidden;
}

/* MARKERS */

.price-marker{
background:transparent;
border:none;
}

.marker-box{
background:white;
padding:6px 8px;
border-radius:12px;
box-shadow:0 3px 8px rgba(0,0,0,0.25);
font-weight:600;
font-size:13px;
line-height:1.1;
text-align:center;
border:1px solid #ddd;
white-space:nowrap;
min-width:44px;
transition:all .15s ease;
}

.marker-box span{
display:block;
font-size:10px;
color:#777;
margin-top:1px;
text-transform:capitalize;
}

.price-marker:hover .marker-box{
transform:scale(1.28) translateY(-3px);
box-shadow:0 12px 28px rgba(0,0,0,0.45);
border-color:#000;
}

.map-dim .marker-box{
opacity:0.35;
transform:scale(.95);
}

.map-dim .price-marker:hover .marker-box{
opacity:1;
transform:scale(1.28) translateY(-3px);
}
/* CLUSTERS */

.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large{
background:rgba(110,204,57,0.6);
}

.marker-cluster div{
background:#6BCB77;
color:white;
font-weight:bold;
width:44px;
height:44px;
line-height:44px;
border-radius:50%;
font-size:16px;
box-shadow:0 3px 8px rgba(0,0,0,0.3);
}

/* HOVER PREVIEW */

#hoverPreview{
position:absolute;
z-index:2000;
background:white;
border-radius:10px;
box-shadow:0 10px 24px rgba(0,0,0,0.25);
width:200px;
display:none;
overflow:hidden;
pointer-events:none;
animation:previewFade .12s ease;
}

#hoverPreview img{
width:100%;
height:110px;
object-fit:cover;
}

#hoverPreview .pcontent{
padding:8px;
font-size:14px;
}

#hoverPreview .ptitle{
font-weight:bold;
margin-bottom:4px;
}

@keyframes previewFade{
from{
opacity:0;
transform:translateY(4px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.marker-tour{
border-color:#2a7fff;
}

.marker-rental{
border-color:#27ae60;
}

.marker-experience{
border-color:#8e44ad;
}

#hoverPreview::after{
content:"";
position:absolute;
left:-8px;
top:50%;
transform:translateY(-50%);
border-width:8px;
border-style:solid;
border-color:transparent white transparent transparent;
}

.sheet-card.active{
background:#f2f7ff;
border-left:4px solid #2a7fff;
}
.leaflet-popup-content-wrapper{
padding:0;
border-radius:14px;
overflow:hidden;
}

.leaflet-popup-content{
margin:0;
}

.popup-card img{

display:block;

width:100%;
height:120px;

object-fit:cover;

border-radius:14px 14px 0 0;

}