/* 主页样式 */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --background-color: #121212;
  --card-background: #1e1e1e;
  --text-color: #ffffff;
  --border-color: #2d2d2d;
  --hover-color: #0056b3;
  --free-color: #343a40;
  --pro-color: #007bff;
  --enterprise-color: #343a40;
  --wechat-color: #07c160;
  --alipay-color: #1677ff;
}

/* 英雄区块样式 */
.hero-section {
  text-align: center;
  padding: 3rem 1rem;
  margin-bottom: 2rem;
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  color: black;
}

.hero-subtitle {
  font-size: 1.2rem;
  color: black;
  max-width: 600px;
  margin: 0 auto;
}

/* 定价容器样式 */
.pricing-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.pricing-plans {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

/* 价格卡片样式 */
.price-card {
  flex: 1;
  min-width: 300px;
  max-width: 350px;
  background-color: var(--card-background);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 2rem;
}

.price-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/* 计划标题样式 */
.plan-header {
  margin-bottom: 1.5rem;
}

.plan-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-color);
}

.plan-desc {
  font-size: 0.9rem;
  color: var(--text-color);
  line-height: 1.5;
}

/* 价格样式 */
.plan-price {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.price {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-color);
}

.period {
  font-size: 0.9rem;
  color: var(--text-color);
  margin-top: 0.5rem;
}

/* 按钮样式 */
.plan-action {
  margin-bottom: 2rem;
}

.btn {
  display: inline-block;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  -webkit-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 5px;
  transition: all 0.15s ease-in-out;
  width: 100%;
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background-color: var(--hover-color);
  border-color: var(--hover-color);
}

.btn-outline {
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 特性列表样式 */
.plan-features {
  flex-grow: 1;
}

.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.feature-icon {
  font-size: 1.2rem;
  margin-right: 0.75rem;
  color: var(--success-color);
}

.feature-text {
  font-size: 0.95rem;
  color: var(--text-color);
}

/* 特定计划样式 */
.free-plan {
  border-top: 4px solid var(--free-color);
}

.pro-plan {
  border-top: 4px solid var(--pro-color);
  position: relative;
  z-index: 2;
  transform: scale(1.05);
}

.enterprise-plan {
  border-top: 4px solid var(--enterprise-color);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .pricing-plans {
    flex-direction: column;
    align-items: center;
  }

  .price-card {
    max-width: 100%;
    margin-bottom: 2rem;
  }

  .pro-plan {
    transform: none;
  }
}

@media (max-width: 576px) {
  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .price-card {
    padding: 1.5rem;
  }
}

/* 支付选项样式 */
.payment-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border-radius: 10px;
  transition: all 0.3s ease;
  background-color: rgba(255, 255, 255, 0.05);
}

.payment-option:hover {
  transform: translateY(-5px);
}

.payment-icon {
  display: block;
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 0.5rem;
}

.wechat-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2307c160'%3E%3Cpath d='M8.686 13.595c-1.493 0-2.349-.855-2.349-1.914 0-1.058.856-1.914 2.349-1.914 1.493 0 2.349.856 2.349 1.914s-.856 1.914-2.349 1.914zm-4.407-3.422c0-2.658 2.657-4.777 5.719-4.777 3.062 0 5.719 2.12 5.719 4.777 0 2.658-2.657 4.777-5.719 4.777-3.062 0-5.719-2.12-5.719-4.777zm10.516 5.984c-1.493 0-2.348-.856-2.348-1.914 0-1.058.855-1.914 2.348-1.914 1.494 0 2.349.856 2.349 1.914 0 1.059-.856 1.914-2.349 1.914zm1.313-5.984c0-2.658 2.657-4.777 5.719-4.777 3.062 0 5.719 2.12 5.719 4.777 0 2.658-2.657 4.777-5.719 4.777-3.062 0-5.719-2.119-5.719-4.777z'/%3E%3C/svg%3E");
}

