/* =============================================================================
   AP-CORE.CSS — INHOUDSOPGAVE
   =============================================================================
   Root variabelen & basis reset ......................... regel 1
   Sidebar & navigatie .................................... regel 10
   Content cards / hero / dashboard ....................... regel 26
   AP Global header ....................................... regel 60
   Layout: sidebar (vast) + content ....................... regel 116
   Membership knoppen (annuleren / activeren) ............. regel 204
   Hero-card met AP-watermerk ............................. regel 260
   Modal ................................................... regel 307
   Hulp-blok sidebar ....................................... regel 402
   Menu inklappen / mobiel sidebar ........................ regel 469
   Orders page ............................................. regel 559
   Account settings page ................................... regel 635
   AP Login page ........................................... regel 748
   WooCommerce checkout/cart styling ....................... regel 900

   >>> WOOCOMMERCE-PAGINA OVERRIDES (foutgevoelig, zie waarschuwing daar) regel ~969

   Login rechtervlak / profiel-CTA ......................... regel 1082
   Statische kaarten ........................................ regel 1112
   Formulieren (Expertise & Advies, Fluent Forms) .......... regel 1636
   Documentenbank ........................................... regel 1924
   AP Netwerkborrel (events) ................................ regel 2073
   Profiel-voortgang (voortgangscirkel) ..................... regel 2741
   Rondleiding (dashboard tour) ............................. regel 2920
   AP Netwerk profielpagina (contact/activiteiten bewerken) . regel 3116
   Login/wachtwoord meldingen ............................... regel 3514

   >>> STRUCTURELE FIX: donkere containers altijd lichte tekst (foutgevoelig,
       zie waarschuwing daar, werkt samen met de WooCommerce-sectie hierboven)
       ................................................... regel ~3755

   Responsive (@media) blokken staan verspreid door het bestand, direct
   bij het onderdeel waar ze bij horen (bewust niet verplaatst: dat zou
   het risico geven dat volgorde-afhankelijke regels van winnaar wisselen).
   ============================================================================= */

/* ===== Poppins (self-hosted, geen externe requests naar Google Fonts) ===== */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/Poppins-Regular.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/Poppins-Italic.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/Poppins-Medium.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/Poppins-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/Poppins-Bold.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/Poppins-ExtraBold.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap;
  src:url('../fonts/Poppins-Black.woff2') format('woff2');}

:root{--ap-navy:#0b2a5b;--ap-navy-2:#082044;--ap-blue:#1447e6;--ap-blue-2:#113cc3;
  --ap-text:#3d4756;--ap-muted:#60708a;--ap-bg:#eaf1ff;--ap-card:#fff;--ap-border:#dce7f5;
  --ap-soft:#eef5ff;--ap-success:#b9ffd0;--ap-radius:18px;--ap-shadow:0 18px 45px rgba(8,31,69,.08);
  --ap-font:'Poppins',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
*{box-sizing:border-box}body{margin:0;color:var(--ap-text);font-family:var(--ap-font);background:var(--ap-bg);overflow-x:hidden}
img,svg,video{max-width:100%}
a{color:var(--ap-blue);font-weight:700}
.ap-public-page{max-width:1180px;margin:0 auto;padding:48px 24px}

/* ===== Sidebar nav-items (schalen mee met schermhoogte) ===== */
.ap-nav{display:grid;gap:clamp(3px, 0.7vh, 6px)}
.ap-nav__item{
    display:flex;
    align-items:center;
    gap:13px;
    color:#eaf2ff !important;
    text-decoration:none;
    padding:clamp(8px, 1.4vh, 12px) 14px;
    border-radius:10px;
    font-size:clamp(13px, 1.6vh, 15px);
}
/* Menulabel staat in een <strong>-tag, die forceert standaard font-weight 700 (Poppins Bold).
   Dat oogt te zwaar/dicht op donkere achtergrond bij kleine tekst, dus verlichten naar SemiBold
   met iets meer letterspatiëring voor leesbaarheid. */
.ap-nav__item strong{
    font-weight:600;
    letter-spacing:.015em;
}
.ap-nav__item.is-active,.ap-nav__item:hover{background:linear-gradient(90deg,#1447e6,#174ef5);color:white !important}
.ap-nav__item span{width:22px;text-align:center}
.ap-collapse{border:0;background:rgba(255,255,255,.06);color:white;border-radius:999px;padding:clamp(9px, 1.3vh, 11px) 16px;text-align:left;cursor:pointer;font-size:clamp(12px, 1.5vh, 14px)}

/* ===== Sidebar sectietitel ===== */
.ap-nav__section-label{
    margin:20px 14px 10px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.12);

    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;

    color:rgba(255,255,255,.55);
}

/* ===== Content cards ===== */
.ap-hero-card{border-radius:var(--ap-radius);padding:30px;box-shadow:var(--ap-shadow)}
.ap-kicker{margin:0 0 8px;color:var(--ap-blue);font-weight:900;letter-spacing:.03em}
.ap-hero-card p{color:var(--ap-muted);margin:0 0 18px}
.ap-status-bar{display:flex;align-items:center;gap:16px;background:linear-gradient(90deg,#041a3a,#061f49);color:white;border-radius:14px;padding:16px 18px}
.ap-button{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:12px 18px;text-decoration:none}
.ap-button--primary{margin-left:auto;background:var(--ap-blue);color:white}
.ap-pill{border-radius:999px;padding:9px 15px;font-weight:800;font-size:14px}
.ap-pill--success{background:var(--ap-success);color:#09622b}
.ap-card-grid{display:grid;gap:22px;margin-top:24px}
.ap-card-grid--three{grid-template-columns:repeat(3,1fr)}
.ap-card-grid--five{grid-template-columns:repeat(5,1fr)}
.ap-card,.ap-mini-card,.ap-magazine-card{background:var(--ap-card);border:1px solid var(--ap-border);border-radius:var(--ap-radius);box-shadow:var(--ap-shadow)}
.ap-card{padding:26px}
.ap-card h2,.ap-mini-card h3{margin:14px 0 10px}
.ap-card p,.ap-mini-card p{color:var(--ap-muted);line-height:1.55}
.ap-icon,.ap-mini-card span{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--ap-soft)}
.ap-section-title{margin:28px 0 0}
.ap-mini-card{padding:22px}
.ap-label{display:inline-block;background:var(--ap-blue);color:white;border-radius:5px;padding:4px 8px;font-size:11px;font-weight:900}

/* Zwevende hamburger-knop: standaard verborgen (desktop heeft de sidebar al).
   Staat bewust VOOR de media-queries, zodat de 'display:inline-flex' in het
   mobiel-blok deze basisregel overschrijft i.p.v. andersom. */
.ap-mobile-menu-fab{
    display:none;
    position:fixed;
    top:88px;
    right:16px;
    z-index:58;
    width:48px;
    height:48px;
    border:none;
    border-radius:14px;
    background:var(--ap-blue);
    color:#fff;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 6px 20px rgba(7,29,58,.25);
}
.ap-mobile-menu-fab svg{width:24px;height:24px}

/* ===== Responsive ===== */
@media (max-width:1100px){
    .ap-card-grid--three{grid-template-columns:1fr}
    .ap-card-grid--five{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
    .ap-content{padding:22px 16px}
    .ap-status-bar{align-items:flex-start;flex-direction:column}
    .ap-button--primary{margin-left:0}
    .ap-card-grid--five{grid-template-columns:1fr}
    .ap-hero-card h1{font-size:28px}
}

/* ===== AP Global header ===== */
.ap-platform{
    min-height:100vh;
    background:#EAF1FF;
    padding-top:110px;              /* ruimte voor de vaste header, zodat sidebar + content eronder beginnen */
}

.ap-global-header{
    position:fixed;                /* vast bovenaan, scrolt niet weg */
    top:0;
    left:0;
    right:0;
    z-index:50;                    /* boven alles */
    height:110px;
    background:#ffffff;
    border-bottom:1px solid #E8EEF7;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 32px;
}

.ap-global-logo img{
    height:60px;                   /* past netjes binnen de header van 110px */
    width:auto;
    display:block;
}

.ap-global-user{
    display:flex;
    align-items:center;
    gap:16px;
    font-weight:700;
    color:#3D4756;
}

.ap-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#0048C9;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}
/* Avatar als knop (mobiel menu-opener): knop-standaarden weghalen */
.ap-avatar--button{
    border:0;
    padding:0;
    font-size:inherit;
    font-family:inherit;
    cursor:default;              /* op desktop is het geen menu-knop */
}

/* ===== Layout: sidebar (vast) + content (scrolt) ===== */
/* De sidebar staat VAST op het scherm met position:fixed.
   De content krijgt links een marge van 280px zodat hij niet onder de sidebar valt. */
.ap-layout{
    display:block;
}

.ap-content{
    margin-left:280px;
    width:auto;
    max-width:none;
    padding:24px 48px 70px;
    transition:margin-left .2s ease;
}

/* ===== Sidebar: VAST op het scherm, onder de header ===== */
.ap-sidebar{
    position:fixed;
    top:110px;                      /* begint direct onder de header */
    left:0;
    width:280px;
    height:calc(100vh - 110px);     /* vult de rest van het scherm onder de header */
    padding:clamp(14px, 2.6vh, 28px) 18px;
    background:linear-gradient(180deg,#0B2A5B 0%,#0A2A5C 100%);
    color:#eaf2ff;                  /* vangnet: alle tekst binnen de sidebar standaard licht,
                                       zodat 'ie ook bij half-geladen CSS nooit donker-op-donker wordt */
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    z-index:5;
    transition:width .2s ease;
}

/* Nav bovenaan */
.ap-sidebar .ap-nav{
    flex:0 0 auto;
}

/* ===== Hover-effect tegels ===== */
/* Alleen kaarten die ZELF klikbaar zijn (een <a>) tillen op met schaduw.
   Kaarten die een <article> zijn met een knop erin doen dat NIET; daar
   hovert alleen de knop zelf. Zo suggereert de hover nooit onterecht dat
   een hele kaart klikbaar is. */
.ap-card,
.ap-mini-card{
    transition:transform .15s ease, box-shadow .15s ease;
}
a.ap-card:hover,
a.ap-mini-card:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(0,72,201,.18);
}

/* ===== SVG-iconen sidebar (schalen mee) ===== */
.ap-nav__item svg{
    width:clamp(17px, 2vh, 20px);
    height:clamp(17px, 2vh, 20px);
    flex-shrink:0;
    stroke:currentColor;
}

/* ===== SVG-iconen in de tegels ===== */
.ap-icon,
.ap-mini-card span{
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:var(--ap-soft);
}
.ap-icon svg,
.ap-mini-card span svg{
    width:26px;
    height:26px;
    stroke:currentColor;
    color:var(--ap-text);
}

/* ===== Pijltje-icoon in de knoppen ===== */
.ap-button svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    margin-left:8px;
    flex-shrink:0;
}

/* ===== Membership: annuleer-knop (rood) ===== */
.ap-danger-button{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-top:18px;
    padding:14px 22px;
    border-radius:10px;
    border:1.5px solid #ff3b3b;
    background:#ffffff;
    color:#c1121f;
    font-weight:800;
    font-size:15px;
    cursor:pointer;
    transition:.18s ease;
}
.ap-danger-button:hover{
    background:#fff3f3;
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(193,18,31,.12);
}
.ap-danger-button svg{
    width:20px;
    height:20px;
    stroke:currentColor;
    flex-shrink:0;
}

/* ===== Membership: activeer-knop (blauw) ===== */
.ap-activate-button{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-top:18px;
    padding:14px 22px;
    border-radius:10px;
    border:1.5px solid #0048C9;
    background:#0048C9;
    color:#ffffff;
    font-weight:800;
    font-size:15px;
    cursor:pointer;
    transition:.18s ease;
}
.ap-activate-button:hover{
    background:#003AA3;
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(0,72,201,.18);
}

/* ===== Inactief lidmaatschap pill ===== */
.ap-pill--inactive{
    background:#C1121F;
    color:#ffffff;
}

/* ===== Hero-card met AP-watermerk ===== */
.ap-hero-card{
    position:relative;
    overflow:hidden;
    background:linear-gradient(120deg, #0B2A5B 0%, #0A2A5C 60%, #0d3576 100%);
    color:#ffffff;
    border:none;
}
.ap-hero-card::after{
    content:"";
    position:absolute;
    top:50%;
    right:-50px;
    transform:translateY(-50%);
    width:360px;
    height:360px;
    background:url('../images/logo-icon.png') no-repeat center / contain;
    opacity:0.08;
    filter:brightness(0) invert(1);
    pointer-events:none;
}
.ap-hero-card > *{
    position:relative;
    z-index:1;
}
.ap-hero-card .ap-kicker{ color:#6ea8ff; }
.ap-hero-card h1{
    font-size:34px;
    line-height:1.1;
    margin:0 0 10px;
    color:#ffffff;
}
.ap-hero-intro{ color:#b9c7dd; }

/* Groen vinkje in de Actief-profiel pill */
.ap-pill--success{
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.ap-pill--success svg{
    width:18px;
    height:18px;
    stroke:#09622b;
    flex-shrink:0;
}

/* ===== Modal ===== */
.ap-modal[hidden]{
    display:none;
}
.ap-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(7,29,58,.45);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}
.ap-modal__box{
    width:100%;
    max-width:460px;
    background:#ffffff;
    border-radius:18px;
    padding:28px;
    box-shadow:0 24px 70px rgba(8,31,69,.25);
    max-height:90vh;
    overflow-y:auto;
}
.ap-modal__box h2{ margin:0 0 10px; }
.ap-modal__box p{ color:var(--ap-muted); line-height:1.55; }
.ap-button--light{ background:#eef5ff; color:#0048C9; }

/* Modal-knoppen gecentreerd en gelijk formaat */
.ap-modal__actions{
    display:flex;
    justify-content:center;
    gap:18px;
    margin-top:28px;
}
.ap-modal__actions .ap-button,
.ap-modal__actions .ap-danger-button{
    width:220px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
    font-weight:700;
    border-radius:12px;
    text-decoration:none;
    margin-top:0;
}
.ap-modal__actions .ap-button--primary{
    margin-left:0;
}

/* Opzegreden-stap in de membership-cancel modal */
.ap-cancel-reason-form{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:18px;
}
.ap-radio-option{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border:1px solid var(--ap-border);
    border-radius:12px;
    font-size:13.5px;
    line-height:1.3;
    color:var(--ap-text);
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
}
.ap-radio-option:hover{
    border-color:var(--ap-blue);
    background:var(--ap-bg);
}
.ap-radio-option input[type="radio"]{
    flex-shrink:0;
    width:18px;
    height:18px;
    accent-color:var(--ap-blue);
}
.ap-radio-option--other{
    flex-wrap:wrap;
}
.ap-cancel-reason-other-field{
    flex:1 1 100%;
    margin-top:8px;
    margin-left:28px;
    width:calc(100% - 28px);
    padding:10px 12px;
    border:1px solid var(--ap-border);
    border-radius:10px;
    font-size:14px;
    color:var(--ap-text);
}
.ap-cancel-reason-other-field:disabled{
    background:var(--ap-bg);
    color:var(--ap-muted);
}
.ap-cancel-reason-error{
    color:#d33;
    font-size:13.5px;
    margin-top:10px;
}

/* ===== Magazine-card met foto + zachte fades ===== */
.ap-magazine-card{
    position:relative;
    overflow:hidden;
    min-height:220px;
    padding:32px;
    background:#ffffff;
    margin-top:24px;
}
.ap-magazine-card::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:75%;
    background:url('../images/magazine-cover.png') no-repeat center right / cover;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 30%, #000 60%);
    mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 30%, #000 60%);
    z-index:0;
}
.ap-magazine-card::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:75%;
    background:linear-gradient(120deg, transparent 20%, rgba(7,87,230,.22) 100%);
    z-index:1;
    pointer-events:none;
}
.ap-magazine-card > div{
    position:relative;
    z-index:2;
    max-width:50%;
}

/* ===== Membership: gecertificeerd-partner foto (alleen membership-pagina) ===== */
/* Zet de class ap-magazine-card--certified NAAST ap-magazine-card op de membership-kaart.
   Dit vervangt alleen de foto; het dashboard-magazine blijft ongewijzigd. */
.ap-magazine-card--certified::before{
    background:url('../images/lidmaatschap-beheren-foto.png') no-repeat center right / cover;
}

/* ===== Hulp-blok in de sidebar (onderaan, schaalt mee) ===== */
.ap-help-card{
    margin-top:auto;      /* duwt hulpblok + knop naar onderen */
    margin-bottom:10px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    padding:clamp(10px, 1.6vh, 14px);
    color:#eaf2ff;
    transition:all .2s ease;
    flex-shrink:0;
}
.ap-help-card__top{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:clamp(7px, 1.2vh, 12px);
}
.ap-help-card__icon svg{
    width:clamp(20px, 2.4vh, 24px);
    height:clamp(20px, 2.4vh, 24px);
    stroke:#6ea8ff;
    flex-shrink:0;
}
.ap-help-card__top strong{
    display:block;
    font-size:clamp(13px, 1.7vh, 15px);
    margin-bottom:4px;
}
.ap-help-card__top p{
    margin:0;
    font-size:clamp(11px, 1.5vh, 13px);
    color:#9fb3d1;
    line-height:1.35;
}
.ap-help-card__button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    background:#1447e6;
    color:#ffffff !important;
    text-decoration:none;
    padding:clamp(8px, 1.3vh, 10px) 14px;
    border-radius:9px;
    font-size:clamp(12px, 1.6vh, 14px);
    font-weight:700;
    transition:.15s ease;
}
.ap-help-card__button:hover{
    background:#0b4ddb;
    transform:translateY(-1px);
}
.ap-help-card__button svg{
    width:16px;
    height:16px;
    stroke:currentColor;
    flex-shrink:0;
}

/* Inklap-knop direct onder het hulpblok */
.ap-collapse{
    margin-top:0;
    flex-shrink:0;
}

/* ===== Menu inklappen (ingeklapte staat) ===== */
/* Sidebar smaller, content-marge kleiner */
.ap-platform.is-collapsed .ap-sidebar{
    width:88px;
}
.ap-platform.is-collapsed .ap-content{
    margin-left:88px;
}
.ap-platform.is-collapsed .ap-nav__item strong{
    display:none;
}
.ap-platform.is-collapsed .ap-nav__item{
    justify-content:center;
    padding:12px 0;
}
.ap-platform.is-collapsed .ap-nav__section-label{
    display:none;
}
.ap-platform.is-collapsed .ap-help-card{
    display:none;
}
.ap-platform.is-collapsed .ap-collapse span{
    display:none;
}
.ap-platform.is-collapsed .ap-collapse{
    margin-top:auto;
    text-align:center;
    padding:11px 0;
}

/* ===== Mobiel: sidebar in/uitschuiven ===== */
@media (max-width:720px){
    .ap-content{
        margin-left:0;
        /* Kleinere zijmarge op mobiel. Stond eerder eerder in het bestand
           dan de desktop-padding (24px 48px), waardoor 'ie werd overschreven
           en er te veel witruimte aan de zijkanten overbleef. Hier wint 'ie wel. */
        padding:20px 14px 60px;
    }
    /* Voortgang-body had min-width:260px, waardoor de tekst op smalle schermen
       buiten de kaart viel. Op mobiel laten meeschalen. */
    .ap-profielvoortgang__body{
        min-width:0;
    }
    .ap-profielvoortgang{
        gap:16px;
    }
    .ap-sidebar{
        left:-280px;
        top:0;
        height:100vh;
        z-index:60;                 /* boven de header als 'ie open is */
    }
    .ap-platform.is-mobile-open .ap-sidebar{left:0}
    .ap-platform.is-collapsed .ap-content{margin-left:0}

    /* Welkom-tekst verbergen op mobiel: header wordt rustiger */
    .ap-global-user__naam{ display:none; }

    /* Avatar is op mobiel geen menu-opener meer (hamburger doet dat nu) */
    .ap-avatar--button{ cursor:default; }

    /* Kruisje bovenin de sidebar tonen op mobiel */
    .ap-sidebar-close{ display:inline-flex; }

    /* Zwevende hamburger tonen op mobiel */
    .ap-mobile-menu-fab{ display:inline-flex; }

    /* Klikbare donkere laag achter de open sidebar */
    .ap-platform.is-mobile-open .ap-mobile-overlay{
        display:block;
    }
}

/* Extra smalle telefoons: voortgangskaart verticaal stapelen (ring boven tekst),
   anders worden ring + tekst samen net te breed en valt er iets buiten de kaart. */
@media (max-width:420px){
    .ap-profielvoortgang{
        flex-direction:column;
        align-items:flex-start;
    }
}

/* Mobiele overlay: standaard verborgen, alleen zichtbaar bij open menu (mobiel) */
.ap-mobile-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(7,29,58,.45);
    z-index:55;                     /* onder de sidebar (60), boven de rest */
    border:0;
    cursor:pointer;
}

/* Sluitknop (kruisje) in de sidebar: standaard verborgen (desktop) */
.ap-sidebar-close{
    display:none;
    align-items:center;
    justify-content:center;
    align-self:flex-end;
    width:38px;
    height:38px;
    margin-bottom:6px;
    border:0;
    border-radius:10px;
    background:rgba(255,255,255,.08);
    color:#fff;
    cursor:pointer;
}
.ap-sidebar-close svg{ width:20px; height:20px; }
.ap-sidebar-close:hover{ background:rgba(255,255,255,.16); }

/* Logo netjes uitgelijnd */
.ap-global-left{
    display:flex;
    align-items:center;
}
/* ===== Orders page ===== */

.ap-orders-list{
    display:grid;
    gap:18px;
    margin-top:24px;
}

.ap-order-card{
    background:#ffffff;
    border:1px solid var(--ap-border);
    border-radius:18px;
    padding:24px;
    box-shadow:var(--ap-shadow);
    display:grid;
    grid-template-columns:1.4fr .7fr auto;
    gap:24px;
    align-items:center;
}

.ap-order-card h2{
    margin:12px 0 8px;
    font-size:24px;
}

.ap-order-card p{
    margin:0;
    color:var(--ap-muted);
}

.ap-order-card__total{
    font-size:20px;
    color:var(--ap-text);
}

.ap-order-actions{
    display:flex;
    gap:12px;
    justify-content:flex-end;
    flex-wrap:wrap;
}

.ap-button--outline{
    background:#ffffff;
    color:#1447e6;
    border:1px solid #1447e6;
}

@media (max-width:900px){
    .ap-order-card{
        grid-template-columns:1fr;
        align-items:flex-start;
    }

    .ap-order-actions{
        justify-content:flex-start;
    }
}

/* ===== WordPress admin-balk compensatie ===== */
/* De WP-adminbalk (32px) staat bovenaan; duw de vaste header + platform eronder */
body.admin-bar .ap-global-header{
    top:32px;
}
body.admin-bar .ap-sidebar{
    top:calc(110px + 32px);
    height:calc(100vh - 110px - 32px);
}
body.admin-bar .ap-platform{
    padding-top:calc(110px + 32px);
}
@media screen and (max-width:782px){
    body.admin-bar .ap-global-header{ top:46px; }
    body.admin-bar .ap-sidebar{ top:calc(110px + 46px); height:calc(100vh - 110px - 46px); }
    body.admin-bar .ap-platform{ padding-top:calc(110px + 46px); }
}
/* ===== Account settings page ===== */

.ap-settings-card{
    margin-top:24px;
    background:#ffffff;
    border:1px solid var(--ap-border);
    border-radius:18px;
    padding:30px;
    box-shadow:var(--ap-shadow);
}

.ap-settings-card__header{
    margin-bottom:24px;
}

.ap-settings-card__header h2{
    margin:14px 0 8px;
    font-size:28px;
}

.ap-settings-card__header p{
    margin:0;
    color:var(--ap-muted);
}

.ap-account-form{
    margin-top:20px;
}

.ap-form-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
}

.ap-form-grid label{
    display:flex;
    flex-direction:column;
    gap:8px;
    font-weight:800;
    color:var(--ap-text);
}

.ap-form-grid input{
    width:100%;
    height:52px;
    border-radius:12px;
    border:1px solid var(--ap-border);
    background:#ffffff;
    padding:0 16px;
    font-size:15px;
    color:var(--ap-text);
}

.ap-form-grid input:focus{
    outline:none;
    border-color:var(--ap-blue);
    box-shadow:0 0 0 3px rgba(7,87,230,.12);
}

.ap-form-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:26px;
}

.ap-account-notice{
    margin-top:24px;
    padding:16px 20px;
    border-radius:14px;
    background:#e8fff0;
    color:#09622b;
    font-weight:800;
    border:1px solid #b9ffd0;
}

@media (max-width:720px){
    .ap-form-grid{
        grid-template-columns:1fr;
    }

    .ap-form-actions{
        justify-content:flex-start;
    }
    /* Knoppen en filtervelden met een vaste min-width lieten op smalle
       schermen de kaart uitrekken. Op mobiel volle breedte / meeschalend. */
    .ap-form-actions .ap-button{
        min-width:0;
        width:100%;
    }
    .ap-doc-filterbar input[type="search"],
    .ap-doc-filterbar select{
        min-width:0;
        flex:1 1 100%;
    }
}
/* ===== Primaire buttons ===== */

.ap-button--primary{
    background: var(--ap-blue);
    color:#fff;
    border:none;
    border-radius:14px;
    padding:14px 24px;
    font-weight:700;
    box-shadow:none;
    transition:.2s ease;
}

.ap-button--primary:hover{
    transform:translateY(-1px);
    background:#004fd6;
}
.ap-form-actions .ap-button{
    height:56px;
    min-width:220px;
    padding:0 28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    font-size:18px;
    font-weight:700;
}
/* ===== AP Login page ===== */

.ap-login-page{
    min-height:100vh;
    background:#EAF1FF;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
}

.ap-login-card{
    width:100%;
    max-width:1100px;
    display:grid;
    grid-template-columns:1fr 1fr;
    background:#fff;
    border:1px solid var(--ap-border);
    border-radius:24px;
    box-shadow:var(--ap-shadow);
    overflow:hidden;
}

.ap-login-left,
.ap-login-right{
    padding:28px 48px;
    display:flex;
    flex-direction:column;
}

.ap-login-left img{
    height:110px;
    width:auto;
    margin-bottom:24px;
}

.ap-login-left h1,
.ap-login-right h2{
    margin:0 0 12px;
}

.ap-login-left p{
    color:var(--ap-muted);
    line-height:1.6;
}
.ap-login-left input{
    width:100%;
    height:52px;
    border-radius:12px;
    border:1px solid var(--ap-border);
    padding:0 14px;
}
.ap-login-left input[type="checkbox"]{
    width:18px;
    height:18px;
    margin:0;
    padding:0;
    border-radius:4px;
    accent-color:var(--ap-blue);
    flex-shrink:0;
}

.ap-login-left .button{
    width:100%;
    height:58px;
    border:0;
    border-radius:16px;
    background:var(--ap-blue);
    color:#fff;
    font-size:20px;
    font-weight:800;
    font-family:inherit;
    cursor:pointer;
    transition:.2s ease;
}

.ap-login-left .button:hover{
    background:#004fd6;
    transform:translateY(-2px);
}

.ap-login-right{
    background:linear-gradient(180deg,#0B2A5B,#0A2A5C);
    color:#fff;
    align-items:flex-start;
}
/* De labelbalk als eerste element krijgt auto-marge boven: samen met de
   auto-marge onder de features hieronder zweeft de hele tekstgroep in het
   verticale midden, terwijl de knop (margin-top:auto) onderaan gepind blijft. */
.ap-login-right .ap-label{
    margin-top:auto;
}

.ap-login-link{
    display:inline-block;
    margin-top:14px;
}

@media(max-width:800px){
    .ap-login-card{
        grid-template-columns:1fr;
    }
}
.ap-login-right h2{
    margin-top:0;
    margin-bottom:20px;
}

/* ===== Login: linkerkant (formulier) ===== */
.ap-login-logo img{
    height:150px;
    width:auto;
    margin-bottom:2px;
}

.ap-login-formrow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:4px 0 22px;
}
.ap-login-remember{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    color:var(--ap-muted);
    font-size:14px;
    cursor:pointer;
}
.ap-login-formrow .ap-login-link{
    margin-top:0;
    font-weight:700;
    color:var(--ap-blue);
}
.ap-custom-login-form{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
}
.ap-login-submit{
    width:100%;
    margin-top:auto;
}

/* ===== Login: rechterkant (features + proefperiode) ===== */
.ap-login-features{
    list-style:none;
    margin:8px 0 auto;
    padding:0;
    display:grid;
    gap:22px;
}
.ap-login-feature{
    display:grid;
    grid-template-columns:48px 1fr;
    gap:16px;
    align-items:start;
}
.ap-login-feature__icon{
    width:48px;
    height:48px;
    border-radius:14px;
    background:rgba(255,255,255,.10);
    display:grid;
    place-items:center;
    flex-shrink:0;
}
.ap-login-feature__icon svg{
    width:22px;
    height:22px;
    stroke:#6ea8ff;
}
.ap-login-feature__body{
    display:block;
    color:#dbe8ff;
    line-height:1.5;
    font-size:14px;
}
.ap-login-feature__body strong{
    display:block;
    color:#ffffff;
    font-size:16px;
    font-weight:800;
    margin-bottom:3px;
}
.ap-login-trial-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:54px;
    margin-top:auto;
    background:var(--ap-blue);
    color:#ffffff;
    border-radius:14px;
    font-weight:800;
    font-size:16px;
    text-decoration:none;
    transition:.2s ease;
}
.ap-login-trial-button:hover{
    background:#004fd6;
    transform:translateY(-2px);
}

.ap-register-form{
    display:grid;
    gap:16px;
    margin-top:24px;
}

.ap-register-form label{
    display:flex;
    flex-direction:column;
    gap:7px;
    font-weight:800;
    color:#ffffff;
}

.ap-register-form input{
    width:100%;
    height:48px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.25);
    background:#ffffff;
    padding:0 14px;
    font-size:15px;
    color:#3D4756;
}

