.color-input.disabled-color {
    opacity: 0.5;
    cursor: not-allowed;
    position: relative; /* This is essential for positioning the slash */
}

/* This creates the visual slash using a "pseudo-element" */
.color-input.disabled-color::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top left,
        transparent 48.5%,
        #dc3545 48.5%, /* A sharp red line */
        #dc3545 51.5%,
        transparent 51.5%
    );
    pointer-events: none; /* Prevents the slash from interfering with anything */
}

/* Optional: Style for the currently selected color */
.color-input.selected-color {
    border: 2px solid #0dcaf0; /* A bright blue border */
    transform: scale(1.1);
}