/*
 * The toastr messages ("Produto adicionado ao carrinho.", form errors...), on the computer, the phone, the sign-in
 * pages and the backoffice. Measured 2026-10-13 before this file:
 *   - computer text 8.75px: toastr's boxes carry the class "toast", and Bootstrap 4 has its own .toast
 *     (font-size .875rem on a 10px root, opacity 0, translucent background) — so never simplify the selectors below
 *     to a bare .toast: they would lose to Bootstrap's;
 *   - white on toastr's green 3.13:1, blue 3.42:1 and orange 2.28:1 — below WCAG AA (4.5:1) for normal text;
 *   - phone toasts at opacity .8, which lowers the contrast further.
 * Sizes in px: the root font-size is 10px here, so rem would be 10px-based. The selectors carry an id, an element and
 * a class so they win over toastr.min.css whatever order the two arrive in (the layouts preload toastr's sheet async).
 * Each background below gives white text at least 5:1.
 */

#toast-container > div.toast {
    font-size: 15px;
    line-height: 1.4;
    opacity: 1;
}

#toast-container > div.toast .toast-title,
#toast-container > div.toast .toast-message {
    font-size: inherit;
    line-height: inherit;
}

#toast-container > div.toast-success { background-color: #1e7e34; }  /* 5.14:1 */
#toast-container > div.toast-error   { background-color: #bd362f; }  /* 5.63:1 (toastr's own) */
#toast-container > div.toast-warning { background-color: #9c5700; }  /* 5.56:1 */
#toast-container > div.toast-info    { background-color: #1f6f87; }  /* 5.70:1 */

@media (max-width: 767.98px) {
    #toast-container > div.toast {
        font-size: 16px;
    }
}