/* obrigatória do Box-Model em todos os elementos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}


html {
    height: 100%; 
}

body {
    background-color:#ffffff;
    color: #333333;
    line-height: 1.6;
    min-height: 100%; /* Garante que o body ocupa 100% da altura da viewport */
    display: flex; /* Habilita o Flexbox */
    flex-direction: column; /* Organiza os elementos verticalmente */
}

/* Links e Textos */
a {
    text-decoration: none;
    color: #ff4500;
    transition: color 0.3s;
}

a:hover {
    color: #ffa500;
}

h1, h2, h3, h4 {
    color:  #000000;
    margin-bottom: 50px;

}

.conteudo-principal,
.conteudo-principal-admin {
    
    width: 90%;
    max-width: 1000px;
    margin: 10px auto;
    padding: 30px;
    min-height: 600px;
    flex-grow: 1; 
}



/* Botões Padrão */
button {
    background-color: #ff4500;
    color: #ffffff;
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #ffa500;
}



/* CABEÇALHO (Uso de DIVs) */
.cabecalho-container {
    background-color: #000000;
    color: #ffffff;
    border-bottom: 2px solid #ff4500; 
}


.cabecalho-principal {
    display: flex; /* Uso de Flexbox obrigatório */
    justify-content: space-between;
    align-items: center;
    padding: 0px 2%;
}

.logo {
    font-size: 2.5em;
    font-weight: 900;
    color: #ff4500;
    text-transform: uppercase;

}

.busca {
    display: flex; /* Flexbox */
}

.busca input[type="text"] {
    padding: 10px;
    border: none;
    border-radius: 5px 0 0 5px;
    width: 300px;
    outline: none;
    background-color: #f0f0f0;
    color: #333333;
}

.busca button {
    padding: 10px 15px;
    margin-left: -1px;
    border-radius: 0 5px 5px 0;
    background-color: #ff4500;
}

.icones-usuario a {
    color: #ffffff;
    margin-left: 20px;
    font-size: 1.1em;
}

.icones-usuario a:hover {
    color: #ffa500;
}

.menu-categorias {
    display: flex; /* Flexbox */
    justify-content: center;
    background-color: #333;
    padding: 10px 0;
}

.menu-categorias a {
    color: #ffffff;
    padding: 5px 20px;
    font-weight: bold;
    text-transform: uppercase;
}

.menu-categorias a:hover {
    background-color: #ff4500;
    color: #ffffff;
}


/* RODAPÉ (Uso de DIVs e Ícones) */
.rodape-container {
    background-color: #000000; 
    color: #ffffff;
    padding: 30px 15%;
    border-top: 5px solid #ff4500;
    font-size: 0.9em;
    
}

.rodape-links {
    display: flex; /* Flexbox */
    justify-content: space-around;
    padding-bottom: 20px;
    border-bottom: 1px solid #3a3a3a;
}

.rodape-coluna {
    min-width: 150px;
}

.rodape-coluna h4 {
    color: #ff4500;
    font-size: 1em;
    margin-bottom: 10px;
}

.rodape-coluna a {
    display: block;
    color: #8f8f8f;
    margin-bottom: 8px;
}

.rodape-coluna a:hover {
    color: #ff4500;
}

.rodape-inferior {
    display: flex; /* Flexbox */
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    flex-wrap: wrap; 
}

.formas-pagamento,
.certificados-seguranca {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

}

.formas-pagamento img,
.certificados-seguranca img {
    margin-right: 10px; 
    margin-top: 0; 
    margin-bottom: 0;
}

.formas-pagamento h4,
.certificados-seguranca h4 {
    margin-left: 15px;
    color: #ff4500;
    font-size: 1em;
    
}


.formas-pagamento i,
.certificados-seguranca i {
    color: #ffffff;
    margin-right: 10px;

}

.redes-sociais a {
    color: #ffffff;
    font-size: center;
    margin-left: 15px;
}

