:root {
    --accent: #22c55e;
    --text: #ffffff;
    --bio-color: #dce2f0;
    --overlay: rgba(0, 0, 0, .45);

    --page-outer-bg-mode: solid;
    --page-outer-bg-color-1: #d7dde3;
    --page-outer-bg-color-2: #aeb8c4;
    --page-outer-linear-angle: 180deg;
    --page-outer-radial-position: center center;

    --page-outer-background:
        var(
            --page-outer-bg-color-1,
            #d7dde3
        );

    /*
     * Perfis antigos, sem a nova variável, preservam
     * exatamente o sombreado anterior.
     */
    --page-outer-shade:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .10),
            rgba(0, 0, 0, .18)
        );
    --radius: 16px;
    --maxw: 720px;
    --gap: 14px;
    --btn-bg-color: var(--accent);
    --btn-text-color: #ffffff;
    --btn-border-color: rgba(255, 255, 255, .22);
    --btn-hover-color: var(--accent);
    --surface-glass: rgba(17, 31, 61, .42);
    --surface-glass-strong: rgba(17, 31, 61, .58);
    --surface-border: rgba(255, 255, 255, .20);
    --surface-border-strong: rgba(255, 255, 255, .28);
    --shadow-soft: 0 10px 26px rgba(0, 0, 0, .18);
    --shadow-strong: 0 14px 32px rgba(0, 0, 0, .26);
    --anim-ms: 240ms;
    --anim-ease: ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text, #fff);
    background:
        var(
            --page-outer-background,
            #d7dde3
        );
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
        var(
            --page-outer-background,
            #d7dde3
        );
}

.shade {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        var(
            --page-outer-shade,
            linear-gradient(
                180deg,
                rgba(0, 0, 0, .10),
                rgba(0, 0, 0, .18)
            )
        );
    pointer-events: none;
}

main[role="main"] {
    position: relative;
    width: min(100vw - 48px, 720px);
    min-height: min(100vh - 48px, 980px);
    margin: 24px auto;
    padding: 28px 20px 18px;
    border-radius: var(--radius, 16px);
    overflow: hidden;
    isolation: isolate;
    background: #0b1d37;
    box-shadow:
        0 0
        calc(
            30px *
            var(
                --page-outer-bio-shadow-enabled,
                0
            )
        )
        rgba(
            var(
                --page-outer-bio-shadow-rgb,
                0, 0, 0
            ),
            calc(
                var(
                    --page-outer-bio-shadow-intensity,
                    .52
                ) *
                .88 *
                var(
                    --page-outer-bio-shadow-enabled,
                    0
                )
            )
        ),
        0
        calc(
            22px *
            var(
                --page-outer-bio-shadow-enabled,
                0
            )
        )
        calc(
            65px *
            var(
                --page-outer-bio-shadow-enabled,
                0
            )
        )
        rgba(
            var(
                --page-outer-bio-shadow-rgb,
                0, 0, 0
            ),
            calc(
                var(
                    --page-outer-bio-shadow-intensity,
                    .52
                ) *
                var(
                    --page-outer-bio-shadow-enabled,
                    0
                )
            )
        ),
        0 24px 60px rgba(0, 0, 0, .22);
}

main[role="main"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--bg-mobile, none);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(1.02);
    filter: var(--bg-blur);
    opacity: var(--bg-opacity);
}

main[role="main"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--overlay, rgba(0, 0, 0, .45));
}

/*
 * BACKGROUND RESPONSIVO PELA ÁREA REAL DA BIO
 *
 * A janela do navegador não decide mais qual arte utilizar.
 * O modo desktop somente é ativado quando o próprio container
 * da BIO possui largura útil de desktop.
 *
 * Sem atributo, mobile permanece como fallback seguro.
 */
main[role="main"][data-bio-bg-layout="desktop"]::before {
    background-image:
        var(
            --bg-desktop,
            var(--bg-mobile, none)
        );
}

/* Avatar público — contrato do painel Tema & Layout */
.avatar {
    position: relative;
    width: var(--avatar-size, 108px);
    height: var(--avatar-size, 108px);
    margin: 6px auto 16px;
    border:
        var(--avatar-border-width, 3px)
        solid
        var(
            --avatar-border-color,
            rgba(255, 255, 255, .28)
        );
    border-radius:
        var(
            --avatar-radius-effective-public,
            999px
        );
    background:
        var(
            --avatar-bg-rgba-public,
            transparent
        );
    box-shadow:
        0
        10px
        var(--avatar-shadow-blur, 26px)
        var(
            --avatar-shadow-rgba-public,
            rgba(0, 0, 0, .28)
        );
    overflow: hidden;
}

.avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-copy {
    text-align: center;
    margin: 0 auto 18px;
    max-width: 640px;
}

.preview-name,
.title {
    font-size: 28px;
    line-height: 1.12;
    font-weight: 800;
    color: var(--name-color);
    margin: 0 0 10px;
    text-wrap: balance;
}

.preview-bio,
.bio {
    color: var(--bio-color, #dce2f0);
    font-size: 16px;
    line-height: 1.5;
    white-space: pre-line;
    margin: 0 auto;
    max-width: 620px;
}

.preview-sections {
    position: relative;
    width: 100%;
}

.page-main-content,
.plans-section {
    width: 100%;
}

.hidden {
    display: none !important;
}

.preview-links {
    display: flex;
    flex-direction: column;
    gap: var(--gap, 14px);
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}

.preview-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 15px 18px;
    border-radius: 18px;
    border: 1px solid var(--surface-border, rgba(255, 255, 255, .20));
    background: rgba(255, 255, 255, .10);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.preview-btn:hover,
.preview-btn:focus,
.preview-btn:focus-visible {
    transform: translateY(-1px);
    text-decoration: none;
    border-color: var(--surface-border-strong, rgba(255, 255, 255, .28));
    box-shadow: var(--shadow-strong);
}

.preview-btn span {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.preview-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.preview-btn__icon .icon {
    width: 20px;
    height: 20px;
    display: block;
}

.preview-btn--telegram {
    background: var(--btn-bg-color);
    border-color: var(--btn-border-color);
    color: var(--btn-text-color);
}

.preview-btn--telegram:hover {
    background: var(--btn-hover-color);
}

/* Botões fixos do fluxo: simetria visual com o preview do painel. */
.preview-btn--fixed,
#previewLinks .preview-btn[data-theme-scope="fixed"] {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.preview-btn--telegram.preview-btn--fixed,
#previewLinks .preview-btn--telegram[data-theme-scope="fixed"] {
    background: #27a7e7;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px rgba(39, 167, 231, .35);
}

.preview-btn--telegram.preview-btn--fixed.is-outline,
#previewLinks .preview-btn--telegram[data-theme-scope="fixed"].is-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.preview-btn--telegram.preview-btn--fixed:hover,
#previewLinks .preview-btn--telegram[data-theme-scope="fixed"]:hover {
    color: #fff;
}

.preview-btn--telegram.preview-btn--fixed.is-outline:hover,
#previewLinks .preview-btn--telegram[data-theme-scope="fixed"].is-outline:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

#previewLinks>.preview-btn.preview-btn--telegram.js-open-plans,
#previewLinks>.preview-btn.preview-btn--telegram[data-open-plans="1"] {
    border-radius: 20px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .24);
}

#previewLinks>.preview-btn.preview-btn--telegram.js-open-plans:hover,
#previewLinks>.preview-btn.preview-btn--telegram[data-open-plans="1"]:hover,
#previewLinks>.preview-btn.preview-btn--telegram.js-open-plans:focus,
#previewLinks>.preview-btn.preview-btn--telegram[data-open-plans="1"]:focus {
    filter: brightness(1.03);
}

#previewLinks>.preview-btn.preview-btn--telegram.js-open-plans:focus-visible,
#previewLinks>.preview-btn.preview-btn--telegram[data-open-plans="1"]:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .48);
    outline-offset: 2px;
}

.preview-btn--telegram-secondary {
    background: var(--btn-bg-color);
    border-color: var(--btn-border-color);
    color: var(--btn-text-color);
    opacity: .85;
}

.preview-btn.is-outline {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .18);
}

.preview-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
    margin: 4px 0;
}

.plans-divider {
    margin: 14px 0 12px;
}

.plans-header {
    width: 100%;
    max-width: 620px;
    margin: 0 auto 14px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.plan-country-bar {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 18px;
    border: 1px solid var(--surface-border, rgba(255, 255, 255, .20));
    background: var(--surface-glass);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    z-index: 20;
}

.plan-country-current {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.plan-country-flag {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.plan-country-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.plan-country-name {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.plan-country-currency {
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    line-height: 1.2;
}

.plan-country-change {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .10);
    color: #fff;
    border-radius: 12px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.plan-country-change:hover,
.plan-country-change:focus,
.plan-country-change:focus-visible {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .24);
    transform: translateY(-1px);
}

.plan-country-picker {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--surface-border, rgba(255, 255, 255, .20));
    background: var(--surface-glass-strong);
    box-shadow: var(--shadow-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 80;
}

.plan-country-wrap {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 auto 14px;
    overflow: visible;
    z-index: 30;
}

#plansCountrySelector.hidden {
    display: none !important;
}

.plans-section,
.preview-sections,
.plans-grid {
    overflow: visible;
}

.plan-country-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.plan-country-picker-title {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.plan-country-picker-close {
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 4px;
}

.plan-country-picker-search {
    margin-bottom: 12px;
}

.plan-country-picker-search-input {
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .10);
    color: #fff;
    padding: 0 14px;
    outline: none;
    font-size: 14px;
}

.plan-country-picker-search-input::placeholder {
    color: rgba(255, 255, 255, .55);
}

.plan-country-picker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow: auto;
    padding-right: 2px;
}

.plan-country-item {
    appearance: none;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    border-radius: 14px;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.plan-country-item:hover,
.plan-country-item:focus,
.plan-country-item:focus-visible {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
    transform: translateY(-1px);
}

.plan-country-item.is-active {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .14);
}

.plan-country-item-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.plan-country-item-flag {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 24px;
}

.plan-country-item-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.plan-country-item-name {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.plan-country-item-currency {
    color: rgba(255, 255, 255, .70);
    font-size: 12px;
    line-height: 1.2;
}

.plans-grid {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.plan-card--preview {
    position: relative;
    display: block;
    width: 100%;
    min-height: 116px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(24, 48, 94, .35);
    color: #fff;
    text-decoration: none;
    overflow: visible;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.plan-card--preview:hover,
.plan-card--preview:focus,
.plan-card--preview:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, .28);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .24);
    text-decoration: none;
}

.plan-card--preview .plan-card-inner {
    width: 100%;
    min-height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 18px 16px;
}

.plan-card--preview .plan-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    text-align: center;
}

.plan-card--preview .plan-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    color: #fff;
}

.plan-card--preview .plan-price {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    color: #fff;
}

.plan-card--skeleton {
    position: relative;
    display: block;
    width: 100%;
    min-height: 116px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(24, 48, 94, .24);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.plan-card--skeleton .plan-card-inner {
    width: 100%;
    min-height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.plan-card--skeleton .plan-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.plan-info-trigger {
    position: absolute;
    right: 10px;
    bottom: 10px;
    top: auto;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    box-shadow: none;
}

.plan-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 14px);
    top: auto;
    right: auto;
    width: min(300px, calc(100vw - 110px));
    padding: 14px 15px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(8, 15, 31, .97);
    color: #fff;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .32);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    white-space: normal;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    z-index: 50;
}

.plan-tooltip.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.plans-empty {
    width: 100%;
    padding: 22px 16px;
    text-align: center;
    color: rgba(255, 255, 255, .82);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
}

.telegram-cta {
    max-width: 620px;
    margin: 0 auto;
}

/*.plans-back-btn{
  max-width:620px;
  margin:0 auto;
}*/

/*
 * LARGURA DO CONTEÚDO
 *
 * --maxw controla somente o conteúdo interno.
 * O viewport/fundo principal da BIO permanece independente.
 */
