.bicycle-svg-element {
    width: 100%;
    height: 100%;
}

.bicycle-svg-element #g1 * {
    vector-effect: non-scaling-stroke;
    stroke: black;
    stroke-width: 1.5;
}

.overlay-shape {
    cursor: pointer;
    pointer-events: all;
}

.overlay-shape .side-view-bolt-hitbox {
    stroke: #8080806b;
    stroke-width: 12;
    stroke-linecap: round;
    pointer-events: all;
}

.overlay-shape.active .side-view-bolt-hitbox {
    stroke: #6f6f6f1c;
}

.overlay-shape .side-view-bolt-line {
    stroke: black;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 4, 4;
    pointer-events: none; /* Let the hitbox handle clicks */
}

.overlay-shape.active .side-view-bolt-line {
    stroke: #dc2626;
}

.overlay-shape.active > g > circle {
    stroke: #dc2626 !important;
    stroke-width: 2 !important;
    stroke-dasharray: 4,2 !important;
    vector-effect: non-scaling-stroke !important;
}

.error-message {
    color: var(--red-400);
    padding: 2rem;
    border-radius: 0.5rem;
    background-color: var(--gray-900);
    text-align: center; /* Added for consistency */
}