:root {
  --Neutral0: hsl(0, 0%, 100%);
  --Neutral300: hsl(252, 6%, 83%);
  --Neutral500: hsl(245, 15%, 58%);
  --Neutral700: hsl(245, 19%, 35%);
  --Neutral900: hsl(248, 70%, 10%);

  --Orange500: hsl(7, 88%, 67%);
  --Orange700: hsl(7, 71%, 60%);

  --purple-gradient-start: #6a0572;
  --purple-gradient-end: #c4a8d1;
  --orange-gradient-start: #ff6b6b;
  --orange-gradient-middle: #ffa07a;
  --orange-gradient-end: #ffda77;
}

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

body {
    min-height: 100vh;
    width: 100%;
    /* Estilos de fundo para desktop */
    background-image: url('assets/images/background-desktop.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: #2a0044;
      
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;
    overflow-x: hidden; /* Garante que não haja rolagem horizontal */
}

.background-patterns{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.background-patterns img{
    position: absolute;
    pointer-events: none;
    width: auto;
    height: auto;
}
.pattern-bottom{
    bottom: -11px;
    left: -100px;
    width: 800px;
    height: auto;
    transform: rotate(0deg);
    opacity: 0.7;
}
.pattern-top{
  right:-13px;
  top: 80px;
}

.header {
  padding: 10px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.main{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-width: 600px;
    padding: 20px;
    width: 90%; /* Ajusta a largura para ser mais flexível */
}

.main__title {
    padding: 10px;
    text-align: center;
}

.main__heading:hover{
    transition: 0.6s;
    color: var(--Orange500);
}

.main__subtitle {
    padding: 10px;
    font-weight: lighter;
    font-variant: small-caps;
}

.form__item {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    margin-bottom: 1rem; /* Adiciona espaço entre os itens do formulário */
}

.form__label {
    color: var(--Neutral300);
    margin-bottom: 8px; /* Ajusta a margem */
    margin-left: 10px;
}

.form__input{
    color: white;
    border-radius: 20px;
    padding: 14px;
    border: 1px solid hsla(252, 6%, 83%, 0.469);
    background-color: hsla(245, 19%, 35%, 0.292);
}

.form__input:hover{
    transition: 0.4s;
    background-color: #0000004a;
}

.form__button {
  padding: 14px;
  border-radius: 20px;
  border: none;
  background-color: var(--Orange700);
  margin-top: 20px;
  font-size: 1rem;
  font-weight: bold;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.form__button:hover{
  background-color: var(--orange-gradient-end);
  color: var(--Neutral900);
}


.form__upload-box {
  /* Removi width: 150px; height: 150px; para permitir que o flexbox controle */
  border: 2px dashed #888;
  border-radius: 8px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background-color: #1e1e2f8e;
  cursor: pointer;
  transition: border 0.3s;
  margin: 0 auto 10px; /* Centraliza e adiciona margem inferior */
  width: 100%; /* Garante que ocupe a largura total disponível */
  min-height: 150px; /* Define uma altura mínima para manter o layout */
  color: white;
  
  &:hover {
    border-color: #ff5e5e;
  }
}
.form__file-input {
    display: none;
}

.form__upload-icon {
  width: 70px;
  border-radius: 50%;         /* Deixa a imagem redonda */
  object-fit: cover;         /* Garante que a imagem se encaixe bem */
  border: 2px solid white;   /* Um contorno bonito */
}
.ticket__avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  margin-bottom: 10px;
}

.form__upload-box > p{
    margin: 10px;
}

.form__upload-buttons{
  display: flex;
  flex-direction: row; /* Padrão para desktop */
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.form__upload-buttons button{
  padding: 8px 16px;
  background-color: #ff5e5e;
  border: none;
  border-radius: 20px;
  color: white;
  font-weight:bold;
  cursor: pointer;
  transition: background 0.3s;
}

.form__upload-buttons button:hover:not(:disabled){
  background-color: #ff3e3e;
}

.form__upload-buttons button:disabled{
  background-color: #888;
  cursor: not-allowed;
}

/* Media Query para telas menores (celulares) */
@media (max-width: 640px) {
  body{
    /* Ajustes para a imagem de fundo no mobile */
    background-image: url('assets/images/background-mobile.png');
    background-position: top center;
    background-size: cover; /* Garante que a imagem cubra a área sem distorcer */
    background-attachment: scroll; /* Para evitar problemas com backgrounds fixos em mobile */
    overflow-x: hidden; /* Reforça que não haverá rolagem horizontal */
  }

  .main {
    padding: 15px;
    width: 100%; /* Garante que o main ocupe 100% da largura no mobile */
    max-width: none; /* Remove o max-width para não restringir a largura em telas pequenas */
  }

  /* Oculta os padrões decorativos para mobile */
  .pattern-bottom, .pattern-top {
    display: none !important; /* Use !important para garantir que sobrescreva qualquer outro estilo */
  }

  .form__upload-buttons {
    flex-direction: column; /* Empilha os botões verticalmente */
    align-items: center;
  }

  .form__upload-buttons button {
    width: 80%; /* Faz os botões ocuparem mais espaço */
  }
}