/* FAQ index — Hub public search visual language (Patch 15).
 * Page-scoped: the shared accordion cards, global header and footer stay unchanged.
 * No shadow, blur, fixed header or hero overlay.
 */
.faq-index-page,
.faq-landing-page {
    --faq-accent: var(--amoot-color, #2166AE);
    --faq-text: #292f38;
    --faq-muted: #797f88;
    --faq-border: #e5e9ef;
    --faq-soft: #f7f9fb;
    color: var(--faq-text);
    padding-bottom: 70px;
    min-width: 0;
}

.faq-index-page *,
.faq-landing-page * {
    box-sizing: border-box;
}

.faq-index-intro {
    margin: 34px auto 22px;
    text-align: center;
    max-width: 720px;
}

.faq-index-intro h1 {
    margin: 0;
    font-size: clamp(22px, 2.1vw, 28px);
    font-weight: 800;
    line-height: 1.65;
    color: #252c36;
}

.faq-index-intro p {
    margin: 3px 0 0;
    color: var(--faq-muted);
    font-size: 13px;
    line-height: 1.95;
}

/* Exactly the understated field, blue action and neutral border used by Hub search. */
.faq-index-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(100%, 860px);
    min-height: 55px;
    margin: 0 auto;
    padding: 5px 7px;
    border: 1px solid var(--faq-border);
    border-radius: 6px;
    background: #fff;
}

.faq-index-search:focus-within {
    border-color: var(--faq-accent);
}

.faq-index-search__icon {
    display: inline-flex;
    flex: 0 0 23px;
    align-items: center;
    justify-content: center;
    margin-inline-start: 9px;
    color: #686d75;
}

.faq-index-search__icon svg {
    display: block;
    width: 21px;
    height: 21px;
}

.faq-index-page .faq-index-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    width: 0;
    height: 43px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: var(--faq-text);
    font-family: inherit;
    font-size: 14px;
}

.faq-index-page .faq-index-search input[type="search"]::placeholder {
    color: #9298a1;
}

.faq-index-search > button[type="submit"] {
    flex: 0 0 auto;
    min-height: 43px;
    padding: 0 24px;
    color: #fff;
    border: 1px solid var(--faq-accent);
    border-radius: 4px;
    background: var(--faq-accent);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.faq-index-search > button[type="submit"]:hover {
    background: #18568f;
}

.faq-index-search__suggestions {
    position: absolute;
    display: none;
    z-index: 12;
    top: calc(100% + 5px);
    inset-inline: 0;
    padding: 5px 0;
    background: white;
    border: 1px solid var(--faq-border);
    border-radius: 6px;
    max-height: 340px;
    overflow-y: auto;
}

.faq-index-search__suggestions .result-item {
    display: block;
    padding: 11px 16px;
    color: var(--faq-text);
    font-size: 13px;
    border-bottom: 1px solid #f1f3f6;
    text-align: right;
}

.faq-index-search__suggestions .result-item:last-child {
    border-bottom: 0;
}

.faq-index-search__suggestions a,
.faq-index-search__suggestions a:visited {
    color: var(--faq-accent);
    text-decoration: none;
}

.faq-index-search__suggestions .result-item:hover {
    background: var(--faq-soft);
}

.faq-index-content {
    margin: 49px 0 0;
}

.faq-index-section-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    margin: 0 0 19px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--faq-border);
}

.faq-index-section-title h2,
.faq-landing-products h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 750;
    color: #242c36;
}

.faq-index-section-title p {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--faq-muted);
}

