/* ─── Vetlife Marktplaats — CSS (frontend + admin) ────────────────────────── */

:root {
    --vm-primary:    #5a0096;
    --vm-primary-dk: #3d0066;
    --vm-accent:     #fd1458;
    --vm-mid:        #a0007a;
    --vm-gradient:   linear-gradient(135deg, #5a0096 0%, #a0007a 50%, #fd1458 100%);
    --vm-text:       #1a1a2e;
    --vm-muted:      #666666;
    --vm-border:     #e0e0e0;
    --vm-bg:         #faf8fc;
    --vm-white:      #ffffff;
    --vm-radius:     8px;
    --vm-shadow:     0 2px 12px rgba(90,0,150,.10);
    --vm-green:      #1a9e5c;
    --vm-red:        #b32d2e;
    --vm-amber:      #c2760c;
}

.vm-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; color: var(--vm-text); }
.vm-wrap * { box-sizing: border-box; }

/* ─── Knoppen ─────────────────────────────────────────────────────────────── */
/* !important hier is bewust: het thema zet op sommige a/button-elementen een eigen
   harde offset box-shadow + border, waardoor onze knoppen "dubbel" en scheef ogen
   (zelfde probleem als eerder bij vetlife-shop). We forceren daarom een vlakke stijl. */
.vm-btn,
.vm-wrap a.vm-btn,
.vm-wrap button.vm-btn,
.vm-wrap .vm-content-frame a.vm-btn,
.vm-wrap .vm-content-frame button.vm-btn {
    display: inline-block; padding: 10px 20px; border-radius: var(--vm-radius) !important;
    font-size: 15px; font-weight: 600; text-decoration: none !important; cursor: pointer;
    border: 2px solid transparent !important; box-shadow: none !important; text-shadow: none !important;
    filter: none !important; outline: none !important;
    transition: all .2s; line-height: 1.4; vertical-align: middle;
}
.vm-btn::before, .vm-btn::after,
.vm-wrap a.vm-btn::before, .vm-wrap a.vm-btn::after,
.vm-wrap button.vm-btn::before, .vm-wrap button.vm-btn::after {
    content: none !important; box-shadow: none !important; display: none !important;
}
.vm-btn-primary,
.vm-wrap a.vm-btn-primary,
.vm-wrap button.vm-btn-primary,
.vm-wrap .vm-content-frame a.vm-btn-primary,
.vm-wrap .vm-content-frame button.vm-btn-primary { background: var(--vm-gradient) !important; color: #fff !important; }
.vm-btn-primary:hover { opacity: .88; color: #fff !important; transform: translateY(-1px); }
.vm-btn-secondary,
.vm-wrap a.vm-btn-secondary,
.vm-wrap button.vm-btn-secondary,
.vm-wrap .vm-content-frame a.vm-btn-secondary,
.vm-wrap .vm-content-frame button.vm-btn-secondary { background: transparent !important; color: var(--vm-primary) !important; border-color: var(--vm-primary) !important; }
.vm-btn-secondary:hover { background: var(--vm-gradient) !important; color: #fff !important; border-color: transparent !important; }
.vm-btn-danger,
.vm-wrap a.vm-btn-danger,
.vm-wrap button.vm-btn-danger { background: transparent !important; color: var(--vm-red) !important; border-color: var(--vm-red) !important; }
.vm-btn-danger:hover { background: var(--vm-red) !important; color: #fff !important; border-color: transparent !important; }
/* !important nodig: moet de hoge specificiteit van de .vm-wrap .vm-content-frame
   button.vm-btn-combinaties hierboven kunnen overrulen, anders blijft dit "klein"-
   modifier zonder effect en blijven de knoppen op volle (grote) basismaat staan. */
.vm-btn-small,
.vm-wrap a.vm-btn-small,
.vm-wrap button.vm-btn-small,
.vm-wrap .vm-content-frame a.vm-btn-small,
.vm-wrap .vm-content-frame button.vm-btn-small {
    padding: 5px 10px !important; font-size: 12.5px !important; font-weight: 600 !important;
    white-space: nowrap; line-height: 1.3 !important;
}
.vm-link-btn { background: none !important; border: none !important; box-shadow: none !important; padding: 0; color: var(--vm-primary); text-decoration: underline; cursor: pointer; font-size: 13px; }
.vm-link-danger { color: var(--vm-red); }
.vm-clear { margin-left: 8px; color: var(--vm-muted); font-size: 14px; }

/* ─── Kader om de inhoud ─────────────────────────────────────────────────── */
.vm-content-frame { border: 1px solid var(--vm-border); border-radius: var(--vm-radius); padding: 28px; background: var(--vm-white); }
.vm-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 18px; margin-bottom: 28px; }
.vm-toolbar-link { color: var(--vm-primary); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.vm-toolbar-link:hover { text-decoration: underline; color: var(--vm-primary-dk); }
/* !important nodig: het thema rekt knoppen op mobiel anders zelf uit tot width:100%,
   waardoor de "Plaats een advertentie"-knop hier veel te breed/groot oogde en niet
   netjes uitgelijnd stond — zelfde soort themaconflict als bij de rest van de knoppen. */
@media (max-width: 640px) {
    .vm-toolbar { flex-direction: column-reverse; justify-content: center; gap: 12px; }
    .vm-wrap .vm-toolbar a.vm-btn, .vm-wrap .vm-toolbar button.vm-btn {
        width: auto !important; max-width: 100%; display: inline-block !important;
        padding: 9px 18px !important; font-size: 14px !important;
    }
}

/* De opgetelde zijruimte van .vm-wrap (16px) + .vm-content-frame (28px) = 44px per
   kant was op een telefoonscherm te veel: de lijstweergave (rijen, zie hieronder)
   oogde daardoor onnodig smal/samengeknepen. Op mobiel beide flink versmallen, zodat
   de content bijna de volle breedte van het scherm gebruikt — net als bij een normale
   marktplaats-app. Het kader zelf blijft zichtbaar, alleen de padding erbinnen krimpt. */
@media (max-width: 640px) {
    .vm-wrap { padding: 16px 8px 40px; }
    .vm-content-frame { padding: 16px 10px; border-radius: 10px; }
}

/* ─── Factuurgegevens (Mijn advertenties) ────────────────────────────────── */
.vm-billing-details { background: var(--vm-bg); border: 1px solid var(--vm-border); border-radius: var(--vm-radius); padding: 14px 18px; margin-bottom: 22px; }
.vm-billing-details summary { font-weight: 700; cursor: pointer; font-size: 14.5px; color: var(--vm-primary-dk); list-style: revert; }
.vm-billing-details[open] summary { margin-bottom: 10px; }
.vm-billing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; margin: 12px 0 16px; }
.vm-billing-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--vm-muted); }
.vm-billing-grid input[type=text] { font-weight: 400; color: var(--vm-text); padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13.5px; }

/* ─── Header / filters ───────────────────────────────────────────────────── */
.vm-header { margin-bottom: 20px; }
.vm-header h1 { margin: 0 0 4px; color: var(--vm-primary-dk); }
.vm-header-icon { margin-right: 8px; }
/* Marktkraam-SVG-icoon: vaste pixelgrootte i.p.v. mee te schalen met de (nogal
   thema-afhankelijke) h1-tekstgrootte, plus verticaal uitgelijnd op de titeltekst. */
.vm-header-icon svg { width: 30px; height: 30px; vertical-align: -6px; }
.vm-subtitle { color: var(--vm-muted); margin: 0 0 14px; }
.vm-breadcrumb { margin-bottom: 12px; }
.vm-breadcrumb a { color: var(--vm-primary); text-decoration: none; font-weight: 600; font-size: 14px; }

.vm-filters { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 32px; padding: 18px 20px; background: var(--vm-bg); border-radius: var(--vm-radius); row-gap: 14px; }
.vm-filters input[type=text] { flex: 1 1 100%; }
.vm-filters select { flex: 0 1 220px; }
.vm-filters input[type=text], .vm-filters select { padding: 11px 14px; border: 1px solid var(--vm-border); border-radius: var(--vm-radius); font-size: 14px; }
.vm-filters button { flex: 0 0 auto; }

.vm-notice { background: #eafaf1; border: 1px solid var(--vm-green); color: #146c43; padding: 12px 16px; border-radius: var(--vm-radius); margin-bottom: 18px; }
.vm-notice-error { background: #fdecea; border-color: var(--vm-red); color: var(--vm-red); }
.vm-empty { color: var(--vm-muted); padding: 30px 0; text-align: center; }
.vm-muted { color: var(--vm-muted); font-size: 13px; }

/* ─── Grid ───────────────────────────────────────────────────────────────── */
.vm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.vm-card { position: relative; display: block; background: var(--vm-white); border: 1px solid var(--vm-border); border-radius: var(--vm-radius); overflow: hidden; text-decoration: none; color: var(--vm-text); box-shadow: var(--vm-shadow); transition: transform .15s; }
.vm-card:hover { transform: translateY(-3px); color: var(--vm-text); }
.vm-card-sold, .vm-card-reserved { opacity: .6; }
/* Uitgelichte advertenties krijgen hier alleen nog een accent (rand + lichte tint) en de
   badge — geen apart, breder kaartformaat meer: overal (mobiel + desktop) dezelfde
   kaartvorm, zodat uitgelicht en gewoon visueel uit dezelfde lijst/grid voelen. */
.vm-card.vm-card-featured { border: 2px solid var(--vm-mid); background: linear-gradient(135deg, rgba(90,0,150,.05), rgba(253,20,88,.05)); }
.vm-card-image { position: relative; aspect-ratio: 4/3; background: #f5f5f5; overflow: hidden; }
.vm-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vm-no-image { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--vm-muted); font-size: 13px; background: #f0f0f0; }
.vm-card-body { padding: 12px 14px; }
.vm-card-body h3 { font-size: 15px; margin: 0 0 6px; line-height: 1.3; }
.vm-card-price { font-weight: 700; color: var(--vm-primary-dk); margin-bottom: 6px; }
.vm-card-meta { display: flex; gap: 10px; font-size: 12px; color: var(--vm-muted); }
.vm-card-date { font-size: 12px; color: var(--vm-muted); margin-top: 2px; }

/* Op mobiel een compacte, horizontale lijst i.p.v. losse kaarten — vergelijkbaar met
   hoe Marktplaats.nl zijn zoekresultaten op een telefoon toont: klein vierkant beeld
   links, titel/prijs/locatie/datum rechts, één rij per advertentie. */
@media (max-width: 640px) {
    .vm-grid { display: flex; flex-direction: column; gap: 0; }
    .vm-card { display: flex; flex-direction: row; align-items: stretch; gap: 12px; border: none; border-bottom: 1px solid var(--vm-border); border-radius: 0; box-shadow: none; }
    .vm-card:hover { transform: none; }
    .vm-card-image { width: 92px; height: 92px; flex: 0 0 92px; aspect-ratio: unset; border-radius: 8px; margin: 10px 0 10px 2px; }
    .vm-card-body { padding: 10px 4px 10px 0; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
    .vm-card-body h3 { font-size: 14px; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .vm-card-price { font-size: 14px; margin-bottom: 4px; }
    .vm-card-meta { justify-content: space-between; flex-wrap: nowrap; }
    /* Lange categorienamen wrapten eerder naar een 2e regel, wat de datum eronder
       scheef liet ogen — nu blijft de locatie altijd heel en wordt alleen de
       categorie zo nodig afgekapt met "…", zodat de rij altijd één nette regel blijft. */
    .vm-card-meta .vm-card-loc { flex-shrink: 0; white-space: nowrap; }
    .vm-card-meta span:not(.vm-card-loc) { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vm-card-date { text-align: right; margin-top: -2px; }
    .vm-card-meta + .vm-card-date { margin-top: 0; }
    /* Op mobiel is een volle 2px-rand rond een lijstregel druk — i.p.v. daarvan een
       accentrandje links, de bestaande rijscheiding (border-bottom) blijft intact. */
    .vm-card.vm-card-featured { border: none; border-bottom: 1px solid var(--vm-border); border-left: 3px solid var(--vm-mid); padding-left: 6px; }
    /* De "Uitgelicht"-badge stond op mobiel midden over het kleine thumbnail-fotootje
       heen — hier verplaatst naar rechtsboven in de rij, los van de foto, met wat
       ruimte gereserveerd in de tekstkolom zodat titel/prijs er niet onder wegduiken.
       Let op: selector met twee klassen (i.p.v. gewoon ".vm-badge-featured") is hier
       bewust — anders wint de latere, algemene ".vm-badge-featured"-regel verderop in
       dit bestand alsnog de cascade (gelijke specificiteit, later gedefinieerd), met als
       gevolg dat zowel "left" als "right" tegelijk gezet stonden en de badge zich over de
       volle breedte uitrekte tot een grote balk in plaats van een klein label. */
    .vm-card > .vm-badge-featured { top: 6px; right: 6px; left: auto; font-size: 9.5px; padding: 2px 7px; }
    /* Ruimte voor de badge alleen bij de titel reserveren (niet de hele kaartbody) —
       anders werd ook de locatie/datum-regel eronder onnodig versmald, waardoor de
       datum bij uitgelichte advertenties niet meer even ver rechts uitkwam als bij
       gewone advertenties. Zo blijft plaatsnaam altijd links en datum altijd rechts,
       op precies dezelfde plek voor beide soorten kaarten. */
    .vm-card-featured .vm-card-body h3 { padding-right: 72px; }

    /* "Gereserveerd"/"Verkocht" zijn te lange woorden voor het smalle 92px-thumbnailtje
       op mobiel: rechts-verankerd (zoals op desktop) liep de tekst daardoor voorbij de
       linkerrand van de foto en werd het begin van het woord ("G") afgekapt door de
       overflow:hidden van de afbeelding. Hier daarom links verankerd (zodat een eventuele
       afkapping altijd aan het eind van het woord gebeurt, met "…") en met een kleiner
       lettertype dat beter past. Twee klassen in de selector = hogere specificiteit dan
       de latere ".vm-badge-sold"/".vm-badge-reserved"-regels verderop in dit bestand,
       anders wint de cascade-volgorde weer net als eerder bij de uitgelicht-badge. */
    .vm-card-image .vm-badge-sold, .vm-card-image .vm-badge-reserved {
        left: 6px !important; right: auto !important; top: 6px;
        font-size: 8.5px; padding: 2px 6px; max-width: 78px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
}

.vm-badge-featured, .vm-badge-sold, .vm-badge-reserved { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; color: #fff; }
.vm-badge-featured { background: var(--vm-gradient); }
.vm-badge-sold { background: var(--vm-red); left: auto; right: 8px; }
.vm-badge-reserved { background: var(--vm-amber); left: auto; right: 8px; }
h1 .vm-badge-featured, h1 + .vm-badge-featured, .vm-detail-info .vm-badge-featured, .vm-detail-info .vm-badge-sold, .vm-detail-info .vm-badge-reserved { position: static; display: inline-block; margin: 0 6px 8px 0; }

/* ─── Favorieten (hartjes-knop) ──────────────────────────────────────────── */
/* Op kaarten: rond wit knopje rechtsonder op de foto (rechtsboven zit al de
   verkocht/gereserveerd-badge). !important-reset om de knopstijlen van het thema
   buiten de deur te houden, zelfde reden als bij .vm-btn. */
.vm-fav-btn {
    background: rgba(255,255,255,.92) !important; border: none !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.18) !important; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 0 !important; line-height: 1; color: #9a9aa5; transition: color .15s, transform .15s;
}
.vm-fav-btn svg { display: block; width: 18px; height: 18px; fill: currentColor; }
.vm-fav-btn:hover { color: var(--vm-accent); transform: scale(1.08); }
.vm-fav-btn.vm-fav-active { color: var(--vm-accent); }
.vm-fav-card { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50% !important; z-index: 2; }
/* Op de detailpagina: gewone (tekst)knop onder de prijs, met randje. */
.vm-fav-detail {
    position: static; width: auto; height: auto; border-radius: 20px !important;
    border: 1.5px solid var(--vm-border) !important; background: var(--vm-white) !important;
    padding: 7px 14px !important; margin-bottom: 16px; font-size: 13px; font-weight: 600;
}
.vm-fav-detail.vm-fav-active { border-color: var(--vm-accent) !important; }
.vm-fav-detail .vm-fav-btn-text { color: var(--vm-text); }
/* Mobiele lijstweergave: de foto is daar maar 92px — hartje iets kleiner. */
@media (max-width: 640px) {
    .vm-fav-card { width: 28px; height: 28px; right: 5px; bottom: 5px; }
    .vm-fav-card svg { width: 15px; height: 15px; }
}

/* ─── Eigen advertentie tussen de listings ───────────────────────────────── */
.vm-sponsor-ad { grid-column: 1 / -1; position: relative; border: 1px solid var(--vm-border); border-radius: var(--vm-radius); overflow: hidden; background: #fafafa; }
.vm-sponsor-ad::before {
    content: 'Advertentie'; position: absolute; top: 6px; right: 8px; z-index: 2;
    font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: #888; background: rgba(255,255,255,.85); padding: 2px 6px; border-radius: 4px;
}
.vm-sponsor-ad img { max-width: 100%; display: block; }
.vm-sponsor-ad a { display: block; }
@media (max-width: 640px) { .vm-sponsor-ad { border-left: none; border-right: none; border-radius: 0; margin: 4px 0; } }

/* ─── Uitgelichte advertenties — volle breedte, eigen sectie ────────────────── */
.vm-featured-section { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.vm-featured-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vm-mid); margin: 0 0 2px; }
.vm-featured-card { position: relative; display: flex; gap: 24px; background: linear-gradient(135deg, rgba(90,0,150,.06), rgba(253,20,88,.06)); border: 2px solid var(--vm-mid); border-radius: 14px; padding: 20px; text-decoration: none; color: var(--vm-text); transition: transform .15s; }
.vm-featured-card:hover { transform: translateY(-2px); color: var(--vm-text); }
.vm-featured-card-image { width: 240px; flex-shrink: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; background: #f0f0f0; }
.vm-featured-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vm-featured-card-body { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.vm-featured-card-body h3 { margin: 0 0 8px; font-size: 20px; }
.vm-featured-card-price { font-size: 22px; font-weight: 800; color: var(--vm-accent); margin-bottom: 8px; }
.vm-featured-card-meta { font-size: 13px; color: var(--vm-muted); display: flex; gap: 12px; flex-wrap: wrap; }
.vm-featured-card .vm-badge-featured { position: absolute; top: 16px; right: 16px; left: auto; padding: 5px 14px; font-size: 12px; }
@media (max-width: 640px) { .vm-featured-card { flex-direction: column; } .vm-featured-card-image { width: 100%; } }

/* ─── Uitlicht-optie in plaatsingsformulier ──────────────────────────────── */
.vm-feature-option { background: var(--vm-bg); border: 1px dashed var(--vm-mid); border-radius: var(--vm-radius); padding: 14px 16px; margin-top: 18px; display: flex; align-items: flex-start; gap: 12px; }
/* !important + expliciete afmetingen: het thema herstelt anders zijn eigen (soms
   onzichtbare of piepkleine) checkbox-stijl, waardoor dit vinkje op mobiel nauwelijks
   te zien of te raken was — zelfde categorie probleem als eerder bij de knoppen. */
.vm-feature-option input[type=checkbox] {
    -webkit-appearance: checkbox !important; appearance: checkbox !important;
    width: 22px !important; height: 22px !important; min-width: 22px; min-height: 22px;
    margin: 1px 0 0 !important; flex: 0 0 auto; accent-color: var(--vm-mid);
    border: 2px solid var(--vm-mid); border-radius: 4px; opacity: 1 !important; position: static !important;
}
.vm-feature-option-text label { font-weight: 600; font-size: 14px; margin: 0; display: block; }
.vm-feature-option-text .vm-muted { display: block; margin-top: 3px; }
.vm-discount-field { margin-top: 10px; }
.vm-discount-field label { font-weight: 600; font-size: 12.5px; display: block; margin-bottom: 3px; }
.vm-discount-field input[type=text] { width: 100%; max-width: 220px; padding: 7px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; }
.vm-discount-field[hidden] { display: none !important; }

/* ─── Detail ─────────────────────────────────────────────────────────────── */
.vm-detail-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; }
@media (max-width: 780px) { .vm-detail-layout { grid-template-columns: 1fr; } }
.vm-detail-main-image { border-radius: var(--vm-radius); overflow: hidden; background: #f5f5f5; }
.vm-detail-main-image img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: contain; display: block; }
.vm-thumbs { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.vm-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 2px solid transparent; opacity: .7; }
.vm-thumb.active, .vm-thumb:hover { border-color: var(--vm-primary); opacity: 1; }
.vm-detail-info h1 { margin: 4px 0 6px; color: var(--vm-primary-dk); }
.vm-price { font-size: 26px; font-weight: 800; color: var(--vm-accent); margin-bottom: 14px; }
.vm-meta-table { width: 100%; margin-bottom: 16px; border-collapse: collapse; }
.vm-meta-table th { text-align: left; color: var(--vm-muted); font-weight: 600; padding: 4px 12px 4px 0; width: 110px; vertical-align: top; }
.vm-meta-table td { padding: 4px 0; }
.vm-description { margin-bottom: 20px; line-height: 1.6; }
.vm-contact-box { background: var(--vm-bg); border-radius: var(--vm-radius); padding: 16px 18px; margin-bottom: 16px; }
.vm-contact-box h3 { margin: 0 0 8px; font-size: 15px; color: var(--vm-primary-dk); }
.vm-contact-box p { margin: 4px 0; }
.vm-contact-box a { color: var(--vm-primary); }
.vm-owner-actions { display: flex; gap: 10px; }

/* ─── Formulier ──────────────────────────────────────────────────────────── */
.vm-form { display: flex; flex-direction: column; gap: 4px; max-width: 560px; }
.vm-form label { font-weight: 600; margin-top: 12px; font-size: 14px; }
.vm-form input[type=text], .vm-form input[type=number], .vm-form input[type=email], .vm-form input[type=file], .vm-form select, .vm-form textarea {
    padding: 10px 12px; border: 1px solid var(--vm-border); border-radius: var(--vm-radius); font-size: 14px; width: 100%; font-family: inherit;
}
.vm-form textarea { resize: vertical; }
.vm-form h3 { margin: 24px 0 4px; color: var(--vm-primary-dk); }
.vm-form button.vm-btn { margin-top: 20px; align-self: flex-start; }
.vm-existing-photos { display: flex; gap: 8px; margin-top: 8px; }
.vm-existing-photos img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; }

/* ─── Mijn advertenties tabel ────────────────────────────────────────────── */
.vm-my-table { width: 100%; border-collapse: collapse; margin-top: 10px; table-layout: fixed; }
.vm-my-table th, .vm-my-table td { padding: 12px 10px; border-bottom: 1px solid var(--vm-border); text-align: left; font-size: 13px; vertical-align: top; line-height: 1.5; }
.vm-my-table th { color: var(--vm-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; }
.vm-my-table tbody tr:hover { background: var(--vm-bg); }
/* Op smalle schermen knijpen de vaste kolombreedtes (colgroup-percentages) de tekst
   zo samen dat koppen en celinhoud letterlijk door elkaar heen liepen. Vanaf hier
   wordt de tabel i.p.v. verder ingeklemd horizontaal scrollbaar op zijn eigen breedte. */
.vm-my-table-scroll-wrap { position: relative; }
.vm-my-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vm-scroll-hint {
    display: none; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
    color: var(--vm-mid); margin-bottom: 6px; transition: opacity .25s;
}
.vm-scroll-hint-arrow { display: inline-block; animation: vm-scroll-hint-nudge 1.2s ease-in-out infinite; }
@keyframes vm-scroll-hint-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
/* Vage rand rechts als visuele hint dat er meer kolommen volgen — alleen zichtbaar
   zolang de tabel nog niet volledig naar rechts gescrold is (zie .vm-scrolled-end). */
.vm-my-table-scroll-wrap::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.95));
    opacity: 1; transition: opacity .25s;
}
.vm-my-table-scroll-wrap.vm-scrolled-end::after { opacity: 0; }
@media (max-width: 760px) {
    .vm-my-table { table-layout: auto; min-width: 680px; }
    .vm-scroll-hint.vm-has-overflow { display: flex; }
}
.vm-cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.vm-cell-stack .vm-btn { align-self: flex-start; }
.vm-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.vm-inline-form, .vm-feature-form { margin: 0; }

/* Statuspunt (bolletje) voor snelle visuele herkenning van de status */
.vm-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; position: relative; top: -1px; }
.vm-status-dot.vm-status-te_koop { background: var(--vm-green); }
.vm-status-dot.vm-status-gereserveerd { background: var(--vm-amber); }
.vm-status-dot.vm-status-verkocht { background: var(--vm-red); }

.vm-featured-flag { font-weight: 700; color: var(--vm-mid); font-size: 13px; }

/* Acties als rustige tekstlinks i.p.v. dichte knoppen — voorkomt de "rommelige" indruk
   van veel gelijkwaardige pillen naast elkaar. De betaalde "Uitlichten"-CTA blijft
   bewust wél een echte knop, zodat die duidelijk als primaire actie herkenbaar blijft. */
.vm-text-action {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0;
    color: var(--vm-primary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    text-align: left;
}
.vm-text-action:hover { text-decoration: underline; color: var(--vm-primary-dk) !important; }
.vm-text-action-danger { color: var(--vm-red) !important; }
.vm-text-action-danger:hover { color: var(--vm-red) !important; }

/* ─── Modal (uitlichten-uitleg) ──────────────────────────────────────────── */
.vm-modal-overlay { position: fixed; inset: 0; background: rgba(20,10,30,.55); display: flex; align-items: center; justify-content: center; z-index: 99999; padding: 20px; }
.vm-modal-overlay[hidden] { display: none !important; }
.vm-modal { background: #fff; border-radius: 14px; padding: 26px; max-width: 420px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.vm-modal h3 { margin: 0 0 12px; color: var(--vm-primary-dk); font-size: 18px; }
.vm-modal p { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--vm-text); }
.vm-modal-discount { margin: -10px 0 20px; }
.vm-modal-discount label { font-weight: 600; font-size: 12.5px; display: block; margin-bottom: 4px; }
.vm-modal-discount input[type=text] { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; box-sizing: border-box; }
.vm-modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 480px) {
    .vm-modal-actions { flex-direction: column-reverse; }
    .vm-modal-actions .vm-btn { width: 100%; text-align: center; }
}

/* ─── FAQ (marktplaats-overzicht) ─────────────────────────────────────────── */
.vm-faq-section { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--vm-border); }
.vm-faq-section h2 { font-size: 19px; margin: 0 0 16px; color: var(--vm-primary-dk); }
.vm-faq-item { border: 1px solid var(--vm-border); border-radius: var(--vm-radius); padding: 4px 16px; margin-bottom: 10px; background: var(--vm-bg); }
.vm-faq-item summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 14.5px; color: var(--vm-text); list-style: none; position: relative; }
.vm-faq-item summary::-webkit-details-marker { display: none; }
.vm-faq-item summary::after { content: '+'; position: absolute; right: 0; top: 10px; font-size: 18px; font-weight: 700; color: var(--vm-primary); }
.vm-faq-item[open] summary::after { content: '–'; }
.vm-faq-answer { padding: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--vm-muted); }
.vm-faq-answer p { margin: 0 0 8px; }

/* ─── Admin ──────────────────────────────────────────────────────────────── */
.vm-wrap-admin .vm-stats { display: flex; gap: 16px; margin: 16px 0; }
.vm-wrap-admin .vm-stat { background: #fff; border: 1px solid var(--vm-border); border-radius: var(--vm-radius); padding: 14px 22px; }
.vm-wrap-admin .vm-stat strong { display: block; font-size: 22px; color: var(--vm-primary-dk); }
.vm-wrap-admin .vm-stat span { font-size: 12px; color: var(--vm-muted); }

/* KPI-dashboard: dezelfde .vm-stat-kaartjes als hierboven, maar in een los grid
   i.p.v. flex — met meer kaartjes (8 stuks) wrapt dit netjes door i.p.v. van het
   scherm af te lopen zoals bij een simpele flex-rij zou gebeuren. */
.vm-wrap-admin .vm-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 16px 0 24px; }
.vm-wrap-admin .vm-kpi-grid .vm-stat { padding: 14px 16px; }
.vm-wrap-admin .vm-kpi-grid .vm-stat strong { font-size: 19px; }
.vm-wrap-admin .vm-kpi-grid .vm-stat span { line-height: 1.35; }

/* Los dashboard met grafieken (Marktplaats → Dashboard) — twee kolommen op breed
   scherm, één kolom zodra het niet meer past. */
.vm-wrap-admin .vm-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; margin-top: 8px; }
.vm-wrap-admin .vm-chart-card { background: #fff; border: 1px solid var(--vm-border); border-radius: var(--vm-radius); padding: 18px 20px; }
.vm-wrap-admin .vm-chart-card h3 { margin: 0 0 14px; font-size: 13.5px; color: var(--vm-primary-dk); }
/* Chart.js schaalt de canvas naar de hoogte van zijn OUDER-element — zonder een
   expliciete hoogte hier zakt die ouder terug naar 0 (want zijn enige inhoud is de
   canvas zelf, en die weet op zijn beurt niet hoe groot hij moet zijn: een lus
   zonder uitgang), met een onzichtbare grafiek van 0px hoog tot gevolg. Vandaar hier
   een vaste hoogte op de wrapper, en maintainAspectRatio:false in de JS-config zodat
   Chart.js die hoogte ook daadwerkelijk volledig opvult i.p.v. zijn eigen ratio te forceren. */
.vm-wrap-admin .vm-chart-canvas-wrap { position: relative; height: 260px; }