@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  background: linear-gradient(to bottom right, #e6f9ff, #ccf2ff);
  color: #333;
}

.container {
  text-align: center;
  margin: 50px auto;
  width: 90%;
  max-width: 800px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* Estilo do loading */
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #555; /* Cor do texto */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10; /* Deve estar acima dos números */
  display: none; /* Ocultado por padrão */
}

.loading.visible {
  display: flex;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
  animation: spin 0.8s linear infinite;
}

.loading p {
  font-size: 1em;
  text-align: center;
  margin: 0;
}

/* Animação do spinner */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Certifique-se de que o contêiner do grid seja relativo */
#grid-numbers {
  position: relative;
  min-height: 200px; /* Garante espaço suficiente para exibir o loading */
}

h1 {
  font-family: 'Lobster', cursive;
  font-size: 3em;
  color: #007bff;
  margin-bottom: 20px;
}

p {
  font-size: 1.1em;
  margin: 10px 0;
  line-height: 1.6;
}

.promotion {
  padding: 20px;
  margin: 20px 0;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.promotion h2 {
  font-size: 1.8em;
  color: #856404;
  margin-bottom: 10px;
}

.promotion p {
  font-size: 1.2em;
  color: #6c757d;
  text-align: center;
  margin-bottom: 10px;
}

.promotion strong {
  color: #d39e00;
  font-size: 1.5em;
}

.qrcode {
  margin: 20px 0;
}

.qrcode canvas {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.info {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e3e5;
}

.info div {
  flex: 1;
  text-align: center;
  padding: 10px;
}

.info p {
  font-size: 1.2em;
  color: #495057;
  margin-bottom: 8px;
  font-weight: bold;
}

.info strong {
  color: #007bff;
  font-size: 1.8em;
  display: block;
  margin-top: 5px;
  font-weight: 700;
  white-space: nowrap;
}

.dialog {
  display: none; /* Inicialmente escondido */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(
    0,
    0,
    0,
    0.6
  ); /* Fundo semi-transparente com mais opacidade */
  backdrop-filter: blur(5px); /* Suaviza o fundo com um desfoque */
}

.dialog-content {
  background-color: #fff;
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centraliza o diálogo na tela */
  padding: 30px;
  border-radius: 15px; /* Bordas mais arredondadas */
  width: 80%;
  height: 80%;
  max-width: 500px; /* Largura máxima do diálogo */
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.15); /* Sombra mais suave e maior */
  animation: fadeIn 0.4s ease-in-out; /* Animação de fade mais suave */
}

#dialogNumbers {
  background-color: #f1f1f1; /* Cor de fundo clara para destaque */
  color: #333; /* Cor do texto */
  font-size: 1.3em; /* Tamanho do texto ligeiramente maior */
  font-weight: bold; /* Texto em negrito para dar mais ênfase */
  border: 2px solid #007bff; /* Borda azul para contrastar com o fundo */
  border-radius: 10px; /* Bordas arredondadas */
  padding: 15px; /* Espaçamento interno para tornar o conteúdo mais legível */
  margin-top: 20px; /* Espaçamento superior */
  text-align: center; /* Centraliza o texto */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave para destacar */
  word-wrap: break-word; /* Garante que o texto longo se quebre adequadamente */
  white-space: normal; /* Evita que o texto saia da área */
  line-height: 1.6; /* Maior espaçamento entre as linhas */
  background-image: linear-gradient(
    to right,
    #007bff,
    #0056b3
  ); /* Degradê de azul */
  color: white; /* Cor do texto branca para contraste com o fundo */
  text-transform: uppercase; /* Transforma o texto em maiúsculas */
}

#dialogNumbers span {
  display: block;
  margin-top: 8px;
  font-size: 1.1em; /* Ajusta o tamanho do texto dos números */
  color: #f1f1f1; /* Cor mais clara para os números */
}