.hero-copy,
.preview-links,
.plans-header,
.plan-country-wrap,
.plans-grid,
.telegram-cta,
.public-language-switcher {
    width:
        var(
            --content-width-percent,
            min(100%, var(--maxw, 720px))
        );
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.site-footer {
    width: 100%;
    max-width: 100%;
    margin: 18px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.site-footer__text {
    width:
        var(
            --content-width-percent,
            min(100%, var(--maxw, 720px))
        );
    max-width: 100%;
    margin: 0 auto 10px;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    line-height: 1.4;
}

.site-footer__links {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, .60);
    font-size: 12px;
    line-height: 1.4;
}

.site-footer__links a {
    color: rgba(255, 255, 255, .70);
    text-decoration: none;
}

.site-footer__links a:hover,
.site-footer__links a:focus,
.site-footer__links a:focus-visible {
    color: #fff;
    text-decoration: none;
}

.skeleton-line {
    display: block;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .20), rgba(255, 255, 255, .10));
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.1s linear infinite;
}

.skeleton-line--lg {
    width: 72%;
    height: 16px;
}

.skeleton-line--md {
    width: 44%;
    height: 15px;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.preview-anim {
    animation-duration: var(--anim-ms, 240ms);
    animation-timing-function: var(--anim-ease, ease);
    animation-fill-mode: both;
}

.entry--cards_pop {
    animation-name: cards-pop;
}

.exit--slide_dissolve {
    animation-name: slide-dissolve-out;
}

.entry--slide_dissolve {
    animation-name: slide-dissolve-in;
}

@keyframes cards-pop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(.985);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slide-dissolve-out {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes slide-dissolve-in {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 767px) {
    main[role="main"] {
        width: min(100vw - 24px, 720px);
        min-height: min(100vh - 24px, 980px);
        margin: 12px auto;
        padding: 20px 14px 14px;
        border-radius: 20px;
    }

    .avatar {
        width: 92px;
        height: 92px;
        margin-bottom: 14px;
    }

    .preview-name,
    .title {
        font-size: 24px;
    }

    .preview-bio,
    .bio {
        font-size: 15px;
    }

    .preview-btn {
        min-height: 54px;
        padding: 14px 16px;
        border-radius: 16px;
    }

    .plan-country-bar,
    .plan-country-picker,
    .plans-grid,
    .telegram-cta,
    .site-footer,
    .preview-links,
    .plans-header {
        max-width: none;
    }
}

#btnBackHome.btn.btn-outline-light.mt-3 {
    display: inline-block;
    width: auto;
    min-height: auto;
    margin: 16px 0 0 0;
    padding: 6px 12px;
    border: 1px solid rgb(248, 249, 250);
    border-radius: 6px;
    background: transparent;
    color: rgb(248, 249, 250);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    align-self: flex-start;
}

#btnBackHome.btn.btn-outline-light.mt-3:hover,
#btnBackHome.btn.btn-outline-light.mt-3:focus,
#btnBackHome.btn.btn-outline-light.mt-3:focus-visible {
    background: rgb(248, 249, 250);
    color: rgb(33, 37, 41);
    border-color: rgb(248, 249, 250);
    text-decoration: none;
    box-shadow: none;
    outline: none;
    transform: none;
}

#btnBackHome .back-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

#btnBackHome .me-1 {
    margin-right: .25rem;
}

.plans-grid {
    overflow: visible;
}

.plan-card--preview {
    position: relative;
    z-index: 1;
    overflow: visible;
}

.plan-card--preview.has-tooltip {
    z-index: 2;
}

.plan-card--preview.tooltip-open {
    z-index: 40;
}

.plan-card--preview .plan-tooltip {
    z-index: 50;
}

.plan-card--preview .plan-tooltip::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    top: auto;
    right: auto;
    width: 12px;
    height: 12px;
    background: rgba(8, 15, 31, .97);
    border-right: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    transform: translateX(-50%) rotate(45deg);
}

.plan-card--preview {
    overflow: visible;
}

.plan-card--preview .plan-card-inner {
    position: relative;
}

.public-language-switcher {
    width: 100%;
    margin-top: 28px;
}

.public-language-head {
    margin-bottom: 12px;
    text-align: center;
}

.public-language-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-language-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
}

.public-language-current {
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    line-height: 1.35;
}

.public-language-current-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    font-weight: 700;
}

.public-language-options-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.public-language-option {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding-right: 12px;
    padding-left: 12px;
    color: var(--button-text-color, #ffffff);
    background:
        var(--button-bg-rgba-preview,
            rgba(27, 80, 176, 0.12));
    border: 1px solid var(--button-border-color,
            rgba(255, 255, 255, 0.22));
    box-shadow:
        0 8px 24px var(--home-button-shadow-rgba-preview,
            rgba(0, 0, 0, 0.25));
    text-align: center;
    text-decoration: none;
}

.public-language-option:hover,
.public-language-option:focus,
.public-language-option:focus-visible {
    color: var(--button-text-color, #ffffff);
    background: var(--button-hover-bg, #2970ff);
    border-color:
        var(--button-border-color,
            rgba(255, 255, 255, 0.22));
    outline: none;
}

.public-language-option-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.public-language-flag {
    width: 18px;
    height: 13px;
    flex: 0 0 auto;
    border-radius: 2px;
    object-fit: cover;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.18);
}

.public-language-option span {
    white-space: nowrap;
}

@media (max-width: 420px) {
    .public-language-options-row {
        gap: 8px;
    }

    .public-language-option {
        padding-right: 8px;
        padding-left: 8px;
        font-size: 14px;
    }
}

/* =========================================================
   PUBLIC PIX FLOW
   ========================================================= */

.payment-section {
    width: 100%;
}

.payment-choice-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap, 12px);
}

.payment-choice-row {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: var(--gap, 12px);
}

.payment-choice-row>* {
    min-width: 0;
    flex: 1 1 0;
}

.payment-choice-list .preview-btn,
.payment-choice-list button.preview-btn {
    width: 100%;
    appearance: none;
    font: inherit;
    cursor: pointer;
}

.selected-plan-summary {
    width: 100%;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    background: rgba(15, 23, 42, .18);
    color: var(--text, #fff);
    text-align: center;
    line-height: 1.4;
}

.selected-plan-summary:empty {
    display: none;
}

.pix-payment-status {
    width: 100%;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 12px;
    background: rgba(15, 23, 42, .24);
    color: var(--text, #fff);
    text-align: center;
    line-height: 1.4;
}

.pix-payment-status.is-error {
    border-color: rgba(248, 113, 113, .55);
    background: rgba(127, 29, 29, .28);
}

.pix-payment-status.is-success {
    border-color: rgba(74, 222, 128, .55);
    background: rgba(20, 83, 45, .28);
}

#pixPaymentNotices {
    width: 100%;
    margin: 6px 0 14px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--pix-notice-border-color,
            rgba(255, 255, 255, .25));
    border-radius: var(--pix-notice-radius, 14px);
    background: var(--pix-notice-bg-rgba-preview,
            rgba(15, 23, 42, .18));
    backdrop-filter: blur(var(--pix-notice-blur, 6px));
    -webkit-backdrop-filter: blur(var(--pix-notice-blur, 6px));
}

#pixPaymentNotices .pix-payment-notices-inner {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
}

#pixPaymentNotices .pix-payment-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 0;
    color: var(--pix-text-color, var(--text, #fff));
    font-size: .92rem;
    line-height: 1.45;
}

#pixPaymentNotices .pix-payment-notice+.pix-payment-notice {
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.pix-payment-notice-icon {
    flex: 0 0 auto;
    line-height: 1.2;
}

.pix-payment-notice-text {
    min-width: 0;
}

.pix-qr-panel {
    width: 100%;
    margin: 4px 0 14px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 14px;
    background: #fff;
    text-align: center;
}

.pix-qr-image {
    display: block;
    width: min(100%, 300px);
    height: auto;
    margin: 0 auto;
}

.pix-code-card {
    width: 100%;
    min-height: 0;
    margin: 4px 0 18px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--pix-notice-border-color,
            rgba(255, 255, 255, .25));
    border-radius: var(--pix-notice-radius, 14px);
    background: var(--pix-notice-bg-rgba-preview,
            rgba(15, 23, 42, .18));
    backdrop-filter: blur(var(--pix-notice-blur, 6px));
    -webkit-backdrop-filter: blur(var(--pix-notice-blur, 6px));
}

.pix-code-card:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .55);
    outline-offset: 2px;
}

.pix-code-head {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.pix-code-tap-hint {
    min-width: 0;
    color: var(--pix-text-color, var(--text, #fff));
    font-size: .82rem;
    font-weight: 600;
}

.pix-copy-btn {
    flex: 0 0 auto;
    appearance: none;
    max-width: 90px;
    padding: 5px 10px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}

.pix-copy-btn:hover,
.pix-copy-btn:focus {
    border-color: rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.pix-code-scroll {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 86px;
    min-height: 86px;
    max-height: 86px;
    padding: 10px 14px;
    overflow-x: hidden;
    overflow-y: auto;
}

.pix-code-text {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    color: var(--pix-text-color, var(--text, #fff));
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        "Liberation Mono",
        monospace;
    font-size: .86rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.pix-payment-actions {
    margin-bottom: 14px;
}

#btnVerifyPixPayment,
#btnReadPixQrCode {
    width: 50%;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    color: #fff;
    text-align: center;
}

#btnBackFromPixPayment {
    min-width: 160px;
    margin-top: 12px;
    color: #fff;
}

@media (max-width:420px) {
    .payment-choice-row {
        gap: 8px;
    }

    #btnVerifyPixPayment,
    #btnReadPixQrCode {
        font-size: .82rem;
    }
}

/* ============================================================
   PUBLIC PIX PANEL PARITY 1
   Estados e controles equivalentes ao preview administrativo
   ============================================================ */

[hidden] {
    display: none !important;
}

#sectionPaymentChoice,
#sectionPixPayment {
    width: 100%;
}

.payment-choice-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap, 12px);
}

.payment-choice-row {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: var(--gap, 12px);
}

#sectionPaymentChoice .payment-choice-row>.btn,
#btnBackFromPixPayment {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 12px 16px;
    box-sizing: border-box;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    box-shadow: none;
}

#sectionPaymentChoice .payment-choice-row>.btn {
    width: 50%;
}

#sectionPaymentChoice .payment-choice-row>.btn:hover,
#sectionPaymentChoice .payment-choice-row>.btn:focus,
#btnBackFromPixPayment:hover,
#btnBackFromPixPayment:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
    outline: none;
    box-shadow: none;
}

#btnBackFromPixPayment {
    width: auto;
    min-width: 160px;
    margin-top: 12px;
}

#btnVerifyPixPayment[hidden]+#btnReadPixQrCode {
    width: 100%;
}

/* ============================================================
   PUBLIC RESPONSIVE PLAN GRID
   Duas colunas somente quando o contêiner comportar os textos
   ============================================================ */

#publicPlansSection .plans-grid {
    grid-template-columns:
        repeat(auto-fit,
            minmax(min(148px, 100%),
                1fr));
    align-items: stretch;
}

#publicPlansSection .plan-card--preview {
    min-width: 0;
    height: 100%;
}

#publicPlansSection .plan-card--preview .plan-card-inner {
    height: 100%;
    box-sizing: border-box;
}

#publicPlansSection .plan-card--preview .plan-main {
    min-width: 0;
}

#publicPlansSection .plan-card--preview .plan-title,
#publicPlansSection .plan-card--preview .plan-price {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

/* ============================================================
   PUBLIC BACK BUTTON PANEL PARITY
   O texto vem do HTML traduzido; o CSS apenas estiliza.
   ============================================================ */

