/* style/casino.css */

/* Custom Colors */
:root {
  --page-casino-bg: #08160F;
  --page-casino-card-bg: #11271B;
  --page-casino-text-main: #F2FFF6;
  --page-casino-text-secondary: #A7D9B8;
  --page-casino-border: #2E7A4E;
  --page-casino-btn-gradient: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
  --page-casino-glow: #57E38D;
  --page-casino-gold: #F2C14E;
  --page-casino-divider: #1E3A2A;
  --page-casino-deep-green: #0A4B2C;
}

/* Main Page Styles */
.page-casino {
  background-color: var(--page-casino-bg); /* Dark background */
  color: var(--page-casino-text-main); /* Light text for contrast */
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

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

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

.page-casino__hero-image-wrapper {
  width: 100%;
  max-height: 700px; /* Limit hero image height */
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-casino__hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: brightness(0.7); /* Darken image slightly for text readability */
}

.page-casino__hero-content {
  position: absolute;
  z-index: 10;
  max-width: 800px;
  padding: 20px;
  color: var(--page-casino-text-main);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* IMPORTANT: No text overlapping the image, this is just for absolute positioning within its wrapper. */
  /* The text is actually below the image due to DOM order and the image being in its own wrapper. */
  /* This absolute positioning is for a typical hero overlay, but the DOM order rule is paramount. */
  /* The current DOM order for hero is image-wrapper THEN content, so this absolute positioning is not strictly overlapping. */
  /* The image is contained in a separate wrapper, so text won't directly overlap the image element itself. */
  /* For this specific setup, the absolute positioning is used to center the content within the hero section, but it is effectively 'below' the image visually due to the image taking up the top space. */
}

/* To correctly apply the "image above text" rule, the hero-content should not be absolutely positioned directly over the image. */
/* Re-adjusting hero section for strict 'image above text' */
.page-casino__hero-section {
  position: relative;
  display: flex;
  flex-direction: column; /* Stacks image then content */
  align-items: center;
  justify-content: flex-start; /* Aligns content to top */
  text-align: center;
  overflow: hidden;
  padding-top: 10px;
  padding-bottom: 60px;
}

.page-casino__hero-image-wrapper {
  width: 100%;
  max-height: 600px; /* Adjust height for visual balance */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px; /* Space between image and text */
}

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

.page-casino__hero-content {
  position: static; /* No absolute positioning */
  transform: none; /* No transform */
  max-width: 800px;
  padding: 0 20px;
  color: var(--page-casino-text-main);
  margin-top: -60px; /* Pull content up slightly to overlap the bottom of the image for visual flow, but not text over image */
  z-index: 1;
}

.page-casino__main-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--page-casino-gold);
  line-height: 1.2;
}

.page-casino__description {
  font-size: 1.15rem;
  margin-bottom: 30px;
  color: var(--page-casino-text-secondary);
}

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

.page-casino__btn-primary,
.page-casino__btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: normal;
  word-wrap: break-word;
  box-sizing: border-box;
  max-width: 100%;
}

.page-casino__btn-primary {
  background: var(--page-casino-btn-gradient);
  color: var(--page-casino-text-main);
  border: 2px solid transparent;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.page-casino__btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.page-casino__btn-secondary {
  background-color: transparent;
  color: var(--page-casino-gold);
  border: 2px solid var(--page-casino-gold);
}

.page-casino__btn-secondary:hover {
  background-color: var(--page-casino-gold);
  color: var(--page-casino-bg);
  transform: translateY(-2px);
}

/* General Section Styles */
.page-casino__section-title {
  font-size: 2.5rem;
  color: var(--page-casino-text-main);
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

.page-casino__section-intro {
  font-size: 1.1rem;
  color: var(--page-casino-text-secondary);
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px auto;
}

/* About Section */
.page-casino__about-section,
.page-casino__games-section,
.page-casino__promotions-section,
.page-casino__login-guide-section,
.page-casino__faq-section,
.page-casino__cta-bottom-section {
  padding: 80px 0;
}

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

.page-casino__feature-item {
  background-color: var(--page-casino-card-bg);
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--page-casino-border);
}

.page-casino__feature-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
  display: block;
}

.page-casino__feature-title {
  font-size: 1.6rem;
  color: var(--page-casino-gold);
  margin-bottom: 10px;
}

.page-casino__feature-description {
  font-size: 1rem;
  color: var(--page-casino-text-secondary);
}

/* Games Section */
.page-casino__game-category {
  margin-bottom: 60px;
}

.page-casino__game-title {
  font-size: 2rem;
  color: var(--page-casino-text-main);
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.page-casino__game-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: var(--page-casino-gold);
  margin: 10px auto 0 auto;
  border-radius: 2px;
}

.page-casino__game-card {
  background-color: var(--page-casino-card-bg);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--page-casino-border);
}

.page-casino__game-card:nth-child(even) {
  flex-direction: row-reverse; /* Alternate image/text order */
}

.page-casino__game-card img {
  width: 50%;
  height: 350px;
  object-fit: cover;
  display: block;
}

.page-casino__game-content {
  width: 50%;
  padding: 40px;
  color: var(--page-casino-text-secondary);
}

.page-casino__game-content p {
  margin-bottom: 25px;
  font-size: 1.05rem;
}

