/* Make hero section the positioning parent */
#main-buttons {
  position: relative !important;
  min-height: 100vh !important;
}

/* Style the actual Book Now button */
#main_buttons_book_btn {
  position: absolute !important;
  top: 22% !important;
  left: 38% !important;
  transform: translate(-50%, -50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ff2a2a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 14px 32px !important;
  min-width: 180px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(255,42,42,0.22) !important;
  z-index: 30 !important;
}

/* Hide map + contact + opening hours section */
#contacts_data,
#contacts_info,
#sb_map,
.schedule_data,
.company_location,
.company_hours {
  display: none !important;
}

/* Remove layout influence from the wrapper */
#main-buttons .buttons_wrap {
  position: static !important;
}

/* Optional hover */
#main_buttons_book_btn:hover {
  background: #ff3b3b !important;
  color: #fff !important;
}

/* Balanced dark overlay */
#main-buttons::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
  pointer-events: none;
}

/* Soft vignette */
#main-buttons::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.35) 65%,
    rgba(0,0,0,0.65) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* MOBILE: force Book Now higher on iPhone */
@media (max-width: 768px) {
  #main-buttons {
    min-height: 100svh !important;
  }

  #main_buttons_book_btn {
    position: absolute !important;
    left: 50% !important;
    top: 22% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 50 !important;
  }
}

/* Selected day */
.ui-datepicker td a.ui-state-active,
.ui-datepicker td span.ui-state-active,
#sb_dateview_container .ui-state-active,
#sb_dateview_container .active,
#sb_dateview_container td.selected,
#sb_dateview_container td.selected a {
  background: #ff2d2d !important;
  color: #ffffff !important;
  border-color: #ff2d2d !important;
  box-shadow: none !important;
}

/* Hover day */
.ui-datepicker td a:hover,
#sb_dateview_container td a:hover {
  background: rgba(255,45,45,0.15) !important;
  color: #ff2d2d !important;
  border-color: #ff2d2d !important;
}

/* Optional: today border */
.ui-datepicker .ui-datepicker-today a,
#sb_dateview_container .ui-datepicker-today a {
  border: 1px solid #ff2d2d !important;
}

/* Kun valgt dag i kalenderen skal være rød */
#sb_dateview_container td.selected,
#sb_dateview_container td.selected a,
#sb_dateview_container td.current,
#sb_dateview_container td.current a,
#sb_dateview_container .selected,
#sb_dateview_container .selected a,
#sb_dateview_container .active,
#sb_dateview_container .active a {
  background: #ff2d2d !important;
  color: #ffffff !important;
  border-color: #ff2d2d !important;
}

/* Hover på datoer */
#sb_dateview_container td a:hover,
#sb_dateview_container td:hover a {
  background: rgba(255, 45, 45, 0.15) !important;
  color: #ff2d2d !important;
}

/* Hvis temaet bruker svart boks inni cellen */
#sb_dateview_container td.selected span,
#sb_dateview_container td.current span,
#sb_dateview_container td.active span,
#sb_dateview_container .selected span,
#sb_dateview_container .active span {
  background: #ff2d2d !important;
  color: #fff !important;

}

<script>
document.addEventListener("DOMContentLoaded", function () {
  const regInput = document.querySelector('input[placeholder*="Registreringsnummer"], input[name="registrationNumber"], input[name="reg_nr"]');

  if (!regInput) {
    console.log("Fant ikke registreringsnummer-feltet");
    return;
  }

  let brandField = document.querySelector('#bilmerke');
  let modelField = document.querySelector('#bilmodell');

  function createField(id, labelText) {
    const wrapper = document.createElement("div");
    wrapper.className = "custom-vehicle-field";

    const label = document.createElement("label");
    label.setAttribute("for", id);
    label.textContent = labelText;

    const input = document.createElement("input");
    input.id = id;
    input.name = id;
    input.type = "text";
    input.readOnly = true;

    wrapper.appendChild(label);
    wrapper.appendChild(input);

    regInput.closest(".form-group")?.parentNode?.appendChild(wrapper);

    return input;
  }

  if (!brandField) brandField = createField("bilmerke", "Bilmerke");
  if (!modelField) modelField = createField("bilmodell", "Bilmodell");

  let timeout;
  regInput.addEventListener("input", function () {
    clearTimeout(timeout);

    const regNr = regInput.value.trim().toUpperCase();
    if (regNr.length < 2) {
      brandField.value = "";
      modelField.value = "";
      return;
    }

    timeout = setTimeout(async () => {
      try {
        const response = await fetch("https://DITT-DOMENE.no/api/lookup-vehicle", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ reg_nr: regNr })
        });

        const data = await response.json();

        brandField.value = data.bilmerke || "";
        modelField.value = data.bilmodell || "";
      } catch (e) {
        console.error("Feil ved oppslag", e);
        brandField.value = "";
        modelField.value = "";
      }
    }, 400);
  });
});
</script>