/**
 * FAQ 前台頁面樣式
 * 路徑：/Home/FAQ
 */

/* ── FAQ Page ── */
.faq-area { padding: 60px 0 80px; }
.faq-title-wrap { text-align: center; margin-bottom: 48px; }
.faq-title-wrap h2 { font-size: 28px; font-weight: 700; color: #1e293b; margin-bottom: 8px; }
.faq-title-wrap p { color: #64748b; font-size: 15px; }
.faq-search-wrap { max-width: 480px; margin: 24px auto 0; position: relative; }
.faq-search-wrap input {
    width: 100%; padding: 12px 16px 12px 42px; border: 1px solid #e2e8f0;
    border-radius: 10px; font-size: 14px; background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.faq-search-wrap input:focus {
    border-color: var(--color-primary, #6366f1); outline: none;
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.faq-search-wrap .search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #94a3b8; font-size: 16px; pointer-events: none;
}
.faq-count { text-align: center; margin-top: 10px; font-size: 12px; color: #94a3b8; }

/* Accordion */
.faq-accordion { max-width: 800px; margin: 0 auto; }
.faq-item { border: 1px solid #e9ecef; border-radius: 10px; margin-bottom: 10px; background: #fff; overflow: hidden; transition: box-shadow .2s; }
.faq-item:hover { box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.faq-item.open { border-color: var(--color-primary, #6366f1); }
.faq-item.open .faq-item-head { color: var(--color-primary, #6366f1); }
.faq-item-head {
    display: flex; align-items: center; gap: 12px; padding: 16px 20px;
    cursor: pointer; font-weight: 600; font-size: 15px; color: #334155;
    transition: color .2s; user-select: none;
}
.faq-item-head:hover { color: var(--color-primary, #6366f1); }
.faq-item-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: #eef2ff; color: #6366f1; font-size: 13px; font-weight: 700;
    flex-shrink: 0;
}
.faq-item.open .faq-item-num { background: var(--color-primary, #6366f1); color: #fff; }
.faq-item-q { flex: 1; }
.faq-item-arrow { transition: transform .25s; flex-shrink: 0; color: #94a3b8; }
.faq-item.open .faq-item-arrow { transform: rotate(180deg); color: var(--color-primary, #6366f1); }
.faq-item-body {
    max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease;
    padding: 0 20px;
}
.faq-item.open .faq-item-body { max-height: 1200px; padding: 0 20px 20px; }
.faq-item-body p { margin: 0; }

/* States */
.faq-loading { text-align: center; padding: 60px 20px; color: #94a3b8; }
.faq-empty { text-align: center; padding: 60px 20px; color: #94a3b8; display: none; }
.faq-empty i { font-size: 48px; margin-bottom: 12px; display: block; color: #cbd5e1; }
.faq-no-results { display: none; text-align: center; padding: 40px 20px; color: #94a3b8; }
.faq-no-results i { font-size: 36px; margin-bottom: 8px; display: block; color: #cbd5e1; }