/* Stijl voor de tarievenpagina en haar twee verdiepingspagina's.
   Stond inline in views/public/tarieven.ejs. Toen die pagina op verzoek van
   de klant (2026-09-09, te veel scrollen) werd opgedeeld, moesten drie
   pagina's dezelfde opmaak delen; een kopie per pagina loopt gegarandeerd
   uiteen. Geladen via additionalCSS in routes/pages.js. */

/* ── Alleen deze pagina. Porto levert de opbouw, hier de EvenJij-details.
      Geen border-radius: scherpe hoeken zijn centraal geregeld. ────── */
.ej-tar > section.ej-tar-section { padding: 4.5rem 0; }
section.section.ej-tar-alt { background: var(--ej-band); }
section.section.ej-tar-honest { background: var(--ej-band); }

/* Porto zet h3/h4 in kapitalen met letterafstand; op deze pagina lopen de
   koppen als gewone zinnen door, dat leest rustiger. */
.ej-tar h3, .ej-tar h4 { text-transform: none; letter-spacing: 0; }

/* Beeldkader: de foto is staand, dus vaste verhouding + cover. */
.ej-tar-media { overflow: hidden; box-shadow: var(--ej-shadow); background: var(--ej-primary-soft); }
.ej-tar-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ej-tar-media-tall { aspect-ratio: 3 / 4; }

/* De rekensom als beeldmerk: uren maal tarief is wat je betaalt. De tekens
   staan op aria-hidden, met een leesbaar woord ernaast voor schermlezers. */
.ej-tar-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.5rem;
}
.ej-tar-formula-cell {
  flex: 1 1 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.95rem 0.8rem;
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-top: 4px solid var(--ej-primary);
  box-shadow: var(--ej-shadow-sm);
  color: var(--ej-dark);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}
.ej-tar-formula-cell-total { background: var(--ej-surface); border-top-color: var(--ej-dark); border-top-width: 5px; }
.ej-tar-formula-op {
  flex: 0 0 auto;
  align-self: center;
  color: var(--ej-primary);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

/* Rekenvoorbeeld: klein overzichtje, bewust geen tabel. */
.ej-tar-calc {
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-left: 4px solid var(--ej-primary);
  padding: 1.35rem 1.4rem;
  box-shadow: var(--ej-shadow-sm);
}
.ej-tar-calc-head {
  margin: 0 0 0.9rem;
  color: var(--ej-eyebrow);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ej-tar-calc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--ej-border);
}
.ej-tar-calc-label { color: var(--ej-ink-soft); font-size: 0.94rem; line-height: 1.5; }
.ej-tar-calc-value {
  flex: 0 0 auto;
  color: var(--ej-dark);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ej-tar-calc-row-total {
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  border-top: 2px solid var(--ej-dark);
  border-bottom: 0;
}
.ej-tar-calc-row-total .ej-tar-calc-label { color: var(--ej-dark); font-weight: 600; }
.ej-tar-calc-row-total .ej-tar-calc-value { font-size: 1.35rem; font-weight: 700; }
.ej-tar-calc-foot { margin-top: 1rem; color: var(--ej-ink-soft); font-size: 0.87rem; line-height: 1.6; }

/* Korte opsomming binnen een stap: losse feiten die anders in één alinea
   zouden verdwijnen. Klein en gedempt, want de stap zelf staat erboven. */
.ej-tar-mini { list-style: none; margin: 0; padding: 0; }
.ej-tar-mini li {
  position: relative;
  padding: 0.25rem 0 0.25rem 1.1rem;
  font-size: 0.9rem;
  color: var(--ej-ink-soft);
  line-height: 1.6;
}
.ej-tar-mini li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 0.45rem;
  height: 2px;
  background: var(--ej-primary);
}

/* Prijslijst: het bedrag rechts, de uitleg klein eronder. De reden dat dit
   geen alinea's zijn (2026-09-21): wie op deze pagina komt zoekt een getal, en
   een getal dat je moet opdiepen uit een zin is geen antwoord. */
.ej-tar-prijs { margin: 0; }
.ej-tar-prijs-rij {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ej-border);
}
.ej-tar-prijs-rij:last-child { border-bottom: 0; }
.ej-tar-prijs dt {
  font-weight: 600;
  color: var(--ej-dark);
  flex: 1 1 auto;
  min-width: 0;
}
.ej-tar-prijs dd {
  margin: 0;
  flex: 0 0 auto;
  text-align: right;
  font-weight: 700;
  color: var(--ej-dark);
  max-width: 60%;
}
/* De toelichting blijft klein en gedempt: hij hoort bij het bedrag, maar mag
   het niet overstemmen. */