.dialog-content h2 {
  color: #007bff; /* Cor do título */
  margin-bottom: 15px;
  font-size: 1.5em;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.dialog-content ol {
  font-size: 1.1em;
  color: #444;
  line-height: 1.8;
  list-style-type: none;
}

.dialog-content ol li {
  font-weight: 500;
  color: #555;
  position: relative;
  padding-left: 30px; /* Aumenta o espaço à esquerda para o ícone */
  line-height: 1.6; /* Aumenta o espaçamento entre as linhas para melhor legibilidade */
}

.dialog-content ol li::before {
  content: '✔';
  position: absolute;
  left: 0;
  top: 0;
  color: #28a745; /* Cor verde para a marcação */
  font-size: 1.5em;
  transform: translateY(0); /* Remove qualquer deslocamento vertical */
}

.qrcode {
  margin: 20px 0;
  text-align: center;
}

#copyPixButton {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 12px 20px;
  text-align: center;
  font-size: 1.2em;
  border-radius: 30px; /* Bordas mais arredondadas para o botão */
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s, transform 0.2s;
}

#copyPixButton:hover {
  background-color: #0056b3; /* Cor ao passar o mouse */
  transform: scale(1.05); /* Leve aumento ao passar o mouse */
}

#copyPixButton:active {
  transform: scale(1); /* Desfaz o aumento ao clicar */
}

.pix-key {
  font-size: 1.2em;
  color: #333;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}

#openFormButton {
  background-color: #01c501;
  color: white;
  border: none;
  padding: 12px 20px;
  text-align: center;
  font-size: 1.2em;
  border-radius: 30px; /* Bordas mais arredondadas para o botão */
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s, transform 0.2s;
  margin-top: 5px;
}

#openFormButton:hover {
  background-color: #00a400; /* Cor ao passar o mouse */
  transform: scale(1.05); /* Leve aumento ao passar o mouse */
}

#openFormButton:active {
  transform: scale(1); /* Desfaz o aumento ao clicar */
}

.close {
  color: #aaa;
  font-size: 30px;
  font-weight: bold;
  position: absolute;
  top: 15px;
  right: 20px;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* Animação para o diálogo */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: 20px 0;
}

