/* O pagamento dentro do checkout clássico (2.32.0). Desde a 2.32.1 o bloco
   é o painel da página de pagamento da EPay — rosa, "Pague com" e o bim, um
   cartão por método com o logótipo original, o telemóvel — no lugar da caixa
   cinzenta do WooCommerce. O resto da página fica com a loja. */
.payment_box.payment_method_epay { background: transparent !important; padding: 0 !important; margin: 10px 0 0 !important; }
.payment_box.payment_method_epay::before { display: none !important; }
.epay-inline { margin: 0; padding: 22px 20px 16px; border-radius: 16px; background: #D61A5E; color: #fff; line-height: 1.4; }
.epay-pay-with { display: flex; align-items: center; gap: 16px; min-height: 48px; margin: 0 0 18px; }
.epay-pay-with span { flex: none; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; }
.epay-pay-with img { flex: 0 1 auto; height: 48px; width: auto; max-width: calc(100% - 100px); margin: 0 auto; display: block; object-fit: contain; }
.epay-inline .epay-inline-rotulo { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: #fff; }
.epay-metodos { display: flex; gap: 8px; margin: 0 0 10px; }
.epay-metodo { flex: 1; min-width: 0; margin: 0; cursor: pointer; }
.epay-metodo input { position: absolute; opacity: 0; width: 0; height: 0; }
.epay-metodo span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 1px solid #fff; border-radius: 10px; text-align: center; font-weight: 600; font-size: 11px; color: #fff; background: transparent; transition: background .15s; }
.epay-metodo span img { height: 30px; width: auto; max-width: 100%; display: block; }
.epay-metodo input:checked + span { background: #962649; }
.epay-metodo input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.epay-metodo.indisponivel { cursor: not-allowed; }
.epay-metodo.indisponivel span { opacity: .42; filter: grayscale(1); }
.epay-inline-limite { margin: -4px 0 10px; font-size: 12px; font-weight: 600; color: #fff; }
.epay-dica { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: #fff; }
.epay-telefone { display: flex; gap: 8px; align-items: stretch; margin: 0 0 14px; }
.epay-telefone input[type="tel"] { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid #fff; border-radius: 10px; font-size: 15px; background: #fff; color: #16161a; }
.epay-telefone input[type="tel"]::placeholder { color: #6A6A6A; }
.epay-telefone input[type="tel"]:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.4); }
.epay-seguro { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; text-align: center; color: #fff; }
.epay-seguro svg { flex: none; }
.epay-inline .epay-powered { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; font-size: 12px; color: rgba(255,255,255,.75); }
.epay-inline .epay-powered img { height: 16px; width: auto; filter: brightness(0) invert(1); opacity: .75; }

/* 2.33.0: os temas pintam os <p> e os <label> do bloco de pagamento com as
   cores deles (cinzento, preto) e com mais especificidade — no rosa ficavam
   ilegíveis. O #payment dá a especificidade; o !important vence os temas que
   já o usam. Só cor, tipo e espaçamento de letra: o resto é do nosso CSS. */
#payment .payment_box .epay-inline,
#payment .payment_box .epay-inline p,
#payment .payment_box .epay-inline label,
#payment .payment_box .epay-inline span,
#payment .payment_box .epay-espera,
#payment .payment_box .epay-espera p { color: #fff !important; text-transform: none !important; letter-spacing: normal !important; }
#payment .payment_box .epay-inline p,
#payment .payment_box .epay-inline label { font-weight: 400; }
#payment .payment_box .epay-inline .epay-inline-rotulo { font-size: 13px !important; font-weight: 600 !important; margin: 0 0 8px !important; }
#payment .payment_box .epay-inline .epay-dica { font-size: 13px !important; line-height: 1.5 !important; }
#payment .payment_box .epay-inline .epay-seguro { font-size: 12px !important; }
#payment .payment_box .epay-inline .epay-powered { color: rgba(255,255,255,.75) !important; font-size: 12px !important; }
#payment .payment_box .epay-inline .epay-metodo span { font-size: 12px !important; font-weight: 600 !important; }
#payment .payment_box .epay-inline input[type="tel"] { color: #16161a !important; font-size: 16px !important; height: auto !important; }
#payment .payment_box .epay-inline img { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; }

/* 2.33.3: temas como o Ohio pintam o par "input[type=radio] + span"
   (display: inline, margem, altura de linha) e desenham o próprio rádio com
   appearance: none + borda. Mais específico do que o nosso .epay-metodo span,
   partiam o cartão do método: a borda em "[" e o logótipo fora do sítio.
   Estas regras têm a mesma forma que as do tema e ganham pela especificidade. */
.epay-inline .epay-metodos .epay-metodo { position: relative !important; display: block !important; float: none !important; padding: 0 !important; }
.epay-inline .epay-metodos .epay-metodo input[type="radio"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; pointer-events: none; }
.epay-inline .epay-metodos .epay-metodo input[type="radio"] + span { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center; gap: 6px; box-sizing: border-box; width: 100% !important; height: 100%; margin: 0 !important; padding: 10px 6px !important; border: 1px solid #fff !important; border-radius: 10px !important; line-height: 1.2 !important; vertical-align: top !important; background: transparent; }
.epay-inline .epay-metodos .epay-metodo input[type="radio"]:checked + span { background: #962649 !important; }
.epay-inline .epay-metodos .epay-metodo input[type="radio"] + span::before,
.epay-inline .epay-metodos .epay-metodo input[type="radio"] + span::after { content: none !important; display: none !important; }
.epay-inline .epay-metodos .epay-metodo input[type="radio"] + span img { height: 30px !important; width: auto !important; max-width: 100% !important; margin: 0 !important; display: block !important; }

/* Enquanto se espera pelo PIN só o nosso bloco interessa. */
body.epay-a-pagar #place_order,
body.epay-a-pagar .woocommerce-terms-and-conditions-wrapper,
body.epay-a-pagar ul.wc_payment_methods li.wc_payment_method:not(.payment_method_epay) { display: none !important; }
body.epay-a-pagar .blockUI.blockOverlay { display: none !important; }

.payment_box .epay-espera { margin: 0; padding: 28px 20px 18px; border-radius: 16px; background: #D61A5E; color: #fff; text-align: center; }
.epay-espera .epay-anel { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; border: 4px solid rgba(255,255,255,.35); border-top-color: #fff; animation: epay-rodar .8s linear infinite; }
@keyframes epay-rodar { to { transform: rotate(360deg); } }
.epay-espera-titulo { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: #fff; }
.epay-espera-msg { margin: 0 0 8px; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.95); }
.epay-espera-tempo { margin: 0 0 14px; font-size: 14px; color: rgba(255,255,255,.9); }
.epay-espera-erro, .epay-mudar-erro { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: rgba(0,0,0,.18); font-size: 13px; }
.epay-espera-accoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.epay-btn { padding: 10px 16px; border: 1.5px solid rgba(255,255,255,.8); border-radius: 10px; background: transparent; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.epay-btn:hover { background: rgba(255,255,255,.14); }
.epay-btn:disabled { opacity: .6; cursor: wait; }
.epay-espera[data-estado="failed"] .epay-espera-titulo::before { content: "✕  "; }
.epay-espera .epay-seguro { margin: 16px 0 0; }
.epay-espera-powered { margin: 6px 0 0; font-size: 12px; color: rgba(255,255,255,.75); }

/* "Mudar método": o mesmo painel, dentro do cartão de espera — sem o cabeçalho
   do banco (já está no cartão) e com o botão de pagar branco, como na EPay. */
.epay-mudar { margin: 6px 0 0; text-align: left; }
.epay-mudar .epay-inline { padding: 0; border-radius: 0; }
.epay-mudar .epay-pay-with, .epay-mudar .epay-seguro, .epay-mudar .epay-powered { display: none; }
.epay-btn-pagar { display: block; width: 100%; margin: 4px 0 0; padding: 14px; border: 0; border-radius: 10px; background: #fff; color: #D61A5E; font-size: 15px; font-weight: 700; }
.epay-btn-pagar:hover { background: #f2f2f2; }