@import url("../country-guide-base.css");

.south-africa-article-page {
  --article-accent: #397b57;
  --article-accent-light: #dff0e5;
  --article-accent-dark: #28563d;
  --article-tint: #f9fdfb;
  margin: 0;
}

.south-africa-article-page .article-hero.notes {
  --article-accent: #397b57;
  --article-accent-light: #dff0e5;
  --article-accent-dark: #28563d;
}

.south-africa-article-page .article-hero.wallet {
  --article-accent: #3c7095;
  --article-accent-light: #dfedf6;
  --article-accent-dark: #2a4f69;
}

.south-africa-article-page .article-hero.transit {
  --article-accent: #b85259;
  --article-accent-light: #f6dfe2;
  --article-accent-dark: #80393e;
}

.south-africa-article-page .article-hero.road {
  --article-accent: #a76f2b;
  --article-accent-light: #f8e8cf;
  --article-accent-dark: #744d1e;
}

.south-africa-article-page .article-hero.tipping {
  --article-accent: #8a568e;
  --article-accent-light: #eee2f0;
  --article-accent-dark: #603c63;
}

.south-africa-article-page .article-hero.refund {
  --article-accent: #327c79;
  --article-accent-light: #dcefed;
  --article-accent-dark: #235754;
}

.south-africa-article-page .article-hero.park {
  --article-accent: #9b5b3d;
  --article-accent-light: #f3e2da;
  --article-accent-dark: #6c3f2a;
}

.zar-note-map,
.zar-wallet-map,
.zar-transit-map,
.zar-road-map,
.zar-tip-map,
.zar-refund-map,
.zar-park-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0;
  padding: 20px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: linear-gradient(145deg, #dff0e5, #fff 48%, #f8e8cf);
  box-shadow: 5px 6px 0 #28563d;
}

