/* ==========================================================================
   BOTPULSE — WALLET PAYMENT EXPERIENCE V4.0 PIXEL PERFECT (PIX + CARTÃO)
   Fintech SaaS Neon • Compact • Zero Scroll • Real Mercado Pago Integration
   Paleta:
     Bg: #070D20 | Modal: #0A1430 | Superfícies: #101D3D | Bordas: #1E3765
     Roxo Neon: #B000FF | Violeta: #7338FF | Azul: #1457FF | Ciano: #00D5FF
     Verde: #00E9A0 | Vermelho: #FF235F
     Texto 1: #F7FAFF | Texto 2: #A6B8DC
     Gradiente: linear-gradient(105deg, #D000F5 0%, #7424FF 45%, #00BFFF 100%)
   ========================================================================== */

:root {
    --bp-v4-bg-main: #070D20;
    --bp-v4-bg-modal: #0A1430;
    --bp-v4-surface: #101D3D;
    --bp-v4-surface-hover: #152752;
    --bp-v4-border: #1E3765;
    --bp-v4-border-glow: rgba(176, 0, 255, 0.4);
    --bp-v4-purple: #B000FF;
    --bp-v4-violet: #7338FF;
    --bp-v4-blue: #1457FF;
    --bp-v4-cyan: #00D5FF;
    --bp-v4-success: #00E9A0;
    --bp-v4-error: #FF235F;
    --bp-v4-text-1: #F7FAFF;
    --bp-v4-text-2: #A6B8DC;
    --bp-v4-text-muted: #647B9E;
    --bp-v4-gradient: linear-gradient(105deg, #D000F5 0%, #7424FF 45%, #00BFFF 100%);
    --bp-v4-gradient-hover: linear-gradient(105deg, #E035FF 0%, #8742FF 45%, #26CCFF 100%);
    --bp-v4-rad-modal: 18px;
    --bp-v4-rad-input: 10px;
    --bp-v4-rad-btn: 11px;

    /* Compatibilidade reversa com variáveis v3 */
    --bp-v3-bg-modal: var(--bp-v4-bg-modal);
    --bp-v3-surface: var(--bp-v4-surface);
    --bp-v3-surface-hover: var(--bp-v4-surface-hover);
    --bp-v3-border: var(--bp-v4-border);
    --bp-v3-border-focus: var(--bp-v4-violet);
    --bp-v3-violet: var(--bp-v4-violet);
    --bp-v3-blue: var(--bp-v4-blue);
    --bp-v3-cyan: var(--bp-v4-cyan);
    --bp-v3-success: var(--bp-v4-success);
    --bp-v3-error: var(--bp-v4-error);
    --bp-v3-text-1: var(--bp-v4-text-1);
    --bp-v3-text-2: var(--bp-v4-text-2);
    --bp-v3-text-muted: var(--bp-v4-text-muted);
    --bp-v3-gradient: var(--bp-v4-gradient);
    --bp-v3-gradient-hover: var(--bp-v4-gradient-hover);
    --bp-v3-rad-modal: var(--bp-v4-rad-modal);
    --bp-v3-rad-input: var(--bp-v4-rad-input);
    --bp-v3-rad-btn: var(--bp-v4-rad-btn);
}

/* 1. Backdrop */
.bp-v3-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: rgba(5, 9, 23, 0.86) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms cubic-bezier(0.2, 0.9, 0.3, 1) !important;
}

.bp-v3-backdrop.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.bp-v3-backdrop[hidden] {
    display: none !important;
}

/* 2. Modal Container - Dimensões Compactas V4.0 (380px Desktop, Zero Scroll) */
.bp-v3-modal {
    position: relative !important;
    width: 100% !important;
    max-width: 395px !important;
    max-height: calc(100vh - 32px) !important;
    background: var(--bp-v4-bg-modal) !important;
    border: 1px solid var(--bp-v4-border) !important;
    border-radius: var(--bp-v4-rad-modal) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.88), 0 0 0 1px rgba(115, 56, 255, 0.22) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transform: translateY(8px) scale(0.98);
    transition: transform 200ms cubic-bezier(0.2, 0.9, 0.3, 1) !important;
}

.bp-v3-backdrop.is-open .bp-v3-modal {
    transform: translateY(0) scale(1) !important;
}

