/* ============ STYLES UNIFIÉS POUR SÉLECTIONS ============ */
/* Add-ons YITH et Variations WooCommerce */

:root {
    --selection-border-color: var(--ast-global-color-0, #046bd2);
    --selection-border-width: 1px;
    --selection-check-size: 22px;
    --selection-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============ STYLES COMMUNS POUR ÉLÉMENTS SÉLECTIONNÉS ============ */

/* Bordures pour éléments sélectionnés */
.single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-product .yith-wapo-option.selected .product-container,
.single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-label .yith-wapo-option.selected div.label .label-container-display,
.single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-color .yith-wapo-option.selected div.label span.color,
.single-product div.select-option.swatch-wrapper.selected,
.single-product div.select-option.swatch-wrapper.selected .swatch-anchor {
    border: var(--selection-border-width) solid var(--selection-border-color) !important;
    transition: var(--selection-transition);
}

/* Compensation de padding pour les bordures plus épaisses des add-ons produits */
.single-product .yith-wapo-addon[data-addon-type="product"] .yith-wapo-option.selected .product-container {
    padding: 11px 14px !important;
}

/* ============ SYSTÈME DE COCHE UNIFIÉ ============ */

/* Coche pour add-ons produits */
.single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-product .yith-wapo-option.selected .product-container::after,
/* Coche pour add-ons couleurs */
.single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-color .yith-wapo-option.selected span.color::after,
/* Coche pour add-ons labels */
.single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-label .yith-wapo-option.selected div.label .label-container-display::after,
/* Coche pour variations de produits */
.single-product div.select-option.swatch-wrapper.selected::after {
    content: '';
    position: absolute;
    width: var(--selection-check-size);
    height: var(--selection-check-size);
    background: none;
    background-color: var(--selection-border-color);
    border: 1px solid #fff;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='12px' height='12px' fill='white'%3E%3Cpath d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    top: -8px;
    right: -8px;
    z-index: 10;
    
    /* Animation d'apparition */
    opacity: 0;
    transform: scale(0);
    animation: checkAppear 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Positionnement spécifique pour variations */
.single-product div.select-option.swatch-wrapper.selected::after {
    top: -5px;
    right: -5px;
}

/* ============ ANIMATION DE LA COCHE ============ */
@keyframes checkAppear {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-45deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.1) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* ============ STYLES SPÉCIFIQUES AUX VARIATIONS ============ */

/* Container des variations */
.single-product div.select-option.swatch-wrapper {
    position: relative;
    border-radius: 6px;
    transition: var(--selection-transition);
    overflow: visible;
}

/* Anchor des variations */
.single-product div.select-option.swatch-wrapper .swatch-anchor {
    border-radius: 4px;
    transition: var(--selection-transition);
    display: block;
    position: relative;
}

/* État normal des variations (pas de survol) */
.single-product div.select-option.swatch-wrapper:not(.selected) {
    border: 1px solid var(--ast-global-color-6, #e5e5e5);
}

.single-product div.select-option.swatch-wrapper:not(.selected) .swatch-anchor {
    border: 1px solid transparent;
}

/* ============ STYLES SPÉCIFIQUES AUX ADD-ONS ============ */

/* Amélioration des bordures normales pour add-ons */
.single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-product .yith-wapo-option:not(.selected) .product-container {
    border: 1px solid var(--ast-global-color-6, #e5e5e5);
    transition: var(--selection-transition);
}

.single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-label .yith-wapo-option:not(.selected) div.label .label-container-display {
    border: 1px solid var(--ast-global-color-6, #e5e5e5);
    transition: var(--selection-transition);
}

.single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-color .yith-wapo-option:not(.selected) div.label span.color {
    border: 1px solid var(--ast-global-color-6, #e5e5e5);
    transition: var(--selection-transition);
}

/* ============ OPTIMISATIONS VISUELLES ============ */

/* S'assurer que les éléments parents permettent le débordement de la coche */
.single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-product .yith-wapo-option,
.single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-label .yith-wapo-option,
.single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-color .yith-wapo-option,
.single-product div.swatch-control {
    overflow: visible;
	padding:5px;
}

/* Amélioration du contraste pour certaines couleurs */
.single-product div.select-option.swatch-wrapper.selected .swatch-anchor[style*="background-color:#F4F4ED"]::after,
.single-product div.select-option.swatch-wrapper.selected .swatch-anchor[style*="background-color:#fff"]::after,
.single-product div.select-option.swatch-wrapper.selected .swatch-anchor[style*="background-color:#ffffff"]::after {
    background-color: var(--selection-border-color);
    border-color: #333;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
    :root {
        --selection-check-size: 20px;
    }
    
    .single-product div.select-option.swatch-wrapper.selected::after {
        width: 20px;
        height: 20px;
        background-size: 10px;
        top: -4px;
        right: -4px;
    }
}

/* ============ DARK MODE SUPPORT ============ */
@media (prefers-color-scheme: dark) {
    .single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-product .yith-wapo-option.selected .product-container::after,
    .single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-color .yith-wapo-option.selected span.color::after,
    .single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-label .yith-wapo-option.selected div.label .label-container-display::after,
    .single-product div.select-option.swatch-wrapper.selected::after {
        border-color: rgba(255, 255, 255, 0.9);
    }
}

/* ============ ACCESSIBILITÉ ============ */

/* Focus visible pour les éléments interactifs */
.single-product div.select-option.swatch-wrapper:focus-visible,
.single-product .yith-wapo-block .yith-wapo-addon .yith-wapo-option input:focus-visible + label,
.single-product .yith-wapo-block .yith-wapo-addon .yith-wapo-option input:focus-visible + div {
    outline: 2px solid var(--selection-border-color);
    outline-offset: 2px;
}

/* Amélioration du contraste pour les utilisateurs avec des besoins spécifiques */
@media (prefers-contrast: high) {
    .single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-product .yith-wapo-option.selected .product-container::after,
    .single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-color .yith-wapo-option.selected span.color::after,
    .single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-label .yith-wapo-option.selected div.label .label-container-display::after,
    .single-product div.select-option.swatch-wrapper.selected::after {
        border-width: 2px;
    }
}

/* ============ OPTIMISATION DES PERFORMANCES ============ */

/* Réduction des animations pour les utilisateurs qui les préfèrent réduites */
@media (prefers-reduced-motion: reduce) {
    .single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-product .yith-wapo-option.selected .product-container::after,
    .single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-color .yith-wapo-option.selected span.color::after,
    .single-product .yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-label .yith-wapo-option.selected div.label .label-container-display::after,
    .single-product div.select-option.swatch-wrapper.selected::after {
        animation: none;
        opacity: 1;
        transform: scale(1);
    }
    
    :root {
        --selection-transition: none;
    }
}