/* ============================================
   ZANATLIJE - Professional Icons System
   Lucide Icons - Modern Thin-Line Style
   ============================================ */

/* Icon Base Styles */
.icon {
  width: 1em;
  height: 1em;
  stroke-width: 1.5;
  stroke: currentColor;
  fill: none;
  display: inline-block;
  vertical-align: middle;
}

.icon-sm { width: 1rem; height: 1rem; }
.icon-md { width: 1.5rem; height: 1.5rem; }
.icon-lg { width: 2rem; height: 2rem; }
.icon-xl { width: 3rem; height: 3rem; }
.icon-2xl { width: 4rem; height: 4rem; }

/* Service Icons - Moleraj */
.icon-paint-brush {
  /* Lucide: paintbrush */
  stroke-width: 1.5;
}

.icon-roller {
  /* Lucide: paint-roller */
  stroke-width: 1.5;
}

.icon-spray {
  /* Lucide: spray */
  stroke-width: 1.5;
}

/* Service Icons - Stolarija */
.icon-hammer {
  /* Lucide: hammer */
  stroke-width: 1.5;
}

.icon-saw {
  /* Lucide: saw */
  stroke-width: 1.5;
}

.icon-ruler {
  /* Lucide: ruler */
  stroke-width: 1.5;
}

.icon-wood {
  /* Lucide: tree-pine */
  stroke-width: 1.5;
}

/* Service Icons - Vodoinstalacija */
.icon-wrench {
  /* Lucide: wrench */
  stroke-width: 1.5;
}

.icon-pipe {
  /* Lucide: pipe */
  stroke-width: 1.5;
}

.icon-faucet {
  /* Lucide: faucet */
  stroke-width: 1.5;
}

.icon-tool {
  /* Lucide: tool */
  stroke-width: 1.5;
}

/* Feature Icons */
.icon-check {
  /* Lucide: check-circle */
  stroke-width: 2;
  color: var(--color-accent);
}

.icon-star {
  /* Lucide: star */
  stroke-width: 1.5;
  fill: var(--color-accent);
  color: var(--color-accent);
}

.icon-award {
  /* Lucide: award */
  stroke-width: 1.5;
}

.icon-clock {
  /* Lucide: clock */
  stroke-width: 1.5;
}

.icon-shield {
  /* Lucide: shield-check */
  stroke-width: 1.5;
}

/* Contact Icons */
.icon-phone {
  /* Lucide: phone */
  stroke-width: 1.5;
}

.icon-mail {
  /* Lucide: mail */
  stroke-width: 1.5;
}

.icon-map-pin {
  /* Lucide: map-pin */
  stroke-width: 1.5;
}

.icon-message-circle {
  /* Lucide: message-circle */
  stroke-width: 1.5;
}

/* CTA Icons */
.icon-arrow-right {
  /* Lucide: arrow-right */
  stroke-width: 2;
}

.icon-calendar {
  /* Lucide: calendar */
  stroke-width: 1.5;
}

/* Icon Containers */
.icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--border-radius-lg);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent));
  color: var(--color-primary);
  transition: all var(--transition-base);
}

.icon-container:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: var(--shadow-lg);
}