/* =====================================================
   TELENET.BE MATCH
   - Hero background uses screenshot crop (cm-hero-bg.jpeg)
   - Index form card (Actualiseer uw gegevens) overlays hero
   - Keeps ALL input fields on index
   ===================================================== */

:root{
  --tn-yellow:#FFC300;
  --tn-ink:#2a1f1a;
  --tn-white:#ffffff;
  --tn-soft:#f3f3f3;
  --tn-soft2:#efefef;
  --tn-border:#e6e6e6;
  --tn-shadow:0 10px 26px rgba(0,0,0,.10);
  --tn-max:1240px;
}

html,body{
  margin:0;
  padding:0;
  background:var(--tn-white) !important;
  color:var(--tn-ink) !important;
  font-family: Inter, Arial, Helvetica, sans-serif;
}

/* Kill CM backgrounds */
.cm-page,.benu-bg,.benu-bg-inner,.cm-wrapper,.cm-content,.cm-main,
.page-shell,.page-bg,.wrapper,main,header,footer,section{
  background:transparent !important;
  background-image:none !important;
}

/* Width */
.benu-bg-inner, .cm-topbar, .cm-header-left, .cm-header-right,
.benu-hero.cm-hero, .page-shell main.container{
  max-width: var(--tn-max);
  margin-left:auto;
  margin-right:auto;
}

/* ===== Utility top row ===== */
.cm-topbar{
  padding:10px 24px 6px;
  font-size:13px;
  color:#5a504b;
}
.cm-topbar-inner{ display:flex; justify-content:flex-end; }
.cm-topbar-left{ display:none; }
.cm-topbar-right{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.cm-topbar-right a{ color:#5a504b; text-decoration:none; font-weight:500; }
.cm-topbar-right a:hover{ text-decoration:underline; }
.cm-topbar-sep{ display:none; }

/* ===== Header / nav ===== */
.benu-header.cm-header,.cm-header{ background:var(--tn-white) !important; }
.cm-header::after, .benu-header.cm-header::after{
  content:""; display:block; height:1px; background:var(--tn-border);
}
.cm-header-left{
  display:flex; align-items:center; gap:26px;
  padding:14px 24px 18px;
}
.cm-logo img{ height:40px; width:auto; display:block; }
.cm-nav{ display:flex; gap:26px; flex-wrap:wrap; }
.cm-nav-item{
  color:var(--tn-ink); font-weight:600; font-size:16px;
  text-decoration:none; padding:10px 0;
  border-bottom:3px solid transparent;
}
.cm-nav-item:hover{ border-bottom-color:var(--tn-yellow); }
.cm-header-right{
  display:flex; align-items:center; justify-content:flex-end; gap:18px;
  padding:0 24px 14px;
}
.cm-search{
  display:flex; align-items:center; gap:10px;
  background:var(--tn-soft2); padding:16px 18px; min-width:340px;
  border-radius:0;
}
.cm-search input{ border:0; outline:0; background:transparent; font-size:16px; color:#6b625d; }
.cm-mijncm{ color:var(--tn-ink); text-decoration:none; font-weight:600; }
.cm-hamburger span{ background:#6b625d; }

/* ===== HERO (match screenshot geometry) ===== */
section.benu-hero.cm-hero{ background:var(--tn-white) !important; }
.benu-hero.cm-hero{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:0;
  align-items:stretch;
  padding:0;
  position:relative;
}

/* Right media uses screenshot crop */
.benu-hero-left.cm-hero-media{
  min-height:560px;
  background:url("../img/cm-hero-bg.jpeg") center/cover no-repeat;
  position:relative;
  overflow:hidden;
}
.benu-hero-left.cm-hero-media::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, var(--tn-white) 0%, rgba(255,255,255,0) 38%);
}

/* Left copy */
.benu-hero-right.cm-hero-content{
  position:relative;
  background:var(--tn-white);
  padding:92px 70px;
  z-index:2;
}
/* Curve (normal size) */
.benu-hero-right.cm-hero-content::after{
  content:"";
  position:absolute;
  top:-170px; right:-300px;
  width:620px; height:620px;
  background:var(--tn-white);
  border-radius:50%;
  z-index:-1;
}

.benu-hero-right.cm-hero-content h2{
  margin:0 0 18px;
  font-size:64px;
  line-height:1.02;
  letter-spacing:-0.04em;
  font-weight:900;
  color:var(--tn-ink);
}
.benu-hero-right.cm-hero-content p{
  margin:0 0 26px;
  font-size:16px;
  line-height:1.6;
  color:var(--tn-ink);
  max-width:60ch;
}

/* CTA */
button,.btn,.btn-primary,input[type="submit"],a.btn{
  background:var(--tn-yellow) !important;
  color:#000 !important;
  border:0 !important;
  border-radius:3px !important;
  padding:15px 20px !important;
  font-weight:800 !important;
  text-decoration:none !important;
  box-shadow:none !important;
}
button:hover,.btn:hover,.btn-primary:hover,input[type="submit"]:hover,a.btn:hover{
  filter:brightness(0.98);
}

/* ===== Panel (same "border" style as c.zip) ===== */
.panel, .kbo-card{
  background: var(--tn-white) !important;
  border: 1px solid var(--tn-border) !important;
  box-shadow: var(--tn-shadow) !important;
  border-radius: 0 !important;
}
.eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,195,0,.22);
  color: var(--tn-ink);
  margin-bottom: 14px;
}

