/**
 * Checkout — complemento visual na filosofia do mini cart "Pix expresso"
 * (v1.3.1, 18/09/2026). Enfileirado pelo mu-plugin pcc-checkout-skin.php, via
 * filtro documentado do wc-smart-checkout, só nas telas do checkout.
 *
 * DIVISÃO DE RESPONSABILIDADES
 *   Opções do plugin (Personalizar → Checkout) — NÃO repetir aqui:
 *     botões: verde #16a34a / hover #107a38, raio 12 · colunas: raio 16,
 *     sombra 0, bordas #eceff3 · cabeçalho: fundo #fff, texto #212529,
 *     selo #16a34a · rodapé: texto #8b939d, widgets "Formas de pagamento" +
 *     "Copyright" (ícones e texto) · CSS do Nextend.
 *   Este arquivo — só o que o painel não cobre.
 *
 * Paleta (a mesma do pcc-minicart.css): verde #16A34A = dinheiro; azul
 * #00AAFF = progresso/navegação; lilás #F1E5FC/#7C3AED = chips; ink #212529;
 * apoio #5a626b · #8b939d · #A6ADB5. Sem box-shadow. Fundo cinza #f6f7f9.
 *
 * FRAGILIDADE A ATUALIZAÇÕES DO PLUGIN — cada seção traz uma etiqueta:
 *   [var]    depende de variável CSS interna do plugin (não é opção de painel)
 *   [classe] depende de nome de classe do HTML do plugin
 *   [nosso]  só classes pcc-* (HTML nosso) — imune a atualização
 * Se algo mudar no plugin, a regra apenas deixa de casar e o trecho volta ao
 * visual padrão; nada quebra a compra. Roteiro de conferência no README do
 * pacote deploy/2026-09-18-checkout-skin-atelie/.
 */

/* ---------------------------------------------------------------------------
 * 1. [var] Variáveis internas do plugin sem opção no painel
 *    (--body-background, --dark, --section-group-title-color, --green*,
 *    --input-*, --payments-active, --payment-box-background,
 *    --order-totals-color, --column-container-padding)
 * ------------------------------------------------------------------------ */
body.woocommerce-checkout,
body.woocommerce-checkout *,
body.woocommerce-order-pay,
body.woocommerce-order-pay *,
body.woocommerce-order-received,
body.woocommerce-order-received * {
	--body-background: #f6f7f9;
	--dark: #212529;
	--section-group-title-color: #212529;
	--fields-group-background: #ffffff;

	--column-container-padding: 18px 18px 20px;
	--green: #16a34a;
	--green-soft-background: #ffffff;

	--input-border-color: #dfe3e8;
	--input-focus-border-color: #00aaff;

	--payments-active: #f2faff;
	--payment-box-background: transparent;
	--order-totals-color: #212529;
}

/* ---------------------------------------------------------------------------
 * 2. [classe: body.woocommerce-checkout, .checkout-header] Base: a fonte do
 *    site (Manrope, @font-face no pcc-fonts.css que o PHP libera no checkout);
 *    a Nunito do Google Fonts foi desligada. system-ui é só o fallback.
 * ------------------------------------------------------------------------ */
