/* ==========================================================================
   Zeres Connect, design system (restyle 2026)
   Zelfde tokens en klassen als voorheen, volledig opnieuw vormgegeven.
   Mobiel is leidend: compacte header, wizardkaart die over de header valt,
   duimvriendelijke keuzekaarten en 16px invoervelden (geen iOS-zoom).
   Kleuren: groen #56CB5A / #2F773A, forest #14311D, cream #F7F5F0, ink #232323.
   Fonts: Libre Baskerville (display), Hanken Grotesk (UI), JetBrains Mono (code).
   ========================================================================== */

:root {
  --green: #56cb5a;
  --green-bright: #62d766;
  --green-600: #3fa84a;
  --green-700: #2f773a;
  --green-800: #245c2d;
  --forest: #14311d;
  --forest-2: #1b3e26;

  --ink: #232323;
  --ink-2: #4d4d47;
  --ink-3: #807f74;
  --cream: #f7f5f0;
  --cream-2: #f1eee6;
  --card: #ffffff;
  --line: #e7e2d6;
  --line-strong: #d9d2c0;

  --mint: #e7f4e8;
  --mint-2: #d9eeda;
  --mint-tint: #f0f8f0;
  --amber: #a86e12;
  --amber-bg: #fbf4e1;
  --amber-tint: #fbf6e8;
  --red: #bf000f;
  --red-bg: #fdecec;
  --red-tint: #fdf1f0;

  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --r-sm: 12px;
  --r: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --pill: 999px;

  --shadow-card: 0 1px 2px rgba(20, 49, 29, .04), 0 24px 60px -18px rgba(20, 49, 29, .18);
  --shadow-btn: 0 10px 24px -8px rgba(36, 92, 45, .45);
  --ring: 0 0 0 4px rgba(86, 203, 90, .22);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  accent-color: var(--green-700);
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--green-700); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
::selection { background: var(--mint-2); }
:focus-visible { outline: 3px solid rgba(86, 203, 90, .55); outline-offset: 2px; border-radius: 8px; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.18;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--green-700);
  font-weight: 500;
}
.muted { color: var(--ink-3); }

/* ---------- Kopbalk boven een brede kaart ---------- */
.shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
}
.shell__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 28px;
  background: var(--forest);
  color: #fff;
}
.shell__logo .logo {
  height: 26px;
  width: auto;
}
.shell__title {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-bright);
}
.shell__help {
  margin: 0 0 0 auto;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
}
.shell__help a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shell__main {
  display: flex;
  justify-content: center;
  padding: 40px 24px 64px;
}
/* Met de chat aan (Intercom-knop rechtsonder) houdt het vel ruimte vrij onder de laatste knop */
html.zeres-chat .shell__main { padding-bottom: 110px; }

/* De wizardkaart: alle stappen leven op een wit vel */
.auth__form {
  width: 100%;
  max-width: 960px;
  background: var(--card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: 40px 48px 48px;
}
.auth__form .brand-mark { display: none; }
.step-card img,
.guide-img img {
  max-width: 100%;
  height: auto;
}
.auth__form h2 {
  font-size: clamp(1.3rem, 4.6vw, 1.7rem);
  text-align: center;
  text-wrap: balance;
}
.auth__form .sub {
  color: var(--ink-2);
  font-size: .95rem;
  margin: 10px 0 22px;
}
.brand-mark + .sub, h2 + .sub { text-align: center; }
/* Leesbreedte op de 960px-kaart: lopende tekst blijft binnen een regel of 68 tekens. De
   kopieerregel en de koppen houden hun eigen breedte. */
.auth__form p,
.auth__form li { max-width: 68ch; }
/* Wat gecentreerd staat blijft op de kaart gecentreerd, ook nu die regels smaller zijn. */
.auth__form h2 + .sub,
.auth__form .brand-mark + .sub,
.auth__form > h3:not(.section-title) + p,
.auth__form .login-foot,
.auth__form .auth__alt { margin-inline: auto; }
.auth__alt { text-align: center; margin-top: 24px; font-size: .92rem; color: var(--ink-3); }
/* Een statusregel die bij gecentreerde tekst hoort (Bedankt) staat zelf ook in het midden. */
.auth__form .connect-line--center { margin-inline: auto; align-items: center; text-align: center; }

/* Knop onder een formulier (Marcel 25-09): op desktop gecentreerd op zijn eigen breedte, op een
   smal scherm over de hele breedte. */
.actions { display: flex; justify-content: center; margin-top: 18px; }
.actions .btn { min-width: 280px; }
@media (max-width: 640px) {
  .actions .btn { width: 100%; min-width: 0; }
}

.btn-link { color: var(--green-700); font-weight: 700; }
.btn-link:hover { text-decoration: underline; }

/* ---------- Sectiekoppen binnen de wizard ---------- */
.section-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.005em;
  line-height: 1.35;
  margin: 30px 0 12px;
}
.section-title + .sub { margin-top: -6px; }

