/* ============================================================
   EasyAutoVerkoop — 07-integrations.css — Gravity Forms-skin
   Versie 1.3.1 · 2026-09-14
   Vervangt de GF-regels uit de oude style.css. Alleen kleur, typografie,
   spacing en border; GF's eigen layout (gravity-theme) blijft staan.
   Form 1 = kentekencheck (in de hero-kaart), form 2 = vervolgformulier
   (meerdere pagina's, left_label).
   ============================================================ */

/* === Basis === */

.gform_wrapper.gravity-theme .gform_fields { gap: var(--eav-space-s) var(--eav-space-m); }

.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme legend.gfield_label {
  font-weight: 700;
  font-size: var(--eav-fs-300);
  color: var(--eav-clr-text);
  line-height: var(--eav-lh-snug);
  margin-block-end: var(--eav-space-2xs);
}
.gform_wrapper.gravity-theme .gfield_required {
  color: var(--eav-clr-text-muted);
  font-size: var(--eav-fs-300);
  font-weight: 400;
  font-style: normal;
  margin-inline-start: 0.35em;
}
.gform_wrapper.gravity-theme .gfield_description {
  font-size: var(--eav-fs-300);
  color: var(--eav-clr-text-muted);
}

/* Velden */
.gform_wrapper.gravity-theme .ginput_container input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]),
.gform_wrapper.gravity-theme .ginput_container select,
.gform_wrapper.gravity-theme .ginput_container textarea {
  inline-size: 100%;
  block-size: auto;
  min-block-size: 52px;
  padding-block: var(--eav-space-xs);
  padding-inline: var(--eav-space-s);
  font: inherit;
  font-size: var(--eav-fs-400);
  line-height: 1.3;
  color: var(--eav-clr-text);
  background-color: var(--eav-clr-bg);
  border: 2px solid var(--eav-clr-border-strong);
  border-radius: var(--eav-radius-md);
  box-shadow: none;
}
.gform_wrapper.gravity-theme .ginput_container textarea { min-block-size: 8rem; }
.gform_wrapper.gravity-theme .ginput_container input::placeholder { color: var(--eav-clr-text-muted); }
.gform_wrapper.gravity-theme .ginput_container input:focus-visible,
.gform_wrapper.gravity-theme .ginput_container select:focus-visible,
.gform_wrapper.gravity-theme .ginput_container textarea:focus-visible {
  outline: 2px solid var(--eav-clr-focus);
  outline-offset: 2px;
  border-color: var(--eav-clr-primary);
}
.gform_wrapper.gravity-theme .ginput_container select {
  appearance: none;
  padding-inline-end: var(--eav-space-l);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 50%, calc(100% - 0.75rem) 50%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}

/* Keuzes */
.gform_wrapper.gravity-theme .gchoice { display: flex; align-items: center; gap: var(--eav-space-xs); }
.gform_wrapper.gravity-theme .gchoice label {
  font-size: var(--eav-fs-400);
  line-height: var(--eav-lh-snug);
  color: var(--eav-clr-text);
  max-inline-size: none;
}
.gform_wrapper.gravity-theme .gchoice input { accent-color: var(--eav-clr-primary); inline-size: 1.25rem; block-size: 1.25rem; }

/* Foutstatus */
.gform_wrapper.gravity-theme .gfield_error .ginput_container input,
.gform_wrapper.gravity-theme .gfield_error .ginput_container select,
.gform_wrapper.gravity-theme .gfield_error .ginput_container textarea {
  border-color: color-mix(in oklch, red 70%, var(--eav-clr-text));
}
.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message {
  font-size: var(--eav-fs-300);
  color: color-mix(in oklch, red 70%, var(--eav-clr-text));
  background: transparent;
  border: 0;
  padding: 0;
  margin-block-start: var(--eav-space-2xs);
}
.gform_wrapper.gravity-theme .gform_validation_errors {
  padding: var(--eav-space-s) var(--eav-space-m);
  border: 1px solid color-mix(in oklch, red 40%, var(--eav-clr-border));
  border-radius: var(--eav-radius-md);
  background-color: var(--eav-clr-bg-alt);
  box-shadow: none;
}

