/* Pinglo GCC section (/gcc, /gcc/<country>) — loaded after site.min.css on GCC pages only. Same system as the home page
 * (paper background, ping rings, mono labels, blue/green brand); the one new colour is the desert: a sand-gold sun and
 * three dune bands in place of Japan's red sun and Mount Fuji. */
:root {
  --sand-1: #F3E8D0;
  --sand-2: #EAD8B2;
  --sand-3: #DEC48F;
  --sun-gold: #E6A23C;
  --gold-text: #A8670F; /* AA on paper and white */
}

/* The desert accents replace Japan's red on GCC pages: section eyebrows, the product cards' sun, icon suns. */
body[data-page^="gcc"] { --i-sun: var(--sun-gold); }
body[data-page^="gcc"] .eyebrow { color: var(--gold-text); }
body[data-page^="gcc"] .prod-card-art::before { background: var(--sun-gold); }

/* ---------- hero ---------- */
.hero2 h1 .gold { color: var(--gold-text); }
/* destination pages: the dunes live inside a circle the size of the outer blue ring, so they read as a window onto the desert */
.gcc-pd-art .dunes { position: absolute; left: 7%; top: 3%; width: 86%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.dunes .d1, .dunes .d2, .dunes .d3 { position: absolute; border-radius: 50%; }
.dunes .d1 { left: -30%; top: 60%; width: 104%; height: 70%; background: var(--sand-1); }
.dunes .d2 { left: 30%; top: 66%; width: 110%; height: 70%; background: var(--sand-2); }
.dunes .d3 { left: -20%; top: 79%; width: 140%; height: 60%; background: var(--sand-3); }

/* ---------- arrivals board ---------- */
.gcc-board { background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; max-width: 1080px; margin: 0 auto; }
.gcc-board-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 22px; border-bottom: 1px solid var(--line); background: #FBFAF7; }
.gcc-board-head .t { display: inline-flex; align-items: center; gap: 10px; font: 600 11px var(--font-mono); letter-spacing: .14em; color: var(--ink); }
.gcc-board-head .t b { font: 600 15px var(--font-body); letter-spacing: 0; }
.gcc-board-head .clock { font: 500 11px var(--font-mono); letter-spacing: .1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.gb-row { display: grid; grid-template-columns: 112px minmax(0, 1.7fr) minmax(0, 1.1fr) 64px minmax(0, 1fr) 84px 20px; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--divider); color: inherit; text-decoration: none; transition: background-color .15s ease; }
.gb-row:last-child { border-bottom: 0; }
a.gb-row:hover, a.gb-row:focus-visible { background: var(--sel-bg); outline: none; }
a.gb-row:focus-visible { box-shadow: inset 3px 0 0 var(--blue); }
.gb-th { padding-block: 9px; background: #FBFAF7; font-size: 12px; color: var(--muted); }
.gb-flap { display: inline-flex; gap: 3px; direction: ltr; }
.gb-flap span { position: relative; display: grid; place-items: center; width: 26px; height: 32px; border-radius: 6px; background: var(--seg); font: 600 16px var(--font-mono); color: var(--ink); }
.gb-flap span::after { content: ""; position: absolute; inset-inline: 0; top: 50%; border-top: 1px solid #DAD6CD; }
.gb-dest { display: flex; flex-direction: column; min-width: 0; }
.gb-dest strong { font-size: 16px; font-weight: 600; color: var(--ink); }
.gb-dest small { font: 500 11px var(--font-mono); letter-spacing: .08em; color: var(--muted); unicode-bidi: isolate; }
.gb-dest small.ar { font: 400 12.5px var(--font-body); letter-spacing: 0; }
.gb-net { font: 500 13.5px var(--font-mono); color: var(--ink); unicode-bidi: isolate; overflow-wrap: anywhere; }
.gb-5g { justify-self: start; font: 600 11.5px var(--font-mono); color: var(--green-text); background: var(--green-tint); border-radius: 6px; padding: 2px 8px; }
.gb-price { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.gb-price small { font-size: 11.5px; color: var(--muted); }
.gb-price strong { font-size: 16px; font-weight: 600; color: var(--ink); }
.gb-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--green-text); font-weight: 500; }
.gb-status .pg-dot { width: 7px; height: 7px; }
.gb-status.soon { color: var(--muted); }
.gb-go { color: var(--blue); font-size: 18px; line-height: 1; }
.gb-row.is-pass { background: var(--green-tint); }
.gb-row.is-pass .gb-dest strong { color: var(--green-text); }
a.gb-row.is-pass:hover { background: #DDF0E6; }
@media (max-width: 760px) {
  .gb-th { display: none; }
  .gb-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "code dest price" "code net status"; row-gap: 4px; padding: 14px 16px; }
  .gb-row > .gb-flap { grid-area: code; }
  .gb-row > .gb-dest { grid-area: dest; }
  .gb-row > .gb-net { grid-area: net; font-size: 12px; color: var(--muted); }
  .gb-row > .gb-price { grid-area: price; text-align: end; }
  .gb-row > .gb-status { grid-area: status; justify-self: end; font-size: 12px; }
  .gb-row > .gb-5g, .gb-row > .gb-go { display: none; }
  .gb-flap span { width: 22px; height: 28px; font-size: 14px; }
}

/* ---------- product types: destination picker + the home page's product cards ---------- */
.gcc-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 26px; max-width: 900px; }
.gcc-pick button { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font: 500 14px var(--font-body); color: var(--text); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.gcc-pick button small { font: 600 10.5px var(--font-mono); letter-spacing: .1em; color: var(--muted); }
.gcc-pick button:hover { border-color: var(--line-strong); }
.gcc-pick button[aria-pressed="true"] { border-color: var(--blue); background: var(--sel-bg); color: var(--blue); }
.gcc-pick button[aria-pressed="true"] small { color: var(--blue); }
.gcc-pick button:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 2px; }
.pa-cc { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); font: 600 11px var(--font-mono); letter-spacing: .12em; color: var(--ink); direction: ltr; }
.gcc-plans-empty { text-align: center; color: var(--muted); }