#btnBackHome.btn.btn-outline-light,
#btnBackFromPaymentChoice.btn.btn-outline-light,
#btnBackFromPixPayment.btn.btn-outline-light {
    appearance: none !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 44px !important;

    margin-top: 12px !important;
    padding: 9px 14px !important;

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

    align-self: flex-start;

    color: #ffffff !important;
    background: transparent !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.25) !important;

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

    font-size: 16px !important;
    line-height: 24px !important;

    cursor: pointer;

    transform: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#btnBackFromPaymentChoice.btn.btn-outline-light {
    margin-left: auto !important;
}

#btnBackHome.btn.btn-outline-light
.back-icon {
    width: 14px;
    height: 14px;

    display: block !important;
    flex: 0 0 14px;
}

#btnBackHome.btn.btn-outline-light:hover,
#btnBackHome.btn.btn-outline-light:focus,
#btnBackHome.btn.btn-outline-light:focus-visible,
#btnBackFromPaymentChoice.btn.btn-outline-light:hover,
#btnBackFromPaymentChoice.btn.btn-outline-light:focus,
#btnBackFromPaymentChoice.btn.btn-outline-light:focus-visible,
#btnBackFromPixPayment.btn.btn-outline-light:hover,
#btnBackFromPixPayment.btn.btn-outline-light:focus,
#btnBackFromPixPayment.btn.btn-outline-light:focus-visible {
    color: #ffffff !important;

    background:
        rgba(255, 255, 255, 0.08) !important;

    border-color:
        rgba(255, 255, 255, 0.35) !important;

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

/* PAYMENT BACK EQUAL HEIGHT */

#sectionPaymentChoice .payment-choice-row #btnBackFromPaymentChoice {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    align-self: stretch !important;
}

/* ============================================================
   PUBLIC INITIAL PAGE LOADER
   ============================================================ */

.public-page-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #ffffff;
    background:
        radial-gradient(circle at center,
            rgba(32, 63, 110, 0.98),
            rgba(5, 12, 23, 1));
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 180ms ease,
        visibility 180ms ease;
}

.public-page-loading.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.public-page-loading-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid rgba(255, 255, 255, 0.22);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation:
        public-page-loading-spin 700ms linear infinite;
}

@keyframes public-page-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-page-loading-spinner {
        animation-duration: 1400ms;
    }

    .public-page-loading {
        transition: none;
    }
}

/* ============================================================
   PUBLIC PLAN THEME PARITY
   Consome as mesmas variáveis visuais do preview administrativo
   ============================================================ */

#publicPlansSection .plan-card--preview {
    color:
        var(--btn-text-color,
            #ffffff);

    background:
        var(--btn-bg-rgba-preview,
            rgba(255, 255, 255, 0.06));

    border-color:
        var(--btn-border-color,
            rgba(255, 255, 255, 0.25));

    border-radius:
        var(--radius,
            12px);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#publicPlansSection .plan-card--preview .plan-title,
#publicPlansSection .plan-card--preview .plan-price {
    color:
        var(--btn-text-color,
            #ffffff);
}

#publicPlansSection .plan-card--preview:hover,
#publicPlansSection .plan-card--preview:focus,
#publicPlansSection .plan-card--preview:focus-visible {
    color:
        var(--btn-text-color,
            #ffffff);

    background:
        var(--btn-hover-color,
            var(--btn-bg-rgba-preview,
                rgba(255, 255, 255, 0.10)));

    border-color:
        var(--btn-border-color,
            rgba(255, 255, 255, 0.35));
}

#publicPlansSection .plan-card--skeleton {
    background:
        var(--btn-bg-rgba-preview,
            rgba(255, 255, 255, 0.06));

    border-color:
        var(--btn-border-color,
            rgba(255, 255, 255, 0.18));

    border-radius:
        var(--radius,
            12px);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ============================================================
   PUBLIC PLAN CONTRACT VARIABLES
   ============================================================ */

#publicPlansSection .plan-card--preview {
    color:
        var(--plan-text-color,
            var(--btn-text-color, #ffffff));

    background:
        var(--plan-bg-rgba-preview,
            rgba(255, 255, 255, 0.06));

    border-color:
        var(--plan-border-color,
            rgba(255, 255, 255, 0.25));

    border-radius:
        var(--plan-radius,
            var(--radius, 12px));

    backdrop-filter:
        blur(var(--plan-blur, 0px));

    -webkit-backdrop-filter:
        blur(var(--plan-blur, 0px));
}

#publicPlansSection .plan-card--preview .plan-title,
#publicPlansSection .plan-card--preview .plan-price {
    color:
        var(--plan-text-color,
            var(--btn-text-color, #ffffff));
}

#publicPlansSection .plan-card--preview:hover,
#publicPlansSection .plan-card--preview:focus,
#publicPlansSection .plan-card--preview:focus-visible {
    background:
        var(--plan-hover-color,
            var(--plan-bg-rgba-preview,
                rgba(255, 255, 255, 0.10)));
}

/* ============================================================
   PUBLIC PAYMENT CHOICE CONTRACT VARIABLES
   ============================================================ */

#sectionPaymentChoice .plans-header {
    color:
        var(--payment-choice-title-color,
            var(--name-color, var(--text, #ffffff)));
}

#sectionPaymentChoice .payment-choice-list>.preview-btn {
    color:
        var(--payment-choice-text-color,
            #ffffff);

    background:
        var(--payment-choice-bg-rgba-preview,
            rgba(255, 255, 255, 0.06));

    border-color:
        var(--payment-choice-border-color,
            rgba(255, 255, 255, 0.25));

    border-radius:
        var(--radius, 12px);

    backdrop-filter:
        blur(var(--payment-choice-blur, 0px));

    -webkit-backdrop-filter:
        blur(var(--payment-choice-blur, 0px));

    box-shadow: none;
}

#sectionPaymentChoice .payment-choice-list>.preview-btn:hover,
#sectionPaymentChoice .payment-choice-list>.preview-btn:focus,
#sectionPaymentChoice .payment-choice-list>.preview-btn:focus-visible {
    color:
        var(--payment-choice-text-color,
            #ffffff);

    background:
        var(--payment-choice-hover-color,
            var(--payment-choice-bg-rgba-preview,
                rgba(255, 255, 255, 0.10)));

    border-color:
        var(--payment-choice-border-color,
            rgba(255, 255, 255, 0.35));
}

/* =========================================================
   PUBLIC PAYMENT SUPPORT BUTTON
   ========================================================= */

#sectionPaymentChoice #btnPaymentChoiceSupport {
    width: 100%;
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;

    color:
        var(--payment-choice-text-color,
            var(--text, #fff));

    background:
        var(--payment-choice-bg-rgba-preview,
            rgba(255, 255, 255, 0.06));

    border:
        1px solid var(--payment-choice-border-color,
            rgba(255, 255, 255, 0.25));

    border-radius:
        var(--radius, 16px);

    -webkit-backdrop-filter:
        var(--payment-choice-blur, blur(0px));

    backdrop-filter:
        var(--payment-choice-blur, blur(0px));

    text-decoration: none;
    box-shadow: none;
}

#sectionPaymentChoice #btnPaymentChoiceSupport:hover,
#sectionPaymentChoice #btnPaymentChoiceSupport:focus {
    color:
        var(--payment-choice-text-color,
            var(--text, #fff));

    background:
        var(--payment-choice-hover-color,
            rgba(255, 255, 255, 0.10));

    text-decoration: none;
    outline: none;
}

/* =========================================================
   PUBLIC PIX QR MODAL — SEM CLS
   ========================================================= */

body.public-pix-qr-open {
    overflow: hidden;
}

.public-pix-qr-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 18px;
    overflow: auto;
    background: rgba(3, 8, 20, 0.78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.public-pix-qr-overlay[hidden] {
    display: none !important;
}

.public-pix-qr-dialog {
    position: relative;
    width: min(100%, 420px);
    box-sizing: border-box;
    padding: 28px 22px 22px;
    color: var(--text, #fff);
    background: rgba(11, 27, 55, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 22px;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.46);
}

.public-pix-qr-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: inherit;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.public-pix-qr-close:hover,
.public-pix-qr-close:focus {
    background: rgba(255, 255, 255, 0.22);
    outline: none;
}

.public-pix-qr-icon {
    margin-bottom: 8px;
    font-size: 30px;
}

.public-pix-qr-title {
    margin: 0 42px 8px;
    font-size: 24px;
    line-height: 1.2;
}

.public-pix-qr-description,
.public-pix-qr-warning {
    margin: 0 auto 16px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.45;
}

.public-pix-qr-frame {
    width: min(100%, 320px);
    min-height: 280px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    margin: 0 auto 16px;
    padding: 12px;
    overflow: hidden;
    background: #fff;
    border-radius: 18px;
}

.public-pix-qr-image {
    display: block;
    width: 100%;
    height: auto;
}

.public-pix-qr-status {
    color: #172033;
    line-height: 1.4;
}

.public-pix-qr-status.is-error {
    color: #991b1b;
}

.public-pix-qr-back {
    width: 100%;
    min-height: 52px;
}

@media (max-width: 420px) {
    .public-pix-qr-overlay {
        padding: 10px;
    }

    .public-pix-qr-dialog {
        padding-right: 16px;
        padding-left: 16px;
        border-radius: 18px;
    }

    .public-pix-qr-frame {
        min-height: 240px;
    }
}


/* =========================================================
   PUBLIC MARKETPLACE CAPTURE
   ========================================================= */

body.marketplace-capture-open {
    overflow: hidden;
}

.marketplace-capture-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 18px;
    overflow: auto;
    background: rgba(3, 8, 20, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.marketplace-capture-overlay[hidden] {
    display: none !important;
}

.marketplace-capture-dialog {
    position: relative;
    width: min(100%, 430px);
    max-height: calc(100vh - 36px);
    box-sizing: border-box;
    padding: 28px 22px 22px;
    overflow: auto;
    color: #fff;
    background: rgba(9, 22, 45, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 22px;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
}

.marketplace-capture-dialog:focus {
    outline: none;
}

.marketplace-capture-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.marketplace-capture-close:hover,
.marketplace-capture-close:focus {
    background: rgba(255, 255, 255, 0.20);
    outline: none;
}

.marketplace-capture-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background: rgba(14, 165, 233, 0.16);
    border: 1px solid rgba(125, 211, 252, 0.30);
    border-radius: 50%;
    font-size: 28px;
}

.marketplace-capture-kicker {
    margin-bottom: 7px;
    color: #7dd3fc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.marketplace-capture-title {
    margin: 0;
    color: #fff;
    font-size: 24px;
    line-height: 1.2;
}

.marketplace-capture-description {
    margin: 11px auto 17px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 14px;
    line-height: 1.5;
}

.marketplace-capture-steps {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.marketplace-capture-step {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 12px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
}

.marketplace-capture-step-number {
    width: 28px;
    height: 28px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #082f49;
    background: #7dd3fc;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 900;
}

.marketplace-capture-step strong {
    display: block;
    margin-bottom: 3px;
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
}

.marketplace-capture-step p {
    margin: 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 12px;
    line-height: 1.42;
}

.marketplace-capture-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 13px;
    padding: 11px 12px;
    color: rgba(255, 255, 255, 0.76);
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(110, 231, 183, 0.20);
    border-radius: 12px;
    text-align: left;
}

.marketplace-capture-notice p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
}

.marketplace-capture-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 16px;
}

.marketplace-capture-button {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 10px 14px;
    color: #041521;
    background: #38bdf8;
    border: 1px solid #38bdf8;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
}

.marketplace-capture-button--outline {
    color: #fff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.25);
}

.marketplace-capture-button--whatsapp {
    color: #fff;
    background: #168c4c;
    border-color: #168c4c;
}

.marketplace-capture-later {
    min-height: 35px;
    color: rgba(255, 255, 255, 0.72);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.marketplace-capture-later:hover,
.marketplace-capture-later:focus {
    color: #fff;
    text-decoration: underline;
    outline: none;
}

@media (max-width: 575px) {
    .marketplace-capture-overlay {
        place-items: start center;
        padding: 10px;
    }

    .marketplace-capture-dialog {
        max-height: none;
        padding: 24px 16px 18px;
        border-radius: 18px;
    }
}

/* =========================================================
   PUBLIC COOKIE PREFERENCES
   ========================================================= */

body.cookie-preferences-open {
    overflow: hidden;
}

/*
 * Mantém o modal alinhado à largura fixa
 * da coluna mobile da BIO.
 */
.cookie-preferences-dialog {
    width: min(100%, 360px);
}

.cookie-preferences-icon {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(253, 186, 116, 0.32);
}

.cookie-preferences-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 3px;
    text-align: left;
}

.cookie-preferences-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    box-sizing: border-box;
    padding: 13px 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    cursor: pointer;
}

.cookie-preferences-option:first-child {
    cursor: default;
}

.cookie-preferences-copy {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
}

.cookie-preferences-copy strong {
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
}

.cookie-preferences-copy small {
    color: rgba(255, 255, 255, 0.64);
    font-size: 12px;
    line-height: 1.42;
}

.cookie-preferences-always {
    flex: 0 0 auto;
    padding: 6px 8px;
    color: #86efac;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(134, 239, 172, 0.24);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.cookie-preferences-switch {
    position: relative;
    width: 48px;
    height: 28px;
    flex: 0 0 48px;
}

.cookie-preferences-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.cookie-preferences-switch > span {
    position: absolute;
    inset: 0;
    display: block;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    transition:
        background 0.18s ease,
        border-color 0.18s ease;
}

.cookie-preferences-switch > span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.28);
    transition: transform 0.18s ease;
}

.cookie-preferences-switch input:checked + span {
    background: #38bdf8;
    border-color: #38bdf8;
}

.cookie-preferences-switch input:checked + span::after {
    transform: translateX(20px);
}

.cookie-preferences-option:focus-within {
    border-color: rgba(125, 211, 252, 0.70);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.13);
}

.cookie-preferences-feedback {
    min-height: 18px;
    margin: 10px 0 -5px;
    color: #86efac;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.cookie-preferences-actions button {
    font-family: inherit;
    font-size: inherit;
}

@media (max-width: 575px) {
    .cookie-preferences-option {
        gap: 10px;
    }

    .cookie-preferences-always {
        max-width: 88px;
        text-align: center;
        white-space: normal;
    }
}


/* =========================================================
   PUBLIC PRIVACY POLICY
   ========================================================= */

body.privacy-policy-open {
    overflow: hidden;
}

/*
 * Mantém o modal alinhado à largura fixa
 * da coluna mobile da BIO.
 */
.privacy-policy-dialog {
    width: min(100%, 360px);
}

.privacy-policy-icon {
    background: rgba(99, 102, 241, 0.16);
    border-color: rgba(165, 180, 252, 0.32);
}

.privacy-policy-updated {
    margin: -7px 0 14px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
    line-height: 1.4;
}

.privacy-policy-content {
    display: flex;
    flex-direction: column;
    gap: 9px;
    text-align: left;
}

.privacy-policy-section {
    padding: 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
}

.privacy-policy-section h3 {
    margin: 0 0 7px;
    color: #fff;
    font-size: 14px;
    line-height: 1.35;
}

.privacy-policy-section p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
    line-height: 1.52;
}

.privacy-policy-section p + p {
    margin-top: 8px;
}

.privacy-policy-section ul {
    margin: 9px 0 0;
    padding-left: 18px;
    color: rgba(255, 255, 255, 0.68);
}

.privacy-policy-section li {
    font-size: 12px;
    line-height: 1.5;
}

.privacy-policy-section li + li {
    margin-top: 6px;
}

.privacy-policy-notice {
    margin-top: 12px;
}

.privacy-policy-dialog
.marketplace-capture-actions button {
    font-family: inherit;
    font-size: inherit;
}

@media (max-width: 575px) {
    .privacy-policy-section {
        padding: 11px;
    }
}


/* =========================================================
   PUBLIC BIO REPORT
   ========================================================= */

body.public-report-open {
    overflow: hidden;
}

.public-report-dialog {
    width: min(100%, 360px);
}

.public-report-icon {
    color: #fda4af;
    background: rgba(244, 63, 94, 0.14);
    border-color: rgba(253, 164, 175, 0.32);
}

.public-report-form {
    display: flex;
    flex-direction: column;
    gap: 13px;
    text-align: left;
}

.public-report-form[aria-busy="true"] {
    opacity: 0.74;
    pointer-events: none;
}

.public-report-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.public-report-field label {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
}

.public-report-field label span {
    color: rgba(255, 255, 255, 0.56);
    font-size: 11px;
    font-weight: 600;
}

.public-report-field input,
.public-report-field select,
.public-report-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.19);
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    outline: none;
}

