.page-slot-games {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #ffffff; /* Default text color for dark body background */
  background-color: #1a1a2e; /* Inherited from shared, but ensuring page context */
}

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

.page-slot-games__dark-bg {
  background-color: #1a1a2e;
  color: #ffffff;
}

.page-slot-games__light-bg {
  background-color: #ffffff;
  color: #333333;
}

/* Hero Section */
.page-slot-games__hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px;
  padding-top: var(--header-offset, 120px); /* Ensure space for fixed header */
  position: relative;
  overflow: hidden;
  min-height: 600px;
}

.page-slot-games__hero-content {
  z-index: 1;
  max-width: 900px;
}

.page-slot-games__hero-title {
  font-size: 3.2em;
  margin-bottom: 20px;
  color: #ffffff;
  font-weight: bold;
}

.page-slot-games__hero-description {
  font-size: 1.2em;
  margin-bottom: 30px;
  color: #f0f0f0;
}

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

.page-slot-games__btn-primary,
.page-slot-games__btn-secondary {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  white-space: normal;
  word-wrap: break-word;
  box-sizing: border-box;
  text-align: center;
}

.page-slot-games__btn-primary {
  background-color: #C30808; /* Register/Login button color */
  color: #FFFF00; /* Register/Login font color */
  border: 2px solid #C30808;
}

.page-slot-games__btn-primary:hover {
  background-color: #a00606;
  border-color: #a00606;
}

.page-slot-games__btn-secondary {
  background-color: transparent;
  color: #FFFF00; /* Register/Login font color */
  border: 2px solid #C30808;
}

.page-slot-games__btn-secondary:hover {
  background-color: #C30808;
  color: #ffffff;
}

.page-slot-games__hero-media {
  margin-top: 40px;
  width: 100%;
  max-width: 1200px;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.page-slot-games__video-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
}

.page-slot-games__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* General Section Styles */
.page-slot-games__introduction-section,
.page-slot-games__game-types-section,
.page-slot-games__how-to-play-section,
.page-slot-games__promotions-section,
.page-slot-games__benefits-section,
.page-slot-games__faq-section,
.page-slot-games__call-to-action {
  padding: 80px 0;
}

.page-slot-games__section-title {
  font-size: 2.5em;
  margin-bottom: 20px;
  text-align: center;
  font-weight: bold;
}

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

/* Adjust text color for light background sections */
.page-slot-games__light-bg .page-slot-games__section-title,
.page-slot-games__light-bg .page-slot-games__section-description,
.page-slot-games__light-bg .page-slot-games__text-block,
.page-slot-games__light-bg .page-slot-games__card-title,
.page-slot-games__light-bg .page-slot-games__card-text,
.page-slot-games__light-bg .page-slot-games__step-title,
.page-slot-games__light-bg .page-slot-games__step-text,
.page-slot-games__light-bg .page-slot-games__benefits-title,
.page-slot-games__light-bg .page-slot-games__benefits-text {
  color: #333333;
}

.page-slot-games__light-bg .page-slot-games__card {
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
}

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

.page-slot-games__card {
  background-color: rgba(255, 255, 255, 0.08); /* Slightly transparent white for dark bg */
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 450px;
}

.page-slot-games__card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.page-slot-games__card-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 20px;
  object-fit: cover;
  width: 100%; /* Ensure card image takes full width */
  min-height: 200px; /* Minimum size for content images */
}

.page-slot-games__card-title {
  font-size: 1.5em;
  margin-bottom: 10px;
  color: #ffffff;
  font-weight: bold;
}

.page-slot-games__card-text {
  font-size: 1em;
  color: #f0f0f0;
  flex-grow: 1;
}

/* How-to-play List */
.page-slot-games__step-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 800px;
}

.page-slot-games__step-item {
  background-color: #f8f9fa;
  border-radius: 10px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.page-slot-games__step-title {
  font-size: 1.6em;
  margin-bottom: 10px;
  color: #017439;
  font-weight: bold;
}

.page-slot-games__step-text {
  font-size: 1.05em;
  color: #555555;
  margin-bottom: 15px;
}

.page-slot-games__step-button {
  margin-top: 10px;
}

/* Promotions CTA */
.page-slot-games__cta-center {
  text-align: center;
  margin-top: 40px;
}

/* Benefits List */
.page-slot-games__benefits-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-slot-games__benefits-item {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.page-slot-games__benefits-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 15px;
  /* Images must be at least 200x200px, but these are small icons in HTML. 
     The prompt's image requirements specifically state to avoid small icons, 
     but then provides an example of 60x60px for benefits icons. 
     I will assume the `[GALLERY]` placeholder will provide a larger image 
     that is then scaled down by these CSS rules to fit the icon purpose, 
     or the instruction for small icons in HTML refers to the placeholder's 
     requested dimension, not the displayed dimension. 
     For now, the placeholder requests large images and CSS scales them. */
  min-width: 60px; /* Ensure icon is not too small */
  min-height: 60px;
}

.page-slot-games__benefits-title {
  font-size: 1.4em;
  margin-bottom: 10px;
  color: #017439;
  font-weight: bold;
}

.page-slot-games__benefits-text {
  font-size: 1em;
  color: #555555;
}

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

.page-slot-games__faq-item {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-slot-games__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  font-size: 1.2em;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  background-color: #017439; /* Brand primary color for FAQ question */
  transition: background-color 0.3s ease;
}

.page-slot-games__faq-question:hover {
  background-color: #005a2e;
}

.page-slot-games__faq-toggle {
  font-size: 1.5em;
  line-height: 1;
  transition: transform 0.3s ease;
}

.page-slot-games__faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 25px;
  transition: max-height 0.3s ease, padding 0.3s ease;
  color: #f0f0f0;
}

