/* ====================================================
   Diamond Shape Icons - SVG Files
   Using individual SVG files for each diamond shape
   ==================================================== */

/* Base styles for all shape icons */
.shape-option .shape-icon {
    width: 36px;
    height: 36px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* transition: all 0.2s ease; */
    /* Apply purple theme color to SVG icons */
    filter: invert(27%) sepia(89%) saturate(1758%) hue-rotate(248deg) brightness(90%) contrast(95%);
}

/* Individual Diamond Shapes - Using SVG Files */
.shape-option[data-shape="ROUND"] .shape-icon {
    background-image: url('../images/round.svg');
}

.shape-option[data-shape="CUSHION"] .shape-icon {
    background-image: url('../images/cushion.svg');
}

.shape-option[data-shape="EMERALD"] .shape-icon {
    background-image: url('../images/emerald.svg');
}

.shape-option[data-shape="PEAR"] .shape-icon {
    background-image: url('../images/pear.svg');
}

.shape-option[data-shape="ASSCHER"] .shape-icon {
    background-image: url('../images/asscher.svg');
}

.shape-option[data-shape="PRINCESS"] .shape-icon {
    background-image: url('../images/princess.svg');
}

.shape-option[data-shape="OVAL"] .shape-icon {
    background-image: url('../images/oval.svg');
}

.shape-option[data-shape="HEART"] .shape-icon {
    background-image: url('../images/heart.svg');
}

.shape-option[data-shape="MARQUISE"] .shape-icon {
    background-image: url('../images/marquise.svg');
}

.shape-option[data-shape="RADIANT"] .shape-icon {
    background-image: url('../images/radiant.svg');
}

/* Hover and active states */
.shape-option:hover .shape-icon {
    transform: scale(1.1);
    /* Brighter purple on hover */
    filter: invert(35%) sepia(95%) saturate(2000%) hue-rotate(248deg) brightness(100%) contrast(110%);
}

.shape-option.active .shape-icon {
    transform: scale(1.1);
    /* Active state with glow effect */
    filter: invert(35%) sepia(95%) saturate(2000%) hue-rotate(248deg) brightness(100%) contrast(110%) drop-shadow(0 2px 8px rgba(86, 32, 225, 0.4));
}

/* Responsive sizing */
@media (max-width: 768px) {
    .shape-option .shape-icon {
        width: 28px;
        height: 28px;
    }
}