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

.philippines-article-page {
  --article-accent:#3973a7;
  --article-accent-light:#dfebf6;
  --article-accent-dark:#285074;
  --article-tint:#fbfdff;
  margin:0;
}

.philippines-article-page .article-hero.notes {
  --article-accent:#7251a3;
  --article-accent-light:#eee4f8;
  --article-accent-dark:#4f3971;
}

.philippines-article-page .article-hero.digital {
  --article-accent:#287a72;
  --article-accent-light:#dcf0eb;
  --article-accent-dark:#1d5650;
}

.philippines-article-page .article-hero.islands {
  --article-accent:#2f7898;
  --article-accent-light:#dceef4;
  --article-accent-dark:#21556b;
}

.philippines-article-page .article-hero.border {
  --article-accent:#b77722;
  --article-accent-light:#fff0c4;
  --article-accent-dark:#785017;
}

.philippines-article-page .article-hero.tipping {
  --article-accent:#b64e54;
  --article-accent-light:#f7e0e2;
  --article-accent-dark:#7d373b;
}

.php-note-map,
.php-qr-map,
.php-island-map,
.php-border-map,
.php-tip-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,#dfebf6,#fff 48%,#fff0c4);
  box-shadow:5px 6px 0 #285074;
}

.php-note-map {
  background:linear-gradient(145deg,#eee4f8,#fff 48%,#fff0c4);
  box-shadow:5px 6px 0 #4f3971;
}

.php-qr-map {
  background:linear-gradient(145deg,#dcf0eb,#fff 48%,#dfebf6);
  box-shadow:5px 6px 0 #1d5650;
}

.php-island-map {
  background:linear-gradient(145deg,#dceef4,#fff 48%,#e4f2dd);
  box-shadow:5px 6px 0 #21556b;
}

.php-border-map {
  background:linear-gradient(145deg,#fff0c4,#fff 48%,#f7e0e2);
  box-shadow:5px 6px 0 #785017;
}

.php-tip-map {
  background:linear-gradient(145deg,#f7e0e2,#fff 48%,#fff0c4);
  box-shadow:5px 6px 0 #7d373b;
}

.php-note-map > span,
.php-qr-map > span,
.php-island-map > span,
.php-border-map > span,
.php-tip-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;
}

.php-note-map strong,
.php-note-map small,
.php-qr-map strong,
.php-qr-map small,
.php-island-map strong,
.php-island-map small,
.php-border-map strong,
.php-border-map small,
.php-tip-map strong,
.php-tip-map small {
  display:block;
}

.php-note-map strong,
.php-qr-map strong,
.php-island-map strong,
.php-border-map strong,
.php-tip-map strong {
  font-size:1.05rem;
}

.php-note-map small,
.php-qr-map small,
.php-island-map small,
.php-border-map small,
.php-tip-map small {
  margin-top:5px;
  color:var(--muted);
  font-weight:750;
}

.php-receipt,
.php-pass,
.php-ferry-slip,
.php-customs-slip,
.php-tip-slip {
  width:min(100%,620px);
  margin:28px auto;
  padding:22px;
  border:3px solid var(--ink);
  border-radius:5px;
  background:linear-gradient(150deg,#fff,#dfebf6);
  box-shadow:5px 6px 0 #285074;
}

.php-receipt {
  background:linear-gradient(150deg,#fff,#eee4f8);
  box-shadow:5px 6px 0 #4f3971;
}

.php-pass {
  background:linear-gradient(150deg,#fff,#dcf0eb);
  box-shadow:5px 6px 0 #1d5650;
}

.php-ferry-slip {
  background:linear-gradient(150deg,#fff,#dceef4);
  box-shadow:5px 6px 0 #21556b;
}

.php-customs-slip {
  background:linear-gradient(150deg,#fff,#fff0c4);
  box-shadow:5px 6px 0 #785017;
}

.php-tip-slip {
  background:linear-gradient(150deg,#fff,#f7e0e2);
  box-shadow:5px 6px 0 #7d373b;
}

.php-receipt > span,
.php-pass > span,
.php-ferry-slip > span,
.php-customs-slip > span,
.php-tip-slip > span {
  display:block;
  font-size:.78rem;
  font-weight:950;
}

.php-receipt > strong,
.php-pass > strong,
.php-ferry-slip > strong,
.php-customs-slip > strong,
.php-tip-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);
}

.php-receipt > strong { color:#4f3971; }
.php-pass > strong { color:#1d5650; }
.php-ferry-slip > strong { color:#21556b; }
.php-customs-slip > strong { color:#785017; }
.php-tip-slip > strong { color:#7d373b; }

.php-receipt div,
.php-pass div,
.php-ferry-slip div,
.php-customs-slip div,
.php-tip-slip div {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:9px 0;
  border-bottom:2px dotted rgba(22,22,22,.32);
}

.php-receipt div:last-child,
.php-pass div:last-child,
.php-ferry-slip div:last-child,
.php-customs-slip div:last-child,
.php-tip-slip div:last-child {
  border-bottom:0;
}

.philippines-article-page .article-money-explorer {
  background:linear-gradient(145deg,#fbfdff,#fff 52%,#fff7d9);
}

@media (max-width:700px) {
  .php-note-map,
  .php-qr-map,
  .php-island-map,
  .php-border-map,
  .php-tip-map {
    grid-template-columns:1fr;
  }

  .php-receipt div,
  .php-pass div,
  .php-ferry-slip div,
  .php-customs-slip div,
  .php-tip-slip div {
    display:grid;
    gap:3px;
  }
}