/* --- ESTILOS GERAIS --- */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Evita barras de rolagem na página principal */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f0f2f5;
}

h1 {
    position: absolute; /* Posição flutuante */
    top: 10px;
    left: 50%;
    transform: translateX(-50%); /* Centraliza o título horizontalmente */
    font-size: 1.5em;
    color: #1d3557;
    z-index: 10; /* Garante que o título fique sobre o mapa */
    background-color: rgba(255, 255, 255, 0.7); /* Fundo semi-transparente para legibilidade */
    padding: 5px 20px;
    border-radius: 10px;
    pointer-events: none; /* O título não interfere com os cliques no mapa */
}

/* style.css */

/* Esconde o chartdiv por padrão, mas o mantém no layout */
#chartdiv {
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out;
}

/* Mostra o chartdiv quando o mapa estiver pronto */
body.map-ready #chartdiv {
    opacity: 1;
    visibility: visible;
}

/* Adiciona um feedback de carregamento mais elegante */
#chartdiv-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: sans-serif;
    color: #555;
    display: none; /* Escondido por padrão */
}

body.map-loading #chartdiv-loader {
    display: block; /* Mostra o loader quando estiver carregando */
}

/* =================================================================== */
/* ============= ESTILOS DE MODAIS  ================ */
/* =================================================================== */

/* Regra Global para Esconder Elementos */
/* Usaremos esta classe para todos os nossos modais */
.hidden {
    display: none !important; /* !important garante que esta regra sempre vença */
}

#modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Oculta o modal com opacidade 0 antes de aplicar display: none, para a transição funcionar */
/* (Esta regra é opcional, mas melhora a estética ao fechar) */
#modal-overlay:not(.hidden) {
    opacity: 1;
}

#modal-container {
    /* --- Alterado --- */
    background-color: rgba(255, 255, 255, 0.3); /* Branco com 90% de opacidade */
    -webkit-backdrop-filter: blur(5px); /* Efeito de vidro fosco para navegadores Safari */
    backdrop-filter: blur(5px); /* Efeito de vidro fosco para outros navegadores */
    padding: 30px 40px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borda sutil para definir o contorno */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 960px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    transform: scale(1);
    transition: transform 0.3s ease;
}

#modal-close-btn {
    position: absolute;
    top: 45px;  /* Alterado de 15px para 20px */
    right: 25px; /* Alterado de 20px para 25px */
    background: none;
    border: none;
    font-size: 2.5em;
    color: #e0e0e0; /* Cor mais suave para combinar com o novo texto */
    cursor: pointer;
    line-height: 1;
    z-index: 10; /* <-- ADICIONE ESTA LINHA CRUCIAL */
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); /* Sombra para legibilidade */
    transition: color 0.2s ease; /* Transição suave */
}
#modal-close-btn:hover {
    color: #ffffff; /* Brilho ao passar o mouse */
}

#modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

#modal-overlay.hidden #modal-container {
    transform: scale(0.95);
}


/* --- ESTILOS DO CONTEÚDO DENTRO DO MODAL (sem alterações) --- */
/* (Aqui entrariam todos os estilos para #modal-content h2, .secao-info, etc., que já tínhamos) */
#modal-content h2 {
    text-align: center;
    font-size: 2.8em;
    margin-bottom: 25px;
    margin-top: 0; /* GARANTA que a margem do topo seja zero */
    color: #1d3557;
}

#modal-content .info-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 20px;
    text-align: center;
}

#modal-content .info-grid h4 {
    margin-bottom: 10px;
    font-weight: normal;
    color: #666;
}

#modal-content .info-grid img {
    max-width: 100%;
    width: 250px;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
}

#modal-content .info-clima {
    text-align: center;
    font-size: 1.1em;
    color: #457b9d;
    padding-bottom: 20px;
}

#modal-content .secao-info {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

#modal-content .secao-info:nth-child(even) {
    flex-direction: row-reverse;
}

#modal-content .secao-texto {
    flex: 1;
}

