#kk-map-container {
position: relative;
height: 600px;
width: 100%;
margin-bottom: 20px;
}
#map {
height: 100%;
width: 100%;
margin: 0;
}
#location-switch {
position: absolute;
bottom: 25px;
left: 10px;
z-index: 999;
background: white;
padding: 5px;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
font-family: Arial, sans-serif;
}
#location-switch button {
background-color: #fff;
border: 1px solid #ccc;
padding: 8px 12px;
margin: 0 5px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
color: #333;
}
#location-switch button:hover {
background-color: #f0f0f0;
}
#location-switch button.active {
background-color: #4285F4;
color: white;
border-color: #3367D6;
} .property-info {
font-family: Arial, sans-serif;
width: 220px;
cursor: pointer;
}
.property-info img {
width: 100%;
height: 140px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 8px;
}
.property-info h3 {
margin: 0 0 5px 0;
font-size: 14px;
color: #333 !important;
}
.property-info p {
margin: 5px 0;
font-size: 12px;
color: #555;
}
.property-info .price {
color: #2a8000;
font-weight: bold;
}
.property-info .details {
display: flex;
justify-content: space-between;
margin-top: 5px;
}
.property-info .details span {
font-size: 12px;
background-color: #f1f1f1;
padding: 2px 6px;
border-radius: 3px;
color: black;
}
.gm-style-iw {
cursor: pointer;
}
.property-info .view-details {
background-color: #6eb9d0;
color: white;
text-align: center;
padding: 6px 8px;
margin-top: 8px;
border-radius: 3px;
font-weight: bold;
font-size: 12px;
transition: background-color 0.2s;
}
.property-info:hover .view-details {
background-color: #91D4E7;
}