/* ==========================================================================
   Elbay - zwevende contactknop + cookiemelding
   Beide zijn eigen bouwsel: geen Elementor-popups, geen VWE, geen externe
   scripts of trackers.
   ========================================================================== */

:root {
  --elbay-rood: #c8102e;
  --elbay-rood-licht: #d81b3f;
}

/* --------------------------------------------------------------------------
   Belangrijk: het hidden-attribuut moet blijven werken.
   De browser geeft [hidden] standaard display:none, maar dat is een
   UA-stijlregel en die verliest van élke eigen display-regel. Omdat wij
   hieronder display:flex/grid zetten, bleef een verborgen paneel gewoon in
   beeld staan. Vandaar deze regels bovenaan.

   Het menu staat bewust niet in deze lijst: dat regelt elbay-nav.css zelf,
   omdat de :target-vangnetregel daar juist boven het hidden-attribuut moet
   gaan als JavaScript uitvalt.
   -------------------------------------------------------------------------- */
.elbay-cookie[hidden],
.elbay-contact__panel[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Zwevende contactknop rechtsonder
   -------------------------------------------------------------------------- */
.elbay-contact {
  position: fixed;
  right: 22px;
  bottom: 22px;
  /* Boven de cookiemelding, anders is de knop niet aan te klikken zolang die
     nog in beeld staat. */
  z-index: 9996;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.elbay-contact__panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--elbay-rood-licht) 0%, var(--elbay-rood) 100%);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .28);
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.elbay-contact__panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.elbay-contact__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 84px;
  min-height: 84px;
  padding: 10px 8px;
  border-radius: 12px;
  color: #fff !important;
  text-decoration: none !important;
  transition: background-color .2s ease;
}
.elbay-contact__item:hover,
.elbay-contact__item:focus-visible { background: rgba(255, 255, 255, .16); }

.elbay-contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  flex: 0 0 auto;
}
.elbay-contact__icon svg { width: 22px; height: 22px; display: block; }

