/* 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: 1000;   /* 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: 15px 20px;     /* Padding around content */
    border-radius: 5px;     /* Slightly rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    max-width: 300px;       /* 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 */
    }
}