/* eSIM map — 全宽、常驻价格标签、加浓配色。桌面端功能，≤900px 换成引导去搜索。 */

.etd-map-page { --map-ocean: #dde9f0; }
.etd-map-intro, .etd-map-after { max-width: 1240px; }
.etd-map-lede { max-width: 62ch; color: var(--muted); margin-bottom: 1.5rem; }
.etd-map-foot { margin-top: 1.5rem; font-size: 0.85rem; color: var(--muted); }

/* 全宽：脱出 .etd-wrap 的最大宽度，铺满视口。
   注意别在这个盒子上留 max-width——盒子一旦被封顶，下面那个负 margin-left 就把它
   钉死在视口左边（margin-right 是 auto，吸掉全部余量），宽屏上整块偏左。
   1600 这个上限要封在**轨道**上，再用 justify-content 把轨道居中。 */
.etd-map.is-bleed {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 clamp(12px, 3vw, 40px);
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1236px) 340px;  /* 1236 + 24 gap + 340 = 1600 */
  justify-content: center;
}
.etd-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
  max-width: 1600px;
  margin-inline: auto;
}
.etd-map-smallscreen { display: none; }

.etd-map-canvas {
  position: relative;
  background: var(--map-ocean);
  border-radius: 14px;
  padding: 10px;
}
.etd-map-svg { display: block; width: 100%; height: auto; }

/* 配色：从淡绿改成高对比。没货的明确退到背景里，有货的实，有对比的最重。
   多块陆地的国家是 <g id>，class 挂在 g 上，所以每条规则都要带 " , X path" 那一半，
   否则日本、中国、英国、美国这些大国全部不上色。 */
