/* Estilos Originais do Relógio com ajustes e novos estilos */
:root {
    --primary: #ff4757;
    --secondary: #2ed573;
    --accent: #3742fa;
    /* --background: #1e272e; /* Fundo escuro original COMENTADO */
    --text: #ffffff;
    --header-bg: #3498db; /* Azul para o header */
    --header-border: #2980b9;
    --header-text: white;
    --header-subtext: yellow;
    --footer-bg: #2c3e50; /* Cinza escuro para o footer */
    --footer-border: #3498db;
    --footer-text: #95a5a6;
    --footer-link: #bdc3c7;
    --container-bg: rgba(30, 39, 46, 0.75); /* Fundo escuro com 75% de opacidade */
    --tab-bg: rgba(255, 255, 255, 0.1); /* Fundo da aba um pouco mais claro */
    --clock-container-bg: rgba(255, 255, 255, 0.15); /* Fundo do container relógio */
}

/* Body: Ajustado para layout flex vertical e imagem de fundo */
body {
    font-family: 'Segoe UI', sans-serif;
    /* Imagem de fundo */
    background-image: url('relogio-mundialx.jpg');
    background-size: cover; /* Cobre toda a área */
    background-position: center center; /* Centraliza a imagem */
    background-attachment: fixed; /* Mantém a imagem fixa durante o scroll */
    background-color: #1e272e; /* Cor de fallback caso a imagem não carregue */

    color: var(--text);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* === ESTILOS MOVIDOS DO <style> INLINE === */
main.tool-content-wrapper {
    flex-grow: 1;
    padding: 20px 15px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilos para o NOVO Header */
.header-compact {
    background-color: var(--header-bg); /* Azul */
    color: var(--header-text);
    padding: 10px 15px;
    text-align: center;
    border-bottom: 3px solid var(--header-border);
    flex-shrink: 0; /* Impede que o header encolha */
}
.header-compact-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 900px; /* Limita largura do conteúdo do header */
    margin: 0 auto; /* Centraliza o conteúdo */
}
.header-logo { /* Classe específica para o logo no novo header */
    height: 35px;
    width: 35px;
}
.header-compact-text {
    text-align: left; /* Alinha texto à esquerda dentro da div */
}
.header-compact-text h1 {
    font-size: 1.3em;
    color: var(--header-text); /* Branco */
    margin: 0 0 2px 0;
    font-weight: 600;
    line-height: 1.2;
    border-bottom: none; /* Remove borda se houver */
    padding-bottom: 0; /* Remove padding se houver */
}
.header-compact-text p {
    font-size: 0.85em;
    color: var(--header-subtext); /* Amarelo */
    margin: 0;
    line-height: 1.2;
}

/* Estilos para o NOVO Footer */
.tool-footer {
    background-color: var(--footer-bg); /* Cinza escuro */
    color: var(--footer-text);
    text-align: center;
    padding: 15px;
    font-size: 0.8em;
    border-top: 3px solid var(--footer-border); /* Azul */
    margin-top: auto; /* Empurra para baixo */
    flex-shrink: 0; /* Impede que o footer encolha */
}
.tool-footer-links {
    margin-bottom: 8px;
}
.tool-footer a {
    color: var(--footer-link);
    margin: 0 8px;
    text-decoration: none;
}
.tool-footer a:hover {
    text-decoration: underline;
}

/* Seção AdSense (mantida) */
.adsense-tool {
    margin: 30px auto 0 auto;
    padding: 15px 0;
    max-width: 800px;
    width: 95%;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Linha clara */
    text-align: center;
    min-height: 90px;
    box-sizing: border-box;
    flex-shrink: 0; /* Impede que encolha */
}

/* Título principal e Data (abaixo do header) */
.main-title-date {
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
    max-width: 800px; /* Mesma largura do container */
}
.main-title-date h1 {
    color: var(--primary, #ff4757);
    margin: 0 0 5px 0;
    font-size: 2.2em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Sombra para legibilidade */
}
.main-title-date .date {
    color: var(--secondary, #2ed573);
    font-size: 1.1em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Sombra para legibilidade */
}
/* === FIM ESTILOS MOVIDOS === */


/* Container principal da ferramenta com TRANSPARÊNCIA */
.container {
    width: 100%;
    max-width: 800px;
    margin: 0;
    padding: 20px; /* Adiciona padding interno */
    box-sizing: border-box;
    background-color: var(--container-bg); /* Fundo com transparência */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Sombra para destacar */
}

/* Controles de Abas */
.controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 20px; /* Espaçamento abaixo dos botões */
}

button { /* Estilo base para botões */
    background: var(--accent);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    font-size: 1.0em;
    font-weight: 500;
}
button:hover {
    transform: translateY(-2px);
    background-color: #2a33c7;
}
button.active { /* Estilo para botão da aba ativa */
     background-color: var(--primary); /* Cor diferente para aba ativa */
     font-weight: bold;
}


/* Container do Relógio Mundial com TRANSPARÊNCIA */
.clock-container {
    background: var(--clock-container-bg); /* Fundo com transparência */
    padding: 15px; /* Padding interno */
    border-radius: 10px; /* Bordas arredondadas */
    margin: 0; /* Removido margin top/bottom - container já tem */
    max-height: 400px; /* Altura máxima ajustada */
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borda sutil mais visível */
}
/* Scrollbar customizada */
.clock-container::-webkit-scrollbar { width: 8px; }
.clock-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; }
.clock-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.4); border-radius: 4px; }
.clock-container::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.6); }

