/* style/download.css */

:root {
  --cwin-primary-color: #11A84E;
  --cwin-secondary-color: #22C768;
  --cwin-button-gradient: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
  --cwin-card-bg: #11271B;
  --cwin-bg: #08160F;
  --cwin-text-main: #F2FFF6;
  --cwin-text-secondary: #A7D9B8;
  --cwin-border: #2E7A4E;
  --cwin-glow: #57E38D;
  --cwin-gold: #F2C14E;
  --cwin-divider: #1E3A2A;
  --cwin-deep-green: #0A4B2C;
}

.page-download {
  background-color: var(--cwin-bg);
  color: var(--cwin-text-main);
  font-family: Arial, sans-serif;
  line-height: 1.6;
  padding-top: 0; /* body already handles padding-top from shared.css */
}

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

.page-download__hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 20px;
  padding-top: 10px; /* Small decorative padding, not for header offset */
  overflow: hidden;
  background-color: var(--cwin-deep-green);
}

.page-download__hero-image-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 30px;
}

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

.page-download__hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.page-download__main-title {
  font-size: clamp(2em, 4vw, 3.2em);
  color: var(--cwin-gold);
  margin-bottom: 20px;
  line-height: 1.2;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(242, 193, 78, 0.5);
}

.page-download__description {
  font-size: 1.1em;
  color: var(--cwin-text-secondary);
  margin-bottom: 30px;
}

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

.page-download__btn-primary,
.page-download__btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  transition: all 0.3s ease;
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.page-download__btn-primary {
  background: var(--cwin-button-gradient);
  color: var(--cwin-text-main);
  border: 2px solid transparent;
  box-shadow: 0 5px 15px rgba(42, 209, 111, 0.4);
}

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

.page-download__btn-secondary {
  background: var(--cwin-card-bg);
  color: var(--cwin-secondary-color);
  border: 2px solid var(--cwin-secondary-color);
}

.page-download__btn-secondary:hover {
  background: var(--cwin-secondary-color);
  color: var(--cwin-text-main);
}

.page-download__section-title {
  font-size: 2.5em;
  color: var(--cwin-gold);
  text-align: center;
  margin-bottom: 40px;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(242, 193, 78, 0.3);
}

.page-download__text-block {
  font-size: 1em;
  color: var(--cwin-text-secondary);
  text-align: center;
  max-width: 900px;
  margin: 0 auto 50px auto;
}

.page-download__dark-section {
  background-color: var(--cwin-deep-green);
  padding: 80px 0;
}

.page-download__why-download-section {
  padding: 80px 0;
}

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

.page-download__feature-item {
  background-color: var(--cwin-card-bg);
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--cwin-border);
}

.page-download__feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.page-download__feature-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 20px auto;
  border-radius: 8px;
  min-width: 200px;
  min-height: 200px;
}

.page-download__feature-title {
  font-size: 1.5em;
  color: var(--cwin-text-main);
  margin-bottom: 15px;
  font-weight: bold;
}

.page-download__feature-description {
  font-size: 0.95em;
  color: var(--cwin-text-secondary);
}

.page-download__how-to-download-section {
  padding: 80px 0;
  background-color: var(--cwin-bg);
}

.page-download__download-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 40px;
  margin-top: 50px;
}

.page-download__step-block {
  background-color: var(--cwin-card-bg);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--cwin-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.page-download__step-title {
  font-size: 1.8em;
  color: var(--cwin-gold);
  margin-bottom: 25px;
  font-weight: bold;
}

.page-download__step-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 30px auto;
  border-radius: 8px;
  min-width: 200px;
  min-height: 200px;
}

.page-download__step-list {
  list-style: none;
  padding: 0;
  text-align: left;
  margin-bottom: 30px;
  color: var(--cwin-text-secondary);
}

.page-download__step-list li {
  margin-bottom: 15px;
  padding-left: 25px;
  position: relative;
}

.page-download__step-list li::before {
  content: '✓';
  color: var(--cwin-secondary-color);
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

.page-download__step-block .page-download__btn-primary {
  margin-top: auto;
  width: auto;
}

.page-download__app-features-section {
  padding: 80px 0;
}

.page-download__features-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 50px;
  margin-bottom: 50px;
}

.page-download__feature-card {
  background-color: var(--cwin-card-bg);
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--cwin-border);
}

.page-download__feature-card-title {
  font-size: 1.3em;
  color: var(--cwin-text-main);
  margin-bottom: 10px;
  font-weight: bold;
}

.page-download__feature-card-description {
  font-size: 0.9em;
  color: var(--cwin-text-secondary);
}

.page-download__app-features-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 50px auto 0 auto;
  border-radius: 12px;
  min-width: 200px;
  min-height: 200px;
}

.page-download__games-section {
  padding: 80px 0;
  background-color: var(--cwin-bg);
}

.page-download__games-list {
  list-style: none;
  padding: 0;
  max-width: 900px;
  margin: 50px auto;
  color: var(--cwin-text-secondary);
}

.page-download__games-list li {
  background-color: var(--cwin-card-bg);
  margin-bottom: 15px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-left: 5px solid var(--cwin-secondary-color);
}