/* ---------- Formuliervelden ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field > label { font-size: .88rem; font-weight: 700; color: var(--ink); }
.field .sub { margin: 2px 0 0; font-size: .88rem; color: var(--ink-3); }
.input {
  width: 100%;
  padding: 13px 15px;
  background: #fdfcf9;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea.input { resize: vertical; min-height: 92px; }
.input::placeholder { color: #b3ad9e; }
.input:hover { border-color: #c8c0aa; }
.input:focus {
  outline: none;
  background: #fff;
  border-color: var(--green-600);
  box-shadow: var(--ring);
}

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .95rem;
  padding: 12px 20px;
  border-radius: var(--pill);
  border: 1.5px solid transparent;
  transition: transform .12s, box-shadow .15s, background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn--primary { background: var(--green-700); color: #fff; box-shadow: var(--shadow-btn); }
.btn--primary:hover { background: var(--green-800); text-decoration: none; }
.btn--ghost { background: #fff; color: var(--green-700); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--green-700); background: var(--mint-tint); text-decoration: none; }
.btn--soft { background: var(--mint); color: var(--green-800); }
.btn--soft:hover { background: var(--mint-2); text-decoration: none; }
.btn--block { width: 100%; }
.btn--block + .btn--block { margin-top: 10px; }
.btn--lg { padding: 16px 26px; font-size: 1.02rem; }
.btn--lg.btn--block { margin-top: 16px; }

/* ---------- Merk-tegels (merkkeuze in de echte app) ---------- */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 6px;
}
.brand-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 12px;
  text-align: center;
  background: #fdfcf9;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, transform .12s, background .15s;
}
.brand-tile:hover {
  border-color: var(--green-600);
  background: #fff;
  box-shadow: 0 10px 26px -12px rgba(47, 119, 58, .28);
  transform: translateY(-1px);
  text-decoration: none;
}
.brand-tile__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--mint);
  color: var(--green-700);
}
.brand-tile__icon svg { width: 24px; height: 24px; }
.brand-tile__name { font-weight: 700; font-size: .95rem; }
.brand-tile__sub { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.brand-tile__logo { height: 28px; max-width: 90px; object-fit: contain; display: block; margin: 0 auto 6px; }
a.brand-tile { text-decoration: none; color: inherit; text-align: center; }
.brand-tile--soon { opacity: .75; }
.brand-tile__soon {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Wizard-voortgang: vier genummerde bollen ---------- */
.wizard-progress {
  display: flex;
  gap: 4px;
  margin: 24px 0 8px;
  counter-reset: wizardstap;
}
.wizard-progress__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-3);
  counter-increment: wizardstap;
}
.wizard-progress__step::before {
  content: counter(wizardstap);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line-strong);
  color: var(--ink-3);
  font-size: .78rem;
  font-weight: 700;
  transition: background .15s, border-color .15s, color .15s;
}
.wizard-progress__step--done { color: var(--green-700); }
.wizard-progress__step--done::before {
  content: "";
  background: var(--green-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.4 8.6l3.1 3.1 6.1-7.4'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
  border-color: var(--green-700);
}
.wizard-progress__step--active { color: var(--ink); font-weight: 700; }
.wizard-progress__step--active::before {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
  box-shadow: 0 0 0 4px var(--mint);
}

/* ---------- Keuzekaarten (checkbox- en radiorijen) ---------- */
.check-item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 15px 16px;
  background: var(--cream);
  border: 1.5px solid transparent;
  border-radius: var(--r);
  margin-bottom: 10px;
  font-size: .95rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.check-item:hover { background: var(--cream-2); }
.check-item:has(input:checked) {
  background: var(--mint-tint);
  border-color: var(--green-600);
}
.check-item:has(input:focus-visible) { box-shadow: var(--ring); }
.check-item strong { font-weight: 700; }
.check-item a { font-weight: 600; }

.check-item input[type="checkbox"],
.check-item input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  background: #fff;
  border: 2px solid var(--line-strong);
  border-radius: 7px;
  display: grid;
  place-items: center;
  transition: border-color .15s, background .15s;
  cursor: pointer;
}
.check-item input[type="radio"] { border-radius: 50%; }
.check-item input[type="checkbox"]:checked {
  background: var(--green-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.4 8.6l3.1 3.1 6.1-7.4'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  border-color: var(--green-700);
}
.check-item input[type="radio"]:checked {
  border: 7px solid var(--green-700);
  background: #fff;
}
.check-item input:focus-visible { outline: none; }
.check-item__detail { color: var(--ink-3); font-size: .88rem; }
.charger-list { margin-top: 22px; }

/* ---------- Kopieerregel (OCPP-adres) ---------- */
.copy-row {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--forest);
  color: #eaf6ea;
  border-radius: var(--r);
  padding: 10px 10px 10px 18px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.copy-row button {
  margin-left: auto;
  flex: 0 0 auto;
  background: var(--green);
  color: var(--forest);
  font-family: var(--sans);
  font-weight: 700;
  font-size: .85rem;
  padding: 9px 16px;
  border-radius: var(--pill);
}
.copy-row button:hover { background: var(--green-bright); }

/* ---------- Gidskaarten (stappen per merk) ---------- */
.step-card {
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 20px 22px;
  margin-bottom: 14px;
  background: #fff;
}
.step-card h4 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0;
  margin: 0 0 10px;
}
.step-card p { margin: 0 0 10px; font-size: .93rem; color: var(--ink-2); }
.step-card p:last-child { margin-bottom: 0; }
.step-card em { color: var(--ink-3); font-style: italic; }
.step-card strong { color: var(--ink); }
.step-card code {
  font-family: var(--mono);
  font-size: .84em;
  background: var(--cream);
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
}

