.interest-page {
  --interest-line: rgba(47, 125, 104, .16);
  --interest-soft: rgba(134, 194, 166, .1);
  min-height: 70vh;
  background:
    radial-gradient(circle at 6% 10%, rgba(225, 94, 83, .08), transparent 24rem),
    radial-gradient(circle at 94% 24%, rgba(47, 125, 104, .11), transparent 28rem),
    linear-gradient(180deg, #fffafb 0%, #f6fbf9 100%);
}

.interest-dashboard {
  min-height: 70vh;
}

.interest-map-card {
  overflow: hidden;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--interest-line);
  border-radius: 1.65rem;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 22px 60px rgba(44, 85, 72, .1);
}

.interest-map-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem 1rem;
  border-bottom: 1px solid rgba(47, 125, 104, .1);
}

.interest-map-header h1 {
  margin: 0;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.12;
}

[lang="ar"] .interest-map-header h1 {
  letter-spacing: 0;
  line-height: 1.28;
}

.interest-updated {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  color: var(--hs-color-text-muted);
  font-size: .84rem;
}

.interest-updated .bi {
  color: var(--hs-color-action);
}

.interest-map-visual {
  position: relative;
  min-height: clamp(15rem, 46vw, 37rem);
  margin: 1rem 1.35rem .75rem;
  overflow: hidden;
  border: 1px solid rgba(47, 125, 104, .13);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .9), transparent 56%),
    linear-gradient(145deg, #e9f6f1, #f5faf8);
}

.interest-map-host {
  direction: ltr;
}

.interest-map-host .svgMap-map-wrapper {
  padding-top: 50%;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, .48), transparent 47%),
    linear-gradient(145deg, #e4f4ee, #f2f8f5);
}

.interest-map-host .svgMap-country {
  stroke: rgba(255, 255, 255, .96);
  stroke-width: 1.1;
}

.interest-map-host .svgMap-country.interest-map-country--active {
  stroke: #1f6652;
  stroke-width: 1.35;
}

.interest-map-fallback {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(90%, 31rem);
  margin: 0;
  padding: .8rem 1rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(47, 125, 104, .14);
  border-radius: .85rem;
  background: rgba(255, 255, 255, .93);
  color: var(--hs-color-text-muted);
  line-height: 1.5;
  text-align: center;
}

.interest-map-visual[data-map-ready="true"] .interest-map-fallback {
  display: none;
}

.interest-map-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem .85rem;
  padding: 0 1.35rem 1rem;
  color: var(--hs-color-text-muted);
  font-size: .75rem;
}

.interest-map-legend-title {
  color: var(--hs-color-text);
  font-weight: 850;
}

.interest-map-band {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}

.interest-map-swatch {
  display: inline-block;
  width: .75rem;
  height: .75rem;
  border: 1px solid rgba(30, 76, 63, .16);
  border-radius: .22rem;
}

.interest-map-swatch--none { background: #e1e4e3; }
.interest-map-swatch--1 { background: #c7eadc; }
.interest-map-swatch--2 { background: #9dd6c1; }
.interest-map-swatch--3 { background: #69b79b; }
.interest-map-swatch--4 { background: #36876e; }
.interest-map-swatch--5 { background: #155944; }

.interest-map-swatch--4,
.interest-map-swatch--5 {
  border-color: rgba(18, 62, 50, .28);
}

.interest-unavailable {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 48rem;
  min-height: 10rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--interest-line);
  border-radius: 1.65rem;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 22px 60px rgba(44, 85, 72, .09);
}

.interest-unavailable-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border-radius: 1rem;
  background: rgba(47, 125, 104, .11);
  color: var(--hs-color-action);
  font-size: 1.35rem;
}

.interest-unavailable h1 {
  margin: 0 0 .35rem;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 800;
}

.interest-unavailable p {
  margin: 0;
  color: var(--hs-color-text-muted);
  line-height: 1.6;
}

.interest-window-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}

.interest-window-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--interest-line);
  border-radius: 1.65rem;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 22px 60px rgba(44, 85, 72, .09);
}

.interest-window-header {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1.25rem 1.35rem 1rem;
  border-bottom: 1px solid rgba(47, 125, 104, .1);
}

.interest-window-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border-radius: .9rem;
  background: linear-gradient(135deg, var(--hs-color-action), #65a58e);
  color: #fff;
  box-shadow: 0 9px 22px rgba(47, 125, 104, .2);
}

.interest-window-header h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 800;
}

.interest-window-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 1rem 1.35rem 1.15rem;
}

.interest-window-metrics > div {
  padding: .85rem 1rem;
  border: 1px solid rgba(47, 125, 104, .12);
  border-radius: 1rem;
  background: var(--interest-soft);
}

.interest-window-metrics dt {
  color: var(--hs-color-text-muted);
  font-size: .76rem;
  font-weight: 750;
}

.interest-window-metrics dd {
  margin: .25rem 0 0;
}

.interest-metric-value {
  font-family: var(--hs-font-display);
  font-size: clamp(1.8rem, 4vw, 2.45rem);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
}

.interest-country-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  border-top: 1px solid rgba(47, 125, 104, .1);
  overscroll-behavior: contain;
  scrollbar-color: rgba(47, 125, 104, .35) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.interest-country-table-wrap--capped {
  max-height: 38rem;
}

