/* style/support.css */

/* Base styles for the page content */
.page-support {
  color: #ffffff; /* Body background is dark (#0a0a0a), so use light text */
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.page-support__dark-bg {
  background-color: #26A9E0; /* Using brand primary color for dark sections */
  color: #ffffff;
}

.page-support__light-bg {
  background-color: #ffffff;
  color: #333333;
}

.page-support__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 */
  overflow: hidden;
  background-color: #1a1a1a; /* Dark background for hero section */
}

.page-support__hero-image-wrapper {
  width: 100%;
  max-width: 1920px;
  margin-bottom: 30px;
}

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

.page-support__hero-content {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  z-index: 1;
}

.page-support__main-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem); /* Responsive font size */
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #ffffff;
}

.page-support__hero-description {
  font-size: 1.1rem;
  margin-bottom: 30px;
  color: #f0f0f0;
}

.page-support__cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.page-support__btn-primary,
.page-support__btn-secondary,
.page-support__btn-tertiary,
.page-support a[class*="button"],
.page-support a[class*="btn"] {
  display: inline-block;
  padding: 12px 25px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

.page-support__btn-primary {
  background-color: #26A9E0;
  color: #ffffff;
  border: 2px solid #26A9E0;
}

.page-support__btn-primary:hover {
  background-color: #1e87b7;
  border-color: #1e87b7;
}

.page-support__btn-secondary {
  background-color: #ffffff;
  color: #26A9E0;
  border: 2px solid #26A9E0;
}

.page-support__btn-secondary:hover {
  background-color: #e0e0e0;
  color: #1e87b7;
  border-color: #1e87b7;
}

.page-support__btn-tertiary {
  background-color: transparent;
  color: #26A9E0;
  border: 1px solid #26A9E0;
  padding: 8px 15px;
  font-size: 0.9rem;
}

.page-support__btn-tertiary:hover {
  background-color: #26A9E0;
  color: #ffffff;
}

.page-support__btn-center {
  display: block;
  margin: 30px auto 0 auto;
  width: fit-content;
}

.page-support__btn-large {
  padding: 15px 30px;
  font-size: 1.1rem;
}

.page-support__section {
  padding: 50px 0;
}

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

.page-support__section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  color: #ffffff;
}

.page-support__text-block {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #f0f0f0;
  text-align: justify;
}

.page-support__sub-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #26A9E0;
}

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

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

.page-support__grid-item {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.page-support__card {
  background-color: rgba(255, 255, 255, 0.08); /* Slightly lighter for cards */
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #ffffff; /* Light text for dark background */
}

.page-support__dark-card {
  background-color: rgba(0, 0, 0, 0.3); /* Even darker for cards in dark sections */
  color: #ffffff;
}

.page-support__card-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #26A9E0;
}

.page-support__ordered-list {
  list-style: decimal;
  margin-left: 20px;
  margin-bottom: 20px;
  color: #f0f0f0;
}

.page-support__ordered-list li {
  margin-bottom: 8px;
}

.page-support__support-channels .page-support__card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* FAQ Section */
.page-support__faq-section {
  background-color: #1a1a1a; /* Dark background */
}

.page-support__faq-list {
  margin-top: 30px;
}

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

.page-support__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 25px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: background-color 0.3s ease;
}

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

.page-support__faq-qtext {
  flex-grow: 1;
  color: #26A9E0;
}

.page-support__faq-toggle {
  font-size: 1.5rem;
  line-height: 1;
  margin-left: 15px;
  transition: transform 0.3s ease;
  color: #ffffff;
}

.page-support__faq-item[open] .page-support__faq-toggle {
  transform: rotate(45deg);
}

.page-support__faq-answer {
  padding: 15px 25px;
  font-size: 0.95rem;
  color: #f0f0f0;
  line-height: 1.6;
}

/* Details element specific styling */
.page-support__faq-item summary::-webkit-details-marker {
  display: none;
}

.page-support__faq-item summary {
  list-style: none;
}

/* Security Commitment Section */
.page-support__security-commitment {
  background-color: #26A9E0;
}

.page-support__security-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
  text-align: center;
}

