/**
 * Ek Custom Mouse — editor panel styling.
 *
 * Elementor's visual choice control draws each option as a filled button. The
 * trail picker wants labelled cards instead: icon, name, and a clear selected
 * state, two to a row.
 */

/* The label sits above so the grid gets the panel's full width. */
.elementor-control-ek_cursor_trail_effect .elementor-control-field {
	flex-wrap: wrap;
}

.elementor-control-ek_cursor_trail_effect .elementor-control-title {
	width: 100%;
	margin-bottom: 8px;
}

.elementor-control-ek_cursor_trail_effect .elementor-control-input-wrapper {
	flex: 0 0 100%;
	max-width: 100%;
}

.elementor-control-ek_cursor_trail_effect .elementor-visual-choice-choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

/*
 * Elementor lets a choice span the whole row through --elementor-visual-choice-span;
 * every card here should take one cell so the grid reads two across.
 */
.elementor-control-ek_cursor_trail_effect .elementor-visual-choice-element {
	grid-column: auto;
	min-width: 0;
}

.elementor-control-ek_cursor_trail_effect .elementor-visual-choice-label {
	display: block;
	width: 100%;
	padding: 0;
}

.elementor-control-ek_cursor_trail_effect .elementor-button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 9px 10px;
	background-color: #2c2e33;
	border: 1px solid #3b3d43;
	border-radius: 4px;
	color: #c2cbd2;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	/* Names wrap rather than being cut off — panels get narrow, and translations
	   are often longer than the English labels. */
	white-space: normal;
	min-height: 40px;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.elementor-control-ek_cursor_trail_effect .elementor-button i {
	flex: 0 0 auto;
	font-size: 14px;
	color: #8a8f94;
	transition: color 0.15s ease;
}

.elementor-control-ek_cursor_trail_effect .elementor-visual-choice-label:hover .elementor-button {
	background-color: #33353b;
	border-color: #4d4f56;
}

/* The radio sits right before its label, hidden from view. */
.elementor-control-ek_cursor_trail_effect input:checked + .elementor-visual-choice-label .elementor-button {
	background-color: #3a3d44;
	border-color: #6b6e77;
	color: #ffffff;
}

.elementor-control-ek_cursor_trail_effect input:checked + .elementor-visual-choice-label .elementor-button i {
	color: #ffffff;
}

.elementor-control-ek_cursor_trail_effect input:focus-visible + .elementor-visual-choice-label .elementor-button {
	outline: 2px solid #93003c;
	outline-offset: 1px;
}