#modal-content .secao-texto h3 {
    font-size: 1.8em;
    color: #1d3557;
    margin-bottom: 5px;
}

#modal-content .secao-texto p {
    font-size: 1.2em;
    color: #444;
}

#modal-content .secao-imagem {
    flex: 1;
}

#modal-content .imagem-principal {
    max-width: 100%;
    max-height: 500px;
    width: auto;
    height: auto;
    display: block;
    margin: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Títulos principais (H2, H3) agora brancos e com sombra para se destacarem */
#modal-content h2,
#modal-content h3 {
    color: #ffffff; /* Garante que os títulos também sejam brancos */
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); /* ADICIONADO: Sombra que "descola" o texto do fundo */
}

/* Textos secundários (cidade, clima, etc) */
#modal-content p, 
#modal-content .info-clima,
#modal-content .cidade {
    color: #e0e0e0; /* Um branco um pouco mais suave para não competir com os títulos */
    text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6); /* Sombra mais sutil */
}

/* Rótulos 'Bandeira' e 'Formato do País' */
#modal-content .info-grid h4 {
    color: #f0f0f0;
    font-weight: bold; /* Deixa em negrito para diferenciar */
}

/* O texto em negrito (<strong>) fica com uma cor vibrante para dar destaque */
#modal-content strong {
    color: #ffc107; /* Amarelo/dourado para um destaque elegante */
    font-weight: 600;
}


/* Força a cor branca e a sombra nos subtítulos (Ponto Turístico, Animal, etc.) */
#modal-content .secao-texto h3 {
    color: #ffffff;
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}

/* Força a cor branca suave e a sombra nos parágrafos (nome do animal, da comida, etc.) */
#modal-content .secao-texto p {
    color: #e0e0e0;
    text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);
}

#modal-content .secao-texto h4 {
    margin: 0 0 8px 0; /* Remove margem superior e adiciona uma pequena margem inferior */
    padding: 0;
    font-size: 0.9em;          /* Tamanho de fonte menor, para parecer um rótulo */
    font-weight: bold;
    color: #f0f0f0;           /* Um branco um pouco mais suave que o título principal */
    text-transform: uppercase; /* Deixa o texto em maiúsculas, para dar destaque */
    letter-spacing: 1.5px;     /* Adiciona um "respiro" entre as letras */
    text-shadow: 0px 1px 3px rgba(0,0,0,0.6); /* Sombra para garantir a legibilidade */
    text-align: left;          /* Garante o alinhamento à esquerda */
}

/* Ajuste opcional para o título principal (h3), para garantir a consistência */
#modal-content .secao-texto h3 {
    margin-top: 0;
    text-align: left;
}

/* --- ESTILOS DA PÁGINA DE LOGIN --- */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;

    /* A MUDANÇA PRINCIPAL ESTÁ AQUI:
      - '100vh' foi trocado por '100dvh'.
      - 'dvh' significa "Dynamic Viewport Height" (Altura Dinâmica da Tela).
      - Esta unidade se ajusta AUTOMATICAMENTE quando as barras do Safari aparecem ou desaparecem.
      - É a solução moderna e correta para este problema.
    */
    min-height: 100dvh;
    background: #a0d9ef;
}

.login-container {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
    width: 90%;
    max-width: 400px;
}

.login-container h1 {
    position: static;
    transform: none;
    background: none;
    padding: 0;
    margin-bottom: 15px;
    font-size: 2.2em;
}

.login-container p {
    font-size: 1em;
    color: #333;
    margin-bottom: 25px;
}

.login-container input {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    /* Adiciona uma aparência mais nativa no iOS */
    -webkit-appearance: none;
}

.login-container button {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px;
    background-color: #1d3557;
    color: white;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    /* Adiciona uma aparência mais nativa no iOS */
    -webkit-appearance: none;
}

.login-container button:hover {
    background-color: #457b9d;
}

#error-message {
    margin-top: 15px;
    color: #e63946;
    font-weight: bold;
}

