/*!
 * Van Abeelen Leadbot — styles v1.0.0
 * Kleuren komen als CSS-variabelen van de widget (inline op .vabot).
 * Veel !important: het Elementor-kit en Hello-thema stylen button/a/input globaal.
 */

/* Verborgen pool met Elementor Pro formulier-templates + vertaalde links */
.vabot-forms,
template.vabot-links {
  display: none !important;
}

.vabot {
  --vb-primary: #ff8a2a;
  --vb-accent: #1e74b9;
  --vb-navy: #005179;
  --vb-primary-2: #e8721a;
  --vb-primary-soft: #fff1e6;
  --vb-accent-2: #175f99;
  --vb-ink: #2b2f33;
  --vb-mute: #66717e;
  --vb-line: #e3e8ef;
  --vb-green: #22a75a;
  --vb-amber: #f39c12;
  --vb-grad: linear-gradient(140deg, #d1d810 0%, #62b532 42%, #1c99d7 100%);
  --vb-shadow: 0 14px 32px -14px rgba(0, 45, 70, .42), 0 3px 10px -4px rgba(0, 45, 70, .16);
  --vb-shadow-sm: 0 6px 16px -9px rgba(0, 45, 70, .38);
  --vb-x: 20px;
  --vb-y: 20px;
  --vb-fab: 64px;
  --vb-font: "General Sans", var(--e-global-typography-text-font-family, ui-sans-serif), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  position: fixed;
  right: var(--vb-x);
  bottom: calc(var(--vb-y) + env(safe-area-inset-bottom, 0px));
  z-index: 99998;
  width: var(--vb-fab);
  height: var(--vb-fab);
  pointer-events: none;
  font-family: var(--vb-font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--vb-ink);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@supports (color: color-mix(in srgb, red, blue)) {
  .vabot {
    --vb-primary-2: color-mix(in srgb, var(--vb-primary), #000 10%);
    --vb-primary-soft: color-mix(in srgb, var(--vb-primary), #fff 88%);
    --vb-accent-2: color-mix(in srgb, var(--vb-accent), #000 14%);
  }
}

.vabot--left {
  right: auto;
  left: var(--vb-x);
}

.vabot,
.vabot * {
  box-sizing: border-box;
}

.vabot button,
.vabot a,
.vabot input,
.vabot textarea,
.vabot select {
  font-family: var(--vb-font) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.vabot svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Gesprek (zwevende kaartjes) ---------- */

.vabot__conv {
  position: absolute;
  right: 0;
  bottom: calc(var(--vb-fab) + 14px);
  width: 392px;
  max-width: calc(100vw - 2 * var(--vb-x));
  height: min(620px, calc(100vh - var(--vb-fab) - var(--vb-y) - 40px));
  height: min(620px, calc(100dvh - var(--vb-fab) - var(--vb-y) - 40px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 6px 6px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 45, 70, .2) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .3s ease, visibility 0s linear .3s;
}

.vabot--left .vabot__conv {
  right: auto;
  left: 0;
  padding: 26px 12px 6px 6px;
}

.vabot__conv:focus {
  outline: none;
}

/* Kaartjes onderaan uitlijnen zolang er weinig inhoud is */
.vabot__conv::before {
  content: "";
  margin-top: auto;
}

.vabot.is-open .vabot__conv {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s ease, transform .3s ease, visibility 0s;
}

.vabot.is-open .vabot__conv > * {
  pointer-events: auto;
}

.vabot__conv::-webkit-scrollbar {
  width: 6px;
}

.vabot__conv::-webkit-scrollbar-thumb {
  background: rgba(0, 45, 70, .2);
  border-radius: 6px;
}

/* ---------- Chatbericht ---------- */

.vabot__msg {
  position: relative;
  flex: 0 0 auto;
  align-self: flex-start;
  max-width: 88%;
  margin: 0;
  padding: 14px 16px;
  background: #fff;
  color: var(--vb-ink);
  border-radius: 20px 20px 20px 6px;
  box-shadow: var(--vb-shadow);
  font-size: 14.5px;
  line-height: 1.55;
  animation: vabotPop .34s backwards;
}

.vabot .vabot__msg p {
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  font-family: inherit !important;
}

.vabot .vabot__msg p:last-child {
  margin-bottom: 0 !important;
}

.vabot .vabot__msg p.vabot__b {
  font-weight: 600 !important;
  color: var(--vb-navy) !important;
}

.vabot__msg--first {
  margin-left: 38px;
  margin-top: 4px;
  padding-top: 13px;
}

.vabot--left .vabot__msg--first {
  margin-left: 38px;
}

/* Typindicator */
.vabot__typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 16px 18px;
}

.vabot__typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c3ccd8;
  animation: vabotBlink 1s infinite ease-in-out;
}

.vabot__typing span:nth-child(2) { animation-delay: .15s; }
.vabot__typing span:nth-child(3) { animation-delay: .3s; }

/* Avatar */
.vabot__ava {
  position: absolute;
  left: -38px;
  top: -14px;
  width: 50px;
  height: 50px;
}

.vabot .vabot__ava img {
  display: block;
  width: 50px !important;
  height: 50px !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 3px solid #fff !important;
  box-shadow: 0 4px 12px rgba(0, 45, 70, .25) !important;
  background: #e9edf2;
}

.vabot__ava.is-fallback img {
  display: none;
}

.vabot__ava.is-fallback::after {
  content: attr(data-initial);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--vb-grad);
  color: #fff;
  font-weight: 600;
  font-size: 18px;
}

.vabot__dot {
  position: absolute;
  right: 1px;
  bottom: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  background: var(--vb-green);
}

.vabot__dot.is-closed {
  background: var(--vb-amber);
}

/* Kop: Daniëlle › Van Abeelen */
.vabot__hdr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 2px;
  font-size: 15px;
  line-height: 1.3;
}

.vabot__nm {
  color: var(--vb-primary);
  font-weight: 600;
}

.vabot__ch {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #eef1f5;
  color: #95a1af;
  font-size: 12px;
  line-height: 1;
}

.vabot__br {
  color: var(--vb-navy);
  font-weight: 600;
}

.vabot__sub {
  margin: 0 0 9px;
  color: var(--vb-mute);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
}

.vabot__status {
  display: flex;
  align-items: center;
  gap: 7px;
}

.vabot__status i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vb-green);
  box-shadow: 0 0 0 3px rgba(34, 167, 90, .15);
}

.vabot__status.is-closed i {
  background: var(--vb-amber);
  box-shadow: 0 0 0 3px rgba(243, 156, 18, .16);
}

/* ---------- Keuzes ---------- */

.vabot__opts {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin: 2px 0;
}

.vabot--left .vabot__opts--stack {
  align-items: flex-end;
}

.vabot__opts--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.vabot__opts--cards {
  align-items: stretch;
}

.vabot .vabot__pill {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 0 !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 11px 17px 11px 13px !important;
  background: #fff !important;
  color: var(--vb-ink) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  box-shadow: var(--vb-shadow) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: normal !important;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, opacity .2s ease, border-color .15s ease;
  animation: vabotPop .3s backwards;
}

.vabot .vabot__pill:hover {
  transform: translateY(-2px);
  border-color: var(--vb-primary-soft) !important;
  background: #fff !important;
  color: var(--vb-ink) !important;
}

.vabot .vabot__pill:active {
  transform: translateY(0);
}

.vabot .vabot__pill:focus {
  outline: none;
}

.vabot .vabot__pill:focus-visible {
  outline: 2px solid var(--vb-primary) !important;
  outline-offset: 2px;
}

.vabot__ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  background: var(--vb-primary-soft);
  color: var(--vb-primary);
}

