/* SELL SHOPEE PREMIUM TOAST */

.ss-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999999;
    width: min(420px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.ss-toast {
    --toast-accent: #6D42F5;
    --toast-accent-dark: #5427D9;
    --toast-soft: #F2EDFF;
    --toast-border: rgba(109, 66, 245, .15);

    position: relative;
    width: 100%;
    min-height: 86px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 13px;
    padding: 15px 15px 15px 17px;
    overflow: hidden;
    border: 1px solid var(--toast-border);
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .99) 0%,
            rgba(252, 250, 255, .99) 58%,
            rgba(246, 241, 255, .98) 100%
        );
    box-shadow:
        0 24px 70px rgba(42, 23, 92, .18),
        0 8px 24px rgba(42, 23, 92, .09);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    font-family: "Manrope", sans-serif;
    pointer-events: auto;
    opacity: 0;
    transform:
        translateY(-12px)
        translateX(24px)
        scale(.97);
    transition:
        opacity .28s ease,
        transform .32s cubic-bezier(.2, .8, .2, 1);
}

.ss-toast.is-visible {
    opacity: 1;
    transform:
        translateY(0)
        translateX(0)
        scale(1);
}

.ss-toast::before {
    content: "";
    position: absolute;
    top: -55px;
    right: -48px;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            var(--toast-soft) 0%,
            rgba(255, 255, 255, 0) 72%
        );
    opacity: .95;
    pointer-events: none;
}



.ss-toast__accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 95px;
    height: 95px;
    border-radius: 0 0 90px 0;
    background:
        linear-gradient(
            135deg,
            var(--toast-soft),
            rgba(255, 255, 255, 0)
        );
    opacity: .75;
    pointer-events: none;
}

.ss-toast__icon-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ss-toast__icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--toast-accent),
            var(--toast-accent-dark)
        );
    font-size: 22px;
    box-shadow:
        0 10px 24px rgba(109, 66, 245, .24),
        inset 0 1px 0 rgba(255, 255, 255, .28);
    transform: rotate(-2deg);
}

.ss-toast__icon i {
    transform: rotate(2deg);
}

.ss-toast__content {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.ss-toast__title {
    display: block;
    margin: 0 0 4px;
    color: #201B2B;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.015em;
}

.ss-toast__message {
    display: block;
    color: #777181;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.55;
    word-break: break-word;
}

.ss-toast__close {
    position: relative;
    z-index: 3;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: #A29BAE;
    background: rgba(255, 255, 255, .45);
    font-size: 12px;
    cursor: pointer;
    transition:
        color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.ss-toast__close:hover {
    color: var(--toast-accent);
    background: var(--toast-soft);
    transform: rotate(6deg);
}

.ss-toast__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    overflow: hidden;
    background: rgba(109, 66, 245, .05);
}

.ss-toast__progress-bar {
    width: 100%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            var(--toast-accent),
            var(--toast-accent-dark)
        );
    transform-origin: left center;
    animation:
        ssToastProgress
        var(--toast-duration, 4500ms)
        linear
        forwards;
}

.ss-toast--success {
    --toast-accent: #1FA96A;
    --toast-accent-dark: #14824F;
    --toast-soft: #E9FBF2;
    --toast-border: rgba(31, 169, 106, .16);
}

.ss-toast--error {
    --toast-accent: #FF4D67;
    --toast-accent-dark: #D92E48;
    --toast-soft: #FFF0F3;
    --toast-border: rgba(255, 77, 103, .17);
}

.ss-toast--warning {
    --toast-accent: #F5A623;
    --toast-accent-dark: #D9890E;
    --toast-soft: #FFF7E8;
    --toast-border: rgba(245, 166, 35, .18);
}

.ss-toast--info {
    --toast-accent: #6D42F5;
    --toast-accent-dark: #5427D9;
    --toast-soft: #F2EDFF;
    --toast-border: rgba(109, 66, 245, .16);
}

.ss-toast.is-leaving {
    opacity: 0;
    transform:
        translateX(34px)
        scale(.97);
    transition:
        opacity .24s ease,
        transform .24s ease;
}

@keyframes ssToastProgress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

@media (max-width: 600px) {
    .ss-toast-container {
        top: 12px;
        left: 10px;
        right: 10px;
        width: auto;
        gap: 9px;
    }

    .ss-toast {
        min-height: 78px;
        grid-template-columns: 48px minmax(0, 1fr) 30px;
        gap: 10px;
        padding: 12px 11px 12px 13px;
        border-radius: 18px;
    }

    .ss-toast::after {
        top: 14px;
        bottom: 14px;
        width: 3px;
    }

    .ss-toast__icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-size: 19px;
    }

    .ss-toast__title {
        margin-bottom: 3px;
        font-size: 13px;
    }

    .ss-toast__message {
        font-size: 10.5px;
        line-height: 1.45;
    }

    .ss-toast__close {
        width: 29px;
        height: 29px;
        border-radius: 9px;
        font-size: 10px;
    }
}

@media (max-width: 380px) {
    .ss-toast-container {
        left: 7px;
        right: 7px;
    }

    .ss-toast {
        grid-template-columns: 44px minmax(0, 1fr) 28px;
        gap: 8px;
        padding: 10px 9px 10px 11px;
    }

    .ss-toast__icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
        font-size: 17px;
    }

    .ss-toast__title {
        font-size: 12px;
    }

    .ss-toast__message {
        font-size: 10px;
    }
}