:root{
  --brand:#97BA1F;
  --ink:#3D3D3D;
  --bg:#FFFFFF;
  --muted:#6A6A6A;
  --radius:12px;
  --font:'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  /* toegevoegd: consistent met dashboard */
--cp-primary: #282F33;
  --cp-secondary: #353535;
  --cp-font: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --cp-radius: 12px;
  --cp-btn-size: 36px;
}

*{box-sizing:border-box}
body {
  margin: 0;
  padding: 0px;
  background: transparent !important; /* iframe zelf transparant */
  font-family: var(--cp-font), var(--font);
  color: var(--ink);
}


.ep-card {
  width: calc(100% - 50px);        /* altijd 25px marge links/rechts */
  max-width: 560px;
  margin: 0px auto;               /* 25px marge boven/onder t.o.v. iframe */
  padding: 5px !important; /* ← voeg dit toe */
  background: #F6F3E5;
  border-radius: var(--cp-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);  /* ✅ zachte schaduw rond de widget zelf */
overflow:hidden;
  flex-direction: column;
  padding: 0px;                   /* vaste binnenpadding boven/onder/links/rechts */
  box-sizing: border-box;
  height: auto;                    /* widget rekt niet uit */
}





.ep-header{padding:16px 20px;border-bottom:1px solid #eee;display:grid;gap:10px}
.ep-brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.ep-logo {
  height: 70px !important;
  width: auto;
  display: block;
}
.ep-tagline{font-size:14px;text-transform:uppercase;font-weight:700;line-height:1.2}
/* === Stepper: genummerde cirkels met lijn ertussen === */
.stepper {
  display: flex;
  align-items: center;
  justify-content: center;  /* centreren in de header */
  gap: 12px;
  margin-top: 10px;
}

.stepper .step {
  display: flex;
  align-items: center;
  justify-content: center;
}

.stepper .step img {
  width: 55px;
  height: 55px;
  display: block; /* toegevoegd: voorkomt baseline/whitespace issues */
}

.stepper .step {
  display: flex;
  flex-direction: column;  /* icoon + tekst onder elkaar */
  align-items: center;     /* centreren */
  gap: 4px;                /* ruimte tussen icoon en tekst */
}

.stepper .step-label {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--cp-secondary, #353535);
  text-align: center;
}


/* kortere lijntjes tussen de stappen */
.stepper .line {
  flex: 0 0 40px;
  height: 3.5px;
  background: #191919; /* donker */
  margin: 0 4px;
}


/* op mobiel nog compacter */
/* === Stepper compact maken op mobiel (labels verbergen) === */
@media (max-width: 640px) {
  .stepper {
    gap: 8px;                /* iets compacter */
  }

  .stepper .line {
    flex-basis: 28px;
    margin: 0 3px;
  }

  /* 👇 labels onder de nummers verbergen */
  .stepper .step-label {
    display: none !important;
  }
}


.ep-steps li{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:72px;            /* houdt label onder de cirkel netjes */
  color:#555;
  font-size:.875rem;
  text-align:center;
}
.ep-steps li::after{         /* horizontale lijn naar de volgende */
  content:"";
  position:absolute;
  top:14px;                  /* verticaal centreren op de cirkel (28px / 2) */
  left:50%;
  width: calc(100% + 32px);  /* reikt tot de volgende “station” */
  height:2px;
  background:#e5e7eb;        /* licht grijs */
  z-index:0;
}
.ep-steps li:last-child::after{ display:none; }

.ep-step-circle{
  position:relative;
  z-index:1;                 /* boven de lijn */
  width:28px;
  height:28px;
  line-height:28px;
  border-radius:50%;
  border:2px solid var(--cp-primary);
  background:#fff;
  color:var(--cp-primary);
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.ep-step-label{
  line-height:1.2;
  max-width:110px;
}

/* Actieve stap */
.ep-steps li.active .ep-step-circle{
  background:var(--cp-primary);
  color:#fff;
}

/* Reeds voltooide (completed) stappen kleuren de lijn + cirkelrand mee */
.ep-steps li.completed .ep-step-circle{
  border-color:var(--cp-primary);
  color:var(--cp-primary);
}
.ep-steps li.completed::after{
  background:var(--cp-primary);
}

/* Stap 1: straat / postcode / gemeente */
.ep-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:12px;
  align-items:start;
}

/* NIEUW: twee kolommen voor stap 1 (straat + postcode) */
.ep-grid-2{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:12px;
  align-items:start;
}

@media (max-width:640px){
  .ep-grid-2{ grid-template-columns:1fr; }
}

/* Stap 3: naam / gsm / e-mail */
.ep-grid-3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  align-items:start;
}