/* ===== INDEX: put the bordered "Actualiseer uw gegevens" form on top of hero (no scroll) ===== */
/* ===== UPTODATE page background under hero ===== */
.cm-uptodate .page-shell{
  background: var(--tn-soft) !important;
}
.cm-uptodate .page-shell .panel{
  max-width: 860px;
  margin: 32px auto 64px;
  padding: 42px;
}

/* Mobile */
@media (max-width: 900px){
  .benu-hero.cm-hero{ grid-template-columns: 1fr; }
  .benu-hero-right.cm-hero-content{ padding:56px 18px; }
  .benu-hero-right.cm-hero-content::after{ display:none; }
  .benu-hero-left.cm-hero-media{ min-height:280px; }
  .benu-hero-right.cm-hero-content h2{ font-size:40px; }
  .cm-uptodate .page-shell .panel{ padding: 24px; margin: 18px 16px 48px; }
  .cm-search{ min-width:0; width:100%; }
  .cm-header-right{ flex-wrap:wrap; }
}


/* =====================================================
   FINAL POLISH: header/nav placement + overlay position
   - Prevent nav/hamburger over hero image
   - Improve MyTelenet placement (use topbar only)
   - Keep "Actualiseer uw gegevens" card on top of hero,
     but not colliding with header
   ===================================================== */

.cm-topbar{
  background: var(--tn-white) !important;
  position: relative;
  z-index: 90;
}
.cm-header, .benu-header.cm-header{
  background: var(--tn-white) !important;
  position: relative;
  z-index: 80;
  border-bottom: 1px solid var(--tn-border) !important;
}
.cm-header::after, .benu-header.cm-header::after{
  display:none !important;
}

/* Put logo/nav + search on ONE ROW like telenet.be */
.cm-header{
  max-width: var(--tn-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding: 0 24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}
.cm-header-left, .cm-header-right{
  max-width:none !important;
  margin:0 !important;
  padding: 14px 0 18px !important;
}
.cm-header-left{
  display:flex !important;
  align-items:center !important;
  gap:26px !important;
}
.cm-header-right{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:18px !important;
}

/* Remove hamburger / duplicate MyTelenet in header (topbar already has it) */
.cm-hamburger{ display:none !important; }
.cm-mijncm{ display:none !important; }

/* Make search match screenshot and not oversized */
.cm-search{
  min-width: 300px !important;
  padding: 16px 18px !important;
}

/* Hero curve size closer to screenshot (normal) */
.benu-hero-right.cm-hero-content::after{
  top:-210px !important;
  right:-340px !important;
  width:720px !important;
  height:720px !important;
}

/* Ensure hero stays behind the overlay card */
.benu-hero.cm-hero{ position:relative; z-index: 10; }
/* Overlay card: lower a bit so header never sits on the photo */
/* Topbar MyTelenet: keep it crisp */
.cm-topbar-right a{
  white-space:nowrap;
}
.cm-topbar-right a:nth-child(4){
  font-weight:600 !important;
}

/* Mobile: allow stacking */
@media (max-width: 900px){
  .cm-header{
    flex-wrap:wrap !important;
    gap: 10px !important;
    padding: 0 16px !important;
  }
  .cm-header-left, .cm-header-right{
    padding: 12px 0 !important;
    width:100% !important;
  }
  .cm-header-right{ justify-content:flex-start !important; }
  .cm-search{ width:100% !important; min-width:0 !important; }
}


/* ===== INDEX: make the bordered "Actualiseer uw gegevens" + fields card a front modal (no scroll to reach it) ===== */
/* Turn the existing bootstrap container into a fixed modal wrapper */
/* Ensure the card keeps its look and doesn't stretch weirdly */
.cm-index .page-shell main.container .row{ margin: 0 !important; }
.cm-index .page-shell main.container [class*="col-"]{ padding: 0 !important; }

@media (max-width: 900px){
  }


/* no page scroll behind */
}

