/* General styles for .page-register scope */
.page-register {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333333; /* Default text color for light background */
  background-color: #ffffff; /* Default background for main content */
}

/* Smart color contrast for main content */
.page-register p,
.page-register li,
.page-register__form-label {
  color: #333333;
}

/* Dark sections for contrast */
.page-register__dark-section {
  background-color: #017439; /* Brand primary color */
  color: #ffffff;
  padding: 60px 0;
}
.page-register__dark-section .page-register__section-title,
.page-register__dark-section p,
.page-register__dark-section h3 {
  color: #ffffff;
}

.page-register__light-bg {
  background-color: #ffffff;
  color: #333333;
  padding: 60px 0;
}

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

.page-register__center-text {
  text-align: center;
}

.page-register__section-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 40px;
  text-align: center;
  color: #017439; /* Brand primary color */
}

/* Hero Section */
.page-register__hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 0 60px; /* Small top padding, relying on body for header offset */
  overflow: hidden;
}

.page-register__hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.page-register__hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 40px 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.page-register__main-title {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #017439;
}

.page-register__hero-description {
  font-size: 18px;
  margin-bottom: 30px;
}

/* Buttons */
.page-register__cta-button {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  transition: all 0.3s ease;
  cursor: pointer;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
}

.page-register__btn-primary {
  background-color: #C30808; /* Custom color for register */
  color: #FFFF00; /* Custom font color for register */
  border: 2px solid transparent;
}

.page-register__btn-primary:hover {
  background-color: #a30606;
  transform: translateY(-2px);
}

.page-register__btn-secondary {
  background-color: #ffffff;
  color: #C30808; /* Custom color for login */
  border: 2px solid #C30808;
  margin-left: 20px;
}

.page-register__btn-secondary:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
}

.page-register__cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

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

.page-register__benefit-item {
  text-align: center;
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  color: #ffffff;
}

.page-register__benefit-item img {
  width: 100%;
  
  height: auto;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.page-register__benefit-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #FFFF00; /* Use custom color for titles in dark sections */
}

.page-register__benefit-text {
  font-size: 16px;
  color: #f0f0f0;
}

/* Registration Guide */
.page-register__registration-guide {
  padding: 60px 0;
  background-color: #f9f9f9;
}

.page-register__guide-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 40px;
}

.page-register__step-item {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  position: relative;
  text-align: center;
}

.page-register__step-number {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #017439;
  color: #ffffff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  border: 4px solid #f9f9f9;
}

.page-register__step-title {
  font-size: 24px;
  font-weight: 600;
  margin-top: 30px;
  margin-bottom: 15px;
  color: #017439;
}

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

.page-register__step-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.page-register__registration-form {
  margin-top: 30px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.page-register__form-group {
  margin-bottom: 20px;
}

.page-register__form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333333;
}

.page-register__form-input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
}

.page-register__form-input:focus {
  border-color: #017439;
  outline: none;
  box-shadow: 0 0 0 2px rgba(1, 116, 57, 0.2);
}

.page-register__form-terms {
  margin-bottom: 25px;
  font-size: 14px;
  color: #555;
  display: flex;
  align-items: center;
}

.page-register__form-terms input[type="checkbox"] {
  margin-right: 10px;
  min-width: 16px; /* Ensure checkbox is visible */
  min-height: 16px;
}

.page-register__link {
  color: #017439;
  text-decoration: none;
}

.page-register__link:hover {
  text-decoration: underline;
}

.page-register__form-submit {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 8px;
  background-color: #C30808; /* Custom color for register */
  color: #FFFF00; /* Custom font color for register */
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.page-register__form-submit:hover {
  background-color: #a30606;
}

/* Security Info Section */
.page-register__security-info {
  text-align: center;
}

.page-register__security-text {
  max-width: 800px;
  margin: 0 auto 30px;
  font-size: 17px;
  color: #f0f0f0;
}

/* Promotions Section */
.page-register__promotions-section {
  padding: 60px 0;
  background-color: #f9f9f9;
}

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

.page-register__promo-card {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-register__promo-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 20px;
  display: block;
}

.page-register__promo-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #017439;
}