body.woocommerce-checkout,
body.woocommerce-checkout button,
body.woocommerce-checkout input,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea,
body.woocommerce-checkout .button,
body.woocommerce-order-pay,
body.woocommerce-order-received {
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* O plugin pinta `body, input, textarea` com --body-background: o cinza fica
   só na página; campos continuam brancos. */
body.woocommerce-checkout,
body.woocommerce-order-pay,
body.woocommerce-order-received {
	background: #f6f7f9;
	color: #212529;
	-webkit-font-smoothing: antialiased;
}

body.woocommerce-checkout input,
body.woocommerce-checkout textarea,
body.woocommerce-checkout select {
	background-color: #ffffff;
}

body.woocommerce-checkout .checkout-header {
	border-bottom: 1px solid #f0f0f0;
}

/* ---------------------------------------------------------------------------
 * 3. [classe: .checkout-fields-group(.active|.done|.disabled),
 *    .section-group-title, .step-number, .section-group-awaiting]
 *    Cards de etapa — azul marca o progresso, lilás o que já foi feito
 * ------------------------------------------------------------------------ */
body.woocommerce-checkout .checkout-container .checkout-fields-group {
	box-shadow: none;
}

body.woocommerce-checkout .checkout-container .checkout-fields-group .section-group-title {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #212529;
}

body.woocommerce-checkout .checkout-container .checkout-fields-group .section-group-title .step-number {
	width: 22px;
	height: 22px;
	font-size: 11.5px;
	font-weight: 700;
}

body.woocommerce-checkout .checkout-container .checkout-fields-group.disabled .section-group-title {
	color: #a6adb5;
}

body.woocommerce-checkout .checkout-container .checkout-fields-group.disabled .section-group-title .step-number {
	background: #f1f3f5;
	color: #8b939d;
}

body.woocommerce-checkout .checkout-container .checkout-fields-group .section-group-awaiting {
	color: #a6adb5;
	font-size: 12.5px;
}

body.woocommerce-checkout .checkout-container .checkout-fields-group.active {
	border-color: #00aaff;
}

body.woocommerce-checkout .checkout-container .checkout-fields-group.active .section-group-title .step-number {
	background: #00aaff;
	color: #ffffff;
}

/* Concluída: o mesmo chip lilás do contador do mini cart. */
body.woocommerce-checkout .checkout-container .checkout-fields-group.done .section-group-title .step-number {
	background: #f1e5fc;
	color: #7c3aed;
}

body.woocommerce-checkout .checkout-container .checkout-fields-group.done:hover {
	border-color: #dcbdf7;
}

/* ---------------------------------------------------------------------------
 * 4. [classe: .checkout-container, input.input-text] Campos (raio 10 e foco
 *    azul, como o CEP do mini cart)
 * ------------------------------------------------------------------------ */
body.woocommerce-checkout .checkout-container label {
	font-size: 12.5px;
	font-weight: 600;
	color: #40484f;
}

body.woocommerce-checkout .checkout-container input.input-text,
body.woocommerce-checkout .checkout-container select,
body.woocommerce-checkout .checkout-container textarea,
body.woocommerce-checkout .checkout-container .select2-container .select2-selection--single {
	min-height: 46px;
	border-radius: 10px;
	border-color: #dfe3e8;
	color: #212529;
	font-size: 16px; /* menos que isso o iOS dá zoom na página ao focar */
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.woocommerce-checkout .checkout-container input.input-text:focus,
body.woocommerce-checkout .checkout-container select:focus,
body.woocommerce-checkout .checkout-container textarea:focus {
	border-color: #00aaff;
	box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.22);
	outline: 0;
}

body.woocommerce-checkout .checkout-container input.input-text::placeholder {
	color: #a6adb5;
}

/* ---------------------------------------------------------------------------
 * 5. [classe: .smart-checkout-apply-coupon, .show-coupon-button,
 *    .wc-smart-checkout-coupon-container, .coupon-code-form,
 *    .mobile-order-review-toggle] Botões — a cor/raio do CTA vêm do painel;
 *    aqui só peso, altura e os secundários
 * ------------------------------------------------------------------------ */
body.woocommerce-checkout .checkout-container button,
body.woocommerce-checkout .checkout-container .button {
	min-height: 52px;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	box-shadow: none;
}

body.woocommerce-checkout .checkout-container button:not(.mobile-order-review-toggle):active,
body.woocommerce-checkout .checkout-container .button:active {
	transform: translateY(1px);
}

body.woocommerce-checkout .checkout-container button:focus-visible,
body.woocommerce-checkout .checkout-container .button:focus-visible {
	box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.3);
	outline: 0;
}

/* Secundário (aplicar cupom): azul de navegação, como o "OK" do frete. */
body.woocommerce-checkout .checkout-container .smart-checkout-apply-coupon.button {
	min-height: 46px;
	border-radius: 10px;
	background-color: #00aaff;
	font-size: 14px;
}

body.woocommerce-checkout .checkout-container .smart-checkout-apply-coupon.button:hover {
	background-color: #0090db;
}

/* "Tenho um cupom de desconto": gatilho discreto, no molde do gatilho de
   frete do mini cart — não é CTA, então não herda o verde nem os 52px. */
body.woocommerce-checkout .checkout-container .show-coupon-button {
	min-height: 44px;
	padding: 10px 13px;
	border: 1px solid #eceff3;
	border-radius: 12px;
	background-color: #ffffff;
	color: #212529;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-align: left;
}

