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

.united-arab-emirates-article-page {
  --article-accent: #3e9b80;
  --article-accent-light: #dcefe4;
  --article-accent-dark: #175448;
  --article-tint: #f6fcf9;
  margin: 0;
}

.united-arab-emirates-article-page .article-hero.banknotes {
  --article-accent: #95c690;
  --article-accent-light: #e5f3df;
  --article-accent-dark: #4c7c47;
}

.united-arab-emirates-article-page .article-hero.payments {
  --article-accent: #68b5c5;
  --article-accent-light: #d9f0f4;
  --article-accent-dark: #286e7c;
}

.united-arab-emirates-article-page .article-hero.checkout {
  --article-accent: #d99769;
  --article-accent-light: #ffe2cd;
  --article-accent-dark: #7f4850;
}

.united-arab-emirates-article-page .article-hero.tipping {
  --article-accent: #f0c754;
  --article-accent-light: #fff0b6;
  --article-accent-dark: #7c5520;
}

.united-arab-emirates-article-page .article-hero.planner {
  --article-accent: #70b99a;
  --article-accent-light: #dcefe4;
  --article-accent-dark: #175448;
}

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

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

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

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

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

.uae-note {
  display: grid;
  gap: 8px;
  margin: 30px 0;
  padding: 20px 22px;
  border: 3px solid var(--ink);
  border-radius: 7px;
  background: linear-gradient(135deg, #d9f0f4 0%, #e5f3df 52%, #fff0b6 100%);
  box-shadow: 6px 7px 0 var(--ink);
  transform: rotate(-.35deg);
}

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

.uae-note strong {
  font-size: 1.04rem;
}

.uae-note span {
  color: #273331;
}

.uae-cash-mix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0;
}

.uae-cash-mix > div {
  min-width: 0;
  padding: 16px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: linear-gradient(150deg, #fff0b6, #fff 130%);
  box-shadow: 3px 4px 0 var(--ink);
}

.uae-cash-mix strong,
.uae-cash-mix span {
  display: block;
}

.uae-cash-mix strong {
  margin-bottom: 4px;
}

.uae-cash-mix span {
  color: var(--muted);
  font-size: .88rem;
}

.uae-receipt {
  position: relative;
  margin: 28px auto;
  max-width: 520px;
  padding: 24px 26px 30px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #fffdf7;
  box-shadow: 7px 8px 0 #d99769;
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
}

.uae-receipt::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 12px;
  background: linear-gradient(135deg, transparent 6px, #fffdf7 0) 0 0 / 12px 12px repeat-x;
}

.uae-receipt > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
  border-bottom: 1px dashed #9d9687;
}

.uae-receipt .uae-receipt-total {
  margin-top: 5px;
  border-bottom: 0;
  font-weight: 900;
  font-size: 1.06rem;
}

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

@media (max-width: 700px) {
  .uae-route-grid,
  .uae-cash-mix {
    grid-template-columns: 1fr;
  }

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

  .uae-receipt {
    padding: 20px 16px 26px;
  }
}