/* =============================================================================
   checkout.css — /v2/shop/finalizar_cart.php
   Layout v2 do checkout. As IDs/classes da raiz (cw-card, cw-input, cw-btn-blue,
   modais PIX/Stripe) sao preservadas, este CSS apenas adiciona container/grid v2.
   ============================================================================= */

.cw-checkout-cart {
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--espaco-5) var(--espaco-4) var(--espaco-7);
}

.cw-checkout-cart__breadcrumb {
    font-size: var(--texto-sm);
    color: var(--cor-texto-suave);
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    margin-bottom: var(--espaco-4);
    flex-wrap: wrap;
}

.cw-checkout-cart__breadcrumb-link {
    color: var(--cor-marca);
    text-decoration: none;
}

.cw-checkout-cart__breadcrumb-link:hover {
    text-decoration: underline;
}

.cw-checkout-cart__hero {
    background: linear-gradient(135deg, var(--cor-fundo) 0%, #ecfdf5 100%);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-xl);
    padding: var(--espaco-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-4);
    margin-bottom: var(--espaco-5);
    flex-wrap: wrap;
    box-shadow: var(--sombra-sm);
}

.cw-checkout-cart__titulo {
    font-size: var(--texto-2xl);
    color: var(--cor-texto);
    margin: 0 0 var(--espaco-2);
}

.cw-checkout-cart__subtitulo {
    color: var(--cor-texto-suave);
    margin: 0;
    font-size: var(--texto-sm);
}

.cw-checkout-cart__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-2);
    justify-content: flex-end;
}

.cw-badge-trust {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-1);
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pill);
    padding: var(--espaco-2) var(--espaco-3);
    font-size: var(--texto-xs);
    font-weight: 700;
    color: var(--cor-texto);
}

/* Grid principal */
.cw-checkout-cart__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espaco-4);
}

/* Cards usam classes "cw-card" da raiz mas com look v2 */
.cw-checkout-cart .cw-card {
    background: var(--cor-fundo) !important;
    border: 1px solid var(--cor-borda) !important;
    border-radius: var(--raio-xl) !important;
    box-shadow: var(--sombra-sm) !important;
    padding: var(--espaco-5);
}

.cw-checkout-cart__col-titulo {
    font-size: var(--texto-xl);
    color: var(--cor-texto);
    margin: 0 0 var(--espaco-4);
}

.cw-checkout-cart__sub-titulo {
    font-size: var(--texto-md);
    color: var(--cor-texto);
    margin: 0 0 var(--espaco-3);
    font-weight: 700;
}

.cw-checkout-cart__vazio {
    color: var(--cor-texto-suave);
    margin: 0 0 var(--espaco-4);
}

/* Item */
.cw-checkout-cart__item {
    display: flex;
    gap: var(--espaco-3);
    align-items: center;
    padding: var(--espaco-3);
    background: var(--cor-fundo-suave);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    margin-bottom: var(--espaco-3);
}

.cw-checkout-cart__item img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--raio-sm);
    background: var(--cor-fundo);
    flex-shrink: 0;
}

.cw-checkout-cart__item-info {
    flex: 1;
    min-width: 0;
}

.cw-item-name {
    font-size: var(--texto-md);
    font-weight: 700;
    color: var(--cor-texto);
    margin: 0 0 var(--espaco-1);
    line-height: 1.3;
}

.cw-item-sub {
    color: var(--cor-marca);
    font-weight: 700;
    margin: 0;
}

.cw-checkout-cart__col-acoes {
    display: flex;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--espaco-4);
    padding-top: var(--espaco-4);
    border-top: 1px solid var(--cor-borda);
}

/* Botao "Remover" do item — discreto (texto cinza), vira alerta no hover */
.cw-checkout-cart__btn-remover {
    background: transparent;
    border: 1px solid transparent;
    color: var(--cor-texto-suave);
    font-size: var(--texto-sm);
    font-weight: 600;
    padding: var(--espaco-2) var(--espaco-3);
    border-radius: var(--raio-md);
    cursor: pointer;
    transition: background var(--transicao-rapida), color var(--transicao-rapida), border-color var(--transicao-rapida);
    flex-shrink: 0;
    font-family: inherit;
    line-height: 1;
}

.cw-checkout-cart__btn-remover:hover {
    background: #fef2f2;
    color: var(--cor-alerta);
    border-color: #fecaca;
}

/* Botao "Limpar carrinho" — destrutivo mas secundario (texto link) */
.cw-checkout-cart__btn-limpar {
    background: transparent;
    border: 0;
    color: var(--cor-texto-fraco);
    font-size: var(--texto-sm);
    cursor: pointer;
    padding: var(--espaco-2) var(--espaco-3);
    text-decoration: none;
    font-family: inherit;
}

.cw-checkout-cart__btn-limpar:hover {
    color: var(--cor-alerta);
}

/* Resumo */
.cw-checkout-cart__total-linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--texto-md);
    color: var(--cor-texto-suave);
    margin-bottom: var(--espaco-3);
}

.cw-checkout-cart__total-linha strong {
    font-size: var(--texto-2xl);
    color: var(--cor-marca);
    font-weight: 900;
}

.cw-checkout-cart__divisor {
    height: 1px;
    background: var(--cor-borda) !important;
    border: 0;
    margin: var(--espaco-4) 0;
}

/* Login box */
.cw-checkout-cart .cw-input {
    width: 100%;
    padding: var(--espaco-3) var(--espaco-4);
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-md);
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-size: var(--texto-md);
    margin-bottom: var(--espaco-2);
    font-family: inherit;
}

.cw-checkout-cart .cw-input:focus {
    outline: none;
    border-color: var(--cor-marca);
    box-shadow: 0 0 0 3px rgba(0, 138, 32, 0.15);
}

