/* Matches the old Gritter geometry (fixed top-right, 301px, 10px gap) so the notices
   land where checkout users expect them. */
#st-toast-wrapper {
    position: fixed;
    top: 10px;
    right: 20px;
    width: 301px;
    z-index: 9999;
}

@media only screen and (max-width: 750px) {
    #st-toast-wrapper {
        width: 90%;
    }
}

/* Visible by default; the entry animation is opt-in (see toast.js) so a skipped
   animation can never leave the notice invisible. */
.st-toast {
    margin: 0 0 10px 0;
    padding: 12px 11px 10px 11px;
    border-radius: 10px;
    color: #eee;
    font-size: 11px;
    font-family: verdana, sans-serif;
    opacity: 1;
    transition: opacity .3s ease;
}

.st-toast.is-entering {
    animation: st-toast-in .3s ease;
}

.st-toast.is-closing {
    opacity: 0;
}

@keyframes st-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: none; }
}

.st-toast-title {
    display: block;
    padding: 0 0 7px 0;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #000;
}

.st-toast p {
    padding: 0;
    margin: 0;
    word-wrap: break-word;
}

.st-toast-success {
    background: #579F50;
}

.st-toast-warning {
    background: rgba(224, 69, 69, 0.9);
}

@media (prefers-reduced-motion: reduce) {
    .st-toast {
        transition: none;
        animation: none;
    }
}