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

.singapore-article-page {
  --article-accent: #c34a51;
  --article-accent-light: #f7dfe2;
  --article-accent-dark: #88343a;
  --article-tint: #fffafb;
  margin: 0;
}

.singapore-article-page .article-hero.notes {
  --article-accent: #6f568f;
  --article-accent-light: #ece4f3;
  --article-accent-dark: #4d3b64;
}

.singapore-article-page .article-hero.hawker {
  --article-accent: #287b67;
  --article-accent-light: #dcf0e9;
  --article-accent-dark: #1c5648;
}

.singapore-article-page .article-hero.transit {
  --article-accent: #337ca1;
  --article-accent-light: #dceef6;
  --article-accent-dark: #245670;
}

.singapore-article-page .article-hero.restaurant {
  --article-accent: #c05247;
  --article-accent-light: #f7dfdc;
  --article-accent-dark: #863932;
}

.singapore-article-page .article-hero.rounding {
  --article-accent: #a97b24;
  --article-accent-light: #fff0bd;
  --article-accent-dark: #76561a;
}

.singapore-article-page .article-hero.refund {
  --article-accent: #39765c;
  --article-accent-light: #dff0e7;
  --article-accent-dark: #285240;
}

.singapore-article-page .article-hero.brunei {
  --article-accent: #8b5540;
  --article-accent-light: #f2e4dd;
  --article-accent-dark: #613b2d;
}

.sgd-note-map,
.sgd-wallet-map,
.sgd-tap-map,
.sgd-plus-map,
.sgd-round-map,
.sgd-refund-map,
.sgd-twin-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, #f7dfe2, #fff 48%, #dcf0e9);
  box-shadow: 5px 6px 0 #88343a;
}

