/* ==========================================================================
   Gráfica Penha — UX de Conta, Pedidos, Pagamento e Header
   account-ux.css  (Request D + E)
   ========================================================================== */

:root {
  --gp-blue: #144e82;
  --gp-blue-strong: #1a568c;
  --gp-blue-dark: #0e2a4f;
  --gp-amber: #f0ad4e;
  /* Os nomes "--gp-green-*" ficaram por HISTORICO (ha' uso espalhado pelo
     arquivo), mas o valor e' o azul da casa desde 2026-09-17: verde nenhum
     sobra na loja fora do botao do WhatsApp. --gp-green-strong-hover e' um
     degrau mais escuro, para hover. */
  --gp-green: #104f77;
  --gp-green-strong: #104f77;
  --gp-green-strong-hover: #0d3e5d;
  --gp-red: #ef4444;
  --gp-radius: 8px;
}

/* --------------------------------------------------------------------------
   1) Header — o dropdown da conta saiu na entrada [58]. Aqui vivia a
   "ponte de hover" (um ::before) que existia so' para o menu suspenso; o
   bloco do usuario logado agora e' um link direto para /minha-conta/
   (mesmas regras de .gph-icon).
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2) Página "Pagar pedido" (/finalizar-compra/order-pay/[id]/)
   -------------------------------------------------------------------------- */
/*
 * Container da página.
 *
 * O #order_review já tinha max-width 980 + margin auto, mas o container PAI (o
 * .wp-block-post-content do tema) não estava centralizado — então o conjunto
 * encostava à ESQUERDA em vez de ficar no meio, e a tela parecia estreita e
 * torta. Aqui o pai é alargado e centralizado; o grid acompanha.
 */
/*
 * O !important é contra o CSS GERADO pelo tema de blocos: o .entry-content leva
 * a classe `alignwide`, e o Twenty Twenty-Five aplica a largura "wide" dele por
 * cima da nossa. Sem forçar, medimos 68px de deslocamento (147px à esquerda,
 * 215px à direita) e a página continuava parecendo torta.
 */
body.woocommerce-order-pay .wp-site-blocks > main,
body.woocommerce-order-pay main,
body.woocommerce-order-pay .wp-block-post-content,
body.woocommerce-order-pay .entry-content {
  max-width: 1100px !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/*
 * Os wrappers INTERNOS do WooCommerce (o bloco de checkout e o .woocommerce que
 * ele gera) também impõem largura própria, e eram eles que seguravam o conteúdo
 * em 998px mesmo com o container já em 1100. Aqui eles soltam a largura e
 * deixam quem manda ser o container de cima.
 */
body.woocommerce-order-pay .entry-content > .woocommerce,
body.woocommerce-order-pay [data-block-name="woocommerce/checkout"],
body.woocommerce-order-pay [data-block-name="woocommerce/page-content-wrapper"] > .woocommerce {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Grid de 2 colunas: itens à esquerda, pagamento à direita. */
#order_review {
  max-width: 1100px;
  margin: 15px auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 24px;
  align-items: start;
}

/* Coluna esquerda: tabela de itens em cartão branco com cabeçalho azul. */
#order_review > table.shop_table {
  grid-column: 1;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--gp-radius);
  overflow: hidden;
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
#order_review > table.shop_table thead th {
  background: var(--gp-blue-strong);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  padding: 8px 10px;
}
#order_review > table.shop_table tbody td,
#order_review > table.shop_table tfoot th,
#order_review > table.shop_table tfoot td {
  padding: 6px 10px;
  font-size: 13px;
  border-bottom: 1px solid #f0f2f4;
  color: #33475b;
}
#order_review > table.shop_table tbody tr:last-child td {
  border-bottom: none;
}
/* Destaque da taxa ("Cashback Aplicado") e da linha "Total". */
#order_review > table.shop_table tfoot tr.order-fee {
  background: #f0f7ff;
  font-weight: 600;
}
#order_review > table.shop_table tfoot tr.order-total {
  background: #e7f0fa;
  font-weight: 700;
  font-size: 15px;
}
#order_review > table.shop_table tfoot tr.order-total th,
#order_review > table.shop_table tfoot tr.order-total td {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Coluna direita: cartão de pagamento. */
#order_review > #payment {
  grid-column: 2;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--gp-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 20px;
}
/* Aperta os blocos do Mercado Pago dentro do cartão de pagamento. */
#order_review #payment ul.wc_payment_methods {
  margin: 0;
  padding: 0;
  list-style: none;
}
#order_review #payment .wc_payment_method,
#order_review #payment ul.wc_payment_methods > li {
  padding: 12px 14px;
  margin: 0 0 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}
#order_review #payment .wc_payment_method .payment_box {
  border: none;
  background: transparent;
  padding: 4px 0 0;
  margin: 0;
}
#order_review #payment .form-row {
  margin-top: 12px;
  padding: 0;
}
/* Botão "Pagar Pedido" verde (remove o fundo preto do tema). */
/*
 * BOTÃO "PAGAR PEDIDO" — azul da marca, não o verde do WooCommerce.
 *
 * O verde (#10b981) destoava de tudo: a tela inteira é azul, e ele ficava
 * parecendo botão de landing page no meio de um checkout de gráfica.
 *
 * A cor sai de VARIÁVEL, não de hex solto. A sugestão que recebi trazia
 * #175c9c, que não é o azul desta loja — o do cabeçalho é --gp-blue-strong
 * (#1a568c), a MESMA variável que o thead da tabela e a barra "Forma de
 * pagamento" já usam. Com a variável, mudar o azul da marca num lugar muda os
 * três de uma vez, e não sobra hex desatualizado espalhado.
 *
 * O hover usa --gp-blue (#144e82), que é o mesmo tom que os outros botões
 * azuis da loja já usam no hover (.gp-btn-submit-contact). Assim o clique
 * responde igual em qualquer tela.
 */
#order_review #payment #place_order {
  background: var(--gp-blue-strong) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--gp-radius) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  padding: 16px 24px !important;
  text-transform: none !important;
  width: 100%;
  cursor: pointer;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color 0.2s ease-in-out !important;
}
#order_review #payment #place_order:hover {
  background: var(--gp-blue) !important;
}

/*
 * Aviso de privacidade. Vinha herdando o tamanho do corpo (~18px) e virava o
 * maior bloco de texto da tela, quebrado em muitas linhas — mais peso visual
 * que o próprio botão de pagar. Aqui ele volta a ser nota de rodapé.
 */
#order_review .woocommerce-privacy-policy-text,
#order_review .woocommerce-privacy-policy-text p {
  font-size: 12.5px;
  line-height: 1.55;
  color: #64748b;
  margin: 10px 0 0;
}

/* O mesmo para o texto do checkbox de termos. */
#order_review .woocommerce-terms-and-conditions-wrapper {
  font-size: 12.5px;
  color: #64748b;
}

/*
 * "Linha de Crédito Mercado Crédito" fora desta tela.
 *
 * O gateway também foi DESATIVADO na configuração do Mercado Pago
 * (woocommerce_woo-mercado-pago-credits_settings), então ele não aparece em
 * lugar nenhum da loja. Esta regra é a rede de segurança: se alguém reativar o
 * gateway no painel, ele continua fora do pagamento de pedido, que é onde o
 * cliente do orçamento fecha a compra.
 */
#order_review .wc_payment_method.payment_method_woo-mercado-pago-credits {
  display: none !important;
}

/*
 * Aviso de cashback, logo acima dos meios de pagamento.
 *
 * Ele fica AQUI de propósito: o cashback de 10% só vale no Pix, e este é o
 * momento em que o cliente escolhe entre Pix e cartão. É a única informação da
 * tela que muda a decisão dele.
 */
#order_review .gph-cashback-pay {
  margin: 0;
  padding: 10px 12px;
  background: #f0f7ff;
  border: 1px solid #cfe3f7;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #1b65a5;
}

/*
 * POSICIONAMENTO DO AVISO NA GRID.
 *
 * O gancho woocommerce_pay_order_before_payment dispara ANTES do
 * <div id="payment"> (form-pay.php), então o aviso entra como IRMÃO dele — um
 * terceiro item da grid. Sem placement explícito, a colocação automática
 * empurrava o #payment para uma linha nova e ele caía EMBAIXO da tabela.
 *
 * Aqui: a tabela ocupa as duas linhas da coluna 1, e a coluna 2 empilha
 * aviso (linha 1) e pagamento (linha 2). Como a tabela é quem estica a linha 2,
 * o pagamento sobe para logo abaixo do aviso.
 */
#order_review > table.shop_table { grid-column: 1; grid-row: 1 / span 2; }
#order_review > .gph-cashback-pay { grid-column: 2; grid-row: 1; }
#order_review > #payment { grid-column: 2; grid-row: 2; }

/* ==========================================================================
   COMPACTAÇÃO DA COLUNA DE PAGAMENTO (Mercado Pago)
   --------------------------------------------------------------------------
   O bloco do MP vinha com logos gigantes (o selo do Pix ocupava ~200px de
   largura), labels em ~22px e textos auxiliares em tamanho de corpo — a coluna
   parecia de outro site e empurrava o botão verde para fora da dobra.

   O !important é necessário: o plugin do Mercado Pago injeta estilo próprio, e
   boa parte dele vem inline ou com seletor mais específico que o nosso.
   ========================================================================== */

/* 1. LOGOS E ÍCONES: nada acima de 26px de altura. */
#order_review #payment ul.wc_payment_methods img,
#order_review #payment ul.wc_payment_methods svg,
#order_review #payment .wc_payment_method img,
#order_review #payment .wc_payment_method svg,
#order_review #payment .payment_box img,
#order_review #payment .payment_box svg {
  max-height: 26px !important;
  max-width: 140px !important;
  width: auto !important;
  height: auto !important;
  vertical-align: middle;
}

/*
 * 2. LABELS: 16px, semibold, alinhados com o radio.
 *
 * O RADIO FICA FORA DO <label> no markup do WooCommerce:
 *     <li><input type="radio"><label>Pix<img></label><div class="payment_box">
 * Então um `display:flex` no label o transforma em bloco e o "Pix" cai para a
 * linha de baixo, longe da bolinha. Quem tem de ser flex é o LI, com o label em
 * inline-flex ao lado do radio e a caixa do método quebrando para a linha toda.
 */
#order_review #payment ul.wc_payment_methods > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#order_review #payment ul.wc_payment_methods > li > input[type="radio"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0 !important;
}
#order_review #payment ul.wc_payment_methods > li > label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
#order_review #payment ul.wc_payment_methods > li > .payment_box {
  flex: 1 0 100%;
}

/* 3. TEXTOS AUXILIARES dentro da caixa de cada método. */
#order_review #payment .payment_box,
#order_review #payment .payment_box p,
#order_review #payment .payment_box div,
#order_review #payment .payment_box span,
#order_review #payment .payment_box li {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

