/**
 * Contact V2 页
 * Figma: 1037:2786 / 1047:3112 / 1069:745
 * 基准 16px = 1rem；严禁 px
 */

/* ---- 页背景 ---- */
.v2-contact-page {
  background: linear-gradient(-77.15deg, #F2F8FD 0%, #AADDFF 93.96%);
}

.v2-contact-section {
  box-sizing: border-box;
  padding: 5rem 0 6.25rem; /* 80 / 100 — 卡片相对 header 的视觉余量 */
}

/* ---- 白卡片 ----
 * 底对齐策略：pagination 与 Submit 同高；
 * slide 变高时卡片向上长，右侧表单 flex-end 贴底，不被字段间距撑开。
 */
.v2-contact-card {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* 两列等高 = max(左, 右) */
  width: 100%;
  min-height: 43.125rem; /* 690：短 slide 时保底 */
  padding: 3.75rem; /* 60 */
  background: #FFFFFF;
  border-radius: 1.25rem; /* 20 */
  box-shadow: 0 0 0.9375rem 0 rgba(34, 50, 72, 0.1); /* 15 */
}

.v2-contact-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.5rem; /* intro 与轮播最小间距；多余空间由 swiper margin-top:auto 吃掉 */
  flex: 0 1 46.4375rem; /* 743：文案区；轮播卡仍 700 */
  min-width: 0;
  max-width: 46.4375rem;
  align-self: stretch;
}

/* 轮播区顶开：贴左栏底部，与右侧 Submit 对齐 */
.v2-contact-left .v2-contact-swiper-wrap {
  margin-top: auto;
}

.v2-contact-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 表单贴底：Submit 与 pagination 同高 */
  flex: 0 0 32.5rem; /* 520 */
  width: 32.5rem;
  align-self: stretch;
}

/* ---- 左侧标题区（非美区） ---- */
.v2-contact-title {
  margin: 0;
  padding: 0;
  font-size: 2.75rem; /* 44 */
  line-height: 1;
  color: #1D1D1F;
  font-family: 'Gotham-Bold', sans-serif;
  font-weight: normal;
}

.v2-contact-title span {
  display: inline;
  font-size: 2.75rem; /* 44 */
  line-height: normal;
  color: #1D1D1F;
  font-family: 'Gotham-Bold', sans-serif;
  font-weight: normal;
}

.v2-contact-desc {
  margin: 1.1875rem 0 0; /* 标题底 → 副文 ≈ 19 */
  padding: 0;
  font-size: 1.375rem; /* 22 */
  line-height: normal;
  color: #323232;
  font-family: 'Gotham-Book', sans-serif;
}

/* Figma 1048:3509：邮箱与正文同为 22；a 不能只靠继承（主题可能钉死 a 字号） */
.v2-contact-page .v2-contact-desc a {
  font-size: 1.375rem; /* 22 */
  line-height: normal;
  color: #323232;
  font-family: 'Gotham-Medium', sans-serif;
  font-weight: normal !important;
  text-decoration: none;
}

.v2-contact-page .v2-contact-desc a:hover {
  color: #009CFF;
  text-decoration: underline;
}

.v2-contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5625rem; /* 9：稿行顶距 31 − 字号 22 */
  margin: 0.9375rem 0 0; /* 15：副文底 → 首条 */
  padding: 0;
}

.v2-contact-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8：图标 18 → 文案 left 26 */
  margin-bottom: 0;
  font-size: 1.375rem; /* 22 */
  line-height: 1.375rem; /* 与字号一致，保证行顶距 31 */
  color: #323232;
  font-family: 'Gotham-Medium', sans-serif;
}

/* 对抗 header_v2 的 * { font-family } 与 all-combined 的 * { color:#343434 }：
   文案 span 必须显式写齐 font-family / size / line-height / color，禁止只靠继承 */