/* ---------- networks ---------- */
.gcc-nets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 156px), 1fr)); gap: 12px; max-width: 1080px; margin: 0 auto; }
.gcc-net { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.gcc-net small { font: 600 10.5px var(--font-mono); letter-spacing: .12em; color: var(--muted); unicode-bidi: isolate; }
.gcc-net strong { font: 600 17px var(--font-mono); color: var(--ink); unicode-bidi: isolate; }
.gcc-net span { font-size: 14px; color: var(--text); }
.gcc-net.is-pass { grid-column: 1 / -1; background: var(--green-tint); border-color: var(--green-100); }
.gcc-net.is-pass strong { font-family: var(--font-body); font-size: 15px; }
.gcc-net.is-pass .ops { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--text); }
.gcc-net.is-pass .ops b { font: 600 13px var(--font-mono); color: var(--ink); }

/* ---------- country page ---------- */
.gcc-pd-art .sun { background: var(--sun-gold); top: 18%; }
.gcc-pd-art .dunes { left: 14%; top: 4%; width: 72%; }
.gcc-pd-art .esim-card2 { z-index: 2; }
.gcc-types { display: flex; flex-wrap: wrap; gap: 8px; }
.gcc-types .pd-chip small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.gcc-types .pd-chip.active small { color: inherit; opacity: .8; }
.gcc-soon { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.gcc-roam { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--green-tint); color: var(--green-text); font-size: 14px; line-height: 1.7; }
.gcc-others { margin-top: clamp(40px, 6vw, 72px); }
.gcc-others h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 16px; }

/* ---------- Japanese pages (/ja/gcc…) ---------- */
html[lang="ja"] body { font-family: "Readex Pro", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif; }
/* auto-phrase: lines break between Japanese phrases, never inside a word (Chrome/Edge; others fall back to normal) */
html[lang="ja"] .hero2 h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] .section-head p { letter-spacing: 0; line-break: strict; word-break: keep-all; overflow-wrap: anywhere; word-break: auto-phrase; }
html[lang="ja"] .hero2 h1 { font-size: clamp(30px, 3.6cqw, 48px); line-height: 1.3; }
html[lang="ja"] .js-currency-select, html[lang="ja"] .price-bar { display: none; }
html[lang="ja"] .gcc-pick button small, html[lang="ja"] .gb-dest small { letter-spacing: .06em; }
.gcc-lang { text-decoration: none; }

