/* ============================================================
   AP Service & advies (?ap_page=contact) — 1-op-1 volgens OPDRACHT.
   Alle maten px; half-steps (13.5/12.5/11.5/10.5) en gewichten 450/550 met
   !important tegen de thema-forceerregels (woocommerce-page: font-size/weight +
   button-achtergrond blauw). Wrapper .ap-sa = <div>.
   ============================================================ */

.ap-content:has(.ap-sa){ background:#F5F7FB radial-gradient(900px 320px at 18% -8%, rgba(27,77,228,.045), transparent 70%) no-repeat !important; max-width:none !important; padding:calc(60px + 24px) 32px 44px !important; }

.ap-sa{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; white-space:normal; color:#0C1F3F; line-height:1.5; width:100%; }
.ap-sa, .ap-sa *{ box-sizing:border-box; }
.ap-sa img{ max-width:100%; display:block; }

/* Gedeelde kaartstijl */
.ap-sa-form, .ap-sa-hoe{ border-radius:14px; border:1px solid #E7EBF2; 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); overflow:hidden; }

/* ============================ KOPSECTIE ============================ */
.ap-sa-hero{ position:relative; overflow:hidden; padding:20px 24px; border-radius:14px; background:linear-gradient(115deg,#0B2447 0%,#102F5E 58%,#0D2750 100%); }
.ap-sa-hero::before{ content:""; position:absolute; top:-60%; right:-4%; width:460px; height:460px; background:radial-gradient(circle, rgba(60,110,220,.30) 0%, rgba(60,110,220,0) 62%); pointer-events:none; }
.ap-sa-hero__mark{ position:absolute; top:50%; right:0; transform:translateY(-50%); height:190px !important; width:auto !important; opacity:.045; -webkit-mask-image:linear-gradient(to left,#000 30%,transparent); mask-image:linear-gradient(to left,#000 30%,transparent); pointer-events:none; }
.ap-sa-hero__kicker{ position:relative; z-index:1; display:block; font-size:10.5px !important; font-weight:600 !important; letter-spacing:.11em; text-transform:uppercase; color:#7FA0DA !important; }
.ap-sa-hero__titel{ position:relative; z-index:1; font-size:21px !important; font-weight:600 !important; line-height:1.2 !important; color:#fff !important; margin:6px 0 6px; }
.ap-sa-hero__sub{ position:relative; z-index:1; font-size:13px !important; font-weight:400 !important; line-height:1.55 !important; color:#A9BDDD !important; margin:0; max-width:640px; }

/* ============================ KOLOMMEN ============================ */
.ap-sa-kolommen{ display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; margin-top:18px; }
.ap-sa-form{ flex:2 1 480px; min-width:0; display:flex; flex-direction:column; }
.ap-sa-zij{ flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:18px; }

/* ---- Formulier: kop ---- */
.ap-sa-form__kop{ padding:16px 20px 13px; border-bottom:1px solid #EEF1F7; }
.ap-sa-form__kop b{ display:block; font-size:13.5px !important; font-weight:600 !important; color:#0C1F3F !important; }
.ap-sa-form__kop span{ display:block; font-size:11.5px !important; font-weight:400 !important; color:#8B99AE !important; margin-top:3px; line-height:1.45; }

/* ---- Onderwerpkaarten ---- */
.ap-sa-onderwerpen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; padding:16px 20px; }
.ap-sa-onderwerp{ display:flex; align-items:center; gap:11px; min-height:52px; padding:10px 13px; border-radius:11px; border:1px solid #E2E7F0; background:#fff !important; text-align:left; cursor:pointer; transition:border-color .14s, background .14s; }
.ap-sa-onderwerp:hover{ border-color:#1B4DE4; background:#F5F8FE !important; }
.ap-sa-onderwerp__ic{ flex:0 0 34px; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:#F2F5FA; }
.ap-sa-onderwerp__ic i{ font-size:17px; color:#93A2B8; }
.ap-sa-onderwerp .ap-sa-ic-fill{ display:none; }
.ap-sa-onderwerp__tx{ min-width:0; }
.ap-sa-onderwerp__tx b{ display:block; font-size:12.5px !important; font-weight:500 !important; color:#0C1F3F !important; line-height:1.25; }
.ap-sa-onderwerp__tx span{ display:block; font-size:10.5px !important; font-weight:400 !important; color:#8B99AE !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-sa-onderwerp.is-actief{ border-color:#1B4DE4; background:#F2F6FE !important; }
.ap-sa-onderwerp.is-actief .ap-sa-onderwerp__ic{ background:#DCE7FD; }
.ap-sa-onderwerp.is-actief .ap-sa-ic-reg{ display:none; }
.ap-sa-onderwerp.is-actief .ap-sa-ic-fill{ display:inline-flex; }
.ap-sa-onderwerp.is-actief .ap-sa-onderwerp__ic i{ color:#1B4DE4; }
.ap-sa-onderwerp.is-actief .ap-sa-onderwerp__tx b{ font-weight:600 !important; }

/* ---- Velden ---- */
.ap-sa-form__velden{ display:flex; flex-direction:column; gap:14px; padding:2px 20px 18px; }
.ap-sa-veld{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.ap-sa-veld__label{ font-size:11.5px !important; font-weight:550 !important; color:#42536B !important; min-width:0; }
.ap-sa-veld__label--kort{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-sa .ap-sa-veld input, .ap-sa .ap-sa-veld select{ width:100% !important; height:38px; padding:0 12px; border-radius:10px; border:1px solid #DDE3ED !important; background:#fff !important; font-size:13px !important; font-weight:400 !important; color:#0C1F3F !important; font-family:inherit; }
.ap-sa .ap-sa-veld textarea{ width:100% !important; min-height:120px; padding:10px 12px; border-radius:10px; border:1px solid #DDE3ED !important; background:#fff !important; font-size:13px !important; font-weight:400 !important; color:#0C1F3F !important; font-family:inherit; line-height:1.5; resize:vertical; }
.ap-sa .ap-sa-veld input:focus, .ap-sa .ap-sa-veld select:focus, .ap-sa .ap-sa-veld textarea:focus{ outline:none; border-color:#1B4DE4 !important; }
.ap-sa .ap-sa-veld input::placeholder, .ap-sa .ap-sa-veld textarea::placeholder{ color:#93A2B8; }
.ap-sa-velden{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }

/* ---- Voet ---- */
.ap-sa-form__voet{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 20px; background:#FBFCFE; border-top:1px solid #EEF1F7; }
.ap-sa-form__voettx{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px !important; font-weight:400 !important; color:#8B99AE !important; }
.ap-sa-form__voettx i{ font-size:14px; }
.ap-sa-verstuur{ display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; height:38px; padding:0 17px; border-radius:10px; border:0; background:#1B4DE4 !important; color:#fff !important; font-size:12.5px !important; font-weight:600 !important; font-family:inherit; cursor:pointer; white-space:nowrap; transition:background .14s; }
.ap-sa-verstuur:hover{ background:#143BB0 !important; }
.ap-sa-verstuur i{ font-size:15px; }

/* ---- Bevestiging ---- */
.ap-sa-bevestiging{ display:none; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:52px 32px; }
.ap-sa-form[data-verzonden] > .ap-sa-form__kop,
.ap-sa-form[data-verzonden] > .ap-sa-onderwerpen,
.ap-sa-form[data-verzonden] > .ap-sa-form__velden,
.ap-sa-form[data-verzonden] > .ap-sa-form__voet{ display:none !important; }
.ap-sa-form[data-verzonden] > .ap-sa-bevestiging{ display:flex; }
.ap-sa-bevestiging__ic{ width:52px; height:52px; border-radius:50%; background:#E9F8EF; display:grid; place-items:center; }
.ap-sa-bevestiging__ic i{ font-size:24px; color:#2FA96B; }
.ap-sa-bevestiging__titel{ font-size:15px !important; font-weight:600 !important; color:#0C1F3F !important; }
.ap-sa-bevestiging__tekst{ font-size:12.5px !important; font-weight:400 !important; line-height:1.55 !important; color:#6B7A93 !important; max-width:44ch; margin:0; }
.ap-sa-opnieuw{ height:34px; padding:0 15px; border-radius:9px; border:1px solid #1B4DE4; background:transparent !important; color:#1B4DE4 !important; font-size:12.5px !important; font-weight:550 !important; font-family:inherit; cursor:pointer; transition:background .14s; }
.ap-sa-opnieuw:hover{ background:#F2F6FE !important; }

/* ============================ ZO WERKT HET ============================ */
.ap-sa-hoe__kop{ padding:16px 18px 12px; border-bottom:1px solid #EEF1F7; }
.ap-sa-hoe__kop b{ font-size:13.5px !important; font-weight:600 !important; color:#0C1F3F !important; }
.ap-sa-hoe__rij{ display:flex; gap:12px; padding:13px 18px; box-shadow:0 0 0 1px #F5F7FB; }
.ap-sa-hoe__nr{ flex:0 0 auto; font-size:11px !important; font-weight:600 !important; color:#1B4DE4 !important; }
.ap-sa-hoe__rij p{ margin:0; font-size:12px !important; font-weight:400 !important; line-height:1.55 !important; color:#42536B !important; }
.ap-sa-hoe__voet{ display:flex; align-items:center; gap:8px; padding:13px 18px; background:#FBFCFE; border-top:1px solid #EEF1F7; font-size:11.5px !important; font-weight:400 !important; color:#6B7A93 !important; }
.ap-sa-hoe__voet i{ font-size:14px; color:#2FA96B; flex:0 0 auto; }

/* ============================ DIRECT CONTACT ============================ */
.ap-sa-contact{ position:relative; overflow:hidden; border-radius:14px; padding:18px 20px; background:#0B2447; }
.ap-sa-contact::before{ content:""; position:absolute; top:-50%; right:-8%; width:360px; height:360px; background:radial-gradient(circle, rgba(60,110,220,.26) 0%, rgba(60,110,220,0) 62%); pointer-events:none; }
.ap-sa-contact__kicker{ position:relative; z-index:1; display:block; font-size:9.5px !important; font-weight:600 !important; letter-spacing:.16em; text-transform:uppercase; color:#7FA0DA !important; }
.ap-sa-contact__lead{ position:relative; z-index:1; font-size:13px !important; font-weight:400 !important; line-height:1.5 !important; color:#DCE7F8 !important; margin:8px 0 14px; }
.ap-sa-contact__rij{ position:relative; z-index:1; display:flex; align-items:center; gap:10px; font-size:12.5px !important; font-weight:550 !important; color:#fff !important; text-decoration:none; margin-top:9px; }
.ap-sa-contact__rij i{ font-size:15px; color:#9CC0FF; flex:0 0 auto; }
.ap-sa-contact__rij:hover{ color:#DCE7F8 !important; }

/* ============================ MOBIEL ============================ */
@media (max-width:720px){
	.ap-content:has(.ap-sa){ padding:calc(60px + 18px) 16px 40px !important; }
	main .ap-sa-kolommen{ flex-direction:column !important; }
	/* Flex-basis (480/320px) werd in kolom-richting een HOOGTE; met overflow:hidden
	   sneed dat de invulvelden af. Laat de kaarten op hun inhoud groeien. */
	main .ap-sa-form, main .ap-sa-zij{ flex:1 1 auto !important; }
	main .ap-sa-onderwerpen{ grid-template-columns:1fr !important; }
	main .ap-sa-velden{ grid-template-columns:1fr !important; }
	main .ap-sa-kolommen input, main .ap-sa-kolommen textarea{ min-height:46px; }
}

/* Hogere specificiteit tegen het thema (.woocommerce-page button{background:#1447e6!important}) */
.ap-sa .ap-sa-onderwerp{ background:#fff !important; }
.ap-sa .ap-sa-onderwerp:hover{ background:#F5F8FE !important; }
.ap-sa .ap-sa-onderwerp.is-actief{ background:#F2F6FE !important; }
.ap-sa .ap-sa-verstuur{ background:#1B4DE4 !important; }
.ap-sa .ap-sa-verstuur:hover{ background:#143BB0 !important; }
.ap-sa .ap-sa-opnieuw{ background:transparent !important; }
.ap-sa .ap-sa-opnieuw:hover{ background:#F2F6FE !important; }

/* Hero-tekst leesbaar (thema forceert h1-kleur) + onderwerp-subtekst volledig tonen */
.ap-sa .ap-sa-hero__titel{ color:#fff !important; }
.ap-sa .ap-sa-hero__kicker{ color:#9CC0FF !important; }
.ap-sa .ap-sa-onderwerp__tx span{ white-space:normal !important; overflow:visible; text-overflow:clip; color:#6B7A93 !important; line-height:1.3; }
/* AP-watermerk gecentreerd i.p.v. rechts */
.ap-sa .ap-sa-hero__mark{ left:50%; right:auto; top:50%; transform:translate(-50%,-50%); -webkit-mask-image:none; mask-image:none; }