.vabot__txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vabot__lab {
  overflow-wrap: anywhere;
}

.vabot__subl {
  margin-top: 2px;
  color: var(--vb-mute);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
}

.vabot__tag {
  flex: 0 0 auto;
  margin-left: 2px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--vb-primary-soft);
  color: var(--vb-primary-2);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
}

.vabot__tail {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-left: auto;
  padding-left: 2px;
  color: #9aa6b4;
  transition: transform .15s ease, color .15s ease;
}

.vabot .vabot__pill:hover .vabot__tail {
  color: var(--vb-primary);
  transform: translateX(2px);
}

.vabot__opts--grid .vabot__pill {
  width: 100%;
}

.vabot__opts--grid .vabot__pill.is-wide {
  grid-column: 1 / -1;
}

.vabot__opts--cards .vabot__pill,
.vabot .vabot__pill--block {
  width: 100%;
  border-radius: 16px !important;
  padding: 12px 14px 12px 12px !important;
}

/* Varianten */
.vabot .vabot__pill--blue,
.vabot .vabot__pill--blue:hover {
  background: var(--vb-accent) !important;
  color: #fff !important;
}

.vabot .vabot__pill--blue:hover {
  background: var(--vb-accent-2) !important;
}

.vabot .vabot__pill--blue .vabot__ic {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.vabot .vabot__pill--blue .vabot__tail,
.vabot .vabot__pill--blue:hover .vabot__tail {
  color: rgba(255, 255, 255, .85);
}

.vabot .vabot__pill--call,
.vabot .vabot__pill--call:hover {
  background: var(--vb-navy) !important;
  color: #fff !important;
}

.vabot .vabot__pill--call .vabot__ic {
  background: var(--vb-primary);
  color: #fff;
}

.vabot .vabot__pill--call .vabot__subl {
  color: rgba(255, 255, 255, .78);
}

.vabot .vabot__pill--cta,
.vabot .vabot__pill--cta:hover {
  background: var(--vb-primary) !important;
  color: #fff !important;
}

.vabot .vabot__pill--cta:hover {
  background: var(--vb-primary-2) !important;
}

.vabot .vabot__pill--cta .vabot__ic {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

/* Gekozen antwoord = jouw "bericht" in oranje */
.vabot .vabot__pill.is-selected,
.vabot .vabot__pill.is-selected:hover {
  background: var(--vb-primary) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px -10px rgba(0, 45, 70, .5) !important;
  transform: none;
  cursor: default;
}

.vabot .vabot__pill.is-selected .vabot__ic {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

.vabot .vabot__pill.is-selected .vabot__subl,
.vabot .vabot__pill.is-selected .vabot__tail {
  color: rgba(255, 255, 255, .85);
}

.vabot .vabot__pill.is-selected .vabot__tag {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

/* Andere opties na een keuze: gedempt (maar dekkend, de pagina eronder
   mag niet doorschijnen) en je kunt nog van keuze wisselen */
.vabot .vabot__opts.is-answered .vabot__pill:not(.is-selected) {
  background: #f3f5f8 !important;
  color: #8a95a2 !important;
  box-shadow: var(--vb-shadow-sm) !important;
}

.vabot .vabot__opts.is-answered .vabot__pill:not(.is-selected) .vabot__ic,
.vabot .vabot__opts.is-answered .vabot__pill:not(.is-selected) .vabot__tag {
  background: #e7ebf0;
  color: #9aa5b1;
}

.vabot .vabot__opts.is-answered .vabot__pill:not(.is-selected) .vabot__subl,
.vabot .vabot__opts.is-answered .vabot__pill:not(.is-selected) .vabot__tail {
  color: #a3adb8;
}

.vabot .vabot__opts.is-answered .vabot__pill:not(.is-selected):hover,
.vabot .vabot__opts.is-answered .vabot__pill:not(.is-selected):focus-visible {
  background: #fff !important;
  color: var(--vb-ink) !important;
}

/* ---------- Formulier-slot ---------- */

.vabot__formslot {
  flex: 0 0 auto;
  align-self: stretch;
  padding: 16px 16px 14px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--vb-shadow);
  animation: vabotPop .34s backwards;
}

.vabot__formslot.is-done {
  display: none;
}

.vabot__formhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--vb-line);
}

.vabot__formtitles {
  min-width: 0;
}

.vabot__formtitle {
  color: var(--vb-navy);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.vabot__chip {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--vb-primary-soft);
  color: var(--vb-primary-2);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

.vabot .vabot__back {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  margin: 0 !important;
  padding: 5px 9px !important;
  min-height: 0 !important;
  background: #f3f5f8 !important;
  color: var(--vb-mute) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  cursor: pointer;
}

.vabot .vabot__back:hover {
  background: #e9edf2 !important;
  color: var(--vb-navy) !important;
}

.vabot .vabot__back svg {
  width: 13px;
  height: 13px;
}

.vabot__formfoot {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--vb-navy) !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
}

.vabot__formfoot svg {
  width: 15px;
  height: 15px;
  transition: transform .15s ease;
}

.vabot__formfoot:hover svg {
  transform: translateX(3px);
}

.vabot .vabot__fine {
  margin: 10px 0 0 !important;
  color: #8b95a1 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.vabot .vabot__fine a {
  color: inherit !important;
  text-decoration: underline !important;
}

/* Elementor Pro formulier binnen de bot */
.vabot__formslot .vabot-form,
.vabot__formslot .elementor,
.vabot__formslot .e-con,
.vabot__formslot .elementor-widget-form {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  overflow: visible !important;
  transform: none !important;
  animation: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

.vabot__formslot .elementor-form-fields-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -5px !important;
}

.vabot__formslot .elementor-field-group {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  margin: 0 0 12px !important;
  padding: 0 5px !important;
}

.vabot__formslot .elementor-field-group.elementor-col-50,
.vabot__formslot .elementor-field-group.elementor-sm-50 {
  width: 50% !important;
}

.vabot__formslot .elementor-field-group.elementor-col-100 {
  width: 100% !important;
}

.vabot__formslot .elementor-field-type-hidden,
.vabot__formslot .elementor-field-type-honeypot {
  display: none !important;
}

.vabot__formslot .elementor-field-label {
  display: block !important;
  width: 100%;
  margin: 0 0 5px !important;
  padding: 0 !important;
  color: var(--vb-navy) !important;
  font-family: var(--vb-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.vabot__formslot .elementor-mark-required .elementor-field-label::after {
  content: "*";
  padding-left: .2em;
  color: var(--vb-primary) !important;
}

.vabot__formslot .elementor-field-type-acceptance > .elementor-field-label {
  display: none !important;
}

.vabot__formslot .elementor-field-textual,
.vabot__formslot input[type="text"],
.vabot__formslot input[type="email"],
.vabot__formslot input[type="tel"],
.vabot__formslot textarea,
.vabot__formslot select {
  display: block;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 13px !important;
  background: #fff !important;
  color: var(--vb-ink) !important;
  border: 1.5px solid var(--vb-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-family: var(--vb-font) !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

.vabot__formslot textarea {
  resize: vertical;
  min-height: 84px !important;
}

.vabot__formslot .elementor-field-textual::placeholder {
  color: #9aa5b1 !important;
  opacity: 1;
}

.vabot__formslot .elementor-field-textual:focus,
.vabot__formslot textarea:focus {
  outline: none !important;
  border-color: var(--vb-primary) !important;
  box-shadow: 0 0 0 3px var(--vb-primary-soft) !important;
}

.vabot__formslot .elementor-error .elementor-field-textual {
  border-color: #e04b3c !important;
}

/* Upload (CV) */
.vabot__formslot input[type="file"] {
  display: block;
  width: 100% !important;
  padding: 8px !important;
  background: #f7f9fb !important;
  color: var(--vb-mute) !important;
  border: 1.5px dashed #cdd5df !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  cursor: pointer;
}

.vabot__formslot input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 7px 13px;
  background: #fff;
  color: var(--vb-navy);
  border: 1px solid var(--vb-line);
  border-radius: 999px;
  font-family: var(--vb-font);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

/* Akkoord-vinkje */
.vabot__formslot .elementor-field-type-acceptance .elementor-field-subgroup {
  display: block !important;
  width: 100%;
}

.vabot__formslot .elementor-field-type-acceptance .elementor-field-option {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  margin: 0 !important;
}

.vabot__formslot .elementor-field-type-acceptance input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px !important;
  height: 18px !important;
  margin: 1px 0 0 !important;
  accent-color: var(--vb-primary);
  cursor: pointer;
}

.vabot__formslot .elementor-field-type-acceptance label {
  margin: 0 !important;
  color: var(--vb-mute) !important;
  font-family: var(--vb-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  cursor: pointer;
}

.vabot__formslot .elementor-field-type-acceptance label a {
  color: var(--vb-navy) !important;
  text-decoration: underline !important;
}

/* Verstuurknop in de stijl van de site (pil, oranje) */
.vabot__formslot .e-form__buttons,
.vabot__formslot .elementor-field-type-submit {
  width: 100% !important;
  margin-bottom: 0 !important;
}

.vabot__formslot .elementor-button[type="submit"],
.vabot__formslot button[type="submit"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  min-height: 0 !important;
  margin: 2px 0 0 !important;
  padding: 13px 22px !important;
  background: var(--vb-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px -12px var(--vb-primary) !important;
  font-family: var(--vb-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease !important;
}

.vabot__formslot .elementor-button[type="submit"]:hover,
.vabot__formslot button[type="submit"]:hover {
  background: var(--vb-primary-2) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.vabot__formslot .elementor-button[type="submit"] .elementor-button-text,
.vabot__formslot .elementor-button[type="submit"] .elementor-button-content-wrapper {
  color: #fff !important;
  font: inherit !important;
}

.vabot__formslot .elementor-message {
  width: 100%;
  margin: 8px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.vabot__formslot .elementor-message::before {
  display: none !important;
}

.vabot__formslot .elementor-message-success {
  display: none !important;
}

.vabot__formslot .elementor-message-danger {
  color: #c73a2c !important;
}

.vabot__formslot .elementor-help-inline {
  margin-top: 4px !important;
  font-size: 12px !important;
}

/* ---------- Bedankt / fallback ---------- */

.vabot__success {
  flex: 0 0 auto;
  align-self: stretch;
  padding: 22px 18px 18px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--vb-shadow);
  text-align: center;
  animation: vabotPop .34s backwards;
}

.vabot__check {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  padding: 15px;
  border-radius: 50%;
  background: linear-gradient(140deg, #62b532, #22a75a);
  color: #fff;
  box-shadow: 0 12px 24px -12px rgba(34, 167, 90, .8);
}

.vabot__success--warn .vabot__check {
  background: var(--vb-primary);
  box-shadow: 0 12px 24px -12px var(--vb-primary);
}

.vabot .vabot__success-title {
  margin: 0 0 5px !important;
  color: var(--vb-navy) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.vabot .vabot__success-text {
  margin: 0 0 16px !important;
  color: var(--vb-mute) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.vabot__success .vabot__pill--block {
  justify-content: center;
  margin: 0 0 12px !important;
}

.vabot__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.vabot .vabot__btn {
  appearance: none;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 17px !important;
  background: #fff !important;
  color: var(--vb-navy) !important;
  border: 1px solid #dfe5ec !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 16px -11px rgba(0, 45, 70, .45) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}

.vabot .vabot__btn:hover {
  transform: translateY(-1px);
  border-color: #c5d0dc !important;
  background: #fff !important;
  color: var(--vb-navy) !important;
}

.vabot .vabot__btn svg {
  width: 15px;
  height: 15px;
}

.vabot .vabot__btn--ghost,
.vabot .vabot__btn--ghost:hover {
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--vb-mute) !important;
}

/* ---------- Teaser ---------- */

.vabot__teaser {
  position: absolute;
  right: calc(var(--vb-fab) + 12px);
  bottom: 4px;
  width: max-content;
  max-width: 262px;
  padding: 11px 34px 12px 15px;
  background: #fff;
  color: var(--vb-ink);
  border-radius: 18px 18px 6px 18px;
  box-shadow: var(--vb-shadow);
  cursor: pointer;
  pointer-events: auto;
  animation: vabotPop .34s backwards;
}

.vabot--left .vabot__teaser {
  right: auto;
  left: calc(var(--vb-fab) + 12px);
  border-radius: 18px 18px 18px 6px;
}

.vabot__teaser-who {
  display: block;
  margin-bottom: 2px;
  color: var(--vb-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.vabot__teaser-txt {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
}

.vabot .vabot__teaser-x {
  appearance: none;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px !important;
  height: 24px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 5px !important;
  background: transparent !important;
  color: #9aa6b4 !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  cursor: pointer;
}

.vabot .vabot__teaser-x:hover {
  background: #f1f4f7 !important;
  color: var(--vb-navy) !important;
}

.vabot.is-open .vabot__teaser {
  display: none;
}

/* ---------- Floating button met foto ---------- */

.vabot .vabot__fab {
  appearance: none;
  position: absolute;
  right: 0;
  bottom: 0;
  display: block !important;
  width: var(--vb-fab) !important;
  height: var(--vb-fab) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 3px !important;
  background: var(--vb-grad) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 14px 30px -10px rgba(0, 45, 70, .55), 0 4px 12px -4px rgba(0, 45, 70, .3) !important;
  cursor: pointer;
  pointer-events: auto;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.vabot--left .vabot__fab {
  right: auto;
  left: 0;
}

.vabot .vabot__fab:hover {
  transform: translateY(-2px) scale(1.05);
  background: var(--vb-grad) !important;
}

.vabot .vabot__fab:active {
  transform: scale(.97);
}

.vabot .vabot__fab:focus {
  outline: none;
}

.vabot .vabot__fab:focus-visible {
  outline: 3px solid var(--vb-primary) !important;
  outline-offset: 3px;
}

.vabot__fab-photo,
.vabot__fab-chat,
.vabot__fab-close {
  position: absolute;
  inset: 3px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  transition: opacity .22s ease, transform .28s ease;
}

.vabot__fab-photo {
  border: 2px solid #fff;
  background: #e9edf2;
}

.vabot .vabot__fab-photo img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: cover;
}

.vabot__fab-chat {
  padding: 15px;
  background: var(--vb-primary);
  opacity: 0;
}

.vabot__fab.is-fallback .vabot__fab-photo {
  opacity: 0;
}

.vabot__fab.is-fallback .vabot__fab-chat {
  opacity: 1;
}

.vabot__fab-close {
  padding: 17px;
  background: var(--vb-primary);
  opacity: 0;
  transform: rotate(-90deg) scale(.6);
}

.vabot.is-open .vabot__fab-photo,
.vabot.is-open .vabot__fab-chat {
  opacity: 0;
  transform: scale(.7);
}

.vabot.is-open .vabot__fab-close {
  opacity: 1;
  transform: none;
}

/* Aandachtspuls zolang de teaser zichtbaar is */
.vabot.is-nudge .vabot__fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: vabotPulse 1.9s ease-out infinite;
}

.vabot__badge {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 11px;
  background: #e8483b;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  transition: opacity .2s ease, transform .2s ease;
}

.vabot.is-open .vabot__badge,
.vabot.is-seen .vabot__badge {
  opacity: 0;
  transform: scale(.4);
}

/* Mobiele achtergrond */
.vabot__scrim {
  display: none;
}

/* ---------- Animaties ---------- */

@keyframes vabotPop {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes vabotBlink {
  0%, 80%, 100% { opacity: .35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

@keyframes vabotPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 138, 42, .55); }
  100% { box-shadow: 0 0 0 16px rgba(255, 138, 42, 0); }
}

/* ---------- Mobiel ---------- */

@media (max-width: 767px) {
  .vabot {
    --vb-x: 14px !important;
    --vb-y: 14px !important;
    --vb-fab: 60px;
  }

  .vabot__scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 30, 45, .28);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    touch-action: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }

  .vabot.is-open .vabot__scrim {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .25s ease, visibility 0s;
  }

  .vabot__conv,
  .vabot--left .vabot__conv {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(var(--vb-fab) + var(--vb-y) + 12px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    height: min(580px, calc(100vh - 120px));
    height: min(580px, calc(100dvh - 120px));
    padding: 26px 4px 4px 10px;
  }

  .vabot__msg {
    max-width: 86%;
  }

  .vabot__teaser {
    max-width: calc(100vw - var(--vb-fab) - 2 * var(--vb-x) - 20px);
  }

  /* iOS zoomt in op velden kleiner dan 16px */
  .vabot__formslot .elementor-field-textual,
  .vabot__formslot input[type="text"],
  .vabot__formslot input[type="email"],
  .vabot__formslot input[type="tel"],
  .vabot__formslot textarea,
  .vabot__formslot select {
    font-size: 16px !important;
  }
}

@media (max-width: 380px) {
  .vabot .vabot__pill,
  .vabot__msg {
    font-size: 14px !important;
  }

  .vabot__formslot .elementor-field-group.elementor-col-50,
  .vabot__formslot .elementor-field-group.elementor-sm-50 {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vabot *,
  .vabot *::before,
  .vabot *::after {
    animation: none !important;
    transition: none !important;
  }
}