/* 文件描述：硬件维保查询页样式（前缀 zsn-） */

body.zsn-page {
  padding-top: var(--nav-height);
  background: var(--slate-50);
}

body.zsn-page .nav:not(.is-scrolled) {
  background: #fff;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── ZSN-FADE / ZSN-RISE — 滚动入场 ── */
.zsn-page .zsn-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.zsn-page .zsn-fade.in {
  opacity: 1;
  transform: none;
}

.zsn-page .zsn-rise {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.zsn-page .zsn-rise.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .zsn-page .zsn-fade,
  .zsn-page .zsn-rise {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── ZSN-HERO — 标题区 ── */
.zsn-hero {
  position: relative;
  overflow: hidden;
  background: var(--slate-100);
  min-height: clamp(200px, calc(100vw * 300 / 1920), 300px);
}

.zsn-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.zsn-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}

.zsn-top-icon {
  position: absolute;
  width: 460px;
  height: 280px;
  top: 50%;
  transform: translateY(-50%);
  right: calc((100vw - 1440px) / 2 + 120px);
  background: url("/static/skin/images/service/yjwp-icon.png") no-repeat center / contain;
}

@media (max-width: 1440px) {
  .zsn-top-icon {
    width: calc(460 / 1440 * 100vw);
    height: calc(280 / 1440 * 100vw);
    right: calc(120 / 1440 * 100vw);
  }
}

.zsn-hero-inner {
  position: relative;
  z-index: 1;
  padding: clamp(60px, calc(100vw * 100/ 1920), 100px) 0
    clamp(60px, calc(100vw * 90 / 1920), 90px);
}

.zsn-hero-inner .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px) 0 calc(var(--container-px) + 20px);
}

.zsn-hero-title {
  font-size: var(--fs-block-head);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(10px, calc(100vw * 14 / 1920), 14px);
}

.zsn-hero-desc {
  font-size: var(--fs-14);
  color: rgba(0, 87, 156, 0.62);
  line-height: 1.65;
  margin: 0;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.36);
  color: #414752;
  padding: 6px 24px;
  position: relative;
  display: inline-flex;
}
.zsn-hero-desc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  bottom: 0;
  margin: auto 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #43DCE5;
  
}

/* ── ZSN-MAIN ── */
.zsn-main {
  position: relative;
  z-index: 2;
  margin-top: clamp(-46px, calc(-100vw * 56 / 1920), -28px);
  padding-bottom: clamp(56px, calc(100vw * 80 / 1920), 80px);
  
}

.zsn-main .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* ── ZSN-PANEL — 表单 / 结果分块卡片 ── */
.zsn-panel {
  background: #fff;
  border-radius: var(--r12);
  box-shadow: var(--shadow-md);
  padding: clamp(24px, calc(100vw * 32 / 1920), 32px);
}

.zsn-panel--form {
  margin-bottom: clamp(16px, calc(100vw * 20 / 1920), 20px);
  padding:clamp(24px, calc(100vw * 52 / 1920), 52px) clamp(24px, calc(100vw * 200 / 1920), 200px) ;
}

.zsn-panel--result {
  margin-bottom: clamp(28px, calc(100vw * 40 / 1920), 40px);
  padding: 0;
}

.zsn-form {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, calc(100vw * 24 / 1920), 24px);
}

.zsn-form-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, calc(100vw * 320 / 1920), 320px);
  align-items: start;
  gap: clamp(16px, calc(100vw * 24 / 1920), 24px);
}

.zsn-form-split:has(#zsnCaptchaField.is-hidden) {
  grid-template-columns: 1fr;
}

.zsn-field-col {
  min-width: 0;
}

.zsn-field-col.is-hidden {
  display: none;
}

.zsn-field-row {
  display: grid;
  grid-template-columns: clamp(100px, calc(100vw * 120 / 1920), 120px) 1fr;
  align-items: start;
  gap: 12px 16px;
  margin-bottom: clamp(20px, calc(100vw * 24 / 1920), 24px);
}

.zsn-field-row:last-of-type {
  margin-bottom: 0;
}

.zsn-field-row.is-hidden {
  display: none;
}

.zsn-field-control {
  min-width: 0;
}

.zsn-label {
  display: block;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.4;
  margin: 0 0 8px;
  white-space: nowrap;
}

.zsn-label-req {
  color: var(--accent-danger);
  margin-left: 2px;
}

.zsn-field-hint {
  margin: 6px 0 0;
  font-size: var(--fs-12);
  color: var(--on-surface-variant);
  line-height: 1.5;
}

.zsn-captcha-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.zsn-captcha-refresh {
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: var(--fs-14);
  color: var(--primary);
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s;
}

.zsn-captcha-refresh:hover {
  color: var(--primary-container);
}

.zsn-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--r8);
  font-size: var(--fs-14);
  color: var(--on-surface);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.zsn-input--block {
  width: 100%;
  flex: none;
}

.zsn-input--textarea {
  width: 100%;
  flex: none;
  height: auto;
  min-height: 120px;
  padding: 12px 14px;
  line-height: 1.6;
  resize: vertical;
}

.zsn-input::placeholder {
  color: var(--slate-400);
}

.zsn-input:hover {
  border-color: var(--slate-300);
}

.zsn-input:focus {
  outline: none;
  border-color: var(--primary-container);
  box-shadow: 0 0 0 3px rgba(0, 112, 198, 0.12);
}

