/* Storefront notifications.
 *
 * The one place a message to the visitor appears, in place of the browser's
 * own alert(): that dialog is grey, blocks the whole page until it is
 * dismissed, and on a phone prints the site's address above every message as
 * though the browser were warning about us. Markup is built by ez-toast.js;
 * load both through partials/ez-toast.php.
 *
 * A dark card that hangs from the header's cart icon, caret pointing up at it.
 * Dark whatever the page theme: it reads on a light page as well as a dark one,
 * and sits against the black header it hangs from. ez-toast.js works out where
 * the icon is and sets top, right and --ez-caret-right on .ez-toasts; without
 * those (no header) the stack sits in the corner as below.
 */

.ez-toasts {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(340px, calc(100vw - 24px));

    /* The stack is as tall as the screen allows; it must not swallow clicks
       meant for the page in the gaps between cards. */
    pointer-events: none;
}

.ez-toast {
    pointer-events: auto;
    position: relative;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: #17141A;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
    color: #fff;
    font-family: var(--font-family-base, Montserrat, system-ui, sans-serif);
    font-size: 13.5px;
    line-height: 1.45;
    text-align: left;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
}

.ez-toast.is-in { opacity: 1; transform: none; }
.ez-toast.is-out { opacity: 0; transform: translateY(-8px); }

/* The caret: on the newest card only, and only when the stack hangs from the
   cart icon. A square turned 45 degrees, bordered on the two sides that show. */
.ez-toasts--anchored .ez-toast:first-child::before {
    content: "";
    position: absolute;
    top: -7px;
    right: var(--ez-caret-right, 22px);
    width: 12px;
    height: 12px;
    background: #17141A;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-left: 1px solid rgba(255, 255, 255, .12);
    transform: rotate(45deg);
}

/* ---------- first line: icon, title, close ---------- */

.ez-toast__head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ez-toast__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    color: #fff;
}

.ez-toast__icon svg { width: 10px; height: 10px; }

/* Green for done, brand red for a problem. The success colour is semantic,
   not the brand: red on "Added to cart" would read as an error. */
.ez-toast--success .ez-toast__icon { background: #1E9E5A; }
.ez-toast--error .ez-toast__icon { background: #D70006; }
.ez-toast--info .ez-toast__icon { background: rgba(255, 255, 255, .18); }

.ez-toast__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    overflow-wrap: anywhere;
}

.ez-toast__close {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: -1px -5px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, .5);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.ez-toast__close:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- message ---------- */

/* Indented to start under the title, not under the icon. */
.ez-toast__msg {
    margin: 3px 0 0 26px;
    color: rgba(255, 255, 255, .72);
    font-size: 12.5px;
    line-height: 1.5;

    /* Server messages arrive as whatever the endpoint wrote, including a
       validation list broken over several lines, and one long unbroken word
       must wrap rather than push the card wider than the screen. */
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* ---------- product row ---------- */

.ez-toast__item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 11px;
}

.ez-toast__thumb {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 6px;
    object-fit: cover;
    background: #2A2530;
}

.ez-toast__info { min-width: 0; }

.ez-toast__name,
.ez-toast__meta,
.ez-toast__price {
    margin: 0;
    overflow-wrap: anywhere;
}

.ez-toast__name { color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.ez-toast__meta { margin-top: 2px; color: rgba(255, 255, 255, .66); font-size: 12px; line-height: 1.4; }
.ez-toast__price { margin-top: 3px; color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.35; }

.ez-toast__price del {
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
    font-weight: 500;
}

/* ---------- buttons ---------- */

.ez-toast__actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
    margin-top: 12px;
}

.ez-toast__btn {
    display: block;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 6px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.ez-toast__btn:hover { border-color: #fff; color: #fff; }

.ez-toast__btn--primary { background: #D70006; border-color: #D70006; }
.ez-toast__btn--primary:hover { background: #B30005; border-color: #B30005; }

.ez-toast__close:focus-visible,
.ez-toast__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ---------- phones ---------- */

/* Edge to edge, 10px in from each side, still hanging from the header. */
@media (max-width: 560px) {
    .ez-toasts {
        top: 12px;
        left: 10px;
        right: 10px;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ez-toast,
    .ez-toast.is-out {
        transform: none;
        transition: opacity .01s linear;
    }
}