.page-support__feature-item {
  background-color: rgba(255, 255, 255, 0.15);
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.page-support__feature-icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 15px;
  min-width: 100px; /* Ensure minimum size */
  min-height: 100px; /* Ensure minimum size */
}

.page-support__feature-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #ffffff;
}

/* Diverse Experience Section */
.page-support__diverse-experience {
  background-color: #1a1a1a; /* Dark background */
}

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

.page-support__game-card {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.page-support__game-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  margin-bottom: 15px;
  min-width: 200px;
  min-height: 150px;
}

.page-support__game-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #26A9E0;
  padding: 0 15px;
}

.page-support__game-card .page-support__text-block {
  font-size: 0.95rem;
  color: #f0f0f0;
  padding: 0 15px;
  flex-grow: 1;
}

.page-support__contact-cta {
  background-color: #1a1a1a;
  padding: 80px 0;
}

.page-support__text-center {
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .page-support__hero-section {
    padding: 40px 15px;
  }

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

  .page-support__main-title {
    font-size: clamp(2rem, 5vw, 2.8rem);
  }

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

  .page-support__section-title {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
  }

  .page-support__container {
    padding: 0 15px;
  }

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

  .page-support__faq-answer {
    padding: 12px 20px;
    font-size: 0.9rem;
  }
}

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

  .page-support__hero-section {
    padding: 30px 15px;
    padding-top: 10px !important;
  }

  .page-support__hero-image-wrapper {
    margin-bottom: 15px;
  }

  .page-support__main-title {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
  }

  .page-support__hero-description {
    font-size: 0.95rem;
  }

  .page-support__section-title {
    font-size: clamp(1.5rem, 5vw, 2rem);
    margin-bottom: 30px;
  }

  .page-support__cta-buttons {
    flex-direction: column;
    gap: 10px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 15px;
  }

  .page-support__btn-primary,
  .page-support__btn-secondary,
  .page-support__btn-tertiary,
  .page-support a[class*="button"],
  .page-support a[class*="btn"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .page-support__grid-two-columns,
  .page-support__grid-three-columns,
  .page-support__security-features,
  .page-support__game-types {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-support__container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-support__card {
    padding: 20px;
  }

  .page-support__card-image {
    height: 150px;
  }

  .page-support__faq-question {
    font-size: 0.95rem;
  }

  .page-support__faq-answer {
    font-size: 0.85rem;
  }

  /* Image responsiveness */
  .page-support img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Content area images CSS size check */
  .page-support__feature-icon {
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
  }
  .page-support__game-image {
    min-width: 200px;
    min-height: 150px;
  }
  
  /* Ensure all content area images are at least 200px (except icons if allowed, but not here) */
  /* Feature icons are smaller, but they are explicit 'icons' (which were disallowed, but if they were to be present, they would need special handling). Given the strict rule 'any width or height less than 200 pixels', these feature icons violate it. I must adjust them to be at least 200x200 or remove them if they cannot meet the size requirement. Let's make them 200x200. */
  .page-support__feature-icon {
    width: 200px;
    height: 200px;
    min-width: 200px;
    min-height: 200px;
  }

}

@media (max-width: 480px) {
  .page-support__hero-section {
    padding: 20px 10px;
    padding-top: 10px !important;
  }

  .page-support__main-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
  }

  .page-support__section-title {
    font-size: clamp(1.4rem, 6vw, 1.8rem);
  }

  .page-support__container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .page-support__btn-primary,
  .page-support__btn-secondary,
  .page-support__btn-large {
    font-size: 1rem;
    padding: 10px 15px;
  }
}

/* Ensure content area images are at least 200px */
.page-support__hero-image { width: 100%; height: auto; min-width: 200px; min-height: 200px;}
.page-support__card-image { width: 100%; height: auto; min-width: 200px; min-height: 200px;}
.page-support__feature-icon { width: 200px; height: 200px; min-width: 200px; min-height: 200px;}
.page-support__game-image { width: 100%; height: auto; min-width: 200px; min-height: 200px;}

/* No filter properties to change image colors */
.page-support img {
  filter: none; /* Explicitly ensure no filters are applied */
}