/* Unified notifications: alerts + toasts */
:root {
    --notify-radius: 14px;
    --notify-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);

    --notify-success-bg: #00ff08;
    --notify-success-fg: #071425;

    --notify-danger-bg: #ff3b30;
    --notify-danger-fg: #ffffff;

    --notify-warning-bg: #ffb020;
    --notify-warning-fg: #221100;

    --notify-info-bg: #29b6ff;
    --notify-info-fg: #041322;

    --notify-default-bg: #2a3553;
    --notify-default-fg: #e8edf5;
}

.alert {
    position: relative;
    border: none !important;
    border-radius: var(--notify-radius) !important;
    box-shadow: var(--notify-shadow);
    padding: 14px 48px 14px 16px !important;
    margin-bottom: 1rem;
    line-height: 1.45;
    font-weight: 500;
    font-family: var(--font-sans);
    background-color: var(--notify-default-bg);
    color: var(--notify-default-fg);
}

.alert strong {
    font-weight: 700;
}

.alert i,
.alert svg,
.alert [data-feather] {
    margin-right: 6px;
}

.alert .btn-close,
.alert .close {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    margin: 0 !important;
    opacity: 0.75;
}

.alert .btn-close:hover,
.alert .close:hover {
    opacity: 1;
}

.alert .close {
    background: transparent;
    border: 0;
    padding: 0;
    color: currentColor;
    font-size: 1.25rem;
    line-height: 1;
}

.alert .close span {
    color: currentColor;
}

.alert.alert-success {
    background-color: var(--notify-success-bg) !important;
    color: var(--notify-success-fg) !important;
}

.alert.alert-danger,
.alert.alert-error {
    background-color: var(--notify-danger-bg) !important;
    color: var(--notify-danger-fg) !important;
}

.alert.alert-warning {
    background-color: var(--notify-warning-bg) !important;
    color: var(--notify-warning-fg) !important;
}

.alert.alert-info {
    background-color: var(--notify-info-bg) !important;
    color: var(--notify-info-fg) !important;
}

.toast-container {
    z-index: 1200;
}

.toast {
    border: none !important;
    border-radius: var(--notify-radius) !important;
    box-shadow: var(--notify-shadow);
    overflow: hidden;
    opacity: 1 !important;
    min-width: min(560px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    background-color: var(--notify-default-bg) !important;
    color: var(--notify-default-fg) !important;
    font-family: var(--font-sans);
}

.toast .d-flex {
    position: relative;
    align-items: flex-start;
}

.toast .toast-body {
    width: 100%;
    padding: 14px 48px 14px 16px;
    color: inherit !important;
    line-height: 1.45;
    font-weight: 500;
}

.toast .toast-body strong {
    font-weight: 700;
}

.toast .btn-close {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    margin: 0 !important;
    opacity: 0.75;
}

.toast .btn-close:hover {
    opacity: 1;
}

.toast.bg-success {
    background-color: var(--notify-success-bg) !important;
    color: var(--notify-success-fg) !important;
}

.toast.bg-danger,
.toast.bg-error {
    background-color: var(--notify-danger-bg) !important;
    color: var(--notify-danger-fg) !important;
}

.toast.bg-warning {
    background-color: var(--notify-warning-bg) !important;
    color: var(--notify-warning-fg) !important;
}

.toast.bg-info {
    background-color: var(--notify-info-bg) !important;
    color: var(--notify-info-fg) !important;
}

.toast.text-white,
.toast.text-white .toast-body,
.toast.text-dark,
.toast.text-dark .toast-body {
    color: inherit !important;
}

#toast-container > .toast {
    border-radius: var(--notify-radius) !important;
    box-shadow: var(--notify-shadow) !important;
    opacity: 1 !important;
    background-image: none !important;
    color: var(--notify-default-fg) !important;
    font-family: var(--font-sans);
}

#toast-container > .toast-success {
    background-color: var(--notify-success-bg) !important;
    color: var(--notify-success-fg) !important;
}

#toast-container > .toast-error,
#toast-container > .toast-danger {
    background-color: var(--notify-danger-bg) !important;
    color: var(--notify-danger-fg) !important;
}

#toast-container > .toast-warning {
    background-color: var(--notify-warning-bg) !important;
    color: var(--notify-warning-fg) !important;
}

#toast-container > .toast-info {
    background-color: var(--notify-info-bg) !important;
    color: var(--notify-info-fg) !important;
}

.jq-toast-wrap .jq-toast-single {
    border: none !important;
    border-radius: var(--notify-radius) !important;
    box-shadow: var(--notify-shadow) !important;
    font-family: var(--font-sans);
}

@media (max-width: 576px) {
    .alert {
        padding: 12px 44px 12px 14px !important;
    }

    .toast {
        min-width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
    }

    .toast .toast-body {
        padding: 12px 44px 12px 14px;
    }
}