/* A single country identity follows the reader through the entire portal.
   Country-specific hues come from the geometric mark and the local landscape. */
[data-exno-portal="saudi-arabia"] {
  --id-accent: #00563f; --id-secondary: #bd964b; --id-paper: #f3f5e9; --id-deep: #0c332d; --id-night: #71d9ac;
}
[data-exno-portal="turkey"] {
  --id-accent: #ab1634; --id-secondary: #d05564; --id-paper: #fff6f5; --id-deep: #571a2a; --id-night: #ff9baf;
}
[data-exno-portal="japan"] {
  --id-accent: #922041; --id-secondary: #d3919b; --id-paper: #fbf2f3; --id-deep: #38212a; --id-night: #ffadba;
}
[data-exno-portal="egypt"] {
  --id-accent: #86332b; --id-secondary: #b59144; --id-paper: #fcf3e5; --id-deep: #3d2825; --id-night: #ffad90;
}
[data-exno-portal="philippines"] {
  --id-accent: #174779; --id-secondary: #d59e36; --id-paper: #f0f5f9; --id-deep: #152e50; --id-night: #97cafa;
}
[data-exno-portal="albania"] {
  --id-accent: #8b1f32; --id-secondary: #382a37; --id-paper: #fcf2f0; --id-deep: #352029; --id-night: #ff9fae;
}
[data-exno-portal="thailand"] {
  --id-accent: #333b76; --id-secondary: #b7444d; --id-paper: #f3f3fa; --id-deep: #252842; --id-night: #b9c1ff;
}
[data-exno-portal="vietnam"] {
  --id-accent: #942d25; --id-secondary: #c29133; --id-paper: #fbf3e8; --id-deep: #432c24; --id-night: #ffae95;
}
[data-exno-portal="united-arab-emirates"] {
  --id-accent: #1a6250; --id-secondary: #ad4351; --id-paper: #f0f6ef; --id-deep: #15382e; --id-night: #89d7b7;
}
[data-exno-portal="el-salvador"] {
  --id-accent: #185384; --id-secondary: #57a2bf; --id-paper: #eef7fb; --id-deep: #14344c; --id-night: #88caec;
}
[data-exno-portal="indonesia"] {
  --id-accent: #9e2a35; --id-secondary: #cc715b; --id-paper: #fff3ed; --id-deep: #4e2830; --id-night: #ffaca5;
}
[data-exno-portal="morocco"] {
  --id-accent: #8b343b; --id-secondary: #267258; --id-paper: #fcf2e8; --id-deep: #432927; --id-night: #ffaea7;
}
[data-exno-portal="oman"] {
  --id-accent: #804537; --id-secondary: #42745f; --id-paper: #f9f3e9; --id-deep: #3c3029; --id-night: #e4b597;
}
[data-exno-portal="kenya"] {
  --id-accent: #43502a; --id-secondary: #a3573e; --id-paper: #f6f4e7; --id-deep: #283825; --id-night: #b7d897;
}
[data-exno-portal="india"] {
  --id-accent: #8b4b1d; --id-secondary: #347052; --id-paper: #fcf4e5; --id-deep: #473222; --id-night: #efbb84;
}

