/* ============================================
   Countries section – content panel styles only
   Applies to the div that displays country details and numbers.
   The tab swiper (.markets-tabs) is unchanged.
   ============================================ */

/* -------------------------------------------------------------------------
   1. Container background – whole market-content panel (left + right) to white
   ------------------------------------------------------------------------- */
.markets-content .market-content,
.markets-content .market-content-left,
.markets-content .market-content-right,
.markets-content .market-content-right .inner,
.markets-content .market-content-right-inner-top,
.markets-content .market-content-right-inner-bottom {
  background-color: #FFFFFF !important;
}

/* Left block (customers + progress bars) – wider */
.markets-content[data-astro-cid-yxp6mat3] .market-content[data-astro-cid-yxp6mat3] .market-content-right[data-astro-cid-yxp6mat3] .market-content-right-inner-top[data-astro-cid-yxp6mat3] .market-content-right-inner-top--left[data-astro-cid-yxp6mat3],
.markets-content[data-astro-cid-zgvjc3q7] .market-content[data-astro-cid-zgvjc3q7] .market-content-right[data-astro-cid-zgvjc3q7] .market-content-right-inner-top[data-astro-cid-zgvjc3q7] .market-content-right-inner-top--left[data-astro-cid-zgvjc3q7],
.markets-content .market-content-right-inner-top--left {
  max-width: 300px !important;
  border-color: #BFBFBF !important;
}

/* Inner top (customers + progress block) – gray line below; control how wide the line is (horizontal extent) */
.markets-content .market-content-right .market-content-right-inner-top {
  position: relative !important;
  border-bottom: none !important;
}
.markets-content .market-content-right .market-content-right-inner-top::after {
  content: "" !important;
  position: absolute !important;
  left: 32px !important;
  right: 24px !important;
  bottom: 0 !important;
  height: 1px !important;
  background-color: #BFBFBF !important;
}
[dir="rtl"] .markets-content .market-content-right .market-content-right-inner-top::after {
  left: 24px !important;
  right: 32px !important;
}

@media (min-width: 1280px) {
  .markets-content[data-astro-cid-yxp6mat3] .market-content[data-astro-cid-yxp6mat3],
  .markets-content[data-astro-cid-zgvjc3q7] .market-content[data-astro-cid-zgvjc3q7],
  .markets-content .market-content {
    gap: 30px !important;
  }
}

/* -------------------------------------------------------------------------
   Market content LEFT – centered hero layout (red shape, country pill, CEO)
   ------------------------------------------------------------------------- */
/* Left section: same space as before – do not grow or push right section */
.markets-content .market-content-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding-block: 0 32px !important;
  padding-inline-start: 60px !important;
  width: 100% !important;
  max-width: 400px !important; /* keep original column size */
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* Hero block: blob (rectangle + semicircle) + country pill + CEO image */
.markets-content .market-content-left-hero {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}

/* Red blob – rectangle (top part), like chairman section */
.markets-content .market-content-left-hero::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  height: 40px !important;
  background-color: #ED1C24 !important;
  border-radius: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Red blob – semicircle (bottom part), attached below rectangle */
.markets-content .market-content-left-hero::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 40px !important; /* where rectangle ends */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  height: 165px !important;
  background-color: #ED1C24 !important;
  border-radius: 0 0 50% 50% / 0 0 100% 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Hide the old red div – blob is now ::before + ::after */
.markets-content .market-content-left-red {
  display: none !important;
}

/* Country pill: flag at start (no start padding), text centered, end padding only. Works LTR and RTL. */
.markets-content .country-pill {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 15px !important;
  background-color: #FFFFFF !important;
  padding-inline-start: 8px !important;
  padding-inline-end: 25px !important;
  padding-block: 8px !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  margin-top: 24px !important;
  margin-bottom: 16px !important;
  width: fit-content !important;
}

.markets-content .country-pill .flag-country {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  vertical-align: middle !important;
}

.markets-content .country-pill .content-title {
  margin: 0 !important;
  flex: 1 !important;
  font-size: 35px !important;
  font-weight: 600 !important;
  color: #000000 !important;
  text-align: center !important;
  line-height: 1 !important;
  display: block !important;
}