.ap-checkbox{
    flex-direction:row !important;
    align-items:center;
    font-size:14px;
    font-weight:600 !important;
}

.ap-checkbox input{
    width:18px;
    height:18px;
}

.ap-register-form .ap-button{
    margin-top:8px;
    height:54px;
}
/* ===== WooCommerce checkout/cart styling ===== */

.woocommerce-cart,
.woocommerce-checkout{
    background:#EAF1FF;
    color:var(--ap-text);
}

.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-cart main,
.woocommerce-checkout main{
    max-width:1200px;
    margin:0 auto;
    padding:48px 32px;
}

.woocommerce-cart h1,
.woocommerce-checkout h1{
    color:var(--ap-text);
    font-size:42px;
    margin-bottom:28px;
}

.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table,
.woocommerce-checkout-review-order{
    background:#ffffff;
    border:1px solid var(--ap-border);
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--ap-shadow);
}

.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review{
    background:#ffffff;
    border:1px solid var(--ap-border);
    border-radius:18px;
    padding:24px;
    box-shadow:var(--ap-shadow);
}

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #payment #place_order{
    background:var(--ap-blue) !important;
    color:#ffffff !important;
    border-radius:12px !important;
    padding:16px 24px !important;
    font-weight:800 !important;
    border:0 !important;
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #payment #place_order:hover{
    background:#004fd6 !important;
}

.woocommerce-info,
.woocommerce-message{
    border-top-color:var(--ap-blue);
    background:#ffffff;
    border-radius:14px;
    box-shadow:var(--ap-shadow);
}
/* =========================================================================
   WOOCOMMERCE-PAGINA OVERRIDES
   =========================================================================
   Dit blok forceert stijl op WordPress/WooCommerce-standaardelementen
   (<button>, <a>, h1-h3, .button) binnen .woocommerce-page, zodat ze
   passen bij de AP-huisstijl in plaats van bij het WooCommerce-thema.

   LET OP - foutgevoelig gebied: de regel "generieke knop-stijl" hieronder
   forceert met !important blauw op ELKE <button> en .button binnen
   .woocommerce-page. Elk nieuw knop-type dat er anders uit moet zien
   (zoals de rode annuleer-knop) MOET hier expliciet als uitzondering
   worden toegevoegd, anders wordt hij alsnog blauw.
   Zie ook de tweede, vergelijkbare "forceer-mechanisme" sectie onderaan
   dit bestand (donkere containers krijgen forceer altijd lichte tekst).
   ========================================================================= */

