/* Reset básico e ajustes de layout */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;

    /* 2) Imagem de fundo */
    background-image: url('calculadora-simplesx.jpg'); /* Nome do arquivo da imagem */
    background-size: cover; /* Cobre toda a área */
    background-position: center center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Não repete a imagem */
    background-attachment: fixed; /* Mantém a imagem fixa ao rolar */
}

/* Oculta H1 que pode vir do body original do CSS */
body > h1:first-of-type {
    display: none;
}

/* === ESTILOS DO CABEÇALHO PADRÃO (Movido do inline) === */
.header-compact {
    /* 7) Cor de fundo azul */
    background-color: #3498db;
    color: white;
    padding: 10px 15px;
    text-align: center;
    border-bottom: 3px solid #2980b9;
    flex-shrink: 0; /* Não encolhe */
    position: relative; /* Para contexto de empilhamento se necessário */
    z-index: 10; /* Garante que fique acima do conteúdo */
}

.header-compact-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap; /* Permite quebrar linha em telas menores */
    max-width: 1200px; /* Limita largura máxima */
    margin: 0 auto; /* Centraliza o conteúdo */
}

.header-logo { /* Estilo para o logo */
    height: 35px;
    width: 35px;
    display: block; /* Evita espaço extra abaixo */
}

.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; /* Alinhamento à esquerda dentro do container de texto */
    border-bottom: none;
    padding-bottom: 0;
}

.header-compact-text p {
    font-size: 0.85em;
    color: yellow; /* Cor do subtítulo */
    margin: 0;
    line-height: 1.2;
    text-align: left; /* Alinhamento à esquerda dentro do container de texto */
}

/* Main Content Wrapper */
main.tool-content-wrapper {
    flex-grow: 1; /* Ocupa espaço vertical disponível */
    padding: 30px 15px; /* Espaçamento interno */
    display: flex;
    flex-direction: column; /* Empilha calculadora e AdSense */
    justify-content: center; /* Centraliza verticalmente (melhor possível) */
    align-items: center; /* Centraliza horizontalmente */
    width: 100%;
    box-sizing: border-box;
}

/* Estilos da Calculadora */
.calculator {
    /* 3) Efeito Vidro (Glassmorphism) */
    background: rgba(255, 255, 255, 0.15); /* Fundo branco semi-transparente */
    backdrop-filter: blur(10px); /* Efeito de desfoque no fundo */
    -webkit-backdrop-filter: blur(10px); /* Para compatibilidade com Safari */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borda sutil */
    border-radius: 15px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Sombra para profundidade */

    padding: 20px;
    width: 340px; /* Largura ligeiramente maior para acomodar header interno */
    max-width: 95%; /* Ajuste responsivo */
    flex-shrink: 0; /* Não encolhe */
    margin: 0 auto 20px auto; /* Margem inferior para separar do AdSense */
    position: relative; /* Necessário para o backdrop-filter funcionar bem em alguns casos */
    overflow: hidden; /* Garante que o blur não vaze */
}

/* 6) Estilo do Header Interno da Calculadora */
.calculator-header {
    color: #ffffff; /* Cor do texto branca para contraste */
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px; /* Espaço abaixo do título */
    padding-bottom: 10px; /* Espaço extra */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Linha separadora sutil */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Sombra leve no texto */
}

#display {
    width: 100%;
    margin-bottom: 20px;
    padding: 15px;
    font-size: 2.5em;
    text-align: right;
    border: none;
    border-radius: 8px;
    /* Ajuste para fundo de vidro - pode precisar de mais contraste */
    background-color: rgba(255, 255, 255, 0.8); /* Fundo mais opaco para legibilidade */
    color: #2c3e50; /* Cor escura para o texto do display */
    overflow-x: auto;
    white-space: nowrap;
    word-break: keep-all;
    box-sizing: border-box;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Sombra interna sutil */
}

.row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
/* Remove margem do último row */
.row:last-child {
    margin-bottom: 0;
}

