/* ========================================================
   UNHCR Dynamic Infographic — Plugin Styles
   All selectors scoped under .unhcr-infographic-wrap
   ======================================================== */

.unhcr-infographic-wrap {
  --zakat: #00AEEF;
  --sadaqah: #005D6E;
  --yellow: #FAEB00;
  --yellow-dark: #E8DA00;
  --dark: #222222;
  --grey: #B8B8B8;
  --light-grey: #E8E8E8;
  --bg-grey: #EDEDED;
  --white: #FFFFFF;
  --black: #000000;
  --font: 'Open Sans', 'Segoe UI', Arial, sans-serif;
  font-family: var(--font);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
}
.unhcr-infographic-wrap *, .unhcr-infographic-wrap *::before, .unhcr-infographic-wrap *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

/* --------------------------------------------------------
   Tab Navigation
   -------------------------------------------------------- */
.unhcr-infographic-wrap .slide-tabs {
  width: 1120px;
  margin: 30px auto 0;
  display: flex;
  gap: 0;
}
.unhcr-infographic-wrap .slide-tab {
  flex: 1;
  padding: 12px 16px;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  background: #ddd;
  color: var(--dark);
  transition: background 0.2s, color 0.2s;
  border-right: 1px solid #ccc;
}
.unhcr-infographic-wrap .slide-tab:last-child { border-right: none; }
.unhcr-infographic-wrap .slide-tab:hover { background: #c0dff0; }
.unhcr-infographic-wrap .slide-tab.active {
  background: var(--zakat);
  color: var(--white);
}

/* --------------------------------------------------------
   Page Shell + Slide Show/Hide
   -------------------------------------------------------- */
.unhcr-infographic-wrap .slide { display: none; }
.unhcr-infographic-wrap .slide.active { display: block; }

.unhcr-infographic-wrap .infographic-page {
  position: relative;
  width: 1120px;
  min-height: 780px;
  margin: 0 auto 40px;
  background: var(--white);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}
.unhcr-infographic-wrap .page-inner {
  padding: 28px 40px 50px 40px;
  position: relative;
  z-index: 2;
}
.unhcr-infographic-wrap .page-1-inner {
  padding-left: 34px;
}

/* Badge */
/* Report source line — sits below the main title and above the tabs.
   Replaces the old absolutely-positioned per-slide badge (which overlapped
   content and broke on small screens). Fluid width so it never overflows. */
.unhcr-infographic-wrap .infographic-report-caption {
  width: 1120px;
  max-width: 100%;
  margin: 0 auto 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--dark);
}

/* --------------------------------------------------------
   Common Pieces
   -------------------------------------------------------- */
.unhcr-infographic-wrap .section-label-bar {
  display: inline-block;
  background: var(--yellow);
  padding: 5px 18px 5px 14px;
  font-size: 15px;
  font-weight: 800;
  border-left: 5px solid var(--zakat);
  margin-bottom: 14px;
}
.unhcr-infographic-wrap .page-title-bar {
  background: var(--zakat);
  display: inline-block;
  padding: 12px 26px;
  margin-bottom: 18px;
}
.unhcr-infographic-wrap .page-title-bar h1 {
  color: var(--white);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
}
.unhcr-infographic-wrap .label-badge {
  display: inline-block;
  padding: 1px 10px;
  font-size: 12px;
  font-weight: 700;
}
.unhcr-infographic-wrap .yellow-badge {
  background: var(--yellow);
  color: var(--black);
}
.unhcr-infographic-wrap .zakat-color { color: var(--zakat); }
.unhcr-infographic-wrap .sadaqah-color { color: var(--sadaqah); }

/* --------------------------------------------------------
   PAGE 1
   -------------------------------------------------------- */
.unhcr-infographic-wrap .deco-stripe-left {
  position: absolute;
  left: 0; top: 0;
  width: 16px; height: 100%;
  background: var(--zakat);
  z-index: 3;
}
.unhcr-infographic-wrap .p1-grid {
  display: flex;
  gap: 0;
}
.unhcr-infographic-wrap .p1-left {
  flex: 1;
  padding-right: 20px;
}
.unhcr-infographic-wrap .p1-divider {
  width: 3px;
  background: var(--zakat);
  flex-shrink: 0;
  align-self: stretch;
}
.unhcr-infographic-wrap .p1-right {
  flex: 1;
  padding-left: 22px;
}

/* Percentage row */
.unhcr-infographic-wrap .pct-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.unhcr-infographic-wrap .pct-item { text-align: center; flex: 1; }
.unhcr-infographic-wrap .pct-value {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.05;
}