/* 4. ESPAÇAMENTO ENTRE AS OPÇÕES: era o maior desperdício de altura. */
#order_review #payment ul.wc_payment_methods {
  margin: 0 !important;
  padding: 0 !important;
}
#order_review #payment ul.wc_payment_methods > li {
  padding: 8px 12px !important;
  margin: 0 0 6px !important;
}
#order_review #payment .payment_box {
  padding: 6px 0 0 !important;
  margin: 0 !important;
}

/* 5. TERMOS E PRIVACIDADE: 11.5px e sem paredão antes do botão. */
#order_review .woocommerce-privacy-policy-text,
#order_review .woocommerce-privacy-policy-text p,
#order_review .woocommerce-terms-and-conditions-wrapper,
#order_review .woocommerce-terms-and-conditions-wrapper p {
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: #64748b !important;
  margin: 6px 0 !important;
}

/* 6. AVISO DE CASHBACK: menor e colado na caixa de pagamento.
      O row-gap separado é o que aproxima o aviso do #payment sem mexer na
      distância entre as duas COLUNAS. */
#order_review {
  row-gap: 10px;
}
#order_review .gph-cashback-pay {
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 12px;
}

/* --------------------------------------------------------------------------
   CAIXA DO PIX: fora o texto promocional do Mercado Pago.
   --------------------------------------------------------------------------
   O conteúdo dela NÃO é HTML comum — são WEB COMPONENTS:

       <pix-template title="Pague de forma segura e instantânea" subtitle="...">
       <terms-and-conditions description="Ao continuar, você concorda com nossos">

   O texto é renderizado dentro de um SHADOW DOM, e nenhuma regra de font-size
   daqui alcança ele. Foi por isso que a caixa do Pix continuou gigante mesmo
   depois de todas as reduções de tipografia: elas valiam para o resto, não para
   ali. De fora só dá para esconder o componente INTEIRO — que é o que fazemos,
   já que o aviso de cashback toma o lugar logo abaixo.
   -------------------------------------------------------------------------- */
#order_review .payment_method_woo-mercado-pago-pix pix-template,
#order_review .payment_method_woo-mercado-pago-pix terms-and-conditions {
  display: none !important;
}

/*
 * O VÃO EM BRANCO da caixa do Pix mora AQUI.
 *
 * Esconder só o <pix-template> e o <terms-and-conditions> não bastava: os
 * containers que os envolvem (.mp-checkout-container e companhia) continuavam
 * reservando altura — eram eles os ~30px de branco entre o "Pix" e o aviso.
 *
 * Esconder o CONTAINER INTEIRO é seguro porque o aviso de cashback é filho
 * DIRETO da .payment_box (o JS faz appendChild ali), e não de dentro dele.
 */
#order_review .payment_method_woo-mercado-pago-pix .mp-checkout-container,
#order_review .payment_method_woo-mercado-pago-pix .mp-checkout-pix-container,
#order_review .payment_method_woo-mercado-pago-pix .mp-checkout-pix-terms-and-conditions {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* O ícone do label (a setinha ao lado de "Pix") sai a pedido. Não economiza
   quase nada — quem manda na altura da linha é o radio, de 18px — mas some o
   ruído visual. */
#order_review .payment_method_woo-mercado-pago-pix > label img {
  display: none !important;
}

/*
 * MIOLO PADRÃO DO MERCADO PAGO — fora.
 *
 * Esta é a regra DEFINITIVA, e é mais ampla de propósito que as anteriores:
 * `div:not(.gph-cashback-pay)` pega QUALQUER div filha direta da .payment_box
 * menos o nosso aviso. As tentativas anteriores nomeavam classes específicas
 * (.mp-checkout-container, .mp-checkout-pix-container) e basta o plugin mudar
 * de nome — ou existir uma variante que eu não vi, como a
 * .mp-checkout-custom-pix-container — para o logo verde e os parágrafos
 * voltarem a aparecer.
 *
 * Com o :not(), o que sobra dentro da caixa do Pix é exatamente:
 *   - a linha do radio com a palavra "Pix";
 *   - o box azul do cashback.
 */
#order_review .payment_method_woo-mercado-pago-pix .mp-checkout-custom-pix-container,
#order_review .payment_method_woo-mercado-pago-pix .mp-checkout-pix-container,
#order_review .payment_method_woo-mercado-pago-pix .mp-checkout-container,
#order_review .payment_method_woo-mercado-pago-pix .payment_box > p,
#order_review .payment_method_woo-mercado-pago-pix .payment_box > div:not(.gph-cashback-pay) {
  display: none !important;
}



/* ==========================================================================
   TABELA DE PRODUTOS — hierarquia e metadados
   --------------------------------------------------------------------------
   As classes foram LIDAS do DOM renderizado, e não copiadas de um exemplo: o
   seletor `.woocommerce-checkout-review-order-table` (do checkout) e o
   `dl.variation` (do carrinho) NÃO existem nesta tela. Aqui é:

     <table class="shop_table">            <- não woocommerce-checkout-review-order-table
       <td class="product-name">
         Nome do produto
         <ul class="wc-item-meta">         <- não dl.variation
           <li><strong class="wc-item-meta-label">Impressão:</strong><p>4×4</p></li>

   Sem essa tradução, todo o CSS abaixo seria letra morta.
   ========================================================================== */

/* 1. Nome do produto com mais peso que os metadados ao redor. */
#order_review > table.shop_table td.product-name {
  font-weight: 500 !important;
  color: #1e293b !important;
  line-height: 1.4;
}

/*
 * 2. Metadados como grade de duas colunas (rótulo | valor).
 *
 * O truque é `display: contents` no <li>: ele deixa de existir como caixa e
 * seus filhos (o <strong> e o <p>) passam a ser itens da grade do <ul>. Sem
 * isso cada <li> seria UMA célula, e rótulo e valor ficariam empilhados em vez
 * de lado a lado.
 */
#order_review > table.shop_table ul.wc-item-meta {
  display: grid !important;
  grid-template-columns: max-content 1fr !important;
  column-gap: 8px !important;
  row-gap: 3px !important;
  align-items: baseline !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
}
#order_review > table.shop_table ul.wc-item-meta li {
  display: contents !important;
  margin: 0 !important;
}
#order_review > table.shop_table ul.wc-item-meta .wc-item-meta-label {
  font-weight: 600 !important;
  color: #475569 !important;
}
#order_review > table.shop_table ul.wc-item-meta p {
  margin: 0 !important;
  color: #64748b !important;
}

/* 3. Bordas claras e respiro nas linhas. */
#order_review > table.shop_table th,
#order_review > table.shop_table td {
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 14px 12px !important;
}

/*
 * 4. A quantidade não briga com o preço.
 *
 * `td` no seletor NÃO é detalhe: o <th> do cabeçalho tem a MESMA classe
 * (product-quantity), e sem o `td` o cinza claro caía sobre o azul do cabeçalho
 * — o "Qtd" ficava quase invisível. O alvo é só a célula do corpo.
 */
#order_review > table.shop_table td.product-quantity,
#order_review > table.shop_table td.product-quantity strong {
  font-weight: 400 !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
}

/* ==========================================================================
   CABEÇALHO "FORMA DE PAGAMENTO" — painel único
   --------------------------------------------------------------------------
   A barra azul acima da caixa de pagamento, com os MESMOS valores do thead da
   tabela de produtos (--gp-blue-strong #1a568c, 13px, 700, padding 8px 10px) —
   copiados do próprio arquivo, não estimados. É isso que faz as duas colunas
   lerem como um painel só, e não como dois blocos de origens diferentes.
   ========================================================================== */
/*
 * Altura CASADA com o thead da tabela da esquerda.
 * Medido por pixel no screenshot: o thead tem 36px e a barra tinha 34px — 2px
 * de diferença, que apareciam como degrau na comparação lado a lado.
 * Em vez de repetir padding e line-height e torcer para bater, o box model é
 * fechado: box-sizing border-box + display flex + height fixa. Assim o valor
 * não depende de fonte, herança ou arredondamento de line-height.
 */
#order_review .gph-payment-header {
  background-color: #1a568c;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  height: 48px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  line-height: 1 !important;
  border-top-left-radius: var(--gp-radius);
  border-top-right-radius: var(--gp-radius);
}

/* A caixa branca perde o arredondamento e a borda de cima para o cabeçalho
   encaixar perfeito em cima dela, sem costura. */
#order_review > #payment {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: none !important;
  margin-top: 0 !important;
}

/* Posicionamento na grid: a barra na linha 1 da coluna 2, a caixa na linha 2.
   A tabela ocupa as duas linhas da coluna 1, então o topo da barra bate com o
   topo do cabeçalho da tabela — que é o alinhamento pedido.
   O row-gap do #order_review é ZERADO aqui: barra e caixa são a MESMA peça
   visual (cabeçalho + corpo), então não pode haver vão entre elas. */
/*
 * A barra vive DENTRO da #payment (o JS a move para lá), então não é mais item
 * de grid e não há linha para inflar. Estes seletores usam descendente, e não
 * `>`, justamente por isso.
 *
 * O breakout negativo cancela o padding da caixa para a barra encostar nas
 * bordas — sem ele a barra ficaria boiando 20px dentro do cartão branco.
 */
/*
 * O breakout cancela o padding da caixa para a barra encostar nas bordas. O
 * -5px de topo corrige o fato de a caixa começar 5px acima do thead da tabela
 * (o thead tem borda e raio; a caixa, não) — medido, não estimado.
 */
#order_review #payment > .gph-payment-header {
  margin: -25px -20px 0 !important;
  border-radius: var(--gp-radius) var(--gp-radius) 0 0;
}
#order_review > #payment { grid-column: 2; grid-row: 1 / span 2; }

/*
 * O GAP DE 56px ENTRE A BARRA AZUL E O PRIMEIRO ITEM.
 *
 * O DOM está limpo — é literalmente `<h3>…</h3><div id="payment"><ul …` — então
 * o vão é todo de CSS. Vinha de duas fontes somadas: o `row-gap` da grid (a
 * barra e a caixa são itens de LINHAS diferentes) e o padding de topo da caixa.
 *
 * Aqui os dois são fechados na marra: `column-gap` continua em 24px para separar
 * as colunas, mas `row-gap` vai a ZERO, e a caixa fica só com o respiro interno
 * de 16px — que é o que se quer ver entre o cabeçalho e o primeiro meio de
 * pagamento.
 */
#order_review {
  column-gap: 24px !important;
  row-gap: 0 !important;
}
#order_review .gph-payment-header { margin-bottom: 0 !important; }
#order_review #payment {
  margin-top: 0 !important;
  padding-top: 16px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: none !important;
}
#order_review #payment ul.wc_payment_methods {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#order_review #payment ul.wc_payment_methods > li:first-child {
  margin-top: 0 !important;
}

/* O alinhamento ao teto, agora à prova de herança. */
#order_review { align-items: flex-start !important; }