#error-message.hidden {
    display: none;
}


/* --- MELHORIAS PARA DISPOSITIVOS MÓVEIS --- */
@media (max-width: 600px) {
    .login-body {
        /* No mobile, não precisamos de padding no corpo */
        padding-top: 0;
    }

    .login-container {
        width: 100%;
        /* Aqui também usamos 'dvh' para garantir que o container ocupe a altura visível correta */
        height: 100dvh;
        max-width: none;
        border-radius: 0;
        box-shadow: none;
        border: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 30px; /* Um pouco mais de padding lateral para não colar nas bordas */
        box-sizing: border-box;
    }

    .login-container h1 {
        font-size: 2em;
    }
}

/* Estilos do Modal de Configurações (semelhante ao modal de país) */
#settings-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

#settings-modal-container {
    background-color: #f0f2f5;
    padding: 20px 30px;
    border-radius: 15px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    color: #333;

    /* === CORREÇÃO DO BUG 2 === */
    max-height: 85vh; /* Define uma altura máxima (85% da altura da tela) */
    overflow-y: auto;   /* Adiciona uma barra de rolagem se o conteúdo for maior */
}


#settings-modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2.2em;
    color: #aaa;
    cursor: pointer;
}

#settings-modal-content h2 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
    color: #1d3557;
}

/* Estilo para a opção de ligar/desligar */
.settings-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 15px;
    gap: 15px;
}

.settings-option span {
    flex-grow: 1;
    text-align: left;
}

.settings-option .switch {
    flex-shrink: 0;
}

/* Estilo para o texto de ajuda */
.help-text {
    text-align: left;
    font-size: 0.95em;
    line-height: 1.6;
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 10px;
}

.help-text h3 {
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.help-text ul {
    padding-left: 20px;
    margin-top: 0;
}

.help-text p {
    margin-top: 15px;
    margin-bottom: 5px;
}

/* Estilos do interruptor (reutilizados) */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:checked+.slider:before {
    transform: translateX(22px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* =================================================================== */
/* === ESTILOS DO MODO ESTUDO (VERSÃO BLUR SIMPLES E CORRETA) ======== */
/* =================================================================== */

/* Aplica o blur no NOME do país (H2) */
body.study-mode-active #modal-content h2 {
    filter: blur(15px);
    user-select: none;
    transition: filter 0.3s ease;
}

/* Aplica o blur na IMAGEM do formato do país */
body.study-mode-active #modal-content img[alt*="Formato do país"] {
    filter: blur(15px);
    transition: filter 0.3s ease;
}

/* --- ESTILOS DO MODO OCULTAR CAPITAL --- */

/* Esta regra borra APENAS o NOME da capital (o H3) */
body.hide-capital-name-active #modal-content .secao-info:has(img[alt*="Capital:"]) h3 {
    filter: blur(8px);
    transition: filter 0.3s ease;
    user-select: none;
}

/* Esta regra borra APENAS a IMAGEM da capital */
body.hide-capital-image-active #modal-content .secao-info img[alt*="Capital:"] {
    filter: blur(15px);
    transition: filter 0.3s ease;
}

/* Adicionei o estilo aqui para facilitar, mas você pode mover para o seu style.css */
.install-instructions {
    border: 2px dashed #1d3557;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    background-color: #eef7ff;
}
.install-instructions h3 {
    margin-top: 0;
    color: #1d3557;
}
.install-instructions p {
    margin-bottom: 5px;
    line-height: 1.5;
}
.share-icon { /* Estilo para o ícone de compartilhar */
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin: 0 4px;
}


/* =================================================================== */
/* === ESTILOS DA PÁGINA DE LOGIN  ==== */
/* =================================================================== */

/* Aplica a imagem de fundo e centraliza o conteúdo */
body#login-page {
    background-image: url('imagens/earth.jpg'); /* Verifique se o caminho está correto */
    background-size: cover; /* Faz a imagem cobrir toda a tela */
    background-position: center center; /* Centraliza a imagem */
    background-attachment: fixed; /* Deixa a imagem fixa durante o scroll (efeito legal no mobile) */

    /* Usa flexbox para centralizar o container de login na tela */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Container de login com fundo semi-transparente */
