/* style/casino.css */
.page-casino {
  font-family: 'Arial', sans-serif;
  color: #ffffff; /* Default text color for dark body background */
  background-color: #1a1a2e; /* Body background from shared.css */
}

.page-casino__hero-section {
  position: relative;
  width: 100%;
  height: 700px; /* Adjust height as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-top: var(--header-offset, 120px);
}

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

.page-casino__hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.page-casino__hero-content {
  position: relative;
  z-index: 3;
  max-width: 900px;
  padding: 20px;
  color: #ffffff;
}

.page-casino__hero-title {
  font-size: 3.5em;
  margin-bottom: 20px;
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.page-casino__hero-description {
  font-size: 1.3em;
  margin-bottom: 30px;
  line-height: 1.5;
  color: #f0f0f0;
}

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

.page-casino__section {
  padding: 80px 20px;
  text-align: center;
}

.page-casino__container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-casino__section-title {
  font-size: 2.5em;
  margin-bottom: 20px;
  color: #ffffff;
}

.page-casino__section-description {
  font-size: 1.1em;
  line-height: 1.7;
  margin-bottom: 40px;
  color: #e0e0e0;
}

/* About Section specific */
.page-casino__about-section .page-casino__section-description {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

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

.page-casino__game-card {
  background: #ffffff; /* Light background for cards */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.page-casino__game-card-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.page-casino__game-card-content {
  padding: 25px;
  color: #333333; /* Dark text for light card background */
}

.page-casino__game-card-title {
  font-size: 1.5em;
  margin-bottom: 15px;
  color: #017439;
}

.page-casino__game-card-link {
  text-decoration: none;
  color: #017439;
  transition: color 0.3s ease;
}

.page-casino__game-card-link:hover {
  color: #005f2c;
}

.page-casino__game-card-text {
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #555555;
}

/* Promotions Section */
.page-casino__promotions-section {
  background-color: #017439; /* Brand color as background */
  color: #ffffff;
}

.page-casino__promotions-section .page-casino__section-title,
.page-casino__promotions-section .page-casino__section-description {
  color: #ffffff;
}

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

.page-casino__promotion-item {
  font-size: 1.2em;
  margin-bottom: 15px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page-casino__promotion-item::before {
  content: '★';
  color: #FFFF00;
  margin-right: 10px;
  font-size: 1.2em;
}

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

.page-casino__feature-card {
  background: rgba(255, 255, 255, 0.08); /* Semi-transparent white on dark bg */
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease;
  color: #ffffff;
}

.page-casino__feature-card:hover {
  background: rgba(255, 255, 255, 0.15);
}

.page-casino__feature-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  display: inline-block;
  filter: invert(1) hue-rotate(180deg) saturate(2);
  /* Note: The filter above is for demonstration IF I had to change color. 
     However, the requirement states NO CSS filter for images, so this should be removed if actual icons are provided. 
     For now, I'll assume these are placeholder icons that need to be visible on dark bg. 
     If actual images are provided, this filter must be removed. 
     Given the strict rule, I will remove the filter and assume the icons are already light/dark as needed.*/
  filter: none; /* STRICTLY REMOVE FILTER AS PER REQUIREMENTS */
}

.page-casino__feature-title {
  font-size: 1.4em;
  margin-bottom: 10px;
  color: #ffffff;
}

.page-casino__feature-text {
  font-size: 0.95em;
  line-height: 1.6;
  color: #e0e0e0;
}

/* Download Guide Section */
.page-casino__download-guide-section {
  background-color: #017439;
  color: #ffffff;
}

.page-casino__download-guide-section .page-casino__section-title,
.page-casino__download-guide-section .page-casino__section-description {
  color: #ffffff;
}

.page-casino__video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  margin: 40px auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.page-casino__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block; /* Ensure it respects max-width/height */
  cursor: pointer;
}

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

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

.page-casino__step-title {
  font-size: 1.3em;
  margin-bottom: 10px;
  color: #FFFF00;
}

.page-casino__step-text {
  font-size: 0.95em;
  line-height: 1.6;
  color: #e0e0e0;
}

.page-casino__download-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 50px;
  flex-wrap: wrap;
}

/* FAQ Section */
.page-casino__faq-section {
  text-align: left;
}

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

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

.page-casino__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.15);
  transition: background 0.3s ease;
}