.step-card ol {
  list-style: none;
  counter-reset: gidsstap;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.step-card ol li {
  counter-increment: gidsstap;
  position: relative;
  padding-left: 38px;
  font-size: .93rem;
  color: var(--ink-2);
}
.step-card ol li::before {
  content: counter(gidsstap);
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--green-800);
  font-size: .78rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.step-card ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.step-card ul li {
  position: relative;
  padding-left: 24px;
  font-size: .93rem;
  color: var(--ink-2);
}
.step-card ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .52em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.step-card .check-item { background: var(--cream); margin-bottom: 0; }
.step-card .check-item + .check-item { margin-top: 10px; }

.step-card img {
  width: 100%;
  height: auto;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.step-card a.guide-img { display: block; cursor: zoom-in; }
.step-card a.guide-img:hover img { border-color: var(--green-600); }

/* ---------- Stap voor stap (Connect V2): een kaart per stap, Gedaan-knop ---------- */
.step-list__count {
  margin: 0 0 10px;
  font-weight: 600;
  color: var(--green-700);
}
.step-item {
  padding: 0;
  overflow: hidden;
}
.step-item__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.step-item__head[disabled] {
  cursor: default;
  opacity: 0.55;
}
.step-item__head h4 {
  margin: 0;
}
.step-item__number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--green-800);
  font-weight: 700;
  font-size: 0.85rem;
}
.step-item--done .step-item__number {
  background: var(--green-700);
  color: #fff;
}
.step-item--open {
  border-color: var(--green-600);
}
.step-item__body {
  padding: 0 18px 18px;
}
.step-item__body .btn--primary {
  margin-top: 12px;
}

