/* =============================================================================
   dierenarts.php
   -----------------------------------------------------------------------------
   Stond eerder als <style>-blok van negentig regels middenin de pagina, met
   eigen gradients en hexkleuren die niet meeveranderden met de huisstijl.
   ============================================================================= */

/* ── Scan-tool: de praktische hoofdactie van deze pagina ──────────────────── */
.dra-scan { background: var(--surface-warm); border-bottom: 1px solid var(--border); padding: 2rem 0; }
.dra-scan-inner { max-width: 680px; margin: 0 auto; }
.dra-scan-kop { text-align: center; margin-bottom: 1.1rem; }
.dra-scan-kop h2 { font-size: 1.45rem; margin: .4rem 0 .3rem; }
.dra-scan-kop p { color: var(--text-muted); font-size: .95rem; margin: 0; }
.dra-scan input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; }
.dra-scan-hint { text-align: center; font-size: .85rem; color: var(--text-muted); margin-top: .5rem; }

/* Uitslag van een scan. De rand links geeft de status aan. */
.dra-uitslag { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-top: 1.4rem; }
.dra-uitslag-vermist { border-left-color: var(--danger); }
.dra-uitslag-kop { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.dra-uitslag-icoon { font-size: 1.9rem; color: var(--primary); flex-shrink: 0; }
.dra-uitslag-vermist .dra-uitslag-icoon { color: var(--danger); }
.dra-uitslag-naam { font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.dra-uitslag-vlag { margin-left: auto; }
.dra-velden { display: flex; flex-wrap: wrap; gap: .9rem 2rem; margin-bottom: 1rem; }
.dra-veld small { display: block; color: var(--text-muted); font-size: .8rem; }
.dra-eigenaar { background: var(--blue-light); border: 1px solid var(--blue-border); border-radius: var(--radius-sm); padding: .9rem 1rem; margin-bottom: 1rem; }
.dra-eigenaar-naam { font-weight: 600; }
.dra-eigenaar-knoppen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.dra-leeg { text-align: center; padding: 1.75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-top: 1.4rem; }
.dra-leeg .bi { font-size: 1.8rem; color: var(--border-strong); }

/* ── Voordelen ────────────────────────────────────────────────────────────── */
.dra-sectie { padding: clamp(2.5rem, 5vw, 3.75rem) 0; }
.dra-sectie-kop { text-align: center; margin-bottom: 2.25rem; }
.dra-sectie-kop h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 .5rem; }
.dra-sectie-kop p { color: var(--text-muted); margin: 0; }
.dra-voordelen { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.15rem; }
.dra-voordeel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.dra-voordeel-icoon {
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: .9rem;
}
.dra-voordeel h3 { font-size: 1.02rem; margin: 0 0 .35rem; font-family: var(--font-body); font-weight: 700; }
.dra-voordeel p { color: var(--text-muted); font-size: .9rem; margin: 0; line-height: 1.55; }

/* ── Werkwijze ────────────────────────────────────────────────────────────── */
.dra-stappen-band { background: var(--blue-light); border-block: 1px solid var(--blue-border); }
.dra-stappen { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.dra-stap { display: flex; gap: 1rem; align-items: flex-start; }
.dra-stap-nr {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.dra-stappen li { margin: 0; }
.dra-stap h3 { font-size: 1.02rem; margin: .15rem 0 .3rem; font-family: var(--font-body); font-weight: 700; }
.dra-stap p { color: var(--text-muted); font-size: .9rem; margin: 0; line-height: 1.55; }

/* ── Tarieven ─────────────────────────────────────────────────────────────── */
.dra-tarieven { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; max-width: 760px; margin-inline: auto; }
.dra-tarief { border-radius: var(--radius); padding: 1.75rem; background: var(--surface); border: 1px solid var(--border); }
.dra-tarief-gratis { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); border: 1.5px solid var(--primary); }
.dra-tarief-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .9rem; }
.dra-tarief h3 { font-size: 1.2rem; margin: 0; }
.dra-tarief-sub { color: var(--text-muted); font-size: .87rem; margin: 0; }
.dra-prijs { font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; color: var(--primary-darker); line-height: 1; }
.dra-prijs small { font-size: .95rem; font-weight: 400; color: var(--text-muted); font-family: var(--font-body); }
.dra-tarief ul { list-style: none; padding: 0; margin: 1rem 0; }
.dra-tarief li { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: .5rem; font-size: .92rem; }
.dra-tarief li .bi { color: var(--primary); flex-shrink: 0; margin-top: .15rem; }
.dra-tarief li.dra-tarief-noot { color: var(--text-muted); }
.dra-tarief li.dra-tarief-noot .bi { color: var(--text-muted); }

/* ── Codevoorbeelden ──────────────────────────────────────────────────────── */
/* De band is licht; de codeblokken erin blijven donker, want daar is een donkere
   achtergrond de leesbare keuze voor syntaxkleuren. */
.dra-code-band { background: var(--band-blauw); border-block: 1px solid var(--band-blauw-rand); padding: clamp(2.5rem, 5vw, 3.75rem) 0; }
.dra-code-band .dra-sectie-kop h2 { color: var(--text); }
.dra-code-band .dra-sectie-kop p { color: var(--text-muted); }
.dra-code-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.dra-code-grid > div { display: flex; flex-direction: column; min-width: 0; }
/* Blokken in dezelfde rij even hoog, anders staat het rafelig. Lange regels
   breken af in plaats van een schuifbalk per blok te geven. */
.dra-code-grid .code-block { flex: 1; }
.dra-code-label { color: var(--text-muted); font-size: .85rem; font-weight: 600; margin: 0 0 .4rem; }
.code-block { background: #0d1b2a; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-sm); padding: 1.25rem; font-size: .82rem; line-height: 1.7; }
.code-block pre { margin: 0; color: #dbe6f0; white-space: pre-wrap; overflow-wrap: anywhere; }
.code-block .kw  { color: #7dd3fc; }
.code-block .str { color: #86efac; }
.code-block .cm  { color: #7c8da0; }

/* ── Tarieflijst en badge ─────────────────────────────────────────────────── */
.dra-tarief-badge { flex-shrink: 0; font-size: .72rem; font-weight: 700; background: var(--primary); color: #fff; border-radius: .35rem; padding: .15em .55em; }
.dra-tarief-uitleg { color: var(--text-muted); font-size: .89rem; margin: .7rem 0 0; line-height: 1.55; }
.dra-tarief-lijst { list-style: none; padding: 0; margin: 1rem 0 1.25rem; display: grid; gap: .4rem; }
.dra-tarief-lijst li { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; }
.dra-tarief-lijst i { color: var(--primary); flex-shrink: 0; margin-top: .2rem; font-size: .85rem; }
.dra-tarief-wie { color: var(--text-muted); }
.dra-tarief-wie i { color: var(--text-muted); }
.dra-prijs span { font-family: var(--font-body); font-size: .95rem; font-weight: 400; color: var(--text-muted); }

/* ── Aanmelden ────────────────────────────────────────────────────────────── */
.dra-aanmeld { max-width: 34rem; margin-inline: auto; }
.dra-formulier { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.35rem 1.4rem 1.5rem; }
.dra-aanmeld-kop { font-size: 1.2rem; margin: 0 0 .25rem; }
.dra-aanmeld-sub { color: var(--text-muted); font-size: .88rem; margin: 0 0 1.1rem; }
/* Twee kolommen voor de korte velden: het formulier was zo hoog dat de knop
   alleen na scrollen in beeld kwam. */
.dra-aanmeld-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem .85rem; margin-bottom: 1.1rem; }
.dra-veld-vol { grid-column: 1 / -1; }
.dra-aanmeld-velden label { display: block; font-size: .83rem; font-weight: 600; margin-bottom: .2rem; }
.dra-verplicht { color: var(--danger); }
.dra-optioneel { font-weight: 400; color: var(--text-muted); }
.dra-aanmeld-velden .form-control, .dra-aanmeld-velden .form-select { border-radius: .55rem; padding: .48rem .7rem; font-size: .93rem; }
.dra-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: .7rem .9rem; font-size: .9rem; margin-bottom: 1rem; }
.dra-privacy { display: flex; justify-content: center; gap: .4rem; align-items: center; margin: .7rem 0 0; font-size: .82rem; color: var(--text-muted); }
.dra-privacy i { color: var(--primary); }
.dra-gelukt { background: var(--surface); border: 1px solid var(--primary-border); border-radius: var(--radius); padding: 2.25rem 1.5rem; text-align: center; }
.dra-gelukt-icoon { width: 3rem; height: 3rem; margin: 0 auto .8rem; border-radius: .8rem; background: var(--band-groen); color: var(--primary-dark); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.dra-gelukt h2 { font-size: 1.3rem; margin: 0 0 .4rem; }
.dra-gelukt p { color: var(--text-muted); font-size: .93rem; margin: 0 0 1.2rem; }

@media (max-width: 767.98px) {
  .dra-code-grid { grid-template-columns: 1fr; }
}
@media (max-width: 479.98px) {
  .dra-aanmeld-velden { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .dra-eigenaar-knoppen .btn { width: 100%; }
}