/* =====================================================================
   mediums.nl — mobiele laag PROFIELPAGINA van een medium (/medium/Naam)
   - enkel < 768px; enkel pagina's met de app-tabs (#mkwt)
   - volgt css/MOBIEL-STIJLGIDS.md: Arial/system-ui, navy koppen, donkere
     tekst, grijze app-achtergrond met witte kaarten, één lijstblok per lijst
   - geen tekst, PHP of JS gewijzigd: enkel vormgeving
   - 'html body:has(#mkwt)' + !important waar de inline <style>-blokken uit
     consulent_code.php / ajaxmediums-callchat.php of thema-inline-styles winnen
   Om te activeren: achteraan in css/mobiel-2026.css plakken, of als laatste laden.
   ===================================================================== */
@media (max-width:767px){

  /* ---------- 1. PAGINA: app-grijs, 14px goot, één lettertype ---------- */
  html body:has(#mkwt) #page_wrapper{background:#f4f6fa;}
  html body:has(#mkwt) .mkw-prof{margin:6px 14px 0 !important;}
  html body:has(#mkwt) #mkwt{margin:14px 14px 0 !important;}
  html body:has(#mkwt) :is(.mkw-prof, #mkwt, .mkwt-plaatsonder, .mkwp-balk),
  html body:has(#mkwt) :is(.mkw-prof, #mkwt, .mkwp-balk) :not(.fas):not(.far):not(.fab):not(.fa):not(svg):not(svg *){font-family:var(--mn-ui) !important; letter-spacing:0;}
  /* thema-padding (.pt-40, .pt-20 …) binnen de tabs weg: gaf 40px leegte boven de getuigenissen */
  html body:has(#mkwt) #mkwt section,
  html body:has(#mkwt) #mkwt .row[class*="pt-"]{padding-top:0 !important; padding-bottom:0 !important;}

  /* ---------- 2. PROFIELKAART (#mkwp) ---------- */
  html body:has(#mkwt) .mkwp-terug{min-height:40px; margin:0 0 4px !important; font-size:14px !important; font-weight:700 !important; color:var(--mn-navy) !important;}
  html body:has(#mkwt) .mkwp{padding:16px 16px 14px !important; border-radius:16px !important; border:1px solid rgba(28,58,94,.08) !important; box-shadow:0 1px 2px rgba(22,50,79,.04),0 8px 20px -14px rgba(22,50,79,.25) !important;}
  html body:has(#mkwt) .mkwp-kop{align-items:flex-start !important; gap:14px !important;}
  html body:has(#mkwt) .mkwp-av{flex:0 0 80px !important; width:80px !important; height:80px !important;}
  html body:has(#mkwt) .mkwp-id{gap:4px !important; padding-top:2px;}
  /* naam nooit afkappen: naam + hartje op rij 1, PIN eronder (rij 2) */
  html body:has(#mkwt) .mkwp-naamrij{display:grid !important; grid-template-columns:minmax(0,1fr) 40px; column-gap:8px; row-gap:6px; align-items:start !important;}
  html body:has(#mkwt) .mkwp-rechts{display:contents !important;}
  html body:has(#mkwt) .mkwp-naam{grid-column:1; grid-row:1; align-self:center; overflow:visible !important; white-space:normal !important; text-overflow:clip !important; overflow-wrap:anywhere; font-size:20px !important; line-height:1.2 !important; font-weight:700 !important; color:var(--mn-navy) !important;}
  html body:has(#mkwt) .mkwp-favo{grid-column:2; grid-row:1; width:40px !important; height:40px !important; flex-basis:40px !important; color:var(--mn-diepblauw) !important; border-color:rgba(28,58,94,.14) !important;}
  html body:has(#mkwt) .mkwp-favo.mkwp-favo-aan{color:#c71926 !important;}
  html body:has(#mkwt) .mkwp-naamrij .mkw-pin{grid-column:1 / span 2; grid-row:2; justify-self:start; padding:3px 10px !important; border-radius:999px; font-size:12px !important; line-height:1.3 !important; background:var(--mn-blauw-licht) !important; color:var(--mn-navy) !important;}
  html body:has(#mkwt) .mkwp-type{font-size:13px !important; line-height:1.35; color:var(--mn-tekst-zacht) !important;}
  html body:has(#mkwt) .mkwp-st{font-size:13px !important;}
  html body:has(#mkwt) .mkwp-score{min-height:24px; font-size:13px !important; color:var(--mn-tekst) !important;}
  html body:has(#mkwt) .mkwp-score b{color:var(--mn-navy);}
  html body:has(#mkwt) .mkwp-score u{text-decoration:none !important; font-weight:700; color:var(--mn-diepblauw) !important;}

  /* actiedeel */
  html body:has(#mkwt) .mkwp-cta{gap:10px !important; margin-top:14px !important; padding-top:14px !important; border-top-color:var(--mn-rand) !important;}
  html body:has(#mkwt) .mkwp-cta-kop{font-size:16px !important; line-height:1.3; color:var(--mn-navy) !important;}
  html body:has(#mkwt) .mkwp-niet{font-size:14.5px !important; line-height:1.5 !important; color:var(--mn-tekst) !important;}
  html body:has(#mkwt) .mkwp .mkw-btn{min-height:48px !important; border-radius:12px !important; font-size:14px !important; font-weight:700 !important;}
  /* belknoppen: BE lichtblauw #799bd0, NL oranjegeel #ffb511 (eigenaarsbeslissing, zoals zoekmediumsmobiel) */
  html body:has(#mkwt) .mkwp-bel a[href^="tel:"].mkw-licht{background:#799bd0 !important; border-color:#799bd0 !important; color:#fff !important; box-shadow:0 4px 10px -6px rgba(45,95,148,.55) !important;}
  html body:has(#mkwt) .mkwp-bel a[href^="tel:"].mkw-licht svg{color:#fff !important;}
  html body:has(#mkwt) .mkwp-bel a[href^="tel:"].mkw-hoofd{background:#ffb511 !important; border-color:#ffb511 !important; color:#fff !important;}
  html body:has(#mkwt) .mkwp-pinuitleg{font-size:13px !important; color:var(--mn-tekst-zacht) !important;}
  html body:has(#mkwt) .mkwp-pinuitleg b{color:var(--mn-navy) !important;}
  html body:has(#mkwt) .mkwp-sublink{font-weight:700; text-decoration:none !important; color:var(--mn-diepblauw) !important;}

  /* drie kerncijfers */
  html body:has(#mkwt) .mkwp-feiten{margin-top:14px !important; padding-top:12px !important; border-top-color:var(--mn-rand) !important;}
  html body:has(#mkwt) .mkwp-feit + .mkwp-feit{border-left-color:var(--mn-rand) !important;}
  html body:has(#mkwt) .mkwp-feit b{font-size:16px !important; color:var(--mn-navy) !important;}
  html body:has(#mkwt) .mkwp-feit span{font-size:12px !important; color:var(--mn-tekst-zacht) !important;}

  /* ---------- 3. TABS (segment-control, zoals .mn-login__tabs) ---------- */
  html body:has(#mkwt) .mkwt-tabs{background:#e8edf5 !important; border-radius:14px !important; padding:4px !important; gap:4px !important;}
  html body:has(#mkwt) .mkwt-tab{min-height:40px !important; border-radius:11px !important; font-size:13.5px !important; font-weight:700 !important; color:#56667c !important;}
  html body:has(#mkwt) .mkwt-tab[aria-selected="true"]{background:#fff !important; color:var(--mn-navy) !important; box-shadow:0 1px 3px rgba(28,58,94,.16) !important;}
  html body:has(#mkwt) .mkwt-pane{padding-top:4px !important;}

  /* ---------- 4. KOPPEN EN KAARTEN ---------- */
  html body:has(#mkwt) .mkwt-titel{margin:20px 2px 10px !important; font-size:19px !important; line-height:1.25 !important; font-weight:700 !important; color:var(--mn-navy) !important;}
  html body:has(#mkwt) .mkwt-pane > .mkwt-titel:first-child{margin-top:14px !important;}
  html body:has(#mkwt) .mkwt-kaart{margin:0 0 12px !important; padding:16px !important; border-radius:16px !important; border:1px solid rgba(28,58,94,.08) !important; box-shadow:0 1px 2px rgba(22,50,79,.04),0 8px 20px -14px rgba(22,50,79,.25) !important;}

  /* bio: lopende tekst, eerste/laatste zin (fw-semibold) = nadruk */
  html body:has(#mkwt) .mkwt-bio h3.m_title, html body:has(#mkwt) .mkwt-bio h3.m_title *{font-size:15px !important; line-height:1.6 !important; color:var(--mn-tekst) !important;}
  html body:has(#mkwt) .mkwt-bio h3.m_title .fw-semibold{font-weight:700 !important; color:var(--mn-navy) !important;}
  html body:has(#mkwt) .mkwt-bio h3.m_title br + br{content:""; display:block; height:0; margin-top:10px;}
  html body:has(#mkwt) .mkwt-bio a{font-weight:700 !important; text-decoration:none !important; color:var(--mn-diepblauw) !important;}

  /* lange uitleg met 'lees verder' */
  html body:has(#mkwt) .mkwt-lees h2, html body:has(#mkwt) .mkwt-lees h3{font-size:16.5px !important; color:var(--mn-navy) !important;}
  html body:has(#mkwt) .mkwt-lees p, html body:has(#mkwt) .mkwt-lees li{color:var(--mn-tekst) !important;}

  /* ---------- 5. GOED OM TE WETEN: lijst met icoonrijen ---------- */
  html body:has(#mkwt) .mkwt-kaart.mkwt-weten{padding:2px 16px !important;}
  html body:has(#mkwt) .mkwt-weten .kl-iconbox.mkwt-w-rij{padding:12px 0 !important; border-top-color:var(--mn-rand) !important;}
  html body:has(#mkwt) .mkwt-weten .mkwt-w-rij .kl-iconbox__inner{grid-template-columns:34px minmax(0,1fr) !important;}
  html body:has(#mkwt) .mkwt-w-ico{width:34px !important; height:34px !important; border-radius:50% !important;}
  html body:has(#mkwt) .mkwt-w-ico:not(.mkwt-w-online):not(.mkwt-w-erkend):not(.mkwt-w-top){background:var(--mn-blauw-licht) !important; color:var(--mn-diepblauw) !important;}
  html body:has(#mkwt) .mkwt-weten .mkwt-w-rij .kl-iconbox__title, html body:has(#mkwt) .mkwt-weten .mkwt-w-rij .kl-iconbox__title a{font-size:15px !important; color:var(--mn-navy) !important; text-decoration:none !important;}
  html body:has(#mkwt) .mkwt-weten .mkwt-w-rij .kl-iconbox__desc{font-size:13.5px !important; line-height:1.45 !important; color:var(--mn-tekst-zacht) !important;}
  html body:has(#mkwt) .mkwt-weten .mkwt-w-rij .kl-iconbox__desc :is(b,strong){font-weight:700 !important; color:var(--mn-tekst) !important;}
  html body:has(#mkwt) .mkwt-weten .mkwt-w-rij .kl-iconbox__desc a{font-weight:700; text-decoration:none !important; color:var(--mn-diepblauw) !important;}

  /* ---------- 6. ZO WERKT …: uitklaprijen ---------- */
  html body:has(#mkwt) .mkwt-kaart.mkwt-eig{padding:0 !important; overflow:hidden;}
  html body:has(#mkwt) .mkwt-eig-item + .mkwt-eig-item{border-top-color:var(--mn-rand) !important;}
  html body:has(#mkwt) .mkwt-eig-kop{grid-template-columns:34px minmax(0,1fr) 14px !important; min-height:60px !important; padding:13px 16px !important;}
  html body:has(#mkwt) .mkwt-eig-ico{width:34px !important; height:34px !important; border-radius:50% !important; background:var(--mn-blauw-licht) !important; color:var(--mn-diepblauw) !important;}
  html body:has(#mkwt) .mkwt-eig-naam{font-size:15px !important; color:var(--mn-navy) !important;}
  html body:has(#mkwt) .mkwt-eig-lead{font-size:13.5px !important; line-height:1.45 !important; color:var(--mn-tekst-zacht) !important;}
  html body:has(#mkwt) .mkwt-eig-pijl{color:var(--mn-blauw) !important;}
  html body:has(#mkwt) .mkwt-eig-body{padding:0 16px 14px !important;}
  html body:has(#mkwt) .mkwt-eig-body :is(p,li,span){font-size:15px !important; line-height:1.6 !important; color:var(--mn-tekst) !important;}
  html body:has(#mkwt) .mkwt-eig-body :is(b,strong){font-weight:700 !important; color:var(--mn-navy) !important;}
  html body:has(#mkwt) .mkwt-eig-body :is(h2,h3,h4){margin:14px 0 6px !important; font-size:16.5px !important; line-height:1.3 !important; font-weight:700 !important; text-transform:none !important; color:var(--mn-navy) !important;}
  html body:has(#mkwt) .mkwt-eig-body a{font-weight:700; text-decoration:none !important; color:var(--mn-diepblauw) !important;}

  /* ---------- 7. KNOPPEN ---------- */
  /* secundair: blauw-licht vlak, navy tekst */
  html body:has(#mkwt) .mkwt-knop{min-height:46px !important; margin:10px 0 0 !important; border:0 !important; border-radius:12px !important; background:var(--mn-blauw-licht) !important; color:var(--mn-navy) !important; font-size:14px !important; font-weight:700 !important;}
  html body:has(#mkwt) .mkwt-knop:active{background:#dde7f6 !important;}
  /* primair: navy (één per scherm) */
  html body:has(#mkwt) .mkwt-knop.mkwt-knop-hoofd{min-height:48px !important; background:var(--mn-navy) !important; color:#fff !important; box-shadow:0 8px 18px -12px rgba(28,58,94,.8) !important;}
  html body:has(#mkwt) .mkwt-plaatsonder{margin:16px 14px 18px !important; min-height:48px !important; font-size:14px !important;}

  /* ---------- 8. GETUIGENISSEN ---------- */
  html body:has(#mkwt) .mkwt-kaart.mkwt-score{gap:14px !important; padding:14px 16px !important;}
  html body:has(#mkwt) .mkwt-score-cijfer{font-size:30px !important; color:var(--mn-navy) !important;}
  html body:has(#mkwt) .mkwt-score-tekst{font-size:13px !important; color:var(--mn-tekst-zacht) !important;}
  html body:has(#mkwt) .mkwt-score-tekst b{color:var(--mn-navy) !important;}
  html body:has(#mkwt) .mkwt-ervaringen .testimonials_simple__carousel-item{margin:0 0 10px !important; padding:16px !important; border-radius:16px !important; border:1px solid rgba(28,58,94,.08) !important; box-shadow:0 1px 2px rgba(22,50,79,.04),0 8px 20px -14px rgba(22,50,79,.25) !important;}
  html body:has(#mkwt) .mkwt-ervaringen blockquote{margin:0 !important; background:none !important; font-size:15px !important; line-height:1.6 !important; color:var(--mn-tekst) !important;}
  /* afzender = voetregel van de kaart */
  html body:has(#mkwt) .mkwt-ervaringen .testimonial-author{margin:12px 0 0 !important; padding:10px 0 0 !important; border-top:1px solid var(--mn-rand);}
  html body:has(#mkwt) .mkwt-ervaringen .testimonial-author h5{font-size:12.5px !important; line-height:1.5 !important; color:var(--mn-tekst-zacht) !important;}
  html body:has(#mkwt) .mkwt-ervaringen .testimonial-author h5 br{display:inline !important;} /* 'Getuigenis voor …' op een eigen regel */
  html body:has(#mkwt) .mkwt-ervaringen .testimonial-author h5 b{font-weight:700; color:var(--mn-navy) !important;}
  html body:has(#mkwt) .mkwt-ervaringen .testimonial-author h5 a{font-weight:700; text-decoration:none !important; color:var(--mn-diepblauw) !important;}
  /* sterren: zelfde goud als de score (thema zet inline #7899cc / #a3a3a3) */
  html body:has(#mkwt) .mkwt-ervaringen .testimonial-author .fa-star{font-size:10px !important; margin-right:1px; color:#f0a022 !important;}
  html body:has(#mkwt) .mkwt-ervaringen .testimonial-author .fa-star[style*="a3a3a3"]{color:#d6deea !important;}

  /* ---------- 9. MEER: één actielijst (zoals 'Problemen met inloggen?') ---------- */
  html body:has(#mkwt) #service + section .latest_posts > .row{display:block !important; overflow:hidden; background:#fff; border:1px solid rgba(28,58,94,.08); border-radius:16px; box-shadow:0 1px 2px rgba(22,50,79,.04),0 8px 20px -14px rgba(22,50,79,.25);}
  html body:has(#mkwt) #service + section .latest_posts .post{margin:0 !important; padding:11px 40px 11px 14px !important; border-radius:0 !important; border-top:1px solid var(--mn-rand) !important; box-shadow:none !important; grid-template-columns:48px minmax(0,1fr) !important; column-gap:12px !important; align-items:center;}
  html body:has(#mkwt) #service + section .latest_posts .post:first-child{border-top:0 !important;}
  html body:has(#mkwt) #service + section .latest_posts .post img{width:48px !important; height:48px !important; border-radius:12px !important; object-fit:cover;}
  html body:has(#mkwt) #service + section .latest_posts .hoverBorder h6{font-size:15px !important; color:var(--mn-navy) !important;}
  html body:has(#mkwt) #service + section .latest_posts .post em{font-size:13px !important; line-height:1.4 !important; color:var(--mn-tekst-zacht) !important;}
  html body:has(#mkwt) #service + section .latest_posts .post em a{font-weight:400; text-decoration:none !important; color:var(--mn-tekst-zacht) !important;}
  html body:has(#mkwt) #service + section .latest_posts .post::after{right:16px !important; border-color:var(--mn-blauw) !important;}
  html body:has(#mkwt) #service + section .latest_posts .post:active{background:#f4f6fa;}

  /* ---------- 10. FAQ (accordeon) ---------- */
  html body:has(#mkwt) .mediums-faq-heading{margin:22px 2px 10px !important; padding:0 !important;}
  html body:has(#mkwt) .mediums-faq-kicker{margin:0 0 6px !important; padding:0 !important; border:0 !important; background:none !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.06em !important; text-transform:uppercase; color:var(--mn-diepblauw) !important;}
  html body:has(#mkwt) .mediums-faq-heading h2{display:block !important; margin:0 !important; padding:0 !important; font-size:19px !important; line-height:1.25 !important; font-weight:700 !important; text-transform:none !important; color:var(--mn-navy) !important;}
  html body:has(#mkwt) .mediums-faq-icon{display:none !important;}
  html body:has(#mkwt) #mkwt .th-accordion{margin:0 !important; padding:0 !important; overflow:hidden; background:#fff !important; border:1px solid rgba(28,58,94,.08) !important; border-radius:16px !important; box-shadow:0 1px 2px rgba(22,50,79,.04),0 8px 20px -14px rgba(22,50,79,.25);}
  html body:has(#mkwt) #mkwt .th-accordion .acc-group{margin:0 !important; border:0 !important; border-top:1px solid var(--mn-rand) !important; border-radius:0 !important; box-shadow:none !important;}
  html body:has(#mkwt) #mkwt .th-accordion .acc-group:first-of-type{border-top:0 !important;}
  html body:has(#mkwt) #mkwt .th-accordion .acc-group > div > a{display:block; min-height:48px; padding:14px 48px 14px 16px !important; font-size:15px !important; line-height:1.35 !important; font-weight:700 !important; text-decoration:none !important; color:var(--mn-navy) !important;}
  html body:has(#mkwt) #mkwt .th-accordion .collapse,
  html body:has(#mkwt) #mkwt .th-accordion .collapsing{margin:0 !important;}
  html body:has(#mkwt) #mkwt .th-accordion .content{padding:0 16px 14px !important;}
  html body:has(#mkwt) #mkwt .th-accordion .content :is(p,li){font-size:15px !important; line-height:1.6 !important; color:var(--mn-tekst) !important;}
  html body:has(#mkwt) #mkwt .th-accordion .content a{font-weight:700; text-decoration:none !important; color:var(--mn-diepblauw) !important;}
  /* belnummers in een antwoord: rij met telefoonicoon (thema tekende een blauw vierkant) */
  html body:has(#mkwt) #mkwt .th-accordion .content a[href^="tel:"]{display:flex !important; align-items:center; gap:10px; min-height:40px; margin:2px 0 !important; padding:0 !important; font-size:15px !important;}
  html body:has(#mkwt) #mkwt .th-accordion .content a[href^="tel:"]::before{content:"\f095" !important; position:static !important; flex:0 0 30px; width:30px !important; height:30px !important; border-radius:50% !important; background:var(--mn-blauw-licht) !important; font:900 12px/30px "Font Awesome 5 Free" !important; text-align:center; color:var(--mn-diepblauw);}

  /* ---------- 11. VASTE ACTIEBALK ONDERAAN (.mkwp-balk) ---------- */
  html body:has(#mkwt) .mkwp-balk{padding:8px 12px calc(8px + env(safe-area-inset-bottom)) !important; background:rgba(255,255,255,.97) !important; border-top:1px solid var(--mn-rand); box-shadow:0 -8px 20px -14px rgba(22,50,79,.4) !important;}
  html body:has(#mkwt) .mkwp-balk .mkw{padding:0 !important; margin:0 !important;}
  html body:has(#mkwt) .mkwp-balk .mkw-top{align-items:center !important; gap:10px !important;}
  html body:has(#mkwt) .mkwp-balk .mkw-av{flex:0 0 36px !important; width:36px !important; height:36px !important; padding:2px !important;}
  html body:has(#mkwt) .mkwp-balk .mkw-naamrij{gap:8px !important;}
  html body:has(#mkwt) .mkwp-balk .mkw-naam{font-size:15px !important; color:var(--mn-navy) !important;}
  html body:has(#mkwt) .mkwp-balk .mkw-pin{padding:2px 8px !important; font-size:11.5px !important;}
  html body:has(#mkwt) .mkwp-balk .mkw-acties{margin-top:8px !important;}
  html body:has(#mkwt) .mkwp-balk .mkw-btn{min-height:42px !important; font-size:13.5px !important; font-weight:700 !important;}
  html body.mkwp-balk-aan:has(#mkwt){padding-bottom:112px !important;}
}