/* ═══════════════════════════════════════════════════════════════
   BUMAGA FAQ — Knowledge Center v2.0
   Location: /assets/css/faq.css
   ═══════════════════════════════════════════════════════════════
   
   Namespace: faq-*
   Dependencies: tokens.css (--bp-*)
   Pattern: labels.css hero/filters + Google Images expand
   ═══════════════════════════════════════════════════════════════ */

.faq-container { max-width:1100px; margin:0 auto; padding:40px 24px 60px; }

/* ══════════════════════════════════════════════════════════════
   HERO — labels.css pattern
   ══════════════════════════════════════════════════════════════ */
.faq-hero { text-align:center; margin-bottom:48px; }
.faq-hero-title { font-size:42px; font-weight:900; margin-bottom:15px; display:flex; align-items:center; justify-content:center; gap:15px; color:var(--bp-text); }
.faq-hero-icon { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; background:linear-gradient(135deg, var(--bp-accent) 0%, #2d7cd6 100%); border-radius:var(--bp-radius); box-shadow:0 0 20px rgba(74,158,255,0.3); }
.faq-hero-icon svg { width:32px; height:32px; color:#fff; }
.faq-hero-subtitle { color:var(--bp-text-secondary); font-size:18px; max-width:600px; margin:0 auto 24px; line-height:1.6; }

/* Search */
.faq-search-wrap { max-width:500px; margin:0 auto 20px; position:relative; }
.faq-search-input { width:100%; background:var(--bp-surface); border:1px solid var(--bp-border); color:var(--bp-text); padding:13px 20px 13px 48px; border-radius:var(--bp-radius-sm); font-size:0.95rem; font-family:var(--bp-font,'Roboto',sans-serif); transition:border-color 0.2s; }
.faq-search-input::placeholder { color:var(--bp-text-muted); }
.faq-search-input:focus { border-color:var(--bp-accent); outline:none; box-shadow:0 0 0 3px rgba(74,158,255,0.12); }
.faq-search-svg { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--bp-text-muted); pointer-events:none; }

/* Quick Entry Pills */
.faq-quick-entry { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.faq-qe-pill { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; background:var(--bp-surface); border:1px solid var(--bp-border); border-radius:20px; color:var(--bp-text-secondary); font-size:0.85rem; font-weight:500; cursor:pointer; transition:all 0.2s; font-family:var(--bp-font,'Roboto',sans-serif); }
.faq-qe-pill:hover { border-color:rgba(74,158,255,0.4); color:var(--bp-accent); background:rgba(74,158,255,0.05); transform:translateY(-1px); }

/* ══════════════════════════════════════════════════════════════
   SECTION HEADERS
   ══════════════════════════════════════════════════════════════ */
.faq-section-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,0.06); }
.faq-section-icon { font-size:1.3rem; }
.faq-section-title { font-size:1.1rem; font-weight:700; color:#fff; }
.faq-section-count { font-size:0.72rem; font-weight:600; color:var(--bp-text-muted); background:rgba(255,255,255,0.06); padding:2px 8px; border-radius:4px; margin-left:auto; }

/* ══════════════════════════════════════════════════════════════
   FEATURED CARDS — large, with cover
   ══════════════════════════════════════════════════════════════ */
.faq-featured-section { margin-bottom:40px; }
.faq-featured-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }

.faq-featured-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:14px; overflow:hidden; cursor:pointer; transition:all 0.25s; }
.faq-featured-card:hover { border-color:rgba(74,158,255,0.35); transform:translateY(-3px); box-shadow:0 12px 32px rgba(74,158,255,0.1); }
.faq-featured-card.faq-card--active { border-color:rgba(74,158,255,0.5); background:rgba(74,158,255,0.06); }

.faq-feat-cover { height:140px; overflow:hidden; background:#1a1a1a; }
.faq-feat-cover img { width:100%; height:100%; object-fit:cover; }
.faq-feat-cover--empty { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(74,158,255,0.08), rgba(74,158,255,0.02)); }
.faq-feat-cover--empty span { font-size:2.5rem; }

