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

.page-vip-center-levels-privileges {
  background-color: var(--bg-color);
  color: var(--text-main-color);
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  padding-bottom: 50px; /* Add some padding to the bottom of the main content */
}

.page-vip-center-levels-privileges__hero-section {
  position: relative;
  width: 100%;
  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-vip-center-levels-privileges__hero-image-wrapper {
  width: 100%;
  max-height: 700px; /* Limit height for hero image */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-vip-center-levels-privileges__hero-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.page-vip-center-levels-privileges__hero-content {
  position: relative;
  z-index: 10;
  padding: 20px;
  max-width: 900px;
  margin-top: 40px; /* Space between image and content */
}

.page-vip-center-levels-privileges__main-title {
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  color: var(--gold-color);
  margin-bottom: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 0 10px rgba(242, 193, 78, 0.5);
}

.page-vip-center-levels-privileges__intro-text {
  font-size: 1.25rem;
  color: var(--text-main-color);
  margin-bottom: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

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

.page-vip-center-levels-privileges__btn-primary,
.page-vip-center-levels-privileges__btn-secondary {
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
}

.page-vip-center-levels-privileges__btn-primary {
  background: var(--button-gradient);
  color: var(--text-main-color);
  border: 2px solid transparent;
}

.page-vip-center-levels-privileges__btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(42, 209, 111, 0.4);
}

.page-vip-center-levels-privileges__btn-secondary {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.page-vip-center-levels-privileges__btn-secondary:hover {
  background: var(--primary-color);
  color: var(--text-main-color);
  transform: translateY(-3px);
}

.page-vip-center-levels-privileges__section {
  padding: 60px 20px;
  text-align: center;
}

.page-vip-center-levels-privileges__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

.page-vip-center-levels-privileges__section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--gold-color);
  margin-bottom: 40px;
  font-weight: 700;
}

.page-vip-center-levels-privileges__paragraph {
  font-size: 1.1rem;
  color: var(--text-secondary-color);
  margin-bottom: 20px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.page-vip-center-levels-privileges__about-vip {
  background-color: var(--deep-green-color);
}

.page-vip-center-levels-privileges__vip-levels {
  background-color: var(--bg-color);
}

.page-vip-center-levels-privileges__level-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-vip-center-levels-privileges__card {
  background-color: var(--card-bg-color);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-vip-center-levels-privileges__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px var(--glow-color);
}

.page-vip-center-levels-privileges__card-icon {
  width: 150px;
  height: 150px;
  object-fit: contain;
  margin-bottom: 20px;
  border-radius: 50%; /* Make icons circular if desired */
  border: 3px solid var(--gold-color);
  padding: 10px;
  background-color: var(--deep-green-color);
}

.page-vip-center-levels-privileges__card-title {
  font-size: 1.6rem;
  color: var(--gold-color);
  margin-bottom: 15px;
  font-weight: 600;
}

.page-vip-center-levels-privileges__card-description {
  font-size: 1rem;
  color: var(--text-secondary-color);
  flex-grow: 1;
}

.page-vip-center-levels-privileges__note {
  margin-top: 40px;
  font-style: italic;
  color: var(--text-secondary-color);
}

.page-vip-center-levels-privileges__detailed-privileges {
  background-color: var(--deep-green-color);
}

.page-vip-center-levels-privileges__table-wrapper {
  overflow-x: auto;
  margin-top: 40px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.page-vip-center-levels-privileges__privilege-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px; /* Ensure table is wide enough for content */
}

.page-vip-center-levels-privileges__privilege-table th,
.page-vip-center-levels-privileges__privilege-table td {
  padding: 15px 20px;
  border: 1px solid var(--divider-color);
  text-align: left;
  font-size: 1rem;
}

.page-vip-center-levels-privileges__privilege-table th {
  background-color: var(--primary-color);
  color: var(--text-main-color);
  font-weight: bold;
  text-transform: uppercase;
}

.page-vip-center-levels-privileges__privilege-table td {
  background-color: var(--card-bg-color);
  color: var(--text-secondary-color);
}

.page-vip-center-levels-privileges__privilege-table tbody tr:nth-child(even) td {
  background-color: var(--deep-green-color);
}

.page-vip-center-levels-privileges__how-to-join {
  background-color: var(--bg-color);
}

.page-vip-center-levels-privileges__list {
  list-style: none;
  padding: 0;
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.page-vip-center-levels-privileges__list-item {
  background-color: var(--card-bg-color);
  border-radius: 12px;
  padding: 30px;
  text-align: left;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.page-vip-center-levels-privileges__list-title {
  font-size: 1.4rem;
  color: var(--gold-color);
  margin-bottom: 15px;
  font-weight: 600;
}

.page-vip-center-levels-privileges__list-item p {
  font-size: 1rem;
  color: var(--text-secondary-color);
}

.page-vip-center-levels-privileges__exclusive-benefits {
  background-color: var(--deep-green-color);
}

.page-vip-center-levels-privileges__benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-vip-center-levels-privileges__benefit-item {
  background-color: var(--card-bg-color);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--border-color);
}

.page-vip-center-levels-privileges__benefit-icon {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 20px;
  border-radius: 8px;
  background-color: var(--primary-color);
  padding: 15px;
}

.page-vip-center-levels-privileges__benefit-title {
  font-size: 1.5rem;
  color: var(--gold-color);
  margin-bottom: 10px;
  font-weight: 600;
}

.page-vip-center-levels-privileges__benefit-description {
  font-size: 1rem;
  color: var(--text-secondary-color);
}

.page-vip-center-levels-privileges__faq-section {
  background-color: var(--bg-color);
}

.page-vip-center-levels-privileges__faq-list {
  margin-top: 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

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

.page-vip-center-levels-privileges__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--gold-color);
  cursor: pointer;
  background-color: var(--deep-green-color);
  border-bottom: 1px solid var(--divider-color);
}

.page-vip-center-levels-privileges__faq-item[open] .page-vip-center-levels-privileges__faq-question {
  border-bottom: 1px solid var(--divider-color);
}

.page-vip-center-levels-privileges__faq-question::-webkit-details-marker {
  display: none;
}

.page-vip-center-levels-privileges__faq-question::marker {
  display: none;
}

.page-vip-center-levels-privileges__faq-toggle {
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

.page-vip-center-levels-privileges__faq-item[open] .page-vip-center-levels-privileges__faq-toggle {
  transform: rotate(45deg);
}

.page-vip-center-levels-privileges__faq-answer {
  padding: 15px 25px 20px;
  font-size: 1rem;
  color: var(--text-secondary-color);
}

.page-vip-center-levels-privileges__faq-answer p {
  margin-bottom: 0;
  color: var(--text-secondary-color);
}

.page-vip-center-levels-privileges__final-cta {
  background-color: var(--deep-green-color);
  padding-bottom: 80px;
}

/* --- Responsive Design --- */
@media (max-width: 1024px) {
  .page-vip-center-levels-privileges__main-title {
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  }

  .page-vip-center-levels-privileges__intro-text {
    font-size: 1.1rem;
  }

  .page-vip-center-levels-privileges__section-title {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  }
}

@media (max-width: 768px) {
  .page-vip-center-levels-privileges {
    font-size: 16px;
    line-height: 1.6;
  }

  .page-vip-center-levels-privileges__hero-section {
    padding-bottom: 40px;
    padding-top: 10px !important;
  }

  .page-vip-center-levels-privileges__hero-content {
    margin-top: 20px;
  }

  .page-vip-center-levels-privileges__main-title {
    font-size: clamp(2rem, 8vw, 2.8rem);
    margin-bottom: 15px;
  }

  .page-vip-center-levels-privileges__intro-text {
    font-size: 1rem;
    margin-bottom: 20px;
  }

  .page-vip-center-levels-privileges__cta-buttons {
    flex-direction: column;
    gap: 15px;
  }

  .page-vip-center-levels-privileges__btn-primary,
  .page-vip-center-levels-privileges__btn-secondary {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 20px;
    font-size: 1rem;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  .page-vip-center-levels-privileges__section {
    padding: 40px 15px;
  }

  .page-vip-center-levels-privileges__container {
    padding: 0 15px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-vip-center-levels-privileges__section-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    margin-bottom: 30px;
  }

  .page-vip-center-levels-privileges__paragraph {
    font-size: 0.95rem;
  }

  .page-vip-center-levels-privileges__level-cards,
  .page-vip-center-levels-privileges__benefits-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-vip-center-levels-privileges__card,
  .page-vip-center-levels-privileges__benefit-item {
    padding: 25px;
  }

  .page-vip-center-levels-privileges__card-icon,
  .page-vip-center-levels-privileges__benefit-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
  }

  .page-vip-center-levels-privileges__card-title {
    font-size: 1.4rem;
  }

  .page-vip-center-levels-privileges__privilege-table {
    min-width: 500px;
  }

  .page-vip-center-levels-privileges__privilege-table th,
  .page-vip-center-levels-privileges__privilege-table td {
    padding: 10px 15px;
    font-size: 0.9rem;
  }

  .page-vip-center-levels-privileges__list {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-vip-center-levels-privileges__list-item {
    padding: 25px;
  }

  .page-vip-center-levels-privileges__list-title {
    font-size: 1.3rem;
  }

  .page-vip-center-levels-privileges__faq-question {
    padding: 15px 20px;
    font-size: 1.1rem;
  }

  .page-vip-center-levels-privileges__faq-answer {
    padding: 10px 20px 15px;
    font-size: 0.95rem;
  }

  .page-vip-center-levels-privileges img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .page-vip-center-levels-privileges__hero-image-wrapper,
  .page-vip-center-levels-privileges__table-wrapper,
  .page-vip-center-levels-privileges__level-cards,
  .page-vip-center-levels-privileges__benefits-grid,
  .page-vip-center-levels-privileges__faq-list,
  .page-vip-center-levels-privileges__list {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important; /* Ensure no horizontal scroll */
  }
  
  /* Specific override for table wrapper to allow horizontal scroll for table itself */
  .page-vip-center-levels-privileges__table-wrapper {
    overflow-x: auto !important;
  }

  /* Ensure content area images are at least 200px (if applicable, for this page, card icons are smaller but are not 'content area images' in the context of the rule for img elements under .page-vip-center-levels-privileges) */
  /* The rule applies to any img under .page-vip-center-levels-privileges selector. Card icons are 100-150px, which is allowed by the general rule (min 200px) only if they are not 'content area images'. The specific rule for content area images is for img elements where width/height/max-width/max-height should not be less than 200px. Card icons are 'product' type which are generally smaller. For the sake of strict adherence, I'll ensure all general img selectors do not force anything below 200px, and specific card icons are handled as 'icons' which have different size expectations. However, the rule explicitly says '禁止所有小图标...任何宽度或高度小于200像素的图片'. This is a conflict with card icons. I will make card icons 200x200 to be safe. */
  .page-vip-center-levels-privileges__card-icon,
  .page-vip-center-levels-privileges__benefit-icon {
    width: 200px !important;
    height: 200px !important;
    min-width: 200px !important;
    min-height: 200px !important;
  }
}

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

  .page-vip-center-levels-privileges__btn-primary,
  .page-vip-center-levels-privileges__btn-secondary {
    font-size: 0.95rem;
    padding: 10px 15px;
  }

  .page-vip-center-levels-privileges__section-title {
    font-size: clamp(1.4rem, 8vw, 2rem);
  }

  .page-vip-center-levels-privileges__card-title {
    font-size: 1.2rem;
  }

  .page-vip-center-levels-privileges__list-title {
    font-size: 1.1rem;
  }

  .page-vip-center-levels-privileges__faq-question {
    font-size: 1rem;
  }
}