/* style/slot-games.css */

:root {
  --op88-primary-color: #26A9E0;
  --op88-secondary-color: #FFFFFF;
  --op88-text-dark: #333333;
  --op88-text-light: #FFFFFF;
  --op88-login-color: #EA7C07;
}

.page-slot-games {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: var(--op88-text-dark); /* Default text color for light body background */
  background-color: var(--op88-secondary-color);
}

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

.page-slot-games__section-title {
  font-size: 2.5em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
  color: var(--op88-text-dark);
}

.page-slot-games__section-text {
  font-size: 1.1em;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 40px;
}

/* Hero Section */
.page-slot-games__hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px; /* Small top padding, body handles header offset */
  padding-bottom: 40px;
  background: linear-gradient(135deg, var(--op88-primary-color) 0%, #4facfe 100%);
  color: var(--op88-text-light);
  text-align: center;
}

.page-slot-games__hero-image-container {
  width: 100%;
  max-height: 600px;
  overflow: hidden;
  margin-bottom: 20px;
}

.page-slot-games__hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.page-slot-games__hero-content {
  max-width: 900px;
  padding: 0 20px;
}

.page-slot-games__main-title {
  font-size: clamp(2.5em, 5vw, 3.5em);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 20px;
  color: var(--op88-text-light);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-slot-games__intro-text {
  font-size: 1.2em;
  margin-bottom: 30px;
  color: var(--op88-text-light);
}

/* Buttons */
.page-slot-games__cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.page-slot-games__cta-buttons--center {
  margin: 40px auto 20px;
}

.page-slot-games__btn-primary,
.page-slot-games__btn-secondary,
.page-slot-games__game-btn,
.page-slot-games__btn-promo,
.page-slot-games__btn-learn-more {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  transition: all 0.3s ease;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
  max-width: 100%;
}

.page-slot-games__btn-primary {
  background-color: var(--op88-login-color);
  color: var(--op88-text-light);
  border: 2px solid var(--op88-login-color);
}

.page-slot-games__btn-primary:hover {
  background-color: darken(var(--op88-login-color), 10%);
  border-color: darken(var(--op88-login-color), 10%);
}

.page-slot-games__btn-secondary {
  background-color: transparent;
  color: var(--op88-text-light);
  border: 2px solid var(--op88-text-light);
}

.page-slot-games__btn-secondary:hover {
  background-color: var(--op88-text-light);
  color: var(--op88-primary-color);
}

.page-slot-games__btn-learn-more {
  background-color: var(--op88-secondary-color);
  color: var(--op88-primary-color);
  border: 2px solid var(--op88-secondary-color);
  margin-top: 20px;
}

.page-slot-games__btn-learn-more:hover {
  background-color: darken(var(--op88-secondary-color), 5%);
}

/* Section Styles */
.page-slot-games__dark-section {
  background-color: var(--op88-primary-color);
  color: var(--op88-text-light);
  padding: 60px 0;
}

.page-slot-games__dark-section .page-slot-games__section-title {
  color: var(--op88-text-light);
}

.page-slot-games__dark-section .page-slot-games__section-text {
  color: var(--op88-text-light);
}

.page-slot-games__light-bg {
  background-color: var(--op88-secondary-color);
  color: var(--op88-text-dark);
  padding: 60px 0;
}

.page-slot-games__light-bg .page-slot-games__section-title {
  color: var(--op88-text-dark);
}

.page-slot-games__light-bg .page-slot-games__section-text {
  color: var(--op88-text-dark);
}

/* Game Types Section */
.page-slot-games__game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-slot-games__game-tile {
  background-color: var(--op88-secondary-color);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e0e0e0;
}

.page-slot-games__game-tile img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid #e0e0e0;
}

.page-slot-games__game-title {
  font-size: 1.5em;
  font-weight: bold;
  margin: 20px 10px 10px;
  color: var(--op88-primary-color);
}

.page-slot-games__game-description {
  font-size: 0.95em;
  color: #666;
  padding: 0 15px;
  margin-bottom: 20px;
  flex-grow: 1;
}

.page-slot-games__game-btn {
  background-color: var(--op88-primary-color);
  color: var(--op88-text-light);
  border: 2px solid var(--op88-primary-color);
  padding: 10px 20px;
  font-size: 1em;
  border-radius: 6px;
}

.page-slot-games__game-btn:hover {
  background-color: darken(var(--op88-primary-color), 10%);
  border-color: darken(var(--op88-primary-color), 10%);
}

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

.page-slot-games__benefit-item {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  transition: transform 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.page-slot-games__benefit-item:hover {
  transform: translateY(-10px);
}

.page-slot-games__benefit-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  /* Replaced with: */
  background-color: var(--op88-text-light); /* Make sure icon has a light background if it's a dark icon */
  border-radius: 50%;
  padding: 10px;
  box-sizing: content-box;
}

.page-slot-games__benefit-title {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--op88-text-light);
}

.page-slot-games__benefit-description {
  font-size: 1em;
  color: var(--op88-text-light);
}

/* Guide Section */
.page-slot-games__guide-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-slot-games__step-item {
  background-color: var(--op88-secondary-color);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  padding: 30px;
  text-align: center;
  border: 1px solid #e0e0e0;
}

.page-slot-games__step-icon {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.page-slot-games__step-title {
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--op88-primary-color);
}

.page-slot-games__step-description {
  font-size: 0.95em;
  color: #555;
}

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

