/* ═══════════════════════════════════════════════════════════
   BBF FAQ – Frontend Styles
   ═══════════════════════════════════════════════════════════ */

.bbf-product-faq-fallback {
    width: 100%;
    margin: 2rem 0;
}

.bbf-product-faq-fallback__title {
    margin-bottom: 1rem;
}

.bbf-product-faq-fallback > .bbf-product-faqs {
    margin-top: 0 !important;
}

/* ── Tags ── */
.group-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-direction: column;
    margin-bottom: 40px;
}

.group-tags a {
    background: #000;
    border: 1px solid #000;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 16px;
    flex: 0 0 auto;
    color: #fff;
    border-radius: 0;
    font-weight: 500;
    max-width: max-content;
}

/* ── FAQ Numbering ── */
.faq-number {
    background: #000;
    color: #ebeae8;
    font-size: 29px;
    padding: 0px 7px;
    font-family: var(--font2);
    font-weight: 500;
    display: inline-block;
    line-height: 1.1em;
}

/* ── Main Title & Description ── */
.faq-main-title {
    font-size: 28px;
    font-weight: 700;
    color: #29343d;
    margin-bottom: 8px;
}

.faq-description {
    font-size: 15px;
    color: #555;
    margin-bottom: 24px;
    line-height: 1.6;
}

/* ── Group Navigation: Blocks ── */
.faq-group-nav {
    margin-bottom: 32px;
}

.faq-group-nav-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.faq-group-block {
    display: inline-block;
    padding: 12px 20px;
    background: #f4f7fb;
    border: 1px solid #e6e6e8;
    border-radius: 6px;
    color: #29343d;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.faq-group-block:hover,
.faq-group-block.active {
    background: #c41f76;
    border-color: #c41f76;
    color: #fff;
    text-decoration: none;
}

.faq-group-block:focus-visible,
.faq-group-link:focus-visible,
.faq-search-input:focus-visible,
.bbf-faq-page .faq-card button[data-toggle="collapse"]:focus-visible,
.bbf-faq-section button[data-toggle="collapse"]:focus-visible,
.bbf-faq-group button[data-toggle="collapse"]:focus-visible,
.bbfdesign-faq-portlet button[data-toggle="collapse"]:focus-visible {
    outline: 2px solid #93205f;
    outline-offset: 2px;
}

/* ── Group Navigation: List ── */
.faq-group-nav-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid #e6e6e8;
}

.faq-group-nav-list li {
    margin: 0;
}

.faq-group-link {
    display: inline-block;
    padding: 10px 18px;
    color: #555;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}

.faq-group-link:hover,
.faq-group-link.active {
    color: #c41f76;
    border-bottom-color: #c41f76;
    text-decoration: none;
}

/* ── Group Navigation: Dropdown ── */
.faq-group-nav-dropdown {
    max-width: 680px;
    margin-bottom: 32px;
}

.faq-group-nav-label {
    display: block;
    margin-bottom: 8px;
    color: #29343d;
    font-weight: 600;
}

.faq-group-nav-adaptive {
    padding: 20px;
    background: #f7f8fa;
    border-left: 3px solid #c41f76;
}

.faq-group-parent {
    margin-top: 28px;
    color: #66717b;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

/* ── Group Section ── */
.faq-group-section {
    scroll-margin-top: 80px;
}

.faq-group-title {
    font-size: 18px;
    font-weight: 600;
    color: #29343d;
}

/* ── FAQ Question styling ── */
.faq-question {
    color: #333;
}

/* ── Search ── */
.faq-search-wrapper {
    margin-bottom: 32px;
    position: relative;
    max-width: 500px;
}

.faq-search-input-wrap {
    position: relative;
}

.faq-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 14px;
    pointer-events: none;
}

.faq-search-input {
    padding-left: 38px !important;
    border-radius: 6px;
    border: 1px solid #e6e6e8;
    font-size: 14px;
}

.faq-search-input:focus {
    border-color: #c41f76;
    box-shadow: 0 0 0 3px rgba(219, 46, 135, 0.1);
}

.faq-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e6e6e8;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
    display: block;
}

