/* ============================================================
   IDEAL PRO · 服务页 / 行业页 通用美化 CSS v=20261018i
   基于 Tailwind class 结构选择器，不依赖任何 #ip-xxx id
   只需在 HTML 里引入本文件 + 给特定元素加 .ip-xxx 类即可生效
   2026-10-18 · 全站通用
   ============================================================ */

/* ==================== 1. 卡片 / 边框 通用美化 ==================== */

/* 粗硬深灰 border-[#7d7d7d] → 发丝浅灰 #e8ecf2 */
section.border-b.border-t.border-\[\#7d7d7d\],
section.border-t.border-\[\#7d7d7d\],
section.border-b.border-\[\#7d7d7d\] {
  border-color: #e8ecf2 !important;
}

/* 灰色区块 bg-[#f3f3f3] / bg-[#f5f5f5] / bg-[#ededed] → 统一用页面交替节奏（不动，保留原样）*/
/* 蓝色区块 bg-[#e8f1ff] / bg-[#c0daff] → 白色 */
section.bg-\[\#e8f1ff\],
section.bg-\[\#c0daff\] {
  background: #ffffff !important;
}

/* 带 shadow-sm / rounded-xl 的 article / div 卡片：统一发丝边 + hover 上浮 */
main section article.border,
main section div.group.rounded-lg,
main section div.group.rounded-xl,
main section article.shadow-sm {
  border-color: #e8ecf2 !important;
  border-width: 1px !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(16, 42, 84, .04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
main section article.border:hover,
main section div.group.rounded-lg:hover,
main section div.group.rounded-xl:hover,
main section article.shadow-sm:hover {
  border-color: #b9d4f6 !important;
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(36, 119, 221, .22);
}

/* grid 内 bg-[#f5f5f5] 灰色卡片 → 白色（覆盖更多嵌套结构，用 attribute 选择器） */
main section div.grid > div.bg-\[\#f5f5f5\],
main section div.grid > div.bg-\[\#f6f6f6\],
main section div.grid > div.bg-\[\#f3f3f3\],
main section div[class*="bg-\[\#f5f5f5\]"],
main section div[class*="bg-\[\#f6f6f6\]"],
main section div[class*="bg-\[\#f3f3f3\]"] {
  background: #ffffff !important;
  border: 1px solid #e8ecf2 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(16, 42, 84, .04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
main section div.grid > div.bg-\[\#f5f5f5\]:hover,
main section div.grid > div.bg-\[\#f6f6f6\]:hover,
main section div.grid > div.bg-\[\#f3f3f3\]:hover,
main section div[class*="bg-\[\#f5f5f5\]"]:hover,
main section div[class*="bg-\[\#f6f6f6\]"]:hover,
main section div[class*="bg-\[\#f3f3f3\]"]:hover {
  border-color: #b9d4f6 !important;
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(36, 119, 221, .22);
}

/* ==================== 2. 表格精致化 ==================== */

main section table {
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 42, 84, .04);
}
main section th {
  background: #2477dd !important;
  color: #ffffff !important;
  font-weight: 700;
}
main section th,
main section td {
  padding: 12px 16px !important;
  border-color: #e8ecf2 !important;
  text-align: left !important;
}
main section tbody tr:nth-child(even) {
  background: #fafbfc;
}
main section tbody tr:hover {
  background: #f0f5fc;
}

/* ==================== 3. 手风琴 / FAQ 选中态 ==================== */

main section button[aria-expanded="true"] > span:first-child,
main section button[aria-expanded="true"] span.text-black {
  color: #2477dd !important;
  font-weight: 700 !important;
}
main section button[aria-expanded="true"] svg {
  color: #2477dd !important;
  transform: rotate(180deg);
}
main section button svg {
  transition: color .2s ease, transform .3s ease;
}

/* ==================== 4. Tab / 侧边栏选中态 ==================== */

main section [data-tab-button]:not(.bg-\[\#2477dd\]):not(.text-white),
main section [data-tab-button].bg-gray-100 {
  border: 1px solid #e8ecf2 !important;
  background: #ffffff !important;
  color: #334155 !important;
  transition: all .25s ease;
}
main section [data-tab-button]:not(.bg-\[\#2477dd\]):not(.text-white):hover,
main section [data-tab-button].bg-gray-100:hover {
  border-color: #2477dd !important;
  color: #2477dd !important;
}

main section [data-material-sidebar] {
  border-left: 3px solid transparent !important;
  transition: all .2s ease;
}
main section [data-material-sidebar].bg-white {
  border-left-color: #2477dd !important;
  color: #2477dd !important;
  font-weight: 700;
}
main section [data-material-sidebar]:not(.bg-white):hover {
  border-left-color: #2477dd !important;
  background: #f0f5fc !important;
  color: #2477dd !important;
}

/* ==================== 5. 图片卡 / Factory 照片 ==================== */

main section div.group.h-\[450px\],
main section div.group.aspect-\[4\/3\],
main section div.group.aspect-\[16\/9\] {
  border-radius: 12px !important;
  border: 1px solid #e8ecf2 !important;
  box-shadow: 0 1px 2px rgba(16, 42, 84, .04);
  background: #ffffff !important;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
main section div.group.h-\[450px\]:hover,
main section div.group.aspect-\[4\/3\]:hover,
main section div.group.aspect-\[16\/9\]:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(36, 119, 221, .22);
  border-color: #b9d4f6 !important;
}

/* ==================== 6. 底部 CTA 区块 ==================== */

main section.relative.overflow-hidden.bg-\[\#f3f3f3\],
main section.relative.overflow-hidden.bg-\[\#ededed\] {
  background: #ffffff !important;
}

/* ==================== 7. .ip-process-step-card 6 步流程卡 ==================== */

.ip-process-step-card {
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid #e8ecf2 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(16, 42, 84, .05);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  overflow: visible !important;
  padding-top: 28px !important;
}
.ip-process-step-card:hover {
  border-color: #b9d4f6 !important;
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -24px rgba(36, 119, 221, .28);
}
.ip-process-step-card .ip-step-num {
  position: absolute !important;
  top: -18px !important;
  left: 20px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2477dd 0%, #4a9eff 100%) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 16px -4px rgba(36, 119, 221, .5), inset 0 1px 0 rgba(255,255,255,.25) !important;
  z-index: 10 !important;
  border: 2px solid #ffffff !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
  margin-right: 0 !important;
}
.ip-process-step-card:hover .ip-step-num {
  transform: scale(1.08) !important;
  box-shadow: 0 10px 22px -4px rgba(36, 119, 221, .6), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.ip-process-step-card > div:first-child {
  padding-top: 12px !important;
}
.ip-process-step-card > div:last-child {
  background: #f7f9fc !important;
  padding: 0 !important;
  margin-top: auto !important;
  aspect-ratio: 4 / 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-top: 1px solid #eef1f5 !important;
}
.ip-process-step-card > div:last-child img {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform .5s ease !important;
}
.ip-process-step-card:hover > div:last-child img {
  transform: scale(1.06) !important;
}

/* ==================== 8. Why Partner 图标容器 ==================== */

main section article > div:first-child.mb-4.flex.h-10.w-10.items-center,
main section article > div:first-child.mb-4.flex.h-12.w-12.items-center {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #eaf2fb 0%, #dbe7f7 100%) !important;
  border: none !important;
  color: #2477dd !important;
  box-shadow: 0 4px 12px -6px rgba(36, 119, 221, .35), inset 0 1px 0 rgba(255,255,255,.7) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
main section article:hover > div:first-child.mb-4.flex.h-10.w-10.items-center,
main section article:hover > div:first-child.mb-4.flex.h-12.w-12.items-center {
  background: linear-gradient(135deg, #2477dd 0%, #4a9eff 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 8px 20px -6px rgba(36, 119, 221, .5) !important;
}
main section article > div:first-child.mb-4.flex.h-10.w-10.items-center svg,
main section article > div:first-child.mb-4.flex.h-12.w-12.items-center svg {
  width: 28px !important;
  height: 28px !important;
}

/* ==================== 9. 渐变蓝色区块 → 白色 ==================== */

main section.bg-\[linear-gradient\(to_bottom\,white_0\,white_70\%,#e8f6ff_100\%\)\],
main section.bg-gradient-to-b.from-gray-100.to-white {
  background: #ffffff !important;
}

/* ==================== 11. ip-edu-icon-wrap 图标容器（Why Choose 6 张卡） ==================== */

.ip-edu-icon-wrap {
  background: linear-gradient(135deg, #eaf2fb 0%, #dbe7f7 100%) !important;
  border-radius: 14px !important;
  color: #2477dd !important;
  box-shadow: 0 4px 12px -6px rgba(36, 119, 221, .35), inset 0 1px 0 rgba(255,255,255,.7) !important;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease !important;
}
a:hover .ip-edu-icon-wrap,
div.rounded-xl:hover .ip-edu-icon-wrap,
div.rounded-lg:hover .ip-edu-icon-wrap {
  background: linear-gradient(135deg, #2477dd 0%, #4a9eff 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 10px 24px -6px rgba(36, 119, 221, .55) !important;
}

/* 卡片边框统一：border-[#b1b1b1] / border-[#7d7d7d] → #e8ecf2 + hover 上浮 */
main section [class*="border-[#b1b1b1]"],
main section [class*="border-[#7d7d7d]"] {
  border-color: #e8ecf2 !important;
  box-shadow: 0 1px 2px rgba(16, 42, 84, .04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
main section [class*="border-[#b1b1b1]"]:hover,
main section [class*="border-[#7d7d7d]"]:hover {
  border-color: #b9d4f6 !important;
  transform: translateY(-6px);
  box-shadow: 0 22px 48px -28px rgba(36, 119, 221, .28);
}

/* 外层：交错布局 — Advantages 图左，Applications 图右 */
#ip-advantages.ip-tight-row {
  display: flex !important;
  flex-direction: row !important;      /* 图左 */
  gap: 48px !important;
  align-items: flex-start !important;
}
#ip-applications.ip-tight-row {
  display: flex !important;
  flex-direction: row-reverse !important;  /* 图右，交错 */
  gap: 48px !important;
  align-items: flex-start !important;
}
#ip-advantages > div.group.relative,
#ip-applications > div.group.relative {
  width: 42% !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 120px !important;
}
/* Applications 是 flex-row-reverse，图片在右边 */
#ip-applications > div.group.relative {
  position: sticky !important;
  top: 120px !important;
}
/* 内容列：标题+副标题+条目 */
#ip-advantages > div.flex.flex-1.flex-col,
#ip-applications > div.flex.flex-1.flex-col {
  width: 58% !important;
  flex: 0 0 58% !important;
}

/* 标题区：h2 + 蓝条 + 副标题 紧凑排列，形成一个视觉整体 */
#ip-advantages h2,
#ip-applications h2 {
  margin-bottom: 8px !important;
}
#ip-advantages h2 + div.h-1,
#ip-applications h2 + div.h-1 {
  margin-bottom: 16px !important;
}
#ip-advantages p,
#ip-applications p {
  margin-bottom: 32px !important;
}

/* 条目：单列（覆盖 sm:grid-cols-2），一行一个 */
#ip-advantages ul.grid,
#ip-applications ul.grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

/* li 卡片美化 */
#ip-advantages li,
#ip-applications li {
  border-color: #e8ecf2 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(16, 42, 84, .05);
  background: #ffffff !important;
  padding: 18px 20px !important;
  gap: 14px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}
#ip-advantages li:hover,
#ip-applications li:hover {
  border-color: #b9d4f6 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px -24px rgba(36, 119, 221, .28) !important;
  background: #ffffff !important;
}

/* SVG 图标容器：蓝色渐变圆角砖 */
#ip-advantages li > svg,
#ip-applications li > svg {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #2477dd 0%, #4a9eff 100%) !important;
  padding: 6px !important;
  box-shadow: 0 4px 12px -4px rgba(36, 119, 221, .4), inset 0 1px 0 rgba(255,255,255,.25) !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
#ip-advantages li:hover > svg,
#ip-applications li:hover > svg {
  transform: scale(1.06) !important;
  box-shadow: 0 8px 18px -4px rgba(36, 119, 221, .55), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* 标题加粗 hover 变品牌蓝 */
#ip-advantages li h4,
#ip-applications li h4 {
  font-weight: 700 !important;
  color: #1a1f2e !important;
  line-height: 1.35 !important;
  margin-bottom: 2px !important;
}
#ip-advantages li:hover h4,
#ip-applications li:hover h4 {
  color: #2477dd !important;
}

/* 移动端：左右结构 → 上下堆叠 */
@media (max-width: 767px) {
  #ip-advantages.ip-tight-row,
  #ip-applications.ip-tight-row {
    flex-direction: column !important;
    gap: 24px !important;
  }
  #ip-advantages > div.group.relative,
  #ip-applications > div.group.relative {
    width: 100% !important;
    position: static !important;
    top: auto !important;
  }
  #ip-advantages > div.flex.flex-1.flex-col,
  #ip-applications > div.flex.flex-1.flex-col {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
}

/* ==================== 12. Why Choose / Why Partner · 顶部蓝色大徽章 ==================== */

/* injection-mold-tooling.html 的 h-[240px] w-[240px] bg-[#2477dd] ISO 徽章 */
[id*="ip-why-"] [class*="h-\[240px\]"][class*="w-\[240px\]"][class*="bg-\[#2477dd\]"],
[id*="ip-why-"] div[style*="240px"][class*="bg-\[#2477dd\]"] {
  background: linear-gradient(135deg, #2477dd 0%, #4a9eff 100%) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px -12px rgba(36, 119, 221, .5), inset 0 1px 0 rgba(255,255,255,.2) !important;
  border: 1px solid rgba(255,255,255,.15);
  transition: transform .3s ease, box-shadow .3s ease;
}
[id*="ip-why-"] [class*="h-\[240px\]"][class*="w-\[240px\]"][class*="bg-\[#2477dd\]"]:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 28px 60px -12px rgba(36, 119, 221, .6) !important;
}
[id*="ip-why-"] [class*="h-\[240px\]"][class*="w-\[240px\]"] svg {
  filter: drop-shadow(0 2px 8px rgba(255,255,255,.25));
}

/* ==================== 13. Why Choose · 4 张编号卡 ==================== */

[id*="ip-why-"] .grid > div[class*="border"][class*="border-gray"],
[id*="ip-why-"] .grid > div[class*="bg-white"][class*="shadow"] {
  border-color: #e8ecf2 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(16, 42, 84, .04), 0 8px 22px -12px rgba(36, 119, 221, .15) !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}
[id*="ip-why-"] .grid > div[class*="border"]:hover,
[id*="ip-why-"] .grid > div[class*="bg-white"][class*="shadow"]:hover {
  transform: translateY(-8px);
  border-color: #b9d4f6 !important;
  box-shadow: 0 22px 50px -20px rgba(36, 119, 221, .35) !important;
}

/* 编号圆 h-10 w-10 bg-[#2477dd] → 渐变蓝徽章 */
[id*="ip-why-"] [class*="h-10"][class*="w-10"][class*="bg-\[#2477dd\]"],
[id*="ip-why-"] [class*="h-8"][class*="w-8"][class*="bg-\[#2477dd\]"] {
  background: linear-gradient(135deg, #2477dd 0%, #4a9eff 100%) !important;
  border-radius: 50% !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px -6px rgba(36, 119, 221, .5), inset 0 1px 0 rgba(255,255,255,.25) !important;
  position: relative;
}
[id*="ip-why-"] [class*="h-10"][class*="w-10"][class*="bg-\[#2477dd\]"]::after,
[id*="ip-why-"] [class*="h-8"][class*="w-8"][class*="bg-\[#2477dd\]"]::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  z-index: -1;
  opacity: 0;
  transition: opacity .3s ease;
}
[id*="ip-why-"]:hover [class*="h-10"][class*="w-10"][class*="bg-\[#2477dd\]"]::after {
  opacity: 1;
}

/* ==================== 14. Why Choose · 通用卡片美化（其他 Service 页面） ==================== */

/* 3d-printing / aluminum-extrusion / rapid-prototyping 等多种卡片类型覆盖 */
[id*="ip-why-service"] .grid > div[class*="flex"],
[id*="ip-why-service"] .grid > article,
[id*="ip-why-service"] [class*="ring-1"],
[id*="ip-why-service"] [class*="shadow-sm"] {
  border-radius: 16px !important;
  border: 1px solid #e8ecf2 !important;
  box-shadow: 0 1px 3px rgba(16, 42, 84, .04), 0 10px 26px -16px rgba(36, 119, 221, .18) !important;
  background: #ffffff !important;
  outline: none !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}
[id*="ip-why-service"] .grid > div[class*="flex"]:hover,
[id*="ip-why-service"] .grid > article:hover,
[id*="ip-why-service"] [class*="ring-1"]:hover,
[id*="ip-why-service"] [class*="shadow-sm"]:hover {
  transform: translateY(-6px);
  border-color: #b9d4f6 !important;
  box-shadow: 0 24px 50px -24px rgba(36, 119, 221, .35) !important;
}

/* 服务页 icon 卡（如果有 h-10 w-10 bg-[#2477dd] 的图标容器） */
[id*="ip-why-service"] [class*="h-12"][class*="w-12"][class*="bg-\[#2477dd\]"],
[id*="ip-why-service"] [class*="h-14"][class*="w-14"][class*="bg-\[#2477dd\]"],
[id*="ip-why-service"] [class*="h-16"][class*="w-16"][class*="bg-\[#2477dd\]"] {
  background: linear-gradient(135deg, #2477dd 0%, #4a9eff 100%) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px -6px rgba(36, 119, 221, .4), inset 0 1px 0 rgba(255,255,255,.25) !important;
}