.iaLayer-faqsdemo { box-sizing: border-box; width: 100%; padding: 2.5rem 1.5rem; } .iaLayer-faqsdemo .faq-heading { text-align: center; margin-bottom: 2rem; } .iaLayer-faqsdemo .faq-section-title { font-size: 2rem; font-weight: 700; margin: 0; color: var(--faq-q-color, var(--ia-color-text, #111111)); } .iaLayer-faqsdemo .faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } .iaLayer-faqsdemo .faq-item { background-color: var(--faq-bg, var(--ia-color-surface, #ffffff)); border: 1px solid var(--faq-border, var(--ia-color-border, #cccccc)); border-radius: var(--faq-radius, 8px); overflow: hidden; transition: box-shadow 0.25s ease; } .iaLayer-faqsdemo .faq-item.is-open { box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } .iaLayer-faqsdemo .faq-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: none; padding: 1rem 1.25rem; cursor: pointer; text-align: left; gap: 1rem; font: inherit; } .iaLayer-faqsdemo .faq-q-text { font-size: 1.05rem; font-weight: 600; color: var(--faq-q-color, var(--ia-color-text, #111111)); line-height: 1.4; flex: 1; transition: color 0.2s ease; } .iaLayer-faqsdemo .faq-trigger:hover .faq-q-text, .iaLayer-faqsdemo .faq-item.is-open .faq-q-text { color: var(--faq-accent, var(--ia-color-primary, #007cff)); } .iaLayer-faqsdemo .faq-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; color: var(--faq-accent, var(--ia-color-primary, #007cff)); transition: transform 0.3s ease; } .iaLayer-faqsdemo .faq-item.is-open .faq-icon { transform: rotate(180deg); } .iaLayer-faqsdemo .faq-panel { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; } .iaLayer-faqsdemo .faq-panel[hidden] { display: block; visibility: hidden; } .iaLayer-faqsdemo .faq-item.is-open .faq-panel { max-height: 2000px; visibility: visible; } .iaLayer-faqsdemo .faq-panel-inner { padding: 0.25rem 1.25rem 1.25rem; color: var(--faq-a-color, var(--ia-color-text-soft, #444444)); font-size: 0.97rem; line-height: 1.7; } .iaLayer-faqsdemo .faq-panel-inner h3, .iaLayer-faqsdemo .faq-panel-inner h4 { margin-top: 1rem; margin-bottom: 0.4rem; color: var(--faq-q-color, var(--ia-color-text, #111111)); } .iaLayer-faqsdemo .faq-panel-inner ul, .iaLayer-faqsdemo .faq-panel-inner ol { padding-left: 1.4rem; margin: 0.5rem 0; } .iaLayer-faqsdemo .faq-panel-inner a { color: var(--faq-accent, var(--ia-color-primary, #007cff)); } @media (max-width: 600px) { .iaLayer-faqsdemo .faq-section-title { font-size: 1.5rem; } .iaLayer-faqsdemo .faq-trigger { padding: 0.85rem 1rem; } .iaLayer-faqsdemo .faq-panel-inner { padding: 0.2rem 1rem 1rem; } }