/* Asiacell Iraq – smaller pill text and flag so it matches other country names */
.markets-content .market-content-4 .country-pill .content-title {
  font-size: 22px !important;
}
.markets-content .market-content-4 .country-pill .flag-country {
  width: 26px !important;
  height: 26px !important;
}

/* CEO image – centered, larger, overlaps red shape */
.markets-content .market-content-left-hero .ceo-image,
.markets-content .market-content-left-hero > img[src*="CEO"],
.markets-content .market-content-left-hero > img {
  position: relative !important;
  z-index: 1 !important;
  width: 260px !important;
  max-width: 90% !important;
  height: auto !important;
  object-fit: contain !important;
  /* margin-top: -5px !important; */
  /* margin-bottom: 16px !important; */
}

/* CEO name – red rounded pill (button style), aligned start */
.markets-content .market-content-left .content-name {
  position: relative !important;
  z-index: 1 !important;
  display: inline-block !important;
  align-self: flex-start !important;
  background-color: #ED1C24 !important;
  color: #FFFFFF !important;
  /* padding: 5px 20px !important; */
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-inline-start: 25px !important;
  border-radius: 9999px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  margin: 0 0 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: start !important;
}

/* CEO position – smaller red text, aligned start */
.markets-content .market-content-left .content-position {
  position: relative !important;
  z-index: 1 !important;
  align-self: flex-start !important;
  color: #ED1C24 !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  margin: 0 0 16px !important;
  text-align: start !important;
  padding-inline-start: 25px !important;

}

/* Paragraph – centered, limited width. Force dark text (Oman/Tunisia use --textColor:#fff). */
.markets-content .market-content-left .market-content-left-paragraph,
.markets-content .market-content-left p.mt-3 {
  position: relative !important;
  z-index: 1 !important;
  align-self: flex-start !important;
  max-width: 320px !important;
  text-align: start !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
  color: #000000 !important;
}

/* Hide old content-info when hero structure exists (no duplicate content) */
.markets-content .market-content-left:has(.market-content-left-hero) .content-info {
  display: none !important;
}

/* -------------------------------------------------------------------------
   2. Customers block – text and counter (align with pill start, not year column)
   ------------------------------------------------------------------------- */
/* "Customers in thousands" – section title: red, 22px */
.markets-content .customers-title {
  color: #ED1C24 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
}

.markets-content .customers-subtitle {
  color: #ED1C24 !important;
  font-weight: 500 !important;
}

.markets-content .market-content-right-inner-top--left > .customers-subtitle::before {
  content: " ";
}

/* Large customers number (e.g. 2,988) */
.markets-content .customers-counter {
  color: #3cdbc0 !important;
}

/* RTL: align with pill start (pill is on the right in RTL) */
[dir="rtl"] .markets-content .customers-title,
[dir="rtl"] .markets-content .customers-subtitle,
[dir="rtl"] .markets-content .customers-counter {
  padding-left: 0 !important;
  /* padding-right: 49px !important; */
}

/* -------------------------------------------------------------------------
   Operator importance to Group (align with pills – same 49px line)
   ------------------------------------------------------------------------- */
.markets-content .operator-importance,
.markets-content .operator-importance-mbl {
}

[dir="rtl"] .markets-content .operator-importance,
[dir="rtl"] .markets-content .operator-importance-mbl {
  padding-left: 0 !important;
  /* padding-right: 49px !important; */
}

/* Section title only: "Operator importance to Group" – red, 22px */
.markets-content .operator-importance > .importance-title,
.markets-content .operator-importance-mbl > .importance-title {
  color: #ED1C24 !important;
  font-size: 22px !important;
}

/* Row labels: "Customers", "EBITDA", "Revenue", "CAPEX" – black */
.markets-content .importance-element .importance-title {
  color: #000000 !important;
  font-size:15px !important;
  font-weight: 500 !important;
}

[dir="rtl"] .markets-content .importance-element .importance-title {
  font-size: 13px !important;
}

