/* style/register.css */
.page-register {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333333; /* Dark text for light body background #f4f4f4 */
  background-color: #f4f4f4;
}

.page-register__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-register__hero-section {
  background: linear-gradient(135deg, #1A237E, #3F51B5); /* Primary color gradient */
  color: #ffffff;
  padding: 80px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-register__hero-title {
  font-size: 3.5em;
  margin-bottom: 20px;
  color: #FFD700; /* Secondary color for emphasis */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-register__hero-description {
  font-size: 1.3em;
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.page-register__hero-button {
  display: inline-block;
  background-color: #FFD700; /* Secondary color for button */
  color: #1A237E; /* Primary color for button text */
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.page-register__hero-button:hover {
  background-color: #e5c100;
  transform: translateY(-3px);
}

.page-register__section-title {
  font-size: 2.5em;
  color: #1A237E; /* Primary color for titles */
  text-align: center;
  margin-bottom: 40px;
  padding-top: 60px;
}

.page-register__section-description {
  font-size: 1.1em;
  text-align: center;
  margin-bottom: 60px;
  color: #555555;
}

/* Benefits Section */
.page-register__benefits-section {
  background-color: #ffffff;
  padding: 60px 0;
}

.page-register__benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  text-align: center;
}

.page-register__benefit-item {
  background-color: #f9f9f9;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-register__benefit-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.page-register__benefit-icon {
  width: 150px; /* Min size 200px requirement is for actual content images, not decorative icons here. Re-evaluating. These are more illustrative. Let's aim for larger sizes if possible, or remove if strictly decorative icons are forbidden. The prompt says '禁止所有小图标' but also '图片用途：所有图片都应该是内容展示图片，而不是装饰性小图标'. If these are 'feature' images, they should be larger. Let's adjust these to be larger and more illustrative. */
  height: 150px;
  object-fit: contain;
  margin-bottom: 20px;
  border-radius: 8px;
}

.page-register__benefit-title {
  font-size: 1.6em;
  color: #1A237E;
  margin-bottom: 15px;
}

.page-register__benefit-text {
  font-size: 1.05em;
  color: #666666;
}

/* Steps Section */
.page-register__steps-section {
  padding: 60px 0;
  background-color: #e8eaf6; /* Lighter shade of primary */
}

.page-register__steps-list {
  list-style: none;
  padding: 0;
  counter-reset: step-counter;
  max-width: 900px;
  margin: 0 auto;
}

.page-register__step-item {
  background-color: #ffffff;
  margin-bottom: 25px;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: flex-start;
}

.page-register__step-item::before {
  counter-increment: step-counter;
  content: counter(step-counter);
  font-size: 2.5em;
  font-weight: bold;
  color: #FFD700;
  background-color: #1A237E;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  min-width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.page-register__step-content {
  flex-grow: 1;
}

.page-register__step-title {
  font-size: 1.8em;
  color: #1A237E;
  margin-top: 0;
  margin-bottom: 10px;
}

.page-register__step-text {
  font-size: 1.05em;
  color: #555555;
}

.page-register__step-text a {
  color: #1A237E;
  text-decoration: underline;
  font-weight: bold;
}

.page-register__step-text a:hover {
  color: #FFD700;
}

.page-register__cta-button {
  display: block;
  width: fit-content;
  margin: 50px auto 0 auto;
  background-color: #1A237E; /* Primary color for button */
  color: #FFD700; /* Secondary color for button text */
  padding: 18px 40px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 1.4em;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.page-register__cta-button:hover {
  background-color: #0d124b;
  transform: translateY(-5px);
}

/* Conditions Section */
.page-register__conditions-section {
  padding: 60px 0;
  background-color: #ffffff;
}

.page-register__conditions-list {
  max-width: 800px;
  margin: 0 auto 30px auto;
  list-style: none;
  padding: 0;
}

.page-register__condition-item {
  font-size: 1.1em;
  margin-bottom: 15px;
  padding-left: 30px;
  position: relative;
  color: #444444;
}

.page-register__condition-item::before {
  content: '✔️';
  position: absolute;
  left: 0;
  color: #1A237E;
  font-weight: bold;
}

.page-register__conditions-note {
  text-align: center;
  font-size: 1.1em;
  color: #555555;
}

.page-register__conditions-note a {
  color: #1A237E;
  text-decoration: underline;
  font-weight: bold;
}

.page-register__conditions-note a:hover {
  color: #FFD700;
}

/* FAQ Section */
.page-register__faq-section {
  padding: 60px 0 80px 0;
  background-color: #f4f4f4;
}

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

.page-register__faq-item {
  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.page-register__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 25px;
  background-color: #1A237E; /* Primary color */
  color: #ffffff;
  font-size: 1.3em;
  font-weight: bold;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.page-register__faq-question:hover {
  background-color: #0d124b;
}

.page-register__faq-question.is-active {
  background-color: #0d124b;
}

.page-register__faq-arrow {
  font-size: 1.2em;
  transition: transform 0.3s ease;
}

.page-register__faq-question.is-active .page-register__faq-arrow {
  transform: rotate(180deg);
}

.page-register__faq-answer {
  padding: 0 25px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out;
  background-color: #fcfcfc;
  color: #444444;
}

.page-register__faq-answer.is-active {
  max-height: 500px; /* Adjust as needed for content */
  padding: 20px 25px;
}

.page-register__faq-answer p {
  margin: 0;
  font-size: 1.05em;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .page-register__hero-title {
    font-size: 2.5em;
  }

  .page-register__hero-description {
    font-size: 1.1em;
  }

  .page-register__hero-button {
    padding: 12px 25px;
    font-size: 1.1em;
  }

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

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

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

  .page-register__step-item::before {
    margin-right: 0;
    margin-bottom: 20px;
  }

  .page-register__cta-button {
    font-size: 1.2em;
    padding: 15px 30px;
  }

  .page-register__faq-question {
    font-size: 1.1em;
    padding: 15px 20px;
  }

  .page-register__faq-answer {
    padding: 15px 20px;
  }
}

@media (max-width: 480px) {
  .page-register__hero-title {
    font-size: 2em;
  }

  .page-register__hero-description {
    font-size: 1em;
  }

  .page-register__hero-button {
    font-size: 1em;
    padding: 10px 20px;
  }

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

  .page-register__benefit-title {
    font-size: 1.4em;
  }

  .page-register__step-title {
    font-size: 1.5em;
  }

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