/* Styling for guide lines with wider detection range */
.guide-line {
    position: absolute;
    z-index: 150;
    cursor: move;
}

.guide-line::before {
    content: '';
    position: absolute;
    background-color: transparent;
    /* Wider invisible area for easier selection */
}

.guide-line.horizontal {
    height: 0;
    width: 100%;
    border-top: 1px dashed #ff0000;
    left: 0;
}

.guide-line.horizontal::before {
    left: 0;
    width: 100%;
    height: 10px; /* 5px above and 5px below the line */
    top: -5px;
}

.guide-line.vertical {
    width: 0;
    height: 100%;
    border-left: 1px dashed #ff0000;
    top: 0;
}

.guide-line.vertical::before {
    top: 0;
    height: 100%;
    width: 10px; /* 5px left and 5px right of the line */
    left: -5px;
}

/* Guide line when being dragged - make it more visible */
.guide-line.dragging {
    z-index: 152;
    border-top-color: #ff3333;
    border-left-color: #ff3333;
}

/* Show hover state to indicate draggability */
.guide-line:hover {
    border-top-color: #ff3333;
    border-left-color: #ff3333;
}