.faq-feat-body { padding:16px 18px; }
.faq-feat-title { font-size:1rem; font-weight:700; color:#e0e0e0; line-height:1.4; margin-bottom:6px; }
.faq-feat-short { font-size:0.82rem; color:#888; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ══════════════════════════════════════════════════════════════
   CATEGORY SECTIONS
   ══════════════════════════════════════════════════════════════ */
.faq-category-section { margin-bottom:36px; }

/* ══════════════════════════════════════════════════════════════
   COMPACT CARDS — grid
   ══════════════════════════════════════════════════════════════ */
.faq-compact-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

.faq-compact-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:16px 18px; cursor:pointer; transition:all 0.2s; }
.faq-compact-card:hover { border-color:rgba(74,158,255,0.3); background:rgba(255,255,255,0.05); transform:translateY(-1px); }
.faq-compact-card.faq-card--active { border-color:rgba(74,158,255,0.5); background:rgba(74,158,255,0.06); }

.faq-c-title { font-size:0.88rem; font-weight:600; color:#e0e0e0; line-height:1.4; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.faq-c-short { font-size:0.78rem; color:#777; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:8px; }
.faq-c-footer { display:flex; align-items:center; gap:6px; font-size:0.7rem; color:#555; }
.faq-c-media { background:rgba(251,191,36,0.1); color:#fbbf24; padding:2px 7px; border-radius:4px; }
.faq-c-cat { background:rgba(74,158,255,0.08); color:var(--bp-accent); padding:2px 7px; border-radius:4px; }
.faq-c-arrow { margin-left:auto; color:#555; transition:color 0.2s; }
.faq-compact-card:hover .faq-c-arrow { color:var(--bp-accent); }

/* ══════════════════════════════════════════════════════════════
   EXPAND BLOCK — Google Images inline pattern
   ══════════════════════════════════════════════════════════════ */
.faq-expand {
    grid-column:1 / -1;
    background:#1a1a1a; border:1px solid rgba(74,158,255,0.25);
    border-radius:14px; overflow:hidden;
    max-height:0; opacity:0;
    transition:max-height 0.35s ease, opacity 0.25s ease;
}
.faq-expand--open { max-height:2000px; opacity:1; }

.faq-expand-inner { display:flex; gap:0; }

/* Left: media area — active image viewer + thumbnails */
.faq-expand-media { position:relative; width:380px; flex-shrink:0; background:#111; padding:16px; display:flex; flex-direction:column; gap:10px; border-right:1px solid rgba(255,255,255,0.06); transition:width 0.35s ease; }
.faq-expand-media[style*="display: none"] ~ .faq-expand-content { border-left:none; }

/* Main preview */
.faq-media-main { position:relative; background:#0b0f14; border-radius:12px; overflow:hidden; cursor:pointer; aspect-ratio:4/3; min-height:320px; display:flex; align-items:center; justify-content:center; padding:10px; border:1px solid rgba(255,255,255,0.06); transition:min-height 0.35s ease; }
.faq-media-main img { width:100%; height:100%; object-fit:contain; transition:opacity 0.2s; }
.faq-media-main:hover::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.3); }
.faq-media-main:hover .faq-media-zoom-hint { opacity:1; }
.faq-media-zoom-hint { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; background:rgba(74,158,255,0.85); border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.2s; pointer-events:none; z-index:2; }
.faq-media-zoom-hint svg { width:20px; height:20px; color:#fff; }
.faq-mzh-collapse { display:none; }
.faq-expand--zoomed .faq-mzh-expand { display:none; }
.faq-expand--zoomed .faq-mzh-collapse { display:block; }

/* Zoom close button (visible only in zoomed state) */
.faq-media-zoom-close { display:none; position:absolute; top:8px; right:8px; width:30px; height:30px; background:rgba(248,113,113,0.15); border:1px solid rgba(248,113,113,0.25); border-radius:8px; color:#f87171; font-size:0.9rem; cursor:pointer; align-items:center; justify-content:center; transition:all 0.2s; z-index:3; font-family:var(--bp-font,'Roboto',sans-serif); }
.faq-media-zoom-close:hover { background:rgba(248,113,113,0.3); color:#fff; }
.faq-expand--zoomed .faq-media-zoom-close { display:flex; }
.faq-media-badge { position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,0.75); color:#ccc; padding:3px 10px; border-radius:6px; font-size:0.72rem; font-weight:600; backdrop-filter:blur(4px); }

/* Thumbnail strip */
.faq-media-thumbs { display:flex; gap:6px; overflow-x:auto; padding:2px 0; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.1) transparent; }
.faq-media-thumbs::-webkit-scrollbar { height:4px; }
.faq-media-thumbs::-webkit-scrollbar-track { background:transparent; }
.faq-media-thumbs::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:2px; }
.faq-media-th { width:72px; height:54px; border-radius:8px; object-fit:cover; cursor:pointer; border:2px solid transparent; opacity:0.5; transition:all 0.2s; flex-shrink:0; }
.faq-media-th:hover { opacity:0.85; transform:scale(1.05); }
.faq-media-th.active { border-color:var(--bp-accent); opacity:1; box-shadow:0 0 0 1px rgba(74,158,255,0.3); }

/* Video link */
.faq-expand-video-link { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; background:rgba(74,158,255,0.06); border:1px solid rgba(74,158,255,0.15); border-radius:8px; color:var(--bp-accent); font-size:0.85rem; font-weight:500; text-decoration:none; transition:all 0.2s; }
.faq-expand-video-link:hover { background:rgba(74,158,255,0.12); }
/* Video tile — scam-list inspired */
.faq-video-tile {
    position:relative;
    width:100%;
    max-width:100%;
    aspect-ratio:16/9;
    min-height:180px;
    border-radius:14px;
    overflow:hidden;
    border:1px solid rgba(74,158,255,0.18);
    background:
        radial-gradient(circle at 50% 35%, rgba(74,158,255,0.18), transparent 42%),
        linear-gradient(145deg,#0b0f14,#111827);
    cursor:pointer;
    padding:0;
    display:block;
    box-shadow:0 14px 36px rgba(0,0,0,0.32);
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.faq-video-tile:hover {
    transform:translateY(-1px);
    border-color:rgba(74,158,255,0.45);
    box-shadow:0 18px 46px rgba(0,0,0,0.42), 0 0 0 1px rgba(74,158,255,0.12);
}
.faq-video-tile::after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,0.05),rgba(0,0,0,0.52));
    pointer-events:none;
}
.faq-video-poster {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    opacity:.88;
    filter:saturate(.95) contrast(1.04);
    transition:opacity .18s ease, transform .22s ease;
}
.faq-video-tile:hover .faq-video-poster {
    opacity:1;
    transform:scale(1.025);
}
.faq-video-tile--no-poster {
    display:flex;
    align-items:center;
    justify-content:center;
}
.faq-video-tile--no-poster::before {
    content:'BUMAGA VIDEO';
    position:absolute;
    letter-spacing:.16em;
    font-size:.68rem;
    font-weight:800;
    color:rgba(255,255,255,.18);
    transform:translateY(38px);
}
.faq-video-play {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:2;
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-left:4px;
    background:rgba(74,158,255,.92);
    color:#fff;
    font-size:1.25rem;
    box-shadow:0 12px 34px rgba(74,158,255,.28), 0 0 0 8px rgba(74,158,255,.12);
    transition:transform .18s ease, background .18s ease;
}
.faq-video-tile:hover .faq-video-play {
    transform:translate(-50%,-50%) scale(1.06);
    background:#60a5fa;
}
.faq-video-chip {
    position:absolute;
    left:10px;
    bottom:10px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 9px;
    border-radius:999px;
    background:rgba(0,0,0,.68);
    color:#e5e7eb;
    border:1px solid rgba(255,255,255,.08);
    font-size:.72rem;
    font-weight:700;
    backdrop-filter:blur(8px);
}
.faq-video-lightbox {
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
}
.faq-video-lightbox.is-open { display:flex; }
.faq-video-lightbox-backdrop {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.82);
    backdrop-filter:blur(12px);
}
.faq-video-lightbox-panel {
    position:relative;
    z-index:1;
    width:min(1100px,94vw);
    max-height:88vh;
    border-radius:18px;
    border:1px solid rgba(74,158,255,.24);
    background:#05070a;
    box-shadow:0 24px 80px rgba(0,0,0,.62);
    padding:14px;
}
.faq-video-lightbox-player {
    width:100%;
    max-height:78vh;
    display:block;
    border-radius:12px;
    background:#000;
}
.faq-video-lightbox-close {
    position:absolute;
    top:-14px;
    right:-14px;
    width:38px;
    height:38px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    background:#111827;
    color:#fff;
    cursor:pointer;
    z-index:2;
    font-size:1rem;
    box-shadow:0 12px 32px rgba(0,0,0,.42);
}
.faq-video-lightbox-close:hover {
    background:#1f2937;
}
body.faq-video-open {
    overflow:hidden;
}



/* Right: content area */
.faq-expand-content { flex:1; min-width:0; display:flex; flex-direction:column; }
.faq-expand-header { display:flex; align-items:flex-start; gap:12px; padding:18px 20px; border-bottom:1px solid rgba(255,255,255,0.06); }
.faq-expand-title { flex:1; font-size:1.15rem; font-weight:700; color:#fff; line-height:1.3; }
.faq-expand-close { background:rgba(255,255,255,0.06); border:none; width:32px; height:32px; border-radius:8px; color:#888; font-size:1rem; cursor:pointer; transition:all 0.2s; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.faq-expand-close:hover { background:rgba(248,113,113,0.15); color:#f87171; }

.faq-expand-body { padding:20px; font-size:0.88rem; color:#bbb; line-height:1.75; overflow-y:auto; max-height:600px; flex:1; }
.faq-expand-body p { margin:0 0 16px; max-width:680px; }
.faq-expand-body p:last-child { margin:0; }
.faq-expand-body strong { color:var(--bp-accent); font-weight:600; }
.faq-expand-body a { color:var(--bp-accent); text-decoration:underline; }

/* Related */
.faq-expand-related { padding:14px 20px; border-top:1px solid rgba(255,255,255,0.06); }
.faq-expand-related-title { font-size:0.72rem; font-weight:600; color:#666; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.faq-expand-related-item { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:8px; margin-right:8px; margin-bottom:6px; cursor:pointer; font-size:0.78rem; color:#ccc; transition:all 0.2s; }
.faq-expand-related-item:hover { border-color:rgba(74,158,255,0.3); color:var(--bp-accent); }

/* ══════════════════════════════════════════════════════════════
   SEARCH RESULTS STATE
   ══════════════════════════════════════════════════════════════ */
.faq-search-results-header { display:flex; align-items:center; gap:8px; margin-bottom:16px; font-size:0.88rem; color:var(--bp-text-secondary); }
.faq-search-results-header span:first-child { font-weight:700; color:var(--bp-accent); font-size:1.1rem; }
.faq-search-clear { background:rgba(248,113,113,0.1); border:1px solid rgba(248,113,113,0.2); color:#f87171; padding:4px 12px; border-radius:6px; font-size:0.78rem; cursor:pointer; margin-left:auto; }
.faq-search-results-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

/* ══════════════════════════════════════════════════════════════
   ZOOMED MEDIA STATE — article-scoped viewer (Level 2)
   Click main image → media area expands, text shrinks. No overlay.
   ══════════════════════════════════════════════════════════════ */
.faq-expand--zoomed .faq-expand-media { width:62%; }
.faq-expand--zoomed .faq-media-main { aspect-ratio:auto; min-height:420px; }
.faq-expand--zoomed .faq-media-main img { object-fit:contain; }
.faq-expand--zoomed .faq-expand-body { max-height:500px; }

/* ══════════════════════════════════════════════════════════════
   CTA
   ══════════════════════════════════════════════════════════════ */
.faq-cta { text-align:center; padding:32px 20px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); border-radius:16px; margin:40px 0 20px; }
.faq-cta-title { font-size:1.1rem; font-weight:700; color:#fff; margin-bottom:8px; }
.faq-cta-text { font-size:0.88rem; color:#888; margin-bottom:18px; }
.faq-cta-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 28px; background:linear-gradient(135deg,#0088cc,#006699); color:#fff; border-radius:8px; font-size:0.9rem; font-weight:600; text-decoration:none; transition:all 0.2s; }
.faq-cta-btn:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,136,204,0.3); }
.faq-cta-btn svg { width:18px; height:18px; }

/* Empty */
.faq-empty { text-align:center; padding:60px 20px; color:#555; }
.faq-empty-icon { font-size:3rem; margin-bottom:12px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
    .faq-hero-title { font-size:32px; }
    .faq-hero-subtitle { font-size:16px; }
    .faq-compact-grid { grid-template-columns:1fr 1fr; }
    .faq-search-results-grid { grid-template-columns:1fr 1fr; }
    .faq-expand-inner { flex-direction:column; }
    .faq-expand-media { width:100%; max-height:none; }
    .faq-expand--zoomed .faq-expand-media { width:100%; }
    .faq-expand--zoomed .faq-media-main { min-height:320px; }
    .faq-media-main { aspect-ratio:16/9; min-height:200px; }
    .faq-media-thumbs { flex-wrap:nowrap; }
    .faq-media-th { width:56px; height:42px; }
}

@media (max-width:600px) {
    .faq-container { padding:24px 16px 40px; }
    .faq-hero { margin-bottom:32px; }
    .faq-hero-title { font-size:26px; gap:10px; }
    .faq-hero-icon { width:44px; height:44px; }
    .faq-hero-icon svg { width:24px; height:24px; }
    .faq-hero-subtitle { font-size:14px; margin-bottom:18px; }
    .faq-search-input { padding:11px 16px 11px 42px; font-size:0.9rem; }
    .faq-quick-entry { gap:6px; }
    .faq-qe-pill { padding:7px 14px; font-size:0.78rem; }
    .faq-compact-grid { grid-template-columns:1fr; }
    .faq-search-results-grid { grid-template-columns:1fr; }
    .faq-featured-grid { grid-template-columns:1fr; }
    .faq-feat-cover { height:100px; }
    .faq-expand-media { padding:12px; }
    .faq-expand-body { padding:14px; font-size:0.84rem; max-height:500px; }
    .faq-cta { padding:24px 16px; margin:28px 0 16px; }
    .faq-expand--zoomed .faq-media-main { min-height:260px; }
}


/* ════════════════════════════════════════════════════════════
   P18B_FAQ_MOBILE_PRODUCTION_LIGHTBOX_UX
   Mobile-only production image lightbox for FAQ article media.
   Desktop FAQ behavior remains unchanged.
   ════════════════════════════════════════════════════════════ */

.faq-mobile-lightbox {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0,0,0,.94) !important;
    z-index: 999999 !important;
    isolation: isolate !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
}

.faq-mobile-lightbox.open {
    display: flex !important;
}

.faq-mobile-lb-stage {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: calc(62px + env(safe-area-inset-top)) 10px calc(54px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    touch-action: none !important;
    overflow: hidden !important;
    cursor: grab !important;
}

.faq-mobile-lb-stage.is-dragging {
    cursor: grabbing !important;
}

.faq-mobile-lb-img {
    display: block !important;
    max-width: 96vw !important;
    max-height: 82dvh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    transform-origin: center center !important;
    will-change: transform !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
    touch-action: none !important;
    box-shadow: 0 18px 60px rgba(0,0,0,.62) !important;
}

.faq-mobile-lb-close {
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top)) !important;
    right: 12px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.26) !important;
    background-color: rgba(26,26,26,.94) !important;
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M7%207L17%2017M17%207L7%2017%27%20stroke%3D%27white%27%20stroke-width%3D%272.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 22px 22px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.42) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    cursor: pointer !important;
    z-index: 1000000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    overflow: hidden !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.faq-mobile-lb-close::before,
.faq-mobile-lb-close::after,
.faq-mobile-lb-close * {
    content: none !important;
    display: none !important;
}

.faq-mobile-lb-counter {
    position: fixed !important;
    top: calc(18px + env(safe-area-inset-top)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 6px 13px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.55) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.86) !important;
    font: 700 12px/1 var(--bp-sans, Arial, sans-serif) !important;
    z-index: 1000000 !important;
    pointer-events: none !important;
}

.faq-mobile-lb-nav {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    font-size: 28px !important;
    line-height: 1 !important;
    z-index: 1000000 !important;
    cursor: pointer !important;
}

.faq-mobile-lb-nav:disabled {
    opacity: .28 !important;
    cursor: default !important;
}

.faq-mobile-lb-prev { left: 12px !important; }
.faq-mobile-lb-next { right: 12px !important; }

@media (max-width: 768px) {
    .faq-media-main,
    .faq-media-main img,
    #faqMainImg {
        cursor: zoom-in !important;
    }

    .faq-mobile-lb-nav {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════
   P18D — FAQ mobile gallery / lightbox sync hardening
   - keep photo badge inside the image area
   - stop mobile overflow clipping
   - preserve desktop behavior
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .faq-expand-media,
    .faq-media-main {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .faq-media-main {
        overflow: hidden !important;
        touch-action: pan-y !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    .faq-media-main img {
        max-width: 100% !important;
        max-height: 100% !important;
        -webkit-user-drag: none !important;
        user-select: none !important;
    }

    .faq-media-badge {
        right: 10px !important;
        bottom: 10px !important;
        max-width: calc(100% - 20px) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        z-index: 6 !important;
        pointer-events: none !important;
    }

    .faq-media-thumbs {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
    }

    html.faq-mobile-lb-open,
    html.faq-mobile-lb-open body {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    .faq-mobile-lightbox.open {
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 1000000 !important;
    }

    .faq-mobile-lb-stage {
        touch-action: none !important;
        overscroll-behavior: none !important;
    }
}

/* ═══════════════════════════════════════════════
   P18E — FAQ article share button + toast
   Matches Labels minimal share action style.
   ═══════════════════════════════════════════════ */
.faq-expand-share {
    position: absolute;
    top: 22px;
    right: 76px;
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.045);
    color: rgba(255,255,255,0.58);
    cursor: pointer;
    z-index: 5;
    transition: background var(--bp-transition), border-color var(--bp-transition), color var(--bp-transition);
    appearance: none;
    -webkit-appearance: none;
}

.faq-expand-share svg {
    width: 18px;
    height: 18px;
    display: block;
}

.faq-expand-share:hover {
    background: rgba(74,158,255,0.10);
    border-color: rgba(74,158,255,0.35);
    color: var(--bp-accent);
}

.faq-expand-share:active {
    background: rgba(74,158,255,0.16);
}

.faq-share-toast {
    position: fixed;
    left: 50%;
    bottom: calc(28px + env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(18px);
    padding: 12px 18px;
    border-radius: 12px;
    background: rgba(26,26,26,0.96);
    border: 1px solid rgba(74,158,255,0.34);
    color: #fff;
    font-family: var(--bp-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    opacity: 0;
    pointer-events: none;
    z-index: 1000002;
    transition: opacity .22s ease, transform .22s ease;
    white-space: nowrap;
}

.faq-share-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.faq-share-toast--error {
    border-color: rgba(248,113,113,0.38);
}

@media (max-width: 768px) {
    .faq-expand-share {
        top: 18px;
        right: 82px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: rgba(255,255,255,0.055);
    }

    .faq-expand-share svg {
        width: 17px;
        height: 17px;
    }

    .faq-share-toast {
        bottom: calc(86px + env(safe-area-inset-bottom));
        font-size: 13px;
        padding: 11px 16px;
    }
}

/* ═══════════════════════════════════════════════
   P18F — FAQ share runtime button
   Minimal link-copy button near article close.
   ═══════════════════════════════════════════════ */
.faq-expand-share {
    position: absolute;
    top: 22px;
    right: 76px;
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.045);
    color: rgba(255,255,255,0.58);
    cursor: pointer;
    z-index: 6;
    transition: background var(--bp-transition), border-color var(--bp-transition), color var(--bp-transition);
    appearance: none;
    -webkit-appearance: none;
}

.faq-expand-share svg {
    width: 18px;
    height: 18px;
    display: block;
}

.faq-expand-share:hover {
    background: rgba(74,158,255,0.10);
    border-color: rgba(74,158,255,0.35);
    color: var(--bp-accent);
}

.faq-expand-share:active {
    background: rgba(74,158,255,0.16);
}

.faq-share-toast {
    position: fixed;
    left: 50%;
    bottom: calc(28px + env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(18px);
    padding: 12px 18px;
    border-radius: 12px;
    background: rgba(26,26,26,0.96);
    border: 1px solid rgba(74,158,255,0.34);
    color: #fff;
    font-family: var(--bp-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    opacity: 0;
    pointer-events: none;
    z-index: 1000002;
    transition: opacity .22s ease, transform .22s ease;
    white-space: nowrap;
}

.faq-share-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.faq-share-toast--error {
    border-color: rgba(248,113,113,0.38);
}

@media (max-width: 768px) {
    .faq-expand-share {
        top: 18px;
        right: 82px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: rgba(255,255,255,0.055);
    }

    .faq-expand-share svg {
        width: 17px;
        height: 17px;
    }

    .faq-share-toast {
        bottom: calc(86px + env(safe-area-inset-bottom));
        font-size: 13px;
        padding: 11px 16px;
    }
}

/* ════════════════════════════════════════════════════════════
   P18G_FAQ_SHARE_VISIBILITY_LAYOUT_FIX
   FAQ expanded article header: force share button visible.
   The button already exists in DOM as #faqExpandShare.
   This patch only fixes positioning/visibility; no JS duplication.
   ════════════════════════════════════════════════════════════ */
.faq-expand .faq-expand-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 64px !important;
    padding-right: 112px !important;
}

.faq-expand .faq-expand-title {
    min-width: 0 !important;
    max-width: 100% !important;
}

.faq-expand .faq-expand-share#faqExpandShare {
    position: absolute !important;
    top: 50% !important;
    right: 64px !important;
    transform: translateY(-50%) !important;

    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 12px !important;
    border: 1px solid rgba(74,158,255,.28) !important;
    background: rgba(74,158,255,.08) !important;
    color: rgba(74,158,255,.95) !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    cursor: pointer !important;

    z-index: 50 !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;

    transition: border-color .18s ease, background-color .18s ease, color .18s ease !important;
}

.faq-expand .faq-expand-share#faqExpandShare svg {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
    flex: 0 0 auto !important;
    stroke: currentColor !important;
}

.faq-expand .faq-expand-share#faqExpandShare:hover {
    border-color: rgba(74,158,255,.55) !important;
    background: rgba(74,158,255,.14) !important;
    color: #4a9eff !important;
}

/* Keep close button above content and visually after share */
.faq-expand .faq-expand-close,
.faq-expand #faqExpandClose {
    z-index: 60 !important;
}

@media (max-width: 768px) {
    .faq-expand .faq-expand-header {
        min-height: 58px !important;
        padding-right: 106px !important;
    }

    .faq-expand .faq-expand-share#faqExpandShare {
        right: 62px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 12px !important;
    }

    .faq-expand .faq-expand-share#faqExpandShare svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ════════════════════════════════════════════════════════════
   P18H_FAQ_SHARE_CLOSE_TWIN_BUTTONS
   FAQ expanded article header: make Share and Close identical,
   neutral, minimal, no blue fill, same size/weight.
   ════════════════════════════════════════════════════════════ */

/* Header must keep title left and controls right */
.faq-expand .faq-expand-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.faq-expand .faq-expand-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Common control style: close + share */
.faq-expand .faq-expand-share#faqExpandShare,
.faq-expand .faq-expand-close,
.faq-expand #faqExpandClose {
    position: relative !important;

    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 42px !important;

    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.055) !important;
    background-image: none !important;

    color: rgba(255,255,255,.72) !important;
    opacity: 1 !important;
    visibility: visible !important;

    box-shadow: none !important;
    outline: none !important;

    cursor: pointer !important;
    transform: none !important;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Same SVG size for both controls */
.faq-expand .faq-expand-share#faqExpandShare svg,
.faq-expand .faq-expand-close svg,
.faq-expand #faqExpandClose svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;

    display: block !important;

    color: currentColor !important;
    stroke: currentColor !important;
    stroke-width: 2.15 !important;

    opacity: 1 !important;
    transform: none !important;
    pointer-events: none !important;
}

/* If close is still text-based "×", normalize it too */
.faq-expand .faq-expand-close,
.faq-expand #faqExpandClose {
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Neutral hover, no blue fill */
.faq-expand .faq-expand-share#faqExpandShare:hover,
.faq-expand .faq-expand-close:hover,
.faq-expand #faqExpandClose:hover {
    background: rgba(255,255,255,.09) !important;
    border-color: rgba(255,255,255,.18) !important;
    color: rgba(255,255,255,.92) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Soft active state */
.faq-expand .faq-expand-share#faqExpandShare:active,
.faq-expand .faq-expand-close:active,
.faq-expand #faqExpandClose:active {
    background: rgba(255,255,255,.075) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: rgba(255,255,255,.85) !important;
    transform: none !important;
}

/* Mobile: keep same visual size, slightly smaller only if needed */
@media (max-width: 640px) {
    .faq-expand .faq-expand-header {
        gap: 8px !important;
    }

    .faq-expand .faq-expand-share#faqExpandShare,
    .faq-expand .faq-expand-close,
    .faq-expand #faqExpandClose {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        flex-basis: 40px !important;
        border-radius: 11px !important;
    }

    .faq-expand .faq-expand-share#faqExpandShare svg,
    .faq-expand .faq-expand-close svg,
    .faq-expand #faqExpandClose svg {
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;
        min-height: 17px !important;
    }
}

/* ════════════════════════════════════════════════════════════
   P18I_FAQ_SHARE_CLEAN_LAYOUT_FIX
   Fix broken FAQ expanded header after share button styling:
   - share + close same size
   - neutral dark style, no blue fill
   - title left, actions right
   - remove ugly inner desktop scrollbar
   ════════════════════════════════════════════════════════════ */

.faq-expand .faq-expand-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 64px !important;
    padding: 18px 22px !important;
    box-sizing: border-box !important;
}

