/* =================================================
   FAQ Manager Pro — Public Styles v1.3
   ================================================= */

:root {
    --faqmp-accent:      #015465;
    --faqmp-light-bg:    #E3EFF2;
    --faqmp-border-col:  #D0E4EC;
    --faqmp-text:        #1C2636;
    --faqmp-muted:       #60717F;
    --faqmp-white:       #ffffff;
    --faqmp-card-radius: 14px;
    --faqmp-open-bg:     #015465;
}

/* ── Wrapper ── */
.faqmp-wrapper { color: var(--faqmp-text); width: 100%; }
.faqmp-wrapper * { box-sizing: border-box; }

/* ── Search ── */
.faqmp-search-bar { margin-bottom: 18px; }
.faqmp-search-inner { position: relative; display: flex; align-items: center; }
.faqmp-search-inner svg {
    position: absolute; left: 14px;
    color: var(--faqmp-muted); pointer-events: none;
}
.faqmp-search-input {
    width: 100%;
    padding: 11px 16px 11px 44px;
    border: 1.5px solid var(--faqmp-border-col);
    border-radius: 10px;
    font-size: 14px;
    color: var(--faqmp-text);
    background: var(--faqmp-white);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    -webkit-appearance: none;
}
.faqmp-search-input:focus {
    border-color: var(--faqmp-accent);
    box-shadow: 0 0 0 3px rgba(1,84,101,0.1);
}
.faqmp-search-input::placeholder { color: #A4B8C4; }

/* ── Category Tabs ── */
.faqmp-category-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.faqmp-tab {
    padding: 7px 18px;
    border-radius: 100px;
    border: 1.5px solid var(--faqmp-border-col);
    background: var(--faqmp-white);
    color: var(--faqmp-muted);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: background 0.22s, border-color 0.22s, color 0.22s;
    line-height: 1.4;
}
.faqmp-tab:hover {
    border-color: var(--faqmp-accent);
    color: var(--faqmp-accent);
    background: rgba(1,84,101,0.05);
}
.faqmp-tab.active {
    background: var(--faqmp-accent);
    border-color: var(--faqmp-accent);
    color: var(--faqmp-white);
}

/* ── Grid ── */
.faqmp-grid { display: flex; flex-direction: column; gap: 10px; width: 100%; }

/* 2-col: two independent flex columns — no shared rows, so opening one side never affects the other */
.faqmp-2-col .faqmp-grid {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
}
.faqmp-2-col .faqmp-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
@media (max-width: 680px) {
    .faqmp-2-col .faqmp-grid { flex-direction: column; }
    .faqmp-2-col .faqmp-col  { width: 100%; }
}

/* ── FAQ Item ──────────────────────────────────────────────────
   Single background-color transition: #E3EFF2 → #015465.
   CSS interpolates between any two solid hex values perfectly —
   no opacity layers, no pseudo-elements, zero mid-state murk.
   ─────────────────────────────────────────────────────────── */
.faqmp-item {
    border: 1.5px solid var(--faqmp-border-col);
    border-radius: var(--faqmp-card-radius);
    background: var(--faqmp-light-bg);
    overflow: hidden;
    transition:
        background-color 0.4s ease,
        border-color     0.4s ease,
        box-shadow       0.4s ease;
}
.faqmp-item:not(.faqmp-open):hover {
    border-color: #A8C8D8;
    box-shadow: 0 2px 12px rgba(1,84,101,0.08);
}
.faqmp-item.faqmp-open {
    background: var(--faqmp-open-bg);
    border-color: transparent;
    box-shadow: 0 8px 32px rgba(1,54,65,0.28);
}
.faqmp-item.faqmp-hidden { display: none; }

/* ── Tab filter enter ── */
@keyframes faqmp-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.faqmp-item.faqmp-entering {
    animation: faqmp-enter 0.28s cubic-bezier(0.4,0,0.2,1) both;
}

/* ── Question Button ──
   Transparent — card background shows through directly.
   No separate bg needed; the card's own transition drives
   the colour change here too. One transition, everything in sync.
   ── */
.faqmp-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 14px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.faqmp-question:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(1,84,101,0.4);
}

