/* Base styles for the Terms and Conditions page */
.page-terms-conditions {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #ffffff; /* Light text for dark body background */
  background-color: var(--dark-bg-1);
  padding: 20px 0;
}

.page-terms-conditions__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-terms-conditions__hero-intro {
  background-color: #003366;
  padding: 60px 0;
  text-align: center;
  padding-top: 0; /* Assuming shared.css handles body padding-top */
}

.page-terms-conditions__main-title {
  font-size: 38px;
  color: #FFD700;
  margin-bottom: 20px;
  font-weight: 700;
  line-height: 1.2;
  /* Length: 50–60 characters, formula: Brand Keyword + Year + Official Authority + Game Type + Offer + Emoji */
  /* s666 Đăng Nhập 2026 – Nền Tảng Giải Trí An Toàn & Ưu Đãi Độc Quyền! ✨ (~57 characters) */
}

.page-terms-conditions__intro-description {
  font-size: 18px;
  color: #f0f0f0;
  margin-bottom: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  /* Length: 130–160 characters */
  /* Chào mừng bạn đến với s666 đăng nhập, điểm đến hàng đầu cho cá cược trực tuyến và giải trí casino. Chúng tôi cam kết mang đến một môi trường chơi game công bằng, minh bạch và an toàn. Điều khoản dịch vụ này được thiết kế để bảo vệ quyền lợi của tất cả người chơi và đảm bảo trải nghiệm tốt nhất trên nền tảng của chúng tôi. (~298 characters) - This is too long. Let's adjust. */
  /* Adjusted: Chào mừng bạn đến với s666 đăng nhập, nền tảng cá cược trực tuyến hàng đầu. Chúng tôi cam kết môi trường chơi game công bằng, an toàn. Điều khoản này bảo vệ quyền lợi người chơi và đảm bảo trải nghiệm tốt nhất. (~160 characters) */
}

.page-terms-conditions__cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.page-terms-conditions__btn-primary,
.page-terms-conditions__btn-secondary {
  display: inline-block;
  padding: 12px 25px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  white-space: normal; /* Allow text wrapping */
  word-wrap: break-word; /* Allow text wrapping */
}

.page-terms-conditions__btn-primary {
  background-color: #FFD700;
  color: #003366;
  border: 2px solid #FFD700;
}

.page-terms-conditions__btn-primary:hover {
  background-color: #e6c200;
  border-color: #e6c200;
}

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

.page-terms-conditions__btn-secondary:hover {
  background-color: #FFD700;
  color: #003366;
}

.page-terms-conditions__section {
  padding: 40px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.page-terms-conditions__section:last-of-type {
  border-bottom: none;
}

.page-terms-conditions__section-title {
  font-size: 32px;
  color: #FFD700;
  margin-bottom: 25px;
  text-align: center;
}

.page-terms-conditions__sub-title {
  font-size: 24px;
  color: #FFD700;
  margin-top: 30px;
  margin-bottom: 15px;
}

.page-terms-conditions p {
  margin-bottom: 15px;
  color: #f0f0f0;
}

.page-terms-conditions__list {
  list-style-type: disc;
  margin-left: 20px;
  margin-bottom: 20px;
  color: #f0f0f0;
}

.page-terms-conditions__list li {
  margin-bottom: 10px;
}

.page-terms-conditions__list strong {
  color: #FFD700;
}

.page-terms-conditions__image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 30px auto;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* FAQ styles */
.page-terms-conditions__faq-section {
  padding: 60px 0;
  background-color: #003366;
}

.page-terms-conditions__faq-item {
  margin-bottom: 15px;
  border-radius: 5px;
  overflow: hidden;
  background: #0d4780; /* Slightly lighter dark blue for FAQ item background */
}

.page-terms-conditions__faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
  padding: 0 15px;
  opacity: 0;
  color: #f0f0f0;
}

.page-terms-conditions__faq-item.active .page-terms-conditions__faq-answer {
  max-height: 2000px !important;
  padding: 20px 15px !important;
  opacity: 1;
  background: #002244; /* Even darker blue for expanded answer background */
  border-radius: 0 0 5px 5px;
}

.page-terms-conditions__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  background: #003366; /* Brand main color for question background */
  border: 1px solid #004488;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  position: relative;
}

.page-terms-conditions__faq-question:hover {
  background: #004488;
  border-color: #0055aa;
}

.page-terms-conditions__faq-question:active {
  background: #002244;
}

.page-terms-conditions__faq-question h3 {
  margin: 0;
  padding: 0;
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: #FFD700; /* Gold color for question text */
  pointer-events: none;
}

.page-terms-conditions__faq-toggle {
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  color: #FFD700;
  transition: transform 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
  margin-left: 15px;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.page-terms-conditions__faq-item.active .page-terms-conditions__faq-toggle {
  color: #ffffff;
  transform: rotate(45deg); /* Changed to rotate for a different effect */
}

/* Responsive styles */
@media (max-width: 1024px) {
  .page-terms-conditions__main-title {
    font-size: 32px;
  }

  .page-terms-conditions__intro-description {
    font-size: 16px;
  }

  .page-terms-conditions__section-title {
    font-size: 28px;
  }

  .page-terms-conditions__sub-title {
    font-size: 22px;
  }
}

@media (max-width: 768px) {
  /* HERO Intro Section */
  .page-terms-conditions__hero-intro {
    padding: 40px 0;
  }

  .page-terms-conditions__main-title {
    font-size: 28px;
    padding: 0 15px;
  }

  .page-terms-conditions__intro-description {
    font-size: 15px;
    padding: 0 15px;
  }

  .page-terms-conditions__cta-buttons {
    flex-direction: column;
    gap: 15px;
    padding: 0 15px;
  }

  .page-terms-conditions__btn-primary,
  .page-terms-conditions__btn-secondary {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 15px !important;
  }

  /* General Section */
  .page-terms-conditions__section {
    padding: 30px 0;
  }

  .page-terms-conditions__container {
    padding: 0 15px;
  }

  .page-terms-conditions__section-title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .page-terms-conditions__sub-title {
    font-size: 20px;
    margin-top: 25px;
  }

  .page-terms-conditions p,
  .page-terms-conditions__list li {
    font-size: 15px;
  }

  /* Universal Image Responsiveness */
  .page-terms-conditions img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }
  
  /* Content area containers for mobile overflow prevention */
  .page-terms-conditions__section,
  .page-terms-conditions__container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }

  /* FAQ Section */
  .page-terms-conditions__faq-section {
    padding: 40px 0;
  }

  .page-terms-conditions__faq-question {
    padding: 15px;
    flex-wrap: wrap;
  }

  .page-terms-conditions__faq-question h3 {
    font-size: 15px;
    margin-bottom: 0;
    width: calc(100% - 40px);
  }

  .page-terms-conditions__faq-toggle {
    margin-left: 10px;
    width: 24px;
    height: 24px;
    font-size: 20px;
  }

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

  .page-terms-conditions__faq-item.active .page-terms-conditions__faq-answer {
    padding: 15px !important;
  }
}