/* style/casino.css */

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

/* Base Styles - for dark body background */
.page-casino {
  font-family: 'Arial', sans-serif;
  color: var(--page-casino-text-main); /* Light text for dark background */
  background-color: var(--page-casino-background); /* Ensure consistency */
}

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

.page-casino__section-title {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--page-casino-gold);
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

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

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

.page-casino__hero-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

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

.page-casino__hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.4); /* Semi-transparent background for text */
  border-radius: 10px;
}

.page-casino__main-title {
  font-weight: 800;
  color: var(--page-casino-gold);
  margin-bottom: 15px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-shadow: 0 0 10px rgba(242, 193, 78, 0.5);
  /* H1 font-size clamp */
  font-size: clamp(2.5rem, 5vw, 3.8rem);
}

.page-casino__hero-description {
  font-size: 1.2rem;
  color: var(--page-casino-text-main);
  margin-bottom: 30px;
  line-height: 1.6;
}

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

/* Buttons */
.page-casino__btn-primary,
.page-casino__btn-secondary,
.page-casino__btn-tertiary {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-sizing: border-box;
  text-align: center;
}

.page-casino__btn-primary {
  background: var(--page-casino-button-gradient);
  color: #ffffff;
  border: 2px solid var(--page-casino-primary);
  box-shadow: 0 4px 15px rgba(17, 168, 78, 0.4);
}

.page-casino__btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(17, 168, 78, 0.6);
}

.page-casino__btn-secondary {
  background: transparent;
  color: var(--page-casino-primary);
  border: 2px solid var(--page-casino-primary);
  box-shadow: 0 4px 10px rgba(17, 168, 78, 0.2);
}

.page-casino__btn-secondary:hover {
  background: var(--page-casino-primary);
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(17, 168, 78, 0.4);
}

.page-casino__btn-tertiary {
  background-color: var(--page-casino-deep-green);
  color: var(--page-casino-text-main);
  border: 1px solid var(--page-casino-border);
}

.page-casino__btn-tertiary:hover {
  background-color: var(--page-casino-primary);
  color: #ffffff;
}

/* Video Section */
.page-casino__video-section {
  padding: 60px 20px;
  padding-top: 10px; /* Small top padding */
  text-align: center;
  background-color: var(--page-casino-background);
}

.page-casino__video-container {
  width: 100%; /* Desktop width */
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
}

.page-casino__video-link {
  display: block;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  margin-top: 30px;
}

.page-casino__video {
  width: 100%;
  height: auto;
  display: block;
}

/* Feature Section */
.page-casino__feature-section {
  padding: 80px 0;
  background-color: var(--page-casino-deep-green);
}

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

.page-casino__feature-card {
  background-color: var(--page-casino-card-bg);
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--page-casino-border);
  transition: transform 0.3s ease;
  color: var(--page-casino-text-main);
}

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

.page-casino__feature-icon {
  width: 100%; /* Ensure images are responsive */
  max-width: 100px;
  height: auto;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.page-casino__card-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--page-casino-gold);
  margin-bottom: 10px;
}

.page-casino__card-text {
  font-size: 1rem;
  color: var(--page-casino-text-secondary);
  line-height: 1.6;
}

/* Games Overview Section (Light Background for Contrast) */
.page-casino__games-overview {
  padding: 80px 0;
  background-color: #ffffff; /* Explicit light background */
  color: #333333; /* Dark text for light background */
}

.page-casino__games-overview .page-casino__section-title,
.page-casino__games-overview .page-casino__section-description {
  color: #333333;
}

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

.page-casino__game-card {
  background-color: #f8f8f8;
  border-radius: 10px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
  transition: transform 0.3s ease;
  color: #333333;
}

.page-casino__game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.page-casino__game-image {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
}

.page-casino__cta-center {
  text-align: center;
  margin-top: 50px;
}

/* Live Experience Section */
.page-casino__live-experience {
  padding: 80px 0;
  background-color: var(--page-casino-background);
}

.page-casino__live-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  margin-top: 50px;
}