.interest-country-table-wrap:focus-visible {
  outline: 3px solid var(--hs-color-action);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 1px #fff;
}

.interest-country-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.interest-country-table thead {
  background: #f3f9f6;
}

.interest-country-table th,
.interest-country-table td {
  padding: .75rem .7rem;
  border-bottom: 1px solid rgba(47, 125, 104, .1);
  text-align: start;
  vertical-align: middle;
}

.interest-country-table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  background: #f3f9f6;
  box-shadow: 0 1px 0 rgba(47, 125, 104, .16);
  color: #4a625b;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

[lang="ar"] .interest-country-table thead th {
  letter-spacing: 0;
}

.interest-country-table th:first-child {
  width: 45%;
  padding-inline-start: 1.35rem;
}

.interest-country-table th:nth-child(2) {
  width: 18%;
}

.interest-country-table th:last-child {
  width: 37%;
  padding-inline-end: 1.35rem;
}

.interest-country-row:last-child th,
.interest-country-row:last-child td {
  border-bottom: 0;
}

.interest-country-row > th {
  font-weight: 750;
}

.interest-country-code {
  display: inline-grid;
  min-width: 2.35rem;
  height: 2rem;
  margin-inline-end: .55rem;
  place-items: center;
  border-radius: .65rem;
  background: rgba(47, 125, 104, .1);
  color: var(--hs-color-action);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .04em;
}

.interest-country-name {
  overflow-wrap: anywhere;
}

.interest-country-events,
.interest-country-percentage {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.interest-country-share {
  min-width: 0;
}

.interest-country-percentage {
  display: block;
  margin-bottom: .3rem;
  color: #395c52;
  font-size: .77rem;
}

.interest-country-progress {
  display: block;
  width: 100%;
  height: .5rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #e7efec;
  color: var(--hs-color-action);
  accent-color: var(--hs-color-action);
}

.interest-country-progress::-webkit-progress-bar {
  border-radius: 999px;
  background: #e7efec;
}

.interest-country-progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hs-color-action), #6cad96);
}

.interest-country-progress::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hs-color-action), #6cad96);
}

.interest-empty {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 8.5rem;
  padding: 1.25rem 1.35rem 1.5rem;
  border-top: 1px solid rgba(47, 125, 104, .1);
  color: var(--hs-color-text-muted);
}

.interest-empty > .bi {
  flex: 0 0 auto;
  color: rgba(47, 125, 104, .62);
  font-size: 1.55rem;
}

.interest-empty h3 {
  margin: 0 0 .25rem;
  color: var(--hs-color-text);
  font-size: 1rem;
  font-weight: 800;
}

.interest-empty p {
  margin: 0;
  line-height: 1.55;
}

.interest-activity-note {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  max-width: 68rem;
  margin: 1rem auto 0;
  padding: .8rem 1rem;
  border: 1px solid rgba(47, 125, 104, .13);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .78);
  color: var(--hs-color-text-muted);
  font-size: .84rem;
  line-height: 1.55;
  text-align: center;
  justify-content: center;
}

.interest-activity-note .bi {
  flex: 0 0 auto;
  margin-top: .1rem;
  color: var(--hs-color-action);
}

@media (max-width: 575.98px) {
  .interest-map-card,
  .interest-window-card {
    border-radius: 1.25rem;
  }

  .interest-map-header {
    align-items: flex-start;
    flex-direction: column;
    padding-inline: 1rem;
  }

  .interest-map-visual {
    min-height: 13rem;
    margin: .75rem .75rem .65rem;
    border-radius: .95rem;
  }

  .interest-map-host .svgMap-map-wrapper {
    padding-top: 58%;
  }

  .interest-map-legend {
    gap: .48rem .7rem;
    padding-inline: 1rem;
  }

  .interest-map-legend-title {
    flex-basis: 100%;
  }

  .interest-unavailable {
    align-items: flex-start;
    border-radius: 1.25rem;
  }

  .interest-window-header,
  .interest-window-metrics {
    padding-inline: 1rem;
  }

  .interest-country-table th,
  .interest-country-table td {
    padding: .7rem .4rem;
  }

  .interest-country-table-wrap--capped {
    max-height: min(36rem, 72vh);
  }

  .interest-country-table th:first-child {
    width: 48%;
    padding-inline-start: 1rem;
  }

  .interest-country-table th:nth-child(2) {
    width: 19%;
  }

  .interest-country-table th:last-child {
    width: 33%;
    padding-inline-end: 1rem;
  }

  .interest-country-code {
    min-width: 2rem;
    margin-inline-end: .35rem;
  }

  .interest-country-name {
    font-size: .88rem;
  }

  .interest-activity-note {
    text-align: start;
    justify-content: flex-start;
  }
}

@media (forced-colors: active) {
  .interest-map-swatch {
    border: 1px solid CanvasText;
  }

  .interest-map-host .svgMap-country {
    stroke: Canvas;
    stroke-width: 1.5;
  }

  .interest-country-table-wrap:focus-visible {
    outline: 3px solid Highlight;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interest-page * {
    scroll-behavior: auto !important;
  }
}