/* Your existing styles */
#scrollToTopBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 100px; /* Place the button 20px from the bottom */
  right: 37px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #555; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  width: 40px;
  height: 40px;
  border-radius: 10px; /* Rounded corners */
}

#scrollToTopBtn:hover {
  background-color: #333; /* Add a dark-grey background on hover */
}
#block_31 .services-filters .dropdown-menu .dropdown-item {
  max-height: 280px;
  white-space: unset;
}
ul.platforms {
  display: flex;
  align-content: center;
  list-style: none;
  gap: 6px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 10px;
}

ul.platforms li button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #222f56;
  background: #192446;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

ul.platforms li button.all {
  background: #4a5cf6;
  border: 1px solid #222f56;
}

ul.platforms li button.instagram {
  background: #ff0099;
  border: 1px solid #ff0099;
}

ul.platforms li button.twitter {
  background: #1da1f2;
  border: 1px solid #1da1f2;
}

ul.platforms li button.facebook {
  background: #3b5998;
  border: 1px solid #3b5998;
}

ul.platforms li button.youtube {
  background: #ff0000;
  border: 1px solid #ff0000;
}

ul.platforms li button.tiktok {
  background: #000000;
  border: 1px solid #000000;
}

ul.platforms li button.telegram {
  background: #0088cc;
  border: 1px solid #0088cc;
}

ul.platforms li button.steam {
  background: #000000;
  border: 1px solid #000000;
}

ul.platforms li button.discord {
  background: #7289da;
  border: 1px solid #7289da;
}

ul.platforms li button.reddit {
  background: #ff4500;
  border: 1px solid #ff4500;
}

ul.platforms li button.twitch {
  background: #6441a5;
  border: 1px solid #6441a5;
}

ul.platforms li button.snapchat {
  background: #fffc00;
  border: 1px solid #fffc00;
}

ul.platforms li button.snapchat i {
  color: #000;
}

ul.platforms li button.linkedin {
  background: #0077b5;
  border: 1px solid #0077b5;
}

ul.platforms li button.pinterest {
  background: #bd081c;
  border: 1px solid #bd081c;
}

ul.platforms li button.tumblr {
  background: #35465c;
  border: 1px solid #35465c;
}

ul.platforms li button.soundcloud {
  background: #ff5500;
  border: 1px solid #ff5500;
}

ul.platforms li button.likee {
  background: #964bff;
  border: 1px solid #964bff;
}

ul.platforms li button.website {
  background: #ff0000;
  border: 1px solid #ff0000;
}
ul.platforms li button.vk {
  background: #0078ff;
  border: 1px solid #0078ff;
}

ul.platforms li button.trendyol {
  background: #f27a1a;
  border: 1px solid #f27a1a;
}
ul.platforms li button.opensea {
  background: #2081e2;
  border: 1px solid #2081e2;
}

ul.platforms li button.cmc {
  background: #f7931a;
  border: 1px solid #2263f0;
}

ul.platforms li button.binance {
  background: #fff;
  border: 1px solid #f3ba2f;
}

ul.platforms li button.github {
  background: #333333;
  border: 1px solid #333333;
}

ul.platforms li button.quora {
  background: #aa2200;
  border: 1px solid #aa2200;
}

ul.platforms li button.whatsapp {
  background: #25d366;
  border: 1px solid #25d366;
}

ul.platforms li button.line {
  background: #00c300;
  border: 1px solid #00c300;
}

ul.platforms li button.googlemaps {
  background: #4285f4;
  border: 1px solid #4285f4;
}

ul.platforms li button.trustpilot {
  background: #00b67a;
  border: 1px solid #00b67a;
}

ul.platforms li button.threads {
  background: #000000;
  border: 1px solid #000000;
}

ul.platforms li button.android {
  background: #a4c639;
  border: 1px solid #a4c639;
}

ul.platforms li button.ios {
  background: #000000;
  border: 1px solid #000000;
}

ul.platforms li button.nichetraffic {
  background: #5e72e4;
  border: 1px solid #5e72e4;
}

