/* === ESTILOS GLOBAIS E LAYOUT === */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    display: flex; /* Necessário para footer no final */
    flex-direction: column; /* Necessário para footer no final */
    min-height: 100vh; /* Necessário para footer no final */
    background-color: #f8f9fa; /* Cor de fallback */

    /* === Imagem de fundo adicionada === */
    background-image: url('conversor-unidadesx.jpg'); /* Certifique-se que o caminho está correto */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Imagem fica fixa ao rolar */
}

/* Main Content Wrapper */
main.tool-content-wrapper {
    flex-grow: 1; /* Ocupa espaço disponível, empurrando footer para baixo */
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza o conteúdo filho (seções) */
}

/* Título H1 principal da ferramenta */
main.tool-content-wrapper > h1 {
    text-align: center;
    color: #2c3e50; /* Mantido */
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 2.2em;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7); /* Sombra clara para destacar no fundo */
    width: 100%;
    max-width: 1200px; /* Mantém alinhado com as seções */
    background-color: rgba(255, 255, 255, 0.5); /* Fundo levemente branco para legibilidade */
    padding: 10px 0;
    border-radius: 5px;
}

/* === ESTILOS DO CABEÇALHO PADRÃO (Movido do HTML) === */
.header-compact {
    background-color: #3498db; /* Cor azul solicitada */
    color: white;
    padding: 10px 15px;
    text-align: center;
    border-bottom: 3px solid #2980b9;
    flex-shrink: 0; /* Impede que encolha */
}

.header-compact-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap; /* Quebra linha em telas pequenas */
}

.header-logo { /* Estilo específico para a classe do logo no novo header */
    height: 35px;
    width: 35px;
}

.header-compact-text h1 {
    font-size: 1.3em;
    color: white;
    margin: 0 0 2px 0;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    border-bottom: none;
    padding-bottom: 0;
}

.header-compact-text p {
    font-size: 0.85em;
    color: yellow; /* Cor original mantida */
    margin: 0;
    line-height: 1.2;
    text-align: left;
}


/* === ESTILOS DO CONVERSOR === */
.converter-section {
    padding: 25px;
    margin-bottom: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra mais pronunciada */
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;

    /* === Transparência ajustada === */
    /* Usando RGBA com alpha 0.85 para ter fundo colorido mas deixar ver a imagem */
    /* Se quiser mais transparente, diminua o último valor (e.g., 0.7 ou 0.5) */
    /* Se quiser opaco, use a cor sólida (e.g., #ADD8E6) */
}

.comprimento { background-color: rgba(173, 216, 230, 0.85); } /* Azul claro */
.peso        { background-color: rgba(255, 255, 204, 0.85); } /* Amarelo claro */
.volume      { background-color: rgba(255, 182, 193, 0.85); } /* Rosa claro */
.temperatura { background-color: rgba(144, 238, 144, 0.85); } /* Verde claro */


.converter-section h2 {
     margin-top: 0;
     margin-bottom: 20px;
     color: #333; /* Cor mais escura para contraste */
     font-size: 1.5em;
     border-bottom: 1px solid rgba(0,0,0,0.2); /* Borda sutil */
     padding-bottom: 8px;
     text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5); /* Leve sombra clara */
}


.converter-group {
    margin: 0;
    padding: 0;
    border-radius: 0;
}

.input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}
.converter-group > .input-group:last-child {
    margin-bottom: 0;
}

.input-label {
    font-weight: bold;
    min-width: 100px;
    text-align: right;
    flex-shrink: 0;
    color: #222; /* Cor escura para legibilidade */
}

input[type="number"] {
    padding: 10px;
    width: 130px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    text-align: right;
    background-color: rgba(255, 255, 255, 0.9); /* Fundo do input levemente transparente */
    -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3); /* Sombra maior no foco */
}