.sgd-note-map { background: linear-gradient(145deg, #ece4f3, #fff 48%, #dceef6); box-shadow: 5px 6px 0 #4d3b64; }
.sgd-wallet-map { background: linear-gradient(145deg, #dcf0e9, #fff 48%, #fff0bd); box-shadow: 5px 6px 0 #1c5648; }
.sgd-tap-map { background: linear-gradient(145deg, #dceef6, #fff 48%, #f7dfe2); box-shadow: 5px 6px 0 #245670; }
.sgd-plus-map { background: linear-gradient(145deg, #f7dfdc, #fff 48%, #fff0bd); box-shadow: 5px 6px 0 #863932; }
.sgd-round-map { background: linear-gradient(145deg, #fff0bd, #fff 48%, #dceef6); box-shadow: 5px 6px 0 #76561a; }
.sgd-refund-map { background: linear-gradient(145deg, #dff0e7, #fff 48%, #dceef6); box-shadow: 5px 6px 0 #285240; }
.sgd-twin-map { background: linear-gradient(145deg, #f2e4dd, #fff 48%, #ece4f3); box-shadow: 5px 6px 0 #613b2d; }

.sgd-note-map > span,
.sgd-wallet-map > span,
.sgd-tap-map > span,
.sgd-plus-map > span,
.sgd-round-map > span,
.sgd-refund-map > span,
.sgd-twin-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;
}

.sgd-note-map :is(strong, small),
.sgd-wallet-map :is(strong, small),
.sgd-tap-map :is(strong, small),
.sgd-plus-map :is(strong, small),
.sgd-round-map :is(strong, small),
.sgd-refund-map :is(strong, small),
.sgd-twin-map :is(strong, small) {
  display: block;
}

.sgd-note-map strong,
.sgd-wallet-map strong,
.sgd-tap-map strong,
.sgd-plus-map strong,
.sgd-round-map strong,
.sgd-refund-map strong,
.sgd-twin-map strong {
  font-size: 1.05rem;
}

.sgd-note-map small,
.sgd-wallet-map small,
.sgd-tap-map small,
.sgd-plus-map small,
.sgd-round-map small,
.sgd-refund-map small,
.sgd-twin-map small {
  margin-top: 5px;
  color: var(--muted);
  font-weight: 750;
}

.sgd-portrait-slip,
.sgd-hawker-slip,
.sgd-transit-slip,
.sgd-bill-slip,
.sgd-round-slip,
.sgd-airport-slip,
.sgd-agreement-slip {
  width: min(100%, 620px);
  margin: 28px auto;
  padding: 22px;
  border: 3px solid var(--ink);
  border-radius: 5px;
  background: linear-gradient(150deg, #fff, #f7dfe2);
  box-shadow: 5px 6px 0 #88343a;
}

.sgd-portrait-slip { background: linear-gradient(150deg, #fff, #ece4f3); box-shadow: 5px 6px 0 #4d3b64; }
.sgd-hawker-slip { background: linear-gradient(150deg, #fff, #dcf0e9); box-shadow: 5px 6px 0 #1c5648; }
.sgd-transit-slip { background: linear-gradient(150deg, #fff, #dceef6); box-shadow: 5px 6px 0 #245670; }
.sgd-bill-slip { background: linear-gradient(150deg, #fff, #f7dfdc); box-shadow: 5px 6px 0 #863932; }
.sgd-round-slip { background: linear-gradient(150deg, #fff, #fff0bd); box-shadow: 5px 6px 0 #76561a; }
.sgd-airport-slip { background: linear-gradient(150deg, #fff, #dff0e7); box-shadow: 5px 6px 0 #285240; }
.sgd-agreement-slip { background: linear-gradient(150deg, #fff, #f2e4dd); box-shadow: 5px 6px 0 #613b2d; }

.sgd-portrait-slip > span,
.sgd-hawker-slip > span,
.sgd-transit-slip > span,
.sgd-bill-slip > span,
.sgd-round-slip > span,
.sgd-airport-slip > span,
.sgd-agreement-slip > span {
  display: block;
  font-size: 0.78rem;
  font-weight: 950;
}

.sgd-portrait-slip > strong,
.sgd-hawker-slip > strong,
.sgd-transit-slip > strong,
.sgd-bill-slip > strong,
.sgd-round-slip > strong,
.sgd-airport-slip > strong,
.sgd-agreement-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;
}

.sgd-portrait-slip > strong { color: #4d3b64; }
.sgd-hawker-slip > strong { color: #1c5648; }
.sgd-transit-slip > strong { color: #245670; }
.sgd-bill-slip > strong { color: #863932; }
.sgd-round-slip > strong { color: #76561a; }
.sgd-airport-slip > strong { color: #285240; }
.sgd-agreement-slip > strong { color: #613b2d; }

.sgd-portrait-slip div,
.sgd-hawker-slip div,
.sgd-transit-slip div,
.sgd-bill-slip div,
.sgd-round-slip div,
.sgd-airport-slip div,
.sgd-agreement-slip div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 2px dotted rgba(22, 22, 22, 0.32);
}

.sgd-portrait-slip div:last-child,
.sgd-hawker-slip div:last-child,
.sgd-transit-slip div:last-child,
.sgd-bill-slip div:last-child,
.sgd-round-slip div:last-child,
.sgd-airport-slip div:last-child,
.sgd-agreement-slip div:last-child {
  border-bottom: 0;
}

.singapore-article-page .article-money-explorer {
  background: linear-gradient(145deg, #fffafb, #fff 52%, #e2f2ec);
}

@media (max-width: 700px) {
  .sgd-note-map,
  .sgd-wallet-map,
  .sgd-tap-map,
  .sgd-plus-map,
  .sgd-round-map,
  .sgd-refund-map,
  .sgd-twin-map {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .sgd-portrait-slip div,
  .sgd-hawker-slip div,
  .sgd-transit-slip div,
  .sgd-bill-slip div,
  .sgd-round-slip div,
  .sgd-airport-slip div,
  .sgd-agreement-slip div {
    display: grid;
    gap: 3px;
  }
}