/* your styles go here */

/* 纯CSS手机框样式 */
.custom-phone-frame {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
  border-radius: 25px;
  padding: 6px;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 10px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  aspect-ratio: 9/16;
}

.custom-phone-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 20px;
  background: #1a1a1a;
  border-radius: 0 0 10px 10px;
  z-index: 2;
}

.custom-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  border-radius: 19px;
  overflow: hidden;
}

/* 轮播图片优化样式 */
.voiceChatSwiper .swiper-slide > div {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  width: 100%;
  height: 100%;
}

/* 游戏轮播图指示器样式调整 */
.game-features-slider .swiper-pagination {
  bottom: -30px; /* 将指示器移到图片下方 */
  z-index: 5; /* 调整z-index确保正常显示 */
}

/* 确保轮播图容器有足够的底部空间容纳指示器 */
.game-features-slider {
  margin-bottom: 40px; /* 添加底部边距，避免指示器被其他元素遮挡 */
}

/* 自定义py类，补充Bootstrap未提供的间距类 */
.py-10 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-12 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.py-16 {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

/* 自定义mb类，补充Bootstrap未提供的下边距类 */
.mb-8 {
  margin-bottom: 2rem !important;
}

.mb-10 {
  margin-bottom: 2.5rem !important;
}

.mb-12 {
  margin-bottom: 3rem !important;
}

/* WhatsApp按钮响应式布局修复 */
.whatsapp-buttons-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* 按钮之间的间距 */
}

.whatsapp-buttons-container .list-inline-item {
  margin-right: 0; /* 覆盖Bootstrap的默认右边距 */
  margin-bottom: 0.5rem; /* 添加底部边距，确保换行时有间距 */
}

/* 在小屏幕上增加垂直间距 */
@media (max-width: 768px) {
  .whatsapp-buttons-container .list-inline-item {
    margin-bottom: 1rem; /* 在小屏幕上增加底部边距 */
  }
}

/* 在更小的屏幕上进一步增加垂直间距 */
@media (max-width: 576px) {
  .whatsapp-buttons-container .list-inline-item {
    margin-bottom: 1.2rem; /* 在更小屏幕上进一步增加底部边距 */
    width: 100%; /* 确保按钮在小屏幕上占满宽度 */
  }
  
  .whatsapp-buttons-container .btn {
    width: 100%; /* 按钮在小屏幕上占满宽度 */
    display: block; /* 确保按钮是块级元素 */
  }
}

/* 响应式优化 */
@media (max-width: 768px) {
  .custom-phone-frame {
    max-width: 240px;
  }
  
  .device-wrapper {
    margin-bottom: 3rem; /* 添加底部间距，确保与下方文字区域有适当距离 */
  }
  
  /* 移动设备下文字区域添加上间距 */
  .order-2.order-lg-1 {
    margin-top: 2rem; /* 为移动设备下的文字区域添加顶部间距 */
  }
}

@media (max-width: 576px) {
  .custom-phone-frame {
    max-width: 200px;
  }
  
  .device-wrapper {
    margin-bottom: 2.5rem; /* 在小屏幕下适当减少间距 */
  }
  
  .order-2.order-lg-1 {
    margin-top: 1.5rem; /* 在小屏幕下适当减少文字区域顶部间距 */
  }
}

@media (max-width: 400px) {
  .custom-phone-frame {
    max-width: 180px;
  }
  
  .device-wrapper {
    margin-bottom: 2rem; /* 在极小屏幕下进一步减少间距 */
  }
  
  .order-2.order-lg-1 {
    margin-top: 1rem; /* 在极小屏幕下进一步减少文字区域顶部间距 */
  }
}