ul.platforms li button i {
  font-size: 18px;
  color: #fff;
}

ul.platforms li button.active {
  transform: scale(1.1);
}

/* 移除问题样式 */
/* td[data-label="Average time"] {
        font-size: 0;
    } */
/* =======================================================
   手机端表格（≤991px）· 完整表格 + 横向滑动【重写】
   保留 tr 的 flex 横排（不退回竖排），但把「固定宽度弹性挤压」
   改成「每列自然/最小宽度 + 表格总宽超屏 → 横滑」。所有列保留。
   ======================================================= */
@media (max-width: 991px) {
  /* 外层容器：只横向滚动 */
  #block_31 .component_table .table-responsive-classic {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  #block_31 .component_table .table-responsive-classic::-webkit-scrollbar {
    height: 6px;
  }
  #block_31 .component_table .table-responsive-classic::-webkit-scrollbar-thumb {
    background: rgba(147, 86, 253, 0.4);
    border-radius: 3px;
  }
  /* 后台主题(zj2p3wm8)有一条 #block_31 ...thead{display:none;position:absolute;1px...}
     把手机端表头做成了「视觉隐藏」(sr-only 套路)。本文件在主题之后加载，用同选择器
     逐条推翻，让 thead 回到正常文档流、重新可见。这是表头一直不显示的真正根因。 */
  #block_31 .component_table .table-responsive-classic thead {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  /* 表头 tr / 数据 tr：保持 flex 横排，不换行；表格总宽随内容撑开 */
  #block_31 .component_table .table {
    width: max-content;
    min-width: 100%;
  }
  #block_31 .component_table .table-responsive-classic thead tr,
  #block_31 .component_table .table-responsive-classic tbody tr {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  #block_31 .component_table .table-responsive-classic tbody tr {
    height: auto;
    border-bottom: 1px solid #f0eef4;
  }
  /* 后台/Bootstrap 主题给每个 td 上了 #F8F0FF 底色，行改成 flex 定宽格子后，
     格子间空隙露出这层底色 → 看起来是"一块一块的碎色块"。
     修复：td 自己的底色清成透明，改成整行斑马纹（奇数白 / 偶数浅紫），颜色整条连续。 */
  #block_31 .component_table .table-responsive-classic tbody tr td {
    background: transparent !important;
  }
  #block_31 .component_table .table-responsive-classic tbody tr:nth-child(odd) {
    background: #fff;
  }
  #block_31 .component_table .table-responsive-classic tbody tr:nth-child(even) {
    background: #f8f0ff;
  }
  /* 表头也整行一个浅紫底，别碎 */
  #block_31 .component_table .table-responsive-classic thead tr {
    background: #faf7ff;
  }
  #block_31 .component_table .table-responsive-classic thead tr th {
    background: transparent;
  }
  /* 描述表头：模板给它挂了 hidden-xs + hidden-sm（Bootstrap 手机端 display:none !important），
     数据行 View 那列没隐藏 → 表头 6 列 vs 数据 7 列，整体错位。
     用足够高权重的选择器把它显示出来，且这里用 flex（不是 block）跟其它 th 一致，别破坏行内对齐 */
  #block_31 .component_table .table-responsive-classic thead tr th.service-description__th.hidden-xs.hidden-sm {
    display: flex !important;
  }

  /* th 和 td 用同一套写法：同列同宽，天生对齐，不看 data-label（多语言下值会变） */
  #block_31 .component_table .table-responsive-classic thead tr th,
  #block_31 .component_table .table-responsive-classic tbody tr td {
    flex: 0 0 auto;
    padding: 8px 10px;
    text-align: center;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #block_31 .component_table .table-responsive-classic thead tr th {
    font-size: 11px !important;
  }
  #block_31 .component_table .table-responsive-classic tbody tr td {
    font-size: 12px;
  }
  #block_31 .component_table .table-responsive-classic td::before {
    content: "";
  }

  /* ---- 列宽：以「服务名列」为对齐基准，其余列按它左右相对定位 ----
     用 class 锚点(.width-service-name / .service-name)对齐服务名，
     再用相邻兄弟选择器给它两侧的列定宽，这样即使前面插入收藏列也不错位 */

  /* 服务名列：最宽，允许换行、左对齐 */
  #block_31 .component_table .table-responsive-classic thead tr th.width-service-name,
  #block_31 .component_table .table-responsive-classic tbody tr td.service-name {
    width: 160px;
    white-space: normal;
    text-align: left;
    line-height: 1.35;
    justify-content: flex-start;
  }
  /* ID 列：服务名的前一列，用 data-label（ID 是英文键、多语言下不变）+ 表头首列 */
  #block_31 .component_table .table-responsive-classic thead tr th:first-child:not(.width-service-name),
  #block_31 .component_table .table-responsive-classic tbody tr td[data-label="ID"] {
    width: 56px;
  }
  /* 服务名之后的所有列：Rate / Min / Max / 平均时间 —— 统一给紧凑固定宽，
     用「服务名后的每个兄弟」批量命中，不依赖 data-label 具体文字 */
  #block_31 .component_table .table-responsive-classic thead tr th.width-service-name ~ th,
  #block_31 .component_table .table-responsive-classic tbody tr td.service-name ~ td {
    width: 82px;
  }
  /* 最后一列（描述/View）：够放按钮 */
  #block_31 .component_table .table-responsive-classic thead tr th:last-child,
  #block_31 .component_table .table-responsive-classic tbody tr td:last-child {
    width: 96px;
    padding: 6px 10px;
  }

  #block_31 .services-category {
    font-weight: 600;
    color: "" !important;
    background: "" !important;
    padding-top: 2px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    padding-bottom: 2px !important;
    line-height: 40px;
  }
  #block_31 .services-category h4,
  #block_31 .services-category h2 {
    font-size: 12px !important;
    text-align: left;
    margin-top: 10px;
    margin-left: 5px;
  }
  #block_31 .component_table button {
    font-size: 12px;
    text-align: center;
    padding-right: 6px;
    padding-left: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 6px;
  }
}

