/* =====================================================
   Algemene Bootstrap-toasts
   Centrale visuele opbouw voor alle modules.
===================================================== */

.avanti-toast-container {
    position: fixed !important;
    top: auto !important;
    right: 1rem !important;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    left: auto !important;
    z-index: 1090 !important;

    display: flex;
    flex-direction: column;
    gap: .75rem;

    width: min(420px, calc(100vw - 2rem));
    padding: 0 !important;
    transform: none !important;
    pointer-events: none;
}

/* Standaard toast */
.avanti-toast-container .toast {
    --avanti-toast-accent: #6c757d;

    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;

    color: #212529 !important;
    background: rgba(255, 255, 255, .98) !important;

    border: 0 !important;
    border-left: 5px solid var(--avanti-toast-accent) !important;
    border-radius: 14px !important;

    box-shadow:
    0 1.25rem 3.5rem rgba(0, 0, 0, .38),
    0 .4rem 1rem rgba(0, 0, 0, .22) !important;
    backdrop-filter: blur(8px);
    pointer-events: auto;
}

/* =====================================================
   Toastvarianten
===================================================== */

.avanti-toast-container .toast.text-bg-success,
.avanti-toast-container .toast.avanti-feedback-toast-success,
.avanti-feedback-toast.avanti-feedback-toast-success {
    --avanti-toast-accent: #198754;
}

.avanti-toast-container .toast.text-bg-danger,
.avanti-toast-container .toast.avanti-feedback-toast-danger,
.avanti-feedback-toast.avanti-feedback-toast-danger {
    --avanti-toast-accent: #dc3545;
}

.avanti-toast-container .toast.text-bg-warning,
.avanti-toast-container .toast.avanti-feedback-toast-warning,
.avanti-feedback-toast.avanti-feedback-toast-warning {
    --avanti-toast-accent: #b58100;
}

.avanti-toast-container .toast.text-bg-info,
.avanti-toast-container .toast.text-bg-primary,
.avanti-toast-container .toast.avanti-feedback-toast-info,
.avanti-feedback-toast.avanti-feedback-toast-info {
    --avanti-toast-accent: #087990;
}

/* =====================================================
   Toastheader
===================================================== */

.avanti-feedback-toast-header {
    min-height: 48px;
    padding: .7rem .85rem .6rem;

    color: #212529 !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}

/* =====================================================
   Toasticoon
===================================================== */

.avanti-feedback-toast-icon {
    width: 1.9rem;
    height: 1.9rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    color: var(--avanti-toast-accent) !important;
    background-color: rgba(108, 117, 125, .13);
    background-color: color-mix(
        in srgb,
        var(--avanti-toast-accent) 13%,
        transparent
    ) !important;

    border-radius: 50%;
    font-size: 1rem;
}

.avanti-feedback-toast-icon i,
.avanti-feedback-toast-icon .bi {
    color: inherit !important;
}

.avanti-feedback-toast-icon .spinner-border {
    color: var(--avanti-toast-accent) !important;
}

/* =====================================================
   Toastinhoud
===================================================== */

.avanti-feedback-toast-body {
    padding: .8rem .95rem .95rem;

    color: #495057 !important;
    background: transparent !important;

    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* =====================================================
   Sluitknop
===================================================== */

.avanti-feedback-toast .btn-close,
.avanti-feedback-toast .btn-close-white {
    filter: none !important;
    opacity: .65;
}

.avanti-feedback-toast .btn-close:hover,
.avanti-feedback-toast .btn-close-white:hover {
    opacity: 1;
}

/* =====================================================
   Mobiele weergave
===================================================== */

@media (max-width: 575.98px) {
    .avanti-toast-container {
        top: auto !important;
        right: .65rem !important;
        bottom: calc(.65rem + env(safe-area-inset-bottom, 0px)) !important;
        width: calc(100vw - 1.3rem);
    }
}