.page-payment-methods-guide {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333333; /* Default text color for light body background */
  background-color: #FFFFFF; /* Ensure consistency with body background */
}

.page-payment-methods-guide__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-payment-methods-guide__section {
  padding: 60px 0;
}

.page-payment-methods-guide__light-bg {
  background-color: #FFFFFF;
  color: #333333;
}

.page-payment-methods-guide__dark-section {
  background-color: #017439;
  color: #ffffff;
}

.page-payment-methods-guide__main-title {
  font-size: 2.8em;
  color: #ffffff;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.2;
}

.page-payment-methods-guide__description {
  font-size: 1.1em;
  color: #f0f0f0;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px auto;
}

.page-payment-methods-guide__section-title {
  font-size: 2.2em;
  text-align: center;
  margin-bottom: 40px;
  color: inherit;
}

.page-payment-methods-guide__sub-heading {
  font-size: 1.5em;
  margin-top: 40px;
  margin-bottom: 20px;
  color: inherit;
}

.page-payment-methods-guide__text-center {
  text-align: center;
}

/* Buttons */
.page-payment-methods-guide__cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.page-payment-methods-guide__btn-primary,
.page-payment-methods-guide__btn-secondary,
.page-payment-methods-guide__btn-tertiary {
  display: inline-block;
  padding: 12px 25px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
}

.page-payment-methods-guide__btn-primary {
  background-color: #C30808; /* Register/Login color */
  color: #FFFF00; /* Register/Login font color */
  border: 2px solid #C30808;
}

.page-payment-methods-guide__btn-primary:hover {
  background-color: #a00606;
  border-color: #a00606;
}

.page-payment-methods-guide__btn-secondary {
  background-color: #FFFFFF;
  color: #017439;
  border: 2px solid #017439;
}

.page-payment-methods-guide__btn-secondary:hover {
  background-color: #f0f0f0;
  color: #005a2b;
  border-color: #005a2b;
}

.page-payment-methods-guide__btn-tertiary {
  background-color: transparent;
  color: #017439;
  border: 1px solid #017439;
  padding: 8px 15px;
  font-size: 0.9em;
}

.page-payment-methods-guide__btn-tertiary:hover {
  background-color: #017439;
  color: #ffffff;
}

.page-payment-methods-guide__btn-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  margin-top: 30px;
}

/* Video Section */
.page-payment-methods-guide__hero-section {
  position: relative;
  padding-top: var(--header-offset, 120px); /* Fixed header offset */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 600px; /* Adjust as needed */
  text-align: center;
}

.page-payment-methods-guide__video-wrapper {
  position: relative;
  width: 100%;
  max-width: 1000px; /* Max width for video */
  margin: 40px auto;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.page-payment-methods-guide__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

/* Grid for Cards */
.page-payment-methods-guide__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

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

.page-payment-methods-guide__card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333333;
}

.page-payment-methods-guide__card.page-payment-methods-guide__dark-bg {
  background-color: #017439;
  color: #ffffff;
}

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

.page-payment-methods-guide__card-title {
  font-size: 1.6em;
  margin-bottom: 15px;
  color: inherit;
}

.page-payment-methods-guide__card p {
  margin-bottom: 20px;
  color: inherit;
}

.page-payment-methods-guide__list {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
  text-align: left;
  width: 100%;
}

.page-payment-methods-guide__list li {
  margin-bottom: 10px;
  padding-left: 25px;
  position: relative;
  color: inherit;
}

.page-payment-methods-guide__list li::before {
  content: '✔';
  color: #017439;
  position: absolute;
  left: 0;
  top: 0;
}

.page-payment-methods-guide__card.page-payment-methods-guide__dark-bg .page-payment-methods-guide__list li::before {
  color: #FFFF00; /* Yellow checkmark on dark cards */
}

/* Step by step guide */
.page-payment-methods-guide__step-by-step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 40px;
}

.page-payment-methods-guide__step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 30px;
  color: #ffffff;
}

.page-payment-methods-guide__step-icon {
  background-color: #C30808;
  color: #FFFF00;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 20px;
}

.page-payment-methods-guide__step-title {
  font-size: 1.8em;
  margin-bottom: 15px;
  color: #ffffff;
}

.page-payment-methods-guide__step-item p {
  margin-bottom: 20px;
  color: #f0f0f0;
}

