.elementor-1701 .elementor-element.elementor-element-244767c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}#elementor-popup-modal-1701 .dialog-widget-content{animation-duration:1.2s;box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}#elementor-popup-modal-1701{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-1701 .dialog-message{width:640px;height:auto;}#elementor-popup-modal-1701 .dialog-close-button{display:flex;}/* Start custom CSS for shortcode, class: .elementor-element-11d73dc *//* ===== Popup overlay & card (Elementor globals) ===== */
.elementor-popup-modal.popup-zoeken {
  /* overlay: neutraal (niet afhankelijk van thema-kleur) */
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.elementor-popup-modal.popup-zoeken .dialog-widget-content {
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  padding: 28px;
  width: min(860px, 92vw);
  margin: 0 auto;

  /* neem Elementor styling over */
  background: var(--e-global-color-secondary, #fff);
  color: var(--e-global-color-text, inherit);

  /* typografie erven van theme/Elementor */
  font-family: inherit;
}

/* Close button (44x44 target) — kleuren via globals */
.elementor-popup-modal.popup-zoeken .dialog-close-button {
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;

  background: var(--e-global-color-secondary, #fff);
  border: 1px solid color-mix(in srgb, var(--e-global-color-text, #111) 20%, transparent);
  display: grid;
  place-items: center;

  color: var(--e-global-color-text, inherit);
}

/* Fallback voor browsers zonder color-mix() */
@supports not (color-mix(in srgb, #000 20%, transparent)) {
  .elementor-popup-modal.popup-zoeken .dialog-close-button {
    border-color: rgba(0,0,0,.18);
  }
}

/* Focus zichtbaar met Elementor accent */
.elementor-popup-modal.popup-zoeken .dialog-close-button:focus-visible {
  outline: 3px solid var(--e-global-color-accent, currentColor);
  outline-offset: 3px;
}

/* ===== Form layout ===== */
.a11y-search {
  margin-top: 10px;
  color: var(--e-global-color-text, inherit);
  font-family: inherit;
}

/* Label zichtbaar boven het veld (neemt Elementor font/kleuren over) */
.a11y-search label.a11y-sr-only{
  position: static !important;
  width: auto;
  height: auto;
  margin: 0 0 8px 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 0;

  display: inline-block;

  /* Typography: gebruik Elementor “Text” globals waar aanwezig */
  font-family: var(--e-global-typography-text-font-family, inherit);
  font-size: var(--e-global-typography-text-font-size, 1rem);
  font-weight: var(--e-global-typography-text-font-weight, 700);
  line-height: var(--e-global-typography-text-line-height, 1.3);
  color: var(--e-global-color-text, inherit);
}

/* Grid: label boven beide kolommen */
.a11y-search__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.a11y-search__row label{
  grid-column: 1 / -1;
}

/* Mobile: stack */
@media (max-width: 600px) {
  .a11y-search__row {
    grid-template-columns: 1fr;
  }
}

/* ===== Input styling (Elementor globals) ===== */
.a11y-search__input {
  width: 100%;
  min-height: 48px; /* target size */
  padding: 0 14px;
  border-radius: 12px;

  background: color-mix(in srgb, var(--e-global-color-secondary, #fff) 92%, #000 8%);
  border: 1px solid color-mix(in srgb, var(--e-global-color-text, #111) 22%, transparent);

  font-family: var(--e-global-typography-text-font-family, inherit);
  font-size: var(--e-global-typography-text-font-size, 1.05rem);
  font-weight: var(--e-global-typography-text-font-weight, 400);
  line-height: var(--e-global-typography-text-line-height, normal);
  color: var(--e-global-color-text, inherit);
}

/* Fallbacks zonder color-mix() */
@supports not (color-mix(in srgb, #000 20%, transparent)) {
  .a11y-search__input {
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.22);
  }
}

.a11y-search__input:focus-visible {
  outline: 3px solid var(--e-global-color-accent, currentColor);
  outline-offset: 3px;

  background: var(--e-global-color-secondary, #fff);
  border-color: color-mix(in srgb, var(--e-global-color-text, #111) 35%, transparent);
}

@supports not (color-mix(in srgb, #000 20%, transparent)) {
  .a11y-search__input:focus-visible {
    border-color: rgba(0,0,0,.35);
  }
}

/* ===== Button styling (Elementor globals) ===== */
.a11y-search__submit {
  min-height: 48px;   /* target size */
  min-width: 120px;
  padding: 0 18px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;

  /* Typography: liefst “Accent” of anders Text */
  font-family: var(--e-global-typography-accent-font-family, var(--e-global-typography-text-font-family, inherit));
  font-size: var(--e-global-typography-accent-font-size, var(--e-global-typography-text-font-size, 1rem));
  font-weight: var(--e-global-typography-accent-font-weight, 700);
  line-height: var(--e-global-typography-accent-line-height, normal);
  letter-spacing: .04em;

  background: var(--e-global-color-accent, #0f766e);
  color: var(--e-global-color-secondary, #fff);
}

.a11y-search__submit:hover {
  filter: brightness(0.95);
}

.a11y-search__submit:focus-visible {
  outline: 3px solid var(--e-global-color-accent, currentColor);
  outline-offset: 3px;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .a11y-search__submit:hover {
    filter: none;
  }
}/* End custom CSS */