/**
 * Unified FAQ accordion (PC + mobile): orange question bar, light answer panel.
 * Loaded last (e.g. via foot.htm). Selectors prefixed with `body` to beat theme / page CSS.
 * — Div accordion: body .faq-section .faq-container (home / test).
 * — Native <details>: body .aoxiang-page-faq-section (article / product detail).
 * — Category lists: body .category-faq .faq-accordion.
 */
:root {
  --aoxiang-faq-header-bg: #fb5b21;
  --aoxiang-faq-answer-bg: #f0f2f5;
  --aoxiang-faq-answer-text: #333;
  --aoxiang-faq-border: #d8dce2;
  --aoxiang-faq-radius: 12px;
}

/* ----- Home + lists_single_test: div.faq-item inside .faq-container only ----- */
body .faq-section .faq-container .faq-item {
  background: transparent !important;
  color: inherit !important;
  border: 1px solid var(--aoxiang-faq-border) !important;
  border-radius: var(--aoxiang-faq-radius) !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
  box-shadow: none !important;
}

body .faq-section .faq-container .faq-item.active {
  background: transparent !important;
  color: inherit !important;
}

body .faq-section .faq-container .faq-question {
  background: var(--aoxiang-faq-header-bg) !important;
  color: #fff !important;
  border-left: none !important;
  font-weight: 700 !important;
  padding: 16px 18px !important;
}

body .faq-section .faq-container .faq-question:hover {
  background: var(--aoxiang-faq-header-bg) !important;
  filter: brightness(1.06);
}

body .faq-section .faq-container .faq-item.active .faq-question {
  background: var(--aoxiang-faq-header-bg) !important;
  color: #fff !important;
}

body .faq-section .faq-container .faq-item.active .faq-question:hover {
  background: var(--aoxiang-faq-header-bg) !important;
  filter: brightness(1.06);
}

body .faq-section .faq-container .faq-question span:first-child {
  color: #fff !important;
}

body .faq-section .faq-container .faq-toggle-plus,
body .faq-section .faq-container .faq-icon {
  color: #fff !important;
}

body .faq-section .faq-container .faq-item.active .faq-toggle-plus,
body .faq-section .faq-container .faq-item.active .faq-icon {
  color: #fff !important;
}

body .faq-section .faq-container .faq-answer {
  background: var(--aoxiang-faq-answer-bg) !important;
  border-top: none !important;
}

body .faq-section .faq-container .faq-item.active .faq-answer {
  padding-bottom: 18px !important;
}

body .faq-section .faq-container .faq-answer p {
  color: var(--aoxiang-faq-answer-text) !important;
}

body .faq-section .faq-container .faq-item.active .faq-answer p {
  color: var(--aoxiang-faq-answer-text) !important;
}

/* ----- lists_images: category FAQ ----- */
body .category-faq .faq-accordion .faq-item,
body .category-faq .faq-item {
  border: 1px solid var(--aoxiang-faq-border) !important;
  border-radius: var(--aoxiang-faq-radius) !important;
  overflow: hidden !important;
}

body .category-faq .faq-accordion .faq-item:hover,
body .category-faq .faq-item:hover {
  border-color: var(--aoxiang-faq-border) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
}

body .category-faq .faq-accordion .faq-question,
body .category-faq .faq-question {
  background: var(--aoxiang-faq-header-bg) !important;
  padding: 16px 18px !important;
}

body .category-faq .faq-accordion .faq-question:hover,
body .category-faq .faq-question:hover {
  background: var(--aoxiang-faq-header-bg) !important;
  filter: brightness(1.06);
}

body .category-faq .faq-accordion .faq-question-text,
body .category-faq .faq-question-text {
  color: #fff !important;
}

body .category-faq .faq-accordion .faq-toggle,
body .category-faq .faq-toggle {
  color: #fff !important;
}

body .category-faq .faq-accordion .faq-item.active .faq-answer,
body .category-faq .faq-item.active .faq-answer {
  background: var(--aoxiang-faq-answer-bg) !important;
}

body .category-faq .faq-accordion .faq-answer p,
body .category-faq .faq-answer p {
  color: var(--aoxiang-faq-answer-text) !important;
}

/* ----- Article / product: <details class="faq-item"> ----- */
body .faq-section.aoxiang-page-faq-section details.faq-item,
body .aoxiang-page-faq-section details.faq-item {
  background: #fff !important;
  border: 1px solid var(--aoxiang-faq-border) !important;
  border-radius: var(--aoxiang-faq-radius) !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
  box-shadow: none !important;
}

body .faq-section.aoxiang-page-faq-section details.faq-item summary,
body .aoxiang-page-faq-section details.faq-item summary {
  background: var(--aoxiang-faq-header-bg) !important;
  color: #fff !important;
  padding: 16px 18px !important;
  font-weight: 700 !important;
  list-style: none !important;
  border-left: none !important;
}

body .aoxiang-page-faq-section details.faq-item summary::-webkit-details-marker {
  display: none !important;
}

body .aoxiang-page-faq-section details.faq-item summary:hover {
  filter: brightness(1.06);
}

body .aoxiang-page-faq-section details.faq-item .aoxiang-page-faq-q {
  color: #fff !important;
  font-size: 1rem !important;
}

body .aoxiang-page-faq-section details.faq-item .faq-content {
  margin-top: 0 !important;
  padding: 16px 18px 18px !important;
  background: var(--aoxiang-faq-answer-bg) !important;
  color: var(--aoxiang-faq-answer-text) !important;
  border-top: none !important;
  line-height: 1.65 !important;
}

body .aoxiang-page-faq-section details.faq-item .faq-content p,
body .aoxiang-page-faq-section details.faq-item .faq-content li {
  color: var(--aoxiang-faq-answer-text) !important;
}

/* ----- About: support FAQ ----- */
body .support-service-section .support-faq-item {
  border-color: var(--aoxiang-faq-border) !important;
  border-radius: var(--aoxiang-faq-radius) !important;
}

body .support-service-section .support-faq-panel {
  background: var(--aoxiang-faq-answer-bg) !important;
  color: var(--aoxiang-faq-answer-text) !important;
  border-top: none !important;
}

body .support-service-section button.support-faq-trigger {
  background: var(--aoxiang-faq-header-bg) !important;
  color: #fff !important;
}

body .support-service-section button.support-faq-trigger:hover,
body .support-service-section button.support-faq-trigger:focus {
  background: var(--aoxiang-faq-header-bg) !important;
  color: #fff !important;
  filter: brightness(1.06);
}

body .support-service-section .support-faq-q,
body .support-service-section .support-faq-chevron {
  color: #fff !important;
}