/* Fase 5 — Pagamento (Pix/Boleto/Cartão), Sucesso e Cancelamento.
   Reskin puro sobre o widget de checkout existente (_cdn/widgets/payment/...);
   nenhuma classe/estrutura usada por scripts.js ou pelo Payment.scripts.php foi renomeada aqui. */

.l01-payment {
    background: var(--cream-50);
    padding: 56px 0 72px;
}

.l01-payment.workcontrol_cart > header {
    display: none; /* header genérico "Pagamento" do widget legado — substituído pelo hero abaixo */
}

.l01-payment-hero {
    max-width: 720px;
    margin: 0 auto 32px;
    text-align: center;
}

.l01-payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--cream-100);
    color: var(--green-700);
    font: 700 .75rem/1 var(--font-body);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.l01-payment-hero h1 {
    font: 600 2rem/1.25 var(--font-heading);
    color: var(--ink-900);
    margin: 0 0 12px;
}

.l01-payment-hero p {
    font: 400 1rem/1.5 var(--font-body);
    color: var(--ink-600);
    margin: 0;
}

/* Card branco central — reaproveita .workcontrol_order já usado pelo widget */
.l01-payment .workcontrol_order {
    max-width: 720px;
    margin: 0 auto;
    display: block;
}

.l01-payment .workcontrol_order_forms {
    display: block !important;
    width: 100% !important;
    padding: 32px !important;
    vertical-align: top;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-sizing: border-box;
}

.l01-payment .workcontrol_order_details {
    display: none; /* mockup não traz resumo lateral do pedido nesta etapa */
}

.l01-payment .workcontrol_pay_tabs {
    display: none; /* forma de pagamento já foi escolhida na inscrição — nada para alternar aqui */
}

.l01-payment form#pix,
.l01-payment form#billet,
.l01-payment form#card-merpago {
    max-width: 100%;
}

.l01-payment form h3 {
    font: 600 1.125rem/1.4 var(--font-heading);
    color: var(--ink-900);
    margin: 0 0 8px;
}

.l01-payment form > div > p {
    font: 400 .9375rem/1.5 var(--font-body);
    color: var(--ink-600);
    margin: 0 0 6px;
}

/* PIX — .pix-instructions vive DENTRO de .pix-qr, e .pix-text (código) é irmão de .pix-qr;
   a estrutura vem do widget legado (Payment-form.php / Payment.scripts.php) e não foi alterada.
   Os seletores abaixo repetem a cadeia "#pix .pix-box ..." do CSS legado (_assets/styles.min.css)
   porque aquele CSS usa o id #pix e teria mais especificidade que uma classe sozinha. */
.l01-payment #pix .pix-box {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 20px;
    border: none;
    background: transparent;
    padding: 0;
    text-align: left;
}

.l01-payment #pix .pix-box.load {
    opacity: .55;
    pointer-events: none;
}

.l01-payment #pix .pix-box .pix-qr {
    width: 100%;
    background: var(--cream-100);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.l01-payment #pix .pix-box .pix-qr img {
    width: 180px;
    height: 180px;
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    object-fit: contain;
}

.l01-payment #pix .pix-box .pix-qr .pix-instructions {
    margin-top: 16px;
    padding-left: 0;
    max-width: 100%;
    width: 100%;
    text-align: left;
}

.l01-payment #pix .pix-box .pix-qr .pix-instructions p {
    position: static;
    font: 400 .875rem/1.5 var(--font-body);
    color: var(--ink-600);
    margin: 0 0 8px;
    padding-left: 0;
    display: flex;
    gap: 10px;
}

.l01-payment #pix .pix-box .pix-qr .pix-instructions p:first-of-type,
.l01-payment #pix .pix-box .pix-qr .pix-instructions p:last-of-type {
    margin: 0 0 8px;
}

