/* Toastr notification styling: white card, coloured icon circle, dark title, soft message and a
   countdown bar in the message colour (client pick "A", 2026-10-12). Uses toastr's own elements
   (title, message, close button, progress bar).

   Kept in its own file (not appended to style.css) -- style.css is being
   actively edited/deployed directly by another developer, and an earlier
   version of this block appended there was silently lost when their next
   deploy overwrote it. */
#toast-container > .toast {
    --bwo-toast-color: #1D4ED8;
    --bwo-toast-tint: #EFF6FF;
    background: #fff none !important;
    border: 1px solid #e6e6ea;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(16, 18, 24, 0.12);
    padding: 14px 36px 16px 58px;
    width: 340px;
    max-width: calc(100vw - 24px);
    font-family: 'Outfit', sans-serif;
    color: #5a5c62;
    opacity: 1;
    overflow: hidden;
    position: relative;
}
#toast-container > .toast:hover {
    box-shadow: 0 12px 32px rgba(16, 18, 24, 0.16);
}
#toast-container > .toast-success { --bwo-toast-color: #2e7d32; --bwo-toast-tint: #eef7ef; }
#toast-container > .toast-error   { --bwo-toast-color: #D01010; --bwo-toast-tint: #fff1f1; }
#toast-container > .toast-warning { --bwo-toast-color: #B45309; --bwo-toast-tint: #fff6e6; }

#toast-container > .toast .toast-title {
    color: #171717;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 2px;
}
#toast-container > .toast .toast-message {
    font-size: 14px;
    line-height: 1.45;
}
#toast-container > .toast .toast-message a {
    color: #D01010;
    font-weight: 500;
}
/* Icon: a tinted circle with the glyph in the message colour. */
#toast-container > .toast::before {
    position: absolute;
    left: 14px;
    top: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    color: var(--bwo-toast-color);
    background: var(--bwo-toast-tint);
}
/* Message-only toasts (no title, e.g. compare's "up to 4 products"): icon centred on the text (BT-389). */
#toast-container > .toast:not(:has(.toast-title))::before {
    top: 50%;
    transform: translateY(-50%);
}
#toast-container > .toast-success::before { content: '\2713'; }
#toast-container > .toast-error::before   { content: '\2715'; }
#toast-container > .toast-warning::before { content: '!'; }
#toast-container > .toast-info::before {
    content: 'i';
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
}
#toast-container > .toast .toast-close-button {
    position: absolute;
    top: 10px;
    right: 12px;
    color: #171717;
    opacity: 0.45;
    text-shadow: none;
    font-weight: 400;
}
#toast-container > .toast .toast-close-button:hover,
#toast-container > .toast .toast-close-button:focus {
    opacity: 0.9;
}
#toast-container > .toast .toast-progress {
    height: 3px;
    background-color: var(--bwo-toast-color);
    opacity: 1;
}

/* Visualizer add to cart (bwoShowAddedToCartToast): product picture, name and quantity, then
   Checkout / View cart using the site's own .btn-red and .btn-bordered buttons. */
#toast-container > .toast.bwo-toast-product {
    width: 360px;
}
#toast-container .bwo-toast-item {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
}
#toast-container .bwo-toast-item img {
    flex: none;
    width: 48px;
    height: 48px;
    object-fit: contain;
    border: 1px solid #e6e6ea;
    border-radius: 8px;
    background: #fff;
}
#toast-container .bwo-toast-item strong {
    color: #171717;
    font-weight: 500;
}
#toast-container .bwo-toast-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
#toast-container .bwo-toast-actions .btn {
    flex: 1;
    padding: 7px 12px;
    font-size: 14px;
    border: 1px solid #970210;
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
}
#toast-container > .toast .toast-message .bwo-toast-actions .btn-red {
    color: #fff;
}
#toast-container > .toast .toast-message .bwo-toast-actions .btn-bordered {
    color: #000;
}