/**
 * Shrenz Variation Image Swatches (Luxury Swatch Design - Like ayeshab.com)
 */

/* Swatch container */
.variations .thwvsf_fields ul.thwvsf-wrapper-ul.shrenz-ayeshab-swatches {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 8px 0 16px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Base Swatch Item */
.variations .thwvsf-wrapper-ul.shrenz-ayeshab-swatches .thwvsf-wrapper-item-li {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    position: relative !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    border: none !important;
    margin: 0 !important;
    padding: 2px !important;
    overflow: visible !important;
    box-shadow: 0 0 0 1px #d6d6d6, inset 0 0 0 2px #ffffff !important;
    transition: box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Swatch Hover */
.variations .thwvsf-wrapper-ul.shrenz-ayeshab-swatches .thwvsf-wrapper-item-li:hover {
    box-shadow: 0 0 0 1.5px #666666, inset 0 0 0 2px #ffffff !important;
    transform: translateY(-1px) scale(1.04) !important;
}

/* Swatch Selected (Signature luxury double ring) */
.variations .thwvsf-wrapper-ul.shrenz-ayeshab-swatches .thwvsf-wrapper-item-li.thwvsf-selected,
.variations .thwvsf-wrapper-ul.shrenz-ayeshab-swatches .thwvsf-wrapper-item-li.thwvsf-selected:hover {
    box-shadow: 0 0 0 2px #111111, inset 0 0 0 3px #ffffff !important;
    padding: 3px !important;
    transform: translateY(-1px) scale(1.02) !important;
}

/* Swatch Image Thumbnail */
.variations .thwvsf-wrapper-ul.shrenz-ayeshab-swatches .thwvsf-wrapper-item-li img.swatch-image,
.variations .thwvsf-wrapper-ul.shrenz-ayeshab-swatches .thwvsf-wrapper-item-li img.swatch-preview {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    pointer-events: none !important;
    margin: 0 !important;
    background: #f7f7f7;
}

/* Fallback color circle inside swatch if no image */
.variations .thwvsf-wrapper-ul.shrenz-ayeshab-swatches .thwvsf-wrapper-item-li .thwvsf-item-span-color {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    display: block !important;
}

/* Out of Stock / Inactive state */
.variations .thwvsf-wrapper-ul.shrenz-ayeshab-swatches .thwvsf-wrapper-item-li.out_of_stock,
.variations .thwvsf-wrapper-ul.shrenz-ayeshab-swatches .thwvsf-wrapper-item-li.deactive {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
    box-shadow: 0 0 0 1px #e5e5e5, inset 0 0 0 2px #ffffff !important;
    transform: none !important;
}

.variations .thwvsf-wrapper-ul.shrenz-ayeshab-swatches .thwvsf-wrapper-item-li.out_of_stock::after,
.variations .thwvsf-wrapper-ul.shrenz-ayeshab-swatches .thwvsf-wrapper-item-li.deactive::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 2px !important;
    right: 2px !important;
    height: 1.5px !important;
    background: #dc2626 !important;
    transform: rotate(-45deg) !important;
    transform-origin: center !important;
    pointer-events: none !important;
    z-index: 6 !important;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.8) !important;
}

/* Modern Tooltip */
.variations .thwvsf-wrapper-ul.shrenz-ayeshab-swatches .thwvsf-tooltip .tooltiptext {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #111111;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.variations .thwvsf-wrapper-ul.shrenz-ayeshab-swatches .thwvsf-tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.variations .thwvsf-wrapper-ul.shrenz-ayeshab-swatches .thwvsf-tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #111111 transparent transparent transparent;
}

/* Variations Table Header & Label */
.variations_form table.variations {
    width: 100%;
    margin-bottom: 12px;
}

.variations_form table.variations tr {
    border: none;
}

.variations_form table.variations th.label {
    padding: 8px 0 4px 0;
    vertical-align: middle;
    width: auto;
    text-align: left;
}

.variations_form table.variations th.label label {
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    letter-spacing: 0.2px;
    margin: 0;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
}

.variations_form table.variations th.label .shrenz-selected-color-name {
    font-weight: 500;
    color: #555555;
    margin-left: 6px;
    text-transform: capitalize;
}

.variations_form table.variations td.value {
    padding: 0 0 10px 0;
    vertical-align: middle;
}

/* Reset / Clear Button */
.variations_form .reset_variations {
    font-size: 12px;
    color: #888888;
    text-decoration: underline;
    margin-top: 4px;
    display: inline-block;
    transition: color 0.2s ease;
}

.variations_form .reset_variations:hover {
    color: #111111;
}

/* Mobile Tweaks */
@media (max-width: 768px) {
    .variations .thwvsf_fields ul.thwvsf-wrapper-ul.shrenz-ayeshab-swatches {
        gap: 10px !important;
        margin-bottom: 12px !important;
    }
    .variations .thwvsf-wrapper-ul.shrenz-ayeshab-swatches .thwvsf-wrapper-item-li {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }
}