/* Reset básico e Estilos Globais */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; /* Rolagem suave */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Body flui normalmente com header, main, footer */
    background-color: #f4f7f6; /* Um cinza muito claro como fundo base */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Mantém a imagem de fundo fixa */
    transition: background-image 0.8s ease-in-out;
    line-height: 1.6;
    color: #333;
    display: flex; /* Usa flexbox para empurrar o footer para baixo */
    flex-direction: column; /* Organiza os filhos (header, main, footer) verticalmente */
    min-height: 100vh; /* Garante que o body ocupe pelo menos a altura total da tela */
}

/* Estilos para o conteúdo principal */
main {
    padding: 0 15px; /* Adiciona padding lateral */
    flex-grow: 1; /* Faz o main ocupar o espaço disponível, empurrando o footer */
    display: flex; /* Usa flex para centralizar o container e o ad */
    flex-direction: column;
    align-items: center; /* Centraliza os filhos (container, ad) horizontalmente */
}

/* ================== NOVOS ESTILOS HEADER ================== */
.header-compact {
    background-color: #3498db; /* Azul */
    color: #fff;
    padding: 8px 15px; /* Padding reduzido */
    position: sticky; /* Fica fixo no topo ao rolar */
    top: 0;
    z-index: 100; /* Garante que fique sobre outros elementos */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra suave */
    width: 100%; /* Ocupa toda a largura */
}

.header-compact-content {
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza o conteúdo */
    max-width: 1200px; /* Limita largura máxima */
    margin: 0 auto; /* Centraliza o container do conteúdo */
}

.header-logo {
    width: 40px; /* Tamanho do logo reduzido */
    height: 40px;
    margin-right: 10px; /* Espaço entre logo e texto */
}

.header-compact-text {
    text-align: left; /* Alinha texto à esquerda (ou center se preferir) */
}

.header-compact-text h1 {
    font-size: 1.5em; /* Tamanho do título */
    color: white;
    margin: 0;
    font-weight: 600;
    line-height: 1.1;
}

.header-compact-text p {
    font-size: 0.85em; /* Tamanho do subtitulo */
    color: #ecf0f1; /* Cor levemente diferente para subtitulo */
    margin: 2px 0 0 0;
    line-height: 1.1;
}
/* ================== FIM ESTILOS HEADER ================== */


/* Container da Aplicação de Meditação */
.container {
    background: rgba(255, 255, 255, 0.55); /* Mantém a transparência */
    padding: 1.5rem 2rem;
    border-radius: 15px;
    width: 100%; /* Ocupa largura do main */
    max-width: 500px; /* Tamanho máximo */
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px 0; /* Margem T/B 30px, L/R 0 (centralizado pelo main) */

    /* --- OPCIONAL: Efeito 'frosted glass' --- */
    /* -webkit-backdrop-filter: blur(8px); */
    /* backdrop-filter: blur(8px); */
}

/* Título dentro do container de meditação */
.container h1 {
    font-size: 1.8rem;
    color: #004d40;
    margin-bottom: 1rem;
    font-weight: 500;
    text-shadow: 0px 1px 3px rgba(255, 255, 255, 0.8);
}

.timer {
    font-size: 4.5rem;
    color: #00695c;
    margin: 0.5rem 0 1rem 0;
    font-weight: 300;
    text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.9);
}

.message-box {
    background: rgba(224, 242, 241, 0.65); /* Mantém a transparência */
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    border-radius: 10px;
    font-size: 1.3rem;
    color: #004d40;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(178, 223, 219, 0.4);
    width: 100%;
    line-height: 1.4;
    font-weight: 500;
    text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.7);
}

/* Controles de Configuração */
#setupControls {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.time-controls {
    display: flex;
    gap: 1rem;
    width: 100%;
}

.time-controls button {
    background: #26a69a;
    flex: 1;
}

.time-controls button:hover {
    background: #00897b;
}

.sound-selector {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(178, 223, 219, 0.6);
    border-radius: 8px;
    font-size: 1rem;
    background: white; /* Fundo opaco para legibilidade */
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2300796B%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px auto;
    padding-right: 40px;
    color: #333;
}

#startBtn {
    background: #4caf50;
    padding: 15px;
}

#startBtn:hover:not(:disabled) {
    background: #388e3c;
}

#startBtn:disabled {
    background: #a5d6a7;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Controles Durante Meditação */
#meditationControls {
    width: 100%;
    margin-top: 1rem;
}

.controls-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
}

#pauseBtn {
    background: #ff9800;
}
#pauseBtn:hover {
    background: #fb8c00;
}

#stopBtn {
    background: #f44336;
}
#stopBtn:hover {
    background: #e53935;
}

/* Estilo Base dos Botões */
button {
    padding: 12px 15px;
    font-size: 1.1rem;
    border-radius: 8px;
    border: none;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    width: 100%;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Classe Utilitária para Esconder Elementos */
.hidden {
    display: none !important;
}


/* ================== NOVOS ESTILOS FOOTER ================== */
.tool-footer {
    background-color: #2c3e50; /* Cinza escuro */
    color: #95a5a6; /* Cinza claro */
    text-align: center;
    padding: 15px 15px; /* Padding reduzido */
    font-size: 0.8em; /* Fonte menor */
    border-top: 3px solid #3498db; /* Borda azul */
    margin-top: auto; /* Empurra para o final da página flex */
    width: 100%; /* Ocupa toda a largura */
}

.tool-footer-links {
    margin-bottom: 8px; /* Espaço menor */
}

.tool-footer-links a {
    color: #bdc3c7; /* Cinza mais claro para links */
    margin: 0 8px; /* Espaço menor */
    text-decoration: none;
    transition: color 0.2s ease; /* Transição suave */
}

.tool-footer-links a:hover {
    color: #fff; /* Branco no hover */
    text-decoration: underline;
}
/* ================== FIM ESTILOS FOOTER ================== */


/* Media Query para Telas Menores */
@media (max-width: 600px) {
    /* Ajustes no Header Compacto */
    .header-logo {
        width: 35px;
        height: 35px;
        margin-right: 8px;
    }
     .header-compact-text h1 {
        font-size: 1.2em;
    }
    .header-compact-text p {
        font-size: 0.75em;
    }

    /* Ajustes no Container da Meditação */
    .container {
        padding: 1rem 1rem;
        width: 95%;
        margin: 20px 0; /* Margem T/B reduzida */
    }
    .timer {
        font-size: 3.5rem;
    }
    .container h1 {
        font-size: 1.5rem;
    }
    .message-box {
        font-size: 1.1rem;
    }
    button {
        font-size: 1rem;
        padding: 12px 10px;
    }
    .controls-grid {
         grid-template-columns: 1fr;
    }

    /* Ajustes no Footer */
     .tool-footer {
        font-size: 0.75em;
        padding: 10px 10px;
    }
    .tool-footer-links a {
        margin: 0 5px;
    }
}