/* ---------- Status (chips en meldingsregels) ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: var(--pill);
  background: #fff;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(20, 49, 29, .08);
}
.status::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.status--ok { color: var(--green-700); }
.status--alert { color: var(--red); }
.status--pending { color: var(--amber); }
/* Het wachten op de config-push moet zichtbaar "denken", niet stilstaan. */
.status--pulse::before { animation: status-pulse 1.4s ease-in-out infinite; }
@keyframes status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.75); }
}
@media (prefers-reduced-motion: reduce) {
  .status--pulse::before { animation: none; }
}
/* Storm 29-08 (ronde 4): op bezig-chips is de stip een draaiende ring, zodat
   wachten zichtbaar "denkt"; hier overgenomen in de restyle-taal. */
.status--busy::before {
  width: 12px;
  height: 12px;
  background: transparent;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: status-spin 0.8s linear infinite;
}
@keyframes status-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .status--busy::before { animation: none; border-top-color: currentColor; }
}

/* Meldingsregel wordt een getinte kaart: chip boven, uitleg eronder */
.connect-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 16px 18px;
  border-radius: var(--r);
  background: var(--cream);
  margin: 0 0 12px;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.connect-line:has(.status--ok) { background: var(--mint-tint); }
.connect-line:has(.status--pending) { background: var(--amber-tint); }
.connect-line:has(.status--alert) { background: var(--red-tint); }

.wizard-progress + .connect-line { margin-top: 22px; }

/* Afrondscherm: vinkmedaillon boven de titel */
.done-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--green-700);
}
.done-mark svg { width: 30px; height: 30px; }

.field-row { display: flex; gap: 10px; align-items: flex-end; }
.field-row .field { flex: 1; margin-bottom: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }

/* Kale koppen zonder sectieklasse (bijv. de niet-gevonden-pagina) */
.auth__form > h3:not(.section-title) {
  font-size: 1.35rem;
  text-align: center;
  margin: 8px 0 4px;
}
.auth__form > h3:not(.section-title) + p {
  text-align: center;
  color: var(--ink-2);
  margin: 8px 0 0;
}

.login-foot {
  margin-top: 22px;
  margin-bottom: 0;
  font-size: .9rem;
  text-align: center;
  color: var(--ink-3);
}
.login-foot a { color: var(--green-700); font-weight: 600; }

/* Hulp nodig? (helpdesk chat code) under the wizard, Jorrit 22-09-2026 */
.chat-entry { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.chat-entry__lead { margin: 0 0 12px; font-size: .93rem; color: var(--ink-2); }
.chat-entry__lead a { color: var(--green-700); font-weight: 600; }
.chat-entry__form { display: flex; gap: 10px; }
.chat-entry__form .input { flex: 1; min-width: 0; letter-spacing: .12em; }
.chat-entry__started { margin: 0; font-size: .93rem; color: var(--ink-2); }

/* ---------- Mobiel: compacte kopbalk, brede kaart valt terug op 1 kolom ---------- */
@media (max-width: 820px) {
  .shell__bar {
    padding: 12px 16px;
  }
  .shell__title,
  .shell__help {
    display: none;
  }
  .shell__main {
    padding: 16px 12px 40px;
  }
  .auth__form {
    padding: 24px 18px 32px;
    border-radius: 20px;
  }

  .wizard-progress__step { font-size: .66rem; }

  .brand-grid {
    grid-template-columns: 1fr 1fr;
  }
  .brand-tile {
    padding: 14px 10px;
  }

  .step-card { padding: 16px 15px 18px; }
  .copy-row { padding-left: 15px; font-size: .88rem; }
}

/* Helpdesk page: the code to read out, and the list of the last day */
.helpdesk-code { margin: 18px 0; padding: 18px; border-radius: 12px; background: var(--mint); text-align: center; display: flex; flex-direction: column; gap: 6px; }
.helpdesk-code__value { font-size: 2.4rem; font-weight: 800; letter-spacing: .18em; color: var(--green-800); }
.helpdesk-list__title { margin: 22px 0 8px; font-size: 1rem; }
.helpdesk-list { width: 100%; border-collapse: collapse; font-size: .9rem; }
.helpdesk-list th, .helpdesk-list td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }

