/* /Components/Pages/DiagnosticoPedir.razor.rz.scp.css */
/* Scoped port of the <style jsx global> block in
   AppBali.MarketingAPP/pages/diagnosticoPedir.jsx (lines 98-147). All class selectors below are
   kept intact (verbatim) -- the source styles are already `.bali-wrap`-prefixed, so they carry
   over as-is once Blazor's CSS isolation appends this file's scope attribute to every element
   the page renders.

   Two rules could NOT be ported as literally "body { ... }" / "*, *::before, *::after { ... }"
   would suggest, because a page's own scoped stylesheet can only reach elements the page itself
   renders -- it can never reach the real <html>/<body> in App.razor, which sits *outside* this
   component's render tree (isolation only scopes descendants, not ancestors):
     - `*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }` IS kept as-is
       below: it still resets every element this page renders (button/div/svg/etc.), which is the
       part that actually matters for layout.
     - `body { background: #f9f9f7; min-height: 100vh; display: flex; align-items: flex-start;
       justify-content: center; padding: 2rem 1rem; font-family: 'Poppins', sans-serif; }` is
       instead applied to a `.bali-page` wrapper div the page renders around `.bali-wrap`, which
       reproduces the same "centered card on a full-height light-grey page" look the source's
       standalone (Header/Footer-less) page got by styling <body> directly. */

*[b-8elo7hpyna],
*[b-8elo7hpyna]::before,
*[b-8elo7hpyna]::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.bali-page[b-8elo7hpyna] {
    background: #f9f9f7;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    font-family: 'Poppins', sans-serif;
}

.bali-wrap[b-8elo7hpyna] {
    width: 100%;
    max-width: 480px;
    background: white;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
}

.bali-logo[b-8elo7hpyna] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 1.5rem;
}

.bali-logo-text[b-8elo7hpyna] {
    font-family: 'Comfortaa', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #E30619;
    letter-spacing: -0.5px;
}

.bali-logo-sub[b-8elo7hpyna] {
    color: #888;
    font-size: 14px;
    font-weight: 400;
}

.progress-bar[b-8elo7hpyna] {
    height: 3px;
    background: #eee;
    border-radius: 2px;
    margin-bottom: 2rem;
}

.progress-fill[b-8elo7hpyna] {
    height: 100%;
    background: #E30619;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.step-label[b-8elo7hpyna] {
    font-size: 12px;
    color: #888;
    margin-bottom: 0.5rem;
}

