/* ===========================================================
   世界电商地图 map.css 优化版
   合并重复代码，保持原有结构和功能
=========================================================== */

/* ----------------------------------------------------
   作用域容器与布局
---------------------------------------------------- */
.container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    box-sizing: border-box;
}

#wem-map-scope {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto 16px;
    padding: 20px 10px 3px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* 地图整体布局 */
#wem-map-scope #brand-map-module {
    width: 100%;
}

/* ----------------------------------------------------
   地图容器
---------------------------------------------------- */
#wem-map-scope #map-wrap {
    width: 100%;
    max-width: 1600px;
    height: 520px;
    border: 1px solid #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
}

/* ----------------------------------------------------
   品牌列表：12列标准栅格布局
---------------------------------------------------- */
#wem-map-scope #brand-list {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px;
    justify-items: center;
    align-items: center;
    margin: 0 auto;
    padding: 12px 0;
}

/* 小屏幕（手机）适配为4列 */
@media (max-width: 768px) {
    #wem-map-scope #brand-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* 超小屏幕（如小手机）适配为3列 */
@media (max-width: 480px) {
    #wem-map-scope #brand-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ----------------------------------------------------
   单个品牌卡片
---------------------------------------------------- */
#wem-map-scope #brand-list .brand-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: all 0.2s ease;
}

#wem-map-scope #brand-list .brand-item:hover {
    background: #343638;
    border-color: #d1d5db;
}

/* ----------------------------------------------------
   品牌 LOGO（不强制比例，不会变形）
---------------------------------------------------- */
#wem-map-scope .brand-logo {
    width: 100%;
    max-width: 100px;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* 品牌名称标题 */
#wem-map-scope .brand-title {
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.2;
    color: #333;
}

/* ----------------------------------------------------
   切换按钮样式
---------------------------------------------------- */
.toggle-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 8px 15px;
    font-size: 14px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.toggle-btn:hover {
    background-color: #0056b3;
}

/* ----------------------------------------------------
   国旗长方形 48x36
---------------------------------------------------- */
#wem-map-scope .flag {
    width: 48px;
    height: 36px;
    object-fit: cover;
    border-radius: 3px;
    margin: 0 auto 4px;
}

/* ----------------------------------------------------
   市场份额进度条（最终稳定版）
---------------------------------------------------- */
/* 市场份额进度条：与上方“指数/数值”整行对齐 */
#wem-map-scope .wem-progress {
    width: 100%;
    max-width: none;     /*  去掉最大宽度限制 */
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.08));
    margin: 4px 0 0;     /*  不用 auto 居中，直接跟随父容器对齐 */
}

#wem-map-scope .wem-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: var(--brand, #3B82F6);
    transition: width 0.4s ease;
}

/* ========================================================
   Leaflet 版权声明 · 位置 & 样式统一
   作用域：仅限 World Ecommerce Map
========================================================== */

/* 定位到地图右下角 */
/* 强制显示（防止被主题/旧CSS隐藏） */
#wem-map-scope .leaflet-control-attribution{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ==========================================================
   版权声明：固定在 #leaflet-map 的右下角
========================================================== */

/* 确保右下角容器贴边（防主题污染） */
/* 只作用在你的地图容器里 */
#wem-map-scope #leaflet-map{ position: relative; }

/* 1) 右下角控件容器：强制贴右下角 */
#wem-map-scope #leaflet-map .leaflet-control-container{
  position: absolute !important;
  inset: 0 !important;              /* top/right/bottom/left 全覆盖 */
  pointer-events: none !important;  /* 不挡地图拖动 */
}

#wem-map-scope #leaflet-map .leaflet-control-container .leaflet-bottom.leaflet-right{
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* 2) attribution 本体：往内缩一点，显示在右下角 */
#wem-map-scope #leaflet-map .leaflet-control-attribution{
  pointer-events: auto !important;
  margin: 0 10px 10px 0 !important;   /* 右下角内边距 */
  padding: 4px 8px;

  font-size: 11px;
  line-height: 1.4;

  background: rgba(255,255,255,0.05);
  color: #374151;
  border-radius: 4px;

  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  backdrop-filter: blur(4px);
  z-index: 9999;
}

/* 链接样式 */
#wem-map-scope #leaflet-map .leaflet-control-attribution a{
  color:#2563eb;
  text-decoration:none;
}
#wem-map-scope #leaflet-map .leaflet-control-attribution a:hover{
  text-decoration:underline;
}