/* ==========================================================================
   RESPIRO E CARA DE BOTÃO — valores finais
   --------------------------------------------------------------------------
   Este bloco vem por ÚLTIMO de propósito: ele redefine o que as regras de
   compactação acima tinham apertado. Depois da limpeza do miolo do Mercado
   Pago, as opções ficaram espremidas — agora que não há mais lixo dentro delas,
   dá para dar o respiro de botão clicável sem a caixa virar um paredão.
   ========================================================================== */

/* Agora que o miolo saiu, a linha do Pix não precisa mais do aperto cirúrgico. */
#order_review #payment ul.wc_payment_methods > li.payment_method_woo-mercado-pago-pix {
  padding: 16px !important;
  row-gap: 0 !important;
}

#order_review #payment ul.wc_payment_methods > li {
  padding: 16px !important;
  margin: 0 0 12px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #fff;
}

#order_review #payment ul.wc_payment_methods > li > label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

/*
 * O TRIÂNGULO CINZA sobre a palavra "Pix".
 *
 * Sobrou da limpeza do miolo: é um SVG ou pseudo-elemento que o Mercado Pago
 * injeta no label (o ícone antigo da setinha, ou um ::after de seta). Como não
 * dá para saber qual dos dois é sem inspecionar o shadow DOM deles, matamos os
 * três de uma vez.
 */
/* O <svg> e o ::before continuam mortos; o ::after passa a SER o ícone. */
#order_review .payment_method_woo-mercado-pago-pix > label svg,
#order_review .payment_method_woo-mercado-pago-pix > label::before {
  display: none !important;
  content: none !important;
}

/*
 * Ícone do Mercado Pago no label do Pix, via CSS puro.
 *
 * A URL foi lida do DOM da opção do CARTÃO (chrome --dump-dom): é o MESMO
 * arquivo que ela usa — icon-mp.png, o aperto de mão. Caminho ROOT-RELATIVE de
 * propósito: com o domínio fixo, a imagem quebraria ao abrir o painel pelo IP
 * da rede, e vice-versa.
 *
 * O <img> que o plugin injeta no label (icon-pix.png, a setinha) continua
 * escondido pela regra `> label img` — quem aparece agora é este ::after.
 */
#order_review .payment_method_woo-mercado-pago-pix > label::after {
  content: "" !important;
  display: inline-block !important;
  width: 32px !important;
  height: 20px !important;
  background-image: url('/wp-content/plugins/woocommerce-mercadopago/assets/images/icons/icon-mp.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  margin-left: 8px !important;
  flex: 0 0 auto;
}

/*
 * O TRIÂNGULO FANTASMA sobre a palavra "Pix".
 *
 * Ele não é svg, não é ::before/::after do label e não é <img> — todas essas
 * tentativas já foram feitas e falharam. O suspeito que sobra é a SETA montada
 * com borda (o truque clássico: border-top transparente + border-left colorida
 * desenha um triângulo) que o contêiner de pagamento do WooCommerce usa, e que
 * a UI nova deixou encavalada.
 *
 * `border: none` importa tanto quanto `display: none`: se a seta for desenhada
 * por borda e o elemento tiver display trocado por outra regra, só zerar a
 * borda garante que ela não reapareça.
 */
#order_review .payment_method_woo-mercado-pago-pix .payment_box::before,
#order_review .payment_method_woo-mercado-pago-pix .payment_box::after {
  display: none !important;
  border: none !important;
  content: none !important;
}

/*
 * MIOLO DO MERCADO PAGO — escondido pelas CLASSES INTERNAS, e não pelo hospedeiro.
 *
 * Isto veio de um dump do DOM renderizado (chrome --dump-dom), depois de três
 * tentativas erradas. O que o dump mostrou:
 *
 *   <pix-template>
 *     <div class="mp-pix-template-container">
 *       <img class="mp-pix-template-image" src=".../checkouts/pix/pix.png">  <-- O TRIÂNGULO
 *       <p class="mp-pix-template-title">Pague de forma segura e instantânea
 *       <p class="mp-pix-template-subtitle">Ao confirmar a compra...
 *
 * O web component despeja o conteúdo no LIGHT DOM, FORA da tag <pix-template>.
 * Por isso `pix-template { display: none }` nunca resolveu: o que ele renderiza
 * não está dentro dele. As classes abaixo são as reais, lidas da tela.
 *
 * LIÇÃO: com web component, esconder o HOSPEDEIRO pode não esconder nada. O
 * dump do DOM renderizado responde em um minuto o que meia dúzia de palpites de
 * CSS não responderam.
 */
#order_review .payment_method_woo-mercado-pago-pix .mp-pix-template-image,
#order_review .payment_method_woo-mercado-pago-pix .mp-pix-template-title,
#order_review .payment_method_woo-mercado-pago-pix .mp-pix-template-subtitle,
#order_review .payment_method_woo-mercado-pago-pix .mp-pix-template-container,
#order_review .payment_method_woo-mercado-pago-pix .mp-terms-and-conditions-container,
#order_review .payment_method_woo-mercado-pago-pix .mp-terms-and-conditions-text {
  display: none !important;
}

/* O aviso de cashback como bloco de destaque, e não texto solto. */
#order_review .payment_box .gph-cashback-pay,
#order_review .payment_method_woo-mercado-pago-pix .gph-cashback-pay {
  margin: 12px 0 0 !important;
  padding: 10px 12px !important;
  border: none !important;
  border-radius: 6px !important;
  background-color: #f0f9ff !important;
  color: #0369a1 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

/* O aviso, depois de movido para dentro da caixa (ver gph_cashback_move_to_pix),
   não precisa mais da moldura de banner: já está dentro de um cartão. */
#order_review .payment_box .gph-cashback-pay {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: #1b65a5;
}

/*
 * A opção do Pix estava com o DOBRO da altura da do cartão (~94px contra ~53px).
 * Três coisas a engordavam, e as três caem aqui:
 *   1. o ícone do label, que esticava a linha para 33px;
 *   2. o aviso de cashback quebrando em duas linhas;
 *   3. o respiro interno da caixa.
 */
#order_review .payment_method_woo-mercado-pago-pix > label img {
  max-height: 16px !important;
  max-width: 40px !important;
}
#order_review .payment_method_woo-mercado-pago-pix > label {
  line-height: 1.1 !important;
}
/*
 * O `row-gap: 8px` do flex do li soma entre a linha do label e a do aviso, e o
 * padding de 6px em cima e embaixo completa. Os dois juntos respondiam por quase
 * 20px dos 78px da caixa. Aqui vão a 2px e 4px.
 */
#order_review #payment ul.wc_payment_methods > li.payment_method_woo-mercado-pago-pix {
  padding: 2px 10px !important;
  row-gap: 1px !important;
}
#order_review .payment_method_woo-mercado-pago-pix .payment_box {
  padding: 0 !important;
  margin: 0 !important;
}
#order_review .payment_method_woo-mercado-pago-pix > label {
  line-height: 1 !important;
  margin: 0 !important;
}
/* A largura NÃO é tocada: a caixa continua ocupando a coluna inteira. O que cai
   é só o respiro vertical. */
#order_review .payment_method_woo-mercado-pago-pix .gph-cashback-pay {
  line-height: 1.15;
  padding: 0;
  margin: 0;
}
/* Qualquer imagem que sobre dentro da caixa do Pix (o plugin injeta ícones por
   JS) — nada de logo gigante renascendo por baixo do CSS global. */
#order_review .payment_method_woo-mercado-pago-pix .payment_box img {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3) Página "Pedido recebido" (Pix) — grid 2 colunas
   -------------------------------------------------------------------------- */
/* Dedup obrigatório: esconde o bloco compacto duplicado do MP (renderiza no
   bloco de Totals via woocommerce_order_details_after_order_table). Mantém
   apenas o cartão completo .mp-details-pix do bloco additional-information. */
main.wp-block-group:has(> .wc-block-order-confirmation-additional-information) .mp-pix-image-container,
.gp-confirmation-grid .mp-pix-image-container {
  display: none !important;
}

/* Oculta a seção "Informação adicional" (Nome, Telefone, CPF) e o container pai,
   eliminando o espaço vazio. NÃO toca no cartão do Pix (additional-information). */
.wc-block-order-confirmation-additional-fields-wrapper,
.wc-block-order-confirmation-additional-fields {
  display: none !important;
}

/* Elimina a tabelinha do resumo (nº pedido, data, total, email, pagamento). */
.wc-block-order-confirmation-summary {
  display: none !important;
}

/* Grid de 2 colunas quando há cartão do Pix. O bloco de status ocupa a largura
   toda no topo; "Detalhes do pedido" e o cartão do QR ficam lado a lado (mesma
   linha, topo alinhado, mesma largura de 360px); o endereço fecha embaixo em
   largura cheia. */
main.wp-block-group:has(> .wc-block-order-confirmation-additional-information),
.gp-confirmation-grid {
  max-width: 980px;
  margin: 15px auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 360px 360px;
  justify-content: center;
  gap: 20px;
  align-items: stretch;
}
/* Qualquer bloco não posicionado explicitamente (downloads vazio etc.) vira
   largura total e cai na próxima linha — evita auto-placement inesperado. */
main.wp-block-group:has(> .wc-block-order-confirmation-additional-information) > *,
.gp-confirmation-grid > * {
  grid-column: 1 / -1;
}
/* Status: linha 1, largura toda (acima dos dois cartões). */
main.wp-block-group:has(> .wc-block-order-confirmation-additional-information) > .wc-block-order-confirmation-status,
.gp-confirmation-grid > .wc-block-order-confirmation-status {
  grid-column: 1 / -1;
  grid-row: 1;
}
/* Detalhes do pedido: coluna esquerda, linha 2. */
main.wp-block-group:has(> .wc-block-order-confirmation-additional-information) > .wc-block-order-confirmation-totals-wrapper,
.gp-confirmation-grid > .wc-block-order-confirmation-totals-wrapper {
  grid-column: 1;
  grid-row: 2;
}
/* Cartão do Pix: coluna direita, linha 2 (topo alinhado aos detalhes). */
main.wp-block-group:has(> .wc-block-order-confirmation-additional-information) > .wc-block-order-confirmation-additional-information,
.gp-confirmation-grid > .wc-block-order-confirmation-additional-information {
  grid-column: 2;
  grid-row: 2;
}
/* Endereço de entrega: linha 3, largura toda. */
main.wp-block-group:has(> .wc-block-order-confirmation-additional-information) > .wc-block-order-confirmation-address-wrapper,
.gp-confirmation-grid > .wc-block-order-confirmation-address-wrapper {
  grid-column: 1 / -1;
  grid-row: 3;
}

