/* --- LOADING MODAL STYLES (from old <style> block) --- */
/*
  Note: The new design uses a Bootstrap modal, so many of the old
  .loading styles are no longer needed. We keep the progress bar
  and bounce animation for potential reuse if needed, but they are
  not actively used by the new loading modal.
*/

.loading-legacy {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5em;
    color: #8B008B;
    padding: 1px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    font-style: italic;
    z-index: 9999;
}

.bounce {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bounce div {
    width: 10px;
    height: 10px;
    margin: 3px;
    background-color: #8B008B;
    border-radius: 50%;
    display: inline-block;
    animation: bounce 1.4s infinite ease-in-out both;
}

.bounce div:nth-child(1) {
    animation-delay: -0.32s;
}

.bounce div:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* Old progress bar styles (kept for reference, but Bootstrap is used now) */
.progress-bar-legacy {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 25px;
    overflow: hidden;
    margin-top: 10px;
    height: 20px;
    box-shadow: 0 3px 3px -5px #000000, 0 2px 5px #555555;
    position: relative;
}

/* --- MISC STYLES from old file --- */
.highlighted {
    background-color: #d7e9ef !important;
}

.highlighted1 {
    background-color: #efd7ed !important;
}
@media (min-width: 576px) {
    .display-5.fw-bold {
        font-size: 1.8rem !important;
    }
    
    .lead.text-muted {
        font-size: 1rem !important;
    }
}