/* estilo geral do projeto */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* define a fonte do site */
    background-color: #111; /* fundo preto */
    color: #fff; /* texto branco */
    margin: 0;
    padding: 0;
    display: flex; /* usa flexbox para centralizar o conteúdo */
    justify-content: center; /* centraliza horizontalmente */
    align-items: center; /* centraliza verticalmente */
    min-height: 100vh; /* garante que o corpo ocupe toda a altura da tela */
    box-sizing: border-box; /* inclui a borda e o padding no tamanho total do elemento */
}

/* Container */
.container {
    background: #111; /* fundo escuro para o container */
    padding: 30px; /* espaçamento interno */
    border-radius: 12px; /* bordas arredondadas */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* sombra suave ao redor do container */
    width: 100%;
    max-width: 480px; /* limite de largura */
    transition: all 0.3s ease; /* animação suave para mudanças */
}

h1 {
    font-size: 2em; /* tamanho maior para o título principal */
    margin-bottom: 30px; /* espaçamento abaixo do título */
    color: #FFD700; /* cor dourada */
    text-align: center; /* centraliza o título */
}

h2 {
    font-size: 1.4em; /* tamanho um pouco menor que o h1 */
    color: #FFD700; /* cor dourada */
    margin-bottom: 15px; /* espaçamento abaixo do h2 */
    text-align: center; /* centraliza o título */
}

/* estilo do formulário */
.form-group {
    margin-bottom: 20px; /* espaço entre os grupos de formulário */
    display: flex;
    flex-direction: column; /* organiza os elementos na vertical */
    align-items: flex-start; /* alinha os elementos à esquerda */
}

label {
    margin-bottom: 8px; /* espaço abaixo do label */
    font-weight: bold; /* negrito para o label */
    font-size: 1.1em; /* tamanho maior para o label */
    color: #fff; /* texto branco */
}

input[type="text"], input[type="email"], input[type="file"] {
    width: 90%; /* largura de 90% para os campos de input */
    padding: 12px; /* espaçamento interno */
    margin-top: 5px; /* espaço acima do campo */
    font-size: 1em; /* tamanho de fonte normal */
    background-color: #333; /* fundo escuro para os campos */
    border: 2px solid #FFD700; /* borda dourada */
    border-radius: 8px; /* bordas arredondadas */
    color: #fff; /* texto branco dentro dos campos */
    transition: all 0.3s ease; /* animação suave ao focar */
}

input[type="text"]::placeholder, input[type="email"]::placeholder {
    color: #888; /* cor do texto de placeholder em cinza */
}

/* Efeito no Input */
input[type="text"]:focus, input[type="email"]:focus {
    border-color: #ff8a42; /* borda laranja clara ao focar */
    background-color: #444; /* fundo um pouco mais claro ao focar */
}

/* Upload de Avatar */
.upload-area {
    border: 2px dashed #FFD700; /* borda pontilhada dourada */
    padding: 30px; /* espaçamento interno */
    text-align: center; /* centraliza o conteúdo */
    cursor: pointer; /* muda o cursor para indicar que é clicável */
    background-color: #222; /* fundo escuro */
    border-radius: 10px; /* bordas arredondadas */
    position: relative; /* para posicionar elementos dentro */
    margin-bottom: 20px; /* espaço abaixo da área de upload */
    transition: all 0.3s ease; /* animação suave */
}

.upload-area:hover {
    background-color: #333; /* muda o fundo quando o mouse passa por cima */
}

.file-icon {
    width: 60px; /* tamanho do ícone */
    height: 60px;
    margin-bottom: 15px; /* espaço abaixo do ícone */
}

.hint {
    font-size: 1em; /* tamanho de fonte normal */
    color: #bbb; /* cor do texto em cinza */
}

.avatar-preview {
    margin-top: 15px; /* espaço acima da pré-visualização */
    text-align: center; /* centraliza a imagem */
}

.avatar-preview img {
    max-width: 120px; /* largura máxima da imagem */
    border-radius: 50%; /* bordas arredondadas (circular) */
    border: 2px solid #FFD700; /* borda dourada ao redor da imagem */
    margin-left: 150px;
}

