/* =====================================================
   SHARED TOAST
   -----------------------------------------------------
   Used by the _Toast partial + toast.js.

   Deliberately namespaced (.wv-toast, not .cart-toast): three different
   .cart-toast definitions already exist — Shop.css, Dashboard.css and
   contactus.css — all of which load globally, so which one wins depends on
   link order. The shared toast keeps its own class names so it looks the
   same on every screen, including the standalone auth pages that do not use
   _Layout (Login / Forgot Password / Reset Password).

   The older per-page toasts on Shop, Cart, Checkout, Product Details,
   Account Details, Addresses, Payment Methods and Contact Us still use
   .cart-toast and are untouched.
===================================================== */

.wv-toast {
    position: fixed;
    /* Clears the 84px sticky header (header.css) — at the old top: 30px the toast
       sat on top of the cart button, hiding it for the toast's whole lifetime,
       which is exactly the control someone wants after "added to cart". */
    top: 100px;
    right: 30px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 340px;
    max-width: min(420px, calc(100vw - 40px));
    padding: 18px 20px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
    font-family: Inter, Arial, Helvetica, sans-serif;
    opacity: 0;
    visibility: hidden;
    transform: translateX(420px);
    transition: transform .35s ease, opacity .35s ease, visibility .35s ease;
}

.wv-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.wv-toast.success {
    border-left: 5px solid #16a34a;
}

.wv-toast.error {
    border-left: 5px solid #dc2626;
}

.wv-toast-icon {
    width: 52px;
    height: 52px;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(37, 99, 235, .08);
}

.wv-toast-icon i {
    font-size: 22px;
}

.wv-toast.success .wv-toast-icon i {
    color: #16a34a;
}

.wv-toast.error .wv-toast-icon i {
    color: #dc2626;
}

.wv-toast-content h4 {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
    font-weight: 700;
}

.wv-toast-content p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}

@media (max-width: 520px) {
    .wv-toast {
        top: 96px;
        right: 16px;
        left: 16px;
        min-width: 0;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wv-toast {
        transition-duration: .01ms;
    }
}