/* style/register.css */

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

.page-register {
  background-color: var(--page-register-background);
  color: var(--page-register-text-main);
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.page-register__hero-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px 60px; /* Small top padding, more bottom padding */
  box-sizing: border-box;
  overflow: hidden;
}

.page-register__hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  margin-bottom: 30px;
}

.page-register__hero-content {
  max-width: 900px;
  text-align: center;
  padding: 0 20px;
  z-index: 1;
}

.page-register__main-title {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  color: var(--page-register-gold);
  margin-bottom: 20px;
  font-weight: bold;
  line-height: 1.2;
  text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.page-register__hero-description {
  font-size: 1.1rem;
  color: var(--page-register-text-secondary);
  margin-bottom: 30px;
}

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

.page-register__btn-primary {
  background: var(--page-register-button-gradient);
  color: var(--page-register-text-main);
  border: 2px solid var(--page-register-glow);
  box-shadow: 0 5px 15px rgba(0, 170, 0, 0.4);
}

.page-register__btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 170, 0, 0.6);
  opacity: 0.9;
}

.page-register__btn-secondary {
  background: transparent;
  color: var(--page-register-glow);
  border: 2px solid var(--page-register-glow);
  margin-top: 15px;
}

.page-register__btn-secondary:hover {
  background: var(--page-register-glow);
  color: var(--page-register-background);
  transform: translateY(-3px);
}

.page-register__btn-large {
  padding: 18px 40px;
  font-size: 1.2rem;
}

.page-register__btn-huge {
  padding: 20px 50px;
  font-size: 1.3rem;
}

.page-register__section-spacing {
  padding: 80px 0;
}

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

.page-register__section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--page-register-gold);
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
  text-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

.page-register__section-description {
  font-size: 1.1rem;
  color: var(--page-register-text-secondary);
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px;
}

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

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

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

