/* style/payment-methods.css */

/* Body background is light from shared.css #f8f9fa, so main text should be dark. */
/* However, the custom colors specify a very dark background #08160F and light text #F2FFF6. */
/* I will apply the custom background color to the main container and sections to ensure the specified color scheme is used, overriding the shared body background visual effect for the main content area. */

.page-payment-methods {
  background-color: #08160F; /* Very Dark Green background */
  color: #F2FFF6; /* Light text for readability on dark background */
  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 {
  padding: 60px 0;
  background-color: #08160F; /* Ensure sections also have the dark background */
  color: #F2FFF6; /* Light text */
}

.page-payment-methods__hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-top: 10px; /* Small top padding, body handles --header-offset */
  padding-bottom: 60px;
  background-color: #08160F;
}

.page-payment-methods__hero-image-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.page-payment-methods__hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2; /* Subtle overlay to make text readable */
  display: block;
}

.page-payment-methods__hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 20px;
  box-sizing: border-box;
}

.page-payment-methods__main-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem); /* Responsive font size */
  color: #F2FFF6; /* Light text */
  margin-bottom: 20px;
  font-weight: bold;
  line-height: 1.2;
}

.page-payment-methods__hero-description {
  font-size: 1.2rem;
  color: #A7D9B8; /* Secondary light text */
  margin-bottom: 40px;
}

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

.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;
  transition: all 0.3s ease;
  white-space: normal;
  word-wrap: break-word;
  box-sizing: border-box;
  max-width: 100%;
}

.page-payment-methods__btn-primary {
  background: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
  color: #F2FFF6; /* Light text on green button */
  border: none;
}

.page-payment-methods__btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.page-payment-methods__btn-secondary {
  background-color: transparent;
  color: #2AD16F; /* Green text on transparent button */
  border: 2px solid #2AD16F;
}

.page-payment-methods__btn-secondary:hover {
  background-color: #2AD16F;
  color: #F2FFF6; /* Light text on green button */
}

.page-payment-methods__section-title {
  font-size: clamp(2rem, 4vw, 2.8rem); /* Responsive font size */
  color: #F2FFF6; /* Light text */
  margin-bottom: 30px;
  text-align: center;
  font-weight: bold;
  position: relative;
  padding-bottom: 15px;
}

.page-payment-methods__section-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: #2AD16F; /* Green underline */
  border-radius: 2px;
}

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

.page-payment-methods__image-card {
  background-color: #11271B; /* Card Background */
  border-radius: 10px;
  overflow: hidden;
  margin: 40px auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  max-width: 1000px;
  border: 1px solid #2E7A4E; /* Border color */
}

.page-payment-methods__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.page-payment-methods__list {
  list-style: none;
  padding: 0;
  margin: 30px 0;
}

.page-payment-methods__list-item {
  background-color: #11271B; /* Card Background */
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  border-left: 5px solid #2AD16F; /* Green accent */
}

.page-payment-methods__list-title {
  font-size: 1.5rem;
  color: #F2FFF6; /* Light text */
  margin-top: 0;
  margin-bottom: 10px;
}

.page-payment-methods__list-description {
  font-size: 1rem;
  color: #A7D9B8; /* Secondary light text */
  line-height: 1.5;
}

.page-payment-methods__faq-section {
  background-color: #0A4B2C; /* Deep Green background */
}

.page-payment-methods__faq-list {
  max-width: 900px;
  margin: 40px auto 0 auto;
}

.page-payment-methods__faq-item {
  background-color: #11271B; /* Card Background */
  border-radius: 8px;
  margin-bottom: 15px;
  border: 1px solid #2E7A4E; /* Border color */
  overflow: hidden;
}

.page-payment-methods__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  color: #F2FFF6; /* Light text */
  background-color: #11271B;
  list-style: none; /* For details/summary */
  -webkit-touch-callout: none; /* Disable callout on iOS */
  -webkit-user-select: none; /* Disable text selection on iOS */
  -khtml-user-select: none; /* Disable text selection on Konqueror */
  -moz-user-select: none; /* Disable text selection on Firefox */
  -ms-user-select: none; /* Disable text selection on Internet Explorer/Edge */
  user-select: none; /* Standard property */
}

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

.page-payment-methods__faq-qtext {
  flex-grow: 1;
}

.page-payment-methods__faq-toggle {
  font-size: 1.8rem;
  line-height: 1;
  margin-left: 15px;
  color: #2AD16F; /* Green toggle icon */
}

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

.page-payment-methods__support-cta {
  text-align: center;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .page-payment-methods__container {
    padding: 0 15px;
  }

  .page-payment-methods__section {
    padding: 40px 0;
  }

  .page-payment-methods__hero-section {
    padding-bottom: 40px;
  }

  .page-payment-methods__main-title {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }

  .page-payment-methods__hero-description {
    font-size: 1rem;
  }

  .page-payment-methods__cta-buttons {
    flex-direction: column;
    gap: 15px;
  }

  .page-payment-methods__btn-primary,
  .page-payment-methods__btn-secondary {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 20px;
    font-size: 1rem;
  }

  .page-payment-methods__section-title {
    font-size: clamp(1.8rem, 6vw, 2.2rem);
  }

  .page-payment-methods__text-block,
  .page-payment-methods__list-description,
  .page-payment-methods__faq-answer p {
    font-size: 0.95rem;
  }

  .page-payment-methods__list-item {
    padding: 20px;
  }

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

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

  .page-payment-methods__faq-toggle {
    font-size: 1.5rem;
  }

  /* Mobile image responsiveness */
  .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,
  .page-payment-methods__image-card {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden !important; /* Ensure no horizontal scroll */
  }
  
  /* Override specific section padding for mobile */
  .page-payment-methods__deposit-methods .page-payment-methods__container,
  .page-payment-methods__withdrawal-methods .page-payment-methods__container,
  .page-payment-methods__security-measures .page-payment-methods__container,
  .page-payment-methods__faq-section .page-payment-methods__container,
  .page-payment-methods__support-cta .page-payment-methods__container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-payment-methods__hero-section {
    padding-top: 10px !important; /* body already handles --header-offset */
  }
}