/* =============================================================================
   produto-pagamento.css — Modal de compra avulsa (PIX ou Cartao)
   Acionado pelo botao "Comprar e Baixar Agora" na pagina do produto.
   ============================================================================= */

.cw-pagar-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espaco-4);
    animation: cw-pagar-fade 0.2s ease-out;
}
.cw-pagar-modal[hidden] { display: none; }

.cw-pagar-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.cw-pagar-modal__box {
    position: relative;
    background: #fff;
    border-radius: var(--raio-xl);
    padding: var(--espaco-5);
    max-width: 480px;
    width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    animation: cw-pagar-slide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cw-pagar-modal__close {
    position: absolute;
    top: var(--espaco-3);
    right: var(--espaco-3);
    width: 32px;
    height: 32px;
    border: 0;
    background: var(--cor-fundo-suave);
    color: var(--cor-texto);
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cw-pagar-modal__close:hover {
    background: var(--cor-borda);
}

/* ---------- Header (resumo do produto) ---------- */
.cw-pagar-modal__header {
    display: flex;
    gap: var(--espaco-3);
    align-items: center;
    padding-bottom: var(--espaco-4);
    border-bottom: 1px solid var(--cor-borda);
    margin-bottom: var(--espaco-4);
}
.cw-pagar-modal__thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--raio-md);
    background: var(--cor-fundo-suave);
    flex-shrink: 0;
}
.cw-pagar-modal__nome {
    font-size: var(--texto-md);
    color: var(--cor-texto);
    margin: 0 0 var(--espaco-1);
    line-height: 1.3;
}
.cw-pagar-modal__preco {
    font-size: var(--texto-xl);
    font-weight: 800;
    color: var(--cor-marca);
    margin: 0;
}
.cw-pagar-modal__preco::before {
    content: 'R$ ';
    font-size: var(--texto-md);
    margin-right: 2px;
}

/* ---------- Tela ---------- */
.cw-pagar-modal__tela[hidden] { display: none; }
.cw-pagar-modal__tela {
    animation: cw-pagar-tela 0.2s ease-out;
}

.cw-pagar-modal__texto {
    color: var(--cor-texto-suave);
    font-size: var(--texto-sm);
    margin: 0 0 var(--espaco-3);
    line-height: 1.5;
}

.cw-pagar-modal__acoes {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
}

/* ---------- Tela MEIO (escolher PIX/Cartao) ---------- */
.cw-pagar-modal__meios {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espaco-3);
}
.cw-pagar-modal__meio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-4) var(--espaco-3);
    background: var(--cor-fundo);
    border: 2px solid var(--cor-borda);
    border-radius: var(--raio-md);
    cursor: pointer;
    transition: all var(--transicao-rapida);
    font-family: inherit;
    text-align: center;
}
.cw-pagar-modal__meio:hover {
    border-color: var(--cor-marca);
    transform: translateY(-2px);
    box-shadow: var(--sombra-md);
}
.cw-pagar-modal__meio--pix:hover {
    border-color: var(--cor-marca);
    background: rgba(0, 138, 32, 0.05);
}
.cw-pagar-modal__meio--card:hover {
    border-color: #2563eb;
    background: rgba(37, 99, 235, 0.05);
}
.cw-pagar-modal__meio-icone {
    font-size: 32px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}
.cw-pagar-modal__meio-icone--pix svg {
    height: 40px;
    width: auto;
    display: block;
}
.cw-pagar-modal__meio-nome {
    font-size: var(--texto-md);
    font-weight: 800;
    color: var(--cor-texto);
}
.cw-pagar-modal__meio-sub {
    font-size: var(--texto-xs);
    color: var(--cor-texto-suave);
}