.page-casino__game-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

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

.page-casino__promo-card {
  background-color: var(--page-casino-card-bg);
  padding-bottom: 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--page-casino-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.page-casino__promo-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  margin-bottom: 20px;
  display: block;
}

.page-casino__promo-title {
  font-size: 1.5rem;
  color: var(--page-casino-gold);
  margin-bottom: 15px;
  padding: 0 20px;
}

.page-casino__promo-description {
  font-size: 0.95rem;
  color: var(--page-casino-text-secondary);
  margin-bottom: 25px;
  flex-grow: 1;
  padding: 0 20px;
}

.page-casino__promo-card .page-casino__btn-primary {
  margin: 0 auto;
}

/* Login Guide Section */
.page-casino__guide-steps {
  display: flex;
  justify-content: space-around;
  gap: 30px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.page-casino__step-item {
  background-color: var(--page-casino-card-bg);
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  flex: 1;
  min-width: 280px;
  max-width: 350px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--page-casino-border);
}

.page-casino__step-title {
  font-size: 1.6rem;
  color: var(--page-casino-gold);
  margin-bottom: 15px;
}

.page-casino__step-description {
  font-size: 1rem;
  color: var(--page-casino-text-secondary);
}

.page-casino__highlight-text {
  color: var(--page-casino-gold);
  font-weight: bold;
}

.page-casino__guide-cta {
  margin-top: 50px;
  text-align: center;
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

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

.page-casino__faq-item {
  background-color: var(--page-casino-card-bg);
  margin-bottom: 15px;
  border-radius: 8px;
  border: 1px solid var(--page-casino-border);
  overflow: hidden;
}

.page-casino__faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--page-casino-text-main);
  position: relative;
}

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

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

.page-casino__faq-qtext {
  flex-grow: 1;
  color: var(--page-casino-gold);
}

.page-casino__faq-toggle {
  font-size: 1.8rem;
  line-height: 1;
  color: var(--page-casino-gold);
  transition: transform 0.3s ease;
}

.page-casino__faq-item[open] .page-casino__faq-toggle {
  transform: rotate(45deg); /* Plus sign rotates to X or simply changes to minus */
}

.page-casino__faq-answer {
  padding: 0 25px 20px 25px;
  font-size: 1rem;
  color: var(--page-casino-text-secondary);
}

.page-casino__faq-answer p {
  margin-bottom: 15px;
}

.page-casino__faq-answer .page-casino__btn-secondary {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 0.9rem;
  display: inline-flex;
}

/* Call to Action Bottom Section */
.page-casino__cta-bottom-section {
  background-color: var(--page-casino-deep-green);
  text-align: center;
  padding: 80px 20px;
}

.page-casino__cta-bottom-section .page-casino__section-title {
  color: var(--page-casino-text-main);
}

.page-casino__cta-bottom-section .page-casino__section-intro {
  color: var(--page-casino-text-secondary);
  margin-bottom: 50px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .page-casino__game-card {
    flex-direction: column;
  }

  .page-casino__game-card:nth-child(even) {
    flex-direction: column;
  }

  .page-casino__game-card img,
  .page-casino__game-content {
    width: 100%;
  }

  .page-casino__game-card img {
    height: 300px;
  }

  .page-casino__game-content {
    padding: 30px;
  }
}

@media (max-width: 768px) {
  .page-casino__hero-section {
    padding-bottom: 40px;
  }

  .page-casino__hero-image-wrapper {
    max-height: 400px;
  }

  .page-casino__hero-content {
    margin-top: -30px;
    padding: 0 15px;
  }

  .page-casino__main-title {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }

  .page-casino__description {
    font-size: 1rem;
  }

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

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

  .page-casino__section-title {
    font-size: 2rem;
    padding: 0 15px;
  }

  .page-casino__section-intro {
    font-size: 0.95rem;
    padding: 0 15px;
  }

  .page-casino__about-section,
  .page-casino__games-section,
  .page-casino__promotions-section,
  .page-casino__login-guide-section,
  .page-casino__faq-section,
  .page-casino__cta-bottom-section {
    padding: 50px 0;
  }

  .page-casino__container {
    padding: 0 15px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }

  /* Images responsiveness */
  .page-casino img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  .page-casino__section,
  .page-casino__card,
  .page-casino__container,
  .page-casino__hero-image-wrapper,
  .page-casino__game-card,
  .page-casino__promo-card,
  .page-casino__step-item,
  .page-casino__faq-item,
  .page-casino__cta-bottom-section {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* Ensure no overflow */
  }

  .page-casino__hero-section {
    padding-top: 10px !important;
  }

  .page-casino__game-card img {
    height: 250px;
  }

  .page-casino__game-content {
    padding: 20px;
  }

  .page-casino__promo-card img {
    
  }

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

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

@media (max-width: 480px) {
  .page-casino__main-title {
    font-size: clamp(1.8rem, 9vw, 2.5rem);
  }

  .page-casino__description {
    font-size: 0.9rem;
  }

  .page-casino__btn-primary,
  .page-casino__btn-secondary {
    font-size: 1rem;
    padding: 12px 20px;
  }

  .page-casino__section-title {
    font-size: 1.8rem;
  }

  .page-casino__game-card img {
    height: 200px;
  }
}