/* O plugin põe a própria moldura (1px, raio 5) no container do cupom: com o
   gatilho já em cartão raio 12, virava uma borda quadrada em volta dele. */
body.woocommerce-checkout .checkout-container .wc-smart-checkout-coupon-container {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

body.woocommerce-checkout .checkout-container .wc-smart-checkout-coupon-container .coupon-code-form {
	padding: 0;
}

body.woocommerce-checkout .checkout-container .show-coupon-button:hover {
	border-color: #00aaff;
	background-color: #ffffff;
	color: #212529;
}

body.woocommerce-checkout .checkout-container a {
	color: #0090db;
}

/* ---------------------------------------------------------------------------
 * 6. [classe: padrão WooCommerce (.wc_payment_method, #shipping_method,
 *    .payment_box) + .payment-method-title do plugin] Linhas de opção
 * ------------------------------------------------------------------------ */

/* Envio: o plugin desenha a LISTA como um cartão único (raio 4 + sombra,
   linhas divisórias) e marca o escolhido com uma barra azul à esquerda
   (label:before). Aqui cada opção é um cartão — então o cartão da lista e a
   barra saem, senão os dois estilos competem. */
body.woocommerce-checkout .checkout-shipping-options .woocommerce-shipping-totals .woocommerce-shipping-methods {
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: visible;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

body.woocommerce-checkout .checkout-shipping-options .woocommerce-shipping-totals .woocommerce-shipping-methods li,
body.woocommerce-checkout .checkout-shipping-options .woocommerce-shipping-totals .woocommerce-shipping-methods li:last-child {
	margin: 0;
	border: 1px solid #eceff3;
}

body.woocommerce-checkout .checkout-shipping-options .woocommerce-shipping-totals .woocommerce-shipping-methods li label:before {
	content: none;
}

body.woocommerce-checkout .checkout-shipping-options .woocommerce-shipping-totals .woocommerce-shipping-methods li:hover {
	border-color: #00aaff;
	background-color: #ffffff;
}

body.woocommerce-checkout .checkout-shipping-options .woocommerce-shipping-totals .woocommerce-shipping-methods li:has(input:checked),
body.woocommerce-checkout .checkout-shipping-options .woocommerce-shipping-totals .woocommerce-shipping-methods li:has(input:checked):hover {
	border-color: #00aaff;
	background-color: #f2faff;
}
body.woocommerce-checkout .wc_payment_methods li.wc_payment_method,
body.woocommerce-checkout #shipping_method li {
	border: 1px solid #eceff3;
	border-radius: 12px;
	background-color: #ffffff;
	box-shadow: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

body.woocommerce-checkout .wc_payment_methods li.wc_payment_method:has(> input:checked),
body.woocommerce-checkout #shipping_method li:has(input:checked) {
	border-color: #00aaff;
	background-color: #f2faff;
}

body.woocommerce-checkout .wc_payment_methods li.wc_payment_method > label .payment-method-title {
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #212529;
}

body.woocommerce-checkout input[type="radio"],
body.woocommerce-checkout input[type="checkbox"] {
	accent-color: #00aaff;
}

/* "5% off" do título do Pix: o selo pill de economia do mini cart. */
body.woocommerce-checkout .wc_payment_methods .payment-method-title small {
	display: inline-block;
	margin-left: 6px;
	padding: 3px 9px;
	border-radius: 999px;
	background: #16a34a;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	vertical-align: 1px;
}

/* Layout "Cards" do plugin (nenhum meio pré-marcado): depois da escolha os
   outros meios recolhem e surge o "Trocar" na linha do título. O plugin o
   desenha como bloco preto em caixa alta; aqui é navegação — pill azul discreto. */
body.woocommerce-checkout .payment-layout-cards .wc-smart-checkout-change-payment {
	top: -39px;
	min-height: 0; /* os botões do checkout têm min-height 52px (Avançar/Comprar) */
	height: auto;
	padding: 7px 12px;
	border: 1px solid #cdeeff;
	border-radius: 999px;
	background: #f2faff;
	color: #0090db;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

body.woocommerce-checkout .payment-layout-cards .wc-smart-checkout-change-payment:hover {
	border-color: #00aaff;
	background: #e3f5ff;
}

body.woocommerce-checkout .payment-layout-cards .wc-smart-checkout-change-payment:active {
	transform: none;
}

/* Cartão da Stone no layout "Cards": o plugin troca o ícone do gateway pelas
   bandeiras no rótulo, e o logo "stone" (pcc-checkout-gateway-icons.php) some —
   o template não tem hook nem recebe o gateway no filtro das bandeiras. O mesmo
   wordmark volta aqui como fundo do rótulo, à direita. Só o wordmark, sem o
   glifo do cartão no anel: na coluna estreita do desktop (rótulo ~206 px) os
   dois juntos encostam no título "Cartão de Crédito". */
body.woocommerce-checkout .payment-layout-cards li.payment_method_woo-pagarme-payments-credit_card > label.has-card-icons {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='13 855 2491 651'%3E%3Cpath fill='%2300a868' d='m 1418.2,1488.5 h 111.1 a 8.1,8.1 0 0 0 6,-2.1 7.8,7.8 0 0 0 2.6,-5.6 v -301.4 c 0,-85.5 42.8,-130.5 116.5,-130.5 73.8,0 115.8,45 115.8,130.5 V 1480.8 a 7.7,7.7 0 0 0 5.4,7.3 8.1,8.1 0 0 0 3.2,0.4 h 111.1 a 8.1,8.1 0 0 0 6,-2 7.8,7.8 0 0 0 2.6,-5.7 v -300.6 c 0,-129 -73,-241.9 -243.9,-241.9 -171,0 -244.7,112.9 -244.7,241.9 v 300.7 a 7.7,7.7 0 0 0 2.6,5.6 8,8 0 0 0 6,2 z m -764.5,6.9 c 40.4,0 66.8,-4.6 78.5,-9.2 a 9.9,9.9 0 0 0 6.2,-8.4 v -90.1 c 0,-5.4 -2.4,-8.4 -9.3,-8.4 -5.4,0 -21,3 -33.4,3 -48.2,0 -69.1,-17.5 -69.1,-58.7 v -254.1 h 102.6 a 8.7,8.7 0 0 0 6,-2.4 8.4,8.4 0 0 0 2.5,-6 v -98.4 a 8.4,8.4 0 0 0 -2.5,-5.9 8.7,8.7 0 0 0 -6,-2.5 H 622.7 V 868.8 c 0,-9.2 -3.9,-13 -10.9,-13 H 506.9 c -8.5,0 -12.4,3.8 -12.4,13 v 467.8 c 0,113.7 64.5,158.8 159.2,158.8 z m -445.9,6.1 c 125.1,0 214.5,-75.6 214.5,-174 0,-110.7 -74.6,-142.7 -176.4,-164.1 l -50.5,-10.7 c -38,-8.4 -59,-26 -59,-55.7 0,-38.2 38.9,-58.7 92.5,-58.7 75.4,0 126.6,33.6 134.4,33.6 a 12.1,12.1 0 0 0 10.1,-6.9 l 20.2,-74 c 3.9,-9.9 3.1,-12.2 -3.9,-16 -45.1,-22.9 -93.2,-35.9 -161.6,-35.9 -126.6,0 -214.4,71.7 -214.4,167.2 0,90.1 70.7,139.6 171.8,161 l 51.3,10.7 c 41.2,8.4 64.4,24.4 64.4,58.7 0,35.1 -28,65.6 -94,65.6 -93.2,0 -156.9,-36.6 -167,-36.6 -6.2,0 -8.6,3.1 -10.9,13 l -13.2,61.8 c -3.9,13 0,21.4 8.6,25.2 31.9,17.5 118.9,35.9 183.4,35.9 z m 847.6,-106.1 c -81.6,0 -156.1,-60.3 -156.1,-174 0,-113.7 74.6,-172.6 156.1,-172.6 82.3,0 155.4,58.8 155.4,172.6 0,114.5 -73.1,174 -155.4,174 z m 0,109.9 c 163.1,0 282,-119.8 282,-283.9 0,-164.1 -118.8,-283.1 -282,-283.1 -162.4,0 -282,119.1 -282,283.1 0,164.1 119.6,283.9 282,283.9 z m 1447.7,-290 c 0,-168.7 -98.7,-277 -255.7,-277 -147.6,0 -275,111.4 -275,280.8 0,180.9 130.5,286.2 270.3,286.2 117.3,0 185,-45.4 226.9,-100.7 8.1,-10.7 9.7,-15.3 9.7,-18.3 0,-3 -1.9,-5.3 -9,-11.5 l -49,-41.9 c -11.7,-9.9 -15.6,-13 -19.5,-13 -3.9,0 -6.3,2.3 -9.4,6.1 -33.4,44.3 -80,69.4 -142.9,69.4 -79.4,0 -132.3,-53 -145.7,-138.9 h 358.5 c 25,0.1 40.6,-7.7 40.6,-41.1 z m -260.3,-170.9 c 84.8,0 129.6,56.2 132.1,118.3 h -269 c 14.7,-66.7 60.8,-118.3 137,-118.3 z'/%3E%3C/svg%3E") right center / 50px 13px no-repeat;
}

/* Aviso "Selecione um método de pagamento" (SweetAlert do plugin): o OK sai do
   roxo padrão da biblioteca para o azul de navegação. */
body.woocommerce-checkout .swal2-popup .swal2-styled.swal2-confirm {
	border-radius: 12px;
	background-color: #00aaff;
	box-shadow: none;
}

/* Barra fixa do celular (opção "Botão fixo no celular" do plugin): o mesmo
   cadeado do "Comprar". Vai por ::before + máscara, e não por SVG no HTML,
   porque o JS do plugin regrava o botão com textContent a cada sincronização —
   apagaria qualquer filho. Mesmo path do PCC_CHECKOUT_LOCK_SVG. */
body.woocommerce-checkout .rishi-mobile-payment-bar .rishi-mobile-payment-bar__button::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 10px;
	vertical-align: -1px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Instrução do Pix (Stone): a caixa verde-clara da pix line. */
body.woocommerce-checkout .payment_box.payment_method_woo-pagarme-payments-pix fieldset > p:not(.form-row) {
	margin: 0;
	padding: 9px 12px;
	border-radius: 12px;
	background: #f0fdf4;
	color: #15803d;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.45;
}

/* ---------------------------------------------------------------------------
 * 7. [nosso] Trust strip sob o "Comprar" — texto discreto, igual ao do drawer
 * ------------------------------------------------------------------------ */
body.woocommerce-checkout .pcc-ck-trust {
	margin: 12px 0 0;
	padding: 0 4px;
	text-align: center;
	font-size: 11px;
	line-height: 1.6;
	color: #a6adb5;
}

body.woocommerce-checkout .pcc-ck-trust span {
	margin: 0 7px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * 8. Resumo do pedido — aviso de frete grátis [nosso]; item e totais [classe:
 *    .order-items-container, .cart_item, .product-details-image(-bubble),
 *    .product-data-title-name, .product-details-total-amount, .order-totals,
 *    .fee, .order-total, .column-label, .column-value]
 * ------------------------------------------------------------------------ */

/* Frete grátis conquistado (abaixo do Total): verde = dinheiro, no molde da
   caixa do Pix. O "Faltam R$ X" saiu — no checkout ele chamava de volta à loja. */
body.woocommerce-checkout #order_review .pcc-ck-freeship {
	margin: 12px 0 0;
	padding: 9px 12px;
	border-radius: 12px;
	background: #f0fdf4;
	color: #15803d;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
}

/* Itens em cartão #F9FAFB, sem linha divisória — como no drawer. */
body.woocommerce-checkout #order_review .order-items-container,
body.woocommerce-checkout #order_review .order-items {
	border-bottom: 0;
}

body.woocommerce-checkout #order_review .order-items-container .cart_item {
	margin: 0 0 8px;
	padding: 10px;
	border-radius: 14px;
	background: #f9fafb;
}