/* Knoppen: zelfde recept als Eav-button-accent */
.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_page_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_page_footer input[type="button"],
.gform_wrapper.gravity-theme .gform_footer button,
.gform_wrapper.gravity-theme .gform_page_footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 56px;
  padding-block: var(--eav-space-xs);
  padding-inline: var(--eav-space-l);
  border: 1px solid transparent;
  border-radius: var(--eav-radius-pill);
  font-family: var(--eav-ff-body);
  font-size: var(--eav-fs-500);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  background-color: var(--eav-clr-accent);
  background-image: var(--eav-grad-accent);
  color: var(--eav-clr-text-on-accent);
  box-shadow: var(--eav-shadow-md);
}
.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:is(:hover, :focus-visible),
.gform_wrapper.gravity-theme .gform_page_footer input[type="submit"]:is(:hover, :focus-visible),
.gform_wrapper.gravity-theme .gform_page_footer input[type="button"]:is(:hover, :focus-visible),
.gform_wrapper.gravity-theme .gform_footer button:is(:hover, :focus-visible),
.gform_wrapper.gravity-theme .gform_page_footer button:is(:hover, :focus-visible) {
  background-image: none;
  background-color: var(--eav-clr-accent-hover);
  color: var(--eav-clr-text-on-accent);
}
/* 'Vorige' in het meerpagina-formulier: neutraal */
.gform_wrapper.gravity-theme .gform_page_footer .gform_previous_button {
  background-image: none;
  background-color: transparent;
  color: var(--eav-clr-text);
  border-color: var(--eav-clr-border-strong);
  box-shadow: none;
}
.gform_wrapper.gravity-theme .gform_footer,
.gform_wrapper.gravity-theme .gform_page_footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eav-space-s);
  margin-block-start: var(--eav-space-m);
  padding: 0;
}
.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_page_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_page_footer input[type="button"],
.gform_wrapper.gravity-theme .gform_body .button {
  inline-size: 100%;
  max-inline-size: 100%;
  box-sizing: border-box;
  position: static;
}

/* === Form 1: kentekencheck in de hero-kaart ===
   De .ginput_container van veld 1 wordt de plaat (Eav-plate-lg-recept),
   de strip met landcode komt uit ::before, het GF-input is het tekstdeel. */
.Eav-glass .gform_wrapper.gravity-theme .gform_fields { gap: var(--eav-space-s); }
/* Geen gereserveerde hoogte: de kaart groeit pas als het script velden toont */
.Eav-glass .gform_wrapper,
.Eav-glass .gform_wrapper .gform_body,
.Eav-glass .gform_wrapper .gform_page,
.Eav-glass .gform_wrapper .gform_page_fields {
  min-block-size: 0;
  block-size: auto;
}

.gform_wrapper.gravity-theme #field_1_1 .ginput_container {
  display: flex;
  overflow: clip;
  border: 3px solid var(--eav-raw-ink);
  border-radius: var(--eav-radius-md);
  background-color: var(--eav-plate-yellow);
  block-size: 60px;
  box-shadow: var(--eav-shadow-sm);
}
.gform_wrapper.gravity-theme #field_1_1 .ginput_container::before {
  content: "NL";
  flex: 0 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-block-end: 6px;
  background-color: var(--eav-plate-blue);
  color: var(--eav-raw-paper);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1;
}
.gform_wrapper.gravity-theme #field_1_1 .ginput_container input#input_1_1 {
  flex: 1 1 auto;
  min-block-size: 100%;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--eav-raw-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding-inline: var(--eav-space-xs);
  box-shadow: none;
}
.gform_wrapper.gravity-theme #field_1_1 .ginput_container input#input_1_1::placeholder {
  color: color-mix(in oklch, var(--eav-raw-ink) 45%, var(--eav-plate-yellow));
}
.gform_wrapper.gravity-theme #field_1_1 .ginput_container:has(input:focus-visible) {
  outline: 3px solid var(--eav-clr-focus);
  outline-offset: 3px;
}
.gform_wrapper.gravity-theme #field_1_1 .ginput_container input#input_1_1:focus-visible {
  outline: none;
  border-color: transparent;
}