.page-casino__live-image {
  flex: 1 1 500px;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.page-casino__live-features {
  flex: 1 1 300px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-casino__live-features li {
  font-size: 1.1rem;
  color: var(--page-casino-text-main);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.page-casino__live-features li:last-child {
  margin-bottom: 0;
}

.page-casino__icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 15px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(285deg) brightness(100%) contrast(100%); /* Example filter for icon color */
}

/* Specific icons - using background-image or SVG for more control */
.page-casino__icon--dealer { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23F2FFF6" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>'); }
.page-casino__icon--hd-stream { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23F2FFF6" viewBox="0 0 24 24"><path d="M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-6v2h-3v3h-2v-3H8v-2h3V8h2v3h3z"/></svg>'); }
.page-casino__icon--interaction { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23F2FFF6" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-2-9h4v2h-4v-2zm0-4h4v2h-4V7zm6 8h-4v2h4v-2z"/></svg>'); }
.page-casino__icon--authentic { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23F2FFF6" viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg>'); }
.page-casino__icon--betting { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23F2FFF6" viewBox="0 0 24 24"><path d="M19 8h-1V3H6v5H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H7V4h10v6z"/></svg>'); }
.page-casino__icon--ssl { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23F2FFF6" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2z"/></svg>'); }
.page-casino__icon--rng { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23F2FFF6" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-2-9h4v2h-4v-2zm0-4h4v2h-4V7zm6 8h-4v2h4v-2z"/></svg>'); }
.page-casino__icon--license { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23F2FFF6" viewBox="0 0 24 24"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>'); }
.page-casino__icon--responsible { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23F2FFF6" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2h1l.06-.01L12 17c1.1 0 2-.9 2-2v-1l4.79-5.74c.13.58.21 1.17.21 1.79 0 4.08-3.05 7.44-7 7.93zM12 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm-2 9h4V7h-4v6z"/></svg>'); }
.page-casino__icon--audit { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23F2FFF6" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm-2 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm4-8V4.5L19.5 9H16z"/></svg>'); }

/* Promotions Section */
.page-casino__promotions-section {
  padding: 80px 0;
  background-color: var(--page-casino-deep-green);
}

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

.page-casino__promo-card {
  background-color: var(--page-casino-card-bg);
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--page-casino-border);
  color: var(--page-casino-text-main);
  text-align: center;
}

/* How to Start Section (Light Background for Contrast) */
.page-casino__how-to-start {
  padding: 80px 0;
  background-color: #ffffff; /* Explicit light background */
  color: #333333; /* Dark text for light background */
}

.page-casino__how-to-start .page-casino__section-title,
.page-casino__how-to-start .page-casino__section-description {
  color: #333333;
}

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

.page-casino__step-card {
  background-color: #f8f8f8;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
  color: #333333;
}

.page-casino__step-icon {
  width: 100%; /* Ensure images are responsive */
  max-width: 150px;
  height: auto;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

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

/* Security Section */
.page-casino__security-section {
  padding: 80px 0;
  background-color: var(--page-casino-background);
}

.page-casino__security-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  margin-top: 50px;
}

.page-casino__security-image {
  flex: 1 1 400px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.page-casino__security-list {
  flex: 1 1 300px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-casino__security-list li {
  font-size: 1.1rem;
  color: var(--page-casino-text-main);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

/* FAQ Section (Light Background for Contrast) */
.page-casino__faq-section {
  padding: 80px 0;
  background-color: #ffffff; /* Explicit light background */
  color: #333333; /* Dark text for light background */
}

.page-casino__faq-section .page-casino__section-title,
.page-casino__faq-section .page-casino__section-description {
  color: #333333;
}

.page-casino__faq-list {
  max-width: 800px;
  margin: 50px auto 0;
}

.page-casino__faq-item {
  background-color: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
}

.page-casino__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 25px;
  font-size: 1.15rem;
  font-weight: 600;
  color: #333333;
  cursor: pointer;
  background-color: #f0f0f0;
  transition: background-color 0.3s ease;
  list-style: none; /* For details/summary */
}

.page-casino__faq-question::-webkit-details-marker {
  display: none; /* Hide default marker for webkit browsers */
}

.page-casino__faq-question:hover {
  background-color: #e0e0e0;
}

.page-casino__faq-toggle {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--page-casino-primary);
  line-height: 1;
  margin-left: 15px;
}

.page-casino__faq-answer {
  padding: 0 25px 20px;
  font-size: 1rem;
  color: #555555;
  line-height: 1.6;
}

/* Final CTA Section */
.page-casino__cta-final {
  padding: 80px 0;
  text-align: center;
  background-color: var(--page-casino-deep-green);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .page-casino__section-title {
    font-size: 2.2rem;
  }

  .page-casino__hero-section {
    min-height: 500px;
  }
}

@media (max-width: 768px) {
  .page-casino__hero-section {
    min-height: 400px;
    padding: 10px 15px 40px; /* Adjust padding for mobile */
  }

  .page-casino__hero-content {
    padding: 15px;
  }

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

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

  .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;
    padding-right: 15px;
  }

  .page-casino__video-section,
  .page-casino__feature-section,
  .page-casino__games-overview,
  .page-casino__live-experience,
  .page-casino__promotions-section,
  .page-casino__how-to-start,
  .page-casino__security-section,
  .page-casino__faq-section,
  .page-casino__cta-final {
    padding: 40px 0;
  }

  .page-casino__container {
    padding: 0 15px;
  }

  .page-casino__section-title {
    font-size: 1.8rem;
    margin-bottom: 15px;
  }

  .page-casino__section-description {
    font-size: 0.95rem;
    margin-bottom: 30px;
  }

  .page-casino img {
    max-width: 100% !important;
    height: auto !important;
    display: block !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: 10px !important;
  }

  .page-casino__video-container,
  .page-casino__feature-grid,
  .page-casino__game-cards-grid,
  .page-casino__promo-grid,
  .page-casino__steps-grid,
  .page-casino__live-content,
  .page-casino__security-content {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden !important;
  }

  .page-casino__live-content,
  .page-casino__security-content {
    flex-direction: column;
  }

  .page-casino__live-image,
  .page-casino__security-image {
    flex: none;
    width: 100%;
  }

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

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

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

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

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