/* ═══════════════════════════════════════════════════════════════════
   Toast notification subsystem.

   The toast root sits at the body level, positioned absolute. Each
   toast card is a self-contained component injected by JS.

   Toasts stack vertically and animate in/out via CSS transitions
   triggered by classes added/removed by JS.                           */

.iwa-toast-root {
    position: fixed;
    z-index: 2147483600;        /* Above mini-cart drawer (2147483000) */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    pointer-events: none;       /* Container is transparent — toasts inside re-enable */
    max-width: 380px;
    width: 100%;
    box-sizing: border-box;
}

/* Position variants */
.iwa-toast-root.iwa-toast-pos-bottom-right  { bottom: 0; right:  0; align-items: flex-end; }
.iwa-toast-root.iwa-toast-pos-bottom-left   { bottom: 0; left:   0; align-items: flex-start; }
.iwa-toast-root.iwa-toast-pos-bottom-center { bottom: 0; left:   50%; transform: translateX(-50%); align-items: center; }
.iwa-toast-root.iwa-toast-pos-top-right     { top:    0; right:  0; align-items: flex-end; flex-direction: column-reverse; }
.iwa-toast-root.iwa-toast-pos-top-left      { top:    0; left:   0; align-items: flex-start; flex-direction: column-reverse; }
.iwa-toast-root.iwa-toast-pos-top-center    { top:    0; left:   50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }

/* ─── Individual toast card ──────────────────────────────────────── */

.iwa-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #14130F;
    color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
    font-size: 14px;
    line-height: 1.4;
    pointer-events: auto;        /* Re-enable interaction on the toast itself */
    /* Initial state — offscreen + faded for the slide-in animation.
       JS adds .is-visible to trigger the animated entry. */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 220ms ease, transform 220ms ease;
    max-width: 100%;
    box-sizing: border-box;
}
.iwa-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Top-position variants slide from the top instead of from below */
.iwa-toast-pos-top-right .iwa-toast,
.iwa-toast-pos-top-left .iwa-toast,
.iwa-toast-pos-top-center .iwa-toast {
    transform: translateY(-20px);
}
.iwa-toast-pos-top-right .iwa-toast.is-visible,
.iwa-toast-pos-top-left .iwa-toast.is-visible,
.iwa-toast-pos-top-center .iwa-toast.is-visible {
    transform: translateY(0);
}

/* ─── Type variants ──────────────────────────────────────────────── */

.iwa-toast--success { background: #2E7D5B; }        /* Green — matches mini-cart safeguard accent */
.iwa-toast--info    { background: #14130F; }         /* Default ink */
.iwa-toast--warning { background: #B85B0E; }         /* Orange — caution without alarm */
.iwa-toast--error   { background: #C8472B; }         /* Red — explicit failure */

/* ─── Icon ───────────────────────────────────────────────────────── */

.iwa-toast-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: inherit;
}
.iwa-toast-icon svg { width: 20px; height: 20px; display: block; }

/* ─── Message ────────────────────────────────────────────────────── */

.iwa-toast-message {
    flex: 1 1 auto;
    min-width: 0;
    word-wrap: break-word;
}

/* ─── Dismiss button ─────────────────────────────────────────────── */

.iwa-toast-dismiss {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    border-radius: 4px;
    transition: color 150ms ease, background-color 150ms ease;
}
.iwa-toast-dismiss:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.10);
}
.iwa-toast-dismiss:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.50);
    outline-offset: 1px;
}
.iwa-toast-dismiss svg { width: 14px; height: 14px; display: block; }

/* ─── Mobile adjustments ─────────────────────────────────────────── */

@media (max-width: 480px) {
    .iwa-toast-root {
        max-width: 100%;
        padding: 12px;
    }
    .iwa-toast {
        padding: 11px 14px;
        font-size: 13.5px;
    }
}

/* ─── Reduced motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .iwa-toast { transition: opacity 100ms ease; transform: none !important; }
}