/**
 * TD – Glitch Related Products CSS - PIXEL PERFECT VERSION
 * Reproduction exacte du composant Next.js RelatedProducts
 * Mapping complet Tailwind → CSS pur avec variables exposées
 * 
 * @package GlitchElementorComponents
 * @since 1.0.0
 */

/* ===== RESET SCOPÉ ===== */
.td-rel,
.td-rel *,
.td-rel *::before,
.td-rel *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    vertical-align: baseline;
}

/* ===== VARIABLES CSS EXPOSÉES AU WRAPPER ===== */
.elementor-widget-td_glitch_related_products {
    /* Couleurs principales - éditables via Elementor */
    --color-primary: #E2AD3B;
    --color-secondary: #EAC966;
    --text: #FFFFFF;
    --muted: #E1E1E1;
    --bg: #020202;
    --panel: #1A1A1A;
    --border: rgba(225, 225, 225, 0.1);

    /* Espacements Tailwind → CSS */
    --space-1: 0.25rem;  /* space-1 */
    --space-2: 0.5rem;   /* space-2 */
    --space-3: 0.75rem;  /* space-3 */
    --space-4: 1rem;     /* space-4 */
    --space-6: 1.5rem;   /* space-6 */
    --space-8: 2rem;     /* space-8 */
    --space-12: 3rem;    /* space-12 */
    --space-16: 4rem;    /* space-16 */

    /* Tailles de police */
    --text-sm: 0.875rem;   /* text-sm */
    --text-base: 1rem;     /* text-base */
    --text-lg: 1.125rem;   /* text-lg */
    --text-xl: 1.25rem;    /* text-xl */
    --text-2xl: 1.5rem;    /* text-2xl */
    --text-3xl: 1.875rem;  /* text-3xl */
    --text-4xl: 2.25rem;   /* text-4xl */

    /* Poids de police */
    --font-light: 300;     /* font-light */
    --font-normal: 400;    /* font-normal */
    --font-medium: 500;    /* font-medium */
    --font-semibold: 600;  /* font-semibold */
    --font-bold: 700;      /* font-bold */
    --font-black: 900;     /* font-black */

    /* Rayons de bordure */
    --rounded-lg: 0.5rem;     /* rounded-lg */
    --rounded-xl: 0.75rem;    /* rounded-xl */
    --rounded-2xl: 1rem;      /* rounded-2xl */
    --rounded-3xl: 1.5rem;    /* rounded-3xl */
    --rounded-full: 9999px;   /* rounded-full */

    /* Opacités */
    --opacity-0: 0;
    --opacity-60: 0.6;
    --opacity-100: 1;

    /* Z-index */
    --z-10: 10;
    --z-20: 20;
}

/* ===== SECTION PRINCIPALE - py-16 bg-gradient-to-b ===== */
.elementor-widget-td_glitch_related_products .td-rel {
    /* py-16 = padding-top: 4rem; padding-bottom: 4rem; */
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
    
    /* bg-gradient-to-b from-[#020202] to-[#1A1A1A]/20 */
    background: linear-gradient(to bottom, var(--bg), rgba(26, 26, 26, 0.2));
    
    position: relative;
    width: 100%;
}

/* ===== CONTAINER - container mx-auto px-4 ===== */
.elementor-widget-td_glitch_related_products .td-rel__container {
    max-width: 1200px; /* container */
    margin-left: auto;  /* mx-auto */
    margin-right: auto; /* mx-auto */
    padding-left: var(--space-4);  /* px-4 */
    padding-right: var(--space-4); /* px-4 */
}

/* ===== HEADER - text-center mb-12 ===== */
.elementor-widget-td_glitch_related_products .td-rel__header {
    text-align: center; /* text-center */
    margin-bottom: var(--space-12); /* mb-12 */
}

/* ===== TITRE - text-3xl md:text-4xl font-black text-white mb-4 ===== */
.elementor-widget-td_glitch_related_products .td-rel__title {
    font-size: var(--text-3xl); /* text-3xl */
    font-weight: var(--font-black); /* font-black */
    color: var(--text); /* text-white */
    margin-bottom: var(--space-4); /* mb-4 */
    line-height: 1.2;
}

/* md:text-4xl */
@media (min-width: 768px) {
    .elementor-widget-td_glitch_related_products .td-rel__title {
        font-size: var(--text-4xl); /* md:text-4xl */
    }
}

