/*
 * Solar One toast theme: overrides for toastr 2.1.3 on the public website.
 * toastr's default theme is semi-transparent (opacity .8), square, uses PNG icons and sits at top: 12px with
 * z-index 999999, so it covers the sticky header (z-50, about 68px high). These rules restyle it to the site brand
 * and put the stack below the header. Selectors are prefixed with "html body" so they win whatever the CSS load order.
 */
:root { --site-header-h: 72px; }

html body #toast-container { z-index: 49; pointer-events: none; }
html body #toast-container.toast-top-right,
html body #toast-container.toast-top-left,
html body #toast-container.toast-top-center,
html body #toast-container.toast-top-full-width { top: calc(var(--site-header-h) + 12px); }
html body #toast-container.toast-top-right { right: 16px; }

html body #toast-container > div.toast {
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    width: 360px;
    max-width: calc(100vw - 32px);
    margin: 0 0 10px;
    padding: 14px 44px 16px 52px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    opacity: 1;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 20px;
    background-repeat: no-repeat;
    background-position: 16px 14px;
    background-size: 22px 22px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.35), 0 4px 10px -4px rgba(15, 23, 42, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
html body #toast-container > div.toast:hover {
    opacity: 1;
    cursor: default;
    transform: translateY(-1px);
    box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.4), 0 6px 12px -4px rgba(15, 23, 42, 0.22);
}

/* Brand colours + white line icons (inline SVG, no image requests). */
html body #toast-container > div.toast-success {
    background-color: #0f7a4a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.5 2.7 2.7L16.5 9.5'/%3E%3C/svg%3E") !important;
}
html body #toast-container > div.toast-error {
    background-color: #c0262d;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.5h.01'/%3E%3C/svg%3E") !important;
}
html body #toast-container > div.toast-info {
    background-color: #0f172a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.5h.01'/%3E%3C/svg%3E") !important;
}
html body #toast-container > div.toast-warning {
    background-color: #b45309;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") !important;
}

html body #toast-container .toast-title { font-family: 'Outfit', sans-serif; font-weight: 700; margin-bottom: 2px; }
html body #toast-container .toast-message { font-weight: 500; word-wrap: break-word; }
html body #toast-container .toast-message a { color: #ffffff; text-decoration: underline; }

/* Close button: a proper 28px hit target in the top-right corner. */
html body #toast-container .toast-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    float: none;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    text-shadow: none;
    opacity: 0.8;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
html body #toast-container .toast-close-button:hover,
html body #toast-container .toast-close-button:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    outline: none;
}

/* Progress bar: full-width track along the rounded bottom edge. */
html body #toast-container .toast-progress {
    position: absolute;
    left: 0;
    right: auto;
    bottom: 0;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.75);
    opacity: 1;
    border-radius: 0 3px 3px 0;
}

/* Mobile: full width under the header, stacked, easy to dismiss. */
@media (max-width: 640px) {
    :root { --site-header-h: 68px; }
    html body #toast-container.toast-top-right,
    html body #toast-container.toast-top-left,
    html body #toast-container.toast-top-center,
    html body #toast-container.toast-top-full-width { left: 12px; right: 12px; width: auto; top: calc(var(--site-header-h) + 8px); }
    html body #toast-container > div.toast { width: 100%; max-width: none; padding: 12px 42px 14px 48px; background-position: 14px 12px; background-size: 20px 20px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
    html body #toast-container > div.toast { transition: none; }
    html body #toast-container > div.toast:hover { transform: none; }
}