@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap");


:root {
  --white: #ffffff;
  --grey: #d2d1d6; 
  --light-bluish: hsl(245, 15%, 58%); 
  --mid-bluish: hsl(245, 19%, 35%); 
  --dark-bluish: hsl(248, 70%, 10%); 

  --orange-500: hsl(7, 88%, 67%); 
  --orange-700: hsl(7, 71%, 60%); 
  --text-gradient: hsl(7, 86%, 67%) to hsl(0, 0%, 100%); 

  --font-20: 20px; 
}


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


body {
  min-height: 100vh; 
  position: relative;
  font-family: "Inconsolata", monospace; 
  background-color: var(--dark-bluish); 
  color: var(--white); 
  overflow-x: hidden; 
}

.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 10px;
  overflow: hidden;
}


.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(./assets/images/background-desktop.png) center/cover no-repeat;
  z-index: -2; /* Coloca atrás de outros elementos */
}


.container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("./assets/images/pattern-lines.svg");
  background-repeat: repeat;
  background-size: auto;
  opacity: 0.9; 
  z-index: -1; 
}


.pattern-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background-image: url("./assets/images/pattern-squiggly-line-bottom-desktop.svg");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: contain;
  z-index: 0; 
}


.pattern-top {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  height: 104px;
  background-image: url("./assets/images/pattern-squiggly-line-top.svg");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  z-index: 0; 
}


.logo img {
  width: 100%;
  max-width: 200px;
  height: auto;
}

/* Formulário por inteiro*/
.conf-form {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  width: 100%;
  max-width: 340px;
  margin-top: 10px;
  z-index: 1; 
}

/* Título do formulário */
.form-title {
  width: 100%;
  font-size: clamp(20px, 5vw, 27px); 
  margin-bottom: 5px;
}

/* Descrição do formulário */
.form-description {
  width: 100%;
  color: var(--grey);
  font-size: clamp(11px, 3vw, 12px); 
  line-height: 1.4;
  margin-bottom: 5px;
}

/* Área de inputs do formulário */
.form-inputs {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;
  margin: 5px 0;
}

/* Estilo para a área de upload de arquivos */
.upload-box {
  width: 100%;
  height: auto;
  border-radius: 10px;
  background-color: #d2d1d61a; 
  color: var(--grey);
  backdrop-filter: blur(20px); 
  border: 1px var(--grey) dashed; /* Borda tracejada */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 20px 10px;
}

/* Estilo quando um arquivo é arrastado sobre a área de upload */
.drag-over {
  outline: 2px double var(--orange-500); /* Contorno laranja */
}

/* Esconde o input de arquivo padrão */
#file {
  all: unset;
  opacity: 0;
  display: none;
}

/* Estilo para o botão de upload */
.upload-btn {
  background-color: #d2d1d61a; 
  border-radius: 10px;
  border: 1px solid var(--mid-bluish);
  outline: none;
  width: 50px;
  height: 50px;
  margin: 20px 0;
  cursor: pointer;
}

/* Estilo para a imagem dentro do botão de upload */
.upload-btn img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/* Texto de instrução para upload */
.upload-box p {
  font-size: 14px;
  margin-bottom: 20px;
  color: var(--grey);
}

/* Botões para remover ou alterar a imagem */
.avatar-btn {
  display: none; 
  margin: 10px 0;
}

/* Estilo para os botões de avatar */
.avatar-button {
  background-color: #d2d1d61a; 
  color: var(--grey);
  border: none;
  outline: none;
  padding: 5px 10px;
  margin: 10px;
  cursor: pointer;
}

/* Aviso de erro para arquivos muito grandes */
.upload-warn {
  display: none; 
  font-size: 13px;
  color: var(--orange-700); 
  margin-top: 7px;
}


.upload-warn img {
  padding-right: 10px;
}

/* Títulos dos campos de input */
.form-inputs h2 {
  font-size: 16px;
  color: var(--grey);
  margin: 15px 0;
}

/* Estilo para os campos de input */
.form-inputs input {
  font-family: inherit;
  width: 100%;
  height: 45px;
  border-radius: 10px;
  background-color: #d2d1d61a; 
  border: 1px groove var(--grey);
  backdrop-filter: blur(20px); 
  margin-bottom: 10px;
  color: var(--grey);
  font-size: 15px;
  padding-left: 13px;
}

