:root {
    --jdf-wishlist-color: #E53935;
    --jdf-wishlist-color-hover: #C62828;
}

/* ==========================================================================
   BOUTON WISHLIST DANS LA GRILLE
   ========================================================================== */
.jdf-wishlist-btn {
    width: 39px !important;
    height: 39px !important;
    border-radius: 50% !important;
    border: none !important;
    background: var(--jdf-bg-light, #F8F8F8) !important;
    color: var(--jdf-text, #1C1C1C) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    position: relative !important;
}

.jdf-wishlist-btn svg {
    transition: all 0.3s ease !important;
}

.jdf-wishlist-btn:hover {
    background: var(--jdf-wishlist-color) !important;
    transform: scale(1.1) !important;
}

.jdf-wishlist-btn:hover svg {
    stroke: #fff !important;
    fill: #fff !important;
}

.jdf-wishlist-btn.jdf-wishlist-active {
    background: var(--jdf-wishlist-color) !important;
}

.jdf-wishlist-btn.jdf-wishlist-active svg {
    stroke: #fff !important;
    fill: #fff !important;
}

.jdf-wishlist-btn.jdf-wishlist-active:hover {
    background: var(--jdf-wishlist-color-hover) !important;
}

.jdf-wishlist-btn.jdf-wishlist-pulse {
    animation: jdf-wishlist-pulse 0.4s ease !important;
}

@keyframes jdf-wishlist-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@media (max-width: 767px) {
    .jdf-wishlist-btn {
        width: 25px !important;
        height: 25px !important;
    }

    .jdf-wishlist-btn svg {
        width: 12px !important;
        height: 12px !important;
    }
}

/* ==========================================================================
   BOUTON WISHLIST PAGE PRODUIT UNIQUE
   ========================================================================== */
.jdf-wishlist-single-wrapper {
    display: inline-block !important;
}

.jdf-wishlist-single-wrapper .jdf-wishlist-btn {
    width: 39px !important;
    height: 39px !important;
}

.jdf-wishlist-single-wrapper .jdf-wishlist-btn svg {
    width: 20px !important;
    height: 20px !important;
}

@media (max-width: 767px) {
    .jdf-wishlist-single-wrapper .jdf-wishlist-btn {
        width: 39px !important;
        height: 39px !important;
    }

    .jdf-wishlist-single-wrapper .jdf-wishlist-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ==========================================================================
   PAGE WISHLIST
   ========================================================================== */
.jdf-wishlist-page {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px 0 !important;
}

.jdf-wishlist-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 30px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid var(--jdf-border, #E5E5E5) !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.jdf-wishlist-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: var(--jdf-text, #1C1C1C) !important;
}

.jdf-wishlist-count-badge {
    background: var(--jdf-primary, #C4A962) !important;
    color: white !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

@media (max-width: 767px) {
    .jdf-wishlist-title {
        font-size: 22px !important;
    }
}

/* ==========================================================================
   WISHLIST GRID
   ========================================================================== */
.jdf-wishlist-grid {
    gap: 24px !important;
}

@media (max-width: 1024px) {
    .jdf-wishlist-grid {
        gap: 20px !important;
    }
}

@media (max-width: 767px) {
    .jdf-wishlist-grid {
        gap: 12px !important;
    }
}

/* ==========================================================================
   BOUTON SUPPRIMER - PAGE WISHLIST
   ========================================================================== */
.jdf-wishlist-remove-btn {
    width: 39px !important;
    height: 39px !important;
    border-radius: 50% !important;
    border: none !important;
    background: var(--jdf-bg-light, #F8F8F8) !important;
    color: var(--jdf-text, #1C1C1C) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.jdf-wishlist-remove-btn svg {
    width: 20px !important;
    height: 20px !important;
    transition: all 0.3s ease !important;
}

.jdf-wishlist-remove-btn:hover {
    background: #E53935 !important;
    transform: scale(1.1) !important;
}

.jdf-wishlist-remove-btn:hover svg {
    stroke: #fff !important;
}

.jdf-wishlist-card.jdf-removing {
    opacity: 0 !important;
    transform: scale(0.8) translateY(-10px) !important;
    transition: all 0.4s ease !important;
}

@media (max-width: 767px) {
    .jdf-wishlist-remove-btn {
        width: 32px !important;
        height: 32px !important;
    }

    .jdf-wishlist-remove-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ==========================================================================
   WISHLIST EMPTY STATE
   ========================================================================== */
.jdf-wishlist-empty {
    text-align: center !important;
    padding: 60px 20px !important;
    background: #f9f9f9 !important;
    border-radius: 15px !important;
}

.jdf-wishlist-empty svg {
    stroke: #ccc !important;
    margin-bottom: 20px !important;
}

.jdf-wishlist-empty p {
    font-size: 18px !important;
    color: #666 !important;
    margin: 0 0 20px !important;
}

.jdf-wishlist-shop-btn {
    display: inline-block !important;
    padding: 14px 28px !important;
    background: var(--jdf-primary, #C4A962) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.3s ease !important;
}

.jdf-wishlist-shop-btn:hover {
    background: var(--jdf-primary-hover, #B39952) !important;
    color: #fff !important;
}

/* ==========================================================================
   LOGIN REQUIRED
   ========================================================================== */
.jdf-wishlist-login-required {
    text-align: center !important;
    padding: 60px 20px !important;
    background: #f9f9f9 !important;
    border-radius: 15px !important;
    max-width: 500px !important;
    margin: 40px auto !important;
}

.jdf-wishlist-login-required svg {
    stroke: #ccc !important;
    margin-bottom: 20px !important;
}

.jdf-wishlist-login-required h3 {
    font-size: 22px !important;
    margin: 0 0 10px !important;
    color: var(--jdf-text, #1C1C1C) !important;
}

.jdf-wishlist-login-required p {
    font-size: 15px !important;
    color: #666 !important;
    margin: 0 0 25px !important;
}

.jdf-wishlist-login-btn {
    display: inline-block !important;
    padding: 14px 32px !important;
    background: var(--jdf-primary, #C4A962) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.3s ease !important;
}

.jdf-wishlist-login-btn:hover {
    background: var(--jdf-primary-hover, #B39952) !important;
    color: #fff !important;
}

/* ==========================================================================
   ANIMATION SUPPRESSION CARD
   ========================================================================== */
.jdf-wishlist-card.jdf-removing {
    animation: jdf-card-remove 0.4s ease forwards !important;
}

@keyframes jdf-card-remove {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* ==========================================================================
   TOAST NOTIFICATION
   ========================================================================== */
.jdf-wishlist-toast {
    position: fixed !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(100px) !important;
    background: var(--jdf-primary, #C4A962) !important;
    color: #fff !important;
    padding: 14px 24px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    z-index: 999999 !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2) !important;
}

.jdf-wishlist-toast.jdf-toast-visible {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

.jdf-wishlist-toast.jdf-toast-success {
    background: var(--jdf-primary, #C4A962) !important;
}

.jdf-wishlist-toast.jdf-toast-error {
    background: var(--jdf-text, #1C1C1C) !important;
}

.jdf-wishlist-toast svg {
    flex-shrink: 0 !important;
}

@media (max-width: 767px) {
    .jdf-wishlist-toast {
        left: 20px !important;
        right: 20px !important;
        transform: translateX(0) translateY(100px) !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .jdf-wishlist-toast.jdf-toast-visible {
        transform: translateX(0) translateY(0) !important;
    }
}