/* All4Fysio maatadvies — gedeelde opmaak v1 (akh-maat-engine-v1.css)
   Hoort bij akh-maat-engine-v1.js. Upload via FTP naar /media/wysiwyg/Maatadvies/. */
.akh-maat{
  --blue:#2399c7; --blue-dark:#1a7ba3; --blue-soft:#eaf6fb; --blue-line:#cfeaf4;
  --green:#55b934; --green-dark:#469a29;
  --ink:#12263A; --muted:#5C6B7A; --faint:#94a2b3; --border:#e6edf2;
  width:100%; box-sizing:border-box; margin:12px 0 16px;
  border:1px solid var(--blue-line); border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg,#f4fbfe 0%,#fff 60%);
  box-shadow:0 10px 26px -18px rgba(18,38,58,.3);
  font-family:inherit; color:var(--ink);
}
.akh-maat *{box-sizing:border-box;}
.akh-maat__inner{display:flex; flex-wrap:wrap; align-items:stretch;}
.akh-maat__fig{flex:0 0 210px; display:flex; align-items:center; justify-content:center; padding:18px 10px 10px; background:var(--blue-soft);}
.akh-maat__fig svg{display:block; width:100%; max-width:190px; height:auto;}
.akh-maat__main{flex:1 1 280px; min-width:0; padding:20px 22px 20px;}

