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

.romania-article-page {
  --article-accent: #a85b37;
  --article-accent-light: #f3e4d8;
  --article-accent-dark: #743f27;
  --article-tint: #fffaf6;
  margin: 0;
}

.romania-article-page .article-hero.notes {
  --article-accent: #327c69;
  --article-accent-light: #dcefe8;
  --article-accent-dark: #235749;
}

.romania-article-page .article-hero.zeros {
  --article-accent: #b85d39;
  --article-accent-light: #f6e2d7;
  --article-accent-dark: #803f27;
}

.romania-article-page .article-hero.payments {
  --article-accent: #397597;
  --article-accent-light: #deedf5;
  --article-accent-dark: #28526a;
}

.romania-article-page .article-hero.transit {
  --article-accent: #bd474c;
  --article-accent-light: #f6dfe1;
  --article-accent-dark: #843236;
}

.romania-article-page .article-hero.deposit {
  --article-accent: #558445;
  --article-accent-light: #e4f1df;
  --article-accent-dark: #3b5c30;
}

.romania-article-page .article-hero.tipping {
  --article-accent: #7c5599;
  --article-accent-light: #eee4f5;
  --article-accent-dark: #573b6b;
}

.romania-article-page .article-hero.road {
  --article-accent: #b07e27;
  --article-accent-light: #fff0bd;
  --article-accent-dark: #79571b;
}

:is(
  .ron-note-map,
  .ron-zero-map,
  .ron-wallet-map,
  .ron-transit-map,
  .ron-deposit-map,
  .ron-tip-map,
  .ron-road-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, #f3e4d8, #fff 48%, #deedf5);
  box-shadow: 5px 6px 0 #743f27;
}