/* Updated Rule */
.arrow {
    font-size: 38px; /* Aumentado o tamanho da seta */
    margin: 0 12px; /* Ajustado levemente o espaço lateral */
	                     
    /* color: #F39C12; Cor laranja vibrante para destaque */
	color: #000000; /* Cor preta para destaque */
    font-weight: bold;
    line-height: 1; /* Ajuda no alinhamento vertical */
    /* Opcional: Adiciona uma leve sombra para mais destaque */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.table-btn {
    background-color: #5bc0de;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 10px;
    transition: background-color 0.3s, transform 0.2s;
    font-size: 0.9em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.table-btn:hover {
    background-color: #31b0d5;
    transform: translateY(-1px); /* Efeito leve ao passar o mouse */
}

/* === ESTILOS DO MODAL === */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7); /* Fundo mais escuro */
    z-index: 1000;
    padding-top: 60px;
    backdrop-filter: blur(3px); /* Efeito de desfoque no fundo (suporte variado) */
}

.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 30px;
    width: 90%; /* Ajustado para telas menores */
    max-width: 700px;
    border-radius: 10px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #aaa;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close-btn:hover,
.close-btn:focus {
    color: #333;
    text-decoration: none;
}

/* Tabela dentro do Modal */
#tableContent h3 {
    text-align: center;
    color: #4CAF50;
    margin-top: 0;
    margin-bottom: 15px;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

th {
    background-color: #4CAF50;
    color: white;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* === SEÇÃO ADSENSE (Movido do HTML) === */
.adsense-tool {
    margin: 30px auto 0 auto;
    padding: 15px 0;
    max-width: 1200px;
    width: 95%;
    border-top: 1px solid rgba(255, 255, 255, 0.5); /* Borda clara */
    text-align: center;
    min-height: 90px;
    box-sizing: border-box;
    flex-shrink: 0; /* Impede que encolha */
    background-color: rgba(0, 0, 0, 0.1); /* Fundo sutil para destacar área */
    border-radius: 5px;
}

/* Estilo para o texto placeholder do AdSense (movido do inline style) */
.adsense-tool p {
    color: #eee; /* Cor clara para contraste com fundo escuro e imagem */
    font-size: 0.8em;
    text-align: center;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}


/* === ESTILOS DO RODAPÉ PADRÃO (Movido do HTML) === */
.tool-footer {
    background-color: #2c3e50; /* Cor cinza escuro solicitada */
    color: #95a5a6;
    text-align: center;
    padding: 15px;
    font-size: 0.8em;
    border-top: 3px solid #3498db;
    margin-top: auto; /* Empurra para o final da página */
    flex-shrink: 0; /* Impede que encolha */
}

.tool-footer-links {
    margin-bottom: 8px;
}

.tool-footer a {
    color: #bdc3c7;
    margin: 0 8px;
    text-decoration: none;
}

.tool-footer a:hover {
    text-decoration: underline;
}


/* === RESPONSIVIDADE === */
@media (max-width: 768px) {
     main.tool-content-wrapper > h1 { font-size: 1.8em; margin-bottom: 20px;}
     .converter-section { padding: 20px; }
     .input-group { flex-direction: column; align-items: stretch; gap: 8px; }
     .input-label { min-width: auto; text-align: left; margin-bottom: 3px;}
     input[type="number"] { width: 100%; text-align: left; box-sizing: border-box; /* Garante padding não estoura */ }
     .arrow { margin: 5px 0; transform: rotate(90deg); align-self: center; } /* Vira a seta e centraliza */
     .table-btn { margin-left: 0; width: 100%; margin-top: 10px; }
     .modal-content { width: 85%; margin: 10% auto;}

     .header-compact-content { justify-content: flex-start; } /* Alinha itens à esquerda */
}

@media (max-width: 480px) {
    body { background-attachment: scroll; } /* Melhora performance em mobile */
    main.tool-content-wrapper { padding: 10px; }
    main.tool-content-wrapper > h1 { font-size: 1.5em; }
    .converter-section { padding: 15px; }
    .converter-section h2 { font-size: 1.3em; }
    input[type="number"] { padding: 8px; font-size: 0.95em;}
    .modal-content { width: 95%; margin: 15% auto; padding: 15px;} /* Ajuste modal */
    th, td { padding: 6px; font-size: 0.9em; }
    .header-compact-text h1 { font-size: 1.1em; }
    .header-compact-text p { font-size: 0.75em; }
    .tool-footer { font-size: 0.75em; padding: 10px; }
    .tool-footer-links a { margin: 0 5px; }
}