/* Levertijdregel in de topbalk - het rollende slot.
 *
 * Het venster is precies zo hoog als een regel (--sdvz-balk-h). Het bandje
 * daarbinnen schuift met stapjes van die hoogte omhoog, zodat er telkens een
 * hele regel in beeld staat. De breedte wordt door de JS op de breedste regel
 * gezet, anders zou de balk bij elke wisseling verspringen. */

.sdvz-balk{
  --sdvz-balk-h:24px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  vertical-align:middle;
  color:inherit;
  font:inherit;
}

.sdvz-balk-venster{
  display:block;
  height:var(--sdvz-balk-h);
  overflow:hidden;
  flex:none;

  /* Zo breed als de breedste regel, door de browser bepaald. Eerder werd dit
   * met JavaScript uitgerekend, maar dan meet je op het verkeerde moment: vóór
   * Montserrat geladen is valt de meting te smal uit en wordt de laatste letter
   * afgekapt door de overflow hierboven. max-content heeft dat probleem niet en
   * blijft ook kloppen als de tekst of het lettertype verandert. */
  width:max-content;
  max-width:100%;
}

.sdvz-balk-band{
  display:block;
  transition:transform .38s cubic-bezier(.4,0,.2,1);
}

.sdvz-balk-regel{
  display:flex;
  align-items:center;
  gap:6px;
  height:var(--sdvz-balk-h);
  line-height:var(--sdvz-balk-h);
  white-space:nowrap;
}

.sdvz-balk-regel b{font-weight:600}
.sdvz-balk-regel svg{flex:none}

/* Even groot als de USP-iconen die er al stonden: het thema kapt die in beide
 * balken af op 21px (css/preload.css en features/footer/footer.css), en onze
 * iconen stonden daar met 11 en 12px zichtbaar naast. Hier staat het formaat
 * hard, zodat het niet afhangt van welke themaregel de balk toevallig raakt. */
.sdvz-balk-regel svg{width:21px;height:21px}

.sdvz-balk-roze{color:#D8127D}
.sdvz-balk-amber{color:#7A4E00}

/* Hetzelfde rondje met een i als .sdvz-ii op de productpagina, en het loopt bij
 * hover net zo vol. Even groot als de iconen ernaast.
 *
 * De tekstopmaak staat met !important omdat het thema alle spans in
 * .topbar-usp-container op 13px Avenir zet, met een eigen marge en regelhoogte;
 * die selector is specifieker dan een enkele class. Alleen wat het thema hier
 * werkelijk overschrijft staat afgedwongen, de rest niet. */
.sdvz-balk-info{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  box-sizing:border-box;
  width:21px;
  height:21px;
  border:1.5px solid #D8127D;
  border-radius:50%;
  color:#D8127D;
  font-family:inherit!important;
  font-size:12px!important;
  font-weight:700!important;
  font-style:italic;
  line-height:1!important;
  margin:0!important;
  transition:background-color .15s ease,color .15s ease;
}

/* Het lijntje in de accentkleur, de tekst houdt zijn eigen kleur. */
.sdvz-balk:hover .sdvz-balk-regel{
  text-decoration:underline;
  text-decoration-color:#D8127D;
  text-underline-offset:3px;
}

.sdvz-balk:focus-visible{
  outline:2px solid #E6007E;
  outline-offset:3px;
  border-radius:5px;
}

/* De USP's in de topbalk zijn 35px hoog; zonder dit breken ze naar twee regels. */
.topbar-usp .sdvz-balk{white-space:nowrap}

/* Een tik hoort bij de balk, niet bij het icoontje.
 *
 * js/homepage.js opent de topbalk-dropdown bij elke klik in
 * .topbar-usp-container waarvan het doelwit geen <a> of <span> is. Een <svg>
 * viel daar dus onder: wie op het info-icoon tikte kreeg de pop-up én de
 * dropdown. Zonder pointer-events is het doelwit de span eromheen en blijft de
 * dropdown dicht. De pop-up gaat gewoon open - die luistert gedelegeerd op
 * .sdvz-balk, en die bereikt de klik nog steeds. */
.sdvz-balk svg{pointer-events:none}

@media (max-width:767px){
  /* Het thema tilt de USP-iconen 6px op, want die staan daar op een tekstregel
   * met vertical-align:sub. Onze iconen zijn flexkinderen en staan al
   * gecentreerd; die tik zette ze 3px te hoog ten opzichte van de tekst. */
  .top-bar.dev-usp .topbar-usp-container .topbar-usp .sdvz-balk svg{
    margin-top:0;
  }

  /* Rechtsboven zit de pijl van de dropdown in een onzichtbaar vlak van 40px
   * breed met z-index 100000. Met "verzonden" erachter liep de regel daar
   * tegenaan en ving die pijl de tik op het info-icoon op. Zonder staart houdt
   * het icoon ruim 35px afstand. In de footerbalk speelt dit niet, dus daar
   * blijft de staart staan. */
  .top-bar .topbar-usp-container .sdvz-balk .sdvz-balk-staart{display:none}
}

/* Wie beweging heeft uitgezet krijgt een harde wissel in plaats van een schuif. */
@media (prefers-reduced-motion:reduce){
  .sdvz-balk-band{transition:none}
}

/* ---------------------------------------------------------------------------
 * Display hard vastzetten.
 *
 * De balk staat in twee omgevingen met elk hun eigen brede themaregels op
 * .topbar-usp-container en de spans daarbinnen. In de footer werden venster,
 * band én regel daardoor inline-block in plaats van block/flex, waardoor de
 * regels naast elkaar kwamen te staan in plaats van gestapeld - en dan toont
 * het venster ze allemaal tegelijk.
 *
 * Die themaregels hebben een hogere specificiteit dan een enkele class, dus
 * verhogen alleen is niet genoeg. Alleen display staat hier op !important; de
 * rest van de opmaak mag het thema gewoon bepalen.
 * ------------------------------------------------------------------------- */

span.sdvz-balk{display:inline-flex!important}

/* Het thema zet de tekstkleur in de footer hard op zwart; "Spoed" en het
 * info-icoon horen in beide balken dezelfde roze accentkleur te hebben. */
.sdvz-balk .sdvz-balk-roze,
footer.footer-v2 .topbar-usp-container .sdvz-balk .sdvz-balk-roze{color:#D8127D!important}

.sdvz-balk .sdvz-balk-info,
footer.footer-v2 .topbar-usp-container .sdvz-balk .sdvz-balk-info{color:#D8127D!important}

/* Vollopen bij hover, net als op de productpagina. De kleur moet hier ook met
 * !important, anders wint de regel hierboven van de witte letter. */
.sdvz-balk:hover .sdvz-balk-info,
footer.footer-v2 .topbar-usp-container .sdvz-balk:hover .sdvz-balk-info{
  background:#D8127D;
  color:#fff!important;
}
.sdvz-balk span.sdvz-balk-venster{display:block!important}
.sdvz-balk span.sdvz-balk-band{display:block!important}
.sdvz-balk span.sdvz-balk-regel{display:flex!important}
.sdvz-balk span.sdvz-balk-info{display:inline-flex!important}