.markets-content .importance-counter {
  color: #000000 !important;
  text-align: flex-end !important;
}

/* Operator importance counter number – adjust font-size as needed */
.markets-content .importance-counter .counter,
.markets-content .importance-counter .counter.counter-finish {
  font-size: 30px !important;
} 

@media (min-width: 1024px) {
  .markets-content .importance-counter .counter,
  .markets-content .importance-counter .counter.counter-finish {
    font-size: 36px !important;
  }
}

/* -------------------------------------------------------------------------
   Financial performance section. Force dark text in cells (Oman/Tunisia use --textColor:#fff).
   Table divider color: #BFBFBF in all countries (override var(--borderColor)).
   ------------------------------------------------------------------------- */
.markets-content .financial-table-title {
  color: #ED1C24 !important;
  font-size: 22px !important;
}

.markets-content .market-content-right-inner-bottom .divTable,
.markets-content .market-content-right-inner-bottom .divTable .divTableRow,
.markets-content .market-content-right-inner-bottom .divTable .divTableCell,
.markets-content .market-content-right-inner-bottom .divTable .divTableHead,
.markets-content .market-content-right-inner-bottom .divTableMbl,
.markets-content .market-content-right-inner-bottom .divTableMbl .divTableRow,
.markets-content .market-content-right-inner-bottom .divTableMbl .divTableCell,
.markets-content .market-content-right-inner-bottom .divTableMbl .divTableHead {
  border-color: #BFBFBF !important;
}

.markets-content .divTable .divTableCell {
  color: #000000 !important;
}

/* Last column (current year): teal #3cdbc0 for data cells only (override var(--bgColorOpacity)). */
.markets-content .market-content-right-inner-bottom .divTableCell:last-child,
.markets-content .market-content-right-inner-bottom .divTableHead:last-child {
  background-color: #3cdbc0 !important;
  font-weight: 700 !important;
}

/* Last column header (year label): black background, white text. */
.markets-content .market-content-right-inner-bottom .divTableCell.head-year.last,
.markets-content .market-content-right-inner-bottom .divTableHead.head-year.last {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

.markets-content .divTableCell.head-year {
  font-weight: normal !important;
}

.markets-content .divTableCell.head-year.last {
  font-weight: bold !important;
}

.markets-content .importance-list {
   margin-top:5rem !important;
   gap:16px !important;
   /* TODO: Nada if i want to make space smaller add padding-inline:21px !important; */
 
}





/* -------------------------------------------------------------------------
   3 & 4. Result year progress bars – same structure as #group-results
   Override build/animation styles that set bg, max-width, padding on the row.
   ------------------------------------------------------------------------- */
/* Override Astro/build CSS: no background on row, full width, no pill shape on row.
   Match build selector specificity (data-astro-cid-* on each node) so we win. */
.markets-content[data-astro-cid-yxp6mat3] .market-content[data-astro-cid-yxp6mat3] .market-content-right[data-astro-cid-yxp6mat3] .market-content-right-inner-top[data-astro-cid-yxp6mat3] .market-content-right-inner-top--left[data-astro-cid-yxp6mat3] .result-years[data-astro-cid-yxp6mat3] .result-years-item[data-astro-cid-yxp6mat3],
.markets-content[data-astro-cid-zgvjc3q7] .market-content[data-astro-cid-zgvjc3q7] .market-content-right[data-astro-cid-zgvjc3q7] .market-content-right-inner-top[data-astro-cid-zgvjc3q7] .market-content-right-inner-top--left[data-astro-cid-zgvjc3q7] .result-years[data-astro-cid-zgvjc3q7] .result-years-item[data-astro-cid-zgvjc3q7],
.markets-content .market-content .market-content-right .market-content-right-inner-top .market-content-right-inner-top--left .result-years .result-years-item,
.markets-content .market-content-right-inner-top--left .result-years .result-years-item,
.markets-content .result-years-item,
.markets-content .result-years-item-mbl {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  max-width: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  position: relative !important;
  z-index: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  margin-bottom: 12px !important;
  justify-content: flex-start !important;
  transition: none !important;
}

.markets-content .result-years {
  width: 100% !important;
}

/* Year label – no background, no right padding. Force dark text (Oman/Tunisia use --textColor:#fff). */
.markets-content[data-astro-cid-yxp6mat3] .market-content-right-inner-top--left .result-years-item .progress-year[data-astro-cid-yxp6mat3],
.markets-content[data-astro-cid-zgvjc3q7] .market-content-right-inner-top--left .result-years-item .progress-year[data-astro-cid-zgvjc3q7],
.markets-content .market-content-right-inner-top--left .progress-year,
.markets-content .progress-year {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  z-index: 1 !important;
  position: relative !important;
  width: 49px !important;
  min-width: 49px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
  color: #000000 !important;
}

/* Arabic: year numbers aligned right */
[dir="rtl"] .markets-content[data-astro-cid-zgvjc3q7] .market-content-right-inner-top--left .result-years-item .progress-year[data-astro-cid-zgvjc3q7],
[dir="rtl"] .markets-content .market-content-right-inner-top--left .progress-year,
[dir="rtl"] .markets-content .progress-year {
  text-align: right !important;
}

/* Tube wrapper – no left margin; slightly wider bar for section width */
.markets-content .progress-bar-wrapper {
  width: calc(100% - 40px) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 9999px !important;
  border-bottom-right-radius: 9999px !important;
  overflow: visible !important;
  height: 30px !important;
  position: relative !important;
  z-index: 2 !important;
  margin-left: 0 !important;
  border: none !important;
  outline: none !important;
}

/* Vertical line at the left edge of the wrapper (touches year on left, pill on right) */
.markets-content .progress-bar-wrapper::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 36px !important;
  width: 3px !important;
  background-color: #3cdbc0 !important;
  z-index: 2 !important;
}

