/* Quick View Modal - Thumbnail Options Styling */
/* This file contains styling specifically for thumbnail options in quick view modals */

/* Container for thumbnail options */
.variant-options.thumbnail-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 4px 0 !important;
}

/* Individual thumbnail option label */
.thumbnail-option {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    cursor: pointer !important;
    padding: 4px !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    width: 50px !important;
    min-height: 65px !important;
}

/* Thumbnail image */
.thumbnail-image {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    border: 1px solid #e5e5e5 !important;
    background-color: #f8f9fa !important;
}

/* Thumbnail text label */
.thumbnail-text {
    font-size: 10px !important;
    margin-top: 4px !important;
    text-align: center !important;
    line-height: 1.2 !important;
    color: #666 !important;
    max-width: 48px !important;
    word-wrap: break-word !important;
}

/* Hidden radio input */
.thumbnail-radio {
    display: none !important;
}

/* Active state for thumbnail options - Clean without background effects */
.thumbnail-option.active {
    border-color: #007bff !important;
    background-color: transparent !important;
    transform: none !important;
}

.thumbnail-option.active .thumbnail-image {
    border-color: #007bff !important;
    box-shadow: 0 0 0 2px #007bff !important;
    transform: none !important;
}

.thumbnail-option.active .thumbnail-text {
    color: #007bff !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

/* Hover state - Simple underline and highlight */
.thumbnail-option:hover {
    background-color: transparent !important;
    border-color: transparent !important;
    transform: none !important;
}

.thumbnail-option:hover .thumbnail-image {
    opacity: 0.8 !important;
    transform: none !important;
}

.thumbnail-option:hover .thumbnail-text {
    text-decoration: underline !important;
    color: #007bff !important;
}

/* Override conflicting styles from variant-options.css */
#quick-view-modal .thumbnail-option:hover,
#quick-view-modal .btn-check:hover + .thumbnail-option {
    transform: none !important;
    background: transparent !important;
    border: 2px solid transparent !important;
    box-shadow: none !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Override all variant-options.css active/checked/focus states for thumbnails */
#quick-view-modal .btn-check:checked + .thumbnail-option,
#quick-view-modal .btn-check:active + .thumbnail-option,
#quick-view-modal .btn-check:focus + .thumbnail-option,
#quick-view-modal .thumbnail-option:active,
#quick-view-modal .thumbnail-option:focus {
    transform: none !important;
    background: transparent !important;
    border: 2px solid transparent !important;
    box-shadow: none !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Override thumbnail container scaling from variant-options.css */
#quick-view-modal .btn-check:checked + .thumbnail-option .thumbnail-container,
#quick-view-modal .btn-check:active + .thumbnail-option .thumbnail-container,
#quick-view-modal .btn-check:focus + .thumbnail-option .thumbnail-container {
    transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Override thumbnail image scaling */
#quick-view-modal .thumbnail-option .thumbnail-image,
#quick-view-modal .btn-check:checked + .thumbnail-option .thumbnail-image,
#quick-view-modal .btn-check:active + .thumbnail-option .thumbnail-image,
#quick-view-modal .btn-check:focus + .thumbnail-option .thumbnail-image {
    transform: none !important;
}

/* Only allow our clean active state styling */
#quick-view-modal .thumbnail-option.active .thumbnail-image {
    border-color: #007bff !important;
    box-shadow: 0 0 0 2px #007bff !important;
    transform: none !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .thumbnail-option {
        width: 45px !important;
        min-height: 60px !important;
        padding: 3px !important;
    }
    
    .thumbnail-image {
        width: 35px !important;
        height: 35px !important;
    }
    
    .thumbnail-text {
        font-size: 9px !important;
        margin-top: 3px !important;
        max-width: 43px !important;
    }
}

/* Error handling for broken images */
.thumbnail-image[src*="data:image/svg"] {
    background-color: #f5f5f5 !important;
    border-color: #ddd !important;
}

/* Ensure thumbnail options don't conflict with regular button options */
.variant-options:not(.thumbnail-options) .thumbnail-option {
    display: none !important;
}

/* Ensure proper layout in quick view modal */
#quick-view-modal .variant-group {
    margin-bottom: 15px !important;
}

#quick-view-modal .variant-label {
    margin-bottom: 5px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #333 !important;
}

/* Special styling for pattern/print options */
.variant-options.thumbnail-options.visual-options {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove any unwanted background effects from Bootstrap or other frameworks */
#quick-view-modal .thumbnail-option {
    background-image: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
}

#quick-view-modal .thumbnail-option:hover {
    background-image: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    transform: none !important;
}

#quick-view-modal .thumbnail-option.active {
    background-image: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 0 0 2px #007bff !important;
    transform: none !important;
}

/* Force override any scaling transforms with maximum specificity */
#quick-view-modal .thumbnail-option,
#quick-view-modal .thumbnail-option:hover,
#quick-view-modal .thumbnail-option:active,
#quick-view-modal .thumbnail-option:focus,
#quick-view-modal .thumbnail-option.active,
#quick-view-modal .btn-check:checked + .thumbnail-option,
#quick-view-modal .btn-check:active + .thumbnail-option,
#quick-view-modal .btn-check:focus + .thumbnail-option,
#quick-view-modal .btn-check:hover + .thumbnail-option {
    transform: none !important;
    will-change: auto !important;
}

/* High resolution displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .thumbnail-image {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
}