/* Sem Pix (pedido cancelado/falho): pilha compacta em largura única. */
.gp-confirmation-stack {
  max-width: 980px;
  margin: 15px auto;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Título do status compacto (mata o "vão branco" do h1/p padrão do tema). */
.wc-block-order-confirmation-status {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 !important;
}
.wc-block-order-confirmation-status h1 {
  font-size: 22px !important;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 4px !important;
  color: var(--gp-blue-dark);
}
.wc-block-order-confirmation-status p,
.wc-block-order-confirmation-status-description {
  font-size: 13px;
  line-height: 1.5;
  color: #33475b;
  margin: 0 !important;
}

/* Meta bar (Nº, Data, Total, E-mail, Pagamento) em linha. */
.wc-block-order-confirmation-summary-list {
  list-style: none;
  margin: 0;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--gp-radius);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 12px;
  color: #33475b;
}
.wc-block-order-confirmation-summary-list-item {
  margin: 0;
}
.wc-block-order-confirmation-summary-list-item__key {
  color: #8a94a0;
}
.wc-block-order-confirmation-summary-list-item__value {
  font-weight: 600;
}

/* "Detalhes do pedido" em cartão branco idêntico ao do QR (padrão da loja). */
.wc-block-order-confirmation-totals-wrapper {
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--gp-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 16px;
  margin: 0;
}
.wc-block-order-confirmation-totals-wrapper > h2.wp-block-heading {
  font-size: 16px !important;
  font-weight: 800;
  color: var(--gp-blue-strong);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f2f4;
}

/* Tabela de itens compacta com cabeçalho azul (dentro do cartão). */
.wc-block-order-confirmation-totals__table {
  width: 100%;
  border-collapse: collapse;
  border: none !important;
  background: transparent;
}
.wc-block-order-confirmation-totals__table thead th {
  background: var(--gp-blue-strong);
  color: #fff;
  padding: 8px 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}
.wc-block-order-confirmation-totals__table th,
.wc-block-order-confirmation-totals__table td {
  padding: 6px 8px;
  border-bottom: 1px solid #f0f2f4;
  color: #33475b;
  font-size: 13px;
  font-weight: 700;
}

/* Endereços como parágrafo fluido. */
.wc-block-order-confirmation-address-wrapper {
  font-size: 13px;
  color: #33475b;
  line-height: 1.5;
  margin: 0;
}
.wc-block-order-confirmation-address-wrapper h2,
.wc-block-order-confirmation-shipping-wrapper h2,
.wc-block-order-confirmation-billing-wrapper h2 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
}
.wc-block-order-confirmation-address-wrapper address,
.wc-block-order-confirmation-shipping-address,
.wc-block-order-confirmation-billing-address {
  font-style: normal;
  margin: 0;
}

/* Remove o card de ENDEREÇO DE COBRANÇA (redundante na confirmação) e deixa
   apenas o de ENTREGA ocupando a largura toda (elimina o espaço vazio). */
.wc-block-order-confirmation-address-wrapper .wp-block-column:has(.wc-block-order-confirmation-billing-wrapper) {
  display: none !important;
}
.wc-block-order-confirmation-address-wrapper .wp-block-column {
  flex-basis: 100% !important;
  flex-grow: 1 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* O bloco do Pix vira coluna flex e o cartão .mp-details-pix preenche 100%
   da altura da linha — fica do MESMO tamanho (largura E altura) do card
   "Detalhes do pedido" ao lado. O título "Pague com Pix" (redundante) some.
   O .mp-details-pix do MP é display:inline-block com margin-bottom:30px;
   sobrescrevemos para block + height:100% (estica até a borda do card). */
.wc-block-order-confirmation-additional-information {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}
.wc-block-order-confirmation-additional-information .mp-details-title {
  display: none !important;
}
.wc-block-order-confirmation-additional-information .mp-details-pix {
  flex: 1 1 auto;
  display: block;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--gp-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 16px;
  margin: 0;
  max-width: none;
}
/* Esconde a lista "como pagar" (4 passos) para compactar. */
.wc-block-order-confirmation-additional-information .mp-details-pix .mp-col-md-4 {
  display: none !important;
}
.wc-block-order-confirmation-additional-information .mp-details-pix .mp-col-md-8 {
  width: 100%;
}
/* "Total a pagar" no topo. */
.wc-block-order-confirmation-additional-information .mp-details-pix-amount {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 2px;
}
.wc-block-order-confirmation-additional-information .mp-details-pix-qr-value {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--gp-blue-strong);
}
/* QR 170px centralizado. */
.wc-block-order-confirmation-additional-information .mp-details-pix-qr-img {
  max-width: 170px !important;
  width: 170px !important;
  height: auto !important;
  margin: 8px auto !important;
  display: block !important;
}
/* "Código válido por X minutos" 11px. */
.wc-block-order-confirmation-additional-information .mp-details-pix-qr-subtitle {
  font-size: 11px;
  color: #8a94a0;
  margin: 6px 0 10px;
}
.wc-block-order-confirmation-additional-information .mp-details-pix-qr-title {
  font-size: 13px;
  font-weight: 600;
  margin: 4px 0 0;
}
/* Copia-e-cola + botão azul. */
.wc-block-order-confirmation-additional-information .mp-details-pix-container {
  margin-top: 10px;
}
/* Corrige o overflow: o MP dá padding lateral de 47px na linha do código + botão,
   o que estoura o botão para fora do card. Zeramos e usamos gap igual dos dois lados. */