/* Estilo para o placeholder dos inputs */
.form-inputs input::placeholder {
  color: var(--grey);
  font-size: 13px;
}

/* Estilo para o botão de enviar */
.submit-btn {
  width: 100%;
  font-family: "Inconsolata", monospace;
  background-color: var(--orange-500); 
  color: var(--dark-bluish); 
  font-size: 17px;
  font-weight: 800;
  padding: 13px;
  border: none;
  outline: none;
  border-radius: 10px;
  margin: 15px 0;
  cursor: pointer;
  transition: all 0.4s; 
  z-index: 1; 
}


.submit-btn:hover {
  background-color: var(--orange-700); 
}

/* Classe para avisos */
.warn-red {
  color: var(--orange-500); 
}

/* Aviso de e-mail inválido */
.email-warn {
  display: none; 
  font-size: 13px;
  color: var(--orange-700); 
  margin-top: 7px;
}

/* Estilo para o ticket gerado */
.conf-ticket {
  display: none; 
  flex-direction: column;
  text-align: center;
  align-items: center;
  width: 100%;
  max-width: 330px;
  margin-top: 40px;
  z-index: 1; 
}

/* Título do ticket */
.ticket-title {
  width: 90%;
}

.ticket-title h1 {
  font-size: clamp(20px, 5vw, 25px); 
  margin-bottom: 20px;
}

/* Gradiente de texto no título do ticket */
.ticket-title h1 span {
  background: #f37362;
  background: linear-gradient(to right, #f37362 0%, #ffffff 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Descrição do ticket */
.ticket-description {
  color: var(--grey);
  margin-bottom: 20px;
  font-size: clamp(14px, 4vw, 16px); 
  line-height: 1.4;
}

/* Destaque no e-mail na descrição */
.ticket-description span {
  color: var(--orange-500); 
}

/* Estilo para o cartão do ticket */
.card {
  position: relative;
  width: 95%;
  height: auto;
  display: flex;
  align-items: center;
  margin: 50px auto;
}

/* Imagem de fundo do cartão */
.bg-card {
  position: absolute;
  width: 100%;
  object-fit: cover;
}

/* Detalhes do cartão */
.card-details {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

/* Endereço no cartão */
.card-address {
  display: flex;
  align-items: flex-start;
}

.card-address img {
  width: 30px;
  height: auto;
}

/* Texto do endereço */
.card-address-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-left: 10px;
}

.card-address-text h2 {
  font-size: clamp(14px, 4vw, 16px); 
}

.card-address-text p {
  color: var(--grey);
  font-size: clamp(10px, 3vw, 12px); 
  margin-top: 6px;
}

/* Informações do usuário no cartão */
.card-user {
  display: flex;
  margin-top: 30px;
}

.card-user img {
  width: 45px;
  height: 45px;
  border-radius: 10px;
}

/* Detalhes do usuário */
.card-user-info {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
}

.card-user-info h2 {
  font-size: clamp(14px, 4vw, 16px); 
  text-align: left;
}

/* Link do GitHub */
.card-github-link {
  display: flex;
  align-items: center;
  margin-top: 6px;
}

.card-github-link img {
  width: 20px;
  height: 20px;
}

.card-github-link a {
  color: var(--grey);
  font-size: clamp(11px, 3vw, 13px); 
  transform: translateX(5px);
  text-decoration: none;
}

/* ID gerado no cartão */
.card-id {
  position: absolute;
  right: 20px;
  top: 50px;
}

.id-generated {
  writing-mode: vertical-lr; /* Texto na vertical */
  color: var(--grey);
  font-size: clamp(12px, 3vw, 14px); 
}


/* Responsividade para dispositivos móveis */
@media (max-width: 480px) {
  .container {
    padding: 15px 10px;
  }

  .pattern-bottom {
    height: 100px;
  }

  .pattern-top {
    height: 52px;
    top: 40px;
  }

  .card {
    margin: 30px auto;
  }

  .card-details {
    padding: 15px;
  }
}


/* Ajustes para telas maiores */
@media (min-width: 420px) {
  .conf-form,
  .conf-ticket {
    max-width: 400px;
  }
}

@media (min-width: 520px) {
  .conf-form,
  .conf-ticket {
    max-width: 500px;
  }
}