:root {
    --color-pink: #FFC0CB;
    --color-grey: #333333;
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-text-white: #FFFFFF;
    --color-pink-dark: #f061a7;
    --color-pink-magenta: rgb(232, 0, 113);
    
    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 30px;
    
    /* UI Elements */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --icon-size: 36px;
    --z-index-snackbar: 10;
    
    /* Icons */
    --icon-wishlist: url('https://images-static.naikaa.com/media/wysiwyg/uiTools/2025-1/heart-plus.svg');
    --icon-wishlist-active: url('https://images-static.naikaa.com/media/wysiwyg/uiTools/2025-1/heart-filled.svg');
    --icon-cart: url('https://images-static.naikaa.com/media/wysiwyg/uiTools/2025-1/shopping-bag.svg');
}

/* Snackbar styling */
#snackbar {
    max-width: 360px;
    width: 90%;
    visibility: hidden;
    background-color: var(--color-black);
    color: var(--color-text-white);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md) var(--spacing-sm);
    position: fixed;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-index-snackbar);
    transition: visibility 0.3s ease, background-color 0.3s ease;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

#snackbar .view-bag {
    color: var(--color-pink-dark);
    font-weight: 600;
}

/* Show snackbar (visible and with animation) */
#snackbar.show {
    visibility: visible;
}

/* Success style */
#snackbar.success {
    background-color: var(--color-grey);
    /* Green */
}

/* Error style */
#snackbar.error {
    background-color: var(--color-grey);
    /* Red */
}

.view-bag {
    color: var(--color-pink);
    cursor: pointer;
}

.action-button {
    width: var(--icon-size);
    height: var(--icon-size);
    display: inline-block;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    border-radius: var(--border-radius-sm);
    background-origin: content-box;
    padding: var(--spacing-xs) var(--spacing-xs);
}

/* Default: No Fill */
.icon-wishlist {
    background-image: var(--icon-wishlist);
    background-color: var(--color-white);
    border: 1px solid var(--color-pink);
}

/* Active: Filled */
.icon-wishlist.active {
    background-image: var(--icon-wishlist-active);
}

.icon-cart {
    background-image: var(--icon-cart);
    background-color: var(--color-pink-magenta);
}