
/* =========================================================
   NERSAPP Toast — iziToast v1.x compatible visual layer
   Modern styling, distinct transitions, responsive behavior.
   ========================================================= */

:root {
    --ners-toast-font: var(--smart-font, var(--bs-body-font-family, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif));
    --ners-toast-surface: var(--bs-body-bg, #fff);
    --ners-toast-text: var(--bs-body-color, #202938);
    --ners-toast-muted: var(--bs-secondary-color, #687386);
    --ners-toast-shadow: 0 14px 38px rgba(20, 31, 50, .14), 0 2px 8px rgba(20, 31, 50, .06);
    --ners-toast-radius: 12px;
    --ners-toast-border: rgba(116, 130, 153, .16);
    --ners-toast-info: #3679d8;
    --ners-toast-success: #218653;
    --ners-toast-warning: #b7791f;
    --ners-toast-error: #d64545;
}

/* Box sizing */

.iziToast-capsule,
.iziToast-capsule *,
.iziToast-overlay,
.iziToast-overlay * {
    box-sizing: border-box;
}

/* Toast wrappers */

.iziToast-wrapper {
    position: fixed;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    width: min(100%, 430px);
    padding: 14px;
    gap: 10px;
    pointer-events: none;
    font-family: var(--ners-toast-font);
    text-align: left;
    isolation: isolate;
}

.iziToast-wrapper-bottomRight {
    right: 0;
    bottom: 0;
    align-items: flex-end;
}

.iziToast-wrapper-bottomLeft {
    left: 0;
    bottom: 0;
    align-items: flex-start;
}

.iziToast-wrapper-topRight {
    right: 0;
    top: 0;
    align-items: flex-end;
}

.iziToast-wrapper-topLeft {
    left: 0;
    top: 0;
    align-items: flex-start;
}

.iziToast-wrapper-topCenter {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
}

.iziToast-wrapper-bottomCenter {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
}

.iziToast-wrapper-center {
    inset: 0;
    width: 100%;
    justify-content: center;
    align-items: center;
}

/* Toast capsule */

.iziToast-capsule {
    width: 100%;
    height: auto;
    font-size: 0;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: height .22s ease, transform .22s ease;
}

.iziToast-wrapper .iziToast-capsule {
    width: 100%;
    overflow: visible;
}

/* Main toast */

.iziToast {
    --toast-accent: var(--ners-toast-info);

    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 70px;
    margin: 0;
    padding: 16px 42px 16px 16px;
    overflow: hidden;
    border: 1px solid var(--ners-toast-border);
    border-radius: var(--ners-toast-radius) !important;
    background: var(--ners-toast-surface);
    color: var(--ners-toast-text);
    box-shadow: var(--ners-toast-shadow);
    font-family: var(--ners-toast-font);
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    cursor: default;
    pointer-events: auto;
    user-select: text;
    transform: translate3d(0, 0, 0);
    -webkit-touch-callout: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.iziToast::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--toast-accent);
}

.iziToast::after {
    content: none !important;
}

/* Toast accent colors */

.iziToast.iziToast-color-blue {
    --toast-accent: var(--ners-toast-info);
}

.iziToast.iziToast-color-green {
    --toast-accent: var(--ners-toast-success);
}

.iziToast.iziToast-color-orange,
.iziToast.iziToast-color-yellow {
    --toast-accent: var(--ners-toast-warning);
}

.iziToast.iziToast-color-red {
    --toast-accent: var(--ners-toast-error);
}

.iziToast.iziToast-color-dark {
    --toast-accent: #aab4c4;
}

/* Dark theme */

.iziToast.iziToast-theme-dark {
    background: #202938;
    border-color: rgba(255, 255, 255, .09);
    color: #f3f5f8;
}

.iziToast.iziToast-theme-dark .iziToast-title {
    color: #f7f8fb!important;
}

.iziToast.iziToast-theme-dark .iziToast-message {
    color: #c4cbd6!important;
}

.iziToast.iziToast-color-blue:not(.iziToast-theme-dark),
.iziToast.iziToast-color-green:not(.iziToast-theme-dark),
.iziToast.iziToast-color-orange:not(.iziToast-theme-dark),
.iziToast.iziToast-color-yellow:not(.iziToast-theme-dark),
.iziToast.iziToast-color-red:not(.iziToast-theme-dark) {
    background: var(--ners-toast-surface);
}

/* Toast body */

.iziToast > .iziToast-body {
    position: relative;
    min-height: 36px;
    height: auto;
    margin: 0;
    padding: 0 0 0 42px;
    text-align: left;
}

.iziToast > .iziToast-body::after {
    content: "";
    display: table;
    clear: both;
}

/* Toast icon */

.iziToast > .iziToast-body .iziToast-icon {
    position: absolute;
    left: 0;
    top: 2px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 9px;
    color: var(--toast-accent);
    background: color-mix(in srgb, var(--toast-accent) 11%, transparent);
    font-size: 17px;
    line-height: 1;
    text-align: center;
}

/* Replace legacy Base64 icon artwork with lightweight CSS symbols. */

.iziToast .iziToast-icon.ico-info::before {
    content: "i";
    font-weight: 750;
    font-family: Georgia, serif;
}

.iziToast .iziToast-icon.ico-success::before {
    content: "✓";
    font-weight: 800;
}

.iziToast .iziToast-icon.ico-warning::before {
    content: "!";
    font-weight: 800;
}

.iziToast .iziToast-icon.ico-error::before {
    content: "×";
    font-size: 22px;
    font-weight: 500;
}

.iziToast .iziToast-icon.ico-question::before {
    content: "?";
    font-weight: 750;
}

.iziToast .iziToast-icon.ico-info,
.iziToast .iziToast-icon.ico-success,
.iziToast .iziToast-icon.ico-warning,
.iziToast .iziToast-icon.ico-error,
.iziToast .iziToast-icon.ico-question {
    background-image: none !important;
}

/* Toast text */

.iziToast > .iziToast-body .iziToast-texts {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.iziToast > .iziToast-body .iziToast-title {
    display: block;
    float: none;
    margin: 0 0 3px;
    padding: 0;
    color: var(--ners-toast-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .005em;
    white-space: normal;
}

.iziToast > .iziToast-body .iziToast-message {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    color: var(--ners-toast-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}

.iziToast.iziToast-layout2 .iziToast-body .iziToast-message,
.iziToast.iziToast-layout2 .iziToast-body .iziToast-texts {
    width: 100%;
}

/* Alternate layout */

.iziToast.iziToast-layout3 {
    border-radius: 8px !important;
}

.iziToast.iziToast-layout3::after {
    display: none;
}

/* Cover image */

.iziToast > .iziToast-cover {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    margin: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Close button */

.iziToast > .iziToast-close {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    opacity: .58;
    background: transparent !important;
    color: currentColor;
    cursor: pointer;
    outline: 0;
    transition: background .15s ease, opacity .15s ease;
}

.iziToast > .iziToast-close::before {
    content: "×";
    font-family: Arial, sans-serif;
    font-size: 21px;
    line-height: 1;
}

.iziToast > .iziToast-close:hover {
    opacity: 1;
    background: rgba(127, 139, 157, .12) !important;
}

.iziToast > .iziToast-close:focus-visible {
    outline: 2px solid var(--toast-accent);
    outline-offset: 1px;
    opacity: 1;
}

/* Progress bar */

.iziToast > .iziToast-progressbar {
    position: absolute;
    z-index: 1;
    inset: auto 0 0;
    width: 100%;
    height: 3px;
    background: rgba(120, 130, 145, .1);
}

.iziToast > .iziToast-progressbar > div {
    height: 100%;
    width: 100%;
    border-radius: 0;
    background: var(--toast-accent);
    opacity: .65;
    transition: width linear;
}

.iziToast.iziToast-balloon::before {
    display: none;
}

.iziToast.iziToast-balloon .iziToast-progressbar {
    top: auto;
    bottom: 0;
}

/* Right-to-left layout */

.iziToast.iziToast-rtl {
    direction: rtl;
    padding: 16px 16px 16px 42px;
}

.iziToast.iziToast-rtl::before {
    inset: 0 0 0 auto;
}

.iziToast.iziToast-rtl > .iziToast-close {
    right: auto;
    left: 8px;
}

.iziToast.iziToast-rtl > .iziToast-body {
    padding: 0 42px 0 0;
    text-align: right;
}

.iziToast.iziToast-rtl > .iziToast-body .iziToast-icon {
    left: auto;
    right: 0;
}

.iziToast.iziToast-rtl > .iziToast-body .iziToast-texts,
.iziToast.iziToast-rtl > .iziToast-body .iziToast-message,
.iziToast.iziToast-rtl > .iziToast-body .iziToast-title {
    text-align: right;
}

/* Inputs */

.iziToast > .iziToast-body .iziToast-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
    min-height: 0;
    float: none;
}

.iziToast > .iziToast-body .iziToast-inputs > input:not([type=checkbox]):not([type=radio]),
.iziToast > .iziToast-body .iziToast-inputs > select {
    min-height: 34px;
    max-width: 100%;
    margin: 0;
    padding: 6px 9px;
    border: 1px solid var(--ners-toast-border);
    border-radius: 7px;
    background: var(--ners-toast-surface);
    color: var(--ners-toast-text);
    font: inherit;
    box-shadow: none;
}

.iziToast > .iziToast-body .iziToast-inputs > input:focus,
.iziToast > .iziToast-body .iziToast-inputs > select:focus {
    outline: 2px solid color-mix(in srgb, var(--toast-accent) 35%, transparent);
    outline-offset: 1px;
}

/* Action buttons */

.iziToast > .iziToast-body .iziToast-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
    min-height: 0;
    float: none;
}

.iziToast > .iziToast-body .iziToast-buttons > a,
.iziToast > .iziToast-body .iziToast-buttons > button,
.iziToast > .iziToast-body .iziToast-buttons > input:not([type=checkbox]):not([type=radio]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--ners-toast-border);
    border-radius: 7px;
    background: rgba(120, 130, 145, .09);
    color: var(--ners-toast-text);
    font: 600 12px/1.25 var(--ners-toast-font);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

.iziToast > .iziToast-body .iziToast-buttons > a:hover,
.iziToast > .iziToast-body .iziToast-buttons > button:hover,
.iziToast > .iziToast-body .iziToast-buttons > input:not([type=checkbox]):not([type=radio]):hover {
    background: rgba(120, 130, 145, .16);
}

.iziToast > .iziToast-body .iziToast-buttons > a:focus-visible,
.iziToast > .iziToast-body .iziToast-buttons > button:focus-visible,
.iziToast > .iziToast-body .iziToast-buttons > input:focus-visible {
    outline: 2px solid var(--toast-accent);
    outline-offset: 2px;
}

.iziToast.iziToast-theme-dark > .iziToast-body .iziToast-buttons > a,
.iziToast.iziToast-theme-dark > .iziToast-body .iziToast-buttons > button,
.iziToast.iziToast-theme-dark > .iziToast-body .iziToast-buttons > input {
    color: #f3f5f8;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .12);
}

/* Animate toast content only when iziToast enables animateInside. */

.iziToast.iziToast-animateInside .iziToast-buttons-child,
.iziToast.iziToast-animateInside .iziToast-icon,
.iziToast.iziToast-animateInside .iziToast-inputs-child,
.iziToast.iziToast-animateInside .iziToast-message,
.iziToast.iziToast-animateInside .iziToast-title {
    animation: nersToastContentIn .24s ease both;
}

/* Toast target containers */

.iziToast-target {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.iziToast-target .iziToast-capsule {
    overflow: hidden;
}

.iziToast-target .iziToast-capsule::after {
    content: "";
    display: table;
    clear: both;
}

.iziToast-target .iziToast-capsule .iziToast {
    width: 100%;
}

/* Overlay */

.iziToast-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: block;
    background: rgba(16, 24, 39, .32);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.iziToast-overlay.fadeIn {
    animation: nersToastOverlayIn .18s ease both;
}

.iziToast-overlay.fadeOut {
    animation: nersToastOverlayOut .18s ease both;
}

/* =========================================================
   DISTINCT TOAST ENTRANCE TRANSITIONS
   Each iziToast transition class has its own keyframes.
   ========================================================= */

.iziToast.revealIn {
    animation: nersToastRevealIn .32s cubic-bezier(.2, .75, .25, 1) both;
    transform-origin: left center;
}

.iziToast.slideIn {
    animation: nersToastSlideIn .28s cubic-bezier(.22, .75, .25, 1) both;
}

.iziToast.fadeIn {
    animation: nersToastFadeIn .22s ease-out both;
}

.iziToast.fadeInUp {
    animation: nersToastFadeInUp .26s cubic-bezier(.2, .75, .25, 1) both;
}

.iziToast.fadeInDown {
    animation: nersToastFadeInDown .26s cubic-bezier(.2, .75, .25, 1) both;
}

.iziToast.fadeInLeft {
    animation: nersToastFadeInLeft .26s cubic-bezier(.2, .75, .25, 1) both;
}

.iziToast.fadeInRight {
    animation: nersToastFadeInRight .26s cubic-bezier(.2, .75, .25, 1) both;
}

.iziToast.bounceInLeft {
    animation: nersToastBounceInLeft .65s both;
}

.iziToast.bounceInRight {
    animation: nersToastBounceInRight .65s both;
}

.iziToast.bounceInDown {
    animation: nersToastBounceInDown .65s both;
}

.iziToast.bounceInUp {
    animation: nersToastBounceInUp .65s both;
}

.iziToast.flipInX {
    backface-visibility: visible !important;
    animation: nersToastFlipInX .48s ease-out both;
}

/* =========================================================
   DISTINCT TOAST EXIT TRANSITIONS
   ========================================================= */

.iziToast.fadeOut {
    animation: nersToastFadeOut .18s ease-in both;
}

.iziToast.fadeOutDown {
    animation: nersToastFadeOutDown .2s ease-in both;
}

.iziToast.fadeOutUp {
    animation: nersToastFadeOutUp .2s ease-in both;
}

.iziToast.fadeOutLeft {
    animation: nersToastFadeOutLeft .2s ease-in both;
}

.iziToast.fadeOutRight {
    animation: nersToastFadeOutRight .2s ease-in both;
}

.iziToast.flipOutX {
    backface-visibility: visible !important;
    animation: nersToastFlipOutX .22s ease-in both;
}

/* =========================================================
   ENTRANCE KEYFRAMES
   ========================================================= */

@keyframes nersToastRevealIn {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0 round var(--ners-toast-radius));
        transform: scaleX(.96);
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0 round var(--ners-toast-radius));
        transform: scaleX(1);
    }
}

@keyframes nersToastSlideIn {
    from {
        opacity: .65;
        transform: translate3d(105%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes nersToastFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes nersToastFadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes nersToastFadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -18px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes nersToastFadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-22px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes nersToastFadeInRight {
    from {
        opacity: 0;
        transform: translate3d(22px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes nersToastBounceInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }

    75% {
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        transform: translate3d(5px, 0, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes nersToastBounceInRight {
    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        transform: translate3d(10px, 0, 0);
    }

    90% {
        transform: translate3d(-5px, 0, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes nersToastBounceInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes nersToastBounceInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -25px, 0);
    }

    75% {
        transform: translate3d(0, 10px, 0);
    }

    90% {
        transform: translate3d(0, -5px, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes nersToastFlipInX {
    from {
        opacity: 0;
        transform: perspective(600px) rotateX(-90deg);
    }

    40% {
        opacity: 1;
        transform: perspective(600px) rotateX(15deg);
    }

    70% {
        transform: perspective(600px) rotateX(-8deg);
    }

    100% {
        opacity: 1;
        transform: perspective(600px) rotateX(0deg);
    }
}

/* =========================================================
   EXIT KEYFRAMES
   ========================================================= */

@keyframes nersToastFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes nersToastFadeOutDown {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }
}

@keyframes nersToastFadeOutUp {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, -18px, 0);
    }
}

@keyframes nersToastFadeOutLeft {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(-24px, 0, 0);
    }
}

@keyframes nersToastFadeOutRight {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(24px, 0, 0);
    }
}

@keyframes nersToastFlipOutX {
    from {
        opacity: 1;
        transform: perspective(600px) rotateX(0deg);
    }

    to {
        opacity: 0;
        transform: perspective(600px) rotateX(90deg);
    }
}

/* Content and overlay keyframes */

@keyframes nersToastContentIn {
    from {
        opacity: 0;
        transform: translateY(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes nersToastOverlayIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes nersToastOverlayOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* =========================================================
   RESPONSIVE STYLES
   ========================================================= */

@media (min-width: 568px) {
    .iziToast-wrapper {
        padding: 16px;
        gap: 10px;
    }

    .iziToast {
        max-width: 400px;
    }
}

@media (max-width: 567.98px) {
    .iziToast-wrapper {
        width: 100%;
        padding: 10px;
        gap: 8px;
    }

    .iziToast {
        min-height: 64px;
        padding: 14px 38px 14px 13px;
        border-radius: 11px !important;
    }

    .iziToast > .iziToast-body {
        padding-left: 38px;
    }

    .iziToast > .iziToast-body .iziToast-icon {
        width: 28px;
        height: 28px;
    }

    .iziToast.iziToast-rtl {
        padding: 14px 13px 14px 38px;
    }

    .iziToast.iziToast-rtl > .iziToast-body {
        padding: 0 38px 0 0;
    }

    .iziToast-wrapper-center .iziToast {
        max-width: calc(100vw - 24px);
    }
}

/* =========================================================
   ACCESSIBILITY: REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .iziToast,
    .iziToast-capsule,
    .iziToast-overlay,
    .iziToast *,
    .iziToast::before {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   CENTERED CONFIRMATION DIALOGS
   Preserve centered positioning independently of toast motion.
   ========================================================= */

.iziToast-wrapper-center {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: calc(100vw - 32px);
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 9999;
}

.iziToast-wrapper-center .iziToast-capsule {
    width: 100%;
}

.iziToast-wrapper-center .iziToast {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}