.faq-expand .faq-expand-title#faqExpandTitle {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.faq-expand .faq-expand-share#faqExpandShare,
.faq-expand .faq-expand-close {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;

    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;

    flex: 0 0 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.055) !important;
    color: rgba(255,255,255,.68) !important;

    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.faq-expand .faq-expand-share#faqExpandShare {
    order: 20 !important;
}

.faq-expand .faq-expand-close {
    order: 30 !important;
}

.faq-expand .faq-expand-share#faqExpandShare svg,
.faq-expand .faq-expand-close svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    color: currentColor !important;
    stroke: currentColor !important;
}

.faq-expand .faq-expand-share#faqExpandShare:hover,
.faq-expand .faq-expand-close:hover {
    border-color: rgba(74,158,255,.35) !important;
    background: rgba(74,158,255,.10) !important;
    color: rgba(255,255,255,.92) !important;
}

/* Desktop: do not create ugly inner content scrollbar inside article panel */
@media (min-width: 901px) {
    .faq-expand .faq-expand-content {
        overflow: visible !important;
        max-height: none !important;
    }

    .faq-expand .faq-expand-body {
        overflow: visible !important;
        max-height: none !important;
    }
}

/* Mobile: keep buttons compact and safe-area friendly */
@media (max-width: 900px) {
    .faq-expand .faq-expand-header {
        padding: 16px !important;
        gap: 8px !important;
        min-height: 60px !important;
    }

    .faq-expand .faq-expand-share#faqExpandShare,
    .faq-expand .faq-expand-close {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
        flex-basis: 38px !important;
        border-radius: 11px !important;
    }

    .faq-expand .faq-expand-share#faqExpandShare svg,
    .faq-expand .faq-expand-close svg {
        width: 17px !important;
        height: 17px !important;
    }
}


