/* =====================================================================
   mediums.nl — mobiele laag CHATPAGINA (chatten-mediums) met tabs
   'Chat nu | Zo werkt het | Vragen' uit incl_chattabs_mobiel.php (.mct)
   - enkel < 768px; enkel pagina's met .mct
   - volgt css/MOBIEL-STIJLGIDS.md; geen tekst, PHP of JS gewijzigd
   - 'html body:has(.mct)' + !important waar thema / mediums-faq.css /
     inline styles winnen
   ===================================================================== */
@media (max-width:767px){

  /* ---------- 1. BASIS: één lettertype, app-grijs achter de info-tabs ---------- */
  html body:has(.mct) .mct,
  html body:has(.mct) .mct :not(.fas):not(.far):not(.fab):not(.fa):not(svg):not(svg *){font-family:var(--mn-ui) !important; letter-spacing:0;}
  html body:has(.mct) .mct-balk{background:rgba(244,246,250,.95) !important;}
  html body:has(.mct) .mct-pane-info,
  html body:has(.mct) .mct-pane-vragen{padding:4px 14px 20px !important; background:#f4f6fa;}
  html body:has(.mct) #mct .mct-pane-info > section.hg_section,
  html body:has(.mct) #mct .mct-pane-vragen > section.hg_section{padding:12px 0 0 !important;}
  html body:has(.mct) :is(.mct-pane-info, .mct-pane-vragen) .container{max-width:none !important; padding:0 !important;}
  html body:has(.mct) :is(.mct-pane-info, .mct-pane-vragen) .row{margin-left:0 !important; margin-right:0 !important;}
  html body:has(.mct) :is(.mct-pane-info, .mct-pane-vragen) [class*="col-"]{padding-left:0 !important; padding-right:0 !important;}
  html body:has(.mct) .mct-pane-info .container > br,
  html body:has(.mct) .mct-pane-info section > br{display:none;}

  /* ---------- 2. TABS (segment-control volgens de gids) ---------- */
  html body:has(.mct) .mct-tabs{background:#e8edf5 !important;}
  html body:has(.mct) .mct-tab{min-height:40px !important; border-radius:11px !important; font-size:13.5px !important; color:#56667c !important;}
  html body:has(.mct) .mct-tab[aria-selected="true"]{color:var(--mn-navy) !important; box-shadow:0 1px 3px rgba(28,58,94,.16) !important;}
  html body:has(.mct) .mct-teller{background:var(--mn-diepblauw) !important;}
  html body:has(.mct) .mct-tab[aria-selected="true"] .mct-teller{background:#ffb511 !important;}

  /* ---------- 3. CHAT NU: kop en uitleg boven de kaartjes ---------- */
  html body:has(.mct) .mct-pane-chat .callout-banner h2.m_title{margin:4px 0 8px !important; font-size:18px !important; line-height:1.3 !important; font-weight:700 !important; text-transform:none !important; color:var(--mn-navy) !important;}
  html body:has(.mct) .mct-pane-chat .callout-banner h2.m_title .fw-semibold{font-weight:700 !important; color:var(--mn-diepblauw) !important;}
  html body:has(.mct) .mct-pane-chat .mkw-uitleg{font-size:13px !important; line-height:1.45 !important; color:var(--mn-tekst-zacht) !important;}
  /* secundaire knop onder de lijst */
  html body:has(.mct) .mct-naarinfo{min-height:46px !important; margin-top:10px !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(.mct) .mct-naarinfo:active{background:#dde7f6 !important;}

  /* ---------- 4. ZO WERKT HET: titel ---------- */
  html body:has(.mct) .mct-pane-info .kl-title-block{margin:0 0 4px !important; padding:0 !important;}
  html body:has(.mct) .mct-pane-info h1.tbk__title{display:block !important; margin:0 !important; font-size:12px !important; line-height:1.3 !important; font-weight:700 !important; letter-spacing:.06em !important; text-transform:uppercase; color:var(--mn-diepblauw) !important;}
  html body:has(.mct) .mct-pane-info h1.tbk__title b{display:inline !important; margin:0 !important; font:inherit !important; color:inherit !important;}
  html body:has(.mct) .mct-pane-info section:has(.credits-grid) .latest_posts h2{margin:0 0 12px !important; font-size:22px !important; line-height:1.2 !important; font-weight:700 !important; text-transform:none !important; color:var(--mn-navy) !important;}

  /* ---------- 5. CREDITPAKKETTEN: één lijst, bedrag links, credits rechts ---------- */
  html body:has(.mct) .mct-pane-info .credits-grid{position:relative; display:block !important; margin:0 0 4px !important; padding:0 0 60px !important;}
  html body:has(.mct) .mct-pane-info .credits-grid > .credits-card{position:static !important; overflow:visible !important; display:grid !important; grid-template-columns:78px minmax(0,1fr); column-gap:12px; row-gap:2px; align-items:center; min-height:0 !important; margin:0 !important; padding:11px 14px !important; background:#fff !important; border:1px solid rgba(28,58,94,.08) !important; border-top:0 !important; border-radius:0 !important; box-shadow:none !important;}
  html body:has(.mct) .mct-pane-info .credits-grid > .credits-card:first-child{border-top:1px solid rgba(28,58,94,.08) !important; border-radius:16px 16px 0 0 !important;}
  html body:has(.mct) .mct-pane-info .credits-grid > .credits-card:last-child{border-radius:0 0 16px 16px !important; box-shadow:0 8px 20px -14px rgba(22,50,79,.25) !important;}
  html body:has(.mct) .mct-pane-info .credits-grid > .credits-card + .credits-card{border-top:1px solid var(--mn-rand) !important;}
  html body:has(.mct) .mct-pane-info .credits-grid > .credits-card::before,
  html body:has(.mct) .mct-pane-info .credits-grid > .credits-card::after{display:none !important;}
  html body:has(.mct) .mct-pane-info .credits-price{display:block !important; white-space:nowrap; grid-column:1; grid-row:1 / span 2; margin:0 !important; font-size:19px !important; line-height:1.1 !important; font-weight:700 !important; color:var(--mn-navy) !important;}
  html body:has(.mct) .mct-pane-info .credits-price span{display:block; margin-top:2px; font-size:11.5px !important; font-weight:400 !important; color:var(--mn-tekst-zacht) !important;}
  html body:has(.mct) .mct-pane-info .credits{grid-column:2; margin:0 !important; font-size:14.5px !important; line-height:1.35 !important; font-weight:700 !important; color:var(--mn-tekst) !important;}
  html body:has(.mct) .mct-pane-info .credits-meta{grid-column:2; margin:0 !important; font-size:13px !important; line-height:1.35 !important; color:var(--mn-tekst-zacht) !important;}
  html body:has(.mct) .mct-pane-info .credits-grid > .credits-card form{display:none !important;} /* lege formulieren (enkel een verborgen veld) gaven 15px witruimte */
  /* de knop zit in het eerste pakket; op mobiel onder de hele lijst */
  html body:has(.mct) .mct-pane-info .credits-btn{position:absolute !important; left:0; right:0; bottom:0; display:flex !important; align-items:center; justify-content:center; min-height:48px; margin:0 !important; padding:0 14px !important; border:0 !important; border-radius:12px !important; background:var(--mn-navy) !important; color:#fff !important; font-size:14px !important; font-weight:700 !important; text-decoration:none !important; box-shadow:0 8px 18px -12px rgba(28,58,94,.8) !important;}

  /* ---------- 6. STAPPENPLAN + UITLEG: één kaart ---------- */
  html body:has(.mct) .mct-pane-info section:has(.credits-grid) .latest_posts > .row > [class*="col-"] > b{display:block !important; margin:20px 2px 0 !important; font-size:16.5px !important; line-height:1.3 !important; font-weight:700 !important; color:var(--mn-navy) !important;}
  html body:has(.mct) .mct-pane-info section:has(.latest_posts .post) > .container{padding: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); font-size:15px !important; line-height:1.6 !important; color:var(--mn-tekst) !important;}
  /* stappen = lijstblok binnen de kaart (rand, geen schaduw) */
  html body:has(.mct) .mct-pane-info section:has(.latest_posts .post) .latest_posts > .row{display:block !important; margin:0 0 14px !important; overflow:hidden; border:1px solid var(--mn-rand); border-radius:14px;}
  html body:has(.mct) .mct-pane-info .latest_posts .post{min-height:0 !important; margin:0 !important; padding:11px 36px 11px 12px !important; border:0 !important; border-top:1px solid var(--mn-rand) !important; border-radius:0 !important; box-shadow:none !important; grid-template-columns:48px minmax(0,1fr) !important;}
  html body:has(.mct) .mct-pane-info .latest_posts .post:first-child{border-top:0 !important;}
  html body:has(.mct) .mct-pane-info .latest_posts .post .hoverBorderWrapper img{width:48px !important; height:48px !important;}
  html body:has(.mct) .mct-pane-info .latest_posts .post .hoverBorder h6{font-size:15px !important; color:var(--mn-navy) !important;}
  html body:has(.mct) .mct-pane-info .latest_posts .post em{font-size:13px !important; line-height:1.4 !important; color:var(--mn-tekst-zacht) !important;}
  html body:has(.mct) .mct-pane-info .latest_posts .post::after{border-color:var(--mn-blauw) !important;}
  html body:has(.mct) .mct-pane-info .latest_posts .post:active{background:#f4f6fa !important;}

  /* ---------- 7. ACCOUNT-BLOK: info-vlak met één knop ---------- */
  html body:has(.mct) .mct-pane-info section:has(.tbk__subtitle) > .container{padding:16px !important; background:var(--mn-blauw-licht); border-radius:16px;}
  html body:has(.mct) .mct-pane-info section:has(.tbk__subtitle) .kl-title-block{margin:0 0 12px !important;}
  html body:has(.mct) .mct-pane-info section:has(.tbk__subtitle) h3.tbk__title{margin:0 0 6px !important; font-size:17px !important; line-height:1.3 !important; font-weight:700 !important; text-transform:lowercase !important; color:var(--mn-navy) !important;}
  html body:has(.mct) .mct-pane-info section:has(.tbk__subtitle) h3.tbk__title::first-letter{text-transform:uppercase;}
  html body:has(.mct) .mct-pane-info .tbk__subtitle{margin:0 !important; font-size:14.5px !important; line-height:1.5 !important; font-weight:400 !important; color:var(--mn-tekst) !important;}
  html body:has(.mct) .mct-pane-info .tbk__subtitle .fw-semibold{font-weight:700 !important; color:var(--mn-navy) !important;}
  html body:has(.mct) .mct-pane-info section:has(.tbk__subtitle) .btn-element{display:flex !important; align-items:center; justify-content:center; width:100% !important; min-height:48px; margin:0 !important; padding:0 14px !important; border:0 !important; border-radius:12px !important; background:var(--mn-navy) !important; box-shadow:none !important; transform:none !important;}
  html body:has(.mct) .mct-pane-info section:has(.tbk__subtitle) .btn-element span{font-size:14px !important; font-weight:700 !important; letter-spacing:.04em !important; color:#fff !important; transform:none !important;}
  html body:has(.mct) .mct-pane-info section:has(.tbk__subtitle) .btn-element::before,
  html body:has(.mct) .mct-pane-info section:has(.tbk__subtitle) .btn-element::after{display:none !important;}

  /* ---------- 8. VRAGEN: kop, intro, één FAQ-lijst ---------- */
  html body:has(.mct) .mct-pane-vragen .kl-title-block{margin:0 0 10px !important; padding:0 !important;}
  html body:has(.mct) .mct-pane-vragen .mediums-faq-kicker{display:block !important; margin:0 0 4px !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(.mct) .mct-pane-vragen h2.mediums-faq-section-title{display:block !important; margin:0 !important; font-size:22px !important; line-height:1.2 !important; font-weight:700 !important; color:var(--mn-navy) !important;}
  html body:has(.mct) .mct-pane-vragen h2.mediums-faq-section-title span{font:inherit !important; color:inherit !important;}
  html body:has(.mct) .mct-pane-vragen .mediums-faq-icon,
  html body:has(.mct) .mct-pane-vragen .tbk__symbol{display:none !important;}
  html body:has(.mct) .mct-pane-vragen .mediums-faq-intro{margin:0 0 14px !important; padding: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);}
  html body:has(.mct) .mct-pane-vragen .mediums-faq-intro p{margin:0 0 10px !important; font-size:15px !important; line-height:1.6 !important; color:var(--mn-tekst) !important;}
  html body:has(.mct) .mct-pane-vragen .mediums-faq-intro p:last-child{margin:0 !important;}
  html body:has(.mct) .mct-pane-vragen .faq-accordion{gap:0 !important; margin:0 !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(.mct) .mct-pane-vragen .faq-accordion details{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(.mct) .mct-pane-vragen .faq-accordion details:first-child{border-top:0 !important;}
  html body:has(.mct) .mct-pane-vragen .faq-accordion summary{min-height:52px; padding:14px 52px 14px 16px !important; font-size:15px !important; line-height:1.35 !important; font-weight:700 !important; color:var(--mn-navy) !important;}
  html body:has(.mct) .mct-pane-vragen .faq-accordion summary::after{background:var(--mn-blauw-licht) !important; color:var(--mn-diepblauw) !important;}
  html body:has(.mct) .mct-pane-vragen .faq-accordion details[open] summary{padding-bottom:6px !important;}
  html body:has(.mct) .mct-pane-vragen .faq-antwoord{padding:0 16px 16px !important; background:none !important;}
  html body:has(.mct) .mct-pane-vragen .faq-antwoord p{font-size:15px !important; line-height:1.6 !important; color:var(--mn-tekst) !important;}
  html body:has(.mct) .mct-pane-vragen .faq-antwoord p + p{margin-top:10px !important;}
  html body:has(.mct) .mct-pane-vragen .faq-antwoord a{font-weight:700; text-decoration:none !important; color:var(--mn-diepblauw) !important;}
}