/* ============================================================
   AP Bedrijfsprofiel — network-profile
   Exact volgens OPDRACHT-BEDRIJFSPROFIEL.md (4 aug 2026).
   Wrapper .ap-profiel neutraliseert de themabasis. Alle tekstmaten in px MET
   !important (thema forceert font-size/weight); control-breedtes gereset.
   ============================================================ */

/* ---- Pagina + reset ---- */
.ap-content:has(.ap-profiel){
	background:#F5F7FB radial-gradient(900px 320px at 18% -8%, rgba(27,77,228,.045), transparent 70%) no-repeat !important;
	max-width:none !important;
}
.ap-profiel, .ap-profiel *{ box-sizing:border-box; }
.ap-profiel{
	font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
	color:#0C1F3F; line-height:1.4; width:100%;
	padding:24px 32px 44px; display:flex; flex-direction:column; gap:20px;
}
.ap-profiel p, .ap-profiel h1, .ap-profiel h2{ margin:0; }
.ap-profiel ul, .ap-profiel li{ margin:0; padding:0; list-style:none; }
.ap-profiel input, .ap-profiel select, .ap-profiel textarea, .ap-profiel button{ font-family:inherit; }
.ap-profiel > *:first-child{ margin-top:0 !important; }
.ap-profiel [hidden]{ display:none !important; }

/* ---- Knoppen (scoped tegen thema button{...!important}) ---- */
.ap-profiel .ap-pf-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:7px;
	height:38px; padding:0 15px; border-radius:9px;
	font-size:12.5px !important; font-weight:550 !important; font-family:inherit;
	text-decoration:none; cursor:pointer; white-space:nowrap;
	border:1px solid transparent !important; transition:background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.ap-profiel .ap-pf-btn i{ font-size:15px; }