/* --- Layout & achtergrond --- */
.woocommerce-page,
.woocommerce-page .wp-site-blocks,
.woocommerce-page .site,
.woocommerce-page main{
    background:#ffffff !important;
}
.woocommerce-page .wp-site-blocks,
.woocommerce-page .entry-content,
.woocommerce-page .woocommerce{
    max-width:1200px !important;
    margin:0 auto !important;
    padding:32px !important;
}

/* --- Koppen --- */
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3{
    color:#3D4756 !important;
}
.woocommerce-page .ap-platform h1,
.woocommerce-page .ap-platform h2,
.woocommerce-page .ap-platform h3{
    color:inherit !important;
}

/* --- Generieke knop-stijl (forceert blauw op elke <button>/.button) --- */
.woocommerce-page .wc-block-components-button,
.woocommerce-page button,
.woocommerce-page .button{
    background:#1447e6 !important;
    color:#fff !important;
    border-radius:12px !important;
    border:0 !important;
    font-weight:800 !important;
}

/* --- Uitzonderingen op de generieke knop-stijl hierboven ---
   Elke knop die NIET blauw-met-witte-tekst hoort te zijn, staat hier. */

/* Annuleer-knop (gevaar-knop): wit met rode rand/tekst, niet blauw. */
.woocommerce-page .ap-danger-button,
.woocommerce-page .ap-platform .ap-danger-button{
    background:#ffffff !important;
    color:#c1121f !important;
    border:1.5px solid #ff3b3b !important;
    border-radius:10px !important;
    font-weight:800 !important;
}
/* De inhoud van de knop (tekst + het svg-icoon) alleen ROOD kleuren.
   Bewust GEEN border/border-radius/achtergrond hier: het icoon gebruikt
   stroke:currentColor en volgt zo de rode kleur. Zou je hier ook border
   zetten, dan krijgt het icoon-element zelf een rode rand -> een extra
   cirkel/kader om het icoon. */
.woocommerce-page .ap-danger-button *,
.woocommerce-page .ap-platform .ap-danger-button *{
    color:#c1121f !important;
}
.woocommerce-page .ap-danger-button:hover,
.woocommerce-page .ap-platform .ap-danger-button:hover{
    background:#fff3f3 !important;
}

/* Overige AP-platform knoppen/iconen op een donkere achtergrond: witte tekst.
   (ap-danger-button * staat hier bewust NIET in, zie uitzondering hierboven.) */
.woocommerce-page .ap-platform .ap-button,
.woocommerce-page .ap-platform .ap-button *,
.woocommerce-page .ap-platform .ap-card-cta,
.woocommerce-page .ap-platform .ap-card-cta *,
.woocommerce-page .ap-platform .ap-event-cta,
.woocommerce-page .ap-platform .ap-event-cta *,
.woocommerce-page .ap-platform .ap-activate-button,
.woocommerce-page .ap-platform .ap-activate-button *,
.woocommerce-page .ap-platform .ap-help-card__button,
.woocommerce-page .ap-platform .ap-help-card__button *,
.woocommerce-page .ap-platform .ap-collapse,
.woocommerce-page .ap-platform .ap-collapse *,
.woocommerce-page .ap-platform .ap-sidebar-close,
.woocommerce-page .ap-platform .ap-sidebar-close *{
    color:#ffffff !important;
}
.woocommerce-page .ap-platform .ap-tour-herstart,
.woocommerce-page .ap-platform .ap-tour-herstart *{
    color:#eaf2ff !important;
}


/* Outline/light knoppen binnen het AP-dashboard: blauwe tekst, geen blauw vlak.
   MOET na de regel hierboven staan (zelfde specificiteit + !important, dus de
   laatste in het bestand wint). Stond hier per ongeluk voor gedraaid, waardoor
   de tekst in outline-knoppen wit-op-wit (onzichtbaar) werd. */
.woocommerce-page .ap-platform .ap-button--outline,
.woocommerce-page .ap-platform .ap-button--light{
    color:#1447e6 !important;
}


/* --- Links binnen WooCommerce-content en het AP-dashboard --- */
.woocommerce-page .wc-block-components-product-name,
.woocommerce-page .woocommerce a{
    color:#1447e6 !important;
    font-weight:800;
}
.woocommerce-page .ap-login-page a{
    color:#1447e6 !important;
}
/* Uitzondering: knoppen (zoals "Naar inloggen" na een geslaagde reset) zijn
   een blauw vlak en hebben witte tekst nodig, niet de standaard linkkleur. */
.woocommerce-page .ap-login-page a.ap-button--primary,
.woocommerce-page .ap-login-page a.ap-button--primary *{
    color:#ffffff !important;
}
.woocommerce-page .ap-login-right a{
    color:#ffffff !important;
}

/* =========================================================================
   WOOCOMMERCE ORDER-RECEIVED / THANK-YOU / ACCOUNT PAGINA
   =========================================================================
   Deze pagina's komen deels uit WooCommerce zelf (niet uit onze templates).
   Doel: alle knoppen leesbaar (blauw vlak, witte tekst) en de besteldetails
   netjes uitgelijnd op mobiel (de standaard stippellijn-lijst liep scheef).
   ========================================================================= */

/* Alle WooCommerce-knoppen op deze pagina's: gegarandeerd blauw met witte,
   leesbare tekst. Dekt 'Bekijken', 'Betaling', order-acties, subscription-knoppen. */
.woocommerce-page .woocommerce-order a.button,
.woocommerce-page .woocommerce-order .button,
.woocommerce-page .order_details a.button,
.woocommerce-page .woocommerce-MyAccount-content a.button,
.woocommerce-page .subscription_details a.button,
.woocommerce-page table.shop_table a.button{
    display:inline-block !important;
    background:#1447e6 !important;
    color:#ffffff !important;
    border:0 !important;
    border-radius:10px !important;
    padding:12px 20px !important;
    font-weight:800 !important;
    text-align:center !important;
    text-decoration:none !important;
    min-height:auto !important;
    line-height:1.3 !important;
}

/* Besteldetails-lijstje (bestelnummer, datum, e-mail, totaal, betaalmethode):
   op mobiel als nette label/waarde-rijen i.p.v. de scheve stippellijn-opmaak. */
@media (max-width:720px){
    .woocommerce-page ul.woocommerce-order-overview,
    .woocommerce-page ul.order_details{
        margin:0 0 24px !important;
        padding:0 !important;
        border:1px solid var(--ap-border) !important;
        border-radius:14px !important;
        overflow:hidden !important;
    }
    .woocommerce-page ul.woocommerce-order-overview li,
    .woocommerce-page ul.order_details li{
        float:none !important;
        width:100% !important;
        border:0 !important;
        border-bottom:1px solid var(--ap-border) !important;
        margin:0 !important;
        padding:12px 16px !important;
        font-size:15px !important;
        text-transform:none !important;
        display:flex !important;
        justify-content:space-between !important;
        align-items:baseline !important;
        gap:12px !important;
    }
    .woocommerce-page ul.woocommerce-order-overview li:last-child,
    .woocommerce-page ul.order_details li:last-child{
        border-bottom:0 !important;
    }
    .woocommerce-page ul.woocommerce-order-overview li strong,
    .woocommerce-page ul.order_details li strong{
        text-align:right !important;
    }
    /* Order/abonnement-tabellen: labels als kolomkop verbergen zou verwarren,
       dus laten we ze meeschalen zonder horizontale overflow. */
    .woocommerce-page table.shop_table{
        width:100% !important;
        display:block !important;
        overflow-x:auto !important;
    }
}


/* ===== 'Maak je profiel compleet' call-to-action in de hero ===== */
.ap-profiel-cta{
    color:#ffffff;
    font-weight:800;
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-color:rgba(255,255,255,.45);
    transition:.15s ease;
}
.ap-profiel-cta:hover{
    color:#6ea8ff;
    text-decoration-color:#6ea8ff;
}
/* ===== Login rechtervlak herstellen ===== */

.ap-login-right{
    background:linear-gradient(180deg,#0B2A5B,#0A2A5C) !important;
    color:#ffffff !important;
}

.ap-login-right h2,
.ap-login-right li{
    color:#ffffff !important;
}

.ap-login-right p{
    color:#dbe8ff !important;
    line-height:1.6;
    margin-bottom:30px;
}
/* ===== Statische kaarten (niet klikbaar, geen hover) ===== */
.ap-card--static{
    transition:none;
}
.ap-card--static:hover{
    transform:none;
    box-shadow:var(--ap-shadow);
}
/* AP Netwerk overzicht */

.ap-network-page {
  max-width: 1180px;
}

.ap-network-header {
  margin-bottom: 24px;
}

.ap-network-count {
  margin: 0 0 18px;
  color: #5d6b82;
  font-size: 14px;
  font-weight: 600;
}

.ap-network-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ap-network-card {
  background: #fff;
  border: 1px solid rgba(11, 36, 71, 0.10);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(11, 36, 71, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ap-network-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(11, 36, 71, 0.10);
}

.ap-network-card__visual {
  position: relative;
  height: 170px;
  background: #071f43;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ap-network-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ap-network-card__location {
  position: absolute;
  right: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  background: rgba(255, 255, 255, 0.94);
  color: #0b2447;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
}

.ap-network-card__content {
  padding: 18px;
}

.ap-network-card__content h2 {
  margin: 0 0 8px;
  color: #071f43;
  font-size: 18px;
  line-height: 1.25;
}

.ap-network-card__category {
  margin: 0 0 10px;
  color: #0f5eea;
  font-size: 13px;
  font-weight: 700;
}

.ap-network-card__description {
  margin: 0 0 18px;
  color: #334761;
  font-size: 14px;
  line-height: 1.55;
}

.ap-network-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  background: #eef5ff;
  color: #0f5eea;
  border: 1px solid rgba(15, 94, 234, 0.16);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.ap-network-card__link:hover {
  background: #0f5eea;
  color: #fff;
}

@media (max-width: 1100px) {
  .ap-network-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .ap-network-grid {
    grid-template-columns: 1fr;
  }

  .ap-network-card__visual {
    height: 190px;
  }
}
/* AP Netwerk profiel - hero */

.ap-network-profile-page {
  max-width: 1180px;
}

.ap-back-link {
  display: inline-flex;
  margin-bottom: 18px;
  color: #0f5eea;
  font-weight: 800;
  text-decoration: none;
}

.ap-profile-hero {
  background: #fff;
  border: 1px solid rgba(11, 36, 71, 0.10);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(11, 36, 71, 0.06);
}

.ap-profile-hero__cover {
position: relative;
overflow: hidden;
  height: 250px;
  background: linear-gradient(135deg, #071f43, #103b78);
  overflow: hidden;
}

.ap-profile-hero__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ap-profile-hero__logo {
  width: 120px;
  height: 120px;
  margin-top: -48px;
  border: 5px solid #fff;
  border-radius: 18px;
  background: #071f43;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(11, 36, 71, 0.18);
}

.ap-profile-hero__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ap-profile-hero__main h1 {
  margin: 20px 0 8px;
  color: #071f43;
  font-size: 30px;
  line-height: 1.15;
}

.ap-profile-hero__category {
  display: inline-flex;
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef5ff;
  color: #0f5eea;
  font-size: 13px;
  font-weight: 800;
}

.ap-profile-hero__location {
  margin: 0;
  color: #334761;
  font-size: 14px;
  font-weight: 700;
}

.ap-profile-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 190px;
}

.ap-profile-hero__actions .ap-button {
  justify-content: center;
}

@media (max-width: 900px) {
  .ap-profile-hero__content {
    grid-template-columns: 100px 1fr;
  }

  .ap-profile-hero__actions {
    grid-column: 1 / -1;
    flex-direction: row;
  }
}

@media (max-width: 600px) {
  .ap-profile-hero__cover {
    height: 190px;
  }

  /* Alles onder elkaar: logo, titelblok, dan de knoppen. */
  .ap-profile-hero__content {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    padding: 0 20px 24px;
  }

  .ap-profile-hero__logo {
    width: 100px;
    height: 100px;
  }

  /* Titelblok volledige breedte onder het logo. */
  .ap-profile-hero__main {
    width: 100%;
  }
  .ap-profile-title,
  .ap-inline-title-form {
    width: 100%;
  }

  /* Titel + bewerkveld: kleiner en meeschalend, valt niet meer van het scherm. */
  .ap-inline-title-input,
  .ap-profile-company-name,
  .ap-profile-hero__main h1 {
    font-size: 24px !important;
    word-break: break-word;
  }
  .ap-inline-title-input {
    width: 100%;
  }

  /* De twee bewerk-knoppen: naast elkaar, elk de helft, gelijke hoogte. */
  .ap-profile-edit-controls {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    margin-top: 16px;
  }
  .ap-profile-edit-controls .ap-button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    justify-content: center;
    text-align: center;
  }

  /* De oude 'actions'-variant (indien gebruikt) ook nette knoppen. */
  .ap-profile-hero__actions {
    flex-direction: row;
    gap: 10px;
  }
  .ap-profile-hero__actions .ap-button {
    flex: 1 1 0;
  }
}

.ap-profile-contact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.ap-profile-info-card {
  background: #fff;
  border: 1px solid rgba(11, 36, 71, 0.10);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 12px 30px rgba(11, 36, 71, 0.06);
}

.ap-profile-info-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--ap-soft);
  color: var(--ap-blue);
}
.ap-profile-info-card__icon svg {
  width: 22px;
  height: 22px;
}

.ap-profile-info-card h3 {
  margin: 0 0 8px;
  color: #071f43;
  font-size: 15px;
}

.ap-profile-info-card a,
.ap-profile-info-card p {
  margin: 0;
  color: #334761;
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
  word-break: break-word;
}

.ap-profile-info-card a:hover {
  color: #0f5eea;
}

@media (max-width: 1000px) {
  .ap-profile-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .ap-profile-contact-grid {
    grid-template-columns: 1fr;
  }
}
/* AP Netwerk profiel - content secties */

.ap-profile-section {
  margin-top: 22px;
}

.ap-profile-section__main {
  background: #fff;
  border: 1px solid rgba(11, 36, 71, 0.10);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 12px 30px rgba(11, 36, 71, 0.06);
}

.ap-profile-section__main h2 {
  margin: 0 0 14px;
  color: #071f43;
  font-size: 22px;
}

.ap-profile-section__main p {
  margin: 0;
  color: #334761;
  font-size: 15px;
  line-height: 1.75;
}
/* AP Netwerk profiel - kenmerken */

.ap-profile-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.ap-profile-feature-card {
  background: #fff;
  border: 1px solid rgba(11, 36, 71, 0.10);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(11, 36, 71, 0.06);
}

.ap-profile-feature-card h2 {
  margin: 0 0 16px;
  color: #071f43;
  font-size: 20px;
}

.ap-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ap-profile-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #eef5ff;
  color: #0f5eea;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .ap-profile-features {
    grid-template-columns: 1fr;
  }
}
/* AP Netwerk profiel - fotogalerij */

.ap-profile-gallery {
  margin-top: 22px;
}

.ap-profile-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.ap-profile-gallery__grid figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #eef5ff;
  aspect-ratio: 4 / 3;
}

.ap-profile-gallery__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 800px) {
  .ap-profile-gallery__grid {
    grid-template-columns: 1fr;
  }
}

/* AP Netwerk profiel - locatie */

.ap-profile-location {
  margin-top: 22px;
}

.ap-profile-location__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 20px;
  align-items: stretch;
  margin-top: 18px;
}

.ap-profile-location__grid p {
  margin: 0 0 18px;
  color: #334761;
  font-size: 15px;
  line-height: 1.6;
}

.ap-profile-location__map {
  min-height: 220px;
  border-radius: 18px;
  background: linear-gradient(135deg, #071f43, #103b78);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px;
  text-align: center;
}

@media (max-width: 800px) {
  .ap-profile-location__grid {
    grid-template-columns: 1fr;
  }
}
/* AP Netwerk profiel - bezoek ons */

.ap-profile-location__info h3 {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 700;
    color: #0B2347;
}

.ap-profile-location__list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.ap-profile-location__list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid #EEF3FA;
}

.ap-profile-location__list li:last-child {
    border-bottom: none;
}

.ap-profile-location__list strong {
    min-width: 110px;
    color: #0B2347;
    font-weight: 600;
}

.ap-profile-location__list span {
    flex: 1;
    text-align: right;
    color: #5F6F89;
    word-break: break-word;
}

/* Google Maps */

