/* ============================================================
   EIT FAQ / HELP CENTER  (UI REDESIGN)
   Namespaced eit-faq-* — loads after css/eit-header.css
   Used by faq-test.php, faq-category-test.php, faq-article-test.php
   ============================================================ */

/* ---- Base reset (page-scoped: this file only loads on FAQ pages).
   top-test.php / footer-test.php assume the host page provides this reset
   — same block index-test.php / login-test.php include inline. ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #334155;
    background: #f8fafc;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    top: 0 !important;
}
.goog-te-banner-frame, .skiptranslate, iframe.skiptranslate { display: none !important; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
button, input, select, textarea { font-family: inherit; }

.eit-faq-wrap { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#334155; background:#f8fafc; }
.eit-faq-container { max-width:1180px; margin:0 auto; padding:0 20px; }

/* ---------- HERO ---------- */
.eit-faq-hero {
    background:linear-gradient(135deg,#0f2942 0%,#1e3a5f 55%,#26487a 100%);
    color:#fff; padding:54px 0 64px; position:relative; overflow:hidden;
}
/* soft glowing blobs that slowly drift */
.eit-faq-hero::after {
    content:""; position:absolute; right:-120px; top:-120px; width:360px; height:360px;
    background:radial-gradient(circle,rgba(59,130,246,.28),transparent 70%); border-radius:50%;
    animation:eit-faq-blob 18s ease-in-out infinite; z-index:0;
}
.eit-faq-hero::before {
    content:""; position:absolute; left:-110px; bottom:-150px; width:340px; height:340px;
    background:radial-gradient(circle,rgba(96,165,250,.20),transparent 70%); border-radius:50%;
    animation:eit-faq-blob 22s ease-in-out infinite reverse; z-index:0;
}
@keyframes eit-faq-blob {
    0%,100% { transform:translate(0,0) scale(1); }
    50%     { transform:translate(26px,22px) scale(1.15); }
}

/* floating decorative question marks */
.eit-faq-hero-deco { position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; overflow:hidden; pointer-events:none; }
.eit-faq-hero-deco span {
    position:absolute; color:rgba(255,255,255,.08); line-height:1;
    animation:eit-faq-float 9s ease-in-out infinite;
}
.eit-faq-hero-deco span i { display:block; }
.eit-faq-hero-deco .d1 { top:14%;  left:6%;   font-size:46px; animation-duration:8s;  animation-delay:0s;   color:rgba(255,255,255,.10); }
.eit-faq-hero-deco .d2 { top:60%;  left:14%;  font-size:30px; animation-duration:11s; animation-delay:1.2s; }
.eit-faq-hero-deco .d3 { top:24%;  left:88%;  font-size:54px; animation-duration:10s; animation-delay:.6s;  color:rgba(255,255,255,.09); }
.eit-faq-hero-deco .d4 { top:70%;  left:80%;  font-size:34px; animation-duration:13s; animation-delay:2s;   }
.eit-faq-hero-deco .d5 { top:8%;   left:54%;  font-size:24px; animation-duration:9s;  animation-delay:.3s;  }
.eit-faq-hero-deco .d6 { top:78%;  left:46%;  font-size:40px; animation-duration:12s; animation-delay:1.6s; color:rgba(255,255,255,.06); }
.eit-faq-hero-deco .d7 { top:40%;  left:30%;  font-size:22px; animation-duration:10s; animation-delay:2.4s; }
.eit-faq-hero-deco .d8  { top:50%; left:4%;  font-size:28px; animation-duration:12s; animation-delay:.9s; }
.eit-faq-hero-deco .d9  { top:18%; left:40%; font-size:20px; animation-duration:9s;  animation-delay:1.8s; color:rgba(255,255,255,.06); }
.eit-faq-hero-deco .d10 { top:84%; left:24%; font-size:32px; animation-duration:13s; animation-delay:.4s; }
.eit-faq-hero-deco .d11 { top:32%; left:70%; font-size:26px; animation-duration:10s; animation-delay:2.2s; }
.eit-faq-hero-deco .d12 { top:6%;  left:24%; font-size:34px; animation-duration:11s; animation-delay:1s;  color:rgba(255,255,255,.09); }
.eit-faq-hero-deco .d13 { top:54%; left:92%; font-size:22px; animation-duration:9s;  animation-delay:1.5s; }
.eit-faq-hero-deco .d14 { top:88%; left:64%; font-size:28px; animation-duration:12s; animation-delay:.7s; color:rgba(255,255,255,.06); }
.eit-faq-hero-deco .d15 { top:44%; left:58%; font-size:44px; animation-duration:14s; animation-delay:2s; color:rgba(255,255,255,.05); }
@keyframes eit-faq-float {
    0%   { transform:translateY(0) rotate(-6deg); }
    50%  { transform:translateY(-26px) rotate(8deg); }
    100% { transform:translateY(0) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
    .eit-faq-hero::after, .eit-faq-hero::before, .eit-faq-hero-deco span { animation:none; }
}

.eit-faq-hero .eit-faq-container { position:relative; z-index:2; text-align:center; }
.eit-faq-eyebrow {
    display:inline-block; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    color:#93c5fd; background:rgba(147,197,253,.12); border:1px solid rgba(147,197,253,.3);
    padding:6px 14px; border-radius:30px; margin-bottom:18px;
}
.eit-faq-hero h1 { font-size:40px; font-weight:800; line-height:1.15; margin:0 0 12px; letter-spacing:-.02em; }
.eit-faq-hero p { font-size:17px; color:#cbd5e1; max-width:620px; margin:0 auto 28px; }

/* ---------- SEARCH ---------- */
.eit-faq-search { max-width:640px; margin:0 auto; position:relative; text-align:left; }
.eit-faq-search-box { display:flex; align-items:center; background:#fff; border-radius:14px; box-shadow:0 18px 40px rgba(2,8,23,.28); overflow:hidden; }
.eit-faq-search-box i { padding:0 6px 0 20px; color:#64748b; font-size:18px; }
.eit-faq-search-box input { flex:1; border:0; outline:0; padding:18px 16px; font-size:16px; color:#0f172a; background:transparent; }
.eit-faq-search-box .eit-faq-clear { display:none; cursor:pointer; padding:0 18px; color:#94a3b8; font-size:18px; background:none; border:0; }
.eit-faq-search-results {
    display:none; position:absolute; left:0; right:0; top:calc(100% + 8px); background:#fff; border-radius:12px;
    box-shadow:0 18px 40px rgba(2,8,23,.22); overflow:hidden; max-height:60vh; overflow-y:auto; z-index:30;
}
.eit-faq-search-results a {
    display:block; padding:13px 18px; color:#1e293b; font-size:15px; border-bottom:1px solid #f1f5f9; line-height:1.4;
}
.eit-faq-search-results a:last-child { border-bottom:0; }
.eit-faq-search-results a:hover, .eit-faq-search-results a.active { background:#eff6ff; color:#1d4ed8; }
.eit-faq-search-results a .eit-faq-sr-cat { display:block; font-size:12px; color:#94a3b8; margin-top:2px; }
.eit-faq-search-results a mark { background:#fde68a; color:inherit; padding:0 1px; border-radius:2px; }
.eit-faq-search-empty { padding:18px; text-align:center; color:#64748b; font-size:14px; }
.eit-faq-search-empty a { color:#2563eb; font-weight:600; }

/* compact search on inner pages */
.eit-faq-search--compact { margin:22px auto 0; }
.eit-faq-search--compact .eit-faq-search-box { box-shadow:0 6px 18px rgba(2,8,23,.10); border:1px solid #e2e8f0; }

/* ---------- SECTION SHELL ---------- */
.eit-faq-section { padding:48px 0; }
.eit-faq-section-head { text-align:center; margin-bottom:30px; }
.eit-faq-section-head h2 { font-size:27px; font-weight:800; color:#0f172a; letter-spacing:-.01em; margin:0 0 8px; }
.eit-faq-section-head p { color:#64748b; font-size:15px; margin:0; }

/* ---------- FEATURED/POPULAR TABS ---------- */
.eit-faq-tabs { display:flex; justify-content:center; gap:10px; margin-bottom:26px; flex-wrap:wrap; }
.eit-faq-tab {
    border:1px solid #e2e8f0; background:#fff; color:#475569; font-weight:600; font-size:14px;
    padding:9px 20px; border-radius:30px; cursor:pointer; transition:all .15s;
}
.eit-faq-tab:hover { border-color:#cbd5e1; }
.eit-faq-tab.active { background:#1e3a5f; border-color:#1e3a5f; color:#fff; }
.eit-faq-tabpane { display:none; }
.eit-faq-tabpane.active { display:block; }
.eit-faq-qlinks { max-width:840px; margin:0 auto; display:grid; gap:10px; }
.eit-faq-qlink {
    display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #eef2f7; border-radius:12px;
    padding:16px 20px; color:#1e293b; font-weight:500; font-size:15.5px; transition:all .15s;
}
.eit-faq-qlink:hover { border-color:#bfdbfe; box-shadow:0 6px 18px rgba(2,8,23,.06); transform:translateY(-1px); }
.eit-faq-qlink .eit-faq-qnum { flex:0 0 30px; height:30px; border-radius:8px; background:#eff6ff; color:#2563eb; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.eit-faq-qlink .eit-faq-qarrow { margin-left:auto; color:#cbd5e1; transition:transform .15s,color .15s; }
.eit-faq-qlink:hover .eit-faq-qarrow { color:#2563eb; transform:translateX(3px); }

/* ---------- CATEGORY CARDS ---------- */
.eit-faq-cats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.eit-faq-cat-card {
    display:flex; flex-direction:column; background:#fff; border:1px solid #eef2f7; border-radius:16px;
    padding:26px 24px; transition:all .18s; position:relative; overflow:hidden;
}
.eit-faq-cat-card:hover { border-color:#bfdbfe; box-shadow:0 14px 34px rgba(2,8,23,.09); transform:translateY(-3px); }
.eit-faq-cat-icon {
    width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    font-size:24px; color:#2563eb; background:linear-gradient(135deg,#eff6ff,#dbeafe); margin-bottom:16px;
}
.eit-faq-cat-card h3 { font-size:18px; font-weight:700; color:#0f172a; margin:0 0 7px; }
.eit-faq-cat-card p { font-size:14px; color:#64748b; line-height:1.55; margin:0 0 18px; flex:1; }
.eit-faq-cat-foot { display:flex; align-items:center; justify-content:space-between; }
.eit-faq-cat-count { font-size:13px; font-weight:600; color:#1d4ed8; background:#eff6ff; padding:4px 11px; border-radius:20px; }
.eit-faq-cat-go { font-size:13px; font-weight:600; color:#94a3b8; }
.eit-faq-cat-card:hover .eit-faq-cat-go { color:#2563eb; }

/* ---------- BREADCRUMB ---------- */
.eit-faq-breadcrumb { font-size:13.5px; color:#64748b; padding:20px 0 0; }
.eit-faq-breadcrumb a { color:#64748b; }
.eit-faq-breadcrumb a:hover { color:#2563eb; }
.eit-faq-breadcrumb span { color:#cbd5e1; margin:0 8px; }
.eit-faq-breadcrumb .cur { color:#0f172a; font-weight:600; }

/* ---------- CATEGORY PAGE HEAD ---------- */
.eit-faq-cathead { display:flex; align-items:center; gap:18px; margin:22px 0 6px; }
.eit-faq-cathead .eit-faq-cat-icon { margin-bottom:0; flex:0 0 auto; }
.eit-faq-cathead h1 { font-size:30px; font-weight:800; color:#0f172a; margin:0; letter-spacing:-.01em; }
.eit-faq-cathead .sub { color:#64748b; font-size:15px; margin-top:4px; }

/* ---------- ACCORDION ---------- */
.eit-faq-accordion { max-width:880px; margin:8px auto 0; display:grid; gap:12px; }
.eit-faq-acc-item { background:#fff; border:1px solid #eef2f7; border-radius:12px; overflow:hidden; }
.eit-faq-acc-q {
    display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:none; border:0; cursor:pointer;
    padding:18px 22px; font-size:16px; font-weight:600; color:#0f172a; font-family:inherit;
}
.eit-faq-acc-q .ico { margin-left:auto; flex:0 0 auto; color:#94a3b8; transition:transform .2s; }
.eit-faq-acc-item.open .eit-faq-acc-q .ico { transform:rotate(180deg); color:#2563eb; }
.eit-faq-acc-a { max-height:0; overflow:hidden; transition:max-height .25s ease; }
.eit-faq-acc-a-inner { padding:0 22px 20px; color:#475569; font-size:15px; line-height:1.7; }
.eit-faq-acc-a-inner p { margin:0 0 12px; }
.eit-faq-readmore { display:inline-block; margin-top:4px; font-weight:600; color:#2563eb; font-size:14px; }

/* ---------- ARTICLE PAGE ---------- */
.eit-faq-article { max-width:820px; margin:0 auto; }
.eit-faq-article h1 { font-size:30px; font-weight:800; color:#0f172a; line-height:1.25; letter-spacing:-.01em; margin:14px 0 18px; }
.eit-faq-article-meta { font-size:13px; color:#94a3b8; margin-bottom:22px; }
.eit-faq-article-meta a { color:#2563eb; font-weight:600; }
.eit-faq-prose { background:#fff; border:1px solid #eef2f7; border-radius:16px; padding:30px 34px; color:#334155; font-size:16px; line-height:1.75; }
.eit-faq-prose p { margin:0 0 16px; }
.eit-faq-prose p:last-child { margin-bottom:0; }
.eit-faq-prose ul, .eit-faq-prose ol { margin:0 0 16px; padding-left:22px; }
.eit-faq-prose li { margin-bottom:10px; }
.eit-faq-prose a { color:#2563eb; font-weight:600; }
.eit-faq-prose a:hover { text-decoration:underline; }
.eit-faq-prose strong { color:#0f172a; }

/* ---------- RELATED ---------- */
.eit-faq-related { max-width:820px; margin:34px auto 0; }
.eit-faq-related h3 { font-size:18px; font-weight:700; color:#0f172a; margin:0 0 14px; }
.eit-faq-related-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.eit-faq-related-grid a {
    display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #eef2f7; border-radius:10px;
    padding:14px 16px; color:#1e293b; font-size:14.5px; font-weight:500; transition:all .15s;
}
.eit-faq-related-grid a:hover { border-color:#bfdbfe; color:#1d4ed8; }
.eit-faq-related-grid a i { color:#94a3b8; }

/* ---------- SUPPORT / CONTACT ---------- */
.eit-faq-support { background:#0f2942; color:#fff; padding:52px 0; margin-top:52px; }
.eit-faq-support .eit-faq-section-head h2 { color:#fff; }
.eit-faq-support .eit-faq-section-head p { color:#9fb3cc; }
.eit-faq-support-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px; }
.eit-faq-support-card {
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:24px 20px;
    text-align:center; transition:all .18s; color:#fff; display:block;
}
.eit-faq-support-card:hover { background:rgba(255,255,255,.09); transform:translateY(-3px); }
.eit-faq-support-icon { width:50px; height:50px; border-radius:12px; background:rgba(59,130,246,.18); color:#93c5fd; font-size:22px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.eit-faq-support-card h4 { font-size:16px; font-weight:700; margin:0 0 5px; }
.eit-faq-support-card .val { font-size:14px; color:#cbd5e1; }
.eit-faq-support-card .val strong { color:#fff; }

/* ---------- 404 ---------- */
.eit-faq-404 { text-align:center; padding:80px 20px; max-width:560px; margin:0 auto; }
.eit-faq-404 i { font-size:54px; color:#cbd5e1; margin-bottom:18px; }
.eit-faq-404 h1 { font-size:26px; color:#0f172a; margin:0 0 10px; }
.eit-faq-404 p { color:#64748b; margin:0 0 22px; }
.eit-faq-404 a { display:inline-block; background:#1e3a5f; color:#fff; padding:12px 26px; border-radius:10px; font-weight:600; }

/* ---------- COMMUNITY Q&A: BOARD ---------- */
.eit-faq-cta-row { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:22px; }
.eit-faq-btn { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; padding:13px 24px; border-radius:11px; border:0; cursor:pointer; transition:all .15s; }
.eit-faq-btn-primary { background:#dc2626; color:#fff; }
.eit-faq-btn-primary:hover { background:#b91c1c; }
.eit-faq-btn-ghost { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.25); }
.eit-faq-btn-ghost:hover { background:rgba(255,255,255,.18); }
.eit-faq-btn-blue { background:#1e3a5f; color:#fff; }
.eit-faq-btn-blue:hover { background:#16304f; }

.eit-faq-qa-list { max-width:860px; margin:0 auto; display:grid; gap:14px; }
.eit-faq-qa-item { display:block; background:#fff; border:1px solid #eef2f7; border-radius:14px; padding:20px 22px; transition:all .15s; }
.eit-faq-qa-item:hover { border-color:#bfdbfe; box-shadow:0 8px 22px rgba(2,8,23,.07); transform:translateY(-2px); }
.eit-faq-qa-item h3 { font-size:17px; font-weight:700; color:#0f172a; margin:0 0 8px; line-height:1.4; }
.eit-faq-qa-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13px; color:#94a3b8; }
.eit-faq-qa-meta .who { color:#475569; font-weight:600; }
.eit-faq-qa-meta .cat { background:#eff6ff; color:#1d4ed8; padding:2px 9px; border-radius:20px; font-weight:600; }
.eit-faq-qa-meta .ans { color:#16a34a; font-weight:600; }
.eit-faq-qa-meta .ans.zero { color:#94a3b8; }
.eit-faq-empty { max-width:560px; margin:30px auto; text-align:center; color:#64748b; background:#fff; border:1px dashed #cbd5e1; border-radius:14px; padding:36px 24px; }

/* ---------- COMMUNITY Q&A: SINGLE ---------- */
.eit-faq-qa-single { max-width:820px; margin:0 auto; }
.eit-faq-qa-single h1 { font-size:27px; font-weight:800; color:#0f172a; line-height:1.3; margin:14px 0 10px; }
.eit-faq-qa-single .q-meta { font-size:13.5px; color:#94a3b8; margin-bottom:18px; }
.eit-faq-qa-single .q-meta .who { color:#475569; font-weight:600; }
.eit-faq-qa-details { background:#fff; border:1px solid #eef2f7; border-radius:14px; padding:22px 26px; color:#334155; font-size:16px; line-height:1.7; margin-bottom:26px; }
.eit-faq-answers-head { font-size:18px; font-weight:700; color:#0f172a; margin:6px 0 14px; }
.eit-faq-answer { background:#fff; border:1px solid #eef2f7; border-radius:14px; padding:20px 24px; margin-bottom:14px; }
.eit-faq-answer.official { border-color:#bfdbfe; background:linear-gradient(180deg,#f5f9ff,#fff); }
.eit-faq-answer-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.eit-faq-answer-av { width:36px; height:36px; border-radius:50%; background:#e2e8f0; color:#64748b; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:0 0 auto; }
.eit-faq-answer.official .eit-faq-answer-av { background:#1e3a5f; color:#fff; }
.eit-faq-answer-who { font-weight:700; color:#0f172a; font-size:14.5px; }
.eit-faq-answer-date { font-size:12px; color:#94a3b8; }
.eit-faq-official-badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#1d4ed8; background:#dbeafe; padding:2px 8px; border-radius:20px; }
.eit-faq-answer-body { color:#475569; font-size:15.5px; line-height:1.7; }
.eit-faq-answer-body p { margin:0 0 12px; } .eit-faq-answer-body p:last-child { margin-bottom:0; }
.eit-faq-no-answers { color:#64748b; font-style:italic; padding:6px 0 16px; }

/* ---------- FORMS ---------- */
.eit-faq-form-card { max-width:680px; margin:0 auto; background:#fff; border:1px solid #eef2f7; border-radius:18px; padding:30px 34px; box-shadow:0 10px 30px rgba(2,8,23,.05); }
.eit-faq-form-row { margin-bottom:18px; }
.eit-faq-form-row label { display:block; font-size:14px; font-weight:600; color:#334155; margin-bottom:7px; }
.eit-faq-form-row label .req { color:#dc2626; }
.eit-faq-form-row input[type=text], .eit-faq-form-row input[type=email], .eit-faq-form-row textarea, .eit-faq-form-row select {
    width:100%; border:1px solid #d8e0ea; border-radius:10px; padding:12px 14px; font-size:15px; color:#0f172a; background:#fff; transition:border-color .15s,box-shadow .15s;
}
.eit-faq-form-row input:focus, .eit-faq-form-row textarea:focus, .eit-faq-form-row select:focus { outline:0; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.eit-faq-form-row textarea { min-height:120px; resize:vertical; line-height:1.6; }
.eit-faq-form-2col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.eit-faq-form-hp { position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }
.eit-faq-captcha { display:flex; align-items:center; gap:12px; }
.eit-faq-captcha .q { font-weight:700; color:#0f172a; background:#f1f5f9; padding:10px 14px; border-radius:8px; white-space:nowrap; }
.eit-faq-captcha input { max-width:120px; }
.eit-faq-form-note { font-size:12.5px; color:#94a3b8; margin-top:4px; }
.eit-faq-alert { border-radius:11px; padding:14px 18px; font-size:14.5px; margin-bottom:20px; max-width:680px; margin-left:auto; margin-right:auto; }
.eit-faq-alert-ok { background:#ecfdf5; border:1px solid #a7f3d0; color:#047857; }
.eit-faq-alert-err { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; }
.eit-faq-alert-info { background:#eff6ff; border:1px solid #bfdbfe; color:#1d4ed8; }
.eit-faq-form-submit { display:flex; gap:12px; align-items:center; margin-top:6px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:992px){
    .eit-faq-cats { grid-template-columns:repeat(2,1fr); }
    .eit-faq-support-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
    .eit-faq-hero { padding:40px 0 48px; }
    .eit-faq-hero h1 { font-size:30px; }
    .eit-faq-hero p { font-size:15px; }
    .eit-faq-cats { grid-template-columns:1fr; }
    .eit-faq-related-grid { grid-template-columns:1fr; }
    .eit-faq-support-grid { grid-template-columns:1fr; }
    .eit-faq-cathead { flex-direction:column; text-align:center; }
    .eit-faq-prose { padding:22px 20px; }
    .eit-faq-section { padding:36px 0; }
}