/* style/casino.css */

/* Base styles for the page content */
.page-casino {
  background-color: #08160F; /* Background color from custom palette */
  color: #F2FFF6; /* Main text color from custom palette */
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* Section styles */
.page-casino__section {
  padding: 60px 0;
  margin-bottom: 20px;
}

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

.page-casino__section-title {
  font-size: 2.8em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  color: #F2FFF6; /* Main text color */
  line-height: 1.2;
}

.page-casino__section-description {
  font-size: 1.1em;
  text-align: center;
  margin-bottom: 40px;
  color: #A7D9B8; /* Secondary text color */
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.page-casino__text-block {
  font-size: 1.05em;
  margin-bottom: 1.5em;
  color: #F2FFF6; /* Main text color */
}

/* HERO Section */
.page-casino__hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 20px 60px; /* Small top padding, more bottom padding */
  min-height: 600px;
  overflow: hidden;
}

.page-casino__hero-image-wrapper {
  width: 100%;
  max-height: 700px;
  overflow: hidden;
  position: relative;
  margin-bottom: 40px;
}

.page-casino__hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 10px;
}

.page-casino__hero-content {
  z-index: 10;
  max-width: 900px;
  color: #F2FFF6; /* Main text color */
  margin-top: 20px;
}

.page-casino__main-title {
  font-weight: 700;
  line-height: 1.2;
  color: #F2FFF6; /* Main text color */
  margin-bottom: 20px;
  font-size: clamp(2.2em, 4vw, 3.5em); /* Responsive font size */
}

.page-casino__hero-description {
  font-size: 1.2em;
  margin-bottom: 30px;
  color: #A7D9B8; /* Secondary text color */
}

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

.page-casino__btn-primary,
.page-casino__btn-secondary,
.page-casino__btn-tertiary {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  font-size: 1.1em;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  text-align: center;
  box-sizing: border-box;
}