.ap-profiel .ap-pf-btn--light{ background:#fff !important; border-color:#DDE3ED !important; color:#42536B !important; }
.ap-profiel .ap-pf-btn--light:hover{ background:#FAFBFE !important; border-color:#C4D0E4 !important; }
.ap-profiel .ap-pf-btn--accent{ padding:0 17px; background:#1B4DE4 !important; border-color:#1B4DE4 !important; color:#fff !important; }
.ap-profiel .ap-pf-btn--accent:hover{ background:#143BB0 !important; border-color:#143BB0 !important; box-shadow:0 2px 10px rgba(27,77,228,.24); }
.ap-profiel .ap-pf-btn--route{ height:34px; background:#fff !important; border-color:#DDE3ED !important; color:#42536B !important; }
.ap-profiel .ap-pf-btn--route i{ font-size:14px; }
.ap-profiel .ap-pf-btn--route:hover{ background:#F5F8FE !important; border-color:#1B4DE4 !important; color:#1B4DE4 !important; }

/* ---- Inline bewerkbare velden (zien eruit als tekst, bewerkbaar bij klik) ---- */
.ap-profiel .ap-pf-fld{
	display:block; width:100%; font-family:inherit; color:#0C1F3F;
	background:transparent; border:1px solid transparent; border-radius:7px; cursor:text;
	transition:background .12s, border-color .12s, box-shadow .12s;
}
.ap-profiel .ap-pf-fld:hover{ background:#F5F8FE; }
.ap-profiel .ap-pf-fld:focus{ outline:none; background:#fff; border-color:#1B4DE4; box-shadow:0 0 0 3px rgba(27,77,228,.12); }
.ap-profiel .ap-pf-fld::placeholder{ color:#A6B2C4; }
.ap-profiel .ap-pf-fld--naam{ flex:1 1 240px; min-width:180px; max-width:100%; margin-left:-8px; padding:2px 8px; font-size:22px !important; font-weight:600 !important; letter-spacing:-.024em; }
.ap-profiel .ap-pf-fld--cs{ margin:2px 0 0 -8px; padding:3px 8px; font-size:12.5px !important; font-weight:400 !important; }
.ap-profiel .ap-pf-fld--geg{ margin-left:-8px; padding:3px 8px; font-size:12.5px !important; font-weight:400 !important; }
.ap-profiel .ap-pf-fld--ta{ margin-left:-10px; padding:8px 10px; min-height:90px; resize:vertical; font-size:13px !important; font-weight:400 !important; line-height:1.6 !important; }

/* Opslag-indicator */
.ap-pf-status{
	position:fixed; top:74px; right:24px; z-index:60; display:none; align-items:center; gap:7px;
	padding:7px 13px; border-radius:9px; background:#0F2547; color:#fff;
	font-size:12px !important; font-weight:550 !important; box-shadow:0 8px 24px -10px rgba(11,36,71,.5);
	transition:opacity .3s;
}
.ap-pf-status.is-toon{ display:inline-flex; }
.ap-pf-status.is-weg{ opacity:0; }
.ap-pf-status span{ font-size:12px !important; font-weight:550 !important; }
.ap-pf-status i{ font-size:14px; color:#7BE0A8; }
.ap-pf-status.is-saving i{ color:#9FB4D6; animation:ap-pf-spin 0.7s linear infinite; }
.ap-pf-status.is-error i{ color:#F2B8B8; }
@keyframes ap-pf-spin{ to{ transform:rotate(360deg); } }

/* ---- Kaart-basis ---- */
.ap-pf-card{
	border-radius:14px; border:1px solid #E7EBF2; overflow:hidden;
	background:linear-gradient(180deg,#FFFFFF 0%,#FDFEFF 100%);
	box-shadow:0 1px 1px rgba(16,35,64,.03), 0 8px 24px -20px rgba(16,35,64,.45);
}
.ap-pf-h2{ font-size:14px !important; font-weight:600 !important; letter-spacing:-.015em; color:#0C1F3F; }
.ap-pf-h2--pad{ padding:15px 18px 12px; }

/* ============ PROFIELKAART ============ */
.ap-pf-cover{ position:relative; height:184px; overflow:hidden; background:linear-gradient(160deg,#0B2447,#12315E); }
.ap-pf-cover__img{ width:100%; height:100%; object-fit:cover; display:block; }
.ap-pf-cover__overlay{ position:absolute; inset:0; pointer-events:none;
	background:linear-gradient(180deg, rgba(8,22,44,.28) 0%, rgba(8,22,44,0) 40%, rgba(8,22,44,.55) 100%); }
.ap-pf-badge{
	position:absolute; top:14px; right:16px; display:inline-flex; align-items:center; gap:6px;
	height:26px; padding:0 11px; border-radius:999px; background:rgba(8,22,44,.55);
	border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(8px);
	color:#fff; font-size:11.5px !important; font-weight:550 !important;
}
.ap-pf-badge i{ font-size:13px; color:#7BE0A8; }
.ap-pf-cover__upload{ position:absolute; inset:0; opacity:0; transition:opacity .15s; }
.ap-pf-cover:hover .ap-pf-cover__upload{ opacity:1; }
.ap-pf-drop{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; color:#fff; cursor:pointer; background:rgba(8,22,44,.42); }
.ap-pf-drop i{ font-size:26px; }
.ap-pf-drop span{ font-size:12.5px !important; line-height:1.5 !important; }
.ap-pf-drop input{ position:absolute; inset:0; opacity:0; cursor:pointer; }

.ap-pf-herorow{ display:flex; align-items:flex-end; gap:18px; padding:0 22px 18px; flex-wrap:wrap; }
.ap-pf-logo{
	position:relative; flex:0 0 88px; width:88px; height:88px; margin-top:-30px;
	border-radius:16px; background:#fff; padding:5px;
	box-shadow:0 6px 20px -8px rgba(11,36,71,.4), 0 0 0 1px #E7EBF2;
}
.ap-pf-logo img{ width:100%; height:100%; object-fit:cover; border-radius:12px; display:block; }
.ap-pf-logo__init{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:12px;
	background:linear-gradient(150deg,#0B2447,#12315E); color:#fff; font-size:19px !important; font-weight:600 !important; letter-spacing:-.02em; }
.ap-pf-logo__upload{ position:absolute; right:-6px; bottom:-6px; }
.ap-pf-logo__upload label{ position:relative; display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#1B4DE4; color:#fff; cursor:pointer; box-shadow:0 2px 8px rgba(11,36,71,.3); }
.ap-pf-logo__upload label i{ font-size:14px; }
.ap-pf-logo__upload input{ position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }

.ap-pf-heromain{ flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:8px; padding-bottom:2px; }
.ap-pf-namerow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ap-pf-naam{ font-size:22px !important; font-weight:600 !important; letter-spacing:-.024em; color:#0C1F3F; }
.ap-pf-pill{ display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:999px; font-size:10.5px !important; font-weight:600 !important; }
.ap-pf-pill i{ font-size:12px; }
.ap-pf-pill--groen{ background:#E9F8EF; color:#1B7A4B; }
.ap-pf-pill--grijs{ background:#F2F5FA; color:#6B7A93; font-weight:550 !important; }
.ap-pf-sub{ font-size:13px !important; font-weight:400 !important; color:#6B7A93; letter-spacing:-.005em; }
.ap-pf-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.ap-pf-tags span{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:6px; background:#F2F5FA; color:#42536B; font-size:11.5px !important; font-weight:500 !important; }
.ap-pf-heroacties{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto; align-self:flex-end; }

/* Contactstrook */
.ap-pf-contactstrook{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); border-top:1px solid #EEF1F7; }
.ap-pf-cs{ display:grid; grid-template-columns:16px 1fr; column-gap:10px; align-content:center; padding:13px 20px; box-shadow:0 0 0 1px #F1F4F9; text-decoration:none; }
.ap-pf-cs:not(.ap-pf-cs--plain):hover{ background:#FAFBFE; }
.ap-pf-cs > i{ grid-column:1; grid-row:1/3; align-self:center; font-size:16px; color:#93A2B8; }
.ap-pf-cs__lab{ grid-column:2; grid-row:1; font-size:10.5px !important; font-weight:550 !important; letter-spacing:.05em; color:#8B99AE; }
.ap-pf-cs__val{ grid-column:2; grid-row:2; font-size:12.5px !important; color:#0C1F3F; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-profiel .ap-pf-cs > .ap-pf-fld--cs{ grid-column:2; grid-row:2; }
.ap-pf-adresvelden{ grid-column:2; grid-row:2; display:flex; flex-direction:column; gap:5px; }

/* ============ KOLOMMEN ============ */
.ap-pf-kolommen{ display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; }
.ap-pf-links{ flex:2 1 480px; min-width:0; display:flex; flex-direction:column; gap:20px; }
.ap-pf-rechts{ flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:20px; }

/* Over het bedrijf */
.ap-pf-over{ display:flex; flex-direction:column; gap:16px; padding:20px; }
.ap-pf-overtekst{ font-size:13px !important; font-weight:400 !important; line-height:1.6 !important; color:#42536B; max-width:62ch; text-wrap:pretty; }
.ap-pf-gegevens{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); border-top:1px solid #EEF1F7; margin:0 -20px -20px; border-radius:0 0 13px 13px; overflow:hidden; }
.ap-pf-geg{ display:flex; flex-direction:column; gap:2px; padding:13px 20px; box-shadow:0 0 0 1px #F1F4F9; }
.ap-pf-geg__lab{ font-size:10.5px !important; font-weight:550 !important; letter-spacing:.05em; color:#8B99AE; }
.ap-pf-geg__val{ font-size:12.5px !important; font-weight:400 !important; color:#0C1F3F; }
.ap-pf-geg__val.is-leeg{ color:#A6B2C4; }

/* Activiteiten (bewerken) */
.ap-pf-activiteiten{ padding:20px; }
.ap-pf-activiteiten .ap-pf-h2{ display:block; margin-bottom:14px; }
.ap-pf-actgroepen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.ap-pf-actlabel{ display:block; font-size:11px !important; font-weight:600 !important; letter-spacing:.04em; color:#8B99AE; margin-bottom:8px; }
.ap-pf-actopties{ display:flex; flex-wrap:wrap; gap:6px; }
.ap-pf-actoptie{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:8px; background:#F7F9FC; border:1px solid #E7EBF2; cursor:pointer; }
.ap-pf-actoptie input{ margin:0; }
.ap-pf-actoptie span{ font-size:11.5px !important; font-weight:500 !important; color:#42536B; }

/* Actueel aanbod */
.ap-pf-aanbodkop{ display:flex; align-items:baseline; gap:10px; padding:15px 20px 13px; flex-wrap:wrap; }
.ap-pf-aanbodsub{ font-size:12px !important; font-weight:400 !important; color:#8B99AE; }
.ap-pf-alles{ margin-left:auto; font-size:12.5px !important; font-weight:550 !important; color:#1B4DE4; text-decoration:none; }
.ap-pf-geenaanbod{ padding:0 20px 20px; font-size:12.5px !important; color:#7A889E; }
.ap-pf-aanbodgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; padding:2px 20px 18px; }
.ap-pf-auto{ display:flex; flex-direction:column; border-radius:13px; border:1px solid #E7EBF2; background:#fff; overflow:hidden; text-decoration:none; color:#0C1F3F; box-shadow:0 1px 1px rgba(16,35,64,.03); transition:border-color .18s, box-shadow .18s, transform .18s; }
.ap-pf-auto:hover{ border-color:#C9D9F6; box-shadow:0 2px 5px rgba(16,35,64,.05), 0 18px 36px -24px rgba(16,35,64,.6); transform:translateY(-2px); }
.ap-pf-auto__foto{ flex:0 0 auto; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(155deg,#EDF1F8,#DFE6F1); }
.ap-pf-auto__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.ap-pf-auto__foto i{ font-size:30px; color:#B3BFD1; }
.ap-pf-auto__tekst{ display:flex; flex-direction:column; gap:4px; padding:12px 14px 6px; }
.ap-pf-auto__titel{ font-size:13.5px !important; font-weight:600 !important; letter-spacing:-.014em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-pf-auto__uit{ font-size:12px !important; font-weight:400 !important; color:#7A889E; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-pf-auto__specs{ font-size:11.5px !important; font-weight:400 !important; color:#42536B; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-pf-auto__prijs{ margin-top:auto; display:flex; align-items:baseline; gap:6px; padding:6px 14px 13px; }
.ap-pf-auto__prijs b{ font-size:16px !important; font-weight:600 !important; letter-spacing:-.02em; color:#0C1F3F; }
.ap-pf-auto__prijs span{ font-size:11px !important; font-weight:400 !important; color:#8B99AE; }

/* Vertrouwen */
.ap-pf-vrij{ display:flex; align-items:center; gap:11px; padding:12px 18px; box-shadow:0 0 0 1px #F5F7FB; border-top:1px solid #EEF1F7; }
.ap-pf-vrij__l{ display:inline-flex; align-items:center; gap:11px; font-size:12.5px !important; font-weight:400 !important; color:#42536B; }
.ap-pf-vrij__l i{ font-size:16px; color:#93A2B8; }
.ap-pf-vrij__r{ margin-left:auto; font-size:13px !important; font-weight:600 !important; letter-spacing:-.015em; color:#0C1F3F; }

/* Bezoek ons */
.ap-pf-map{ height:150px; border-top:1px solid #EEF1F7; border-bottom:1px solid #EEF1F7; }
.ap-pf-map iframe{ width:100%; height:100%; border:0; display:block; }
.ap-pf-adres{ display:flex; gap:10px; padding:14px 18px; }
.ap-pf-adres i{ flex:0 0 auto; margin-top:1px; font-size:16px; color:#93A2B8; }
.ap-pf-adres__naam{ display:block; font-size:12.5px !important; font-weight:550 !important; color:#0C1F3F; }
.ap-pf-adres__reg{ display:block; margin-top:2px; font-size:12.5px !important; font-weight:400 !important; line-height:1.45 !important; color:#42536B; }
.ap-profiel .ap-pf-bezoek .ap-pf-btn--route{ display:flex; margin:0 18px 16px; }

/* Contactpersoon */
.ap-pf-contactpersoon{ display:flex; flex-direction:column; gap:10px; padding:18px 20px; border-radius:14px; border:1px solid #17294A; background:linear-gradient(150deg,#0F2547 0%,#132F58 60%,#0C1E3B 100%); }
.ap-pf-cp__kicker{ font-size:10.5px !important; font-weight:600 !important; letter-spacing:.09em; color:#7FA0DA; }
.ap-pf-cp__rij{ display:flex; align-items:center; gap:12px; }
.ap-pf-cp__avatar{ display:grid; place-items:center; width:40px; height:40px; border-radius:999px; background:linear-gradient(135deg,#1B4DE4,#0B2447); color:#fff; font-size:13px !important; font-weight:600 !important; box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.ap-pf-cp__naam{ font-size:13.5px !important; font-weight:550 !important; color:#fff; }

/* Niet gevonden */
.ap-pf-leeg{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:60px 24px; }
.ap-pf-leeg i{ font-size:34px; color:#B3BFD1; }
.ap-pf-leeg-titel{ font-size:15px !important; font-weight:600 !important; color:#0C1F3F; }
.ap-pf-leeg-sub{ font-size:12.5px !important; color:#7A889E; margin-bottom:6px; }

/* ============================================================
   8. Mobiel
   ============================================================ */
@media (max-width:720px){
	.ap-profiel{ padding:20px 20px 40px; gap:16px; }
	.ap-pf-kolommen{ flex-direction:column; }
	.ap-pf-links, .ap-pf-rechts{ flex:1 1 auto; width:100%; }

	.ap-pf-cover{ height:150px; }
	.ap-pf-herorow{ align-items:flex-start; padding:0 16px 16px; gap:12px; flex-direction:column; }
	.ap-pf-logo{ flex-basis:64px; width:64px; height:64px; border-radius:14px; margin-top:8px; }
	.ap-pf-heromain{ flex-basis:auto; }
	.ap-pf-heroacties{ margin-left:0; width:100%; }
	.ap-pf-heroacties .ap-pf-btn{ flex:1 1 auto; height:44px; }
	.ap-pf-contactstrook{ grid-template-columns:1fr; }
	.ap-pf-aanbodgrid{ grid-template-columns:1fr; }
}