/* ============================================================
   FAQ page redesign (v2) — /Home/Questions
   Loaded via @@section Css (after the global stylesheets).
   Categories -> tabs, questions -> accordion list with a
   gray answer panel. Bootstrap-first; custom CSS only for the
   active underline, chevron rotation and state colours.
   ============================================================ */

.faq-page {
    color: var(--zino-text);
}

/* --- Header ---------------------------------------------------------- */
.faq-title {
    color: var(--zino-text); /* Figma #575756 ~= --zino-text */
    font-weight: 700;
    font-size: clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem); /* 18 -> 22px */
}

    .faq-title .bi {
        font-size: 1.2em;
    }

.faq-sub {
    color: var(--zino-text);
    font-weight: 400; /* reset the bold inherited from .faq-title */
    font-size: 0.6875rem; /* 11px */
}

/* --- Category tabs --------------------------------------------------- */
.faq-tabs {
    overflow-x: auto; /* horizontal scroll on narrow screens */
    overflow-y: hidden; /* hide vertical scrollbar if any */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox: hide the bar so it can't cover the active underline */
    -ms-overflow-style: none; /* old Edge/IE */
}

    /* Chrome/Safari: hide the horizontal scrollbar (still touch/trackpad scrollable) */
    .faq-tabs::-webkit-scrollbar {
        display: none;
    }

    /* thin divider on the inline-end (left in RTL) of every tab but the last */
    .faq-tabs .nav-item:not(:last-child) .faq-tab {
        border-inline-end: 1px solid var(--zino-border);
    }

.faq-tab {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--zino-text);
    font-size: clamp(0.875rem, 0.83rem + 0.19vw, 1rem); /* 14 -> 16px */
    position: relative;
}

    .faq-tab:hover,
    .faq-tab:hover .bi {
        color: var(--zino-green);
    }

    .faq-tab.active,
    .faq-tab.active .bi {
        color: var(--zino-green);
    }

    .faq-tab.active {
        font-weight: 700;
        background: none;
    }

        /* green underline indicator under the active tab */
        .faq-tab.active::after {
            content: "";
            position: absolute;
            inset-inline: var(--space-4);
            bottom: 0; /* sit inside the row so overflow-y:hidden can't clip it */
            height: 3px;
            border-radius: 3px 3px 0 0;
            background: var(--zino-green);
        }

/* --- Question accordion ---------------------------------------------- */
.faq-acc .faq-q {
    border: 0;
    border-bottom: 1px solid var(--zino-border);
    background: none;
}

    .faq-acc .faq-q:first-child {
        border-top: 1px solid var(--zino-border);
    }

.faq-q-btn.accordion-button {
    gap: var(--space-2); /* keep the chevron right next to the question, not at row end */
    padding: var(--space-4) var(--space-2);
    background: none;
    box-shadow: none;
    color: var(--zino-text);
    font-size: clamp(0.8125rem, 0.79rem + 0.09vw, 0.875rem); /* 13 -> 14px */
}

    .faq-q-btn.accordion-button:focus {
        box-shadow: none;
    }

    /* hide Bootstrap's built-in chevron; we use our own icon */
    .faq-q-btn.accordion-button::after {
        display: none;
    }

    .faq-q-text {
        min-width: 0; /* allow the text to wrap/shrink instead of overflowing the row */
        overflow-wrap: anywhere; /* break long unbroken tokens on narrow screens */
    }

    .faq-q-btn:hover .faq-q-text {
        color: var(--zino-green);
    }

    /* expanded question -> bold green */
    .faq-q-btn:not(.collapsed) .faq-q-text {
        color: var(--zino-green);
        font-weight: 700;
    }

.faq-q-icon {
    flex-shrink: 0; /* never squash the chevron when the question is long */
    font-size: 0.75rem;
    transition: transform 0.2s ease;
    transform: rotate(0deg); /* open: points down */
}

.faq-q-btn.collapsed .faq-q-icon {
    transform: rotate(90deg); /* collapsed: points left ("<") */
    color: var(--zino-text);
}

.faq-q-btn:not(.collapsed) .faq-q-icon {
    color: var(--zino-green);
}

/* gray answer panel */
.faq-q-body.accordion-body {
    background: var(--zino-surface); /* Figma #f2f2f2 ~= --zino-surface */
    color: var(--zino-text);
    font-size: clamp(0.8125rem, 0.79rem + 0.09vw, 0.875rem);
    line-height: 2;
    padding: var(--space-4);
    text-align: justify;
}

/* --- "still have a question" CTA (KnowledgeBase) ---------------------- */
.faq-foot {
    border-top: 1px solid var(--zino-border);
    padding-top: var(--space-5);
}

.faq-foot-text {
    color: var(--zino-text-sub);
    font-size: 0.8125rem;
}

/* slanted green CTA (same shape language as the rest of v2) */
.faq-cta {
    position: relative;
    isolation: isolate;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 26px 8px 32px;
    color: #fff !important;
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.faq-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--zino-green);
    clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%);
    transition: background 0.2s ease;
}

.faq-cta:hover::before {
    background: var(--zino-green-hover);
}

.faq-cta i {
    font-size: 1rem;
}