body.woocommerce-checkout #order_review .product-details-image img {
	border-radius: 8px;
}

body.woocommerce-checkout #order_review .product-data-title-name {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #212529;
}

body.woocommerce-checkout #order_review .product-details-total-amount {
	font-size: 13.5px;
	font-weight: 700;
	color: #212529;
}

/* Bolha de quantidade: chip lilás. */
body.woocommerce-checkout #order_review .product-details-image-bubble {
	background: #f1e5fc;
	color: #7c3aed;
	font-weight: 700;
}

body.woocommerce-checkout #order_review .order-totals {
	font-size: 13px;
	color: #5a626b;
}

/* "Desconto para Pix" (fee negativa): verde só no dinheiro. */
body.woocommerce-checkout #order_review .order-totals .fee,
body.woocommerce-checkout #order_review .order-totals .fee .amount {
	color: #16a34a;
	font-weight: 700;
}

body.woocommerce-checkout #order_review .order-totals .order-total .column-label {
	color: #212529;
	font-size: 13.5px;
	font-weight: 700;
}

body.woocommerce-checkout #order_review .order-totals .order-total .column-value,
body.woocommerce-checkout #order_review .order-totals .order-total .amount {
	color: #212529;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
 * 9. [classe: .checkout-steps-timeline-item, #order_review.checkout-column,
 *    .mobile-order-review-toggle, .summary-title, .summary-arrow] Mobile
 * ------------------------------------------------------------------------ */