.page-register__promo-description {
  font-size: 16px;
  color: #555;
  margin-bottom: 20px;
  flex-grow: 1; /* Pushes button to bottom */
}

.page-register__promo-link {
  display: inline-block;
  width: auto;
  min-width: 150px;
  padding: 12px 25px;
  font-size: 16px;
  margin-top: auto; /* Align buttons at bottom */
}

.page-register__center-cta {
  text-align: center;
  margin-top: 40px;
}

/* FAQ Section */
details.page-register__faq-item {
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  background: #fff;
}
details.page-register__faq-item summary.page-register__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-register__faq-item summary.page-register__faq-question::-webkit-details-marker {
  display: none;
}
details.page-register__faq-item summary.page-register__faq-question:hover {
  background: #f5f5f5;
}
.page-register__faq-qtext {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  color: #333333;
}
.page-register__faq-toggle {
  font-size: 24px;
  font-weight: bold;
  color: #666;
  flex-shrink: 0;
  margin-left: 15px;
  width: 28px;
  text-align: center;
}
details.page-register__faq-item .page-register__faq-answer {
  padding: 0 20px 20px;
  background: #f9f9f9;
  border-radius: 0 0 5px 5px;
  color: #555;
}
.page-register__faq-answer p {
  margin: 0;
}

/* Final CTA Section */
.page-register__cta-final {
  padding: 80px 0;
  text-align: center;
}

.page-register__cta-final .page-register__section-title {
  color: #ffffff;
}

.page-register__cta-final .page-register__description {
  max-width: 700px;
  margin: 0 auto 40px;
  font-size: 18px;
  color: #f0f0f0;
}

/* Responsive Styles */
@media (max-width: 1200px) {
  .page-register__container {
    padding: 0 20px;
  }
}