.ej-tar-prijs dd span {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--ej-ink-soft);
  line-height: 1.5;
  margin-top: 0.15rem;
}
.ej-tar-prijs-voet {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--ej-ink-soft);
  line-height: 1.7;
}

@media (max-width: 575.98px) {
  /* Op een telefoon past label en bedrag niet naast elkaar zonder dat het
     bedrag gaat afbreken. Dan onder elkaar, met het bedrag links uitgelijnd. */
  .ej-tar-prijs-rij { display: block; }
  .ej-tar-prijs dd { text-align: left; max-width: none; margin-top: 0.2rem; }
}

/* Nuchtere lijst: wat je niet betaalt, en annuleren. Geen kaartjes. */
.ej-tar-list { list-style: none; margin: 0; padding: 0; }
.ej-tar-list li {
  position: relative;
  padding: 1rem 0 1rem 1.6rem;
  border-bottom: 1px solid var(--ej-border);
  color: var(--ej-ink-soft);
  line-height: 1.7;
}
.ej-tar-list li:last-child { border-bottom: 0; }

/* Beleidsregels lezen donkerder dan lopende tekst: dit zoek je op als je
   moet annuleren, dan wil je het in een oogopslag kunnen lezen. De lijst
   met "wat kost niets" hoger op de pagina blijft bewust rustiger. */
.ej-tar-list-beleid li { color: var(--ej-ink); font-weight: 500; }
/* Bruin en niet taupe: deze lijst staat ook op een gekleurde band. */
.ej-tar-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.55rem;
  width: 0.6rem;
  height: 2px;
  background: var(--ej-dark);
}
.ej-tar-list strong { display: block; color: var(--ej-dark); margin-bottom: 0.15rem; }

/* Opbouw van het totaalbedrag: tarief van de Buddy, boekingskosten en
   de verzekeringstoeslag. */
.ej-tar-build {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.75rem;
}
.ej-tar-build-item {
  flex: 1 1 15rem;
  padding: 1.35rem 1.3rem;
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-top: 4px solid var(--ej-primary);
  box-shadow: var(--ej-shadow-sm);
}
.ej-tar-build-item-total { background: var(--ej-surface); border-top-color: var(--ej-dark); border-top-width: 5px; }
.ej-tar-build-icon { display: block; font-size: 1.4rem; color: var(--ej-primary); margin-bottom: 0.6rem; }
.ej-tar-build-title {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ej-dark);
  margin: 0 0 0.45rem;
}
.ej-tar-build-item p { font-size: 0.9rem; color: var(--ej-ink-soft); line-height: 1.65; }
.ej-tar-build-op {
  flex: 0 0 auto;
  align-self: center;
  color: var(--ej-primary);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

/* Genummerde betaalstappen */
.ej-tar-steps { list-style: none; margin: 0; padding: 0; }
.ej-tar-step { position: relative; display: flex; gap: 1.15rem; padding-bottom: 1.7rem; }
.ej-tar-step:last-child { padding-bottom: 0; }
.ej-tar-step::before {
  content: "";
  position: absolute;
  left: calc(1.4rem - 1px);
  top: 3.1rem;
  bottom: 0.35rem;
  width: 2px;
  background: var(--ej-border);
}
.ej-tar-step:last-child::before { display: none; }
.ej-tar-step-num {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ej-dark);
  color: var(--ej-cream);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
}
.ej-tar-step-body { padding-top: 0.15rem; }
.ej-tar-step-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ej-dark);
  margin: 0 0 0.4rem;
}
.ej-tar-step p { color: var(--ej-ink-soft); }

/* Terzijde-notitie onder de stappen */
/* Witte kaart, net als de notities op /veiligheid, /hoe-werkt-het,
   /contact en /hulpverlening. De accentrand links blijft. */
.ej-tar-note {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1.1rem 1.2rem;
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-left: 4px solid var(--ej-primary);
  box-shadow: var(--ej-shadow-sm);
}
.ej-tar-note > i { color: var(--ej-primary); font-size: 1.1rem; margin-top: 0.2rem; }
.ej-tar-note p { color: var(--ej-ink); font-size: 0.93rem; }
.ej-tar-note strong { color: var(--ej-dark); }

/* Kaart naast de betaalstappen */
.ej-tar-side {
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-top: 4px solid var(--ej-primary);
  padding: 1.4rem 1.3rem;
  box-shadow: var(--ej-shadow-sm);
}
.ej-tar-side-icon { display: block; font-size: 1.4rem; color: var(--ej-primary); margin-bottom: 0.6rem; }
.ej-tar-side-title {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ej-dark);
  margin: 0 0 0.5rem;
}
.ej-tar-side p { font-size: 0.9rem; color: var(--ej-ink-soft); line-height: 1.65; }

