/* Resetando margens e padding padrão do navegador */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Configurações gerais para o corpo da página */
body {
    font-family: 'Arial', sans-serif;
    background-image: url('images/bg4.webp');
    background-size: cover; 
    background-position: center;
    background-attachment: fixed;
    color: #333;
    line-height: 1.6;
    transition: background-image 1s ease-in-out; /* Transição suave entre as imagens */
}

/* Estilo para o fundo enquanto carrega */
body.loading {
    background-color: #fbfbfb; /* Fundo escuro ou qualquer cor enquanto a imagem não carrega */
}

/* Estilo para o container das bandeiras */
.flag-container {
    background-color: #f0f0f0; /* Cor de fundo cinza clarinho */
    padding: 10px;
    border-radius: 10px; /* Bordas arredondadas */
    display: grid; /* Usando grid para controlar colunas */
    grid-template-columns: repeat(4, 1fr); /* 4 colunas com largura igual */
    justify-items: center; /* Centraliza as bandeiras horizontalmente */
    align-items: center; /* Centraliza as bandeiras verticalmente */
    gap: 10px; /* Espaço entre as bandeiras */
}

/* Estilo para as bandeiras */
.flag-container input[type="radio"] {
    display: none; /* Esconde os botões de rádio */
}

.flag-container label {
    cursor: pointer;
    font-size: 40px; /* Tamanho das bandeiras */
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s; /* Transição suave de fundo */
}

/* Efeito ao passar o mouse sobre a bandeira */
.flag-container label:hover {
    background-color: #d3d3d3; /* Cor de fundo ao passar o mouse */
}

/* Quando o botão de rádio (bandeira) estiver selecionado */
.flag-container input[type="radio"]:checked + label {
    outline: 5px solid #003366; /* Borda azul escura quando a bandeira estiver selecionada */
}

/* Responsividade para telas menores (ajusta o tamanho das bandeiras) */
@media (max-width: 768px) {
    .flag-container label {
        font-size: 30px; /* Tamanho menor das bandeiras em telas médias */
    }
}

@media (max-width: 480px) {
    .flag-container label {
        font-size: 25px; /* Tamanho ainda menor das bandeiras em telas pequenas */
    }
}

/* Classe base para as bandeiras */
.flag-icon {
    display: inline-block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Tamanhos das bandeiras */

/* Bandeira pequena (25% do tamanho base) - aprox. 30px */
.flag-pp {
    width: 16px;
    height: 16px;
}

.flag-p {
    width: 30px;
    height: 30px;
}

/* Bandeira média (50% do tamanho base) - aprox. 60px */
.flag-m {
    width: 60px;
    height: 60px;
}

/* Bandeira grande (75% do tamanho base) - aprox. 90px */
.flag-g {
    width: 90px;
    height: 90px;
}

/* Bandeira extra grande (100% do tamanho base) - aprox. 120px */
.flag-gg {
    width: 120px;
    height: 120px;
}

/* Bandeira extra grande (100% do tamanho base) - aprox. 120px */
.flag-xg {
    width: 240px;
    height: 240px;
}

/* Bandeira extra grande (100% do tamanho base) - aprox. 120px */
.flag-xxg {
    width: 320px;
    height: 320px;
}


/* Bandeira extra grande (100% do tamanho base) - aprox. 120px */
.flag-h {
    width: 55px;
    height: 55px;
}

/* Estilo do cabeçalho */
header {
    background-color: #003366; /* Azul Navy */
    padding: 15px 0;
    color: white;
}

/* Estilo da barra de navegação */
nav .navbar-brand {
    font-weight: bold;
    color: white !important;
}

.navbar-nav .nav-link {
    color: white !important; /* Texto branco para o menu */
    font-size: 1.1rem;
    text-transform: uppercase; /* Letras maiúsculas */
}

.navbar-nav .nav-item:hover {
    background-color: #005a8d; /* Azul mais claro para hover */
    border-radius: 5px;
}

.navbar-nav .nav-link:hover {
    color: #f1f1f1 !important; /* Cor clara para o texto no hover */
}

/* Ajustando a cor do link ativo */
.navbar-nav .nav-item.active .nav-link {
    color: #ffcc00 !important; /* Cor amarela para o item ativo */
}

/* Estilo do botão de toggle (3 linhas) */
.navbar-toggler-icon {
    background-color: white; /* Cor branca para as linhas do menu hamburguer */
}

/* Estilo para o dropdown da administração */
.navbar-nav .nav-item.dropdown .dropdown-menu {
    background-color: #003366;
    border-radius: 5px;
}

.navbar-nav .nav-item.dropdown .dropdown-item {
    color: white;
}

.navbar-nav .nav-item.dropdown .dropdown-item:hover {
    background-color: #005a8d;
}

/* Formatação da mensagem de erro ou alerta */
.alert {
    margin-top: 20px;
    font-size: 1.2rem;
}

/* Container do formulário de login */
.container {
    margin-top: 0px; /* Margem superior reduzida */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh; /* Tornando o container mais compacto */
}

/* Card de login */
.card {
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    padding: 20px;
    margin-bottom: 10px;
}

/* Título do card */
.card-title {
    text-align: center;
    font-size: 1.8rem;
    color: #007bff;
}

/* Estilo dos campos do formulário */
.form-group {
    margin-bottom: 1.5rem;
}

label {
    font-size: 1.1rem;
    color: #007bff;
    display: block;
    margin-bottom: 5px;
}

input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 5px;
}

input[type="text"]:focus, input[type="password"]:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Botão de login */
button[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

button[type="submit"]:hover {
    background-color: #0056b3;
}

/* Estilizando as imagens de avatar */
.user-info img {
    border-radius: 50%;
    margin-right: 10px;
}

.user-info span {
    font-size: 1.1rem;
    color: #ffffff;
}

/* Estilo do rodapé */
footer {
    background-color: #003366;
    color: white;
    text-align: center;
    padding: 10px;
    margin-top: 40px;
}

/* Listagem de mensagens de erro */
ul.error_msg {
    list-style-type: none; /* Remove os marcadores (pontinhos) */
    padding-left: 0; /* Remove o padding padrão */
}

/* Responsividade: Ajustes para telas menores */
@media (max-width: 767px) {
    .container {
        padding: 0 15px;
    }

    .card {
        width: 100%;
    }

    .navbar-nav .nav-link {
        font-size: 1rem;
    }

    .navbar-toggler-icon {
        background-color: white;
    }
}