/* =================================================================== */
/* ESTILOS PARA O BLOCK UI PERSONALIZADO                             */
/* =================================================================== */

/* 1. Animação de Rotação */
/* Define a animação chamada "spin" que rotaciona um elemento 360 graus. */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 2. Container Principal do Aviso */
/* Estiliza a "caixa" onde o ícone e o texto aparecem. */
.custom-block-ui-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    padding: 36px 36px 28px 36px;
    background: rgba(0, 0, 0, 0.35); /* #00000059 */
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 20px;
}

/* 3. Imagem de Loading */
/* Estiliza o ícone que será animado. */
.custom-block-ui-image {
    width: 68px;
    height: 68px;
    margin-bottom: 26px;
    display: block;
}

/* 4. Classe da Animação */
/* Aplica a animação "spin" à imagem. */
.animated-loading-icon {
  animation: spin 1.5s linear infinite;
}

/* 5. Texto da Mensagem */
/* Estiliza o texto "Processando...". */
.custom-block-ui-text {
    font-size: 1.45em;
    color: rgba(255, 255, 255, 0.89); /* #ffffffe3 */
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-shadow: 0 2px 16px rgba(245, 241, 250, 0.33); /* #f5f1fa55 */
    text-align: center;
}

/* 6. Fundo Escuro (Overlay) */
/* Estiliza a camada escura que cobre a página inteira. */
.blockUI.blockOverlay {
    background: rgba(0, 0, 0, 0.5) !important; /* #0008 */
    opacity: 1 !important;
}