/* ===== SOUS-TITRE - text-[#E1E1E1] font-light max-w-2xl mx-auto ===== */
.elementor-widget-td_glitch_related_products .td-rel__subtitle {
    color: var(--muted); /* text-[#E1E1E1] */
    font-weight: var(--font-light); /* font-light */
    max-width: 42rem; /* max-w-2xl */
    margin-left: auto; /* mx-auto */
    margin-right: auto; /* mx-auto */
    line-height: 1.6;
}

/* ===== GRILLE - grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 ===== */
.elementor-widget-td_glitch_related_products .td-rel__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* grid-cols-1 */
    gap: var(--space-8); /* gap-8 */
}

/* md:grid-cols-2 */
@media (min-width: 768px) {
    .elementor-widget-td_glitch_related_products .td-rel__grid {
        grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
    }
}

/* lg:grid-cols-3 */
@media (min-width: 1024px) {
    .elementor-widget-td_glitch_related_products .td-rel__grid {
        grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
    }
}

/* ===== CARTE - group relative bg-gradient-to-br rounded-3xl overflow-hidden border hover:border-[#E2AD3B]/30 transition-all duration-500 hover:scale-105 ===== */
.elementor-widget-td_glitch_related_products .td-rel__card {
    position: relative; /* relative */
    
    /* bg-gradient-to-br from-[#1A1A1A]/40 to-[#020202]/60 */
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.4), rgba(2, 2, 2, 0.6));
    
    border-radius: var(--rounded-3xl); /* rounded-3xl */
    overflow: hidden; /* overflow-hidden */
    
    /* border border-[#E1E1E1]/10 */
    border: 1px solid var(--border);
    
    /* transition-all duration-500 */
    transition: all 500ms ease;
    
    cursor: pointer;
}

/* hover:border-[#E2AD3B]/30 hover:scale-105 */
.elementor-widget-td_glitch_related_products .td-rel__card:hover {
    border-color: rgba(226, 173, 59, 0.3); /* hover:border-[#E2AD3B]/30 */
    transform: scale(1.05); /* hover:scale-105 */
}

/* ===== IMAGE CONTAINER - relative aspect-square overflow-hidden ===== */
.elementor-widget-td_glitch_related_products .td-rel__image-container {
    position: relative; /* relative */
    aspect-ratio: 1 / 1; /* aspect-square */
    overflow: hidden; /* overflow-hidden */
}

/* ===== IMAGE - object-cover transition-transform duration-500 group-hover:scale-110 ===== */
.elementor-widget-td_glitch_related_products .td-rel__image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* object-cover */
    transition: transform 500ms ease; /* transition-transform duration-500 */
}

/* group-hover:scale-110 */
.elementor-widget-td_glitch_related_products .td-rel__card:hover .td-rel__image {
    transform: scale(1.1); /* group-hover:scale-110 */
}

/* ===== BADGE - absolute top-4 left-4 px-3 py-1 rounded-full text-sm font-black ===== */
.elementor-widget-td_glitch_related_products .td-rel__badge {
    position: absolute; /* absolute */
    top: var(--space-4); /* top-4 */
    left: var(--space-4); /* left-4 */
    padding: var(--space-1) var(--space-3); /* px-3 py-1 */
    border-radius: var(--rounded-full); /* rounded-full */
    font-size: var(--text-sm); /* text-sm */
    font-weight: var(--font-black); /* font-black */
    color: var(--text); /* text-white */
    z-index: var(--z-10);
}

/* ===== ACTIONS - absolute top-4 right-4 flex flex-col space-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ===== */
.elementor-widget-td_glitch_related_products .td-rel__actions {
    position: absolute; /* absolute */
    top: var(--space-4); /* top-4 */
    right: var(--space-4); /* right-4 */
    display: flex; /* flex */
    flex-direction: column; /* flex-col */
    gap: var(--space-2); /* space-y-2 */
    opacity: var(--opacity-0); /* opacity-0 */
    transition: opacity 300ms ease; /* transition-opacity duration-300 */
    z-index: var(--z-10);
}

/* group-hover:opacity-100 */
.elementor-widget-td_glitch_related_products .td-rel__card:hover .td-rel__actions {
    opacity: var(--opacity-100); /* group-hover:opacity-100 */
}