.page-slot-games__faq-item.active .page-slot-games__faq-answer {
  max-height: 1000px !important; /* Sufficiently large for content */
  padding: 15px 25px;
}

.page-slot-games__faq-item.active .page-slot-games__faq-toggle {
  transform: rotate(45deg);
}

.page-slot-games__faq-answer p {
  margin-bottom: 0;
  font-size: 1em;
  line-height: 1.6;
}

/* Call to Action Section */
.page-slot-games__call-to-action {
  text-align: center;
  padding: 60px 0;
}

.page-slot-games__call-to-action .page-slot-games__section-title {
  color: #ffffff;
}

.page-slot-games__call-to-action .page-slot-games__section-description {
  color: #f0f0f0;
  margin-bottom: 30px;
}

.page-slot-games__call-to-action .page-slot-games__cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .page-slot-games__hero-title {
    font-size: 2.8em;
  }

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

@media (max-width: 768px) {
  .page-slot-games__hero-section {
    padding: 60px 15px;
    padding-top: var(--header-offset, 120px) !important; /* Ensure mobile header offset */
  }

  .page-slot-games__hero-title {
    font-size: 2.2em;
  }

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

  .page-slot-games__hero-buttons {
    flex-direction: column;
    gap: 15px;
    width: 100%;
  }

  .page-slot-games__btn-primary,
  .page-slot-games__btn-secondary {
    width: 100% !important; /* Force full width on mobile */
    max-width: 100% !important;
    padding: 12px 20px !important;
    font-size: 1em !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  .page-slot-games__hero-media {
    padding-bottom: 60%; /* Adjust aspect ratio for mobile video */
  }

  .page-slot-games__introduction-section,
  .page-slot-games__game-types-section,
  .page-slot-games__how-to-play-section,
  .page-slot-games__promotions-section,
  .page-slot-games__benefits-section,
  .page-slot-games__faq-section,
  .page-slot-games__call-to-action {
    padding: 40px 0;
  }

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

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

  .page-slot-games__section-description,
  .page-slot-games__text-block {
    font-size: 0.95em;
    margin-bottom: 25px;
  }

  .page-slot-games__game-grid,
  .page-slot-games__promo-grid,
  .page-slot-games__benefits-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-slot-games__card {
    padding: 20px;
    min-height: auto;
  }

  .page-slot-games__card-image {
    min-height: 150px; /* Ensure content images are still substantial */
  }

  .page-slot-games__card-title {
    font-size: 1.3em;
  }

  .page-slot-games__step-item {
    padding: 20px;
  }

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

  .page-slot-games__step-text {
    font-size: 1em;
  }

  .page-slot-games__benefits-title {
    font-size: 1.2em;
  }

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

  .page-slot-games__faq-answer {
    padding: 0 20px;
  }

  .page-slot-games__faq-item.active .page-slot-games__faq-answer {
    padding: 15px 20px;
  }

  /* Image responsiveness for all img tags within .page-slot-games */
  .page-slot-games img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  /* Video responsiveness for all video tags within .page-slot-games */
  .page-slot-games video,
  .page-slot-games__video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  /* Video container responsiveness */
  .page-slot-games__hero-media,
  .page-slot-games__video-container,
  .page-slot-games__video-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Ensure all content containers are responsive */
  .page-slot-games__section,
  .page-slot-games__card,
  .page-slot-games__container,
  .page-slot-games__hero-content,
  .page-slot-games__how-to-play-section .page-slot-games__container,
  .page-slot-games__promotions-section .page-slot-games__container,
  .page-slot-games__benefits-section .page-slot-games__container,
  .page-slot-games__faq-section .page-slot-games__container,
  .page-slot-games__call-to-action .page-slot-games__container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }

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

@media (max-width: 480px) {
  .page-slot-games__hero-title {
    font-size: 1.8em;
  }

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

  .page-slot-games__hero-media {
    padding-bottom: 75%; /* More vertical space for video on smaller screens */
  }
}