.ap-profile-location__map {
    background: transparent;
    padding: 0;
    border-radius: 18px;
    overflow: hidden;
    min-height: 320px;
    border: 1px solid #E7EEF8;
}

.ap-profile-location__map iframe {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
    display: block;
}
/* ===== Expertise & Advies: formulier-kaart ===== */
.ap-form-card{
    margin-top:24px;
    background:#ffffff;
    border:1px solid var(--ap-border);
    border-radius:18px;
    padding:32px;
    box-shadow:var(--ap-shadow);
}
.ap-form-card__header{
    margin-bottom:24px;
}
.ap-form-card__header h2{
    margin:14px 0 8px;
    font-size:28px;
}
.ap-form-card__header p{
    margin:0;
    color:var(--ap-muted);
    line-height:1.55;
}

/* ===== Fluent Forms in AP-huisstijl ===== */
/* labels */
.ap-fluentform-wrap .ff-el-input--label label{
    font-weight:800;
    color:var(--ap-text);
    margin-bottom:8px;
}

/* tekstvelden, e-mail, telefoon, textarea */
.ap-fluentform-wrap input[type="text"],
.ap-fluentform-wrap input[type="email"],
.ap-fluentform-wrap input[type="tel"],
.ap-fluentform-wrap input[type="number"],
.ap-fluentform-wrap textarea,
.ap-fluentform-wrap select{
    width:100%;
    border-radius:12px;
    border:1px solid var(--ap-border);
    background:#ffffff;
    padding:12px 16px;
    font-size:15px;
    color:var(--ap-text);
    font-family:inherit;
    transition:.15s ease;
}
.ap-fluentform-wrap textarea{
    min-height:120px;
    resize:vertical;
}
.ap-fluentform-wrap input:focus,
.ap-fluentform-wrap textarea:focus,
.ap-fluentform-wrap select:focus{
    outline:none;
    border-color:var(--ap-blue);
    box-shadow:0 0 0 3px rgba(7,87,230,.12);
}

/* radio-keuzes als nette klikbare tegels */
.ap-fluentform-wrap .ff-el-form-check{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--ap-border);
    border-radius:10px;
    padding:10px 14px;
    margin:0 8px 8px 0;
    cursor:pointer;
    transition:.15s ease;
    background:#ffffff;
}
.ap-fluentform-wrap .ff-el-form-check:hover{
    border-color:var(--ap-blue);
    background:var(--ap-soft);
}
.ap-fluentform-wrap .ff-el-form-check input{
    accent-color:var(--ap-blue);
    width:16px;
    height:16px;
    margin:0;
}
.ap-fluentform-wrap .ff-el-form-check label{
    margin:0;
    font-weight:600;
    color:var(--ap-text);
    cursor:pointer;
}

/* verzendknop in AP-blauw */
.ap-fluentform-wrap .ff-btn-submit,
.ap-fluentform-wrap button[type="submit"]{
    background:var(--ap-blue);
    color:#ffffff;
    border:none;
    border-radius:12px;
    padding:14px 28px;
    font-size:16px;
    font-weight:800;
    font-family:inherit;
    cursor:pointer;
    transition:.2s ease;
    margin-top:8px;
}
.ap-fluentform-wrap .ff-btn-submit:hover,
.ap-fluentform-wrap button[type="submit"]:hover{
    background:#004fd6;
    transform:translateY(-1px);
}

/* ruimte tussen velden */
.ap-fluentform-wrap .ff-el-group{
    margin-bottom:18px;
}

/* bevestigingsboodschap na verzenden */
.ap-fluentform-wrap .ff-message-success{
    background:#e8fff0;
    color:#09622b;
    border:1px solid #b9ffd0;
    border-radius:14px;
    padding:16px 20px;
    font-weight:700;
}
/* ===== Klikbare mini-tegel (Expertise & Advies) ===== */
.ap-mini-card--link{
    display:block;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
}
.ap-mini-card--link h3{
    color:var(--ap-text);
    font-weight:700;
}
.ap-mini-card--link p{
    font-weight:400;
    color:var(--ap-muted);
}

/* ===== Niet-klikbare mini-tegels (binnenkort beschikbaar) ===== */
/* Deze tegels zijn <article> (geen link). Subtiel grijzer + gedempte tekst
   zodat duidelijk is dat ze nog niet actief zijn. */
article.ap-mini-card{
    background:#f4f7fb;
    border-color:#e4ebf4;
}
article.ap-mini-card h3{
    color:#8a97ab;
}
article.ap-mini-card p{
    color:#a4afc0;
}
article.ap-mini-card span{
    background:#e8edf4;
}
article.ap-mini-card span svg{
    color:#9aa6b8;
    stroke:#9aa6b8;
}
/* ===== Expertise-formulier: schoonheidscorrecties ===== */

/* Checkbox-tegels strakker en compacter */
.ap-fluentform-wrap .ff-el-form-check{
    padding:9px 14px;
    border-radius:10px;
    gap:9px;
}
/* dunnere, nettere checkbox zelf */
.ap-fluentform-wrap .ff-el-form-check input[type="checkbox"],
.ap-fluentform-wrap .ff-el-form-check input[type="radio"]{
    width:17px;
    height:17px;
    accent-color:var(--ap-blue);
    border-radius:5px;
}
/* label naast de checkbox: normale gewichten, niet vet */
.ap-fluentform-wrap .ff-el-form-check label{
    font-weight:600;
    font-size:15px;
}

/* keuze-groep netjes laten omvallen op smallere schermen */
.ap-fluentform-wrap .ff-el-form-check-group{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

/* geselecteerde keuze duidelijk highlighten */
.ap-fluentform-wrap .ff-el-form-check:has(input:checked){
    border-color:var(--ap-blue);
    background:var(--ap-soft);
}

/* veld-labels consistent met de rest van de site */
.ap-fluentform-wrap label,
.ap-fluentform-wrap .ff-el-input--label label{
    font-weight:800;
    color:var(--ap-text);
    font-size:16px;
}

/* iets meer lucht tussen de velden */
.ap-fluentform-wrap .ff-el-group{
    margin-bottom:22px;
}

/* ===== Fluent Forms checkbox forceren DEFINITIEF (exacte class-namen) ===== */
.ap-fluentform-wrap input.ff-el-form-check-input,
.ap-fluentform-wrap input.ff-el-form-check-checkbox,
.ap-fluentform-wrap input.ff-el-form-check-radio{
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    max-width:18px !important;
    margin:0 8px 0 0 !important;
    padding:0 !important;
    border:1.5px solid #c7d5ea !important;
    border-radius:5px !important;
    background:#ffffff !important;
    background-image:none !important;
    box-shadow:none !important;
    cursor:pointer !important;
    position:relative !important;
    flex-shrink:0 !important;
    vertical-align:middle !important;
    top:0 !important;
    transition:.15s ease !important;
}
/* radio's rond */
.ap-fluentform-wrap input.ff-el-form-check-radio{
    border-radius:50% !important;
}
/* aangevinkt: blauw vlak */
.ap-fluentform-wrap input.ff-el-form-check-input:checked,
.ap-fluentform-wrap input.ff-el-form-check-checkbox:checked,
.ap-fluentform-wrap input.ff-el-form-check-radio:checked{
    background:#1447e6 !important;
    border-color:#1447e6 !important;
}
/* wit vinkje in de checkbox */
.ap-fluentform-wrap input.ff-el-form-check-input:checked::after,
.ap-fluentform-wrap input.ff-el-form-check-checkbox:checked::after{
    content:"" !important;
    position:absolute !important;
    left:5px !important;
    top:1px !important;
    width:4px !important;
    height:9px !important;
    border:solid #ffffff !important;
    border-width:0 2px 2px 0 !important;
    transform:rotate(45deg) !important;
}
/* focus-ring */
.ap-fluentform-wrap input.ff-el-form-check-input:focus{
    outline:none !important;
    box-shadow:0 0 0 3px rgba(7,87,230,.15) !important;
}

/* ===== Fluent Forms keuze-tegels: allemaal gelijke hoogte ===== */
/* De tegel zelf: vaste uitlijning zodat hoogte niet varieert */
.ap-fluentform-wrap .ff-el-form-check{
    display:inline-flex !important;
    align-items:center !important;
    min-height:46px !important;
    padding:0 14px !important;
    margin:0 8px 8px 0 !important;
    box-sizing:border-box !important;
}
/* De label binnen de tegel: vult de tegel, tekst gecentreerd, geen extra hoogte */
.ap-fluentform-wrap .ff-el-form-check .ff-el-form-check-label{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
    min-height:0 !important;
}
/* De tekst-span: geen afwijkende regelhoogte */
.ap-fluentform-wrap .ff-el-form-check .ff-el-form-check-label span{
    line-height:1.2 !important;
    display:inline-block !important;
}
/* ===== Documentenbank ===== */
.ap-doc-filterbar{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:24px;
    background:#ffffff;
    border:1px solid var(--ap-border);
    border-radius:var(--ap-radius);
    padding:18px;
    box-shadow:var(--ap-shadow);
}
.ap-doc-filterbar input[type="search"]{
    flex:1 1 240px;
    height:48px;
    border-radius:10px;
    border:1px solid var(--ap-border);
    padding:0 16px;
    font-size:15px;
}
.ap-doc-filterbar select{
    height:48px;
    border-radius:10px;
    border:1px solid var(--ap-border);
    padding:0 12px;
    font-size:14px;
    background:#ffffff;
    min-width:180px;
}
.ap-doc-filterbar .ap-button{
    height:48px;
}

.ap-doc-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
    margin-top:24px;
}
.ap-doc-card{
    background:var(--ap-card);
    border:1px solid var(--ap-border);
    border-radius:var(--ap-radius);
    box-shadow:var(--ap-shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:transform .15s ease, box-shadow .15s ease;
}
a.ap-doc-card:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(0,72,201,.18);
}
.ap-doc-card__visual{
    height:160px;
    background:linear-gradient(135deg, #071f43, #103b78);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.ap-doc-card__visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.ap-doc-card__visual-icon{
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    border-radius:14px;
    background:rgba(255,255,255,.14);
}
.ap-doc-card__visual-icon svg{
    width:26px;
    height:26px;
    stroke:#ffffff;
}
.ap-doc-card__body{
    padding:22px 24px 24px;
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;
}
.ap-doc-card__body h3{
    margin:4px 0 0;
}
.ap-doc-card__body p{
    margin:0;
    color:var(--ap-muted);
    line-height:1.5;
    flex:1;
}
.ap-doc-card__badge{
    display:inline-flex;
    align-self:flex-start;
    background:var(--ap-soft);
    color:var(--ap-blue);
    border-radius:999px;
    padding:5px 12px;
    font-size:12px;
    font-weight:800;
}
.ap-doc-card__meta{
    color:var(--ap-muted);
    font-size:12px;
    font-weight:700;
}
.ap-doc-card__body .ap-button{
    align-self:flex-start;
    margin-top:6px;
}

.ap-doc-locked{
    margin-top:24px;
    text-align:center;
    padding:48px 32px;
}
.ap-doc-locked .ap-icon{
    margin:0 auto 16px;
}
.ap-doc-locked .ap-button{
    margin-top:10px;
}

.ap-doc-pagination{
    display:flex;
    gap:10px;
    justify-content:center;
    margin-top:28px;
}
.ap-doc-pagination .ap-button{
    height:42px;
    min-width:42px;
    padding:0 14px;
}

@media (max-width:1100px){
    .ap-doc-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:720px){
    .ap-doc-grid{ grid-template-columns:1fr; }
    .ap-doc-filterbar{ flex-direction:column; }
    .ap-doc-filterbar select{ width:100%; }
}

/* ===== AP Netwerkborrel (events) ===== */

/* Alle drie de dashboard-tegels: knop onderaan uitgelijnd */
.ap-card-grid--three .ap-card{
    display:flex;
    flex-direction:column;
}
.ap-card-grid--three .ap-card p{
    flex:1;
}
.ap-card-cta{
    margin-top:auto;
    width:100%;
    background:var(--ap-blue);
    color:#fff;
    font-weight:800;
    font-size:16px;
}
.ap-card-cta svg{
    width:19px;
    height:19px;
    stroke:currentColor;
    margin-left:8px;
}

/* Dashboard-tegel: nieuwe opmaak (afteltimer, feiten, plekken, knop) */
.ap-card--event{
    position:relative;
    display:flex;
    flex-direction:column;
}
.ap-card--event .ap-event-badge{
    position:absolute;
    top:20px;
    right:20px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:var(--ap-navy);
    color:#fff;
    border-radius:999px;
    padding:8px 14px;
    font-size:12.5px;
    font-weight:800;
    line-height:1;
}
.ap-card--event .ap-event-badge svg{
    width:15px;
    height:15px;
    stroke:#6ea8ff;
    flex:none;
}
.ap-event-title{
    margin:14px 0 18px;
    font-size:26px;
    line-height:1.15;
    color:var(--ap-text);
}
.ap-event-facts{
    list-style:none;
    margin:0 0 18px;
    padding:0;
    display:grid;
    gap:12px;
}
.ap-event-facts li{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--ap-text);
    font-weight:600;
    font-size:15px;
}
.ap-event-facts svg{
    width:20px;
    height:20px;
    flex:none;
    stroke:var(--ap-blue);
}
.ap-event-spots{
    display:inline-flex;
    align-items:center;
    gap:9px;
    background:#e8fff0;
    color:#09622b;
    border-radius:12px;
    padding:11px 16px;
    font-weight:700;
    font-size:14.5px;
    margin-bottom:16px;
}
.ap-event-spots__dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#12a150;
    flex:none;
}
.ap-event-cta{
    margin-top:auto;
    width:100%;
    background:var(--ap-blue);
    color:#fff;
    font-weight:800;
    font-size:16px;
}
.ap-event-cta svg{
    width:19px;
    height:19px;
    stroke:currentColor;
    margin-left:8px;
}

/* Info + teller naast elkaar */
.ap-event-row{
    margin-top:22px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    align-items:stretch;
}
.ap-event-row > .ap-event-info,
.ap-event-row > .ap-event-counter{
    margin-top:0;
}

/* Info-strip: datum / tijd / locatie (onder elkaar) */
.ap-event-info{
    margin-top:22px;
    display:flex;
    flex-direction:column;
    gap:18px;
    background:var(--ap-card);
    border:1px solid var(--ap-border);
    border-radius:var(--ap-radius);
    box-shadow:var(--ap-shadow);
    padding:22px 26px;
}
.ap-event-info__item{
    display:flex;
    align-items:center;
    gap:14px;
}
.ap-event-info__icon{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    flex:none;
    border-radius:12px;
    background:var(--ap-soft);
    color:var(--ap-blue);
}
.ap-event-info__icon svg{width:22px;height:22px}
.ap-event-info__label{
    display:block;
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--ap-muted);
    margin-bottom:2px;
}
.ap-event-info__item strong{
    color:var(--ap-text);
    font-size:15.5px;
}

/* Teller */
.ap-event-counter{
    margin-top:22px;
    background:var(--ap-card);
    border:1px solid var(--ap-border);
    border-radius:var(--ap-radius);
    box-shadow:var(--ap-shadow);
    padding:24px 28px;
}
.ap-event-counter__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}
.ap-event-counter__big{
    font-size:44px;
    font-weight:900;
    line-height:1;
    color:var(--ap-text);
}
.ap-event-counter__label{
    margin-left:10px;
    color:var(--ap-muted);
    font-weight:700;
    font-size:16px;
}
.ap-event-counter__free{
    color:var(--ap-text);
    font-weight:700;
    font-size:16px;
}
.ap-event-counter__free strong{
    color:var(--ap-blue);
}
.ap-pill--full{
    background:#ffe0e0;
    color:#b02020;
}
.ap-event-bar{
    margin-top:16px;
    height:12px;
    border-radius:999px;
    background:var(--ap-soft);
    overflow:hidden;
}
.ap-event-bar__fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#1447e6,#174ef5);
    transition:width .4s ease;
}

