/**
 * Dot Icons — Frontend & Editor CSS
 *
 * Targets icon classes directly (e.g. [class*="dot-lucide-"]) because the
 * JS does NOT add any helper classes (doing so caused infinite observer
 * loops in v2). All styling rules use only the icon's own class prefix.
 *
 * Key job: override Elementor's
 *   .elementor-icon svg { fill: currentColor }
 * which would otherwise turn outline icons into solid blobs.
 */

/* ─── Base wrapper sizing ───────────────────────────────────────────── */

[class*="dot-lucide-"],
[class*="dot-tabler-"],
[class*="dot-phosphor-"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	vertical-align: middle;
	color: inherit;
}

/* ─── SVG inside wrapper ────────────────────────────────────────────── */

[class*="dot-lucide-"] > svg,
[class*="dot-tabler-"] > svg,
[class*="dot-phosphor-"] > svg {
	width: 1em;
	height: 1em;
	display: block;
	overflow: visible;
	color: inherit;
}

/* ─── Outline (Lucide, Tabler, Phosphor regular)
       MUST use !important to defeat Elementor's
       .elementor-icon svg { fill: currentColor } rule              ─── */

[class*="dot-lucide-"] svg,
[class*="dot-lucide-"] svg path,
[class*="dot-lucide-"] svg circle,
[class*="dot-lucide-"] svg rect,
[class*="dot-lucide-"] svg line,
[class*="dot-lucide-"] svg polyline,
[class*="dot-lucide-"] svg polygon,
[class*="dot-lucide-"] svg ellipse,

[class*="dot-tabler-"] svg,
[class*="dot-tabler-"] svg path,
[class*="dot-tabler-"] svg circle,
[class*="dot-tabler-"] svg rect,
[class*="dot-tabler-"] svg line,
[class*="dot-tabler-"] svg polyline,
[class*="dot-tabler-"] svg polygon,
[class*="dot-tabler-"] svg ellipse,

[class*="dot-phosphor-"] svg,
[class*="dot-phosphor-"] svg path,
[class*="dot-phosphor-"] svg circle,
[class*="dot-phosphor-"] svg rect,
[class*="dot-phosphor-"] svg line,
[class*="dot-phosphor-"] svg polyline,
[class*="dot-phosphor-"] svg polygon,
[class*="dot-phosphor-"] svg ellipse {
	fill: none !important;
	stroke: currentColor !important;
}

/* ─── Elementor widget: Icon ───────────────────────────────────────── */

.elementor-icon [class*="dot-lucide-"] svg,
.elementor-icon [class*="dot-lucide-"] svg *,
.elementor-icon [class*="dot-tabler-"] svg,
.elementor-icon [class*="dot-tabler-"] svg *,
.elementor-icon [class*="dot-phosphor-"] svg,
.elementor-icon [class*="dot-phosphor-"] svg * {
	fill: none !important;
	stroke: currentColor !important;
}

/* ─── Elementor widget: Icon List ─────────────────────────────────── */

.elementor-icon-list-icon [class*="dot-lucide-"] svg,
.elementor-icon-list-icon [class*="dot-lucide-"] svg *,
.elementor-icon-list-icon [class*="dot-tabler-"] svg,
.elementor-icon-list-icon [class*="dot-tabler-"] svg *,
.elementor-icon-list-icon [class*="dot-phosphor-"] svg,
.elementor-icon-list-icon [class*="dot-phosphor-"] svg * {
	fill: none !important;
	stroke: currentColor !important;
}

/* ─── Elementor widget: Social Icons ──────────────────────────────── */

.elementor-social-icon [class*="dot-lucide-"] svg,
.elementor-social-icon [class*="dot-tabler-"] svg,
.elementor-social-icon [class*="dot-phosphor-"] svg {
	fill: none !important;
	stroke: currentColor !important;
}

/* ─── Editor icon picker preview items ────────────────────────────── */

.elementor-icons-manager__tab-item-inner [class*="dot-lucide-"],
.elementor-icons-manager__tab-item-inner [class*="dot-tabler-"],
.elementor-icons-manager__tab-item-inner [class*="dot-phosphor-"] {
	font-size: 24px;
}

.elementor-icons-manager__tab-item-inner [class*="dot-lucide-"] svg,
.elementor-icons-manager__tab-item-inner [class*="dot-lucide-"] svg *,
.elementor-icons-manager__tab-item-inner [class*="dot-tabler-"] svg,
.elementor-icons-manager__tab-item-inner [class*="dot-tabler-"] svg *,
.elementor-icons-manager__tab-item-inner [class*="dot-phosphor-"] svg,
.elementor-icons-manager__tab-item-inner [class*="dot-phosphor-"] svg * {
	fill: none !important;
	stroke: currentColor !important;
}