/* ================================================================
   Parcelamento Pro – Frontend CSS v2.2
   Usa !important nos elementos críticos para resistir ao tema
   ================================================================ */

/* ── CSS Variables (definidas globalmente no :root também) ───── */
:root {
    --pp-price-color:    #e63946;
    --pp-price-size:     36px;
    --pp-price-weight:   700;
    --pp-price-family:   inherit;
    --pp-cents-size:     20px;
    --pp-cents-weight:   700;
    --pp-prefix-color:   #e63946;
    --pp-prefix-size:    16px;
    --pp-prefix-weight:  400;
    --pp-summary-color:  #444;
    --pp-summary-size:   14px;
    --pp-summary-weight: 400;
    --pp-summary-family: inherit;
    --pp-summary-hl:     #e63946;
    --pp-summary-free:   #059669;
    --pp-icon-color:     #666;
    --pp-table-bg:       #fff;
    --pp-table-border:   #e5e7eb;
    --pp-table-alt:      #f9fafb;
    --pp-table-text:     #374151;
    --pp-table-free:     #059669;
    --pp-table-interest: #dc2626;
    --pp-table-size:     13px;
    --pp-table-family:   inherit;
    --pp-table-pad:      9px;
    --pp-table-radius:   8px;
    --pp-hl-bg:          #e63946;
    --pp-hl-text:        #fff;
}

/* ════════════════════════════════════════════════════════════════
   WIDGET DE PREÇO
   ════════════════════════════════════════════════════════════════ */
.parcelamento-pro-widget {
    font-family: var(--pp-price-family) !important;
    display: inline-block !important;
    max-width: 420px;
    width: 100%;
    line-height: normal !important;
    box-sizing: border-box !important;
}

.parcelamento-pro-widget .pp-price-row {
    display:     flex !important;
    align-items: baseline !important;
    gap:         3px !important;
    margin-bottom: 6px !important;
    line-height: 1 !important;
}

.parcelamento-pro-widget .pp-prefix {
    color:       var(--pp-prefix-color) !important;
    font-size:   var(--pp-prefix-size) !important;
    font-weight: var(--pp-prefix-weight) !important;
    line-height: 1 !important;
    font-family: inherit !important;
}
.parcelamento-pro-widget .pp-prefix-top    { align-self: flex-start !important; margin-top: 4px !important; }
.parcelamento-pro-widget .pp-prefix-middle { align-self: center !important; }
.parcelamento-pro-widget .pp-prefix-bottom { align-self: flex-end !important; }

.parcelamento-pro-widget .pp-price {
    color:       var(--pp-price-color) !important;
    font-size:   var(--pp-price-size) !important;
    font-weight: var(--pp-price-weight) !important;
    font-family: var(--pp-price-family) !important;
    line-height: 1 !important;
    display:     flex !important;
    align-items: baseline !important;
}
.parcelamento-pro-widget .pp-price-int   { letter-spacing: -0.5px !important; }
.parcelamento-pro-widget .pp-price-comma { font-size: var(--pp-cents-size) !important; font-weight: var(--pp-cents-weight) !important; }
.parcelamento-pro-widget .pp-price-cents { font-size: var(--pp-cents-size) !important; font-weight: var(--pp-cents-weight) !important; }
.parcelamento-pro-widget .pp-cents-sup   { vertical-align: super !important; line-height: 0 !important; }

/* ── Resumo ──────────────────────────────────────────────────── */
.parcelamento-pro-widget .pp-summary {
    display:     flex !important;
    align-items: center !important;
    gap:         6px !important;
    color:       var(--pp-summary-color) !important;
    font-size:   var(--pp-summary-size) !important;
    font-weight: var(--pp-summary-weight) !important;
    font-family: var(--pp-summary-family) !important;
    padding:     3px 0 !important;
    user-select: none;
}
.parcelamento-pro-widget .pp-summary.pp-clickable { cursor: pointer !important; }
.parcelamento-pro-widget .pp-summary.pp-clickable:hover { opacity: 0.75; }