/* Over de borrel: tekst links, foto rechts */
/* 50/50 zodat de scheiding op exact het midden valt, gelijk aan de blokken erboven. */
.ap-event-about{
    margin-top:22px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    background:var(--ap-card);
    border:1px solid var(--ap-border);
    border-radius:var(--ap-radius);
    box-shadow:var(--ap-shadow);
    overflow:hidden;
}
.ap-event-about__text{
    padding:34px 36px;
}
.ap-event-about__text h2{
    margin:12px 0 16px;
    font-size:26px;
    line-height:1.2;
    color:var(--ap-text);
}
.ap-event-about__text p{
    margin:0 0 14px;
    color:var(--ap-muted);
    line-height:1.6;
}
.ap-event-about__text p:last-child{margin-bottom:0}
.ap-event-about__text strong{color:var(--ap-text)}
.ap-event-about__intro{
    margin:0 0 10px !important;
    font-weight:800;
    color:var(--ap-text) !important;
}
.ap-event-list{
    list-style:none;
    margin:0 0 16px;
    padding:0;
    display:grid;
    gap:9px;
}
.ap-event-list li{
    position:relative;
    padding-left:30px;
    color:var(--ap-muted);
    line-height:1.5;
}
.ap-event-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:3px;
    width:18px;
    height:18px;
    border-radius:6px;
    background:var(--ap-soft);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230757e6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:center;
    background-size:12px;
}
.ap-event-about__media{
    position:relative;
    min-height:320px;
    background:var(--ap-soft);
}
.ap-event-about__media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.ap-event-about__placeholder{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:var(--ap-muted);
    background:repeating-linear-gradient(45deg,var(--ap-soft),var(--ap-soft) 12px,#e6f0ff 12px,#e6f0ff 24px);
}
.ap-event-about__placeholder svg{width:44px;height:44px;opacity:.55}
.ap-event-about__placeholder span{font-weight:700;font-size:14px}

/* Aanmeldformulier (eigen velden, geen Fluent Forms) */
.ap-event-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}
.ap-field{
    display:flex;
    flex-direction:column;
}
.ap-field--full{
    grid-column:1 / -1;
}
.ap-field label{
    font-weight:800;
    color:var(--ap-text);
    margin-bottom:8px;
}
.ap-field input[type="text"],
.ap-field input[type="email"]{
    width:100%;
    border-radius:12px;
    border:1px solid var(--ap-border);
    background:#fff;
    padding:12px 16px;
    font-size:15px;
    color:var(--ap-text);
    font-family:inherit;
    transition:.15s ease;
}
.ap-field input:focus{
    outline:none;
    border-color:var(--ap-blue);
    box-shadow:0 0 0 3px rgba(7,87,230,.12);
}

/* Keuze-tegels (rol) */
.ap-choice-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}
.ap-choice{
    display:flex;
    align-items:flex-start;
    gap:10px;
    border:1px solid var(--ap-border);
    border-radius:12px;
    padding:14px 16px;
    cursor:pointer;
    transition:.15s ease;
    background:#fff;
}
.ap-choice:hover{
    border-color:var(--ap-blue);
    background:var(--ap-soft);
}
.ap-choice input{
    accent-color:var(--ap-blue);
    width:18px;
    height:18px;
    margin:2px 0 0;
    flex:none;
}
.ap-choice span{
    display:flex;
    flex-direction:column;
    font-weight:800;
    color:var(--ap-text);
    line-height:1.3;
}
.ap-choice small{
    font-weight:600;
    color:var(--ap-muted);
    font-size:12.5px;
    margin-top:3px;
}
.ap-choice input:checked + span{
    color:var(--ap-blue);
}
.ap-event-submit{
    justify-self:start;
    margin-left:0;
}

/* Statusmeldingen */
.ap-event-alert{
    display:flex;
    align-items:center;
    gap:10px;
    border-radius:12px;
    padding:14px 18px;
    margin-bottom:20px;
    font-weight:700;
}
.ap-event-alert svg{width:20px;height:20px;flex:none}
.ap-event-alert--ok{background:var(--ap-success);color:#09622b}
.ap-event-alert--info{background:var(--ap-soft);color:var(--ap-blue)}
.ap-event-alert--warn{background:#ffe0e0;color:#b02020}

/* Bevestiging (al aangemeld / vol) */
.ap-event-confirmed{
    display:flex;
    align-items:flex-start;
    gap:16px;
    background:var(--ap-soft);
    border:1px solid var(--ap-border);
    border-radius:14px;
    padding:22px 24px;
}
.ap-event-confirmed__icon{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    flex:none;
    border-radius:12px;
    background:var(--ap-success);
    color:#09622b;
}
.ap-event-confirmed__icon svg{width:24px;height:24px}
.ap-event-confirmed strong{
    display:block;
    font-size:18px;
    color:var(--ap-text);
    margin-bottom:4px;
}
.ap-event-confirmed p{
    margin:0;
    color:var(--ap-muted);
    line-height:1.5;
}
.ap-event-confirmed--full .ap-event-confirmed__icon{
    background:#ffe0e0;
    color:#b02020;
}

@media (max-width:900px){
    .ap-event-row{grid-template-columns:1fr}
    .ap-event-info{grid-template-columns:1fr}
    .ap-event-about{grid-template-columns:1fr}
    .ap-event-about__media{min-height:220px}
    .ap-event-fields{grid-template-columns:1fr}
    .ap-choice-row{grid-template-columns:1fr}
}

.ap-profile-logo-wrap {
    position: relative;
}

.ap-profile-logo-edit {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    z-index: 5;
}

.ap-profile-logo-edit input {
    display: none;
}
.ap-profile-title{
    display:flex;
    align-items:center;
    gap:12px;
}

.ap-profile-company-name{
    margin:0;
}

.ap-inline-edit-button{
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:#102548;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 8px 20px rgba(16,37,72,.25);

    transition:.2s;
}

.ap-inline-edit-button:hover{
    transform:translateY(-1px);
}
.ap-edit-fab{
    position:absolute;
    right:16px;
    bottom:16px;

    width:38px;
    height:38px;

    border:none;
    border-radius:50%;

    background:#102548;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    box-shadow:0 8px 24px rgba(16,37,72,.25);

    transition:.2s;
}

.ap-edit-fab:hover{
    transform:translateY(-2px);
}

/* Banner-upload: de file-input in het potloodje verbergen (label vangt de klik) */
.ap-edit-fab input[type="file"]{
    display:none;
}
.ap-profile-banner-form{
    margin:0;
}

.ap-edit-fab .ap-edit-icon{
    width:16px;
    height:16px;
    fill:#fff;
}
/* SVG potlood iconen */

.ap-profile-logo-edit .ap-edit-icon,
.ap-edit-fab .ap-edit-icon {
    width: 16px;
    height: 16px;
    display: block;
}

.ap-profile-logo-edit .ap-edit-icon path,
.ap-edit-fab .ap-edit-icon path {
    fill: #ffffff;
}

.ap-inline-edit-button .ap-edit-icon {
    width: 16px;
    height: 16px;
    display: block;
}

.ap-inline-edit-button .ap-edit-icon path {
    fill: #ffffff;
}
.ap-inline-title-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 100%;
}

.ap-inline-title-input {
    display: none;
    border: 0;
    border-bottom: 2px solid #102548;
    background: transparent;
    padding: 0 0 4px;
    font-size: 34px;
    font-weight: 800;
    color: #102548;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

.ap-inline-title-input:focus {
    outline: none;
}

.ap-inline-title-form.is-editing .ap-profile-company-name {
    display: none;
}

.ap-inline-title-form.is-editing .ap-inline-title-input {
    display: block;
}

.ap-inline-actions {
    display: none;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.ap-inline-about-form.is-editing .ap-inline-actions {
    display: flex;
}

.ap-inline-cancel-button,
.ap-inline-save-button {
    border: 0;
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.ap-inline-cancel-button {
    background: #f1f5f9;
    color: #102548;
}

.ap-inline-save-button {
    background: #102548;
    color: #ffffff;
}

.ap-inline-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ap-inline-about-textarea {
    display: none;
    width: 100%;
    min-height: 160px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 2px solid #102548;
    border-radius: 14px;
    font: inherit;
    line-height: 1.6;
    color: #102548;
    background: #ffffff;
    resize: vertical;
}

.ap-inline-about-textarea:focus {
    outline: none;
}

.ap-inline-about-form.is-editing [data-ap-about-display] {
    display: none;
}

.ap-inline-about-form.is-editing .ap-inline-about-textarea {
    display: block;
}/* ===== Profiel-voortgang (voortgangscirkel + stappen in hero) ===== */
.ap-profielvoortgang{
    display:flex;
    align-items:center;
    gap:22px;
    margin-top:16px;
    padding:16px 20px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    flex-wrap:wrap;
}

/* De ring (compacter: 84px) */
.ap-profielvoortgang__ring{
    position:relative;
    width:84px;
    height:84px;
    flex:none;
}
.ap-ring{
    width:84px;
    height:84px;
    transform:rotate(-90deg);
}
.ap-ring__track{
    fill:none;
    stroke:rgba(255,255,255,.15);
    stroke-width:9;
}
.ap-ring__fill{
    fill:none;
    stroke:#6ea8ff;
    stroke-width:9;
    stroke-linecap:round;
    transition:stroke-dasharray .5s ease;
}
.ap-ring__label{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:19px;
    font-weight:900;
    color:#ffffff;
}

/* 100% compleet: ring + label groen */
.ap-profielvoortgang.is-compleet .ap-ring__fill{
    stroke:#3ddc84;
}
.ap-profielvoortgang.is-compleet .ap-ring__label{
    color:#3ddc84;
}

/* Tekst + lijst */
.ap-profielvoortgang__body{
    flex:1;
    min-width:260px;
}
.ap-profielvoortgang__body h3{
    margin:0 0 3px;
    font-size:17px;
    color:#ffffff;
}
.ap-profielvoortgang__body p{
    margin:0 0 12px;
    color:#b9c7dd;
    line-height:1.45;
    font-size:13.5px;
}

.ap-profielvoortgang__lijst{
    list-style:none;
    margin:0 0 12px;
    padding:0;
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:7px 18px;
}
.ap-profielvoortgang__lijst li{
    display:flex;
    align-items:center;
    gap:8px;
    color:#b9c7dd;
    font-size:13px;
    font-weight:600;
}
.ap-profielvoortgang__lijst li.is-klaar{
    color:#ffffff;
}
.ap-profielvoortgang__lijst li svg{
    width:17px;
    height:17px;
    flex:none;
    padding:2px;
    border-radius:50%;
    background:var(--ap-success);
    stroke:#09622b;
    box-sizing:border-box;
}
.ap-profielvoortgang__leeg{
    width:17px;
    height:17px;
    flex:none;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.30);
    box-sizing:border-box;
}

.ap-profielvoortgang__cta{
    display:inline-flex;
    margin-left:0;
    padding:10px 18px;
    font-size:14px;
}

@media (max-width:1100px){
    .ap-profielvoortgang__lijst{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}
@media (max-width:720px){
    .ap-profielvoortgang__lijst{
        grid-template-columns:1fr;
    }
}

/* ===== Profiel-voortgang: felicitatie-animatie + compleet-badge ===== */
/* Vulling animeert soepel naar 100% */
.ap-profielvoortgang.is-animatie .ap-ring__fill{
    transition:stroke-dasharray 1.2s ease;
}

/* Dichtklappen na 5 seconden */
.ap-profielvoortgang.is-dichtklappen{
    overflow:hidden;
    animation:apDichtklap .6s ease forwards;
}
@keyframes apDichtklap{
    0%{
        opacity:1;
        max-height:400px;
        margin-top:16px;
        padding-top:16px;
        padding-bottom:16px;
    }
    100%{
        opacity:0;
        max-height:0;
        margin-top:0;
        padding-top:0;
        padding-bottom:0;
        border-width:0;
    }
}

/* Klein groen vinkje-label als profiel compleet is (animatie al gezien) */
.ap-profiel-compleet-badge{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-top:16px;
    padding:9px 16px;
    background:rgba(61,220,132,.14);
    border:1px solid rgba(61,220,132,.35);
    border-radius:999px;
    color:#3ddc84;
    font-weight:800;
    font-size:14px;
}
.ap-profiel-compleet-badge svg{
    width:16px;
    height:16px;
    flex:none;
    stroke:#3ddc84;
}

/* ===== Rondleiding (dashboard tour, spotlight) ===== */
.ap-tour[hidden]{ display:none; }
.ap-tour{
    position:fixed;
    inset:0;
    z-index:10000;
}
.ap-tour__overlay{
    position:fixed;
    inset:0;
    background:transparent;
    pointer-events:auto;
}
.ap-tour__spot{
    position:fixed;
    border-radius:16px;
    box-shadow:0 0 0 9999px rgba(7,29,58,.72);
    transition:top .3s ease, left .3s ease, width .3s ease, height .3s ease;
    pointer-events:none;
    z-index:10001;
}
.ap-tour__box{
    position:fixed;
    width:340px;
    max-width:calc(100vw - 24px);
    background:#ffffff;
    border-radius:16px;
    box-shadow:0 24px 70px rgba(8,31,69,.35);
    padding:22px 24px;
    z-index:10002;
    transition:top .3s ease, left .3s ease;
}
.ap-tour__step{
    display:inline-block;
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--ap-blue);
    margin-bottom:8px;
}
.ap-tour__title{
    margin:0 0 8px;
    font-size:20px;
    color:var(--ap-text);
}
.ap-tour__text{
    margin:0 0 20px;
    color:var(--ap-muted);
    line-height:1.55;
    font-size:14.5px;
}
.ap-tour__actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.ap-tour__skip{
    border:0;
    background:none;
    color:var(--ap-muted);
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    padding:8px 4px;
}
.ap-tour__skip:hover{ color:var(--ap-text); }
.ap-tour__nav{
    display:flex;
    gap:10px;
}
.ap-tour__prev{
    border:1px solid var(--ap-border);
    background:#fff;
    color:var(--ap-text);
    font-weight:700;
    font-size:14px;
    border-radius:10px;
    padding:9px 16px;
    cursor:pointer;
    transition:.15s ease;
}
.ap-tour__prev:hover{ background:var(--ap-soft); }
.ap-tour__next{
    border:0;
    background:var(--ap-blue);
    color:#fff;
    font-weight:800;
    font-size:14px;
    border-radius:10px;
    padding:9px 18px;
    cursor:pointer;
    transition:.15s ease;
}
.ap-tour__next:hover{ background:#004fd6; }

/* Rondleiding-knop in de sidebar (past bij het donkere hulp-blok) */
.ap-tour-herstart{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    margin-top:10px;
    margin-bottom:10px;
    padding:clamp(8px, 1.3vh, 10px) 14px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.04);
    color:#eaf2ff !important;
    text-decoration:none;
    font-weight:700;
    font-size:clamp(12px, 1.6vh, 14px);
    border-radius:9px;
    cursor:pointer;
    transition:.15s ease;
    flex-shrink:0;
}
.ap-tour-herstart:hover{
    background:rgba(255,255,255,.10);
    border-color:rgba(110,168,255,.5);
}
.ap-tour-herstart svg{
    width:16px;
    height:16px;
    flex:none;
    stroke:#6ea8ff;
}
/* In ingeklapte sidebar: alleen icoon tonen */
.ap-platform.is-collapsed .ap-tour-herstart span{
    display:none;
}
.ap-platform.is-collapsed .ap-tour-herstart{
    padding:10px 0;
}

/* ===== Rondleiding: afsluitscherm (gecentreerd) ===== */
/* Tijdens het afsluitscherm de hele achtergrond verduisteren.
   (Bij de gewone stappen doet de spotlight dat; die is dan verborgen.) */
.ap-tour.is-finish .ap-tour__overlay{
    background:rgba(7,29,58,.72);
}
.ap-tour__finish[hidden]{ display:none; }
.ap-tour__finish{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:420px;
    max-width:calc(100vw - 32px);
    background:#ffffff;
    border-radius:20px;
    box-shadow:0 30px 80px rgba(8,31,69,.45);
    padding:40px 36px;
    text-align:center;
    z-index:10003;
}
.ap-tour__finish-icon{
    display:inline-grid;
    place-items:center;
    width:72px;
    height:72px;
    margin-bottom:20px;
    border-radius:50%;
    background:rgba(61,220,132,.14);
    color:#3ddc84;
}
.ap-tour__finish-icon svg{
    width:36px;
    height:36px;
    stroke:#3ddc84;
}
.ap-tour__finish h3{
    margin:0 0 12px;
    font-size:24px;
    color:var(--ap-text);
}
.ap-tour__finish p{
    margin:0 0 28px;
    color:var(--ap-muted);
    line-height:1.6;
    font-size:15px;
}
.ap-tour__finish-btn{
    border:0;
    background:var(--ap-blue);
    color:#fff;
    font-weight:800;
    font-size:15px;
    border-radius:12px;
    padding:13px 32px;
    cursor:pointer;
    transition:.15s ease;
}
.ap-tour__finish-btn:hover{ background:#004fd6; }

/* ===== AP Netwerk: profiel-actieknop (boven de teller) ===== */
.ap-network-actiebalk{
    display:flex;
    margin-top:4px;
    margin-bottom:20px;
}
.ap-network-actiebalk .ap-button{
    margin-left:0;
}

/* ===== Profiel: lege velden (alleen zichtbaar voor eigenaar) ===== */
.ap-profile-info-card__empty{
    margin:0;
    color:#9aa6b8;
    font-size:14px;
    font-style:italic;
}

/* ===== Profiel: contactgegevens bewerken (eigenaar) ===== */
.ap-contact-edit-form{
    margin-top:22px;
    background:#fff;
    border:1px solid var(--ap-border);
    border-radius:18px;
    padding:22px 26px;
    box-shadow:0 12px 30px rgba(11,36,71,.06);
}
.ap-contact-edit-form .ap-inline-section-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.ap-contact-edit-form h2{
    margin:0;
    color:#071f43;
    font-size:20px;
}
/* Velden standaard verborgen; zichtbaar zodra je op het potloodje klikt */
.ap-contact-edit-fields{
    display:none;
    margin-top:18px;
}
.ap-contact-edit-form.is-editing .ap-contact-edit-fields{
    display:block;
}
.ap-contact-edit-fields label{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:14px;
    font-weight:700;
    color:var(--ap-text);
    font-size:14px;
}
.ap-contact-edit-fields input{
    width:100%;
    height:46px;
    border-radius:10px;
    border:1px solid var(--ap-border);
    padding:0 14px;
    font-size:15px;
    color:var(--ap-text);
    font-weight:400;
}
.ap-contact-edit-fields input:focus{
    outline:none;
    border-color:var(--ap-blue);
    box-shadow:0 0 0 3px rgba(7,87,230,.12);
}
.ap-contact-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:4px;
}

/* Lege bedrijfsnaam-placeholder (alleen zichtbaar voor eigenaar) */
.ap-profile-name-empty{
    color:#9aa6b8;
    font-style:italic;
    font-weight:600;
}

/* ===== Profiel: activiteiten bewerken (eigenaar) ===== */
.ap-activiteiten-form{
    margin-top:22px;
    background:#fff;
    border:1px solid var(--ap-border);
    border-radius:18px;
    padding:22px 26px;
    box-shadow:0 12px 30px rgba(11,36,71,.06);
}
.ap-activiteiten-form h2{
    margin:0;
    color:#071f43;
    font-size:20px;
}
.ap-activiteiten-hint{
    margin:12px 0 0;
    color:var(--ap-muted);
    font-size:13.5px;
    line-height:1.5;
}
.ap-activiteiten-fields{
    display:none;
    margin-top:18px;
}
.ap-activiteiten-form.is-editing .ap-activiteiten-fields{
    display:block;
}
.ap-activiteiten-groep{
    border:1px solid var(--ap-border);
    border-radius:12px;
    padding:16px 18px;
    margin:0 0 16px;
}
.ap-activiteiten-groep legend{
    padding:0 8px;
    font-weight:800;
    color:var(--ap-text);
    font-size:15px;
}
.ap-activiteiten-opties{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px 18px;
    margin-top:6px;
}
.ap-activiteiten-optie{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:var(--ap-text);
    cursor:pointer;
}
.ap-activiteiten-optie input{
    width:18px;
    height:18px;
    accent-color:var(--ap-blue);
    flex:none;
    cursor:pointer;
}
.ap-activiteiten-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:4px;
}
@media (max-width:600px){
    .ap-activiteiten-opties{ grid-template-columns:1fr; }
}

/* ===== Profiel: losse bewerkbare kaarten (contact + activiteiten) ===== */
/* Elke kaart heeft een eigen potloodje rechtsboven. Het bewerk-formulier
   is standaard verborgen en verschijnt bij klik (klasse is-editing). */
.ap-contact-card,
.ap-activiteit-card{
    position:relative;
}
.ap-card-edit-btn{
    position:absolute;
    top:14px;
    right:14px;
    width:32px;
    height:32px;
    border:none;
    border-radius:50%;
    background:#102548;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 20px rgba(16,37,72,.25);
    transition:.2s;
    z-index:2;
}
.ap-card-edit-btn:hover{ transform:translateY(-1px); }
.ap-card-edit-btn .ap-edit-icon{ width:14px; height:14px; }
.ap-card-edit-btn .ap-edit-icon path{ fill:#fff; }

/* Bewerk-formulier binnen een kaart: standaard verborgen, tonen bij is-editing */
.ap-card-edit-form{ display:none; margin-top:14px; }
.ap-card-edit[data-ap-card-edit].is-editing .ap-card-view{ display:none; }
.ap-card-edit[data-ap-card-edit].is-editing .ap-card-edit-form{ display:block; }
/* (werkt via de is-editing klasse op het article/div met data-ap-card-edit) */
.is-editing > .ap-card-edit-form{ display:block; }
.is-editing > .ap-card-view{ display:none; }

.ap-card-edit-form input[type="text"],
.ap-card-edit-form input[type="email"]{
    width:100%;
    height:44px;
    border-radius:10px;
    border:1px solid var(--ap-border);
    padding:0 14px;
    font-size:15px;
    color:var(--ap-text);
}
.ap-card-edit-form input:focus{
    outline:none;
    border-color:var(--ap-blue);
    box-shadow:0 0 0 3px rgba(7,87,230,.12);
}
.ap-card-edit-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:12px;
}
/* Activiteitenkaart: opties netjes onder elkaar in de bewerk-stand */
.ap-activiteit-card .ap-activiteiten-opties{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    margin-bottom:4px;
}

/* ===== Fine-tuning profielkaart ===== */

/* Bedrijfsnaam: opslaan-knop verschijnt alleen in bewerk-modus */
.ap-inline-title-actions{
    display:none;
    margin-left:10px;
}
.ap-inline-title-form.is-editing .ap-inline-title-actions{
    display:inline-flex;
}

/* "Contact opnemen"-knop niet tegen de rand: wat lucht rechts in de hero */
.ap-profile-hero__actions{
    margin-right:4px;
}
.ap-profile-hero__content{
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 0 28px 28px;
    padding-right:32px;
}

/* Adres: nette labels boven elk invulveld */
.ap-card-field-label{
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-bottom:12px;
    font-weight:700;
    font-size:13px;
    color:var(--ap-text);
}
.ap-card-field-label input{
    height:44px;
    border-radius:10px;
    border:1px solid var(--ap-border);
    padding:0 14px;
    font-size:15px;
    font-weight:400;
    color:var(--ap-text);
}
.ap-card-field-label input:focus{
    outline:none;
    border-color:var(--ap-blue);
    box-shadow:0 0 0 3px rgba(7,87,230,.12);
}

/* ============================================================
   GLOBALE BEWERKMODUS
   Eén knop "Profiel bewerken" (data-ap-profile-edit-toggle) zet
   de klasse is-editing op .ap-network-profile-page. Daarmee tonen
   we alle bewerkvelden tegelijk en verbergen we de losse potloodjes.
   Sluit aan op Simone's bestaande toggle-JS.
   ============================================================ */

/* Toggle-knop bovenaan */
.ap-profile-edit-toggle{
    flex:none;
    margin-left:0;
    cursor:pointer;
}

/* 1. Losse potloodjes altijd verbergen: de globale knop neemt het over. */
.ap-network-profile-page .ap-card-edit-btn,
.ap-network-profile-page .ap-inline-edit-button,
.ap-network-profile-page .ap-edit-fab,
.ap-network-profile-page .ap-profile-logo-edit{
    display:none !important;
}

/* 2. Standaard (weergavemodus): alle bewerkvormen verborgen. */
.ap-network-profile-page .ap-card-edit-form,
.ap-network-profile-page .ap-inline-title-input,
.ap-network-profile-page .ap-inline-about-textarea,
.ap-network-profile-page .ap-inline-actions,
.ap-network-profile-page .ap-inline-title-actions,
.ap-network-profile-page .ap-profile-logo-form{
    display:none;
}

/* 3. In bewerkmodus (is-editing op de pagina): */
/*    bewerkvormen tonen ... */
.ap-network-profile-page.is-editing .ap-card-edit-form{ display:block; }
.ap-network-profile-page.is-editing .ap-inline-title-input{ display:block; }
.ap-network-profile-page.is-editing .ap-inline-about-textarea{ display:block; }
.ap-network-profile-page.is-editing .ap-inline-actions{ display:flex; }
.ap-network-profile-page.is-editing .ap-inline-title-actions{ display:inline-flex; }
.ap-network-profile-page.is-editing .ap-profile-logo-form{ display:block; }
/*    ... en de losse potloodjes voor logo/banner weer tonen (die horen bij bewerken) */
.ap-network-profile-page.is-editing .ap-edit-fab,
.ap-network-profile-page.is-editing .ap-profile-logo-edit{
    display:flex !important;
}

/* 4. Weergave-elementen verbergen in bewerkmodus (zodat je niet dubbel ziet). */
.ap-network-profile-page.is-editing .ap-card-view{ display:none; }
.ap-network-profile-page.is-editing .ap-inline-title-form .ap-profile-company-name{ display:none; }
.ap-network-profile-page.is-editing [data-ap-about-display]{ display:none; }

/* 5. Contactkaarten: in weergavemodus de "Nog niet ingevuld" tonen,
      in bewerkmodus het veld. (ap-card-view regelt dat al via punt 4.) */

/* ============================================================
   FINE-TUNING v2 (feedback gebruiker)
   ============================================================ */

/* --- Owner-notice: nette, bij de kaart passende opmaak --- */
.ap-profile-owner-notice{
    display:flex;
    align-items:center;
    gap:14px;
    background:#eef5ff;
    border:1px solid #d6e4fb;
    border-radius:14px;
    padding:16px 20px;
    margin-bottom:18px;
}
.ap-profile-owner-notice__icon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    flex:none;
    border-radius:50%;
    background:#dbe9fe;
    color:var(--ap-blue);
}
.ap-profile-owner-notice__icon svg{ width:22px; height:22px; }
.ap-profile-owner-notice__text{
    display:flex;
    flex-direction:column;
    gap:2px;
}
.ap-profile-owner-notice__text strong{
    color:var(--ap-text);
    font-size:15px;
}
.ap-profile-owner-notice__text span{
    color:var(--ap-muted);
    font-size:13.5px;
    line-height:1.4;
}

/* --- "Profiel bewerken"-knop bij de bedrijfsnaam --- */
.ap-profile-hero__main .ap-profile-edit-toggle{
    display:inline-flex;
    margin:6px 0 12px;
    padding:10px 20px;
    font-size:14px;
    cursor:pointer;
}

/* --- "Contact opnemen": weg van de bovenrand van de banner --- */
.ap-profile-hero__actions{
    margin-top:24px;
}

/* --- Opslaan/Annuleren pas tonen bij een wijziging in die kaart --- */
/* Standaard verbergen we de actieknoppen; ze verschijnen zodra de kaart
   (of het titelveld) de klasse is-changed heeft. */
.ap-network-profile-page.is-editing .ap-card-edit-actions{
    display:none;
}
.ap-network-profile-page.is-editing .ap-card-edit-form.is-changed .ap-card-edit-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:12px;
}
/* Bedrijfsnaam: opslaan-knop pas bij wijziging */
.ap-network-profile-page.is-editing .ap-inline-title-actions{
    display:none;
}
.ap-network-profile-page.is-editing .ap-inline-title-form.is-changed .ap-inline-title-actions{
    display:inline-flex;
}
/* ===== Login/wachtwoord meldingen ===== */
.ap-login-error{
    background:#fde8e8;
    border:1px solid #f5c2c2;
    color:#8a1f1f;
    border-radius:10px;
    padding:12px 14px;
    margin:0 0 16px;
    font-size:14px;
    line-height:1.45;
}
.ap-login-success{
    display:flex;
    align-items:flex-start;
    gap:10px;
    background:#e8fbef;
    border:1px solid #b9ffd0;
    color:#09622b;
    border-radius:10px;
    padding:12px 14px;
    margin:0 0 16px;
    font-size:14px;
    line-height:1.45;
}