.public-report-field select {
    min-height: 45px;
}

.public-report-field select option {
    color: #111;
    background: #fff;
}

.public-report-field textarea {
    min-height: 150px;
    resize: vertical;
}

.public-report-field input::placeholder,
.public-report-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.44);
    opacity: 1;
}

.public-report-field input:focus,
.public-report-field select:focus,
.public-report-field textarea:focus {
    border-color: rgba(125, 211, 252, 0.82);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.13);
}

.public-report-field small {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    line-height: 1.42;
}

.public-report-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.public-report-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.public-report-good-faith {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    color: rgba(255, 255, 255, 0.74);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.48;
    cursor: pointer;
}

.public-report-good-faith input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 1px 0 0;
    accent-color: #38bdf8;
}

.public-report-good-faith:focus-within {
    border-color: rgba(125, 211, 252, 0.70);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.13);
}

.public-report-notice {
    margin-top: 0;
}

.public-report-feedback {
    min-height: 18px;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.public-report-feedback.is-error {
    color: #fda4af;
}

.public-report-feedback.is-success {
    color: #86efac;
}

.public-report-actions {
    margin-top: 0;
}

.public-report-actions button {
    font-family: inherit;
    font-size: inherit;
}

.public-report-success {
    text-align: center;
}

.public-report-success[hidden] {
    display: none !important;
}

.public-report-success:focus {
    outline: none;
}

.public-report-success-icon {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 8px auto 13px;
    color: #052e16;
    background: #86efac;
    border-radius: 50%;
    font-size: 30px;
    font-weight: 900;
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.22);
}

.public-report-success h3 {
    margin: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1.25;
}

.public-report-success > p {
    margin: 9px 0 15px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.5;
}

.public-report-protocol-box {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 16px;
    padding: 13px 12px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(134, 239, 172, 0.22);
    border-radius: 12px;
}

.public-report-protocol-box span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-report-protocol-box strong {
    color: #86efac;
    font-size: 17px;
    line-height: 1.3;
    word-break: break-word;
}

