/* === Stegformulär: kommun, område, adress (både #hyresinfo-form & #felanmalan-form) === */

/* Grundstruktur */
#steg {
  background: var(--ljus-gra);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  max-width: 960px;
  margin: 3rem auto;
}

#steg p {
  font-size: 16px;
  color: var(--mjukt-kol);
  margin-bottom: 1.5rem;
}


#steg p.stand-out {
  font-size: 18px;
  font-weight: bold;
  color: var(--djup-gran);
  margin-bottom: 1.5rem;
}


/* VAL DIVIDER START */

.info_wrapper {width: 100%;
	display: flex;
	padding-bottom: 20px;
	
}
.left {width: 100px;
	float: left;
	
}

.right {width: 80%;
	
	
}


/* VAL DIVIDER END */


/* Etiketter */
#hyresinfo-form label,
#felanmalan-form label {
  display: block;
  margin: 1.2rem 0 0.4rem;
  font-weight: 600;
  color: var(--mjukt-kol);
  font-family: 'Nunito Sans', sans-serif;
}

/* Select-fält */
#hyresinfo-form select,
#felanmalan-form select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 16px;
  background-color: white;
  color: var(--mjukt-kol);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%236DB388' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Fokus & interaktivitet */
#hyresinfo-form select:focus,
#felanmalan-form select:focus {
  outline: none;
  border-color: var(--djup-gran);
  box-shadow: 0 0 0 3px rgba(109, 179, 136, 0.3);
}

#hyresinfo-form select:hover,
#felanmalan-form select:hover {
  border-color: var(--mild-gran);
}

/* Inaktiverade fält */
#hyresinfo-form select:disabled,
#felanmalan-form select:disabled {
  background-color: var(--ljus-gra);
  cursor: not-allowed;
  color: #888;
  border-color: #ddd;
}

/* Mobilanpassning */
@media only screen and (max-width: 768px) {
  #steg {
    padding: 1.5rem 1rem;
  }

  #hyresinfo-form label,
  #felanmalan-form label {
    font-size: 15px;
  }

  #hyresinfo-form select,
  #felanmalan-form select {
    font-size: 15px;
    padding: 0.65rem 1rem;
  }
}