/* WooCommerce Color Swatches – Frontend Styles */

.wcs-swatch-wrap select {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
}

/* ── Disabled state for color & material swatches ── */
.colorSelectable.wcs-disabled,
.materialSelectable.wcs-disabled {
    opacity: 0.35;
    cursor: not-allowed !important;
    pointer-events: none;
    position: relative;
}

/* Diagonal strike-through line over disabled swatches */
.colorSelectable.wcs-disabled::after,
.materialSelectable.wcs-disabled::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 45%,
        rgba(255,255,255,0.75) 46%,
        rgba(255,255,255,0.75) 54%,
        transparent 55%
    );
    border-radius: inherit;
    pointer-events: none;
}

/* Disabled state for the MaterialText wrapper */
.MaterialText.wcs-disabled {
    opacity: 0.35;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Disabled state for checkbox swatches */
.swatch-checkbox-wrap.wcs-disabled {
    opacity: 0.35;
    cursor: not-allowed !important;
    pointer-events: none;
}
.swatch-checkbox-wrap.wcs-disabled label,
.swatch-checkbox-wrap.wcs-disabled input {
    cursor: not-allowed !important;
    pointer-events: none;
}

.wcs-swatches {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px;
}

.wcs-swatch {
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 4px;
    border: 2px solid transparent; outline: 2px solid transparent;
    outline-offset: 2px;
    transition: border-color 0.15s, outline-color 0.15s, opacity 0.15s, transform 0.1s;
    position: relative; user-select: none;
}
.wcs-swatch:hover         { border-color: #333; transform: scale(1.08); }
.wcs-swatch.wcs-active    { border-color: #333; outline: 2px solid #333; }
.wcs-swatch.wcs-disabled  { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.wcs-swatch.wcs-disabled::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 45%, rgba(255,255,255,0.7) 46%, rgba(255,255,255,0.7) 54%, transparent 55%);
    border-radius: 2px;
}

/* Color */
.wcs-type-color { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; }
.wcs-type-color .wcs-swatch-inner { display: block; width: 100%; height: 100%; border-radius: 50%; }

/* Image */
.wcs-type-image { width: 44px; height: 44px; overflow: hidden; border-radius: 4px; padding: 0; }
.wcs-type-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Label */
.wcs-type-label, .wcs-type- {
    min-width: 40px; height: 36px; padding: 0 10px; border-radius: 4px;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
    border: 2px solid #ccc; background: #fff; color: #333;
}
.wcs-type-label.wcs-active, .wcs-type-.wcs-active { background: #333; color: #fff; border-color: #333; }
.wcs-type-label .wcs-swatch-inner, .wcs-type- .wcs-swatch-inner { line-height: 1; }

/* Tooltip */
.wcs-swatch::before {
    content: attr(title); position: absolute;
    bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.8); color: #fff; font-size: 11px;
    white-space: nowrap; padding: 3px 7px; border-radius: 3px;
    opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 99;
}
.wcs-swatch:hover::before { opacity: 1; }