@media (min-width: 480px) {
    .public-report-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   PUBLIC PIX QR THEME CONTRACT
   ========================================================= */

.public-pix-qr-overlay {
    background:
        var(--pix-qr-overlay-bg-rgba-preview,
            rgba(8, 15, 38, 0.92));

    -webkit-backdrop-filter:
        blur(var(--pix-qr-overlay-blur,
                14px));

    backdrop-filter:
        blur(var(--pix-qr-overlay-blur,
                14px));
}

.public-pix-qr-dialog {
    color:
        var(--pix-qr-text-color,
            var(--text, #ffffff));

    background:
        var(--pix-qr-dialog-bg-rgba-preview,
            rgba(15, 23, 42, 0.96));

    border-color:
        var(--pix-qr-dialog-border-color,
            #ffffff);

    border-radius:
        var(--pix-qr-dialog-radius,
            28px);

    -webkit-backdrop-filter:
        blur(var(--pix-qr-dialog-blur,
                4px));

    backdrop-filter:
        blur(var(--pix-qr-dialog-blur,
                4px));
}

.public-pix-qr-title {
    color:
        var(--pix-qr-title-color,
            var(--text, #ffffff));
}

.public-pix-qr-description,
.public-pix-qr-status,
.public-pix-qr-warning {
    color:
        var(--pix-qr-text-color,
            var(--text, #ffffff));
}

.public-pix-qr-frame {
    width:
        min(100%,
            var(--pix-qr-frame-size,
                294px));

    max-width: 100%;
    aspect-ratio: 1 / 1;

    border-radius:
        var(--pix-qr-frame-radius,
            22px);

    overflow: hidden;
}

.public-pix-qr-image {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

/* =========================================================
   PUBLIC PIX QR SITE SCOPE
   Limita o overlay à coluna visual da BIO.
   ========================================================= */

.public-pix-qr-overlay {
    inset: 0 auto 0 50%;
    width: min(100vw, var(--maxw, 540px));
    max-width: 100vw;
    transform: translateX(-50%);
}

/* =========================================================
   PUBLIC PIX QR NO HORIZONTAL OVERFLOW
   ========================================================= */

.public-pix-qr-overlay {
    inset: 0;
    width: min(100%, var(--maxw, 540px));
    max-width: 100%;
    margin-inline: auto;
    transform: none;
    overflow-x: hidden;
    overflow-y: auto;
}

body.public-pix-qr-open {
    overflow-x: hidden;
}

/* =========================================================
   PUBLIC PIX QR PANEL PARITY FINAL
   Replica o card configurável exibido no painel.
   ========================================================= */

.public-pix-qr-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;

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

    width: min(100%, var(--maxw, 540px));
    max-width: 100%;
    margin-inline: auto;

    padding: 18px;

    background:
        var(--pix-qr-overlay-bg-rgba-preview,
            rgba(3, 7, 18, 0.92));

    -webkit-backdrop-filter:
        blur(var(--pix-qr-overlay-blur,
                14px));

    backdrop-filter:
        blur(var(--pix-qr-overlay-blur,
                14px));

    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;

    box-sizing: border-box;
    transform: none;
}

.public-pix-qr-overlay[hidden] {
    display: none !important;
}

.public-pix-qr-dialog {
    position: relative;

    width: min(100%, 370px);

    padding: 24px;

    color:
        var(--pix-qr-text-color,
            #ffffff);

    background:
        var(--pix-qr-dialog-bg-rgba-preview,
            rgba(15, 23, 42, 0.96));

    border: 1px solid var(--pix-qr-dialog-border-color,
            rgba(255, 255, 255, 0.25));

    border-radius:
        var(--pix-qr-dialog-radius,
            16px);

    -webkit-backdrop-filter:
        blur(var(--pix-qr-dialog-blur,
                18px));

    backdrop-filter:
        blur(var(--pix-qr-dialog-blur,
                18px));

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.55);

    text-align: center;
    box-sizing: border-box;
}

.public-pix-qr-close {
    position: absolute;
    top: 10px;
    right: 10px;

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

    width: 36px;
    height: 36px;
    padding: 0;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;

    font-size: 1.55rem;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;
}

.public-pix-qr-close:hover,
.public-pix-qr-close:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
    outline: none;
}

.public-pix-qr-icon {
    margin-bottom: 9px;
    font-size: 1.65rem;
    line-height: 1;
}

.public-pix-qr-title {
    margin: 0;

    color:
        var(--pix-qr-title-color,
            var(--pix-title-color, #ffffff));

    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
}

.public-pix-qr-description {
    margin: 9px auto 17px;

    color:
        var(--pix-qr-text-color,
            rgba(255, 255, 255, 0.8));

    font-size: 0.84rem;
    line-height: 1.45;
}

.public-pix-qr-frame {
    position: relative;

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

    width:
        min(100%,
            var(--pix-qr-frame-size,
                286px));

    min-height:
        var(--pix-qr-frame-size,
            286px);

    margin: 0 auto;
    padding: 12px;

    background: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.38);

    border-radius:
        var(--pix-qr-frame-radius,
            14px);

    overflow: hidden;
    box-sizing: border-box;
    aspect-ratio: auto;
}

.public-pix-qr-image {
    display: block;

    width: 100%;
    height: auto;

    max-width:
        calc(var(--pix-qr-frame-size,
                286px) - 26px);

    max-height:
        calc(var(--pix-qr-frame-size,
                286px) - 26px);

    object-fit: contain;
    background: #ffffff;
}

.public-pix-qr-status {
    width: 100%;
    padding: 18px;

    color: #334155;

    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.45;

    box-sizing: border-box;
}

.public-pix-qr-status:not(.is-error)::before {
    content: "⏳";

    display: block;
    margin-bottom: 8px;

    font-size: 1.45rem;
}

.public-pix-qr-status.is-error {
    color: #b91c1c;
}

.public-pix-qr-status.is-error::before {
    content: "⚠️";

    display: block;
    margin-bottom: 8px;

    font-size: 1.45rem;
}

.public-pix-qr-warning {
    margin: 13px auto 16px;

    color:
        var(--pix-qr-text-color,
            #ffffff);

    opacity: 0.68;

    font-size: 0.75rem;
    line-height: 1.4;
}

.public-pix-qr-back {
    width: 100%;
    min-width: 0;
    min-height: 52px;

    color: #ffffff !important;
    background: transparent !important;

    border: 1px solid rgba(255, 255, 255, 0.25) !important;

    box-shadow: none !important;
}

.public-pix-qr-back:hover,
.public-pix-qr-back:focus {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: none !important;
}

body.public-pix-qr-open {
    overflow-x: hidden;
    overflow-y: hidden;
}

@media (max-width: 575.98px) {
    .public-pix-qr-overlay {
        padding: 12px;
    }

    .public-pix-qr-dialog {
        width: 100%;
        padding: 22px 16px 18px;
    }

    .public-pix-qr-frame {
        width: min(100%, 260px);
        min-height: 260px;
    }

    .public-pix-qr-image {
        max-width: 234px;
        max-height: 234px;
    }
}

.public-location-purpose {
    position: fixed;
    inset: 0;
    z-index: 2147483000;

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

    padding: 22px;

    background:
        rgba(8, 15, 35, 0.72);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.public-location-purpose__card {
    width: 100%;

    max-width:
        var(--public-location-site-width,
            420px);

    box-sizing: border-box;

    padding: 28px 24px 22px;

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 22px;

    background:
        rgba(20, 34, 76, 0.98);

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.45);

    color: #fff;
    text-align: center;
}

.public-location-purpose__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin: 0 auto 16px;

    border-radius: 50%;

    background:
        rgba(55, 170, 255, 0.18);

    color: #39aaff;
}

.public-location-purpose__icon svg {
    width: 23px;
    height: 31px;
}

.public-location-purpose__card h2 {
    margin: 0 0 12px;

    color: #fff;

    font-size: 22px;
    line-height: 1.25;
}

.public-location-purpose__card p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.82);

    font-size: 15px;
    line-height: 1.55;
}

.public-location-purpose__actions {
    display: grid;
    gap: 10px;

    margin-top: 22px;
}

.public-location-purpose__actions button {
    min-height: 48px;

    padding: 11px 18px;

    border: 0;
    border-radius: 14px;

    font: inherit;
    font-weight: 700;

    cursor: pointer;
}

.public-location-purpose__actions button[data-location-continue="1"] {
    background: #29a9e8;
    color: #fff;
}

.public-location-purpose__actions button[data-location-cancel="1"] {
    background:
        rgba(255, 255, 255, 0.1);

    color:
        rgba(255, 255, 255, 0.9);
}

/* === PUBLIC CARD UI VARS PHASE 4 === */

#sectionCardPayment {
    width: 100%;
    color: var(--card-text-color, var(--text, #ffffff));
}

#sectionCardPayment .plans-header {
    color: var(--card-title-color, var(--text, #ffffff));
}

#sectionCardPayment .card-selected-plan-summary {
    color: var(
        --plan-text-color,
        var(--card-text-color, #ffffff)
    );
    background: var(
        --plan-bg-rgba-preview,
        rgba(27, 80, 176, 0.12)
    );
    border: 1px solid var(
        --plan-border-color,
        rgba(255, 255, 255, 0.22)
    );
    border-radius: var(--plan-radius, 16px);
    backdrop-filter: blur(var(--plan-blur, 0px));
    -webkit-backdrop-filter: blur(var(--plan-blur, 0px));
}

#sectionCardPayment .public-card-status {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(
        --card-surface-border,
        rgba(255, 255, 255, 0.20)
    );
    border-radius: var(
        --card-input-radius,
        var(--radius, 16px)
    );
    background: var(
        --card-surface-bg,
        rgba(15, 23, 42, 0.30)
    );
    color: var(--card-text-color, var(--text, #ffffff));
    font-size: 0.92rem;
    line-height: 1.4;
    text-align: center;
    backdrop-filter: blur(var(--card-surface-blur, 12px));
    -webkit-backdrop-filter: blur(var(--card-surface-blur, 12px));
}

#sectionCardPayment .public-card-status.is-error {
    border-color: rgba(255, 118, 118, 0.58);
}

#sectionCardPayment .public-card-status.is-success {
    border-color: rgba(120, 230, 165, 0.58);
}

#sectionCardPayment .public-card-form {
    display: grid;
    gap: var(--gap, 14px);
    width: 100%;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(
        --card-surface-border,
        rgba(255, 255, 255, 0.20)
    );
    border-radius: var(
        --card-surface-radius,
        var(--radius, 16px)
    );
    background: var(
        --card-surface-bg,
        rgba(15, 23, 42, 0.30)
    );
    backdrop-filter: blur(var(--card-surface-blur, 12px));
    -webkit-backdrop-filter: blur(var(--card-surface-blur, 12px));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.20);
    text-align: left;
}

#sectionCardPayment .public-card-form[aria-busy="true"] {
    opacity: 0.72;
    pointer-events: none;
}

#sectionCardPayment .public-card-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

#sectionCardPayment .public-card-field label,
#sectionCardPayment .public-card-country > span:first-child {
    color: var(--card-text-color, var(--text, #ffffff));
    font-size: 0.86rem;
    font-weight: 700;
}

#sectionCardPayment .public-card-field input,
#sectionCardPayment .public-card-field select,
#sectionCardPayment .public-card-brand {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px solid var(
        --card-input-border,
        rgba(255, 255, 255, 0.22)
    );
    border-radius: var(
        --card-input-radius,
        var(--radius, 16px)
    );
    padding: 10px 12px;
    background: var(
        --card-input-bg,
        rgba(11, 18, 32, 0.72)
    );
    color: var(
        --card-input-text,
        var(--text, #ffffff)
    );
    font: inherit;
    outline: none;
    opacity: 1;
}

#sectionCardPayment .public-card-field input::placeholder {
    color: var(
        --card-input-placeholder,
        rgba(255, 255, 255, 0.58)
    );
    opacity: 1;
}

#sectionCardPayment .public-card-field input:focus,
#sectionCardPayment .public-card-field select:focus {
    border-color: var(
        --card-input-focus,
        var(--accent, #22c55e)
    );
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

#sectionCardPayment .public-card-field select option {
    color: #111111;
}

#sectionCardPayment .public-card-grid {
    display: grid;
    gap: 12px;
}

#sectionCardPayment .public-card-grid--two,
#sectionCardPayment .public-card-grid--document {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#sectionCardPayment .public-card-grid--card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#sectionCardPayment .public-card-address {
    display: grid;
    gap: var(--gap, 14px);
}

#sectionCardPayment .public-card-country {
    display: grid;
    gap: 6px;
    min-width: 0;
}

#sectionCardPayment .public-card-country-value {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    border: 1px solid var(
        --card-input-border,
        rgba(255, 255, 255, 0.22)
    );
    border-radius: var(
        --card-input-radius,
        var(--radius, 16px)
    );
    background: var(
        --card-input-bg,
        rgba(11, 18, 32, 0.72)
    );
}

#sectionCardPayment .public-card-country-flag {
    display: block;
    width: 24px;
    height: 17px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.18),
        0 3px 8px rgba(0, 0, 0, 0.22);
}

#sectionCardPayment .public-card-country-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    font-size: 20px;
    line-height: 1;
}

#sectionCardPayment .public-card-country strong {
    color: var(--card-text-color, var(--text, #ffffff));
}

#sectionCardPayment .public-card-brand {
    display: flex;
    align-items: center;
}

#sectionCardPayment .public-card-divider {
    width: 100%;
    height: 1px;
    margin: 3px 0;
    border: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(
            --card-surface-border,
            rgba(255, 255, 255, 0.20)
        ) 22%,
        var(
            --card-surface-border,
            rgba(255, 255, 255, 0.20)
        ) 78%,
        transparent 100%
    );
    opacity: 0.72;
}

#sectionCardPayment .public-card-submit {
    color: var(--card-submit-text, #06150b);
    background: var(
        --card-submit-bg,
        var(--accent, #22c55e)
    );
    border: 1px solid var(
        --card-submit-border,
        var(--accent, #22c55e)
    );
    border-radius: var(
        --card-submit-radius,
        var(--radius, 16px)
    );
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20);
}

#sectionCardPayment .public-card-submit:hover,
#sectionCardPayment .public-card-submit:focus {
    color: var(--card-submit-text, #06150b);
    background: var(--card-submit-hover, #16a34a);
}

#sectionCardPayment .public-card-submit:disabled {
    cursor: not-allowed;
    opacity: 0.68;
}

#sectionCardPayment .public-card-security {
    margin: -2px 0 0;
    color: var(--card-muted-color, #cbd5e1);
    font-size: 0.76rem;
    line-height: 1.45;
    text-align: center;
}

#sectionCardPayment .public-card-field-error {
    min-height: 0;
    color: var(--card-muted-color, #cbd5e1);
    font-size: 0.76rem;
}

#sectionCardPayment .public-card-3ds-method[hidden],
#sectionCardPayment .public-card-3ds-challenge[hidden] {
    display: none;
}

@media (max-width: 460px) {
    #sectionCardPayment .public-card-grid--two,
    #sectionCardPayment .public-card-grid--document {
        grid-template-columns: 1fr;
    }

    #sectionCardPayment .public-card-form {
        padding: 14px;
    }

    #sectionCardPayment .public-card-grid--card {
        gap: 8px;
    }
}

/* === END PUBLIC CARD UI VARS PHASE 4 === */

/* === PUBLIC CARD COMPATIBILITY PHASE 5 === */
#sectionCardPayment .public-card-field input.is-invalid,
#sectionCardPayment .public-card-field select.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
}

#sectionCardPayment .public-card-field-error:not(:empty) {
    min-height: 1em;
    color: #fecaca;
}

#sectionCardPayment .public-card-back {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    min-width: 142px;
    min-height: 52px;
    margin: 16px 0 0;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--card-text-color, var(--text, #ffffff));
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

#sectionCardPayment .public-card-back:hover,
#sectionCardPayment .public-card-back:focus {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.34);
    color: var(--card-text-color, var(--text, #ffffff));
    transform: translateY(-1px);
}

#sectionCardPayment .public-card-back:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.50);
    outline-offset: 2px;
}
/* === END PUBLIC CARD COMPATIBILITY PHASE 5 === */

/* ============================================================
   PUBLIC LEGAL AGE NOTICE
   Componente institucional não customizável.
   ============================================================ */

.bio-age-notice {
    box-sizing: border-box !important;

    display: block !important;
    flex: 0 0 auto !important;

    width: 100% !important;
    max-width: var(--maxw, 720px) !important;

    margin: 14px auto 6px !important;
    padding: 11px 14px !important;

    color: #ffffff !important;
    background: rgba(127, 29, 29, 0.94) !important;

    border: 1px solid rgba(254, 202, 202, 0.95) !important;
    border-radius: 10px !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;

    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.24) !important;
}


/* PUBLIC PAYMENT BACK SVG PARITY */

#btnBackFromPaymentChoice.btn.btn-outline-light
.back-icon,