/* 暗黑模式 */
.dark #wem-map-scope #leaflet-map .leaflet-control-attribution,
.io-black-mode #wem-map-scope #leaflet-map .leaflet-control-attribution{
  background: rgba(32,32,32,0.05);
  color: #e5e7eb;
}
.dark #wem-map-scope #leaflet-map .leaflet-control-attribution a,
.io-black-mode #wem-map-scope #leaflet-map .leaflet-control-attribution a{
  color:#93c5fd;
}

/* ----------------------------------------------------
   品牌列表卡片（全新优化版）
---------------------------------------------------- */
.wem-brand {
    display: inline-flex;
}

.wem-card {
    position: relative;
    width: 100px;
    height: 50px;
    border-radius: 3px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    transition: transform .15s ease, box-shadow .15s ease;
}

/* 高亮激活状态 */
.wem-card.is-active {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .12);
}

/* 悬停 */
.wem-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .10);
}

/* LOGO 优化：保持清晰，不放大，不拉伸 */
.wem-logo {
    width: auto;
    height: auto;
    max-width: 70%;
    max-height: 70%;
    display: block;
    object-fit: contain;
    image-rendering: auto;
}

/* 地图标记：白底 + 品牌色外圈（不涂底） */
.wem-pin {
    width: 44px;
    height: 44px;
    border-radius: 1200px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 0 0 2px var(--brand-soft, rgba(59, 130, 246, .65)), 0 4px 12px rgba(0, 0, 0, .12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wem-pin-logo {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}


/* 修改弹窗整体卡片样式 */
#wem-map-scope .leaflet-popup-content-wrapper {
    background: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 3px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    overflow: hidden;
}

/* 修改弹窗箭头 */
#wem-map-scope .leaflet-popup-tip {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

/* 修改弹窗内容区域 */
/*  Leaflet popup 内容层：不要固定宽度，避免锚点偏移 */
#wem-map-scope .leaflet-popup-content{
  margin: 0 !important;
  padding: 16px !important;      /* 用 padding 控制内边距 */
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box;
}

/*  真正的“卡片宽度”放在你自己的 wem-popup 上，并居中 */
#wem-map-scope .leaflet-popup-content .wem-popup{
  width: 320px;                   /* 你想要的卡片宽度 */
  max-width: calc(100vw - 60px);  /* 手机兜底，防溢出 */
  margin: 0 auto;                 /*  居中关键 */
  box-sizing: border-box;
}

/*  只让“品牌Logo + 品牌名”这一块居中 */
#wem-map-scope .leaflet-popup-content .wem-brand-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/*  进度条区域整体居中（指数两端对齐不受影响） */
#wem-map-scope .leaflet-popup-content .wem-metric-center{
  width: 90%;
  margin: 0 auto;
  align-self: center;
}

/* 修改弹窗内的品牌卡片 */
#wem-map-scope .leaflet-popup .wem-card {
    width: 80px;
    height: 40px;
    border-radius: 6px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    margin: 8px auto;
}

/* 弹窗内卡片激活状态 */
#wem-map-scope .leaflet-popup .wem-card.is-active {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* 弹窗内卡片LOGO */
#wem-map-scope .leaflet-popup .wem-logo {
    max-width: 50px;
    max-height: 30px;
}


/* 弹窗标题栏样式 */
#wem-map-scope .leaflet-popup .popup-header {
    background: #3B82F6;
    color: white;
    padding: 12px 16px;
    margin: -16px -16px 16px -16px;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 16px;
}

/* 弹窗关闭按钮 */
#wem-map-scope .leaflet-popup .leaflet-popup-close-button {
    color: white !important;
    font-size: 20px;
    top: 10px;
    right: 12px;
}

/* 弹窗里 Logo 徽章：白底 + 描边 */
.wem-logo-badge {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 0 0 2px var(--brand-soft, rgba(59, 130, 246, .35));
}



/*popup 内：只居中品牌LOGO/品牌名/进度条块 */
#wem-map-scope .wem-brand-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:6px 0;
}

#wem-map-scope .wem-brand-logo{
  width:24px;
  height:24px;
  border-radius:6px;
  display:block;
}

#wem-map-scope .wem-brand-name{
  font-size:15px;
  font-weight:600;
  text-align:center;
  color:#374151;
}