.l01-payment #pix .pix-box .pix-qr .pix-instructions p b {
    position: static;
    flex: 0 0 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background: #fff;
    color: var(--green-700);
    font-size: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.l01-payment #pix .pix-box .pix-text {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    background: var(--cream-50);
}

.l01-payment #pix .pix-box .pix-text #pixcode {
    font: 400 .8125rem/1.5 monospace;
    color: var(--ink-900);
    word-break: break-all;
    white-space: normal;
    width: auto;
}

.l01-payment #pix .pix-box .pix-text .copy,
.l01-payment #pix .pix-box .pix-text .j_copy {
    position: static;
    align-self: flex-start;
    cursor: pointer;
    background: var(--green-900);
    color: #fff;
    font: 700 .8125rem/1 var(--font-body);
    padding: 10px 16px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.l01-payment .pixtitle {
    font: 600 .8125rem/1.4 var(--font-body) !important;
    color: var(--green-700) !important;
    text-transform: uppercase;
}

/* Valor a pagar + botão de ação (comum a pix/boleto/card).
   #pix/#billet no seletor porque o CSS legado usa form#pix/form#billet (id vence classe). */
.l01-payment #pix .wc_cart_actions,
.l01-payment #billet .wc_cart_actions,
.l01-payment #card-merpago .wc_cart_actions,
.l01-payment .wc_cart_actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    text-align: left;
}

.l01-payment #pix .wc_cart_actions h4,
.l01-payment #billet .wc_cart_actions h4,
.l01-payment .wc_cart_actions h4 {
    font: 400 .9375rem/1.4 var(--font-body) !important;
    color: var(--ink-600);
    margin: 0 !important;
    display: block;
    float: none;
}

.l01-payment .wc_cart_actions h4 b {
    font: 600 1.375rem/1.2 var(--font-heading);
    color: var(--ink-900) !important;
}

.l01-payment #pix .wc_button_cart,
.l01-payment #billet .wc_button_cart,
.l01-payment .wc_cart_actions .wc_button_cart,
.l01-payment .wc_cart_actions .btn_green {
    background: var(--gold-500) !important;
    color: var(--gold-text) !important;
    text-shadow: none !important;
    font: 700 .9375rem/1 var(--font-body);
    padding: 14px 24px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.l01-payment .wc_cart_actions .wc_button_cart:hover,
.l01-payment .wc_cart_actions .btn_green:hover {
    background: var(--gold-600) !important;
}

/* Boleto — linha digitável (código já existe em $CartOrder['code'], só faltava exibir) */
.l01-payment .l01-billet-code {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--cream-50);
}

.l01-payment .l01-billet-code span.code {
    flex: 1;
    font: 400 .875rem/1.4 monospace;
    color: var(--ink-900);
    word-break: break-all;
}

.l01-payment .l01-billet-code .j_copy {
    flex-shrink: 0;
    cursor: pointer;
    background: var(--green-900);
    color: #fff;
    font: 700 .8125rem/1 var(--font-body);
    padding: 10px 16px;
    border-radius: 8px;
    text-transform: uppercase;
}

/* Cartão */
.l01-payment .form-card--box {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

.l01-payment .card-style,
.l01-payment .input-holder,
.l01-payment .selects select {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    font: 400 .9375rem/1.4 var(--font-body);
}

.l01-payment .selects {
    display: flex;
    gap: 12px;
}

.l01-payment .selects select {
    flex: 1;
}

.l01-payment #form-checkout__submit {
    width: 100%;
    background: var(--gold-500);
    color: var(--gold-text);
    font: 700 .9375rem/1 var(--font-body);
    padding: 14px 24px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
}

.l01-payment #form-checkout__submit:hover {
    background: var(--gold-600);
}

/* Ajuda */
.l01-payment-help {
    max-width: 720px;
    margin: 24px auto 0;
    text-align: center;
    font: 400 .9375rem/1.5 var(--font-body);
    color: var(--ink-600);
}

.l01-payment-help a {
    color: var(--green-700);
    font-weight: 600;
}