#btnBackFromPixPayment.btn.btn-outline-light
.back-icon {
    width: 14px;
    height: 14px;

    display: block !important;

    flex: 0 0 14px;

    fill: currentColor;
}

/* ============================================================
   PUBLIC LEGAL MODALS THEME CONTRACT

   Consome diretamente as variáveis persistidas pelo painel para:
   - Preferências de cookies
   - Política de Privacidade
   - Formulário de denúncia

   Os componentes, textos, comportamentos e endpoints permanecem
   os mesmos; este bloco altera somente a apresentação visual.
   ============================================================ */

/* ------------------------------------------------------------
   PREFERÊNCIAS DE COOKIES
   ------------------------------------------------------------ */

.cookie-preferences-overlay {
    background:
        var(
            --cookie-preferences-overlay-bg,
            rgba(3, 8, 20, 0.82)
        );

    -webkit-backdrop-filter:
        blur(
            var(
                --cookie-preferences-overlay-blur,
                8px
            )
        );

    backdrop-filter:
        blur(
            var(
                --cookie-preferences-overlay-blur,
                8px
            )
        );
}

.cookie-preferences-dialog {
    color:
        var(
            --cookie-preferences-title-color,
            #ffffff
        );

    background:
        var(
            --cookie-preferences-dialog-bg,
            rgba(9, 22, 45, 0.98)
        );

    border-color:
        var(
            --cookie-preferences-dialog-border,
            rgba(255, 255, 255, 0.25)
        );

    border-radius:
        var(
            --cookie-preferences-dialog-radius,
            22px
        );

    -webkit-backdrop-filter:
        blur(
            var(
                --cookie-preferences-dialog-blur,
                0px
            )
        );

    backdrop-filter:
        blur(
            var(
                --cookie-preferences-dialog-blur,
                0px
            )
        );
}

.cookie-preferences-overlay
.marketplace-capture-close {
    color:
        var(
            --cookie-preferences-title-color,
            #ffffff
        );
}

.cookie-preferences-icon {
    color:
        var(
            --cookie-preferences-accent,
            #38bdf8
        );

    background:
        color-mix(
            in srgb,
            var(
                --cookie-preferences-accent,
                #38bdf8
            ) 16%,
            transparent
        );

    border-color:
        color-mix(
            in srgb,
            var(
                --cookie-preferences-accent,
                #38bdf8
            ) 42%,
            transparent
        );
}

.cookie-preferences-overlay
.marketplace-capture-kicker {
    color:
        var(
            --cookie-preferences-accent,
            #38bdf8
        );
}

.cookie-preferences-overlay
.marketplace-capture-title,
.cookie-preferences-copy strong {
    color:
        var(
            --cookie-preferences-title-color,
            #ffffff
        );
}

.cookie-preferences-overlay
.marketplace-capture-description,
.cookie-preferences-copy small,
.cookie-preferences-overlay
.marketplace-capture-notice {
    color:
        var(
            --cookie-preferences-text-color,
            #c2c8d2
        );
}

.cookie-preferences-option {
    background:
        var(
            --cookie-preferences-option-bg,
            rgba(255, 255, 255, 0.055)
        );

    border-color:
        var(
            --cookie-preferences-option-border,
            rgba(255, 255, 255, 0.10)
        );

    border-radius:
        var(
            --cookie-preferences-option-radius,
            12px
        );
}

.cookie-preferences-always {
    color:
        var(
            --cookie-preferences-badge-text,
            #86efac
        );

    background:
        var(
            --cookie-preferences-badge-bg,
            rgba(34, 197, 94, 0.12)
        );

    border-color:
        color-mix(
            in srgb,
            var(
                --cookie-preferences-badge-text,
                #86efac
            ) 28%,
            transparent
        );
}

.cookie-preferences-switch > span {
    background:
        var(
            --cookie-preferences-switch-off,
            #384152
        );

    border-color:
        color-mix(
            in srgb,
            var(
                --cookie-preferences-switch-off,
                #384152
            ) 72%,
            #ffffff
        );
}

.cookie-preferences-switch > span::after {
    background:
        var(
            --cookie-preferences-switch-knob,
            #ffffff
        );
}

.cookie-preferences-switch
input:checked + span {
    background:
        var(
            --cookie-preferences-accent,
            #38bdf8
        );

    border-color:
        var(
            --cookie-preferences-accent,
            #38bdf8
        );
}

.cookie-preferences-option:focus-within {
    border-color:
        var(
            --cookie-preferences-accent,
            #38bdf8
        );

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(
                --cookie-preferences-accent,
                #38bdf8
            ) 18%,
            transparent
        );
}

.cookie-preferences-overlay
.marketplace-capture-button {
    color:
        var(
            --cookie-preferences-primary-text,
            #041521
        );

    background:
        var(
            --cookie-preferences-accent,
            #38bdf8
        );

    border-color:
        var(
            --cookie-preferences-accent,
            #38bdf8
        );

    border-radius:
        var(
            --cookie-preferences-button-radius,
            12px
        );
}

.cookie-preferences-overlay
.marketplace-capture-button:hover,
.cookie-preferences-overlay
.marketplace-capture-button:focus {
    color:
        var(
            --cookie-preferences-primary-text,
            #041521
        );

    background:
        color-mix(
            in srgb,
            var(
                --cookie-preferences-accent,
                #38bdf8
            ) 78%,
            #ffffff
        );

    border-color:
        color-mix(
            in srgb,
            var(
                --cookie-preferences-accent,
                #38bdf8
            ) 78%,
            #ffffff
        );
}

.cookie-preferences-overlay
.marketplace-capture-button--outline {
    color:
        var(
            --cookie-preferences-secondary-text,
            #ffffff
        );

    background: transparent;

    border-color:
        var(
            --cookie-preferences-option-border,
            rgba(255, 255, 255, 0.25)
        );
}

.cookie-preferences-overlay
.marketplace-capture-button--outline:hover,
.cookie-preferences-overlay
.marketplace-capture-button--outline:focus,
.cookie-preferences-overlay
.marketplace-capture-later,
.cookie-preferences-overlay
.marketplace-capture-later:hover,
.cookie-preferences-overlay
.marketplace-capture-later:focus {
    color:
        var(
            --cookie-preferences-secondary-text,
            #ffffff
        );
}

/* ------------------------------------------------------------
   POLÍTICA DE PRIVACIDADE
   ------------------------------------------------------------ */

.privacy-policy-overlay {
    background:
        var(
            --privacy-policy-overlay-bg,
            rgba(3, 7, 18, 0.94)
        );

    -webkit-backdrop-filter:
        blur(
            var(
                --privacy-policy-overlay-blur,
                14px
            )
        );

    backdrop-filter:
        blur(
            var(
                --privacy-policy-overlay-blur,
                14px
            )
        );
}

.privacy-policy-dialog {
    color:
        var(
            --privacy-policy-title-color,
            #ffffff
        );

    background:
        var(
            --privacy-policy-dialog-bg,
            rgba(15, 23, 42, 0.98)
        );

    border-color:
        var(
            --privacy-policy-dialog-border,
            rgba(125, 211, 252, 0.26)
        );

    border-radius:
        var(
            --privacy-policy-dialog-radius,
            18px
        );

    -webkit-backdrop-filter:
        blur(
            var(
                --privacy-policy-dialog-blur,
                0px
            )
        );

    backdrop-filter:
        blur(
            var(
                --privacy-policy-dialog-blur,
                0px
            )
        );
}

.privacy-policy-overlay
.marketplace-capture-close {
    color:
        var(
            --privacy-policy-close-color,
            #ffffff
        );
}

.privacy-policy-icon {
    color:
        var(
            --privacy-policy-accent,
            #6366f1
        );

    background:
        color-mix(
            in srgb,
            var(
                --privacy-policy-accent,
                #6366f1
            ) 16%,
            transparent
        );

    border-color:
        color-mix(
            in srgb,
            var(
                --privacy-policy-accent,
                #6366f1
            ) 34%,
            transparent
        );
}

.privacy-policy-overlay
.marketplace-capture-kicker {
    color:
        var(
            --privacy-policy-accent,
            #6366f1
        );
}

.privacy-policy-overlay
.marketplace-capture-title,
.privacy-policy-section h3 {
    color:
        var(
            --privacy-policy-title-color,
            #ffffff
        );
}

.privacy-policy-overlay
.marketplace-capture-description,
.privacy-policy-section p,
.privacy-policy-section ul,
.privacy-policy-overlay
.marketplace-capture-notice {
    color:
        var(
            --privacy-policy-text-color,
            #adb5c2
        );
}

.privacy-policy-updated {
    color:
        var(
            --privacy-policy-muted-color,
            #949baa
        );
}

.privacy-policy-section {
    color:
        var(
            --privacy-policy-title-color,
            #ffffff
        );

    background:
        var(
            --privacy-policy-section-bg,
            rgba(255, 255, 255, 0.055)
        );

    border-color:
        var(
            --privacy-policy-section-border,
            rgba(255, 255, 255, 0.10)
        );

    border-radius:
        var(
            --privacy-policy-section-radius,
            12px
        );
}

.privacy-policy-overlay
.marketplace-capture-button {
    color:
        var(
            --privacy-policy-button-text,
            #ffffff
        );

    background:
        var(
            --privacy-policy-accent,
            #6366f1
        );

    border-color:
        var(
            --privacy-policy-accent,
            #6366f1
        );

    border-radius:
        var(
            --privacy-policy-button-radius,
            12px
        );
}

.privacy-policy-overlay
.marketplace-capture-button:hover,
.privacy-policy-overlay
.marketplace-capture-button:focus {
    color:
        var(
            --privacy-policy-button-text,
            #ffffff
        );

    background:
        color-mix(
            in srgb,
            var(
                --privacy-policy-accent,
                #6366f1
            ) 78%,
            #ffffff
        );

    border-color:
        color-mix(
            in srgb,
            var(
                --privacy-policy-accent,
                #6366f1
            ) 78%,
            #ffffff
        );
}

/* ------------------------------------------------------------
   FORMULÁRIO DE DENÚNCIA
   ------------------------------------------------------------ */

.public-report-overlay {
    background:
        var(
            --report-overlay-bg,
            rgba(3, 8, 20, 0.82)
        );

    -webkit-backdrop-filter:
        blur(
            var(
                --report-overlay-blur,
                8px
            )
        );

    backdrop-filter:
        blur(
            var(
                --report-overlay-blur,
                8px
            )
        );
}

.public-report-dialog {
    color:
        var(
            --report-title-color,
            #ffffff
        );

    background:
        var(
            --report-dialog-bg,
            rgba(9, 22, 45, 0.98)
        );

    border-color:
        var(
            --report-dialog-border,
            rgba(255, 255, 255, 0.25)
        );

    border-radius:
        var(
            --report-dialog-radius,
            22px
        );

    -webkit-backdrop-filter:
        blur(
            var(
                --report-dialog-blur,
                0px
            )
        );

    backdrop-filter:
        blur(
            var(
                --report-dialog-blur,
                0px
            )
        );
}

.public-report-overlay
.marketplace-capture-close {
    color:
        var(
            --report-title-color,
            #ffffff
        );

    background:
        color-mix(
            in srgb,
            var(
                --report-title-color,
                #ffffff
            ) 12%,
            transparent
        );

    border-color:
        color-mix(
            in srgb,
            var(
                --report-title-color,
                #ffffff
            ) 28%,
            transparent
        );
}

.public-report-overlay
.marketplace-capture-close:hover,
.public-report-overlay
.marketplace-capture-close:focus {
    background:
        color-mix(
            in srgb,
            var(
                --report-title-color,
                #ffffff
            ) 20%,
            transparent
        );
}

.public-report-icon {
    color:
        var(
            --report-accent,
            #fda4af
        );

    background:
        color-mix(
            in srgb,
            var(
                --report-accent,
                #fda4af
            ) 16%,
            transparent
        );

    border-color:
        color-mix(
            in srgb,
            var(
                --report-accent,
                #fda4af
            ) 42%,
            transparent
        );
}

