.property-map-container { margin-bottom:20px; }
.property-map-image { position:relative; overflow:hidden; width:100%; height:auto; }
.property-map-image img.map-background { width:100%; display:block; }
.property-site-rectangle {
  position:absolute; background:rgba(0,255,0,0.3); border:2px solid #00b300; box-sizing:border-box;
}
.property-site-rectangle.sold { background:rgba(255,0,0,0.3); border:2px solid #b30000; }
.property-site-rectangle .site-name-input {
  position:absolute; top:2px; left:2px; width:60%; font-size:12px;
}
.property-site-rectangle .delete-rectangle-button {
  position:absolute; top:-8px; right:-8px; background:#c00; color:#fff; width:16px;height:16px;text-align:center;line-height:16px;border-radius:50%;cursor:pointer;
}
.property-map-table table { width:100%; border-collapse:collapse; margin-top:10px; }
.property-map-table th, .property-map-table td { border:1px solid #ccc; padding:4px; text-align:center; font-size:12px; }
.property-map-legend-admin { margin-bottom:10px; font-size:14px; }
.legend-rect { display:inline-block; width:20px; height:12px; margin-right:4px; }
.legend-rect.available { background:rgba(0,255,0,0.3); border:1px solid #00b300; }
.legend-rect.sold { background:rgba(255,0,0,0.3); border:1px solid #b30000; }

/* Ensure the rectangle itself remains on top */
.property-site-rectangle.ui-resizable {
    position: absolute;
  }
  
  /* Style the 8 drag handles */
  .property-site-rectangle .ui-resizable-handle {
    background: #ffffff !important;
    border: 1px solid #333333 !important;
    width: 8px !important;
    height: 8px !important;
    z-index: 20 !important;
  }
  
  /* Position each handle correctly */
  .ui-resizable-n { cursor: n-resize; top: -4px; left: 50%; transform: translateX(-50%); }
  .ui-resizable-e { cursor: e-resize; right: -4px; top: 50%; transform: translateY(-50%); }
  .ui-resizable-s { cursor: s-resize; bottom: -4px; left: 50%; transform: translateX(-50%); }
  .ui-resizable-w { cursor: w-resize; left: -4px; top: 50%; transform: translateY(-50%); }
  .ui-resizable-ne { cursor: ne-resize; top: -4px; right: -4px; }
  .ui-resizable-nw { cursor: nw-resize; top: -4px; left: -4px; }
  .ui-resizable-se { cursor: se-resize; bottom: -4px; right: -4px; }
  .ui-resizable-sw { cursor: sw-resize; bottom: -4px; left: -4px; }

.property-site-rectangle .site-name {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 3px;
  text-align: center;
  pointer-events: none; /* so it doesn’t block clicks on the rectangle */
}