/*
    dz-notify - the house replacement for alert().

    Nathan's standing rule: never alert(), always a custom message. Beyond looking
    like 1998, a native alert BLOCKS the page - it freezes every subsequent event
    until it is dismissed, which on the checkout page made three separate debugging
    sessions look like the browser had hung.

    Styles live here rather than being assembled in JS. The older per-view showToast
    copies built a cssText string inline, which is exactly what this rule exists to
    stop: a colour or spacing change then has to be found in a script.
*/

.dz-notify-stack {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 10800;                 /* above the sticky header, below a modal backdrop */
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(360px, calc(100vw - 40px));
    pointer-events: none;           /* the stack never eats clicks; the toasts do */
}

.dz-notify {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.dz-notify.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.dz-notify.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
}

.dz-notify-error   { background: #c62828; }
.dz-notify-success { background: #007105; }
.dz-notify-info    { background: #1e3a5f; }

.dz-notify-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.dz-notify-text {
    flex: 1 1 auto;
    word-break: break-word;
}

.dz-notify-close {
    flex: 0 0 auto;
    background: none;
    border: 0;
    color: inherit;
    opacity: 0.75;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.dz-notify-close:hover,
.dz-notify-close:focus-visible {
    opacity: 1;
}

.dz-notify-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/*  Phones: full width across the bottom, where a thumb can reach the dismiss button
    and the message does not cover the field the person is trying to correct.        */
@media (max-width: 575.98px) {
    .dz-notify-stack {
        top: auto;
        bottom: 16px;
        left: 12px;
        right: 12px;
        max-width: none;
    }

    .dz-notify {
        font-size: 15px;
        padding: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dz-notify {
        transition: none;
    }
}