.faq-wrapper { margin: 20px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
.faq-section-title { margin-bottom: 20px; color: #333; font-size: 28px; font-weight: 600; text-align: center; }
.faq-list-container { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); overflow: hidden; }
.faq-item-box { position: relative; }
.faq-question-title { margin: 0; padding: 18px 50px 18px 20px; cursor: pointer; font-weight: 500; color: #333; background: #fff3ef; transition: background-color 0.3s ease; }
.faq-question-title:hover { background: #e9ecef; }
h1.faq-question-title { font-size: 26px; }
h2.faq-question-title { font-size: 24px; }
h3.faq-question-title { font-size: 22px; }
h4.faq-question-title { font-size: 21px; }
.faq-toggle-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: transparent; border-left: 2px solid #555; border-bottom: 2px solid #555; transform: translateY(-50%) rotate(-45deg); transition: transform 0.3s ease; }
.faq-item-box.faq-active .faq-toggle-icon { transform: translateY(-50%) rotate(135deg); }
.faq-answer-box { max-height: 0; overflow: hidden; transition: max-height 0.5s ease, padding 0.5s ease; }
.faq-item-box.faq-active .faq-answer-box { max-height: 5000px; padding: 20px; }
.faq-answer-content { color: #555; line-height: 1.8; display: block; overflow: auto; width: 100%; box-sizing: border-box; clear: both; }
.faq-answer-content p, .faq-answer-content div, .faq-answer-content span, .faq-answer-content h1, .faq-answer-content h2, .faq-answer-content h3, .faq-answer-content h4, .faq-answer-content h5, .faq-answer-content h6 { display: block; margin-bottom: 1.8em; margin-top: 0; width: 100%; clear: both; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; }
.faq-answer-content h1 { font-size: 22px; margin-bottom: 1.2em; margin-top: 0.8em; }
.faq-answer-content h2 { font-size: 21px; margin-bottom: 1.1em; margin-top: 0.7em; }
.faq-answer-content h3 { font-size: 20px; margin-bottom: 1em; margin-top: 0.6em; }
.faq-answer-content h4 { font-size: 19px; margin-bottom: 0.9em; margin-top: 0.5em; }
.faq-answer-content h5 { margin-bottom: 0.8em; margin-top: 0.4em; }
.faq-answer-content h6 { margin-bottom: 0.7em; margin-top: 0.3em; }
.faq-answer-content ul, .faq-answer-content ol { display: block; margin-bottom: 1.8em; margin-top: 0.5em; padding-left: 2em; width: 100%; clear: both; }
.faq-answer-content li { display: list-item; margin-bottom: 0.8em; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; }
.faq-answer-content br { display: block; content: ""; margin-top: 1.2em; }
.faq-item-divider { margin: 0; border: none; border-top: 1px solid #eee; }
@media (max-width: 768px) { .faq-section-title { font-size: 24px; } .faq-question-title { padding: 15px 45px 15px 15px; } h1.faq-question-title { font-size: 20px; } h2.faq-question-title { font-size: 19px; } h3.faq-question-title { font-size: 18px; } h4.faq-question-title { font-size: 17px; } .faq-toggle-icon { right: 15px; } .faq-item-box.faq-active .faq-answer-box { padding: 15px; } .faq-answer-content { line-height: 1.6; } .faq-answer-content p, .faq-answer-content div, .faq-answer-content span { margin-bottom: 1.5em; } .faq-answer-content ul, .faq-answer-content ol { margin-bottom: 1.5em; } .faq-answer-content li { margin-bottom: 0.6em; } .faq-answer-content br { margin-top: 1em; } }
@media (max-width: 480px) { .faq-section-title { font-size: 20px; } .faq-question-title { padding: 12px 40px 12px 12px; } h1.faq-question-title { font-size: 18px; } h2.faq-question-title { font-size: 17px; } h3.faq-question-title { font-size: 16px; } h4.faq-question-title { font-size: 15px; } .faq-toggle-icon { right: 12px; width: 10px; height: 10px; } .faq-item-box.faq-active .faq-answer-box { padding: 12px; } .faq-answer-content { line-height: 1.5; } .faq-answer-content p, .faq-answer-content div, .faq-answer-content span { margin-bottom: 1.2em; } .faq-answer-content ul, .faq-answer-content ol { margin-bottom: 1.2em; } .faq-answer-content li { margin-bottom: 0.5em; } .faq-answer-content br { margin-top: 0.8em; } }