/* ============================================================
   global.css - 全局样式
   ============================================================ */

/* ============================================================
   1. 全局字体设置（排除图标字体）
   ============================================================ */
*:not(i):not(.fas):not(.far):not(.fal):not(.fab):not(.fa) {
  font-family: 'Cotyledon-Regular-bold', sans-serif !important;
}

/* ============================================================
   2. 语言切换器样式
   ============================================================ */
.language-switcher {
  position: fixed;
  top: 20px;
  right: 30px;
  z-index: 9999;
  background: #ffffff;
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  border: 1px solid #e8ecf1;
  flex-wrap: wrap;
}

.language-switcher .lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #8898aa;
  padding: 4px 8px;
  border-radius: 12px;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}

.language-switcher .lang-btn:hover {
  color: #2c3e50;
  background: #f0f2f5;
}

.language-switcher .lang-btn.active {
  color: #007bff;
  background: #e8f0fe;
}

.language-switcher .divider {
  color: #dce1e8;
  font-size: 14px;
}

/* 移动端适配 */
.language-switcher-mobile {
  top: 80px !important;
  right: 20px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
}

@media (max-width: 480px) {
  .language-switcher-mobile {
    top: 10px !important;
    right: 10px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }
  
  .language-switcher-mobile .lang-btn {
    font-size: 10px !important;
    padding: 2px 5px !important;
  }
  
  .language-switcher-mobile .divider {
    font-size: 10px !important;
  }
}

/* ============================================================
   3. 翻译相关（阻止翻译的关键样式）
   ============================================================ */
.notranslate {
  translate: none !important;
  -webkit-translate: none !important;
}

[translate="no"],
[data-translate="no"] {
  translate: none !important;
  -webkit-translate: none !important;
}

.language-switcher,
.language-switcher *,
.lang-btn,
.lang-btn *,
.notranslate {
  translate: none !important;
  -webkit-translate: none !important;
  transition: none !important;
}

/* 隐藏 translate.js 自带的工具条 */
#translate {
  display: none !important;
}

/* ============================================================
   4. Toast 轻提示
   ============================================================ */
.toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.toast-item {
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  animation: toastFadeIn 0.3s ease, toastFadeOut 0.3s ease 2.7s forwards;
  pointer-events: auto;
  max-width: 90%;
  text-align: center;
}

.toast-item.success { background: #52c41a; }
.toast-item.error   { background: #ff4d4f; }
.toast-item.warning { background: #faad14; }
.toast-item.info    { background: #1890ff; }

@keyframes toastFadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toastFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-20px); }
}

/* ============================================================
   5. 表单校验错误提示样式
   ============================================================ */
.error-message {
  color: #ff4d4f;
  font-size: 0.75rem;
  line-height: 1.4;
  margin-top: 4px;
  min-height: 20px;
  display: block;
}

.form-group.error input {
  border: 2px solid #ff4d4f;
  box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.15);
}

.form-group.success input {
  border: 2px solid #52c41a;
  box-shadow: 0 0 0 3px rgba(82, 196, 26, 0.15);
}