.faq-index-jump {
    flex: 0 0 auto;
    color: var(--faq-accent);
    text-decoration: none;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.faq-index-jump::after {
    content: " ↙";
    display: inline;
}

/* The FAQ component stays shared. Only this explicit listing variant is a grid. */
.faq-index-page .hc-faq--content-first {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 256px;
    grid-template-areas: "answers topics";
    gap: 24px;
    align-items: start;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

.faq-index-page .hc-faq--content-first > .hc-faq__antiforgery {
    display: none;
}

.faq-index-page .hc-faq--content-first > .hc-faq__accordions {
    grid-area: answers;
    min-width: 0;
    scroll-margin-top: 22px;
}

.faq-index-page .hc-faq--content-first > .hc-faq__category-buttons {
    grid-area: topics;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    text-align: right;
    gap: 3px;
    min-width: 0;
    margin: 0;
    padding: 17px 13px;
    border: 1px solid var(--faq-border);
    border-radius: 8px;
    background: var(--faq-soft);
    scroll-margin-top: 18px;
}

.faq-index-page .hc-faq__categories-title {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 10px 12px;
    margin-bottom: 7px;
    border-bottom: 1px solid var(--faq-border);
}

.faq-index-page .hc-faq__categories-title strong {
    font-size: 14px;
    font-weight: 750;
    color: #333a44;
}

.faq-index-page .hc-faq__categories-title span {
    font-size: 11px;
    line-height: 1.9;
    color: var(--faq-muted);
}

.faq-index-page .hc-faq--content-first .hc-faq__cat-btn {
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #545f6d;
    cursor: pointer;
    text-align: right;
    font-family: inherit;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.8;
}

.faq-index-page .hc-faq--content-first .hc-faq__cat-btn:hover {
    color: var(--faq-accent);
    background: #fff;
}

.faq-index-page .hc-faq--content-first .hc-faq__cat-btn.is-active {
    color: var(--faq-accent);
    background: white;
    border-color: #d9e5f4;
}

.faq-index-page .hc-faq__cat-label {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.faq-index-page .hc-faq__cat-count {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11px;
    color: #7c8692;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.faq-index-page .hc-faq__cat-btn.is-active .hc-faq__cat-count {
    color: var(--faq-accent);
    background: #edf4fc;
}

/* Keep the original FAQ accordion design, spacing and survey controls. */
.faq-index-page .hc-faq__item {
    box-shadow: none !important;
}

.faq-index-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 26px;
    border: 1px solid var(--faq-border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--faq-muted);
}

.faq-index-empty a {
    color: var(--faq-accent);
}

/* General /faq landing: quiet link rows instead of the old decorative cards. */
.faq-landing-products {
    margin: 47px 0 65px;
}

.faq-landing-products h2 {
    padding-bottom: 15px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--faq-border);
}

.faq-landing-products__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.faq-landing-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 17px 19px;
    border: 1px solid var(--faq-border);
    border-radius: 7px;
    background: white;
    text-decoration: none;
    color: #404954;
}

.faq-landing-product:hover {
    border-color: #cbd9eb;
    background: var(--faq-soft);
    text-decoration: none;
}

.faq-landing-product__identity {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.faq-landing-product__identity img,
.faq-landing-product__monogram {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.faq-landing-product__monogram {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background: #eaf2fa;
    color: var(--faq-accent);
    font-weight: 800;
}

.faq-landing-product__identity strong {
    font-size: 14px;
    font-weight: 750;
}

.faq-landing-product__action {
    font-size: 18px;
    color: #adb5bf;
}

.faq-landing-product--Avanak strong { color: var(--avanak-primary-color, #42bfb9); }
.faq-landing-product--Payamak strong { color: var(--payamak-primary-color, #ff8a11); }
.faq-landing-product--OwjCloud strong { color: var(--owj-primary-color, #582f87); }
.faq-landing-product--Alavan strong { color: var(--alavan-primary-color, #9e0020); }
.faq-landing-product--Koolak strong { color: var(--koolak-primary-color, #2166ae); }

.faq-index-page a:focus-visible,
.faq-index-page button:focus-visible,
.faq-landing-page a:focus-visible,
.faq-index-page .hc-faq__cat-btn:focus-visible {
    outline: 2px solid var(--faq-accent);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .faq-index-page .hc-faq--content-first > .hc-faq__category-buttons {
        position: sticky;
        top: 88px;
        max-height: calc(100vh - 108px);
        overflow-y: auto;
        overflow-x: hidden;
    }
}

@media (max-width: 767.98px) {
    .faq-index-intro {
        margin-top: 23px;
        margin-bottom: 19px;
    }

    .faq-index-intro p {
        padding: 0 6px;
    }

    .faq-index-content {
        margin-top: 32px;
    }

    .faq-index-page .hc-faq--content-first {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "answers" "topics";
        gap: 26px;
    }

    /* Answers really precede category navigation in document and visual order. */
    .faq-index-page .hc-faq--content-first > .hc-faq__category-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding: 12px;
    }

    .faq-index-page .hc-faq__categories-title {
        grid-column: 1 / -1;
        padding: 4px 5px 12px;
    }

    .faq-index-page .hc-faq--content-first .hc-faq__cat-btn {
        min-height: 45px;
        border-color: #e6eaf0;
        background: #fff;
    }

    .faq-index-page .hc-faq--content-first .hc-faq__cat-btn.is-active {
        background: #edf4fc;
        border-color: #cfdfef;
    }

    .faq-landing-products__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 399.98px) {
    .faq-index-page .hc-faq--content-first > .hc-faq__category-buttons {
        grid-template-columns: minmax(0, 1fr);
    }

    .faq-index-search {
        gap: 6px;
    }

    .faq-index-search > button[type="submit"] {
        padding-inline: 12px;
    }

    .faq-index-section-title h2 {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-index-page *, .faq-landing-page * {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}