/* ---------- Tela PIX ---------- */
.cw-pagar-modal__qr-wrap {
    display: flex;
    justify-content: center;
    background: #fff;
    padding: var(--espaco-3);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    margin-bottom: var(--espaco-3);
}
.cw-pagar-modal__qr {
    width: 240px;
    height: 240px;
    object-fit: contain;
}
.cw-pagar-modal__pix-help {
    font-size: var(--texto-xs);
    color: var(--cor-texto-suave);
    margin: 0 0 var(--espaco-2);
}
.cw-pagar-modal__pix-code {
    display: flex;
    gap: var(--espaco-2);
    margin-bottom: var(--espaco-3);
}
.cw-pagar-modal__pix-code input {
    flex: 1;
    min-width: 0;
    padding: var(--espaco-2) var(--espaco-3);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    background: var(--cor-fundo-suave);
    font-size: var(--texto-xs);
    font-family: monospace;
    color: var(--cor-texto);
}
.cw-pagar-modal__status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-2);
    padding: var(--espaco-3);
    background: var(--cor-fundo-suave);
    border-radius: var(--raio-md);
    color: var(--cor-texto-suave);
    font-size: var(--texto-sm);
    font-weight: 600;
}
.cw-pagar-modal__destino {
    margin-top: var(--espaco-3);
    padding-top: var(--espaco-3);
    border-top: 1px solid var(--cor-borda);
}
.cw-pagar-modal__destino-titulo {
    font-size: var(--texto-xs);
    color: var(--cor-texto-suave);
    margin: 0 0 var(--espaco-2);
}
.cw-pagar-modal__destino-lista {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px var(--espaco-3);
    margin: 0;
    font-size: var(--texto-sm);
}
.cw-pagar-modal__destino-lista dt {
    color: var(--cor-texto-suave);
    font-weight: 600;
}
.cw-pagar-modal__destino-lista dd {
    margin: 0;
    color: var(--cor-texto);
    font-weight: 700;
}

.cw-pagar-modal__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--cor-borda);
    border-top-color: var(--cor-marca);
    border-radius: 50%;
    animation: cw-pagar-spin 0.8s linear infinite;
}

/* ---------- Tela CARTAO (Stripe Elements) ---------- */
.cw-pagar-modal__campos {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
    margin-bottom: var(--espaco-3);
}
.cw-pagar-modal__linha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espaco-2);
}
.cw-pagar-modal__campo {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--cor-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cw-pagar-modal__stripe-el {
    padding: var(--espaco-3);
    background: var(--cor-fundo);
    border: 1.5px solid var(--cor-borda);
    border-radius: var(--raio-md);
    transition: border-color var(--transicao-rapida);
}
.cw-pagar-modal__stripe-el.is-foco {
    border-color: var(--cor-marca);
    box-shadow: 0 0 0 3px rgba(0, 138, 32, 0.15);
}
.cw-pagar-modal__erro {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: var(--espaco-2) var(--espaco-3);
    border-radius: var(--raio-md);
    font-size: var(--texto-sm);
    margin-bottom: var(--espaco-3);
}

/* ---------- Tela SUCESSO ---------- */
.cw-pagar-modal__tela--sucesso {
    text-align: center;
    padding: var(--espaco-3) 0;
}
.cw-pagar-modal__sucesso-icone {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--espaco-3);
    background: #d1fae5;
    color: var(--cor-marca);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 900;
}
.cw-pagar-modal__sucesso-titulo {
    font-size: var(--texto-xl);
    color: var(--cor-marca-escura);
    margin: 0 0 var(--espaco-2);
}
.cw-pagar-modal__sucesso-texto {
    color: var(--cor-texto-suave);
    margin: 0 0 var(--espaco-4);
    line-height: 1.5;
}

/* ---------- Tela ERRO ---------- */
.cw-pagar-modal__tela--erro {
    text-align: center;
    padding: var(--espaco-3) 0;
}
.cw-pagar-modal__erro-icone {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--espaco-3);
    background: #fee2e2;
    color: var(--cor-alerta);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 900;
}
.cw-pagar-modal__erro-titulo {
    font-size: var(--texto-xl);
    color: var(--cor-alerta);
    margin: 0 0 var(--espaco-2);
}
.cw-pagar-modal__erro-texto {
    color: var(--cor-texto-suave);
    margin: 0 0 var(--espaco-4);
    line-height: 1.5;
}

/* ---------- Animacoes ---------- */
@keyframes cw-pagar-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes cw-pagar-slide {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes cw-pagar-tela {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes cw-pagar-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
    .cw-pagar-modal__box { padding: var(--espaco-4); }
    .cw-pagar-modal__qr  { width: 200px; height: 200px; }
}