/* =======================================================
   工具栏 · 方案 B 粉紫一体胶囊
   筛选钮 + 搜索框 融进同一个大药丸；平台圆点保持不动
   FG-FILTER-SEARCH:BEGIN
   ======================================================= */

/* 主题变量（局部，避免依赖别处） */
#block_31 {
  --fg-grad: linear-gradient(100deg, #ea7a8a 0%, #be68c4 52%, #9356fd 100%);
  --fg-c3r: 147, 86, 253;
  --fg-soft: #f5f0fb;
  --fg-line: rgba(36, 26, 51, 0.1);
  --fg-ink: #241a33;
  --fg-muted: #81738e;
  --fg-pc: #7b33d6;
}

/* 药丸底盘：给筛选钮那列 + 搜索框那列所在的 row 铺一层胶囊 */
#block_31 .services-filters .card > .row:first-child {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px;
  margin: 0 !important;
  padding: 5px !important;
  border: 1px solid var(--fg-line) !important;
  border-radius: 16px !important;
  background: var(--fg-soft) !important;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
#block_31 .services-filters .card > .row:first-child:focus-within {
  background: #fff !important;
  border-color: rgba(var(--fg-c3r), 0.45) !important;
  box-shadow: 0 12px 30px -16px rgba(var(--fg-c3r), 0.6);
}
/* 药丸内各列去掉自己的间距；筛选/货币列按内容收缩，不占多余宽度 */
#block_31 .services-filters .card > .row:first-child > .col-md-auto {
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  max-width: none !important;
  width: auto !important;
}
/* 只有搜索框那一列吃掉剩余宽度，让放大镜紧跟输入框右侧 */
#block_31 .services-filters .card > .row:first-child > .col {
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
/* 货币钮不渲染时（登录用户 / 未开货币），模板留下的空 col 仍占位。
   注意不能用 :empty —— Twig 在那个 div 里留了换行和缩进，有空白就不算 :empty。
   用 :not(:has(*))「里面没有任何元素」才命中得到，两种写法都留着做兜底。 */
