.map-container {
    position: relative;
    width: 100%;
    margin: auto;
}

.map-container #map-image {
    width: 100%;
    height: auto;
    display: block;
}

.map-container .clickable-area {
    cursor: pointer;
    transition: fill 0.3s;
}

.map-container .clickable-area.available {
    fill: rgba(42, 255, 170, 0.1); /* Semi-transparent red */
}
.map-container .clickable-area.available:hover {
    fill: rgba(42, 255, 170, 0.5); /* Semi-transparent red */
}

.map-container .clickable-area:hover {
    fill: rgba(255, 0, 0, 0.8);
}

.map-container .clickable-area.sold {
    fill: rgba(255, 24, 0, 0.6); /* Semi-transparent red */
}
.map-container .clickable-area.sold:hover {
    fill: rgba(255, 24, 0, 0.5); /* Semi-transparent red */
}

.map-container .clickable-area.reserved {
    fill: rgba(0, 0, 0, 0.3); /* Semi-transparent red */
}
.map-container .clickable-area.reserved:hover {
    fill: rgba(0, 0, 0, 0.5); /* Semi-transparent red */
}