/*
 * LEO Commerce UI — Header Desktop Reference v0.1 SAFE
 *
 * Objetivo visual:
 * logo | busca longa com lupa | Informar CEP | Conta | Favoritos | Carrinho
 *
 * A distribuição estrutural continua pertencendo ao módulo v0.5.11.8.
 * Este arquivo não cria larguras mágicas, não move itens com margem negativa
 * e não diferencia usuário logado/deslogado.
 */

@media (min-width: 1000px) {
	/*
	 * Mantém a busca como peça flexível da coluna inicial. O slider homologado
	 * na v0.5.11.10 continua sendo a única autoridade para encurtar/alongar.
	 */
	#header [data-column="start"] .ct-header-text:has(.leo-search-form) {
		align-self: center;
	}

	/* Aparência contínua da caixa, mais próxima da referência visual. */
	#header .ct-header-text .leo-search-form {
		position: relative;
		min-height: 50px;
		background: #ffffff;
		border-radius: 12px;
		box-shadow: inset 0 0 0 1px rgba(7, 31, 107, 0.10);
		overflow: hidden;
	}

	#header .ct-header-text .leo-search-form input[type="search"] {
		height: 50px;
		min-height: 50px;
		padding-left: 17px;
		padding-right: 12px;
		border: 0;
		border-radius: 12px 0 0 12px;
		background: transparent;
		box-shadow: none;
		outline: none;
	}

	/*
	 * O HTML atualmente usado pelo Header Builder já expõe um submit vazio.
	 * Apenas damos a ele área clicável e uma lupa da identidade LEO.
	 */
	#header .ct-header-text .leo-search-form button[type="submit"] {
		align-self: stretch;
		width: 48px;
		min-width: 48px;
		height: 50px;
		min-height: 50px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0 12px 12px 0;
		background-color: transparent;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071f6b' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 23px 23px;
		box-shadow: none;
		font-size: 0;
		cursor: pointer;
	}

	#header .ct-header-text .leo-search-form button[type="submit"]:focus-visible {
		outline: 2px solid #071f6b;
		outline-offset: -4px;
	}

	/* Failsafe puramente visual caso o HTML deixe de trazer o botão submit. */
	#header .ct-header-text .leo-search-form:not(:has(button[type="submit"], input[type="submit"]))::after {
		content: "";
		align-self: center;
		width: 48px;
		height: 50px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071f6b' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 23px 23px;
		pointer-events: none;
	}

	/* Pin azul LEO; o texto continua usando a tipografia/cor do header. */
	#header .ct-header-cta a[href="#leo-cep"] .leo-cep-trigger-icon {
		color: #071f6b;
	}

	/*
	 * Na referência, Favoritos aparece com coração + texto. Mantemos o botão e
	 * toda a lógica já homologada; o rótulo é somente apresentação desktop.
	 */
	#header .leo-favorites-trigger {
		width: auto;
		min-width: 34px;
		margin-left: 0;
		margin-right: 0;
		gap: 7px;
		color: #071f6b;
		white-space: nowrap;
	}

	#header .leo-favorites-trigger::after {
		content: "Favoritos";
		color: #111111;
		font-size: 14px;
		font-weight: 500;
		line-height: 1;
	}

	#header .leo-favorites-trigger:hover,
	#header .leo-favorites-trigger:focus-visible {
		color: #052e70;
	}

	/* Quando houver contagem, o badge continua preso ao coração, não ao texto. */
	#header .leo-favorites-trigger__count {
		left: 17px;
		right: auto;
	}

	/* Garante que os SVGs funcionais do conjunto mantenham o azul da marca. */
	#header .ct-header-cta a[href="#leo-cep"] svg,
	#header .ct-account-item svg,
	#header [data-id="account"] svg,
	#header .ct-cart-item svg,
	#header [data-id="cart"] svg,
	#header .leo-favorites-trigger svg {
		color: #071f6b;
	}
}