/**
 * Sakura 收银页布局覆盖（我方维护，不修改合作方 assets）
 * 收窄卡片宽度（约红框比例）、保持上下高度，并适配手机 / 平板。
 */

.payment-page .payment-container {
  width: 100%;
  max-width: min(28rem, 92vw);
  margin-left: auto;
  margin-right: auto;
}

.payment-page .payment-cards {
  width: 100%;
  gap: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.payment-page .payment-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  aspect-ratio: auto;
  min-height: 300px;
  padding: 3rem 2rem 2.85rem;
  background-size: 100% 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* 信用卡：偏暖色；加密货币：偏青绿（与 USDT/USDC 气质接近） */
.payment-page .payment-cards .payment-card:first-child {
  --pay-accent-shadow: rgba(210, 72, 88, 0.28);
  --pay-accent-ring: rgba(210, 72, 88, 0.55);
  --pay-accent-fill: rgba(255, 236, 238, 0.55);
}

.payment-page .payment-cards .payment-card:last-child {
  --pay-accent-shadow: rgba(32, 140, 125, 0.28);
  --pay-accent-ring: rgba(32, 140, 125, 0.55);
  --pay-accent-fill: rgba(232, 248, 245, 0.55);
}

@media (hover: hover) {
  .payment-page .payment-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 12px 28px var(--pay-accent-shadow),
      0 0 0 2px var(--pay-accent-ring),
      inset 0 0 100px var(--pay-accent-fill);
  }
}

/* 手机无 hover，用按下态体现颜色 */
.payment-page .payment-card:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: 0.08s;
  box-shadow:
    0 8px 20px var(--pay-accent-shadow),
    0 0 0 2px var(--pay-accent-ring),
    inset 0 0 120px var(--pay-accent-fill);
}

.payment-page .payment-card:focus {
  outline: none;
}

.payment-page .payment-cards .payment-card:first-child:focus-visible {
  outline: 3px solid rgba(210, 72, 88, 0.65);
  outline-offset: 4px;
}

.payment-page .payment-cards .payment-card:last-child:focus-visible {
  outline: 3px solid rgba(32, 140, 125, 0.65);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .payment-page .payment-card {
    transition: none;
  }

  .payment-page .payment-card:hover,
  .payment-page .payment-card:active {
    transform: none;
  }
}

.payment-page .card-logos,
.payment-page .crypto-logos {
  margin-bottom: 2rem;
}

.payment-page .divider {
  width: 88%;
  margin-bottom: 2rem;
}

.payment-page .card-content {
  max-width: 100%;
}

.payment-page .card-title {
  font-size: 1.75rem;
  line-height: 1.35;
  white-space: nowrap;
}

.payment-page .card-subtitle {
  font-size: 1rem;
  line-height: 1.5;
}

/* 平板竖屏 / 小屏平板 */
@media (min-width: 481px) and (max-width: 1024px) {
  .payment-page .payment-container {
    max-width: min(26rem, 88vw);
  }

  .payment-page .payment-card {
    min-height: 280px;
    padding: 2.75rem 1.75rem 2.65rem;
  }

  .payment-page .card-title {
    font-size: 1.65rem;
  }
}

/* 手机 */
@media (max-width: 480px) {
  .payment-page {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .payment-page .payment-container {
    max-width: 100%;
  }

  .payment-page .payment-cards {
    gap: 1.75rem;
  }

  .payment-page .payment-card {
    min-height: 220px;
    padding: 2rem 1.25rem 2.25rem;
  }

  .payment-page .card-logos[data-v-2f7c1586],
  .payment-page .crypto-logos[data-v-2f7c1586],
  .payment-page .card-logos,
  .payment-page .crypto-logos {
    gap: 1rem !important;
    margin-bottom: 1.25rem;
  }

  .payment-page .card-logo {
    height: 28px;
  }

  .payment-page .crypto-logo {
    width: 52px;
    height: 52px;
  }

  .payment-page .divider {
    width: 90%;
    margin-bottom: 1.25rem;
  }

  .payment-page .card-title {
    font-size: 1.2rem;
    white-space: normal;
    line-height: 1.3;
  }

  .payment-page .card-subtitle {
    font-size: 0.875rem;
  }
}

/* 超窄屏 */
@media (max-width: 360px) {
  .payment-page .payment-card {
    min-height: 200px;
    padding: 1.75rem 1rem 2rem;
  }

  .payment-page .card-title {
    font-size: 1.1rem;
  }
}