#block_31 .services-filters .card > .row:first-child > .col-md-auto:empty,
#block_31 .services-filters .card > .row:first-child > .col-md-auto:not(:has(*)) {
  display: none !important;
}

/* ---- 筛选钮 / 货币钮：白底紫字小胶囊 ---- */
#block_31 .component_filter_button .btn-big-primary,
#block_31 .component_filter_currency_button .btn-big-primary {
  width: auto !important;
  height: 42px;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--fg-pc) !important;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px -4px rgba(36, 26, 51, 0.25);
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}
#block_31 .component_filter_button .btn-big-primary:hover,
#block_31 .component_filter_currency_button .btn-big-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(var(--fg-c3r), 0.55);
  color: var(--fg-pc) !important;
}
/* 展开/聚焦态：Bootstrap 原本会把按钮冲成一块白，这里补齐——白底紫字不变，加一圈浅紫描边+轻光晕，和下面白下拉框分层 */
#block_31 .component_filter_button .btn-big-primary.dropdown-toggle:focus,
#block_31 .component_filter_button .btn-big-primary.dropdown-toggle.show,
#block_31 .component_filter_button .show > .btn-big-primary.dropdown-toggle,
#block_31 .component_filter_currency_button .btn-big-primary.dropdown-toggle:focus,
#block_31 .component_filter_currency_button .btn-big-primary.dropdown-toggle.show,
#block_31 .component_filter_currency_button .show > .btn-big-primary.dropdown-toggle {
  transform: none;
  background: #fff !important;
  color: var(--fg-pc) !important;
  box-shadow: 0 0 0 1.5px rgba(var(--fg-c3r), 0.35),
              0 10px 22px -10px rgba(var(--fg-c3r), 0.5) !important;
}
#block_31 .component_filter_button .btn-big-primary .fa-filter,
#block_31 .component_filter_button .btn-big-primary .fas,
#block_31 .component_filter_currency_button .btn-big-primary .fas {
  color: var(--fg-pc) !important;
}
#block_31 .component_filter_button .dropdown-toggle::after,
#block_31 .component_filter_currency_button .dropdown-toggle::after {
  color: var(--fg-pc);
  opacity: 0.7;
}

/* ---- 搜索输入框：透明融进药丸，无自己边框 ---- */
#block_31 .input-group {
  height: 42px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  flex-wrap: nowrap;
}
#block_31 .input-group .form-control {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 12px;
  font-size: 14px;
  color: var(--fg-ink);
  box-shadow: none !important;
}
/* 放大镜按钮所在的 append 不弹性、不收缩，紧贴输入框右侧 */
#block_31 .input-group .input-group-append {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
#block_31 .input-group .form-control:focus {
  box-shadow: none !important;
  outline: none;
}
#block_31 .input-group .form-control::placeholder {
  color: var(--fg-muted);
}

/* ---- 搜索按钮（放大镜）：渐变实心方块 ---- */
#block_31 .input-group #searchbtn {
  width: 46px;
  height: 42px;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--fg-grad) !important;
  color: #fff !important;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px -10px rgba(var(--fg-c3r), 0.8);
  transition: filter 0.2s ease, transform 0.18s ease;
}
#block_31 .input-group #searchbtn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* ---- View 按钮（V2）：白底渐变描边 + 实心紫字，hover 填满 ---- */
/* 不用 background-clip:text（该环境不支持，会导致字消失），字用实心紫，稳 */
#block_31 .btn-view-service-description {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important; /* 强制 View 横写，列再窄也不竖排 */
  height: 32px !important;
  min-height: 0 !important;
  padding: 0 12px !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: max-content !important;
  border: 1.5px solid transparent !important;
  border-radius: 9px !important;
  cursor: pointer;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  color: #b45fd0 !important;
  -webkit-text-fill-color: #b45fd0 !important;
  background-image: linear-gradient(#fff, #fff), var(--fg-grad) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  -webkit-background-clip: padding-box, border-box !important;
  box-shadow: none !important;
  transition: color 0.18s ease, background-image 0.18s ease, transform 0.18s ease;
}
#block_31 .btn-view-service-description:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background-image: var(--fg-grad), var(--fg-grad) !important;
  background-clip: padding-box, border-box !important;
  -webkit-background-clip: padding-box, border-box !important;
  transform: translateY(-1px);
}