.ep-col-span-2{grid-column:span 2}
@media (max-width:640px){
  .ep-grid{grid-template-columns:1fr}
  .ep-grid-3{grid-template-columns:1fr}
  .ep-col-span-2{grid-column:span 1}
}

.ep-col-span-3{grid-column: 1 / -1}
@media (max-width:640px){
  .ep-col-span-3{grid-column: 1 / 1}
}


/* Inputs/selects/textarea consistent met UI-variabelen */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="file"],
input[type="date"],
textarea,
select {
  width: 100%;
  min-height: 40px;
  padding: 12px 14px;
  border: 1px solid #000000;
  border-radius: 12px;
  background: #F6F3E5;
  font: inherit;
  line-height: 1.2;
  color: inherit;
}

/* hover/active states uitschakelen */
input:hover,
textarea:hover,
select:hover,
input:focus,
textarea:focus,
select:focus {
  background: #F6F3E5;
  border-color: #000000;
  outline: none;
  box-shadow: none;
}


/* Textarea: nette starthoogte en gedrag */
textarea{
  min-height:88px;
  overflow:auto;
  resize:vertical;
}

/* Labels niet tonen; placeholders in de velden blijven staan
   (maar NIET voor .ep-check, die bevat zichtbare privacytekst) */
.ep-section label:not(.ep-check){
  display:block;
  margin:0;
  font-size:0;      /* labeltekst onzichtbaar */
  line-height:0;
}
.ep-section label:not(.ep-check) > input,
.ep-section label:not(.ep-check) > select,
.ep-section label:not(.ep-check) > textarea{
  font-size:1rem;   /* reset zodat veldtekst NIET 0 wordt */
  line-height:normal;
}


input:focus,
textarea:focus,
select:focus{
  outline:none;
  border-color:inherit;  /* geen kleurwissel */
  box-shadow:none;       /* geen focusring */
}


/* Extra ruimte tussen date picker en slots */
#ep-date{ margin:12px 0; }


.ep-hint{color:var(--muted);font-size:.9rem}
.ep-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid #e5e5e5;border-radius:999px;padding:8px 12px;margin:6px 6px 0 0;cursor:pointer}
.ep-chip:hover{background:#fafafa}
.ep-chip:has(input:focus){outline:2px solid var(--cp-primary); outline-offset:2px}
.ep-chip input{accent-color:var(--cp-primary)}

.ep-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:640px){.ep-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ep-slot {
  padding: 7px 7px;
  border: 1px solid #191919;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  background: transparent;
  color: #191919;
}

.ep-slot:hover,
.ep-slot:focus {
  background: transparent;
  outline: none;
  filter: none;
}

.ep-slot.selected {
  background: #191919;
  color: #ffffff;
  border-color: #191919;
}

.ep-slot-title {
  font-size: 14px;
  font-weight: 600;
  color: #191919;
  margin-top: 20px;   /* 20px ruimte boven titel */
  margin-bottom: 15px;/* 15px ruimte onder titel */
}


.ep-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #eee;
  padding: 12px 0 0px 0;
  box-sizing: border-box;
}


.ep-btn {
  appearance: none;
  border: none;
  background: #191919;
  color: #ffffff;
  border-radius: 12px;
  min-height: var(--cp-btn-size);
  padding: 12px 16px;
  font-weight: 600;
  cursor: pointer;
  flex: 1; /* zorgt dat beide knoppen even breed zijn */
}

.ep-btn:hover,
.ep-btn:focus {
  filter: none;
  outline: none;
}

.ep-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

#ep-prev,
#ep-next {
  background: #191919 !important;
  color: #ffffff !important;
  border-radius: 12px !important;
}

