/* V26 Cross-Browser Stability
   Stabiliteitslaag voor Safari, Chrome, Edge, Firefox en Android browsers.
   Doel: dezelfde premium uitstraling, geen horizontale overflow, stabiele grids.
*/

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}

img,
svg,
video,
canvas{
  max-width:100%;
  height:auto;
}

button,
input,
select,
textarea{
  font:inherit;
}

a,
button{
  -webkit-tap-highlight-color:rgba(255,214,110,.18);
}

@supports (-webkit-touch-callout:none){
  body{
    min-height:-webkit-fill-available;
  }
}

/* Fallback voor browsers waar backdrop-filter minder consistent is */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))){
  .hero,
  .card,
  .panel,
  .acc,
  .quick-card,
  .v25-card,
  .v25-compare,
  .tools > button,
  .tool-menu{
    background-color:rgba(18,15,31,.92)!important;
  }
}

/* Homepage en algemene containers */
.wrap,
.container,
main,
section,
header,
footer{
  max-width:100%;
}

@media(max-width:920px){
  body{
    padding-left:0!important;
    padding-right:0!important;
  }

  .wrap,
  .container,
  main{
    width:100%!important;
    max-width:100%!important;
  }

  .wrap{
    padding-left:17px!important;
    padding-right:17px!important;
  }

  /* Grids blijven stabiel en veroorzaken geen horizontale scroll */
  .grid2,
  .quick-grid,
  .summary,
  .v12-grid,
  .v12-kpis,
  .v25-cards{
    display:grid!important;
    width:100%!important;
    max-width:100%!important;
    gap:10px!important;
  }

  .grid2,
  .quick-grid,
  .summary,
  .v12-grid,
  .v12-kpis{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }

  .v25-cards{
    grid-template-columns:1fr!important;
  }

  .quick-card,
  .mini,
  .sum,
  .v25-card,
  .acc,
  .hero,
  .money,
  .form-card{
    min-width:0!important;
    max-width:100%!important;
  }

  .quick-card b,
  .quick-card span,
  .acc-title b,
  .acc-title span,
  .v25-card h3,
  .v25-list li,
  .lead,
  h1,
  h2,
  h3{
    overflow-wrap:anywhere;
    word-break:normal;
  }

  /* Android/iPhone consistente kaartverdeling */
  .quick-card{
    min-height:96px!important;
  }

  .mini{
    min-height:86px!important;
  }

  .hero{
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Formulieren stabieler */
  input,
  textarea,
  select{
    max-width:100%!important;
    min-width:0!important;
  }

  .base-row,
  .dynamic-row{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .base-row > *,
  .dynamic-row > *{
    min-width:0!important;
  }

  /* Fixed buttons safe-area compatible */
  .tools{
    right:max(14px, env(safe-area-inset-right))!important;
    bottom:calc(16px + env(safe-area-inset-bottom))!important;
  }

  footer{
    padding-bottom:calc(28px + env(safe-area-inset-bottom))!important;
  }
}

/* Small phones: nog steeds bruikbaar zonder overflow */
@media(max-width:430px){
  .wrap{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  h1{
    max-width:100%!important;
  }

  .v25-compare{
    border-radius:30px!important;
    padding:18px!important;
  }

  .v25-compare h2{
    font-size:38px!important;
  }

  .v25-card{
    border-radius:24px!important;
  }
}

/* Extreem kleine schermen */
@media(max-width:340px){
  .grid2,
  .quick-grid,
  .summary,
  .v12-grid,
  .v12-kpis{
    grid-template-columns:1fr!important;
  }

  .base-row,
  .dynamic-row,
  .dynamic-row.goal-row,
  .dynamic-row.invest-row,
  .dynamic-row.debt-row{
    grid-template-columns:1fr!important;
  }

  .base-row .remove,
  .dynamic-row button{
    width:100%!important;
  }
}

/* Desktop stabiliteit */
@media(min-width:921px){
  body{
    overflow-x:hidden;
  }

  .v25-cards{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .v25-card{
    min-width:0!important;
  }
}

/* Firefox specifieke kleine correctie */
@-moz-document url-prefix(){
  .hero,
  .acc,
  .quick-card,
  .v25-card{
    box-shadow:0 18px 55px rgba(0,0,0,.22)!important;
  }
}

/* Print/reader fallback */
@media print{
  body{
    background:#fff!important;
    color:#111!important;
  }
}