/* Donut */
.unhcr-infographic-wrap .donut-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto 14px;
}
.unhcr-infographic-wrap .donut-wrap canvas {
  position: relative;
  z-index: 2;
}
.unhcr-infographic-wrap .donut-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.unhcr-infographic-wrap .donut-icon img {
  border-radius: 50%;
  width: 108px;
  height: 108px;
}

/* Summary Table */
.unhcr-infographic-wrap .summary-box {
  border: 2px solid var(--yellow);
}
.unhcr-infographic-wrap .summary-header {
  background: var(--yellow);
  font-weight: 800;
  font-size: 14px;
  padding: 4px 12px;
}
.unhcr-infographic-wrap .summary-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.unhcr-infographic-wrap .summary-tbl th,
.unhcr-infographic-wrap .summary-tbl td {
  padding: 5px 10px;
  text-align: left;
  border-bottom: 1px solid var(--light-grey);
}
.unhcr-infographic-wrap .summary-tbl th {
  font-weight: 700;
  font-size: 11.5px;
  color: var(--dark);
}
.unhcr-infographic-wrap .summary-tbl td { font-weight: 600; }
.unhcr-infographic-wrap .summary-tbl .t-col {
  color: var(--zakat);
  font-weight: 800;
}

/* Bar labels */
.unhcr-infographic-wrap .bar-labels-row {
  display: flex;
  gap: 8px;
  margin-bottom: 2px;
  width: 200px;
  margin-left: 50px;
}
.unhcr-infographic-wrap .bar-label-item {
  text-align: center;
  flex: 1;
}
.unhcr-infographic-wrap .bar-big-num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
}
.unhcr-infographic-wrap .bar-sub-num {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--dark);
}