.form-group input {
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* ============================================================
   6. 可点击元素鼠标样式
   ============================================================ */
[onclick] {
  cursor: pointer;
}

/* ============================================================
   7. 悬浮按钮样式 - 固定在右侧中间
   ============================================================ */
.floating-quote-btn {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgb(8, 131, 25);
  color: #ffffff;
  padding: 14px 24px;
  border-radius: 60px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(8, 131, 25, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.floating-quote-btn:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 8px 32px rgba(8, 131, 25, 0.55);
  background: rgb(16, 180, 45);
}

.floating-quote-btn i {
  font-size: 1.1rem;
}

.floating-quote-btn.show {
  display: flex;
  animation: floatIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes floatIn {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(40px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .floating-quote-btn {
    right: 16px;
    padding: 12px 18px;
    font-size: 0.85rem;
    gap: 8px;
    border-radius: 50px;
  }
  .floating-quote-btn i {
    font-size: 0.95rem;
  }
  .floating-quote-btn .btn-text {
    display: inline;
  }
}

@media (max-width: 480px) {
  .floating-quote-btn {
    right: 12px;
    padding: 10px 14px;
    font-size: 0.75rem;
    gap: 6px;
  }
  .floating-quote-btn i {
    font-size: 0.85rem;
  }
}

/* ============================================================
   8. 🔥 新增：折叠屏 / 窄屏设备修复样式
   ============================================================ */

/* 8.1 针对 640px 以下设备（手机/折叠屏折叠状态） */
@media (max-width: 640px) {
  
  /* ---- 导航栏修复 ---- */
  .navbar {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 100 !important;
  }

  .logo img {
    height: 44px !important;
  }

  .nav-links {
    gap: 0.8rem !important;
    font-size: 0.82rem !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: auto !important;
  }

  .nav-links a {
    display: inline-block !important;
    padding: 4px 6px !important;
    position: relative !important;
    z-index: 101 !important;
    font-size: 0.82rem !important;
  }

  /* ---- Hero 区域修复（解决文字与导航重叠） ---- */
  .hero-section {
    padding-top: 10px !important;
    margin-top: 0 !important;
    height: auto !important;
    min-height: 500px;
  }

  .hero-text {
    transform: none !important;
    margin-top: 10px !important;
    margin-left: 0 !important;
    padding: 0 16px !important;
  }

  .hero-text h1 {
    font-size: 1.8rem !important;
    margin-top: 0 !important;
  }

  .hero-text .subhead {
    font-size: 1rem !important;
    margin: 16px 0 12px !important;
  }

  .hero-text .tagline {
    font-size: 0.95rem !important;
    margin-bottom: 16px !important;
  }

  .hero-text .cta-link {
    padding: 12px 28px !important;
    font-size: 0.95rem !important;
  }

  /* ---- Grid 布局修复 ---- */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ---- 表单卡片修复 ---- */
  .quote-card {
    max-width: 100% !important;
    margin: 10px 12px !important;
    padding: 20px 16px !important;
    border-radius: 24px !important;
  }

  .quote-card h2 {
    font-size: 1.4rem !important;
  }

  .quote-card .form-sub {
    font-size: 0.8rem !important;
  }

  /* ---- 服务区域修复 ---- */
  .services-section {
    margin-top: 20px !important;
    padding: 20px 0 !important;
  }

  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .service-item {
    padding: 20px 16px !important;
  }

  .service-images {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .service-images img {
    height: 200px !important;
  }

  /* ---- 为什么选择我们 ---- */
  .why-section .section-title {
    font-size: 1.5rem !important;
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    padding: 20px 12px !important;
  }

  .why-item img {
    width: 40px !important;
    height: 40px !important;
  }

  .why-item span {
    font-size: 0.8rem !important;
  }

  /* ---- About 区域 ---- */
  .about-section {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    text-align: center !important;
    padding: 20px 16px !important;
  }

  .about-text h2 {
    font-size: 1.4rem !important;
  }

  .about-text p {
    font-size: 0.9rem !important;
  }

  .about-icon-wrapper img {
    width: 100px !important;
    height: 100px !important;
  }

  .about-image img {
    border-radius: 20px !important;
  }

  /* ---- 认证标识 ---- */
  .certifications-section .biaotititle {
    font-size: 1.4rem !important;
  }

  .icons-list .cert-icon {
    width: 80px !important;
    height: 60px !important;
  }

  .icons-list .cert-icon img {
    width: 56px !important;
    max-height: 40px !important;
  }

  .icons-list {
    gap: 12px !important;
  }

  /* ---- Footer 修复 ---- */
  .footer-row-1 {
    padding: 16px !important;
    border-radius: 12px !important;
    margin: 0 8px !important;
  }

  .footer-row-1-inner {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    text-align: center !important;
  }

  .footer-mid h2 {
    font-size: 1.1rem !important;
  }

  .footer-mid p {
    font-size: 0.85rem !important;
  }

  .footer-btn {
    padding: 10px 20px !important;
    font-size: 0.85rem !important;
  }

  .footer-row-2-inner {
    grid-template-columns: 1fr !important;
    text-align: left !important;
    gap: 12px !important;
    padding: 16px 12px !important;
  }

  .footer-contact-item {
    justify-content: flex-start !important;
    font-size: 0.85rem !important;
  }

  .footer-nav {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px 12px !important;
  }

  .footer-nav-links {
    gap: 0.8rem !important;
    font-size: 0.85rem !important;
    flex-wrap: wrap !important;
  }

  /* ---- 兴趣选项 ---- */
  .interest-options {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .interest-options label {
    font-size: 0.85rem !important;
  }

  /* ---- 提交按钮 ---- */
  .submit-btn {
    padding: 14px 16px !important;
    font-size: 1rem !important;
  }

  /* ---- Safe note ---- */
  .safe-note {
    font-size: 0.75rem !important;
  }

  /* ---- 页面包装器 ---- */
  .page-wrapper {
    padding: 0 !important;
  }

  .container {
    padding: 0 12px !important;
  }
}

/* 8.2 针对超窄屏设备 (Samsung Fold, Pixel Fold 等, 宽度 < 400px) */
@media (max-width: 400px) {
  
  .navbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 10px 12px !important;
  }
  
  .logo img {
    height: 36px !important;
  }
  
  .nav-links {
    gap: 0.6rem !important;
    font-size: 0.7rem !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .nav-links a {
    font-size: 0.7rem !important;
    padding: 3px 4px !important;
  }
  
  .hero-text h1 {
    font-size: 1.4rem !important;
  }

  .hero-text .subhead {
    font-size: 0.9rem !important;
  }

  .hero-text .tagline {
    font-size: 0.85rem !important;
  }

  .hero-section {
    min-height: 420px !important;
  }

  .quote-card {
    padding: 16px 12px !important;
    margin: 6px 8px !important;
  }

  .quote-card h2 {
    font-size: 1.2rem !important;
  }

  .form-group input,
  .form-group select,
  .textarea-group textarea {
    font-size: 0.7rem !important;
    padding: 10px 12px 10px 38px !important;
  }

  .form-group .input-icon,
  .textarea-group .input-icon {
    left: 12px !important;
    font-size: 0.8rem !important;
  }

  .interest-options {
    gap: 6px !important;
  }

  .interest-options label {
    font-size: 0.75rem !important;
  }

  .submit-btn {
    font-size: 0.9rem !important;
    padding: 12px 14px !important;
  }

  .services-grid {
    gap: 12px !important;
  }

  .service-item h3 {
    font-size: 1.2rem !important;
  }

  .service-item p {
    font-size: 0.85rem !important;
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 16px 8px !important;
  }

  .why-item img {
    width: 32px !important;
    height: 32px !important;
  }

  .why-item span {
    font-size: 0.7rem !important;
  }

  .about-text h2 {
    font-size: 1.2rem !important;
  }

  .footer-mid h2 {
    font-size: 1rem !important;
  }

  .footer-btn {
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
  }

  .footer-contact-item {
    font-size: 0.75rem !important;
  }

  .certifications-section .biaotititle {
    font-size: 1.2rem !important;
  }

  .icons-list .cert-icon {
    width: 64px !important;
    height: 48px !important;
  }

  .icons-list .cert-icon img {
    width: 40px !important;
    max-height: 32px !important;
  }

  .icons-list {
    gap: 8px !important;
  }

  .icons-wrapper .left_btn,
  .icons-wrapper .right_btn {
    width: 28px !important;
    height: 28px !important;
  }

  .icons-wrapper .left_btn img,
  .icons-wrapper .right_btn img {
    width: 14px !important;
    height: 14px !important;
  }

  .service-images img {
    height: 160px !important;
  }
}

/* 8.3 针对平板设备 (641px - 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
  
  .hero-text h1 {
    font-size: 2.2rem !important;
  }

  .hero-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  .quote-card {
    max-width: 100% !important;
    padding: 24px 20px !important;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .service-images {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .service-images img {
    height: 220px !important;
  }

  .why-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .about-section {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  .about-icon-wrapper img {
    width: 80px !important;
    height: 80px !important;
  }

  .about-text h2 {
    font-size: 1.6rem !important;
  }

  .footer-row-1-inner {
    grid-template-columns: 56px 1fr auto !important;
  }

  .footer-row-2-inner {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* 8.4 针对大屏设备 (1025px 以上) */
@media (min-width: 1025px) {
  
  .container {
    max-width: 1280px !important;
    margin: 0 auto !important;
  }

  .hero-text h1 {
    font-size: 2.8rem !important;
  }

  .services-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .service-images {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .why-grid {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  .about-section {
    grid-template-columns: auto 1fr 1fr !important;
  }
}