/* 进度条块整体居中，但指数行仍左右两端对齐 */
#wem-map-scope .wem-metric-center{
  width:90%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}

#wem-map-scope .wem-metric-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
}

#wem-map-scope .wem-metric-label{
  font-size:12px;
  color:#6b7280;
}

#wem-map-scope .wem-metric-value{
  font-size:12px;
  font-weight:600;
  color:#374151;
}

/* 进度条：跟随 wem-metric-center 的宽度 */
#wem-map-scope .wem-progress{
  width:100%;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.08));
  margin:0;
}

#wem-map-scope .wem-progress-bar{
  height:100%;
  border-radius:999px;
  background: var(--brand, #3B82F6);
  transition: width .9s ease;
}

/* 暗黑模式文字 */
.dark #wem-map-scope .wem-brand-name,
.io-black-mode #wem-map-scope .wem-brand-name{
  color: rgba(255,255,255,.95) !important;
}
.dark #wem-map-scope .wem-metric-label,
.io-black-mode #wem-map-scope .wem-metric-label{
  color: rgba(255,255,255,.80) !important;
}
.dark #wem-map-scope .wem-metric-value,
.io-black-mode #wem-map-scope .wem-metric-value{
  color: rgba(255,255,255,.95) !important;
}

/* ----------------------------------------------------
   动画
---------------------------------------------------- */
@keyframes popupfade {
    0% {
        opacity: 0;
        transform: translateY(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadein {
    animation: popupfade .6s ease forwards;
}

.animate-scale {
    transition: transform .2s ease;
}

.animate-scale:hover {
    transform: scale(1.05);
}

/* ----------------------------------------------------
   地图整体层级压低，避免盖住导航条
---------------------------------------------------- */
#wem-map-scope,
#wem-map-scope #map-wrap,
#wem-map-scope #leaflet-map,
#wem-map-scope .leaflet-container,
#wem-map-scope .leaflet-pane,
#wem-map-scope .leaflet-top,
#wem-map-scope .leaflet-bottom {
    position: relative;
    z-index: 1 !important;
}

/* ----------------------------------------------------
   兼容：防止主题的 transform 污染图片
---------------------------------------------------- */
.wem-brand img,
.leaflet-popup img {
    transform: none !important;
    /* 下面的自定义属性可能无效，可以删除 */
    /* --tw-rotate: 0 !important;
    --tw-skew-x: 0 !important;
    --tw-skew-y: 0 !important;
    --tw-scale-x: 1 !important;
    --tw-scale-y: 1 !important; */
}


/* ----------------------------------------------------
   夜间/深色模式
---------------------------------------------------- */
.dark #wem-map-scope,
.io-black-mode #wem-map-scope {
    background-color: #2E2F30;
    border-color: #444;
    border: 1px solid #444;
    color: #FFFAFA !important;
}

.dark #wem-map-scope .leaflet-container,
.io-black-mode #wem-map-scope .leaflet-container {
    background: #2E2F30 !important;
    color: #FFFAFA !important;
}

.dark #wem-map-scope .leaflet-popup-content-wrapper,
.io-black-mode #wem-map-scope .leaflet-popup-content-wrapper {
    background: rgba(54, 54, 54, 0.95) !important;
    color: #FFFAFA !important;
    border: 1px solid #363636 !important;
}

.dark #wem-map-scope .leaflet-popup-tip,
.io-black-mode #wem-map-scope .leaflet-popup-tip {
    background: #2E2F30 !important;
    color: #FFFAFA !important;
}

.dark #wem-map-scope .leaflet-popup-content,
.io-black-mode #wem-map-scope .leaflet-popup-content {
    color: #FFFAFA !important;
}

.dark #wem-map-scope #brand-list .brand-item,
.io-black-mode #wem-map-scope #brand-list .brand-item {
    background: #343638 !important;
    border-color: #4a4a4a !important;
    color: #FFFAFA !important;
}

/* 夜间模式：全局文本字体颜色设置 */
.dark #wem-map-scope * {
    color: #FFFAFA !important;
}

/* 夜间模式下进度条 */
.dark #wem-map-scope .wem-progress 
.io-black-mode #wem-map-scope .wem-progress {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFAFA !important;
}

.dark #wem-map-scope .wem-progress-bar
.io-black-mode #wem-map-scope .wem-progress-bar {
    opacity: 0.9;
}

