/* ==========================================================================
   Onda 6 — Carrinho + Checkout
   Resumo do pedido, cupom, frete, CTA e checkout com progresso/confianca.
   ========================================================================== */

/* ---------- Carrinho ---------- */
.woocommerce-cart .woocommerce {
  font-family: var(--lobo-font-family);
}

.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-cart .woocommerce-cart-form__contents th {
  font-family: var(--lobo-font-family);
  font-weight: var(--lobo-font-bold);
  color: var(--lobo-primary);
}

/* Tabela de itens */
.woocommerce-cart .shop_table {
  border: 1px solid var(--lobo-border);
  border-radius: var(--lobo-radius-md);
}

.woocommerce-cart .shop_table th {
  background: var(--lobo-bg-alt);
  font-size: var(--lobo-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lobo-text-muted);
  padding: var(--lobo-space-3);
}

.woocommerce-cart .shop_table td {
  padding: var(--lobo-space-3);
  vertical-align: middle;
}

.woocommerce-cart .product-thumbnail img {
  border-radius: var(--lobo-radius-sm);
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.woocommerce-cart .product-name a {
  color: var(--lobo-text);
  font-weight: var(--lobo-font-semibold);
}

.woocommerce-cart .product-price,
.woocommerce-cart .product-subtotal {
  font-weight: var(--lobo-font-bold);
  color: var(--lobo-primary);
}

/* Quantidade */
.woocommerce-cart .quantity input.qty {
  border: 1px solid var(--lobo-border);
  border-radius: var(--lobo-radius-sm);
  padding: var(--lobo-space-1);
  width: 60px;
  text-align: center;
  font-family: var(--lobo-font-family);
}

/* Remover item */
.woocommerce-cart .product-remove a {
  color: var(--lobo-error) !important;
  font-size: var(--lobo-text-lg);
}

/* Cupom */
.woocommerce-cart .coupon {
  display: flex;
  gap: var(--lobo-space-2);
  margin-top: var(--lobo-space-4);
}

.woocommerce-cart .coupon input {
  border: 1px solid var(--lobo-border);
  border-radius: var(--lobo-radius-sm);
  padding: var(--lobo-space-2) var(--lobo-space-3);
  font-family: var(--lobo-font-family);
  flex: 1;
  max-width: 240px;
}

.woocommerce-cart .coupon .button {
  background: var(--lobo-secondary);
  color: #000000;
  border: none;
  border-radius: var(--lobo-radius-sm);
  font-weight: var(--lobo-font-semibold);
  padding: var(--lobo-space-2) var(--lobo-space-4);
}

/* Resumo / Totais */
.woocommerce-cart .cart_totals {
  background: var(--lobo-bg-alt);
  border: 1px solid var(--lobo-border);
  border-radius: var(--lobo-radius-md);
  padding: var(--lobo-space-5);
}

.woocommerce-cart .cart_totals table {
  width: 100%;
}

.woocommerce-cart .cart_totals .order-total .amount {
  color: var(--lobo-primary);
  font-size: var(--lobo-text-2xl);
  font-weight: var(--lobo-font-bold);
}

/* CTA Finalizar */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  display: block;
  background: var(--lobo-cta);
  color: #ffffff;
  text-align: center;
  font-family: var(--lobo-font-family);
  font-weight: var(--lobo-font-bold);
  font-size: var(--lobo-text-lg);
  text-transform: uppercase;
  padding: var(--lobo-space-4);
  border-radius: var(--lobo-radius-md);
  margin-top: var(--lobo-space-4);
  transition: background var(--lobo-transition-base);
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
  background: var(--lobo-cta-hover);
}

/* ---------- Checkout ---------- */
.woocommerce-checkout .woocommerce {
  font-family: var(--lobo-font-family);
}

/* Campos do formulario */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  font-family: var(--lobo-font-family);
  border: 1px solid var(--lobo-border);
  border-radius: var(--lobo-radius-sm);
  padding: var(--lobo-space-3);
  font-size: var(--lobo-text-base);
  transition: border-color var(--lobo-transition-fast);
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
  border-color: var(--lobo-secondary);
  outline: none;
  box-shadow: 0 0 0 2px rgb(212 175 55 / 0.15);
}

/* Labels */
.woocommerce-checkout .form-row label {
  font-weight: var(--lobo-font-semibold);
  color: var(--lobo-primary);
  font-size: var(--lobo-text-sm);
}

.woocommerce-checkout .form-row .required {
  color: var(--lobo-cta);
}

/* Validacao visual */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text {
  border-color: var(--lobo-error);
}

.woocommerce-checkout .form-row.woocommerce-validated input.input-text {
  border-color: var(--lobo-success);
}