/* 3. Cabeçalho Compacto */
.bp-v3-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--bp-v4-border) !important;
    background: rgba(16, 29, 61, 0.45) !important;
    flex-shrink: 0 !important;
}

.bp-v3-head__brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.bp-v3-head__icon-wrap {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    background: var(--bp-v4-surface) !important;
    border: 1px solid var(--bp-v4-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.bp-v3-head__icon-wrap img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
}

.bp-v3-head__titles {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.bp-v3-eyebrow {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--bp-v4-cyan) !important;
    margin-bottom: 1px !important;
}

.bp-v3-head__title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--bp-v4-text-1) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.bp-v3-head__actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.bp-v3-icon-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
    border: 1px solid var(--bp-v4-border) !important;
    background: var(--bp-v4-surface) !important;
    color: var(--bp-v4-text-2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 140ms ease !important;
    padding: 0 !important;
}

.bp-v3-icon-btn:hover {
    background: var(--bp-v4-surface-hover) !important;
    color: var(--bp-v4-text-1) !important;
    border-color: rgba(115, 56, 255, 0.4) !important;
}

/* 4. Corpo do Modal - Sem scrollbars indesejadas */
.bp-v3-body {
    padding: 13px 16px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
}

.bp-v3-body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.bp-v3-stage {
    display: none;
    flex-direction: column;
    gap: 10px;
    animation: bpV4FadeIn 180ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.bp-v3-stage.is-active {
    display: flex !important;
}

@keyframes bpV4FadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 5. Barra de Saldo Atual */
.bp-v3-balance-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    border-radius: 9px !important;
    background: var(--bp-v4-surface) !important;
    border: 1px solid var(--bp-v4-border) !important;
}

.bp-v3-balance-bar__label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--bp-v4-text-2) !important;
}

.bp-v3-balance-bar__amount {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--bp-v4-cyan) !important;
    letter-spacing: -0.01em !important;
}

/* 6. Grade de Valores Sugeridos Compacta */
.bp-v3-section-title {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: var(--bp-v4-text-2) !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.bp-v3-presets {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
}

.bp-v3-preset-btn {
    height: 36px !important;
    border-radius: 9px !important;
    border: 1px solid var(--bp-v4-border) !important;
    background: var(--bp-v4-surface) !important;
    color: var(--bp-v4-text-1) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 140ms ease !important;
}

.bp-v3-preset-btn:hover {
    background: var(--bp-v4-surface-hover) !important;
    border-color: rgba(115, 56, 255, 0.4) !important;
}

.bp-v3-preset-btn.is-selected {
    background: rgba(115, 56, 255, 0.18) !important;
    border-color: var(--bp-v4-violet) !important;
    box-shadow: 0 0 12px rgba(115, 56, 255, 0.35), inset 0 0 0 1px var(--bp-v4-violet) !important;
    color: #FFFFFF !important;
}

/* 7. Input de Valor Personalizado */
.bp-v3-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.bp-v3-field__label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--bp-v4-text-2) !important;
}

.bp-v3-input-box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: 40px !important;
    padding: 0 12px !important;
    border-radius: var(--bp-v4-rad-input) !important;
    background: #060B1C !important;
    border: 1px solid var(--bp-v4-border) !important;
    transition: border-color 140ms ease, box-shadow 140ms ease !important;
}

.bp-v3-input-box:focus-within {
    border-color: var(--bp-v4-violet) !important;
    box-shadow: 0 0 0 2px rgba(115, 56, 255, 0.25) !important;
}

.bp-v3-input-box__prefix {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--bp-v4-text-muted) !important;
    margin-right: 6px !important;
    user-select: none !important;
}

.bp-v3-input-box input {
    flex: 1 1 auto !important;
    width: 100% !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    color: var(--bp-v4-text-1) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
}

.bp-v3-input-box input::placeholder {
    color: #3B4E72 !important;
    font-weight: 500 !important;
}

/* 8. Métodos de Pagamento (Pix vs Cartão) - Compacto & Proporcional */
.bp-v3-methods-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

.bp-v3-method-card {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
    border-radius: var(--bp-v4-rad-input) !important;
    background: var(--bp-v4-surface) !important;
    border: 1px solid var(--bp-v4-border) !important;
    cursor: pointer !important;
    transition: all 160ms ease !important;
    text-align: left !important;
    user-select: none !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
}