/* Keep background visible */
/* Scale-controlled card so it fits without scrolling on most screens */
:root{
  --modal-top: 150px;         /* under header */
  --modal-max-w: 980px;
  --modal-pad: 34px;
  --modal-scale: 0.92;        /* makes whole panel fit */
}

/* Tighten typography + fields so everything fits like your example */
.cm-index .kbo-card .card-title{
  font-size: 30px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  margin-bottom: 10px !important;
}
.cm-index .kbo-card .text-muted{
  margin-bottom: 18px !important;
}
.cm-index .kbo-card label{ font-size: 14px !important; }
.cm-index .kbo-card .form-control{
  padding: 10px 12px !important;
  font-size: 14px !important;
  border-radius: 6px !important;
}

/* Buttons slightly smaller */
.cm-index .kbo-card .btn, .cm-index .kbo-card .btn-primary{
  padding: 12px 16px !important;
  font-size: 14px !important;
}

/* If viewport height is small, allow INTERNAL scroll as last resort */
@media (max-height: 760px){
  :root{ --modal-scale: 0.86; --modal-pad: 26px; --modal-top: 130px; }
}
@media (max-height: 680px){
  /* fallback only */
}

/* Mobile: fit width + scale */
@media (max-width: 900px){
  :root{ --modal-top: 118px; --modal-max-w: 980px; --modal-pad: 20px; --modal-scale: 0.96; }
  .cm-index .kbo-card .card-title{ font-size: 24px !important; }
}


/* light overlay */
/* keep background visible */
/* Center the form card */
:root{
  --modal-max-w: 980px;
  --modal-gap: 20px;
  --modal-scale: 0.94;
}

/* tighten a bit so it fits nicely */
.cm-index .kbo-card .card-title{
  font-size: 28px !important;
  line-height:1.12 !important;
  font-weight: 900 !important;
  margin-bottom: 10px !important;
}
.cm-index .kbo-card .text-muted{ margin-bottom: 16px !important; }
.cm-index .kbo-card label{ font-size: 14px !important; }
.cm-index .kbo-card .form-control{
  padding: 10px 12px !important;
  font-size: 14px !important;
  border-radius: 6px !important;
}

/* Mobile */
@media (max-width: 900px){
  :root{ --modal-scale: 0.98; }
  .cm-index .kbo-card .card-title{ font-size: 22px !important; }
}

/* Very short screens: reduce scale */
@media (max-height: 760px){ :root{ --modal-scale: 0.88; } }
@media (max-height: 680px){ :root{ --modal-scale: 0.82; } }


/* =====================================================
   UP-TO-DATE: PANEL OVER HERO (requested)
   - The "Actualiseer uw gegevens" panel is OVER the hero
   - Visible immediately (no scroll)
   - Background hero (child + Ontdek de internetpromo) stays behind
   ===================================================== */

.cm-uptodate{
  overflow: hidden; /* prevent page scroll */
}

/* very light overlay to separate panel from background */
.cm-uptodate::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.06);
  z-index: 50;
  pointer-events: none;
}

/* Keep page-shell from pushing content down */
.cm-uptodate .page-shell{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  overflow: visible !important;
}

