/* --- Reset Básico e Configurações Globais --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* montserrat-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/montserrat-v31-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/montserrat-v31-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/montserrat-v31-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    background-color: #e5f9f9;
    color: #333;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Cabeçalho --- */
.site-header {
    background-color: #e5ffff;
    padding: 20px 0;
}

.site-header .container {
    text-align: center;
}

.logo {
    max-width: 120px; /* Tamanho da logo */
    color: #37606f; /* Adicione esta linha para mudar a cor */
}

/* --- Conteúdo Principal (Layout Flex) --- */
.main-body-container {
    padding-top: 40px;
    padding-bottom: 40px;
}

.main-content {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

/* --- Coluna da Esquerda (INFORMAÇÕES) --- */
.info-column {
    flex: 1;
    min-width: 300px;
}

h1 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 30px;
    color: #2c3e50;
    text-align: center;
}

/* --- Botões de País --- */

/* Esta regra estiliza o CONTAINER que segura os três botões */
.button-container {
    display: flex;                  /* Ativa o modo de alinhamento "Flexbox", que facilita a organização dos itens. */
    flex-direction: column;         /* Organiza os botões em formato de coluna (um em cima do outro). */
    gap: 18px;                      /* Cria um espaço de 15 pixels ENTRE cada um dos botões. */
    width: 320px;                   /* Define uma largura fixa de 320 pixels para este container. */
    max-width: 100%;                /* Garante que o container não ultrapasse 100% da largura da tela (importante para celulares). */
    
    /* A MÁGICA PARA CENTRALIZAR O BLOCO DE BOTÕES ACONTECE AQUI */
    margin-left: auto;              /* Com a margem esquerda automática... */
    margin-right: auto;             /* ...e a margem direita automática, o navegador empurra o container para o centro. */
}

/* Esta regra estiliza CADA BOTÃO individualmente */
.country-button {
    display: flex;                  /* Ativa o Flexbox para o conteúdo DENTRO do botão (bandeira e texto). */
    align-items: center;            /* Alinha o conteúdo (bandeira e texto) verticalmente ao centro. */
    justify-content: center;        /* Alinha o conteúdo (bandeira e texto) horizontalmente ao centro. */
    background-color: #196F3D;    /* cor do site oficial: #00C1B6    Define a cor de fundo do botão para um tom de verde. */
    color: white;                   /* Define a cor do texto para branco. */
    text-decoration: none;          /* Remove o sublinhado padrão que os links (tags <a>) têm. */
    padding: 15px 20px;             /* Cria o espaçamento interno: 12px em cima/embaixo e 20px nas laterais. */
    border-radius: 8px;             /* Arredonda os cantos do botão em 8 pixels. */
    font-size: 18px;                /* Define o tamanho da fonte do texto. */
    font-weight: 600;               /* Define a "grossura" da fonte (600 = semi-negrito). */
    transition: all 0.3s ease;      /* Cria uma animação suave de 0.3s quando a cor de fundo muda.  "transition: background-color 0.3s ease;"    */
    border: 2px solid #27ae60;      /* #27ae60   Cria uma borda sólida de 2 pixels de espessura com a mesma cor do fundo.       "border: 2px solid #2ecc71;"   */
}

/* Esta regra define o que acontece quando o MOUSE PASSA POR CIMA do botão */
.country-button:hover {
    background-color: #2ecc71;      /* Muda a cor de fundo para um verde um pouco mais claro. */
    border-color: #2ecc71;          /* Muda a cor da borda para acompanhar a nova cor de fundo. */
}

.flag-icon {
    width: 30px;
    margin-right: 15px; /* Espaço entre a bandeira e o texto */
    border: 1px solid rgba(0,0,0,0.1);
}

/* --- Imagem do Produto --- */
.image-column {
    flex: 1;
    min-width: 300px;
}

.product-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* --- Seção "Mehr erfahren" --- */
.expandable-info {
    margin-top: 40px;
    background-color: #e5ffff;
    border: 1px solid #cceeee;
    border-radius: 5px;
    padding: 5px 20px;
}

summary {
    cursor: pointer;
    font-weight: normal;
    color: #555;
    padding: 10px 0;
    font-size: 14px;
}

summary::-webkit-details-marker {
  display: none;
}

.details-content {
    padding: 15px 0;
    color: #555;
    border-top: 1px solid #cceeee;
    font-size: 14px;
}

.details-content p {
    margin-bottom: 1em;
}

/* --- Rodapé --- */
.site-footer {
    background-color: #000000;
    color: #ccc;
    padding: 40px 0 20px;
    font-size: 14px;
    font-weight: 500;
}

.site-footer .container {
    text-align: center;
}

.footer-links {
    margin-bottom: 20px;
}

.footer-links a {
    color: #ffffff;
    text-decoration: underline;
    margin: 0 10px;
}

.footer-links a:hover {
    text-decoration: none;
}

.disclaimer {
    margin-bottom: 20px;
    font-size: 12px;
    color: #aaa;
}

.copyright {
    color: #aaa;
}

/* --- Responsividade para Dispositivos Móveis --- */

/* --- AJUSTES PARA OTIMIZAÇÃO EM TELAS DE CELULAR --- */
@media (max-width: 768px) {

    /* 1. Diminui a altura da barra do logo */
    .site-header {
        padding: 10px 0;
    }

    /* Diminui o tamanho da logo no celular */
    .logo {
        max-width: 120px; 
    }

    /* 2. Deixa o container principal mais "colado" no topo */
    .main-body-container {
        padding-top: 20px;
    }

    /* Diminui o espaço e INVERTE A ORDEM entre a imagem e o texto */
    .main-content {
        gap: 25px;
        flex-direction: column-reverse; /* <<-- ESTA É A LINHA QUE FALTAVA! */
    }
    
    /* Diminui o tamanho da imagem */
    .image-column {
        width: 95%;
    }

    /* 3. Reduz o tamanho e os espaçamentos do título */
    h1 {
        font-size: 24px;
        line-height: 1.3;
        margin-bottom: 25px;
    }

    /* 4. Diminui o espaço entre os botões */
    .button-container {
        gap: 18px;
    }

}