#overskrift_oeko{
  text-align:center;
}

.container{
  padding:10px;
  margin-top:80px;
}

/* TAGS */
.tag-input {
  min-height: 40px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  cursor: text;
}

.tag {
  background: #2c7a4b;
  color: white;
  padding: 5px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.tag .remove {
  cursor: pointer;
  font-weight: bold;
}

/* Container til input og ikon */
.input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%; /* Eller en fast bredde f.eks. 300px */
  max-width: 300px;
}

/* Selve inputfeltet */
.input-wrapper input {
  width: 100%;
  height: 40px;
  padding-left: 10px;
  padding-right: 35px; /* Plads til ikonet i højre side */
  box-sizing: border-box; /* Sikrer at padding ikke øger bredden */
  cursor: pointer;
}

/* Ikonet placeret inde i inputfeltet */
.input-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  pointer-events: auto; /* Gør ikonet klikbart */
  user-select: none; /* Forhindrer at man markerer ikonet som tekst */
}

/* Dropdown boksen (skjult som standard) */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%; /* Lige under inputfeltet */
  left: 0;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-top: none; /* Ser bedre ud når den sidder fast på inputfeltet */
  box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
  z-index: 100;
  max-height: 250px;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Vises når jQuery tilføjer .show klassen */
.dropdown-content.show {
  display: block;
}

/* Hver enkelt vare/linje i listen */
.checkbox-item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  font-family: sans-serif;
  font-size: 14px;
  color: #333;
}

.checkbox-item:last-child {
  border-bottom: none;
}

.checkbox-item:hover {
  background-color: #f9f9f9;
}

/* Mellemrum mellem boks og tekst */
.checkbox-item input {
  margin-right: 12px;
  cursor: pointer;
  width: auto; /* Sørger for at checkboxen ikke tager input-feltets styling */
  height: auto;
}


/* GÅRD MODAL */
#vores_modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:white;
    z-index:9999;
    overflow:auto;
    padding:20px;
}

.modal_inner{
    max-width:700px;
    margin:0 auto;
}

#close_vores{
    margin-bottom:20px;
    padding:10px 15px;
    border:none;
    background:#2c7a4b;
    color:white;
    border-radius:8px;
    cursor:pointer;
}

/* ROW */
#top_controls{
    display:flex;
    gap:15px;
    align-items:flex-start;
}

/* CONTROLS */
#controls_block{
    flex:2;
    display:flex;
    flex-direction:column;
    gap:10px;
}

/* LIST */
#sidebar{
    flex:1;
    background:#f8f8f8;
    border-radius:10px;
    padding:10px;
    max-height:250px;
    overflow-y:auto;
}

/* LIST ITEMS */
.farm-item{
    padding:8px;
    border-bottom:1px solid #ddd;
    cursor:pointer;
}

.farm-item:hover{
    background:#eee;
}

/* INPUTS */
#food-search,
#address{
    width:40%;
    padding:10px;
    border-radius:8px;
    border:1px solid #ccc;
    font-size:16px;
}

/* BUTTONS */
button{
    padding:10px;
    border:none;
    border-radius:8px;
    background:#2c7a4b;
    color:white;
    cursor:pointer;
  width:20%;
}

/* RADIUS */
#radius-slider{
    width:50%;
}
.radius_box{
    width:100%;
    display:flex;

}

/* ADDRESS */
#adress_control{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

#address{
    flex: 1 1 200px;
    min-width: 180px;
    padding:10px;
    border-radius:8px;
    border:1px solid #ccc;
    font-size:16px;
}

#adress_control button{
    flex: 0 0 auto;
    padding:10px 12px;
    border:none;
    border-radius:8px;
    background:#2c7a4b;
    color:white;
    cursor:pointer;
    white-space:nowrap;
}

/* SUGGESTIONS */
#suggestions{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#fff;
    border:1px solid #ccc;
    display:none;
    z-index:1000;
    max-height:200px;
    overflow-y:auto;
    border-radius:8px;
}

.suggest-item{
    padding:10px;
    cursor:pointer;
}

.suggest-item:hover{
    background:#f0f0f0;
}

/* MAP */
#map{
    width:100%;
    height:60vh;
    margin-top:10px;
    border-radius:10px;
}

/* MESSAGE */
#message{
    text-align:center;
    margin-top:10px;
}

/* MOBILE */
@media (max-width:768px){

    /* stack layout */
    #top_controls{
        flex-direction: column;
    }

    /* controls først eller andet */
    #controls_block{
        order: 2;
    }

    /* sidebar skal komme først */
    #sidebar{
        order: 1;
    }
  
      #sidebar{
        max-height:200px;
    }
  
  
    #address, #food-search{
        width: 100%;
        min-width: 0;
    }

    #adress_control button{
        width: 100%;
    }
  
  #find-nearby{width: 100%;}

    .radius_box{
        width: 100%;
    }

}