/* =========================================================
   ZSA · Subscribe (AJAX + Modal · ZOB Widget Style)
   - 卡片配色对齐 ZOB 侧边栏小工具
   - 按钮使用主题主色（var(--bs-primary)）
   - 兼容明暗模式（data-bs-theme）
========================================================= */

/* Card + inputs + button */
.zsa-card{
  background: var(--surface-soft, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  padding: 1rem 1.1rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .03);
  transition:
    background-color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .16s ease;
  max-width: 560px;
}

.zsa-card:hover{
  background: color-mix(in srgb, var(--surface-soft, #f9fafb) 88%, #fff 12%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  transform: translateY(-1px);
}

.zsa-title{
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--bs-emphasis-color, #111827);
  margin-bottom: .25rem;
}

.zsa-desc{
  color: var(--muted, #6b7280);
  margin: 0 0 .75rem 0;
  font-size: .9rem;
}

.zsa-form p{
  margin: .5rem 0;
}

.zsa-input{
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: calc(var(--radius-lg,12px) - 3px);
  background: var(--surface, #ffffff);
  color: var(--text, #111827);
  outline: 0;
  font-size: .92rem;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

.zsa-input::placeholder{
  color: color-mix(in srgb, var(--muted, #6b7280) 72%, transparent);
}

.zsa-input:focus{
  border-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 70%, #000 0%);
  box-shadow: 0 0 0 .16rem color-mix(in srgb, var(--bs-primary, #0d6efd) 16%, transparent);
  background: color-mix(in srgb, var(--surface, #ffffff) 90%, #fff 10%);
}

/* 蜜罐字段隐藏 */
.zsa-form .hp{
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 主按钮 */
.zsa-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .6rem 1.15rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--bs-primary, #0d6efd) 80%, transparent);
  background: var(--bs-primary, #0d6efd);
  color: var(--bs-btn-color, #ffffff);
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform .12s ease,
    box-shadow .2s ease,
    opacity .2s ease,
    background-color .16s ease,
    border-color .16s ease;
}

.zsa-btn:hover{
  background: color-mix(in srgb, var(--bs-primary, #0d6efd) 92%, #fff 8%);
  border-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 90%, #fff 10%);
  box-shadow: 0 10px 22px rgba(37, 99, 235, .28);
  transform: translateY(-1px);
}

.zsa-btn:active{
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(15, 23, 42, .18);
}

.zsa-btn[aria-busy="true"]{
  opacity: .86;
  pointer-events: none;
}

/* Spinner inside button */
.zsa-spinner{
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .2rem;
  border-radius: 50%;
  border: .2em solid currentColor;
  border-right-color: transparent;
  animation: zsa-spin .8s linear infinite;
  vertical-align: -.125em;
}

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

/* =========================================================
   Modal theming · 对齐 ZOB 卡片风格
========================================================= */

.zsa-modal .modal-content{
  border-radius: var(--radius-lg, 14px);
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface-soft, #f9fafb);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .14);
}

.zsa-modal-header{
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: color-mix(in srgb, var(--surface-soft, #f9fafb) 92%, #fff 8%);
}

.zsa-modal-body{
  color: var(--text, #111827);
}

.zsa-modal-footer{
  border-top: 1px solid var(--border, #e5e7eb);
}

.zsa-modal-dot{
  width: .75rem;
  height: .75rem;
  border-radius: 999px;
  background: var(--bs-primary, #0d6efd);
  margin-top: .35rem;
}

/* 成功 / 错误状态渐变色头部 */
.zsa-modal-header.zsa-success{
  background: color-mix(in srgb, var(--bs-success, #198754) 16%, var(--surface-soft, #f9fafb) 84%);
  color: color-mix(in srgb, var(--bs-success, #198754) 10%, var(--bs-emphasis-color, #111827) 90%);
}

.zsa-modal-header.zsa-error{
  background: color-mix(in srgb, var(--bs-danger, #dc3545) 16%, var(--surface-soft, #f9fafb) 84%);
  color: color-mix(in srgb, var(--bs-danger, #dc3545) 10%, var(--bs-emphasis-color, #111827) 90%);
}

/* =========================================================
   Dark mode · 与 ZOB 夜间小工具对齐
========================================================= */

[data-bs-theme="dark"] .zsa-card{
  background: var(--surface-soft, #12151a);
  border-color: var(--border, #252b35);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .7);
}

[data-bs-theme="dark"] .zsa-card:hover{
  background: color-mix(in srgb, var(--surface-soft, #12151a) 90%, #1f2933 10%);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .8);
}

[data-bs-theme="dark"] .zsa-title{
  color: var(--bs-emphasis-color, #f9fafb);
}

[data-bs-theme="dark"] .zsa-desc{
  color: var(--muted, #9ca3af);
}

[data-bs-theme="dark"] .zsa-input{
  background: var(--surface, #0b0d10);
  color: var(--text, #e5e7eb);
  border-color: var(--border, #2b3138);
}

[data-bs-theme="dark"] .zsa-input:focus{
  border-color: color-mix(in srgb, var(--bs-primary, #60a5fa) 70%, #000 0%);
  box-shadow: 0 0 0 .17rem color-mix(in srgb, var(--bs-primary, #60a5fa) 25%, transparent);
}

[data-bs-theme="dark"] .zsa-btn{
  background: color-mix(in srgb, var(--bs-primary, #3b82f6) 88%, #020617 12%);
  border-color: color-mix(in srgb, var(--bs-primary, #3b82f6) 82%, transparent);
  box-shadow: 0 10px 26px rgba(15, 118, 255, .55);
}

[data-bs-theme="dark"] .zsa-btn:hover{
  background: color-mix(in srgb, var(--bs-primary, #3b82f6) 94%, #020617 6%);
}

/* Modal · dark */
[data-bs-theme="dark"] .zsa-modal .modal-content{
  border-color: var(--border, #2b3138);
  background: var(--surface-soft, #151820);
}

[data-bs-theme="dark"] .zsa-modal-header{
  border-color: var(--border, #2b3138);
  background: color-mix(in srgb, var(--surface-soft, #151820) 90%, #020617 10%);
}

[data-bs-theme="dark"] .zsa-modal-footer{
  border-color: var(--border, #2b3138);
}

[data-bs-theme="dark"] .zsa-modal-body{
  color: var(--text, #e5e7eb);
}

[data-bs-theme="dark"] .zsa-modal-dot{
  background: color-mix(in srgb, var(--bs-primary, #3b82f6) 85%, #0b1120 15%);
}

[data-bs-theme="dark"] .zsa-modal-header.zsa-success{
  background: color-mix(in srgb, var(--bs-success, #22c55e) 20%, #020617 80%);
}

[data-bs-theme="dark"] .zsa-modal-header.zsa-error{
  background: color-mix(in srgb, var(--bs-danger, #ef4444) 20%, #020617 80%);
}