/* ==========================================================================
   Autopair - auto verkopen: gedeelde onderdelen
   Geladen op de site, in het dealerportaal en in de app van de verkoper.
   Gebruikt alleen kleurvariabelen die overal bestaan (--primary, --line ...).
   ========================================================================== */

/* ---------- Kentekenplaat ---------- */
.nl-plaat {
    display: inline-flex; align-items: stretch; vertical-align: middle; background: #F7C600; color: #111;
    border: 1.5px solid #161616; border-radius: 6px; overflow: hidden; line-height: 1;
    font-family: var(--mono); font-weight: 800; letter-spacing: 0.06em; font-size: 0.95rem; white-space: nowrap;
}
.nl-plaat-eu {
    display: flex; align-items: flex-end; justify-content: center; background: #0B3F9E; color: #fff;
    font-family: var(--sans); font-weight: 800; font-size: 0.56em; letter-spacing: 0; padding: 0 4px 3px; min-width: 18px; position: relative;
}
.nl-plaat-eu::before {
    content: ''; position: absolute; top: 3px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
    border: 1.5px dotted #F7C600;
}
.nl-plaat-tekst { padding: 4px 9px 3px; }
.nl-plaat.klein { font-size: 0.78rem; border-width: 1.2px; border-radius: 5px; }
.nl-plaat.klein .nl-plaat-tekst { padding: 3px 7px 2px; }
.nl-plaat.groot { font-size: 1.35rem; border-width: 2px; border-radius: 9px; }
.nl-plaat.groot .nl-plaat-tekst { padding: 7px 14px 6px; }
.nl-plaat.groot .nl-plaat-eu { min-width: 26px; padding-bottom: 5px; }
.nl-plaat.groot .nl-plaat-eu::before { width: 13px; height: 13px; margin-left: -6.5px; top: 5px; }

/* ---------- Statuslabels ---------- */
.vk-pil-status {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
    font-size: 0.76rem; font-weight: 700; white-space: nowrap; background: var(--bg-soft); color: var(--ink-soft);
}
.vk-pil-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.vk-pil-status.blauw { background: var(--primary-tint); color: var(--primary); }
.vk-pil-status.oranje { background: #FDF0E6; color: #B4501B; }
.vk-pil-status.groen { background: var(--accent-tint); color: var(--accent-dark); }
.vk-pil-status.grijs { background: #EFF0F2; color: #5E6168; }
.vk-pil-status.rood { background: #FDECEC; color: #B91C1C; }
.vk-pil-status.blauw::before { animation: vk-puls 1.6s ease-in-out infinite; }
@keyframes vk-puls { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.5); opacity: 0.35; } }

/* ---------- Aftellen ---------- */
.vk-aftel { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.vk-aftel.bijna { color: #C2410C; }

/* ---------- Kenmerken, vragen, RDW-controles ---------- */
.vk-kenmerken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin: 0; }
.vk-kenmerken > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; min-width: 0; }
.vk-kenmerken dt { color: var(--ink-soft); }
.vk-kenmerken dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 560px) { .vk-kenmerken { grid-template-columns: minmax(0, 1fr); } }