.wc-block-order-confirmation-additional-information .mp-row-checkout-pix-container {
  display: flex;
  width: 100%;
  padding: 0 !important;
  margin: 0;
  gap: 8px;
  box-sizing: border-box;
}
.wc-block-order-confirmation-additional-information .mp-qr-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 40px;
  margin: 0;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-sizing: border-box;
  color: #33475b;
}
.wc-block-order-confirmation-additional-information .mp-details-pix-button {
  flex: 0 0 auto;
  width: auto !important;
  height: 40px;
  line-height: 40px;
  padding: 0 14px !important;
  margin: 0;
  white-space: nowrap;
  background: var(--gp-blue-strong) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.wc-block-order-confirmation-additional-information .mp-details-pix-button:hover {
  background: var(--gp-blue) !important;
}

/* Mensagem de sucesso pós-pagamento. Era verde; virou azul em 2026-09-17 —
   a tela inteira e' azul, e a caixa verde destoava dela. O "deu certo" fica
   por conta do texto, nao da cor. */
.gp-pix-success {
  background: #eef4fb;
  border: 1px solid #b3cadd;
  border-left: 4px solid var(--gp-green);
  color: #0d3e5d;
  border-radius: var(--gp-radius);
  padding: 16px 20px;
  margin: 16px auto;
  max-width: 980px;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
}
.gp-pix-success strong {
  display: block;
  font-size: 19px;
  margin-bottom: 4px;
}
.gp-pix-success span {
  color: #5b6b5b;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   4) "Meus Pedidos" (/minha-conta/orders/)
   -------------------------------------------------------------------------- */
/* Navegação da conta: contraste + aba ativa no azul institucional. */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce-MyAccount-navigation-link {
  margin: 0 0 4px;
}
.woocommerce-MyAccount-navigation-link a {
  display: block;
  padding: 12px 16px;
  border-radius: var(--gp-radius);
  color: #33475b;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
}
.woocommerce-MyAccount-navigation-link a:hover {
  background: #eef4fb;
  color: var(--gp-blue);
}
.woocommerce-MyAccount-navigation-link.is-active a {
  background: var(--gp-blue);
  color: #fff;
}

/* Tabela de pedidos estilizada. */
.woocommerce-orders-table {
  border: 1px solid #e5e7eb;
  border-radius: var(--gp-radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.woocommerce-orders-table thead th {
  background: #f6f8fa;
  color: #33475b;
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.woocommerce-orders-table tbody td {
  padding: 14px;
  border-bottom: 1px solid #f0f2f4;
  vertical-align: middle;
  color: #33475b;
}
.woocommerce-orders-table tbody tr:last-child td {
  border-bottom: none;
}
.woocommerce-orders-table tbody tr:hover td {
  background: #fafbfc;
}

/* AÇÕES: coluna empilhada, CENTRADA NA VERTICAL — entrada [67].
   ------------------------------------------------------------------------
   Esta célula era `display: flex`. Parecia inofensivo e não era: quando um <td>
   deixa de ser table-cell, o navegador o embrulha num table-cell ANÔNIMO — e o
   `vertical-align: middle` da regra de cima (.woocommerce-orders-table tbody
   td) para de valer, porque seletor de CSS não alcança caixa anônima. O
   resultado era o botão "Visualizar" colado no TOPO da linha, desalinhado dos
   textos e do badge de status ao lado.

   O empilhamento não precisava de flex: cada botão vira um bloco de largura
   cheia limitado a 140px e centralizado com margin auto — o mesmo desenho de
   antes, agora dentro de uma célula de verdade, onde vertical-align funciona.
   O `gap: 5px` do flex virou margin-bottom, com o último botão sem margem. */
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
  vertical-align: middle;
  white-space: nowrap;
}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
  display: block;
  width: 100%;
  max-width: 140px;
  box-sizing: border-box;
  margin: 0 auto 5px !important;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  border-radius: 6px;
  padding: 7px 10px;
}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button:last-child {
  margin-bottom: 0 !important;
}

/* TODOS os botões da coluna AÇÕES são AZUIS (Pagar, Visualizar, Cancelar, Enviar Arte). */
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
  background: var(--gp-blue-strong) !important;
  background-color: var(--gp-blue-strong) !important;
  color: #ffffff !important;
  border: 1px solid var(--gp-blue-strong) !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button:hover {
  background: var(--gp-blue) !important;
  background-color: var(--gp-blue) !important;
  color: #ffffff !important;
}

/* Badges de status coloridos (borda + raio 20px + 11px/600). */
.gp-status-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}
.gp-status-badge--pending,
.gp-status-badge--on-hold {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}
.gp-status-badge--aguardando-arte {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
}
.gp-status-badge--em-analise       { background: #efe4f6; color: #6a2b93; border-color: #e4d1f2; }
.gp-status-badge--em-producao      { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.gp-status-badge--em-acabamento    { background: #d6f3f3; color: #0a7a7a; border-color: #bce9e9; }
.gp-status-badge--em-expedicao     { background: #e3e7f7; color: #3f51b5; border-color: #d4d9ef; }
/* "Disponivel para retirada" e "Concluido" eram verdes. Viraram um azul mais
   ESCURO que o de --em-producao/--processing de proposito: se ficassem com o
   mesmo azul, "Concluido" pareceria "Em producao". Verde nao ha' mais. */
.gp-status-badge--disp-retirada    { background: #d7e3ef; color: #104f77; border-color: #b3cadd; }
.gp-status-badge--processing       { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.gp-status-badge--completed        { background: #d7e3ef; color: #104f77; border-color: #b3cadd; }
.gp-status-badge--cancelled        { background: #fbe3e3; color: #b02a2a; border-color: #f4caca; }
.gp-status-badge--failed           { background: #fbe3e3; color: #b02a2a; border-color: #f4caca; }
.gp-status-badge--refunded         { background: #f0f2f4; color: #55606e; border-color: #e2e5e9; }

/* Coluna "Rastreio". */
.gp-rastreio {
  font-size: 13px;
  font-weight: 600;
  color: #33475b;
}

/* Responsivo: tabela vira cards no mobile. */
@media (max-width: 782px) {
  .woocommerce-orders-table thead {
    display: none;
  }
  .woocommerce-orders-table tbody tr {
    display: block;
    border: 1px solid #e5e7eb;
    border-radius: var(--gp-radius);
    margin-bottom: 12px;
    padding: 12px;
    background: #fff;
  }
  .woocommerce-orders-table tbody td {
    display: flex;
    justify-content: space-between;
    border-bottom: none;
    padding: 6px 0;
  }
  .woocommerce-orders-table tbody td::before {
    content: attr(data-title) ': ';
    font-weight: 700;
    color: #6b7280;
    margin-right: 12px;
  }

  /* AQUI o <td> já é flex (regra acima), então a coluna de ações precisa
     voltar a ser coluna — sem isto o flex-direction herdado seria `row` e os
     botões ficariam lado a lado, o que não acontecia antes da entrada [67].
     No celular não existe linha de tabela para centralizar: cada <tr> já é um
     cartão, então o `vertical-align` da regra de desktop não faz falta. */
  .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
    flex-direction: column;
    align-items: stretch;
    margin: 0;
  }
  .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   5) Detalhes do pedido (/minha-conta/view-order/[id]/)
   --------------------------------------------------------------------------
   [68-i] O CSS DO LAYOUT ANTIGO SAIU DAQUI. A tela foi refeita na [65] com
   o prefixo `gpov-`, e os seletores do desenho anterior ficaram sem markup
   em lugar nenhum: .gp-order-hero / -id / -date, .gp-arte-callout / -btn,
   .gp-timeline-title, .gp-order-timeline*, .gp-customer-details,
   .gp-customer-col, .gp-address, .gp-order-footer e .gp-order-back.
   A prova de que estavam orfaos (3 testes): (1) nenhuma ocorrencia em nenhum
   .php/.js de todo o wp-content; (2) nenhuma em posts/postmeta/options do
   banco; (3) nem o TRONCO do nome existe em PHP/JS — se algum dia voltarem,
   o lugar e' este arquivo, com o mesmo nome de classe. */

/* Oculta os endereços duplicados renderizados pelo WC (substituídos pelo grid). */
.woocommerce-customer-details {
  display: none !important;
}

/* Tabela de itens do pedido: cabeçalho azul + células compactas. */
.woocommerce-table--order-details {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--gp-radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border-collapse: collapse;
}
.woocommerce-table--order-details thead th {
  background: var(--gp-blue-strong);
  color: #fff;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}
.woocommerce-table--order-details tbody td,
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
  padding: 6px 8px;
  font-size: 13px;
  border-bottom: 1px solid #f0f2f4;
  color: #33475b;
}
.woocommerce-table--order-details tbody tr:last-child td,
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: none;
}

/* Remove botões pretos (ex.: "Pedir novamente") no rodapé dos detalhes. */
.woocommerce-order-details .order-again a.button,
p.order-again a.button {
  background: var(--gp-blue-strong) !important;
  background-color: var(--gp-blue-strong) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
}
.woocommerce-order-details .order-again a.button:hover,
p.order-again a.button:hover {
  background: var(--gp-blue) !important;
  background-color: var(--gp-blue) !important;
}

/* Responsivo: grid de 2 colunas vira 1 coluna no mobile. */
@media (max-width: 782px) {
  #order_review,
  main.wp-block-group:has(> .wc-block-order-confirmation-additional-information),
  .gp-confirmation-grid {
    grid-template-columns: 1fr;
  }
  #order_review > table.shop_table,
  #order_review > #payment,
  main.wp-block-group:has(> .wc-block-order-confirmation-additional-information) > *,
  .gp-confirmation-grid > *,
  main.wp-block-group:has(> .wc-block-order-confirmation-additional-information) > .wc-block-order-confirmation-status,
  .gp-confirmation-grid > .wc-block-order-confirmation-status,
  main.wp-block-group:has(> .wc-block-order-confirmation-additional-information) > .wc-block-order-confirmation-totals-wrapper,
  .gp-confirmation-grid > .wc-block-order-confirmation-totals-wrapper,
  main.wp-block-group:has(> .wc-block-order-confirmation-additional-information) > .wc-block-order-confirmation-additional-information,
  .gp-confirmation-grid > .wc-block-order-confirmation-additional-information,
  main.wp-block-group:has(> .wc-block-order-confirmation-additional-information) > .wc-block-order-confirmation-address-wrapper,
  .gp-confirmation-grid > .wc-block-order-confirmation-address-wrapper {
    grid-column: 1;
    grid-row: auto;
  }
  .gp-confirmation-stack {
    max-width: none;
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   6) Sobrepongção cirúrgica — mata qualquer fundo preto residual (máx. prioridade)
   -------------------------------------------------------------------------- */
/* Detalhes do pedido: qualquer botão dentro da tabela de detalhes vira azul. */
.woocommerce-table--order-details .order-again .button,
.woocommerce-table--order-details td.woocommerce-table__cell-order-actions a.button,
.woocommerce-table--order-details a.button {
    background-color: #1a568c !important;
    background: #1a568c !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    border: none !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-block !important;
}
.woocommerce-table--order-details a.button:hover {
    background-color: #14436e !important;
}

/* Rede de segurança: TODO e qualquer .button dentro de Minha Conta vira AZUL. */
.woocommerce-account a.button {
  background: var(--gp-blue-strong) !important;
  background-color: var(--gp-blue-strong) !important;
  color: #ffffff !important;
  border: 1px solid var(--gp-blue-strong) !important;
  border-radius: 6px !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.woocommerce-account a.button:hover {
  background: var(--gp-blue) !important;
  background-color: var(--gp-blue) !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   7) Modal de confirmação de cancelamento (Meus Pedidos)
   -------------------------------------------------------------------------- */
.gp-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.gp-confirm-modal {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  max-width: 400px;
  width: 100%;
  padding: 28px 24px 24px;
  text-align: center;
  box-sizing: border-box;
}
.gp-confirm-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--gp-blue-dark);
  margin: 0 0 8px;
  line-height: 1.3;
}
.gp-confirm-text {
  font-size: 14px;
  color: #33475b;
  line-height: 1.5;
  margin: 0 0 22px;
}
.gp-confirm-text strong {
  color: var(--gp-blue-strong);
  font-weight: 800;
}
.gp-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.gp-confirm-btn {
  flex: 1 1 auto;
  max-width: 160px;
  border-radius: 6px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.gp-confirm-btn--no {
  background: #eef4fb;
  color: var(--gp-blue-strong);
  border-color: #d4e2f0;
}
.gp-confirm-btn--no:hover {
  background: #dbeafe;
}
.gp-confirm-btn--yes {
  background: var(--gp-blue-strong);
  color: #fff;
  border-color: var(--gp-blue-strong);
}
.gp-confirm-btn--yes:hover {
  background: var(--gp-blue);
  border-color: var(--gp-blue);
}

/* --------------------------------------------------------------------------
   8) Checkout (blocos) — cashback + título "Opções de pagamento" em azul
   -------------------------------------------------------------------------- */
/* Caixa "Usar cashback" (injetada pelo plugin grafica-penha-wallet logo após
   o título "Opções de pagamento") no padrão azul da loja: fundo azul-claro,
   borda com filete azul à esquerda e o saldo em destaque. */
.gp-wallet-apply {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 12px 14px;
  background: #f0f7ff;
  border: 1px solid #d4e2f0;
  border-left: 4px solid var(--gp-blue);
  border-radius: var(--gp-radius);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  color: #1f3a5f;
  box-sizing: border-box;
}
.gp-wallet-apply-box {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--gp-blue);
  cursor: pointer;
}
.gp-wallet-apply-text {
  color: #1f3a5f;
}
.gp-wallet-apply-text strong {
  color: var(--gp-blue-strong);
  font-weight: 800;
}

/* Título "Opções de pagamento" no azul institucional (mesmo azul dos demais
   títulos de seção). O WC em blocos renderiza como h2 com a classe
   .wc-block-components-checkout-step__title dentro do bloco de pagamento. */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-checkout-step__title {
  color: var(--gp-blue-strong) !important;
}

/* =========================================================================
   NOVO DETALHE DO PEDIDO  (Gráfica Penha)  —  view-order.php
   Prefixo: .gpov-     Escopo: body.woocommerce-view-order
   Aplicado por cima de institucional.css / account-ux.css: as regras da
   sidebar da conta e do wrapper da página 8 são neutralizadas aqui.
   ========================================================================= */

body.woocommerce-view-order {
	background: #eef1f5;
}

/* --- Neutraliza o layout de duas colunas da conta (sidebar + conteúdo) --- */
body.woocommerce-view-order .woocommerce-MyAccount-navigation {
	display: none !important;
}

body.woocommerce-view-order .woocommerce-MyAccount-content {
	width: 100% !important;
	float: none !important;
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
}

/* --- O wrapper e o título da página 8 saem de cena: o template traz os seus --- */
body.woocommerce-view-order .gp-breadcrumb,
body.woocommerce-view-order .gp-page-title-blue {
	display: none !important;
}

body.woocommerce-view-order .gp-institucional-wrapper {
	max-width: 1440px !important;
	margin: 0 auto !important;
	padding: 0 20px !important;
}

/* --- O TETO REAL DA LARGURA ---------------------------------------------
   O woocommerce-blocktheme.css (que o WooCommerce carrega em tema de blocos)
   traz:  .woocommerce-account main .woocommerce { max-width: 1000px }
   É uma regra de especificidade (0,2,1) — a mesma da minha — então sem
   !important quem vence é a ordem de carregamento, e sobra ~490px de vazio à
   direita. Medido na tela: .gp-institucional-wrapper 1382px mas .woocommerce
   1000px. Escopado no view-order para não mexer em carrinho/checkout.

   --- [68] O MESMO TETO, DERRUBADO EM TODA A ÁREA DA CONTA ------------------
   Pedido do Bruno: "Uniformize o comportamento das abas da Minha Conta com o
   layout global do site: ajuste os seletores necessários para que a área
   interna aproveite a largura padrão sem causar desalinhamentos visuais entre
   páginas diferentes."

   A [56] derrubou o teto SÓ no view-order, e a [67-d] registrou o efeito
   colateral por escrito, sem esconder: as outras abas ficavam com o
   .woocommerce em 1000px dentro de um wrapper de 1200px. Medido hoje, na
   página real logada, a 1400px de viewport, em SETE abas (painel, pedidos,
   artes, orçamentos, cupons, senha, meus dados):

       .gp-institucional-wrapper ....... 1200px   (é a largura global do site)
       .woocommerce .................... 1000px   <- o teto, 200px de vazio
       navegação .......................  220px
       .woocommerce-MyAccount-content ..  750px

   e o view-order, que já tinha a derrubada, media .woocommerce 1260px. Ou
   seja: a MESMA área da conta tinha duas larguras de conteúdo, 750px numa aba
   e 1260px na outra — que é exatamente o "desalinhamento visual entre páginas
   diferentes" que o pedido nomeia. Não era o view-order que estava largo: era
   o resto que estava preso em 1000px.

   Por que 1000px não era uma decisão nossa: a regra vem do
   woocommerce-blocktheme.css, que o WooCommerce carrega sozinho em tema de
   blocos. Ninguém a escolheu; ela é o padrão do plugin.

   O que muda, com número: a aba comum passa de 750px para 950px de conteúdo
   (o .woocommerce vai de 1000 para ~1170 dentro do wrapper de 1200). As duas
   tabelas — que são o motivo de o aperto ter voltado — ganham 200px de
   respiro, e a de "Minhas Artes" sai da faixa em que disparava a barra
   horizontal (ver a nota do [68] no minha-conta.css).

   Continua escopado: `carrinho` e `checkout` NÃO entram, e o view-order segue
   coberto pelos seletores dele, logo abaixo, que não foram removidos — a
   regra nova é mais ampla, não um substituto. Seletor por CLASSE DE BODY
   (.woocommerce-account), e não por página, para valer também em qualquer
   endpoint que um plugin novo registre. */
body.woocommerce-view-order main .woocommerce,
body.woocommerce-view-order .woocommerce,
.woocommerce-account main .woocommerce,
.woocommerce-account .woocommerce {
	max-width: none !important;
}

body.woocommerce-view-order .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-content {
	max-width: none !important;
}

/* O tema (Twenty Twenty-Five) aplica padding global no conteúdo; aqui não ajuda. */
body.woocommerce-view-order .entry-content,
body.woocommerce-view-order .wp-block-post-content {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* --- O VÃO ENTRE O CABEÇALHO AZUL E A TRILHA -------------------------------
   Pedido do Bruno em 18/09/2026: "tem um espaço grande até começar o link Home
   e Meus Pedidos ... diminua pra 1 terço do tamanho que ta agora".

   O vão não é um só, são TRÊS parcelas empilhadas — medida a cadeia real no HTML
   servido (curl autenticado) em 18/09/2026, numa tela de 1500px:

     margin-top  do <main> ............................ 70px   ┐ spacing--60,
     padding-top do grupo do tema (filho do main) ..... 70px   ┘ clamp(30px,7vw,70px)
     padding-top do .gpov-wrap ........................ 18px
                                                        -----
                                                        158px  ← o que ele viu

   O título do tema NÃO entra na conta: `.page-id-8 .wp-block-post-title` já o
   esconde com `display: none` no institucional.css, e a tela do pedido é a
   página 8. O `.gp-breadcrumb` e o `.gp-page-title-blue` também já saem de cena
   logo acima. O `.entry-content` teve o padding zerado na entrada [54] — por isso
   não aparece aqui.

   POR QUE DIVIDIR CADA PARCELA POR 3, E NÃO CRAVAR UM PIXEL FIXO: os dois
   presets do tema são `clamp()`, ou seja, valem 70px numa tela larga e 30px numa
   estreita. Se eu fixasse "53px" no total, numa tela estreita o vão ficaria
   MAIOR que hoje — o contrário do pedido. Dividindo parcela por parcela, a
   proporção de 1/3 se mantém em qualquer largura.

   OS `!important` SÃO OBRIGATÓRIOS: as duas parcelas do tema são estilos
   INLINE (`style="margin-top:..."` e `style="padding-top:..."` no HTML). Um
   `!important` de folha de estilo vence um inline que não seja `!important` —
   sem eles, nada disto teria efeito. Escopo `body.woocommerce-view-order`, então
   nenhuma outra página é tocada.
   ------------------------------------------------------------------------- */
body.woocommerce-view-order main.wp-block-group {
	margin-top: calc(var(--wp--preset--spacing--60) / 3) !important;
}

body.woocommerce-view-order main.wp-block-group > .wp-block-group {
	padding-top: calc(var(--wp--preset--spacing--60) / 3) !important;
}

body.woocommerce-view-order .gpov-wrap {
	padding-top: 6px; /* 18px / 3 */
}

/* =========================================================================
   ESTRUTURA
   ========================================================================= */

.gpov-wrap {
	--gpov-azul: #144e82;
	--gpov-azul-forte: #104f77;
	--gpov-azul-hover: #0d3e5d;
	--gpov-escuro: #1f2a37;
	--gpov-escuro-hover: #111827;
	--gpov-vermelho: #dc2626;
	--gpov-borda: #e2e8f0;
	--gpov-borda-forte: #cbd5e1;
	--gpov-texto: #1f2a37;
	--gpov-texto-fraco: #64748b;
	--gpov-rotulo: #94a3b8;
	--gpov-raio: 10px;
	--gpov-sombra: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);

	max-width: 1400px;
	margin: 0 auto;
	padding: 18px 0 40px;
	color: var(--gpov-texto);
	font-size: 14px;
	line-height: 1.5;
	box-sizing: border-box;
}

.gpov-wrap *,
.gpov-wrap *::before,
.gpov-wrap *::after {
	box-sizing: border-box;
}

/* =========================================================================
   1. HEADER
   ========================================================================= */

.gpov-head {
	margin: 0 0 18px;
}

.gpov-breadcrumb {
	font-size: 12px;
	color: var(--gpov-texto-fraco);
	margin-bottom: 6px;
}

.gpov-breadcrumb a {
	color: var(--gpov-azul);
	text-decoration: none;
}

.gpov-breadcrumb a:hover {
	text-decoration: underline;
}

.gpov-crumb-sep {
	margin: 0 6px;
	color: var(--gpov-borda-forte);
}

.gpov-crumb-atual {
	color: var(--gpov-texto-fraco);
}

.gpov-head-linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.gpov-titulo {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--gpov-texto);
	line-height: 1.2;
}

.gpov-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
}

.gpov-status-rotulo {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .09em;
	color: var(--gpov-rotulo);
}

.gpov-status-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex: 0 0 auto;
	box-shadow: 0 0 0 3px rgba(15, 23, 42, .06);
}

.gpov-status-nome {
	font-weight: 700;
	font-size: 14px;
	color: var(--gpov-texto);
}

/* =========================================================================
   COLUNAS
   ========================================================================= */

.gpov-colunas {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 350px;
	gap: 18px;
	align-items: stretch;
}

/*
 * A COLUNA ESQUERDA DEIXOU DE SER UMA CAIXA (18-Set/2026).
 *
 * Pedido do Bruno: "alinha a parte debaixo dela [caixa do histórico] com a caixa
 * do É importante saber, que já está alinhada com a do Dados de Entrega".
 *
 * O obstáculo: `.gpov-colunas` é uma grade de DUAS células — esquerda e direita.
 * Com `align-items: stretch`, a direita estica até a altura da esquerda INTEIRA,
 * que é `grade + lista de itens`. O rodapé do histórico iria parar embaixo da
 * lista de itens, ~100 px abaixo do alvo.
 *
 * `display: contents` resolve dissolvendo a caixa do `.gpov-esquerda`: a grade
 * externa deixa de ter 2 itens (esquerda, direita) e passa a ter 3 — os dois
 * filhos do esquerda (`.gpov-grid3`, `.gpov-itens`) MAIS o `.gpov-direita`, que
 * já era irmão dele. Cada um ganha endereço próprio logo abaixo. Aí a direita
 * divide a linha 1 com a GRADE (e não com a coluna inteira), estica até a altura
 * dela, e o histórico — que cresce com `flex` — fecha o rodapé exatamente na
 * mesma linha do "Dados de Entrega" e do "É importante saber".
 *
 * O elemento continua no HTML e continua casando com seletores descendentes
 * (`.gpov-esquerda .gpov-bloco`, por exemplo); só a caixa dele sai da
 * renderização. O `gap: 18px` que ele tinha era o espaçamento entre a grade e a
 * lista de itens — esse papel passa para o `gap` da grade externa, que já vale
 * 18 px nas duas direções. Mesmo espaçamento, dono diferente.
 *
 * ARMADILHA: `display: contents` também some com o box do elemento para o
 * `align-items` do pai — por isso cada filho precisa de `grid-area` explícito.
 * Se um deles ficar sem, cai no fluxo automático e a grade se desmonta.
 */
.gpov-esquerda {
	display: contents;
}

.gpov-grid3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	align-items: start;
}

/*
 * O VÃO DA GRADE (18-Set/2026) — pedido do Bruno: "encaixe ele ali, alinhado
 * entre a parte do Responsável pela Retirada e o histórico, alinhado pela parte
 * de baixo, logo acima da lista de itens".
 *
 * O problema não era falta de espaço, era espaço MAL DISTRIBUÍDO: os 3 blocos
 * têm alturas muito diferentes (2.1 Dados de Entrega é bem mais alto que 2.2
 * Pagamento e 2.3 Obrigado!), e como a grade usa `align-items: start`, sobra um
 * retângulo vazio embaixo dos dois mais baixos. Com o bloco "É importante saber"
 * no fim da coluna, esse retângulo ficava em branco e o bloco ia parar no rodapé.
 *
 * Aqui os 4 blocos passam a ter endereço fixo na grade:
 *
 *   col 1        col 2         col 3
 *   ┌──────────┬────────────┬────────────┐
 *   │          │ 2.2 Pgto   │ 2.3 Obrig. │  ← linha 1
 *   │ 2.1 Entrega           ├────────────┤
 *   │          │ É importante saber       │  ← linha 2 (o vão)
 *   └──────────┴────────────┴────────────┘
 *
 * - 2.1 ocupa as DUAS linhas (1/3). É o que faz a linha 2 existir e ter a altura
 *   dele — e é o que faz o rodapé do bloco novo encostar onde começa a lista de
 *   itens, que é a referência que o Bruno deu.
 * - O bloco novo ocupa as colunas 2-3 da linha 2: laterais alinhadas com o
 *   Pagamento (à esquerda) e o Obrigado! (à direita).
 * - `align-self: end` é o "alinhado pela parte de baixo": o bloco é menor que o
 *   vão, então em vez de esticar ele desce e a sobra fica EM CIMA — que é
 *   justamente o espaço que o Bruno quer livre ("caso entre mais informações do
 *   pedido"). Sem isso ele esticaria e o texto ficaria esparramado.
 *
 * ARMADILHA: se a grade virar 2 ou 1 coluna, estes `grid-area` apontam para
 * colunas que não existem mais e os blocos se sobrepõem. Por isso cada
 * breakpoint abaixo zera os quatro. Não remova esses resets.
 */
.gpov-grid3 > .gpov-bloco--entrega {
	grid-area: 1 / 1 / 3 / 2;
	/*
	 * `align-items: start` (lá em cima, na regra do .gpov-grid3) deixaria este
	 * bloco colado no topo da área dele. Se ele for mais BAIXO que a soma das
	 * duas linhas, sobra espaço embaixo e o rodapé dele sobe — desalinhando do
	 * "É importante saber", que está preso embaixo. `stretch` estica a caixa até
	 * a base da área, mantendo o invariante que o Bruno descreveu: os rodapés
	 * destes dois estão sempre na mesma linha.
	 *
	 * Hoje isto é inofensivo: o Dados de Entrega é o bloco mais alto da grade e
	 * já define a altura dela, então não há sobra para esticar. É rede de
	 * segurança para quando o pedido tiver menos dados de entrega.
	 */
	align-self: stretch;
}

.gpov-grid3 > .gpov-bloco--pagamento {
	grid-area: 1 / 2 / 2 / 3;
}

.gpov-grid3 > .gpov-bloco--suporte {
	grid-area: 1 / 3 / 2 / 4;
}

.gpov-grid3 > .gpov-bloco--importante {
	grid-area: 2 / 2 / 3 / 4;
	align-self: end;
}

/*
 * Em telas estreitas o bloco vira uma faixa de largura cheia, como o Obrigado!.
 * As laterais continuam alinhadas com os outros blocos (mesmas colunas), só que
 * agora ocupando a linha inteira — o texto é longo e em coluna estreita fica
 * ilegível.
 */
.gpov-bloco--importante {
	min-width: 0;
}

.gpov-direita {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

/*
 * ENDEREÇOS DA GRADE EXTERNA — só fazem sentido porque o `.gpov-esquerda` virou
 * `display: contents` (ver o comentário grande lá em cima). Sem ele, a grade
 * externa teria só 2 itens e estas linhas não teriam em quem pegar.
 *
 *   col 1 (flexível)          col 2 (350px)
 *   ┌───────────────────────┬──────────────┐
 *   │ .gpov-grid3           │ .gpov-direita│  ← linha 1  → as duas com a MESMA altura
 *   ├───────────────────────┼──────────────┤
 *   │ .gpov-itens           │ (vazio)      │  ← linha 2
 *   └───────────────────────┴──────────────┘
 *
 * É a linha 1 que interessa: grade e direita na mesma faixa, `align-items:
 * stretch` iguala as alturas, e o histórico (com `flex`) fecha embaixo. A linha 2
 * é a lista de itens embaixo da coluna 1 — a célula da direita fica vazia, como
 * já ficava antes.
 */
.gpov-grid3 {
	grid-area: 1 / 1 / 2 / 2;
}

.gpov-direita {
	grid-area: 1 / 2 / 2 / 3;
}

.gpov-itens {
	grid-area: 2 / 1 / 3 / 2;
}

/*
 * O histórico absorve a sobra da coluna direita, encostando o rodapé dele no da
 * grade. Os três valores de `flex` são `crescer / encolher / base`, e o do meio
 * é `0` de propósito: ele CRESCE até preencher a sobra, mas nunca ENCOLHE abaixo
 * do próprio conteúdo — uma lista de eventos cortada seria pior que um rodapé
 * desalinhado.
 */
.gpov-bloco--historico {
	flex: 1 0 auto;
}

/* =========================================================================
   BLOCO BRANCO
   ========================================================================= */

.gpov-bloco {
	background: #fff;
	border: 1px solid var(--gpov-borda);
	border-radius: var(--gpov-raio);
	box-shadow: var(--gpov-sombra);
	padding: 18px;
	min-width: 0;
}

.gpov-bloco-titulo {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	color: var(--gpov-texto);
	letter-spacing: -.005em;
}

/* Rótulos de seção dentro dos blocos */
.gpov-rotulo {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--gpov-rotulo);
	text-transform: none;
}

.gpov-rotulo--espaco {
	margin-top: 16px;
}

.gpov-mini {
	margin: 2px 0 0;
	font-size: 11px;
	color: var(--gpov-texto-fraco);
}

.gpov-texto {
	margin: 0 0 12px;
	font-size: 13px;
	color: #334155;
	line-height: 1.55;
}

.gpov-linha-simples {
	margin: 0 0 12px;
	font-size: 13px;
	color: #334155;
}

.gpov-linha-simples strong {
	font-weight: 600;
	color: var(--gpov-texto);
}

.gpov-endereco {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: #334155;
}

.gpov-nao-informado {
	color: var(--gpov-vermelho);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .02em;
}

/* Links azuis */
.gpov-link,
.gpov-link:visited {
	color: var(--gpov-azul);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
}

.gpov-link:hover {
	text-decoration: underline;
}

.gpov-link-linha {
	margin: 0 0 14px;
}

/* Caixa de aviso do balcão */
.gpov-aviso {
	background: #f8fafc;
	border: 1px solid var(--gpov-borda);
	border-left: 3px solid var(--gpov-azul-forte);
	border-radius: 6px;
	padding: 10px 12px;
	margin: 0 0 14px;
	font-size: 12px;
	line-height: 1.5;
	color: #475569;
}

.gpov-aviso-linha {
	display: block;
}

.gpov-aviso-linha + .gpov-aviso-linha {
	margin-top: 5px;
}

.gpov-aviso strong {
	color: var(--gpov-texto);
	font-weight: 600;
}

/* =========================================================================
   BOTÕES
   ========================================================================= */

.gpov-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 8px;
	border: 1px solid transparent;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	font-family: inherit;
}

/* Os quatro botões da tela (Protocolo de Aceite, Produto entregue?, Enviar
   mensagem e Contestar item) passaram a usar o AZUL DA CASA — #104f77, o mesmo
   do cabeçalho do box "Categorias" da home (--gphs-green no home-shop.css).
   Antes: --gpov-azul (#144e82) em dois e --gpov-escuro (#1f2a37, quase preto)
   nos outros, o que fazia os botões da mesma tela parecerem de telas diferentes.
   Pedido do Bruno em 18-Set/2026. O hover é o --gpov-azul-hover (#0d3e5d), que
   já era o escuro da casa. */
.gpov-btn--azul {
	background: var(--gpov-azul-forte);
	color: #fff;
	width: 100%;
	margin-top: 6px;
}

.gpov-btn--azul:hover {
	background: var(--gpov-azul-hover);
	color: #fff;
}

.gpov-btn--escuro {
	background: var(--gpov-azul-forte);
	color: #fff;
}

.gpov-btn--escuro:hover {
	background: var(--gpov-azul-hover);
	color: #fff;
}

.gpov-btn--full {
	width: 100%;
}

.gpov-btn--mini {
	background: var(--gpov-azul-forte);
	color: #fff;
	font-size: 11px;
	padding: 6px 14px;
	border-radius: 6px;
}

.gpov-btn--mini:hover {
	background: var(--gpov-azul-hover);
	color: #fff;
}

/* =========================================================================
   CALENDÁRIO (previsão de entrega)
   ========================================================================= */

.gpov-calendario {
	display: flex;
	flex-direction: column;
	width: 108px;
	border: 2px solid var(--gpov-azul);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	text-align: center;
	margin: 0 0 16px;
}

.gpov-cal-semana {
	background: var(--gpov-azul);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	padding: 4px 0;
}

.gpov-cal-dia {
	font-size: 30px;
	font-weight: 700;
	color: var(--gpov-azul);
	line-height: 1.1;
	padding: 6px 0 2px;
}

.gpov-cal-mes {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--gpov-texto-fraco);
	padding: 0 0 6px;
}

.gpov-calendario--vencido {
	border-color: var(--gpov-texto-fraco);
}

.gpov-calendario--vencido .gpov-cal-semana {
	background: var(--gpov-texto-fraco);
}

.gpov-calendario--vencido .gpov-cal-dia {
	color: var(--gpov-texto-fraco);
}

/* =========================================================================
   2.2 PAGAMENTO
   ========================================================================= */

.gpov-pagamento {
	margin: 0 0 2px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gpov-texto);
	line-height: 1.4;
}

.gpov-pagamento-valor {
	display: block;
	color: var(--gpov-vermelho);
	font-size: 16px;
	font-weight: 700;
	margin-top: 2px;
}

.gpov-nf {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 4px;
}

/* =========================================================================
   2.4 LISTA DE ITENS
   ========================================================================= */

.gpov-itens {
	padding: 18px;
}

.gpov-item + .gpov-item {
	border-top: 1px solid var(--gpov-borda);
	margin-top: 4px;
	padding-top: 4px;
}

.gpov-item-barra {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 0;
}

.gpov-item-nome {
	font-size: 13px;
	color: #334155;
	line-height: 1.5;
	min-width: 0;
}

.gpov-item-num {
	font-weight: 700;
	color: var(--gpov-texto);
	margin-right: 2px;
}

.gpov-item-sku {
	color: var(--gpov-texto-fraco);
	font-variant-numeric: tabular-nums;
}

.gpov-item-titulo {
	color: var(--gpov-texto);
	font-weight: 600;
}

.gpov-item-sep {
	color: var(--gpov-borda-forte);
	margin: 0 4px;
}

.gpov-item-espec {
	color: var(--gpov-texto-fraco);
}

.gpov-item-qtd {
	font-weight: 600;
	color: var(--gpov-texto);
}

/* Detalhe expansível */
.gpov-detalhe {
	flex: 0 0 auto;
}

.gpov-detalhe-summary {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--gpov-azul);
	cursor: pointer;
	list-style: none;
	padding: 2px 0;
	white-space: nowrap;
}

.gpov-detalhe-summary::-webkit-details-marker {
	display: none;
}

.gpov-detalhe-summary:hover {
	text-decoration: underline;
}

.gpov-chevron {
	transition: transform .15s ease;
}

.gpov-detalhe[open] .gpov-chevron {
	transform: rotate(180deg);
}

.gpov-detalhe-corpo {
	margin-top: 8px;
	padding: 12px;
	background: #f8fafc;
	border: 1px solid var(--gpov-borda);
	border-radius: 8px;
	min-width: 220px;
}

.gpov-tabela-tecnica {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

.gpov-tabela-tecnica th {
	text-align: left;
	font-weight: 600;
	color: var(--gpov-texto-fraco);
	padding: 3px 10px 3px 0;
	vertical-align: top;
	white-space: nowrap;
}

.gpov-tabela-tecnica td {
	color: #334155;
	padding: 3px 0;
}

.gpov-item-acoes {
	padding: 0 0 12px;
}

/* Aviso dos botões que ainda não têm backend (ver o <script> do template). */
.gpov-pendente-aviso {
	margin: 10px 0 0;
	padding: 8px 10px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-left: 3px solid #d97706;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.45;
	color: #92400e;
}

/* Botão de arte que vem do plugin grafica-penha-arte */
.gpov-detalhe-corpo .gp-order-art-btn {
	display: inline-block;
	margin-top: 10px;
	font-size: 12px;
}

/* =========================================================================
   3.1 RESUMO
   ========================================================================= */

.gpov-resumo {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.gpov-resumo th {
	text-align: left;
	font-weight: 500;
	color: var(--gpov-texto-fraco);
	padding: 7px 10px 7px 0;
	vertical-align: top;
}

.gpov-resumo td {
	text-align: right;
	color: var(--gpov-texto);
	font-weight: 600;
	padding: 7px 0;
	vertical-align: top;
	font-variant-numeric: tabular-nums;
}

.gpov-resumo tr + tr th,
.gpov-resumo tr + tr td {
	border-top: 1px solid #f1f5f9;
}

.gpov-resumo-end {
	font-weight: 500 !important;
	font-size: 12px;
	color: #475569 !important;
	line-height: 1.45;
}

.gpov-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 2px solid var(--gpov-borda);
}

.gpov-total-rotulo {
	font-size: 15px;
	font-weight: 700;
	color: var(--gpov-texto);
}

.gpov-total-valor {
	font-size: 20px;
	font-weight: 700;
	color: var(--gpov-texto);
	font-variant-numeric: tabular-nums;
}

/* =========================================================================
   3.2 TIMELINE
   ========================================================================= */

.gpov-timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 4px;
}

.gpov-tl-no {
	position: relative;
	padding: 0 0 16px 22px;
	border-left: 2px solid var(--gpov-borda);
}

.gpov-tl-no:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

.gpov-tl-no::before {
	content: "";
	position: absolute;
	left: -6px;
	top: 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--gpov-cor, var(--gpov-texto-fraco));
	box-shadow: 0 0 0 3px #fff;
}

.gpov-tl-no:last-child::before {
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gpov-cor, var(--gpov-texto-fraco));
}

