/* toast.css — global transient toasts (see toast.js). Matches the SpinGlobus design system:
   top-centre pill, slide-down + fade, success / error / warning variants, icon in a translucent
   circle (success/error) or bare (warning), optional dismiss. */
.sg-toast-wrap {
    position: fixed;
    left: 50%;
    /* Sit just BELOW the fluid header (--header-h is its single-source-of-truth height in components.css)
       so the toast never overlaps the logo. Falls back to a sensible offset if the var is missing. */
    top: calc(var(--header-h, 90px) + 12px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 1200;
    pointer-events: none;
    width: max-content;
    max-width: min(92vw, 440px);
}

.sg-toast {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 14px;
    border-radius: 999px;
    font-family: var(--sans, 'Inter', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
    box-shadow: 0 12px 30px rgba(10, 7, 24, .45);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .22s ease, transform .22s ease;
}

.sg-toast.is-in  { opacity: 1; transform: translateY(0); }
.sg-toast.is-out { opacity: 0; transform: translateY(-12px); }

.sg-toast--success { background: linear-gradient(135deg, #2fa172, #23895d); }
.sg-toast--error   { background: linear-gradient(135deg, #c62f26, #b3261e); }
.sg-toast--warning { background: linear-gradient(135deg, #e8b27a, #d98b5a); color: #3b2310; }

/* Icon: success/error sit in a translucent circle; warning shows the glyph bare. */
.sg-toast-ico { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sg-toast--success .sg-toast-ico,
.sg-toast--error .sg-toast-ico {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
}

.sg-toast-txt { display: block; }

.sg-toast-x {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 2px;
    padding: 2px;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .7;
    cursor: pointer;
    transition: opacity .15s ease;
}
.sg-toast-x:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .sg-toast { transition: opacity .22s ease; transform: none; }
    .sg-toast.is-in, .sg-toast.is-out { transform: none; }
}