/* Resumo do pedido no checkout */
.woocommerce-checkout .woocommerce-checkout-review-order {
  background: var(--lobo-bg-alt);
  border: 1px solid var(--lobo-border);
  border-radius: var(--lobo-radius-md);
  padding: var(--lobo-space-5);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th {
  font-weight: var(--lobo-font-semibold);
  color: var(--lobo-text-muted);
  font-size: var(--lobo-text-sm);
  text-transform: uppercase;
}

.woocommerce-checkout .order-total .amount {
  font-size: var(--lobo-text-2xl);
  font-weight: var(--lobo-font-bold);
  color: var(--lobo-primary);
}

/* Metodos de pagamento */
.woocommerce-checkout #payment {
  background: var(--lobo-bg);
  border: 1px solid var(--lobo-border);
  border-radius: var(--lobo-radius-md);
}

.woocommerce-checkout #payment .payment_methods li {
  padding: var(--lobo-space-3);
}

.woocommerce-checkout #payment .payment_methods li label {
  font-weight: var(--lobo-font-semibold);
  color: var(--lobo-text);
}

/* Botao Finalizar Compra */
.woocommerce-checkout #place_order {
  background: var(--lobo-cta) !important;
  color: #ffffff !important;
  font-family: var(--lobo-font-family) !important;
  font-weight: var(--lobo-font-bold) !important;
  font-size: var(--lobo-text-lg) !important;
  text-transform: uppercase;
  width: 100%;
  padding: var(--lobo-space-4) !important;
  border: none !important;
  border-radius: var(--lobo-radius-md) !important;
  margin-top: var(--lobo-space-4);
  transition: background var(--lobo-transition-base) !important;
}

.woocommerce-checkout #place_order:hover {
  background: var(--lobo-cta-hover) !important;
}

/* ---------- Barra de Progresso (Checkout) ---------- */
.lobo-checkout-progress {
  display: flex;
  justify-content: center;
  gap: var(--lobo-space-6);
  list-style: none;
  margin-top: 0;
  padding: var(--lobo-space-4) 0;
  margin-bottom: var(--lobo-space-6);
  border-bottom: 1px solid var(--lobo-border);
}

.lobo-progress-step {
  display: flex;
  align-items: center;
  gap: var(--lobo-space-2);
  font-size: var(--lobo-text-sm);
  color: var(--lobo-text-muted);
  font-weight: var(--lobo-font-medium);
}

.lobo-progress-step .step-number {
  width: 28px;
  height: 28px;
  border-radius: var(--lobo-radius-full);
  background: var(--lobo-border);
  color: var(--lobo-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--lobo-text-xs);
  font-weight: var(--lobo-font-bold);
}

.lobo-progress-step.is-active {
  color: var(--lobo-primary);
}

.lobo-progress-step.is-active .step-number {
  background: var(--lobo-secondary);
  color: #000000;
}

.lobo-progress-step.is-complete .step-number {
  background: var(--lobo-success);
  color: #ffffff;
}

/* ---------- Selos de Confianca ---------- */
.lobo-trust-seals {
  display: flex;
  justify-content: center;
  gap: var(--lobo-space-4);
  padding: var(--lobo-space-4);
  margin-top: var(--lobo-space-6);
  border-top: 1px solid var(--lobo-border);
}

.lobo-trust-seals span {
  font-size: var(--lobo-text-xs);
  color: var(--lobo-text-muted);
  display: flex;
  align-items: center;
  gap: var(--lobo-space-1);
}

/* ---------- Mensagens (erro, sucesso, info) ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: var(--lobo-font-family);
  border-radius: var(--lobo-radius-md);
  padding: var(--lobo-space-4);
}

.woocommerce-message {
  border-top-color: var(--lobo-success);
}

.woocommerce-error {
  border-top-color: var(--lobo-error);
}

.woocommerce-info {
  border-top-color: var(--lobo-info);
}

/* ---------- Responsivo Carrinho/Checkout ---------- */
@media (max-width: 768px) {
  .woocommerce-cart .shop_table td {
    padding: var(--lobo-space-2);
  }

  .woocommerce-cart .coupon {
    flex-direction: column;
  }

  .woocommerce-cart .coupon input {
    max-width: 100%;
  }

  .lobo-checkout-progress {
    flex-direction: column;
    gap: var(--lobo-space-2);
    align-items: center;
  }

  .woocommerce-checkout .woocommerce-checkout-review-order {
    padding: var(--lobo-space-3);
  }
}

/* ==========================================================================
   K01 — paleta do tema nos blocos do carrinho.

   Todo o CSS acima mira o carrinho e o checkout CLÁSSICOS
   (`.woocommerce-cart .product-name`, `.woocommerce-checkout .form-row`).
   O carrinho, porém, é WooCommerce Blocks: nenhuma daquelas regras o alcança,
   e por isso "Finalizar Compra" e os links do produto ficavam no azul padrão
   dos blocos (#2872fa), fora da paleta preto/dourado/vermelho.

   O checkout deixou de precisar disto em 30/08: com o C01 ele voltou a ser
   o shortcode clássico e passou a ser pego pelas regras de cima.
   ========================================================================== */