.gpov-tl-data {
	display: block;
	font-size: 11px;
	line-height: 1.3;
	color: var(--gpov-texto-fraco);
	font-variant-numeric: tabular-nums;
	margin-bottom: 3px;
}

.gpov-tl-nome {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--gpov-texto);
	line-height: 1.35;
}

/* =========================================================================
   3.3 É IMPORTANTE SABER
   ========================================================================= */

.gpov-avisos {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gpov-avisos li {
	position: relative;
	padding: 0 0 0 16px;
	margin-bottom: 10px;
	font-size: 12px;
	line-height: 1.55;
	color: #475569;
}

.gpov-avisos li:last-child {
	margin-bottom: 0;
}

.gpov-avisos li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 7px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--gpov-borda-forte);
}

/* =========================================================================
   RODAPÉ
   ========================================================================= */

.gpov-rodape {
	margin-top: 22px;
}

.gpov-voltar {
	font-size: 13px;
	font-weight: 600;
	color: var(--gpov-azul);
	text-decoration: none;
}

.gpov-voltar:hover {
	text-decoration: underline;
}

/* =========================================================================
   RESPONSIVO
   ========================================================================= */

@media (max-width: 1200px) {
	.gpov-colunas {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Com UMA coluna, os endereços da grade externa viram bomba: o
	 * `.gpov-direita` pede a coluna 2, que não existe mais, e o navegador cria
	 * uma coluna IMPLÍCITA — a página ganha uma faixa fantasma e rolagem
	 * horizontal. Zera os três e deixa o fluxo automático mandar; com o
	 * `display: contents` do `.gpov-esquerda` a ordem natural do HTML já é
	 * grade → itens → direita, que é o que se quer numa tela estreita.
	 */
	.gpov-grid3,
	.gpov-itens,
	.gpov-direita {
		grid-area: auto;
	}

	.gpov-direita {
		order: 2;
	}

	.gpov-grid3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Com 2 colunas os endereços fixos do vão deixam de valer: o 2.1 apontaria
	 * para uma coluna 3 inexistente e os blocos se sobreporiam. Zera os quatro
	 * para a grade voltar ao fluxo normal (ordem do HTML).
	 */
	.gpov-grid3 > .gpov-bloco--entrega,
	.gpov-grid3 > .gpov-bloco--pagamento,
	.gpov-grid3 > .gpov-bloco--suporte,
	.gpov-grid3 > .gpov-bloco--importante {
		grid-area: auto;
	}

	/* O bloco de suporte fica com a linha inteira quando sobram 2 colunas. */
	.gpov-bloco--suporte,
	.gpov-bloco--importante {
		grid-column: 1 / -1;
	}

	.gpov-bloco--suporte .gpov-btn--full {
		width: auto;
		min-width: 200px;
	}
}

@media (max-width: 780px) {
	.gpov-wrap {
		padding: 12px 0 28px;
	}

	.gpov-grid3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.gpov-bloco--suporte,
	.gpov-bloco--importante {
		grid-column: auto;
	}

	.gpov-bloco--suporte .gpov-btn--full {
		width: 100%;
	}

	.gpov-titulo {
		font-size: 21px;
	}

	.gpov-head-linha {
		align-items: flex-start;
	}

	/* Item: nome em cima, "Detalhe" embaixo. */
	.gpov-item-barra {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
	}

	.gpov-detalhe-corpo {
		min-width: 0;
	}

	.gpov-calendario {
		width: 96px;
	}
}

@media (max-width: 480px) {
	.gpov-status {
		font-size: 11px;
	}

	.gpov-status-nome {
		font-size: 13px;
	}
}

/* =========================================================================
   PROTOCOLO DE ACEITE (modal da tela do pedido)
   -------------------------------------------------------------------------
   O modal em si NÃO tem CSS aqui: ele reusa as classes .gp-confirm-* que o
   arte.css JÁ estiliza nesta tela (o plugin de arte enfileira arte.css quando
   is_wc_endpoint_url('view-order')). Aqui vive só o que é específico do
   protocolo. A fonte do texto é includes/aceite-textos.php.
   ========================================================================= */

.gpov-protocolo-intro {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #333;
}

/* Estado "não registrado" (pedidos anteriores a 18/09/2026). */
.gpov-protocolo-vazio {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--gpov-texto-fraco);
}

