@layer utilities {
  .content-auto {
    content-visibility: auto;
  }

  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  }
}

p{
  margin-top: 8px;
  margin-bottom: 8px;
}

.article-content ul, .article-content ol{
  list-style: auto;
  margin-left: 25px;
}
.pt-26 {
  padding-top: 6.5rem;
  padding-bottom: 6.5rem;
}

/* #navbar{
  padding-top:.5rem;
  padding-bottom:.5rem;
} */
/* Basic animations */
html {
  scroll-behavior: smooth;
}

/* Email modal animation */
.modal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.modal.active .modal-content {
  transform: translateY(0);
}

/* Back to top button styles */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #0A2463;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  transform: translateY(20px);
  z-index: 40;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: #3E92CC;
  transform: translateY(-3px);
}

/* WhatsApp button styles */
.whatsapp-button {
  position: fixed;
  bottom: 90px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #25D366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 40;
  text-decoration: none;
}

.whatsapp-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* WhatsApp tooltip */
.whatsapp-tooltip {
  position: absolute;
  right: 60px;
  background-color: #333;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.whatsapp-button:hover .whatsapp-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Empty state style for product list */
.empty-state {
  text-align: center;
  padding: 120px 20px;
  color: #94A3B8;
}

.empty-state i {
  font-size: 4rem;
  margin-bottom: 1rem;
  color: #CBD5E1;
}

/* tailwindcss补充 */
.bg-primary\/90 {
  background-color: rgb(10 36 99 / 0.9);
}

.bg-primary\/80 {
  background-color: rgb(10 36 99 / 0.8);
}

.bg-primary\/70 {
  background-color: rgb(10 36 99 / 0.7);
}

.bg-primary\/60 {
  background-color: rgb(10 36 99 / 0.6);
}

.bg-primary\/50 {
  background-color: rgb(10 36 99 / 0.5);
}

.bg-primary\/40 {
  background-color: rgb(10 36 99 / 0.4);
}

.bg-primary\/30 {
  background-color: rgb(10 36 99 / 0.3);
}

.bg-primary\/20 {
  background-color: rgb(10 36 99 / 0.2);
}

.bg-primary\/10 {
  background-color: rgb(10 36 99 / 0.1);
}

.bg-primary\/5 {
  background-color: rgb(10 36 99 / 0.05);
}

.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}

.to-primary\/80 {
  background-color: rgb(10 36 99 / 0.8);
}

.text-\[clamp\(2\.5rem\2c 5vw\2c 4rem\)\] {
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.text-\[clamp\(1rem\2c 2vw\2c 1\.25rem\)\] {
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.text-\[clamp\(1\.5rem\2c 3vw\2c 2\.5rem\)\] {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.bg-primary\/10 {
  background-color: rgb(10 36 99 / 0.1);
}

.text-\[clamp\(1\.8rem\2c 3vw\2c 2\.5rem\)\] {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.line-clamp-2,.line-clamp-2>p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

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

/* tailwindcss补充结束 */
.content-auto {
  content-visibility: auto;
}

/* 表格头部样式 */
.table-header {
  background-color: #0A2463;
  /* primary 颜色值 */
  color: white;
  font-weight: 600;
  /* semibold */
}

/* 表格单元格基础样式 */
.table-cell {
  padding: 1rem;
  /* p-4 */
  border-bottom: 1px solid #E5E7EB;
  /* border-b border-gray-200 */
}

/* 表格行样式 */
.table-row {
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  /* transition-colors */
}

.table-row:hover {
  background-color: #F9FAFB;
  /* hover:bg-gray-50 */
}

/* 中等屏幕以上显示为行布局 */
@media (min-width: 768px) {
  .table-row {
    flex-direction: row;
    /* md:flex-row */
  }
}

/* 产品型号列 */
.model-cell {
  padding: 1rem;
  border-bottom: 1px solid #E5E7EB;
  font-weight: 500;
  /* medium */
  color: #0A2463;
  /* text-primary */
}

@media (min-width: 768px) {
  .model-cell {
    width: 20%;
    /* md:w-1/5 */
  }
}

/* 规格列 */
.specs-cell {
  padding: 1rem;
  border-bottom: 1px solid #E5E7EB;
}

@media (min-width: 768px) {
  .specs-cell {
    width: 60%;
    /* md:w-2/5 */
  }
}

/* 标准列 */
.standard-cell {
  padding: 1rem;
  border-bottom: 1px solid #E5E7EB;
}

@media (min-width: 768px) {
  .standard-cell {
    width: 20%;
    /* md:w-1/5 */
  }
}

/* 芯数列 */
.cores-cell {
  padding: 1rem;
  border-bottom: 1px solid #E5E7EB;
}

@media (min-width: 768px) {
  .cores-cell {
    width: 20%;
    /* md:w-1/5 */
  }
}

/* 操作列 */
.action-cell {
  padding: 1rem;
  border-bottom: 1px solid #E5E7EB;
}

@media (min-width: 768px) {
  .action-cell {
    width: 20%;
    /* md:w-1/5 */
  }
}


/* 移动端筛选器切换按钮 */
.filter-toggle {
  display: none;
}

@media (max-width: 1023px) {
  .filter-toggle {
    display: inline-flex;
  }

  .mobile-filter-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }

  .mobile-filter-container.active {
    max-height: 1000px;
    transition: max-height 0.5s ease-in;
  }

  .mobile-hide {
    display: none;
  }
}

.news-date {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #0A2463;
  color: white;
  padding: 5px 12px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.text-accent {
  color: rgb(255 107 53 / var(--tw-text-opacity, 1));
}

.border-accent {
  border-color: rgb(255 107 53 / var(--tw-border-opacity, 1));
}

.bg-accent\/10 {
  background-color: rgb(255 107 53 / 0.1);
}

.text-secondary {
  color: rgb(55 202 236 / var(--tw-text-opacity, 1));
}

.bg-secondary\/10 {
  background-color: rgb(55 202 236 / 0.1);
}

.text-\[\#1877F2\] {
  --tw-text-opacity: 1;
  color: rgb(24 119 242 / var(--tw-text-opacity, 1));
}

.bg-\[\#1877F2\]\/10 {
  background-color: rgb(24 119 242 / 0.1);
}

.text-\[\#1DA1F2\] {
  --tw-text-opacity: 1;
  color: rgb(29 161 242 / var(--tw-text-opacity, 1));
}

.bg-\[\#1DA1F2\]\/10 {
  background-color: rgb(29 161 242 / 0.1);
}

.text-\[\#0A66C2\] {
  --tw-text-opacity: 1;
  color: rgb(10 102 194 / var(--tw-text-opacity, 1));
}

.bg-\[\#0A66C2\]\/10 {
  background-color: rgb(10 102 194 / 0.1);
}

.text-\[\#EA4335\] {
  --tw-text-opacity: 1;
  color: rgb(234 67 53 / var(--tw-text-opacity, 1));
}

.bg-\[\#EA4335\]\/10 {
  background-color: rgb(234 67 53 / 0.1);
}