.grid .ticket {
  display: grid;
  place-items: center;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  padding: 5px;
  gap: 5px;
  background-color: #ffcc80;
  border: 2px dashed #ffab40;
  border-radius: 10px;
  font-weight: bold;
  color: #414141;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease, transform 0.2s;
  max-width: 13%;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.ticket.disabled {
  border: 2px dashed #ccc;
}

.ticket .ticketUnitario {
  font-size: 0.8em;
  padding: 5px;
  border-radius: 5px;
  background-color: #ffab40;
}

.grid .ticket:hover:not(.disabled) {
  background-color: #ffab40;
  color: white;
  transform: translateY(-5px);
}

.grid .ticket:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

.grid .tooltip {
  visibility: hidden;
  width: 120px;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Ajusta a posição do tooltip */
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.grid .tooltip::after {
  content: '';
  position: absolute;
  top: 100%; /* Ponta do tooltip abaixo da caixa */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.grid .disabled {
  background-color: #ccc;
  color: #777;
  cursor: not-allowed;
  transform: none;
}

.contact-info {
  margin-top: 20px;
  font-size: 1.1em;
}

.contact-info a {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
}

.contact-info a:hover {
  color: #1e88e5;
  text-decoration: underline;
}

.description {
  padding: 15px;
  margin: 20px 0;
  background-color: #f8f9fa; /* Fundo claro, discreto */
  border: 1px solid #d1d3d4; /* Borda suave e discreta */
  border-radius: 8px; /* Cantos arredondados */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra leve */
  font-size: 1.1em;
  color: #495057; /* Texto em um tom suave */
  font-family: 'Roboto', sans-serif;
  text-align: center;
}

.description p {
  margin: 0; /* Remove a margem do parágrafo */
  line-height: 1.5; /* Maior espaçamento entre as linhas */
}

.description strong {
  font-weight: bold;
  color: #007bff; /* Destaque para palavras importantes */
}

footer {
  margin-top: 30px;
  font-size: 0.9em;
  color: #777;
}

.gallery {
  --s: 220px; /* controla o tamanho das imagens */
  --g: 25px; /* controla o espaço entre as imagens */
  --f: 1.5; /* controla o fator de escala (zoom) */

  display: grid;
  gap: var(--g);
  width: 100%; /* garante que a galeria ocupe toda a largura disponível */
  max-width: calc(
    3 * var(--s) + 2 * var(--g)
  ); /* largura máxima com 3 imagens e o gap */
  aspect-ratio: 1; /* mantém a proporção das imagens */
  grid-template-columns: repeat(3, auto); /* sempre 3 colunas */
}

.gallery > img {
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  max-width: 100%;
  object-fit: cover;
  cursor: pointer;
  filter: grayscale(80%);
  transition: 0.35s linear; /* animação de transição suave */
}

.gallery img:hover {
  filter: grayscale(0);
  width: calc(var(--s) * var(--f)); /* aumenta o tamanho da imagem no hover */
}

@media (max-width: 1280px) {
  .gallery {
    --s: 150px;
    --g: 15px;
    --f: 1;

    gap: var(--g);
    max-width: calc(2 * var(--s) + var(--g));
  }

  .gallery img:hover {
    filter: grayscale(0);
    width: calc(var(--s) * 1);
  }

  .grid .ticket {
    max-width: 50%;
    font-size: 1em;
    padding: 3px;
  }

  /* diminuir o conteudo em dialog para ocupar menos espaço vertical */
  .dialog-content canvas {
    /* esconder */
    display: none;
  }

  .dialog-content {
    font-size: 3.5vw;
    padding: 15px;
  }

  .dialog-content * {
    margin: auto;
  }

  .dialog-content ol {
    font-size: 1em;
  }

  #dialogNumbers {
    margin-top: 5px;
    padding: 5px;
    width: 100%;
  }

  div.info {
    padding: 5px;
  }

  div.info p {
    font-size: 4.5vw;
  }

  div.info strong {
    font-size: 6.5vw;
  }
}
/* Estilo do botão para abrir o menu de compartilhamento */
.open-share-menu-button {
  background-color: #007bff;
  color: white;
  border-radius: 50%;
  padding: 15px;
  font-size: 1.2em;
  position: fixed;
  bottom: 20px;
  right: 20px;
  border: none;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
}

.open-share-menu-button:hover {
  background-color: #0056b3;
}

/* Menu de Compartilhamento */
.share-menu {
  position: fixed;
  top: 0;
  right: -300px; /* Começa escondido à direita */
  width: 300px;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: right 0.3s ease-in-out;
  z-index: 999;
}

.share-menu.open {
  right: 0; /* Move o menu para a posição visível */
}

/* Estilos para o conteúdo do menu de compartilhamento */
.social-share {
  text-align: left;
}

.social-share h3 {
  font-size: 1.8em;
  color: #007bff;
  margin-bottom: 10px;
}

.social-share p {
  font-size: 1.1em;
  color: #495057;
  margin-bottom: 20px;
}

.social-buttons {
  display: flex;
  flex-direction: column; /* Empilha os botões verticalmente */
  gap: 15px;
}

.social-button {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 25px;
  font-size: 1.1em;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-button:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

.social-button i {
  margin-right: 10px;
}

.social-button.facebook {
  background-color: #3b5998;
}

.social-button.facebook:hover {
  background-color: #2d4373;
}

.social-button.x {
  background-color: #000000; /* Cor preta característica do X */
}

.social-button.x:hover {
  background-color: #333333; /* Cor ao passar o mouse */
}

.social-button.whatsapp {
  background-color: #25d366;
}

.social-button.whatsapp:hover {
  background-color: #128c7e;
}

.social-button.linkedin {
  background-color: #0077b5;
}

.social-button.linkedin:hover {
  background-color: #005582;
}