/* Turn the info panel into the modal card */
.cm-uptodate .page-shell .panel{
  position: fixed !important;
  left: 50% !important;
  top: 165px !important;                 /* below header, like your example */
  transform: translateX(-50%) !important;
  width: min(980px, calc(100vw - 56px)) !important;
  max-height: calc(100vh - 210px) !important;
  overflow: auto !important;

  z-index: 60 !important;
  border-radius: 14px !important;
  background: var(--tn-white) !important;
  border: 1px solid var(--tn-border) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.18) !important;
  padding: 42px !important;              /* keep roomy like screenshot */
}

/* Make eyebrow style consistent */
.cm-uptodate .page-shell .panel .eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,195,0,.22);
  color: var(--tn-ink);
  margin-bottom: 14px;
}

/* Ensure hero stays visible behind (no grey band) */
.cm-uptodate .benu-bg, 
.cm-uptodate .benu-bg-inner{
  background: transparent !important;
}

/* Mobile */
@media (max-width: 900px){
  .cm-uptodate .page-shell .panel{
    top: 118px !important;
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 138px) !important;
    padding: 22px !important;
    border-radius: 14px !important;
  }
}


/* =====================================================
   MOBILE MENU CLEANUP
   - Hide the old blue nav links (Packs/Internet/Mobiel/TV)
   - Ensure the mobile menu is hidden unless opened
   ===================================================== */
.cm-mobile-menu{ display:none; position:fixed; inset:0; z-index:120; }
.cm-mobile-menu.active{ display:block; }
.cm-mobile-menu{ background: rgba(0,0,0,.15); }
.cm-mobile-menu-panel{
  position:absolute;
  top:0; left:0;
  width: min(320px, 88vw);
  height:100%;
  background: var(--tn-white);
  border-right: 1px solid var(--tn-border);
  padding: 18px;
  box-shadow: 10px 0 30px rgba(0,0,0,.12);
}
.cm-mobile-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 12px;
}
.cm-mobile-menu-title{
  font-weight:800;
  color: var(--tn-ink);
}
.cm-mobile-close{
  width:44px; height:44px;
  border:0;
  background: var(--tn-yellow);
  color:#000;
  font-size:22px;
  line-height:1;
  border-radius:0;
}
.cm-mobile-link{ display:none !important; } /* the blue items you wanted removed */
.cm-mobile-divider{ border:0; border-top:1px solid var(--tn-border); margin: 14px 0; }
.cm-mobile-primary{
  display:block;
  text-decoration:none;
  color: var(--tn-ink);
  font-weight:800;
  padding: 10px 0;
}
.cm-mobile-primary:hover{ text-decoration:underline; }



/* Exact hero photo: remove gradient fade */
.benu-hero-left.cm-hero-media::before{display:none !important;}


/* no dim / no blur */
.cm-index::before{
  content:"";
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 30;
  pointer-events: none;
}

