/**
 * Supra Force — aviso de sucesso do WooCommerce ("... foi adicionado ao seu
 * carrinho.") na identidade visual do projeto.
 *
 * ORIGEM DO VERDE (confirmada no DOM ao vivo, não suposta):
 *   hello-commerce-woocommerce.css v1.0.3 (tema pai) define duas custom
 *   properties só para o aviso de sucesso —
 *     .woocommerce-message { --ehc-notice-color: #8fae1b;
 *                            --ehc-notice-background-color: #edf7ca; }
 *   e depois pinta o bloco com elas:
 *     .woocommerce-error, .woocommerce-info, .woocommerce-message {
 *       background-color: var(--ehc-notice-background-color);
 *       border: 1px solid var(--ehc-notice-color); color: #000; }
 *   O core do WooCommerce (woocommerce.css 10.9.4) reforça o mesmo verde em
 *   .woocommerce-message { border-top-color:#8fae1b } e em
 *   .woocommerce-message::before { color:#8fae1b }.
 *
 *   O Additional CSS do Customizer (inline <style> no <head>) já havia
 *   trocado PARTE disso por azul (border-top-color e a cor do ::before, ambos
 *   #2f65f2, mais radius 18px e LUXE UNO), mas não o fundo nem as outras três
 *   bordas — daí o resultado híbrido medido antes desta fase: topo azul,
 *   laterais/base verdes (#8fae1b) e fundo verde-claro (#edf7ca).
 *
 * ESTRATÉGIA:
 *   Redefinir as duas custom properties do tema em vez de brigar propriedade
 *   por propriedade — é o mecanismo que o próprio tema usa, e assim fundo e
 *   as quatro bordas passam a ser pintados na cor certa por uma regra só.
 *   As bordas/ícone ainda são reafirmados explicitamente porque o core do
 *   WooCommerce e o Additional CSS escrevem border-top-color e a cor do
 *   ::before diretamente, sem passar pelas variáveis.
 *
 * ESCOPO — deliberadamente estreito:
 *   - só .woocommerce-message (sucesso). .woocommerce-info e
 *     .woocommerce-error ficam exatamente como estavam, conforme o pedido de
 *     não alterar mensagens de erro/alerta. As três NÃO compartilham o mesmo
 *     seletor de cor: cada uma tem seu próprio par de custom properties no
 *     tema, então dá para tratar só o sucesso sem risco de regressão.
 *   - body:not(.woocommerce-cart): a página do carrinho já recebeu, em fase
 *     anterior aprovada, um tratamento navy próprio (#050A55) em
 *     theme-cart-page.css para os três tipos de aviso. Mexer nela agora seria
 *     escopo extra e regressão visual, então ela fica de fora.
 *
 * Tokens reaproveitados do projeto (nenhuma cor nova):
 *   #E8EDFF  superfície azul-clara (cards da Home, mini-cart, carrinho)
 *   #425fdb  azul da marca (botões/acentos — cor dominante do plugin)
 *   #050A55  navy de texto/título
 *   #0a1b8c  azul escuro de hover, mesma convenção dos CTAs dos cards
 *   999px    raio de pílula dos botões; 18px o raio de superfície
 *   LOFT (botões, peso 900) / LUXE UNO (corpo)
 *
 * Sem edição do tema pai, sem template PHP e sem tocar em documento do
 * Elementor no banco. !important segue o padrão já estabelecido em todos os
 * theme-*.css deste plugin (o Additional CSS do Customizer também usa
 * !important no fundo do botão, então ele precisa ser batido).
 */

/* =========================================================
   1. Container do aviso de sucesso
   ========================================================= */
body:not(.woocommerce-cart) .woocommerce-message {
	/* As duas variáveis do tema: fundo e cor de borda de uma vez. */
	--ehc-notice-color: #425fdb;
	--ehc-notice-background-color: #E8EDFF;

	background-color: #E8EDFF !important;
	border: 1px solid #425fdb !important;
	/* O core e o Additional CSS escrevem border-top-color direto; o shorthand
	   acima já cobre, mas isto deixa explícito que não sobra verde no topo. */
	border-top-color: #425fdb !important;
	border-radius: 18px !important;
	color: #050A55 !important;

	/* Layout: o tema já declara flex + space-between + align-items:center.
	   O texto da mensagem é um nó de texto anônimo (não tem elemento
	   próprio no markup do WooCommerce), portanto vira um item flex anônimo
	   e só pode ser espaçado pelo gap do container — daí o gap aqui em vez
	   de margem no botão. */
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 20px !important;

	/* Esquerda maior para não colidir com o ::before absoluto. */
	padding: 14px 20px 14px 52px !important;
	font-family: 'LUXE UNO', sans-serif !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
}

/* Ícone de sucesso (fonte de ícones do WooCommerce, posicionado em absolute
   pelo core e centrado verticalmente pelo tema). Só a cor muda. */
body:not(.woocommerce-cart) .woocommerce-message::before {
	color: #425fdb !important;
	left: 20px !important;
}