/* ===== Login/lostpassword formulier: knoppen + ruimte ===== */
.ap-custom-login-form{
    display:flex;
    flex-direction:column;
    gap:16px;                 /* ruimte tussen velden en knop */
    margin-top:4px;
}
.ap-custom-login-form label{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-weight:700;
    font-size:14px;
    color:var(--ap-text);
}
.ap-custom-login-form input[type="text"],
.ap-custom-login-form input[type="email"],
.ap-custom-login-form input[type="password"]{
    height:48px;
    border-radius:10px;
    border:1px solid var(--ap-border);
    padding:0 14px;
    font-size:15px;
    font-weight:400;
    color:var(--ap-text);
}
.ap-custom-login-form input:focus{
    outline:none;
    border-color:var(--ap-blue);
    box-shadow:0 0 0 3px rgba(7,87,230,.12);
}
/* De knop netjes en vullend, zoals de andere primaire knoppen */
.ap-custom-login-form .ap-button--primary{
    margin-left:0;            /* niet naar rechts duwen */
    margin-top:6px;           /* extra lucht boven de knop */
    width:100%;
    height:52px;
    font-size:15px;
    justify-content:center;
}

/* ===== Groene melding met info-icoon ===== */
.ap-login-success::before{
    content:"";
    flex:none;
    width:20px;
    height:20px;
    margin-top:1px;
    border-radius:50%;
    background:#09622b;
    /* wit "i" icoon als achtergrond (SVG data-uri) */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:center;
    background-size:20px 20px;
}

/* ============================================================
   MOBIELE VEILIGHEIDSLAAG (breed, voorkomt uit-de-box lopen)
   Alleen actief op smalle schermen; desktop blijft ongemoeid.
   ============================================================ */
@media (max-width:720px){

    /* 1. Voorkom horizontaal scrollen door iets dat buiten beeld steekt */
    html, body{
        overflow-x:hidden;
        max-width:100%;
    }

    /* 2. Alleen echt te lange woorden/URLs/e-mails afbreken.
       (overflow-wrap breekt pas als een woord niet past; word-break:break-word
       brak ook midden in gewone woorden, dat zag er lelijk uit.) */
    .ap-card, .ap-mini-card, .ap-magazine-card,
    .ap-hero-card, .ap-profile-info-card, .ap-order-card,
    .ap-doc-card, .ap-event-info, .ap-event-counter{
        overflow-wrap:break-word;
    }

    /* 3. Knoppen: op mobiel volledige breedte, gecentreerd, zodat de tekst
       normaal op een regel past en niet letter-voor-letter afbreekt. */
    .ap-button, .ap-danger-button{
        max-width:100%;
        white-space:normal;
        overflow-wrap:break-word;
        word-break:normal;
    }
    /* De knoppen die anders platgedrukt worden (in kaarten) volle breedte geven */
    .ap-magazine-card .ap-danger-button,
    .ap-magazine-card .ap-button,
    .ap-settings-card .ap-button,
    .ap-form-card .ap-button{
        width:100%;
        justify-content:center;
    }
    /* primaire knoppen niet meer naar rechts duwen op mobiel */
    .ap-button--primary{
        margin-left:0;
    }

    /* Magazine-kaart: op mobiel krijgt de tekst de volle breedte en zwakt de
       achtergrondfoto af, zodat de titel niet in een smal kolommetje over de
       foto geperst wordt. */
    .ap-magazine-card > div{
        max-width:100%;
    }
    .ap-magazine-card::before{
        width:100%;
        opacity:.12;
    }
    .ap-magazine-card::after{
        width:100%;
    }

    /* 4. Modal-knoppen (waren vast 220px, pasten niet naast elkaar) */
    .ap-modal__actions{
        flex-direction:column;
    }
    .ap-modal__actions .ap-button,
    .ap-modal__actions .ap-danger-button{
        width:100%;
        max-width:100%;
    }

    /* 4b. Opzegreden-stap compacter op kleine schermen */
    .ap-modal__box{
        padding:22px 18px;
        max-height:85vh;
    }
    .ap-radio-option{
        padding:10px 12px;
        font-size:13px;
    }
    .ap-cancel-reason-other-field{
        margin-left:0;
        width:100%;
    }

    /* 5. Afbeeldingen en media nooit breder dan hun container */
    img{
        max-width:100%;
        height:auto;
    }

    /* 6. Afbeeldingen blijven binnen hun container (zie punt 5 hierboven). */
}