/* ========= Overlapping Bars + Yellow Box Layout ========= */
.unhcr-infographic-wrap .bars-overlay-container {
  position: relative;
  height: 440px;
}
.unhcr-infographic-wrap .income-dist-box {
  position: absolute;
  bottom: 0;
  left: -10px;
  right: -40px;
  top: 180px;
  background: var(--yellow);
  /* Reserve space on the left so the right-aligned text never slides under the
     overlapping bars (same approach as slide 2's .ben-total-box). */
  padding: 14px 20px 14px 280px;
  text-align: right;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.unhcr-infographic-wrap .idb-header {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}
.unhcr-infographic-wrap .idb-year {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
}
.unhcr-infographic-wrap .idb-sublabel {
  font-size: 12px;
  font-weight: 600;
}
.unhcr-infographic-wrap .idb-total {
  font-size: 30px;
  font-weight: 800;
}

/* Banded Bars */
.unhcr-infographic-wrap .banded-bars-frame {
  position: absolute;
  top: 0;
  left: 50px;
  width: 200px;
  height: 370px;
  display: flex;
  align-items: flex-end; /* bars grow from a shared bottom baseline */
  gap: 8px;
  z-index: 2;
}

/* Page 2 bars */
.unhcr-infographic-wrap .p2-bars-container {
  height: 380px;
}
.unhcr-infographic-wrap .p2-bars {
  height: 310px;
}
.unhcr-infographic-wrap .p2-bar-labels {
  margin-left: 50px;
  width: 200px;
}
.unhcr-infographic-wrap .p2-icon {
  bottom: 30px;
}
.unhcr-infographic-wrap .ben-total-box {
  position: absolute;
  bottom: 0;
  left: -10px;
  right: -20px;
  top: 200px;
  background: var(--yellow);
  padding: 12px 16px 12px 260px;
  text-align: left;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.unhcr-infographic-wrap .banded-bar-col {
  flex: 1;
  display: flex;
  position: relative;
}
.unhcr-infographic-wrap .banded-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.unhcr-infographic-wrap .yellow-side-accent {
  width: 10px;
  background: var(--yellow);
  flex-shrink: 0;
}
.unhcr-infographic-wrap .dollar-icon-overlay {
  position: absolute;
  bottom: 120px;
  left: 112px;
  z-index: 5;
}
.unhcr-infographic-wrap .dollar-icon-overlay img {
  /*display: block;*/
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  /*Randa*/
  display: none;
}

/* ---------------------------------------------------------------------------
   Number labels pinned to the top of each bar.
   Each Zakat/Sadaqah figure now lives INSIDE its bar column and is anchored
   just above the bar's top edge. This makes the number always sit directly
   over its own bar (centered) and follow a short bar downward, so:
     - there is no longer a large gap when a bar value is low;
     - the number stays aligned with the bar on every breakpoint and in RTL,
       regardless of how the bars are re-centered/stacked responsively.
   --------------------------------------------------------------------------- */
.unhcr-infographic-wrap .banded-bar-col { overflow: visible; }
.unhcr-infographic-wrap .bar-col-label {
  position: absolute;
  bottom: 100%;            /* sit directly above this bar's top edge */
  left: 50%;
  transform: translateX(-50%);
  width: -moz-max-content;
  width: max-content;
  max-width: 150px;
  text-align: center;
  margin-bottom: 6px;
  z-index: 6;              /* keep the figure readable above the round $ / people badge */
  pointer-events: none;
}
/* Reserve headroom so a full-height (100%) bar's label has room above it. */
.unhcr-infographic-wrap .bars-overlay-container { margin-top: 64px; }

/* --------------------------------------------------------
   PAGE 2
   -------------------------------------------------------- */
.unhcr-infographic-wrap .p2-grid {
  display: flex;
}
.unhcr-infographic-wrap .p2-left {
  flex: 1;
  padding-right: 20px;
}
.unhcr-infographic-wrap .p2-right {
  flex: 1;
  padding-left: 22px;
  position: relative;
}
.unhcr-infographic-wrap .ben-total-big {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
}
.unhcr-infographic-wrap .ben-total-sub {
  font-size: 11px;
  font-weight: 600;
}
.unhcr-infographic-wrap .ben-total-sub strong {
  font-size: 16px;
  font-weight: 800;
}

/* Globe icon */
.unhcr-infographic-wrap .map-globe-icon {
  position: absolute;
  top: 46px;
  left: 8px;
  z-index: 10;
}
.unhcr-infographic-wrap .map-globe-icon img {
  border-radius: 50%;
  display: block;
}

/* Map + country table */
.unhcr-infographic-wrap .map-countries-wrap {
  position: relative;
  margin-top: 10px;
}
.unhcr-infographic-wrap .map-area {
  border: 2px solid var(--dark);
  padding: 8px;
  background: var(--white);
  position: relative;
  z-index: 1;
}
.unhcr-infographic-wrap .world-map-container {
  width: 100%;
  height: 380px;
}
.unhcr-infographic-wrap .world-map-container svg {
  width: 100%;
  height: 100%;
}
.unhcr-infographic-wrap .country-grid {
  background: var(--yellow);
  padding: 8px 12px;
  position: relative;
  z-index: 2;
  margin-top: -60px;
  margin-left: 20px;
  margin-right: 10px;
}
.unhcr-infographic-wrap .country-grid table {
  width: 100%;
  border-collapse: collapse;
}
.unhcr-infographic-wrap .country-grid td {
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 6px;
}

/* --------------------------------------------------------
   PAGES 3-4: Historical
   -------------------------------------------------------- */
.unhcr-infographic-wrap .legend-box {
  display: inline-flex;
  gap: 18px;
  border: 2px solid var(--dark);
  padding: 6px 14px;
  margin-bottom: 16px;
}
.unhcr-infographic-wrap .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}
.unhcr-infographic-wrap .legend-swatch {
  display: inline-block;
  width: 22px; height: 13px;
}
.unhcr-infographic-wrap .zakat-sw { background: var(--zakat); }
.unhcr-infographic-wrap .sadaqah-sw { background: var(--sadaqah); }

/* Floating Zakat / Sadaqah key for the Historical Income tabs.
   Rendered on <body> by the script so it can use position:fixed reliably
   (the infographic's own ancestors clip overflow and carry AOS transforms,
   which break native sticky/fixed). Toggled via .is-visible on scroll. */
.unhcr-hist-floating-legend {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  margin-top: 8px;
  display: none;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 2px solid #222;
  padding: 6px 14px;
  z-index: 9990;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
}
.unhcr-hist-floating-legend.is-visible { display: inline-flex; }
.unhcr-hist-floating-legend.rtl { direction: rtl; }
.unhcr-hist-floating-legend .fl-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #222;
  white-space: nowrap;
}
.unhcr-hist-floating-legend .fl-sw {
  display: inline-block;
  width: 22px;
  height: 13px;
}
.unhcr-hist-floating-legend .fl-z { background: #00AEEF; }
.unhcr-hist-floating-legend .fl-s { background: #005D6E; }

.unhcr-infographic-wrap .hist-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.unhcr-infographic-wrap .hist-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}
.unhcr-infographic-wrap .hist-row.bg-y { background: var(--yellow); }
.unhcr-infographic-wrap .hist-row.bg-g { background: var(--bg-grey); }

.unhcr-infographic-wrap .hist-yr {
  width: 66px; height: 66px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 800;
  flex-shrink: 0;
  border: 4px solid var(--white);
}
.unhcr-infographic-wrap .hist-yr.grey { background: var(--grey); }
.unhcr-infographic-wrap .hist-yr.yellow { background: var(--yellow-dark); }

.unhcr-infographic-wrap .hist-bwrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.unhcr-infographic-wrap .hist-bline {
  display: flex;
  align-items: center;
  gap: 6px;
}
.unhcr-infographic-wrap .hist-b {
  height: 26px;
  flex-shrink: 0; /* honor the exact pixel width so bars never collapse to 0 */
  transition: width 0.8s ease;
}
.unhcr-infographic-wrap .hist-b.z { background: var(--zakat); }
.unhcr-infographic-wrap .hist-b.s { background: var(--sadaqah); }

.unhcr-infographic-wrap .hist-v {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dark);
  white-space: nowrap;
}
.unhcr-infographic-wrap .hist-tot {
  flex-shrink: 0;
  text-align: right;
  padding-left: 10px;
}
.unhcr-infographic-wrap .hist-tot-lbl {
  font-size: 9px;
  font-weight: 700;
  color: var(--dark);
}
.unhcr-infographic-wrap .hist-tot-val {
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
}
.unhcr-infographic-wrap .hist-tot .ybg {
  background: var(--yellow);
  display: inline-block;
  padding: 2px 10px;
}