/* ==========================================================================
   Connect v4 (Storm 23-09): een merkpagina voor voorbeeld en wizard.
   Stappen 1 tot 5 als genummerde kaarten, rijen per stap (genummerde regel,
   tip, let-op, kopieerblok), foto's met vergroting, terug-link, keuzeknoppen
   en het controleren-label van de reviewmodus. Mobiel eerst: niets mag op
   360px breed horizontaal laten scrollen.
   ========================================================================== */

/* Terugknop boven de titel: een omlijnde knop, geen tekstlinkje (Storm 28-09: "more prominent") */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0 0 14px;
  padding: 9px 20px 9px 16px;
  background: var(--card);
  border: 1.5px solid var(--green-700);
  border-radius: var(--pill);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--green-700);
  text-decoration: none;
  cursor: pointer;
}
.back-link:hover { background: var(--mint); text-decoration: none; }

/* Een kaart per stap, met genummerde kop */
.guide-section__title {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.35;
  margin: 0 0 14px;
}
.guide-section__number { color: var(--green-700); }
.guide-section > h4 { margin-top: 18px; }
.guide-section > h4:first-child { margin-top: 0; }
/* Uitleg direct onder een sectiekop (het Charge Point ID-blok): ruimte voor de eerste stap */
.auth__form .guide-section > .sub:first-of-type { margin: 0 0 12px; }
.guide-section details > summary { cursor: pointer; }
.guide-section details > summary h4 { display: inline; }
.guide-section details[open] > summary { margin-bottom: 10px; }

/* Genummerde regels: het nummer komt uit de rij zelf, zodat een lijst na een tip of
   kopieerblok verder telt (ol start) in plaats van weer bij 1 te beginnen. */
.step-card .guide-rows { margin: 0 0 14px; }
.step-card .guide-rows:last-child { margin-bottom: 0; }
.step-card .guide-rows > li::before { content: attr(data-n); }

/* Tip (lichtgroen, i-icoon) en let-op (oranje, uitroepteken) */
.guide-tip,
.guide-warning {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1.5px solid var(--mint-2);
  border-radius: var(--r);
  background: var(--mint-tint);
  font-size: .93rem;
  color: var(--ink-2);
}
.guide-warning {
  border-color: #e59a3a;
  background: var(--amber-tint);
}
.guide-tip:last-child,
.guide-warning:last-child { margin-bottom: 0; }
.guide-tip > div,
.guide-warning > div { flex: 1 1 auto; min-width: 0; }
.step-card .guide-tip p,
.step-card .guide-warning p { margin: 0; }
.step-card .guide-tip .sub,
.step-card .guide-warning .sub { margin-top: 6px; }
.guide-tip__icon,
.guide-warning__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green-700);
  color: #fff;
  font-family: var(--serif);
  font-size: .85rem;
  font-style: italic;
  font-weight: 700;
}
.guide-warning__icon {
  background: #d9822b;
  font-family: var(--sans);
  font-style: normal;
}

/* Extra regel onder een rij */
.auth__form .guide-section .sub { margin: 6px 0 0; font-size: .88rem; }

