/* ==========================================================================
   DWIPhone · 统一按钮组件层
   --------------------------------------------------------------------------
   现状：全站 7 种按钮类名并存（mini-button 90 / button-row 30 / btn 28 /
   secondary-button 20 / primary-button 21 / ghost-button 13 / danger-button 8），
   各自定义高度/内边距/圆角，导致同屏按钮大小不一。
   方案：建立 .btn 五态基座（尺寸×语义正交），旧类名作为别名映射，
         保持既有 HTML/JS 不动即可自动获得统一外观。
   ========================================================================== */

/* —— 基座：所有按钮共享的高度/内边距/圆角/字重 —— */
.btn,
.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.mini-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, transform .08s ease;
  min-height: var(--ctl-md);
  padding: 0 var(--sp-4);
}

/* —— 语义：主操作（全屏至多一个）—— */
.btn-primary,
.primary-button {
  background: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
  /* 保留历史胶囊形：首页主 CTA 的既有视觉识别，不被 token 层改写 */
  border-radius: var(--r-full);
}
.btn-primary:hover,
.primary-button:hover { background: var(--c-brand-dk); border-color: var(--c-brand-dk); }

/* —— 次操作 —— */
.btn-secondary,
.secondary-button {
  background: var(--c-bg);
  color: var(--c-brand);
  border-color: var(--c-brand);
}
.btn-secondary:hover,
.secondary-button:hover { background: rgba(15, 118, 110, .06); }

/* —— 幽灵按钮：低强调动作 —— */
.btn-ghost,
.ghost-button {
  background: transparent;
  color: var(--c-text-2);
  border-color: var(--c-border);
}
.btn-ghost:hover,
.ghost-button:hover { background: var(--c-bg-2); color: var(--c-text); }

/* —— 危险操作：删除/撤销/理赔否决 —— */
.btn-danger,
.danger-button {
  background: transparent;
  color: var(--c-danger);
  border-color: rgba(185, 28, 28, .35);
}
.btn-danger:hover,
.danger-button:hover { background: rgba(185, 28, 28, .07); border-color: var(--c-danger); }

/* —— 尺寸变体：与语义正交，可自由组合 —— */
.btn-sm,
.mini-button {
  min-height: var(--ctl-sm);
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
}
.btn-lg {
  min-height: var(--ctl-lg);
  padding: 0 var(--sp-6);
  font-size: var(--fs-md);
  border-radius: var(--r-lg);
}
.btn-block { display: flex; width: 100%; }

/* —— 状态：禁用 / 加载 / 按下 —— */
.btn:disabled,
.primary-button:disabled,
.secondary-button:disabled,
.ghost-button:disabled,
.danger-button:disabled,
.mini-button:disabled,
.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* 加载态：所有按钮统一用这个类，不再各写各的 spinner */
.btn.is-loading,
.primary-button.is-loading,
.mini-button.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after,
.primary-button.is-loading::after,
.mini-button.is-loading::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #fff;
  animation: ui-spin .7s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* 按下反馈：统一 1px 下沉，避免各处 scale 变形不一致 */
.btn:active:not(:disabled),
.primary-button:active:not(:disabled),
.mini-button:active:not(:disabled),
.secondary-button:active:not(:disabled) {
  transform: translateY(1px);
}

/* —— 按钮组：统一间距与换行，杜绝参差 —— */
.button-row,
.btn-row,
.actions,
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.button-row > *,
.btn-row > * { margin: 0; }   /* 抵消历史 margin-right 造成的间距翻倍 */

/* —— 全宽提交按钮：移动端主转化路径 —— */
@media (max-width: 640px) {
  .btn-primary:not(.btn-block),
  .checkout-submit,
  .submit-button {
    width: 100%;
    min-height: var(--ctl-lg);
  }
}


/* ==========================================================================
   Toast / Modal 样式（配合 ui-kit.js）
   ========================================================================== */

.dw-toast-host {
  position: fixed;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
  max-width: min(360px, calc(100vw - 32px));
}
.dw-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-bg);
  border: 1px solid var(--c-border-2);
  border-left: 3px solid var(--c-info);
  box-shadow: var(--sh-md);
  font-size: var(--fs-base);
  color: var(--c-text);
  cursor: pointer;
  animation: dw-toast-in .18s ease-out;
  transition: opacity .18s ease, transform .18s ease;
}
.dw-toast.is-out { opacity: 0; transform: translateX(12px); }
.dw-toast__icon {
  flex: none;
  width: 18px; height: 18px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: #fff;
  background: var(--c-info);
  margin-top: 1px;
}
.dw-toast__text { flex: 1; line-height: 1.45; word-break: break-word; }
.dw-toast--success { border-left-color: var(--c-brand); }
.dw-toast--success .dw-toast__icon { background: var(--c-brand); }
.dw-toast--error { border-left-color: var(--c-danger); }
.dw-toast--error .dw-toast__icon { background: var(--c-danger); }
.dw-toast--warn { border-left-color: var(--c-gold, #c2872c); }
.dw-toast--warn .dw-toast__icon { background: #c2872c; }

@keyframes dw-toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

.dw-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(15, 31, 43, .42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: dw-fade .15s ease-out;
}
.dw-modal {
  background: var(--c-bg);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: var(--sp-5);
  width: min(440px, 100%);
  animation: dw-pop .16s ease-out;
}
.dw-modal__title { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.dw-modal__body   { margin: 0 0 var(--sp-5); color: var(--c-text-2); line-height: 1.55; }
.dw-modal__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }

@keyframes dw-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes dw-pop  { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }

@media (max-width: 640px) {
  .dw-toast-host { top: var(--sp-3); right: var(--sp-3); left: var(--sp-3); max-width: none; }
}