/* A lista de declarações aceitas — o miolo do protocolo. */
.gpov-protocolo-lista {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.gpov-protocolo-lista li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 9px 0;
	border-bottom: 1px solid #eef1f4;
	font-size: 13px;
	line-height: 1.5;
	color: #333;
}

.gpov-protocolo-lista li:last-child {
	border-bottom: none;
}

.gpov-protocolo-check {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--gpov-azul-forte);
	color: #fff;
	font-size: 11px;
	line-height: 17px;
	text-align: center;
	font-weight: 700;
}

.gpov-protocolo-link {
	color: var(--gpov-azul-forte);
	font-weight: 700;
	text-decoration: underline;
}

/* "aceito em 18/09/2026 11:20" — desce para a própria linha. */
.gpov-protocolo-quando {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--gpov-texto-fraco);
}

/* "Ver texto completo aceito": revela o texto CONGELADO no momento do aceite. */
.gpov-protocolo-texto {
	margin: 14px 0 0;
	border: 1px solid var(--gpov-borda);
	border-radius: 8px;
	background: #fafbfc;
}

.gpov-protocolo-texto > summary {
	padding: 11px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gpov-azul-forte);
	cursor: pointer;
	list-style: none;
}

.gpov-protocolo-texto > summary::-webkit-details-marker {
	display: none;
}

