/* Base styles for the page-terms-conditions */
.page-terms-conditions {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333333; /* Default text color for light body background */
  background-color: #F5F7FA; /* Background color */
}

.page-terms-conditions__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

.page-terms-conditions__hero-section {
  padding: 40px 0;
  text-align: center;
  background: #E53935; /* Using brand main color for hero section */
  color: #ffffff; /* White text for dark background */
}

.page-terms-conditions__main-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
  color: #ffffff;
}

.page-terms-conditions__intro-text {
  font-size: 18px;
  max-width: 800px;
  margin: 0 auto 30px;
  line-height: 1.5;
  color: #f0f0f0;
}

.page-terms-conditions__content-area {
  padding: 40px 0 60px;
  background: #FFFFFF; /* Card BG for content area */
}

.page-terms-conditions__section-title {
  font-size: 28px;
  font-weight: 600;
  color: #E53935; /* Main brand color for section titles */
  margin-top: 40px;
  margin-bottom: 20px;
  border-bottom: 2px solid #FF5A4F;
  padding-bottom: 10px;
}

.page-terms-conditions__sub-section-title {
  font-size: 22px;
  font-weight: 600;
  color: #333333;
  margin-top: 30px;
  margin-bottom: 15px;
}

.page-terms-conditions p {
  margin-bottom: 15px;
  font-size: 16px;
  color: #333333;
}

.page-terms-conditions ul {
  list-style: disc inside;
  margin-bottom: 15px;
  padding-left: 20px;
}

.page-terms-conditions li {
  margin-bottom: 8px;
  font-size: 16px;
  color: #333333;
}

.page-terms-conditions__image-wrapper {
  margin: 30px 0;
  text-align: center;
}

.page-terms-conditions__hero-image,
.page-terms-conditions__content-image {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.page-terms-conditions__button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
  justify-content: center;
}

.page-terms-conditions__btn-primary,
.page-terms-conditions__btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 25px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
}

