/* Custom Icon Set - CSS Icons */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
}

/* Upload Icon */
.icon-upload::before {
  content: "⬆";
  font-size: 1.2em;
}

/* Download Icon */
.icon-download::before {
  content: "⬇";
  font-size: 1.2em;
}

/* Check Icon */
.icon-check::before {
  content: "✓";
  color: #28a745;
  font-weight: bold;
}

/* Shield Icon */
.icon-shield::before {
  content: "🛡";
  font-size: 1.2em;
}

/* Lightning Icon */
.icon-lightning::before {
  content: "⚡";
  font-size: 1.2em;
}

/* Quality Icon */
.icon-quality::before {
  content: "⭐";
  font-size: 1.2em;
}

/* Globe Icon */
.icon-globe::before {
  content: "🌐";
  font-size: 0.9em;
}

/* Arrows Icon */
.icon-arrows::before {
  content: "↔";
  font-size: 1.1em;
}

/* Image Icon */
.icon-image::before {
  content: "🖼";
  font-size: 1.1em;
}

/* Compress Icon */
.icon-compress::before {
  content: "📦";
  font-size: 1.1em;
}

/* Resize Icon */
.icon-resize::before {
  content: "📏";
  font-size: 1.1em;
}

/* Crop Icon */
.icon-crop::before {
  content: "✂";
  font-size: 1.1em;
}

/* Convert Icon */
.icon-convert::before {
  content: "🔄";
  font-size: 1.1em;
}

/* Watermark Icon */
.icon-watermark::before {
  content: "©";
  font-size: 1.2em;
  font-weight: bold;
}

/* Metadata Icon */
.icon-metadata::before {
  content: "ℹ";
  font-size: 1.2em;
}

/* Palette Icon */
.icon-palette::before {
  content: "🎨";
  font-size: 1.1em;
}

/* Code Icon */
.icon-code::before {
  content: "<>";
  font-size: 1em;
}

/* Favicon Icon */
.icon-favicon::before {
  content: "🏠";
  font-size: 1.1em;
}

/* Responsive Icon */
.icon-responsive::before {
  content: "📱";
  font-size: 1.1em;
}

/* Retina Icon */
.icon-retina::before {
  content: "👁";
  font-size: 1.1em;
}

/* GIF Icon */
.icon-gif::before {
  content: "🎬";
  font-size: 1.1em;
}

/* Sprite Icon */
.icon-sprite::before {
  content: "🧩";
  font-size: 1.1em;
}

/* Exchange Icon */
.icon-exchange::before {
  content: "🔄";
  font-size: 1.1em;
}

/* Grid Icon */
.icon-grid::before {
  content: "⊞";
  font-size: 1.1em;
}

/* Lock Icon */
.icon-lock::before {
  content: "🔒";
  font-size: 1.1em;
}

/* Star Icon */
.icon-star::before {
  content: "⭐";
  font-size: 1.1em;
}

/* Mobile Icon */
.icon-mobile::before {
  content: "📱";
  font-size: 1.1em;
}

/* Eye Icon */
.icon-eye::before {
  content: "👁";
  font-size: 1.1em;
}

/* Film Icon */
.icon-film::before {
  content: "🎬";
  font-size: 1.1em;
}

/* Layers Icon */
.icon-layers::before {
  content: "🗂";
  font-size: 1.1em;
}

/* Grid 3x3 Icon */
.icon-grid-3x3::before {
  content: "⊞";
  font-size: 1.1em;
}

/* Scissors Icon */
.icon-scissors::before {
  content: "✂";
  font-size: 1.1em;
}

/* Adjust Icon */
.icon-adjust::before {
  content: "⚙";
  font-size: 1.1em;
}

/* Compare Icon */
.icon-compare::before {
  content: "⚖";
  font-size: 1.1em;
}

/* Background Icon */
.icon-background::before {
  content: "🖌";
  font-size: 1.1em;
}

/* Filter Icon */
.icon-filter::before {
  content: "🎭";
  font-size: 1.1em;
}

/* Batch Icon */
.icon-batch::before {
  content: "📚";
  font-size: 1.1em;
}

/* Menu Icon */
.icon-menu::before {
  content: "☰";
  font-size: 1.2em;
}

/* Close Icon */
.icon-close::before {
  content: "✕";
  font-size: 1.1em;
}

/* Settings Icon */
.icon-settings::before {
  content: "⚙";
  font-size: 1.1em;
}

/* Help Icon */
.icon-help::before {
  content: "?";
  font-size: 1.2em;
  font-weight: bold;
  border: 2px solid currentColor;
  border-radius: 50%;
  width: 1.2em;
  height: 1.2em;
  text-align: center;
  line-height: 1;
}

/* Search Icon */
.icon-search::before {
  content: "🔍";
  font-size: 1.1em;
}

/* Home Icon */
.icon-home::before {
  content: "🏠";
  font-size: 1.1em;
}

/* About Icon */
.icon-about::before {
  content: "ℹ";
  font-size: 1.2em;
  font-weight: bold;
}

/* Contact Icon */
.icon-contact::before {
  content: "📧";
  font-size: 1.1em;
}

/* Privacy Icon */
.icon-privacy::before {
  content: "🔒";
  font-size: 1.1em;
}

/* Tools Icon */
.icon-tools::before {
  content: "🔧";
  font-size: 1.1em;
}

/* Blog Icon */
.icon-blog::before {
  content: "📝";
  font-size: 1.1em;
}

/* Success Icon */
.icon-success::before {
  content: "✅";
  font-size: 1.1em;
}

/* Error Icon */
.icon-error::before {
  content: "❌";
  font-size: 1.1em;
}

/* Warning Icon */
.icon-warning::before {
  content: "⚠";
  font-size: 1.1em;
  color: #ffc107;
}

/* Info Icon */
.icon-info::before {
  content: "ℹ";
  font-size: 1.2em;
  color: #17a2b8;
}

/* Loading Icon */
.icon-loading {
  animation: spin 1s linear infinite;
}

.icon-loading::before {
  content: "⟳";
  font-size: 1.2em;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Social Icons */
.icon-facebook::before {
  content: "f";
  font-family: Arial, sans-serif;
  font-weight: bold;
  background: #3b5998;
  color: white;
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 0.8em;
}

.icon-twitter::before {
  content: "t";
  font-family: Arial, sans-serif;
  font-weight: bold;
  background: #1da1f2;
  color: white;
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 0.8em;
}

.icon-linkedin::before {
  content: "in";
  font-family: Arial, sans-serif;
  font-weight: bold;
  background: #0077b5;
  color: white;
  border-radius: 3px;
  padding: 2px 3px;
  font-size: 0.7em;
}

/* Size Variants */
.icon-sm {
  font-size: 0.875rem;
}

.icon-lg {
  font-size: 1.25rem;
}

.icon-xl {
  font-size: 1.5rem;
}

.icon-2x {
  font-size: 2rem;
}

.icon-3x {
  font-size: 3rem;
}

/* Color Variants */
.icon-primary {
  color: var(--bs-primary);
}

.icon-secondary {
  color: var(--bs-secondary);
}

.icon-success {
  color: var(--bs-success);
}

.icon-danger {
  color: var(--bs-danger);
}

.icon-warning {
  color: var(--bs-warning);
}

.icon-info {
  color: var(--bs-info);
}

.icon-light {
  color: var(--bs-light);
}

.icon-dark {
  color: var(--bs-dark);
}

.icon-white {
  color: #ffffff;
}

.icon-muted {
  color: var(--bs-secondary);
  opacity: 0.6;
}