/**
 * who26 flipbook — generic PDF page-turn reader.
 * All rules are scoped to .who26-flipbook so they are inert anywhere the
 * component is not used, and so they never collide with unrelated .fb-* markup.
 * Self-contained: no dependency on any microsite CSS variables (WHO blues in
 * plain values). Hydrated by js/who26-flipbook.js.
 */

.who26-flipbook { display: block; }

.who26-flipbook .fb-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin: 26px 0 18px;
}
.who26-flipbook .fb-nav { display: flex; align-items: center; gap: 10px; }

.who26-flipbook .fb-btn {
  background: #fff; border: 1px solid #e0e4e8; border-radius: 8px;
  color: #00689b; font-weight: 700; font-size: 13px; padding: 9px 16px;
  text-decoration: none; cursor: pointer; line-height: 1.2;
}
.who26-flipbook .fb-btn:hover,
.who26-flipbook .fb-btn:focus {
  border-color: #00689b; color: #00689b; background: #eaf6fd;
}
.who26-flipbook .fb-download {
  background: #00689b; border-color: #00689b; color: #fff;
}
.who26-flipbook .fb-download:hover,
.who26-flipbook .fb-download:focus {
  background: #005a87; border-color: #005a87; color: #fff;
}
.who26-flipbook .fb-counter {
  font-family: "Montserrat", "Noto Sans", sans-serif; font-weight: 800;
  font-size: 13px; color: #575756; min-width: 110px; text-align: center;
}

.who26-flipbook .fb-stage {
  position: relative; background: #eef3f6;
  border: 1px solid #e0e4e8; border-radius: 8px; padding: 26px 18px;
  margin-bottom: 10px;
}
.who26-flipbook .fb-stage:focus-visible { outline: 2px solid #00689b; outline-offset: 2px; }

.who26-flipbook .fb-page {
  background: #fff; border: 1px solid #d9dcde; box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06),
              inset 8px 0 12px -10px rgba(0, 0, 0, .10),
              inset -8px 0 12px -10px rgba(0, 0, 0, .10);
}
.who26-flipbook .fb-page img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.who26-flipbook .fb-hint { font-size: 12.5px; color: #64707d; text-align: center; margin: 10px 0 0; }
.who26-flipbook .fb-fallback { font-size: 14px; color: #48515b; text-align: center; margin: 0; padding: 20px; }

/* loading indicator */
.who26-flipbook .fb-loading {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: #fff; border-radius: 8px;
}
.who26-flipbook .fb-loading[hidden],
.who26-flipbook .fb-loading.hidden { display: none; }
.who26-flipbook .fb-loading-track {
  width: min(280px, 70%); height: 6px; background: #e7eaee; border-radius: 3px; overflow: hidden;
}
.who26-flipbook .fb-loading-bar {
  height: 100%; width: 0; background: #009edb; border-radius: 3px; transition: width .2s;
}
.who26-flipbook .fb-loading-bar.indeterminate {
  width: 40%; animation: who26-fb-loading 1.2s infinite ease-in-out;
}
@keyframes who26-fb-loading {
  0% { transform: translateX(-150%); }
  50% { transform: translateX(80%); }
  100% { transform: translateX(250%); }
}
.who26-flipbook .fb-loading-text { margin: 0; font-size: 13px; color: #575756; }

@media (max-width: 767px) {
  .who26-flipbook .fb-toolbar { justify-content: center; }
  .who26-flipbook .fb-stage { padding: 14px 8px; }
}