/* Lucide Icons — clean stroke icons for UI */

/* Avoid empty placeholder flash before Lucide paints */
i[data-lucide]:empty {
  visibility: hidden;
}

html.icons-ready i[data-lucide],
html.icons-ready svg.lucide,
html.icons-ready svg.icon {
  visibility: visible;
}

.icon,
.icon svg,
svg.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

svg.icon {
  overflow: visible;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon[data-icon-filled="1"] svg,
.icon-star.is-filled svg,
svg.icon[data-icon-filled="1"],
svg.icon-star.is-filled,
.icon[data-icon-filled="1"] svg path,
.icon-star.is-filled svg path,
svg.icon[data-icon-filled="1"] path,
svg.icon-star.is-filled path {
  fill: currentColor;
  stroke: currentColor;
}

svg.icon-star.is-empty,
.icon-star.is-empty svg {
  fill: none;
  opacity: 1;
}

.nav-item .icon,
.btn .icon,
.mobile-icon-btn .icon {
  margin-inline-end: 0.35rem;
}

.cat-modern-icon .icon svg,
.product-icon-wrap .icon svg {
  stroke-width: 1.75;
}

.hero-stat-icon .icon svg,
.trust-icon .icon svg,
.value-card .icon svg {
  stroke-width: 1.75;
}

.custom-cta-icon .icon svg {
  width: 28px;
  height: 28px;
}

.icon-whatsapp {
  color: #25d366;
}

.sidebar-nav .icon-whatsapp,
.sidebar .nav-item-wa .icon-whatsapp {
  color: #fff;
}

.whatsapp-fab .icon-whatsapp {
  color: #fff;
}

.icon-telegram {
  color: #2aabee;
}

.quick-contact-item.is-tg .icon-telegram,
.quick-contact-item.is-wa .icon-whatsapp {
  color: #fff;
}

.quick-contact-fab .icon {
  color: #fff;
}

.icon-contact-hub {
  color: #fff;
}

/* Brand logo */
.brand-logo {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.sidebar-logo .brand-logo {
  max-width: 140px;
  filter: brightness(0) invert(1);
}

.mobile-logo .brand-logo {
  max-width: 110px;
  height: 36px;
  object-fit: contain;
  object-position: right center;
}

.auth-logo-big .brand-logo {
  max-width: 200px;
  margin: 0 auto;
  filter: brightness(0) invert(1);
}

.admin-brand .brand-logo {
  max-width: 120px;
  filter: brightness(0) invert(1);
}

.footer-logo {
  max-width: 132px;
  margin-bottom: 0.65rem;
}

.admin-nav .icon {
  margin-inline-end: 0.5rem;
}

.info-card .icon,
.footer-grid p .icon {
  margin-inline-end: 0.35rem;
  vertical-align: -0.2em;
}

.empty-state .icon {
  display: block;
  margin: 0 auto 1rem;
  color: var(--muted);
}

.empty-state .icon svg {
  width: 48px;
  height: 48px;
}