:root{
  --ink:#1A2C4F;
  --muted:#A6AFC0;
  --gold:#C8A96E;
  --gold-hover:#B8955A;
  --brand:#2A4270;
  --brand-hover:#35527F;
  --soft-navy:#1E3255;
  --warm-white:#F5F3EE;
  --glass:rgba(245,243,238,0.78);
  --glass-line:rgba(200,169,110,0.15);
  --shadow:0 18px 40px -22px rgba(26,44,79,0.35);
}

*{ -webkit-tap-highlight-color: transparent; }

html{ scroll-behavior:smooth; background:var(--warm-white); }

body{
  margin:0;
  background:transparent;
  color:var(--ink);
  font-family:'Figtree', system-ui, sans-serif;
  overflow-x:hidden;
}

/* Sky read from a cruising window: deeper blue overhead, a sun high on the right,
   and light bouncing off the cloud deck near the bottom. */
#bg-gradient{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(130% 85% at 82% 4%, rgba(200,169,110,0.14) 0%, rgba(200,169,110,0.08) 30%, rgba(200,169,110,0) 62%),
    radial-gradient(100% 55% at 18% 104%, rgba(245,243,238,0.96) 0%, rgba(245,243,238,0) 65%),
    linear-gradient(180deg,rgba(30,50,85,0.18) 0%,rgba(42,66,112,0.10) 38%,rgba(245,243,238,0.70) 72%,rgba(245,243,238,0.96) 100%);
}

/* a thin band of brighter air at the horizon line */
#bg-gradient::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:38vh;
  background:linear-gradient(180deg, rgba(245,243,238,0) 0%, rgba(245,243,238,0.45) 100%);
  pointer-events:none;
}

#webgl{ position:fixed; inset:0; z-index:-1; }
#labels{ position:fixed; inset:0; z-index:2; pointer-events:none; }

/* Cursor feedback for globe interaction */
body.globe-grab{ cursor:grab; }
body.globe-drag, body.globe-drag *{ cursor:grabbing !important; user-select:none; }
body.globe-point{ cursor:pointer; }

.glass{
  background:var(--glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow);
}

.badge{
  background:rgba(245,243,238,0.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(200,169,110,0.15);
  box-shadow:0 10px 24px -18px rgba(26,44,79,0.5);
}

.btn-primary{
  background:var(--gold);
  color:var(--ink);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  box-shadow:0 14px 30px -14px rgba(200,169,110,0.9);
}
.btn-primary:hover{ transform:translateY(-2px); background:var(--gold-hover); }

.btn-gold{
  background:var(--gold); color:var(--ink);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  box-shadow:0 14px 30px -14px rgba(200,169,110,0.9);
}
.btn-gold:hover{ transform:translateY(-2px); background:var(--gold-hover); }

.lang-btn{ color:var(--muted); transition:color .2s ease, background .2s ease; }
.lang-btn.active{ color:var(--ink); background:rgba(245,243,238,0.95); }

/* Greeting pill floats above the country and points down at it */
.country-label{
  position:relative; width:0; height:0;
  opacity:0;
  transition:opacity .18s ease;
}
.country-label.on{ opacity:1; }

.country-label .pill{
  position:absolute; left:50%; bottom:12px;
  transform:translateX(-50%);
  font-family:'Figtree',sans-serif;
  font-size:13px; font-weight:700; letter-spacing:.01em;
  color:var(--ink);
  background:rgba(245,243,238,0.94);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(200,169,110,0.15);
  border-radius:999px;
  padding:5px 14px;
  white-space:nowrap;
  box-shadow:0 10px 22px -16px rgba(26,44,79,0.65);
}
.country-label .pill::after{
  content:'';
  position:absolute; left:50%; top:100%;
  transform:translateX(-50%);
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:8px solid rgba(245,243,238,0.94);
  filter:drop-shadow(0 3px 3px rgba(26,44,79,0.14));
}

/* Country search: the list stays out of the layout until the field is focused */
.search-list{
  position:absolute; left:0; right:0; top:calc(100% + 8px);
  max-height:264px; overflow-y:auto;
  display:none;
  z-index:20;
}
#search-box.open .search-list{ display:block; }
#country-list::-webkit-scrollbar{ width:8px; }
#country-list::-webkit-scrollbar-thumb{ background:rgba(26,44,79,0.16); border-radius:99px; }
.country-row{
  display:flex; align-items:center; gap:12px;
  width:100%;
  padding:9px 12px;
  border-radius:12px;
  font-size:15px; font-weight:500;
  color:var(--ink);
  text-align:left;
  transition:background .18s ease;
}
.country-row:hover{ background:rgba(53,82,127,0.12); }
.country-row.active{ background:rgba(200,169,110,0.22); font-weight:600; }
.country-row img{
  width:26px; height:18px; object-fit:cover; border-radius:4px;
  box-shadow:0 0 0 1px rgba(26,44,79,0.1);
}
.country-row .greet-tag{ margin-left:auto; font-size:13px; font-weight:500; color:var(--muted); }
#country-empty{ padding:12px; font-size:14px; color:var(--muted); }

#detail-panel{
  transform:translateX(130%);
  opacity:0;
  transition:transform .55s cubic-bezier(.22,.9,.28,1), opacity .4s ease;
}
#detail-panel.open{ transform:translateX(0); opacity:1; }
#panel-flag{ width:44px; height:30px; object-fit:cover; }

.faq-body{ max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.22,.9,.28,1); }
.faq-item.open .faq-body{ max-height:280px; }
.faq-sign{ transition:transform .35s ease; }
.faq-item.open .faq-sign{ transform:rotate(45deg); }

.rule{ height:1px; background:linear-gradient(90deg,rgba(200,169,110,0.32),rgba(200,169,110,0)); }

a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:6px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; }
}