.vk-vragenlijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vk-vragenlijst li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--bg-soft); font-size: 0.86rem; }
.vk-vragenlijst li span { color: var(--ink-soft); }
.vk-vragenlijst li strong { white-space: nowrap; }
.vk-vragenlijst li.let-op { background: #FDF0E6; }
.vk-vragenlijst li.let-op strong { color: #B4501B; }
@media (max-width: 560px) { .vk-vragenlijst { grid-template-columns: minmax(0, 1fr); } }

.vk-controles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vk-controles li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 0.86rem; background: #fff; }
.vk-controles li span:nth-child(2) { color: var(--ink-soft); }
.vk-controle-icoon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 0.8rem; }
.vk-controles li.goed .vk-controle-icoon { background: var(--accent-tint); color: var(--accent-dark); }
.vk-controles li.let-op { border-color: #F6C9A8; background: #FFF8F2; }
.vk-controles li.let-op .vk-controle-icoon { background: #FDE2CF; color: #B4501B; }
.vk-controles li.onbekend .vk-controle-icoon { background: var(--bg-soft); color: var(--muted); }
@media (max-width: 560px) { .vk-controles { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Fotogalerij ---------- */
.vk-galerij { display: flex; flex-direction: column; gap: 8px; }
.vk-galerij-groot { display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #0F1A2E; }
.vk-galerij-groot img { width: 100%; height: 100%; object-fit: cover; }
.vk-galerij-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.vk-galerij-strip button { flex: 0 0 72px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--bg-soft); opacity: 0.75; }
.vk-galerij-strip button.actief { border-color: var(--primary); opacity: 1; }
.vk-galerij-strip img { width: 100%; height: 100%; object-fit: cover; }
.vk-galerij.leeg { aspect-ratio: 4 / 3; border-radius: 18px; background: var(--bg-soft); display: grid; place-items: center; color: var(--muted); font-weight: 600; }
.vk-geen-foto { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, #E8EEF8, #F5F7FB); color: #9AA8C2; }
.vk-geen-foto svg { width: 46%; height: auto; }

/* ---------- Tijdlijn voor de verkoper ---------- */
.vk-tijdlijn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.vk-tijdlijn li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 700; color: var(--muted); text-align: center; }
.vk-tijdlijn li::before { content: ''; position: absolute; top: 7px; left: -50%; right: 50%; height: 2px; background: var(--line); }
.vk-tijdlijn li:first-child::before { display: none; }
.vk-tijdlijn li span { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--line-strong); }
.vk-tijdlijn li.klaar { color: var(--accent-dark); }
.vk-tijdlijn li.klaar::before, .vk-tijdlijn li.nu::before { background: var(--accent); }
.vk-tijdlijn li.klaar span { background: var(--accent); border-color: var(--accent); }
.vk-tijdlijn li.nu { color: var(--primary); }
.vk-tijdlijn li.nu span { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-tint); background: var(--primary); }

/* ---------- Biedingen (lijst bij de verkoper en de inkoper) ---------- */
.vk-biedingen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vk-bod { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.vk-bod.hoogste { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.vk-bod-wie { min-width: 0; }
.vk-bod-wie strong { display: block; font-size: 0.98rem; }
.vk-bod-wie small { display: block; color: var(--ink-soft); font-size: 0.8rem; margin-top: 2px; }
.vk-bod-bedrag { font-family: var(--mono); font-weight: 800; font-size: 1.3rem; text-align: right; white-space: nowrap; }
.vk-bod-bedrag small { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.vk-bod-noot { grid-column: 1 / -1; font-size: 0.84rem; color: var(--ink-soft); background: var(--bg-soft); border-radius: 10px; padding: 8px 11px; }
.vk-bod-acties { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.vk-bod-label { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-dark); margin-left: 6px; vertical-align: 2px; }
.vk-bod-label.oranje { background: #FDF0E6; color: #B4501B; }
.vk-bod-label.grijs { background: #EFF0F2; color: #5E6168; }

/* ---------- Gesprek ---------- */
.vk-chat { display: flex; flex-direction: column; gap: 8px; }
.vk-chat-bericht { max-width: 78%; padding: 10px 14px; border-radius: 18px; font-size: 0.92rem; line-height: 1.45; background: var(--bg-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.vk-chat-bericht small { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 4px; }
.vk-chat-bericht.eigen { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 6px; }
.vk-chat-bericht.eigen small { color: rgba(255,255,255,0.7); }
.vk-chat-bericht.ander { align-self: flex-start; border-bottom-left-radius: 6px; }
.vk-chat-bericht.systeem { align-self: center; max-width: 92%; background: #FFF8E6; color: #7A5410; font-size: 0.84rem; text-align: center; border-radius: 12px; }
.vk-chat-leeg { text-align: center; color: var(--muted); font-size: 0.9rem; padding: 18px 8px; }