.modal-notification {
    position: fixed;
    z-index: 1000000;
    top: 96px;
    right: 24px;
    left: auto;
    display: none;
    width: min(410px,calc(100vw - 32px));
    min-height: 112px;
    padding: 18px 48px 18px 18px;
    overflow: hidden;
    color: #343a42;
    background: rgba(255,255,255,.98);
    border: 1px solid #e3e7eb;
    border-left: 4px solid #16a05d;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(24,31,38,.2);
    text-align: left;
    opacity: 0;
    transform: translate3d(30px,-8px,0);
    transition: opacity .25s ease,transform .25s ease;
    backdrop-filter: blur(10px)
}

.modal-notification.is-show {
    opacity: 1;
    transform: translate3d(0,0,0)
}

.cart-toast-icon {
    position: absolute;
    top: 19px;
    left: 18px;
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    color: #fff;
    background: linear-gradient(145deg,#22b96e,#118b50);
    border-radius: 50%;
    box-shadow: 0 7px 17px rgba(22,160,93,.25)
}

.modal-notification .cart-toast-icon i {
    color: #fff;
    font-size: 18px
}

.cart-toast-content {
    display: grid;
    gap: 5px;
    padding-left: 57px
}

.cart-toast-content strong {
    color: #30363d;
    font-size: 16px;
    line-height: 1.3;
    font-family: InterB
}

.modal-notification .cart-toast-content span {
    display: block;
    margin: 0;
    color: #747b84;
    font-size: 12px;
    line-height: 1.5
}

.cart-toast-content a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: max-content;
    margin-top: 2px;
    color: #e6001c;
    font-size: 12px;
    font-family: InterSB;
    text-decoration: none
}

.cart-toast-content a:hover { color: #b90018 }
.cart-toast-content a i { font-size: 10px; transition: transform .2s ease }
.cart-toast-content a:hover i { transform: translateX(3px) }

.modal-notification .close-modal {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    bottom: auto;
    left: auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: #8a9097;
    background: #f3f5f6;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color .2s ease,background .2s ease,transform .2s ease
}

.modal-notification .close-modal:hover {
    color: #e6001c;
    background: #fff0f2;
    transform: rotate(8deg)
}

.modal-notification .close-modal:focus-visible {
    outline: 3px solid rgba(230,0,28,.2);
    outline-offset: 2px
}

.modal-notification .close-modal i { color: currentColor; font-size: 12px }
.modal-notification .cart-toast-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 3px;
    margin: 0;
    background: linear-gradient(90deg,#16a05d,#61d79a);
    transform-origin: left center
}

.modal-notification.is-show .cart-toast-progress { animation: cart-toast-progress 2.8s linear forwards }
@keyframes cart-toast-progress { from { transform: scaleX(1) } to { transform: scaleX(0) } }

@media (max-width:767px) {
    .modal-notification {
        top: auto;
        right: 10px;
        bottom: 78px;
        width: calc(100vw - 20px);
        min-height: 102px;
        padding: 15px 43px 15px 14px;
        border-radius: 12px;
        transform: translate3d(0,25px,0)
    }
    .cart-toast-icon { top: 16px; left: 14px; width: 39px; height: 39px }
    .cart-toast-content { padding-left: 50px }
    .cart-toast-content strong { font-size: 15px }
}

@media (prefers-reduced-motion:reduce) {
    .modal-notification { transition-duration: .01ms }
    .modal-notification.is-show .cart-toast-progress { animation: none }
}