*{
	margin: 0;
	padding: 0;
}

body{
	
	margin: 0 auto;
	justify-content: center;
	background-color: black !important;
  color: white !important;
}

.container-box{
  display: inline-flex;
}

.wrap{
  max-width: 800px;
}

.tier{
  background-color: blue;
  padding: 5px;
  margin: 2px;
  text-align: center;
}

ul{
	list-style: none;
}

.mushrooms{
	display: flex;
	flex-direction: row;
	align-items: center;
  justify-content: center;
}

.mushrooms img{
	width: 80px;
	
	margin: 10px;
}

.image-container {
      position: relative;
      display: inline-block;
    }

 .locatie{
      display: none; /* Ascunsă implicit */
      position: absolute;
      top: 100%; /* Sub imaginea principală */
      left: 50%;
      transform: translateX(-50%);
      
      border: 1px solid #ccc;
      background: #fff;
      padding: 5px;
      z-index: 10;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      width: 550px !important;
    }

.image-container:hover .locatie{
	display: block;
}

.combinatii{
	color: white;
	display: flex;
	flex-direction: row;
}

.combinatii ul{
	text-align: center;
}

.combinatii li{
	line-height: 26px;
	font-size: 20px;
	margin-bottom: 10px;
}
 .container {
      max-width: 600px;
      margin: 0 auto;
    }
    .product-item {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    select, input {
      padding: 5px;
      font-size: 14px;
    }
    button {
      background-color: #007BFF;
      color: white;
      padding: 10px 15px;
      border: none;
      cursor: pointer;
    }
    button:hover {
      background-color: #0056b3;
    }
    .results {
      margin-top: 20px;
      background-color: #f9f9f9;
      padding: 10px;
      color: black;
      border: 1px solid #ddd;
    }
.combinatii li:nth-child(odd){
	background-color: #BA053C;
}

.second-list{
	list-style: none;
	}

.second-list li{
	position: relative;
	padding-left: 50px;
	margin-left: 15px;

	}

.second-list li:before{
	content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url('https://imgs.search.brave.com/bfE8jrYbIvSZrJ7l7gvoSuxGaSKC5yCFsHr5cxTvcJ8/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly9wbmdp/bWcuY29tL3VwbG9h/ZHMvcGx1cy9zbWFs/bC9wbHVzX1BORzEy/Mi5wbmc'); 
  background-size: cover;
  background-repeat: no-repeat;
}


.top_menu{
  display: grid;
  justify-content: center;
}

.top_menu li{
  color: white;
  display: inline-grid;
}

.top_menu a{
  text-decoration: none;
}

.top_menu a:visited{
  color: white;
}

.test{
  text-align: center;
  width: 300px;
}

.container-tabele{
  display: flex;
    align-items: center;
}

.custom-checkbox {
        display: none;
    }

    /* Create a custom checkbox */
    .custom-checkbox-label {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 18px;
    }

    /* Design the checkbox shape */
    .custom-checkbox-label span {
        width: 20px;
        height: 20px;
        border: 2px solid #333;
        border-radius: 5px; /* Rounded corners */
        display: inline-block;
        margin-right: 8px;
        position: relative;
        transition: 0.3s;
    }

    /* Add a checkmark when the checkbox is checked */
    .custom-checkbox:checked + .custom-checkbox-label span {
        background-color: #28a745; /* Green background */
        border-color: #28a745;
    }

    /* Create the checkmark */
    .custom-checkbox:checked + .custom-checkbox-label span::after {
        content: '✔';
        color: white;
        font-size: 16px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: bold;
    }

    .input-img{
      display: flex;
    }


    .container-pesti {
      background: #fff;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      max-width: 800px;
      width: 100%;
    }
    h1 {
      text-align: center;
      margin-bottom: 20px;
      color: #333;
    }
    /* Stil pentru containerul de produse - 3 coloane */
    #produse-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
    }
    .produs {
      /* Pentru a păstra un aspect consistent pentru fiecare produs */
      padding: 10px;
      border: 1px solid #e0e0e0;
      border-radius: 5px;
      background-color: #fafafa;
    }
    label {
      display: block;
      margin-bottom: 5px;
      color: #555;
      font-weight: 600;
      font-size: 14px;
    }
    input[type="number"] {
      width: 90%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 14px;
    }
    button {
      display: block;
      width: 100%;
      padding: 10px;
      margin-top: 20px;
      background: #007bff;
      border: none;
      border-radius: 5px;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    button:hover {
      background: #0056b3;
    }
    #totalDisplay {
      margin-top: 20px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: #007bff;