/* === ESTILOS GLOBAIS E DA FERRAMENTA === */

body {
    /* Item 2: Imagem de fundo */
    background-image: url('conversor-moedasx.jpg');
    background-color: #1e3c72; /* Fallback caso a imagem não carregue */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Fixo para não rolar com o conteúdo */

    color: #e0e0e0;
    font-family: 'Arial Rounded MT Bold', Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex; /* Para layout header/main/footer */
    flex-direction: column;
    min-height: 100vh;
}

/* Wrapper principal para empurrar o footer para baixo */
main.tool-content-wrapper {
    flex-grow: 1; /* Ocupa o espaço disponível */
    padding: 0; /* Padding será no container interno */
    width: 100%;
    display: flex; /* Para centralizar o container */
    flex-direction: column; /* Garante que o conteúdo flua verticalmente */
    align-items: center; /* Centraliza o .container horizontalmente */
}


.container {
    max-width: 900px;
    width: 95%; /* Adicionado para melhor responsividade em telas menores */
    padding: 20px;
    margin-top: 20px; /* Espaçamento abaixo do header */
    margin-bottom: 30px; /* Espaçamento acima do footer/ads */
    box-sizing: border-box; /* Garante padding dentro da largura */
    /* Fundo semi-transparente opcional para legibilidade sobre a imagem */
    background-color: rgba(0, 0, 0, 0.1); /* Leve escurecida para contraste */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Sombra para destacar */
}

.titulo {
    font-size: 2rem;
    text-align: center;
    margin: 0 0 2rem 0;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Sombra mais forte */
}

/* Grid das Moedas */
.currency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.moeda-box {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 1rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borda ligeiramente mais visível */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 110px; /* Aumentado ligeiramente */
}

/* Destaques */
.destaque-brl { background: rgba(76, 175, 80, 0.3) !important; border-color: #66bb6a; } /* Verde mais claro */
.destaque-eur { background: rgba(63, 81, 181, 0.3) !important; border-color: #7986cb; } /* Azul mais claro */
.destaque-usd { background: rgba(255, 193, 7, 0.3) !important; border-color: #ffd54f; } /* Amarelo mais claro */

.moeda-box:hover {
    transform: translateY(-4px); /* Efeito sutil aumentado */
    box-shadow: 0 8px 16px rgba(0,0,0,0.3); /* Sombra aumentada */
    background: rgba(255, 255, 255, 0.25); /* Mais claro no hover */
}

.linha-moeda {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem; /* Aumentado ligeiramente */
    width: 100%;
}

.identificacao-moeda {
     display: flex;
     align-items: center;
     flex-grow: 1;
     margin-right: 10px;
     min-width: 0; /* Previne quebra de layout */
}

.bandeira {
    width: 36px;
    height: 24px;
    margin-right: 10px;
    border: 1px solid rgba(255, 255, 255, 0.4); /* Borda mais visível */
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0; /* Impede que a bandeira encolha */
}

.codigo-moeda {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
}

.moeda-input {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #bbb;
    color: #222;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: right;
    width: 100%;
    max-width: 140px;
    padding: 8px 12px;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    -moz-appearance: textfield; /* Remove setas numéricas Firefox */
    flex-shrink: 0; /* Impede que o input encolha */
}
.moeda-input::-webkit-outer-spin-button,
.moeda-input::-webkit-inner-spin-button {
  -webkit-appearance: none; /* Remove setas numéricas Chrome/Safari */
  margin: 0;
}
.moeda-input:focus {
    outline: none;
    border-color: #2a5298;
    box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.6); /* Destaque do foco mais visível */
}

.nome-moeda {
    font-size: 0.9rem;
    color: #d0d0d0;
    text-align: left;
    margin-top: auto; /* Empurra para baixo */
    padding-top: 5px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Adiciona '...' se o nome for muito longo */
}

/* Mensagem de Erro */
.error {
    color: #ff4444;
    text-align: center;
    padding: 12px 15px; /* Padding aumentado */
    font-size: 1rem; /* Tamanho aumentado */
    font-weight: bold;
    background-color: rgba(255, 68, 68, 0.2); /* Fundo mais destacado */
    border: 1px solid rgba(255, 68, 68, 0.5); /* Borda mais destacada */
    border-radius: 5px;
    margin: 0 auto 1.5rem auto; /* Centralizado e com margem inferior */
    max-width: 600px; /* Limita largura */
}

/* Indicador de Carregamento */
.loading {
     text-align: center;
     color: #ddd; /* Cor ajustada */
     padding: 3rem 1rem; /* Padding aumentado */
     font-style: italic;
     font-size: 1.1rem;
}

/* Esconde loading quando conteúdo aparece e vice-versa */
#conteudo:not(:empty) + #loading-indicator,
#conteudo:not(:empty) ~ .loading {
    display: none;
}
#loading-indicator:not([style*="display: none"]) ~ #conteudo {
     display: none;
}

