/* ============================================================================
   AKH ENGINE — gedeelde styling voor alle All4Fysio keuzehulpen
   Eén bestand voor alle categorieën. Wijzig hier, niet per keuzehulp-CMS Block.
   Bij een wijziging: upload onder een NIEUWE bestandsnaam (bv. akh-engine-v3.css)
   en werk de <link>-verwijzing bij — nooit dit bestand op dezelfde naam
   overschrijven, anders blijven browsers de oude, gecachete versie tonen.

   NIEUW IN v2 (t.o.v. akh-engine-v1.css) — compactere, rustigere lijst-
   opmaak, gericht op vragen met veel korte tekst-only opties:
   - .akh-opts: iets kleinere gap tussen de knoppen (9px -> 7px).
   - .akh-opt: iets minder verticale padding (13px -> 11px boven/onder).
   - Nieuwe modifier .akh-opt--compact: extra verkorte padding voor opties
     zonder infotekst (geen `d`-veld) — wordt automatisch toegevoegd door
     akh-engine-v6.js of hoger (v5 en ouder kennen deze modifier niet en
     laten hem simpelweg ongebruikt; geen fout, alleen geen effect).
   Aanleiding: een lange lijst korte, zelfverklarende opties (bv. losse
   aandoeningen/blessures) oogde onnodig ruim zonder duidelijke reden.
   ============================================================================ */