.faq-search-results[hidden] {
    display: none;
}

.faq-search-result-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    text-align: left;
    color: #333;
    transition: background 0.15s;
}

.faq-search-result-item:hover,
.faq-search-result-item:focus-visible {
    background: #f4f7fb;
}

.faq-search-result-item:focus-visible {
    outline: 2px solid #93205f;
    outline-offset: -2px;
}

.faq-search-result-question,
.faq-search-snippet {
    display: block;
}

.faq-search-result-empty {
    padding: 10px 14px;
    color: #555;
    font-size: 14px;
    font-style: italic;
}

.faq-search-result-item:last-child {
    border-bottom: none;
}

.faq-search-result-item .faq-search-snippet {
    font-size: 12px;
    color: #555;
    margin-top: 2px;
}

.faq-card.is-deep-linked {
    outline: 2px solid #93205f;
    outline-offset: 2px;
}

.bbf-product-faq-static {
    padding: 1rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.bbf-product-faq-static:last-child {
    border-bottom: 0;
}

.bbf-product-faq-static__question {
    margin: 0 0 .5rem;
    font-size: 1rem;
    line-height: 1.4;
}

.bbf-product-faq-static__answer > :last-child,
.bbf-product-faq-static__answer .bbf-faq-answer__text > :last-child {
    margin-bottom: 0;
}

.faq-search-result-item mark {
    background: rgba(219, 46, 135, 0.15);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* ── Content Column (Side Content) ── */
.faq-side-content {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    border: 1px solid #eee;
}

.faq-side-content.faq-side-sticky {
    position: sticky;
    top: 20px;
}

.faq-side-content img {
    max-width: 100%;
    height: auto;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .faq-side-content.faq-side-sticky {
        position: static;
    }
}

@media (max-width: 768px) {
    .faq-group-nav-blocks {
        flex-direction: column;
    }

    .faq-group-block {
        text-align: center;
    }

    .faq-search-wrapper {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-group-block,
    .faq-group-link,
    .faq-search-result-item {
        scroll-behavior: auto;
        transition: none;
    }
}

.bbf-faq-autolink__new-tab-icon {
    display: inline-block;
    margin-left: 0.2em;
    font-size: 0.85em;
    line-height: 1;
}
.bbf-faq-answer--media { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 1rem; }
.bbf-faq-media-list { display: contents; }
.bbf-faq-media { position: relative; flex: 0 0 100%; order: 0; max-width: 100%; margin: 0; }
.bbf-faq-answer__text { flex: 1 1 320px; order: 2; min-width: 0; }
.bbf-faq-media--left { flex: 0 1 360px; order: 1; width: min(38%, 360px); }
.bbf-faq-media--right { flex: 0 1 360px; order: 3; width: min(38%, 360px); }
.bbf-faq-media--below { order: 4; }
.bbf-faq-media__link { position: relative; display: block; }
.bbf-faq-media img { display: block; width: 100%; height: auto; }
.bbf-faq-media figcaption { margin-top: .4rem; color: #667085; font-size: .875rem; }
.bbf-faq-media__ai { position: absolute; right: 6px; bottom: 6px; padding: 3px 6px; background: rgba(20, 25, 35, .82); color: #fff; font-size: 11px; line-height: 1.2; }
.bbf-faq-lightbox-open { overflow: hidden; }
.bbf-faq-lightbox { position: fixed; z-index: 100000; inset: 0; display: grid; place-items: center; padding: 48px 20px 20px; background: rgba(0, 0, 0, .86); }
.bbf-faq-lightbox img { max-width: min(1200px, 96vw); max-height: calc(100vh - 68px); object-fit: contain; }
.bbf-faq-lightbox__close { position: absolute; top: 10px; right: 14px; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; background: #fff; color: #111; font-size: 28px; line-height: 1; cursor: pointer; }
@media (max-width: 640px) { .bbf-faq-media--left, .bbf-faq-media--right { flex-basis: 100%; width: 100%; } }