/* Navbar container */
#nav-zone {
  position: absolute;
  float: left;
/* display: inline-block; */
/*   vertical-align: middle; */
  font-size: 16px; /* vraća font size */
  
    display: block;
    clear: both;
    /* DODAJ OVO: */
    overflow: visible; 
    min-height: 2.2rem;
}

.navbar {
/*   width: 12rem !important;  */
  width: 100%;
  height: 2.2rem;
  background-color: #339;
  font-family: Arial;
  display: block;      /* Sigurna, klasična metoda */
  background-color: #339;
  overflow: visible;   /* OBAVEZNO da bi se video podmeni */
}

/* Links inside the navbar */
.navbar a {
  color: white;
  text-align: center;
  padding: 0.2rem 1rem; /*top, right, bottom, left */
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
  line-height: 2rem;  /* 01.06.22 */
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  /*margin: 0;*/
  width: 6.1rem;
  padding: 0px;
}

.dropbtn {
  font-size: 16px;
  display: block;
  border: none;
  color: white;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
  width: 6rem;
  height: 2rem;      /* Ista visina kao navbar */
  line-height: 2rem; /* Centriranje teksta */
  padding: 0;
}


/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #54565A;
  cursor: pointer;
  color: #91F700;
  border-top: 2px solid #A1F528; 
/*   outline: 1px solid #A1F528; */
}



/* 1. Glavni kontejner - DODAJEMO GRID */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #252525; 
  
  /* Promena: Širimo da bi stale 3 kockice */
  width: 18rem; 
  
  z-index: 1000;
  padding: 0;
  margin: 0;
  left: 0;
  
  /* AKTIVACIJA GRIDA */
  grid-template-columns: repeat(3, 1fr); 
}

/* 2. Linkovi - KOCKICE */
.dropdown-content a {
  color: #fff;
  padding: 0.45rem 0.2rem; /* Više vertikalnog prostora za kockicu */
  text-decoration: none;
  
  /* Promena: Display mora ostati block, ali unutar grid ćelije */
  display: block; 
  
  text-align: center; /* Centrirano u kockici */
  background-color: #252525;
  font-size: 14px;
  
  /* Sređujemo bordere da prave mrežu */
  border: 0.1px solid #444; 
/*   border-top: none !important; */
  border-right: 0.1px solid #444; /* Menjamo tvoj zeleni border u suptilniji */
  
  line-height: normal;
  box-sizing: border-box;
}

.dropdown-content a:hover {
  background-color: #54565A;
}

/* 3. KLJUČNA PROMENA: Hover više ne sme biti 'block' nego 'grid' */
.dropdown:hover .dropdown-content {
  display: grid; 
}
/*------------------------------ */
/* button za mobile menu -> u izradi */
/*------------------------------ */

#ck-button {
  display: none;
  float: left;
  width: 6.1rem;
  height: 2.1rem;
  background-color: #333;
  font-family: Arial;
  color: #fff;
}

#ck-button label {
  width: 100%;
  line-height: 2.1rem;
  cursor: pointer;
}

#ck-button label span {
  text-align: center;
   display: block;
   z-index: -1; /* da se izbegne click selekcija slova */
}

#ck-button input:not(:checked) + span {
/*   background-color: blue; */
}

#ck-button input:checked + span {
/*   background-color:#911; */
}