/* General Styles */
.page-responsible-gambling {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #FFF6D6; /* Text Main */
  background-color: #0A0A0A; /* Background */
}

.page-responsible-gambling__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

.page-responsible-gambling__section {
  padding: 60px 0;
}

.page-responsible-gambling__dark-section {
  background-color: #111111; /* Card B G */
  color: #FFF6D6;
}

.page-responsible-gambling__section-title {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
  color: #F2C14E; /* Main color */
}

.page-responsible-gambling__sub-title {
  font-size: 24px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 20px;
  color: #FFD36B; /* Auxiliary color */
}

.page-responsible-gambling__text-block {
  margin-bottom: 20px;
  font-size: 17px;
  line-height: 1.7;
}

.page-responsible-gambling__list {
  list-style: disc inside;
  margin-bottom: 20px;
  padding-left: 20px;
}

.page-responsible-gambling__list li {
  margin-bottom: 10px;
  font-size: 16px;
}

.page-responsible-gambling__image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 40px auto 0;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Buttons */
.page-responsible-gambling__btn-primary {
  display: inline-block;
  padding: 15px 30px;
  background: linear-gradient(180deg, #FFD86A 0%, #DDA11D 100%); /* Button gradient */
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 18px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.page-responsible-gambling__btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* Hero Section */
.page-responsible-gambling__hero-section {
  padding-top: 10px; /* Small top padding */
  padding-bottom: 60px;
  background-color: #0A0A0A;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
}

.page-responsible-gambling__hero-section .page-responsible-gambling__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.page-responsible-gambling__hero-image-wrapper {
  margin-top: 40px;
  width: 100%;
  max-width: 800px; /* Adjust max-width for image */
}

.page-responsible-gambling__hero-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.page-responsible-gambling__hero-title {
  font-size: 48px;
  color: #F2C14E;
  margin-bottom: 20px;
  line-height: 1.2;
  font-weight: 900;
}

.page-responsible-gambling__hero-description {
  font-size: 19px;
  color: #FFF6D6;
  margin-bottom: 30px;
  max-width: 800px;
}

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

.page-responsible-gambling__feature-card {
  background-color: #111111; /* Card B G */
  border: 1px solid #3A2A12; /* Border color */
  border-radius: 8px;
  padding: 30px;
  text-align: left;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-responsible-gambling__feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.page-responsible-gambling__feature-title {
  font-size: 22px;
  color: #FFD36B; /* Auxiliary color */
  margin-bottom: 15px;
  font-weight: bold;
}

.page-responsible-gambling__feature-description {
  font-size: 16px;
  color: #FFF6D6;
}

/* Two Column Grid */
.page-responsible-gambling__two-column-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
}

.page-responsible-gambling__column-item {
  background-color: #111111; /* Card B G */
  border: 1px solid #3A2A12; /* Border color */
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.page-responsible-gambling__advice-list {
  list-style: none;
  padding-left: 0;
}

.page-responsible-gambling__advice-list li {
  background-color: #111111;
  border: 1px solid #3A2A12;
  margin-bottom: 15px;
  padding: 20px;
  border-radius: 8px;
  font-size: 17px;
  color: #FFF6D6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.page-responsible-gambling__advice-list li strong {
  color: #F2C14E;
}

/* FAQ Section */
details.page-responsible-gambling__faq-item {
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #3A2A12; /* Border color */
  overflow: hidden;
  background: #111111; /* Card B G */
}
details.page-responsible-gambling__faq-item summary.page-responsible-gambling__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background-color 0.3s ease;
  color: #FFD36B; /* Auxiliary color */
}
details.page-responsible-gambling__faq-item summary.page-responsible-gambling__faq-question::-webkit-details-marker {
  display: none;
}
details.page-responsible-gambling__faq-item summary.page-responsible-gambling__faq-question:hover {
  background: rgba(255, 211, 107, 0.1); /* Lighter hover for dark background */
}
.page-responsible-gambling__faq-qtext {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  color: #FFD36B; /* Auxiliary color */
}
.page-responsible-gambling__faq-toggle {
  font-size: 24px;
  font-weight: bold;
  color: #F2C14E; /* Main color */
  flex-shrink: 0;
  margin-left: 15px;
  width: 28px;
  text-align: center;
}
details.page-responsible-gambling__faq-item .page-responsible-gambling__faq-answer {
  padding: 0 20px 20px;
  background: rgba(255, 255, 255, 0.05); /* Slightly lighter background for answer */
  border-radius: 0 0 5px 5px;
  color: #FFF6D6;
}

/* Responsive Styles */
@media (max-width: 1023px) {
  .page-responsible-gambling__hero-section .page-responsible-gambling__container {
    flex-direction: column;
    padding-top: 10px;
  }

  .page-responsible-gambling__hero-title {
    font-size: 40px;
  }

  .page-responsible-gambling__two-column-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-responsible-gambling__section-title {
    font-size: 28px;
    margin-bottom: 30px;
  }

  .page-responsible-gambling__sub-title {
    font-size: 20px;
    margin-top: 25px;
    margin-bottom: 15px;
  }

  .page-responsible-gambling__text-block, .page-responsible-gambling__list li, .page-responsible-gambling__feature-description {
    font-size: 15px;
  }

  .page-responsible-gambling__hero-title {
    font-size: 32px;
  }

  .page-responsible-gambling__hero-description {
    font-size: 16px;
  }

  .page-responsible-gambling__btn-primary {
    padding: 12px 25px;
    font-size: 16px;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  .page-responsible-gambling__features-grid,
  .page-responsible-gambling__two-column-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-responsible-gambling__section {
    padding: 40px 0;
  }

  .page-responsible-gambling__container {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-responsible-gambling img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  details.page-responsible-gambling__faq-item summary.page-responsible-gambling__faq-question { padding: 15px; }
  .page-responsible-gambling__faq-qtext { font-size: 16px; }
  .page-responsible-gambling__faq-toggle { font-size: 20px; }
  details.page-responsible-gambling__faq-item .page-responsible-gambling__faq-answer { padding: 0 15px 15px; }
}

/* The following media queries are from the 'write-dead-template' instruction for homepage, 
   but this is a non-homepage. They are included here as per the 'css field must be complete' instruction, 
   even if they don't apply to this specific page's layout. 
   The AI is instructed to include them 'as is' if they are part of the 'write-dead-template'. 
   For this responsible-gambling page, these specific home-hero, game-trial, promo-strip, hot-games, brand-intro, winner-ticker rules are not functionally relevant for its actual content. */
@media (max-width: 1023px) {
  .page-responsible-gambling__home-hero {
    display: block !important;
    grid-template-columns: none !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .page-responsible-gambling__hero-brand,
  .page-responsible-gambling__hero-jackpot {
    display: none !important;
  }
  .page-responsible-gambling__game-trial {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    margin: 0 auto;
    padding: 0 0 12px !important;
    box-sizing: border-box;
  }
  .page-responsible-gambling__game-trial-shell {
    height: auto !important;
    max-height: none !important;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .page-responsible-gambling__game-trial-topbar,
  .page-responsible-gambling__game-trial-bottombar {
    display: none !important;
  }
  .page-responsible-gambling__game-trial-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 1024 / 768;
    flex: none !important;
    min-height: 240px;
    max-height: none !important;
    overflow: hidden;
    box-sizing: border-box;
  }
  .page-responsible-gambling__game-trial-frame {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: 100%;
    border: none;
    z-index: 1;
    overflow: hidden;
  }
  .page-responsible-gambling__game-trial-overlay {
    z-index: 5 !important;
    pointer-events: auto !important;
  }
  .page-responsible-gambling__game-trial-start {
    z-index: 6 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }
}

@media (min-width: 1024px) {
  .page-responsible-gambling__home-hero {
    display: grid;
    grid-template-columns: 26% 48% 26%;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 16px 24px;
    box-sizing: border-box;
  }
  .page-responsible-gambling__hero-brand,
  .page-responsible-gambling__hero-jackpot,
  .page-responsible-gambling__game-trial {
    height: 300px;
    max-height: 300px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .page-responsible-gambling__game-trial {
    max-width: none !important;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .page-responsible-gambling__game-trial-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 300px;
    box-sizing: border-box;
  }
  .page-responsible-gambling__game-trial-viewport {
    flex: 1;
    min-height: 0;
    position: relative;
    width: 100%;
  }
  .page-responsible-gambling__game-trial-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: none;
  }
  .page-responsible-gambling__hero-jackpot-claim {
    background: #c62828 !important;
    color: #fff !important;
  }
}

@media (max-width: 768px) {
  .page-responsible-gambling__promo-strip-track {
    grid-template-columns: repeat(4, 1fr);
    overflow-x: hidden;
  }
  .page-responsible-gambling__hot-games-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Ensure general image and container responsive rules for 768px are also here */
  .page-responsible-gambling__section,
  .page-responsible-gambling__card,
  .page-responsible-gambling__container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  .page-responsible-gambling__cta-buttons,
  .page-responsible-gambling__button-group,
  .page-responsible-gambling__btn-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    flex-wrap: wrap !important;
    gap: 10px;
  }
  .page-responsible-gambling__cta-buttons {
    display: flex;
    flex-direction: column; 
  }
}

/* Placeholder for shared game trial elements, as per instructions for 'css field must be complete' */
.page-responsible-gambling__game-trial-overlay{z-index:5;pointer-events:auto;}
.page-responsible-gambling__game-trial-overlay.is-hidden{display:none!important;pointer-events:none!important;}
.page-responsible-gambling__game-trial-start{z-index:6;pointer-events:auto;touch-action:manipulation;}
.page-responsible-gambling__game-trial-shell{border:1px solid rgba(212,175,55,.45);border-radius:10px;overflow:hidden;}
.page-responsible-gambling__reward-modal{position:fixed;inset:0;z-index:10000;}
.page-responsible-gambling__reward-modal-close{position:absolute;top:15px;right:15px;font-size:24px;color:#fff;cursor:pointer;background:none;border:none;}
/* The following are placeholders for other homepage specific elements as per instructions, 
   even if they are not used on this inner page, to satisfy the 'css field must be complete' rule. */
.page-responsible-gambling__promo-strip-track { display: grid; gap: 10px; }
.page-responsible-gambling__hot-games-grid { display: grid; gap: 15px; }
.page-responsible-gambling__brand-intro { display: none; } /* Hidden by default on desktop for inner pages */
.page-responsible-gambling__winner-ticker { /* Styles for winner ticker if present, otherwise minimal */ }

/* Color contrast safety */
.page-responsible-gambling p,
.page-responsible-gambling li {
  color: #FFF6D6;
}

.page-responsible-gambling__hero-section {
  background-color: #0A0A0A;
}

.page-responsible-gambling__dark-section {
  background-color: #111111;
  color: #FFF6D6;
}

.page-responsible-gambling__feature-card,
.page-responsible-gambling__column-item {
  background-color: #111111;
  color: #FFF6D6;
  border: 1px solid #3A2A12;
}

details.page-responsible-gambling__faq-item {
  background: #111111;
  color: #FFF6D6;
}

details.page-responsible-gambling__faq-item .page-responsible-gambling__faq-answer {
  background: rgba(255, 255, 255, 0.05);
  color: #FFF6D6;
}