body[data-exno-portal] {
  --id-surface: color-mix(in srgb, var(--id-paper) 54%, white);
  --id-soft: color-mix(in srgb, var(--id-secondary) 12%, var(--id-paper));
  --id-line: color-mix(in srgb, var(--id-accent) 20%, var(--id-paper));
  --id-text: var(--id-deep);
  --id-muted: color-mix(in srgb, var(--id-deep) 74%, #838683);
  --id-bar: var(--id-surface);
  --id-bar-ink: var(--id-deep);
  --id-bar-accent: var(--id-accent);
  --id-bar-line: var(--id-line);
  --id-action: var(--id-accent);
  --id-action-ink: #fff;
  --id-flagship: var(--id-accent);
  --id-footer: var(--id-deep);
  --portal-accent: var(--id-accent);
  --portal-stripe: var(--id-secondary);
  --portal-paper: var(--id-paper);
  --portal-shade: color-mix(in srgb, var(--id-deep) 83%, #10151a);
  --sa-green: var(--id-accent);
  --sa-deep: var(--id-deep);
  --sa-sand: var(--id-soft);
  --sa-ochre: var(--id-accent);
  --sa-line: var(--id-line);
  --trh-paper: var(--id-surface);
  --trh-surface: #fff;
  --trh-soft: var(--id-soft);
  --trh-teal: var(--id-accent);
  --trh-ink: var(--id-text);
  --trh-muted: var(--id-muted);
  --trh-line: var(--id-line);
}

body[data-exno-portal="saudi-arabia"] {
  --id-bar: #084c39;
  --id-bar-ink: #fff5d9;
  --id-bar-accent: #f5d797;
  --id-bar-line: #38745b;
  --id-action: #f2d58e;
  --id-action-ink: #12382c;
  --id-footer: #10372b;
}
body[data-exno-portal="turkey"] {
  --id-bar: #fffafa;
  --id-footer: #59162c;
}

/* Keep the site-wide navigation, search and accessibility controls in their
   original positions while giving the whole masthead its country colours. */
body[data-exno-portal] .sa-header {
  background: var(--id-bar);
  color: var(--id-bar-ink);
  border-block-start: 0;
  border-block-end: 1px solid var(--id-bar-line);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--id-deep) 8%, transparent);
}
body[data-exno-portal] :is(.sa-announcement, .sa-topbar, .sa-top-note, .country-top-note) {
  background: var(--id-deep);
  color: #fff;
}
body[data-exno-portal] .sa-header .sa-nav > a:not(.button),
body[data-exno-portal] .sa-header .nav-actions a:not(.button),
body[data-exno-portal] .sa-header .nav-market-item,
body[data-exno-portal] .sa-header .account-nav-link {
  color: var(--id-bar-ink);
}
body[data-exno-portal] .sa-header .nav-market-button { color: var(--id-bar-ink); opacity: .82; }
body[data-exno-portal] .sa-header :is(.sa-menu-toggle, .header-menu-toggle) {
  background: var(--id-bar);
  border-color: var(--id-bar-line);
  color: var(--id-bar-ink);
}
body[data-exno-portal] .sa-header .sa-nav > a:not(.button):hover,
body[data-exno-portal] .sa-header .sa-nav > a[aria-current="page"]:not(.button) {
  color: var(--id-bar-accent);
  text-decoration: underline;
  text-underline-offset: .3em;
}
body[data-exno-portal] .sa-header .sa-country-name {
  background: none;
  color: var(--id-bar-ink);
  border-inline-start: 1px solid var(--id-bar-line);
  border-radius: 0;
  padding-inline-start: 12px;
  font-size: .76rem;
}
body[data-exno-portal] .sa-header .sa-country-name[hidden],
html[lang="tr"] body[data-exno-portal="turkey"] .sa-header .sa-country-name:not([data-portal-different-name]) {
  display: none;
}
body[data-exno-portal] .sa-header.header-is-compact .sa-nav,
body[data-exno-portal] .sa-header .sa-nav.is-open {
  background: var(--id-bar);
}
body[data-exno-portal] .sa-header :is(a, button):focus-visible {
  outline: 3px solid var(--id-bar-accent);
  outline-offset: 3px;
}

body[data-exno-portal] a[data-portal-link="country"],
body[data-exno-portal] .brand-logo:has(.evp-brand) {
  width: auto;
  max-width: min(218px, 45vw);
  min-width: 0;
  height: auto;
  text-decoration: none;
  color: var(--id-bar-ink);
}
.evp-brand {
  display: inline-flex;
  align-items: center;
  max-inline-size: 100%;
  min-inline-size: 0;
  gap: 10px;
  vertical-align: middle;
  unicode-bidi: isolate;
  direction: ltr;
  text-align: left;
}
.evp-brand .evp-brand-mark {
  display: block;
  flex: 0 0 auto;
  width: 43px;
  height: 43px;
  object-fit: contain;
}
.evp-brand-type {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  line-height: 1;
}
.evp-brand-name {
  font: 740 clamp(16px, 1.36vw, 21px)/1.04 var(--sans, system-ui, sans-serif);
  letter-spacing: -.045em;
  text-wrap: balance;
  color: inherit;
}
.evp-brand-visa {
  font: 650 13px/1 var(--sans, system-ui, sans-serif);
  letter-spacing: .035em;
  color: var(--id-bar-accent);
}
body[data-exno-portal] a[data-portal-link="country"]:hover .evp-brand-name {
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
}