.bp-v3-method-card:hover {
    background: var(--bp-v4-surface-hover) !important;
    border-color: rgba(115, 56, 255, 0.45) !important;
}

.bp-v3-method-card.is-selected {
    border-color: var(--bp-v4-violet) !important;
    background: linear-gradient(135deg, rgba(115, 56, 255, 0.16) 0%, rgba(0, 213, 255, 0.08) 100%) !important;
    box-shadow: 0 4px 16px rgba(115, 56, 255, 0.25), inset 0 0 0 1px var(--bp-v4-violet) !important;
}

.bp-v3-method-card__left {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
}

.bp-v3-method-card__icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

.bp-v3-method-card__icon--pix {
    background: rgba(50, 188, 173, 0.12) !important;
    border: 1px solid rgba(50, 188, 173, 0.28) !important;
}

.bp-v3-method-card__icon--pix img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
}

.bp-v3-method-card__icon--card {
    background: rgba(115, 56, 255, 0.14) !important;
    border: 1px solid rgba(115, 56, 255, 0.25) !important;
}

.bp-v3-method-card__icon--card img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
}

.bp-v3-method-card__meta {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.bp-v3-method-card__meta strong {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--bp-v4-text-1) !important;
    line-height: 1.2 !important;
}

.bp-v3-method-card__meta small {
    font-size: 10px !important;
    color: var(--bp-v4-text-2) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.bp-v3-method-card__radio {
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    border: 1.6px solid var(--bp-v4-border) !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 140ms ease !important;
}

.bp-v3-method-card.is-selected .bp-v3-method-card__radio {
    border-color: var(--bp-v4-cyan) !important;
    background: var(--bp-v4-cyan) !important;
}

.bp-v3-method-card__radio::after {
    content: '' !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: var(--bp-v4-bg-modal) !important;
    display: none !important;
}

.bp-v3-method-card.is-selected .bp-v3-method-card__radio::after {
    display: block !important;
}

/* 9. Botão Principal Gradiente V4.0 */
.bp-v3-btn-gradient {
    position: relative !important;
    width: 100% !important;
    height: 44px !important;
    border-radius: var(--bp-v4-rad-btn) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: var(--bp-v4-gradient) !important;
    color: #FFFFFF !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    cursor: pointer !important;
    transition: all 160ms ease !important;
    box-shadow: 0 6px 20px rgba(115, 56, 255, 0.35) !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

.bp-v3-btn-gradient:hover:not(:disabled) {
    background: var(--bp-v4-gradient-hover) !important;
    box-shadow: 0 8px 24px rgba(115, 56, 255, 0.48) !important;
    transform: translateY(-1px) !important;
}

.bp-v3-btn-gradient:active:not(:disabled) {
    transform: scale(0.99) !important;
}

.bp-v3-btn-gradient:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.bp-v3-btn-gradient .bp-btn-spinner {
    display: none;
}

.bp-v3-btn-gradient.is-loading .bp-btn-spinner {
    display: inline-flex !important;
}

.bp-v3-btn-secondary {
    width: 100% !important;
    height: 40px !important;
    border-radius: var(--bp-v4-rad-btn) !important;
    border: 1px solid var(--bp-v4-border) !important;
    background: var(--bp-v4-surface) !important;
    color: var(--bp-v4-text-1) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 140ms ease !important;
}

.bp-v3-btn-secondary:hover {
    background: var(--bp-v4-surface-hover) !important;
    border-color: rgba(115, 56, 255, 0.4) !important;
}

/* 10. Botão Voltar */
.bp-v3-back-btn {
    align-self: flex-start !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--bp-v4-text-2) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: color 140ms ease !important;
}

.bp-v3-back-btn:hover {
    color: var(--bp-v4-cyan) !important;
}

/* 11. Tela Pix Compacta */
.bp-v3-pix-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: center !important;
}