.cw-checkout-cart__login-acoes {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    margin-top: var(--espaco-3);
}

.cw-checkout-cart__hint {
    font-size: var(--texto-xs);
    color: var(--cor-texto-suave);
    margin: var(--espaco-3) 0 0;
    line-height: 1.5;
}

/* Pagamento — botao PIX especial (verde marca clara pra diferenciar do destaque) */
.cw-checkout-cart__btn-pix {
    background: var(--cor-marca-clara);
    border-color: var(--cor-marca-clara);
}
.cw-checkout-cart__btn-pix:hover {
    background: var(--cor-marca);
    border-color: var(--cor-marca);
}

/* Espacamento entre botoes empilhados de pagamento */
.cw-checkout-cart .cw-btn--block + .cw-btn--block {
    margin-top: var(--espaco-2);
}

/* === Bloqueio das classes legadas da raiz (.cw-btn-blue/green/gray) ===
   O cart.css da raiz e carregado pra trazer estilos dos modais PIX/Stripe.
   Mas ele tambem traz cores azul/verde/amarelo nos botoes que conflitam
   com o look v2. Aqui anulamos o estilo legado pra que nossas classes BEM
   v2 (cw-btn--primario, cw-btn--secundario, cw-btn--destaque) ganhem. */
.cw-checkout-cart .cw-btn-green,
.cw-checkout-cart .cw-btn-blue {
    background: inherit;
    color: inherit;
    border: inherit;
}
.cw-checkout-cart .cw-btn-blue:hover {
    background: inherit;
    border-color: inherit;
}

.cw-checkout-cart .cw-btn-gray {
    background: var(--cor-fundo-suave);
    color: var(--cor-texto);
    border: 1px solid var(--cor-borda);
}
.cw-checkout-cart .cw-btn-gray:hover {
    background: var(--cor-borda);
    border-color: var(--cor-borda-forte);
}

.cw-checkout-cart__beneficios {
    display: flex;
    gap: var(--espaco-2);
    flex-wrap: wrap;
}

/* ============================================================
   Desktop
   ============================================================ */
@media (min-width: 768px) {
    .cw-checkout-cart {
        padding: var(--espaco-6) var(--espaco-5) var(--espaco-8);
    }

    .cw-checkout-cart__titulo {
        font-size: var(--texto-3xl);
    }

    .cw-checkout-cart__grid {
        grid-template-columns: 1.6fr 1fr;
        align-items: start;
    }
}

/* =============================================================================
   Botao PIX com logo SVG
   ============================================================================= */
.cw-checkout-cart__btn-pix {
    background: #008a20;
}
.cw-checkout-cart__btn-pix-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #fff;
}
.cw-checkout-cart__btn-pix-logo svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* =============================================================================
   Modais (PIX, Stripe, blocked) — variant cart do cw-pagar-modal
   ============================================================================= */
.cw-pagar-modal__box--larga {
    max-width: 760px;
}

.cw-checkout-cart__modal-cabecalho {
    padding-bottom: var(--espaco-4);
    border-bottom: 1px solid var(--cor-borda);
    margin-bottom: var(--espaco-4);
}
.cw-checkout-cart__modal-titulo {
    margin: 0 0 var(--espaco-1);
    font-size: var(--texto-xl);
    color: var(--cor-texto);
}
.cw-checkout-cart__modal-sub {
    margin: 0;
    font-size: var(--texto-sm);
    color: var(--cor-texto-suave);
}
.cw-checkout-cart__modal-total {
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-md);
    color: var(--cor-texto);
}
.cw-checkout-cart__modal-total b {
    color: var(--cor-marca);
    font-size: var(--texto-lg);
}
.cw-checkout-cart__modal-foot {
    margin: var(--espaco-3) 0 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-suave);
    text-align: center;
}
.cw-checkout-cart__modal-acoes {
    display: flex;
    gap: var(--espaco-2);
    margin-top: var(--espaco-4);
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* PIX layout: QR esquerda, copia direita */
.cw-checkout-cart__pix-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espaco-4);
}
@media (min-width: 640px) {
    .cw-checkout-cart__pix-grid {
        grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    }
}
.cw-checkout-cart__pix-qr {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
}
.cw-checkout-cart__pix-timer {
    background: #fef9c3;
    border: 1px solid #facc15;
    border-radius: var(--raio-md);
    padding: var(--espaco-3);
    text-align: center;
}
.cw-checkout-cart__pix-timer-label {
    margin: 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.cw-checkout-cart__pix-timer-time {
    margin: var(--espaco-1) 0;
    font-size: var(--texto-2xl);
    font-weight: 800;
    color: var(--cor-texto);
    font-variant-numeric: tabular-nums;
}
.cw-checkout-cart__pix-timer-hint {
    margin: 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-suave);
}
.cw-checkout-cart__pix-copy {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
}
.cw-checkout-cart__pix-label {
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--cor-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cw-checkout-cart__pix-textarea {
    width: 100%;
    min-height: 110px;
    padding: var(--espaco-3);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    background: var(--cor-fundo-suave);
    font-family: monospace;
    font-size: var(--texto-xs);
    color: var(--cor-texto);
    resize: vertical;
    line-height: 1.4;
}
.cw-checkout-cart__pix-help {
    margin: 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-suave);
}

/* Modal "ja comprado" — lista */
.cw-checkout-cart__blocked-list {
    margin: var(--espaco-3) 0;
    padding-left: var(--espaco-4);
    font-size: var(--texto-sm);
    color: var(--cor-texto);
    line-height: 1.6;
}

/* Status verde quando pago */
.cw-pagar-modal__status--ok {
    background: #d1fae5;
    color: #065f46;
}

/* Body scroll lock */
body.cw-modal-open {
    overflow: hidden;
}