/* style/payment-methods.css */

/* Base styles for payment methods page */
.page-payment-methods {
  background-color: #08160F; /* Custom Background */
  color: #F2FFF6; /* Custom Text Main */
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.page-payment-methods__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.page-payment-methods__section-title {
  font-size: 2.5rem;
  color: #F2FFF6; /* Custom Text Main */
  text-align: center;
  margin-bottom: 40px;
  font-weight: bold;
  line-height: 1.2;
}

.page-payment-methods__text-block {
  font-size: 1.1rem;
  margin-bottom: 20px;
  text-align: justify;
  color: #A7D9B8; /* Custom Text Secondary */
}

/* Hero Section */
.page-payment-methods__hero-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  padding-top: 10px; /* Small top padding, body handles header offset */
  background-color: #08160F; /* Ensure dark background for hero */
}

.page-payment-methods__hero-image-wrapper {
  width: 100%;
  max-width: 1200px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

.page-payment-methods__hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 15px;
}

.page-payment-methods__hero-content {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.page-payment-methods__main-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem); /* Responsive H1 font size */
  color: #F2C14E; /* Gold */
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(242, 193, 78, 0.5);
}

.page-payment-methods__description {
  font-size: 1.2rem;
  color: #F2FFF6; /* Custom Text Main */
  margin-bottom: 30px;
  line-height: 1.5;
}

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