/* ============================================================
   P18J_FAQ_SHARE_CLOSE_SIZE_TUNE
   Goal:
   - make share + close buttons visually equal
   - reduce overall size
   - keep clean layout
   ============================================================ */

.faq-expand .faq-expand-share#faqExpandShare,
.faq-expand .faq-expand-close {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.faq-expand .faq-expand-share#faqExpandShare svg,
.faq-expand .faq-expand-close svg {
    width: 17px !important;
    height: 17px !important;
}

@media (max-width: 768px) {
    .faq-expand .faq-expand-share#faqExpandShare,
    .faq-expand .faq-expand-close {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 13px !important;
    }

    .faq-expand .faq-expand-share#faqExpandShare svg,
    .faq-expand .faq-expand-close svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ═══════════════════════════════════════════════
   P18K_FAQ_SHARE_CLOSE_COMPACT_ICONS
   Final compact visual pass for FAQ expanded article header.
   Buttons: 38x38, same visual weight, close icon is SVG background.
   ═══════════════════════════════════════════════ */
#faqExpand .faq-expand-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#faqExpand .faq-expand-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

#faqExpand .faq-expand-share#faqExpandShare,
#faqExpand .faq-expand-close#faqExpandClose {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background-color: rgba(255,255,255,.055) !important;
    color: rgba(255,255,255,.72) !important;

    box-shadow: none !important;
    transform: none !important;
    cursor: pointer !important;
    flex: 0 0 38px !important;

    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: 0 !important;
    overflow: hidden !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}

#faqExpand .faq-expand-share#faqExpandShare:hover,
#faqExpand .faq-expand-close#faqExpandClose:hover {
    border-color: rgba(255,255,255,.22) !important;
    background-color: rgba(255,255,255,.085) !important;
    color: rgba(255,255,255,.9) !important;
    transform: none !important;
}