.question[b-8elo7hpyna] {
    font-size: 18px;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.options[b-8elo7hpyna] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.opt-btn[b-8elo7hpyna] {
    padding: 14px 18px;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    background: white;
    color: #1a1a1a;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}

.opt-btn:hover[b-8elo7hpyna] {
    border-color: #E30619;
    background: #fff5f5;
}

.opt-btn.selected[b-8elo7hpyna] {
    border-color: #E30619;
    background: #fff5f5;
    color: #E30619;
    font-weight: 500;
}

.nav-row[b-8elo7hpyna] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
}

.btn-back[b-8elo7hpyna] {
    background: none;
    border: none;
    color: #888;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    padding: 8px 0;
    visibility: hidden;
}

.btn-back.visible[b-8elo7hpyna] {
    visibility: visible;
}

.btn-next[b-8elo7hpyna] {
    background: #E30619;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.btn-next.active[b-8elo7hpyna] {
    opacity: 1;
}

.result-section[b-8elo7hpyna] {
    animation: fadeIn-b-8elo7hpyna 0.4s ease;
}

@keyframes fadeIn-b-8elo7hpyna {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-headline[b-8elo7hpyna] {
    font-size: 15px;
    color: #888;
    margin-bottom: 0.5rem;
}

.total-card[b-8elo7hpyna] {
    background: #1D1018;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.total-card .t-label[b-8elo7hpyna] {
    font-size: 12px;
    color: #999;
    margin-bottom: 6px;
}

.total-card .t-amount[b-8elo7hpyna] {
    font-size: 36px;
    font-weight: 600;
    color: white;
}

.total-card .t-sub[b-8elo7hpyna] {
    font-size: 13px;
    color: #aaa;
    margin-top: 4px;
}

.compare-row[b-8elo7hpyna] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    margin-bottom: 1.5rem;
}

.compare-card[b-8elo7hpyna] {
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

.compare-card.opp[b-8elo7hpyna] {
    background: #fff5f5;
    border: 1.5px solid #E30619;
}

.compare-card.bali[b-8elo7hpyna] {
    background: #f5f5f5;
    border: 1.5px solid #ddd;
}

.compare-card .c-label[b-8elo7hpyna] {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}

.compare-card .c-amount[b-8elo7hpyna] {
    font-size: 20px;
    font-weight: 600;
}

.compare-card.opp .c-amount[b-8elo7hpyna] {
    color: #E30619;
}

.compare-card.bali .c-amount[b-8elo7hpyna] {
    color: #1a1a1a;
}

.compare-card .c-sub[b-8elo7hpyna] {
    font-size: 10px;
    color: #888;
    margin-top: 2px;
}

.compare-vs[b-8elo7hpyna] {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    text-align: center;
}

.ver-bonus[b-8elo7hpyna] {
    background: #f5f5f5;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ver-bonus-icon[b-8elo7hpyna] {
    color: #E30619;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ver-bonus-text[b-8elo7hpyna] {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}

.ver-bonus-text strong[b-8elo7hpyna] {
    color: #1a1a1a;
    font-weight: 500;
}

.insight[b-8elo7hpyna] {
    background: #fff5f5;
    border-left: 3px solid #E30619;
    border-radius: 0 8px 8px 0;
    padding: 12px 14px;
    font-size: 13px;
    color: #1a1a1a;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* .btn-cta and .btn-share (WA variant) are plain <a> tags here per the port's plan (see
   DiagnosticoPedir.razor's header comment), not the source's <button onClick={window.open}>. The
   source rules are kept intact; `display: block` / `text-align: center` / `text-decoration: none`
   are added because <button> gets those for free from the UA stylesheet (block-ish box honoring
   width:100%, centered text, no underline) while a plain <a> does not. */
.btn-cta[b-8elo7hpyna] {
    width: 100%;
    background: #E30619;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    cursor: pointer;
    margin-top: 0.5rem;
    display: block;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

.share-row[b-8elo7hpyna] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.btn-share[b-8elo7hpyna] {
    background: none;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    padding: 11px 8px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    color: #1a1a1a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
    text-decoration: none;
}

.btn-share:hover[b-8elo7hpyna] {
    border-color: #E30619;
    color: #E30619;
}

.btn-share.copied[b-8elo7hpyna] {
    border-color: #1D9E75;
    color: #1D9E75;
}

.btn-restart[b-8elo7hpyna] {
    width: 100%;
    background: none;
    border: none;
    padding: 10px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    color: #888;
    cursor: pointer;
    margin-top: 4px;
}

.disclaimer[b-8elo7hpyna] {
    font-size: 11px;
    color: #aaa;
    text-align: center;
    margin-top: 12px;
}
/* /Components/Pages/DiagnosticoVer.razor.rz.scp.css */
/* Scoped port of the <style jsx global> block in
   AppBali.MarketingAPP/pages/diagnosticoVer.jsx (lines 110-160). All class selectors below are
   kept intact (verbatim) -- the source styles are already `.bali-wrap`-prefixed, so they carry
   over as-is once Blazor's CSS isolation appends this file's scope attribute to every element
   the page renders.

   Two rules could NOT be ported as literally "body { ... }" / "*, *::before, *::after { ... }"
   would suggest, because a page's own scoped stylesheet can only reach elements the page itself
   renders -- it can never reach the real <html>/<body> in App.razor, which sits *outside* this
   component's render tree (isolation only scopes descendants, not ancestors):
     - `*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }` IS kept as-is
       below: it still resets every element this page renders (button/div/svg/etc.), which is the
       part that actually matters for layout.
     - `body { background: #f9f9f7; min-height: 100vh; display: flex; align-items: flex-start;
       justify-content: center; padding: 2rem 1rem; font-family: 'Poppins', sans-serif; }` is
       instead applied to a `.bali-page` wrapper div the page renders around `.bali-wrap`, which
       reproduces the same "centered card on a full-height light-grey page" look the source's
       standalone (Header/Footer-less) page got by styling <body> directly. */

*[b-2qfdaovbhl],
*[b-2qfdaovbhl]::before,
*[b-2qfdaovbhl]::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.bali-page[b-2qfdaovbhl] {
    background: #f9f9f7;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    font-family: 'Poppins', sans-serif;
}

.bali-wrap[b-2qfdaovbhl] {
    width: 100%;
    max-width: 480px;
    background: white;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
}

.bali-logo[b-2qfdaovbhl] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 1.5rem;
}

.bali-logo-text[b-2qfdaovbhl] {
    font-family: 'Comfortaa', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #E30619;
    letter-spacing: -0.5px;
}

.bali-logo-sub[b-2qfdaovbhl] {
    color: #888;
    font-size: 14px;
    font-weight: 400;
}

.progress-bar[b-2qfdaovbhl] {
    height: 3px;
    background: #eee;
    border-radius: 2px;
    margin-bottom: 2rem;
}

.progress-fill[b-2qfdaovbhl] {
    height: 100%;
    background: #E30619;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.step-label[b-2qfdaovbhl] {
    font-size: 12px;
    color: #888;
    margin-bottom: 0.5rem;
}

.question[b-2qfdaovbhl] {
    font-size: 18px;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.options[b-2qfdaovbhl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.opt-btn[b-2qfdaovbhl] {
    padding: 14px 18px;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    background: white;
    color: #1a1a1a;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}

.opt-btn:hover[b-2qfdaovbhl] {
    border-color: #E30619;
    background: #fff5f5;
}

.opt-btn.selected[b-2qfdaovbhl] {
    border-color: #E30619;
    background: #fff5f5;
    color: #E30619;
    font-weight: 500;
}

.nav-row[b-2qfdaovbhl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
}

.btn-back[b-2qfdaovbhl] {
    background: none;
    border: none;
    color: #888;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    padding: 8px 0;
    visibility: hidden;
}

.btn-back.visible[b-2qfdaovbhl] {
    visibility: visible;
}

.btn-next[b-2qfdaovbhl] {
    background: #E30619;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.btn-next.active[b-2qfdaovbhl] {
    opacity: 1;
}

.result-section[b-2qfdaovbhl] {
    animation: fadeIn-b-2qfdaovbhl 0.4s ease;
}

@keyframes fadeIn-b-2qfdaovbhl {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-headline[b-2qfdaovbhl] {
    font-size: 15px;
    color: #888;
    margin-bottom: 0.5rem;
}

.total-card[b-2qfdaovbhl] {
    background: #1D1018;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.total-card .t-label[b-2qfdaovbhl] {
    font-size: 12px;
    color: #999;
    margin-bottom: 6px;
}

.total-card .t-amount[b-2qfdaovbhl] {
    font-size: 36px;
    font-weight: 600;
    color: white;
}

.total-card .t-sub[b-2qfdaovbhl] {
    font-size: 13px;
    color: #aaa;
    margin-top: 4px;
}

.compare-row[b-2qfdaovbhl] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    margin-bottom: 1.5rem;
}

.compare-card[b-2qfdaovbhl] {
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

.compare-card.opp[b-2qfdaovbhl] {
    background: #fff5f5;
    border: 1.5px solid #E30619;
}

.compare-card.bali[b-2qfdaovbhl] {
    background: #f5f5f5;
    border: 1.5px solid #ddd;
}

.compare-card .c-label[b-2qfdaovbhl] {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}

.compare-card .c-amount[b-2qfdaovbhl] {
    font-size: 20px;
    font-weight: 600;
}

.compare-card.opp .c-amount[b-2qfdaovbhl] {
    color: #E30619;
}

.compare-card.bali .c-amount[b-2qfdaovbhl] {
    color: #1a1a1a;
}

.compare-card .c-sub[b-2qfdaovbhl] {
    font-size: 10px;
    color: #888;
    margin-top: 2px;
}

.compare-vs[b-2qfdaovbhl] {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    text-align: center;
}

.result-cards[b-2qfdaovbhl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 1.5rem;
}

.result-card[b-2qfdaovbhl] {
    background: #f5f5f5;
    border-radius: 10px;
    padding: 1rem;
}

.result-card .label[b-2qfdaovbhl] {
    font-size: 12px;
    color: #888;
    margin-bottom: 6px;
}

.result-card .amount[b-2qfdaovbhl] {
    font-size: 26px;
    font-weight: 600;
    color: #E30619;
}

.result-card .sub[b-2qfdaovbhl] {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}

.insight[b-2qfdaovbhl] {
    background: #fff5f5;
    border-left: 3px solid #E30619;
    border-radius: 0 8px 8px 0;
    padding: 12px 14px;
    font-size: 13px;
    color: #1a1a1a;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* .btn-cta and .btn-share (WA variant) are plain <a> tags here per the port's plan (see
   DiagnosticoVer.razor's header comment), not the source's <button onClick={window.open}>. The
   source rules are kept intact; `display: block` / `text-align: center` / `text-decoration: none`
   are added because <button> gets those for free from the UA stylesheet (block-ish box honoring
   width:100%, centered text, no underline) while a plain <a> does not. */
.btn-cta[b-2qfdaovbhl] {
    width: 100%;
    background: #E30619;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    cursor: pointer;
    margin-top: 0.5rem;
    display: block;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

.share-row[b-2qfdaovbhl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.btn-share[b-2qfdaovbhl] {
    background: none;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    padding: 11px 8px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    color: #1a1a1a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
    text-decoration: none;
}

.btn-share:hover[b-2qfdaovbhl] {
    border-color: #E30619;
    color: #E30619;
}

.btn-share.copied[b-2qfdaovbhl] {
    border-color: #1D9E75;
    color: #1D9E75;
}

.btn-restart[b-2qfdaovbhl] {
    width: 100%;
    background: none;
    border: none;
    padding: 10px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    color: #888;
    cursor: pointer;
    margin-top: 4px;
}

.disclaimer[b-2qfdaovbhl] {
    font-size: 11px;
    color: #aaa;
    text-align: center;
    margin-top: 12px;
}
/* /Components/Sections/Faq.razor.rz.scp.css */
/* Scoped CSS restoring visual parity between the native Bootstrap 5.2
   accordion markup in Faq.razor and the source app's hand-rolled FAQ
   (AppBali.MarketingAPP/components/Sections/Faq.jsx). This file is
   additive only — it does NOT modify the ported CSS assets
   (wwwroot/assets/css/style.css / overrides.css), which stay
   byte-identical copies of the source.

   Root cause this file has to work around: giving the FAQ buttons the
   native "accordion"/"accordion-button" classes (needed so
   bootstrap.bundle.min.js can drive expand/collapse with no circuit)
   activates a *different*, previously-dead rule that already sits in the
   ported style.css — `.accordion .accordion-button { padding: 0 50px 0 0;
   background: none !important; font-weight: 700; ... }` (source:
   public/assets/css/style.css, "17. Support" section, ~line 2103). That
   rule was written for a native-markup accordion the source app never
   actually used anywhere (confirmed: no `accordion-button`/`accordion-item`
   string appears in any AppBali.MarketingAPP component) — this Faq.razor is
   its first real consumer. Because it double-class-selects
   (`.accordion .accordion-button`, specificity 0,2,0) it silently outranks
   the single-class `.faq-question-header` rule (specificity 0,1,0) for
   background/padding/font-weight, even though both classes still coexist
   on the same <button>. The first block below restores
   `.faq-question-header`'s intended background/padding/font-weight
   (source: style.css lines 3924-3934) so the two behaviors requested in
   review render correctly on top of it.

   1. Indicator glyph — replicates `.faq-icon` / `.faq-question-header:hover
      .faq-icon` (source: style.css lines 3892-3901):
        .faq-icon { font-size: 1.5rem; font-weight: bold; color: #dc3545; transition: transform 0.3s ease; }
        .faq-question-header:hover .faq-icon { color: #fff; }
      Source drove the "+" / "−" text itself from React state
      (`activeKey === item.id ? '−' : '+'`), which this static-SSR page has
      no circuit to reproduce. Bootstrap toggles the `.collapsed` class on
      `.accordion-button` automatically on expand/collapse, so the glyph
      swap below keys off that instead.

   2. Active/expanded header highlight — replicates
      `.faq-question-header.active` (source: style.css lines 3941-3947):
        .faq-question-header.active { background-color: #dc3545; color: #fff; }
        .faq-question-header.active .faq-icon { color: #fff; }
      Keyed off `:not(.collapsed)` (Bootstrap's expanded state) instead of
      the React-only `.active` class. `background-color` needs `!important`
      to beat style.css's unmodified `.accordion .accordion-button
      { background: none !important; }`. */

.accordion-button[b-vu4o3eb7e0] {
    background-color: #fff !important;
    padding: 6px 10px !important;
    font-weight: 600 !important;
    /* Same dead rule sets `font-size: inherit`, which at 0,2,0 outranks
       `.faq-question-header { font-size: 1.1rem; }` (0,1,0) and makes every
       question inherit the wrapping <h2>'s heading size. No `!important`
       needed -- this scoped rule ties on specificity and wins on load order. */
    font-size: 1.1rem;
}

/* The same "17. Support" dead-code block also styles the accordion's *frame*,
   and those rules likewise outrank the single-class FAQ ones in style.css:
     .accordion .accordion-header { padding: 25px 0; }        (0,2,0)
     .accordion .accordion-item   { background-color: transparent;
                                    border: none;
                                    border-bottom: 1px solid #ccc;
                                    border-radius: 0; }        (0,2,0)
     .accordion .accordion-body   { padding: 5px 0 15px 0; }   (0,2,0)
   Together they replace the source's bordered white FAQ cards
   (`.faq-item { border: 1px solid #dc3545; border-radius: 6px; }`, style.css
   lines 3991-3996) with tall, borderless grey-ruled rows and strip the
   answer's padding. Restored below; the `:not(:first-of-type)` selector is
   there because Bootstrap's own `.accordion-item:not(:first-of-type)
   { border-top: 0; }` (0,3,0) would otherwise keep the top border off. */
.accordion-header[b-vu4o3eb7e0] {
    padding: 0;
}

.accordion-item[b-vu4o3eb7e0],
.accordion-item:not(:first-of-type)[b-vu4o3eb7e0] {
    background-color: #fff;
    border: 1px solid #dc3545;
    border-radius: 6px;
}

/* Source's answer sat in a react-bootstrap <Card.Body> (padding: 1rem) --
   see `.faq-answer` (style.css lines 4049-4055) for the rest of its look. */
.accordion-body[b-vu4o3eb7e0] {
    padding: 1rem;
}

/* Base ::after appearance (font/size/color/layout). Content itself is set
   in the .collapsed / :not(.collapsed) variants below — see the note on
   `!important` there. `position: static` overrides style.css's unmodified
   `.accordion .accordion-button:after { position: absolute; top: 2px;
   right: 10px; ... }` (same "17. Support" dead-code rule): with this
   button's restored 6px/10px padding (not that rule's own `padding: 0 50px
   0 0`, which existed to leave room for an absolutely-positioned icon), an
   absolutely-positioned glyph would float over the question text on longer
   questions. `position: static` lets Bootstrap's own
   `.accordion-button::after` flex / `margin-left: auto` rule
   (bootstrap.min.css) place the glyph at the row's end instead, the same
   way Bootstrap positions it everywhere else. */
.accordion-button[b-vu4o3eb7e0]::after {
    position: static;
    background-image: none;
    width: auto;
    height: auto;
    font-size: 1.5rem;
    font-weight: bold;
    color: #dc3545;
    line-height: 1;
    transform: none;
    transition: color 0.3s ease;
}

/* `!important` is required on both variants below: style.css's unmodified
   `.accordion .accordion-button.collapsed:after { content: '\f107'
   !important; }` outranks a plain (non-important) content declaration
   regardless of specificity, AND has specificity 0,3,1 (three classes +
   pseudo-element). Targeting `.collapsed` explicitly here (rather than
   relying on the base `.accordion-button::after` rule above, which is only
   0,2,1 once scoped) is what lets this rule tie on specificity and win on
   load order (this stylesheet is linked after style.css in App.razor). */
.accordion-button.collapsed[b-vu4o3eb7e0]::after {
    content: "+" !important;
}

.accordion-button:not(.collapsed)[b-vu4o3eb7e0]::after {
    content: "\2212" !important;
    color: #fff;
}

/* Hover — replicates `.faq-question-header:hover` (source: style.css lines
   3936-3939): `.faq-question-header:hover { background-color: #dc3545;
   color: #fff; }`. Needs `!important` + a `:hover` pseudo-class (raising
   specificity to 0,3,0, scoped) to beat this file's own base
   `.accordion-button { background-color: #fff !important; }` rule above
   (0,2,0 scoped) — otherwise hovering a *collapsed* item would stay white
   instead of turning red like source. */
.accordion-button:hover[b-vu4o3eb7e0] {
    background-color: #dc3545 !important;
    color: #fff !important;
}

.accordion-button:hover[b-vu4o3eb7e0]::after {
    color: #fff;
}

/* `color: #fff` needs `!important` here to beat color.css's unmodified
   `.accordion .accordion-header button:not(.collapsed), ... { color:
   #e30613; }` (a different theme-color override file, also verbatim/
   unmodified) — that rule's specificity (0,3,1: two classes + the
   `:not(.collapsed)` class + a `button` type selector) ties-and-beats this
   rule's (0,3,0) on the type-selector column, so specificity/order alone
   isn't enough; `!important` is required regardless of order. */
.accordion-button:not(.collapsed)[b-vu4o3eb7e0] {
    background-color: #dc3545 !important;
    color: #fff !important;
}
/* /Components/Shared/Whatsapp.razor.rz.scp.css */
/* Scoped port of the <style jsx global> block in
   AppBali.MarketingAPP/components/Common/Whatsapp.jsx (lines 40-79). `.floating` / `.floating
   img` are NOT repeated here -- those already live, unscoped, in
   wwwroot/assets/css/whatsapp.css (linked globally in App.razor), so this file only carries the
   attention-shake animation that was inline in the source component. */
@keyframes wa-attention-b-vtqf0t98vz {
    0%,
    92%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0);
    }
    93% {
        transform: translate3d(-1px, 0, 0) rotate(-2deg);
    }
    94% {
        transform: translate3d(2px, 0, 0) rotate(2deg);
    }
    95% {
        transform: translate3d(-2px, 0, 0) rotate(-2deg);
    }
    96% {
        transform: translate3d(2px, 0, 0) rotate(2deg);
    }
    97% {
        transform: translate3d(-1px, 0, 0) rotate(-1deg);
    }
    98% {
        transform: translate3d(1px, 0, 0) rotate(1deg);
    }
    99% {
        transform: translate3d(0, 0, 0) rotate(0);
    }
}

.wa-shake[b-vtqf0t98vz] {
    will-change: transform;
    animation: wa-attention-b-vtqf0t98vz 15s ease-in-out infinite;
    transform-origin: center;
    display: inline-block;
}

.wa-shake:hover[b-vtqf0t98vz] {
    animation-duration: 0.4s;
    animation-iteration-count: infinite;
}