.markets-content .result-years-item.previous-years .progress-bar-wrapper::before,
.markets-content .result-years-item-mbl.previous-years .progress-bar-wrapper::before,
.markets-content .progress-bar-wrapper:has(.progress-bar.previous-years)::before {
  background-color: #3cdbc04d!important;
}

/* Last year vertical line – teal (after previous-years so it wins when bar has .previous-years in AR) */
.markets-content .result-years-item.last-year .progress-bar-wrapper::before,
.markets-content .result-years-item-mbl.last-year .progress-bar-wrapper::before {
  background-color: #3cdbc0 !important;
}

/* Tube bar – dynamic width from --bar-width (inherited from .result-years-item); bar starts at same place, ends at different widths. Support desktop typo --bar---bar-width. */
.markets-content .progress-bar {
  width: var(--bar-width, var(--bar---bar-width, 100%)) !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 9999px !important;
  border-bottom-right-radius: 9999px !important;
  height: 100% !important;
  position: relative !important;
  padding-left: 8px !important;
  padding-right: 15px !important;
  overflow: hidden !important;
  z-index: 1 !important;
  border: none !important;
  outline: none !important;
  margin-inline-start: 3px !important;
}

/* Most recent year (2025) – white counter text for contrast (bar color set after previous-years rule) */
.markets-content .result-years-item.last-year .progress-bar .counter-finish,
.markets-content .result-years-item-mbl.last-year .progress-bar .counter-finish {
  color: #FFFFFF !important;
}

/* Progress bar counter: black in all countries (previous years and when inherited --textColor is white). */
.markets-content .progress-bar .counter-finish,
.markets-content .counter.counter-finish {
  color: #000000 !important;
}

.markets-content .result-years-item.last-year .progress-bar .counter-finish,
.markets-content .result-years-item-mbl.last-year .progress-bar .counter-finish {
  color: #FFFFFF !important;
}

/* Other years – light teal */
.markets-content .result-years-item.previous-years .progress-bar,
.markets-content .result-years-item .progress-bar.previous-years,
.markets-content .result-years-item-mbl.previous-years .progress-bar,
.markets-content .result-years-item-mbl .progress-bar.previous-years {
  background-color: #3cdbc04d!important;
}