button { /* Estilo base dos botões */
    flex: 1;
    padding: 15px;
    margin: 5px;
    font-size: 1.8em;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    min-height: 60px; /* Garante altura mínima */
    display: flex; /* Para centralizar texto */
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Sombra leve nos botões */
    color: #fff; /* Cor de texto padrão para botões */
}

.number {
    /* Ajuste de cor para melhor contraste com fundo de vidro se necessário */
    background-color: rgba(76, 86, 106, 0.7); /* Cor um pouco mais escura/transparente */
    color: #ffffff;
}

.operator {
    /* Ajuste de cor */
    background-color: rgba(0, 188, 212, 0.7); /* Ciano com transparência */
    color: #ffffff;
}

.equals {
    background-color: rgba(255, 152, 0, 0.8); /* Laranja com transparência */
    color: #ffffff;
    flex: 2.1; /* Ocupa um pouco mais de espaço (ajuste fino) */
    margin-left: 5px; /* Ajuste para alinhar melhor com o botão '.' */
}
/* Ajuste específico para o botão 0 e ponto */
.row:last-of-type button:nth-child(1) { flex: 1; } /* Botão 0 */
.row:last-of-type button:nth-child(2) { flex: 1; } /* Botão . */

.clear {
    background-color: rgba(244, 67, 54, 0.7); /* Vermelho com transparência */
    color: #ffffff;
}

button:hover {
    /* background-color: rgba(255, 255, 255, 0.3); Efeito de hover pode ser clarear */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); /* Sombra mais pronunciada */
    transform: translateY(-1px); /* Leve elevação */
}
button:active {
    transform: translateY(1px); /* Efeito de pressionar */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Sombra menor ao clicar */
}

/* --- Seção AdSense Autônoma (Movido do inline) --- */
.adsense-tool {
    margin: 20px auto 0 auto; /* Margem acima, centralizado */
    padding: 15px 0;
    max-width: 340px; /* Largura similar à calculadora */
    width: 95%;
    text-align: center;
    min-height: 90px;
    box-sizing: border-box;
    flex-shrink: 0; /* Não encolhe */
    /* Fundo semi-transparente opcional para consistência */
    /* background: rgba(255, 255, 255, 0.1); */
    /* border-radius: 8px; */
}

/* === ESTILOS DO RODAPÉ PADRÃO (Movido do inline) === */
.tool-footer {
    /* 7) Cor de fundo cinza escuro */
    background-color: #2c3e50;
    color: #95a5a6;
    text-align: center;
    padding: 15px;
    font-size: 0.8em;
    border-top: 3px solid #3498db; /* Borda superior azul */
    margin-top: auto; /* Empurra para o final */
    flex-shrink: 0; /* Não encolhe */
    position: relative; /* Para contexto de empilhamento se necessário */
    z-index: 10; /* Garante que fique acima do conteúdo */
}

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

.tool-footer a {
    color: #bdc3c7; /* Cor dos links */
    margin: 0 8px;
    text-decoration: none;
}

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

/* Responsividade */
@media (max-width: 480px) {
    .calculator {
        width: 95%;
        padding: 15px; /* Ajuste no padding */
    }

    .calculator-header {
        font-size: 1.2em; /* Tamanho menor em telas pequenas */
    }

    button {
        padding: 12px; /* Padding menor */
        font-size: 1.5em; /* Fonte menor */
        margin: 3px; /* Margem menor */
        min-height: 50px; /* Altura mínima menor */
    }

    #display {
        padding: 10px;
        font-size: 2em; /* Fonte menor */
    }

    .adsense-tool {
         max-width: 95%;
         min-height: 60px; /* Altura mínima menor */
    }

    .header-compact-content {
        justify-content: center; /* Centraliza mesmo com quebra */
    }
    .header-compact-text h1,
    .header-compact-text p {
        text-align: center; /* Centraliza texto do header em telas pequenas */
    }
}