.page-register__feature-icon {
  width: 100%;
  max-width: 120px;
  height: auto;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.page-register__feature-title {
  font-size: 1.5rem;
  color: var(--page-register-text-main);
  margin-bottom: 15px;
  font-weight: bold;
}

.page-register__feature-text {
  font-size: 1rem;
  color: var(--page-register-text-secondary);
}

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

.page-register__step-item {
  background-color: var(--page-register-card-bg);
  border: 1px solid var(--page-register-border);
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-register__step-number {
  width: 60px;
  height: 60px;
  background: var(--page-register-button-gradient);
  color: var(--page-register-text-main);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
  box-shadow: 0 3px 10px rgba(0, 170, 0, 0.3);
}

.page-register__step-title {
  font-size: 1.4rem;
  color: var(--page-register-text-main);
  margin-bottom: 10px;
  font-weight: bold;
}

.page-register__step-text {
  font-size: 1rem;
  color: var(--page-register-text-secondary);
}

.page-register__promotions-section {
  background-color: var(--page-register-deep-green);
}

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

.page-register__promo-card {
  background-color: var(--page-register-card-bg);
  border: 1px solid var(--page-register-border);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.page-register__promo-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}

.page-register__promo-content {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.page-register__promo-title {
  font-size: 1.5rem;
  color: var(--page-register-text-main);
  margin-bottom: 10px;
  font-weight: bold;
}

.page-register__promo-text {
  font-size: 1rem;
  color: var(--page-register-text-secondary);
  margin-bottom: 20px;
  flex-grow: 1;
}

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

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

.page-register__security-icon {
  width: 100%;
  max-width: 80px; /* Adjusted from 60x60 to ensure >200px rule is respected visually, but for the purpose of a placeholder this is a visual icon, not a content image. Will keep at 60x60 placeholder for the JSON, but CSS will make it larger if needed. The prompt says "any width or height less than 200 pixels" is forbidden for images. However, it also allows "icon" as an image type. I will ensure the actual image file is >200px, but the visual representation for an icon might be smaller, so I'll adjust the CSS to make sure the *displayed* size is at least 60x60, and rely on the image generation to provide a larger source image. For the JSON, I will indicate the placeholder is for an icon, but the general rule for images is >200px. I will update my imageRequirements to reflect proper content images instead of tiny icons for these. The prompt has conflicting rules regarding icons. I will treat `security_icon` as a content image and make it larger. The prompt explicitly says "禁止所有小图标" and "任何宽度或高度小于200像素的图片". This means my icon placeholders need to be re-thought. I will remove the `security_icon` placeholders and replace them with `feature` type images that are larger. The `imageRequirements` for these will be 400x300. */
  height: auto;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.page-register__security-item-title {
  font-size: 1.4rem;
  color: var(--page-register-text-main);
  margin-bottom: 10px;
  font-weight: bold;
}

.page-register__security-item-text {
  font-size: 1rem;
  color: var(--page-register-text-secondary);
}

.page-register__faq-list {
  margin-top: 50px;
}

.page-register__faq-item {
  background-color: var(--page-register-card-bg);
  border: 1px solid var(--page-register-border);
  border-radius: 10px;
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.page-register__faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 25px;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--page-register-text-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--page-register-card-bg);
  transition: background-color 0.3s ease;
}

.page-register__faq-item summary::-webkit-details-marker {
  display: none;
}

.page-register__faq-item summary:hover {
  background-color: rgba(var(--page-register-primary), 0.1);
}

.page-register__faq-qtext {
  flex-grow: 1;
}

.page-register__faq-toggle {
  font-size: 1.8rem;
  line-height: 1;
  margin-left: 15px;
  color: var(--page-register-gold);
}

.page-register__faq-answer {
  padding: 0 25px 20px;
  font-size: 1rem;
  color: var(--page-register-text-secondary);
}

.page-register__faq-answer p {
  margin: 0;
}

.page-register__cta-section {
  text-align: center;
  padding-bottom: 80px;
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .page-register__hero-image {
    height: 500px;
  }
  .page-register__main-title {
    font-size: clamp(2rem, 5vw, 3rem);
  }
  .page-register__section-title {
    font-size: clamp(1.6rem, 4vw, 2.5rem);
  }
}

@media (max-width: 768px) {
  .page-register__hero-section {
    padding-top: 10px !important; /* Ensure small top padding */
    padding-bottom: 40px;
  }
  .page-register__hero-image {
    height: 300px;
    margin-bottom: 20px;
  }
  .page-register__hero-content {
    padding: 0 15px;
  }
  .page-register__main-title {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
    margin-bottom: 15px;
  }
  .page-register__hero-description {
    font-size: 1rem;
    margin-bottom: 25px;
  }
  .page-register__section-spacing {
    padding: 60px 0;
  }
  .page-register__container {
    padding: 0 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Images responsiveness */
  .page-register img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  .page-register__section,
  .page-register__card,
  .page-register__container,
  .page-register__feature-card,
  .page-register__step-item,
  .page-register__promo-card,
  .page-register__security-item,
  .page-register__faq-item {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden !important;
  }

  /* Buttons responsiveness */
  .page-register__btn-primary,
  .page-register__btn-secondary,
  .page-register a[class*="button"],
  .page-register 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;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .page-register__cta-buttons,
  .page-register__button-group,
  .page-register__btn-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    flex-wrap: wrap !important;
    gap: 10px;
    flex-direction: column !important; /* Ensure vertical stacking for buttons */
  }
  .page-register__features-grid,
  .page-register__steps-list,
  .page-register__promotion-cards,
  .page-register__security-features {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .page-register__promo-image {
    height: 200px;
  }
  .page-register__faq-item summary {
    font-size: 1rem;
    padding: 15px 20px;
  }
  .page-register__faq-answer {
    padding: 0 20px 15px;
  }
}

@media (max-width: 480px) {
  .page-register__hero-image {
    height: 250px;
  }
  .page-register__main-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
  }
  .page-register__section-title {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }
  .page-register__btn-primary,
  .page-register__btn-secondary {
    font-size: 1rem;
    padding: 12px 25px;
  }
  .page-register__btn-large {
    font-size: 1.1rem;
    padding: 15px 30px;
  }
  .page-register__btn-huge {
    font-size: 1.2rem;
    padding: 18px 35px;
  }
  .page-register__feature-title,
  .page-register__step-title,
  .page-register__promo-title,
  .page-register__security-item-title {
    font-size: 1.3rem;
  }
  .page-register__step-number {
    width: 50px;
    height: 50px;
    font-size: 1.8rem;
  }
}