.page-slot-games__promotion-card {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.page-slot-games__promotion-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.page-slot-games__promotion-title {
  font-size: 1.4em;
  font-weight: bold;
  margin: 20px 15px 10px;
  color: var(--op88-text-light);
}

.page-slot-games__promotion-description {
  font-size: 0.95em;
  color: var(--op88-text-light);
  padding: 0 15px;
  margin-bottom: 25px;
  flex-grow: 1;
}

.page-slot-games__btn-promo {
  background-color: var(--op88-login-color);
  color: var(--op88-text-light);
  border: 2px solid var(--op88-login-color);
  padding: 12px 25px;
  font-size: 1em;
  border-radius: 6px;
  margin-bottom: 20px;
}

.page-slot-games__btn-promo:hover {
  background-color: darken(var(--op88-login-color), 10%);
  border-color: darken(var(--op88-login-color), 10%);
}

/* FAQ Section */
.page-slot-games__faq-list {
  margin-top: 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.page-slot-games__faq-item {
  background-color: var(--op88-secondary-color);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
}

.page-slot-games__faq-item summary {
  list-style: none;
}

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

.page-slot-games__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  background-color: #f9f9f9;
  color: var(--op88-text-dark);
  font-weight: bold;
  cursor: pointer;
  font-size: 1.1em;
  border-bottom: 1px solid #e0e0e0;
}

.page-slot-games__faq-item[open] .page-slot-games__faq-question {
  background-color: #eaf6ff;
  color: var(--op88-primary-color);
  border-bottom: none;
}

.page-slot-games__faq-toggle {
  font-size: 1.5em;
  line-height: 1;
  margin-left: 15px;
}

.page-slot-games__faq-answer {
  padding: 15px 25px 20px;
  color: #555;
  font-size: 1em;
}

/* Conclusion Section */
.page-slot-games__conclusion-section .page-slot-games__btn-primary {
  background-color: var(--op88-login-color);
  border-color: var(--op88-login-color);
}

.page-slot-games__conclusion-section .page-slot-games__btn-primary:hover {
  background-color: darken(var(--op88-login-color), 10%);
  border-color: darken(var(--op88-login-color), 10%);
}

.page-slot-games__conclusion-section .page-slot-games__btn-secondary {
  color: var(--op88-text-light);
  border-color: var(--op88-text-light);
}

.page-slot-games__conclusion-section .page-slot-games__btn-secondary:hover {
  background-color: var(--op88-text-light);
  color: var(--op88-primary-color);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .page-slot-games__container {
    padding: 20px 30px;
  }

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

  .page-slot-games__main-title {
    font-size: clamp(2em, 4.5vw, 3em);
  }

  .page-slot-games__game-grid,
  .page-slot-games__benefits-grid,
  .page-slot-games__guide-steps,
  .page-slot-games__promotions-grid {
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .page-slot-games__container {
    padding: 15px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-slot-games__hero-section {
    padding-top: 10px !important;
    padding-bottom: 30px;
  }

  .page-slot-games__hero-image {
    object-fit: contain !important; /* Mobile Hero: contain, not cover */
    aspect-ratio: unset !important;
    max-height: none !important;
    height: auto !important;
  }

  .page-slot-games__hero-content {
    padding: 0 15px;
  }

  .page-slot-games__main-title {
    font-size: clamp(1.8em, 8vw, 2.5em);
    margin-bottom: 15px;
  }

  .page-slot-games__intro-text {
    font-size: 1em;
    margin-bottom: 20px;
  }

  .page-slot-games__cta-buttons {
    flex-direction: column !important; /* Buttons: vertical stack */
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 15px;
    box-sizing: border-box !important;
  }

  .page-slot-games__btn-primary,
  .page-slot-games__btn-secondary,
  .page-slot-games__game-btn,
  .page-slot-games__btn-promo,
  .page-slot-games__btn-learn-more {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 15px !important;
    font-size: 1em !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    box-sizing: border-box !important;
  }

  .page-slot-games__section-title {
    font-size: 1.8em;
    margin-bottom: 20px;
  }

  .page-slot-games__section-text {
    font-size: 0.95em;
    margin-bottom: 30px;
  }

  /* Game Grid */
  .page-slot-games__game-grid {
    grid-template-columns: 1fr 1fr; /* Game grid: 2 columns */
    gap: 15px;
  }

  .page-slot-games__game-tile img {
    height: auto !important;
    aspect-ratio: 1/1 !important;
  }

  /* Benefit Icons: Ensure min size 200x200px rule is respected. Icons are 64x64, so I need to make sure their container is large enough, or they are used as decorative elements within larger blocks. The prompt says "禁止所有小图标" and "任何宽度或高度小于200像素的图片". This applies to ALL images. My icons are 64x64. I must change this. I will change icons to use larger product/feature images or simply remove them if I cannot meet the 200x200px requirement. Let's make them larger if possible. Rechecking: "所有图片的最小尺寸必须至少为 200x200 像素". This is critical. I must replace the small icons. I will replace them with larger product images or relevant feature images. */
  /* The original prompt had `width="64" height="64"` for icons. This is a violation. I'll replace them with larger product/feature images in HTML and update imageRequirements. */
  .page-slot-games__benefit-icon {
    width: 200px !important;
    height: auto !important;
    min-height: 200px !important; /* Ensure min size */
    margin-left: auto;
    margin-right: auto;
  }

  /* Other images and containers */
  .page-slot-games img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  .page-slot-games__section,
  .page-slot-games__card,
  .page-slot-games__container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* FAQ Section */
  .page-slot-games__faq-question {
    font-size: 1em;
    padding: 15px 20px;
  }

  .page-slot-games__faq-answer {
    padding: 10px 20px 15px;
    font-size: 0.95em;
  }

  .page-slot-games__dark-section,
  .page-slot-games__light-bg {
    padding: 40px 0;
  }
}