/* =========================
   CUSTOM SHOP NOTIFICATIONS
========================= */

.shop-notification {
    position: fixed;
    top: 25px;
    right: 25px;
    z-index: 9999;

    display: flex;
    align-items: center;
    gap: 12px;

    width: min(380px, calc(100vw - 40px));

    padding: 16px 18px;

    background: #ffffff;

    border: 2px solid #ED6FDD;
    border-radius: 16px;

    box-shadow:
        0 12px 35px rgba(82, 53, 199, 0.18);

    color: #5235c7;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;

    opacity: 0;
    transform: translateY(-20px);

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.shop-notification.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


/* Pink heart */

.shop-notification-icon {
    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f0ebff;

    color: #ED6FDD;

    font-size: 18px;
}


/* Message */

.shop-notification-content {
    flex: 1;
}


/* Close button */

.shop-notification-close {
    flex: 0 0 auto;

    width: 28px;
    height: 28px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: transparent;

    color: #BD6FEE;

    font-size: 22px;
    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.shop-notification-close:hover {
    background: #f0ebff;
    color: #5235c7;
}


/* Sold out variation */

.shop-notification.sold-out {
    border-color: #BD6FEE;
}


.shop-notification.sold-out
.shop-notification-icon {
    background: #f0ebff;
    color: #BD6FEE;
}


/* Low stock variation */

.shop-notification.low-stock {
    border-color: #ED6FDD;
}


.shop-notification.low-stock
.shop-notification-icon {
    background: #fde7f8;
    color: #ED6FDD;
}


/* Mobile */

@media (max-width: 600px) {

    .shop-notification {
        top: 15px;
        right: 20px;
        left: 20px;

        width: auto;

        padding: 14px 15px;

        border-radius: 14px;

        font-size: 14px;
    }

    .shop-notification-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

}