/* =====================================================================
   mediums.nl — mobiele laag voor login- en accountpagina's
   (login.php, broncode_gratis-account-aanmaken.php)
   - enkel < 768px, enkel pagina's met het app-blok (.mn-login)
   - zet de oude desktopsecties ONDER het app-blok om naar de mobiele stijlgids
     (css/MOBIEL-STIJLGIDS.md). Geen tekst of PHP gewijzigd: enkel vormgeving.
   - 'html body:has(.mn-login)' + !important waar het thema inline styles of
     hoge specificiteit gebruikt (Open Sans/Montserrat, #7899cc-tekst, gobox-pijlen).
   Geladen via incl_css.php (enkel mediums.nl), na mobiel-2026.css.
   ===================================================================== */
@media (max-width:767px){

  /* ---------- 1. PAGINA: het app-grijs loopt door onder het app-blok ---------- */
  html body:has(.mn-login) #page_wrapper{background:#f4f6fa;}
  html body:has(.mn-login) .mn-login{padding-bottom:12px;}
  html body:has(.mn-login) #page_wrapper > section.hg_section{padding:0 14px 12px !important; background:transparent !important; box-shadow:none !important;}
  html body:has(.mn-login) #page_wrapper > section.hg_section::before,
  html body:has(.mn-login) #page_wrapper > section.hg_section::after{display:none !important;}
  html body:has(.mn-login) #page_wrapper > section.hg_section > .container{max-width:none !important; padding:0 !important;}
  html body:has(.mn-login) #page_wrapper > section.hg_section .row{margin-left:0 !important; margin-right:0 !important;}
  html body:has(.mn-login) #page_wrapper > section.hg_section [class*="col-"]{padding-left:0 !important; padding-right:0 !important;}
  html body:has(.mn-login) #page_wrapper > section.hg_section .latest_posts{margin:0 !important; padding:0 !important;}
  html body:has(.mn-login) #page_wrapper > section.hg_section .gutter-md{margin:0 !important;}
  html body:has(.mn-login) #page_wrapper > section.hg_section .gutter-md > [class*="col-"]{margin:0 !important;}

  /* ---------- 2. KAART: elke inhoudssectie = één witte kaart (zelfde als .mn-login__kaart) ---------- */
  html body:has(.mn-login) #page_wrapper > section.hg_section.bg-white > .container{padding:18px 16px 16px !important; 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);}
  /* korte introzin (gratis-account) staat los op het grijs, zonder kaart */
  html body:has(.mn-login) #page_wrapper > section.hg_section:not(.bg-white) > .container{padding:2px 2px 0 !important;}

  /* ---------- 3. LOPENDE TEKST (oude h3.m_title met span.fw-thin = tekstblok, geen kop) ---------- */
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra):has(.fw-thin),
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra):has(.tonenklein){margin:0 !important; padding:0 !important; font:400 15px/1.6 var(--mn-ui) !important; letter-spacing:0 !important; text-transform:none !important; color:var(--mn-tekst) !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) span,
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) p,
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) li,
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) td,
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) th{font-family:var(--mn-ui) !important; font-size:inherit; line-height:inherit; font-weight:400; color:var(--mn-tekst) !important; letter-spacing:0 !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) .fw-semibold,
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) strong{font-weight:700 !important; color:var(--mn-navy) !important;}
  html body:has(.mn-login) section.hg_section.bg-white p{margin:0 0 12px; font:400 15px/1.6 var(--mn-ui) !important; color:var(--mn-tekst) !important;}
  html body:has(.mn-login) section.hg_section.bg-white p b{font-weight:700; color:var(--mn-navy);}
  /* lege regel (<br><br>) = rustige alineawit, geen volle lege regel */
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) br + br,
  html body:has(.mn-login) section.hg_section.bg-white p br + br{content:""; display:block; height:0; margin-top:10px;}

  /* introzin boven de kaarten (gratis-account) */
  html body:has(.mn-login) #page_wrapper > section.hg_section:not(.bg-white) h3.m_title{font-size:14.5px !important; line-height:1.5 !important;}
  html body:has(.mn-login) #page_wrapper > section.hg_section:not(.bg-white) h3.m_title span{color:var(--mn-tekst-zacht) !important;}
  html body:has(.mn-login) #page_wrapper > section.hg_section:not(.bg-white) h3.m_title .fw-semibold{color:var(--mn-navy) !important;}

  /* ---------- 4. SUBKOPPEN in de lange tekst (<b> direct in het tekstblok) ---------- */
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) .fw-thin > b{display:block; margin:14px 0 6px !important; font:700 16.5px/1.3 var(--mn-ui) !important; color:var(--mn-navy) !important; letter-spacing:0 !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) .fw-thin > p + b,
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) .fw-thin > table + br + b{margin-top:20px !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) .fw-thin > b + br{display:none;}
  /* laatste <b> is een vetgedrukte slotzin, geen kop */
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) .fw-thin > b:last-of-type{display:inline; margin:0 !important; font-size:15px !important; line-height:1.6 !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) .fw-thin > b:last-of-type + br{display:inline;}

  /* ---------- 5. SECTIEKOP (h3.m_title zonder tekstblok, bv. 'Problemen met inloggen?') ---------- */
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra):not(:has(.fw-thin)):not(:has(.tonenklein)){margin:20px 0 10px !important; padding:0 !important; font:700 19px/1.25 var(--mn-ui) !important; letter-spacing:0 !important; text-transform:none !important; color:var(--mn-navy) !important;}
  html body:has(.mn-login) section.hg_section .col-md-12:first-child > h3.m_title:first-child:not(:has(.fw-thin)){margin-top:0 !important;}

  /* sectielabel met icoon (oude .kl-title-block 'ADVIES - VERKRIJG DIRECTE ANTWOORDEN') */
  html body:has(.mn-login) #page_wrapper section.hg_section div.kl-title-block{display:block; margin:0 0 12px !important; padding:0 !important;}
  html body:has(.mn-login) section.hg_section .kl-title-block .tbk__title{display:flex; align-items:center; gap:10px; margin:0 !important; font:700 12px/1.3 var(--mn-ui) !important; letter-spacing:.06em !important; text-transform:uppercase; color:var(--mn-diepblauw) !important;}
  html body:has(.mn-login) section.hg_section .kl-title-block .tbk__title img{flex:0 0 auto; width:auto !important; height:28px !important; margin:0 !important;}
  html body:has(.mn-login) section.hg_section .kl-title-block .tbk__title b{margin:0 !important; font:inherit !important; color:inherit !important;}
  html body:has(.mn-login) section.hg_section .kl-title-block .tbk__symbol{display:none !important;}

  /* ---------- 6. LINKS: diepblauw, niet onderstreept, kleur verandert bij tik ---------- */
  html body:has(.mn-login) section.hg_section .container a:not(.step_link){color:var(--mn-diepblauw) !important; font-weight:700 !important; text-decoration:none !important;}
  html body:has(.mn-login) section.hg_section .container a:not(.step_link):active{color:var(--mn-navy) !important;}

  /* ---------- 7. OPSOMMING ---------- */
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) ul{list-style:none; margin:4px 0 6px !important; padding:0 !important; display:grid; gap:6px;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) li{position:relative; margin:0 !important; padding-left:18px !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) li::before{content:""; position:absolute; left:3px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--mn-blauw);}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) li > br:first-child{display:none;}

  /* ---------- 8. TABEL CREDITPAKKETTEN: lijst met rijen (bedrag links, credits + minuten rechts) ---------- */
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) table{display:block; width:100% !important; margin:10px 0 16px !important; border:1px solid var(--mn-rand) !important; border-radius:14px; overflow:hidden; background:#fff; border-collapse:separate;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) thead{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody{display:block;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) table + br{display:none;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody tr{display:grid; grid-template-columns:72px 1fr auto; align-items:baseline; column-gap:12px; row-gap:2px; padding:11px 14px; border-top:1px solid var(--mn-rand); background:#fff;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody tr:first-child{border-top:0;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td{display:block; padding:0 !important; border:0 !important; background:none !important; white-space:nowrap;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(1){grid-column:1; grid-row:1 / span 2; align-self:center; font-size:19px !important; font-weight:700 !important; line-height:1 !important; color:var(--mn-navy) !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(2){grid-column:2 / span 2; grid-row:1; justify-self:end; font-size:15px !important; font-weight:700 !important; line-height:1.3 !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(3){grid-column:2; grid-row:2; justify-self:end;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(4){grid-column:3; grid-row:2; justify-self:end;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(3),
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(4){font-size:13px !important; line-height:1.3 !important; color:var(--mn-tekst-zacht) !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(3)::before,
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(4)::before{font-family:"Font Awesome 5 Free"; font-weight:900; font-size:11px; margin-right:5px; color:var(--mn-blauw);}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(3)::before{content:"\f095";} /* telefoon = kolom 'Bellen' */
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) tbody td:nth-child(4)::before{content:"\f075";} /* ballon = kolom 'Chatten' */

  /* ---------- 9. ACTIELIJST (oude .gobox-stappen 'Problemen met inloggen?') ---------- */
  html body:has(.mn-login) section.hg_section .row.gutter-md{display:block; border:1px solid var(--mn-rand); border-radius:14px; overflow:hidden; background:#fff;}
  html body:has(.mn-login) section.hg_section .gobox{position:relative; min-height:0 !important; margin:0 !important; padding:13px 40px 13px 60px !important; border:0; border-top:1px solid var(--mn-rand); border-radius:0 !important; background:#fff !important; box-shadow:none !important; color:var(--mn-tekst) !important;}
  html body:has(.mn-login) section.hg_section .gutter-md > [class*="col-"]:first-child .gobox{border-top:0;}
  html body:has(.mn-login) section.hg_section .gobox.ok{background:var(--mn-blauw-licht) !important;}
  html body:has(.mn-login) section.hg_section .gobox::before{content:"\f590"; display:block !important; position:absolute; left:14px; top:14px; width:34px; height:34px; border:0 !important; border-radius:50%; background:var(--mn-blauw-licht) !important; font:900 14px/34px "Font Awesome 5 Free"; text-align:center; color:var(--mn-diepblauw); transform:none !important;}
  html body:has(.mn-login) section.hg_section .gutter-md > [class*="col-"]:nth-child(2) .gobox::before{content:"\f084";}
  html body:has(.mn-login) section.hg_section .gobox.ok::before{content:"\f234"; background:#fff !important;}
  html body:has(.mn-login) section.hg_section .gobox::after{content:"\f054"; display:block !important; position:absolute; left:auto; right:14px; top:50%; width:auto; height:auto; margin-top:-8px; border:0 !important; background:none !important; font:900 12px/16px "Font Awesome 5 Free"; color:var(--mn-blauw); transform:none !important;}
  html body:has(.mn-login) section.hg_section .gobox > .far{display:none !important;}
  html body:has(.mn-login) section.hg_section .gobox-content{margin:0 !important; padding:0 !important;}
  html body:has(.mn-login) section.hg_section .gobox h4{margin:0 0 2px !important; font:700 15px/1.3 var(--mn-ui) !important; letter-spacing:0 !important; text-transform:lowercase !important; color:var(--mn-navy) !important;}
  html body:has(.mn-login) section.hg_section .gobox h4::first-letter{text-transform:uppercase;}
  html body:has(.mn-login) section.hg_section .gobox p{margin:0 !important; font:400 13.5px/1.45 var(--mn-ui) !important; color:var(--mn-tekst-zacht) !important;}
  html body:has(.mn-login) section.hg_section .gobox p b{display:inline-block; margin-top:4px; font:700 13px/1.3 var(--mn-ui) !important; text-transform:lowercase; color:var(--mn-diepblauw) !important;}
  html body:has(.mn-login) section.hg_section .gobox p b::first-letter{text-transform:uppercase;}
  html body:has(.mn-login) section.hg_section .gobox .step_link{position:absolute !important; inset:0 !important; width:auto !important; height:auto !important; z-index:2;}
  html body:has(.mn-login) section.hg_section .gobox:active{background:#f4f6fa !important;}
  html body:has(.mn-login) section.hg_section .gobox.ok:active{background:#dde7f6 !important;}

  /* ---------- 10. SLOTZIN loginpagina (h3.m_title > .tonenklein) ---------- */
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra):has(.tonenklein){margin:16px 0 0 !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) .tonenklein{display:block; padding:0 !important; color:var(--mn-tekst) !important;}
  html body:has(.mn-login) :is(section.hg_section h3.m_title, .mn-login__extra) .tonenklein > br:first-child{display:none;}
  html body:has(.mn-login) #page_wrapper > .tonenklein{display:none;} /* losse <br> tussen sectie en footer */

  /* ---------- 11. APP-BLOK: privacylink in het accountformulier kreeg themagrijs ---------- */
  html body:has(.mn-login) .mn-login__check a{color:var(--mn-diepblauw) !important; font-weight:700; text-decoration:none !important;}

  /* 2026-11-04: zichtbare H1 in het app-blok, dubbele info enkel op mobiel weg, reCAPTCHA-badge weg (vermelding staat onder het formulier, zoals Google vereist) */
  .mn-login__titel{margin:2px 2px 12px; font:700 20px/1.25 var(--mn-ui); color:var(--mn-navy); letter-spacing:-.01em;}
  .mn-login__recaptcha{margin:10px 0 0; font:400 11.5px/1.4 var(--mn-ui); color:#6b7280;}
  .mn-login__recaptcha a{color:var(--mn-diepblauw);}

  /* 2026-11-04: uitleg verhuist naar de tabs; secties die daardoor leeg worden verdwijnen, de rest (stappen, enz.) blijft */
  html body:has(.mn-login) #page_wrapper > section.hg_section.mn-leeg{display:none !important;} /* enkel secties die leeg zijn na het verplaatsen */
  .mn-login__extra{margin-top:18px; padding-top:16px; border-top:1px solid var(--mn-rand); font:400 15px/1.55 var(--mn-ui); color:var(--mn-tekst);}
  .mn-login__extra:empty{display:none;}
  html body #mn-login .mn-login__kaart > .mn-login__extra{margin:20px 0 0 !important; padding:18px 0 0 !important; border-top:1px solid var(--mn-rand) !important;}
  .mn-login__extra p{margin:0 0 12px;}
  .mn-login__extra b, .mn-login__extra strong{color:var(--mn-navy);}
  .mn-login__extra > span > b:first-child, .mn-login__extra br + b{display:block; margin:14px 0 6px; font-size:16px;}
  .mn-login__extra ul{padding-left:0; list-style:none; margin:0 0 12px;}
  .mn-login__extra + .mn-login__knop{margin-top:14px;}

  /* wachtwoord resetten: losse tekst (niet in h3) in de secties eronder ook als lopende tekst */
  html body:has(.mn-ww) #page_wrapper > section.hg_section .latest_posts{font:400 15px/1.6 var(--mn-ui) !important; color:var(--mn-tekst) !important;}
}

/* reCAPTCHA-badge verbergen enkel waar de verplichte vermelding zichtbaar is (mobiel app-blok) */
@media (max-width:767px){ body:has(.mn-login__recaptcha) .grecaptcha-badge{visibility:hidden !important;} }