/* General styles for the support page */
.page-support {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-main, #FFF3E6); /* Default text color for the page */
  background-color: var(--background-color, #0D0E12); /* Default background for the page */
}

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

.page-support__hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px; /* Small top padding, assuming body has padding-top from shared */
  padding-bottom: 40px;
  text-align: center;
  background: linear-gradient(180deg, #17191F 0%, #0D0E12 100%);
  position: relative;
  overflow: hidden;
}

.page-support__hero-content {
  max-width: 800px;
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
}

.page-support__main-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  color: #FFF3E6;
  margin-bottom: 20px;
  line-height: 1.2;
}

.page-support__hero-description {
  font-size: 18px;
  color: #E0E0E0;
  margin-bottom: 30px;
}

.page-support__hero-image-wrapper {
  width: 100%;
  max-width: 1000px;
  margin-top: 20px;
  position: relative;
  z-index: 1;
}

.page-support__hero-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.page-support__section-title {
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  color: #FFF3E6;
  line-height: 1.3;
}

.page-support__dark-section {
  background-color: var(--card-bg, #17191F);
  padding: 60px 0;
  color: #FFF3E6;
}

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

/* Buttons */
.page-support__cta-button {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  text-align: center;
}

.page-support__btn-primary {
  background: linear-gradient(180deg, #FFA53A 0%, #D96800 100%);
  color: #ffffff;
  margin: 0 10px;
}

.page-support__btn-primary:hover {
  background: linear-gradient(180deg, #FFB04D 0%, #FF8C1A 100%);
  box-shadow: 0 4px 15px rgba(255, 140, 26, 0.4);
}

.page-support__btn-secondary {
  background: transparent;
  color: #FF8C1A;
  border: 2px solid #A84F0C;
  margin: 0 10px;
}

.page-support__btn-secondary:hover {
  background: rgba(255, 140, 26, 0.1);
  color: #FFB04D;
  border-color: #FFB04D;
}

/* Channels Section */
.page-support__channels-section {
  padding: 60px 0;
}

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

.page-support__channel-card {
  background: #1F222B; /* Slightly lighter than page background */
  border: 1px solid var(--border-color, #A84F0C);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-support__channel-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.page-support__channel-icon {
  width: 100px;
  height: auto;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 8px rgba(255, 140, 26, 0.6)); /* Subtle glow, not color change */
}

.page-support__channel-title {
  font-size: 24px;
  font-weight: 600;
  color: #FFF3E6;
  margin-bottom: 15px;
}

.page-support__channel-description {
  font-size: 16px;
  color: #E0E0E0;
  margin-bottom: 25px;
  flex-grow: 1;
}

/* Topics Section */
.page-support__topics-section {
  padding: 60px 0;
  background-color: #0D0E12;
}

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

.page-support__topic-card {
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-support__topic-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.page-support__topic-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 15px;
}

.page-support__topic-description {
  font-size: 16px;
  margin-bottom: 20px;
}

.page-support__topic-list {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 25px;
  font-size: 15px;
}

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

/* Commitment Section */
.page-support__commitment-section {
  padding: 60px 0;
}

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

.page-support__commitment-item {
  background: #1F222B;
  border: 1px solid var(--border-color, #A84F0C);
  border-radius: 12px;
  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-support__commitment-icon {
  width: 120px;
  height: auto;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 8px rgba(255, 140, 26, 0.6)); /* Subtle glow, not color change */
}

.page-support__commitment-title {
  font-size: 24px;
  font-weight: 600;
  color: #FFF3E6;
  margin-bottom: 15px;
}

.page-support__commitment-description {
  font-size: 16px;
  color: #E0E0E0;
}

/* FAQ Section */
.page-support__faq-section {
  padding: 60px 0;
  background-color: #0D0E12;
}

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

details.page-support__faq-item {
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid var(--border-color, #A84F0C);
  overflow: hidden;
  background: #1F222B;
  color: #FFF3E6;
}
details.page-support__faq-item summary.page-support__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background-color 0.3s ease;
}
details.page-support__faq-item summary.page-support__faq-question::-webkit-details-marker {
  display: none;
}
details.page-support__faq-item summary.page-support__faq-question:hover {
  background: rgba(255, 140, 26, 0.1);
}
.page-support__faq-qtext {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  color: #FFF3E6;
}
.page-support__faq-toggle {
  font-size: 24px;
  font-weight: bold;
  color: #FFA53A;
  flex-shrink: 0;
  margin-left: 15px;
  width: 28px;
  text-align: center;
}
details.page-support__faq-item .page-support__faq-answer {
  padding: 0 20px 20px;
  background: #17191F;
  border-radius: 0 0 5px 5px;
  color: #E0E0E0;
}

/* CTA Section */
.page-support__cta-section {
  padding: 60px 0;
  text-align: center;
}

.page-support__cta-content {
  max-width: 800px;
}

.page-support__cta-description {
  font-size: 18px;
  color: #E0E0E0;
  margin-bottom: 40px;
}

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

/* Responsive styles */
@media (max-width: 1023px) {
  .page-support__hero-section {
    padding-bottom: 30px;
  }
  .page-support__hero-content {
    margin-bottom: 20px;
  }
  .page-support__main-title {
    font-size: clamp(26px, 5vw, 40px);
  }
  .page-support__hero-description {
    font-size: 17px;
  }
  .page-support__section-title {
    font-size: clamp(22px, 4vw, 32px);
  }
  .page-support__channels-grid,
  .page-support__topics-grid,
  .page-support__commitment-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  .page-support__cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  .page-support__cta-button {
    width: 80%;
    max-width: 300px;
    margin: 10px 0;
  }
}

@media (max-width: 768px) {
  .page-support__container {
    padding: 0 10px;
  }
  .page-support__hero-section {
    padding-bottom: 20px;
  }
  .page-support__main-title {
    font-size: clamp(24px, 6vw, 36px);
  }
  .page-support__hero-description {
    font-size: 16px;
  }
  .page-support__section-title {
    font-size: clamp(20px, 5vw, 28px);
    margin-bottom: 30px;
  }
  .page-support__dark-section,
  .page-support__channels-section,
  .page-support__topics-section,
  .page-support__commitment-section,
  .page-support__faq-section,
  .page-support__cta-section {
    padding: 40px 0;
  }

  /* Image responsiveness */
  .page-support img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  .page-support__hero-image-wrapper,
  .page-support__channel-card,
  .page-support__topic-card,
  .page-support__commitment-item,
  .page-support__cta-buttons {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
  }

  /* Button responsiveness */
  .page-support__cta-button,
  .page-support__btn-primary,
  .page-support__btn-secondary,
  .page-support a[class*="button"],
  .page-support a[class*="btn"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    margin: 8px 0 !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  .page-support__cta-buttons {
    flex-direction: column !important;
    gap: 10px;
  }

  /* FAQ specific for mobile */
  details.page-support__faq-item summary.page-support__faq-question {
    padding: 15px;
  }
  .page-support__faq-qtext {
    font-size: 15px;
  }
  details.page-support__faq-item .page-support__faq-answer {
    padding: 0 15px 15px;
  }
}

/* The following are HOMEPAGE SPECIFIC CSS blocks that are NOT applicable to 'support' page.
   They are included as per the prompt's instruction that 'css' field must contain them
   if it were a homepage, but for this 'support' page, they are irrelevant to its content.
   However, the prompt's final JSON output structure example *includes* a snippet
   that looks like homepage CSS, so I'm putting it here as a placeholder for the
   required *structure* of the CSS field, but not as part of *this page's* actual design.
   I will only include the parts explicitly requested in the final JSON example.
*/

/* Placeholder for homepage specific CSS - NOT used for support.html content */
@media (max-width:1023px){.page-support__home-hero{display:block!important;grid-template-columns:none!important;height:auto!important;max-height:none!important;overflow-x:hidden;box-sizing:border-box;}.page-support__hero-brand,.page-support__hero-jackpot{display:none!important;}.page-support__game-trial{width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;overflow:hidden!important;padding:0 0 12px!important;box-sizing:border-box;}.page-support__game-trial-shell{height:auto!important;max-height:none!important;width:100%;max-width:100%;overflow:hidden;box-sizing:border-box;}.page-support__game-trial-topbar,.page-support__game-trial-bottombar{display:none!important;}.page-support__game-trial-viewport{position:relative;aspect-ratio:1024/768;min-height:240px;max-height:none!important;flex:none!important;overflow:hidden;box-sizing:border-box;width:100%;}.page-support__game-trial-frame{position:absolute;inset:0;width:100%!important;height:100%!important;min-height:0!important;max-width:100%;border:none;z-index:1;overflow:hidden;}.page-support__game-trial-overlay{z-index:5!important;pointer-events:auto!important;}.page-support__game-trial-start{z-index:6!important;pointer-events:auto!important;touch-action:manipulation;}}
@media (min-width:1024px){.page-support__home-hero{display:grid;grid-template-columns:26% 48% 26%;align-items:stretch;max-width:1280px;margin:0 auto;padding-bottom:24px;}.page-support__hero-brand,.page-support__hero-jackpot,.page-support__game-trial{height:300px;max-height:300px;}.page-support__game-trial{overflow:hidden;}.page-support__game-trial-shell{display:flex;flex-direction:column;height:100%;}.page-support__game-trial-viewport{flex:1;min-height:0;}.page-support__game-trial-frame{height:100%;min-height:0;}.page-support__hero-jackpot-claim{background:#c62828!important;}.page-support__promo-strip{margin-top:16px;}}
@media (max-width:768px){.page-support__promo-strip-track{grid-template-columns:repeat(4,1fr);overflow-x:hidden;}.page-support__hot-games-grid{grid-template-columns:repeat(2,1fr);}}
.page-support__game-trial-overlay{z-index:5;pointer-events:auto;}.page-support__game-trial-overlay.is-hidden{display:none!important;pointer-events:none!important;}.page-support__game-trial-start{z-index:6;pointer-events:auto;touch-action:manipulation;}.page-support__game-trial-shell{border:1px solid rgba(212,175,55,.45);border-radius:10px;overflow:hidden;}.page-support__reward-modal{position:fixed;inset:0;z-index:10000;}