/* Color swatch button — used in product detail and quick-buy drawer */
.color-input {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(240, 240, 240, 0.25);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    flex: 0 0 auto;
    display: inline-block;
    padding: 0;
    background-color: transparent;
}

.color-input:hover:not(:disabled) {
    border-color: rgba(240, 240, 240, 0.65);
}

.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 */
}

/* Selected color swatch */
.color-input.selected-color {
    border: 2px solid var(--fg-color, #f0f0f0) !important;
    box-shadow: 0 0 0 2px var(--bg-color, #0a0a0a);
    transform: scale(1.15);
}