/* =============================================================================
   AP-VEHICLE-DETAIL.CSS — Advertentiepagina (slice 1)
   Valkuilen-reset bovenaan: alle maten in px op de elementen zelf, thema-basis
   geneutraliseerd binnen .ap-advertentie. Knoppen expliciet gestyled met
   !important om de WooCommerce-knopregel te verslaan. Accent = #1B4DE4.
   ============================================================================= */

/* ---- Reset / neutralisatie van de thema-basis ---- */
.ap-advertentie, .ap-advertentie *{ box-sizing:border-box; }
.ap-advertentie{ line-height:1.4; }
.ap-advertentie p, .ap-advertentie h1, .ap-advertentie h2{ margin:0; }
.ap-advertentie ul, .ap-advertentie li{ margin:0; padding:0; list-style:none; }
.ap-advertentie input, .ap-advertentie textarea, .ap-advertentie button{ font-family:inherit; line-height:normal; }

/* grijze pagina-achtergrond + volledige breedte (alleen deze pagina) */
.ap-content:has(.ap-advertentie){ background:#F5F7FB; max-width:none !important; }

.ap-advertentie{ display:flex; flex-direction:column; gap:14px; padding-bottom:40px; }

/* ============== STATUSREGEL ============== */
.ap-adv-status{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ap-adv-pill{
    display:inline-flex; align-items:center; gap:7px;
    height:28px; padding:0 12px; border-radius:999px;
    font-size:12px; font-weight:600;
}
.ap-adv-pill i{ font-size:14px; }
.ap-adv-pill--bieding{ background:#FFF6E5; border:1px solid #F2DFB0; color:#8A6100; }
.ap-adv-pill--direct{ background:#E9F8EF; border:1px solid #CDEEDC; color:#1B7A4B; }
.ap-adv-statusuitleg{ font-size:12.5px; color:#6B7A93; }
.ap-adv-statusrechts{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.ap-adv-gevraagd{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#6B7A93; white-space:nowrap; }
.ap-adv-gevraagd i{ font-size:14px; color:#93A2B8; }
.ap-advertentie .ap-adv-deel{
    display:inline-flex; align-items:center; gap:7px;
    height:32px; padding:0 12px; border-radius:9px;
    background:#F0FBF4 !important; border:1px solid #CDEEDC !important; color:#1B7A4B !important;
    font-size:12.5px; font-weight:550; cursor:pointer; line-height:1;
}
.ap-adv-deel i{ font-size:15px; }
.ap-advertentie .ap-adv-deel.is-kopieerd{ background:#EFFAF3 !important; }

/* ============== KOLOMMEN ============== */
.ap-adv-grid{ display:flex; gap:20px; align-items:flex-start; width:100%; }
.ap-adv-links{ flex:2 1 520px; min-width:0; display:flex; flex-direction:column; gap:20px; }
.ap-adv-rechts{ flex:1 1 330px; min-width:0; position:sticky; top:80px; display:flex; flex-direction:column; gap:20px; }

/* Gedeelde kaartvorm */
.ap-adv-kaart{
    border-radius:14px; border:1px solid #E7EBF2; background:#FFFFFF;
    box-shadow:0 1px 1px rgba(16,35,64,.03), 0 8px 24px -20px rgba(16,35,64,.45);
    overflow:hidden;
}

/* ---------- Fotoblok ---------- */
.ap-adv-hoofdfoto{
    position:relative;
    aspect-ratio:16/9;
    background:linear-gradient(155deg,#EDF1F8,#DFE6F1);
    background-size:cover; background-position:center;
    display:flex; align-items:center; justify-content:center;
}
.ap-adv-hoofdfoto.is-leeg i{ font-size:40px; color:#B3BFD1; }
.ap-adv-verkochtlaag{
    position:absolute; inset:0; pointer-events:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    background:rgba(11,31,63,.55);
}
.ap-adv-verkochtblok{
    display:flex; align-items:center; gap:8px;
    padding:11px 20px; border-radius:10px; background:#B0403A; color:#fff;
    font-size:15px; font-weight:600;
}
.ap-adv-verkochtblok i{ font-size:18px; }
.ap-adv-verkochtsub{ font-size:12px; color:rgba(255,255,255,.86); }
.ap-adv-strip{
    display:flex; flex-wrap:wrap; gap:4px; padding:5px 6px 6px;
}
.ap-adv-thumb{
    flex:0 0 auto; width:104px; aspect-ratio:4/3; border-radius:7px;
    background:linear-gradient(155deg,#EDF1F8,#DFE6F1);
    background-size:cover; background-position:center;
    border:2px solid transparent; cursor:pointer; outline:none;
    transition:border-color .12s, opacity .12s;
}
.ap-adv-thumb:hover{ opacity:.9; }
.ap-adv-thumb.is-active{ border-color:#1B4DE4; }

/* ---------- Gegevenskaart ---------- */
.ap-adv-gkop{ display:flex; align-items:flex-start; gap:12px; padding:18px 20px 15px; }
.ap-adv-gkoptekst{ flex:1 1 auto; min-width:0; }
.ap-adv-titel{ font-size:19px; font-weight:600; letter-spacing:-.022em; color:#0C1F3F; }
.ap-adv-uitvoering{ margin-top:3px; font-size:13px; color:#6B7A93; }
.ap-adv-plaat{
    flex:0 0 auto;
    display:inline-flex; align-items:center; height:26px; padding:0 10px;
    border-radius:5px; background:#F6C700; border:1px solid #D8B400;
    color:#1A1A00; font-size:12.5px; font-weight:700; letter-spacing:.06em;
}
.ap-adv-specs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); }
.ap-adv-spec{ display:flex; align-items:flex-start; gap:9px; padding:12px 20px; box-shadow:0 0 0 1px #F1F4F9; }
.ap-adv-spec > i{ font-size:15px; color:#93A2B8; margin-top:1px; }
.ap-adv-spectekst{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.ap-adv-speclabel{ font-size:10.5px; font-weight:550; letter-spacing:.05em; color:#8B99AE; text-transform:uppercase; }
.ap-adv-specwaarde{ font-size:12.5px; color:#0C1F3F; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-adv-toelichting{ padding:16px 20px; }
.ap-adv-toelkop{ font-size:12.5px; font-weight:600; color:#0C1F3F; margin-bottom:6px; }
.ap-adv-toeltekst{ font-size:12.5px; line-height:1.6; color:#42536B; text-wrap:pretty; }

/* ---------- Actiekaart (prijs) ---------- */
.ap-adv-actie{ padding:18px 20px 16px; display:flex; flex-direction:column; gap:14px; }
.ap-adv-kicker{ font-size:10.5px; font-weight:600; letter-spacing:.09em; color:#8B99AE; }
.ap-adv-bedragrij{ display:flex; align-items:baseline; gap:8px; margin-top:4px; }
.ap-adv-bedrag{ font-size:26px; font-weight:600; letter-spacing:-.028em; color:#0C1F3F; }
.ap-adv-btw{ font-size:12px; color:#6B7A93; }
.ap-adv-onder{ margin-top:4px; font-size:12px; color:#6B7A93; }
.ap-adv-uitlegkader{
    display:flex; gap:9px; padding:12px 14px; border-radius:11px;
    background:#FFF9EC; border:1px solid #F2DFB0;
}
.ap-adv-uitlegkader i{ flex:0 0 auto; font-size:16px; color:#8A6100; margin-top:1px; }
.ap-adv-uitlegkader span{ font-size:11.5px; line-height:1.5; color:#7A5B14; }

/* ---------- Biedformulier ---------- */
.ap-adv-bodform{ display:flex; flex-direction:column; gap:10px; }
.ap-adv-bodlabel{ font-size:11.5px; font-weight:550; color:#42536B; }
.ap-adv-bedragveld{
    display:flex; align-items:center; gap:8px;
    height:42px; padding:0 12px; border-radius:10px;
    background:#fff; border:1px solid #DDE3ED;
}
.ap-adv-euro{ font-size:15px; color:#8B99AE; }
.ap-advertentie .ap-adv-bedragveld input{
    flex:1 1 auto; min-width:0;
    border:0 !important; background:transparent !important; outline:0;
    font-size:16px; font-weight:600; color:#0C1F3F;
    padding:0 !important;
}
.ap-adv-veldbtw{ flex:0 0 auto; font-size:11.5px; color:#8B99AE; }
.ap-adv-zichtbaar{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:#8B99AE; }
.ap-adv-zichtbaar i{ font-size:13px; }
.ap-advertentie .ap-adv-toel{
    width:100%; resize:none;
    border:1px solid #E2E7F0 !important; background:#fff !important; border-radius:10px;
    padding:9px 11px; font-size:12.5px; line-height:1.5; color:#0C1F3F; outline:0;
}
.ap-advertentie .ap-adv-toel:focus{ border-color:#1B4DE4 !important; }
.ap-advertentie .ap-adv-bodknop{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:40px; border-radius:10px;
    background:#1B4DE4 !important; border:0 !important; color:#fff !important;
    font-size:13px; font-weight:600; cursor:pointer;
    transition:background .15s, box-shadow .15s;
}
.ap-adv-bodknop i{ font-size:16px; }
.ap-advertentie .ap-adv-bodknop:hover{ background:#143BB0 !important; box-shadow:0 2px 12px rgba(27,77,228,.26); }
.ap-advertentie .ap-adv-bodknop[disabled]{ opacity:.6; cursor:default; }
.ap-adv-bodnoot{ text-align:center; font-size:11px; color:#8B99AE; }
.ap-adv-boderror{ font-size:11.5px; color:#B0403A; }

/* ---------- Bod uitgebracht (bevestiging) ---------- */
.ap-adv-bodgedaan{
    display:flex; align-items:flex-start; gap:10px;
    padding:12px 14px; border-radius:11px;
    background:#EFFAF3; border:1px solid #CDEEDC;
}
.ap-adv-bodgedaan > i{ flex:0 0 auto; font-size:18px; color:#2FA96B; margin-top:1px; }
.ap-adv-bodgedaan div{ display:flex; flex-direction:column; gap:2px; }
.ap-adv-bodgedaan b{ font-size:12.5px; font-weight:600; color:#14603C; }
.ap-adv-bodgedaan span{ font-size:11.5px; color:#4B6B58; }
.ap-adv-bodgedaan--verkocht{ background:#F5F7FB; border-color:#E7EBF2; }
.ap-adv-bodgedaan--verkocht > i{ color:#93A2B8; }
.ap-adv-bodgedaan--verkocht b{ color:#42536B; }
.ap-adv-bodgedaan--verkocht span{ color:#8B99AE; }

/* ---------- Bericht de aanbieder (direct beschikbaar) ---------- */
.ap-advertentie .ap-adv-berichtknop{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:38px; border-radius:10px;
    background:#fff !important; border:1px solid #DDE3ED !important; color:#42536B !important;
    font-size:13px; font-weight:600; text-decoration:none;
    transition:background .15s, border-color .15s, color .15s;
}
.ap-adv-berichtknop i{ font-size:16px; }
.ap-advertentie .ap-adv-berichtknop:hover{ background:#F5F8FE !important; border-color:#1B4DE4 !important; color:#1B4DE4 !important; }

/* ---------- Bewerken-knop (eigenaar) ---------- */
.ap-advertentie .ap-adv-bewerkknop{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:40px; border-radius:10px;
    background:#1B4DE4 !important; border:0 !important; color:#fff !important;
    font-size:13px; font-weight:600; text-decoration:none;
    transition:background .15s, box-shadow .15s;
}
.ap-adv-bewerkknop i{ font-size:15px; }
.ap-advertentie .ap-adv-bewerkknop:hover{ background:#143BB0 !important; box-shadow:0 2px 12px rgba(27,77,228,.26); }

/* ---------- Eigenaar-notitie (slice 2c = volledige eigenaar-view) ---------- */
.ap-adv-eigenaarnote{
    display:flex; gap:9px; padding:12px 14px; border-radius:11px;
    background:#F5F8FE; border:1px solid #E1E9FA;
}
.ap-adv-eigenaarnote i{ flex:0 0 auto; font-size:16px; color:#1B4DE4; margin-top:1px; }
.ap-adv-eigenaarnote span{ font-size:11.5px; line-height:1.5; color:#6B7A93; }
.ap-adv-eigenaarnote a{ color:#1B4DE4; text-decoration:none; font-weight:550; }

/* ---------- Aanbiederkaart ---------- */
.ap-adv-aankop{ display:flex; align-items:center; gap:12px; padding:15px 18px; }
.ap-adv-aanlogo{
    flex:0 0 auto; width:40px; height:40px; border-radius:10px;
    display:grid; place-items:center; background:#F2F5FA; color:#42536B;
    font-size:13px; font-weight:600;
}
.ap-adv-aantekst{ min-width:0; }
.ap-adv-aannaam{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#0C1F3F; }
.ap-adv-aannaam i{ font-size:13px; color:#2FA96B; }
.ap-adv-aanmeta{ margin-top:2px; font-size:11.5px; color:#8B99AE; }
.ap-adv-aanvoet{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #EEF1F7; }
.ap-advertentie .ap-adv-aanactie{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    padding:11px; font-size:12px; font-weight:550; color:#42536B !important;
    text-decoration:none; background:#FFFFFF !important; border:0 !important;
}
.ap-adv-aanactie:first-child{ border-right:1px solid #EEF1F7 !important; }
.ap-adv-aanactie i{ font-size:14px; }
.ap-advertentie .ap-adv-aanactie:hover{ background:#F5F8FE !important; color:#1B4DE4 !important; }

/* ---------- Vertrouwensnoot ---------- */
.ap-adv-vertrouwen{
    display:flex; gap:10px; padding:13px 15px; border-radius:13px;
    background:#F5F8FE; border:1px solid #E1E9FA;
}
.ap-adv-vertrouwen i{ flex:0 0 auto; font-size:16px; color:#1B4DE4; margin-top:1px; }
.ap-adv-vertrouwen span{ font-size:11.5px; line-height:1.5; color:#6B7A93; }

/* ---------- Foutmelding ---------- */
.ap-adv-leeg{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:60px 20px; text-align:center; }
.ap-adv-leeg i{ font-size:34px; color:#B3BFD1; }
.ap-adv-leeg p{ font-size:13px; color:#7A889E; }
.ap-advertentie .ap-adv-terug{
    height:36px; padding:0 16px; display:inline-flex; align-items:center;
    border-radius:9px; background:#1B4DE4 !important; color:#fff !important;
    font-size:12.5px; font-weight:550; text-decoration:none;
}

/* ---------- header-breadcrumb (ook hier, voor het geval) ---------- */
.ap-global-header .ap-topbar__crumb{ display:flex; align-items:center; gap:7px; }
.ap-global-header .ap-topbar__crumb a{ font-size:12.5px !important; color:#7B8CA6 !important; text-decoration:none; }
.ap-global-header .ap-topbar__crumb a:hover{ color:#1B4DE4 !important; }
.ap-global-header .ap-topbar__crumb i{ font-size:10px !important; color:#B3BFD1 !important; }
.ap-global-header .ap-topbar__crumb span{ font-size:14.5px !important; font-weight:600 !important; letter-spacing:-.015em; color:#0C1F3F !important; }

/* ============== MOBIEL (voorlopig: kolommen stapelen; volledige mobiele opzet = slice 3) ============== */
@media (max-width:768px){
    .ap-adv-grid{ flex-direction:column; }
    .ap-adv-links, .ap-adv-rechts{ flex:1 1 auto; width:100%; }
    .ap-adv-rechts{ position:static; top:auto; }
}