/* 夜间模式下地图版权声明 */
.dark #wem-map-scope #map-credits,
.io-black-mode #wem-map-scope #map-credits {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* io-black-mode 特定样式 */
.io-black-mode .leaflet-popup {
    color: white;
}

.io-black-mode .leaflet-popup .wem-popup {
    color: white;
}

.io-black-mode .leaflet-popup .wem-popup .text-xs {
    color: rgba(255, 255, 255, 0.7);
}

.io-black-mode .leaflet-popup .wem-popup .text-sm {
    color: rgba(255, 255, 255, 0.8);
}

.io-black-mode .wem-card {
    background: #1F2937;
    border-color: rgba(255, 255, 255, 1);
    color: white;
}

.io-black-mode .wem-pin {
    background: #FFFAFA;
    border-color: rgba(255, 255, 255, .12);
}

.io-black-mode .wem-logo-badge {
    background: #FFFAFA;
    border-color: rgba(255, 255, 255, .12);
}

/* 只在夜间/深色模式下应用合适的文字颜色 */
.dark #wem-map-scope .leaflet-popup .wem-popup,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* 弹窗内所有文字元素的基础颜色 - 确保可见性 */
.dark #wem-map-scope .leaflet-popup .wem-popup span,
.dark #wem-map-scope .leaflet-popup .wem-popup div,
.dark #wem-map-scope .leaflet-popup .wem-popup p,
.dark #wem-map-scope .leaflet-popup .wem-popup li,
.dark #wem-map-scope .leaflet-popup .wem-popup td,
.dark #wem-map-scope .leaflet-popup .wem-popup th,
.dark #wem-map-scope .leaflet-popup .wem-popup label,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup span,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup div,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup p,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup li,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup td,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup th,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup label {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* 弹窗内链接颜色 - 使用更亮的颜色 */
.dark #wem-map-scope .leaflet-popup .wem-popup a,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup a {
    color: #93c5fd !important; /* 更亮的蓝色 */
    text-decoration: none;
    transition: color 0.2s ease;
}

.dark #wem-map-scope .leaflet-popup .wem-popup a:hover,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup a:hover {
    color: #bfdbfe !important; /* 最亮的蓝色 */
    text-decoration: underline;
}

/* 小字号文字使用稍浅的灰色，但要确保可见 */
.dark #wem-map-scope .leaflet-popup .wem-popup .text-xs,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup .text-xs {
    color: rgba(255, 255, 255, 0.8) !important; /* 提高透明度 */
}

/* 中等字号文字使用更亮的灰色 */
.dark #wem-map-scope .leaflet-popup .wem-popup .text-sm,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup .text-sm {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* 标题文字使用白色，突出重要性 */
.dark #wem-map-scope .leaflet-popup .wem-popup h1,
.dark #wem-map-scope .leaflet-popup .wem-popup h2,
.dark #wem-map-scope .leaflet-popup .wem-popup h3,
.dark #wem-map-scope .leaflet-popup .wem-popup h4,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup h1,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup h2,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup h3,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup h4 {
    color: rgba(255, 255, 255, 0.98) !important; /* 接近纯白 */
}

/* 强调文字使用亮色 */
.dark #wem-map-scope .leaflet-popup .wem-popup strong,
.dark #wem-map-scope .leaflet-popup .wem-popup b,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup strong,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup b {
    color: #fcd34d !important; /* 更亮的黄色 */
}

/* 表格内容 */
.dark #wem-map-scope .leaflet-popup .wem-popup table,
.dark #wem-map-scope .leaflet-popup .wem-popup tr,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup table,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup tr {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* 链接前面的文字（如"来源："、"网址："等标签） */
.dark #wem-map-scope .leaflet-popup .wem-popup .link-label,
.dark #wem-map-scope .leaflet-popup .wem-popup .url-label,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup .link-label,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup .url-label {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* 通用选择器作为备用，确保所有文字可见 */
.dark #wem-map-scope .leaflet-popup .wem-popup *:not(a),
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup *:not(a) {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* 确保链接前面的冒号、括号等标点符号也可见 */
.dark #wem-map-scope .leaflet-popup .wem-popup a:before,
.io-black-mode #wem-map-scope .leaflet-popup .wem-popup a:before {
    color: rgba(255, 255, 255, 0.85) !important;
}