/**
 * GuiaWP - Estilos front-end auxiliares
 *
 * @package GuiaWP
 * @author Dante Testa <https://dantetesta.com.br>
 * @since 1.0.0 - 2026-03-11
 * @modified 1.9.9 - 2026-03-22 - Adicionado bg-[#0052cc]/8, group-hover:* classes para single anúncio
 */

/* Utilitários responsivos Tailwind ausentes no build compilado */
@media (min-width: 768px) {
	.md\:block { display: block !important; }
	.md\:contents { display: contents !important; }
}
@media (min-width: 1024px) {
	.lg\:sticky { position: sticky !important; }
}

/* ==========================================================================
   Mapeamento de cores dinâmicas do tema
   Classes Tailwind com valores arbitrários (#0052cc) ausentes no build compilado.
   Todas mapeadas para CSS variables do tema para personalização dinâmica.
   @author Dante Testa <https://dantetesta.com.br>
   @modified 1.9.8 - 2026-03-22
   ========================================================================== */

/* Cor primária — background */
.bg-\[\#0052cc\] { background-color: var(--gcep-color-primary, #0052cc); }
.bg-\[\#0052cc\]\/5 { background-color: color-mix(in srgb, var(--gcep-color-primary, #0052cc) 5%, transparent); }
.bg-\[\#0052cc\]\/10 { background-color: color-mix(in srgb, var(--gcep-color-primary, #0052cc) 10%, transparent); }
.bg-\[\#0052cc\]\/20 { background-color: color-mix(in srgb, var(--gcep-color-primary, #0052cc) 20%, transparent); }
.bg-\[\#0052cc\]\/8 { background-color: color-mix(in srgb, var(--gcep-color-primary, #0052cc) 8%, transparent); }
.from-\[\#0052cc\] { --tw-gradient-from: var(--gcep-color-primary, #0052cc); }
.to-\[\#003d99\] { --tw-gradient-to: color-mix(in srgb, var(--gcep-color-primary, #0052cc) 100%, #000 20%); }

/* Cor primária — hover background */
.hover\:bg-\[\#003d99\]:hover { background-color: color-mix(in srgb, var(--gcep-color-primary, #0052cc) 100%, #000 20%); }
.hover\:bg-\[\#0052cc\]\/5:hover { background-color: color-mix(in srgb, var(--gcep-color-primary, #0052cc) 5%, transparent); }

/* Cor primária — texto */
.text-\[\#0052cc\] { color: var(--gcep-color-primary, #0052cc); }
.hover\:text-\[\#0052cc\]:hover { color: var(--gcep-color-primary, #0052cc); }

/* Cor primária — borda */
.border-\[\#0052cc\] { border-color: var(--gcep-color-primary, #0052cc); }
.border-\[\#0052cc\]\/30 { border-color: color-mix(in srgb, var(--gcep-color-primary, #0052cc) 30%, transparent); }
.hover\:border-\[\#0052cc\]:hover { border-color: var(--gcep-color-primary, #0052cc); }
.focus\:border-\[\#0052cc\]:focus { border-color: var(--gcep-color-primary, #0052cc); }

/* Cor primária — group-hover */
.group:hover .group-hover\:bg-\[\#0052cc\] { background-color: var(--gcep-color-primary, #0052cc); }
.group:hover .group-hover\:border-\[\#0052cc\]\/20 { border-color: color-mix(in srgb, var(--gcep-color-primary, #0052cc) 20%, transparent); }
.group:hover .group-hover\:text-\[\#0052cc\] { color: var(--gcep-color-primary, #0052cc); }

/* Cor primária — ring / shadow */
.ring-\[\#0052cc\] { --tw-ring-color: var(--gcep-color-primary, #0052cc); }
.focus\:ring-\[\#0052cc\]\/20:focus { --tw-ring-color: color-mix(in srgb, var(--gcep-color-primary, #0052cc) 20%, transparent); }
.focus\:ring-\[\#0052cc\]\/30:focus { --tw-ring-color: color-mix(in srgb, var(--gcep-color-primary, #0052cc) 30%, transparent); }
.shadow-\[\#0052cc\]\/20 { --tw-shadow-color: color-mix(in srgb, var(--gcep-color-primary, #0052cc) 20%, transparent); }

/* Cor primária — background escuro (#003d99 → primary darkened) */
.bg-\[\#003d99\] { background-color: color-mix(in srgb, var(--gcep-color-primary, #0052cc) 100%, #000 20%); }

/* Cor de destaque */
.bg-\[\#22c55e\] { background-color: var(--gcep-color-destaque, #22c55e); }
.text-\[\#22c55e\] { color: var(--gcep-color-destaque, #22c55e); }

/* Cor de fundo — sobrescreve bg-background-light do Tailwind */
.bg-background-light { background-color: var(--gcep-color-fundo, #f5f7f8) !important; }

/* Cor de texto — sobrescreve text-slate-900 para textos principais */
body { color: var(--gcep-color-texto, #0f172a); }

/* Cor secundária — classe utilitária para uso direto nos templates */
.gcep-bg-secundaria { background-color: var(--gcep-color-secundaria, #f5f7f8) !important; }
.gcep-text-secundaria { color: var(--gcep-color-secundaria, #f5f7f8) !important; }
.gcep-border-secundaria { border-color: var(--gcep-color-secundaria, #f5f7f8) !important; }


/* Paginação WordPress */
.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.page-numbers li {
	display: inline-flex;
}

.page-numbers a,
.page-numbers span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	transition: all 0.2s;
}

.page-numbers a {
	border: 1px solid #e2e8f0;
	color: #475569;
}

.page-numbers a:hover {
	background-color: #f8fafc;
}

.page-numbers .current {
	background-color: #0052cc;
	color: #fff;
	border: none;
}

/* Line clamp */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* intl-tel-input — ajustes de estilo para integração com Tailwind */
.iti {
	display: block;
	width: 100%;
}

.iti input.iti__tel-input {
	width: 100%;
	padding-left: 90px !important;
}

.iti__country-container {
	z-index: 50;
}

.iti__dropdown {
	z-index: 60;
	border-radius: 0.5rem;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	border: 1px solid #e2e8f0;
}

.iti__search-input {
	border-radius: 0.375rem;
	border: 1px solid #e2e8f0;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	outline: none;
}

.iti__search-input:focus {
	border-color: #0052cc;
	box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
}

.iti__country-list {
	max-height: 220px;
	border-radius: 0 0 0.5rem 0.5rem;
}

.iti__country {
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
}

.iti__country:hover,
.iti__country--highlight {
	background-color: #f1f5f9;
}

.iti__selected-dial-code {
	font-size: 0.875rem;
	color: #475569;
	font-weight: 500;
}

/* Cadastro — input com ícone esquerdo precisa de padding extra */
.gcep-cadastro-tel .iti input.iti__tel-input {
	padding-left: 90px !important;
}