/* Vraag en antwoord: native details/summary, dus zonder JavaScript. */
.ej-tar-faq {
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-left: 4px solid var(--ej-primary);
  margin-bottom: 0.75rem;
}
.ej-tar-faq > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  color: var(--ej-dark);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}
.ej-tar-faq > summary::-webkit-details-marker { display: none; }
.ej-tar-faq > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ej-primary);
}
.ej-tar-faq[open] > summary::after { content: "-"; }
.ej-tar-faq > summary:hover { color: var(--ej-primary); }
.ej-tar-faq > summary:focus-visible { outline: 2px solid var(--ej-dark); outline-offset: -2px; }
.ej-tar-faq-answer { padding: 0 1.2rem 1.15rem; }
.ej-tar-faq-answer p { color: var(--ej-ink-soft); font-size: 0.95rem; line-height: 1.7; }

/* Beleid als opsomming: je zoekt hier een regel op, je leest geen verhaal.
   De termijn vet, het gevolg erachter. */
.ej-tar-beleid {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  color: var(--ej-ink-soft);
  font-size: 0.95rem;
  line-height: 1.7;
}
.ej-tar-beleid li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--ej-border);
}
.ej-tar-beleid li:last-child { border-bottom: 0; }
.ej-tar-beleid strong { color: var(--ej-ink); }

/* Rustigere tweede stap onder de knop in de slot-CTA */
.ej-tar-cta-link {
  color: #fff;
  font-size: 0.93rem;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  opacity: 0.85;
}
.ej-tar-cta-link:hover, .ej-tar-cta-link:focus { color: #fff; opacity: 1; }

/* Zichtbare placeholder, zelfde look als op /contact en /over-ons. Hoort te
   verdwijnen zodra de klant besloten heeft wat er bij annuleren geldt. */
.ej-tar .ej-ph {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  background: #FDF0D5;
  border: 1px dashed #C9A227;
  color: #7a5f10;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.88em;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .ej-tar > section.ej-tar-section { padding: 3rem 0; }
  .ej-tar-media-tall { aspect-ratio: 4 / 3; }
  .ej-tar-calc { padding: 1.1rem 1.15rem; }
  .ej-tar-calc-row-total .ej-tar-calc-value { font-size: 1.2rem; }
  .ej-tar-step { gap: 0.9rem; }
  .ej-tar-step-num { width: 2.4rem; height: 2.4rem; font-size: 0.95rem; }
  .ej-tar-step::before { left: calc(1.2rem - 1px); top: 2.7rem; }
  .ej-tar-faq > summary { font-size: 0.97rem; padding: 0.9rem 1rem; }
  .ej-tar-faq-answer { padding: 0 1rem 1rem; }
}

/* ── Doorverwijzing naar de verdiepingspagina's ──────────────────────
   De klant vond de pagina te veel scrollen (2026-09-09), dus het
   rekenvoorbeeld en de opbouw van het bedrag staan nu op een eigen pagina.
   Deze twee kaarten zijn de deur ernaartoe. Zelfde vorm als de keuzekaarten
   op "hoe werkt het" (.ej-hw-pick), want het is dezelfde handeling: kies waar
   je heen wilt. */
.ej-tar-door {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  height: 100%;
  padding: 1.1rem 1.15rem;
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-left: 4px solid var(--ej-primary);
  box-shadow: var(--ej-shadow-sm);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ej-tar-door:hover { transform: translateY(-3px); box-shadow: var(--ej-shadow); }
.ej-tar-door:focus-visible { outline: 2px solid var(--ej-primary); outline-offset: 3px; }
.ej-tar-door-icon { flex: 0 0 auto; font-size: 1.35rem; line-height: 1.3; color: var(--ej-primary); }
.ej-tar-door-body { display: block; }
.ej-tar-door-title {
  display: block;
  font-weight: 700;
  color: var(--ej-dark);
  line-height: 1.3;
  margin-bottom: 0.15rem;
}
.ej-tar-door-text { display: block; font-size: 0.87rem; color: var(--ej-ink-soft); line-height: 1.45; }

/* De terugweg onderaan een verdiepingspagina. Wie hier beneden komt is klaar
   met lezen; dan wil je niet omhoog hoeven scrollen naar het menu. */
.ej-tar-terug {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ej-border);
}
.ej-tar-terug a {
  font-weight: 600;
  color: var(--ej-primary);
  padding: 0.6rem 0;
}
.ej-tar-terug a::before { content: "\2190"; margin-right: 0.4rem; }
.ej-tar-terug a:last-child::before { content: "\2192"; }
.ej-tar-terug a:hover { color: var(--ej-dark); }