/* FAQ and articles use the standard content templates. */
#body section article.ep_c_faq,
#body section article:has(.articles_list, .faq_list, .articles_item, .faq_item) {
    --ed-text: #d5def0;
    --ed-muted: #8fa1c2;
    --ed-heading: #fff;
    --ed-card: rgba(255, 255, 255, .03);
    border: 1px solid var(--ep-line);
    background: linear-gradient(180deg, rgba(16, 33, 66, .88), rgba(10, 22, 46, .9));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--ed-text);
}
#body section article:has(.articles_list, .faq_list, .articles_item, .faq_item) h1,
#body section article:has(.articles_list, .faq_list, .articles_item, .faq_item) h2,
#body section article:has(.articles_list, .faq_list, .articles_item, .faq_item) h3 {
    color: var(--ed-heading);
    font-family: var(--ep-font);
}
#body section :is(.articles_list, .faq_list) .content_list_item {
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 0 14px;
    padding: 16px;
    border: 1px solid var(--ep-line);
    border-radius: 10px;
    background: var(--ed-card);
    color: var(--ed-text);
}
#body section :is(.articles_list, .faq_list) .content_list_item:hover {
    border-color: rgba(96, 165, 250, .55);
    background: rgba(59, 130, 246, .06);
}
#body section :is(.articles_list, .faq_list) .content_list_item .ft_caption .value {
    color: var(--ed-heading);
    font-size: 20px;
    line-height: 1.3;
}
#body section :is(.articles_list, .faq_list) .content_list_item .photo img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
#body section :is(.articles_item, .faq_item),
#body section :is(.articles_item, .faq_item) .field {
    color: var(--ed-text);
    font-size: 15px;
    line-height: 1.65;
}
#body section :is(.articles_item, .faq_item) :is(strong, b) { color: var(--ed-heading); }
#body section :is(.articles_item, .faq_item) img { max-width: 100%; height: auto; border-radius: 8px; }
#body section :is(.articles_item, .faq_item) table { max-width: 100%; border-collapse: collapse; }
#body section :is(.articles_item, .faq_item) :is(td, th) { border: 1px solid var(--ep-line); }
#body section :is(.articles_item, .faq_item) blockquote {
    padding: 12px 16px;
    border-left: 3px solid var(--ep-sky);
    background: var(--ed-card);
}
#body section :is(.articles_list, .faq_list, .articles_item, .faq_item) a { color: var(--ep-sky); }
#body section :is(.articles_list, .faq_list) .ft_caption a { color: var(--ed-heading); }
#body section :is(.articles_list, .faq_list, .articles_item, .faq_item) .info_bar {
    border-color: var(--ep-line);
    color: var(--ed-muted);
}
#body section :is(.articles_list, .faq_list, .articles_item, .faq_item) .info_bar a { color: var(--ed-muted); }

:root[data-theme="light"] #body section article.ep_c_faq,
:root[data-theme="light"] #body section article:has(.articles_list, .faq_list, .articles_item, .faq_item) {
    --ed-text: #334155;
    --ed-muted: #64748b;
    --ed-heading: #0f2246;
    --ed-card: #fafbfe;
    background: var(--ep-panel-bg);
}

#body section .ep_c_faq #is_faq_title { color: var(--ed-heading); font-size: 28px; line-height: 1.25; }
#body section .ep_c_faq .disc_faq { color: var(--ed-muted); margin-top: 0; }
#body section .ep_c_faq .icon_faq { display: none; }
#body section .ep_c_faq .faq_title {
    margin: 20px 0 8px;
    padding: 0;
    border: 0;
    color: var(--ed-heading);
    font-size: 18px;
}
#body section .ep_c_faq .spoil {
    margin: 0 0 10px;
    border: 1px solid var(--ep-line);
    border-radius: 10px;
    background: var(--ed-card);
    color: var(--ed-text);
}
#body section .ep_c_faq .sp_top { padding: 14px 16px; border: 0; background: transparent; }
#body section .ep_c_faq .sp_span { color: var(--ed-heading); font-weight: 500; }
#body section .ep_c_faq .sp_text { margin: 0; padding: 0 16px 16px; line-height: 1.65; }
#body section .ep_c_faq a { color: var(--ep-sky); }
#body section .ep_c_faq .sp_button {
    border: 1px solid var(--ep-line);
    border-radius: 6px;
    background: var(--ed-card);
    color: var(--ed-heading);
    cursor: pointer;
}
#body section .ep_c_faq .sp_button:hover { border-color: var(--ep-sky); box-shadow: none; }

