/* public/fenasco-common/toasts.css */
:root{
    --fns-toast-z: 2147483000;
    --fns-toast-radius: 18px;
    --fns-toast-shadow: 0 22px 60px rgba(2, 6, 23, .22);
}

.toast-container,
.fns-toast-container{
    position: fixed !important;
    top: 92px !important;
    right: 22px !important;
    left: auto !important;
    z-index: var(--fns-toast-z) !important;
    display: grid;
    gap: 12px;
    width: min(420px, calc(100vw - 28px));
    pointer-events: none;
}

.toast,
.toast-success,
.toast-error,
.toast-warning,
.toast-info,
.toast-credentials,
.js-auto-toast,
.ul-toast{
    z-index: var(--fns-toast-z) !important;
    pointer-events: auto;
}

.toast-success,
.toast-error,
.toast-warning,
.toast-info,
.toast-credentials,
.js-auto-toast{
    position: fixed;
    top: 92px;
    right: 22px;
    left: auto;
    width: min(420px, calc(100vw - 28px));
    border-radius: var(--fns-toast-radius);
    box-shadow: var(--fns-toast-shadow);
    animation: fnsToastIn .55s cubic-bezier(.2,.8,.2,1) both;
    transition: opacity .75s ease, transform .75s ease, filter .75s ease;
}

.toast-credentials{
    background: linear-gradient(135deg, #063b2b, #08724b) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
}

.toast-success{ background: #ecfdf5 !important; color: #065f46 !important; border: 1px solid #a7f3d0 !important; }
.toast-error{ background: #fef2f2 !important; color: #991b1b !important; border: 1px solid #fecaca !important; }
.toast-warning{ background: #fffbeb !important; color: #92400e !important; border: 1px solid #fde68a !important; }
.toast-info{ background: #eff6ff !important; color: #1e40af !important; border: 1px solid #bfdbfe !important; }

.toast-close,
.fns-toast-close{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .10);
    color: inherit;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: .2s ease;
}
.toast-close:hover,
.fns-toast-close:hover{ transform: scale(1.06); background: rgba(15,23,42,.18); }

.fns-toast-hiding{
    opacity: 0 !important;
    transform: translateY(-12px) scale(.985) !important;
    filter: blur(2px);
}

@keyframes fnsToastIn{
    from{ opacity: 0; transform: translateX(24px) translateY(-8px) scale(.98); }
    to{ opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}

@media (max-width: 576px){
    .toast-container,
    .fns-toast-container,
    .toast-success,
    .toast-error,
    .toast-warning,
    .toast-info,
    .toast-credentials,
    .js-auto-toast{
        top: 78px !important;
        right: 14px !important;
        width: calc(100vw - 28px) !important;
    }
}