/* === ESTILOS DO HEADER (Item 3 e 5) === */
/* Movidos do <style> embutido para cá */
.header-compact {
    background-color: #3498db; /* Cor azul solicitada */
    color: white;
    padding: 10px 15px;
    text-align: center;
    border-bottom: 3px solid #2980b9; /* Borda inferior mais escura */
    flex-shrink: 0; /* Impede que encolha */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra suave */
}
.header-compact-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px; /* Espaçamento aumentado */
    flex-wrap: wrap; /* Permite quebra em telas pequenas */
    max-width: 1200px; /* Limita largura em telas grandes */
    margin: 0 auto; /* Centraliza conteúdo */
}
.header-logo { /* Classe adicionada no HTML */
    height: 40px; /* Tamanho ajustado */
    width: 40px;  /* Tamanho ajustado */
}
.header-compact-text h1 {
    font-size: 1.4em; /* Tamanho aumentado */
    color: white;
    margin: 0 0 3px 0; /* Espaçamento ajustado */
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    border-bottom: none;
    padding-bottom: 0;
}
.header-compact-text p {
    font-size: 0.9em; /* Tamanho aumentado */
    color: yellow; /* Cor mantida do estilo original */
    margin: 0;
    line-height: 1.2;
    text-align: left;
}


/* === ESTILOS DO FOOTER (Item 3 e 6) === */
/* Movidos do <style> embutido para cá */
.tool-footer {
    background-color: #2c3e50; /* Cinza escuro solicitado */
    color: #bdc3c7; /* Cor do texto ajustada para contraste */
    text-align: center;
    padding: 20px 15px; /* Padding aumentado */
    font-size: 0.85em; /* Tamanho aumentado */
    border-top: 3px solid #3498db; /* Borda superior azul */
    margin-top: auto; /* Empurra para o final da página */
    flex-shrink: 0; /* Impede que encolha */
}
.tool-footer-links {
    margin-bottom: 10px; /* Espaçamento aumentado */
}
.tool-footer a {
    color: #ecf0f1; /* Cor dos links mais clara */
    margin: 0 10px; /* Espaçamento aumentado */
    text-decoration: none;
    transition: color 0.2s ease; /* Transição suave */
}
.tool-footer a:hover {
    text-decoration: underline;
    color: #ffffff; /* Cor mais clara no hover */
}


/* === ESTILOS AdSense (Item 3) === */
/* Movidos do <style> embutido para cá */
.adsense-tool {
    margin: 30px auto 20px auto; /* Mantido */
    padding: 20px 0; /* Padding vertical aumentado */
    max-width: 900px; /* Mantido */
    width: 95%;       /* Mantido */
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Mantido */
    text-align: center;
    min-height: 90px; /* Mantido */
    box-sizing: border-box;
}
/* Estilo para o bloco AdSense em si (opcional, ajuste conforme necessário) */
.adsbygoogle {
    display: block;
    background-color: rgba(255, 255, 255, 0.05); /* Fundo sutil se vazio */
    border-radius: 4px;
}

/* === AJUSTES RESPONSIVOS === */
@media (max-width: 768px) {
    .header-compact-content {
        justify-content: flex-start; /* Alinha à esquerda em telas menores */
        padding-left: 10px;
    }
    .header-compact-text h1 {
        font-size: 1.2em;
    }
    .header-compact-text p {
        font-size: 0.8em;
    }
    .container {
        padding: 15px;
    }
}

@media (max-width: 576px) {
    .titulo { font-size: 1.6rem; margin-bottom: 1.5rem;}
    .currency-grid { grid-template-columns: 1fr; } /* Uma coluna */
    .moeda-box { padding: 0.8rem 1rem;} /* Padding ajustado */
    .bandeira { width: 32px; height: 21px; margin-right: 8px;} /* Bandeira ligeiramente menor */
    .codigo-moeda { font-size: 1.1rem; } /* Código um pouco menor */
    .moeda-input { max-width: 120px; font-size: 1rem; padding: 6px 10px;} /* Input ajustado */
    .nome-moeda { font-size: 0.8rem; } /* Nome menor */

     /* Ajusta AdSense para telas pequenas */
     .adsense-tool {
         max-width: 95%;
         padding: 15px 0;
     }

    .header-compact-text h1 {
        font-size: 1.1em;
    }
     .header-compact-text p {
        font-size: 0.75em;
    }
    .tool-footer {
        font-size: 0.75em;
        padding: 15px 10px;
    }
    .tool-footer-links a {
        margin: 0 5px;
    }
}