.copyright {
    text-align: center;
    width: 100%;
    padding-top: 10px;
    color: #8f8f8f;
}


/* LISTAGEM DE PRODUTOS (Figura 1) */
.lista-produtos {
    display: flex; /* Flexbox obrigatório */
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center; 
}

.produto-card {
    flex-basis: 200px;
    text-align: center;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.produto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.produto-imagem {
    height: 150px;
    margin-bottom: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.produto-imagem img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.produto-nome {
    display: block;
    font-weight: bold;
    color: #333333;
    margin-bottom: 5px;
}

.produto-preco {
    color: #ff4500;
    font-size: 1.2em;
    font-weight: bold;
}


/* DETALHE DO PRODUTO (Figura 2) */
.detalhe-produto-container {
    display: flex; /* Flexbox  */
    gap: 40px;
}

.galeria-produto {
    flex-basis: 55%;
}

.imagem-principal {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imagem-principal img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* imagem inteira sem cortar */
}

.info-produto {
    flex-basis: 45%;
}

.info-produto p {
    font-size: 0.9em; /* Torna o texto menor */
    color: #ff4500; 
    margin-bottom: 10px; 
}

.info-produto h1 {
    margin-bottom: 10px;
}


.preco-compra {
    flex-wrap: wrap; /* Permite quebrar se o espaço ficar apertado */
}


.parcelas {
    font-size: 1.1em; /* Tamanho um pouco maior */
    color: #4CAF50; 
    font-weight: bold;
    margin-left: 0; 
    margin-top: 5px;
}

.preco-atual {
    font-size: 2.8em; 
}

.botao-comprar {

    align-self: flex-start; /* Alinha o botão ao topo do flex container se houver quebra de linha */
    margin-left: auto; /* Empurra o botão para a direita (se houver espaço) */
}

.preco-compra {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    padding: 15px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.preco-atual {
    font-size: 2.5em;
    color: #ff4500;
    font-weight: 900;
}

.botao-comprar {
    background-color: #4CAF50;
    font-size: 1.2em;
    padding: 15px 30px;
    border-radius: 5px;
}


/* Tabela de Ficha Técnica */
.ficha-tecnica-tabela {
    margin-top: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.tabela-linha {
    display: flex; /* Flexbox para simular linhas */
    border-bottom: 1px solid #eee;
}

.tabela-celula-titulo {
    flex-basis: 40%;
    padding: 10px;
    background-color: #f7f7f7;
    font-weight: bold;
    color: #000000;
}

.tabela-celula-valor {
    flex-basis: 60%;
    padding: 10px;
}



/* LOGIN E CADASTRO (Figura 3) */
.formulario-container {
    display: flex; /* Flexbox para dividir em colunas */
    gap: 30px;
}

.coluna-login, .coluna-cadastro {
    flex-basis: 50%;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.coluna-cadastro {
    background-color: #f9f9f9;
}

.coluna-login h3, .coluna-cadastro h3 {
    margin-top: 0;
    color: #ff4500;
 
}

.formulario-container label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

.formulario-container input[type="text"],
.formulario-container input[type="email"],
.formulario-container input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* obrigatorio: garante que padding não aumente a largura */
}

.link-esqueceu {
    display: block;
    text-align: right;
    margin-bottom: 15px;
}

.botao-entrar, .botao-cadastrar {
    width: 100%;
    padding: 12px;
    font-size: 1.1em;
    margin-top: 10px;
    border-radius: 4px;
}

.botao-cadastrar {
    background-color: #4CAF50; 
}

.radio-group {
    display: flex; /* O Flexbox alinha os pares de input/label lado a lado */
    gap: 30px; /* Espaço entre a opção Masculino e Feminino */
    margin-top: 5px;
    margin-bottom: 15px;
    align-items: center; /* Alinha verticalmente os elementos */
}

.radio-group label {
    display: inline;
    font-weight: normal; /* Deixa o texto do rádio sem negrito, mantendo apenas o 'sexo:' em negrito */
    margin-top: 0;
}

.radio-group input[type="radio"] {
    width: auto; 
    /* Remove as margens verticais aplicadas aos inputs de texto */
    margin-top: 0;
    margin-bottom: 0;
    /* Adiciona um pequeno espaço entre o círculo e o texto */
    margin-right: 5px; 
}


/* CARRINHO DE COMPRAS (Figura 4) */
.carrinho-container {
    display: flex; /* Flexbox obrigatório */
    gap: 30px;
}

.lista-itens {
    flex-basis: 65%;
}

.resumo-pedido {
    flex-basis: 35%;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    height: fit-content; /* Ajusta a altura ao conteúdo */
}

.resumo-pedido h3 {
    color: #ff4500;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.cabecalho-lista {
    display: flex; /* Flexbox */
    font-weight: bold;
    padding: 10px 0;
    border-bottom: 2px solid #000000;
    margin-bottom: 15px;
}

.item-carrinho {
    display: flex; /* Flexbox */
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

/* Definição de Larguras das Colunas do Carrinho */
.item-col-produto {
    flex-basis: 45%;
    display: flex;
    align-items: center;
}

.item-col-preco {
    flex-basis: 20%;
    font-weight: bold;
    color: #ff4500;
}

.item-col-quantidade {
    flex-basis: 20%;
    text-align: center;
}

.item-col-remover {
    flex-basis: 15%;
    text-align: center;
}

.item-nome {
    font-weight: bold;
    color: #ff4500;
}

.item-imagem {
    width: 80px;
    height: 60px;
    background-color: #ccc; 
    margin-right: 15px;
    border-radius: 3px;
    overflow: hidden;
}

.item-imagem img {
    width: 100%;
    height: 100%;
}

.item-col-quantidade input {
    width: 60px;
    text-align: center;
    padding: 5px;
}

.item-col-remover a {
    color: #cc0000;
    font-size: 1.3em;
}

.resumo-linha {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #ccc;
}

.resumo-linha.total {
    font-size: 1.3em;
    font-weight: bold;
    color: #000000;
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 15px;
}

.botao-finalizar {
    width: 100%;
    padding: 15px;
    font-size: 1.2em;
    margin-top: 20px;
    border-radius: 5px;
    background-color: #4CAF50;
}



/* ADMIN DASHBOARD (Figura 7) */
.conteudo-principal-admin {
    display: flex; /* Flexbox */
    width: 75%; /* Usando 75% para o Admin */
    max-width: 1200px;
    margin: 10px auto;
    padding: 15px;
    flex-grow: 1; 
}

.barra-lateral-admin {
    flex-basis: 20%;
    padding-right: 20px;
    border-right: 1px solid #eee;
}

.barra-lateral-admin h3 {
    color: #000000;
    margin-bottom: 10px;
    margin-top: 20px;
    font-size: 1.3em;
    border-bottom: 2px solid #ff4500;
    padding-bottom: 5px;
}

.barra-lateral-admin a {
    display: block;
    margin-bottom: 8px;
    color: #333333;
    padding: 5px;
    border-radius: 3px;
}

.barra-lateral-admin a:hover,
.link-admin.ativo {
    background-color: #ff4500;
    color: #ffffff;
}


.produtos-admin-lista { 

    flex-basis: 80%;
    padding-left: 30px;
}

.produtos-admin-lista h2 {
    margin-top: 0;
}

/* Tabela de Produtos Admin - Cabeçalho */
.cabecalho-lista-admin { 
    display: flex; /* Flexbox */
    font-weight: bold;
    padding: 10px 0;
    border-bottom: 2px solid #000000;
    margin-bottom: 15px;
    background-color: #f0f0f0;
}

.item-admin {
    display: flex; /* Flexbox */
    align-items: center;
    padding: 15px 0;
    border-bottom: 2px solid #eee;
}

/* Definição de Larguras das Colunas do Admin */
.admin-col-produto {
    flex-basis: 30%; /* Aumentado para o nome do produto e imagem */
    display: flex;
    align-items: center;
}

.admin-col-estoque {
    flex-basis: 25%;
    text-align:center;
}

.admin-col-preco { 
    flex-basis: 25%; 
    text-align: left;
}

.admin-col-editar { 
    flex-basis: 15%; 
    text-align: center; 
}

.admin-col-apagar { 
    flex-basis: 25%; 
    text-align: center; 
}

.item-admin .item-imagem {
    width: 10px;
    height: 20px;
    margin-right: 20px;
}

.link-acao {
    display: inline-flex; /* Para alinhar o ícone e o texto */
    align-items: center;
    justify-content: center;
    color: #ffffff; 
    padding: 5px 10px;
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.link-acao i {
    margin-right: 5px;
}

.link-editar {
    background-color: #ffa500; /* Laranja para Editar */
}

.link-editar:hover {
    background-color: #ff8c00;
}

.link-apagar {
    background-color: #cc0000; /* Vermelho para Apagar */
}

.link-apagar:hover {
    background-color: #a00000;
}



/* Formulário de Cadastro de Produto */
.formulario-cadastro-produto {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.formulario-cadastro-produto label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
}

.formulario-cadastro-produto input[type="text"],
.formulario-cadastro-produto input[type="number"],
.formulario-cadastro-produto textarea,
.formulario-cadastro-produto select,
.formulario-cadastro-produto input[type="file"] {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; 
}

.formulario-cadastro-produto textarea {
    height: 100px;
    resize: vertical;
}

.botao-salvar {
    background-color: #4CAF50;
    width: 100%;
    padding: 12px;
    font-size: 1.1em;
    margin-top: 10px;
    border-radius: 4px;
}

/* Estilo para a seção do time (para centralizar o conteúdo) */
.time-flow {
    text-align: center; /* Centraliza h3, h4 e p */
    margin-top: 50px;
}

/* Contêiner da imagem - Define o tamanho do círculo/quadrado */
.foto-membro {
    width: 150px; /* Largura da imagem */
    height: 150px; /* Altura da imagem */
    margin: 0 auto 15px auto; /* Centraliza o bloco e adiciona margem inferior */
    overflow: hidden; /* Garante que a imagem cortada não vaze */
    border-radius: 50%; /* Transforma a foto em um círculo */
    border: 3px solid #ff4500; /* Borda laranja de destaque */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


/* Estilo da imagem dentro do contêiner */
.foto-membro img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha o círculo sem distorção */
    display: block;
}


h1, h2, h3, h4 {
    color: #000000;
    margin-bottom: 30px; 
}

/* MARGEM PARA PARÁGRAFOS (Torna o texto mais arejado) */
.conteudo-principal p {
    margin-bottom: 20px; /* Adiciona espaço após cada parágrafo */
}


/* Espaço antes e depois da lista de valores */
.conteudo-principal ul {
    margin-top: 20px;
    margin-bottom: 30px; 
    padding-left: 20px; /* Adiciona recuo para os marcadores (bolinhas) */
}

/* Espaço entre os itens da lista */
.conteudo-principal li {
    margin-bottom: 8px; 
    line-height: 1.5; /* Garante boa altura da linha */
}

/* Garante que os valores em negrito se destaquem */
.conteudo-principal li strong {
    color: #ff4500; /* Use a cor laranja tema para destacar os termos */
}

/* Espaço na seção do time */
.time-flow {
    text-align: center; 
    margin-top: 50px; /* Espaçamento claro após a lista de valores */
}

/* Garante que o nome se destaque */
.time-flow h4 {
    color: #000000; /* Mais escuro */
    margin-bottom: 5px; /* Mais perto do cargo */
}

/* Estilo para o cargo */
.time-flow p {
    font-style: italic;
    color: #8f8f8f;
    margin-bottom: 0; /* Remove a margem grande de parágrafo aqui */
}