.akh-maat__top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 6px;}
.akh-maat__eyebrow{font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--blue-dark);}
.akh-maat__dots{display:flex; gap:5px;}
.akh-maat__dots i{width:22px; height:5px; border-radius:99px; background:#dbe7ee; display:block; transition:background .2s ease;}
.akh-maat__dots i.is-on{background:var(--blue);}
.akh-maat__title{font-size:19px; line-height:1.25; font-weight:800; margin:0 0 4px;}
.akh-maat__lead{font-size:14px; font-weight:600; color:var(--muted); margin:0 0 10px;}
.akh-maat__text{font-size:14px; line-height:1.45; color:var(--muted); margin:0 0 14px;}

.akh-maat__field{display:flex; align-items:center; background:#fff; border:1.5px solid #d6e3ea; border-radius:12px; transition:border-color .12s ease, box-shadow .12s ease;}
.akh-maat__field:focus-within{border-color:var(--blue); box-shadow:0 0 0 3px rgba(35,153,199,.15);}
.akh-maat__field.is-invalid{border-color:#d9534f;}
.akh-maat__field input{flex:1; min-width:0; border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent; font:inherit; font-size:22px; font-weight:800; color:var(--ink); padding:11px 14px; height:auto;}
.akh-maat__unit{padding:0 14px; font-size:15px; font-weight:700; color:var(--muted); align-self:stretch; display:flex; align-items:center; border-left:1.5px solid #e3ecf1;}
.akh-maat__error{font-size:12.5px; color:#c0392b; margin:6px 0 0; line-height:1.4;}
.akh-maat__error:empty{display:none;}

.akh-maat__field.is-filled .akh-maat__unit{color:var(--blue-dark);}
.akh-maat__field.is-filled{border-color:var(--blue);}
.akh-maat__actions{display:flex; align-items:center; gap:14px; margin-top:14px;}
.akh-maat__next{flex:1; border:0; border-radius:9999px; background:var(--blue); color:#fff; font:inherit; font-size:15px; font-weight:700; padding:12px 18px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .15s ease, transform .1s ease;}
.akh-maat__next:hover{background:var(--blue-dark);}
.akh-maat__next:active{transform:scale(.98);}
.akh-maat__next[disabled]{background:#b9d9e6; cursor:not-allowed; transform:none;}
.akh-maat__link{background:none; border:0; padding:2px; font:inherit; font-size:13px; font-weight:600; color:var(--faint); cursor:pointer; white-space:nowrap;}
.akh-maat__link:hover{color:var(--ink);}
.akh-maat__how{font-size:12.5px; color:var(--muted); margin:12px 0 0; line-height:1.45;}

/* Uitslag */
.akh-maat__result{display:flex; flex-wrap:wrap; gap:1.5px; margin:4px 0 10px; border:1.5px solid var(--blue-line); border-radius:14px; background:var(--blue-line); overflow:hidden;}
.akh-maat__result div{flex:1 1 104px; padding:10px 14px; background:#fff;}
.akh-maat__result.is-many strong{font-size:19px; line-height:1.25;}
.akh-maat__result small{display:block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);}
.akh-maat__result strong{display:block; font-size:28px; font-weight:800; line-height:1.15; color:var(--ink);}
.akh-maat__basis{font-size:12.5px; color:var(--muted); margin:0 0 12px; line-height:1.45;}
.akh-maat__note{font-size:13px; line-height:1.45; color:var(--ink); background:#fff8e6; border:1px solid #f3dfa8; border-radius:10px; padding:9px 12px; margin:0 0 12px;}
.akh-maat__note button{background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--blue-dark); text-decoration:underline; cursor:pointer;}
.akh-maat__buy{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px;}
.akh-maat__price{display:flex; align-items:baseline; gap:7px;}
.akh-maat__price b{font-size:19px; font-weight:800;}
.akh-maat__price s{font-size:13px; color:var(--faint); font-weight:600;}
.akh-maat__stock{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--green);}
.akh-maat__stock i{width:8px; height:8px; border-radius:50%; background:currentColor; display:block;}
.akh-maat__stock.is-slow{color:#d08a12;}
.akh-maat__stock.is-no{color:#c0392b;}
.akh-maat__cart{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; border:0; border-radius:9999px; background:var(--green); color:#fff; font:inherit; font-size:15.5px; font-weight:700; padding:13px 18px; cursor:pointer; box-shadow:0 10px 22px -12px rgba(85,185,52,.6); transition:background .15s ease, transform .1s ease;}
.akh-maat__cart:hover{background:var(--green-dark);}
.akh-maat__cart:active{transform:scale(.98);}
.akh-maat__cart[disabled]{opacity:.45; cursor:not-allowed; box-shadow:none;}
.akh-maat__chat{display:flex; align-items:center; justify-content:center; width:100%; border:1.5px solid var(--blue-line); border-radius:9999px; background:var(--blue-soft); color:var(--blue-dark); font:inherit; font-size:14.5px; font-weight:700; padding:12px 18px; cursor:pointer;}
.akh-maat__chat:hover{border-color:var(--blue);}
.akh-maat__foot{display:flex; justify-content:center; margin-top:8px;}

/* Animatie meetlint */
.akh-maat__tape{stroke-dasharray:6 6; animation:akh-maat-tape 1.6s linear infinite;}
@keyframes akh-maat-tape{to{stroke-dashoffset:-24;}}
.akh-maat__pulse{animation:akh-maat-pulse 2s ease-in-out infinite; transform-origin:center; transform-box:fill-box;}
@keyframes akh-maat-pulse{0%,100%{opacity:.55;}50%{opacity:1;}}
.akh-maat__step{animation:akh-maat-in .28s ease both;}
@keyframes akh-maat-in{from{opacity:0; transform:translateY(6px);}to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){.akh-maat__count.is-pop,.akh-maat__tape,.akh-maat__pulse,.akh-maat__step{animation:none !important;}}

.akh-maat__scanlink{display:flex; align-items:center; gap:8px; width:100%; margin-top:12px; padding:10px 12px; border:1.5px dashed var(--blue-line); border-radius:12px; background:#fff; font:inherit; font-size:13.5px; font-weight:700; color:var(--blue-dark); cursor:pointer; text-align:left;}
.akh-maat__scanlink:hover{border-color:var(--blue); background:var(--blue-soft);}
.akh-maat__scanlink svg{flex-shrink:0;}
.akh-maat__scanlink em{font-style:normal; font-weight:600; font-size:11px; color:#fff; background:var(--blue); border-radius:99px; padding:2px 7px; margin-left:auto;}
.akh-maat__scanned{font-size:12.5px; color:var(--blue-dark); margin:6px 0 0; font-weight:600;}
.akh-maat.is-scanning .akh-maat__fig{display:none;}
.akh-maat__tips{list-style:none; margin:10px 0 12px; padding:0; display:flex; flex-direction:column; gap:7px;}
.akh-maat__tips li{display:flex; gap:9px; font-size:13.5px; line-height:1.4; color:var(--ink);}
.akh-maat__tips li b{flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--blue-soft); color:var(--blue-dark); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;}
.akh-maat__privacy{font-size:12px; color:var(--muted); margin:0 0 12px; line-height:1.45;}
.akh-maat__cam{position:relative; width:100%; max-width:340px; aspect-ratio:3/4; margin:0 auto 10px; border-radius:14px; overflow:hidden; background:#0d1b26;}
.akh-maat__cam video,.akh-maat__cam canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.akh-maat__cam video{transform:scaleX(-1);}
.akh-maat__scanmsg{font-size:14px; font-weight:700; text-align:center; margin:0 0 8px; min-height:1.4em;}
.akh-maat__count{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; font-size:96px; font-weight:800; color:#fff; text-shadow:0 4px 18px rgba(0,0,0,.45);}
.akh-maat__count:empty{display:none;}
.akh-maat__count.is-pop{animation:akh-maat-pop .9s ease-out both;}
@keyframes akh-maat-pop{0%{transform:scale(1.5); opacity:0;}25%{transform:scale(1); opacity:1;}100%{opacity:.85;}}
.akh-maat__checks{list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:0 auto 10px; padding:0; max-width:340px;}
.akh-maat__checks li{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--muted); background:#f1f5f8; border-radius:99px; padding:5px 10px; transition:background .2s ease, color .2s ease;}
.akh-maat__checks li i{width:8px; height:8px; border-radius:50%; background:#c4d3dc; display:block; transition:background .2s ease;}
.akh-maat__checks li.is-ok{background:#e8f6e2; color:#3d8a22;}
.akh-maat__checks li.is-ok i{background:var(--green);}
.akh-maat__scanbar[hidden]{display:none;}
.akh-maat__scanbar{height:6px; border-radius:99px; background:#dbe7ee; overflow:hidden; max-width:340px; margin:0 auto 10px;}
.akh-maat__scanbar i{display:block; height:100%; width:0; background:var(--blue); border-radius:99px; transition:width .15s linear;}
.akh-maat__estimate{text-align:center; margin:4px 0 12px;}
.akh-maat__estimate small{display:block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);}
.akh-maat__estimate strong{display:block; font-size:34px; font-weight:800; line-height:1.2;}
.akh-maat__center{display:flex; justify-content:center; gap:16px; margin-top:8px;}
.akh-maat__loading{display:flex; align-items:center; justify-content:center; gap:10px; min-height:120px; font-size:13.5px; color:var(--muted);}
.akh-maat__spin{width:18px; height:18px; border-radius:50%; border:2.5px solid #dbe7ee; border-top-color:var(--blue); animation:akh-maat-rot .7s linear infinite;}
@keyframes akh-maat-rot{to{transform:rotate(360deg);}}
.akh-maat__choices{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 0;}
.akh-maat__choice{display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 10px; border:1.5px solid #d6e3ea; border-radius:14px; background:#fff; font:inherit; font-size:15px; font-weight:800; color:var(--ink); cursor:pointer; transition:border-color .12s ease, background .12s ease, transform .1s ease;}
.akh-maat__choice:hover{border-color:var(--blue); background:var(--blue-soft);}
.akh-maat__choice:active{transform:scale(.98);}
.akh-maat__choice.is-on{border-color:var(--blue); background:var(--blue-soft);}
.akh-maat__choice svg{width:34px; height:34px; color:var(--blue);}
/* Voortgang bij veel stappen + overzicht van ingevulde maten */
.akh-maat__progress{flex:0 0 96px; height:5px; border-radius:99px; background:#dbe7ee; overflow:hidden; display:block;}
.akh-maat__progress i{display:block; height:100%; background:var(--blue); border-radius:99px; transition:width .25s ease;}
.akh-maat__mine{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 12px;}
.akh-maat__mine span{font-size:12.5px; color:var(--muted); margin-right:2px;}
.akh-maat__mine button{border:1px solid var(--blue-line); background:#fff; border-radius:99px; padding:4px 10px; font:inherit; font-size:12.5px; color:var(--muted); cursor:pointer; transition:border-color .12s ease, background .12s ease;}
.akh-maat__mine button b{color:var(--ink); font-weight:700;}
.akh-maat__mine button:hover{border-color:var(--blue); background:var(--blue-soft);}
.akh-maat__choices:has(> :nth-child(5)){grid-template-columns:1fr 1fr 1fr;}
.akh-maat a{color:var(--blue-dark) !important;}
@media (max-width:560px){
  .akh-maat__fig{flex:1 1 100%; padding:14px 10px 6px;}
  .akh-maat__fig svg{max-width:150px;}
  .akh-maat__main{padding:16px 16px 18px;}
  .akh-maat__title{font-size:17px;}
}