@charset "UTF-8";

/* CSS 兼容性修复补丁 */
:root {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / .5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

::before,
::after {
  --tw-content: '';
}

/* 1. 修复 appearance 兼容性 */
input,
select,
textarea,
.custom-select {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
}

/* 按钮单独处理，不覆盖背景色 */
button {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
}

/* 所有按钮强制蓝色背景白色文字 */
button,
button[type="submit"],
button[type="button"],
button[class*="btn"],
a[class*="btn"],
a[role="button"],
[class*="Button"],
[class*="button"] {
  background: #0066cc !important;
  color: white !important;
  border: 1px solid #0066cc !important;
}

/* 2. 修复 line-clamp 兼容性 */
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 3. 修复 vertical-align 与 display:block 的冲突 */
.display-block {
  display: block;
}

/* 4. 其他兼容性修复 */

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 表单元素焦点状态 */
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* 按钮点击效果 */
button:active,
.btn:active {
  transform: scale(0.98);
}

/* 动画性能优化 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 5. 修复首页按钮样式 - 移除白色背景 */
/* Hero 区域按钮样式修复 */
.hero-buttons button,
.hero-buttons a,
.cta-buttons button,
.cta-buttons a,
section button,
section a {
  background-color: transparent !important;
  background: transparent !important;
}

/* 针对特定按钮的样式修复 */
button[class*="secondary"],
a[class*="secondary"],
button[class*="outline"],
a[class*="outline"] {
  background-color: transparent !important;
  background: transparent !important;
  border: 2px solid white !important;
  color: white !important;
}

/* 6. 隐藏 CTA 区域的电话和邮箱 */
.cta-contact,
.cta-contact-info,
.contact-info,
section[class*="cta"] .contact-info,
section[class*="cta"] .phone,
section[class*="cta"] .email,
section[class*="cta"] [class*="contact"],
.cta-section .contact-info,
.cta-section .phone,
.cta-section .email {
  display: none !important;
}

/* 针对包含电话和邮箱的特定元素 */
[class*="cta"] [href^="tel:"],
[class*="cta"] [href^="mailto:"],
[class*="cta"] .flex:has([href^="tel:"]),
[class*="cta"] .flex:has([href^="mailto:"]) {
  display: none !important;
}

/* 隐藏包含 400-123-4567 和 contact@zhuomei.com 的元素 */
*:contains("400-123-4567"),
*:contains("contact@zhuomei.com") {
  display: none !important;
}

/* 响应式图片 */
img {
  max-width: 100%;
  height: auto;
}

/* 文本选择样式 */
::selection {
  background-color: #3b82f6;
  color: white;
}

/* 链接访问后样式 */
a:visited {
  color: #3b82f6;
}

a:hover {
  color: #1d4ed8;
}