.dots-bg {
  position: relative;
  background: linear-gradient(90deg, #ffffff 0%, #d6e2f7 100%);
}

.dots-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #b7c5ec 2.3px, transparent 2.6px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}

.dots-bg * {
  position: relative;
  z-index: 1;
}

.glow-bg-dark {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background-color: #14171d;
  background-image: radial-gradient(ellipse 700px 500px at 10% 15%, rgba(180, 45, 40, 0.45), transparent 60%), radial-gradient(ellipse 900px 700px at 85% 70%, rgba(70, 90, 130, 0.35), transparent 65%);
}

.glow-bg-dark > * {
  position: relative;
  z-index: 1;
}

/* Swipe the top utility bar (Dealerportaal / Over Flandria / Support) up
   and out when the header picks up Elementor's .scrolled class, reversing
   when it's removed. visibility is delayed so it also drops out of the
   keyboard tab order once fully hidden, not just visually. */
header.elementor-location-header .top-header {
  overflow: hidden;
  max-height: 60px;
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition:
    max-height 0.35s ease,
    transform 0.35s ease,
    opacity 0.3s ease,
    visibility 0s linear 0s;
}

header.elementor-location-header.scrolled .top-header {
  max-height: 0;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    max-height 0.35s ease,
    transform 0.35s ease,
    opacity 0.3s ease,
    visibility 0s linear 0.35s;
}

@media (min-width: 1025px) {
  .rem-btn {
    display: none !important;
  }
}

/* gform styles */

p.gform_required_legend {
    font-family: 'Inter';
}

.gform_wrapper.gform-theme .ginput_container input,
.gform_wrapper.gform-theme .ginput_container textarea {
  border: 1px solid #d5d7da;
  border-radius: 10px;
  box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
  color: var(--Gray-500, #717680);
  text-overflow: ellipsis;
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.gform_wrapper.gform-theme label {
  font-family: "Inter", Sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  color: var(--e-global-color-6d33ce5);
}

.gform_wrapper.gform-theme span.gform-field-label__text {
  color: var(--e-global-color-6d33ce5);
  font-family: "Inter", Sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

button#country_selector_button_3,
button#file-upload-button {
  border: 1px solid #d5d7da;
  border-radius: 10px 0 0 10px;
  box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
  color: var(--Gray-500, #717680);
  background: white;
  text-overflow: ellipsis;
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

label#country_selector_button_3_label,
label#input_1_3_visible_label,
label#input_2_3_visible_label,
label#input_3_3_visible_label,
label#input_4_3_visible_label {
  display: none;
}

input#input_1_3_visible,
input#input_2_3_visible,
input#input_3_3_visible,
input#input_4_3_visible {
  border: 1px solid #d5d7da;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
  color: var(--Gray-500, #717680);
  text-overflow: ellipsis;
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.gform-footer.gform_footer button#gform_submit_button_1,
.gform-footer.gform_footer button#gform_submit_button_2, /* 2 = Contactformulier FR */
.gform-footer.gform_footer button#gform_submit_button_3, /* 3, 4 = Bestelformulier NL / FR (dealerportaal), copies of 1 and 2 */
.gform-footer.gform_footer button#gform_submit_button_4 {
  font-family: "Inter";
  font-weight: 600;
  font-size: 16px;
  color: var(--white);
  line-height: 24px;
  padding-block-start: 8px;
  padding-block-end: 8px;
  padding-inline-start: 16px;
  padding-inline-end: 16px;
  border-radius: var(--br-10);
  border-width: 1px;
  border-color: var(--red);
  border-style: solid;
  background-color: var(--red);
  width: 100%;
}

.gform_wrapper.gform-theme input#input_1_7,
.gform_wrapper.gform-theme input#input_2_7,
.gform_wrapper.gform-theme input#input_3_7,
.gform_wrapper.gform-theme input#input_4_7 {
  border: 1px solid #d5d7da;
  border-radius: 10px;
  box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
  color: var(--Gray-500, #717680);
  text-overflow: ellipsis;
  font-family: "Inter";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 34px;
}

div.gfield_description.validation_message.gfield_validation_message {
  font-family: "Inter";
  font-size: 14px;
}

div#gform_1_validation_container,
div#gform_2_validation_container,
div#gform_3_validation_container,
div#gform_4_validation_container {
  font-family: "Inter";
  font-size: 16px;
}

span#gfield_upload_rules_1_7,
span#gfield_upload_rules_2_7,
span#gfield_upload_rules_3_7,
span#gfield_upload_rules_4_7 {
  font-family: "Inter";
  font-size: 14px;
}

/* Contact form upload (field with CSS class "fl-upload"): one card with
   cloud icon, "Klik om te uploaden of drag and drop je bestanden" and the
   allowed types. The rules line stays for screen readers only. */
.gform_wrapper.gform-theme .fl-upload .ginput_container_fileupload {
  padding: 16px 24px;
  border: 1px solid #e9eaeb;
  border-radius: 12px;
  background: #fff;
  text-align: center;
}

.gform_wrapper.gform-theme .fl-upload .gform_drop_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 4px;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
}

.gform_wrapper.gform-theme .fl-upload .gform_drop_area::before {
  content: "";
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0 calc((100% - 40px) / 2) 12px;
  border: 1px solid #d5d7da;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6.667 13.333 10 10m0 0 3.333 3.333M10 10v7.5m6.667-3.548A4.583 4.583 0 0 0 14.167 5.5a.516.516 0 0 1-.444-.252 6.25 6.25 0 1 0-9.816 7.58' stroke='%23414651' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}

.gform_wrapper.gform-theme .fl-upload .gform_drop_area::after {
  content: "PDF, PNG of JPG (max. 20 MB, max. 5 bestanden)";
  order: 3;
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: #535862;
}

/* FR site (WPML sets <html lang="fr-…">). */
html[lang^="fr"] .gform_wrapper.gform-theme .fl-upload .gform_drop_area::after {
  content: "PDF, PNG ou JPG (max. 20 Mo, max. 5 fichiers)";
}

.gform_wrapper.gform-theme .fl-upload .gform_drop_instructions {
  order: 2;
}

/* GF's theme draws this as a filled control button through its own CSS
   variables and high-specificity selectors; reset both. */
html body .gform_wrapper.gform-theme .fl-upload .gform_drop_area .gform_button_select_files,
html body .gform_wrapper.gform-theme .fl-upload .gform_drop_area .gform_button_select_files:hover,
html body .gform_wrapper.gform-theme .fl-upload .gform_drop_area .gform_button_select_files:focus {
  --gf-local-bg-color: transparent;
  --gf-local-border-color: transparent;
  --gf-local-color: var(--blue, #719bf2);
  --gf-local-shadow: none;
  order: 1;
  min-height: 0;
  height: auto;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--blue, #719bf2) !important;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}

html body .gform_wrapper.gform-theme .fl-upload .gform_drop_area .gform_button_select_files:hover {
  text-decoration: underline;
}

.gform_wrapper.gform-theme .fl-upload .gform_fileupload_rules {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gform_wrapper.gform-theme .fl-upload .ginput_preview_list:not(:empty) {
  margin-top: 12px;
  text-align: left;
  font-size: 14px;
}

/* Every Elementor button gets the same soft hover transition. Buttons with
   a link render as <a> (no transition by default), buttons without one as
   <button> (0.3s from the theme reset) — this makes them all behave alike. */
.e-button-base {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}

/* Anchor links (#opstelling, #installateurs, …) stop below the fixed
   header instead of underneath it. */
.elementor [id] {
  scroll-margin-top: 140px;
}

/* Footer language switch ([fl_lang_switch]): the other language is a link in
   the footer's own grey, not the theme's pink link colour. */
.fl-footer-bottom__lang a,
.fl-footer-bottom__lang a:hover,
.fl-footer-bottom__lang a:focus {
  color: inherit;
  text-decoration: none;
}

.fl-footer-bottom__lang a:hover {
  text-decoration: underline;
}

/* Links inside running text are underlined (design): paragraphs and list
   items in page content, and FAQ answers. Only class-less links, so
   buttons and plugin links (dealer rows, pills, …) keep their own look,
   and not in the header/footer templates. */
.elementor:not(.elementor-location-header):not(.elementor-location-footer) p a:not([class]),
.elementor:not(.elementor-location-header):not(.elementor-location-footer) li a:not([class]),
.faq__body a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Footer addresses link to Google Maps: same grey as the text, underline on hover. */
.fl-footer .fl-footer__addresses a,
.fl-footer .fl-footer__addresses a:hover,
.fl-footer .fl-footer__addresses a:focus {
  color: inherit;
  text-decoration: none;
}

.fl-footer .fl-footer__addresses a:hover {
  text-decoration: underline;
}

/* Footer on phones: "Producten" and "Algemeen" side by side, all footer text 14px/20px,
   tighter gaps (20px between the blocks and inside the addresses, 16px between the two
   columns; Elementor's generated CSS for the footer template has 32px / 24px). The logo
   and the addresses keep the full width. That grid is one column up to 640px; the extra
   class repeats make this win over it without depending on the template or widget id
   (NL and FR). */
@media (max-width: 640px) {
  .elementor-location-footer .elementor-element.elementor-element .fl-footer.fl-footer {
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
    font-size: 14px;
    line-height: 20px;
  }
  .elementor-location-footer .elementor-element.elementor-element .fl-footer.fl-footer .fl-footer__brand,
  .elementor-location-footer .elementor-element.elementor-element .fl-footer.fl-footer .fl-footer__addresses {
    grid-column: 1 / -1;
  }
  .elementor-location-footer .elementor-element.elementor-element .fl-footer.fl-footer .fl-footer__addresses {
    gap: 20px;
  }
}

/* Long button labels (FR) wrap on small screens instead of widening the page. */
@media (max-width: 767px) {
  .elementor .e-button-base {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* Buttons: the design's subtle "skeuomorphic" shadow on every button — a soft
   outer shadow, a 2px band just inside the bottom edge, and on the red
   buttons also a darker 1px inner edge. Colours and sizes stay as they are. */
.e-button-base.white-btn,
.e-button-base.white-btn-alt,
.dp-card .dp-btn {
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05), inset 0 -2px 0 rgba(10, 13, 18, 0.05);
}

.e-button-base.red-btn,
.gform-footer.gform_footer button#gform_submit_button_1,
.gform-footer.gform_footer button#gform_submit_button_2,
.gform-footer.gform_footer button#gform_submit_button_3,
.gform-footer.gform_footer button#gform_submit_button_4 {
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05), inset 0 0 0 1px rgba(10, 13, 18, 0.18), inset 0 -2px 0 rgba(10, 13, 18, 0.05);
}

/* Language switch in the header (the WPML menu item): a white button with a
   thin border, bold code and a grey chevron, like the design. Its dropdown is
   only as wide as the language names. */
/* 12px to the Contact button, as in the design (the nav's own spacing adds more). */
[data-elementor-type="header"] .elementor-nav-menu--main > ul > li.wpml-ls-menu-item {
  margin-right: -32px;
}

[data-elementor-type="header"] .elementor-nav-menu--main > ul > li.wpml-ls-menu-item > a.elementor-item {
  box-sizing: border-box;
  height: 42px;
  margin: 6px 0;
  padding: 0 19px 0 18px;
  background: #fff;
  border: 1px solid #d5d7da;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05), inset 0 -2px 0 rgba(10, 13, 18, 0.05);
  color: #414651;
  font-weight: 600;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

[data-elementor-type="header"] .elementor-nav-menu--main > ul > li.wpml-ls-menu-item > a.elementor-item:hover,
[data-elementor-type="header"] .elementor-nav-menu--main > ul > li.wpml-ls-menu-item > a.elementor-item.highlighted {
  background: #fafafa;
  border-color: #a4a7ae;
  color: #414651;
}

[data-elementor-type="header"] .elementor-nav-menu--main > ul > li.wpml-ls-menu-item > a.elementor-item .sub-arrow {
  width: auto;
  height: auto;
  margin: 0 0 0 12px;
  padding: 0;
  display: inline-flex;
  align-items: center;
}

[data-elementor-type="header"] .elementor-nav-menu--main > ul > li.wpml-ls-menu-item > a.elementor-item .sub-arrow::after {
  width: 12px;
  height: 7px;
  background-size: 12px 7px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23A4A7AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-elementor-type="header"] .elementor-widget-nav-menu .elementor-nav-menu--main > ul > li.wpml-ls-menu-item > .sub-menu.sub-menu {
  min-width: 0 !important;
  width: 100% !important;
}

/* Header links in the scrolled header: the header's own CSS (Elementor,
   post-89) fixes their colour to grey while .scrolled is set, which also
   beat the hover colour. Same near-black as at the top of the page on hover
   and for the current page (the language button keeps its own colour). */
header[data-elementor-type="header"].elementor.scrolled .header-desktop nav li.menu-item:not(.wpml-ls-menu-item) a.elementor-item:hover,
header[data-elementor-type="header"].elementor.scrolled .header-desktop nav li.menu-item:not(.wpml-ls-menu-item) a.elementor-item:focus-visible,
header[data-elementor-type="header"].elementor.scrolled .header-desktop nav li.menu-item:not(.wpml-ls-menu-item) a.elementor-item.highlighted,
header[data-elementor-type="header"].elementor.scrolled .header-desktop nav li.menu-item:not(.wpml-ls-menu-item) a.elementor-item.elementor-item-active {
  color: #181d27;
}

/* Language button text: darker than the nav grey, also while scrolled (these
   selectors outrank the widget's own colour rule and the scrolled rule). */
header[data-elementor-type="header"] .elementor-widget-nav-menu .elementor-nav-menu--main > ul > li.menu-item.wpml-ls-menu-item > a.elementor-item,
header[data-elementor-type="header"].elementor.scrolled .header-desktop nav li.menu-item.wpml-ls-menu-item > a.elementor-item {
  color: #414651;
}

/* Header on narrower desktops: the menu got longer ("Voor Professionals"),
   so tighten the item padding and never let the logo shrink. */
@media (min-width: 1025px) and (max-width: 1279px) {
  [data-elementor-type="header"] .elementor-nav-menu--main > ul > li > a.elementor-item {
    padding-left: 14px;
    padding-right: 14px;
  }
}

[data-elementor-type="header"] img[src*="flandria_logo"],
[data-elementor-type="header"] a:has(> img[src*="flandria_logo"]) {
  flex-shrink: 0;
}

/* Legal pages (privacy, cookies, legal notice): plain text pages. */
.fl-legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 168px 20px 80px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: #414651;
}

.fl-legal h1 {
  margin: 0 0 8px;
  font-size: 44px;
  line-height: 52px;
  font-weight: 700;
  color: #a82217;
}

@media (max-width: 767px) {
  .fl-legal {
    padding-top: 128px;
  }

  .fl-legal h1 {
    font-size: 32px;
    line-height: 40px;
  }
}

.fl-legal h2 {
  margin: 40px 0 12px;
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
  color: #181d27;
}

.fl-legal p,
.fl-legal ul {
  margin: 0 0 16px;
}

.fl-legal a {
  color: #a82217;
  text-decoration: underline;
}

.fl-legal .fl-legal__updated {
  color: #717680;
  font-size: 14px;
}

.fl-legal table {
  width: 100%;
  margin: 16px 0 24px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 22px;
}

.fl-legal th,
.fl-legal td {
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid #d5d7da;
  text-align: left;
  vertical-align: top;
  background: transparent;
}

.fl-legal thead th {
  color: #181d27;
  font-weight: 600;
  border-bottom: 1px solid #a4a7ae;
}

.fl-legal tbody tr:nth-child(odd) td,
.fl-legal tbody tr:hover td {
  background: transparent;
}

.fl-legal .fl-todo {
  background: #fff3b0;
  padding: 0 4px;
  border-radius: 3px;
}

@media (max-width: 767px) {
  .fl-legal table,
  .fl-legal thead,
  .fl-legal tbody,
  .fl-legal tr,
  .fl-legal th,
  .fl-legal td {
    display: block;
  }

  .fl-legal thead {
    display: none;
  }

  .fl-legal tr {
    padding: 8px 0;
    border-bottom: 1px solid #d5d7da;
  }

  .fl-legal td {
    border: none;
    padding: 4px 0;
  }
}

/* Contact form confirmation message (form 1 = NL, form 2 = FR) */
div#gform_confirmation_message_1,
div#gform_confirmation_message_2 {
    font-family: 'Inter';
    text-align: center;
}

/* Contact page: once the form has been sent, hide the intro line above it
   ("Vul dan dit formulier in…" / "Remplissez ce formulaire…"): the confirmation
   already says we will answer. The line (Elementor widget 33ff214) sits in the same
   container (adc7d9d) as the form, on the NL and the FR page. :has() also reacts
   when Gravity Forms swaps the form for its confirmation without a reload. */
.elementor-element-adc7d9d:has(.gform_confirmation_wrapper, .gform_confirmation_message) > [data-id="33ff214"] {
    display: none;
}

/* Upload errors under the contact form's file field */
.gform_wrapper.gform-theme .gfield_description.gfield_validation_message,
.gform_wrapper.gform-theme .gfield_validation_message,
.gform_wrapper.gform-theme .validation_message,
.gform_wrapper.gform-theme li.gfield_validation_message {
    font-family: 'Inter', sans-serif;
}

/* Dealerportaal order form (shortcode widget with class "dp-order-form", Gravity Forms 3 NL / 4 FR):
   as wide as the text above it instead of the full section. */
.elementor .elementor-element.elementor-widget.dp-order-form {
  width: 100%;
  max-width: 760px !important; /* Elementor's generated page CSS sets max-width 100% on the widget */
  margin: 32px auto 0;
  text-align: left;
}