/* ==========================================================================
   Avanxa Country Selector v2
   Componente: trigger + dropdown flotante.
   Todas las reglas con !important para sobrevivir al tema activo.
   ========================================================================== */

/* Contenedor raíz — ancla del dropdown */
.avanxa-country-selector {
	position: relative !important;
	display: inline-block !important;
}

/*
 * Cuando el dropdown está abierto, el contenedor raíz necesita su propio
 * z-index para crear un stacking context por encima de secciones/contenedores
 * de Elementor (.e-con, .elementor-section) que vengan después en el DOM.
 * Sin este z-index, position:relative no crea contexto de apilamiento y
 * Elementor aplasta el dropdown aunque este tenga z-index: 99999.
 *
 * Si el dropdown sigue siendo tapado, el culpable es un ancestro con
 * overflow:hidden o un stacking context propio (ej. la sección de Elementor
 * que contiene el widget tiene z-index explícito). En ese caso agregar en
 * Elementor > Avanzado > CSS personalizado del widget:
 *   selector { z-index: 99999; }
 */
.avanxa-country-selector.is-open {
	z-index: 99999 !important;
}

/* ------------------------------------------------------------------
   Trigger (botón disparador)
   ------------------------------------------------------------------ */
.avanxa-cs-trigger {
	background: transparent !important;
	border: none !important;
	outline: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 10px !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	transition: background 150ms ease !important;
	line-height: 1 !important;
	box-shadow: none !important;
}

.avanxa-cs-trigger:hover {
	background: rgba(0, 0, 0, 0.04) !important;
}

/* Bandera circular del trigger */
.avanxa-cs-trigger__flag {
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	display: block !important;
	flex-shrink: 0 !important;
}

/* Código de país del trigger */
.avanxa-cs-trigger__code {
	font-size: 15px !important;
	font-weight: 500 !important;
	color: #222222 !important;
	line-height: 1 !important;
}

/* Chevron — rota cuando la lista está abierta */
.avanxa-cs-trigger__chevron {
	display: block !important;
	flex-shrink: 0 !important;
	transition: transform 200ms ease !important;
}

.avanxa-country-selector.is-open .avanxa-cs-trigger__chevron {
	transform: rotate(180deg) !important;
}

/* ------------------------------------------------------------------
   Dropdown (lista desplegable)
   ------------------------------------------------------------------ */
.avanxa-cs-dropdown {
	display: none !important;
	position: absolute !important;
	top: calc(100% + 6px) !important;
	left: 0 !important;
	background: #ffffff !important;
	border: 0.5px solid #E6E0EF !important;
	border-radius: 12px !important;
	padding: 6px !important;
	min-width: 190px !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
	list-style: none !important;
	margin: 0 !important;
	z-index: 99999 !important;
}

.avanxa-country-selector.is-open .avanxa-cs-dropdown {
	display: block !important;
}

/* ------------------------------------------------------------------
   Fila de opción
   ------------------------------------------------------------------ */
.avanxa-cs-option {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 9px 10px !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	transition: background 120ms ease !important;
	list-style: none !important;
}

/* Hover solo en filas NO seleccionadas */
.avanxa-cs-option:hover:not(.avanxa-cs-option--active) {
	background: #F4EFFA !important;
}

/* Fila seleccionada */
.avanxa-cs-option--active {
	background: #EEE7F7 !important;
}

/* Bandera circular de la opción */
.avanxa-cs-option__flag {
	width: 24px !important;
	height: 24px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	display: block !important;
	flex-shrink: 0 !important;
}

/* Nombre del país */
.avanxa-cs-option__name {
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #222222 !important;
	flex: 1 !important;
	line-height: 1 !important;
}

/* Check — solo visible en la opción activa */
.avanxa-cs-option__check {
	display: none !important;
	flex-shrink: 0 !important;
	color: #7932C5 !important;
}

.avanxa-cs-option--active .avanxa-cs-option__check {
	display: block !important;
}