.public-report-overlay
.marketplace-capture-kicker {
    color:
        var(
            --report-accent,
            #fda4af
        );
}

.public-report-overlay
.marketplace-capture-title,
.public-report-field label,
.public-report-success h3 {
    color:
        var(
            --report-title-color,
            #ffffff
        );
}

.public-report-overlay
.marketplace-capture-description,
.public-report-good-faith,
.public-report-overlay
.marketplace-capture-notice,
.public-report-success > p {
    color:
        var(
            --report-text-color,
            #c2c8d2
        );
}

.public-report-field label span,
.public-report-field small,
.public-report-protocol-box span {
    color:
        var(
            --report-muted-color,
            #8f98a8
        );
}

.public-report-field input,
.public-report-field select,
.public-report-field textarea {
    color:
        var(
            --report-field-text,
            #ffffff
        );

    background:
        var(
            --report-field-bg,
            rgba(255, 255, 255, 0.075)
        );

    border-color:
        var(
            --report-field-border,
            rgba(255, 255, 255, 0.19)
        );

    border-radius:
        var(
            --report-field-radius,
            12px
        );
}

.public-report-field input::placeholder,
.public-report-field textarea::placeholder {
    color:
        var(
            --report-field-placeholder,
            #858d9c
        );

    opacity: 1;
}

.public-report-field input:focus,
.public-report-field select:focus,
.public-report-field textarea:focus,
.public-report-good-faith:focus-within {
    border-color:
        var(
            --report-field-focus,
            #38bdf8
        );

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(
                --report-field-focus,
                #38bdf8
            ) 18%,
            transparent
        );
}

.public-report-good-faith {
    background:
        var(
            --report-panel-bg,
            rgba(255, 255, 255, 0.045)
        );

    border-color:
        var(
            --report-panel-border,
            rgba(255, 255, 255, 0.10)
        );

    border-radius:
        var(
            --report-panel-radius,
            12px
        );
}

.public-report-good-faith input {
    accent-color:
        var(
            --report-accent,
            #fda4af
        );
}

.public-report-notice {
    color:
        var(
            --report-text-color,
            #c2c8d2
        );

    background:
        color-mix(
            in srgb,
            var(
                --report-accent,
                #fda4af
            ) 9%,
            transparent
        );

    border-color:
        color-mix(
            in srgb,
            var(
                --report-accent,
                #fda4af
            ) 22%,
            transparent
        );
}

.public-report-feedback {
    color:
        var(
            --report-text-color,
            #c2c8d2
        );
}

.public-report-feedback.is-error {
    color:
        var(
            --report-accent,
            #fda4af
        );
}

.public-report-feedback.is-success {
    color:
        var(
            --report-success-text,
            #86efac
        );
}

.public-report-overlay
.marketplace-capture-button {
    color:
        var(
            --report-primary-text,
            #23070d
        );

    background:
        var(
            --report-primary-bg,
            #fda4af
        );

    border-color:
        var(
            --report-primary-bg,
            #fda4af
        );

    border-radius:
        var(
            --report-button-radius,
            12px
        );
}

.public-report-overlay
.marketplace-capture-button:hover,
.public-report-overlay
.marketplace-capture-button:focus {
    color:
        var(
            --report-primary-text,
            #23070d
        );

    background:
        color-mix(
            in srgb,
            var(
                --report-primary-bg,
                #fda4af
            ) 78%,
            #ffffff
        );

    border-color:
        color-mix(
            in srgb,
            var(
                --report-primary-bg,
                #fda4af
            ) 78%,
            #ffffff
        );
}

.public-report-overlay
.marketplace-capture-later {
    color:
        var(
            --report-secondary-text,
            #c2c8d2
        );
}

.public-report-overlay
.marketplace-capture-later:hover,
.public-report-overlay
.marketplace-capture-later:focus {
    color:
        var(
            --report-title-color,
            #ffffff
        );
}

.public-report-success-icon {
    color:
        var(
            --report-success-icon-text,
            #052e16
        );

    background:
        var(
            --report-success-bg,
            #86efac
        );

    box-shadow:
        0 10px 30px
        color-mix(
            in srgb,
            var(
                --report-success-bg,
                #86efac
            ) 28%,
            transparent
        );
}

.public-report-protocol-box {
    background:
        color-mix(
            in srgb,
            var(
                --report-success-bg,
                #86efac
            ) 10%,
            transparent
        );

    border-color:
        color-mix(
            in srgb,
            var(
                --report-success-bg,
                #86efac
            ) 28%,
            transparent
        );

    border-radius:
        var(
            --report-panel-radius,
            12px
        );
}

.public-report-protocol-box strong {
    color:
        var(
            --report-success-text,
            #86efac
        );
}

/* PIX GENERATION LOADER */
.pix-code-card {
    position: relative;
}

