/* =============================================================
 * Ondata Quote Builder Majop — Componente de Busca v2.4
 *
 * Estratégia de blindagem contra Divi:
 *   - Containers usam display:flex/grid com !important onde Divi sobrescreve
 *   - Ícone usa position:relative no wrapper + flex no container
 *   - Cards usam reset de margin/padding nos elementos do .et_pb_module
 *   - Especificidade aumentada (id+class) em pontos críticos
 * ============================================================= */

div.oqm-search-component,
button.oqm-search-component,
.oqm-search-component {
	font-family: 'Inter', -apple-system, sans-serif !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.oqm-search-component *,
.oqm-search-component *::before,
.oqm-search-component *::after {
	box-sizing: border-box !important;
}

/* Reset de buttons dentro do componente (Divi/tema podem dar background, padding etc) */
.oqm-search-component button {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* ----- Toggle expand/collapse ----- */

.oqm-search-toggle {
	display: flex !important;
	align-items: center;
	gap: 8px;
	width: 100%;
	background: #F8FBFE !important;
	border: 1px solid #E5E7EB !important;
	border-radius: 8px;
	padding: 10px 14px !important;
	cursor: pointer;
	font-family: inherit !important;
	color: #1F2937 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-align: left !important;
	transition: all 0.15s !important;
	margin-bottom: 8px !important;
}

.oqm-search-toggle:hover {
	background: #E0F2FE !important;
	border-color: var(--oqm-primary, #1A84C2) !important;
}

.oqm-search-toggle-icon {
	flex-shrink: 0;
	color: var(--oqm-primary, #1A84C2);
	transition: transform 0.2s ease;
}

.is-collapsed .oqm-search-toggle-icon {
	transform: rotate(-90deg);
}

.oqm-search-toggle-label {
	flex: 1;
	display: flex !important;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.oqm-search-toggle-hint {
	font-size: 11px !important;
	color: #6B7280 !important;
	font-weight: 400 !important;
}

/* Body (que colapsa). Especificidade alta pra blindar contra Divi. */
.oqm-search-component .oqm-search-body,
.oqm-search-component > .oqm-search-body,
div.oqm-search-component div.oqm-search-body {
	max-height: 9999px !important;
	opacity: 1 !important;
	overflow: visible;
	transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.2s ease;
	display: block !important;
}

.oqm-search-component.is-collapsed .oqm-search-body,
.oqm-search-component.is-collapsed > .oqm-search-body,
div.oqm-search-component.is-collapsed div.oqm-search-body {
	max-height: 0 !important;
	opacity: 0 !important;
	overflow: hidden !important;
	margin-top: 0 !important;
	pointer-events: none;
}

/* ----- Input principal ----- */

.oqm-search-component .oqm-search-input-wrap,
div.oqm-search-component .oqm-search-input-wrap {
	position: relative !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 10px !important;
	background: #fff !important;
	border: 2px solid #E5E7EB !important;
	border-radius: 8px !important;
	padding: 0 12px !important;
	margin: 0 0 12px !important;
	transition: all 0.15s !important;
	width: 100% !important;
	min-height: 48px !important;
	box-sizing: border-box !important;
}

.oqm-search-component .oqm-search-input-wrap:focus-within {
	border-color: var(--oqm-primary, #1A84C2) !important;
	box-shadow: 0 0 0 3px rgba(26, 132, 194, 0.1);
}

/* Ícone da lupa — várias camadas de defesa contra Divi/temas:
   1. position:static !important impede o Divi de aplicar position:absolute
   2. flex-shrink:0 + flex-grow:0 + flex-basis:18px ancoram no flex
   3. width/height/min/max forçam o tamanho real (sem isso o ícone pode colapsar pra zero)
   4. align-self:center centraliza verticalmente independente do baseline
   5. transform:none impede animações Divi que poderiam mover o ícone */
.oqm-search-component .oqm-search-input-wrap > .oqm-search-icon,
.oqm-search-component .oqm-search-icon,
.oqm-search-component svg.oqm-search-icon,
div.oqm-search-component svg.oqm-search-icon {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	transform: none !important;
	color: #9CA3AF !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	flex-basis: 18px !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	align-self: center !important;
	display: inline-block !important;
	vertical-align: middle !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	box-sizing: content-box !important;
	pointer-events: none !important;
}

/* Quando o wrapper está dentro de um <p> ou similar (acontece com WP autop) */
.oqm-search-component .oqm-search-input-wrap p {
	display: contents !important;
	margin: 0 !important;
}

.oqm-search-component .oqm-search-input,
div.oqm-search-component .oqm-search-input,
input.oqm-search-input {
	flex: 1 1 auto !important;
	border: 0 !important;
	background: transparent !important;
	padding: 10px 4px !important;
	margin: 0 !important;
	font-size: 14px !important;
	color: #1F2937 !important;
	outline: none !important;
	font-family: inherit !important;
	width: auto !important;
	min-width: 0 !important;
	box-shadow: none !important;
	line-height: 1.4 !important;
}

.oqm-search-component .oqm-search-input::placeholder {
	color: #9CA3AF !important;
	opacity: 1 !important;
}

.oqm-search-component .oqm-search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.oqm-search-component .oqm-search-clear {
	flex-shrink: 0;
	background: #F3F4F6 !important;
	border: 0 !important;
	border-radius: 50%;
	width: 24px !important;
	height: 24px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #6B7280;
	padding: 0 !important;
	margin: 0 !important;
	transition: all 0.15s;
}

.oqm-search-component .oqm-search-clear:hover {
	background: #DC2626 !important;
	color: #fff !important;
}

/* ----- Tags ----- */

.oqm-search-component .oqm-search-tags {
	margin: 0 0 12px !important;
}

.oqm-search-component .oqm-search-tags-list {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.oqm-search-component .oqm-search-tag {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	background: #F8F9FA !important;
	border: 1px solid #E5E7EB !important;
	border-radius: 999px !important;
	padding: 4px 10px 4px 8px !important;
	font-size: 12px !important;
	color: #374151 !important;
	cursor: pointer;
	font-family: inherit !important;
	transition: all 0.15s !important;
	margin: 0 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 400 !important;
}

.oqm-search-component .oqm-search-tag:hover {
	background: #DBEAFE !important;
	border-color: var(--oqm-primary, #1A84C2) !important;
	color: #1E40AF !important;
}

.oqm-search-component .oqm-search-tag.is-active {
	background: var(--oqm-primary, #1A84C2) !important;
	border-color: var(--oqm-primary, #1A84C2) !important;
	color: #fff !important;
}

.oqm-search-component .oqm-search-tag-icon {
	font-size: 11px;
}

.oqm-search-component .oqm-search-tag-count {
	background: #fff;
	color: #6B7280;
	font-size: 10px;
	padding: 1px 6px;
	border-radius: 999px;
	margin-left: 2px;
	font-weight: 500;
}

.oqm-search-component .oqm-search-tag.is-active .oqm-search-tag-count {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

/* ----- Status (contador de resultados) ----- */

.oqm-search-component .oqm-search-status {
	display: none;
	font-size: 12px;
	color: #4B5563;
	padding: 8px 12px;
	background: #F8F9FA;
	border-radius: 6px;
	margin: 0 0 10px;
}

.oqm-search-component .oqm-search-status em {
	color: var(--oqm-primary, #1A84C2);
	font-style: normal;
	font-weight: 500;
}

.oqm-search-component .oqm-search-status-others {
	color: #6B7280;
	font-size: 11px;
}

/* ----- Section head ----- */

.oqm-search-component .oqm-search-section-head {
	display: none;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--oqm-success, #10B981);
	padding: 6px 0;
	margin: 0 0 8px;
	justify-content: space-between;
	align-items: center;
}

.oqm-search-component .oqm-search-section-head small {
	font-weight: 400;
	color: #9CA3AF;
}

/* ----- Grid ----- */

/* ----- Grid ----- */

.oqm-search-component .oqm-search-grid,
div.oqm-search-component .oqm-search-grid,
div.oqm-search-component div.oqm-search-grid,
.et_pb_code_inner .oqm-search-component .oqm-search-grid,
.et_pb_module .oqm-search-component .oqm-search-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
	gap: 6px !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 60px !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Pais do grid também precisam ter largura — Divi pode forçar width:auto/0 em containers */
.oqm-search-component .oqm-search-results,
.oqm-search-component .oqm-search-section,
div.oqm-search-component .oqm-search-results,
div.oqm-search-component .oqm-search-section {
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
	box-sizing: border-box !important;
}

/* ----- Card ----- */

/*
 * IMPORTANTE: O Divi força `min-width: 0` em flex/grid items, e force button
 * a ter `width: auto` em vários contextos. Dentro de `display: grid` com
 * `auto-fill`, isso faz cada coluna receber largura zero. Forçamos:
 * - min-width: 0 do grid item (não do button) garante text overflow
 * - width: 100% do button preenche a célula do grid
 * - flex-basis: auto evita que o button se reduza pra 0 dentro do grid
 */
.oqm-search-component .oqm-search-card,
div.oqm-search-component .oqm-search-card,
button.oqm-search-card,
.et_pb_code_inner .oqm-search-card,
.et_pb_module .oqm-search-card {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	background: #fff !important;
	border: 1px solid #E5E7EB !important;
	border-radius: 8px !important;
	padding: 8px 10px !important;
	margin: 0 !important;
	cursor: pointer !important;
	transition: all 0.15s !important;
	font-family: inherit !important;
	text-align: left !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	flex: 0 1 auto !important;
	flex-basis: auto !important;
	box-sizing: border-box !important;
	color: #1F2937 !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	box-shadow: none !important;
	min-height: 60px !important;
	visibility: visible !important;
	opacity: 1 !important;
	box-sizing: border-box !important;
}

/* Cards ocultos por paginação (não match) ou por filtro */
.oqm-search-component .oqm-search-card.is-paginated-out,
.oqm-search-component .oqm-search-card.is-hidden,
button.oqm-search-card.is-paginated-out,
button.oqm-search-card.is-hidden {
	display: none !important;
}

.oqm-search-component .oqm-search-card:hover:not(.is-disabled):not(:disabled) {
	border-color: var(--oqm-primary, #1A84C2) !important;
	background: #F8FBFE !important;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(26, 132, 194, 0.10) !important;
}

/* "Outros" (cards depois dos matches) ficam mais sutis */
.oqm-search-component .oqm-search-card.is-other {
	background: #FAFAFA !important;
	opacity: 0.85;
}

/* ----- Estado "já no carrinho" -----
   Em vez de opacity baixa + badge "já no carrinho" sobreposto ao +
   (que ficava ilegível e parecia bug), o card inteiro vira verde claro
   e o + azul é substituído por um ✓ verde do mesmo tamanho — comunicando
   "já adicionado" sem texto extra precisando caber no espaço apertado. */
.oqm-search-component .oqm-search-card.is-disabled,
.oqm-search-component .oqm-search-card[disabled] {
	background: #ECFDF5 !important;
	border-color: #A7F3D0 !important;
	cursor: default;
	opacity: 1; /* sobrescreve a opacity 0.5 anterior — não queremos parecer bug */
}

/* Hover sutil mantém o feedback de que está clicável (mas não vai fazer nada) */
.oqm-search-component .oqm-search-card.is-disabled:hover,
.oqm-search-component .oqm-search-card[disabled]:hover {
	background: #ECFDF5 !important;
	border-color: #A7F3D0 !important;
	transform: none !important;
	box-shadow: none !important;
}

.oqm-search-component .oqm-search-card.is-picked {
	border-color: var(--oqm-success, #10B981) !important;
	background: #ECFDF5 !important;
}

.oqm-search-component .oqm-search-card-img {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	background: #F8F9FA;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.oqm-search-component .oqm-search-card-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

.oqm-search-component .oqm-search-card-noimg {
	font-size: 18px;
	opacity: 0.4;
}

.oqm-search-component .oqm-search-card-info {
	flex: 1;
	min-width: 0;
}

.oqm-search-component .oqm-search-card-cat {
	font-size: 9px !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #9CA3AF !important;
	font-weight: 500;
	margin: 0 0 2px !important;
	line-height: 1.2 !important;
}

.oqm-search-component .oqm-search-card-name {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #1F2937 !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.oqm-search-component .oqm-search-card-sku {
	font-size: 10px !important;
	color: #9CA3AF !important;
	font-family: 'SF Mono', Monaco, monospace !important;
	margin-top: 2px !important;
	line-height: 1.2 !important;
}

.oqm-search-component .oqm-search-card-action {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.oqm-search-component .oqm-search-card-plus {
	width: 28px;
	height: 28px;
	background: var(--oqm-primary, #1A84C2);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 500;
	transition: all 0.15s;
}

.oqm-search-component .oqm-search-card:hover:not(.is-disabled):not(:disabled) .oqm-search-card-plus {
	transform: scale(1.1);
}

.oqm-search-component .oqm-search-card.is-picked .oqm-search-card-plus {
	background: var(--oqm-success, #10B981);
	font-size: 0;
}

.oqm-search-component .oqm-search-card.is-picked .oqm-search-card-plus::after {
	content: '✓';
	font-size: 14px;
}

.oqm-search-component .oqm-search-card-badge {
	display: none !important;
}

/* Quando o card está disabled (já no carrinho), troca o + azul por um ✓ verde
   no mesmo container — sem vazar texto, sem sobreposição. */
.oqm-search-component .oqm-search-card.is-disabled .oqm-search-card-plus,
.oqm-search-component .oqm-search-card[disabled] .oqm-search-card-plus {
	background: var(--oqm-success, #10B981) !important;
	font-size: 0 !important;
}

.oqm-search-component .oqm-search-card.is-disabled .oqm-search-card-plus::after,
.oqm-search-component .oqm-search-card[disabled] .oqm-search-card-plus::after {
	content: '✓';
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

/* Garante que o + não some quando JS aplica [hidden] (HTML5 hidden tem baixa
   especificidade vs nossas regras com !important; força ele a permanecer
   no display flex pra mostrar o ✓ via ::after) */
.oqm-search-component .oqm-search-card.is-disabled .oqm-search-card-plus[hidden],
.oqm-search-component .oqm-search-card[disabled] .oqm-search-card-plus[hidden] {
	display: flex !important;
}

/* ----- "Ver mais" ----- */

.oqm-search-component .oqm-search-more {
	display: block !important;
	width: 100% !important;
	background: #F8F9FA !important;
	border: 1px dashed #D1D5DB !important;
	color: var(--oqm-primary, #1A84C2) !important;
	padding: 10px !important;
	border-radius: 6px !important;
	margin: 8px 0 0 !important;
	cursor: pointer;
	font-size: 12px !important;
	font-weight: 500 !important;
	transition: all 0.15s;
	font-family: inherit !important;
	text-align: center !important;
}

.oqm-search-component .oqm-search-more:hover {
	background: #DBEAFE !important;
	border-color: var(--oqm-primary, #1A84C2) !important;
	border-style: solid !important;
}

/* ----- Empty ----- */

.oqm-search-component .oqm-search-empty {
	text-align: center;
	padding: 30px 20px;
	color: #6B7280;
	background: #F8F9FA;
	border-radius: 8px;
	margin: 8px 0 0;
}

.oqm-search-component .oqm-search-empty-icon {
	font-size: 28px;
	opacity: 0.4;
	margin-bottom: 8px;
}

.oqm-search-component .oqm-search-empty-title {
	font-size: 14px;
	font-weight: 500;
	color: #1F2937;
	margin-bottom: 4px;
}

.oqm-search-component .oqm-search-empty-hint {
	font-size: 12px;
	color: #9CA3AF;
}

/* ----- Modos / contextos ----- */

.oqm-search-context-admin .oqm-search-card { padding: 6px 8px !important; }
.oqm-search-context-admin .oqm-search-card-img { width: 36px; height: 36px; }
.oqm-search-context-admin .oqm-search-card-name { font-size: 12px !important; }

/* ----- Mobile ----- */

@media (max-width: 580px) {
	.oqm-search-component .oqm-search-grid { grid-template-columns: 1fr !important; }
	.oqm-search-component .oqm-search-tags-list { gap: 4px !important; }
	.oqm-search-component .oqm-search-tag { font-size: 11px !important; padding: 3px 8px !important; }
}

/* ----- Estado fatal (sem produtos disponíveis) ----- */

.oqm-search-fatal {
	text-align: center;
	padding: 30px 20px;
	background: #FEF3C7 !important;
	border: 1px solid #F59E0B;
	border-radius: 8px;
	color: #78350F;
	margin: 8px 0;
}

.oqm-search-fatal-icon {
	font-size: 28px;
	margin-bottom: 8px;
}

.oqm-search-fatal-title {
	font-size: 14px;
	font-weight: 600;
	color: #78350F !important;
	margin-bottom: 6px;
}

.oqm-search-fatal-hint {
	font-size: 12px;
	color: #92400E !important;
	line-height: 1.5;
}

.oqm-search-fatal-hint a {
	color: #B45309 !important;
	text-decoration: underline !important;
}

/* ----- Modo quick-finish (versão compacta dentro da barra de finalização) ----- */

.oqm-search-context-quick {
	margin: 8px 0 12px !important;
}

.oqm-search-context-quick .oqm-search-toggle {
	background: #fff !important;
	border: 1px solid #E5E7EB !important;
	font-size: 12px !important;
	padding: 8px 12px !important;
}

.oqm-search-context-quick .oqm-search-toggle-hint {
	font-size: 10px !important;
}

/* Quick-finish: cards menores, grid mais denso */
.oqm-search-context-quick .oqm-search-grid {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
	gap: 4px !important;
}

.oqm-search-context-quick .oqm-search-card {
	padding: 6px 8px !important;
	font-size: 12px !important;
}

.oqm-search-context-quick .oqm-search-card-img {
	width: 36px;
	height: 36px;
}

.oqm-search-context-quick .oqm-search-card-name {
	font-size: 12px !important;
}

.oqm-search-context-quick .oqm-search-card-cat {
	font-size: 8px !important;
}

/* Esconde tags no quick (já tem pouco espaço) */
.oqm-search-context-quick .oqm-search-tags {
	display: none !important;
}

/* Wrapper no template quick */
.oqm-qf-search-wrap {
	margin: 12px 0;
	padding-top: 12px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

@media (max-width: 580px) {
	.oqm-search-context-quick .oqm-search-grid { grid-template-columns: 1fr !important; }
}

/* ===== Defesa final contra Divi 5 + Loop Builder + Code Module =====
 * Se o problema persistir mesmo com !important, force layout via attribute selector
 * (maior especificidade que classes simples) e via descendant explícito.
 */
[data-oqm-search] [data-oqm-search-card] {
	width: 100% !important;
	min-width: 0 !important;
	flex: 0 1 auto !important;
	flex-basis: auto !important;
	box-sizing: border-box !important;
	display: flex !important;
}

[data-oqm-search] .oqm-search-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
	width: 100% !important;
	min-width: 100% !important;
	box-sizing: border-box !important;
}

/* Garantir que o componente em si ocupa toda a largura disponível */
[data-oqm-search] {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Em mobile mostrar 1 coluna sempre */
@media (max-width: 580px) {
	[data-oqm-search] .oqm-search-grid {
		grid-template-columns: 1fr !important;
	}
}