/* ============================================================
   CENTRALE OPSLAAN-KNOP: verberg de losse opslaan/annuleren-knoppen
   per blok. Er is nu een centrale knop bovenaan die alles tegelijk
   opslaat. De invoervelden zelf blijven gewoon zichtbaar in bewerkmodus.
   ============================================================ */
.ap-network-profile-page .ap-card-edit-actions,
.ap-network-profile-page .ap-inline-title-actions,
.ap-network-profile-page.is-editing .ap-inline-actions{
    display:none !important;
}

/* ===== Centrale bewerk/opslaan-knoppen ===== */
.ap-profile-edit-controls{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}
/* De centrale opslaan-knop verschijnt alleen in bewerkmodus */
.ap-profile-save-all{
    display:none;
}
.ap-network-profile-page.is-editing .ap-profile-save-all{
    display:inline-flex;
}
/* De 'Profiel bewerken'-knop verschijnt alleen BUITEN bewerkmodus. In
   bewerkmodus (waar je standaard in opent) zie je dus alleen 'Opslaan'. */
.ap-network-profile-page.is-editing .ap-profile-edit-toggle{
    display:none;
}

/* ===== Groene bevestigingsbalk (schuift in van boven) ===== */
.ap-save-toast{
    position:fixed;
    top:130px;
    left:50%;
    transform:translateX(-50%) translateY(-20px);
    z-index:80;
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--ap-success);
    color:#09622b;
    font-weight:800;
    padding:14px 22px;
    border-radius:12px;
    box-shadow:0 14px 40px rgba(9,98,43,.22);
    opacity:0;
    animation:apToastIn .45s ease forwards;
}
.ap-save-toast__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    border-radius:50%;
    background:#09622b;
    color:#fff;
    flex:none;
}
.ap-save-toast__icon svg{ width:15px; height:15px; }
.ap-save-toast.is-weg{
    animation:apToastOut .4s ease forwards;
}
@keyframes apToastIn{
    from{ opacity:0; transform:translateX(-50%) translateY(-20px); }
    to  { opacity:1; transform:translateX(-50%) translateY(0); }
}
@keyframes apToastOut{
    from{ opacity:1; transform:translateX(-50%) translateY(0); }
    to  { opacity:0; transform:translateX(-50%) translateY(-20px); }
}
/* ===== Fix: WooCommerce h1-kleur overschrijft hero-titel op account-pagina's ===== */
.woocommerce-page .ap-hero-card h1{
    color:#ffffff !important;
}

/* ============================================================
   STRUCTURELE FIX: alle tekst binnen donkere (navy) containers
   krijgt gegarandeerd een lichte kleur, ongeacht welke externe
   regel (WooCommerce, plugins, globale 'a{color}') daar overheen
   probeert te schrijven. Dit dekt in één keer:
   - .ap-sidebar (linkermenu)
   - .ap-hero-card (dashboard-titelblok)
   - .ap-status-bar (statusbalk in de hero)
   - .ap-login-right (rechterkant inlogscherm)
   - .ap-network-card__visual / .ap-profile-hero__logo (donkere kaartvlakken)
   - .ap-card--event .ap-event-badge (donker badge-labeltje)
   ============================================================ */
.ap-sidebar,
.ap-sidebar *,
.ap-hero-card,
.ap-hero-card *,
.ap-status-bar,
.ap-status-bar *,
.ap-login-right,
.ap-login-right *,
.ap-network-card__visual,
.ap-network-card__visual *,
.ap-profile-hero__logo,
.ap-profile-hero__logo *,
.ap-card--event .ap-event-badge,
.ap-card--event .ap-event-badge *{
    color:#eaf2ff !important;
}

/* Uitzonderingen binnen deze donkere containers: elementen die BEWUST
   een andere kleur hebben (kickers, pills, knoppen, iconen op eigen
   gekleurde achtergrond) moeten hun eigen kleur houden. */