#ep-next.ep-btn:hover{ filter:brightness(.92); }
#ep-next.ep-btn:focus{ outline:2px solid #282F33; outline-offset:2px; }


.ep-btn-muted{background:#eaeaea;color:#333}
.ep-btn-outline{background:#fff;color:var(--cp-primary);border:2px solid var(--cp-primary)}
.ep-previews{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ep-previews img{width:56px;height:56px;object-fit:cover;border-radius:10px;border:1px solid #eee}
.ep-success .ep-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.ep-muted{color:var(--muted);font-size:.95rem}
/* Inline alerts (success/error/info) */
.ep-alert{
  margin:12px 20px 0;
  padding:12px 14px;
  border-radius:var(--cp-radius);
  background:#F6F3E5;
  border:1px solid #eee;
  color:#333;
}
.ep-alert.is-error{border-color:#f3c0c0; background:#F6F3E5; color:#a11}
.ep-alert.is-success{border-color:#bfe3c7; background:#F6F3E5; color:#175b2b}


/* Campagne Partners knoppenstijl */
.cp-btn{
  border-radius: var(--cp-radius);
  min-height: var(--cp-btn-size);
}

.ep-check{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;           /* 10px ruimte boven checkbox */
  font-size: 14px;            /* niet 0 */
  line-height: 1.4;           /* niet 0 */
  color: var(--cp-secondary, #222);  /* geen transparant */
}
.ep-check a{
  text-decoration: underline; /* onderlijnd zoals gevraagd */
  color: inherit;
}

/* === Inline kalender =================================================== */
#ep-cal{
  --cal-gap: 6px;
  --cal-radius: 10px;
  --cal-border: #e6e6e6;
  --cal-dim: #9aa0a6;
  --cal-ink: #333;
  --cal-brand: #7E8B59;
}

.ep-cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: var(--cal-gap);
}

.ep-cal-title{
  font-weight:700;
  text-transform: capitalize;
}

.ep-cal-nav{
  border:1px solid var(--cal-border);
  background:#fff;
  border-radius: var(--cal-radius);
  width:32px; height:32px;
  line-height:30px;
  text-align:center;
  cursor:pointer;
}

.ep-cal-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--cal-gap);
}

.ep-cal-wd{
  font-size:12px;
  color:var(--cal-dim);
  text-align:center;
}

.ep-cal-cell{
  border:1px solid var(--cal-border);
  background:#fff;
  border-radius: var(--cal-radius);
  padding:8px 0;
  cursor:pointer;
  text-align:center;
  color:var(--cal-ink);
}
.ep-cal-cell:hover{ background:#f7f7f7; }

.ep-cal-dim{ color:var(--cal-dim); }
.ep-cal-today{ outline:2px solid var(--cal-brand); outline-offset:-2px; }
.ep-cal-selected{ background:var(--cal-brand); color:#fff; border-color:var(--cal-brand); }

/* Kalender verkleind */
#ep-cal{
  max-width:260px;
  font-size:14px;
}

.ep-cal-title{ font-size:14px; }
.ep-cal-nav{ width:24px; height:24px; line-height:22px; font-size:14px; }

.ep-cal-cell{
  padding:4px 0;
  font-size:12px;
}

/* Autofill kleur resetten (Chrome / Safari) */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #F6F3E5 inset !important;
  box-shadow: 0 0 0px 1000px #F6F3E5 inset !important;
  -webkit-text-fill-color: #000000 !important;
  caret-color: #000000 !important;
  border: 1px solid #000000 !important;
}


/* Scrollbare body met scroll behouden, maar zonder grote tussenruimte */
.ep-body {
  flex: 1 1 auto;
  max-height: 100%
  overflow-y: auto;
  scroll-behavior: smooth;
  padding-bottom: 0 !important;   /* geen extra onderruimte */
  margin-bottom: 0 !important;
  box-sizing: border-box;
  background: #F6F3E5;
  border-bottom-left-radius: var(--cp-radius);
  border-bottom-right-radius: var(--cp-radius);
  position: relative;
  z-index: 1;
}





html, body {
  height: 100%;
  min-height: 100%;
  overflow: hidden !important;     /* iframe zelf scrolt nooit */
  background: transparent !important;
  margin: 0;
  padding: 0;
}








.ep-body::-webkit-scrollbar {
  display: none;                   /* Chrome/Safari */
}

/* Scroll-icoon sticky onderaan */
.ep-scroll-icon {
  position: sticky;
  bottom: 10px;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 8px 0;
  background: transparent;
  transition: opacity 0.3s ease;
}

.ep-scroll-icon svg {
  width: 28px;
  height: 28px;
  transition: transform 0.3s ease;
}
.ep-scroll-icon:hover svg {
  transform: translateY(4px);
}
.ep-scroll-icon.hidden {
  opacity: 0;
  pointer-events: none;
}





#ecoprotect-planner.ep-card {
  width: 100%;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none !important;   /* schaduw volledig weg */
}


.ep-scroll-icon {
  position: sticky;
  bottom: 10px;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 8px 0;
  background: transparent;
  transition: opacity 0.3s ease;
}


/* ======================================================
   ✅ Embed-wrapper: veilige marge rond iframe-content
   ====================================================== */
.widget-wrapper {
  padding: 25px;
  background: #F6F3E5;
  border-radius: 12px;
  box-sizing: border-box;
  overflow: visible !important;
  width: 100%;
}

/* ======================================================
   ✅ Responsieve stepper zonder clipping
   ====================================================== */
.stepper {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.stepper .line {
  flex: 1 1 auto;
  min-width: 12%;
  max-width: 20%;
  height: 3.5px;
  background: #191919;
}

.stepper .step img,
.stepper .step svg {
  max-width: 32px;
  height: auto;
}

@media (max-width: 600px) {
  .stepper {
    gap: 6px;
  }
  .stepper .line {
    min-width: 8%;
    max-width: 18%;
  }
  .stepper .step img,
  .stepper .step svg {
    max-width: 26px;
  }
  .ep-slot-title {
    font-size: 14px;
    line-height: 1.3;
  }
}

/* === EMBED FIX FOR 350PX IFRAMES === */
html, body {
  min-height: 100%;
  overflow: visible !important;
  background: transparent !important;
}


@media (max-width:640px) {
  /* Verminder extra binnenruimte rond velden */
  .ep-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Optioneel: iets minder ep-card padding voor compacter geheel */
  .ep-card {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  /* Zorg dat inputs echt de volle gridbreedte nemen */
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="date"],
  textarea,
  select {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


.ep-footer-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 50px;     /* afstand boven knoppen → GeoBook */
  margin-left: 25px;    /* uitlijning met inhoud links */
  margin-bottom: 25px;  /* wat lucht tot rand */
}

.ep-footer-brand .ep-brand-main {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.5px;
  color: #000;
  line-height: 1;
}

.ep-footer-brand .ep-brand-sub {
  font-family: 'Poppins', sans-serif;  /* ✅ zelfde font als GeoBook */
  margin-top: 5px;       /* ruimte tussen GeoBook en subtitel */
  font-size: 12px;        /* ✅ aangepast van 1px → 12px */
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #000;
}

/* ===== Brand-bubble exact uit Campagne Partners header ===== */
.brand-bubble {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 25px;      /* 25 px onder bovenrand widget */
  margin-left: 25px;     /* uitlijning met inhoud */
  margin-bottom: 10px;   /* 10 px boven tagline */
  z-index: 3;
}

.brand-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #E33E0F;           /* Campagne Partners accentkleur */
  flex-shrink: 0;
  animation: brandPulse 2.5s ease-in-out infinite;
}

.brand-name {
  font-family: 'Space Grotesk', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.3px;
  color: #191919;                /* zwart zoals in widget */
  line-height: 1;
}

@keyframes brandPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.6; }
}


@media (max-width:640px){
  body, .ep-card {
    padding: 5px !important;
    box-sizing: border-box;
  }
}

/* Stepper groter en krachtiger na verwijderen brand-bubble */
.stepper .step img {
  width: 50px !important;  /* was 38px */
  height: 50px !important;
}

.stepper .step-label {
  font-size: 13px;
  font-weight: 600;
}

.stepper .line {
  height: 3px;
  background: #191919;
}