#login-container {
    background-color: rgba(255, 255, 255, 0.92); /* Fundo branco com 92% de opacidade */
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 90%;
    max-width: 400px;
    color: #333; /* Cor do texto padrão para dentro do container */
}

/* Garante que o H1 dentro do login-container use o estilo correto */
#login-container h1 {
    position: static;
    transform: none;
    background: none;
    padding: 0;
    margin-bottom: 10px;
    font-size: 2em;
    color: #1d3557; /* Cor escura para o título */
}

#login-container p {
    margin-bottom: 25px;
}

/* =================================================================== */
/* ======== ESTILOS FINAIS PARA ANIMAÇÃO DO MODAL (CONTROLADO VIA JS) ======== */
/* =================================================================== */

/* Define a transição suave para o conteúdo do modal */
#modal-content {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* Esta classe será adicionada/removida via JS para controlar a visibilidade */
/* Quando o modal está 'carregando', seu conteúdo fica invisível e um pouco menor */
#modal-overlay.is-loading #modal-content {
    opacity: 0;
    transform: scale(0.97);
}

/* Classe temporária para forçar o recalculo do scroll */
#modal-container.modal-loading-content {
    overflow-y: hidden;
}

/* =================================================================== */
/* === NOVO LAYOUT RESPONSIVO PARA AS SEÇÕES DE INFORMAÇÃO (FINAL) === */
/* =================================================================== */

/* Mantém o comportamento original de divisão 50/50 para telas grandes */
#modal-content .secao-info {
    display: flex;
    align-items: center;
    gap: 40px; /* Mantém seu gap original */
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.25); /* Borda mais suave para o tema */
}

/* Garante que o texto possa quebrar a linha sem esmagar a imagem */
#modal-content .secao-texto h3,
#modal-content .secao-texto p {
    word-break: break-word; /* Quebra palavras muito longas */
}


/* --- Media Query para Telas Pequenas (Celulares) --- */
/* Quando a tela tiver 700px de largura ou menos, o layout muda. */
@media (max-width: 700px) {

    /* Faz com que a seção empilhe os itens verticalmente */
    #modal-content .secao-info {
        flex-direction: column;
        gap: 15px; /* Diminui o espaçamento para o layout vertical */
    }

    /* A imagem e o texto agora ocupam a largura total e são centralizados */
    #modal-content .secao-info .secao-imagem,
    #modal-content .secao-info .secao-texto {
        flex: 1 1 100%; /* Permite que cresçam e ocupem 100% da largura */
        width: 100%;
        text-align: center;
    }

    /* Garante que o texto dentro do secao-texto também fique centralizado */
    #modal-content .secao-info .secao-texto h3,
    #modal-content .secao-info .secao-texto h4,
    #modal-content .secao-info .secao-texto p {
        text-align: center;
    }

    /* Inverte a ordem apenas em telas grandes, nunca em telas pequenas */
    #modal-content .secao-info:nth-child(even) {
        flex-direction: column; /* Garante que a ordem não seja invertida no mobile */
    }
}

.logout-section {
    //margin-top: 25px;
    //padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: center;
}

.logout-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #e63946; /* Um vermelho para indicar uma ação de "saída" */
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.logout-button:hover {
    background-color: #d00000;
}

/* ========================================= */
/* CSS do Modal de Paywall                   */
/* ========================================= */

/* O fundo escuro que cobre a tela inteira */
#paywall-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s, visibility 0.3s;
}

/* Esconde o modal quando ele tem a classe .hidden */
#paywall-modal-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

/* A caixa branca central */
#paywall-modal-container {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px;
    position: relative;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    max-height: 85vh; /* O modal nunca será mais alto que 85% da altura da tela */
    overflow-y: auto; /* Adiciona uma barra de rolagem vertical SE o conteúdo for maior */
}

