/* ========================================================
   UNHCR Dynamic Infographic — RTL Overrides (Arabic)
   Loaded only when language is Arabic.
   All selectors scoped under .unhcr-infographic-rtl
   ======================================================== */

.unhcr-infographic-rtl {
  direction: rtl;
  text-align: right;
}

/* --------------------------------------------------------
   Badge: flip to top-left
   -------------------------------------------------------- */
.unhcr-infographic-rtl .infographic-report-caption {
  text-align: right;
}

/* --------------------------------------------------------
   Deco stripe: left → right
   -------------------------------------------------------- */
.unhcr-infographic-rtl .deco-stripe-left {
  left: auto;
  right: 0;
}

/* --------------------------------------------------------
   Page inner padding flip
   -------------------------------------------------------- */
.unhcr-infographic-rtl .page-1-inner {
  padding-left: 40px;
  padding-right: 34px;
}

/* --------------------------------------------------------
   Section label bar: border flip
   -------------------------------------------------------- */
.unhcr-infographic-rtl .section-label-bar {
  border-left: none;
  border-right: 5px solid var(--zakat);
  padding: 5px 14px 5px 18px;
}

/* --------------------------------------------------------
   Page 1 grid: flex stays but padding flips
   -------------------------------------------------------- */
.unhcr-infographic-rtl .p1-left {
  padding-right: 0;
  padding-left: 20px;
}
.unhcr-infographic-rtl .p1-right {
  padding-left: 0;
  padding-right: 22px;
}

/* --------------------------------------------------------
   Summary table: text-align
   -------------------------------------------------------- */
.unhcr-infographic-rtl .summary-tbl th,
.unhcr-infographic-rtl .summary-tbl td {
  text-align: right;
}

/* --------------------------------------------------------
   Bar labels
   -------------------------------------------------------- */
.unhcr-infographic-rtl .bar-labels-row {
  margin-left: 0;
  margin-right: 50px;
}

/* --------------------------------------------------------
   Income distribution box
   -------------------------------------------------------- */
.unhcr-infographic-rtl .income-dist-box {
  /* In RTL the bars flip to the right (right:50px), so the reserved empty space
     must move to the RIGHT too — otherwise the box text renders underneath the
     bars (the LTR padding-left:280 reserves the wrong side). Mirror slide 2. */
  text-align: right;
  padding: 14px 290px 14px 20px;
  left: -40px;
  right: -10px;
}

/* --------------------------------------------------------
   Banded bars frame
   -------------------------------------------------------- */
.unhcr-infographic-rtl .banded-bars-frame {
  left: auto;
  right: 50px;
}

/* --------------------------------------------------------
   Dollar/icon overlay
   -------------------------------------------------------- */
.unhcr-infographic-rtl .dollar-icon-overlay {
  left: auto;
  right: 112px;
  /*Randa*/
  display: none;
}

/* --------------------------------------------------------
   Page 2 grid
   -------------------------------------------------------- */
.unhcr-infographic-rtl .p2-left {
  padding-right: 0;
  padding-left: 20px;
}
.unhcr-infographic-rtl .p2-right {
  padding-left: 0;
  padding-right: 22px;
}

/* --------------------------------------------------------
   Beneficiaries total box
   -------------------------------------------------------- */
.unhcr-infographic-rtl .ben-total-box {
  text-align: right;
  padding: 12px 290px 12px 16px;
}

/* --------------------------------------------------------
   Beneficiaries bar labels
   -------------------------------------------------------- */
.unhcr-infographic-rtl .p2-bar-labels {
  margin-left: 0;
  margin-right: 50px;
}

/* --------------------------------------------------------
   Globe icon on page 2
   -------------------------------------------------------- */
.unhcr-infographic-rtl .map-globe-icon {
  left: auto;
  right: 8px;
}

/* --------------------------------------------------------
   Country grid margins
   -------------------------------------------------------- */
.unhcr-infographic-rtl .country-grid {
  margin-left: 10px;
  margin-right: 20px;
}

/* --------------------------------------------------------
   Historical bars: total column text-align
   -------------------------------------------------------- */
.unhcr-infographic-rtl .hist-tot {
  text-align: left;
  padding-left: 0;
  padding-right: 10px;
}

/* --------------------------------------------------------
   Decoration circles: flip horizontal positions
   -------------------------------------------------------- */
.unhcr-infographic-rtl .deco-circle-tr {
  right: auto;
  left: -60px;
}
.unhcr-infographic-rtl .deco-circle-tr-grey {
  right: auto;
  left: -80px;
}
.unhcr-infographic-rtl .deco-circle-br-blue {
  right: auto;
  left: -50px;
}
.unhcr-infographic-rtl .p2-grey-circle {
  left: auto;
  right: 60px;
}

/* --------------------------------------------------------
   Page 2 background gradient: flip
   -------------------------------------------------------- */
.unhcr-infographic-rtl .page-2 {
  background: linear-gradient(to left, var(--white) 50%, var(--zakat) 50%);
}

/* --------------------------------------------------------
   Tab navigation: same flex, just text direction handled
   -------------------------------------------------------- */
.unhcr-infographic-rtl .slide-tab {
  border-right: none;
  border-left: 1px solid #ccc;
}
.unhcr-infographic-rtl .slide-tab:last-child {
  border-left: none;
}

/* --------------------------------------------------------
   Font family for Arabic
   -------------------------------------------------------- */
.unhcr-infographic-rtl {
  font-family: 'Noto Sans Arabic', 'Segoe UI', Arial, sans-serif;
}