.zsn-captcha-img {
  flex-shrink: 0;
  height: 44px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--r8);
  cursor: pointer;
  background: var(--slate-50);
}

.zsn-form-error {
  display: none;
  margin-top: 8px;
  font-size: var(--fs-12);
  color: var(--accent-danger);
  line-height: 1.5;
}

.zsn-form-error.is-visible {
  display: block;
}

.zsn-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: clamp(4px, calc(100vw * 8 / 1920), 8px);
}

.zsn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: 44px;
  padding: 0 28px;
  border-radius: var(--r8);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.zsn-btn--primary {
  border: none;
  background: var(--primary);
  color: #fff;
}

.zsn-btn--primary:hover {
  background: var(--primary-container);
}

.zsn-btn--primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.zsn-btn--secondary {
  border: 1px solid var(--outline-variant);
  background: #fff;
  color: var(--on-surface-variant);
}

.zsn-btn--secondary:hover {
  border-color: var(--slate-300);
  color: var(--on-surface);
  background: var(--slate-50);
}

.zsn-btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.zsn-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: zsn-spin 0.8s linear infinite;
}

/* ── 客户名称（逻辑保留，视觉隐藏） ── */
.zsn-customer-bar {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.zsn-customer-bar.is-hidden {
  display: none;
}

/* ── 查询结果标题 ── */
.zsn-result-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(16px, calc(100vw * 30 / 1920), 30px);
  margin-top: clamp(24px, calc(100vw * 42 / 1920), 42px);
  padding-left: 10px;
}

.zsn-result-title {
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.4;
  margin: 0;
}

.zsn-result-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--on-surface-variant);
  background: var(--slate-100);
  line-height: 1;
}

/* ── 表格区 ── */
.zsn-table-panel {
  position: relative;
  overflow: hidden;
}

.zsn-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(48px, calc(100vw * 64 / 1920), 64px) 20px;
}

.zsn-loading.is-hidden {
  display: none;
}

.zsn-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(30, 91, 181, 0.15);
  border-top-color: var(--primary, #1e5bb5);
  border-radius: 50%;
  animation: zsn-spin 0.8s linear infinite;
}

.zsn-loading-text {
  font-size: var(--fs-14);
  color: var(--on-surface-variant);
  line-height: 1.4;
}

@keyframes zsn-spin {
  to {
    transform: rotate(360deg);
  }
}

.zsn-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.zsn-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.zsn-table thead th {
  padding: 14px 16px;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--on-surface);
  text-align: left;
  line-height: 1.4;
  background: var(--slate-100);
  border-bottom: none;
  white-space: nowrap;
}

.zsn-table tbody td {
  padding: 14px 16px;
  font-size: var(--fs-14);
  color: var(--on-surface);
  line-height: 1.5;
  border-bottom: 1px solid var(--slate-100);
  vertical-align: middle;
}

.zsn-table tbody tr:last-child td {
  border-bottom: none;
}

.zsn-table tbody.is-hidden {
  display: none;
}

.zsn-table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, calc(100vw * 64 / 1920), 64px) 20px;
  text-align: center;
}

.zsn-table-empty.is-hidden {
  display: none;
}

.zsn-table-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--slate-100);
  color: var(--slate-400);
}

.zsn-table-empty-title {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--on-surface);
  margin: 0;
}

.zsn-status-ok {
  color: #1aad19;
  font-weight: 500;
}

.zsn-status-expired {
  color: var(--accent-danger);
  font-weight: 500;
}

/* ── ZSN-NOTICE — 注意事项 ── */
.zsn-notice {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, calc(100vw * 16 / 1920), 16px);
  padding: clamp(18px, calc(100vw * 24 / 1920), 24px);
  border-radius: var(--r12);
  background: #F1F4FB;
  box-sizing: border-box;
  border: 1px solid rgba(193, 199, 210, 0.3);
}

.zsn-notice-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
}

.zsn-notice-content {
  flex: 1;
  min-width: 0;
}

.zsn-notice-title {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.4;
  margin: 0 0 10px;
}

.zsn-notice-list {
  margin: 0;
  padding-left: 1.15em;
  font-size: var(--fs-14);
  color: var(--on-surface-variant);
  line-height: 1.75;
}

.zsn-notice-list li + li {
  margin-top: 6px;
}

.zsn-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .zsn-hero {
    min-height: 140px;
  }

  .zsn-hero-inner {
    padding-top: 56px;
    padding-bottom: 74px;
  }

  .zsn-main {
    margin-top: -20px;
  }

  .zsn-hero-inner .container {
    padding-left: var(--container-px);
  }

  .zsn-top-icon {
    width: 44vw;
    height: 28vw;
    right: 2vw;
    min-width: 160px;
    min-height: 96px;
  }

  .zsn-hero-title {
    font-size: clamp(22px, 5.8vw, 26px);
  }

  .zsn-hero-desc {
    font-size: var(--fs-14);
  }

  .zsn-panel {
    padding: 20px 16px;
  }
  .zsn-panel--result{
    padding: 0;
  }

  .zsn-form-split {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .zsn-field-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .zsn-label {
    margin-bottom: 8px;
  }

  .zsn-captcha-row {
    flex-wrap: wrap;
  }

  .zsn-captcha-row .zsn-input {
    flex: 1 1 100%;
  }

  .zsn-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .zsn-btn {
    width: 100%;
  }

  .zsn-notice {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .zsn-table thead th,
  .zsn-table tbody td {
    padding: 10px 12px;
    font-size: var(--fs-12);
  }
}