.ron-note-map {
  background: linear-gradient(145deg, #dcefe8, #fff 48%, #fff0bd);
  box-shadow: 5px 6px 0 #235749;
}

.ron-zero-map {
  background: linear-gradient(145deg, #f6e2d7, #fff 48%, #eee4f5);
  box-shadow: 5px 6px 0 #803f27;
}

.ron-wallet-map {
  background: linear-gradient(145deg, #deedf5, #fff 48%, #dcefe8);
  box-shadow: 5px 6px 0 #28526a;
}

.ron-transit-map {
  background: linear-gradient(145deg, #f6dfe1, #fff 48%, #deedf5);
  box-shadow: 5px 6px 0 #843236;
}

.ron-deposit-map {
  background: linear-gradient(145deg, #e4f1df, #fff 48%, #fff0bd);
  box-shadow: 5px 6px 0 #3b5c30;
}

.ron-tip-map {
  background: linear-gradient(145deg, #eee4f5, #fff 48%, #f6dfe1);
  box-shadow: 5px 6px 0 #573b6b;
}

.ron-road-map {
  background: linear-gradient(145deg, #fff0bd, #fff 48%, #deedf5);
  box-shadow: 5px 6px 0 #79571b;
}

:is(
  .ron-note-map,
  .ron-zero-map,
  .ron-wallet-map,
  .ron-transit-map,
  .ron-deposit-map,
  .ron-tip-map,
  .ron-road-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;
}

:is(
  .ron-note-map,
  .ron-zero-map,
  .ron-wallet-map,
  .ron-transit-map,
  .ron-deposit-map,
  .ron-tip-map,
  .ron-road-map
) :is(strong, small) {
  display: block;
}

:is(
  .ron-note-map,
  .ron-zero-map,
  .ron-wallet-map,
  .ron-transit-map,
  .ron-deposit-map,
  .ron-tip-map,
  .ron-road-map
) strong {
  font-size: 1.05rem;
}

:is(
  .ron-note-map,
  .ron-zero-map,
  .ron-wallet-map,
  .ron-transit-map,
  .ron-deposit-map,
  .ron-tip-map,
  .ron-road-map
) small {
  margin-top: 5px;
  color: var(--muted);
  font-weight: 750;
}

:is(
  .ron-window-slip,
  .ron-zero-slip,
  .ron-card-slip,
  .ron-transit-slip,
  .ron-deposit-slip,
  .ron-tip-slip,
  .ron-road-slip
) {
  width: min(100%, 620px);
  margin: 28px auto;
  padding: 22px;
  border: 3px solid var(--ink);
  border-radius: 5px;
  background: linear-gradient(150deg, #fff, #f3e4d8);
  box-shadow: 5px 6px 0 #743f27;
}

.ron-window-slip { background: linear-gradient(150deg, #fff, #dcefe8); box-shadow: 5px 6px 0 #235749; }
.ron-zero-slip { background: linear-gradient(150deg, #fff, #f6e2d7); box-shadow: 5px 6px 0 #803f27; }
.ron-card-slip { background: linear-gradient(150deg, #fff, #deedf5); box-shadow: 5px 6px 0 #28526a; }
.ron-transit-slip { background: linear-gradient(150deg, #fff, #f6dfe1); box-shadow: 5px 6px 0 #843236; }
.ron-deposit-slip { background: linear-gradient(150deg, #fff, #e4f1df); box-shadow: 5px 6px 0 #3b5c30; }
.ron-tip-slip { background: linear-gradient(150deg, #fff, #eee4f5); box-shadow: 5px 6px 0 #573b6b; }
.ron-road-slip { background: linear-gradient(150deg, #fff, #fff0bd); box-shadow: 5px 6px 0 #79571b; }

:is(
  .ron-window-slip,
  .ron-zero-slip,
  .ron-card-slip,
  .ron-transit-slip,
  .ron-deposit-slip,
  .ron-tip-slip,
  .ron-road-slip
) > span {
  display: block;
  font-size: 0.78rem;
  font-weight: 950;
}

:is(
  .ron-window-slip,
  .ron-zero-slip,
  .ron-card-slip,
  .ron-transit-slip,
  .ron-deposit-slip,
  .ron-tip-slip,
  .ron-road-slip
) > strong {
  display: block;
  margin: 7px 0 16px;
  padding: 9px;
  border: 3px double var(--ink);
  text-align: center;
  font-size: clamp(1.15rem, 4vw, 2rem);
  overflow-wrap: anywhere;
}

.ron-window-slip > strong { color: #235749; }
.ron-zero-slip > strong { color: #803f27; }
.ron-card-slip > strong { color: #28526a; }
.ron-transit-slip > strong { color: #843236; }
.ron-deposit-slip > strong { color: #3b5c30; }
.ron-tip-slip > strong { color: #573b6b; }
.ron-road-slip > strong { color: #79571b; }

:is(
  .ron-window-slip,
  .ron-zero-slip,
  .ron-card-slip,
  .ron-transit-slip,
  .ron-deposit-slip,
  .ron-tip-slip,
  .ron-road-slip
) div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 2px dotted rgba(22, 22, 22, 0.32);
}

:is(
  .ron-window-slip,
  .ron-zero-slip,
  .ron-card-slip,
  .ron-transit-slip,
  .ron-deposit-slip,
  .ron-tip-slip,
  .ron-road-slip
) div:last-child {
  border-bottom: 0;
}

.romania-article-page .article-money-explorer {
  background: linear-gradient(145deg, #fffaf6, #fff 52%, #e6f3ee);
}

@media (max-width: 700px) {
  :is(
    .ron-note-map,
    .ron-zero-map,
    .ron-wallet-map,
    .ron-transit-map,
    .ron-deposit-map,
    .ron-tip-map,
    .ron-road-map
  ) {
    grid-template-columns: 1fr;
  }

  :is(
    .ron-window-slip,
    .ron-zero-slip,
    .ron-card-slip,
    .ron-transit-slip,
    .ron-deposit-slip,
    .ron-tip-slip,
    .ron-road-slip
  ) div {
    display: grid;
    gap: 3px;
  }
}