/* O conteúdo de texto dentro da caixa */
#paywall-content h2 {
    color: #1d3557;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.8em;
}

#paywall-content p {
    color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* O botão de "Assinar Agora" (Call to Action) */
.subscribe-button {
    display: inline-block;
    padding: 12px 25px;
    background-color: #457b9d; /* Um azul positivo, chamando para a ação */
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.2s, transform 0.2s;
}

.subscribe-button:hover {
    background-color: #1d3557;
    transform: translateY(-2px); /* Efeito de elevação */
}

/* O botão de fechar (X) */
#paywall-close-btn, #subscribe-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2.5em;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
}

#paywall-close-btn:hover, #subscribe-close-btn:hover {
    color: #333;
}

.form-group-honeypot {
    position: absolute;
    left: -5000px; /* Joga o campo para muito longe da tela */
}

/* style.css */

.logged-in-as {
    margin: 5px 0px 0px 5px;
    padding: 15px;
    background-color: #f8f9fa; /* Um fundo cinza claro para destacar */
    border-radius: 8px;
    text-align: center;
    font-size: 0.9em;
    color: #555;
    word-break: break-all; /* Garante que e-mails longos não quebrem o layout */
}

.logged-in-as strong {
    color: #1d3557; /* Cor principal para o e-mail */
}

/* ========================================= */
/* Botão e Modal de Assinatura               */
/* ========================================= */



/* Base do modal (pode reutilizar o CSS do paywall, mas duplicar garante independência) */
#subscribe-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s, visibility 0.3s;
}

#subscribe-modal-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

#subscribe-modal-container {
    background: #fff;
    padding: 25px 35px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 600px;
    position: relative;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    max-height: 85vh; /* O modal nunca será mais alto que 85% da altura da tela */
    overflow-y: auto; /* Adiciona uma barra de rolagem vertical SE o conteúdo for maior */
}

#subscribe-content h2 {
    color: #1d3557;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 2em;
}

#subscribe-content p {
    color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 25px;
    font-size: 1.1em;
}

/* Estilo da comparação de planos */
.plans-comparison {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    text-align: left;
    margin-bottom: 30px;
}

.plan-column h4 {
    color: #1d3557;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.advantages-list, .disadvantages-list {
    list-style-type: none;
    padding: 0;
}

.advantages-list li, .disadvantages-list li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
    color: #333;
}

/* Ícones de check e X */
.advantages-list li::before {
    content: '✔️';
    position: absolute;
    left: 0;
    color: #2a9d8f;
}

.disadvantages-list li::before {
    content: '❌';
    position: absolute;
    left: 0;
    color: #e63946;
}

/* Botão principal de Upgrade */
.upgrade-button {
    display: inline-block;
    padding: 15px 35px;
    background-color: #2a9d8f; /* Um verde de conversão */
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 10px;
    font-size: 1.3em;
    transition: background-color 0.2s, transform 0.2s;
}

.upgrade-button:hover {
    background-color: #217a6f;
    transform: scale(1.05);
}

/* style.css */
.map-buttons-container {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.map-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    font-size: 1.8em;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    line-height: 1;
    transition: all 0.2s ease-in-out;
}

.map-button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

#subscribe-btn {
    //background-color: #fca311;
    color: white;
}

#subscribe-btn:hover {
    background-color: #e85d04;
}

/* style.css */