.parcelamento-pro-widget .pp-icon {
    width:       18px !important;
    height:      18px !important;
    min-width:   18px !important;
    color:       var(--pp-icon-color) !important;
    flex-shrink: 0 !important;
    display:     inline-block !important;
}
.parcelamento-pro-widget .pp-hl         { color: var(--pp-summary-hl) !important; }
.parcelamento-pro-widget .pp-free-label { color: var(--pp-summary-free) !important; }
.parcelamento-pro-widget .pp-arrow      { font-size: 11px !important; transition: transform 0.25s; }
.parcelamento-pro-widget .pp-summary.pp-open .pp-arrow { transform: rotate(180deg); }

/* ── Tabela inline ───────────────────────────────────────────── */
.parcelamento-pro-widget .pp-table-wrap {
    margin-top:    6px !important;
    border:        1px solid var(--pp-table-border) !important;
    border-radius: var(--pp-table-radius) !important;
    background:    var(--pp-table-bg) !important;
    overflow:      hidden !important;
    box-shadow:    0 2px 10px rgba(0,0,0,.07) !important;
}
@keyframes ppFadeIn {
    from { opacity:0; transform:translateY(-6px); }
    to   { opacity:1; transform:translateY(0); }
}
.parcelamento-pro-widget .pp-table {
    width:           100% !important;
    border-collapse: collapse !important;
    font-size:       var(--pp-table-size) !important;
    color:           var(--pp-table-text) !important;
}
.parcelamento-pro-widget .pp-row { border-bottom: 1px solid var(--pp-table-border) !important; }
.parcelamento-pro-widget .pp-row:last-child { border-bottom: none !important; }
.parcelamento-pro-widget .pp-row-alt  { background: var(--pp-table-alt) !important; }
.parcelamento-pro-widget .pp-row-best { background: var(--pp-hl-bg) !important; color: var(--pp-hl-text) !important; }
.parcelamento-pro-widget .pp-td { padding: var(--pp-table-pad) 12px !important; vertical-align: middle !important; }
.parcelamento-pro-widget .pp-td-n { font-weight: 700 !important; white-space: nowrap !important; }
.parcelamento-pro-widget .pp-td-total { color: #9ca3af !important; font-size: 0.88em !important; }
.parcelamento-pro-widget .pp-row-best .pp-td-total { color: rgba(255,255,255,0.7) !important; }
.parcelamento-pro-widget .pp-td-status { text-align: right !important; }
.parcelamento-pro-widget .pp-badge {
    display:       inline-block !important;
    padding:       3px 9px !important;
    border-radius: 20px !important;
    font-size:     11px !important;
    font-weight:   600 !important;
    white-space:   nowrap !important;
}
.parcelamento-pro-widget .pp-badge-free { background: rgba(5,150,105,0.1) !important; color: var(--pp-table-free) !important; }
.parcelamento-pro-widget .pp-badge-int  { background: rgba(220,38,38,0.09) !important; color: var(--pp-table-interest) !important; }
.parcelamento-pro-widget .pp-row-best .pp-badge-free { background: rgba(255,255,255,0.2) !important; color: var(--pp-hl-text) !important; }

/* price-only */
.parcelamento-pro-widget.pp-price-only { display: inline-flex !important; max-width: none !important; width: auto !important; }

/* ════════════════════════════════════════════════════════════════
   BOTÃO "VER FORMAS DE PAGAMENTO"
   ════════════════════════════════════════════════════════════════ */
.pp-modal-trigger {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             7px !important;
    background:      none !important;
    border:          none !important;
    box-shadow:      none !important;
    padding:         4px 0 !important;
    margin:          0 !important;
    cursor:          pointer !important;
    font-size:       13.5px !important;
    font-weight:     500 !important;
    color:           #1a56db !important;
    text-decoration: none !important;
    transition:      color .2s, opacity .2s !important;
    font-family:     inherit !important;
    line-height:     1.4 !important;
    width:           auto !important;
    height:          auto !important;
    border-radius:   0 !important;
}
.pp-modal-trigger:hover {
    color:           #1e40af !important;
    text-decoration: underline !important;
    opacity:         1 !important;
}
.pp-modal-trigger .pp-btn-icon,
.pp-modal-trigger .pp-chevron {
    width:       15px !important;
    height:      15px !important;
    min-width:   15px !important;
    min-height:  15px !important;
    max-width:   15px !important;
    max-height:  15px !important;
    flex-shrink: 0 !important;
    display:     inline-block !important;
    overflow:    visible !important;
    fill:        none !important;
    stroke:      currentColor !important;
}
.pp-modal-trigger:hover .pp-chevron { transform: translateX(3px) !important; }

/* ════════════════════════════════════════════════════════════════
   MODAL OVERLAY – usa !important em absolutamente tudo
   ════════════════════════════════════════════════════════════════ */
#pp-modal-overlay-root {
    position:   fixed !important;
    inset:      0 !important;
    top:        0 !important;
    left:       0 !important;
    right:      0 !important;
    bottom:     0 !important;
    z-index:    2147483647 !important; /* máximo possível */
    pointer-events: none !important;
}
#pp-modal-overlay-root.pp-active { pointer-events: all !important; }