/* ---------------- CTA-blok ---------------- */
.artie-keuzehulp{
  --orange:#EE7A1E; --orange-2:#F9A24A; --orange-dark:#D96A12;
  --ink:#12263A; --muted:#5C6B7A; --border:#F0E7DB;
  display:flex;align-items:center;gap:22px;
  width:100%;box-sizing:border-box;padding:16px 24px;
  border:1px solid var(--border);border-radius:18px;
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(249,162,74,.16), rgba(249,162,74,0) 60%),
    linear-gradient(135deg,#FFF5EA 0%, #FFFDFB 72%);
  box-shadow:0 10px 26px -16px rgba(18,38,58,.28);
  font-family:inherit;margin:12px 0 16px;
}
.artie-keuzehulp *{box-sizing:border-box;}
.artie-keuzehulp__left{display:flex;align-items:center;gap:18px;flex:1 1 auto;min-width:0;}
.artie-keuzehulp__figure{position:relative;width:84px;height:84px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.artie-keuzehulp__halo{position:absolute;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle,rgba(238,122,30,.22),rgba(238,122,30,0) 65%);animation:ak-pulse 3.4s ease-in-out infinite;z-index:0;}
.artie-keuzehulp__track{position:absolute;width:88px;height:88px;border-radius:50%;border:2px solid rgba(238,122,30,.18);z-index:1;}
.artie-keuzehulp__orbit{position:absolute;width:88px;height:88px;z-index:1;animation:ak-spin 3.4s linear infinite;}
.artie-keuzehulp__orbit-dot{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px rgba(238,122,30,.85);}
.artie-keuzehulp__orbit-dot--2{top:auto;bottom:-6px;width:8px;height:8px;background:var(--orange-2);box-shadow:0 0 9px rgba(249,162,74,.8);}
.artie-keuzehulp__img{position:relative;z-index:2;display:block;height:78px;width:auto;animation:ak-bob 3.4s ease-in-out infinite;filter:drop-shadow(0 10px 12px rgba(18,38,58,.20));}
.artie-keuzehulp__body{min-width:0;}
.artie-keuzehulp__eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--orange);margin-bottom:4px;}
.artie-keuzehulp__title{font-size:20px;line-height:1.2;font-weight:800;color:var(--ink);margin:0 0 4px;}
.artie-keuzehulp__text{font-size:15px;line-height:1.45;color:var(--muted);margin:0;}
.artie-keuzehulp__button{flex-shrink:0;display:inline-flex;align-items:center;gap:9px;border:none;cursor:pointer;white-space:nowrap;background:var(--orange);color:#fff;font:inherit;font-weight:700;font-size:15.5px;border-radius:9999px;padding:13px 24px;min-height:48px;box-shadow:0 10px 22px -12px rgba(238,122,30,.6);transition:background .18s ease, transform .1s ease, box-shadow .18s ease;}
.artie-keuzehulp__button:hover{background:var(--orange-dark);box-shadow:0 12px 26px -12px rgba(238,122,30,.7);}
.artie-keuzehulp__button:active{transform:scale(.97);}
.artie-keuzehulp__button svg{transition:transform .18s ease;}
.artie-keuzehulp__button:hover svg{transform:translateX(3px);}
@keyframes ak-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes ak-spin{to{transform:rotate(360deg);}}
@keyframes ak-pulse{0%,100%{opacity:.7;transform:scale(1);}50%{opacity:1;transform:scale(1.05);}}
@media (max-width:640px){
  .artie-keuzehulp{flex-direction:column;align-items:stretch;gap:14px;padding:18px;}
  .artie-keuzehulp__left{gap:14px;}
  .artie-keuzehulp__figure{width:62px;height:62px;}
  .artie-keuzehulp__halo{width:72px;height:72px;}
  .artie-keuzehulp__track,.artie-keuzehulp__orbit{width:66px;height:66px;}
  .artie-keuzehulp__orbit-dot{width:10px;height:10px;top:-5px;}
  .artie-keuzehulp__orbit-dot--2{width:7px;height:7px;bottom:-5px;}
  .artie-keuzehulp__img{height:58px;}
  .artie-keuzehulp__title{font-size:17px;}
  .artie-keuzehulp__text{font-size:14.5px;}
  .artie-keuzehulp__button{width:100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .artie-keuzehulp__img,.artie-keuzehulp__orbit,.artie-keuzehulp__halo{animation:none !important;}
}

/* ---------------- Sidebar-drawer ---------------- */
.akh, .akh *{box-sizing:border-box;}
.akh{
  --orange:#EE7A1E; --orange-dark:#D96A12; --green:#55b934; --green-dark:#469a29;
  --ink:#12263A; --muted:#5C6B7A; --faint:#94a2b3; --border:#eee6da; --bg:#fbfaf8;
  /* Instelbaar per keuzehulp via AKHKeuzehulp.init({ saleBadge: { color: '#...' } });
     wordt als inline CSS-variabele op dit element gezet. Standaardwaarde hier. */
  --sale-badge-bg:#f94c04;
  position:fixed; inset:0; z-index:2147483000; pointer-events:none;
}
.akh.is-open{pointer-events:auto;}
.akh__backdrop{position:absolute; inset:0; background:rgba(18,38,58,.42); opacity:0; transition:opacity .25s ease;}
.akh.is-open .akh__backdrop{opacity:1;}
.akh__panel{
  position:absolute; top:0; right:0; height:100%; width:420px; max-width:92vw;
  background:#fff; box-shadow:-16px 0 40px -18px rgba(18,38,58,.35);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.32,.72,0,1);
  font-family:inherit; color:var(--ink);
}
.akh.is-open .akh__panel{transform:translateX(0);}
.akh__header{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); flex-shrink:0;}
.akh__header-title{display:flex; align-items:center; gap:8px; font-weight:800; font-size:16px; color:var(--orange);}
.akh__close{background:#f5f1ea; border:0; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted);}
.akh__close:hover{background:#efe8dc; color:var(--ink);}
.akh__body{flex:1; overflow-y:auto; padding:22px 22px 28px;}

.akh-bar{height:5px;background:#f1ece2;border-radius:99px;overflow:hidden;margin-bottom:18px;}
.akh-bar>i{display:block;height:100%;background:var(--orange);border-radius:99px;transition:width .3s ease;}
.akh-crumb{font-size:12px;color:var(--muted);margin:0 0 18px;line-height:1.5;min-height:1.2em;}
.akh-preset-list{list-style:none;margin:0 0 18px;padding:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;}
.akh-preset-list li{display:flex;align-items:baseline;gap:8px;padding:11px 14px;font-size:13.5px;border-bottom:1px solid var(--border);}
.akh-preset-list li:last-child{border-bottom:none;}
.akh-preset-list__label{color:var(--muted);font-weight:600;flex-shrink:0;}
.akh-preset-list__value{color:var(--ink);font-weight:700;text-align:left;}
.akh-crumb b{color:var(--ink);font-weight:700;}
.akh-q{font-size:19px;font-weight:800;margin:14px 0 6px;line-height:1.32;}
.akh-sub{font-size:13.5px;color:var(--muted);margin:0 0 18px;line-height:1.45;}
.akh-opts{display:flex;flex-direction:column;gap:7px;}
.akh-opt{
  text-align:left;width:100%;background:#fff;border:1.5px solid var(--border);border-radius:12px;
  padding:11px 15px;font:inherit;font-size:14.5px;font-weight:700;color:var(--ink);cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
}
.akh-opt small{display:block;font-weight:500;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4;}
/* v2: extra compacte variant voor opties zonder infotekst (bv. een lange
   lijst zelfverklarende aandoeningen, of een kaal Ja/Nee-gate) — wordt
   automatisch toegevoegd door akh-engine-v6.js of hoger, zie boven. */
.akh-opt.akh-opt--compact{padding:9px 15px;}
.akh-opt:hover{border-color:var(--orange);background:#fff6ec;}
.akh-opt.akh-skip{border-style:dashed;color:var(--faint);font-weight:500;}
.akh-opt.akh-skip:hover{border-color:var(--faint);background:#faf9f6;}
.akh-opt.akh-opt--img{display:flex;align-items:center;gap:13px;}
.akh-opt-thumb{width:56px;height:56px;border-radius:10px;background:#f5f1ea;flex-shrink:0;background-size:contain;background-position:center;background-repeat:no-repeat;}
.akh-opt-thumb.akh-skeleton{background-color:#efe9dc;background-image:linear-gradient(90deg,#efe9dc 25%,#f8f4ec 37%,#efe9dc 63%);background-size:400% 100%;animation:akh-shimmer 1.4s ease-in-out infinite;}
.akh-card__img.akh-skeleton{background:linear-gradient(90deg,#f1ede4 25%,#faf8f3 37%,#f1ede4 63%);background-size:400% 100%;animation:akh-shimmer 1.4s ease-in-out infinite;}
@keyframes akh-shimmer{0%{background-position:150% 0;}100%{background-position:-150% 0;}}
@media (prefers-reduced-motion:reduce){.akh-skeleton{animation:none !important;}}
.akh-opt-body{flex:1;min-width:0;display:flex;flex-direction:column;}
.akh-opt-label{font-weight:700;font-size:14.5px;color:var(--ink);}
.akh-opt.akh-opt--icon{display:flex;align-items:center;gap:13px;}
.akh-opt-icon{width:56px;height:56px;border-radius:10px;background:#fff3e8;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.akh-opt-icon svg{width:26px;height:26px;color:var(--orange);}
.akh-foot{display:flex;justify-content:space-between;align-items:center;margin-top:20px;}
.akh-back{background:none;border:0;color:var(--faint);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:2px;}
.akh-back:hover{color:var(--ink);}
.akh-back[hidden]{visibility:hidden;}
.akh-count{font-size:11.5px;color:var(--faint);font-weight:600;}
.akh-loading{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);padding:10px 0;}
.akh-spin{width:16px;height:16px;border-radius:50%;border:2px solid #e7dfd0;border-top-color:var(--orange);animation:akh-rot .7s linear infinite;flex-shrink:0;}
@keyframes akh-rot{to{transform:rotate(360deg);}}

.akh-res-head{margin-bottom:16px;}
.akh-res-head h3{font-size:19px;font-weight:800;margin:0 0 4px;}
.akh-res-head p{font-size:13px;color:var(--muted);margin:0;line-height:1.45;}
.akh-tags{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px;}
.akh-tag{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--ink);}
.akh-tag i{width:18px; height:18px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.akh-tag i svg{width:10px; height:10px;}
.akh-list{display:flex; flex-direction:column; gap:12px; margin:0 0 20px;}
.akh-card{
  display:flex; align-items:flex-start; gap:14px; padding:16px; border:1px solid var(--border); border-radius:16px;
  text-decoration:none !important; color:inherit !important;
}
.akh-card:hover{border-color:#d8cdb8; background:#fbfaf8;}
.akh-card__img{width:84px; height:84px; object-fit:contain; border-radius:10px; background:#fff; flex-shrink:0;}
.akh-card__body{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.akh-card__badge{
  align-self:flex-start; background:#eaf6fb; color:#1a7ba3 !important; font-size:11px; font-weight:800;
  padding:4px 10px; border-radius:999px; white-space:nowrap;
}
.akh-card__name{
  font-size:14px; font-weight:700; color:var(--ink) !important; margin:0; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.akh-card__price-row{display:flex; align-items:center; gap:6px;}
.akh-card__price{font-size:13px; color:var(--muted) !important; font-weight:700; margin:0;}
.akh-card__old-price{font-size:11.5px; color:var(--faint) !important; font-weight:600; text-decoration:line-through; margin:0;}
.akh-card__sale-badge{background:var(--sale-badge-bg,#f94c04); color:#fff !important; font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:999px; white-space:nowrap; flex-shrink:0;}
.akh-card__rating{display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--ink) !important;}
.akh-stars{display:inline-flex; align-items:center; gap:1px;}
.akh-star{position:relative; width:13px; height:13px; flex-shrink:0;}
.akh-star-bg{position:absolute; top:0; left:0; width:13px; height:13px; color:#e3ddd0;}
.akh-star-fill{position:absolute; top:0; left:0; height:13px; overflow:hidden;}
.akh-star-fill svg{width:13px; height:13px; display:block; color:#f5a623;}
.akh-card__rating-count{font-weight:600; color:var(--muted) !important;}
.akh-card__cta{
  align-self:flex-start; margin-top:2px; background:var(--green); color:#fff !important; font-size:12.5px; font-weight:700;
  padding:9px 16px; border-radius:999px; white-space:nowrap; text-decoration:none !important;
}
.akh-card:hover .akh-card__cta{background:var(--green-dark);}
.akh-card__variants{display:flex; align-items:center; gap:6px; margin-top:2px;}
.akh-card__variants-label{font-size:11px; color:var(--muted) !important; font-weight:600; margin-right:2px;}
.akh-card__variant{
  width:30px; height:30px; border-radius:8px; border:1.5px solid var(--border); background:#fff;
  padding:2px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.akh-card__variant img{width:100%; height:100%; object-fit:contain; display:block;}
.akh-card__variant:hover{border-color:var(--orange);}
.akh-card__variants-more{font-size:11px; color:var(--muted) !important; font-weight:700; padding:0 4px;}
.akh-all{display:flex; align-items:center; justify-content:center; gap:6px; border:1.5px solid var(--border); color:var(--ink) !important; text-decoration:none !important; font-weight:700; font-size:13.5px; padding:12px; border-radius:11px; margin-bottom:10px;}
.akh-all:hover{border-color:var(--faint);}
.akh-empty{text-align:center;padding:14px 4px 6px;}
.akh-restart{display:block; width:100%; background:none; border:0; color:var(--faint); font:inherit; font-size:12.5px; font-weight:600; text-align:center; padding:6px; cursor:pointer;}
.akh-restart:hover{color:var(--ink);}
@media (max-width:480px){.akh__panel{width:100%; max-width:100%;}}