.lucide-icon--rendered {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  color: inherit;
}

.lucide-icon--rendered svg {
  width: 100%;
  height: 100%;
  display: block;
  color: inherit;
  stroke: currentColor;
}

/* Extra specificity for Elementor icon list items */
.elementor-icon-list-icon .lucide-icon--rendered,
.elementor-icon-list-icon .lucide-icon--rendered svg {
  color: inherit;
  stroke: currentColor;
}

/* Override Elementor fill for outline icons in icon list */
.elementor-icon-list-icon .lucide-icon--style-outline svg,
.elementor-icon-list-icon .lucide-icon--style-outline svg * {
  fill: none !important;
  stroke: currentColor !important;
}

/* Elementor social icons (respect icon + background colors) */
.elementor-social-icon .lucide-icon--rendered {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: middle;
}

.elementor-social-icon .lucide-icon--rendered svg {
  /* Inherit color from parent .elementor-social-icon which has the color set */
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Force white icon when using Official Color branding (not custom colors) */
.elementor-social-icons-wrapper:not([class*="elementor-social-icon-style-custom"]) .elementor-view-stacked .lucide-icon--rendered svg,
.elementor-social-icons-wrapper:not([class*="elementor-social-icon-style-custom"]) .elementor-view-framed .lucide-icon--rendered svg {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* When custom color is set via inline style, let it inherit */
.elementor-social-icon[style*="color"] .lucide-icon--rendered svg {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Override for outline icons in social widget */
.elementor-social-icon .lucide-icon--style-outline svg {
  fill: none !important;
  stroke: currentColor !important;
}

/* Outline style icons (Lucide) */
.lucide-icon--style-outline svg,
.lucide-icon--style-outline svg * {
  /* Elementor core forces .elementor-icon svg { fill: currentColor } so override aggressively */
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Ensure proper sizing in Elementor */
.elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.elementor-icon .lucide-icon--rendered {
  width: 100%;
  height: 100%;
}

/* Sidebar control (icon picker) sizing for social icons */
.elementor-control-social_icon .lucide-icon--rendered {
  width: 1.5em;
  height: 1.5em;
}

/* Prevent repeater list icon margin from shrinking SVG */
.elementor-control-type-repeater .elementor-repeater-row-tools .elementor-repeater-row-item-title .lucide-icon--rendered svg {
  margin-inline-end: 5px;
  width: 1em;
  height: 1em;
}