/* Botões */
button {
    width: 95%; /* largura de 95% para o botão */
    padding: 15px; /* espaçamento interno */
    background-color: #FFD700; /* fundo dourado */
    color: #111; /* texto preto */
    border: none; /* sem borda */
    border-radius: 10px; /* bordas arredondadas */
    cursor: pointer; /* indica que é clicável */
    font-size: 1.1em; /* tamanho de fonte maior */
    transition: background-color 0.3s ease; /* animação suave ao passar o mouse */
    margin-top: 20px; /* espaço acima do botão */
}

button:hover {
    background-color: #ff8a42; /* fundo laranja suave ao passar o mouse */
}

/* Erro */
.error-message {
    color: #ff0000; /* texto vermelho */
    background-color: #ffeb3b; /* fundo amarelo */
    padding: 8px; /* espaçamento interno */
    border-radius: 8px; /* bordas arredondadas */
    font-size: 1em; /* tamanho de fonte normal */
    margin-top: 10px; /* espaço acima da mensagem de erro */
    display: none; /* inicialmente escondida */
}

/* Estilo do Ticket */
.ticket-container {
    display: flex;
    flex-direction: column; /* organiza os elementos na vertical */
    justify-content: center; /* centraliza verticalmente */
    align-items: center; /* centraliza horizontalmente */
    background-color: #222; /* fundo escuro */
    border-radius: 12px; /* bordas arredondadas */
    padding: 25px; /* espaçamento interno */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* sombra suave */
    width: 100%;
    max-width: 480px; /* largura máxima */
    color: #fff; /* texto branco */
    margin: 0; /* sem margem externa */
}

.ticket-header h2 {
    font-size: 1.8em; /* tamanho maior para o título do ticket */
    color: #FFD700; /* cor dourada */
    margin-bottom: 10px; /* espaço abaixo do título */
}

.event-date {
    font-size: 1.2em; /* tamanho de fonte médio */
    color: #aaa; /* cor cinza claro */
}

/* Estilo da Moldura do Ticket */
.ticket-frame {
    background-color: #333; /* fundo escuro da moldura */
    padding: 25px; /* espaçamento interno */
    border: 5px solid #FFD700; /* borda dourada */
    border-radius: 15px; /* bordas arredondadas */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* sombra suave */
    display: flex;
    flex-direction: column; /* organiza os elementos na vertical */
    justify-content: center; /* centraliza o conteúdo */
    align-items: center; /* centraliza horizontalmente */
    width: 100%;
    text-align: center; /* centraliza o texto */
}

.ticket-content img {
    max-width: 120px; /* largura máxima da imagem */
    border-radius: 50%; /* bordas arredondadas para a imagem */
    border: 4px solid #FFD700; /* borda dourada ao redor da imagem */
    margin-top: 20px; /* espaço acima da imagem */
    margin-bottom: 20px; /* espaço abaixo da imagem */
}

/* Informações do Usuário */
.user-info {
    font-size: 1.2em; /* tamanho médio para as informações do usuário */
    color: #fff; /* texto branco */
}

.user-info p {
    margin: 10px 0; /* espaço entre as informações do usuário */
}

/* Responsividade */
@media (max-width: 480px) {
    .ticket-container {
        padding: 15px; /* diminui o padding para telas menores */
        max-width: 90%; /* aumenta a largura do ticket em telas pequenas */
    }

    .ticket-header h2 {
        font-size: 1.6em; /* reduz o tamanho do título */
    }

    .ticket-content img {
        max-width: 100px; /* diminui o tamanho da imagem */
    }

    .user-info {
        font-size: 1em; /* diminui o tamanho da fonte */
    }
}

/* Responsividade para container */
@media (max-width: 480px) {
    .container {
        padding: 15px; /* diminui o padding */
        max-width: 90%; /* aumenta a largura em telas pequenas */
    }

    h1 {
        font-size: 1.8em; /* reduz o tamanho do título */
    }

    h2 {
        font-size: 1.2em; /* reduz o tamanho do h2 */
    }

    button {
        font-size: 1em; /* diminui o tamanho da fonte no botão */
    }

    .ticket-content img {
        max-width: 100px; /* diminui o tamanho da imagem */
    }

    .user-info {
        font-size: 1em; /* diminui o tamanho da fonte nas informações do usuário */
    }
}