/* O link do nome do produto, quando a mensagem o traz como âncora. */
body:not(.woocommerce-cart) .woocommerce-message a:not(.button) {
	color: #050A55 !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

/* =========================================================
   2. Botão "VER PEDIDO" (a.button.wc-forward)
   -----------------------------------------------------------
   Antes: 154.5 x 42px, raio 0px (o raio 999px do Additional CSS perdia por
   especificidade para .woocommerce .woocommerce-message .button do tema, que
   escreve os quatro cantos via var(--ehc-button-border-*-radius)), peso 500,
   16px, capitalize, float:right e padding 12px 24px.

   Depois: largura pelo conteúdo, altura menor e controlada por min-height,
   pílula, LOFT 900 em caixa alta — coerente com os CTAs dos cards e com o
   botão "ADICIONAR AO PEDIDO" do Quick View. Fica menor que o conteúdo da
   página, mas claramente acionável e dentro do alvo de toque.

   REFINO 2026-08-04 (2ª rodada): 13px/40px/pad 18px -> 12px/38px/pad 14px
   nesta base (tablet e desktop), com o mobile mantendo 40px de altura no
   bloco 4 por causa do toque. O botão passa a ler como CTA secundário, e a
   largura que ele devolve é justamente o que o texto da mensagem ganha para
   caber em menos linhas no tablet. Ligadura/letter-spacing baixados de .04em
   para .03em — proporcional ao corpo menor, sem virar caixa-alta espaçada.
   ========================================================= */
body:not(.woocommerce-cart) .woocommerce-message a.button,
body:not(.woocommerce-cart) .woocommerce-message .button.wc-forward {
	/* float do core é inerte dentro de um container flex, mas é removido
	   explicitamente para o caso de o flex cair por algum motivo. */
	float: none !important;
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: auto !important;
	min-width: 0 !important;
	min-height: 38px !important;
	padding: 0 14px !important;

	background-color: #425fdb !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 999px !important;

	font-family: 'LOFT', sans-serif !important;
	font-size: 12px !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	letter-spacing: .03em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	text-decoration: none !important;
	white-space: nowrap !important;

	transition: background-color 0.2s ease-in-out !important;
}

/* Hover: mesmo azul escuro dos CTAs dos cards (#0a1b8c). */
body:not(.woocommerce-cart) .woocommerce-message a.button:hover,
body:not(.woocommerce-cart) .woocommerce-message .button.wc-forward:hover {
	background-color: #0a1b8c !important;
	color: #ffffff !important;
}

/* Teclado: anel navy, que contrasta tanto com o azul do botão quanto com o
   fundo #E8EDFF (um anel #425fdb sumiria contra o próprio botão). */
body:not(.woocommerce-cart) .woocommerce-message a.button:focus-visible,
body:not(.woocommerce-cart) .woocommerce-message .button.wc-forward:focus-visible {
	outline: 2px solid #050A55 !important;
	outline-offset: 2px !important;
}

/* =========================================================
   3. Tablet (768-1024px) — estrutura [ícone + mensagem flexível][VER PEDIDO]
   numa linha só, com alinhamento vertical central (herdado do bloco 1).

   REFINO 2026-08-04 (2ª rodada): corpo da mensagem 14.5px -> 13.5px, SÓ
   nesta faixa. É a redução sutil prevista no pedido para a mensagem caber de
   forma equilibrada — com um título de produto longo ("CAIXA (12un.) – La
   Fajor (La Ganexa) com Whey Protein Sabor Cookies N' Cream – 50g un.") uma
   única linha é fisicamente impossível a 768px, e o pedido é explícito em não
   esconder, cortar nem truncar: quantidade e nome completo seguem visíveis.
   O ganho vem somado ao que o botão compacto devolveu de largura. line-height
   sobe de 1.5 para 1.55 para compensar o corpo menor e manter a leitura
   confortável. Desktop e mobile NÃO são tocados aqui.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
	body:not(.woocommerce-cart) .woocommerce-message {
		gap: 16px !important;
		padding: 14px 18px 14px 48px !important;
		font-size: 13.5px !important;
		line-height: 1.55 !important;
	}

	body:not(.woocommerce-cart) .woocommerce-message::before {
		left: 18px !important;
	}

	body:not(.woocommerce-cart) .woocommerce-message a.button,
	body:not(.woocommerce-cart) .woocommerce-message .button.wc-forward {
		padding: 0 13px !important;
	}
}

/* =========================================================
   4. Mobile (<=767px) — coluna: mensagem em cima, botão embaixo, alinhado à
   esquerda e ocupando só a largura necessária. O ícone deixa de ser centrado
   verticalmente (num bloco alto em coluna ele flutuaria no meio do nada) e
   passa a ancorar na primeira linha do texto.
   ========================================================= */
@media (max-width: 767px) {
	body:not(.woocommerce-cart) .woocommerce-message {
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		gap: 14px !important;
		padding: 16px 18px 16px 46px !important;
		font-size: 14.5px !important;
		line-height: 1.5 !important;
	}

	body:not(.woocommerce-cart) .woocommerce-message::before {
		top: 18px !important;
		left: 17px !important;
		transform: none !important;
	}

	body:not(.woocommerce-cart) .woocommerce-message a.button,
	body:not(.woocommerce-cart) .woocommerce-message .button.wc-forward {
		/* REFINO 2026-08-04 (2ª rodada): 44px -> 40px de altura e 20px -> 14px
		   de padding lateral. 40px é o topo da faixa 38-40px pedida, escolhido
		   de propósito no mobile (e não 38px como em tablet/desktop) para
		   segurar a área de toque enquanto o botão encolhe.

		   align-self:flex-start alinha o botão à borda esquerda da CAIXA DE
		   CONTEÚDO do container — que já é o início do bloco textual, porque o
		   padding-left de 46px acima é justamente o recuo do ícone. Ou seja, o
		   botão nasce na mesma vertical em que a mensagem começa (medido:
		   btn.left == texto.left em todos os viewports mobile), sem centralizar
		   no container nem esbarrar no ícone. */
		min-height: 40px !important;
		padding: 0 14px !important;
		align-self: flex-start !important;
	}
}