.pp-modal-overlay {
    position:        fixed !important;
    inset:           0 !important;
    top:             0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width:           100% !important;
    height:          100% !important;
    background:      rgba(15,23,42,0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index:         2147483647 !important;
    display:         none !important;
    align-items:     center !important;
    justify-content: center !important;
    padding:         20px !important;
    box-sizing:      border-box !important;
    margin:          0 !important;
}
.pp-modal-overlay.pp-open {
    display:         flex !important;
    animation:       ppOverlayIn .2s ease !important;
}
@keyframes ppOverlayIn {
    from { opacity:0; }
    to   { opacity:1; }
}

/* ── Caixa do modal ──────────────────────────────────────────── */
.pp-modal {
    background:     #ffffff !important;
    border-radius:  16px !important;
    width:          100% !important;
    max-width:      500px !important;
    max-height:     85vh !important;
    display:        flex !important;
    flex-direction: column !important;
    box-shadow:     0 30px 80px rgba(0,0,0,.3) !important;
    overflow:       hidden !important;
    position:       relative !important;
    margin:         0 auto !important;
    animation:      ppModalIn .28s cubic-bezier(.34,1.4,.64,1) !important;
    box-sizing:     border-box !important;
    border:         none !important;
}
@keyframes ppModalIn {
    from { opacity:0; transform:translateY(30px) scale(.95); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}

/* Header */
.pp-modal .pp-modal-header {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    padding:         16px 20px !important;
    border-bottom:   1px solid #f1f5f9 !important;
    flex-shrink:     0 !important;
    background:      #fff !important;
    box-sizing:      border-box !important;
}
.pp-modal .pp-modal-title {
    display:     flex !important;
    align-items: center !important;
    gap:         8px !important;
    font-size:   16px !important;
    font-weight: 700 !important;
    color:       #0f172a !important;
    margin:      0 !important;
    padding:     0 !important;
    line-height: 1.3 !important;
}
.pp-modal .pp-modal-title svg {
    width:      20px !important;
    height:     20px !important;
    min-width:  20px !important;
    min-height: 20px !important;
    max-width:  20px !important;
    max-height: 20px !important;
    color:      var(--pp-price-color) !important;
    fill:       none !important;
    flex-shrink:0 !important;
    display:    inline-block !important;
}

/* Botão fechar */
.pp-modal .pp-modal-close {
    width:           32px !important;
    height:          32px !important;
    min-width:       32px !important;
    border:          none !important;
    background:      #f1f5f9 !important;
    border-radius:   50% !important;
    cursor:          pointer !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    transition:      background .2s, transform .2s !important;
    flex-shrink:     0 !important;
    padding:         0 !important;
    box-shadow:      none !important;
    line-height:     1 !important;
}
.pp-modal .pp-modal-close:hover { background:#fee2e2 !important; transform:rotate(90deg) !important; }
.pp-modal .pp-modal-close svg {
    width:      14px !important;
    height:     14px !important;
    min-width:  14px !important;
    max-width:  14px !important;
    color:      #64748b !important;
    fill:       none !important;
    stroke:     #64748b !important;
}
.pp-modal .pp-modal-close:hover svg { stroke: #e63946 !important; color:#e63946 !important; }

/* Linha do preço total */
.pp-modal .pp-modal-price-row {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    padding:         12px 20px !important;
    background:      #f8fafc !important;
    flex-shrink:     0 !important;
    box-sizing:      border-box !important;
}
.pp-modal .pp-modal-label { font-size:12px !important; color:#64748b !important; font-weight:500 !important; }
.pp-modal .pp-modal-price { font-size:18px !important; font-weight:800 !important; color:#0f172a !important; letter-spacing:-.3px !important; }

/* Banner melhor opção */
.pp-modal .pp-modal-highlight {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    gap:             10px !important;
    padding:         10px 20px !important;
    background:      linear-gradient(90deg,#ecfdf5,#d1fae5) !important;
    border-bottom:   1px solid #a7f3d0 !important;
    font-size:       13px !important;
    color:           #065f46 !important;
    font-weight:     600 !important;
    flex-shrink:     0 !important;
    box-sizing:      border-box !important;
}
.pp-modal .pp-modal-highlight strong { font-weight:800 !important; }
.pp-modal .pp-modal-highlight em     { font-style:normal !important; color:#059669 !important; font-weight:700 !important; }
.pp-modal .pp-modal-hl-badge {
    font-size:     10px !important;
    font-weight:   700 !important;
    background:    #059669 !important;
    color:         #fff !important;
    padding:       3px 9px !important;
    border-radius: 20px !important;
    white-space:   nowrap !important;
    flex-shrink:   0 !important;
}

/* Área da tabela (scrollável) */
.pp-modal .pp-modal-table-wrap {
    overflow-y:  auto !important;
    overflow-x:  hidden !important;
    flex:        1 !important;
    min-height:  0 !important;
}
.pp-modal .pp-modal-table {
    width:           100% !important;
    border-collapse: collapse !important;
    font-size:       13px !important;
    color:           var(--pp-table-text) !important;
}
.pp-modal .pp-modal-thead th {
    padding:        9px 14px !important;
    font-size:      10.5px !important;
    font-weight:    700 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    color:          #94a3b8 !important;
    background:     #f8fafc !important;
    text-align:     left !important;
    position:       sticky !important;
    top:            0 !important;
    border-bottom:  1px solid #e2e8f0 !important;
    box-sizing:     border-box !important;
}
.pp-modal .pp-row { border-bottom: 1px solid var(--pp-table-border) !important; }
.pp-modal .pp-row:last-child { border-bottom: none !important; }
.pp-modal .pp-row-alt  { background: var(--pp-table-alt) !important; }
.pp-modal .pp-row-best { background: var(--pp-hl-bg) !important; color: var(--pp-hl-text) !important; }
.pp-modal .pp-td { padding: 9px 14px !important; vertical-align: middle !important; font-size:13px !important; }
.pp-modal .pp-td-n { font-weight:700 !important; white-space:nowrap !important; width:44px !important; }
.pp-modal .pp-td-val strong { font-weight:700 !important; }
.pp-modal .pp-td-total { color:#9ca3af !important; font-size:12px !important; }
.pp-modal .pp-row-best .pp-td-total { color:rgba(255,255,255,.65) !important; }
.pp-modal .pp-td-status { text-align:right !important; }
.pp-modal .pp-badge {
    display:       inline-block !important;
    padding:       2px 8px !important;
    border-radius: 20px !important;
    font-size:     11px !important;
    font-weight:   600 !important;
    white-space:   nowrap !important;
}
.pp-modal .pp-badge-free { background:rgba(5,150,105,.1) !important; color:var(--pp-table-free) !important; }
.pp-modal .pp-badge-int  { background:rgba(220,38,38,.09) !important; color:var(--pp-table-interest) !important; }
.pp-modal .pp-row-best .pp-badge-free { background:rgba(255,255,255,.2) !important; color:var(--pp-hl-text) !important; }

/* Nota rodapé */
.pp-modal .pp-modal-note {
    font-size:  11px !important;
    color:      #94a3b8 !important;
    padding:    10px 20px !important;
    margin:     0 !important;
    border-top: 1px solid #f1f5f9 !important;
    flex-shrink:0 !important;
    line-height:1.5 !important;
    background: #fff !important;
}

/* ── Mobile: bottom sheet ──────────────────────────────────────── */
@media (max-width: 520px) {
    .pp-modal-overlay { align-items: flex-end !important; padding: 0 !important; }
    .pp-modal {
        border-radius: 20px 20px 0 0 !important;
        max-height:    90vh !important;
        animation:     ppModalInMobile .28s ease !important;
    }
    @keyframes ppModalInMobile {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    .pp-modal .pp-td-total { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVIDADE
   ════════════════════════════════════════════════════════════════ */

/* ── Widget de preço: adapta tamanho em telas pequenas ────────── */
@media (max-width: 480px) {
    .parcelamento-pro-widget {
        max-width: 100% !important;
        width: 100% !important;
    }
    .parcelamento-pro-widget .pp-price {
        font-size: clamp(24px, 7vw, var(--pp-price-size)) !important;
    }
    .parcelamento-pro-widget .pp-price-cents {
        font-size: clamp(14px, 4.5vw, var(--pp-cents-size)) !important;
    }
    .parcelamento-pro-widget .pp-prefix {
        font-size: clamp(11px, 3.5vw, var(--pp-prefix-size)) !important;
    }
    .parcelamento-pro-widget .pp-summary {
        font-size: clamp(11px, 3.5vw, var(--pp-summary-size)) !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }
    /* pp-summary-text é o span que contém "Em até 3x de R$48,26 sem juros" */
    .parcelamento-pro-widget .pp-summary-text {
        display:     inline !important;
        white-space: normal !important;
        line-height: 1.4 !important;
    }
    .parcelamento-pro-widget .pp-summary-text strong,
    .parcelamento-pro-widget .pp-summary-text span {
        display:     inline !important;
        white-space: normal !important;
    }
    .parcelamento-pro-widget .pp-icon {
        width:      14px !important;
        height:     14px !important;
        min-width:  14px !important;
        align-self: flex-start !important;
        margin-top: 2px !important;
        flex-shrink: 0 !important;
    }
}

/* ── Modal: bottom sheet no mobile ────────────────────────────── */
@media (max-width: 560px) {
    .pp-modal-overlay {
        align-items:  flex-end !important;
        padding:      0 !important;
    }
    .pp-modal {
        border-radius:  20px 20px 0 0 !important;
        max-height:     92vh !important;
        max-width:      100% !important;
        width:          100% !important;
        animation:      ppModalInMobile .3s ease !important;
        /* Alça visual de bottom sheet */
        padding-top:    6px !important;
    }
    .pp-modal::before {
        content:       '' !important;
        display:       block !important;
        width:         40px !important;
        height:        4px !important;
        background:    #cbd5e1 !important;
        border-radius: 4px !important;
        margin:        0 auto 10px !important;
    }
    @keyframes ppModalInMobile {
        from { transform: translateY(100%); opacity: 0.6; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    /* Esconde coluna Total no mobile (economiza espaço) */
    .pp-modal .pp-td-total,
    .pp-modal .pp-modal-thead th:nth-child(3) {
        display: none !important;
    }

    .pp-modal .pp-td { padding: 10px 12px !important; }
    .pp-modal .pp-modal-header { padding: 12px 16px !important; }
    .pp-modal .pp-modal-price-row,
    .pp-modal .pp-modal-highlight { padding: 10px 16px !important; }
    .pp-modal .pp-modal-table-wrap { -webkit-overflow-scrolling: touch; }
}

/* ── Tablets ───────────────────────────────────────────────────── */
@media (min-width: 561px) and (max-width: 768px) {
    .pp-modal {
        max-width: 96vw !important;
    }
}

/* ── Garantia: impede scroll do body quando modal está aberto ─── */
body.pp-modal-open {
    overflow: hidden !important;
    /* Evita o "jump" causado pelo scrollbar sumindo */
    padding-right: var(--pp-scrollbar-w, 0px) !important;
}