/**
 * FAQ page (/faq, cms/faq.html made by cms/make_faq.py): the jump list and the question accordions
 * (native <details>, no script) on top of the theme's .bb-page / .bb-chip / .bb-note (bb-pages.css).
 * Own file (server pub/media/faq/faq.css) so no Tailwind rebuild is needed; bump ?v= in make_faq.py after a change.
 * Tokens: the storefront's --color-bb-* (fallbacks are the same hex).
 */
.bb-faq .bb-faq-jump { margin: 0 0 1.5rem; }
.bb-page .bb-faq-jump ul.bb-chips { list-style: none; padding: 0; margin: 0; }
.bb-page .bb-faq-jump li { margin: 0; }
.bb-page .bb-faq-jump a.bb-chip { color: var(--color-bb-text, #e8ecf5); text-decoration: none; }
.bb-page .bb-faq-jump a.bb-chip:hover { border-color: var(--color-bb-amber, #f59e0b); color: var(--color-bb-amber-hi, #fbbf24); }

.bb-faq-section { scroll-margin-top: 6rem; margin-bottom: 1.75rem; }
.bb-faq-q { scroll-margin-top: 6rem; }

.bb-faq .bb-faq-q {
    margin: 0 0 .5rem;
    border: 1px solid var(--color-bb-line, #2a3756);
    border-radius: 10px;
    background: var(--color-bb-panel, #161f36);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), inset 0 -2px 0 rgb(0 0 0 / .2);
}
.bb-faq .bb-faq-q[open] { border-color: var(--color-bb-amber, #f59e0b); }
.bb-faq .bb-faq-q > summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-bb-text, #e8ecf5);
}
.bb-faq .bb-faq-q > summary::-webkit-details-marker { display: none; }
.bb-faq .bb-faq-q > summary::after {
    content: "+";
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 6px;
    background: var(--color-bb-panel-2, #1d2844);
    color: var(--color-bb-amber, #f59e0b);
    font-weight: 700;
    line-height: 1.5rem;
    text-align: center;
}
.bb-faq .bb-faq-q[open] > summary::after { content: "\2212"; }
.bb-faq .bb-faq-q > summary:hover { color: var(--color-bb-amber-hi, #fbbf24); }
.bb-faq .bb-faq-q > summary:focus-visible { outline: 2px solid var(--color-bb-amber, #f59e0b); outline-offset: 2px; border-radius: 10px; }
.bb-faq .bb-faq-a { padding: 0 1rem .9rem; color: var(--color-bb-text, #e8ecf5); }
.bb-faq .bb-faq-a > :last-child { margin-bottom: 0; }
.bb-faq .bb-faq-a ul { padding-left: 1.25rem; }

/* On-page search (faq.js) */
.bb-faq .bb-faq-search { margin: 0 0 1.25rem; }
.bb-faq .bb-faq-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .35rem; }
.bb-faq .bb-faq-search input {
    flex: 1 1 18rem;
    max-width: 36rem;
    min-width: 0;
    padding: .7rem .9rem;
    border: 1px solid var(--color-bb-line, #2a3756);
    border-radius: 10px;
    background: var(--color-bb-panel, #161f36);
    color: var(--color-bb-text, #e8ecf5);
    font-size: 1rem;
}
.bb-faq .bb-faq-search input:focus { outline: none; border-color: var(--color-bb-amber, #f59e0b); }
.bb-faq .bb-faq-search-none,
.bb-faq .bb-faq-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin: .75rem 0 0;
    color: var(--color-bb-muted, #9aa6c0);
}
.bb-faq .bb-faq-more { margin: 0 0 1.5rem; }
.bb-faq [hidden] { display: none !important; }
.bb-faq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Text-style button ("Ask a question", "Cancel") */
.bb-faq-ask-link {
    padding: .35rem .1rem;
    border: 0;
    background: none;
    color: var(--color-bb-amber, #f59e0b);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.bb-faq-ask-link:hover { color: var(--color-bb-amber-hi, #fbbf24); }
.bb-faq button.bb-btn, .bb-faq-drawer button.bb-btn { border: 0; cursor: pointer; }
.bb-faq-ask-link:focus-visible, .bb-faq-drawer button:focus-visible,
.bb-faq button.bb-btn:focus-visible { outline: 2px solid var(--color-bb-amber-hi, #fbbf24); outline-offset: 2px; }

/* Ask drawer (moved under <body> by faq.js) */
html.bb-faq-drawer-open { overflow: hidden; }
.bb-faq-drawer[hidden] { display: none; }
/* 100vw: also covers the page scrollbar gutter (the theme sets scrollbar-gutter: stable) */
.bb-faq-drawer { position: fixed; top: 0; bottom: 0; left: 0; width: 100vw; z-index: 1000; }
.bb-faq-drawer-shade {
    position: absolute;
    inset: 0;
    background: rgb(5 9 20 / .65);
    opacity: 0;
    transition: opacity .2s ease;
}
.bb-faq-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(30rem, 100%);
    overflow-y: auto;
    border-left: 4px solid var(--color-bb-amber, #f59e0b);
    background: var(--color-bb-panel, #161f36);
    color: var(--color-bb-text, #e8ecf5);
    box-shadow: -12px 0 32px rgb(0 0 0 / .45);
    transform: translateX(100%);
    transition: transform .22s ease;
}
.bb-faq-drawer.is-open .bb-faq-drawer-shade { opacity: 1; }
.bb-faq-drawer.is-open .bb-faq-drawer-panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .bb-faq-drawer-shade, .bb-faq-drawer-panel { transition: none; }
}
.bb-faq-drawer-panel:focus { outline: none; }
.bb-faq-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem .9rem;
    border-bottom: 1px solid var(--color-bb-line, #2a3756);
    background: var(--color-bb-panel-2, #1d2844);
    background-image: linear-gradient(var(--color-bb-panel-2, #1d2844), var(--color-bb-panel-2, #1d2844)),
        repeating-linear-gradient(-45deg, var(--color-bb-amber, #f59e0b) 0 8px, var(--color-bb-bg, #0b1020) 8px 16px);
    background-size: 100% calc(100% - 5px), 100% 5px;
    background-position: top, bottom;
    background-repeat: no-repeat;
}
.bb-faq-drawer-head h2 {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--color-bb-text, #e8ecf5);
}
.bb-faq-drawer-x {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-bb-line, #2a3756);
    border-radius: 8px;
    background: var(--color-bb-panel, #161f36);
    color: var(--color-bb-text, #e8ecf5);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.bb-faq-drawer-x:hover { border-color: var(--color-bb-amber, #f59e0b); color: var(--color-bb-amber-hi, #fbbf24); }
.bb-faq-ask-form { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.25rem 1.5rem; }
.bb-faq-ask-form p { margin: 0 0 .5rem; }
.bb-faq-ask-form .bb-muted { color: var(--color-bb-muted, #9aa6c0); }
.bb-faq-ask-form label { margin-top: .5rem; font-weight: 600; }
.bb-faq-ask-form input, .bb-faq-ask-form textarea {
    width: 100%;
    padding: .65rem .8rem;
    border: 1px solid var(--color-bb-line, #2a3756);
    border-radius: 8px;
    background: var(--color-bb-bg, #0b1020);
    color: var(--color-bb-text, #e8ecf5);
    font-size: 1rem;
    font-family: inherit;
}
.bb-faq-ask-form textarea { resize: vertical; min-height: 6rem; }
.bb-faq-ask-form input:focus, .bb-faq-ask-form textarea:focus { outline: none; border-color: var(--color-bb-amber, #f59e0b); }
.bb-faq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bb-faq-ask-status { min-height: 1.5rem; margin-top: .75rem !important; }
.bb-faq-ask-status.is-ok { padding: .6rem .8rem; border-left: 4px solid #22c55e; background: rgb(34 197 94 / .12); }
.bb-faq-ask-status.is-error { padding: .6rem .8rem; border-left: 4px solid #ef4444; background: rgb(239 68 68 / .12); }
.bb-faq-ask-actions { display: flex; align-items: center; gap: 1rem; margin-top: .25rem; }
.bb-faq-ask-actions .bb-btn:disabled { opacity: .6; cursor: wait; }
.bb-faq-ask-forum { margin-top: 1rem !important; color: var(--color-bb-muted, #9aa6c0); }
.bb-faq-ask-forum a { color: var(--color-bb-blue, #60a5fa); }

/* An open answer sits on the site's riveted gunmetal armour plate (the menu bar's and the
   forum cards' metal: --bb-plate-face / --bb-plate-brush / --bb-plate-bevel / --bb-rivet from the
   storefront's bb-menu-plate.css). Rivets in the four corners; the text is padded clear of them. */
.bb-faq .bb-faq-q[open] > .bb-faq-a {
    --bb-faq-rivet: 16px;
    --bb-faq-rivet-at: 7px;
    margin: 0 .6rem .7rem;
    padding: 1.35rem 2.1rem;
    border: 1px solid #121725;
    border-radius: 6px;
    background:
        var(--bb-rivet) left var(--bb-faq-rivet-at) top var(--bb-faq-rivet-at) / var(--bb-faq-rivet) var(--bb-faq-rivet) no-repeat,
        var(--bb-rivet) right var(--bb-faq-rivet-at) top var(--bb-faq-rivet-at) / var(--bb-faq-rivet) var(--bb-faq-rivet) no-repeat,
        var(--bb-rivet) left var(--bb-faq-rivet-at) bottom var(--bb-faq-rivet-at) / var(--bb-faq-rivet) var(--bb-faq-rivet) no-repeat,
        var(--bb-rivet) right var(--bb-faq-rivet-at) bottom var(--bb-faq-rivet-at) / var(--bb-faq-rivet) var(--bb-faq-rivet) no-repeat,
        var(--bb-plate-brush, none),
        var(--bb-plate-face, #2e3649);
    box-shadow: var(--bb-plate-bevel, inset 0 1px 0 rgb(255 255 255 / .1)), 0 3px 8px rgb(0 0 0 / .4);
    color: var(--color-bb-text, #e8ecf5);
    text-shadow: 0 1px 0 rgb(0 0 0 / .55);
}
.bb-faq .bb-faq-q[open] > .bb-faq-a a { color: var(--color-bb-amber-hi, #fbbf24); }
@media (max-width: 639px) {
    .bb-faq .bb-faq-q[open] > .bb-faq-a { --bb-faq-rivet: 13px; --bb-faq-rivet-at: 5px; padding: 1.1rem 1.4rem; margin: 0 .4rem .6rem; }
}
/* A question opened from a link (#id, faq.js): a short amber glow, none under reduced motion */
@keyframes bb-faq-flash {
    0%, 30% { box-shadow: 0 0 0 2px var(--color-bb-amber, #f59e0b), 0 0 18px rgb(245 158 11 / .35); }
    100% { box-shadow: 0 0 0 2px rgb(245 158 11 / 0), 0 0 18px rgb(245 158 11 / 0); }
}
.bb-faq-q.bb-faq-flash { animation: bb-faq-flash 2s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .bb-faq-q.bb-faq-flash { animation: none; }
}