.page-promotions {
  color: #ffffff; /* Default text color for dark body background */
  background-color: #0a0a0a; /* Ensure consistency with body background */
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.page-promotions__hero-section {
  position: relative;
  width: 100%;
  height: 600px; /* Adjust as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  padding-top: var(--header-offset, 120px); /* Fixed header spacing */
  box-sizing: border-box;
}

.page-promotions__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.page-promotions__hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 20px;
}

.page-promotions__hero-title {
  font-size: 3.5em;
  color: #FFD700;
  margin-bottom: 20px;
  line-height: 1.2;
}

.page-promotions__hero-description {
  font-size: 1.3em;
  color: #f0f0f0;
  margin-bottom: 30px;
}

.page-promotions__cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.page-promotions__btn-primary,
.page-promotions__btn-secondary {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  transition: all 0.3s ease;
  box-sizing: border-box;
  max-width: 100%; /* For mobile responsiveness */
  white-space: normal; /* Allow text wrapping */
  word-wrap: break-word;
}

.page-promotions__btn-primary {
  background-color: #FFD700;
  color: #1A2B4C;
  border: 2px solid #FFD700;
}

.page-promotions__btn-primary:hover {
  background-color: #e6c200;
  border-color: #e6c200;
}

.page-promotions__btn-secondary {
  background-color: transparent;
  color: #FFD700;
  border: 2px solid #FFD700;
}

.page-promotions__btn-secondary:hover {
  background-color: #FFD700;
  color: #1A2B4C;
}

.page-promotions__section {
  padding: 60px 20px;
  text-align: center;
}

.page-promotions__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.page-promotions__section-title {
  font-size: 2.5em;
  color: #FFD700;
  margin-bottom: 20px;
  line-height: 1.2;
}

.page-promotions__section-description {
  font-size: 1.1em;
  color: #f0f0f0;
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.page-promotions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-promotions__card {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.page-promotions__card:hover {
  transform: translateY(-10px);
}

.page-promotions__card-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 20px;
  min-width: 200px; /* Enforce min size */
  min-height: 200px; /* Enforce min size */
  object-fit: cover;
}

.page-promotions__card-title {
  font-size: 1.5em;
  color: #FFD700;
  margin-bottom: 15px;
}

.page-promotions__card-text {
  color: #f0f0f0;
  margin-bottom: 20px;
  flex-grow: 1;
}

.page-promotions__card-link {
  display: inline-block;
  background-color: #1A2B4C;
  color: #FFD700;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.page-promotions__card-link:hover {
  background-color: #0e1729;
}

.page-promotions__dark-bg {
  background-color: #1A2B4C;
  color: #ffffff;
}

.page-promotions__steps-list {
  list-style: none;
  padding: 0;
  max-width: 800px;
  margin: 40px auto;
  text-align: left;
}

.page-promotions__step-item {
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 5px solid #FFD700;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  font-size: 1.1em;
  color: #f0f0f0;
}

.page-promotions__step-item strong {
  color: #FFD700;
}

.page-promotions__cta-center {
  margin-top: 40px;
}

.page-promotions__vip-program .page-promotions__container {
  display: flex;
  align-items: center;
  gap: 40px;
  text-align: left;
}

.page-promotions__vip-content {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: center;
  text-align: left;
}

.page-promotions__vip-image {
  flex: 1;
  max-width: 50%;
  height: auto;
  border-radius: 10px;
  min-width: 200px; /* Enforce min size */
  min-height: 200px; /* Enforce min size */
  object-fit: cover;
}

.page-promotions__vip-text {
  flex: 1;
  color: #f0f0f0;
}

.page-promotions__vip-text p {
  margin-bottom: 20px;
}

.page-promotions__faq-section {
  background-color: #0e1729;
  padding: 60px 20px;
}

.page-promotions__faq-list {
  max-width: 800px;
  margin: 40px auto;
  text-align: left;
}

.page-promotions__faq-item {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
}

.page-promotions__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  background-color: #1A2B4C;
  color: #FFD700;
  font-size: 1.2em;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.page-promotions__faq-question:hover {
  background-color: #0e1729;
}

.page-promotions__faq-toggle {
  font-size: 1.5em;
  line-height: 1;
  transition: transform 0.3s ease;
}

.page-promotions__faq-item.active .page-promotions__faq-toggle {
  transform: rotate(45deg);
}

.page-promotions__faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  transition: max-height 0.3s ease, padding 0.3s ease;
  color: #f0f0f0;
  background-color: rgba(255, 255, 255, 0.03);
}

.page-promotions__faq-item.active .page-promotions__faq-answer {
  max-height: 1000px !important; /* Sufficiently large */
  padding: 20px;
}

