/* styles.css */

/* Common Styles for the Message */
.loader-message {
    position: absolute;
    top: 100%; /* Position it directly below the loader */
    left: 100%; /* Start it off-screen to the right */
    width: fit-content;
    white-space: nowrap;
    overflow: hidden;
    font-size: 18px;
    color: #555;
    text-align: center;
    padding: 5px;
    z-index: 10000;
    display: block;
    opacity: 0; /* Start with invisible message */
    transition: opacity 1s ease-in-out; /* Smooth fade in and out */
}

/* Slide the message from right to left */
@keyframes slideMessage {
    0% {
        left: 100%; /* Start the message off-screen to the right */
        opacity: 0;
    }
    10% {
        opacity: 1; /* Fade in at the start of the animation */
    }
    90% {
        opacity: 1; /* Keep it fully visible while sliding */
    }
    100% {
        left: -100%; /* Move it completely off-screen to the left */
        opacity: 0; /* Fade out as it moves off-screen */
    }
}

/* Loader Container */
.loader-container {
    position: fixed;
    bottom: 50px;
    left: 20px;
    z-index: -1;
    width: 100px; /* Allow the container to resize with content */
    height: 100px;
    display: flex;
    flex-direction: column; /* Stack the loader and message vertically */
    justify-content: center;
    align-items: center;
}

/* Loader Styles (Spinning, Bouncing, etc.) */
.spinning-loader {
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.bouncing-dots-loader {
    display: flex;
    justify-content: space-between;
    width: 60px;
}

.bouncing-dots-loader .dot {
    width: 15px;
    height: 15px;
    background-color: #3498db;
    border-radius: 50%;
    animation: bounce 1.5s infinite;
}

@keyframes bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
}

.progress-bar-container {
    width: 100%;
    height: 5px;
    background-color: #f3f3f3;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background-color: #3498db;
    animation: progress 2s linear infinite;
}

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

.typing-dots-loader {
    font-size: 40px;
    color: #3498db;
}

.typing-dots-loader .typing-dot {
    animation: typing 1.5s infinite;
    opacity: 0;
}

@keyframes typing {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.flipping-squares-loader {
    display: flex;
    flex-wrap: wrap;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
}

.flipping-squares-loader .square {
    width: 30px;
    height: 30px;
    background-color: #3498db;
    animation: flip 1.2s infinite;
}

@keyframes flip {
    0%, 80%, 100% { transform: rotate(0); }
    40% { transform: rotate(180deg); }
}

.circular-pulse-loader {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #3498db;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}