.page-payment-methods-guide__step-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 20px;
  min-width: 200px;
  min-height: 200px;
  object-fit: cover;
}

/* Security List */
.page-payment-methods-guide__security-list {
  list-style: none;
  padding: 0;
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.page-payment-methods-guide__security-list li {
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 1.1em;
  color: #333333;
  background-color: #f8f8f8;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.page-payment-methods-guide__security-list li img {
  margin-right: 15px;
  flex-shrink: 0;
  min-
  min-
   /* HTML width/height attributes will be for display area, not source. Min 200x200 for content images. These are icon-like, so they must be larger than 200x200 or removed. For now, I'll set them to 48x48 as per prompt, but this violates the 200x200 rule for content images. The prompt has conflicting instructions for 'small icons' vs 'min 200x200 for all images'. Assuming 'small icons' are allowed for decorative lists, but will note this conflict. If small icons are truly forbidden, these should be removed or replaced with larger content images. The prompt says '禁止所有小图标...任何宽度或高度小于200像素的图片', which means these 48x48 images are forbidden. I must remove them or make them larger. I will remove them and use text descriptions for the security list, or replace with larger illustrative images. Let's replace with larger illustrative images if possible based on id. But the id is 'security_ssl', 'security_policy', 'security_monitoring', 'security_kyc' which implies icons. I will instead use a large placeholder image if the prompt strictly forbids small icons. The prompt says '最小尺寸要求：所有图片的最小尺寸必须至少为 200x200 像素'. So these should be at least 200x200. I'll make them 200x200 and adjust the layout. */
  width: 200px;
  height: 200px;
  object-fit: contain;
}

/* FAQ Section */
.page-payment-methods-guide__faq-section {
  background-color: #017439;
  color: #ffffff;
}

.page-payment-methods-guide__faq-list {
  margin-top: 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

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

.page-payment-methods-guide__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  font-size: 1.2em;
  font-weight: bold;
  color: #ffffff;
}

.page-payment-methods-guide__faq-question:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

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

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

.page-payment-methods-guide__faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  transition: max-height 0.3s ease, padding 0.3s ease;
  color: #f0f0f0;
}

.page-payment-methods-guide__faq-item.active .page-payment-methods-guide__faq-answer {
  max-height: 1000px !important; /* Sufficiently large to show content */
  padding: 15px 20px 20px 20px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .page-payment-methods-guide__main-title {
    font-size: 2.2em;
  }
  .page-payment-methods-guide__section-title {
    font-size: 1.8em;
  }
}

@media (max-width: 768px) {
  .page-payment-methods-guide {
    font-size: 16px;
    line-height: 1.6;
  }
  .page-payment-methods-guide__hero-section {
    min-height: 400px;
    padding: 30px 0;
    padding-top: var(--header-offset, 120px) !important; /* Ensure mobile offset */
  }
  .page-payment-methods-guide__main-title {
    font-size: 1.8em;
  }
  .page-payment-methods-guide__description {
    font-size: 1em;
  }
  .page-payment-methods-guide__section-title {
    font-size: 1.5em;
  }
  .page-payment-methods-guide__cta-buttons {
    flex-direction: column;
    gap: 15px;
  }
  .page-payment-methods-guide__btn-primary,
  .page-payment-methods-guide__btn-secondary,
  .page-payment-methods-guide__btn-tertiary {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  .page-payment-methods-guide__video-wrapper {
    padding-bottom: 56.25% !important; /* Ensure aspect ratio */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 20px auto !important;
    overflow: hidden !important;
  }
  .page-payment-methods-guide__video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  .page-payment-methods-guide__card {
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  .page-payment-methods-guide__grid,
  .page-payment-methods-guide__promo-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .page-payment-methods-guide__step-item {
    padding: 20px;
  }
  .page-payment-methods-guide__step-title {
    font-size: 1.5em;
  }
  .page-payment-methods-guide__security-list {
    grid-template-columns: 1fr;
  }
  .page-payment-methods-guide__security-list li {
    flex-direction: column;
    text-align: center;
  }
  .page-payment-methods-guide__security-list li img {
    margin-right: 0;
    margin-bottom: 10px;
  }
  .page-payment-methods-guide__container {
    padding-left: 15px;
    padding-right: 15px;
  }
  .page-payment-methods-guide__section,
  .page-payment-methods-guide__card,
  .page-payment-methods-guide__container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  .page-payment-methods-guide img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
}