.welcome-freemium-message {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.welcome-freemium-message h2 {
    color: #1d3557;
    margin-top: 0;
}

.welcome-freemium-message p {
    font-size: 1em;
    color: #4a4a4a;
    line-height: 1.6;
}

/* style.css */

/* Estilos para o conteúdo específico do modal de boas-vindas */
.welcome-content {
    text-align: center;
    padding: 10px;
}

.welcome-content h2 {
    color: #1d3557;
    margin-top: 0;
    margin-bottom: 15px;
}

.welcome-content p {
    color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 20px;
}

.subscribe-button-welcome {
    display: inline-block;
    padding: 12px 25px;
    background-color: #457b9d;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.2s, transform 0.2s;
}

.subscribe-button-welcome:hover {
    background-color: #1d3557;
    transform: translateY(-2px);
}

.addons-content {
    text-align: center;
    padding: 10px;
}
.addons-content h2 {
    color: #1d3557;
    margin-top: 0;
    margin-bottom: 15px;
}
.addons-content p {
    color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 20px;
}

#addons-map-btn {
    top: 130px; /* Ajuste este valor para a distância do topo desejada */
    right: 10px;
}

.addons-image {
    display: block; /* Essencial para que a margem automática funcione */
    width: 100%; /* Faz a imagem ser responsiva ao contêiner */
    max-width: 200px; /* Garante que a imagem nunca passe de 200px de largura */
    height: auto; /* Mantém a proporção da imagem */
    margin: 0 auto 20px auto; /* Centraliza a imagem horizontalmente e adiciona uma margem inferior de 20px */
    border-radius: 8px; /* Bordas arredondadas para um visual mais suave */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra sutil para destacar a imagem */
}

#instructions-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
}

#instructions-modal.hidden {
    display: none;
    opacity: 0;
}

/* Usamos seletores descendentes para estilizar o conteúdo APENAS deste modal */
#instructions-modal .modal-content {
background-color: #f9f9f9;
padding: 30px;
border-radius: 8px;
text-align: center;
width: 90%;
max-width: 320px; /* Mantendo a largura menor para foco nas instruções */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
position: relative; /* Para posicionar o botão de fechar 'X' */
max-height: 80vh;
overflow-y: auto;
}

/* Estilo para o botão de fechar 'X' (adicionando aqui também para consistência) */
#instructions-modal #instructions-close-x-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2em;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
}

#instructions-modal #instructions-close-x-btn:hover {
    color: #333;
}

#instructions-modal .modal-content h2 {
    color: #1d3557;
    margin-top: 0;
    margin-bottom: 15px;
}

#instructions-modal .modal-content p {
    margin-bottom: 10px;
    line-height: 1.5;
    color: #333;
}

#instructions-modal .modal-content ul {
    list-style: none;
    padding: 0;
    margin-bottom: 15px;
}

#instructions-modal .modal-content ul li {
    margin-bottom: 5px;
    color: #333;
}

#instructions-modal .modal-content button {
    background-color: #1d3557;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin-top: 15px; /* Aumentei um pouco a margem */
}

#instructions-modal .modal-content button:hover {
    background-color: #457b9d;
}

/* Estilo específico para a mensagem de boas-vindas dentro deste modal */
#instructions-modal .welcome-freemium-message {
margin-bottom: 20px;
padding: 15px;
background-color: #e9ecef;
border-radius: 5px;
color: #495057;
text-align: left; / Alinhar texto à esquerda para melhor leitura */
}

#instructions-modal .welcome-freemium-message h2 {
    color: #0056b3;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5em;
    text-align: center; /* Centralizar o título da mensagem */
}

#instructions-modal .welcome-freemium-message p {
    margin-bottom: 8px;
    font-size: 0.95em;
}


#instructions-modal .modal-content .instructions-grid {
display: block; /* Força a exibição em bloco */
}

#instructions-modal .modal-content .instruction-item {
    margin-bottom: 20px;
    text-align: left;
}

#instructions-modal .modal-content .instruction-item strong {
    display: block; /* Garante que o título fique em sua própria linha */
    margin-bottom: 5px;
    color: #212529;
}

/* ======================================================= */
/* CORREÇÃO PARA BUG DE RENDERIZAÇÃO DE IMAGEM NO iOS/SAFARI */
/* ======================================================= */

/* Aplica a correção a todas as imagens dentro dos modais */
#modal-content img,
#instructions-modal .modal-content img,
.addons-content img {
    /* Força a aceleração de hardware no WebKit (Safari) sem alterar a aparência */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}