/**
 * Gallery Thumbnail Active State
 * Highlights the currently selected thumbnail
 */

/* Active thumbnail styling */
#selected-options .option-item.active-thumbnail {
    border: 2px solid #0073aa !important;
    box-shadow: 0 0 10px rgba(0, 115, 170, 0.3) !important;
    transform: scale(1.05) !important;
    z-index: 10 !important;
    position: relative !important;
}

/* Smooth transitions for thumbnails */
#selected-options .option-item {
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

/* Hover state for thumbnails */
#selected-options .option-item:hover {
    border-color: #0073aa !important;
    opacity: 0.9 !important;
    transform: scale(1.03) !important;
}

/* Ensure images fill their containers */
#selected-options .option-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Main preview area styling */
#wcc-main-preview {
    animation: fadeIn 0.3s ease-in !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Main preview image styling */
#wcc-main-preview-img {
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    #selected-options .option-item.active-thumbnail {
        transform: scale(1.02) !important;
    }
    
    #selected-options .option-item:hover {
        transform: scale(1.01) !important;
    }
}