.gpov-protocolo-texto > summary::after {
	content: '\25BE';
	float: right;
	color: var(--gpov-texto-fraco);
}

.gpov-protocolo-texto[open] > summary::after {
	content: '\25B4';
}

.gpov-protocolo-texto-corpo {
	padding: 0 14px 14px;
	border-top: 1px solid var(--gpov-borda);
}

.gpov-protocolo-versao {
	margin: 12px 0 0;
	font-size: 11.5px;
	color: var(--gpov-texto-fraco);
}

.gpov-protocolo-declaracao {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px dashed var(--gpov-borda-forte);
	font-size: 12.5px;
	line-height: 1.5;
	color: #444;
}

/* O selo: data do aceite + número do protocolo. */
.gpov-protocolo-selo {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 16px 0 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: #ecf2f7;
	font-size: 12.5px;
	color: #333;
}

.gpov-protocolo-selo strong {
	color: var(--gpov-azul-forte);
}


/* ==========================================================================
   Modal de Cadastro Rápido no order-pay (Garantir Cashback & Rastreamento)
   ========================================================================== */
body.gph-modal-open {
  overflow: hidden !important;
}

.gph-modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(14, 42, 79, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.gph-modal-backdrop.gph-modal-active {
  display: flex !important;
}

.gph-modal-box {
  background: #ffffff !important;
  border-radius: 16px !important;
  width: 100% !important;
  max-width: 440px !important;
  padding: 28px 24px !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28) !important;
  position: relative !important;
  box-sizing: border-box !important;
  animation: gphModalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
}

@keyframes gphModalFadeIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.gph-modal-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  background: transparent !important;
  border: none !important;
  font-size: 26px !important;
  line-height: 1 !important;
  color: #64748b !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  transition: color 0.15s, background 0.15s !important;
}

.gph-modal-close:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}

.gph-modal-header {
  text-align: center !important;
  margin-bottom: 18px !important;
}

.gph-modal-badge {
  display: inline-block !important;
  background: #e0f2fe !important;
  color: #0369a1 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  margin-bottom: 8px !important;
}

.gph-modal-title {
  margin: 0 0 6px 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--gp-blue-dark, #0e2a4f) !important;
  line-height: 1.25 !important;
}

.gph-modal-subtitle {
  margin: 0 !important;
  font-size: 13px !important;
  color: #64748b !important;
  line-height: 1.4 !important;
}

.gph-modal-benefits {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.gph-benefit-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: #334155 !important;
  line-height: 1.35 !important;
}

.gph-benefit-icon {
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

.gph-field-group {
  margin-bottom: 14px !important;
}

.gph-field-group label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 5px !important;
}

.gph-field-group .gph-required {
  color: var(--gp-red, #ef4444) !important;
}

.gph-modal-input {
  width: 100% !important;
  height: 44px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.gph-modal-input:focus {
  border-color: var(--gp-blue, #144e82) !important;
  box-shadow: 0 0 0 3px rgba(20, 78, 130, 0.15) !important;
}

.gph-form-error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #b91c1c !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin-bottom: 14px !important;
}

.gph-form-success {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #15803d !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin-bottom: 14px !important;
  text-align: center !important;
  font-weight: 600 !important;
}

.gph-modal-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

.gph-btn-primary {
  width: 100% !important;
  height: 46px !important;
  background-color: var(--gp-blue, #144e82) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: background-color 0.15s, transform 0.1s !important;
}

.gph-btn-primary:hover {
  background-color: var(--gp-blue-strong, #1a568c) !important;
}

.gph-btn-primary:active {
  transform: scale(0.99) !important;
}

.gph-btn-primary:disabled {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

.gph-btn-spinner {
  width: 16px !important;
  height: 16px !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  border-top-color: #ffffff !important;
  border-radius: 50% !important;
  animation: gphSpin 0.7s linear infinite !important;
  display: inline-block !important;
}

@keyframes gphSpin {
  to { transform: rotate(360deg); }
}

.gph-btn-skip {
  background: transparent !important;
  border: none !important;
  color: #64748b !important;
  font-size: 13px !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  padding: 8px !important;
  text-align: center !important;
  transition: color 0.15s !important;
}

.gph-btn-skip:hover {
  color: #1e293b !important;
}