.v2-contact-page .v2-contact-list li > span {
  font-size: 1.375rem;
  line-height: 1.375rem;
  color: #323232;
  font-family: 'Gotham-Medium', sans-serif;
  font-weight: normal;
}

.v2-contact-list-icon {
  flex-shrink: 0;
  width: 1.125rem; /* 18 */
  height: 1.125rem;
  display: block;
}

/* ---- 美区左侧 CTA ---- */
.v2-contact-intro--us .v2-contact-title span {
  display: block;
  max-width: 34.375rem; /* 550 */
  font-size: 2.75rem; /* 44 */
  line-height: 3.1875rem; /* 51：稿第二行 top */
  color: #1D1D1F;
  font-family: 'Gotham-Bold', sans-serif;
  font-weight: normal;
}

.v2-contact-us-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.875rem; /* 30：256 + 30 = 286，第二钮 left 346-60 */
  margin-top: 1.25rem; /* 20：标题块 104 → 按钮 124 */
}

.v2-contact-us-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem; /* 40 */
  padding: 0 1.25rem; /* 20 */
  border-radius: 3.5rem; /* 56 */
  border: 0.0625rem solid #1D1D1F;
  background-color: transparent;
  color: #1D1D1F;
  font-size: 1.125rem; /* 18 */
  font-family: 'Gotham-Medium', sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.6s ease, border-color 0.6s ease, color 0.6s ease;
}

.v2-contact-us-btn:hover {
  background-color: #008cff;
  border-color: #008cff;
  color: #fff;
}

.v2-contact-us-btn:active {
  background-color: #0067BB;
  border-color: #0067BB;
  color: #fff;
}

/* ---- 证言轮播 ---- */
.v2-contact-swiper-wrap {
  box-sizing: border-box;
  /* 桌面锁定 700：引文区 620 = 700 − padding 40×2，与 Figma 换行一致；勿被左栏 flex 挤窄 */
  width: 43.75rem; /* 700 */
  max-width: 100%;
  /* margin-top 由 .v2-contact-left .v2-contact-swiper-wrap { margin-top: auto } 控制贴底 */
  flex-shrink: 0;
}

.v2-contact-swiper {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  /* Figma 最高卡 Steve Statler 316px；固定高度避免 autoHeight 切换动画 */
  height: 19.75rem;
}

.v2-contact-swiper .swiper-wrapper {
  height: 100%;
  align-items: flex-end; /* slide 底对齐 */
}

.v2-contact-swiper .swiper-slide {
  height: 100% !important; /* 覆盖 swiper 默认；与固定轨同高 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 矮卡贴底，高卡撑满 */
}