.city-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 8px; /* Padding ajustado */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 1em; /* Tamanho base */
    flex-wrap: nowrap; /* Impede quebra de linha */
}
.city-time:last-child { border-bottom: none; }

/* Container para bandeira e nome */
.city-info {
    display: flex;
    align-items: center;
    gap: 8px; /* Espaço entre bandeira e nome */
    flex-shrink: 1; /* Permite encolher se necessário */
    overflow: hidden; /* Esconde o que não couber */
    margin-right: 15px; /* Espaço antes da data/hora */
}

.city-flag {
    width: 20px; /* Tamanho fixo da bandeira */
    height: auto;
    flex-shrink: 0; /* Impede que a bandeira encolha */
    box-shadow: 0 0 2px rgba(0,0,0,0.5); /* Sombra sutil na bandeira */
}
.no-flag { /* Espaço reservado se não houver bandeira */
     width: 20px;
     display: inline-block;
     flex-shrink: 0;
}

.city-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Adiciona '...' se nome for muito longo */
    font-weight: 500; /* Leve negrito */
}

/* Estilo para DATA e HORA */
.city-date-time { /* Novo span para data e hora */
    font-weight: bold;
    color: var(--secondary); /* Verde */
    font-size: 1.05em; /* Ligeiramente maior */
    white-space: nowrap; /* Impede quebra de linha entre data e hora */
    text-align: right; /* Alinha à direita */
    flex-shrink: 0; /* Impede que encolha */
}

/* Estilos para outras abas (Alarme, Timer, Cronômetro) */
.time { /* Classe comum para displays de tempo */
    font-size: 2.5em;
    font-weight: bold;
    color: var(--primary);
    text-align: center;
    margin: 20px 0;
    letter-spacing: 2px;
}

.tab-content {
    display: none;
    padding: 20px;
    background: var(--tab-bg); /* Fundo com transparência para abas */
    border-radius: 10px;
    margin-top: 0; /* Removido margin-top, .container já espaça */
    text-align: center;
}

.active-tab {
    display: block;
}

.alarm-input, .timer-input {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

input[type="time"], input[type="number"] {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borda sutil */
    background: rgba(0, 0, 0, 0.2); /* Fundo escuro semi-transparente */
    color: var(--text);
    font-size: 1em;
    text-align: center;
}
input[type="number"] {
     width: 80px;
     -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#alarm-status {
    margin-top: 15px;
    font-style: italic;
    color: var(--secondary);
}

#stopwatch .controls {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 20px; /* Espaço acima dos botões do cronômetro */
}

/* Responsividade */
@media (max-width: 700px) {
     .city-time {
         font-size: 0.9em; /* Reduz um pouco a fonte em telas menores */
     }
     .city-date-time {
         font-size: 0.95em;
     }
     .city-info {
         margin-right: 10px; /* Menos espaço */
     }
}

@media (max-width: 600px) {
    main.tool-content-wrapper { padding: 15px 10px; } /* Menos padding lateral */
    .container { padding: 15px; } /* Menos padding interno */
    .controls { grid-template-columns: repeat(2, 1fr); } /* 2 botões por linha */
    .main-title-date h1 { font-size: 1.8em; }
    .main-title-date .date { font-size: 1em; }
    .time { font-size: 2em; }
    #stopwatch-display { font-size: 2.5em; }
    button { font-size: 0.95em; padding: 10px; }
    .alarm-input, .timer-input { flex-direction: column; align-items: stretch; }
    input[type="time"], input[type="number"] { width: 100%; box-sizing: border-box; margin-bottom: 5px;}
    .city-time {
        flex-direction: column; /* Empilha nome e hora */
        align-items: flex-start; /* Alinha à esquerda */
        gap: 5px; /* Espaço entre nome e hora */
    }
    .city-date-time {
        text-align: left; /* Alinha hora à esquerda também */
        width: 100%; /* Ocupa toda a largura */
        font-size: 1em; /* Ajusta tamanho */
    }
}