/* Bloco de Estilos Gerais e Reset */
body {
    font-family: Arial, sans-serif; /* Define a fonte padrão */
    background-color: #f4f4f9; /* Cor de fundo suave */
    color: #333; /* Cor do texto principal */
    line-height: 1.6; /* Espaçamento entre linhas */
    margin: 0; /* Remove a margem padrão do body */
    padding: 20px; /* Adiciona um respiro nas bordas da página */
}

/* Bloco de Estilos do Cabeçalho */
header {
    text-align: center; /* Centraliza o texto */
    margin-bottom: 40px; /* Espaço abaixo do cabeçalho */
    border-bottom: 2px solid #ddd; /* Linha divisória */
    padding-bottom: 20px; /* Espaço interno abaixo do conteúdo do cabeçalho */
}

header h1 {
    color: #5a2d82; /* Cor roxa para o título principal */
}

/* Bloco de Estilos do Formulário */
.add-product-form {
    max-width: 600px; /* Largura máxima do formulário */
    margin: 0 auto 40px auto; /* Centraliza o formulário e adiciona margem abaixo */
    padding: 20px; /* Espaçamento interno */
    background: #fff; /* Fundo branco */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Sombra suave */
}

.add-product-form h2 {
    text-align: center; /* Centraliza o título do formulário */
    margin-top: 0; /* Remove a margem do topo */
}

/* Estiliza os campos de texto, senha e textarea */
.add-product-form input[type="text"],
.add-product-form input[type="password"],
.add-product-form input[type="file"],
.add-product-form textarea {
    width: 100%; /* Ocupa toda a largura disponível */
    padding: 10px; /* Espaçamento interno */
    margin-bottom: 15px; /* Margem inferior */
    border: 1px solid #ddd; /* Borda sutil */
    border-radius: 4px; /* Bordas levemente arredondadas */
    box-sizing: border-box; /* Garante que o padding não afete a largura total */
}

/* Estiliza o botão de submit do formulário */
.add-product-form button {
    width: 100%; /* Largura total */
    padding: 12px; /* Espaçamento interno */
    background-color: #5a2d82; /* Cor de fundo roxa */
    color: white; /* Cor do texto */
    border: none; /* Sem borda */
    border-radius: 4px; /* Bordas arredondadas */
    cursor: pointer; /* Cursor de mãozinha ao passar por cima */
    font-size: 16px; /* Tamanho da fonte */
    transition: background-color 0.3s; /* Transição suave da cor de fundo */
}

.add-product-form button:hover {
    background-color: #482469; /* Cor mais escura ao passar o mouse */
}

/* Bloco de Estilos da Vitrine de Produtos */
.product-display h2 {
    text-align: center; /* Centraliza o título */
    color: #333;
}

.product-container {
    display: flex; /* Usa flexbox para alinhar os cards */
    flex-wrap: wrap; /* Permite que os cards quebrem para a próxima linha */
    justify-content: center; /* Centraliza os cards no container */
    gap: 20px; /* Espaço entre os cards */
}

/* Bloco de Estilos do Card de Produto */
.product-card {
    background: #fff; /* Fundo branco */
    border: 1px solid #ddd; /* Borda sutil */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra suave */
    width: 280px; /* Largura fixa do card */
    padding: 15px; /* Espaçamento interno */
    text-align: center; /* Centraliza o conteúdo */
    display: flex; /* Usa flexbox para o conteúdo interno */
    flex-direction: column; /* Organiza o conteúdo em coluna */
    justify-content: space-between; /* Distribui o espaço verticalmente */
}

.product-card img {
    max-width: 100%; /* Garante que a imagem não ultrapasse a largura do card */
    height: 200px; /* Altura fixa para a imagem */
    object-fit: cover; /* Faz a imagem cobrir o espaço sem distorcer */
    border-radius: 4px; /* Bordas arredondadas para a imagem */
    margin-bottom: 15px; /* Espaço abaixo da imagem */
}

.product-card p {
    flex-grow: 1; /* Faz a descrição ocupar o espaço disponível */
    margin-bottom: 15px; /* Margem abaixo do parágrafo */
}

.product-card .delete-btn {
    background-color: #d9534f; /* Cor vermelha para o botão de excluir */
    color: white; /* Texto branco */
    border: none; /* Sem borda */
    padding: 10px 15px; /* Espaçamento interno */
    border-radius: 4px; /* Bordas arredondadas */
    cursor: pointer; /* Cursor de mãozinha */
    transition: background-color 0.3s; /* Transição suave */
}

.product-card .delete-btn:hover {
    background-color: #c9302c; /* Cor mais escura ao passar o mouse */
}