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

.belgium-article-page {
  --article-accent: #c58c25;
  --article-accent-light: #fff0c4;
  --article-accent-dark: #815916;
  --article-tint: #fffaf0;
  margin: 0;
}

.belgium-article-page .article-hero.banknotes {
  --article-accent: #d6a733;
  --article-accent-light: #fff0c4;
  --article-accent-dark: #815916;
}

.belgium-article-page .article-hero.payments {
  --article-accent: #55aaa2;
  --article-accent-light: #d9f1ed;
  --article-accent-dark: #24675f;
}

.belgium-article-page .article-hero.transit {
  --article-accent: #4f7fba;
  --article-accent-light: #dce9f8;
  --article-accent-dark: #2a527d;
}

.belgium-article-page .article-hero.tipping {
  --article-accent: #d66b6b;
  --article-accent-light: #ffe0dd;
  --article-accent-dark: #873c44;
}

.belgium-article-page .article-hero.planner {
  --article-accent: #6fa875;
  --article-accent-light: #e0f0dc;
  --article-accent-dark: #365f42;
}

.belgium-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0;
}

.belgium-card {
  min-width: 0;
  padding: 18px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: linear-gradient(140deg, var(--article-accent-light), #fff 145%);
  box-shadow: 4px 5px 0 var(--article-accent-dark);
}

.belgium-card strong,
.belgium-card span {
  display: block;
}

.belgium-card strong {
  margin-bottom: 6px;
}

.belgium-card span {
  color: var(--muted);
  font-size: .92rem;
}

.belgium-note {
  display: grid;
  gap: 8px;
  margin: 30px 0;
  padding: 21px 23px;
  border: 3px solid var(--ink);
  border-radius: 7px;
  background: linear-gradient(135deg, #fff0c4 0%, #d9f1ed 52%, #ffe0dd 100%);
  box-shadow: 6px 7px 0 var(--ink);
  transform: rotate(-.3deg);
}

.belgium-note strong,
.belgium-note span {
  display: block;
}

.belgium-note strong {
  font-size: 1.05rem;
}

.belgium-note span {
  color: #303735;
}

.payment-translation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0;
}

.payment-translation > div {
  min-width: 0;
  padding: 16px 12px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #fff;
  text-align: center;
  box-shadow: 3px 4px 0 var(--article-accent-dark);
}

.payment-translation strong,
.payment-translation span {
  display: block;
}

.payment-translation strong {
  margin-bottom: 4px;
}

.payment-translation span {
  color: var(--muted);
  font-size: .82rem;
}

.rounding-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 26px 0;
}

.rounding-strip span {
  padding: 14px 8px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: #fff9e6;
  text-align: center;
  font-weight: 900;
}

.rounding-strip b {
  color: #a83942;
}

.article-footnote {
  color: var(--muted);
  font-size: .88rem;
}

@media (max-width: 760px) {
  .payment-translation {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .belgium-grid {
    grid-template-columns: 1fr;
  }

  .belgium-note {
    padding: 18px;
    transform: none;
  }
}