.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-components-checkout-place-order-button {
  background-color: var(--lobo-cta);
  color: #ffffff;
  font-family: var(--lobo-font-family);
  font-weight: var(--lobo-font-bold);
  text-transform: uppercase;
  border-radius: var(--lobo-radius-md);
  border: none;
  transition: background-color var(--lobo-transition-base);
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-components-checkout-place-order-button:hover {
  background-color: var(--lobo-cta-hover);
  color: #ffffff;
}

/* Links dentro do carrinho: nome do produto, "aplicar cupom", remover. */
.wp-block-woocommerce-cart a:not(.wc-block-cart__submit-button),
.wp-block-woocommerce-cart .wc-block-components-product-name {
  color: var(--lobo-text);
  text-decoration: none;
}

.wp-block-woocommerce-cart a:not(.wc-block-cart__submit-button):hover,
.wp-block-woocommerce-cart .wc-block-components-product-name:hover {
  color: var(--lobo-primary);
  text-decoration: underline;
  text-decoration-color: var(--lobo-secondary);
}

/* Botões secundários dos blocos (cupom, +/- de quantidade). */
.wp-block-woocommerce-cart .wc-block-components-button.is-link,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button {
  color: var(--lobo-text);
}

.wp-block-woocommerce-cart .wc-block-components-button.is-link:hover,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button:hover {
  color: var(--lobo-primary);
}

/* O total é a informação que decide a compra: na cor do tema, não no azul. */
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--lobo-primary);
}

/* K03 — aviso do PIX em caixa neutra.

   O texto vinha com `<mark>` azul (#1559ed) e vermelho (#cf2e2e) no meio da
   frase, o que lia como mensagem de erro do formulário em vez de informação.
   Caixa discreta, com a barra dourada da marca para chamar atenção sem alarme. */
.woocommerce-checkout .lobo-aviso-pix,
.woocommerce-checkout p.lobo-aviso-pix {
  margin: 0 0 var(--lobo-space-5);
  padding: var(--lobo-space-3) var(--lobo-space-4);
  background: var(--lobo-bg-alt);
  border: 1px solid var(--lobo-border);
  border-left: 3px solid var(--lobo-secondary);
  border-radius: var(--lobo-radius-md);
  color: var(--lobo-text);
  font-size: var(--lobo-text-sm);
  font-weight: var(--lobo-font-regular);
}

.woocommerce-checkout .lobo-aviso-pix strong {
  font-weight: var(--lobo-font-semibold);
}

/* K02 — linha do preço no PIX, irmã do bloco de resumo do carrinho. */
.lobo-carrinho-pix {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--lobo-space-3);
  margin-top: var(--lobo-space-3);
  padding: var(--lobo-space-3) var(--lobo-space-4);
  background: var(--lobo-bg-alt);
  border: 1px solid var(--lobo-border);
  border-left: 3px solid var(--lobo-secondary);
  border-radius: var(--lobo-radius-md);
  font-size: var(--lobo-text-sm);
  color: var(--lobo-text-muted);
}

/* O JS esconde a linha com `hidden` enquanto busca os totais na Store API, e
   quando o carrinho zera. Sem esta regra o `display: flex` acima vence o
   `[hidden]` do navegador e a caixa fica visível E VAZIA — foi o que apareceu
   no teste de pedido real de 31/08, logo depois de trocar o frete. É a sexta
   vez que esta armadilha morde neste tema: toda regra nossa com `display` em
   elemento controlado por `hidden` precisa do par. */
.lobo-carrinho-pix[hidden] {
  display: none;
}

.lobo-carrinho-pix__valor {
  font-size: var(--lobo-text-lg);
  font-weight: var(--lobo-font-bold);
  color: var(--lobo-primary);
  white-space: nowrap;
}

/* ---------- Selects do checkout clássico ---------- */

/* O mesmo defeito que a PDP teve em 30/08: o Blocksy fixa `height: 40px` em
   todo `select`, e com o padding sobram ~16px para uma linha de 26px — o texto
   sai cortado pela metade. Apareceu no teste de pedido real de 31/08, no campo
   País ("Brasil" cortado na horizontal). A correção da PDP vale só para
   `.single-product .variations select`; o checkout ficou de fora. */
.woocommerce-checkout .form-row select,
.woocommerce-checkout select.country_select,
.woocommerce-checkout select.state_select {
  height: auto;
  min-height: 44px;
  padding: var(--lobo-space-2) var(--lobo-space-3);
  padding-inline-end: 28px; /* espaço da seta que o Blocksy desenha */
  line-height: 1.3;
}