/* Knoppen die het kenteken-script in het formulier zet (o.a. 'Zoek mijn auto') */
.Eav-glass .gform_wrapper button:not([type="submit"]),
.Eav-glass .gform_wrapper input[type="button"],
.Eav-glass .gform_wrapper .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding-block: var(--eav-space-xs);
  padding-inline: var(--eav-space-m);
  border: 1px solid transparent;
  border-radius: var(--eav-radius-pill);
  font-family: var(--eav-ff-body);
  font-size: var(--eav-fs-400);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  background-color: var(--eav-clr-accent);
  background-image: var(--eav-grad-accent);
  color: var(--eav-clr-text-on-accent);
  box-shadow: var(--eav-shadow-md);
}
.Eav-glass .gform_wrapper button:not([type="submit"]):is(:hover, :focus-visible),
.Eav-glass .gform_wrapper input[type="button"]:is(:hover, :focus-visible),
.Eav-glass .gform_wrapper .button:is(:hover, :focus-visible) {
  background-image: none;
  background-color: var(--eav-clr-accent-hover);
  color: var(--eav-clr-text-on-accent);
}
/* Tekstlinks in het formulier ('ik weet mijn kenteken niet') */
.Eav-glass .gform_wrapper .gform_body a {
  color: var(--eav-clr-primary);
  font-size: var(--eav-fs-300);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* HTML-velden (resultaatregel, toelichting) */
.Eav-glass .gform_wrapper .gfield_html {
  font-size: var(--eav-fs-300);
  color: var(--eav-clr-text-muted);
}
.Eav-glass .gform_wrapper .gfield_html strong { color: var(--eav-clr-text); }
.Eav-glass .gform_wrapper .gform_footer,
.Eav-glass .gform_wrapper .gform_page_footer { margin-block-start: var(--eav-space-s); }

/* === Legacy-classes uit theme.css =====================================
   Staan nog in markup van andere pagina's en in form-frontend.js.
   Herschreven op tokens; de oude hexwaarden en px zijn weg.
   Nieuwe markup gebruikt de Eav-*-classes, niet deze. */

/* Knoppen van het kenteken-script en oude pagina's = Eav-button-accent */
.btn,
.btn--primary-mint,
.quick-sell__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding-block: var(--eav-space-xs);
  padding-inline: var(--eav-space-m);
  border: 1px solid transparent;
  border-radius: var(--eav-radius-pill);
  font-family: var(--eav-ff-body);
  font-size: var(--eav-fs-400);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--eav-clr-accent);
  background-image: var(--eav-grad-accent);
  color: var(--eav-clr-text-on-accent);
  box-shadow: var(--eav-shadow-md);
}
.btn:is(:hover, :focus-visible),
.btn--primary-mint:is(:hover, :focus-visible),
.quick-sell__btn:is(:hover, :focus-visible) {
  background-image: none;
  background-color: var(--eav-clr-accent-hover);
  color: var(--eav-clr-text-on-accent);
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .btn--primary-mint, .quick-sell__btn {
    transition: background-color var(--eav-transition-base), color var(--eav-transition-base);
  }
}

