/* style/download.css */

/* --- General Styles for page-download --- */
.page-download {
  color: var(--text-main, #F2FFF6); /* Main text color for dark background */
  background-color: var(--background, #08160F); /* Explicitly setting background for main content */
}

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

.page-download__section-title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  color: var(--text-main, #F2FFF6);
  line-height: 1.2;
}

.page-download__section-description {
  font-size: 1.1rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px;
  color: var(--text-secondary, #A7D9B8);
}

/* --- Hero Section --- */
.page-download__hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  padding-top: 10px; /* body padding-top handles header offset */
  overflow: hidden;
  background-color: var(--deep-green, #0A4B2C); /* Darker green for hero */
}

.page-download__hero-content {
  text-align: center;
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin-bottom: 40px;
}

.page-download__main-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem); /* Responsive H1, not fixed large */
  font-weight: 800;
  color: var(--gold, #F2C14E);
  margin-bottom: 20px;
  line-height: 1.1;
  letter-spacing: -1px;
}

.page-download__description {
  font-size: 1.25rem;
  color: var(--text-main, #F2FFF6);
  margin-bottom: 30px;
  line-height: 1.6;
}

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

.page-download__btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 10px;
  background: var(--button, linear-gradient(180deg, #2AD16F 0%, #13994A 100%));
  color: var(--text-main, #F2FFF6);
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: none;
  cursor: pointer;
  max-width: 100%; /* For responsive buttons */
  box-sizing: border-box; /* For responsive buttons */
  white-space: normal; /* For responsive buttons */
  word-wrap: break-word; /* For responsive buttons */
}

.page-download__btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.page-download__btn-primary i {
  margin-right: 10px;
  font-size: 1.3rem;
}

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

.page-download__hero-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* --- Features Section --- */
.page-download__features-section {
  padding: 80px 20px;
  background-color: var(--card-bg, #11271B); /* Card BG for dark section */
}

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

.page-download__feature-card {
  background-color: var(--background, #08160F); /* Slightly darker background for cards in dark section */
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--border, #2E7A4E);
}

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

.page-download__feature-icon {
  width: 100%; /* Ensure images fill card width */
  height: auto;
  max-width: 200px; /* Constrain icon size */
  margin: 0 auto 20px;
  display: block;
  border-radius: 10px;
}

.page-download__feature-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main, #F2FFF6);
  margin-bottom: 10px;
}

.page-download__feature-text {
  font-size: 1rem;
  color: var(--text-secondary, #A7D9B8);
  line-height: 1.6;
}

/* --- Guide Section --- */
.page-download__guide-section {
  padding: 80px 20px;
  background-color: var(--background, #08160F);
}

.page-download__guide-steps {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin-top: 40px;
}

.page-download__guide-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.page-download__guide-item:nth-child(even) {
  flex-direction: column-reverse; /* Alternate image/text order */
}

.page-download__guide-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold, #F2C14E);
  margin-bottom: 20px;
}

.page-download__guide-list {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
  max-width: 600px;
  text-align: left;
}

.page-download__guide-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
  font-size: 1.1rem;
  color: var(--text-main, #F2FFF6);
  line-height: 1.6;
}

.page-download__guide-list li::before {
  content: counter(list-item) ".";
  counter-increment: list-item;
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--glow, #57E38D);
}

.page-download__guide-image {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  margin-top: 30px;
}

.page-download__qr-code {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 30px auto 0;
  border-radius: 5px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* --- FAQ Section --- */
.page-download__faq-section {
  padding: 80px 20px;
  background-color: var(--card-bg, #11271B); /* Card BG for dark section */
}

.page-download__faq-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.page-download__faq-item {
  background-color: var(--background, #08160F); /* Slightly darker background for cards in dark section */
  border-radius: 15px;
  border: 1px solid var(--border, #2E7A4E);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.page-download__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-main, #F2FFF6);
  cursor: pointer;
  background-color: var(--deep-green, #0A4B2C);
  border-bottom: 1px solid var(--divider, #1E3A2A);
  transition: background-color 0.3s ease;
  user-select: none;
}

.page-download__faq-question:hover {
  background-color: var(--deep-green, #0A4B2C);
  opacity: 0.9;
}

.page-download__faq-toggle {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--glow, #57E38D);
  margin-left: 15px;
}

.page-download__faq-answer {
  padding: 20px 30px;
  font-size: 1rem;
  color: var(--text-secondary, #A7D9B8);
  line-height: 1.6;
}

.page-download__faq-item:not([open]) .page-download__faq-answer {
  display: none;
}

.page-download__faq-item[open] .page-download__faq-question {
  border-bottom: none;
}

/* --- CTA Section --- */
.page-download__cta-section {
  padding: 80px 20px;
  text-align: center;
  background-color: var(--background, #08160F);
}

.page-download__cta-button {
  margin-top: 40px;
  padding: 18px 40px;
  font-size: 1.2rem;
}

/* --- Responsive Design --- */
@media (max-width: 1024px) {
  .page-download__hero-section {
    flex-direction: column;
  }
  .page-download__hero-content {
    margin-bottom: 30px;
  }
  .page-download__hero-image-wrapper {
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .page-download__container {
    padding: 20px 15px;
  }

  .page-download__section-title {
    font-size: 2rem;
    margin-bottom: 15px;
  }

  .page-download__section-description {
    font-size: 1rem;
    margin-bottom: 30px;
  }

  /* Hero Section */
  .page-download__hero-section {
    padding: 40px 15px;
    padding-top: 10px !important; /* body already handles header offset */
  }

  .page-download__main-title {
    font-size: clamp(2rem, 8vw, 2.8rem);
    margin-bottom: 15px;
  }

  .page-download__description {
    font-size: 1.1rem;
    margin-bottom: 25px;
  }

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

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

  .page-download__hero-image-wrapper {
    margin-top: 20px;
  }

  /* Features Section */
  .page-download__features-section {
    padding: 50px 15px;
  }

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

  .page-download__feature-card {
    padding: 20px;
  }

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

  .page-download__feature-text {
    font-size: 0.95rem;
  }

  /* Guide Section */
  .page-download__guide-section {
    padding: 50px 15px;
  }

  .page-download__guide-steps {
    gap: 30px;
  }

  .page-download__guide-title {
    font-size: 1.6rem;
  }

  .page-download__guide-list {
    text-align: center;
    padding-left: 0;
  }

  .page-download__guide-list li {
    padding-left: 0;
    margin-bottom: 10px;
    font-size: 1rem;
  }
  .page-download__guide-list li::before {
    position: static; /* Remove absolute positioning on mobile */
    display: inline-block;
    margin-right: 5px;
  }

  .page-download__guide-image,
  .page-download__qr-code {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* FAQ Section */
  .page-download__faq-section {
    padding: 50px 15px;
  }

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

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

  /* CTA Section */
  .page-download__cta-section {
    padding: 50px 15px;
  }

  .page-download__cta-button {
    margin-top: 30px;
    padding: 15px 30px;
    font-size: 1.1rem;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  /* Global image/video responsiveness for mobile */
  .page-download img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .page-download video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .page-download__section,
  .page-download__card,
  .page-download__container,
  .page-download__video-section,
  .page-download__video-container,
  .page-download__video-wrapper,
  .page-download__cta-buttons,
  .page-download__button-group,
  .page-download__btn-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden !important; /* Ensure no overflow */
  }

  .page-download__cta-buttons {
    flex-direction: column;
    gap: 10px;
  }
}

/* Custom Icon Styles (assuming these icons are available in shared.css or via font-awesome) */
/* If not, these would be image placeholders in a real scenario */
.icon-android, .icon-apple {
  /* Basic styling for icons, actual icons would be handled by font library */
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}
/* Placeholder for actual icon styles */
.icon-android { background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg viewBox%3D%220 0 24 24%22 fill%3D%22white%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M7 15H17C18.1 15 19 14.1 19 13V5C19 3.9 18.1 3 17 3H7C5.9 3 5 3.9 5 5V13C5 14.1 5.9 15 7 15ZM12 17C10.62 17 9.49 16.36 8.7 15.36L7 17V19H17V17L15.3 15.36C14.51 16.36 13.38 17 12 17ZM12 5C13.1 5 14 5.9 14 7C14 8.1 13.1 9 12 9C10.9 9 10 8.1 10 7C10 5.9 10.9 5 12 5ZM7 11H17V13H7V11Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'); }
.icon-apple { background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg viewBox%3D%220 0 24 24%22 fill%3D%22white%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 1.75C13.56 1.75 14.93 2.76 15.77 4.14C16.61 2.76 17.98 1.75 19.54 1.75C21.61 1.75 23.25 3.39 23.25 5.46C23.25 7.02 22.24 8.39 20.86 9.23C22.24 10.07 23.25 11.44 23.25 13.01C23.25 15.08 21.61 16.72 19.54 16.72C17.98 16.72 16.61 15.71 15.77 14.33C14.93 15.71 13.56 16.72 12 16.72C10.44 16.72 9.07 15.71 8.23 14.33C7.39 15.71 6.02 16.72 4.46 16.72C2.39 16.72 0.75 15.08 0.75 13.01C0.75 11.44 1.76 10.07 3.14 9.23C1.76 8.39 0.75 7.02 0.75 5.46C0.75 3.39 2.39 1.75 4.46 1.75C6.02 1.75 7.39 2.76 8.23 4.14C9.07 2.76 10.44 1.75 12 1.75Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'); }

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

/* Ensure contrast for specific elements if needed */
.page-download__dark-section {
  background: var(--card-bg, #11271B);
  color: var(--text-main, #F2FFF6);
}

.page-download__card {
  background: var(--background, #08160F); /* Explicitly set for cards */
  color: var(--text-main, #F2FFF6);
  border: 1px solid var(--border, #2E7A4E);
}

.page-download p,
.page-download li {
  color: var(--text-main, #F2FFF6); /* Ensure paragraphs and list items have main text color */
}

/* Ensure all images meet minimum size requirements and are not tiny icons */
.page-download img {
  min-width: 200px;
  min-height: 200px;
  object-fit: cover; /* Ensure images cover their area without distortion */
}

.page-download__feature-icon {
  min-width: 200px; /* Overriding for feature icons as they are typically smaller */
  min-height: 200px;
  width: auto; /* Allow auto width for icons */
  height: auto;
  max-width: 250px; /* Example max size for feature icons */
  margin: 0 auto 20px;
}
.page-download__qr-code {
  min-width: 200px;
  min-height: 200px;
  width: auto;
  height: auto;
  max-width: 300px;
}