/* Custom styles layered on top of Tailwind (CDN) + the Stitch design system. */

.hairline-border { border: 1px solid #E3E9EF; transition: border-color .2s; }
.hairline-border:hover { border-color: #0C6EA5; }

/* ---- map ---- */
#map { width: 100%; display: block; }
#map path.country { stroke: #fff; stroke-width: 0.4; cursor: pointer; transition: opacity .15s; }
#map path.country:hover { opacity: 0.78; }
#map path.country.selected { stroke: #0E1B2A; stroke-width: 1.2; }

.tooltip {
  position: fixed; pointer-events: none; z-index: 70; background: #0E1B2A; color: #fff;
  padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.3; opacity: 0;
  transition: opacity .12s; white-space: nowrap; transform: translate(-50%, -130%);
}
.tooltip b { font-weight: 700; }
.tooltip .t-since { color: #92ccff; font-size: 11px; }

/* ---- panel + scrim ---- */
.scrim { position: fixed; inset: 0; background: rgba(14,27,42,.28); opacity: 0; visibility: hidden;
  transition: opacity .3s; z-index: 55; backdrop-filter: blur(1px); }
.scrim.open { opacity: 1; visibility: visible; }
.panel {
  position: fixed; top: 0; right: 0; height: 100%; width: 420px; max-width: 92vw; background: #FBFCFD;
  z-index: 60; transform: translateX(100%); transition: transform .4s cubic-bezier(.16,1,.3,1);
  overflow-y: auto; display: flex; flex-direction: column;
}
.panel.open { transform: translateX(0); box-shadow: -18px 0 50px rgba(14,27,42,.16); }

.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #E3E9EF; border-radius: 10px; }

/* ---- trend chart ---- */
#trend { width: 100%; height: auto; display: block; }

/* ---- search autocomplete (works on iOS, unlike <datalist>) ---- */
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  margin: 0; padding: 4px; list-style: none; background: #fff;
  border: 1px solid #c0c7d1; border-radius: 12px; box-shadow: 0 10px 30px rgba(14,27,42,.12);
  max-height: 280px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.search-results[hidden] { display: none; }
.search-results li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 8px; cursor: pointer; font-size: 15px; color: #0E1B2A;
}
.search-results li .val { color: #5A6B7B; font-size: 13px; flex-shrink: 0; }
.search-results li.active, .search-results li:hover { background: #eff4ff; }
.search-results li.empty { color: #5A6B7B; cursor: default; justify-content: flex-start; }
.search-results li.empty:hover { background: transparent; }