/* =============================================================================
   pensioen/index.php — check-in bij een dierenpension
   -----------------------------------------------------------------------------
   Voorvoegsel: .pen-
   Stond op een donkerblauw verloop (#1e3a5f naar #0369a1) met witte tekst, en
   verder vol inline stijlen. Gebruikers zijn pensionhouders achter een balie die
   snel een chipnummer willen scannen, dus het formulier staat voorop.
   ============================================================================= */
/* De kopband komt nu uit includes/pagina-kop.php; de punten eronder uit
   .pg-punten in rebuild.css. Vandaar dat de eigen band-stijlen hier weg zijn. */
.pen-fout {
  display: flex; gap: .55rem; align-items: flex-start;
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--surface));
  color: var(--danger); border-radius: var(--radius-sm);
  padding: .75rem .95rem; font-size: .92rem; margin: 0 0 1.25rem;
}
.pen-fout i { margin-top: .15rem; flex-shrink: 0; }

.pen-body { padding: clamp(2rem, 4.5vw, 3rem) 0; }
.pen-kolom { max-width: 40rem; margin-inline: auto; }

.pen-kaart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.35rem, 3.5vw, 2.25rem);
}
.pen-kop {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1rem;
  padding-top: .25rem;
}
.pen-kop:not(:first-of-type) { margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 1.6rem; }
.pen-kop .bi { color: var(--blue); font-size: 1rem; }

.pen-veld { margin-bottom: 1.15rem; }
.pen-veld label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.pen-verplicht { color: var(--danger); }
.pen-hint { color: var(--text-muted); font-size: .85rem; margin: .4rem 0 0; }
.pen-chipveld {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pen-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.pen-veld-vol { grid-column: 1 / -1; }
.pen-knop { width: 100%; font-weight: 600; padding-block: .7rem; font-size: 1.02rem; margin-top: .5rem; }

.pen-uitleg {
  background: var(--band-groen);
  border: 1px solid var(--band-groen-rand);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
  margin-top: 1.5rem;
}
.pen-uitleg h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin: 0 0 .7rem; color: var(--primary-darker); }
.pen-uitleg ol { margin: 0; padding-left: 1.2rem; color: var(--text-muted); font-size: .92rem; line-height: 1.8; }

.pen-gelukt { text-align: center; }
.pen-gelukt-icoon {
  width: 72px; height: 72px; border-radius: 50%;
  margin: 0 auto 1.15rem;
  background: var(--primary-light); color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center; font-size: 2.1rem;
}
.pen-gelukt h2 { font-size: 1.35rem; margin: 0 0 .5rem; }
.pen-gelukt p { color: var(--text-muted); margin: 0 0 1.5rem; }

@media (max-width: 860px) {
  .pen-band-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pen-rij { grid-template-columns: 1fr; }
}