.page-terms-conditions__btn-primary {
  background: linear-gradient(180deg, #FF5A4F 0%, #E53935 100%);
  color: #ffffff;
  border: 2px solid transparent;
}

.page-terms-conditions__btn-primary:hover {
  background: linear-gradient(180deg, #E53935 0%, #FF5A4F 100%);
  box-shadow: 0 6px 15px rgba(229, 57, 53, 0.4);
}

.page-terms-conditions__btn-secondary {
  background: #ffffff;
  color: #E53935;
  border: 2px solid #E53935;
}

.page-terms-conditions__btn-secondary:hover {
  background: #E53935;
  color: #ffffff;
  box-shadow: 0 6px 15px rgba(229, 57, 53, 0.4);
}

/* FAQ Section */
details.page-terms-conditions__faq-item {
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  background: #fff;
}
details.page-terms-conditions__faq-item summary.page-terms-conditions__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;
}
details.page-terms-conditions__faq-item summary.page-terms-conditions__faq-question::-webkit-details-marker {
  display: none;
}
details.page-terms-conditions__faq-item summary.page-terms-conditions__faq-question:hover {
  background: #f5f5f5;
}
.page-terms-conditions__faq-qtext {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  color: #333333;
}
.page-terms-conditions__faq-toggle {
  font-size: 24px;
  font-weight: bold;
  color: #666;
  flex-shrink: 0;
  margin-left: 15px;
  width: 28px;
  text-align: center;
}
details.page-terms-conditions__faq-item .page-terms-conditions__faq-answer {
  padding: 0 20px 20px;
  background: #f9f9f9;
  border-radius: 0 0 5px 5px;
  color: #333333;
}

/* Responsive styles */
@media (max-width: 1023px) {
  .page-terms-conditions__hero-section {
    padding: 30px 0;
  }
  .page-terms-conditions__main-title {
    font-size: clamp(24px, 5vw, 40px);
  }
  .page-terms-conditions__intro-text {
    font-size: 16px;
  }
  .page-terms-conditions__section-title {
    font-size: 24px;
  }
  .page-terms-conditions__sub-section-title {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .page-terms-conditions__hero-section {
    padding: 25px 0;
  }
  .page-terms-conditions__main-title {
    font-size: clamp(22px, 6vw, 36px);
  }
  .page-terms-conditions__intro-text {
    font-size: 15px;
    margin-bottom: 20px;
  }
  .page-terms-conditions__content-area {
    padding: 30px 0;
  }
  .page-terms-conditions__section-title {
    font-size: 22px;
    margin-top: 30px;
  }
  .page-terms-conditions__sub-section-title {
    font-size: 18px;
  }
  .page-terms-conditions p,
  .page-terms-conditions li {
    font-size: 15px;
  }
  .page-terms-conditions__image-wrapper {
    margin: 20px 0;
  }
  .page-terms-conditions__container {
    padding: 0 10px;
  }
  .page-terms-conditions__button-group {
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
    align-items: center;
  }
  .page-terms-conditions__btn-primary,
  .page-terms-conditions__btn-secondary {
    width: 90%; /* Adjusted for mobile button width */
    padding: 10px 20px;
    font-size: 16px;
  }
  
  /* Mobile image responsive */
  .page-terms-conditions img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  .page-terms-conditions__section,
  .page-terms-conditions__card,
  .page-terms-conditions__container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 10px !important; /* Adjusted for smaller padding on mobile */
    padding-right: 10px !important;
  }
  /* FAQ specific mobile styles */
  details.page-terms-conditions__faq-item summary.page-terms-conditions__faq-question { padding: 15px; }
  .page-terms-conditions__faq-qtext { font-size: 15px; }
  .page-terms-conditions__faq-answer { padding: 0 15px 15px; }
}

@media (min-width: 1024px) {
  /* No specific styles for this page's content for 1024px+ that aren't already covered by default or above */
}

/* The following media queries are specifically for homepage elements. 
   As this is a terms-conditions page, these blocks are included as per instruction, 
   but their content might be minimal or non-applicable for this specific page. 
   They are here to fulfill the strict output requirement for CSS structure. */
@media (max-width: 1023px) {
  .page-terms-conditions__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-terms-conditions__hero-brand,
  .page-terms-conditions__hero-jackpot {
    display: none !important;
  }
  .page-terms-conditions__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-terms-conditions__game-trial-shell {
    height: auto !important;
    max-height: none !important;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .page-terms-conditions__game-trial-topbar,
  .page-terms-conditions__game-trial-bottombar {
    display: none !important;
  }
  .page-terms-conditions__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-terms-conditions__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-terms-conditions__game-trial-overlay {
    z-index: 5 !important;
    pointer-events: auto !important;
  }
  .page-terms-conditions__game-trial-start {
    z-index: 6 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }
}

@media (min-width: 1024px) {
  .page-terms-conditions__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-terms-conditions__hero-brand,
  .page-terms-conditions__hero-jackpot,
  .page-terms-conditions__game-trial {
    height: 300px;
    max-height: 300px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .page-terms-conditions__game-trial {
    max-width: none !important;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .page-terms-conditions__game-trial-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 300px;
    box-sizing: border-box;
  }
  .page-terms-conditions__game-trial-viewport {
    flex: 1;
    min-height: 0;
    position: relative;
    width: 100%;
  }
  .page-terms-conditions__game-trial-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: none;
  }
  .page-terms-conditions__hero-jackpot-claim {
    background: #c62828 !important;
    color: #fff !important;
  }
  /* Example for other homepage sections, minimal as this is a terms page */
  .page-terms-conditions__promo-strip-track { /* Assuming this is a homepage element */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 15px;
  }
  .page-terms-conditions__hot-games-grid { /* Assuming this is a homepage element */
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 15px;
  }
}

@media (max-width: 768px) {
  /* Homepage specific mobile styles - minimal for a terms page */
  .page-terms-conditions__promo-strip-track {
    grid-template-columns: repeat(2, 1fr) !important; /* Example for 2 columns on mobile */
    gap: 10px !important;
    overflow-x: hidden !important;
  }
  .page-terms-conditions__hot-games-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* Ensure general image and button rules from above are applied with !important */
  /* .page-terms-conditions img { max-width: 100% !important; height: auto !important; } */
  /* .page-terms-conditions__cta-button, .page-terms-conditions__btn-primary { max-width: 100% !important; width: 100% !important; } */
}

/* The following are for specific homepage elements as required to be present in CSS output. 
   They are included for completeness based on the prompt's strict output requirements, 
   even if not directly affecting this terms-conditions page's layout. */
.page-terms-conditions__game-trial-overlay{z-index:5;pointer-events:auto;}
.page-terms-conditions__game-trial-overlay.is-hidden{display:none!important;pointer-events:none!important;}
.page-terms-conditions__game-trial-start{z-index:6;pointer-events:auto;touch-action:manipulation;}
.page-terms-conditions__game-trial-shell{border:1px solid rgba(212,175,55,.45);border-radius:10px;overflow:hidden;}
.page-terms-conditions__reward-modal{position:fixed;inset:0;z-index:10000;}
.page-terms-conditions__reward-modal-close { /* Added for modal close button */
  background: #E53935;
  color: #ffffff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
}

/* Smart contrast and brand color usage */
.page-terms-conditions__dark-bg {
  color: #ffffff; /* Deep background with light text */
  background: #E53935; /* Brand color */
}
.page-terms-conditions__light-bg {
  color: #333333; /* Light background with dark text */
  background: #ffffff;
}
.page-terms-conditions__medium-bg {
  color: #000000; /* Default dark text for medium brightness */
  background: #FF5A4F;
}
.page-terms-conditions__content-area, .page-terms-conditions__text-block {
  color: #333333;
  background: #ffffff;
}
.page-terms-conditions p, .page-terms-conditions li {
  color: #333333;
}
.page-terms-conditions__card {
  background: #ffffff;
  color: #333333;
  border: 1px solid #e0e0e0;
}
.page-terms-conditions__dark-section {
  background: #E53935;
  color: #ffffff;
}
.page-terms-conditions__btn-primary {
  background: linear-gradient(180deg, #FF5A4F 0%, #E53935 100%);
  color: #ffffff;
  border: 2px solid transparent;
}
.page-terms-conditions__btn-secondary {
  background: #ffffff;
  color: #E53935;
  border: 2px solid #E53935;
}

@media (max-width: 768px) {
  .page-terms-conditions {
    font-size: 16px;
    line-height: 1.6;
  }
  .page-terms-conditions__card {
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  /* Force button responsiveness */
  .page-terms-conditions__cta-button,
  .page-terms-conditions__btn-primary,
  .page-terms-conditions__btn-secondary,
  .page-terms-conditions a[class*="button"],
  .page-terms-conditions 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 !important;
    padding-right: 15px !important;
  }
  .page-terms-conditions__cta-buttons,
  .page-terms-conditions__button-group,
  .page-terms-conditions__btn-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    flex-wrap: wrap !important;
    gap: 10px;
  }
  .page-terms-conditions__cta-buttons {
    flex-direction: column !important;
  }
}