/* Twitter/X 式翻译按钮样式 */

/* 翻译按钮 */
.twitter-translate-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  margin-top: 8px;
  border: 1px solid #cfd9de;
  border-radius: 16px;
  background: transparent;
  color: #1d9bf0; /* Twitter蓝 */
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.twitter-translate-btn:hover {
  background: rgba(29, 155, 240, 0.1);
  border-color: #1d9bf0;
}

.twitter-translate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.twitter-translate-btn.translated {
  background: #1d9bf0;
  color: white;
  border-color: #1d9bf0;
}

.twitter-translate-btn.translated:hover {
  background: #1a8cd8;
}

.twitter-translate-btn i {
  font-size: 14px;
}

.twitter-translate-btn .translate-text {
  white-space: nowrap;
}

/* 自动翻译开关 */
.auto-translate-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.translate-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.translate-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.translate-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .3s;
  border-radius: 20px;
}

.translate-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

.translate-switch input:checked + .translate-slider {
  background-color: #1d9bf0;
}

.translate-switch input:checked + .translate-slider:before {
  transform: translateX(20px);
}

.translate-label {
  font-size: 13px;
  font-weight: 500;
  color: #536471;
  white-space: nowrap;
  user-select: none;
}

/* 翻译容器 */
[data-translatable] {
  position: relative;
}

/* 翻译后的文本样式 */
[data-translate-content][data-translated-text] {
  /* 可以添加特殊样式标识已翻译的文本 */
}

/* 移动端优化 */
@media (max-width: 768px) {
  .twitter-translate-btn {
    padding: 3px 10px;
    font-size: 12px;
  }

  .twitter-translate-btn i {
    font-size: 12px;
  }

  .auto-translate-toggle {
    padding: 6px 10px;
    gap: 6px;
  }

  .translate-switch {
    width: 36px;
    height: 18px;
  }

  .translate-slider:before {
    height: 14px;
    width: 14px;
  }

  .translate-switch input:checked + .translate-slider:before {
    transform: translateX(18px);
  }

  .translate-label {
    font-size: 12px;
  }
}

/* 紧凑模式 (用于商品卡片等空间有限的地方) */
.twitter-translate-btn-compact {
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 12px;
}

.twitter-translate-btn-compact i {
  font-size: 11px;
}

.twitter-translate-btn-compact .translate-text {
  display: none; /* 紧凑模式只显示图标 */
}

/* 翻译按钮在卡片中的位置 */
.product-card [data-translatable] {
  display: flex;
  flex-direction: column;
}

.post-card [data-translatable] {
  display: flex;
  flex-direction: column;
}

/* 加载动画 */
@keyframes twitter-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.twitter-translate-btn .fa-spinner {
  animation: twitter-spin 1s linear infinite;
}

/* 翻译失败状态 */
.twitter-translate-btn .fa-exclamation-triangle {
  color: #f4212e;
}