.page-casino__faq-question:hover {
  background: rgba(255, 255, 255, 0.2);
}

.page-casino__faq-title {
  font-size: 1.2em;
  color: #ffffff;
  margin: 0;
}

.page-casino__faq-toggle {
  font-size: 1.5em;
  color: #FFFF00;
  font-weight: bold;
  transition: transform 0.3s ease;
}

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

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

.page-casino__faq-item.active .page-casino__faq-answer {
  max-height: 1000px !important; /* Ensure it expands sufficiently */
  padding: 15px 25px 25px 25px;
}

.page-casino__faq-text {
  font-size: 1em;
  line-height: 1.6;
  margin: 0;
}

/* CTA Section */
.page-casino__cta-section {
  background-color: #017439;
  color: #ffffff;
}

.page-casino__cta-section .page-casino__section-title,
.page-casino__cta-section .page-casino__section-description {
  color: #ffffff;
}

/* Buttons */
.page-casino__btn-primary,
.page-casino__btn-secondary,
.page-casino__btn-tertiary {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.page-casino__btn-primary {
  background-color: #C30808; /* Custom color for Register/Login */
  color: #FFFF00; /* Custom font color for Register/Login */
  border: 2px solid #C30808;
}

.page-casino__btn-primary:hover {
  background-color: #a00606;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.page-casino__btn-secondary {
  background-color: transparent;
  color: #FFFF00; /* Custom font color for Register/Login */
  border: 2px solid #FFFF00;
}

.page-casino__btn-secondary:hover {
  background-color: #FFFF00;
  color: #C30808;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.page-casino__btn-tertiary {
  background-color: #017439;
  color: #ffffff;
  border: 2px solid #017439;
  padding: 10px 20px;
  font-size: 1em;
  border-radius: 8px;
  box-shadow: none;
}

.page-casino__btn-tertiary:hover {
  background-color: #005f2c;
  transform: translateY(-2px);
}

/* Dark section specific */
.page-casino__dark-section {
  background-color: #017439;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .page-casino__hero-title {
    font-size: 2.8em;
  }
  .page-casino__hero-description {
    font-size: 1.1em;
  }
  .page-casino__section-title {
    font-size: 2em;
  }
  .page-casino__section-description {
    font-size: 1em;
  }
}

@media (max-width: 768px) {
  .page-casino__hero-section {
    height: 600px;
    padding-top: var(--header-offset, 120px) !important; /* Ensure mobile header offset */
  }
  .page-casino__hero-title {
    font-size: 2.2em;
  }
  .page-casino__hero-description {
    font-size: 0.95em;
  }
  .page-casino__hero-cta-buttons {
    flex-direction: column;
    gap: 15px;
  }
  .page-casino__btn-primary,
  .page-casino__btn-secondary,
  .page-casino__btn-tertiary,
  .page-casino a[class*="button"],
  .page-casino 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;
  }
  .page-casino__download-buttons {
    flex-direction: column;
    gap: 15px;
  }
  .page-casino__section {
    padding: 60px 15px;
  }
  .page-casino__container {
    padding-left: 15px;
    padding-right: 15px;
  }
  .page-casino__section-title {
    font-size: 1.8em;
  }
  .page-casino__game-grid,
  .page-casino__feature-grid,
  .page-casino__download-steps {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .page-casino__promotion-item {
    font-size: 1em;
    padding: 10px;
  }
  .page-casino img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  .page-casino__video-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .page-casino video,
  .page-casino__video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  .page-casino__video-section {
    padding-top: var(--header-offset, 120px) !important;
  }
  .page-casino__section,
  .page-casino__card,
  .page-casino__container,
  .page-casino__video-section,
  .page-casino__video-container,
  .page-casino__video-wrapper,
  .page-casino__cta-buttons,
  .page-casino__button-group,
  .page-casino__btn-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden !important; /* Ensure content does not overflow horizontally */
  }
  .page-casino__cta-buttons {
    flex-wrap: wrap !important;
    gap: 10px;
  }
  .page-casino__feature-icon {
    width: 60px;
    height: 60px;
  }
  .page-casino__faq-question {
    padding: 15px 20px;
  }
  .page-casino__faq-title {
    font-size: 1.1em;
  }
  .page-casino__faq-answer {
    padding: 0 20px;
  }
  .page-casino__faq-item.active .page-casino__faq-answer {
    padding: 10px 20px 20px 20px;
  }
}