/* Estilos Gerais */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f4f4f9;
  display: flex; /* Adiciona um flex container para o body */
  /*justify-content: center; /* Centraliza horizontalmente */
  /*align-items: center; /* Centraliza verticalmente */
  height: 100vh; /* Ocupa toda a altura da tela */
}

header {
  text-align: center;
  padding: 20px;
  background: #333;
  color: white;
}

.logo {
  max-width: 200px;
  margin-bottom: 50px;
}

main {
  padding: 20px;
}

.dimensions label {
  display: block;
  margin: 10px 0 5px;
}

.grid-container {
  display: flex;
  /*justify-content: center; /* Centraliza o grid horizontalmente */
  /*align-items: center; /* Centraliza o grid verticalmente */
  border: 1px solid transparent; /* Opcional: Remove a borda */
  padding: 10px;
  background: #fff;
  margin-top: 20px;
}

#grid {
  display: grid;
  border: 1px solid #ccc;
  padding: 10px;
  grid-template-columns: repeat(auto-fill, 30px); /* Configuração automática/* 
}

/* Estilos para as células do grid */
.cell {
  position: relative;
  width: 30px;
  height: 30px;
  margin: 0px /*adiciona Margem*/
  background: #ddd;
  border: 2px solid #ccc;
  cursor: pointer;
}

.cell img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ajusta a imagem ao espaço da célula */
  transform-origin: center; /* Define o centro como ponto de rotação */
  transition: transform 0.2s ease-in-out; /* Transição suave para rotação */
}

.cell:hover {
  background: #cce7ff;
}

/* Menu para inserção de itens */
.menu {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  gap: 5px;
  padding: 5px;
  z-index: 10;
}

.menu img {
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.menu img:hover {
  transform: scale(1.1); /* Efeito de zoom ao passar o mouse */
}

/* Botões de ação (Girar e Remover) */
.cell-buttons {
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  visibility: hidden; /* Botões ficam ocultos por padrão */
  opacity: 0;
  transition: visibility 0s, opacity 0.2s ease-in-out;
}

.cell-buttons button {
  background: #007bff;
  color: white;
  border: none;
  padding: 5px;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  font-size: 12px;
  cursor: pointer;
}

.cell-buttons button:hover {
  background: #0056b3;
}

/* Exibir botões ao passar o mouse na célula */
.cell:hover .cell-buttons {
  visibility: visible;
  opacity: 1;
}

/* Posicionamento dos botões */
.cell-buttons .rotate {
  position: absolute;
  top: -5px;
  left: -17px; /* Afastar o botão de rotação para a esquerda */
}

.cell-buttons .remove {
  position: absolute;
  top: -5px;
  right: -17px; /* Afastar o botão de remoção para a direita */
}

/* Calculadora de Preço */
.calculator {
  margin-top: 20px;
}

button {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background: #0056b3;
}