.etd-map-svg path { fill: #c3d2da; transition: fill .45s ease; }
.etd-map-svg.is-lit .has-plans,   .etd-map-svg.is-lit .has-plans path   { fill: #62b39b; }
.etd-map-svg.is-lit .has-compare, .etd-map-svg.is-lit .has-compare path { fill: #0f7d67; }
.etd-map-svg .has-plans { cursor: pointer; }
.etd-map-svg .has-plans:hover, .etd-map-svg .has-plans:hover path { fill: #ffb066; transition-delay: 0s !important; }
.etd-map-svg .is-selected, .etd-map-svg .is-selected path { fill: var(--brand-ink, #b8430a); transition-delay: 0s !important; }

.etd-map-tip {
  position: absolute; z-index: 4; pointer-events: none;
  background: #172033; color: #fff; border-radius: 8px;
  padding: 8px 11px; font-size: 0.85rem; line-height: 1.35; max-width: 220px;
  box-shadow: 0 6px 18px rgba(23, 32, 51, 0.25);
}
.etd-map-tip strong { display: block; }
.etd-map-tip span { opacity: 0.85; }
.etd-map-tip em { display: block; margin-top: 3px; font-style: normal; color: #ffc9a3; font-size: 0.78rem; }

/* 标记 = 旗帜 + 常驻价格。价格印在图上，是这张图从「覆盖图」变成「价格地图」的关键，
   不能只藏在悬停后面——不动鼠标就什么都看不到的话，一眼看不出它是干什么的。 */
.etd-map-pins { position: absolute; inset: 10px; pointer-events: none; }
.etd-map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 3px;
  border: 0; border-radius: 999px;
  background: #fff; color: var(--ink, #172033);
  font: inherit; font-size: 0.8rem; font-weight: 700;
  line-height: 1; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(23, 32, 51, 0.28);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.etd-map-pin img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; display: block; }
.etd-map-pin__price { font-variant-numeric: tabular-nums; }
.etd-map-pin:hover, .etd-map-pin:focus-visible { transform: translate(-50%, -50%) scale(1.09); z-index: 3; box-shadow: 0 4px 14px rgba(23,32,51,.34); }
.etd-map-pin:focus-visible { outline: 2px solid var(--accent, #006b63); outline-offset: 2px; }

.etd-map-panel {
  position: sticky; top: 90px;
  border: 1px solid var(--line, #d7dde2); border-radius: 14px;
  padding: 18px; background: #fff; min-height: 260px;
}
.etd-map-panel h2 { margin: 0 0 0.4rem; font-size: 1.25rem; }
.etd-map-panel h3 { margin: 1.2rem 0 0.4rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.etd-map-hint { color: var(--muted); margin: 0; }

.etd-map-prices, .etd-map-rivals { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.etd-map-prices li, .etd-map-rivals li {
  display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid var(--line, #d7dde2); font-size: 0.9rem;
}
.etd-map-prices li:last-child, .etd-map-rivals li:last-child { border-bottom: 0; }
.etd-map-prices li span, .etd-map-rivals li span { color: var(--muted); }
.etd-map-prices li.is-ref strong, .etd-map-rivals li.is-ours strong { font-size: 1.05rem; }
.etd-map-rivals li.is-ours { background: #eef8f4; margin: 0 -8px; padding: 7px 8px; border-radius: 6px; }
.etd-map-rivals em { flex-basis: 100%; font-style: normal; color: var(--accent, #006b63); font-weight: 600; font-size: 0.82rem; }

.etd-map-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 1.2rem 0 0; }
.etd-map-link { font-size: 0.9rem; }

/* 快捷条：香港在简化地图上没有几何图形，只有这里够得着；也是键盘唯一的入口 */
.etd-map-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 0; }
.etd-map-strip-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.etd-map-strip > span[data-map-strip] { display: flex; flex-wrap: wrap; gap: 8px; }
.etd-map-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 6px;
  border: 1px solid var(--line, #d7dde2); border-radius: 999px;
  background: #fff; font: inherit; font-size: 0.85rem; cursor: pointer;
}
.etd-map-chip img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; }
.etd-map-chip:hover { border-color: var(--accent, #006b63); }
.etd-map-chip:focus-visible { outline: 2px solid var(--accent, #006b63); outline-offset: 2px; }

/* CC BY-SA 3.0 的署名。低调但必须可见——这是使用这张地图的条件，不是装饰。 */
.etd-map-credit { margin-top: 0.8rem; font-size: 0.78rem; color: var(--muted); }
.etd-map-credit a { color: inherit; }

/* 促销国家：整块品牌橙 + 缓慢呼吸。用户明确要求这个信号「要跳动、要强烈」。
   动画只作用于 fill / box-shadow，不动几何，不会触发重排。 */
@keyframes etd-map-promo-pulse {
  0%, 100% { fill: var(--brand-ink, #b8430a); }
  50%      { fill: #f36a17; }
}
.etd-map-svg.is-lit .has-promo,
.etd-map-svg.is-lit .has-promo path { animation: etd-map-promo-pulse 2.4s ease-in-out infinite; }
.etd-map-pin.is-promo { animation: etd-map-pin-pulse 2.4s ease-out infinite; }
@keyframes etd-map-pin-pulse {
  0%   { box-shadow: 0 2px 8px rgba(23,32,51,.28), 0 0 0 0    rgba(243,106,23,.65); }
  70%  { box-shadow: 0 2px 8px rgba(23,32,51,.28), 0 0 0 14px rgba(243,106,23,0); }
  100% { box-shadow: 0 2px 8px rgba(23,32,51,.28), 0 0 0 0    rgba(243,106,23,0); }
}
@media (prefers-reduced-motion: reduce) {
  .etd-map-svg path { transition: none; }
  .etd-map-svg .has-promo, .etd-map-svg .has-promo path, .etd-map-pin.is-promo { animation: none; }
}

@media (max-width: 900px) {
  /* 小屏不给地图：点国家太难，现有的全屏国家列表本来就更快 */
  .etd-map, .etd-map-strip { display: none; }
  .etd-map-smallscreen { display: block; }
}

/* ---- 首页那一屏 ---- */
.home-map { --map-ocean: #dde9f0; padding: 56px 0 48px; background: #f6f9fb; }
.home-map-head { text-align: center; margin-bottom: 26px; }
.home-map-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.02em; margin: 0 0 8px; }
.home-map-head p { color: var(--muted); margin: 0; }
.home-map-foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; margin-top: 26px; }
.home-map-cmp { font-size: 0.95rem; }
/* 首页版的占位图：和活地图同一个盒子，换上去时不跳 */
.etd-map-canvas img[data-map-placeholder] {
  display: block; width: 100%; height: auto; aspect-ratio: 1440 / 863; border-radius: 8px;
}
@media (max-width: 900px) {
  /* 移动端不显示地图，整屏收起——它连 SVG 都不会去取 */
  .home-map { display: none; }
}