/* ===== Sucesso / Cancelamento / Pendente (tela "obrigado") ===== */
.l01-obrigado {
    background: var(--cream-50);
    padding: 56px 0 72px;
}

.l01-obrigado.workcontrol_cart > header {
    display: none;
}

.l01-obrigado-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 2rem;
    color: #fff;
}

.l01-obrigado-icon.is-success { background: var(--green-900); }
.l01-obrigado-icon.is-pending { background: var(--amber-700); }
.l01-obrigado-icon.is-cancel  { background: var(--amber-100); color: var(--amber-700); border: 2px solid var(--amber-700); }

.l01-obrigado-head {
    max-width: 640px;
    margin: 0 auto 32px;
    text-align: center;
}

.l01-obrigado-head h1 {
    font: 600 1.75rem/1.3 var(--font-heading);
    color: var(--ink-900);
    margin: 0 0 12px;
}

.l01-obrigado-head p {
    font: 400 1rem/1.5 var(--font-body);
    color: var(--ink-600);
    margin: 0;
}

.l01-obrigado-card {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

.l01-obrigado-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.l01-obrigado-card__head span.label {
    display: block;
    font: 400 .8125rem/1.3 var(--font-body);
    color: var(--ink-600);
    margin-bottom: 4px;
}

.l01-obrigado-card__head strong {
    font: 600 1.0625rem/1.3 var(--font-heading);
    color: var(--ink-900);
}

.l01-obrigado-pill {
    padding: 6px 14px;
    border-radius: 999px;
    font: 700 .75rem/1 var(--font-body);
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}

.l01-obrigado-pill.is-success { background: var(--cream-100); color: var(--green-700); }
.l01-obrigado-pill.is-pending { background: var(--amber-100); color: var(--amber-700); }
.l01-obrigado-pill.is-cancel  { background: var(--amber-100); color: var(--amber-700); }

.l01-obrigado-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 24px;
}

.l01-obrigado-card__grid div span.label {
    display: block;
    font: 400 .8125rem/1.3 var(--font-body);
    color: var(--ink-600);
    margin-bottom: 4px;
}

.l01-obrigado-card__grid div strong {
    font: 600 1rem/1.3 var(--font-body);
    color: var(--ink-900);
}

.l01-obrigado-note {
    max-width: 640px;
    margin: 24px auto 0;
    background: var(--cream-100);
    border-radius: 12px;
    padding: 20px 24px;
}

.l01-obrigado-note strong {
    display: block;
    font: 600 .9375rem/1.4 var(--font-body);
    color: var(--ink-900);
    margin-bottom: 6px;
}

.l01-obrigado-note p {
    font: 400 .875rem/1.5 var(--font-body);
    color: var(--ink-600);
    margin: 0;
}

.l01-obrigado-actions {
    max-width: 640px;
    margin: 28px auto 0;
    display: flex;
    gap: 14px;
    justify-content: center;
}

.l01-obrigado-actions a {
    font: 700 .9375rem/1 var(--font-body);
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none;
    text-align: center;
}

.l01-obrigado-actions a.is-primary {
    background: var(--gold-500);
    color: var(--ink-900);
}

.l01-obrigado-actions a.is-primary:hover {
    background: var(--gold-600);
}

.l01-obrigado-actions a.is-secondary {
    background: #fff;
    color: var(--ink-900);
    border: 1px solid var(--border);
}

@media (max-width: 720px) {
    .l01-payment .workcontrol_order_forms {
        padding: 20px;
        border-radius: 12px;
    }

    .l01-payment-hero h1,
    .l01-obrigado-head h1 {
        font-size: 1.5rem;
    }

    .l01-payment .pix-box {
        flex-direction: column;
    }

    .l01-payment .pix-qr {
        flex: none;
    }

    .l01-payment .wc_cart_actions {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .l01-obrigado-card__grid {
        grid-template-columns: 1fr;
    }

    .l01-obrigado-actions {
        flex-direction: column;
    }
}