body.woocommerce-checkout .checkout-steps-timeline-item:after,
body.woocommerce-checkout .checkout-steps-timeline-item:before {
	background: #00aaff;
}

@media (max-width: 599px) {
	body.woocommerce-checkout .checkout-container #order_review.checkout-column {
		background: #ffffff;
		border: 1px solid #eceff3;
		border-radius: 12px;
		box-shadow: none;
	}

	body.woocommerce-checkout #order_review .mobile-order-review-toggle {
		min-height: 0;
		background: transparent;
		color: #212529;
	}

	/* "Seu pedido e cupom" em caixa normal: o drawer não grita em maiúsculas. */
	body.woocommerce-checkout #order_review .mobile-order-review-toggle .summary-title * {
		text-transform: none;
		letter-spacing: -0.01em;
	}

	body.woocommerce-checkout #order_review .mobile-order-review-toggle .summary-arrow {
		border-color: #00aaff;
	}
}

/* ---------------------------------------------------------------------------
 * 10. Rodapé — "Formas de pagamento" e "Copyright" são widgets do plugin
 *     [classe: #checkout-footer, .checkout-payment-methods(-title|-badges),
 *     .footer-copyright]; "Formas de entrega" é HTML nosso [nosso:
 *     .pcc-ck-delivery], injetado pelo PHP antes do widget de pagamento.
 *     Entrega e pagamento lado a lado; o resto ocupa a linha inteira.
 * ------------------------------------------------------------------------ */
