/* Wrapper alignment handled in Inline CSS */

.ivs-swatch {
    display: inline-block;
    border: 1px solid #ddd;
    text-align: center;
    cursor: pointer;
    position: relative;
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
    transition: all 0.2s ease;
    background-color: #fff;
    color: #333;
    font-size: 14px;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    
    /* --- ALLOW TOOLTIP OVERFLOW --- */
    overflow: visible !important; 

    /* --- FORCE REMOVE THEME ARROWS --- */
    appearance: none;
    -webkit-appearance: none;
    background-image: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Force hide any pseudo-elements that themes use for arrows */
.ivs-swatch::before,
.ivs-swatch:not(:hover)::after {
    content: none !important;
    display: none !important;
    border: none !important;
}

.ivs-swatch.selected {
    font-weight: 600;
    background-color: #f1f1f1;
}

/* --- OUT OF STOCK STYLING --- */
.ivs-swatch.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f9f9f9;
    border-color: #eee !important;
    position: relative;
}

/* Red Cross Line for disabled items */
.ivs-swatch.disabled::before {
    content: '';
    display: block !important;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ff0000;
    transform: rotate(-45deg);
    opacity: 0.7;
    z-index: 5;
    pointer-events: none; 
}

/* --- TOOLTIP STYLING (CENTER ALIGNED + DOWNSIDE) --- */
.ivs-swatch[data-tooltip]:hover::after {
    content: attr(data-tooltip) !important;
    display: block !important;
    position: absolute;
    
    /* Position DOWN below the swatch */
    top: 100% !important; 
    margin-top: 5px !important;
    
    /* NUCLEAR CENTERING */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    
    /* Ensure box matches text width */
    width: max-content !important;
    max-width: 200px; 
    
    /* Visuals: Black text, Transparent BG */
    background: transparent !important;
    color: #000000 !important;
    padding: 0;
    
    /* Text Center Alignment */
    text-align: center !important; 
    
    font-size: 12px;
    font-weight: 600; 
    white-space: nowrap !important;
    
    z-index: 2147483647 !important; 
    
    pointer-events: none;
    line-height: 1.2;
    box-shadow: none !important;
    height: auto;
    border: none !important;
    
    margin-left: 0 !important;
    margin-right: 0 !important;
}