/* certificaat-check.php: echtheid van een eigendomscertificaat nakijken. Voorvoegsel .cc-. */
.cc-body { padding: clamp(1.25rem, 3vw, 2rem) 0 3rem; }
.cc-kolom { max-width: 44rem; margin: 0 auto; display: grid; gap: 1.25rem; }
.cc-kaart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.15rem 1.25rem; }
.cc-kop { font-family: var(--font-body); font-size: 1.08rem; font-weight: 700; margin: 0 0 .2rem; }
.cc-uitleg { font-size: .9rem; color: var(--text-muted); margin: 0 0 .9rem; }

.cc-zoek { display: flex; gap: .6rem; flex-wrap: wrap; }
.cc-veld { flex: 1 1 15rem; min-width: 0; display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: .7rem; background: var(--surface); overflow: hidden; }
.cc-veld:focus-within { border-color: var(--primary); }
.cc-veld i { padding: 0 .75rem; color: var(--text-muted); }
.cc-veld input { border: 0; outline: 0; flex: 1; min-width: 0; padding: .75rem .8rem .75rem 0; font-size: 1rem; font-weight: 600; letter-spacing: .05em; background: transparent; text-transform: uppercase; }
.cc-knop { border: 0; border-radius: .7rem; background: var(--primary); color: #fff; font-weight: 700; font-size: 1rem; padding: .75rem 1.5rem; }
.cc-knop:hover { background: var(--primary-dark); }
.cc-hint { font-size: .85rem; color: var(--text-muted); margin: .6rem 0 0; }
.cc-hint code { background: var(--bg); border: 1px solid var(--border); border-radius: .3rem; padding: .05rem .35rem; color: var(--text); }

/* Uitslag */
.cc-uitslag { border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.cc-uitslag-kop { display: flex; gap: .85rem; align-items: flex-start; padding: 1.15rem 1.25rem; }
.cc-uitslag-icoon { width: 2.6rem; height: 2.6rem; flex-shrink: 0; border-radius: .7rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.cc-uitslag h2 { font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; margin: 0 0 .15rem; }
.cc-uitslag p { margin: 0; font-size: .92rem; color: var(--text-muted); line-height: 1.55; }
.cc-geldig { border-color: var(--primary-border); }
.cc-geldig .cc-uitslag-icoon { background: var(--band-groen); color: var(--primary-dark); }
.cc-onbekend { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.cc-onbekend .cc-uitslag-icoon { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.cc-onbekend .cc-uitslag h2 { color: var(--danger); }

.cc-vlak { border-top: 1px solid var(--border); padding: 1rem 1.25rem; }
.cc-vlak h3 { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); font-family: var(--font-body); margin: 0 0 .6rem; }
.cc-gegevens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.25rem; }
.cc-gegevens > div { min-width: 0; }
.cc-breed { grid-column: 1 / -1; }
.cc-gegevens dt { font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0; }
.cc-gegevens dd { margin: .12rem 0 0; font-size: .95rem; font-weight: 600; overflow-wrap: anywhere; }
.cc-nummer { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; color: var(--primary-darker); }
.cc-let-op { display: flex; gap: .55rem; align-items: flex-start; font-size: .86rem; color: var(--text-muted); line-height: 1.55; background: var(--bg); border-radius: var(--radius-sm); padding: .7rem .85rem; }
.cc-let-op i { margin-top: .15rem; flex-shrink: 0; }

.cc-stappen { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; font-size: .9rem; color: var(--text-muted); line-height: 1.6; }
.cc-stappen li::marker { font-weight: 700; color: var(--primary-dark); }

@media (max-width: 575.98px) {
  .cc-gegevens { grid-template-columns: 1fr; }
  .cc-knop { flex: 1 1 100%; }
}

/* Melding bij te veel pogingen (rate limit). */
.cc-melding { margin: 0; padding: .9rem 1.1rem; border-radius: var(--radius, 12px); background: #fff7e0; border: 1px solid #f2d58a; color: #7a4b00; font-size: .95rem; }