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

.netherlands-article-page {
  --article-accent:#d36d38;
  --article-accent-light:#f9e5d8;
  --article-accent-dark:#914927;
  --article-tint:#fffaf7;
  margin:0;
}

.netherlands-article-page .article-hero.banknotes {
  --article-accent:#d36d38;
  --article-accent-light:#f9e5d8;
  --article-accent-dark:#914927;
}

.netherlands-article-page .article-hero.pin {
  --article-accent:#287e76;
  --article-accent-light:#d9f0ed;
  --article-accent-dark:#1d5c56;
}

.netherlands-article-page .article-hero.ovpay {
  --article-accent:#356fa5;
  --article-accent-light:#dcebf7;
  --article-accent-dark:#254f77;
}

.netherlands-article-page .article-hero.deposit {
  --article-accent:#bf8b24;
  --article-accent-light:#fff0bd;
  --article-accent-dark:#765719;
}

.netherlands-article-page .article-hero.tipping {
  --article-accent:#bc4f62;
  --article-accent-light:#f8dfe5;
  --article-accent-dark:#813644;
}

.dutch-coin-line,
.dutch-pin-line,
.dutch-tip-line {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:28px 0;
}

.dutch-coin-line span,
.dutch-pin-line span,
.dutch-tip-line span {
  min-width:0;
  padding:16px 10px;
  border:3px solid var(--ink);
  border-radius:5px;
  background:linear-gradient(145deg,var(--article-accent-light),#fff);
  box-shadow:3px 4px 0 var(--article-accent-dark);
  text-align:center;
  font-weight:900;
}

.dutch-coin-line small,
.dutch-pin-line small,
.dutch-tip-line small {
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-weight:650;
}

.dutch-edge {
  position:relative;
  margin:28px 0;
  padding:25px 20px;
  overflow:hidden;
  border:3px solid var(--ink);
  border-radius:6px;
  background:linear-gradient(145deg,#f2c94c,#f8e6a5);
  box-shadow:5px 6px 0 #914927;
  text-align:center;
}

.dutch-edge::before,
.dutch-edge::after {
  content:"*";
  position:absolute;
  top:50%;
  font-size:1.5rem;
  font-weight:900;
  transform:translateY(-50%);
}

.dutch-edge::before {
  left:16px;
}

.dutch-edge::after {
  right:16px;
}

.dutch-edge strong {
  display:block;
  font-size:clamp(1rem,3vw,1.35rem);
  letter-spacing:0;
}

.dutch-edge small {
  display:block;
  margin-top:5px;
  font-weight:750;
}

.dutch-terminal {
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:center;
  margin:28px 0;
  padding:18px;
  border:3px solid var(--ink);
  border-radius:6px;
  background:linear-gradient(145deg,#d9f0ed,#fff 70%);
  box-shadow:5px 6px 0 #1d5c56;
}

.dutch-terminal-copy strong,
.dutch-terminal-copy span {
  display:block;
}

.dutch-terminal-copy strong {
  font-size:1.35rem;
}

.dutch-terminal-copy span {
  margin-top:4px;
  color:var(--muted);
  font-weight:700;
}

.dutch-terminal-screen {
  display:grid;
  place-items:center;
  width:92px;
  min-height:72px;
  border:3px solid var(--ink);
  border-radius:5px;
  background:#101d1c;
  color:#88f0c4;
  box-shadow:inset 0 0 0 5px #6ca49c;
  font-weight:950;
}

.dutch-ov-route {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:14px;
  margin:28px 0;
  padding:20px;
  border:3px solid var(--ink);
  border-radius:6px;
  background:linear-gradient(145deg,#dcebf7,#fff);
  box-shadow:5px 6px 0 #254f77;
}

.dutch-ov-route span {
  text-align:center;
  font-weight:900;
}

.dutch-ov-route small {
  display:block;
  margin-top:4px;
  font-weight:650;
}

.dutch-ov-route b {
  display:grid;
  place-items:center;
  width:76px;
  height:76px;
  border:3px solid var(--ink);
  border-radius:50%;
  background:#f2c94c;
  box-shadow:3px 4px 0 var(--ink);
  font-size:1.1rem;
}

.dutch-deposit-board {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:28px 0;
}

.dutch-deposit-board span {
  display:grid;
  place-items:center;
  min-height:118px;
  padding:14px;
  border:3px solid var(--ink);
  border-radius:6px;
  background:linear-gradient(145deg,#fff7cd,#e6b841);
  box-shadow:4px 5px 0 #765719;
  text-align:center;
  font-weight:900;
}

.dutch-deposit-board strong {
  display:block;
  font-size:1.35rem;
}

.dutch-deposit-board small {
  display:block;
  margin-top:4px;
  font-weight:700;
}

.dutch-receipt {
  margin:28px 0;
  padding:20px;
  border:3px solid var(--ink);
  border-radius:4px;
  background:linear-gradient(145deg,#fff,#f8dfe5);
  box-shadow:4px 5px 0 #813644;
}

.dutch-receipt div {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:9px 0;
  border-bottom:2px dotted rgba(22,22,22,.3);
}

.dutch-receipt div:last-child {
  border-bottom:0;
  font-weight:900;
}

.netherlands-article-page .article-money-explorer {
  background:linear-gradient(145deg,#fff8f2,#fff 52%,#e5f2f0);
}

@media (max-width:700px) {
  .dutch-coin-line,
  .dutch-pin-line,
  .dutch-tip-line,
  .dutch-deposit-board {
    grid-template-columns:1fr;
  }

  .dutch-terminal,
  .dutch-ov-route {
    grid-template-columns:1fr;
  }

  .dutch-terminal-screen,
  .dutch-ov-route b {
    margin:auto;
  }
}