.page-promotions__why-choose {
  background-color: #1A2B4C;
}

.page-promotions__advantage-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-promotions__advantage-item {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-promotions__advantage-icon {
  width: 200px; /* Must be >= 200px */
  height: 200px; /* Must be >= 200px */
  min-width: 200px;
  min-height: 200px;
  object-fit: contain;
  margin-bottom: 15px;
}

.page-promotions__advantage-heading {
  font-size: 1.3em;
  color: #FFD700;
  margin-bottom: 10px;
}

.page-promotions__advantage-item p {
  color: #f0f0f0;
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .page-promotions__hero-title {
    font-size: 2.8em;
  }
  .page-promotions__hero-description {
    font-size: 1.1em;
  }
  .page-promotions__section-title {
    font-size: 2em;
  }
  .page-promotions__vip-content {
    flex-direction: column;
    text-align: center;
  }
  .page-promotions__vip-image {
    max-width: 80%;
  }
}

@media (max-width: 768px) {
  .page-promotions {
    font-size: 16px;
    line-height: 1.6;
  }
  .page-promotions__hero-section {
    height: 500px;
    padding-top: var(--header-offset, 120px) !important; /* Ensure mobile header spacing */
  }
  .page-promotions__hero-title {
    font-size: 2.2em;
  }
  .page-promotions__hero-description {
    font-size: 1em;
  }
  .page-promotions__cta-buttons {
    flex-direction: column;
    gap: 15px;
  }
  .page-promotions__btn-primary,
  .page-promotions__btn-secondary {
    width: 100% !important; /* Force full width on mobile */
    max-width: 100% !important;
    padding: 12px 20px;
    font-size: 1em;
  }
  .page-promotions__section {
    padding: 40px 15px;
  }
  .page-promotions__section-title {
    font-size: 1.8em;
  }
  .page-promotions__section-description {
    font-size: 0.95em;
  }
  .page-promotions__grid {
    grid-template-columns: 1fr;
  }
  .page-promotions__card {
    padding: 20px;
  }
  .page-promotions__vip-image {
    max-width: 100%;
  }
  .page-promotions__faq-question {
    font-size: 1.1em;
    padding: 15px;
  }
  .page-promotions__faq-answer {
    padding: 15px;
  }
  .page-promotions__advantage-list {
    grid-template-columns: 1fr;
  }

  /* Mobile image responsiveness */
  .page-promotions img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  .page-promotions__section,
  .page-promotions__card,
  .page-promotions__container,
  .page-promotions__vip-content,
  .page-promotions__cta-buttons,
  .page-promotions__advantage-item {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  .page-promotions__hero-section {
    background-position: top center;
  }
  .page-promotions__hero-content {
    padding: 0 15px;
  }
  .page-promotions__hero-section .page-promotions__overlay {
    background: rgba(0, 0, 0, 0.7);
  }
}

/* Ensure content images are not smaller than 200px in display */
.page-promotions__card-image, 
.page-promotions__vip-image {
    width: auto; /* Allow natural width */
    height: auto; /* Allow natural height */
    min-width: 200px; 
    min-height: 200px; 
    max-width: 100%; /* Ensure responsiveness */
    object-fit: cover;
}

/* Advantage icons are small, but the prompt says NO images under 200x200. */
/* I will set them to 200x200 in placeholder, and then scale down for display if needed, but the CSS will still need to ensure they are at least 200x200 for 'content images'. This is a direct conflict. The prompt says '禁止所有小图标', and '任何宽度或高度小于200像素的图片'. Then it says '图片用途：所有图片都应该是内容展示图片，而不是装饰性小图标'. This implies 'advantage_icon' should be a content image of min 200x200. I will ensure the CSS *display* width/height for these are also at least 200px, to be absolutely safe, even if they are logically 'icons'. This will make them visually large. */
.page-promotions__advantage-icon {
  width: 200px; /* Must be >= 200px */
  height: 200px; /* Must be >= 200px */
  min-width: 200px;
  min-height: 200px;
  object-fit: contain;
  margin-bottom: 15px;
}

/* Color contrast fixes */
.page-promotions__dark-bg {
  background-color: #1A2B4C;
  color: #ffffff;
}
.page-promotions__faq-question {
  background-color: #1A2B4C;
  color: #FFD700;
}
.page-promotions__btn-primary {
  background-color: #FFD700;
  color: #1A2B4C;
}
.page-promotions__btn-secondary {
  background-color: transparent;
  color: #FFD700;
  border: 2px solid #FFD700;
}
.page-promotions__btn-secondary:hover {
  background-color: #FFD700;
  color: #1A2B4C;
}