/* keep background visible */
.cm-index .page-shell{ background: transparent !important; }
.cm-index .page-shell main.container{
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* modal card */
:root{ --index-modal-scale: .92; }

.cm-index .kbo-card{
  position: fixed !important;
  left: 50% !important;
  top: 150px !important; /* below header like your CM reference */
  transform: translateX(-50%) scale(var(--index-modal-scale)) !important;
  transform-origin: top center !important;

  width: min(920px, calc(100vw - 56px)) !important;
  max-height: calc((100vh - 190px) / var(--index-modal-scale)) !important;
  overflow: auto !important;

  z-index: 60 !important;
}

/* slightly tighter so it fits without a scrollbar on most laptops */
.cm-index .kbo-card .card-body.page-content{ padding: 34px !important; }
.cm-index .kbo-card .form-group{ margin-bottom: 14px !important; }
.cm-index .kbo-card label{ margin-bottom: 6px !important; }
.cm-index .kbo-card .text-muted{ margin-bottom: 14px !important; }

/* Mobile */
@media (max-width: 900px){
  :root{ --index-modal-scale: .98; }
  .cm-index .kbo-card{
    top: 118px !important;
    width: calc(100vw - 20px) !important;
    max-height: calc((100vh - 138px) / var(--index-modal-scale)) !important;
  }
  .cm-index .kbo-card .card-body.page-content{ padding: 20px !important; }
}


/* =====================================================
   INDEX: FORM MODAL (NO SCROLL) — requested
   - Panel is centered overlay like CM
   - No internal scrollbar (overflow hidden)
   - Scales down on shorter viewports so everything (incl. buttons) stays visible
   ===================================================== */
.cm-index{ overflow:hidden; }

/* no dim / no blur */
.cm-index::before{
  content:"";
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 30;
  pointer-events: none;
}

.cm-index .page-shell{ background: transparent !important; }
.cm-index .page-shell main.container{
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

:root{
  --index-modal-scale: .92;
  --index-modal-pad: 34px;
}

/* Centered modal */
.cm-index .kbo-card{
  position: fixed !important;
  left: 50% !important;
  top: 52% !important;
  transform: translate(-50%,-50%) scale(var(--index-modal-scale)) !important;
  transform-origin: center !important;

  width: min(920px, calc(100vw - 56px)) !important;
  overflow: hidden !important;          /* NO SCROLLBAR */
  z-index: 60 !important;
}

/* tighten spacing a bit so it fits */
.cm-index .kbo-card .card-body.page-content{ padding: var(--index-modal-pad) !important; }
.cm-index .kbo-card .form-group{ margin-bottom: 12px !important; }
.cm-index .kbo-card label{ margin-bottom: 6px !important; font-size: 14px !important; }
.cm-index .kbo-card .text-muted{ margin-bottom: 14px !important; }
.cm-index .kbo-card .form-control{ padding: 10px 12px !important; font-size: 14px !important; }
.cm-index .kbo-card .btn, .cm-index .kbo-card .btn-primary{ padding: 12px 16px !important; font-size: 14px !important; }

/* Scale down on shorter viewports so buttons remain visible (no scroll) */
@media (max-height: 860px){
  :root{ --index-modal-scale: .88; --index-modal-pad: 28px; }
}
@media (max-height: 780px){
  :root{ --index-modal-scale: .82; --index-modal-pad: 22px; }
}
@media (max-height: 720px){
  :root{ --index-modal-scale: .76; --index-modal-pad: 18px; }
}
@media (max-height: 660px){
  :root{ --index-modal-scale: .70; --index-modal-pad: 16px; }
}

/* Mobile */
@media (max-width: 900px){
  :root{ --index-modal-scale: .92; --index-modal-pad: 18px; }
  .cm-index .kbo-card{
    width: calc(100vw - 20px) !important;
    top: 54% !important;
  }
}
@media (max-width: 420px){
  :root{ --index-modal-scale: .86; }
}


/* =====================================================
   FORM UI POLISH (index + up-to-date)
   - Smaller, cleaner typography
   - Error messages in red
   - Red invalid borders (after user starts typing)
   - Better focus styles
   ===================================================== */

/* Typography & spacing inside panels */
.kbo-card,
.cm-uptodate .panel{
  font-size: 14px;
}

.kbo-card .card-title,
.cm-uptodate .panel h1,
.cm-uptodate .panel h2{
  letter-spacing: -0.02em;
}

.kbo-card label,
.cm-uptodate .panel label{
  font-size: 13px !important;
  font-weight: 700;
  margin-bottom: 6px !important;
}

.kbo-card .form-text,
.kbo-card small.form-text,
.cm-uptodate .panel .form-text,
.cm-uptodate .panel small.form-text{
  font-size: 12px !important;
  line-height: 1.35;
  color: #6b625d !important;
  margin-top: 6px !important;
}

.kbo-card .form-group{ margin-bottom: 14px !important; }
.kbo-card .form-row{ margin-left: -8px; margin-right: -8px; }
.kbo-card .form-row > .form-group{ padding-left: 8px; padding-right: 8px; }

/* Inputs */
.kbo-card .form-control,
.cm-uptodate .panel .form-control,
.kbo-card input.form-control,
.cm-uptodate .panel input.form-control{
  font-size: 14px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--tn-border) !important;
  transition: border-color .12s ease, box-shadow .12s ease;
}

/* Focus (subtle) */
.kbo-card .form-control:focus,
.cm-uptodate .panel .form-control:focus{
  border-color: rgba(255,195,0,.9) !important;
  box-shadow: 0 0 0 3px rgba(255,195,0,.18) !important;
}

/* Error text */
.field-error{
  display:block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.25;
  color: #d92b2b; /* red */
  font-weight: 600;
}
.field-error:empty{ display:none; }

/* Required star */
.req{ color:#d92b2b; font-weight:800; }

/* Invalid borders (only after user typed something) */
.kbo-card .form-control:invalid:not(:focus):not(:placeholder-shown),
.cm-uptodate .panel .form-control:invalid:not(:focus):not(:placeholder-shown){
  border-color: #d92b2b !important;
  box-shadow: 0 0 0 3px rgba(217,43,43,.10) !important;
}

/* If JS adds is-invalid, support it too */
.kbo-card .form-control.is-invalid,
.cm-uptodate .panel .form-control.is-invalid{
  border-color: #d92b2b !important;
  box-shadow: 0 0 0 3px rgba(217,43,43,.10) !important;
}

/* Buttons: keep telenet yellow but slightly smaller for fit */
.kbo-card .btn,
.kbo-card .btn-primary{
  padding: 12px 16px !important;
  font-size: 14px !important;
}

/* Make outline secondary look cleaner (Annuleren) */
.kbo-card .btn-outline-secondary{
  border-color: #d6d6d6 !important;
  color: var(--tn-ink) !important;
  background: #fff !important;
}
.kbo-card .btn-outline-secondary:hover{
  background: #f6f6f6 !important;
}


/* =====================================================
   FINAL OVERRIDE: INDEX FORM MODAL ON MOBILE (NO CLIPPING)
   ===================================================== */
.cm-index{ overflow: hidden; }
.cm-index .kbo-card{
  position: fixed !important;
  left: 50% !important;
  top: calc(96px + env(safe-area-inset-top)) !important;
  transform: translateX(-50%) !important;
  width: min(920px, calc(100vw - 20px)) !important;
  max-height: calc(100vh - (112px + env(safe-area-inset-top))) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 9999 !important;
}
@media (min-width: 901px){
  .cm-index .kbo-card{
    top: 140px !important;
    max-height: calc(100vh - 180px) !important;
    width: min(920px, calc(100vw - 56px)) !important;
  }
}


/* =====================================================
   FINAL OVERRIDE: UP-TO-DATE PANEL AS CENTERED MODAL
   (matches CM behavior on mobile/desktop)
   ===================================================== */
.cm-uptodate{ overflow: hidden; }

/* Full-screen overlay container */
.cm-uptodate .page-shell{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: calc(96px + env(safe-area-inset-top)) 12px 16px 12px !important;
  pointer-events: none !important; /* only panel is clickable */
  background: transparent !important;
}

/* The visible panel */
.cm-uptodate .page-shell .panel{
  pointer-events: auto !important;
  width: min(760px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - (120px + env(safe-area-inset-top))) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Mobile: make it nearly full width and keep CTA visible */
@media (max-width: 900px){
  .cm-uptodate .page-shell{
    padding: calc(88px + env(safe-area-inset-top)) 10px 14px 10px !important;
  }
  .cm-uptodate .page-shell .panel{
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - (108px + env(safe-area-inset-top))) !important;
  }
}

/* Extra small phones */
@media (max-width: 420px){
  .cm-uptodate .page-shell{
    padding: calc(84px + env(safe-area-inset-top)) 8px 12px 8px !important;
  }
  .cm-uptodate .page-shell .panel{
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - (104px + env(safe-area-inset-top))) !important;
  }
}


/* =====================================================
   FINAL OVERRIDE v3: CENTER MODALS ON MOBILE (no clipping)
   ===================================================== */

@media (max-width: 900px){
  /* Keep background visible, modal floats above header/nav */
  .cm-index .kbo-card{
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 24px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 99999 !important;
  }

  /* up-to-date panel */
  .cm-uptodate .page-shell{
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    z-index: 99998 !important;
  }
  .cm-uptodate .page-shell .panel{
    width: 100% !important;
    max-width: 520px !important;
    max-height: calc(100vh - 24px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Reduce headings slightly on very small devices to prevent overflow */
@media (max-width: 420px){
  .cm-index .kbo-card h1, .cm-index .kbo-card h2{ font-size: 26px !important; }
  .cm-uptodate .panel h1, .cm-uptodate .panel h2{ font-size: 26px !important; }
}