.pix-generation-loader {
    box-sizing: border-box;
    display: flex;
    min-height: 138px;
    padding: 22px 18px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: var(--pix-text-color, var(--text, #fff));
    text-align: center;
}

.pix-generation-loader[hidden] {
    display: none !important;
}

.pix-generation-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(255, 255, 255, .22);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: pix-generation-spin .8s linear infinite;
}

.pix-generation-title {
    font-size: .96rem;
    font-weight: 800;
    line-height: 1.25;
}

.pix-generation-description {
    color: var(--pix-text-color, var(--text, #fff));
    font-size: .82rem;
    line-height: 1.4;
    opacity: .74;
}

.pix-code-card.is-generating {
    cursor: progress;
}

.pix-code-card.is-generating .pix-code-head,
.pix-code-card.is-generating .pix-code-scroll {
    display: none;
}

@keyframes pix-generation-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pix-generation-spinner {
        animation-duration: 1.8s;
    }
}

/* PIX EXPIRED RECOVERY */
.pix-expired-state {
    box-sizing: border-box;
    display: flex;
    min-height: 174px;
    padding: 24px 18px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: var(--pix-text-color, var(--text, #fff));
    text-align: center;
}

.pix-expired-state[hidden] {
    display: none !important;
}

.pix-expired-icon {
    display: block;
    font-size: 2rem;
    line-height: 1;
}

.pix-expired-title {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
}

.pix-expired-description {
    max-width: 330px;
    color: var(--pix-text-color, var(--text, #fff));
    font-size: .86rem;
    line-height: 1.45;
    opacity: .76;
}

.pix-renew-btn {
    appearance: none;
    width: min(100%, 320px);
    min-height: 48px;
    margin-top: 8px;
    padding: 12px 18px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 14px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font: inherit;
    font-size: .94rem;
    font-weight: 800;
    line-height: 1.2;
}

.pix-renew-btn:hover,
.pix-renew-btn:focus-visible {
    border-color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .2);
    outline: none;
}

.pix-renew-btn:disabled {
    cursor: default;
    opacity: .6;
}

.pix-code-card.is-expired {
    cursor: default;
    border-color: rgba(248, 113, 113, .58);
    background: rgba(69, 10, 10, .24);
}

.pix-code-card.is-expired .pix-generation-loader,
.pix-code-card.is-expired .pix-code-head,
.pix-code-card.is-expired .pix-code-scroll {
    display: none !important;
}

#btnVerifyPixPayment[hidden],
#btnReadPixQrCode[hidden] {
    display: none !important;
}

/* === PUBLIC BIO THEME CONTRACT CONSOLIDATED V4 ===
 * Paridade com o preview administrativo.
 */

/* CTA Meu Vip + Ver no Telegram = --btn-* */
#previewLinks .preview-btn--telegram.preview-btn--fixed,
#previewLinks .preview-btn--telegram[data-theme-scope="fixed"],
#btnOpenInTelegram,
#publicPlansSection .telegram-cta.preview-btn--fixed {
    color: var(--btn-text-color, #fff) !important;
    background: var(--btn-bg-rgba-preview, var(--btn-bg-color, #1b50b0)) !important;
    border: 1px solid var(--btn-border-color, rgba(255,255,255,.25)) !important;
    border-radius: var(--radius, 16px) !important;
    box-shadow: 0 8px 24px var(--home-button-shadow-rgba-preview, rgba(0,0,0,.25)) !important;
}
#previewLinks .preview-btn--telegram.preview-btn--fixed:hover,
#previewLinks .preview-btn--telegram.preview-btn--fixed:focus,
#btnOpenInTelegram:hover,
#btnOpenInTelegram:focus,
#publicPlansSection .telegram-cta.preview-btn--fixed:hover,
#publicPlansSection .telegram-cta.preview-btn--fixed:focus {
    color: var(--btn-text-color, #fff) !important;
    background: var(--btn-hover-color, var(--btn-bg-color, #1b50b0)) !important;
    border-color: var(--btn-border-color, rgba(255,255,255,.25)) !important;
}

/* Links customizados = Botões da página */
#previewLinks .preview-btn--custom,
#previewLinks .preview-btn[data-theme-scope="custom"] {
    color: var(--btn-text-color, #fff) !important;
    background: var(--btn-bg-rgba-preview, var(--btn-bg-color, #1b50b0)) !important;
    border-color: var(--btn-border-color, rgba(255,255,255,.25)) !important;
    border-radius: var(--radius, 16px) !important;
    box-shadow: 0 8px 24px var(--home-button-shadow-rgba-preview, rgba(0,0,0,.25)) !important;
}
#previewLinks .preview-btn--custom:hover,
#previewLinks .preview-btn--custom:focus,
#previewLinks .preview-btn[data-theme-scope="custom"]:hover,
#previewLinks .preview-btn[data-theme-scope="custom"]:focus {
    color: var(--btn-text-color, #fff) !important;
    background: var(--btn-hover-color, var(--btn-bg-color, #1b50b0)) !important;
}

/* Controles internos genéricos */
.public-language-option,
#btnBackHome.btn.btn-outline-light.mt-3,
#btnBackHome.btn.btn-outline-light,
#btnBackFromPlans,
#btnBackFromCardPayment,
.public-card-back,
.account-login-back,
.public-pix-qr-back,
.pix-qr-back,
.bio-age-notice {
    color: var(--internal-control-text, var(--text, #fff)) !important;
    background: var(--internal-control-bg, rgba(15,23,42,.86)) !important;
    border-color: var(--internal-control-border, rgba(255,255,255,.30)) !important;
    border-radius: var(--radius, 16px) !important;
}
.public-language-option:hover,
.public-language-option:focus,
#btnBackHome.btn.btn-outline-light.mt-3:hover,
#btnBackHome.btn.btn-outline-light.mt-3:focus,
#btnBackHome.btn.btn-outline-light:hover,
#btnBackHome.btn.btn-outline-light:focus,
#btnBackFromPlans:hover,
#btnBackFromPlans:focus,
#btnBackFromCardPayment:hover,
#btnBackFromCardPayment:focus,
.public-card-back:hover,
.public-card-back:focus,
.account-login-back:hover,
.account-login-back:focus-visible,
.public-pix-qr-back:hover,
.public-pix-qr-back:focus,
.pix-qr-back:hover,
.pix-qr-back:focus {
    color: var(--internal-control-text, var(--text, #fff)) !important;
    background: var(--internal-control-soft-hover-bg, rgba(15,23,42,.42)) !important;
    border-color: var(--internal-control-border, rgba(255,255,255,.30)) !important;
}

/* Login continua circular */
.bio-account-login-trigger,
.bio-account-login-trigger:hover,
.bio-account-login-trigger:focus-visible,
.bio-account-login-trigger.is-active,
.bio-account-login-trigger.is-authenticated {
    color: var(--internal-control-text, var(--text, #fff)) !important;
    background: var(--internal-control-bg, rgba(15,23,42,.86)) !important;
    border-color: var(--internal-control-border, rgba(255,255,255,.30)) !important;
}

/* Texto informativo de idioma = texto dos controles internos */
#publicLanguageSwitcher .public-language-kicker,
#publicLanguageSwitcher .public-language-current,
#publicLanguageSwitcher .public-language-current-value {
    color: var(--internal-control-text, var(--text, #fff)) !important;
}

/* Tela de escolha do pagamento: respeita seu card específico */
#sectionPaymentChoice .plans-header {
    color: var(--payment-choice-title-color, var(--text, #fff)) !important;
}
#sectionPaymentChoice #btnChoosePix,
#sectionPaymentChoice #btnChooseCard,
#sectionPaymentChoice #btnPaymentChoiceSupport,
#sectionPaymentChoice #btnPaymentChoiceHome,
#sectionPaymentChoice #btnBackFromPaymentChoice,
#sectionPaymentChoice .payment-choice-row > .btn {
    color: var(--payment-choice-text-color, #fff) !important;
    background: var(--payment-choice-bg-rgba-preview, rgba(27,80,176,.12)) !important;
    border: 1px solid var(--payment-choice-border-color, rgba(255,255,255,.22)) !important;
    border-radius: var(--radius, 16px) !important;
    font-weight: 700 !important;
    backdrop-filter: blur(var(--payment-choice-blur, 0px)) !important;
    -webkit-backdrop-filter: blur(var(--payment-choice-blur, 0px)) !important;
}
#sectionPaymentChoice #btnChoosePix:hover,
#sectionPaymentChoice #btnChoosePix:focus,
#sectionPaymentChoice #btnChooseCard:hover,
#sectionPaymentChoice #btnChooseCard:focus,
#sectionPaymentChoice #btnPaymentChoiceSupport:hover,
#sectionPaymentChoice #btnPaymentChoiceSupport:focus,
#sectionPaymentChoice #btnPaymentChoiceHome:hover,
#sectionPaymentChoice #btnPaymentChoiceHome:focus,
#sectionPaymentChoice #btnBackFromPaymentChoice:hover,
#sectionPaymentChoice #btnBackFromPaymentChoice:focus,
#sectionPaymentChoice .payment-choice-row > .btn:hover,
#sectionPaymentChoice .payment-choice-row > .btn:focus {
    color: var(--payment-choice-text-color, #fff) !important;
    background: var(--payment-choice-hover-color, #2970ff) !important;
    border-color: var(--payment-choice-border-color, rgba(255,255,255,.22)) !important;
}

/* PIX: ações que não têm card próprio usam controles internos */
#sectionPixPayment #btnVerifyPixPayment,
#sectionPixPayment #btnReadPixQrCode,
#sectionPixPayment #btnCopyPixCode,
#sectionPixPayment #btnRenewPix {
    color: var(--internal-control-text, var(--text, #fff)) !important;
    background: var(--internal-control-bg, rgba(15,23,42,.86)) !important;
    border: 1px solid var(--internal-control-border, rgba(255,255,255,.30)) !important;
    border-radius: var(--radius, 16px) !important;
    font-weight: 700 !important;
}
#sectionPixPayment #btnBackFromPixPayment.btn.btn-outline-light {
    color: var(--internal-control-text, var(--text, #fff)) !important;
    background: var(--internal-control-bg, rgba(15,23,42,.86)) !important;
    border: 1px solid var(--internal-control-border, rgba(255,255,255,.30)) !important;
    border-radius: var(--radius, 16px) !important;
    font-weight: 700 !important;
}
#sectionPixPayment #btnVerifyPixPayment:hover,
#sectionPixPayment #btnVerifyPixPayment:focus,
#sectionPixPayment #btnReadPixQrCode:hover,
#sectionPixPayment #btnReadPixQrCode:focus,
#sectionPixPayment #btnCopyPixCode:hover,
#sectionPixPayment #btnCopyPixCode:focus,
#sectionPixPayment #btnRenewPix:hover,
#sectionPixPayment #btnRenewPix:focus,
#sectionPixPayment #btnBackFromPixPayment.btn.btn-outline-light:hover,
#sectionPixPayment #btnBackFromPixPayment.btn.btn-outline-light:focus {
    color: var(--internal-control-text, var(--text, #fff)) !important;
    background: var(--internal-control-soft-hover-bg, rgba(15,23,42,.42)) !important;
    border-color: var(--internal-control-border, rgba(255,255,255,.30)) !important;
}

/* Barra fechada de país: paridade total com --countrybar-* */
.plan-country-bar {
    color: var(--countrybar-text-color, #fff) !important;
    background: var(--countrybar-bg-rgba-preview, rgba(27,80,176,.18)) !important;
    border: 1px solid var(--countrybar-border-color, rgba(255,255,255,.22)) !important;
    border-radius: var(--countrybar-radius, 16px) !important;
    backdrop-filter: blur(var(--countrybar-blur, 0px)) !important;
    -webkit-backdrop-filter: blur(var(--countrybar-blur, 0px)) !important;
}
.plan-country-name,
.plan-country-currency,
.plan-country-meta,
.plan-country-change {
    color: var(--countrybar-text-color, #fff) !important;
}
.plan-country-change {
    border-color: var(--countrybar-border-color, rgba(255,255,255,.22)) !important;
    border-radius: var(--countrybar-radius, 16px) !important;
}

/* Overlay de países: paridade total com --countrypicker-* */
.plan-country-picker {
    color: var(--countrypicker-text-color, #fff) !important;
    background: var(--countrypicker-bg-rgba-preview, rgba(11,18,32,.98)) !important;
    border: 1px solid var(--countrypicker-border-color, rgba(255,255,255,.12)) !important;
    border-radius: var(--countrypicker-radius, 16px) !important;
    backdrop-filter: blur(var(--countrypicker-blur, 16px)) !important;
    -webkit-backdrop-filter: blur(var(--countrypicker-blur, 16px)) !important;
}
.plan-country-picker-title,
.plan-country-picker-close,
.plan-country-item-name,
.plan-country-item-currency,
.plan-country-item-meta,
.plan-country-item-check {
    color: var(--countrypicker-text-color, #fff) !important;
}
.plan-country-picker-search-input {
    color: var(--countrypicker-text-color, #fff) !important;
    background: var(--countrypicker-search-bg-color, #1f2937) !important;
    border-color: var(--countrypicker-border-color, rgba(255,255,255,.12)) !important;
    border-radius: var(--radius, 14px) !important;
}
.plan-country-picker-search-input::placeholder {
    color: var(--countrypicker-text-color, #fff) !important;
    opacity: .55;
}
.plan-country-item {
    color: var(--countrypicker-text-color, #fff) !important;
    background: transparent !important;
    border-color: var(--countrypicker-border-color, rgba(255,255,255,.12)) !important;
    border-radius: var(--radius, 14px) !important;
    padding: var(--countrypicker-item-py, 10px) var(--countrypicker-item-px, 12px) !important;
}
.plan-country-picker-list {
    gap: var(--countrypicker-item-gap, 0px) !important;
}
.plan-country-item:hover,
.plan-country-item:focus,
.plan-country-item:focus-visible,
.plan-country-item.is-active {
    background: var(--countrypicker-hover-color, rgba(255,255,255,.08)) !important;
    border-color: var(--countrypicker-border-color, rgba(255,255,255,.22)) !important;
}

/* Cartão: botão Voltar usa controles internos e o raio global */
#sectionCardPayment .public-card-back,
#btnBackFromCardPayment {
    color: var(--internal-control-text, var(--text, #fff)) !important;
    background: var(--internal-control-soft-bg, rgba(15,23,42,.28)) !important;
    border: 1px solid var(--internal-control-border, rgba(255,255,255,.30)) !important;
    border-radius: var(--radius, 16px) !important;
}
#sectionCardPayment .public-card-status:not(.is-error):not(.is-success) {
    border-color: var(--card-surface-border, rgba(255,255,255,.20)) !important;
}

/* Footer completo = controle próprio do footer */
.site-footer,
.site-footer__text,
.site-footer__links,
.site-footer__links a,
.site-footer__links > span {
    color: var(--footer-text-color, var(--text, #fff)) !important;
}
.site-footer__links a:hover,
.site-footer__links a:focus,
.site-footer__links a:focus-visible {
    color: var(--footer-text-color, var(--text, #fff)) !important;
    opacity: 1;
}

/* Loading inicial = controles internos, sem azul fixo */
.public-page-loading {
    color: var(--internal-control-text, var(--text, #fff)) !important;
    background: var(--internal-control-color, #0f172a) !important;
}
.public-page-loading-spinner {
    color: var(--internal-control-text, var(--text, #fff));
    border-color: color-mix(in srgb, currentColor 24%, transparent) !important;
    border-top-color: currentColor !important;
}

/* =========================================================
   PUBLIC PIX QR — PRESO À MOLDURA DESKTOP DA BIO
   Não altera a largura global do site.
   ========================================================= */

.public-pix-qr-overlay {
    width: min(100%, 370px);
}


/*
 * PLAN TOOLTIP VIEWPORT CONTAINMENT V1
 *
 * Mantem o tooltip dentro do grid mobile de duas colunas.
 */
.plans-grid .plan-card--preview:nth-child(odd) .plan-tooltip {
    left: 0;
    right: auto;
    transform: translateY(6px);
}

.plans-grid .plan-card--preview:nth-child(even) .plan-tooltip {
    left: auto;
    right: 0;
    transform: translateY(6px);
}

.plans-grid .plan-card--preview:nth-child(odd) .plan-tooltip.is-open,
.plans-grid .plan-card--preview:nth-child(even) .plan-tooltip.is-open {
    transform: translateY(0);
}

.plans-grid .plan-card--preview .plan-tooltip::before {
    left: 50%;
    right: auto;
    transform: translateX(-50%) rotate(45deg);
}

/*
 * CARD SELECTED PLAN INNER ALIGNMENT V1
 */
#sectionCardPayment .card-selected-plan-summary {
    width: auto;
    max-width: none;
    box-sizing: border-box;
    margin-left: 16px;
    margin-right: 16px;
}

@media (max-width: 460px) {
    #sectionCardPayment .card-selected-plan-summary {
        margin-left: 14px;
        margin-right: 14px;
    }
}

/*
 * CARD STATUS THEME V1
 *
 * O conteúdo continua sendo controlado pelo checkout.
 * Apenas a aparência vem do Tema & Layout.
 */
#sectionCardPayment .public-card-status {
    border-color:
        var(
            --card-status-border,
            var(--card-surface-border, rgba(255, 255, 255, 0.20))
        );
    border-radius:
        var(
            --card-status-radius,
            var(--card-input-radius, var(--radius, 16px))
        );
    background:
        var(
            --card-status-bg,
            var(--card-surface-bg, rgba(15, 23, 42, 0.30))
        );
    color:
        var(
            --card-status-text,
            var(--card-text-color, var(--text, #ffffff))
        );
    backdrop-filter:
        blur(var(--card-status-blur, 12px));
    -webkit-backdrop-filter:
        blur(var(--card-status-blur, 12px));
}

/*
 * Sem borda vale para o estado neutro.
 * Erro/sucesso continuam com borda semântica.
 */
#sectionCardPayment
.public-card-status:not(.is-error):not(.is-success) {
    border-color:
        var(
            --card-status-border,
            var(--card-surface-border, rgba(255,255,255,.20))
        ) !important;
}

/*
 * CARD STATUS INNER ALIGNMENT V1
 */
#sectionCardPayment .public-card-status {
    width: auto;
    max-width: none;
    box-sizing: border-box;
    margin-left: 16px;
    margin-right: 16px;
}

@media (max-width: 460px) {
    #sectionCardPayment .public-card-status {
        margin-left: 14px;
        margin-right: 14px;
    }
}

/*
 * FOOTER INSTITUCIONAL — ajuste fino da área útil
 *
 * Mantém o flex/wrap original, mas recupera 8px de cada lado
 * para evitar que os links quebrem prematuramente.
 */
.site-footer__links {
    width: calc(100% + 16px);
    max-width: none;
    margin-left: -8px;
    margin-right: -8px;
}