/* Grand Total */
.unhcr-infographic-wrap .grand-total-box {
  /* White background (not the solid blue) so the blue decorative circle that
     overlaps this section stays visible instead of disappearing blue-on-blue.
     A blue border keeps the box defined against the white page. */
  background: var(--white);
  color: var(--dark);
  border: 2px solid var(--zakat);
  padding: 28px 36px;
  margin-top: 18px;
}
.unhcr-infographic-wrap .gt-big {
  font-size: 68px;
  font-weight: 800;
  line-height: 1;
  color: var(--zakat);
}
.unhcr-infographic-wrap .gt-label {
  font-size: 13px;
  font-weight: 600;
  margin: 2px 0;
}
.unhcr-infographic-wrap .gt-number {
  font-size: 34px;
  font-weight: 800;
  color: var(--zakat);
}

/* --------------------------------------------------------
   Decorations
   -------------------------------------------------------- */
.unhcr-infographic-wrap .deco-circle-tr {
  position: absolute;
  width: 220px; height: 220px;
  top: -60px; right: -60px;
  border-radius: 50%;
  border: 28px solid rgba(180,180,180,0.18);
  z-index: 1;
  pointer-events: none;
}
.unhcr-infographic-wrap .deco-circle-tl-grey {
  position: absolute;
  width: 200px; height: 200px;
  top: -50px; left: -50px;
  border-radius: 50%;
  border: 28px solid rgba(180,180,180,0.18);
  z-index: 1;
  pointer-events: none;
}
.unhcr-infographic-wrap .deco-circle-tr-grey {
  position: absolute;
  width: 260px; height: 260px;
  top: 20px; right: -80px;
  border-radius: 50%;
  border: 30px solid rgba(180,180,180,0.15);
  z-index: 1;
  pointer-events: none;
}
.unhcr-infographic-wrap .deco-circle-br-blue {
  position: absolute;
  width: 180px; height: 180px;
  bottom: 60px; right: -50px;
  border-radius: 50%;
  border: 30px solid var(--zakat);
  z-index: 1;
  pointer-events: none;
}
.unhcr-infographic-wrap .deco-bar-bottom {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 16px;
  z-index: 5;
}
.unhcr-infographic-wrap .deco-bar-bottom.dark { background: var(--dark); }
.unhcr-infographic-wrap .deco-bar-bottom.yellow-bar { background: var(--yellow); }

/* Page 2 decorations */
.unhcr-infographic-wrap .page-2 {
  background: linear-gradient(to right, var(--white) 50%, var(--zakat) 50%);
}
.unhcr-infographic-wrap .page-2 .page-inner {
  background: var(--white);
  margin: 12px 14px 28px 14px;
  padding: 20px 30px 40px 30px;
  position: relative;
  z-index: 2;
}
.unhcr-infographic-wrap .p2-blue-bg {
  display: none;
}
.unhcr-infographic-wrap .p2-grey-circle {
  position: absolute;
  width: 240px;
  height: 240px;
  top: -20px;
  left: 60px;
  border-radius: 50%;
  border: 32px solid rgba(180,180,180,0.2);
  z-index: 3;
  pointer-events: none;
}