/* Question text */
.faqmp-question-text {
    font-size: 20px; font-weight: 600;
    color: var(--faqmp-text);
    line-height: 1.45;
    flex: 1;
    font-family: "Syne", sans-serif;
    transition: color 0.4s ease;
}
.faqmp-item.faqmp-open .faqmp-question-text { color: #ffffff; }

/* ── Icon circle ── */
.faqmp-icon {
    flex-shrink: 0;
    position: relative;
    width: 38px; height: 38px;
    border-radius: 50%;
    transition: background 0.4s ease, border-color 0.4s ease;
}
.faqmp-item:not(.faqmp-open) .faqmp-icon {
    background: rgba(1,84,101,0.12);
    border: 1.5px solid var(--faqmp-border-col);
}
.faqmp-item.faqmp-open .faqmp-icon {
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.45);
}

/* Both icon spans overlap, transition between them */
.faqmp-icon-plus,
.faqmp-icon-close {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    transition:
        opacity   0.32s ease,
        transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.faqmp-icon svg {
    width: 14px; height: 14px;
    fill: none; stroke-width: 2.5; stroke-linecap: round;
    display: block;
    transition: stroke 0.4s ease;
}
.faqmp-item:not(.faqmp-open) .faqmp-icon svg { stroke: var(--faqmp-accent); }
.faqmp-item.faqmp-open       .faqmp-icon svg { stroke: #ffffff; }

/* Plus visible / minus hidden (closed) */
.faqmp-icon-plus  { opacity: 1; transform: rotate(0deg)   scale(1);   }
.faqmp-icon-close { opacity: 0; transform: rotate(-90deg) scale(0.5); }

/* Plus hidden / minus visible (open) */
.faqmp-item.faqmp-open .faqmp-icon-plus  { opacity: 0; transform: rotate(90deg)  scale(0.5); }
.faqmp-item.faqmp-open .faqmp-icon-close { opacity: 1; transform: rotate(0deg)   scale(1);   }

/* ── Answer panel (height+opacity driven by JS) ── */
.faqmp-answer { overflow: hidden; }
.faqmp-answer[hidden] {
    display: block !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Answer inner */
.faqmp-answer-inner {
    padding: 0 20px 22px;
    font-size: 14px; line-height: 1.7;
    color: var(--faqmp-muted);
    transition: color 0.4s ease;
}
.faqmp-item.faqmp-open .faqmp-answer-inner { color: rgba(255,255,255,0.85); }

.faqmp-answer-inner p            { margin: 0 0 8px; font-family: "DM Sans", sans-serif; font-size: 16px; }
.faqmp-answer-inner p:last-child { margin-bottom: 0; }
.faqmp-answer-inner a            { color: rgba(255,255,255,0.9); text-decoration: underline; }
.faqmp-answer-inner ul,
.faqmp-answer-inner ol           { padding-left: 18px; }

/* Answer text fade-in */
@keyframes faqmp-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.faqmp-item.faqmp-open .faqmp-answer-inner {
    animation: faqmp-fadein 0.3s 0.15s ease both;
}

/* ── No Results ── */
.faqmp-no-results,
.faqmp-no-results-msg {
    text-align: center; color: var(--faqmp-muted); font-size: 14px;
    padding: 32px 20px;
    background: var(--faqmp-light-bg);
    border-radius: var(--faqmp-card-radius);
    border: 1.5px dashed var(--faqmp-border-col);
    width: 100%;
}

/* ── Responsive ── */
@media (max-width: 520px) {
    .faqmp-question      { padding: 15px 16px; }
    .faqmp-question-text { font-size: 14px; }
    .faqmp-answer-inner  { padding: 0 16px 18px; font-size: 13.5px; }
    .faqmp-icon          { width: 28px; height: 28px; }
    .faqmp-tab           { font-size: 12.5px; padding: 6px 14px; }
}