.ap-hero-card .ap-kicker{ color:#6ea8ff !important; }
.ap-hero-card .ap-hero-intro{ color:#b9c7dd !important; }
.ap-hero-card .ap-pill--success{ color:#09622b !important; }
.ap-hero-card .ap-pill--success svg{ stroke:#09622b !important; }
/* Lidmaatschap-beeindigd pil: rode achtergrond met witte tekst. Staat in de
   status-bar die alle tekst wit forceert; achtergrond expliciet rood houden. */
.ap-status-bar .ap-pill--inactive,
.ap-hero-card .ap-pill--inactive{
    background:#C1121F !important;
    color:#ffffff !important;
}
.ap-hero-card .ap-button--primary,
.ap-hero-card .ap-button--primary *{ color:#ffffff !important; }
/* Locatie-pil (adres) in netwerkkaart: witte pil met donkere tekst.
   Zit binnen .ap-network-card__visual, dus de forceer-regel hierboven maakte
   de tekst wit-op-wit (onleesbaar). Hier terug naar donker. */
.ap-network-card__location,
.ap-network-card__location *{ color:#0b2447 !important; }
.ap-nav__item.is-active,
.ap-nav__item.is-active *,
.ap-nav__item:hover,
.ap-nav__item:hover *{ color:#ffffff !important; }
.ap-login-right .ap-label{
    display:inline-block;
    margin-bottom:18px;
    color:#ffffff !important;
}
.ap-network-card__visual span{
    color:#ffffff !important;
    font-size: 46px;
    font-weight: 800;
}
.ap-profile-hero__logo span{
    color:#ffffff !important;
    font-size: 42px;
    font-weight: 900;
}
.ap-sidebar .ap-help-card__button,
.ap-sidebar a.ap-help-card__button,
.ap-sidebar .ap-help-card__button *{ color:#ffffff !important; }
.ap-sidebar .ap-collapse,
.ap-sidebar a.ap-collapse,
.ap-sidebar .ap-collapse *{ color:#ffffff !important; }
.ap-sidebar .ap-sidebar-close,
.ap-sidebar a.ap-sidebar-close,
.ap-sidebar .ap-sidebar-close *{ color:#ffffff !important; }
.ap-sidebar .ap-tour-herstart,
.ap-sidebar a.ap-tour-herstart,
.ap-sidebar .ap-tour-herstart *{ color:#eaf2ff !important; }

/* Compacte rode status voor opgezegd lidmaatschap */
.ap-pill--cancelled {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 10px 16px;
    border-radius: 999px;

    background: #d81920;
    color: #ffffff;
    border: 1px solid #d81920;

    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.ap-pill--cancelled svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    stroke: currentColor;
}

.ap-pill--cancelled:hover {
    background: #b9151b;
    border-color: #b9151b;
    color: #ffffff;
}

/* =========================================================================
   Bedankt-pagina (order-received) — Automotive Partner
   Vervangt het vorige .ap-thankyou-blok onderaan ap-core.css.
   ========================================================================= */

/* Definitieve centrering, gebaseerd op de echte paginastructuur:
   main.ap-public-page > article > (div.wp-block-image.ap-checkout-logo + div.woocommerce)
   Het logo-blok zweeft naast de content; we zetten alles weer onder elkaar
   en laten onze content de volle breedte + centrering pakken. */
main.ap-public-page article {
	display: block !important;
	overflow: visible;
}

main.ap-public-page article .wp-block-image.ap-checkout-logo {
	float: none !important;
	display: block;
	margin: 0 0 1.5rem !important;
	width: auto !important;
	max-width: 220px;
}

main.ap-public-page article div.woocommerce {
	float: none !important;
	clear: both !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ap-thankyou {
	max-width: 760px;
	margin: 0 auto;
	padding: 2rem 1rem 4rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	box-sizing: border-box;
}

/* Hero: hergebruikt de bestaande, robuuste .ap-hero-card (zelfde stijl als
   het dashboard-welkomstblok) voor het verloop, het echte AP-watermerk en de
   already-geharde tekstkleur-fixes. Hier alleen de aanvullingen die deze
   pagina specifiek nodig heeft: centrering en iets andere padding. */
.ap-thankyou-hero.ap-hero-card {
	text-align: center;
	padding: 2.75rem 2rem;
}

.ap-thankyou-hero.ap-hero-card h1 {
	margin: 0 auto .75rem;
	max-width: 20ch;
}

.ap-thankyou-hero.ap-hero-card .ap-hero-intro {
	margin: 0 auto;
	max-width: 48ch;
	line-height: 1.55;
}

/* "Betaling mislukt"-variant: eigen rode achtergrond, geen AP-watermerk nodig. */
.ap-thankyou-hero--failed {
	text-align: center;
	padding: 2.75rem 2rem;
	border-radius: var(--ap-radius);
	background: #7a1c17;
	color: #fff;
	box-shadow: var(--ap-shadow);
}

.ap-thankyou-hero--failed h1 {
	color: #fff;
	margin: 0 0 .75rem;
}

.ap-thankyou-hero--failed .ap-kicker {
	color: #ffc9c4;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .8rem;
	font-weight: 600;
	margin: 0 0 .6rem;
}

.ap-thankyou-hero--failed p:not(.ap-kicker) {
	color: rgba(255,255,255,.85);
	margin: 0 auto;
	max-width: 48ch;
}

/* Kaarten */
.ap-thankyou-card {
	background: var(--ap-card);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius);
	box-shadow: var(--ap-shadow);
	padding: 1.75rem;
}

.ap-thankyou-card h2 {
	margin: 0 0 1.25rem;
	color: var(--ap-navy);
	font-weight: 500;
}

.ap-thankyou-card h3 {
	margin: 1.5rem 0 .5rem;
	color: var(--ap-navy);
	font-size: 1rem;
	font-weight: 500;
}

/* Meta-grid */
.ap-thankyou-meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .9rem 1.5rem;
}

.ap-thankyou-meta__item {
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.ap-thankyou-meta__label {
	font-size: .8rem;
	color: var(--ap-muted);
}

.ap-thankyou-meta__value {
	font-weight: 600;
	color: var(--ap-text);
}

/* Regelitems */
.ap-thankyou-items,
.ap-thankyou-subs {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ap-border);
}

.ap-thankyou-items li {
	display: flex;
	justify-content: space-between;
	padding: .75rem 0;
	border-bottom: 1px solid var(--ap-border);
}

.ap-thankyou-items__name {
	font-weight: 600;
	color: var(--ap-text);
}

.ap-thankyou-items__qty {
	color: var(--ap-muted);
}

/* Abonnement-rij */
.ap-thankyou-subs__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--ap-border);
}

.ap-thankyou-subs__row > div {
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

/* Factuuradres */
.ap-thankyou-address {
	font-style: normal;
	color: var(--ap-text);
	line-height: 1.6;
}

.ap-thankyou-address-line {
	margin: .35rem 0 0;
	color: var(--ap-muted);
}

/* CTA */
.ap-thankyou-cta {
	text-align: center;
}

.ap-thankyou-cta p {
	color: var(--ap-muted);
	margin: 0 0 1.25rem;
}

.ap-thankyou-actions {
	display: flex !important;
	gap: .75rem;
	justify-content: center !important;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	float: none !important;
}

.ap-thankyou-actions .ap-button {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

/* Nette focusring in plaats van de harde standaard-browserrand,
   blijft zichtbaar voor toetsenbordgebruikers (toegankelijkheid). */
.ap-thankyou .ap-button:focus,
.ap-thankyou .ap-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(7,87,230,.35);
}

.ap-thankyou .ap-button *:focus,
.ap-thankyou .ap-button *:focus-visible {
	outline: none;
}

/* Knopkleuren forceren, zodat omringende WooCommerce-stijlen de tekst
   niet donker maken (blauw-op-blauw = onleesbaar). */
.woocommerce .ap-thankyou a.ap-button--primary,
.ap-thankyou a.ap-button--primary {
	background: var(--ap-blue) !important;
	color: #ffffff !important;
	border: none !important;
	text-decoration: none !important;
}

.ap-thankyou .ap-button--primary * {
	color: #ffffff !important;
	background: transparent;
	border: none;
}

.ap-thankyou .ap-button--primary:hover {
	background: #004fd6;
}

.ap-thankyou a.ap-button--outline {
	background: #fff;
	border: 1px solid var(--ap-blue);
}

.ap-thankyou .ap-button--outline * {
	color: var(--ap-blue) !important;
	background: transparent;
	border: none;
}

.ap-thankyou .ap-button--outline:hover {
	background: var(--ap-soft);
}

/* Mobiel */
@media (max-width: 560px) {
	.ap-thankyou-meta,
	.ap-thankyou-subs__row {
		grid-template-columns: 1fr;
	}
}
/* =========================================================
   HANDELSPLEIN — AUTO AANBIEDEN
   Basisopbouw pagina 4 van het UI/UX-ontwerp
   ========================================================= */

.ap-vehicle-add{
    width:100%;
    max-width:1280px;
    margin:0 auto;
}

.ap-vehicle-add__header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    margin-bottom:22px;
}

.ap-vehicle-add__header h1{
    margin:8px 0 6px;
    font-size:clamp(26px, 3vw, 32px);
    line-height:1.15;
    color:#0A1F3D;
}

.ap-vehicle-add__header p{
    margin:0;
    color:#6B778C;
    font-size:15px;
}

.ap-vehicle-add__back{
    display:inline-flex;
    align-items:center;
    color:#6B778C;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
}

.ap-vehicle-add__back:hover{
    color:#1156E5;
}

/* Stappenbalk */
.ap-vehicle-steps{
    display:grid;
   grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:8px;
    padding:14px 16px;
    margin-bottom:18px;
    background:#FFFFFF;
    border:1px solid #E4E9F0;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(10,31,61,.04);
}

.ap-vehicle-step{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:0;
    padding:8px 6px;
    border:0;
    background:transparent;
    color:#A0A9B8;
    cursor:pointer;
    font:inherit;
}

.ap-vehicle-step span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 34px;
    width:34px;
    height:34px;
    border:2px solid #D9E0E9;
    border-radius:50%;
    background:#FFFFFF;
    font-size:15px;
    font-weight:700;
    line-height:1;
}


.ap-vehicle-step strong {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.ap-vehicle-step.is-active{
    color:#0A1F3D;
}

.ap-vehicle-step.is-active span{
    border-color:#1156E5;
    background:#1156E5;
    color:#FFFFFF;
}

/* Hoofdindeling */
.ap-vehicle-add__layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 320px;
    gap:18px;
    align-items:start;
}

.ap-vehicle-add__main,
.ap-vehicle-add__sidebar{
    min-width:0;
}

.ap-vehicle-add__main .ap-card,
.ap-vehicle-add__sidebar .ap-card{
    border:1px solid #E4E9F0;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(10,31,61,.04);
}

.ap-vehicle-add__main .ap-card{
    padding:22px;
}

.ap-vehicle-add__main .ap-card h2{
    margin:0 0 4px;
    font-size:19px;
    color:#0A1F3D;
}

.ap-vehicle-add__main .ap-card > p{
    margin:0;
    color:#7A8597;
    font-size:14px;
}

/* Live preview */
.ap-vehicle-add__sidebar{
    display:grid;
    gap:14px;
}

.ap-vehicle-add__sidebar .ap-card{
    padding:0;
    overflow:hidden;
}

.ap-vehicle-preview__label{
    display:block;
    padding:14px 16px;
    border-bottom:1px solid #E4E9F0;
    color:#98A3B3;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
}

.ap-vehicle-preview__placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:260px;
    padding:24px;
    background:linear-gradient(135deg,#F4F6FA,#EAF1FE);
    color:#7A8597;
    text-align:center;
    font-size:14px;
    font-weight:700;
}

/* Tipkaart */
.ap-vehicle-tip{
    padding:18px;
    border-radius:14px;
    background:#0A1F3D;
    color:#FFFFFF;
}

.ap-vehicle-tip strong{
    display:block;
    margin-bottom:8px;
    color:#7FB0FF;
    font-size:12px;
    letter-spacing:.08em;
}

.ap-vehicle-tip p{
    margin:0;
    color:rgba(255,255,255,.78);
    font-size:14px;
    line-height:1.55;
}

/* Bestaande secundaire knop iets zekerder maken */
.ap-vehicle-add__header .ap-button--secondary{
    flex:0 0 auto;
    white-space:nowrap;
}

/* Tablet */
@media (max-width:1024px){
    .ap-vehicle-add__layout{
        grid-template-columns:minmax(0, 1fr) 280px;
    }

   .ap-vehicle-step strong{
    font-size:18px;
    font-weight:700;
    line-height:1.2;
}
}

/* Mobiel */
@media (max-width:820px){
    .ap-vehicle-add__header{
        flex-direction:column;
        align-items:stretch;
    }

    .ap-vehicle-add__header .ap-button--secondary{
        align-self:flex-start;
    }

    .ap-vehicle-steps{
        display:flex;
        overflow-x:auto;
        justify-content:flex-start;
        padding:12px;
        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
    }

    .ap-vehicle-step{
        flex:0 0 auto;
        justify-content:flex-start;
        min-width:max-content;
        scroll-snap-align:start;
    }

    .ap-vehicle-add__layout{
        grid-template-columns:1fr;
    }

    .ap-vehicle-add__sidebar{
        grid-row:auto;
    }
}

@media (max-width:560px){
    .ap-vehicle-add__header h1{
        font-size:27px;
    }

    .ap-vehicle-add__main .ap-card{
        padding:18px;
    }

    .ap-vehicle-steps{
        margin-left:-4px;
        margin-right:-4px;
    }

    .ap-vehicle-step strong{
        font-size:12px;
    }

    .ap-vehicle-preview__placeholder{
        min-height:220px;
    }
}
/* ===== Correcties Auto aanbieden ===== */

/* Algemene knopstyling binnen het dashboard neutraliseren */
.ap-vehicle-steps .ap-vehicle-step{
    appearance:none;
    -webkit-appearance:none;
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    color:#A0A9B8 !important;
    border-radius:0 !important;
}

/* Alleen de actieve stap krijgt donkere tekst */
.ap-vehicle-steps .ap-vehicle-step.is-active{
    background:transparent !important;
    color:#0A1F3D !important;
}

/* Nummerbolletjes van niet-actieve stappen */
.ap-vehicle-steps .ap-vehicle-step span{
    background:#FFFFFF !important;
    border:2px solid #D9E0E9 !important;
    color:#A0A9B8 !important;
    box-shadow:none !important;
}

/* Nummerbolletje van actieve stap */
.ap-vehicle-steps .ap-vehicle-step.is-active span{
    background:#1156E5 !important;
    border-color:#1156E5 !important;
    color:#FFFFFF !important;
}

/* Concept opslaan moet een secundaire knop zijn */
.ap-vehicle-add__header .ap-button--secondary{
    background:#FFFFFF !important;
    background-image:none !important;
    color:#536176 !important;
    border:1px solid #DDE3EB !important;
    box-shadow:none !important;
}

.ap-vehicle-add__header .ap-button--secondary:hover{
    background:#F4F6FA !important;
    color:#0A1F3D !important;
    border-color:#C8D1DE !important;
}

/* =========================================================
   HANDELSPLEIN — BASISGEGEVENS FORMULIER
   ========================================================= */

.ap-vehicle-form-card{
    padding:22px;
}

.ap-vehicle-section-heading{
    margin-bottom:18px;
}

.ap-vehicle-section-heading h2{
    margin:0 0 4px;
    font-size:19px;
    line-height:1.25;
    color:#0A1F3D;
}

.ap-vehicle-section-heading p{
    margin:0;
    color:#7A8597;
    font-size:14px;
    line-height:1.5;
}

/* RDW-blok */
.ap-rdw-box{
    padding:14px;
    margin-bottom:20px;
    border:1px solid #E4E9F0;
    border-radius:12px;
    background:#F7F9FC;
}

.ap-rdw-box > label{
    display:block;
    margin-bottom:8px;
    color:#24364F;
    font-size:13px;
    font-weight:800;
}

.ap-rdw-row{
    display:grid;
    grid-template-columns:155px auto 1fr;
    gap:10px;
    align-items:center;
}

.ap-kenteken-input{
    width:100%;
    height:46px;
    padding:0 14px;
    border:1px solid #E0B800;
    border-radius:8px;
    background:#FFD900;
    color:#1D2735;
    font-family:inherit;
    font-size:16px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    box-shadow:none;
    outline:none;
}

.ap-kenteken-input::placeholder{
    color:rgba(29,39,53,.45);
}

.ap-kenteken-input:focus{
    border-color:#CDAE00;
    box-shadow:0 0 0 3px rgba(255,217,0,.25);
}

.ap-rdw-button{
    height:46px;
    padding:0 18px;
    border:0;
    border-radius:8px;
    background:#0A1F3D;
    color:#FFFFFF;
    font-family:inherit;
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
    cursor:pointer;
    transition:background .2s ease, transform .2s ease;
}

.ap-rdw-button:hover{
    background:#12294A;
}

.ap-rdw-button:active{
    transform:translateY(1px);
}

.ap-rdw-note{
    color:#7A8597;
    font-size:13px;
    line-height:1.35;
}

/* Formulierraster */
.ap-vehicle-form-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px 14px;
}

.ap-form-field{
    min-width:0;
}

.ap-form-field--full{
    grid-column:1 / -1;
}

.ap-form-field label{
    display:block;
    margin-bottom:7px;
    color:#24364F;
    font-size:13px;
    font-weight:800;
}

.ap-form-field input,
.ap-form-field select{
    width:100%;
    min-width:0;
    height:46px;
    padding:0 13px;
    border:1px solid #DDE3EB;
    border-radius:8px;
    background:#FFFFFF;
    color:#17263D;
    font-family:inherit;
    font-size:14px;
    box-shadow:none;
    outline:none;
    transition:border-color .2s ease, box-shadow .2s ease;
}

.ap-form-field input::placeholder{
    color:#A3ACBA;
}

.ap-form-field select{
    appearance:none;
    -webkit-appearance:none;
    padding-right:38px;
    background-image:
        linear-gradient(45deg, transparent 50%, #6F7C8F 50%),
        linear-gradient(135deg, #6F7C8F 50%, transparent 50%);
    background-position:
        calc(100% - 17px) 19px,
        calc(100% - 12px) 19px;
    background-size:5px 5px, 5px 5px;
    background-repeat:no-repeat;
}

.ap-form-field input:focus,
.ap-form-field select:focus{
    border-color:#1156E5;
    box-shadow:0 0 0 3px rgba(17,86,229,.10);
}

/* Tablet */
@media (max-width:1024px){
    .ap-rdw-row{
        grid-template-columns:145px auto 1fr;
    }
}

/* Mobiel */
@media (max-width:700px){
    .ap-vehicle-form-card{
        padding:18px;
    }

    .ap-rdw-row{
        grid-template-columns:1fr;
    }

    .ap-rdw-button{
        width:100%;
    }

    .ap-rdw-note{
        text-align:left;
    }

    .ap-vehicle-form-grid{
        grid-template-columns:1fr;
    }

    .ap-form-field--full{
        grid-column:auto;
    }
}
/* ===== Voertuigsoort kiezen ===== */

.ap-vehicle-type{
    margin-bottom:20px;
}

.ap-vehicle-type__label{
    display:block;
    margin-bottom:8px;
    color:#24364F;
    font-size:13px;
    font-weight:800;
}

.ap-vehicle-type__options{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.ap-vehicle-type__option{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    padding:15px;
    border:1px solid #DDE3EB;
    border-radius:10px;
    background:#FFFFFF;
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.ap-vehicle-type__option:hover{
    border-color:#AFC5F4;
}

.ap-vehicle-type__option.is-selected{
    border-color:#1156E5;
    background:#F4F8FF;
    box-shadow:0 0 0 3px rgba(17,86,229,.08);
}

.ap-vehicle-type__option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.ap-vehicle-type__icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 42px;
    width:42px;
    height:42px;
    border-radius:9px;
    background:#EAF1FE;
    color:#1156E5;
}

.ap-vehicle-type__icon svg{
    width:23px;
    height:23px;
}

.ap-vehicle-type__option strong{
    display:block;
    color:#17263D;
    font-size:14px;
}

.ap-vehicle-type__option small{
    display:block;
    margin-top:3px;
    color:#7A8597;
    font-size:12px;
    line-height:1.35;
}

@media (max-width:700px){
    .ap-vehicle-type__options{
        grid-template-columns:1fr;
    }
}

/* ==========================================================================
   AUTO AANBIEDEN - LIVE PREVIEW
   ========================================================================== */

.ap-vehicle-preview{
    padding:0;
    overflow:hidden;
}

.ap-vehicle-preview__label{
    display:block;
    padding:20px 24px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    color:#6b7b92;
    border-bottom:1px solid #eef2f7;
}

.ap-vehicle-preview__image{
    aspect-ratio:16/10;
    background:#f5f7fb;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ap-vehicle-preview__image-placeholder{
    text-align:center;
    color:#9aa8bc;
}

.ap-vehicle-preview__image-placeholder svg{
    width:54px;
    height:54px;
    margin-bottom:12px;
}

.ap-vehicle-preview__content{
    padding:24px;
}

.ap-vehicle-preview__content h3{
    margin:0;
    font-size:24px;
    color:#0B2A5B;
}

.ap-vehicle-preview__version{
    margin:8px 0 18px;
    color:#6b7b92;
}

.ap-vehicle-preview__details{
    display:flex;
    gap:10px;
    margin-bottom:20px;
    font-weight:600;
    color:#475569;
}

.ap-vehicle-preview__meta{
    display:grid;
    gap:14px;
}

.ap-vehicle-preview__meta div{
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid #eef2f7;
    padding-bottom:10px;
}

.ap-vehicle-preview__meta dt{
    font-weight:600;
    color:#6b7b92;
}

.ap-vehicle-preview__meta dd{
    margin:0;
    font-weight:700;
    color:#0B2A5B;
}

.ap-vehicle-preview__status{
    display:inline-flex;
    margin-top:24px;
    padding:8px 14px;
    border-radius:999px;
    background:#eef5ff;
    color:#1447e6;
    font-size:13px;
    font-weight:700;
}

/* Wizard navigatie */

.ap-wizard-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    width:100%;
    margin-top:32px;
}

.ap-wizard-actions .ap-button{
    width:190px;
    height:52px;
    font-size:16px;
    font-weight:700;
    border-radius:12px;
}

.ap-form-field--full{
    grid-column:1 / -1;
}

.ap-form-field textarea{
    width:100%;
    min-height:120px;
    padding:14px 16px;
    border:1px solid #D9DEE7;
    border-radius:10px;
    font-size:15px;
    line-height:1.5;
    font-family:inherit;
    resize:vertical;
    transition:.2s;
    box-sizing:border-box;
}

.ap-form-field textarea:focus{
    outline:none;
    border-color:#1156E5;
    box-shadow:0 0 0 3px rgba(17,86,229,.10);
}
.ap-vehicle-form-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-top:40px;
    padding-top:32px;
    border-top:1px solid #E7ECF3;
}

.ap-vehicle-form-actions .ap-button{
    min-width:180px;
    height:52px;
    padding:0 24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    font-weight:600;
}
/* ===== Lettertype forceren over plugin-stylesheets heen (WooCommerce, Directorist, Fluent Forms) =====
   Deze plugins laden soms hun eigen font-family. Dit dwingt overal Poppins af,
   zodat een plugin-update het lettertype niet stiekem terugzet. */
body.woocommerce,
body.woocommerce-page,
.woocommerce,
.woocommerce *:not(i):not([class*="icon"]),
.directorist-content-active,
.directorist-content-active *:not(i):not([class*="icon"]),
.ap-fluentform-wrap,
.ap-fluentform-wrap *:not(i):not([class*="icon"]){
    font-family:var(--ap-font) !important;
}
.ap-description-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    gap: 20px;
}

.ap-ai-description-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

#ap-description-counter {
    font-size: 13px;
    color: #8A94A6;
    white-space: nowrap;
}
/* ==========================================================================
   Foto upload
   ========================================================================== */

.ap-photo-upload {
    margin-top: 24px;
}

.ap-photo-dropzone {
    display: flex;
    min-height: 260px;
    padding: 40px 24px;
    border: 2px dashed #cbd5e1;
    border-radius: 18px;
    background: #f8fafc;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.ap-photo-dropzone:hover,
.ap-photo-dropzone.is-dragging {
    border-color: #2f7df6;
    background: #eff6ff;
    transform: translateY(-1px);
}

.ap-photo-dropzone__icon {
    display: flex;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 18px;
    background: #ffffff;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.ap-photo-dropzone h3 {
    margin: 0 0 8px;
    color: #0b2a5b;
    font-size: 20px;
    line-height: 1.3;
}

.ap-photo-dropzone p {
    margin: 0 0 20px;
    color: #64748b;
}

.ap-photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.ap-photo-preview-item {
    position: relative;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    aspect-ratio: 4 / 3;
}

.ap-photo-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ap-photo-preview-item__remove {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.8);
    color: #ffffff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.ap-photo-preview-item__remove:hover {
    background: #dc2626;
}

.ap-photo-preview-item__badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(11, 42, 91, 0.9);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 820px) {
    .ap-photo-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .ap-photo-preview-grid {
        grid-template-columns: 1fr;
    }

    .ap-photo-dropzone {
        min-height: 220px;
        padding: 32px 18px;
    }
}
.ap-vehicle-preview__main-image {

    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;

}
.ap-photo-upload-count {
    display: block;
    margin-top: 18px;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}
.ap-photo-preview-item {
    cursor: grab;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.ap-photo-preview-item:active {
    cursor: grabbing;
}

.ap-photo-preview-item.is-dragging {
    opacity: 0.45;
    transform: scale(0.97);
}

.ap-photo-preview-item.is-drag-over {
    box-shadow: 0 0 0 3px #2f7df6;
    transform: translateY(-3px);
}

.ap-photo-preview-item__remove {
    cursor: pointer;
}
/* ==========================================================================
   Publiceer advertentie
   ========================================================================== */

.ap-publish-preview{
    max-width:1200px;
    margin:0 auto;
}

.ap-publish-advert{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 30px rgba(0,0,0,.05);
}

.ap-publish-advert__header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:40px;
    padding:32px;
    border-bottom:1px solid #edf0f5;
}

.ap-publish-advert__header h2{
    margin:8px 0;
    font-size:34px;
}

.ap-publish-advert__price{
    text-align:right;
}

.ap-publish-advert__price strong{
    display:block;
    font-size:34px;
    color:#0048C9;
}

.ap-publish-gallery{
    padding:32px;
}

.ap-publish-gallery__main{
    height:520px;
    background:#f5f7fa;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
}

.ap-publish-gallery__placeholder{
    text-align:center;
    color:#9ca3af;
}

.ap-publish-gallery__placeholder svg{
    width:56px;
    height:56px;
    margin-bottom:12px;
}

.ap-publish-gallery__thumbnails{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.ap-publish-advert__body{
    padding:32px;
}

.ap-publish-advert__section{
    margin-bottom:42px;
}

.ap-publish-advert__section h3{
    margin-bottom:18px;
}

.ap-publish-specifications{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 40px;
}

.ap-publish-specifications div{
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid #eef1f5;
    padding-bottom:10px;
}

.ap-publish-specifications dt{
    font-weight:600;
}

.ap-publish-preview__actions{
    display:flex;
    justify-content:space-between;
    margin-top:30px;
}
.ap-publish-preview__actions .ap-button,
.ap-publish-preview__actions button{
    font-size:16px;
    font-weight:600;
    padding:14px 28px;
    border-radius:10px;
}
/* ---- Herstel: chrome-knoppen niet blauw laten forceren door oude regels ---- */
.ap-global-header .ap-topbar__btn,
.ap-global-header .ap-topbar__burger{
    background:#fff !important;
    border:1px solid var(--ap-border-input-2) !important;
    border-radius:9px !important;
    color:var(--ap-text-body-2) !important;
    font-weight:450 !important;
}
.ap-global-header .ap-topbar__btn:hover,
.ap-global-header .ap-topbar__burger:hover{
    background:var(--ap-card-soft) !important;
    border-color:var(--ap-border-hover) !important;
}
.ap-sidebar .ap-side__collapse{
    background:rgba(255,255,255,.05) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:9px !important;
    color:var(--ap-side-text) !important;
    font-weight:450 !important;
}
.ap-sidebar .ap-side__collapse:hover{
    background:rgba(255,255,255,.13) !important;
    color:#fff !important;
}