.toast-custom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 320px;
    max-width: 400px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    padding: 18px 22px;
    margin-bottom: 16px;
    overflow: hidden;
    animation: fadeIn 0.5s ease;
}

.toast-custom .icon {
    font-size: 20px;
    margin-right: 12px;
}

.toast-custom .message {
    flex: 1;
}

.toast-custom .message strong {
    display: block;
    margin-bottom: 4px;
}

.toast-custom .close-btn {
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    color: #888;
    margin-left: 12px;
}

.toast.success { border-left: 6px solid #3ccf6e; }
.toast.warning { border-left: 6px solid #f7b731; }
.toast.error   { border-left: 6px solid #fc5c65; }

/* Progress Bar */
.toast-custom .progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: rgba(0,0,0,0.1);
    overflow: hidden;
}

.toast-custom .progress-bar {
    height: 100%;
    background: currentColor;
    width: 100%;
    transform-origin: right;
    animation: shrink linear forwards;
}

/* Color based on type */
.toast-custom.success .progress-bar { color: #3ccf6e; }
.toast-custom.warning .progress-bar { color: #f7b731; }
.toast-custom.error .progress-bar   { color: #fc5c65; }


@keyframes fadeIn {
    from { opacity: 0; transform: translateX(80px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes shrink {
    100% { width: 0%; }
}