.alipay-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231677ff'%3E%3Cpath d='M24 10.1428V10.8571C24 15.8056 17.7004 18.8532 12.2016 20V6H23.0312C23.5645 7.2881 23.9015 8.6785 24 10.1428ZM9.6 6H0V20H9.6V6ZM18.6084 10.2853C18.6084 10.2853 18.7679 10.5714 15.9912 13.3365C15.9912 13.3365 14.3952 14.7738 13.1976 15.4802C13.1976 15.4802 12.4992 15.9048 12.9576 16.4365C12.9576 16.4365 13.2792 16.9603 14.32 16.9603C14.32 16.9603 16.128 16.9762 17.5344 15.5627L17.776 15.2897L15.1896 13.623V13.6071L14.72 14.0754C14.72 14.0754 16.0776 15.2897 16.448 15.5627C16.448 15.5627 16.72 15.8357 16.32 15.8357C16.32 15.8357 15.2296 15.8357 14.4416 15.8357C14.4416 15.8357 13.7192 15.8516 13.7512 15.2579C13.7512 15.2579 13.7832 14.8333 14.4096 14.4286C14.4096 14.4286 16.152 13.2143 16.9 12.6746C16.9 12.6746 17.632 12.1508 17.696 11.8778C17.696 11.8778 17.8875 11.4919 17.3571 11.4762C17.3571 11.4762 16.8987 11.4762 16.5771 11.4762H13.6V12.4643H15.9788C15.9788 12.4643 16.4192 12.4643 16.1456 12.8174C16.1456 12.8174 15.7211 13.2898 14.5456 14.0754C14.5456 14.0754 13.9971 14.4524 13.866 14.0754C13.866 14.0754 13.6964 13.7857 14.0983 13.4762C14.0983 13.4762 15.7211 12.2262 16.3596 11.2063C16.3596 11.2063 16.5932 10.8175 16.1935 10.8175H13.6V9.8174H17.0688C17.0688 9.8174 17.7943 9.8016 17.7943 10.3016C17.7943 10.3016 17.8903 10.6667 17.3412 11.2063C17.3412 11.2063 16.9632 11.6111 16.4568 12.0595V12.0754L19.2 13.7857L19.3275 13.4762C19.3275 13.4762 19.8 12.2262 19.9215 11.2063C19.9215 11.2063 20.0271 10.2976 20.1144 9.8174H21.84C21.84 9.8174 21.1384 13.4762 18.6084 15.5627V15.5786C18.6084 15.5786 16.4848 17.3333 13.9352 17.3333C13.9352 17.3333 12.5767 17.4048 11.6832 16.5516C11.6832 16.5516 10.8471 15.9365 11.2576 14.7222C11.2576 14.7222 11.5792 13.8452 13.1272 13.0159L13.1113 13C13.1113 13 13.5057 12.8254 13.6 12.7777V11.4762H11.092C11.092 11.4762 10.6016 11.4762 10.6016 10.8175V9.8174H13.6V8.3096H11.3912C11.3912 8.3096 10.9168 8.3096 10.9168 7.6667V6.6667H13.6V4.8492H15.4V6.6667H18.3488C18.3488 6.6667 18.8551 6.6667 18.8551 7.3096V8.3096H15.4V9.8174H18.6084C18.6084 9.8174 19.68 9.8174 19.68 10.2853H18.6084Z'/%3E%3C/svg%3E");
}

/* 订单确认样式 */
.order-summary .card {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--border-color);
}

.order-summary .card-header {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--border-color);
  color: var(--text-color);
}

.order-summary .card-body {
  color: var(--text-color);
}

/* 二维码支付样式 */
.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  width: 220px;
  margin: 0 auto;
}

#qrCodeContainer {
  width: 180px;
  height: 180px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

#qrCodeContainer img {
  max-width: 100%;
  max-height: 100%;
}

.payment-status {
  margin-top: 20px;
}

/* 支付成功样式 */
.success-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 修复模态框相关样式 */
.modal-content {
  background-color: var(--card-background);
  color: var(--text-color);
}

.modal-header, .modal-footer {
  border-color: var(--border-color);
}

.form-control {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--border-color);
  color: var(--text-color);
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.form-control:focus {
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}