/* De hulpknop en het supportpaneel.
   Hetzelfde paneel draait zwevend op de site en als tab in het account; de
   zwevende variant krijgt de extra klasse. */

.grm-sup__knop{
  position:fixed;right:24px;bottom:24px;z-index:2147483000;
  display:inline-flex;align-items:center;justify-content:center;
  width:60px;height:60px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(160deg,#1A5089 0%,var(--grm-brand,#103A63) 55%,#0B2A49 100%);
  color:#fff;
  box-shadow:0 14px 30px -8px rgba(4,30,66,.55),0 3px 10px rgba(4,30,66,.14);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.grm-sup__knop:hover{transform:translateY(-2px);filter:brightness(1.07)}
.grm-sup__knop .material-symbols-rounded{font-size:27px}
.grm-sup__ic-dicht{display:none}
body.grm-sup-open .grm-sup__ic-open{display:none}
body.grm-sup-open .grm-sup__ic-dicht{display:inline-flex}
.grm-sup__teller{
  position:absolute;top:4px;right:4px;min-width:21px;height:21px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--grm-accent,#1668C7);color:#fff;
  font-size:11.5px;font-weight:800;box-shadow:0 0 0 2px #fff;
}
@media(max-width:840px){.grm-sup__knop{right:20px;bottom:20px;width:56px;height:56px}}

/* De knop wijkt zodra er iets over het scherm ligt: de menulade, een
   categoriepaneel, het filterpaneel of de zoekhulp. Een zwevende knop BOVEN een
   open overlay leest als een knop van die overlay, en op een telefoon dekt hij
   er de sluitknop van af. De eerste twee standen zet de site als klasse op de
   body; voor de andere twee kijkt :has() naar de open staat van het element
   zelf. */
body.grm-paneel-open .grm-sup__knop,
body.grm-filters-open .grm-sup__knop,
body:has(#grm-h-drawer.is-open) .grm-sup__knop,
body:has(.grm-filters.is-open) .grm-sup__knop,
body:has(.grm-match:not([hidden])) .grm-sup__knop{display:none}

/* De mobiele tabbalk staat onderaan; de knop hoort daarboven en niet erop. */
@media(max-width:900px){
  body.grm-has-tabbar .grm-sup__knop{bottom:82px}
}

/* De laag eromheen vangt de klik naast het paneel. Hij laat muisklikken door
   waar hij zelf doorzichtig is, anders zou de halve site onklikbaar zijn
   zolang het paneel openstaat. */
.grm-sup__laag{
  position:fixed;inset:0;z-index:2147482900;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:flex-end;
  padding:0 24px 100px;
}
.grm-sup__laag[hidden]{display:none}

.grm-sup--zwevend{
  pointer-events:auto;
  width:100%;max-width:392px;max-height:min(620px,calc(100vh - 150px));
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:20px;
  box-shadow:0 28px 70px -20px rgba(4,30,66,.5),0 4px 14px rgba(4,30,66,.12);
  animation:grm-sup-op .2s ease;
}
@keyframes grm-sup-op{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* De kop. */
.grm-sup__kop{
  display:flex;align-items:center;gap:11px;padding:15px 15px 14px;
  background:linear-gradient(160deg,#1A5089 0%,var(--grm-brand,#103A63) 52%,#0B2A49 100%);
  color:#fff;
}
.grm-sup__merk{
  width:40px;height:40px;flex:0 0 auto;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);
}
.grm-sup__merk svg{display:block;width:26px;height:26px}
.grm-sup__koptxt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.grm-sup__koptxt strong{font-size:15.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grm-sup__koptxt span{margin-top:2px;font-size:12px;color:rgba(255,255,255,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grm-sup__koptxt span:empty{display:none}
.grm-sup__terugkop,.grm-sup__sluit{
  width:34px;height:34px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;
}
.grm-sup__terugkop:hover,.grm-sup__sluit:hover{background:rgba(255,255,255,.3)}
.grm-sup__terugkop[hidden]{display:none}
.grm-sup__terugkop .material-symbols-rounded,.grm-sup__sluit .material-symbols-rounded{font-size:19px}

/* De stappen. Er is er altijd precies een zichtbaar. */
.grm-sup__body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px 12px}
.grm-sup__stap[hidden]{display:none}
.grm-sup__stap--vol{padding:0;margin:-16px}

/* Het vraagformulier. */
.grm-sup__stap label{display:block;margin-bottom:13px;font-size:12.5px;font-weight:800;color:var(--grm-ink,#041E42)}
.grm-sup__req{color:var(--grm-danger-text,#8A1C1C)}
.grm-sup__stap input[type="text"],.grm-sup__stap input[type="email"],.grm-sup__stap select,.grm-sup__stap textarea{
  width:100%;box-sizing:border-box;margin-top:6px;padding:11px 13px;
  font:inherit;font-size:13.5px;font-weight:400;
  border:1px solid var(--grm-line,#D7DEE7);border-radius:11px;
  background:#fff;color:var(--grm-ink,#041E42);
}
.grm-sup__stap input:focus,.grm-sup__stap select:focus,.grm-sup__stap textarea:focus{
  outline:none;border-color:var(--grm-accent,#1668C7);box-shadow:0 0 0 3px rgba(22,104,199,.12);
}
.grm-sup__stap textarea{resize:vertical;min-height:88px}
/* Een kale keuzelijst naast twee afgeronde velden ziet eruit alsof hij van een
   ander formulier komt. Het pijltje is een achtergrond en geen icoonfont: die
   laadt hier niet altijd op tijd. */
.grm-sup__stap select{
  appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2355636E'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:18px 18px;
}
.grm-sup__uitleg{margin:0 0 14px;font-size:12.5px;line-height:1.6;color:var(--grm-ink-500,#55636E)}
.grm-sup__note{
  display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;padding:10px 12px;
  background:var(--grm-brand-50,#EDF2F8);border:1px solid #D7DEE7;border-radius:11px;
  font-size:12.5px;line-height:1.5;color:var(--grm-ink,#041E42);
}
.grm-sup__note .material-symbols-rounded{font-size:16px;color:var(--grm-accent,#1668C7)}
.grm-sup__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.grm-sup__fout{
  margin:0 0 12px;padding:10px 12px;border-radius:10px;
  background:#FBE9E9;font-size:12.5px;color:var(--grm-danger-text,#8A1C1C);
}
.grm-sup__fout[hidden]{display:none}
.grm-sup__verstuur{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px;border:0;border-radius:12px;cursor:pointer;
  font:inherit;font-size:14px;font-weight:800;
  background:var(--grm-accent,#1668C7);color:#fff;
  transition:transform .15s ease,filter .15s ease;
}
.grm-sup__verstuur:hover{transform:translateY(-1px);filter:brightness(1.06)}
.grm-sup__verstuur:disabled{opacity:.6;cursor:default;transform:none}
.grm-sup__verstuur .material-symbols-rounded{font-size:18px}
.grm-sup__verstuur--klein{width:auto;padding:10px 18px;font-size:13px}
.grm-sup__wegen{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.grm-sup__weg{
  display:flex;align-items:center;gap:8px;width:100%;padding:9px 4px;
  border:0;background:none;cursor:pointer;text-align:left;
  font:inherit;font-size:12.5px;font-weight:700;color:var(--grm-accent,#1668C7);
}
.grm-sup__weg:hover{text-decoration:underline}
.grm-sup__weg .material-symbols-rounded{font-size:17px}

/* De veelgestelde vragen. */
.grm-sup__zoek{
  display:flex;align-items:center;gap:9px;margin-bottom:14px;padding:0 13px;
  border:1px solid var(--grm-line,#D7DEE7);border-radius:12px;background:#fff;
}
.grm-sup__zoek:focus-within{border-color:var(--grm-accent,#1668C7);box-shadow:0 0 0 3px rgba(22,104,199,.12)}
.grm-sup__zoek .material-symbols-rounded{font-size:18px;color:var(--grm-ink-400,#7A8794)}
.grm-sup__zoek input{
  flex:1;min-width:0;margin:0;padding:12px 0;border:0;outline:none;background:none;
  font:inherit;font-size:13.5px;color:var(--grm-ink,#041E42);
}
.grm-sup__faqs{display:flex;flex-direction:column;gap:8px}
.grm-sup__faqcat{
  display:flex;align-items:center;gap:7px;margin:14px 2px 2px;
  font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--grm-ink-500,#55636E);
}
.grm-sup__faqs>.grm-sup__faqcat:first-child{margin-top:0}
.grm-sup__faqcat .material-symbols-rounded{font-size:15px;color:var(--grm-brand,#103A63)}
.grm-sup__faq{border:1px solid var(--grm-brand-50,#EDF2F8);border-radius:12px;overflow:hidden}
.grm-sup__faq-v{
  display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;
  border:0;background:#fff;cursor:pointer;text-align:left;
  font:inherit;font-size:13px;font-weight:700;color:var(--grm-ink,#041E42);
}
.grm-sup__faq-v:hover{background:var(--grm-brand-50,#EDF2F8)}
.grm-sup__faq-v>span:first-child{flex:1;min-width:0}
.grm-sup__faq-v .material-symbols-rounded{font-size:17px;flex:0 0 auto;color:var(--grm-ink-400,#7A8794);transition:transform .2s}
.grm-sup__faq.is-open .grm-sup__faq-v .material-symbols-rounded{transform:rotate(180deg)}
.grm-sup__faq-a{display:none;padding:0 14px 14px;font-size:12.5px;line-height:1.6;color:var(--grm-ink-500,#55636E)}
.grm-sup__faq.is-open .grm-sup__faq-a{display:block}
.grm-sup__faq-a p{margin:0 0 8px}
.grm-sup__faq-a p:last-child{margin-bottom:0}
.grm-sup__laden,.grm-sup__niets{padding:22px 8px;text-align:center;font-size:13px;line-height:1.5;color:var(--grm-ink-500,#55636E)}
.grm-sup__niets[hidden]{display:none}
.grm-sup__meer,.grm-sup__helplink{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;box-sizing:border-box;margin-top:10px;padding:11px;
  border-radius:12px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;
  text-decoration:none;
}
.grm-sup__meer{border:1px solid var(--grm-line,#D7DEE7);background:#fff;color:var(--grm-ink,#041E42)}
.grm-sup__meer:hover{border-color:var(--grm-accent,#1668C7);background:var(--grm-brand-50,#EDF2F8)}
.grm-sup__meer[hidden]{display:none}
.grm-sup__helplink{border:0;background:var(--grm-brand-50,#EDF2F8);color:var(--grm-brand,#103A63)}
.grm-sup__helplink:hover{background:#DFE9F3}
.grm-sup__meer .material-symbols-rounded,.grm-sup__helplink .material-symbols-rounded{font-size:16px}
.grm-sup__vraagblok{
  margin-top:16px;padding:14px;text-align:center;
  background:var(--grm-brand-50,#EDF2F8);border:1px solid #DFE9F3;border-radius:14px;
}
.grm-sup__vraagblok span{display:block;margin-bottom:9px;font-size:12.5px;color:var(--grm-ink-500,#55636E)}

/* De lijst met eerdere vragen. */
.grm-sup__lijst{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.grm-sup__rij{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;
  width:100%;text-align:left;cursor:pointer;
  padding:11px 14px;background:#fff;color:var(--grm-ink,#041E42);
  border:1px solid var(--grm-line,#D7DEE7);border-radius:12px;
}
.grm-sup__rij:hover{border-color:var(--grm-accent,#1668C7)}
.grm-sup__rij.is-nieuw{border-color:var(--grm-accent,#1668C7);box-shadow:0 0 0 3px rgba(22,104,199,.10)}
.grm-sup__onderwerp{font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grm-sup__datum{grid-column:2;grid-row:1;font-size:12px;color:var(--grm-ink-400,#7A8794)}
.grm-sup__stand{grid-column:1;font-size:12.5px;font-weight:600;color:var(--grm-ink-500,#55636E)}
.grm-sup__stand--beantwoord{color:var(--grm-accent,#1668C7)}
.grm-sup__stand--gesloten{color:var(--grm-ink-400,#7A8794)}

/* Het gesprek zelf. Deze regels staan hier en niet alleen in het portaal:
   het venster draait ook in de zwevende knop, en daar wordt het portaalblad
   niet geladen. Zonder deze regels stonden de bellen als kale tekst onder
   elkaar. */
.grm-sup__venster{display:flex;flex-direction:column;min-height:0}
.grm-sup__venster .grm-chat__kop{
  display:flex;align-items:center;gap:9px;padding:12px 14px;
  border-bottom:1px solid var(--grm-line,#D7DEE7);background:#fff;
}
.grm-sup__venster .grm-chat__kop strong{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grm-sup__venster .grm-chat__over{font-size:12px;color:var(--grm-ink-500,#55636E)}
.grm-sup__terug{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;flex:0 0 auto;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--grm-brand-50,#EDF2F8);color:var(--grm-brand,#103A63);
}
.grm-sup__venster .grm-chat__stroom{
  display:flex;flex-direction:column;gap:8px;padding:16px;
  min-height:180px;max-height:min(46vh,340px);overflow-y:auto;
  background:var(--grm-rij-zacht,#F6F9FC);
}
.grm-sup__venster .grm-chat__regel{display:flex}
.grm-sup__venster .grm-chat__regel.is-eigen{justify-content:flex-end}
.grm-sup__venster .grm-chat__bel{
  max-width:82%;padding:10px 13px;border-radius:14px;
  background:#fff;border:1px solid var(--grm-line,#D7DEE7);
  font-size:13px;line-height:1.5;color:var(--grm-ink,#041E42);
}
.grm-sup__venster .grm-chat__regel.is-eigen .grm-chat__bel{
  background:var(--grm-brand,#103A63);border-color:var(--grm-brand,#103A63);color:#fff;
}
.grm-sup__venster .grm-chat__bel time{display:block;margin-top:4px;font-size:11px;opacity:.7}
.grm-sup__venster .grm-chat__leeg{padding:20px 8px;text-align:center;font-size:13px;color:var(--grm-ink-500,#55636E)}
.grm-sup__venster .grm-chat__invoer{display:flex;gap:8px;align-items:flex-end;padding:12px 14px;background:#fff}
.grm-sup__venster .grm-chat__invoer textarea{
  flex:1;min-width:0;box-sizing:border-box;margin:0;padding:10px 12px;resize:none;
  font:inherit;font-size:13.5px;
  border:1px solid var(--grm-line,#D7DEE7);border-radius:11px;background:#fff;color:var(--grm-ink,#041E42);
}
.grm-sup__venster .grm-chat__invoer button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;
  padding:11px 14px;border:0;border-radius:11px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:800;
  background:var(--grm-accent,#1668C7);color:#fff;
}
.grm-sup__venster .grm-chat__stand{margin:0;padding:0 14px 12px;font-size:12px;color:var(--grm-ink-500,#55636E)}

/* De bevestiging. */
.grm-sup__klaar{text-align:center;padding:16px 8px}
.grm-sup__klaar-ic{
  width:62px;height:62px;margin:6px auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--grm-brand-50,#EDF2F8);color:var(--grm-accent,#1668C7);
}
.grm-sup__klaar-ic .material-symbols-rounded{font-size:32px}
.grm-sup__klaar strong{display:block;margin-bottom:8px;font-size:16px;color:var(--grm-ink,#041E42)}
.grm-sup__klaar p{margin:0 0 18px;font-size:13px;line-height:1.55;color:var(--grm-ink-500,#55636E)}

/* Op een telefoon vult het paneel het scherm. Een chatvenster van tweehonderd
   pixels hoog met een toetsenbord eronder is niet te gebruiken. */
@media(max-width:700px){
  .grm-sup__laag{padding:0}
  .grm-sup--zwevend{
    max-width:none;max-height:none;height:100%;border-radius:0;animation:none;
  }
  .grm-sup__venster .grm-chat__stroom{max-height:none;flex:1 1 auto}
  .grm-sup__stap--vol{height:100%}
  .grm-sup__stap--vol .grm-sup__venster{height:100%}
  body.grm-sup-open{overflow:hidden}
}