/* ---- 手机端（≤991px）：筛选钮+货币钮并排第一行，搜索框独占第二行 ---- */
@media (max-width: 991px) {
  #block_31 .services-filters .card > .row:first-child {
    flex-wrap: wrap !important;
    gap: 8px;
    padding: 8px !important;
    border-radius: 14px !important;
  }
  /* --- 情况一：货币钮在（未登录 + 站点开了多货币）---
     两个钮各占一半排第一行，搜索框换到第二行。这是原有行为，保持不变。
     用 :has(.component_filter_currency_button) 精确限定，避免影响登录态 */
  #block_31 .services-filters .card > .row:first-child:has(.component_filter_currency_button) > .col-md-auto {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  #block_31 .services-filters .card > .row:first-child:has(.component_filter_currency_button) > .col {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #block_31 .services-filters .card > .row:first-child:has(.component_filter_currency_button) .btn-big-primary {
    width: 100% !important;
    padding: 0 12px !important;
    justify-content: center;
  }

  /* --- 情况二：货币钮不在（登录后）---
     空 col 已被上面隐藏，这一行只剩漏斗 + 搜索。
     漏斗按内容出宽贴左，搜索框吃掉剩余宽度，两个同一行，省一行高度 */
  #block_31 .services-filters .card > .row:first-child:not(:has(.component_filter_currency_button)) {
    flex-wrap: nowrap !important;
  }
  #block_31 .services-filters .card > .row:first-child:not(:has(.component_filter_currency_button)) > .col-md-auto {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  #block_31 .services-filters .card > .row:first-child:not(:has(.component_filter_currency_button)) > .col {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  /* 漏斗钮：内容宽即可，别撑满 */
  #block_31 .services-filters .card > .row:first-child:not(:has(.component_filter_currency_button)) .btn-big-primary {
    width: auto !important;
    padding: 0 14px !important;
  }
  /* 搜索框换到第二行、脱离了药丸，给自己补一层白底描边才看得清。
     只在「货币钮在」时需要；同行时它还在药丸里，透明即可（见桌面端规则） */
  #block_31 .services-filters .card > .row:first-child:has(.component_filter_currency_button) .input-group {
    background: #fff !important;
    border: 1px solid var(--fg-line) !important;
    border-radius: 12px !important;
    overflow: hidden;
  }
}
/* FG-FILTER-SEARCH:END */

/* =======================================================
   平台图标 · 手机端横向滑动一排
   25 个图标放不下一排 → 手机端不换行，改成手指左右滑
   桌面(>767px)完全不动，仍是 flex-wrap 换行
   FG-PLATFORM-SCROLL:BEGIN
   ======================================================= */
@media (max-width: 767px) {
  /* .scrollt 变成横向滚动容器：吃满整行宽度，超出部分横滑 */
  #block_31 .scrollt {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* iOS 惯性滑动 */
    scrollbar-width: none;             /* Firefox 隐藏滚动条 */
    -ms-overflow-style: none;
    /* 左右各留 2px，避免首尾图标贴边被切 */
    padding: 2px;
    margin: 0 -2px;
  }
  #block_31 .scrollt::-webkit-scrollbar {
    display: none;                     /* Chrome/Safari 隐藏滚动条 */
  }
  /* 图标一排排开，不换行 */
  #block_31 ul.platforms {
    flex-wrap: nowrap !important;
    gap: 8px;
    margin-top: 6px;
    margin-bottom: 6px;
    width: max-content;                /* 内容多宽就多宽，撑出滚动 */
  }
  #block_31 ul.platforms li {
    flex: 0 0 auto;                    /* 每个图标不被压扁 */
  }
  /* 圆点放大到 40px，手指点得准 */
  #block_31 ul.platforms li button {
    width: 40px;
    height: 40px;
  }
}
/* FG-PLATFORM-SCROLL:END */