/* Reset básico e configurações globais */
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

/* Definindo a fonte padrão para todo o corpo da página */
body {
   font-family: "Inter", sans-serif;
   background-color: #f3f4f6; /* Cor de fundo de fallback */
}

a {
   text-decoration: none;
}

/* Container principal que ocupa toda a tela */
.background-container {
   position: relative;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background-size: cover;
   background-position: center;
   padding: 1rem;
   /* Imagem de fundo padrão para MOBILE */
   background-image: url("../image/manhood-bg-mobile.webp");
}

/* Overlay escuro para melhorar a legibilidade */
.overlay {
   position: absolute;
   inset: 0;
   background-color: black;
   opacity: 0.6;
}

/* Card do Pop-up */
.popup-card {
   position: relative;
   background-color: rgba(255, 255, 255, 0.9);
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
   border-radius: 1rem; /* 16px */
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
   padding: 2rem; /* 32px */
   max-width: 24rem; /* 384px */
   width: 100%;
   margin: 0 1rem;
   text-align: center;
   z-index: 10;
}

/* Título principal */
.popup-card h1 {
   font-size: 1.5rem; /* 24px */
   font-weight: 700;
   color: #1f2937;
   margin-bottom: 1.5rem; /* 24px */
}

/* Container das bandeiras */
.flags-container {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 2rem; /* 32px */
}

/* Links das bandeiras */
.flag-link {
   text-decoration: none;
   margin: 0 auto;
} 

.flag-link img {
   width: 6rem; /* 96px */
   height: 4rem; /* 64px */
   object-fit: cover;
   border-radius: 0.5rem; /* 8px */
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -2px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;
   margin: 0 0.7rem;
}

.flag-link:hover img {
   transform: scale(1.1);
}

.flag-link p {
   margin-top: 0.5rem; /* 8px */
   font-size: 0.875rem; /* 14px */
   font-weight: 500;
   color: #374151;
}

/* Rodapé */
.page-footer {
   position: absolute;
   bottom: 1rem; /* 16px */
   left: 0;
   right: 0;
   z-index: 10;
   text-align: center;
   font-size: 0.75rem; /* 12px */
   color: rgba(255, 255, 255, 0.8);
   padding: 0 1rem;
}

.page-footer p {
   margin-bottom: 0.75rem; /* 12px */
}

.footer-links {
   display: flex;
   justify-content: center;
   gap: 1rem; /* 16px */
}

.footer-links a {
   color: inherit;
   text-decoration: none;
   transition: color 0.2s ease;
}

.footer-links a:hover {
   text-decoration: underline;
   color: white;
}

/* --- NOVIDADE AQUI --- */
/* Media Query para telas maiores (tablets e desktops) */
@media (min-width: 768px) {
   .background-container {
      /* Imagem de fundo para DESKTOP */
      background-image: url("../image/manhood-bg-pc.webp");
   }
}