/* ===== BOUTONS D'ACTION - bg-[#020202]/80 hover:bg-[#E2AD3B]/20 border border-[#E2AD3B]/30 ===== */
.elementor-widget-td_glitch_related_products .td-rel__action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; /* w-10 */
    height: 2.5rem; /* h-10 */
    
    /* bg-[#020202]/80 */
    background-color: rgba(2, 2, 2, 0.8);
    
    /* border border-[#E2AD3B]/30 */
    border: 1px solid rgba(226, 173, 59, 0.3);
    
    border-radius: var(--rounded-lg);
    color: var(--text);
    cursor: pointer;
    transition: all 200ms ease;
}

/* Wishlist button hover */
.elementor-widget-td_glitch_related_products .td-rel__wishlist-btn:hover {
    background-color: rgba(226, 173, 59, 0.2); /* hover:bg-[#E2AD3B]/20 */
    color: var(--color-primary);
}

/* Quick view button hover */
.elementor-widget-td_glitch_related_products .td-rel__quick-view-btn:hover {
    background-color: rgba(234, 201, 102, 0.2); /* hover:bg-[#EAC966]/20 */
    color: var(--color-secondary);
}

/* Wishlist active state */
.elementor-widget-td_glitch_related_products .td-rel__wishlist-btn.is-active {
    color: var(--color-primary);
}

.elementor-widget-td_glitch_related_products .td-rel__wishlist-btn.is-active svg {
    fill: currentColor;
}

/* ===== ADD TO CART - absolute bottom-4 left-4 right-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-4 group-hover:translate-y-0 ===== */
.elementor-widget-td_glitch_related_products .td-rel__add-to-cart {
    position: absolute; /* absolute */
    bottom: var(--space-4); /* bottom-4 */
    left: var(--space-4); /* left-4 */
    right: var(--space-4); /* right-4 */
    opacity: var(--opacity-0); /* opacity-0 */
    transform: translateY(1rem); /* translate-y-4 */
    transition: all 300ms ease; /* transition-all duration-300 */
    z-index: var(--z-10);
}

/* group-hover:opacity-100 group-hover:translate-y-0 */
.elementor-widget-td_glitch_related_products .td-rel__card:hover .td-rel__add-to-cart {
    opacity: var(--opacity-100); /* group-hover:opacity-100 */
    transform: translateY(0); /* group-hover:translate-y-0 */
}

/* ===== BOUTON ADD - w-full bg-gradient-to-r from-[#E2AD3B] to-[#EAC966] hover:from-[#EAC966] hover:to-[#E2AD3B] text-[#020202] font-black ===== */
.elementor-widget-td_glitch_related_products .td-rel__add-btn {
    width: 100%; /* w-full */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    
    /* bg-gradient-to-r from-[#E2AD3B] to-[#EAC966] */
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    
    color: var(--bg); /* text-[#020202] */
    font-weight: var(--font-black); /* font-black */
    border-radius: var(--rounded-lg);
    border: none;
    cursor: pointer;
    transition: all 200ms ease;
}

/* hover:from-[#EAC966] hover:to-[#E2AD3B] */
.elementor-widget-td_glitch_related_products .td-rel__add-btn:hover {
    background: linear-gradient(to right, var(--color-secondary), var(--color-primary));
}

/* ===== INFO PRODUIT - p-6 ===== */
.elementor-widget-td_glitch_related_products .td-rel__info {
    padding: var(--space-6); /* p-6 */
}

/* ===== NOM PRODUIT - text-lg font-black text-white mb-2 hover:text-[#E2AD3B] transition-colors ===== */
.elementor-widget-td_glitch_related_products .td-rel__name {
    font-size: var(--text-lg); /* text-lg */
    font-weight: var(--font-black); /* font-black */
    color: var(--text); /* text-white */
    margin-bottom: var(--space-2); /* mb-2 */
    line-height: 1.3;
}

.elementor-widget-td_glitch_related_products .td-rel__name-link {
    text-decoration: none;
    color: inherit;
    transition: color 200ms ease; /* transition-colors */
}

/* hover:text-[#E2AD3B] */
.elementor-widget-td_glitch_related_products .td-rel__name-link:hover .td-rel__name {
    color: var(--color-primary); /* hover:text-[#E2AD3B] */
}

/* ===== PRIX - flex items-center space-x-3 ===== */
.elementor-widget-td_glitch_related_products .td-rel__price {
    display: flex; /* flex */
    align-items: center; /* items-center */
    gap: var(--space-3); /* space-x-3 */
}

/* ===== PRIX ACTUEL - text-xl font-black text-[#E2AD3B] ===== */
.elementor-widget-td_glitch_related_products .td-rel__current-price {
    font-size: var(--text-xl); /* text-xl */
    font-weight: var(--font-black); /* font-black */
    color: var(--color-primary); /* text-[#E2AD3B] */
}