.elbay-contact__label {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

/* De rode ronde knop zelf */
.elbay-contact .elbay-contact__toggle {
  width: 62px;
  height: 62px;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--elbay-rood) !important;
  background-image: none !important;
  color: #fff !important;
  cursor: pointer;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
  transition: transform .2s ease, background-color .2s ease;
}
.elbay-contact .elbay-contact__toggle:hover { background: #a50d24 !important; transform: scale(1.05); }
.elbay-contact .elbay-contact__toggle svg { width: 26px; height: 26px; display: block; stroke: #fff !important; fill: none !important; }
.elbay-contact__toggle-close { display: none; }
.elbay-contact.is-open .elbay-contact__toggle-open { display: none; }
.elbay-contact.is-open .elbay-contact__toggle-close { display: inline-flex; }

@media (max-width: 480px) {
  .elbay-contact { right: 14px; bottom: 14px; }
  .elbay-contact__item { min-width: 74px; min-height: 74px; }
  .elbay-contact__icon { width: 40px; height: 40px; }
}

/* --------------------------------------------------------------------------
   Alleen voor schermlezers en zoekmachines
   Een paar pagina's hebben geen zichtbare titel. Die krijgen wel een <h1>,
   want zonder kop weten Google en een schermlezer niet waar de pagina over
   gaat. Niet met display:none verbergen: dan telt hij voor allebei niet mee.
   -------------------------------------------------------------------------- */
.elbay-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Kentekencheck op de formulieren
   -------------------------------------------------------------------------- */
/* Eigen regel onder de veldgroep. De formuliervelden staan in een flex-raster,
   dus flex-basis 100% zorgt dat de melding een hele regel voor zichzelf krijgt
   en nooit over het kentekenplaatje heen valt. */
.elbay-kenteken-status {
  flex: 0 0 100%;
  width: 100%;
  margin: 2px 0 10px;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1.45;
  min-height: 0;
  position: relative;
  z-index: 2;
  /* Geen order-waarde: het element staat al direct ná de kentekengroep in de
     HTML, en een order zou het naar het einde van het formulier schuiven. */
}
.elbay-kenteken-status:empty { display: none; }
.elbay-kenteken-status.is-handmatig { color: #4a4f57; }

/* De veldgroepen van merk en model staan standaard op display:none en worden
   pas getoond zodra er iets in te zien valt. */
.elementor-field-group.elbay-veld-zichtbaar { display: flex !important; }

/* Merk en model zijn nu wél in te vullen; laat dat ook zien. */
.vwe-licenseplate-data-field.is-handmatig {
  background: #fff !important;
  cursor: text;
}

.elbay-kenteken-status.is-ok { color: #11633a; }
.elbay-kenteken-status.is-fout { color: #9b1c2e; }
.elbay-kenteken-status.is-bezig { color: #6b7280; }

/* De ingevulde velden zijn readonly; laat dat ook zien. */
.vwe-licenseplate-data-field[readonly] { background: #f6f7f9 !important; cursor: default; }

/* --------------------------------------------------------------------------
   Blok op /auto-verzekeren, in plaats van de externe verzekeringsmodule
   -------------------------------------------------------------------------- */
.elbay-verzekering {
  border: 1px solid #e3e6ea;
  border-radius: 14px;
  padding: clamp(22px, 4vw, 38px);
  background: #fff;
  max-width: 720px;
  margin: 0 auto;
}
.elbay-verzekering h3 {
  margin: 0 0 10px;
  font-size: clamp(19px, 2.4vw, 24px);
  letter-spacing: .04em;
}
.elbay-verzekering p { margin: 0 0 22px; line-height: 1.6; }
.elbay-verzekering__acties { display: flex; flex-wrap: wrap; gap: 12px; }
.elbay-verzekering .elbay-verzekering__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 22px !important;
  border-radius: 8px !important;
  border: 1px solid #d5d9de !important;
  background: #fff !important;
  color: #16181d !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.elbay-verzekering .elbay-verzekering__btn:hover { background: #f3f5f7 !important; }
.elbay-verzekering .elbay-verzekering__btn--primary {
  background: var(--elbay-rood) !important;
  border-color: var(--elbay-rood) !important;
  color: #fff !important;
}
.elbay-verzekering .elbay-verzekering__btn--primary:hover { background: #a50d24 !important; border-color: #a50d24 !important; }

/* --------------------------------------------------------------------------
   Cookiemelding
   -------------------------------------------------------------------------- */
.elbay-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9995;
  padding: 16px;
  display: flex;
  justify-content: center;
  /* Zonder dit rekt het kadertje mee met de wrapper en komt het midden op het
     scherm te hangen, dwars over het formulier heen. Onderaan is de plek. */
  align-items: flex-end;
  animation: elbay-cookie-in .35s ease both;
  /* De wrapper is breder en hoger dan het kadertje zelf. Zonder dit ving hij
     alle kliks in de onderste helft van het scherm op. */
  pointer-events: none;
}
.elbay-cookie__box { pointer-events: auto; }

/* Zolang de melding in beeld staat schuift de contactknop omhoog, zodat ze
   elkaar niet overlappen. */
body.elbay-cookie-visible .elbay-contact { bottom: 128px; }
@media (max-width: 560px) {
  body.elbay-cookie-visible .elbay-contact { bottom: 200px; }
}
@keyframes elbay-cookie-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.elbay-cookie__box {
  width: 100%;
  max-width: 720px;
  background: #fff;
  color: #16181d;
  border-radius: 14px;
  padding: 24px 26px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.elbay-cookie__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: #16181d;
}
.elbay-cookie__text { margin: 0 0 16px; font-size: 14px; color: #4a4f57; }
.elbay-cookie__text a { color: var(--elbay-rood); text-decoration: underline; }

.elbay-cookie__options {
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid #e6e9ec;
  padding-top: 16px;
}
.elbay-cookie__option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  color: #4a4f57;
  cursor: pointer;
}
.elbay-cookie__option input {
  width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--elbay-rood);
}
.elbay-cookie__option strong { display: block; color: #16181d; font-size: 14px; margin-bottom: 2px; }

.elbay-cookie__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Het thema geeft knoppen en links een eigen radius, hoogte en letterafstand.
   Daardoor zag elke knop er nét anders uit. Hier leggen we alles vast, ook de
   radius, zodat de knoppen echt identiek zijn. */
.elbay-cookie .elbay-cookie__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  text-decoration: none !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 22px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  border: 1px solid #d5d9de !important;
  background: #fff !important;
  background-image: none !important;
  color: #16181d !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.elbay-cookie .elbay-cookie__btn:hover { background: #f3f5f7 !important; }
.elbay-cookie .elbay-cookie__btn--primary {
  background: var(--elbay-rood) !important;
  border-color: var(--elbay-rood) !important;
  color: #fff !important;
}
.elbay-cookie .elbay-cookie__btn--primary:hover { background: #a50d24 !important; border-color: #a50d24 !important; }

@media (max-width: 560px) {
  .elbay-cookie { padding: 10px; }
  .elbay-cookie__box { padding: 20px 18px; }
  .elbay-cookie__actions .elbay-cookie__btn { flex: 1 1 100%; }
}

/* Kleine knop om de keuze later te wijzigen (staat op de cookiespagina) */
.elbay-cookie-reopen {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 8px;
  border: 1px solid var(--elbay-rood);
  background: transparent;
  color: var(--elbay-rood);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}
.elbay-cookie-reopen:hover { background: var(--elbay-rood); color: #fff; }

/* --------------------------------------------------------------------------
   Cookiespagina: de tekst liep tot tegen de rand
   -------------------------------------------------------------------------- */
body.page-cookies .elementor-widget-text-editor > .elementor-widget-container,
body.page-cookies .elementor-widget-heading > .elementor-widget-container,
body.page-privacyverklaring .elementor-widget-text-editor > .elementor-widget-container,
body.page-privacyverklaring .elementor-widget-heading > .elementor-widget-container {
  padding-left: clamp(18px, 5vw, 64px);
  padding-right: clamp(18px, 5vw, 64px);
}

/* De tekst zelf niet eindeloos breed laten worden op grote schermen. */
body.page-cookies .elementor-widget-text-editor > .elementor-widget-container,
body.page-privacyverklaring .elementor-widget-text-editor > .elementor-widget-container {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

/* Wat lucht tussen de alinea's, anders plakt alles aan elkaar. */
body.page-cookies .elementor-widget-text-editor p,
body.page-privacyverklaring .elementor-widget-text-editor p { margin-bottom: 1em; }

body.page-cookies .elementor-widget-heading,
body.page-privacyverklaring .elementor-widget-heading { margin-top: .4em; }