/*!
 * toastr styles (self-hosted) — the toastr JS is bundled in plugin.min.js but its
 * stylesheet was never shipped on the front end, so every toastr call fired
 * invisibly (registration form had "no feedback" on coupon/payment/billing errors).
 * Standard toastr class names + top-right positioning, brand-tinted.
 */
#toast-container {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
}
#toast-container * {
    box-sizing: border-box;
}
#toast-container > div {
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    margin: 0 0 12px;
    padding: 14px 18px 14px 18px;
    width: 320px;
    max-width: calc(100vw - 24px);
    border-radius: 8px;
    background-color: #303030;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.96;
}
#toast-container > div:hover {
    opacity: 1;
    cursor: pointer;
}
#toast-container > .toast-success { background-color: #2e7d32; }   /* green */
#toast-container > .toast-error   { background-color: #c62828; }   /* red */
#toast-container > .toast-warning { background-color: #ef6c00; }   /* amber */
#toast-container > .toast-info    { background-color: #1565c0; }   /* blue */

.toast-title { font-weight: 700; margin-bottom: 2px; }
.toast-message { word-wrap: break-word; }
.toast-message a { color: #fff; text-decoration: underline; }

.toast-close-button {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    opacity: 0.7;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.toast-close-button:hover,
.toast-close-button:focus { opacity: 1; }

.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.4);
    opacity: 0.6;
}

/* Positions (toastr default is toast-top-right) */
.toast-top-right     { top: 16px; right: 16px; }
.toast-top-left      { top: 16px; left: 16px; }
.toast-bottom-right  { right: 16px; bottom: 16px; }
.toast-bottom-left   { bottom: 16px; left: 16px; }
.toast-top-center    { top: 16px; right: 0; width: 100%; }
.toast-bottom-center { bottom: 16px; right: 0; width: 100%; }
.toast-top-center > div,
.toast-bottom-center > div { margin-left: auto; margin-right: auto; }

@media (max-width: 480px) {
    #toast-container > div { width: calc(100vw - 24px); }
    .toast-top-right, .toast-top-left { top: 12px; right: 12px; left: 12px; }
}