/* Adviseurbalk op de categoriepagina's (coolioo-adviseur 0.3). Alles met .cadv-cat
   ervoor en !important: het Coolioo Categories Framework zet .coo-root button en
   input zelf met !important, zonder deze regels zou de oranje knop wegvallen. */
.cadv-cat{box-sizing:border-box!important;width:100%!important;margin:0 0 22px!important;background:rgba(255,255,255,.94)!important;border:1px solid rgba(0,88,153,.12)!important;border-radius:22px!important;padding:14px!important;box-shadow:0 16px 40px rgba(14,28,56,.10)!important;font-family:'DM Sans',system-ui,sans-serif!important;text-align:left!important}
.cadv-cat *{box-sizing:border-box!important}
.cadv-cat .cadv-cat-form{display:flex!important;gap:10px!important;align-items:stretch!important;margin:0!important;padding:0!important}
.cadv-cat .cadv-cat-sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
.cadv-cat .cadv-cat-form input{flex:1 1 auto!important;min-width:0!important;width:auto!important;height:54px!important;margin:0!important;border-radius:14px!important;border:1.5px solid rgba(0,88,153,.22)!important;background:#fff!important;padding:0 18px!important;font-family:inherit!important;font-size:16px!important;color:#0f2235!important;outline:none!important;box-shadow:none!important;transition:border-color .15s,box-shadow .15s!important}
.cadv-cat .cadv-cat-form input:focus{border-color:#005899!important;box-shadow:0 0 0 4px rgba(0,88,153,.12)!important}
.cadv-cat .cadv-cat-form input::placeholder{color:#7d8fa1!important;opacity:1!important}
.cadv-cat .cadv-cat-knop{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:54px!important;padding:0 22px!important;border:0!important;border-radius:14px!important;background:#ff5722!important;color:#fff!important;font-family:'Sora','DM Sans',sans-serif!important;font-weight:800!important;font-size:15px!important;line-height:1!important;white-space:nowrap!important;cursor:pointer!important;box-shadow:0 10px 24px rgba(255,87,34,.28)!important;transition:background .15s!important}
.cadv-cat .cadv-cat-knop-lang{display:none!important}
.cadv-cat .cadv-cat-knop:hover{background:#e94713!important;color:#fff!important}
.cadv-cat .cadv-cat-knop:focus-visible{outline:3px solid rgba(0,88,153,.35)!important;outline-offset:2px!important}
.cadv-cat .cadv-cat-knop svg{width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:2.2!important;stroke-linecap:round!important;stroke-linejoin:round!important;display:inline-block!important}
.cadv-cat .cadv-cat-voorbeelden{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:6px 8px!important;margin:10px 2px 0!important}
.cadv-cat .cadv-cat-voorbeelden span{font-size:12.5px!important;font-weight:600!important;color:#5c6f84!important}
.cadv-cat .cadv-cat-voorbeelden button{min-height:36px!important;padding:6px 12px!important;border-radius:999px!important;border:1px solid rgba(0,88,153,.18)!important;background:#f3f7fb!important;color:#0f2235!important;font-family:inherit!important;font-size:13px!important;font-weight:600!important;line-height:1.3!important;cursor:pointer!important;transition:border-color .15s,background .15s!important}
.cadv-cat .cadv-cat-voorbeelden button:hover{border-color:#ff5722!important;background:#fff4ef!important}
.cadv-cat .cadv-cat-voorbeelden button:focus-visible{outline:3px solid rgba(0,88,153,.35)!important;outline-offset:2px!important}
.cadv-cat .cadv-cat-uitleg{margin:8px 4px 0!important;padding:0!important;font-size:12.5px!important;line-height:1.4!important;color:#5c6f84!important}
@media (max-width:760px){
  .cadv-cat{padding:10px!important;border-radius:18px!important;margin-bottom:16px!important}
  .cadv-cat .cadv-cat-form{flex-direction:column!important;gap:8px!important}
  .cadv-cat .cadv-cat-form input{flex:0 0 auto!important;width:100%!important;height:50px!important;padding:0 14px!important}
  .cadv-cat .cadv-cat-knop{width:100%!important;min-height:50px!important;padding:0 18px!important;font-size:15px!important}
  .cadv-cat .cadv-cat-knop-kort{display:none!important}
  .cadv-cat .cadv-cat-knop-lang{display:inline!important}
  .cadv-cat .cadv-cat-voorbeelden{flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;padding-bottom:2px!important}
  .cadv-cat .cadv-cat-voorbeelden::-webkit-scrollbar{display:none!important}
  .cadv-cat .cadv-cat-voorbeelden button{flex:0 0 auto!important;white-space:nowrap!important}
}
/* 0.4.0: dezelfde balk op informatiepagina's en de 404-pagina */
.cadv-cat.cadv-info{max-width:760px!important;margin:24px 0!important}
.cadv-cat .cadv-cat-kop{margin:2px 4px 10px!important;padding:0!important;font-family:'Sora','DM Sans',sans-serif!important;font-weight:800!important;font-size:17px!important;line-height:1.3!important;color:#0f2235!important}
@media (max-width:760px){.cadv-cat .cadv-cat-kop{font-size:15.5px!important}}

/* 0.5.0: knop bij de uitslag; het paneel klapt pas na een klik open */
.cadv-cat.cadv-dash{max-width:none!important;margin:16px 0 0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
@media (min-width:761px){.cadv-cat .cadv-dash-open{width:auto!important}}
.cadv-cat .cadv-dash-paneel{margin:0!important;padding:14px!important;background:#fff!important;border:1px solid rgba(0,88,153,.12)!important;border-radius:18px!important;box-shadow:0 16px 40px rgba(14,28,56,.10)!important}
.cadv-cat .cadv-dash-paneel[hidden],.cadv-cat button.cadv-dash-open[hidden]{display:none!important}
.cadv-cat .cadv-dash-let{margin:0 4px 12px!important;padding:10px 12px!important;border-radius:12px!important;background:#fffbea!important;border:1px solid #f1e3a6!important;color:#4a3d0a!important;font-size:13.5px!important;line-height:1.45!important}

/* 0.8.1: kaart bovenaan het uitslagdashboard, in de stijl van het dashboard */
.cadv-cat.cadv-dash-inline{max-width:none!important;margin:14px 0 0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
.cadv-dash-kaart .cdx-card__sub{margin-bottom:0}
.cadv-cat.cadv-dash-inline .cadv-dash-let{margin:0 0 12px!important}

/* 0.8.3: op het uitslagdashboard krijgt het invulveld alle ruimte en is de knop maar zo breed
   als zijn tekst. Extra specifiek en met !important, omdat de stijl van het dashboard het veld
   anders smal houdt en de knop oprekt. */
@media (min-width:761px){
  .cdx-card.cadv-dash-kaart .cadv-cat.cadv-dash-inline .cadv-cat-form{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;width:100%!important;max-width:none!important}
  .cdx-card.cadv-dash-kaart .cadv-cat.cadv-dash-inline .cadv-cat-form input{flex:1 1 0%!important;width:auto!important;min-width:0!important;max-width:none!important}
  .cdx-card.cadv-dash-kaart .cadv-cat.cadv-dash-inline .cadv-cat-form .cadv-cat-knop{flex:0 0 auto!important;width:auto!important;min-width:0!important;max-width:none!important;padding:0 22px!important}
}
@media (max-width:760px){
  .cdx-card.cadv-dash-kaart .cadv-cat.cadv-dash-inline .cadv-cat-form input,
  .cdx-card.cadv-dash-kaart .cadv-cat.cadv-dash-inline .cadv-cat-form .cadv-cat-knop{flex:0 0 auto!important;width:100%!important;max-width:none!important}
}