/* Fix #1: float-collision tussen #formule-search-block en .inthespotlight */
#formule-search-block,
.formule-search-block,
.inthespotlight {
  float: none !important;
  clear: both !important;
  width: auto !important;
  max-width: 100%;
}

/* Fix #2: form had float:right + shrink-to-fit waardoor hij viewport overschreed op mobile */
form.formule-search {
  float: none !important;
  width: auto !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* Fix #3: voorkom horizontale overflow in form-kinderen */
form.formule-search .description,
form.formule-search .form-elements,
form.formule-search .form-item,
form.formule-search .select-wrapper,
form.formule-search select {
  max-width: 100%;
  box-sizing: border-box;
}

/* Fix #4: mobile — stack form-velden verticaal full-width */
@media (max-width: 768px) {
  form.formule-search .form-elements {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  form.formule-search .form-item,
  form.formule-search select,
  form.formule-search .select-wrapper {
    width: 100% !important;
  }
  form.formule-search .button.white {
    width: 100%;
  }
}

/* Fix #5: title font-size cap op mobile zodat "Franchisenemer worden?" niet meer overflowt */
@media (max-width: 768px) {
  .wide .formule-search-block .description .search-title,
  .formule-search-block .description .search-title {
    font-size: 22px !important;
    line-height: 1.2;
    overflow-wrap: break-word;
  }
}

/* Fix #6: viewport overflow op mobile - kill grid-span margin-left/right erfd uit .wide */
@media (max-width: 768px) {
  .wide .formule-search-block,
  .formule-search-block {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
  }
  .formule-search-block .formule-search,
  .formule-search-block .description,
  .formule-search-block .form-elements,
  .formule-search-block .form-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .formule-search-block .description {
    text-align: left !important;
  }
}