/* =========================================================
   RWI RESPONSIVE FIX — GLOBAAL
   Doel: horizontale overflow definitief uitschakelen en
   alle publieke pagina's correct laten schalen op
   desktop, tablet en mobiel (iPhone/Android).
   Wordt als LAATSTE stylesheet geladen zodat deze wint.
   ========================================================= */

/* ===== GLOBALE OVERFLOW FIX ===== */
html,
body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Media schaalt nooit buiten de container */
img,
svg,
video,
canvas,
iframe,
embed,
object {
  max-width: 100%;
}

/* Tabellen breken de layout niet meer */
table {
  max-width: 100%;
}

/* ===== DUBBELE HEADER FIX =====
   In de gegenereerde build wordt .rwi-public-header gebruikt.
   De oude Next.js .public-header (en bijbehorende topbars)
   wordt volledig verborgen zodat er ALTIJD één header is. */
.public-header,
.public-topbar {
  display: none !important;
}

/* ===== DEALER LOCATOR — RESPONSIVE HARD FIX =====
   Widget mag NOOIT buiten het scherm lopen, op geen enkele breedte. */
.public-site > section.dealer-locator,
.public-site .dealer-locator {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.public-site .dealer-locator-inner {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.public-site .dealer-locator-copy {
  min-width: 0 !important;
}

.public-site .dealer-locator-form {
  min-width: 0 !important;
  max-width: 100% !important;
}

.public-site .dealer-locator-control {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Vanaf tablet naar beneden: postcode-veld flexibel + één kolom */
@media (max-width: 820px) {
  .public-site .dealer-locator-inner,
  .public-site > section.dealer-locator > .dealer-locator-inner {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: min(100% - 28px, 680px) !important;
  }

  .public-site .dealer-locator-form {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .public-site .dealer-locator-control {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .public-site .dealer-locator-control > input#dealer-postcode {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .public-site .dealer-locator-control > button[type="submit"] {
    flex: 0 0 48px !important;
  }
}

@media (max-width: 480px) {
  .public-site > section.dealer-locator,
  .public-site .dealer-locator {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .public-site .dealer-locator-inner {
    padding: 16px !important;
    width: 100% !important;
  }
}

/* ===== CONTACT PAGINA ===== */
@media (max-width: 860px) {
  .rw-contact-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  .rw-form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== ALGEMENE CONTAINERS ===== */
.public-container,
.rwi-public-header-inner,
.public-header-inner {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* ===== FORMULIER-VELDEN: box-sizing garanderen ===== */
input,
select,
textarea,
button {
  max-width: 100%;
}

/* ===== MOBIEL BREAKPOINTS (max 480px) — algemene veiligheid ===== */
@media (max-width: 480px) {
  /* Voorkom dat grote grids overflow veroorzaken */
  .cards,
  .form-grid,
  .rw-form-grid {
    grid-template-columns: 1fr !important;
  }
}