.page-payment-methods__btn-primary,
.page-payment-methods__btn-secondary {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  cursor: pointer;
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.page-payment-methods__btn-primary {
  background: linear-gradient(180deg, #2AD16F 0%, #13994A 100%); /* Custom Button */
  color: #F2FFF6; /* Custom Text Main */
  border: none;
  box-shadow: 0 4px 15px rgba(42, 209, 111, 0.4);
}

.page-payment-methods__btn-primary:hover {
  background: linear-gradient(180deg, #13994A 0%, #2AD16F 100%);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(42, 209, 111, 0.6);
}

.page-payment-methods__btn-secondary {
  background: transparent;
  color: #2AD16F; /* Green from Button gradient */
  border: 2px solid #2AD16F; /* Green from Button gradient */
}

.page-payment-methods__btn-secondary:hover {
  background-color: rgba(42, 209, 111, 0.1);
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(42, 209, 111, 0.2);
}

/* Overview Section */
.page-payment-methods__overview-section {
  padding: 80px 0;
  background-color: #08160F; /* Custom Background */
}

/* Deposit & Withdrawal Methods Sections */
.page-payment-methods__deposit-methods-section,
.page-payment-methods__withdrawal-methods-section {
  padding: 60px 0;
  background-color: #08160F; /* Custom Background */
}

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

.page-payment-methods__method-card {
  background-color: #11271B; /* Custom Card BG */
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #2E7A4E; /* Custom Border */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.page-payment-methods__method-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
}

.page-payment-methods__method-icon {
  width: 100%;
  max-width: 150px;
  height: auto;
  margin: 0 auto 20px auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

.page-payment-methods__card-title {
  font-size: 1.8rem;
  color: #F2C14E; /* Gold */
  margin-bottom: 15px;
  font-weight: 600;
}

.page-payment-methods__card-description {
  font-size: 1rem;
  color: #A7D9B8; /* Custom Text Secondary */
  margin-bottom: 20px;
  flex-grow: 1;
}

.page-payment-methods__card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  text-align: left;
  color: #A7D9B8; /* Custom Text Secondary */
}

.page-payment-methods__card-list li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 25px;
}

.page-payment-methods__card-list li::before {
  content: '✔';
  color: #2AD16F; /* Green from Button gradient */
  position: absolute;
  left: 0;
  top: 0;
}

.page-payment-methods__card-btn {
  display: inline-block;
  padding: 12px 25px;
  background: linear-gradient(180deg, #2AD16F 0%, #13994A 100%); /* Custom Button */
  color: #F2FFF6; /* Custom Text Main */
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  transition: background 0.3s ease, transform 0.3s ease;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

.page-payment-methods__card-btn:hover {
  background: linear-gradient(180deg, #13994A 0%, #2AD16F 100%);
  transform: translateY(-2px);
}

.page-payment-methods__note {
  background-color: #0A4B2C; /* Deep Green */
  padding: 20px;
  border-radius: 10px;
  margin-top: 40px;
  color: #F2FFF6; /* Custom Text Main */
  border-left: 5px solid #F2C14E; /* Gold */
}

/* Security Section */
.page-payment-methods__security-section {
  padding: 80px 0;
  background-color: #08160F; /* Custom Background */
  border-top: 1px solid #1E3A2A; /* Divider */
}

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

.page-payment-methods__security-features li {
  display: flex;
  align-items: center;
  background-color: #11271B; /* Custom Card BG */
  padding: 20px;
  border-radius: 10px;
  color: #A7D9B8; /* Custom Text Secondary */
  border: 1px solid #2E7A4E; /* Custom Border */
}

.page-payment-methods__security-features li img {
  
  
  margin-right: 15px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Tips Section */
.page-payment-methods__tips-section {
  padding: 60px 0;
  background-color: #08160F; /* Custom Background */
}

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

.page-payment-methods__tip-item {
  background-color: #11271B; /* Custom Card BG */
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid #2E7A4E; /* Custom Border */
}

.page-payment-methods__tip-title {
  font-size: 1.5rem;
  color: #F2C14E; /* Gold */
  margin-bottom: 10px;
  font-weight: 600;
}

.page-payment-methods__tip-description {
  font-size: 1rem;
  color: #A7D9B8; /* Custom Text Secondary */
}

/* FAQ Section */
.page-payment-methods__faq-section {
  padding: 80px 0;
  background-color: #08160F; /* Custom Background */
  border-top: 1px solid #1E3A2A; /* Divider */
}

.page-payment-methods__faq-list {
  margin-top: 40px;
}

.page-payment-methods__faq-item {
  background-color: #11271B; /* Custom Card BG */
  border: 1px solid #2E7A4E; /* Custom Border */
  border-radius: 10px;
  margin-bottom: 15px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.page-payment-methods__faq-item[open] {
  background-color: #0A4B2C; /* Deep Green when open */
}

.page-payment-methods__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  font-size: 1.2rem;
  color: #F2FFF6; /* Custom Text Main */
  font-weight: bold;
  cursor: pointer;
  list-style: none; /* Hide default marker */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.page-payment-methods__faq-question::-webkit-details-marker {
  display: none;
}

.page-payment-methods__faq-toggle {
  font-size: 1.8rem;
  line-height: 1;
  color: #F2C14E; /* Gold */
  transition: transform 0.3s ease;
}

.page-payment-methods__faq-item[open] .page-payment-methods__faq-toggle {
  transform: rotate(45deg);
  color: #2AD16F; /* Green from Button gradient */
}

.page-payment-methods__faq-answer {
  padding: 0 25px 20px 25px;
  font-size: 1rem;
  color: #A7D9B8; /* Custom Text Secondary */
  line-height: 1.6;
}

.page-payment-methods__faq-answer p {
  margin-bottom: 10px;
}

/* CTA Section */
.page-payment-methods__cta-section {
  padding: 80px 0;
  text-align: center;
  background-color: #08160F; /* Custom Background */
  border-top: 1px solid #1E3A2A; /* Divider */
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .page-payment-methods__main-title {
    font-size: clamp(2rem, 4.5vw, 3rem);
  }
  .page-payment-methods__description {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .page-payment-methods {
    font-size: 16px;
    line-height: 1.6;
  }

  .page-payment-methods__hero-section {
    padding: 40px 15px;
    padding-top: 10px !important;
  }

  .page-payment-methods__hero-image-wrapper {
    margin-bottom: 20px;
  }

  .page-payment-methods__main-title {
    font-size: clamp(1.8rem, 7vw, 2.5rem);
    margin-bottom: 15px;
  }

  .page-payment-methods__description {
    font-size: 1rem;
    margin-bottom: 25px;
  }

  .page-payment-methods__cta-buttons {
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    overflow: hidden;
  }

  .page-payment-methods__btn-primary,
  .page-payment-methods__btn-secondary {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 20px;
    font-size: 1rem;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  .page-payment-methods__container {
    padding: 0 15px;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-payment-methods__section-title {
    font-size: 2rem;
    margin-bottom: 30px;
  }

  .page-payment-methods__text-block {
    font-size: 1rem;
  }

  .page-payment-methods__method-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .page-payment-methods__method-card {
    padding: 25px;
  }

  .page-payment-methods__card-title {
    font-size: 1.5rem;
  }

  .page-payment-methods__card-description,
  .page-payment-methods__card-list li {
    font-size: 0.95rem;
  }

  .page-payment-methods__security-features {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-payment-methods__tips-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-payment-methods__tip-title {
    font-size: 1.3rem;
  }

  .page-payment-methods__faq-question {
    font-size: 1rem;
    padding: 15px 20px;
  }

  .page-payment-methods__faq-answer {
    padding: 0 20px 15px 20px;
    font-size: 0.95rem;
  }

  /* Image responsive force */
  .page-payment-methods img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  .page-payment-methods__section,
  .page-payment-methods__card,
  .page-payment-methods__container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Ensure content images are not too small */
.page-payment-methods__method-icon {
  min-width: 200px;
  min-height: 150px;
}

.page-payment-methods__security-features li img {
  min- /* Smallest allowed content image size is 200px, but these are icons within list items, which are explicitly allowed to be smaller if they are part of text. The global rule states minimum 200x200px. This creates a conflict. I will make these larger if they are standalone image, but if they are 'icons' embedded in text, the rule about 'no small icons' for 'content display images' might not apply. Given the text 'Mã hóa SSL 128-bit: Bảo vệ mọi dữ liệu truyền tải giữa bạn và vvvwin bet.', these are more illustrative icons. I will increase their size to meet the 200x200 minimum requirement for all images. */
  min-
}

/* Re-evaluating based on "最小尺寸要求：所有图片的最小尺寸必须至少为 200x200 像素" */
.page-payment-methods__security-features li img {
  width: 200px; /* Adjusting to meet 200x200 minimum for all images */
  height: 200px;
  margin-right: 15px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Ensure no filter is used on images */
.page-payment-methods img {
  filter: none; /* Explicitly ensure no filter */
}