/* WISHLIST ICON MENU */
.wishlist-dd{
    position: relative;
}

.wishlist-dd-btn {
    position: relative;
    padding: 8px;
    border-radius: 9999px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.wishlist-dd-btn:hover {
    background: linear-gradient(to right, #dbeafe, #eff6ff, #ffffff);
}

.wishlist-dd-icon {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

.wishlist-dd-counter {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    min-width: 20px;
    height: 20px;
    padding: 0.15rem 0.4rem;
    background: #1f2937;
    color: #fff;
    font-size: 12px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* WISHLIST CARD */

.wishlist-header {
    display: flex;                 /* flex */
    align-items: center;           /* items-center */
    justify-content: space-between;/* justify-between */
    margin-bottom: 1rem;           /* mb-4 */
    padding-bottom: 0.5rem;        /* pb-2 */
    border-bottom: 1px solid #e5e7eb; /* border-b (gray-200) */
}

.wishlist-title {
    font-size: 1.125rem;           /* text-lg */
    font-weight: 600;              /* font-semibold */
    color: #1f2937;                /* text-gray-800 */
    margin: 0;
}

.wishlist-close {
    padding: 0.25rem;              /* p-1 */
    background: none;
    border: none;
    color: #6b7280;                /* text-gray-500 */
    cursor: pointer;
    display: block;
}

.wishlist-close:hover {
    color: #374151;                /* hover:text-gray-700 */
}

.wishlist-close-icon {
    width: 1.25rem;                /* w-5 */
    height: 1.25rem;               /* h-5 */
}

/* WISHLIST CONTENT DESKTOP*/

.wishlist-dd-item {
    background-color: #ffffff;     /* bg-white */
    padding: 0.75rem;              /* p-3 */
    border-radius: 0.5rem;         /* rounded-lg */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* shadow-sm */
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.wishlist-dd-item:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* hover:shadow-md */
}

.wishlist-image-wrapper {
    position: relative;            /* relative */
}

.wishlist-image {
    width: 100%;                   /* w-full */
    height: 7rem;                  /* h-28 */
    object-fit: cover;             /* object-cover */
    border-radius: 0.375rem;       /* rounded-md */
}

.wishlist-badge {
    position: absolute;            /* absolute */
    top: 0.5rem;                   /* top-2 */
    left: 0.5rem;                  /* left-2 */
    background-color: #dc2626;     /* bg-red-600 */
    color: #ffffff;
    font-size: 0.75rem;            /* text-xs */
    font-weight: 700;              /* font-bold */
    padding: 0.125rem 0.5rem;      /* px-2 py-0.5 */
    border-radius: 0.25rem;
}

.wishlist-content-wrapper {
    margin-top: 0.5rem; /* mt-2 */
}

.wishlist-content-wrapper > * + * {
    margin-top: 0.25rem; /* space-y-1 */
}

.wishlist-product-title {
    color: #1f2937;                /* text-gray-800 */
    font-weight: 500;              /* font-medium */
    font-size: 0.875rem;           /* text-sm */
    white-space: nowrap;           /* truncate */
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;   /* transition */
}

.wishlist-product-title:hover {
    color: #dc2626;                /* hover:text-red-600 */
}

.wishlist-name {
    color: #6b7280;        /* text-gray-500 */
    font-size: 0.75rem;   /* text-xs */
    white-space: nowrap;  /* truncate */
    overflow: hidden;
    text-overflow: ellipsis;
}

.wishlist-subtitle {
    font-size: 0.75rem;            /* text-xs */
    color: #6b7280;                /* text-gray-500 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wishlist-price {
    padding-top: 0.25rem;          /* pt-1 */
}

.wishlist-price-discount {
    color: #dc2626;                /* text-red-600 */
    font-weight: 700;              /* font-bold */
    font-size: 0.875rem;           /* text-sm */
}

.wishlist-price-original {
    color: #9ca3af;                /* text-gray-400 */
    font-size: 0.75rem;            /* text-xs */
    text-decoration: line-through;
    margin-left: 0.25rem;          /* ml-1 */
}

.wishlist-price-normal {
    color: #1f2937;                /* text-gray-800 */
    font-weight: 600;              /* font-semibold */
    font-size: 0.875rem;           /* text-sm */
}

/* FOOTER */

.wishlist-footer {
    margin-top: 1rem;          /* mt-4 */
    padding-top: 0.75rem;      /* pt-3 */
    border-top: 1px solid #e5e7eb; /* border-t (gray-200) */
}

.wishlist-button {
    display: block;            /* block */
    width: 100%;               /* w-full */
    background-color: #000;    /* bg-black */
    color: #fff;               /* text-white */
    padding: 0.75rem 1rem;     /* py-3 px-4 */
    text-align: center;        /* text-center */
    border-radius: 0.5rem;     /* rounded-lg */
    text-decoration: none;
    font-size: 0.875rem;       /* text-sm */
    transition: background-color 0.2s ease; /* transition */
}

.wishlist-button:hover {
    background-color: #1f2937; /* hover:bg-gray-800 */
}

.wishlist-empty {
    color: #6b7280;        /* text-gray-500 */
    text-align: center;   /* text-center */
    padding: 1rem 0;      /* py-4 */
    margin: 0;
}

.wishlist-panel {
        position: absolute;
        right: 0;
        top: 100%;
        margin-top: 0.5rem;
        width: 22rem;
        background: white;
        border-radius: 0.5rem;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        padding: 1rem;
        z-index: 50;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
}


@media (max-width: 767px) {
    .wishlist-panel {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        width: 90vw;
        max-width: 22rem;
        max-height: 80vh;

        margin: 0;
        border-radius: 0.75rem;
        z-index: 9999;

        display: flex;
        flex-direction: column;
        background: white;
    }
    .wishlist-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4); /* opacity douce */
        z-index: 9998;
    }
}

.wishlist-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}