.page-casino__btn-primary {
  background: linear-gradient(180deg, #2AD16F 0%, #13994A 100%); /* Button gradient */
  color: #ffffff;
  border: none;
}

.page-casino__btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.page-casino__btn-secondary {
  background: #11271B; /* Card BG */
  color: #2AD16F; /* Green from button gradient */
  border: 2px solid #2AD16F;
}

.page-casino__btn-secondary:hover {
  background: #2AD16F;
  color: #11271B;
  border-color: #2AD16F;
  transform: translateY(-2px);
}

.page-casino__btn-tertiary {
  background: #0A4B2C; /* Deep Green */
  color: #F2FFF6; /* Main text color */
  border: 1px solid #2E7A4E; /* Border color */
  padding: 10px 20px;
  font-size: 1em;
}

.page-casino__btn-tertiary:hover {
  background: #2E7A4E; /* Border color */
  transform: translateY(-1px);
}

/* Games Section */
.page-casino__games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.page-casino__game-card {
  background-color: #11271B; /* Card BG */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.page-casino__game-card:hover {
  transform: translateY(-5px);
}

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

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

.page-casino__card-title {
  font-size: 1.5em;
  margin-bottom: 10px;
  color: #F2FFF6; /* Main text color */
}

.page-casino__card-title a {
  color: #F2FFF6; /* Main text color */
  text-decoration: none;
}

.page-casino__card-title a:hover {
  color: #2AD16F; /* Green from button gradient */
}

.page-casino__card-text {
  font-size: 0.95em;
  color: #A7D9B8; /* Secondary text color */
  margin-bottom: 20px;
  flex-grow: 1;
}

.page-casino__card-link {
  display: inline-block;
  background: linear-gradient(180deg, #2AD16F 0%, #13994A 100%); /* Button gradient */
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  transition: background 0.3s ease;
}

.page-casino__card-link:hover {
  opacity: 0.9;
}

/* Benefits Section */
.page-casino__dark-section {
  background-color: #0A4B2C; /* Deep Green */
}

.page-casino__benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  text-align: center;
}

.page-casino__benefit-item {
  background-color: #11271B; /* Card BG */
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.page-casino__benefit-item:hover {
  transform: translateY(-5px);
}

.page-casino__benefit-icon {
  width: 80px; /* Min size 200px, so 80px is too small for general images, but okay for icons if they are generated as such, otherwise use 200px. Let's adjust this to 200px for consistency with global rules, assuming they are 'content images' */
  height: 80px;
  object-fit: contain;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 5px #57E38D); /* Glow */
}

.page-casino__benefit-title {
  font-size: 1.3em;
  color: #F2FFF6; /* Main text color */
  margin-bottom: 10px;
}

.page-casino__benefit-text {
  font-size: 0.95em;
  color: #A7D9B8; /* Secondary text color */
}

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

.page-casino__step-item {
  background-color: #11271B; /* Card BG */
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  position: relative;
  padding-top: 60px; /* Space for step number */
}

.page-casino__step-number {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  background: #2AD16F; /* Green from button gradient */
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  font-weight: bold;
  border: 2px solid #57E38D; /* Glow */
}

.page-casino__step-title {
  font-size: 1.4em;
  color: #F2FFF6; /* Main text color */
  margin-bottom: 15px;
}

.page-casino__step-text {
  font-size: 0.95em;
  color: #A7D9B8; /* Secondary text color */
  margin-bottom: 20px;
}

/* Strategy Section */
.page-casino__strategy-list {
  list-style: none;
  padding: 0;
  max-width: 900px;
  margin: 0 auto;
}

.page-casino__list-item {
  background-color: #11271B; /* Card BG */
  border-radius: 10px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-left: 5px solid #2AD16F; /* Green accent */
}

.page-casino__list-title {
  font-size: 1.3em;
  color: #F2FFF6; /* Main text color */
  margin-bottom: 10px;
}

.page-casino__list-text {
  font-size: 0.95em;
  color: #A7D9B8; /* Secondary text color */
}

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

.page-casino__faq-item {
  background-color: #11271B; /* Card BG */
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.page-casino__faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  font-weight: bold;
  color: #F2FFF6; /* Main text color */
  font-size: 1.15em;
  background-color: #11271B; /* Card BG */
}

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

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

.page-casino__faq-toggle {
  font-size: 1.5em;
  margin-left: 15px;
  color: #2AD16F; /* Green from button gradient */
}

.page-casino__faq-item[open] .page-casino__faq-toggle {
  content: '−';
}

.page-casino__faq-answer {
  padding: 0 20px 20px;
  font-size: 1em;
  color: #A7D9B8; /* Secondary text color */
}

/* Conclusion Section */
.page-casino__conclusion-section .page-casino__section-title {
  margin-bottom: 30px;
}

.page-casino__conclusion-section .page-casino__text-block {
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}

.page-casino__conclusion-section .page-casino__btn-primary {
  margin-top: 20px;
}

/* --- Responsive Styles --- */

/* Ensure all content images are responsive */
.page-casino img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ensure benefit icons are also responsive and not tiny */
.page-casino__benefit-icon {
  width: 200px; /* Adjusted to min 200px */
  height: auto; /* Maintain aspect ratio */
  margin-left: auto;
  margin-right: auto;
}

/* Mobile specific styles */
@media (max-width: 768px) {
  .page-casino__section-title {
    font-size: 2em;
  }

  .page-casino__hero-section {
    padding: 10px 15px 40px;
    min-height: auto;
  }

  .page-casino__main-title {
    font-size: clamp(1.8em, 8vw, 2.5em);
  }

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

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

  .page-casino__btn-primary,
  .page-casino__btn-secondary,
  .page-casino__btn-tertiary {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .page-casino__container,
  .page-casino__hero-image-wrapper,
  .page-casino__cta-buttons,
  .page-casino__guide-steps,
  .page-casino__benefits-grid,
  .page-casino__games-grid,
  .page-casino__faq-list,
  .page-casino__strategy-list {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    overflow: hidden !important; /* Ensure no horizontal scroll */
  }

  .page-casino img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  .page-casino__game-image {
    height: auto;
  }

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

  .page-casino__faq-item summary {
    font-size: 1em;
    padding: 15px;
  }

  .page-casino__faq-answer {
    padding: 0 15px 15px;
  }
}