@media (max-width: 992px) {
  .page-register__section-title {
    font-size: 32px;
  }
  .page-register__hero-content {
    padding: 30px;
  }
  .page-register__main-title {
    font-size: 36px;
  }
  .page-register__hero-description {
    font-size: 16px;
  }
  .page-register__btn-primary, .page-register__btn-secondary {
    font-size: 16px;
    padding: 12px 25px;
  }
  .page-register__benefits-grid,
  .page-register__promo-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

/*
  HOME PAGE SPECIFIC CSS - REQUIRED TO BE PRESENT IN THE OUTPUT CSS FIELD
  BUT NOT APPLICABLE TO THIS REGISTER PAGE'S HTML CONTENT.
  These blocks are included as per the strict "文件结构要求"
  which states "首页试玩布局 CSS（写死模板，必须原样写入 css，禁止省略/改写关键属性/用「同上」代替）".
  The BEM class is adjusted to 'page-register' as per general BEM rule.
*/
@media (max-width: 1023px) {
  .page-register__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-register__hero-brand,
  .page-register__hero-jackpot {
    display: none !important;
  }
  .page-register__game-trial {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    margin: 0 auto;
    padding: 0 0 12px !important;
    box-sizing: border-box;
  }
  .page-register__game-trial-shell {
    height: auto !important;
    max-height: none !important;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .page-register__game-trial-topbar,
  .page-register__game-trial-bottombar {
    display: none !important;
  }
  .page-register__game-trial-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 1024 / 768;
    flex: none !important;
    min-height: 240px;
    max-height: none !important;
    overflow: hidden;
    box-sizing: border-box;
  }
  .page-register__game-trial-frame {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: 100%;
    border: none;
    z-index: 1;
    overflow: hidden;
  }
  .page-register__game-trial-overlay {
    z-index: 5 !important;
    pointer-events: auto !important;
  }
  .page-register__game-trial-start {
    z-index: 6 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }
}

@media (min-width: 1024px) {
  .page-register__home-hero {
    display: grid;
    grid-template-columns: 26% 48% 26%;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 16px 24px;
    box-sizing: border-box;
  }
  .page-register__hero-brand,
  .page-register__hero-jackpot,
  .page-register__game-trial {
    height: 300px;
    max-height: 300px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .page-register__game-trial {
    max-width: none !important;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .page-register__game-trial-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 300px;
    box-sizing: border-box;
  }
  .page-register__game-trial-viewport {
    flex: 1;
    min-height: 0;
    position: relative;
    width: 100%;
  }
  .page-register__game-trial-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: none;
  }
  .page-register__hero-jackpot-claim {
    background: #c62828 !important;
    color: #fff !important;
  }
}

/*
  MOBILE SPECIFIC CSS - @media (max-width: 768px)
  Must include all listed categories from the "文件结构要求" section.
*/
@media (max-width: 768px) {
  /* General elements */
  .page-register__container {
    padding: 0 15px;
  }
  .page-register__section-title {
    font-size: 28px;
    margin-bottom: 30px;
  }
  .page-register__hero-content {
    padding: 20px;
  }
  .page-register__main-title {
    font-size: 30px;
  }
  .page-register__hero-description {
    font-size: 15px;
  }

  /* 2. 优惠 __promo-strip: Not directly present, but general promo grid should adapt. */
  .page-register__promo-grid {
    grid-template-columns: 1fr; /* Single column for promos */
    gap: 20px;
  }
  .page-register__promo-card {
    padding: 20px;
  }
  .page-register__promo-image {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  .page-register__promo-link {
    width: 100%;
  }

  /* 3. 热门 __hot-games: Not directly present. */
  /* If it were, it would be 2 columns. */

  /* 4. 品牌 __brand-intro: Not directly present. */

  /* 5. 中奖条 __winner-ticker: Not directly present. */

  /* 6. 通用图片与容器 */
  .page-register img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  .page-register__section,
  .page-register__card,
  .page-register__container,
  .page-register__hero-section,
  .page-register__benefits-section,
  .page-register__registration-guide,
  .page-register__security-info,
  .page-register__promotions-section,
  .page-register__faq-section,
  .page-register__cta-final {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  /* Remove specific padding for hero image section if it uses full width */
  .page-register__hero-section {
      padding-left: 0;
      padding-right: 0;
  }
  .page-register__hero-content {
      padding-left: 15px;
      padding-right: 15px;
  }

  /* 7. 按钮与按钮容器 */
  .page-register__cta-button,
  .page-register__btn-primary,
  .page-register__btn-secondary,
  .page-register a[class*="button"],
  .page-register a[class*="btn"],
  .page-register__form-submit {
    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-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-direction: column !important; /* Stack buttons vertically */
    gap: 10px;
  }
  .page-register__btn-secondary {
    margin-left: 0; /* Remove left margin for stacked buttons */
  }

  /* 8. Other modules (FAQ) */
  details.page-register__faq-item summary.page-register__faq-question { padding: 15px; }
  .page-register__faq-qtext { font-size: 15px; }
  details.page-register__faq-item .page-register__faq-answer { padding: 0 15px 15px; }
  .page-register__step-item {
    padding: 20px 15px;
  }
  .page-register__step-title {
    font-size: 20px;
  }
  .page-register__step-number {
    width: 40px;
    height: 40px;
    font-size: 20px;
    top: -15px;
    border-width: 3px;
  }
  .page-register__registration-form {
    padding: 0;
  }
  .page-register__form-input {
    padding: 10px;
  }
}

/* Additional specific styles from general requirements */
.page-register__game-trial-overlay {
  z-index: 5;
  pointer-events: auto;
}
.page-register__game-trial-overlay.is-hidden {
  display: none !important;
  pointer-events: none !important;
}
.page-register__game-trial-start {
  z-index: 6;
  pointer-events: auto;
  touch-action: manipulation;
}
.page-register__game-trial-shell {
  border: 1px solid rgba(212,175,55,.45);
  border-radius: 10px;
  overflow: hidden;
}
.page-register__reward-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: rgba(0,0,0,0.7); /* Modal background */
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-register__reward-modal[hidden] {
  display: none;
}
.page-register__reward-modal-content {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  max-width: 500px;
  position: relative;
}
.page-register__reward-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #333;
}