:root{
  --bg:#f6f8fa;
  --card:#fff;
  --ink:#1f2328;
  --muted:#57606a;
  --accent:#0078D7;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
}

/* ================= HEADER ================= */

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 20px;
  border-bottom:1px solid #e6e6e6;
  background:#fff;
  position:sticky;
  top:0;
  z-index:10;
}

.hdr-left{
  display:flex;
  align-items:center;
  gap:12px;
}

header img{
  max-height:40px;
  width:auto;
  object-fit:contain;
}

h1{
  font-size:20px;
  margin:0;
}

/* ================= LAYOUT ================= */

main{
  max-width:980px;
  margin:20px auto;
  padding:0 16px;
}

.card{
  background:var(--card);
  border:1px solid #e6e6e6;
  border-radius:10px;
  padding:16px 16px 20px;
  margin:16px 0;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}

label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:600;
}

input,select,button{
  font:inherit;
}

input,select{
  padding:10px;
  border-radius:8px;
  border:1px solid #d0d7de;
  background:#fff;
}

button,.btn{
  padding:10px 14px;
  border-radius:8px;
  border:1px solid #d0d7de;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
}

button.secondary,.btn.secondary{
  background:#f3f4f6;
  color:#111;
}

.hint{
  color:var(--muted);
  font-size:12px;
  margin-top:8px;
}

.result-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:20px;
  border-top:1px dashed #e6e6e6;
  padding-top:10px;
  margin-top:10px;
}

.offer-grid{
  display:grid;
  gap:12px;
}

.kv{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px 12px;
  align-items:center;
}

.offer-total{
  font-size:24px;
  margin:6px 0;
}

.small{
  color:var(--muted);
  font-size:12px;
}

footer{
  padding:20px;
  text-align:center;
  color:var(--muted);
}

#printOfferBtn{}

/* ================= OVERLAY / LICENTIE ================= */

.license-overlay{
  position:fixed;
  inset:0;
  background:#0b0c0dcc;
  color:#fff;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.license-card{
  width:min(960px,100%);
  background:#fff;
  color:#111;
  border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.4);
  overflow:hidden;
}

.license-card header{
  padding:16px 20px;
  background:#0078D7;
  color:#fff;
  display:flex;
  align-items:center;
  gap:12px;
}

.license-body{
  padding:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.license-panel{
  border:1px solid #e5e5e5;
  border-radius:10px;
  padding:16px;
}

@media (max-width:820px){
  .license-body{
    grid-template-columns:1fr;
  }
}

#licenseBanner{
  display:none;
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#7c2d12;
  padding:8px 12px;
  border-radius:8px;
  margin:10px 0;
}

#licenseFooter{
  display:none;
}

/* ================= MOBILE FIXES (≤480px) ================= */

@media (max-width:480px){

  .license-overlay{
    padding: max(12px, env(safe-area-inset-top))
             max(12px, env(safe-area-inset-right))
             max(12px, env(safe-area-inset-bottom))
             max(12px, env(safe-area-inset-left));
  }

  .license-card{
    width:100%;
    border-radius:12px;
  }

  .license-card header{
    padding:12px 14px;
    gap:10px;
  }

  .license-card header img{
    max-height:28px;
  }

  .license-body{
    padding:14px;
    grid-template-columns:1fr !important;
    gap:12px;
  }

  .license-panel{
    padding:12px;
  }

  .license-panel input,
  .license-panel select{
    font-size:16px; /* voorkomt iOS inzoomen */
  }

  .license-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .license-actions .btn{
    width:100%;
    justify-content:center;
  }

  #licenseBanner{
    margin:8px 0;
  }
}

/* =========================================================
   PRINT FIX — Altijd 1 A4 pagina
   ========================================================= */
@media print {

  @page{
    size:A4 portrait;
    margin:10mm !important;
  }

  /* Verberg onderdelen buiten de offerte */
  header,
  nav,
  #resultCard,
  #calcBtn,
  .no-print,
  #codesCard,
  #licenseFooter,
  #licenseBanner {
    display:none !important;
  }

  body{
    background:#fff !important;
    transform-origin:top left;
    transform:scale(0.88);  /* Chrome/Edge */
    max-height:100%;
  }

  /* iOS Safari */
  @supports (-webkit-touch-callout:none){
    body{
      transform:scale(0.82);
    }
  }

  #offerCard{
    display:block !important;
    page-break-inside:avoid;
    page-break-before:avoid;
    page-break-after:avoid;
    overflow:hidden;
  }

  #offerCard h2{
    font-size:20px;
    margin-bottom:6px;
  }

  #offerCard .offer-grid,
  #offerCard .kv{
    row-gap:4px !important;
  }

  #offerCard .offer-total{
    font-size:20px;
    margin:4px 0;
  }

  *{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}

/* ===== iOS overlay fix (fullscreen + scroll) ===== */
/* 1) Fullscreen overlay die ook op iOS echt het hele scherm pakt */
.license-overlay{
  position: fixed; /* vast aan viewport */
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99999;
  /* iOS-veilig: geen 100vh, maar 100dvh en fallback */
  height: 100dvh; /* iOS 15+ dynamic viewport */
  min-height: -webkit-fill-available;
  /* bestaande stijl uit jouw sheet */
  background: #0b0c0dcc;
  color: #fff;
  /* centreren */
  display: flex;
  align-items: center;
  justify-content: center;
  /* veilige padding + notches */
  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  /* belangrijk voor iOS: scroll in overlay toestaan */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* voorkom ‘achtergrond-swipe’ (pull-to-refresh/edge back) */
  overscroll-behavior: contain;
}
/* 2) Kaart mag binnen overlay scrollen indien nodig */
.license-card{
  width: min(960px, 100%);
  max-height: calc(100dvh - 2 * 24px); /* nooit groter dan viewport */
  min-height: auto; /* voorkom forceren */
  overflow: hidden; /* randen strak */
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #111;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
/* Header blijft zichtbaar; body wordt scrollbaar */
.license-card header{
  padding: 16px 20px;
  background: #0078D7;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto; /* vaste hoogte */
}
.license-body{
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  flex: 1 1 auto; /* beschikbare ruimte benutten */
  overflow: auto; /* inhoud binnen kaart kan scrollen */
  -webkit-overflow-scrolling: touch;
}
/* iOS fallback voor oudere builds die 100dvh niet kennen */
@supports not (height: 100dvh){
  .license-overlay{
    /* CSS custom property via JS fallback (zie script) */
    height: calc(var(--vh, 1vh) * 100);
  }
}
/* Mobile: één kolom + compacte paddings */
@media (max-width: 480px){
  .license-card header{ padding: 12px 14px; gap: 10px; }
  .license-card header img{ max-height: 28px; width: auto; }
  .license-body{
    padding: 14px;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .license-panel{ padding: 12px; }
  .license-panel input, .license-panel select{ font-size: 16px; }
  .license-actions{ display: grid; grid-template-columns: 1fr; gap: 8px; }
  .license-actions .btn{ width: 100%; justify-content: center; }
  #licenseBanner{ margin: 8px 0; }
}
/* Net iets breder ook enkelkoloms */
@media (max-width: 820px){
  .license-body{ grid-template-columns: 1fr; }
}