.bp-v3-pix-status {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    background: var(--bp-v4-surface) !important;
    border: 1px solid var(--bp-v4-border) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.bp-v3-pulse-rings {
    position: relative !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.bp-v3-ring-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    animation: bpV4Spin 2.4s linear infinite !important;
}

.bp-v3-ring-svg--reverse {
    animation: bpV4SpinRev 3.2s linear infinite !important;
}

@keyframes bpV4Spin {
    to { transform: rotate(360deg); }
}

@keyframes bpV4SpinRev {
    to { transform: rotate(-360deg); }
}

.bp-v3-pulse-rings__icon {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.bp-v3-pulse-rings__icon img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
}

.bp-v3-qr-card {
    position: relative !important;
    padding: 10px !important;
    background: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.bp-v3-qr-card img {
    width: 145px !important;
    height: 145px !important;
    object-fit: contain !important;
    display: block !important;
}

.bp-v3-pix-amount-badge {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--bp-v4-text-1) !important;
}

.bp-v3-pix-timer {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--bp-v4-cyan) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.bp-v3-copy-field {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    text-align: left !important;
}

.bp-v3-copy-field textarea {
    width: 100% !important;
    height: 48px !important;
    padding: 6px 9px !important;
    border-radius: 8px !important;
    background: #060B1C !important;
    border: 1px solid var(--bp-v4-border) !important;
    color: var(--bp-v4-text-2) !important;
    font-size: 10.5px !important;
    font-family: monospace !important;
    resize: none !important;
    box-sizing: border-box !important;
    outline: none !important;
}

/* 12. Cartão de Crédito Preview & Form */
.bp-v3-card-preview {
    position: relative !important;
    width: 100% !important;
    height: 115px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #152247 0%, #0c152f 100%) !important;
    border: 1px solid rgba(115, 56, 255, 0.35) !important;
    padding: 11px 13px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden !important;
}

.bp-v3-card-preview__shine {
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: radial-gradient(circle, rgba(115, 56, 255, 0.15) 0%, transparent 60%) !important;
    pointer-events: none !important;
}

.bp-v3-card-preview__top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 2 !important;
}

.bp-v3-card-chip {
    width: 28px !important;
    height: 20px !important;
    border-radius: 4px !important;
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
    border: 1px solid #fef08a !important;
}