.zar-wallet-map { background: linear-gradient(145deg, #dfedf6, #fff 48%, #dff0e5); box-shadow: 5px 6px 0 #2a4f69; }
.zar-transit-map { background: linear-gradient(145deg, #f6dfe2, #fff 48%, #dfedf6); box-shadow: 5px 6px 0 #80393e; }
.zar-road-map { background: linear-gradient(145deg, #f8e8cf, #fff 48%, #dff0e5); box-shadow: 5px 6px 0 #744d1e; }
.zar-tip-map { background: linear-gradient(145deg, #eee2f0, #fff 48%, #f6dfe2); box-shadow: 5px 6px 0 #603c63; }
.zar-refund-map { background: linear-gradient(145deg, #dcefed, #fff 48%, #dfedf6); box-shadow: 5px 6px 0 #235754; }
.zar-park-map { background: linear-gradient(145deg, #f3e2da, #fff 48%, #f8e8cf); box-shadow: 5px 6px 0 #6c3f2a; }

.zar-note-map > span,
.zar-wallet-map > span,
.zar-transit-map > span,
.zar-road-map > span,
.zar-tip-map > span,
.zar-refund-map > span,
.zar-park-map > span {
  min-width: 0;
  padding: 16px 10px;
  border: 3px solid var(--ink);
  border-radius: 5px;
  background: #fff;
  box-shadow: 3px 4px 0 var(--ink);
  text-align: center;
}

.zar-note-map :is(strong, small),
.zar-wallet-map :is(strong, small),
.zar-transit-map :is(strong, small),
.zar-road-map :is(strong, small),
.zar-tip-map :is(strong, small),
.zar-refund-map :is(strong, small),
.zar-park-map :is(strong, small) {
  display: block;
}

.zar-note-map strong,
.zar-wallet-map strong,
.zar-transit-map strong,
.zar-road-map strong,
.zar-tip-map strong,
.zar-refund-map strong,
.zar-park-map strong {
  font-size: 1.05rem;
}

.zar-note-map small,
.zar-wallet-map small,
.zar-transit-map small,
.zar-road-map small,
.zar-tip-map small,
.zar-refund-map small,
.zar-park-map small {
  margin-top: 5px;
  color: var(--muted);
  font-weight: 750;
}

.zar-currency-slip,
.zar-atm-slip,
.zar-city-slip,
.zar-road-slip,
.zar-tip-slip,
.zar-tax-slip,
.zar-gate-slip {
  width: min(100%, 620px);
  margin: 28px auto;
  padding: 22px;
  border: 3px solid var(--ink);
  border-radius: 5px;
  background: linear-gradient(150deg, #fff, #dff0e5);
  box-shadow: 5px 6px 0 #28563d;
}

.zar-atm-slip { background: linear-gradient(150deg, #fff, #dfedf6); box-shadow: 5px 6px 0 #2a4f69; }
.zar-city-slip { background: linear-gradient(150deg, #fff, #f6dfe2); box-shadow: 5px 6px 0 #80393e; }
.zar-road-slip { background: linear-gradient(150deg, #fff, #f8e8cf); box-shadow: 5px 6px 0 #744d1e; }
.zar-tip-slip { background: linear-gradient(150deg, #fff, #eee2f0); box-shadow: 5px 6px 0 #603c63; }
.zar-tax-slip { background: linear-gradient(150deg, #fff, #dcefed); box-shadow: 5px 6px 0 #235754; }
.zar-gate-slip { background: linear-gradient(150deg, #fff, #f3e2da); box-shadow: 5px 6px 0 #6c3f2a; }

.zar-currency-slip > span,
.zar-atm-slip > span,
.zar-city-slip > span,
.zar-road-slip > span,
.zar-tip-slip > span,
.zar-tax-slip > span,
.zar-gate-slip > span {
  display: block;
  font-size: 0.78rem;
  font-weight: 950;
}

.zar-currency-slip > strong,
.zar-atm-slip > strong,
.zar-city-slip > strong,
.zar-road-slip > strong,
.zar-tip-slip > strong,
.zar-tax-slip > strong,
.zar-gate-slip > strong {
  display: block;
  margin: 7px 0 16px;
  padding: 9px;
  border: 3px double var(--ink);
  text-align: center;
  font-size: clamp(1.1rem, 4vw, 2rem);
  overflow-wrap: anywhere;
}

.zar-currency-slip > strong { color: #28563d; }
.zar-atm-slip > strong { color: #2a4f69; }
.zar-city-slip > strong { color: #80393e; }
.zar-road-slip > strong { color: #744d1e; }
.zar-tip-slip > strong { color: #603c63; }
.zar-tax-slip > strong { color: #235754; }
.zar-gate-slip > strong { color: #6c3f2a; }

.zar-currency-slip div,
.zar-atm-slip div,
.zar-city-slip div,
.zar-road-slip div,
.zar-tip-slip div,
.zar-tax-slip div,
.zar-gate-slip div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 2px dotted rgba(22, 22, 22, 0.32);
}

.zar-currency-slip div:last-child,
.zar-atm-slip div:last-child,
.zar-city-slip div:last-child,
.zar-road-slip div:last-child,
.zar-tip-slip div:last-child,
.zar-tax-slip div:last-child,
.zar-gate-slip div:last-child {
  border-bottom: 0;
}

.south-africa-article-page .article-money-explorer {
  background: linear-gradient(145deg, #f9fdfb, #fff 52%, #e4f3ea);
}

@media (max-width: 700px) {
  .zar-note-map,
  .zar-wallet-map,
  .zar-transit-map,
  .zar-road-map,
  .zar-tip-map,
  .zar-refund-map,
  .zar-park-map {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .zar-currency-slip div,
  .zar-atm-slip div,
  .zar-city-slip div,
  .zar-road-slip div,
  .zar-tip-slip div,
  .zar-tax-slip div,
  .zar-gate-slip div {
    display: grid;
    gap: 3px;
  }
}