/* /Components/Legal/LegalDocumentView.razor.rz.scp.css */
/* The rendered Markdown isn't part of this component's markup, so rules reach it through ::deep. */
/* Disclosed deviation: the site header is absolutely positioned over the top of the page (130px tall, 110px below 992px --
   see .header in style.css / media.css) with a white logo, hamburger and menu links, because every
   other page puts a dark hero image behind it. A legal page has no hero, so on a plain white page the
   logo and hamburger would be invisible until the reader scrolls. The section's top padding is that
   header height, and the same height is painted dark, so the header sits on a band. The document
   title then starts after `section .container`'s own 80px top padding (20px below 768px). */
.legal-doc[b-d436bvjlzn] {
    --legal-header-height: 130px;
    padding: var(--legal-header-height) 0 80px;
    background: linear-gradient(#1d1d1b 0 var(--legal-header-height), #fff var(--legal-header-height));
}

@media (max-width: 991px) {
    .legal-doc[b-d436bvjlzn] {
        --legal-header-height: 110px;
    }
}

.legal-doc[b-d436bvjlzn]  h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.legal-doc[b-d436bvjlzn]  h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 2rem;
}

.legal-doc[b-d436bvjlzn]  table {
    width: 100%;
    margin: 1rem 0 1.5rem;
    border-collapse: collapse;
}

.legal-doc[b-d436bvjlzn]  th,
.legal-doc[b-d436bvjlzn]  td {
    border: 1px solid #dee2e6;
    padding: .5rem .75rem;
    vertical-align: top;
}

.legal-doc[b-d436bvjlzn]  thead th {
    background: #f8f9fa;
}

.legal-doc[b-d436bvjlzn]  blockquote {
    border-left: 4px solid #dee2e6;
    padding-left: 1rem;
    color: #555;
}

@media (max-width: 767.98px) {
    .legal-doc[b-d436bvjlzn]  table {
        display: block;
        overflow-x: auto;
    }
}
/* /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;
}