/* Last year bar always #3cdbc0 (after previous-years so it wins when bar has .previous-years in AR) */
.markets-content .result-years-item.last-year .progress-bar,
.markets-content .result-years-item-mbl.last-year .progress-bar {
  background-color: #3cdbc0 !important;
}

/* RTL – marker on right, rounded on left; text at end (left in RTL) */
[dir="rtl"] .markets-content .progress-bar {
  padding-right: 8px !important;
  padding-left: 15px !important;
}

[dir="rtl"] .markets-content .progress-bar-wrapper {
  border-top-left-radius: 9999px !important;
  border-bottom-left-radius: 9999px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

[dir="rtl"] .markets-content .progress-bar {
  margin-left: auto !important;
  margin-right: 0 !important;
  border-top-left-radius: 9999px !important;
  border-bottom-left-radius: 9999px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding-right: 8px !important;
  padding-left: 15px !important;
}

[dir="rtl"] .markets-content .progress-bar-wrapper::before {
  left: auto !important;
  right: 0 !important;
}

/* -------------------------------------------------------------------------
   Countries section – MOBILE (accordion) – match desktop styling
   Mobile uses #country-performance .container.mobile with accordions, not .markets-content.
   Override build styles that use var(--textColor) / var(--bgColor) per country.
   ------------------------------------------------------------------------- */
/* Accordion content panel – white background like desktop */
#country-performance .accordion-content {
  background-color: #FFFFFF !important;
}

/* Accordion header when opened – white background, dark text (override var(--bgColor) / var(--textBasic)) */
#country-performance .accordion-header.opened {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* Chevron visible on white when opened – black fill */
#country-performance .accordion-header.opened .chevron,
#country-performance .accordion-header.opened .chevron path {
  color: #000000 !important;
  fill: #000000 !important;
}

/* Mobile: Asiacell Iraq accordion header – smaller title and flag to match other countries */
#country-performance .accordion-header:has(img[alt="Iraq flag"]) h3,
#country-performance .accordion-header:has(img[alt*="العراق"]) h3 {
  font-size: 0.9rem !important;
}
#country-performance .accordion-header:has(img[alt="Iraq flag"]) .flag-country,
#country-performance .accordion-header:has(img[alt*="العراق"]) .flag-country {
  width: 32px !important;
  height: 32px !important;
}

/* Intro paragraph and year labels – black (Oman/Tunisia use --textColor white, else invisible) */
#country-performance .accordion-content > p {
  color: #000000 !important;
}
#country-performance .accordion-content .progress-year {
  color: #000000 !important;
}

/* Big number (customers) – teal like desktop, not var(--textColor) */
#country-performance .accordion-content .customers-counter {
  color: #3cdbc0 !important;
}

/* Importance counter – black like desktop, not country color (e.g. yellow in Qatar) */
#country-performance .accordion-content .importance-counter,
#country-performance .accordion-content .importance-counter .counter {
  color: #000000 !important;
}

/* Operator importance counter font-size (mobile/accordion) */
#country-performance .accordion-content .importance-counter .counter,
#country-performance .accordion-content .importance-counter .counter.counter-finish {
  font-size: 24px !important;
}

/* Importance section title and row labels – black (Oman/Tunisia use white --textColor) */
#country-performance .accordion-content .importance-title {
  color: #000000 !important;
}

/* Table cells – all values black; year headers black, last column header white (rule below) */
#country-performance .divTableMbl .divTableCell,
#country-performance .divTableMbl .divTableHead {
  color: #000000 !important;
}

/* Table cell headers (year labels) – black, not var(--textColor) */
#country-performance .divTableMbl .divTableCell.head-year,
#country-performance .divTableMbl .divTableHead.head-year {
  color: #000000 !important;
}

/* Last column (current year): teal #3cdbc0 for data cells (override country color) */
#country-performance .divTableMbl .divTableCell:last-child,
#country-performance .divTableMbl .divTableHead:last-child {
  background-color: #3cdbc0 !important;
  font-weight: 700 !important;
}

/* Last year column header – black bg, white text */
#country-performance .divTableMbl .divTableCell.head-year.last,
#country-performance .divTableMbl .divTableHead.head-year.last {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