/* Japanese buy box: name + e-mail, then Stripe's payment page (yen) */
.gcc-jp-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.gcc-jp-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--muted); }
.gcc-jp-form .input { width: 100%; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 12px; font: inherit; color: var(--ink); background: #fff; }
.gcc-jp-form .input:focus-visible { outline: 3px solid var(--blue-soft); border-color: var(--blue); }
.gcc-jp-pay { justify-content: center; gap: 6px; }
/* Stripe's logos (Japanese pages): JCB a little taller; the square Amex box fills its tile in its own blue */
.pay-icons .pay-logo.is-jcb img { max-height: 22px; }
.pay-icons .pay-logo.is-amex { padding: 0; background: #016fd0; border-color: #016fd0; }
.pay-icons .pay-logo.is-amex img { max-height: 28px; }

/* Flags (js/gcc-shop.js flagHTML): round, sized by the text around them; the GCC pass = six overlapping in the page's
   direction (so the gap to the text lands on the right side). The images themselves are never mirrored. */
.gflag { display: inline-block; width: 1.25em; height: 1.25em; border-radius: 50%; object-fit: cover; vertical-align: -.24em; margin-inline-end: .4em; box-shadow: 0 0 0 1px rgba(11, 22, 49, .14); flex: none; }
.gflags { display: inline-flex; vertical-align: -.24em; margin-inline-end: .6em; }
.gflags .gflag { width: 1.15em; height: 1.15em; margin: 0; box-shadow: 0 0 0 1.5px #fff; }
.gflags .gflag + .gflag { margin-inline-start: -.38em; }
.gb-dest small .gflags { font-size: 12px; }
.gcc-pick button .gflag { width: 18px; height: 18px; margin: 0; vertical-align: 0; }
.pd-intro h1 .gflag { width: .9em; height: .9em; vertical-align: -.08em; margin-inline-end: .3em; }
.pd-intro h1 .gflags { font-size: .62em; vertical-align: .1em; margin-inline-end: .7em; }
.gcc-chiprow { display: flex; align-items: center; justify-content: space-between; direction: ltr; }
.esim-card2 .gcc-chiprow .gflag { width: 9cqw; height: 9cqw; margin: 0; }
.esim-card2 .gcc-chiprow .gflags { margin: 0; }
.esim-card2 .gcc-chiprow .gflags .gflag { width: 6.4cqw; height: 6.4cqw; }
.esim-card2 .gcc-chiprow .gflags .gflag + .gflag { margin-inline-start: -2.2cqw; }
/* network badges (span.nb, styles.css) in the networks grid and the GCC Pass row */
.gcc-net strong .nb-row { margin: 6px 0 4px; }
.gcc-net.is-pass .ops > span { display: inline-flex; align-items: center; gap: 6px; }
.gcc-net.is-pass .ops span.nb { font-size: 12.5px; padding-block: 5px; }
/* a destination page's words written by the server into #gccRoot (gcc-pages.js gccDestBody) — for crawlers that run no
   scripts; browsers get gcc-dest.js's page instead. #gccRoot keeps a screen's height until it is drawn, so the footer
   never jumps up into view (layout shift). */
.js .gcc-ssr { display: none; }
.js #gccRoot { min-height: 100vh; }
.gcc-ssr { padding-block: var(--space-6, 24px); line-height: 1.8; }
.gcc-ssr details { margin-block: 8px; }

/* A destination that sells fewer than four types (a type taken off sale in the admin): the cards stay centred at their
   usual width instead of leaving an empty column. */
@media (min-width: 1240px) {
  .prod-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; }
  .prod-grid.cols-2 { max-width: 680px; }
  .prod-grid.cols-1 { grid-template-columns: minmax(0, 1fr); max-width: 340px; }
}