.v2-contact-testimonial {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  max-height: 100%;
  padding: 2.125rem 2.5rem 2.5rem; /* 34/40 */
  border-radius: 1rem; /* 16 */
  /* 默认兜底 = Leon；各 slide 用修饰类覆盖角度 */
  background: linear-gradient(-62.8854deg, #DAF9FF 0.4%, #FFF0EF 97.09%);
}

/* Figma 各卡渐变角度不一致（色值相同） */
.v2-contact-testimonial--leon {
  background: linear-gradient(-62.8854deg, #DAF9FF 0.4%, #FFF0EF 97.09%);
}
.v2-contact-testimonial--iot,
.v2-contact-testimonial--stephen {
  background: linear-gradient(-64.4964deg, #DAF9FF 0.4%, #FFF0EF 97.09%);
}
.v2-contact-testimonial--steve {
  background: linear-gradient(-67.2329deg, #DAF9FF 0.4%, #FFF0EF 97.09%);
}
.v2-contact-testimonial--hospital {
  background: linear-gradient(-65.9376deg, #DAF9FF 0.4%, #FFF0EF 97.09%);
}

.v2-contact-testimonial-head {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem; /* 20：头像右 102 → 文案 left 122 */
}

.v2-contact-avatar {
  flex-shrink: 0;
  width: 3.875rem; /* 62 */
  height: 3.875rem;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.v2-contact-person {
  min-width: 0;
  /* 稿：头像 top 34、姓名 top 30 → 姓名相对头像顶上移 4 */
  margin-top: -0.25rem;
}

.v2-contact-person-name {
  font-size: 1.25rem; /* 20 */
  line-height: 1.25rem;
  color: #1D1D1F;
  font-family: 'Gotham-Bold', sans-serif;
}

.v2-contact-person-role {
  margin-top: 0.5rem; /* 8：姓名顶 30 → 职位顶 58 − 20 */
  max-width: 24.5rem; /* 392：Figma 1048:3513，Leon 职位于 China, 后换行 */
  font-size: 1rem; /* 16 */
  line-height: normal;
  color: #6D7B8B;
  font-family: 'Gotham-Medium', sans-serif;
  word-break: break-word;
}

/* International Hospital 仅姓名：稿 top 51 ≈ 头像垂直居中 */
.v2-contact-testimonial--hospital .v2-contact-testimonial-head {
  align-items: center;
}
.v2-contact-testimonial--hospital .v2-contact-person {
  margin-top: 0;
}

.v2-contact-stars {
  display: block;
  width: 7.0225rem; /* 112.36 */
  height: 1.125rem; /* 18 */
  margin-top: 1.625rem; /* 26：头像底 96 → 星 122 */
}

.v2-contact-quote {
  margin: 1.5rem 0 0; /* 24：星底 140 → 引文 164 */
  padding: 0;
  /* 卡宽 700 − 左右 padding 40 = 620，对齐 Figma 引文框 */
  width: 100%;
  max-width: 38.75rem; /* 620 */
  font-size: 1rem; /* 16 */
  line-height: normal;
  color: #1D1D1F;
  font-family: 'Gotham-Book', sans-serif;
  word-break: break-word;
}

/* 强调句：须完整声明，不能只写 font-family */
.v2-contact-page .v2-contact-quote .v2-contact-quote-em,
.v2-contact-page .v2-contact-quote span.v2-contact-quote-em {
  font-size: 1rem;
  line-height: normal;
  color: #1D1D1F;
  font-family: 'Gotham-Black', sans-serif;
  font-weight: normal;
}

/* 分页点：放在 overflow 外，避免被裁切 */
.v2-contact-swiper-wrap .v2-contact-pagination {
  position: relative;
  margin-top: 0.875rem; /* 14：卡底 → 点 */
  bottom: auto !important;
  left: auto !important;
  width: 100%;
  height: auto;
  text-align: center;
  line-height: 0;
}

.v2-contact-swiper-wrap .swiper-pagination-bullet {
  display: inline-block;
  width: 0.5rem; /* 8 */
  height: 0.5rem;
  margin: 0 0.25rem !important;
  border-radius: 50%;
  background: #D0D5DD;
  opacity: 1;
  vertical-align: middle;
}

.v2-contact-swiper-wrap .swiper-pagination-bullet-active {
  background: #009CFF;
  opacity: 1;
}

/* ---- 右侧表单（对齐 form_new 结构，底色按稿 #F5F5F7） ---- */
.v2-contact-form-wrap {
  width: 100%;
}

.v2-contact-form {
  width: 100%;
}

.v2-contact-form .tg-contact-item {
  margin-bottom: 0.875rem; /* 14 */
  position: relative;
}

.v2-contact-form .tg-contact-item:last-of-type {
  margin-bottom: 0.875rem;
}

.v2-contact-form .tg-contact-item input {
  box-sizing: border-box;
  width: 100%;
  height: 2.625rem; /* 42 */
  padding: 0.75rem 0.9375rem; /* 12 / 15 */
  font-size: 1.125rem; /* 18 */
  line-height: 1.375rem;
  color: #435566;
  font-family: 'Gotham-Medium', sans-serif;
  background: #F5F5F7;
  border: 0.125rem solid transparent;
  border-radius: 0.375rem; /* 6 */
  outline: none;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.v2-contact-form .tg-contact-item input::placeholder,
.v2-contact-form .tg-contact-item textarea::placeholder {
  color: #8F9FB1;
  font-size: 1.125rem;
  line-height: 1.375rem;
  font-family: 'Gotham-Medium', sans-serif;
}

.v2-contact-form .tg-contact-item input:focus,
.v2-contact-form .tg-contact-item textarea:focus {
  border-color: #009CFF !important;
  background: #EFFFFD !important;
}

.v2-contact-form .tg-contact-item input.inValid {
  background: #FDEEEA;
  border: 0.125rem solid #EA522A;
  border-radius: 0.375rem;
}

.v2-contact-form .tg-contact-item input.inValid::placeholder {
  color: #EA522A;
}

.v2-contact-form .tg-contact-item input.inValid:focus::placeholder {
  color: #8F9FB1;
}

.v2-contact-form .tg-contact-item textarea.inValid {
  background: #FDEEEA;
  border: 0.125rem solid #EA522A;
}

.v2-contact-form .tg-contact-item textarea.inValid::placeholder {
  color: #EA522A;
}

.v2-contact-form .tg-contact-item textarea.inValid:focus::placeholder {
  color: #8F9FB1;
}

.v2-contact-form .tg-counter {
  position: absolute;
  bottom: 0.9375rem;
  right: 0.9375rem;
  font-size: 1rem;
  font-family: 'Gotham-Medium', sans-serif;
  color: #8F9FB1;
  pointer-events: none;
  z-index: 1;
  line-height: 1.25rem;
}

.v2-contact-form .tg-counter.error {
  color: #EA522A;
}

.v2-contact-form .tg-counter.valid {
  color: #00B858;
}

.v2-contact-form .tg-contact-item textarea {
  box-sizing: border-box;
  width: 100%;
  height: 11.25rem; /* 180 */
  resize: none;
  padding: 0.75rem 0.9375rem 2rem;
  font-size: 1.125rem;
  line-height: 1.375rem;
  color: #435566;
  font-family: 'Gotham-Medium', sans-serif;
  background: #F5F5F7;
  border: 0.125rem solid transparent;
  border-radius: 0.375rem;
  outline: none;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* 自定义下拉 — 与 form_new 行为一致，底色按稿 */
.v2-contact-form .custom-select {
  position: relative;
  width: 100%;
  cursor: pointer;
}

.v2-contact-form .custom-select-trigger {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 2.625rem;
  padding: 0.75rem 0.9375rem;
  font-size: 1.125rem;
  line-height: 1.375rem;
  color: #8F9FB1;
  font-family: 'Gotham-Medium', sans-serif;
  background: #F5F5F7;
  border: 0.125rem solid transparent;
  border-radius: 0.375rem;
  outline: none;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.v2-contact-form .custom-select-trigger::after {
  content: '';
  position: absolute;
  right: 0.9375rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 0.75rem;
  height: 0.375rem;
  background: url(/uploads/image/20250820/more-industries.svg) no-repeat;
  background-size: cover;
  transition: transform 0.3s ease;
}

.v2-contact-form .custom-select.open .custom-select-trigger::after {
  transform: translateY(-50%) rotate(-180deg);
}

.v2-contact-form .has-value .custom-select .custom-select-trigger {
  color: #435566;
}

.v2-contact-form .custom-select-trigger.inValid {
  background: #FDEEEA;
  border: 0.125rem solid #EA522A;
  color: #EA522A;
}

.v2-contact-form .custom-options {
  position: absolute;
  top: calc(100% + 0.125rem);
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0;
  border: 0.0625rem solid #989FA5;
  border-radius: 0.5rem;
  background: #F1F1F2;
  box-shadow: 0.125rem 0.125rem 1rem 0 rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  display: none;
  z-index: 99;
}

.v2-contact-form .custom-select.open .custom-options {
  display: flex;
  flex-direction: column;
}

.v2-contact-form .custom-option {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  height: 1.625rem;
  line-height: 1.25rem;
  padding: 0 0.75rem 0 2.4375rem;
  margin-bottom: 0.125rem;
  font-size: 1.0625rem;
  color: #6D7B8B;
  font-family: 'Gotham-Medium', sans-serif;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.v2-contact-form .custom-option:last-of-type {
  margin-bottom: 0;
}

.v2-contact-form .custom-option::before {
  content: '';
  position: absolute;
  left: 0.9375rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  border: 0.0625rem solid #B0B8C1;
  border-radius: 0.125rem;
  background: #FFFFFF;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.v2-contact-form .custom-option:hover {
  background: #008ECF;
  color: #FFFFFF;
}

.v2-contact-form .custom-option:hover::before {
  border-color: #FFFFFF;
}

.v2-contact-form .custom-option.selected {
  color: #323232;
}

.v2-contact-form .custom-option.selected::before {
  background: #008ECF;
  border-color: #008ECF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-5' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.v2-contact-form .custom-option.selected:hover {
  color: #FFFFFF;
}

.v2-contact-form .custom-option.selected:hover::before {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-5' stroke='%23008ECF' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.v2-contact-form .custom-select,
.v2-contact-form .custom-select * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.v2-contact-form .custom-select-trigger span.trigger-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 1.25rem);
  color: #8F9FB1;
  font-family: 'Gotham-Medium', sans-serif;
  font-size: 1.125rem;
  line-height: 1.375rem;
}

.v2-contact-form .has-value .custom-select-trigger span.trigger-text {
  color: #323232;
}

.v2-contact-form .tg-contact-btn {
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.5rem; /* 40 */
  border-radius: 0.375rem;
  background: linear-gradient(94.4deg, #0C88D7 0%, #64D79B 100%);
  transition: all 0.4s ease;
  border: none;
}

.v2-contact-form .tg-contact-btn span {
  font-size: 1.125rem;
  line-height: 1.375rem;
  color: #FFFFFF;
  font-family: 'Gotham-Medium', sans-serif;
}

.v2-contact-form .tg-contact-btn:hover {
  background: linear-gradient(139deg, #6DC6FF 0%, #ADFFD4 100%);
}

.v2-contact-form .tg-contact-btn:active {
  background: linear-gradient(139deg, #034EA6 0%, #3BC877 100%);
}

/* ---- 响应式：窄屏上下堆叠，不改桌面稿数值 ---- */
@media screen and (max-width: 75rem) {
  .v2-contact-card {
    flex-direction: column;
    min-height: 0;
    padding: 2.5rem 1.5rem;
    gap: 2.5rem;
  }

  .v2-contact-left,
  .v2-contact-right,
  .v2-contact-swiper-wrap,
  .v2-contact-swiper {
    max-width: 100%;
    width: 100%;
    flex: none;
  }

  .v2-contact-left {
    justify-content: flex-start;
  }

  .v2-contact-right {
    justify-content: flex-start;
  }

  .v2-contact-left .v2-contact-swiper-wrap,
  .v2-contact-swiper-wrap {
    margin-top: 2.5rem;
  }

  .v2-contact-title,
  .v2-contact-title span {
    font-size: 2rem;
    color: #1D1D1F;
  }

  .v2-contact-desc,
  .v2-contact-page .v2-contact-desc a,
  .v2-contact-list li,
  .v2-contact-page .v2-contact-list li > span {
    font-size: 1.125rem;
    line-height: 1.375rem;
    color: #323232;
  }

  .v2-contact-person-role {
    max-width: 100%;
  }

  .v2-contact-quote {
    max-width: 100%;
  }

  .v2-contact-us-actions {
    gap: 1rem;
  }

  .v2-contact-us-btn {
    white-space: normal;
    text-align: center;
  }
}