/* Adicione essas regras ao CSS */
.loader-container {
    position: fixed; /* Fica fixo na tela */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    background: rgba(8, 7, 20, 0.8); /* Fundo branco com opacidade */
    z-index: 1000; /* Garante que o loader fique acima do conteúdo */
    display: none; /* Inicialmente oculto */
  }
  
  .loader {
    width: 40px;
    height: 40px;
    position: relative;
    --c: no-repeat linear-gradient(#ff9800 0 0);
    background:
      var(--c) center/100% 10px,
      var(--c) center/10px 100%;
  }
  
  .loader:before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      var(--c) 0    0,
      var(--c) 100% 0,
      var(--c) 0    100%,
      var(--c) 100% 100%;
    background-size: 15.5px 15.5px;
    animation: l16 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
  }
  
  @keyframes l16 {
    33%  { inset: -10px; transform: rotate(0deg); }
    66%  { inset: -10px; transform: rotate(90deg); }
    100% { inset: 0; transform: rotate(90deg); }
  }