/* The portal's own header, photograph and typography stay in place. Colour
   the navigation and reading surfaces which continue below the first screen. */
body[data-exno-portal].trh-page {
  background: var(--id-surface);
}
body[data-exno-portal].trh-page .trh-jump-nav {
  background: var(--id-soft);
  border-block-color: var(--id-line);
}
body[data-exno-portal].trh-page .trh-jump-nav a {
  color: var(--id-accent);
}
/* Place the image below the hero scrim while keeping its real credits above
   it. Clicks on the cover still reach the original navigation and CTAs. */
body[data-exno-portal].trh-page .trh-hero-photo { z-index: auto; pointer-events: none; }
body[data-exno-portal].trh-page .trh-hero-photo > :is(img, picture) {
  position: absolute; inset: 0; z-index: -2;
}
body[data-exno-portal].trh-page .trh-hero-photo figcaption {
  z-index: 1; color: #fff; text-shadow: 0 1px 4px #101820;
}
body[data-exno-portal].trh-page .trh-hero-photo figcaption > div {
  background: rgb(9 18 23 / 80%); border-radius: 3px; padding: 3px 6px;
}
body[data-exno-portal].trh-page .trh-hero-photo figcaption a {
  pointer-events: auto; color: #fff;
}
body[data-exno-portal] .trh-place {
  border-color: var(--id-line);
}
body[data-exno-portal] .trh-place:focus-within,
body[data-exno-portal] .trh-place:hover {
  border-color: var(--id-accent);
}
body[data-exno-portal] :is(.trh-section-heading, .sa-guide-header, .sa-article-head) .eyebrow,
body[data-exno-portal] .evp-kicker {
  color: var(--id-accent);
}
body[data-exno-portal] .evp-module {
  --evp-paper: var(--id-surface);
  --evp-surface: var(--trh-surface);
  --evp-soft: var(--id-soft);
  --evp-ink: var(--id-text);
  --evp-muted: var(--id-muted);
  --evp-line: var(--id-line);
  --evp-accent: var(--id-accent);
}
body[data-exno-portal] .evp-planner {
  border-block-start: 4px solid var(--id-accent);
}
body[data-exno-portal] .evp-step {
  background: var(--id-soft);
  color: var(--id-accent);
}
body[data-exno-portal] .sa-guide-hero,
body[data-exno-portal] .sa-page-intro {
  background-color: var(--id-soft);
  color: var(--id-text);
}
body[data-exno-portal] .trh-breadcrumbs a {
  color: var(--id-accent);
  text-decoration-color: color-mix(in srgb, var(--id-accent) 60%, transparent);
}
body[data-exno-portal] main nav[class*="-jump"]:not(.trh-jump-nav) {
  background-color: var(--id-deep);
  color: #fff;
  border-color: var(--id-secondary);
}
body[data-exno-portal] main nav[class*="-jump"]:not(.trh-jump-nav) a { color: #fff; }

body[data-exno-portal].sa-page :is(.sa-header, .trh-hero, .trh-closing, .sa-guide-hero) a.button.button-primary[data-central-application],
body[data-exno-portal].trh-page .trh-filters button[aria-pressed="true"] {
  background: var(--id-action);
  color: var(--id-action-ink);
  border-color: color-mix(in srgb, var(--id-action) 73%, var(--id-action-ink));
}
body[data-exno-portal] a.button-primary[data-central-application]:hover {
  text-decoration: underline;
  text-underline-offset: .18em;
}

body[data-exno-portal] .site-footer.sa-footer {
  background: var(--id-footer);
  color: #f9f6ee;
  border-block-start: 5px solid var(--id-secondary);
}
body[data-exno-portal] .sa-footer .evp-brand-line {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  gap: 14px;
  margin-block-end: 16px;
}
body[data-exno-portal] .sa-footer .evp-brand { gap: 12px; color: #fffaf0; }
body[data-exno-portal] .sa-footer .evp-brand-mark { width: 48px; height: 48px; }
body[data-exno-portal] .sa-footer .evp-brand-visa { color: color-mix(in srgb, var(--id-secondary) 43%, white); }
body[data-exno-portal] .sa-footer [data-portal-brand="network"] {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  max-width: 100%;
  gap: 8px;
  color: #f5efe5;
  font: 500 .83rem/1.45 var(--sans, system-ui, sans-serif);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
body[data-exno-portal] .sa-footer .evp-network-link {
  box-sizing: border-box;
  width: 118px;
  padding: 6px 10px;
  border-radius: 4px;
  background: #f8faf5;
}
body[data-exno-portal] .sa-footer .evp-network-link :is(picture, img) {
  display: block; min-width: 0; width: 100%; max-width: 100%; height: auto;
}
body[data-exno-portal] .sa-footer :is(.footer-nav h2, .footer-nav h3) { color: #fff; }
body[data-exno-portal] .sa-footer :is(.footer-nav a, .footer-bottom a, .footer-brand-column p) { color: #e4ece6; }
body[data-exno-portal] .sa-footer :is(.footer-email, .corporate-contact) {
  color: #f4e5c6;
}
body[data-exno-portal] .sa-footer :is(.footer-corporate p, .footer-disclaimer p, .footer-bottom span) {
  color: #cad8ce;
}
body[data-exno-portal] .sa-footer .corporate-logo-wrap {
  box-sizing: border-box;
  max-width: 175px;
  padding: 5px 8px;
  border-radius: 4px;
  background: #f8faf5;
}
body[data-exno-portal] .sa-footer a:focus-visible { outline: 3px solid #f5dfa9; outline-offset: 3px; }

@media (max-width: 840px) {
  body[data-exno-portal] .sa-header .sa-nav { background: var(--id-bar); }
  body[data-exno-portal] .sa-header a[data-portal-link="country"] {
    max-width: min(218px, 53vw);
  }
  .evp-brand { gap: 8px; }
  .evp-brand .evp-brand-mark { width: 39px; height: 39px; }
  .evp-brand-name { font-size: 16px; }
  .evp-brand-visa { font-size: 12px; }
}
@media (max-width: 480px) {
  body[data-exno-portal] .sa-header .sa-country-name {
    overflow-wrap: anywhere;
    max-inline-size: 13ch;
    font-size: 10px;
    padding-inline-start: 7px;
  }
}
@media (prefers-color-scheme: dark) {
  body[data-exno-portal] {
    --id-accent: var(--id-night);
    --id-surface: color-mix(in srgb, var(--id-deep) 40%, #111817);
    --id-soft: color-mix(in srgb, var(--id-deep) 50%, #1a2224);
    --id-line: color-mix(in srgb, var(--id-night) 23%, #172124);
    --id-text: #f2f1e9;
    --id-muted: #bfd0c7;
    --id-bar: color-mix(in srgb, var(--id-deep) 58%, #101b1b);
    --id-bar-ink: #fbf8ee;
    --id-bar-accent: var(--id-night);
    --id-bar-line: var(--id-line);
    --id-action: var(--id-night);
    --id-action-ink: #152221;
    --trh-surface: color-mix(in srgb, var(--id-deep) 35%, #1b2526);
  }
  body[data-exno-portal="saudi-arabia"] {
    --id-bar: #123b2f;
    --id-bar-accent: #f4d695;
    --id-action: #f2d58e;
  }
  body[data-exno-portal] .sa-footer .evp-network-link {
    background: color-mix(in srgb, var(--id-deep) 72%, #0a1819);
  }
}
@media (forced-colors: active) {
  body[data-exno-portal] .sa-header,
  body[data-exno-portal] .sa-footer { border-block: 1px solid CanvasText; }
  body[data-exno-portal] .evp-brand-visa { color: LinkText; }
}
