/* ====================================================
   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 SunDiamond coral tone to SVG icons */
    filter: var(--diamond-shape-filter, invert(58%) sepia(52%) saturate(2272%) hue-rotate(325deg) brightness(101%) contrast(101%));
}

/* 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 coral on hover */
    filter: var(--diamond-shape-filter-hover, invert(63%) sepia(69%) saturate(1750%) hue-rotate(327deg) brightness(100%) contrast(102%));
}

.shape-option.active .shape-icon {
    transform: scale(1.1);
    /* Active state with glow effect */
    filter: var(--diamond-shape-filter-hover, invert(63%) sepia(69%) saturate(1750%) hue-rotate(327deg) brightness(100%) contrast(102%)) drop-shadow(0 2px 8px rgba(255, 107, 107, 0.4));
}

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