.bp-v3-card-brand-badge {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.bp-v3-card-preview__number {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: var(--bp-v4-text-1) !important;
    font-family: monospace !important;
    z-index: 2 !important;
}

.bp-v3-card-preview__foot {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    color: var(--bp-v4-text-2) !important;
    text-transform: uppercase !important;
    z-index: 2 !important;
}

.bp-v3-card-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.bp-v3-form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

/* 13. Telas de Feedback (Processamento, Sucesso, Recusa) */
.bp-v3-feedback {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 6px 0 2px !important;
    gap: 10px !important;
}

/* 13.1 Tela de Sucesso Premium V4.1 (Aprovação Financeira Pixel Perfect) */
.bp-v4-success-view {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 4px 0 2px !important;
    gap: 10px !important;
}

.bp-v4-success-hero {
    position: relative !important;
    width: 140px !important;
    height: 140px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
}

.bp-v4-success-svg {
    width: 140px !important;
    height: 140px !important;
    overflow: visible !important;
    display: block !important;
}

/* Animação do Anel Neon Principal */
.bp-v3-stage[data-bp-stage="success"].is-active .bp-v4-ring-neon {
    transform-origin: 80px 80px;
    animation: bpRingScale 450ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Animação do Segundo Anel Sutil Luminous */
.bp-v3-stage[data-bp-stage="success"].is-active .bp-v4-ring-subtle {
    transform-origin: 80px 80px;
    animation: bpSubtleSpin 20s linear infinite, bpRingScale 480ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes bpSubtleSpin {
    to { transform: rotate(360deg); }
}

@keyframes bpRingScale {
    0% { transform: scale(0.65); opacity: 0; }
    65% { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Animação do Círculo Esmeralda Central */
.bp-v3-stage[data-bp-stage="success"].is-active .bp-v4-core-group {
    transform-origin: 80px 80px;
    animation: bpCorePop 420ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 120ms both !important;
}

@keyframes bpCorePop {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Animação do Checkmark desenhado progressivamente */
.bp-v3-stage[data-bp-stage="success"].is-active .bp-v4-checkmark {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: bpDrawCheck 380ms ease-out 300ms forwards !important;
}

@keyframes bpDrawCheck {
    to {
        stroke-dashoffset: 0;
    }
}

/* Animação das Partículas espalhando-se */
.bp-v3-stage[data-bp-stage="success"].is-active .bp-part {
    transform-origin: 80px 80px;
    animation: bpParticleScatter 520ms cubic-bezier(0.16, 1, 0.3, 1) 280ms both !important;
}

@keyframes bpParticleScatter {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.15);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.bp-v4-success-titles {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    text-align: center !important;
    max-width: 330px !important;
    margin: 0 auto !important;
}

.bp-v3-stage[data-bp-stage="success"].is-active .bp-v4-success-titles {
    animation: bpSuccessFadeUp 360ms cubic-bezier(0.16, 1, 0.3, 1) 360ms both !important;
}

.bp-v4-success-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--bp-v4-text-1) !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
}

.bp-v4-success-sub {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    color: var(--bp-v4-text-2) !important;
    margin: 0 !important;
    text-align: center !important;
}

.bp-v3-stage[data-bp-stage="success"].is-active .bp-v4-success-summary {
    animation: bpSuccessFadeUp 360ms cubic-bezier(0.16, 1, 0.3, 1) 480ms both !important;
}

.bp-v3-stage[data-bp-stage="success"].is-active .bp-v4-success-btn {
    animation: bpSuccessFadeUp 360ms cubic-bezier(0.16, 1, 0.3, 1) 580ms both !important;
}

@keyframes bpSuccessFadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bp-v3-feedback__icon-wrap {
    position: relative !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 2px !important;
}

.bp-v3-feedback__icon-wrap img {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
}

.bp-v3-feedback__icon-wrap--success {
    box-shadow: 0 0 24px rgba(0, 233, 160, 0.4) !important;
    animation: bpV4Pop 360ms cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards !important;
}

.bp-v3-feedback__icon-wrap--error {
    box-shadow: 0 0 24px rgba(255, 35, 95, 0.4) !important;
    animation: bpV4Shake 360ms ease forwards !important;
}

@keyframes bpV4Pop {
    0% { transform: scale(0.6); opacity: 0; }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes bpV4Shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

.bp-v3-feedback__title {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--bp-v4-text-1) !important;
    margin: 0 !important;
}

.bp-v3-feedback__sub {
    font-size: 11.5px !important;
    color: var(--bp-v4-text-2) !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

.bp-v3-summary-card {
    width: 100% !important;
    border-radius: var(--bp-v4-rad-input) !important;
    background: var(--bp-v4-surface) !important;
    border: 1px solid var(--bp-v4-border) !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    text-align: left !important;
}

.bp-v3-summary-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 11.5px !important;
}

.bp-v3-summary-row span {
    color: var(--bp-v4-text-2) !important;
}

.bp-v3-summary-row strong {
    color: var(--bp-v4-text-1) !important;
}

.bp-v3-summary-row--highlight strong {
    color: var(--bp-v4-success) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* 14. Selo de Segurança Integrado */
.bp-v3-security-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    background: rgba(0, 213, 255, 0.05) !important;
    border: 1px solid rgba(0, 213, 255, 0.14) !important;
    color: var(--bp-v4-text-2) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    margin-top: 2px !important;
}

.bp-v3-security-badge img {
    width: 13px !important;
    height: 13px !important;
    object-fit: contain !important;
}

/* 15. Rodapé do Modal */
.bp-v3-foot {
    padding: 10px 16px !important;
    border-top: 1px solid var(--bp-v4-border) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    background: rgba(7, 13, 32, 0.6) !important;
    flex-shrink: 0 !important;
}

.bp-v3-foot a {
    text-align: center !important;
    font-size: 11.5px !important;
    color: var(--bp-v4-text-2) !important;
    text-decoration: none !important;
    transition: color 140ms ease !important;
}

.bp-v3-foot a:hover {
    color: var(--bp-v4-cyan) !important;
}

/* 16. Responsividade */
@media (max-width: 480px) {
    .bp-v3-modal {
        max-width: calc(100vw - 20px) !important;
        border-radius: 16px !important;
    }

    .bp-v3-head,
    .bp-v3-body,
    .bp-v3-foot {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .bp-v3-presets {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .bp-v3-methods-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}