/* Kopieerblok: kop, het adres met kopieerknop, uitleg */
.copy-block {
  margin: 0 0 14px;
  padding: 14px 16px 16px;
  border: 1.5px solid var(--mint-2);
  border-radius: var(--r);
  background: var(--mint-tint);
}
.copy-block:last-child { margin-bottom: 0; }
.copy-block .copy-row { margin-bottom: 10px; }
/* Waarden om over te nemen onder een stap (Alfen: gebruikersnaam en wachtwoord), elk met een label
   en dezelfde kopieerregel als het OCPP-adres. */
.copy-values { display: grid; gap: 10px; margin: 10px 0 4px; }
.copy-value__label { display: block; margin: 0 0 4px; font-size: .85rem; font-weight: 700; color: var(--ink-2); }
.copy-values .copy-row { margin-bottom: 0; }
.step-card .copy-block .copy-row code,
.step-card .copy-values .copy-row code {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
}
.auth__form .copy-block .sub { margin: 0 0 6px; font-size: .88rem; }
.auth__form .copy-block .sub:last-child { margin-bottom: 0; }

/* Lange adressen en links breken af in plaats van de pagina te verbreden. Alleen op de
   merkpagina (.ocpp-page): login, adviseur, Zaptec en de chatcode blijven zoals ze zijn. */
.ocpp-page { overflow-wrap: break-word; }
.ocpp-page .step-card code,
.ocpp-page .connect-line code { white-space: normal; overflow-wrap: anywhere; }
.ocpp-page .guide-section a,
.ocpp-page .connect-line a { overflow-wrap: anywhere; }
.ocpp-page .btn--block { white-space: normal; text-align: center; }

/* Op erg smalle schermen (390 px) past de Kopieer-knop niet meer naast de waarde zonder die
   midden in een woord te laten afbreken: de knop valt onder de waarde, die dan de volle breedte
   krijgt en alleen bij "/" of "." hoeft af te breken (overflow-wrap: anywhere blijft het
   laatste redmiddel, niet de eerste keus). */
@media (max-width: 400px) {
  .ocpp-page .copy-row {
    flex-wrap: wrap;
  }
  .ocpp-page .copy-row code {
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .ocpp-page .copy-row button {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* Foto's: hooguit twee per rij, naast elkaar op brede schermen, onder elkaar op mobiel */
.guide-photos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
}
@media (min-width: 640px) {
  .guide-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.guide-photo {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  background: #fdfcf9;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: zoom-in;
}
.guide-photo:hover { border-color: var(--green-600); }
.step-card .guide-photo img {
  width: auto;
  max-width: 100%;
  max-height: 60vh;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
}

/* Vergrote foto over het hele scherm; sluit met een klik of Escape */
.photo-zoom {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 0;
  background: rgba(20, 49, 29, .92);
  cursor: zoom-out;
}
.photo-zoom:focus { outline: none; }
.step-card .photo-zoom img,
.photo-zoom img {
  flex: 0 1 auto;
  min-height: 0;
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 90vh;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: #fff;
}

/* Twee grote keuzeknoppen (laadpas of AutoStart, en de merkvraag) */
.choice-buttons {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 18px;
}
@media (min-width: 640px) {
  .choice-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.choice-buttons button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 64px;
  padding: 16px 18px;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  background: #fdfcf9;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-lg);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.choice-buttons button span {
  font-size: .9rem;
  font-weight: 400;
  color: var(--ink-2);
}
.choice-buttons button:hover { border-color: var(--green-600); background: #fff; }
.choice-buttons button[aria-pressed="true"] {
  border-color: var(--green-600);
  background: var(--mint-tint);
  box-shadow: var(--ring);
}
.choice-buttons button[disabled] { opacity: .5; cursor: default; pointer-events: none; }

/* Reviewmodus (?review=1 op staging): rijen die Storm nog moet nakijken */
.review-flag {
  display: inline-block;
  margin: 0 8px 4px 0;
  padding: 1px 8px;
  border: 1px solid var(--red);
  border-radius: var(--pill);
  background: var(--red-tint);
  color: var(--red);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
}