/* Share keeps inline SVG, just smaller */
#faqExpand .faq-expand-share#faqExpandShare svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    flex: 0 0 16px !important;
    stroke-width: 2 !important;
}

/* Close: kill text glyph and draw clean SVG background */
#faqExpand .faq-expand-close#faqExpandClose {
    color: transparent !important;
    font-size: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M7%207L17%2017M17%207L7%2017%27%20stroke%3D%27rgba(255%2C255%2C255%2C0.78)%27%20stroke-width%3D%272.45%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 17px 17px !important;
}

#faqExpand .faq-expand-close#faqExpandClose:hover {
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M7%207L17%2017M17%207L7%2017%27%20stroke%3D%27white%27%20stroke-width%3D%272.45%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
}

/* Mobile: keep tap target comfortable, but same compact look */
@media (max-width: 768px) {
    #faqExpand .faq-expand-share#faqExpandShare,
    #faqExpand .faq-expand-close#faqExpandClose {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        flex-basis: 40px !important;
    }

    #faqExpand .faq-expand-share#faqExpandShare svg {
        width: 16px !important;
        height: 16px !important;
        flex-basis: 16px !important;
    }

    #faqExpand .faq-expand-close#faqExpandClose {
        background-size: 17px 17px !important;
    }
}


/* FAQ unified photo+video media viewer */
.faq-media-main--video {
    cursor:default;
    aspect-ratio:4/3;
    min-height:320px;
    padding:10px;
}
.faq-media-main--video:hover::after {
    display:none;
}
.faq-media-video {
    width:100%;
    height:100%;
    max-height:100%;
    object-fit:contain;
    display:block;
    border-radius:10px;
    background:#000;
}
.faq-media-th--video {
    position:relative;
    width:72px;
    height:54px;
    border-radius:8px;
    overflow:hidden;
    padding:0;
    border:2px solid transparent;
    background:#101820;
    cursor:pointer;
    opacity:.58;
    transition:all .2s;
    flex-shrink:0;
}
.faq-media-th--video:hover {
    opacity:.9;
    transform:scale(1.05);
}
.faq-media-th--video.active {
    border-color:var(--bp-accent);
    opacity:1;
    box-shadow:0 0 0 1px rgba(74,158,255,0.3);
}
.faq-media-th--video img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    opacity:.82;
}
.faq-media-th--no-poster {
    background:
      radial-gradient(circle at 50% 40%,rgba(74,158,255,.18),transparent 45%),
      #101820;
}
.faq-media-th-play {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:1rem;
    text-shadow:0 2px 8px rgba(0,0,0,.8);
    background:rgba(0,0,0,.22);
}