/* Basic styling for body (optional, just for demo) */
/* body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
} */


/* Toast Container - positions toasts */
#toastContainer {
    position: fixed;
    /* Fixed position relative to the viewport */
    bottom: 20px;
    /* 20px from the bottom */
    right: 20px;
    /* 20px from the right */
    z-index: 9999;
    /* Ensure it's on top of other content */
    display: flex;
    /* Use flexbox to stack multiple toasts if needed */
    flex-direction: column;
    /* Stack vertically */
    gap: 10px;
    /* Space between multiple toasts */
    pointer-events: none;
    /* Allows clicks to pass through the container itself */

}

/* Individual Toast Message */
.toast-message {
    background-color: #333;
    /* Dark background */
    color: #fff;
    /* White text */
    padding: 10px 10px;
    /* Padding around content */
    border-radius: 5px;
    /* Slightly rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Subtle shadow */
    max-width: 330px;
    /* Max width for toasts */
    display: flex;
    /* For content and close button alignment */
    align-items: center;
    /* Vertically align items */
    justify-content: space-between;
    /* Space out content and close button */
    gap: 10px;
    /* Gap between text and close button */
    overflow: hidden;
    /* Hide anything outside during animation */

    /* Animation properties */
    transform: translateX(110%);
    /* Start off-screen to the right */
    animation: slideIn 0.5s forwards ease-out, fadeOut 0.5s forwards ease-in 4.5s;
    /* Slide in, then fade out */
    pointer-events: auto;
    /* Re-enable pointer events for the toast itself */
}

/* Specific styling for success/error/info alerts */
.toast-message.success {
    background-color: #f4fff4;
    /* Green for success */
    border: 1px solid #4CAF50;
    color: #525252;

    border-right-style: solid;
    border-right-color: #4CAF50;
    border-right-width: 8px;


}

.toast-message.error {
    background-color: #fdf3f2;
    /* Red for error */
    border: 1px solid #f44336;
    color: #525252;

    border-right-style: solid;
    border-right-color: #f44336;
    border-right-width: 8px;


}

.toast-message.info {
    background-color: #f3faff;
    border: 1px solid #1576c5;
    color: #525252;

    border-right-style: solid;
    border-right-color: #1576c5;
    border-right-width: 8px;
}

.toast-message.warn {
    background-color: #f9f5e9;
    border: 1px solid#f3bb21;
    color: #525252;

    border-right-style: solid;
    border-right-color: #FFAA2C;
    border-right-width: 8px;

}

/* Close button styling */
.toast-close-btn {
    background: none;
    border: none;
    color: #525252;
    font-size: 1.2em;
    cursor: pointer;
    margin-left: 10px;
    /* Space from text to button */
    width: 25px;
    /* Make it circular */
    height: 25px;
    border-radius: 50%;
    /* Make it circular */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.toast-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

/* Animation Keyframes */
@keyframes slideIn {
    from {
        transform: translateX(110%);
        /* Start completely off-screen right */
    }

    to {
        transform: translateX(0);
        /* Move to its natural position (20px from right) */
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        /* Fully visible */
        transform: translateX(0);
        /* In position */
    }

    to {
        opacity: 0;
        /* Fully transparent */
        transform: translateX(110%);
        /* Slide out to the right */
    }
}


@keyframes slideUp {
    from {
        transform: translateY(-400%);
        /* Start completely off-screen bottom */
    }

    to {
        transform: translateY(-170%);
        /* Move to its natural position (20px from right) */
    }
}

/* RTL Adjustments (for Arabic display) */
html[dir="rtl"] #toastContainer {
    right: auto;
    /* Remove right positioning */
    left: 20px;
    /* Position 20px from the left */
}

html[dir="rtl"] .toast-message {
    transform: translateX(-110%);
    /* Start off-screen to the left for RTL */
    animation: slideInRTL 0.5s forwards ease-out, fadeOutRTL 0.5s forwards ease-in 4.5s;
    /* RTL animations */
}

html[dir="rtl"] .toast-close-btn {
    margin-left: 0;
    margin-right: 10px;
    /* Space from text to button in RTL */
}

.toast-yes-btn {

    padding: 5px 5px;
    border: none;
    border-radius: 5px;
    background-color: rgb(231, 231, 231);
    min-width: 60px;
    margin-top: 10px;

}

.toast-yes-btn:hover {
    cursor: pointer;
    color: #d89521;

}


.toast-confirm {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 40%;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid #f1a728;
    border-radius: 5px;
    padding: 20px;
    z-index: 9999;
    min-width: 300px;
    box-shadow: 10px 10px 15px 5px rgba(0, 0, 0, 0.2);


    /* Animation properties */
    transform: translateY(-200%);
    /* Start off-screen to the right */
    animation: slideUp 0.5s forwards ease-out;
    /* Slide in, then fade out */
    pointer-events: auto;
    /* Re-enable pointer events for the toast itself */

}



@keyframes slideInRTL {
    from {
        transform: translateX(-110%);
        /* Start completely off-screen left */
    }

    to {
        transform: translateX(0);
        /* Move to its natural position (20px from left) */
    }
}


@keyframes fadeOutRTL {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-110%);
        /* Slide out to the left for RTL */
    }
}