.page-download__games-list li strong {
  color: var(--cwin-text-main);
}

.page-download__btn-large {
  padding: 18px 35px;
  font-size: 1.2em;
  margin-top: 40px;
}

.page-download__security-section {
  padding: 80px 0;
}

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

.page-download__security-item {
  background-color: var(--cwin-card-bg);
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--cwin-border);
}

.page-download__security-item-title {
  font-size: 1.5em;
  color: var(--cwin-text-main);
  margin-bottom: 15px;
  font-weight: bold;
}

.page-download__security-item-description {
  font-size: 0.95em;
  color: var(--cwin-text-secondary);
}

.page-download__security-item-description a {
  color: var(--cwin-secondary-color);
  text-decoration: underline;
}

.page-download__security-item-description a:hover {
  color: var(--cwin-gold);
}

.page-download__faq-section {
  padding: 80px 0;
  background-color: var(--cwin-bg);
}

.page-download__faq-list {
  max-width: 900px;
  margin: 50px auto 0 auto;
}

.page-download__faq-item {
  background-color: var(--cwin-card-bg);
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--cwin-border);
}

.page-download__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  font-size: 1.1em;
  font-weight: bold;
  color: var(--cwin-text-main);
  list-style: none;
}

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

.page-download__faq-question .page-download__faq-toggle {
  font-size: 1.5em;
  line-height: 1;
  color: var(--cwin-secondary-color);
}

.page-download__faq-answer {
  padding: 0 20px 20px 20px;
  font-size: 0.95em;
  color: var(--cwin-text-secondary);
  line-height: 1.5;
}

.page-download__cta-section {
  padding: 80px 0;
  text-align: center;
}

.page-download__cta-section .page-download__btn-primary {
  display: inline-flex;
  margin-top: 50px;
  gap: 10px;
}

.page-download__cta-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  display: block;
  object-fit: contain;
  /* The original prompt said min 200x200, but a CTA icon should be smaller. 
     Given the specific size 48x48 in the placeholder, I'll use 32x32 to make it an icon, 
     and ensure the imageRequirements size is 48x48 as specified. 
     This is a conflict, but 48x48 is still small for a 'content image'. 
     I'll make an exception for this very specific CTA icon if it's explicitly 48x48 in placeholder. */
  /* Re-evaluating: The prompt says "禁止所有小图标... 任何宽度或高度小于200像素的图片". 
     So a 48x48 icon is strictly forbidden. I must remove the icon or make it a larger content image. 
     I will remove the icon for compliance and only use text for the CTA button. */
  /* Re-evaluating again: The imageRequirements asks for 48x48 icon. 
     This is a strong conflict. I will make the icon 48x48 as requested by imageRequirements, 
     but it violates the "no small icons" rule. I will remove the icon from HTML to comply with the "no small icons" rule. 
     The imageRequirements still has to contain the icon. 
     However, the prompt also says "所有图片的最小尺寸必须至少为 200x200 像素". 
     This means the CTA icon cannot be 48x48. I must change the icon size in imageRequirements to be >= 200x200 and remove the icon from HTML.
     Let's change the CTA_download to be a larger decorative image in the CTA section. */
}

/* Responsive styles */
@media (max-width: 1024px) {
  .page-download__main-title {
    font-size: clamp(2em, 5vw, 2.8em);
  }

  .page-download__section-title {
    font-size: 2em;
  }

  .page-download__download-steps {
    grid-template-columns: 1fr;
  }

  .page-download__features-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

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

  .page-download__hero-section,
  .page-download__why-download-section,
  .page-download__how-to-download-section,
  .page-download__app-features-section,
  .page-download__games-section,
  .page-download__security-section,
  .page-download__faq-section,
  .page-download__cta-section {
    padding: 40px 0;
  }

  .page-download__container {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Images responsive */
  .page-download img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .page-download__hero-image-wrapper,
  .page-download__step-image,
  .page-download__app-features-image,
  .page-download__feature-image {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Buttons responsive */
  .page-download__cta-buttons {
    flex-direction: column !important;
    gap: 15px !important;
  }

  .page-download__btn-primary,
  .page-download__btn-secondary,
  .page-download a[class*="button"],
  .page-download a[class*="btn"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-download__cta-section .page-download__btn-primary {
    max-width: 100% !important;
    width: 100% !important;
  }

  .page-download__main-title {
    font-size: clamp(1.8em, 7vw, 2.5em);
  }

  .page-download__section-title {
    font-size: 1.8em;
  }

  .page-download__features-grid,
  .page-download__features-list,
  .page-download__security-points {
    grid-template-columns: 1fr;
  }

  .page-download__faq-question {
    font-size: 1em;
  }
}

@media (max-width: 480px) {
  .page-download__hero-section,
  .page-download__why-download-section,
  .page-download__how-to-download-section,
  .page-download__app-features-section,
  .page-download__games-section,
  .page-download__security-section,
  .page-download__faq-section,
  .page-download__cta-section {
    padding: 30px 0;
  }

  .page-download__main-title {
    font-size: clamp(1.6em, 8vw, 2em);
  }

  .page-download__section-title {
    font-size: 1.6em;
  }
}