/* Estilo para o Overlay Translucent e Centralização */
#loading-overlay {
    /* Fixa o elemento na viewport (tela do usuário) */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Fundo preto com 80% de transparência (RGBA) */
    background-color: rgba(0, 0, 0, 0.8); 
    /* Centraliza o conteúdo (o lottie-player) usando Flexbox */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
    /* Garante que fique por cima de todo o conteúdo da página */
    z-index: 9999; 
    /* Por padrão, começa escondido. O JS irá mudar isso. */
    visibility: hidden;
    opacity: 0;
    /* Adiciona uma transição suave para esconder/mostrar */
    transition: visibility 0.3s, opacity 0.3s linear;
}

/* Classe para mostrar o Overlay */
#loading-overlay.visible {
    visibility: visible;
    opacity: 1;
}

/* O lottie-player não precisa de display: none, pois o overlay cuida disso */
#loading-lottie {
    /* Garante que o Lottie seja renderizado corretamente no centro */
    display: block; 
    width: 150px; /* Reduza o tamanho para não ser invasivo */
    height: 150px;
}