body #checkout-footer {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 8px 48px;
	padding: 22px 16px;
	border-color: #eceff3;
}

body #checkout-footer > * {
	flex: 0 0 100%;
}

body #checkout-footer > div:first-child {
	padding-top: 0;
}

body #checkout-footer > div:last-child {
	margin-bottom: 0;
}

body #checkout-footer > .pcc-ck-delivery,
body #checkout-footer > .checkout-payment-methods {
	flex: 0 1 auto;
}

body #checkout-footer .checkout-payment-methods-title {
	margin: 0;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #212529;
}

body #checkout-footer .checkout-payment-methods-badges,
.pcc-ck-delivery__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 14px;
	min-height: 30px;
	padding: 12px 0;
}

body #checkout-footer .checkout-payment-methods-badges > span {
	display: inline-flex;
}

.pcc-ck-delivery__badges {
	gap: 8px 12px;
}

/* Logo real da transportadora, na altura dos cartões de bandeira (26px). */
.pcc-ck-delivery__logo {
	display: inline-flex;
}

.pcc-ck-delivery__logo img {
	display: block;
	width: auto;
	height: 26px;
	border-radius: 4px;
}

/* Sem marca (Motoboy) ou logo ausente: cartão neutro, no molde das bandeiras. */
.pcc-ck-delivery__chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	box-sizing: border-box;
	height: 26px;
	padding: 0 9px;
	border: 1px solid #b3b3b3;
	border-radius: 4px;
	background: #ffffff;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	color: #212529;
}

.pcc-ck-delivery__chip svg {
	flex: none;
}

body #checkout-footer .footer-copyright {
	font-size: 11px;
	line-height: 1.6; /* a cor vem do painel (Rodapé → Texto) */
}

@media (max-width: 599px) {
	body #checkout-footer {
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.woocommerce-checkout .checkout-container * {
		transition: none !important;
	}

	body.woocommerce-checkout .checkout-container button:active,
	body.woocommerce-checkout .checkout-container .button:active {
		transform: none;
	}
}