/* Last year row – no extra bg/color from build (override var(--textColor) / var(--colorTextFirstResult)); bar is #3cdbc0 only */
#country-performance .accordion-content .last-year,
#country-performance .accordion-content .result-years-item-mbl.last-year {
  background-color: transparent !important;
  background: none !important;
  color: inherit !important;
}

/* Progress bars in accordion – same design as desktop: pill + vertical line */
#country-performance .accordion-content .progress-bar-wrapper {
  width: calc(100% - 40px) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 9999px !important;
  border-bottom-right-radius: 9999px !important;
  overflow: visible !important;
  height: 30px !important;
  position: relative !important;
  z-index: 2 !important;
  margin-left: 0 !important;
  border: none !important;
  outline: none !important;
}

#country-performance .accordion-content .progress-bar-wrapper::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 36px !important;
  width: 3px !important;
  background-color: #3cdbc0 !important;
  z-index: 2 !important;
}

#country-performance .accordion-content .result-years-item-mbl.previous-years .progress-bar-wrapper::before,
#country-performance .accordion-content .progress-bar-wrapper:has(.progress-bar.previous-years)::before {
  background-color: #3cdbc04d!important;
}

#country-performance .accordion-content .result-years-item-mbl.last-year .progress-bar-wrapper::before {
  background-color: #3cdbc0 !important;
}

#country-performance .accordion-content .progress-bar {
  width: var(--bar-width, var(--bar---bar-width, 100%)) !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 9999px !important;
  border-bottom-right-radius: 9999px !important;
  height: 100% !important;
  position: relative !important;
  padding-left: 8px !important;
  padding-right: 15px !important;
  overflow: hidden !important;
  z-index: 1 !important;
  border: none !important;
  outline: none !important;
}

#country-performance .accordion-content .result-years-item-mbl.previous-years .progress-bar,
#country-performance .accordion-content .progress-bar.previous-years {
  background-color: #3cdbc04d!important;
}

#country-performance .accordion-content .result-years-item-mbl.last-year .progress-bar {
  background-color: #3cdbc0 !important;
}

#country-performance .accordion-content .result-years-item-mbl.last-year .progress-bar .counter,
#country-performance .accordion-content .result-years-item-mbl.last-year .progress-bar .counter-finish {
  color: #FFFFFF !important;
}

#country-performance .accordion-content .progress-bar .counter,
#country-performance .accordion-content .progress-bar .counter-finish {
  color: #000000 !important;
}

#country-performance .accordion-content .result-years-item-mbl.last-year .progress-bar .counter,
#country-performance .accordion-content .result-years-item-mbl.last-year .progress-bar .counter-finish {
  color: #FFFFFF !important;
}

[dir="rtl"] #country-performance .accordion-content .progress-bar-wrapper::before {
  left: auto !important;
  right: 0 !important;
}

[dir="rtl"] #country-performance .accordion-content .progress-bar {
  margin-left: auto !important;
  margin-right: 0 !important;
  padding-right: 8px !important;
  padding-left: 15px !important;
  border-top-left-radius: 9999px !important;
  border-bottom-left-radius: 9999px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

[dir="rtl"] #country-performance .accordion-content .progress-bar-wrapper {
  border-top-left-radius: 9999px !important;
  border-bottom-left-radius: 9999px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* -------------------------------------------------------------------------
   Countries section: mobile vs desktop visibility (same as English / strategic-pillars).
   Mobile-first: show mobile by default, desktop on larger screens.
   Ensures Arabic and any build show only one layout per viewport.
   ------------------------------------------------------------------------- */
#country-performance.section-markets .container.mobile,
.section-markets#country-performance .container.mobile {
  display: block !important;
}
#country-performance.section-markets .container-big.desktop,
.section-markets#country-performance .container-big.desktop {
  display: none !important;
}
@media (min-width: 769px) {
  #country-performance.section-markets .container.mobile,
  .section-markets#country-performance .container.mobile {
    display: none !important;
  }
  #country-performance.section-markets .container-big.desktop,
  .section-markets#country-performance .container-big.desktop {
    display: block !important;
  }
}