/* 'ik weet mijn kenteken niet' */
.quick-sell__anchor {
  display: inline-block;
  margin-block-end: var(--eav-space-xs);
  font-size: var(--eav-fs-300);
  font-weight: 600;
  color: var(--eav-clr-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* Regel onder de kentekenknop */
.kenteken-trust {
  display: block;
  margin-block-start: var(--eav-space-2xs);
  font-size: var(--eav-fs-300);
  color: var(--eav-clr-text-muted);
  text-align: center;
}

/* USP-grid (andere pagina's) */
.eav-usps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--eav-space-m);
}
@media (min-width: 64em) {
  .eav-usps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.eav-usp {
  padding: var(--eav-space-l);
  background-color: var(--eav-clr-surface);
  border: var(--eav-border-width) solid var(--eav-clr-border);
  border-radius: var(--eav-radius-xl);
}
.eav-usp-titel {
  font-size: var(--eav-fs-500);
  font-weight: 700;
  line-height: var(--eav-lh-tight);
  margin: 0 0 var(--eav-space-2xs);
  color: var(--eav-clr-text);
}
.eav-usp-tekst { margin: 0; color: var(--eav-clr-text-muted); }

/* Stappen (andere pagina's) */
.eav-stappen {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--eav-space-m);
}
@media (min-width: 64em) {
  .eav-stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.eav-stap {
  position: relative;
  padding: var(--eav-space-l);
  background-color: var(--eav-clr-surface);
  border: var(--eav-border-width) solid var(--eav-clr-border);
  border-radius: var(--eav-radius-xl);
}
.eav-stap-nummer {
  font-size: var(--eav-fs-700);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: color-mix(in oklch, var(--eav-clr-text) 22%, var(--eav-clr-surface));
  margin-block-end: var(--eav-space-xs);
}
.eav-stap-titel {
  font-size: var(--eav-fs-500);
  font-weight: 700;
  line-height: var(--eav-lh-tight);
  margin: 0 0 var(--eav-space-2xs);
  color: var(--eav-clr-text);
}
.eav-stap-tekst { margin: 0; color: var(--eav-clr-text-muted); }

/* FAQ op <details> (FAQ-pagina) — geen GB Pro Accordion, dus wel eigen state-CSS */
.eav-faq {
  display: flex;
  flex-direction: column;
  gap: var(--eav-space-s);
}
.eav-faq-item {
  border: var(--eav-border-width) solid var(--eav-clr-border);
  border-radius: var(--eav-radius-lg);
  background-color: var(--eav-clr-surface);
  overflow: clip;
}
.eav-faq-item:hover { border-color: var(--eav-clr-border-strong); }
.eav-faq-item[open]  { border-color: var(--eav-clr-primary); }
@media (prefers-reduced-motion: no-preference) {
  .eav-faq-item { transition: border-color var(--eav-transition-base); }
  .eav-faq-vraag::after { transition: rotate var(--eav-transition-base); }
}
.eav-faq-vraag {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--eav-space-s);
  padding: var(--eav-space-m);
  font-weight: 700;
  color: var(--eav-clr-text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.eav-faq-vraag::-webkit-details-marker { display: none; }
.eav-faq-vraag::after {
  content: "+";
  font-size: var(--eav-fs-600);
  line-height: 1;
  color: var(--eav-clr-text-muted);
  flex-shrink: 0;
}
.eav-faq-item[open] .eav-faq-vraag::after {
  rotate: 45deg;
  color: var(--eav-clr-primary);
}
.eav-faq-vraag:focus-visible {
  outline: 2px solid var(--eav-clr-focus);
  outline-offset: -2px;
}
.eav-faq-antwoord {
  padding: 0 var(--eav-space-m) var(--eav-space-m);
  color: var(--eav-clr-text);
}
.eav-faq-antwoord > * + * { margin-block-start: var(--eav-space-s); }

/* === Form 2: meerpagina-formulier === */
.gf_progressbar_wrapper { display: none; }

.gform_wrapper.gravity-theme .gform_page {
  inline-size: 100%;
  color: var(--eav-clr-text);
  border-radius: var(--eav-radius-xl);
  border: var(--eav-border-width) solid var(--eav-clr-border);
  background-color: var(--eav-clr-surface);
  margin-block-end: var(--eav-space-s);
  overflow: clip;
}
.gform_wrapper.gravity-theme .gform_page_fields {
  padding: var(--eav-space-l);
}
.gform_wrapper.gravity-theme .gform_body .gform_page_footer.left_label {
  padding: 0 var(--eav-space-l) var(--eav-space-l);
  margin: 0;
}
@media (min-width: 64em) {
  .gform_wrapper.gravity-theme .gform_page_fields { padding: var(--eav-space-xl); }
  .gform_wrapper.gravity-theme .gform_body .gform_page_footer.left_label {
    padding-inline-start: calc(var(--eav-space-xl) + 30%);
    padding-inline-end: var(--eav-space-xl);
    padding-block-end: var(--eav-space-xl);
  }
}
@media (max-width: 63.99em) {
  .gform_wrapper.gravity-theme .left_label .gfield_label,
  .gform_wrapper.gravity-theme .left_label .ginput_container,
  .gform_wrapper.gravity-theme .left_label .gfield--width-full .gfield_description {
    inline-size: 100%;
  }
}

/* Datepicker */
.gform_wrapper.gravity-theme .ginput_container_date input.datepicker { inline-size: 100%; }

/* Verborgen velden mogen geen ritme kosten */
.gform_wrapper.gravity-theme .gform_hidden { margin: 0; }