#body section .ep_c_faq .ep_faq_intro { margin: 0 0 24px; color: var(--ed-muted); }
#body section .ep_c_faq .ep_faq_category { display: flex; align-items: center; gap: 16px; margin: 24px 0 10px; }
#body section .ep_c_faq .ep_faq_category h2 { margin: 0; font-size: 19px; }
#body section .ep_c_faq .ep_faq_item { margin-bottom: 10px; border: 1px solid var(--ep-line); border-radius: 10px; background: var(--ed-card); }
#body section .ep_c_faq .ep_faq_row { display: flex; align-items: center; }
#body section .ep_c_faq .ep_faq_toggle {
    display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0;
    padding: 14px 16px; border: 0; background: transparent; color: var(--ed-heading);
    font: inherit; font-weight: 500; text-align: left; cursor: pointer;
}
#body section .ep_c_faq .ep_faq_toggle:hover { color: var(--ep-sky); }
#body section .ep_c_faq .ep_faq_toggle:focus-visible { outline: 2px solid var(--ep-sky); outline-offset: -2px; border-radius: 10px; }
#body section .ep_c_faq .ep_faq_icon {
    display: inline-flex; flex: 0 0 28px; align-items: center; justify-content: center;
    height: 28px; border-radius: 50%; background: rgba(59, 130, 246, .18); color: var(--ep-sky); font-weight: 700;
}
#body section .ep_c_faq .ep_faq_chevron { flex: 0 0 8px; height: 8px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
#body section .ep_c_faq .ep_faq_toggle[aria-expanded="true"] .ep_faq_chevron { transform: rotate(225deg); }
#body section .ep_c_faq .ep_faq_edit { flex: none; margin-right: 16px; color: var(--ep-sky); font-size: 13px; }
#body section .ep_c_faq .ep_faq_answer { padding: 0 16px 16px 56px; color: var(--ed-text); line-height: 1.65; overflow-wrap: anywhere; }
#body section .ep_c_faq .ep_faq_answer img { max-width: 100%; height: auto; }
@media (max-width: 480px) {
    #body section .ep_c_faq .ep_faq_toggle { padding: 12px; gap: 8px; }
    #body section .ep_c_faq .ep_faq_edit { margin-right: 12px; }
    #body section .ep_c_faq .ep_faq_answer { padding: 0 12px 12px; }
}

/* Keep the editing canvas readable, including content with explicit dark text. */
#body article.ep_c_faq form .redactor_box {
    overflow: hidden;
    border: 1px solid var(--u-field-line);
    border-radius: 8px;
    background: #fff;
}
#body article.ep_c_faq form .redactor_toolbar {
    background: #f1f5fb;
    border-bottom: 1px solid #cbd5e1;
    box-shadow: none;
}
#body article.ep_c_faq form .redactor_toolbar li a { color: #334155; }
#body article.ep_c_faq form .redactor_toolbar li a:hover,
#body article.ep_c_faq form .redactor_toolbar li a.redactor_act { background: #2563eb; color: #fff; }
#body article.ep_c_faq form .redactor_editor {
    min-height: 220px;
    border: 0;
    background: #fff;
    color: #1e293b;
    line-height: 1.6;
}
#body article.ep_c_faq form .redactor_editor :is(h1, h2, h3, h4, h5, h6, strong, b) { color: #0f2246; }
#body article.ep_c_faq form .redactor_editor a { color: #1d4ed8; }
#body article.ep_c_faq form .redactor_editor blockquote { background: #f1f5fb; color: #334155; }
#body article.ep_c_faq form .redactor_box textarea { border: 0; border-radius: 0; background: #1e293b; color: #e2e8f0; }
#body article.ep_c_faq form .tox-tinymce { border: 1px solid var(--u-field-line); border-radius: 8px; }
#body article.ep_c_faq form .chosen-container-single .chosen-single {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--u-field-line);
    border-radius: 8px;
    background: var(--u-field);
    box-shadow: none;
    color: var(--u-body);
    line-height: 36px;
}
#body article.ep_c_faq form .chosen-container .chosen-drop { border-color: var(--u-field-line); background: var(--u-field); color: var(--u-body); }
#body article.ep_c_faq form .chosen-container .chosen-results li.highlighted { background: var(--u-accent); color: #fff; }
:root[data-theme="light"] #body section :is(.articles_list, .faq_list) .content_list_item:hover {
    border-color: rgba(37, 99, 235, .45);
    background: #fff;
    box-shadow: 0 6px 18px rgba(30, 64, 120, .10);
}