/* ===== PRIX ORIGINAL - text-sm text-[#E1E1E1]/60 line-through font-light ===== */
.elementor-widget-td_glitch_related_products .td-rel__original-price {
    font-size: var(--text-sm); /* text-sm */
    color: rgba(225, 225, 225, 0.6); /* text-[#E1E1E1]/60 */
    text-decoration: line-through; /* line-through */
    font-weight: var(--font-light); /* font-light */
}

/* ===== CTA GLOBAL - text-center mt-12 ===== */
.elementor-widget-td_glitch_related_products .td-rel__cta-container {
    text-align: center; /* text-center */
    margin-top: var(--space-12); /* mt-12 */
}

/* ===== BOUTON CTA - border-[#E2AD3B]/50 text-[#E2AD3B] hover:bg-[#E2AD3B]/10 px-8 py-4 font-black bg-transparent ===== */
.elementor-widget-td_glitch_related_products .td-rel__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-8); /* px-8 py-4 */
    
    /* border-[#E2AD3B]/50 */
    border: 1px solid rgba(226, 173, 59, 0.5);
    
    color: var(--color-primary); /* text-[#E2AD3B] */
    font-weight: var(--font-black); /* font-black */
    background-color: transparent; /* bg-transparent */
    border-radius: var(--rounded-lg);
    text-decoration: none;
    cursor: pointer;
    transition: all 200ms ease;
}

/* hover:bg-[#E2AD3B]/10 */
.elementor-widget-td_glitch_related_products .td-rel__cta-btn:hover {
    background-color: rgba(226, 173, 59, 0.1); /* hover:bg-[#E2AD3B]/10 */
}

/* ===== ANIMATION FADEINUP ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Application de l'animation avec délai séquencé */
.elementor-widget-td_glitch_related_products .td-rel__card[style*="animation-delay"] {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

/* ===== ICÔNES SVG ===== */
.elementor-widget-td_glitch_related_products .td-rel__action-btn svg,
.elementor-widget-td_glitch_related_products .td-rel__add-btn svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
    stroke: currentColor;
}

.elementor-widget-td_glitch_related_products .td-rel__action-btn svg *,
.elementor-widget-td_glitch_related_products .td-rel__add-btn svg * {
    fill: currentColor;
    stroke: currentColor;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Tablet */
@media (max-width: 1023px) {
    .elementor-widget-td_glitch_related_products .td-rel__container {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
    
    .elementor-widget-td_glitch_related_products .td-rel__grid {
        gap: var(--space-6);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .elementor-widget-td_glitch_related_products .td-rel {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }
    
    .elementor-widget-td_glitch_related_products .td-rel__header {
        margin-bottom: var(--space-8);
    }
    
    .elementor-widget-td_glitch_related_products .td-rel__title {
        font-size: var(--text-2xl);
    }
    
    .elementor-widget-td_glitch_related_products .td-rel__grid {
        gap: var(--space-4);
    }
    
    .elementor-widget-td_glitch_related_products .td-rel__info {
        padding: var(--space-4);
    }
    
    .elementor-widget-td_glitch_related_products .td-rel__cta-container {
        margin-top: var(--space-8);
    }
    
    .elementor-widget-td_glitch_related_products .td-rel__cta-btn {
        padding: var(--space-3) var(--space-6);
    }
}

/* ===== RTL SUPPORT ===== */
[dir="rtl"] .elementor-widget-td_glitch_related_products .td-rel__badge {
    left: auto;
    right: var(--space-4);
}

[dir="rtl"] .elementor-widget-td_glitch_related_products .td-rel__actions {
    right: auto;
    left: var(--space-4);
}

/* ===== ACCESSIBILITY ===== */
.elementor-widget-td_glitch_related_products .td-rel__action-btn:focus,
.elementor-widget-td_glitch_related_products .td-rel__add-btn:focus,
.elementor-widget-td_glitch_related_products .td-rel__cta-btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ===== LOADING STATES ===== */
.elementor-widget-td_glitch_related_products .td-rel__add-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.elementor-widget-td_glitch_related_products .td-rel__add-btn.loading::after {
    content: "";
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: var(--space-2);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .elementor-widget-td_glitch_related_products .td-rel__actions,
    .elementor-widget-td_glitch_related_products .td-rel__add-to-cart {
        display: none;
    }
}