/* OnlyTicket (2026-11-04): toast design "A - clean card" for every toastr message (load after toastr.min.css).
   White card, round coloured icon, brand-colour line along the bottom (and progress bar). Type colours:
   success = brand red, error = dark red, info = brand orange, warning = amber. Favourites pass iconClass "toast-favourite"
   (heart icon). Only restyles toastr's own classes, so no toastr.* call changes. */
#toast-container > div.toast {
    position: relative; width: 340px; max-width: calc(100vw - 32px); padding: 14px 40px 16px 60px; margin-top: 0; margin-bottom: 10px;
    border-radius: 12px; border: 1px solid #e5e8ee; background: #fff; background-image: none !important; color: #1d2433; opacity: 1;
    font-family: inherit; font-size: 14px; line-height: 1.45;
    box-shadow: inset 0 -3px 0 var(--ot-toast, #e31e24), 0 12px 32px rgba(20, 26, 38, .14), 0 2px 6px rgba(20, 26, 38, .06);
    overflow: hidden;
}
#toast-container > div.toast:hover { opacity: 1; box-shadow: inset 0 -3px 0 var(--ot-toast, #e31e24), 0 14px 36px rgba(20, 26, 38, .18), 0 2px 6px rgba(20, 26, 38, .06); cursor: default; }

/* bottom positions: lift off the screen edge (toastr puts them at 0) */
#toast-container.toast-bottom-center, #toast-container.toast-bottom-right, #toast-container.toast-bottom-left, #toast-container.toast-bottom-full-width { bottom: 14px; }

/* 2026-11-07: messages that open at the top sit below the header, so the top menu stays usable (--nav-bottom = header's bottom edge, navigation.cshtml).
   Same place on every page; cart.css and product.css each had their own. */
#toast-container.toast-center-screen, #toast-container.toast-top-right { top: calc(var(--nav-bottom, 80px) + 10px); right: 12px; left: auto; transform: none; }

/* round icon */
#toast-container > div.toast::before {
    content: ""; position: absolute; left: 16px; top: 14px; width: 32px; height: 32px; border-radius: 50%;
    background: var(--ot-toast-soft, #fdecec) var(--ot-toast-icon) center / 16px 16px no-repeat;
}
#toast-container > .toast-success { --ot-toast: #e31e24; --ot-toast-soft: #fdecec;
    --ot-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e31e24' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
#toast-container > .toast-error { --ot-toast: #b42318; --ot-toast-soft: #fdecec;
    --ot-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
#toast-container > .toast-info { --ot-toast: #ff6a3d; --ot-toast-soft: #fff1ea;
    --ot-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9480f' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7.2v.1'/%3E%3C/svg%3E"); }
#toast-container > .toast-warning { --ot-toast: #f79009; --ot-toast-soft: #fef0c7;
    --ot-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b54708' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 16.8v.1'/%3E%3C/svg%3E"); }
#toast-container > .toast-favourite { --ot-toast: #e31e24; --ot-toast-soft: #fdecec;
    --ot-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e31e24'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.3-9.2C1.4 8 3.4 4.5 7 4.5c2 0 3.4 1.1 5 3 1.6-1.9 3-3 5-3 3.6 0 5.6 3.5 4.3 6.8-1.8 4.6-9.3 9.2-9.3 9.2z'/%3E%3C/svg%3E"); }

/* text */
#toast-container > div.toast .toast-title { font-weight: 600; font-size: 14px; color: #1d2433; margin: 0 0 2px; }
#toast-container > div.toast .toast-message { color: #475467; font-size: 13.5px; word-wrap: break-word; }
#toast-container > div.toast .toast-title + .toast-message { color: #687387; font-size: 13px; }
#toast-container > div.toast:not(:has(.toast-title)) .toast-message { color: #1d2433; font-weight: 500; font-size: 14px; padding-top: 5px; }
#toast-container > div.toast .toast-message a { color: #e31e24; font-weight: 600; text-decoration: none; }
#toast-container > div.toast .toast-message a:hover { text-decoration: underline; color: #b42318; }

/* close button */
#toast-container > div.toast .toast-close-button {
    position: absolute; top: 12px; right: 12px; float: none; width: 24px; height: 24px; border-radius: 50%;
    font-size: 18px; line-height: 22px; font-weight: 400; color: #98a2b3; text-shadow: none; opacity: 1; text-align: center;
}
#toast-container > div.toast .toast-close-button:hover { background: #f2f4f7; color: #1d2433; }

/* progress = the bottom line counting down */
#toast-container > div.toast .toast-progress { height: 3px; bottom: 0; background: var(--ot-toast, #e31e24); opacity: 1; }

@media (max-width: 480px) {
    #toast-container > div.toast { width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) {
    #toast-container > div.toast { transition: none; }
}