/* ===== RESPONSIVE IMAGE SYSTEM ===== */

/* Base Image Optimization */
.img-optimized {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.img-optimized:hover {
    transform: scale(1.02);
}

/* ===== ASPECT RATIO CONTAINERS ===== */

/* Square Aspect Ratio (1:1) */
.aspect-square {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
}

.aspect-square img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Circular Images */
.aspect-circle {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 50%;
}

.aspect-circle img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Rectangle Aspect Ratios */
.aspect-4-3 {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
}

.aspect-4-3 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aspect-16-9 {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
}

.aspect-16-9 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== SIZE VARIANTS (Maps to i100, i280, i350, i500 directories) ===== */

/* Small Images (uses i100 directory) */
.img-sm {
    width: 60px;
    height: 60px;
}

.img-sm.aspect-square,
.img-sm.aspect-circle {
    width: 60px;
    height: 60px;
}

/* Medium Images (uses i280 directory) */
.img-md {
    width: 120px;
    height: 120px;
}

.img-md.aspect-square,
.img-md.aspect-circle {
    width: 120px;
    height: 120px;
}

/* Large Images (uses i350 directory) */
.img-lg {
    width: 180px;
    height: 180px;
}

.img-lg.aspect-square,
.img-lg.aspect-circle {
    width: 180px;
    height: 180px;
}

/* Extra Large Images (uses i500 directory) */
.img-xl {
    width: 250px;
    height: 250px;
}

.img-xl.aspect-square,
.img-xl.aspect-circle {
    width: 250px;
    height: 250px;
}

/* ===== RESPONSIVE GRID IMAGES ===== */

/* Festival Grid Images */
.festival-grid-img {
    width: 100%;
    max-width: 80px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #f8f9fa;
    transition: all 0.3s ease;
}

.festival-grid-img:hover {
    border-color: #28a745;
    transform: scale(1.1);
}

/* Card Images */
.card-img-top {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card:hover .card-img-top {
    transform: scale(1.05);
}

/* Widget Images */
.widget-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.widget-img:hover {
    transform: scale(1.05);
}

/* ===== LOADING STATES ===== */

.img-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== OVERLAY EFFECTS ===== */

.img-overlay {
    position: relative;
    overflow: hidden;
}

.img-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(40, 167, 69, 0.1), rgba(255, 193, 7, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.img-overlay:hover::after {
    opacity: 1;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Mobile First Approach */
@media (max-width: 576px) {
    .img-sm { width: 50px; height: 50px; }
    .img-md { width: 80px; height: 80px; }
    .img-lg { width: 120px; height: 120px; }
    .img-xl { width: 150px; height: 150px; }
    
    .festival-grid-img {
        max-width: 60px;
    }
    
    .widget-img {
        width: 60px;
        height: 60px;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .img-sm { width: 55px; height: 55px; }
    .img-md { width: 100px; height: 100px; }
    .img-lg { width: 150px; height: 150px; }
    .img-xl { width: 200px; height: 200px; }
    
    .festival-grid-img {
        max-width: 70px;
    }
    
    .widget-img {
        width: 70px;
        height: 70px;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .img-sm { width: 60px; height: 60px; }
    .img-md { width: 110px; height: 110px; }
    .img-lg { width: 160px; height: 160px; }
    .img-xl { width: 220px; height: 220px; }
}

@media (min-width: 993px) {
    .img-sm { width: 60px; height: 60px; }
    .img-md { width: 120px; height: 120px; }
    .img-lg { width: 180px; height: 180px; }
    .img-xl { width: 250px; height: 250px; }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Lazy Loading Support */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* WebP Support */
.webp .img-optimized {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ===== ACCESSIBILITY ===== */

.img-optimized:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .img-overlay::after {
        background: rgba(0, 0, 0, 0.3);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .img-optimized,
    .festival-grid-img,
    .card-img-top,
    .widget-img {
        transition: none;
    }
    
    .img-optimized:hover,
    .festival-grid-img:hover,
    .card:hover .card-img-top,
    .widget-img:hover {
        transform: none;
    }
}

/* ===== UTILITY CLASSES ===== */

.img-grayscale {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.img-grayscale:hover {
    filter: grayscale(0%);
}

.img-blur {
    filter: blur(2px);
    transition: filter 0.3s ease;
}

.img-blur:hover {
    filter: blur(0);
}

.img-brightness {
    filter: brightness(0.8);
    transition: filter 0.3s ease;
}

.img-brightness:hover {
    filter: brightness(1);
}

/* ===== MODERN CARD DESIGNS ===== */

.modern-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.modern-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.modern-card .card-img-container {
    position: relative;
    overflow: hidden;
}

.modern-card .card-img-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(255, 193, 7, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modern-card:hover .card-img-container::after {
    opacity: 1;
}

/* ===== ENHANCED FESTIVAL CARDS ===== */

.festival-card-enhanced {
    background: white;
    border-radius: 16px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.festival-card-enhanced:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

.festival-card-enhanced .festival-img {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #f8f9fa;
    transition: border-color 0.3s ease;
}

.festival-card-enhanced:hover .festival-img {
    border-color: #28a745;
}

.festival-card-enhanced .festival-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Unified Theme System - Single CSS with Color Scheme Variables */

:root {
  /* Primary Color Scheme */
  --primary-color: #667eea;
  --primary-dark: #764ba2;
  --secondary-color: #ff6b35;
  --secondary-dark: #f7931e;

  /* Accent Colors */
  --accent-1: #28a745;
  --accent-2: #ffc107;
  --accent-3: #17a2b8;
  --accent-4: #dc3545;

  /* Neutral Colors */
  --text-primary: #333333;
  --text-secondary: #6c757d;
  --text-muted: #999999;
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-light: #f5f5f5;
  --border-color: #e9ecef;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
  --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #ff6b35 100%);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.2);

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 15px;
  --radius-xl: 20px;
}

/* Alternative Color Scheme (can be activated via class) */
.theme-warm {
  --primary-color: #e74c3c;
  --primary-dark: #c0392b;
  --secondary-color: #f39c12;
  --secondary-dark: #e67e22;
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
}

.theme-nature {
  --primary-color: #27ae60;
  --primary-dark: #229954;
  --secondary-color: #f1c40f;
  --secondary-dark: #f4d03f;
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
}

/* Base Styles Using Variables */
body {
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

.section-title {
  color: var(--text-primary);
  font-weight: 600;
}

.modern-card {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  border: 1px solid var(--border-color);
}

.modern-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--gradient-primary);
  border: none;
  color: white;
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline-primary {
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  background: transparent;
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  background: var(--primary-color);
  color: white;
}

.hero-banner {
  background: var(--gradient-hero);
}

.newsletter-section {
  background: var(--gradient-primary);
}

.quick-access {
  background: var(--bg-secondary);
}

.explore-section {
  background: var(--bg-light);
}

/* Festival Cards */
.festival-card-enhanced {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  padding: 1rem;
  text-align: center;
}

.festival-card-enhanced:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.festival-img {
  width: 80px;
  height: 80px;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Quick Access Items */
.quick-item {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.quick-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.quick-item:nth-child(1) .quick-icon {
  background: var(--gradient-primary);
}

.quick-item:nth-child(2) .quick-icon {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.quick-item:nth-child(3) .quick-icon {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.quick-item:nth-child(4) .quick-icon {
  background: var(--gradient-secondary);
}

/* Responsive Design */
@media (max-width: 768px) {
  .modern-card {
    margin-bottom: 1rem;
  }

  .festival-img {
    width: 60px;
    height: 60px;
  }

  .quick-item {
    padding: 0.8rem;
  }
}

/* Mobile Menu Styles */
.navbar-toggler {
  border: none;
  padding: 0.25rem 0.5rem;
  background: transparent;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler-icon {
  background-image: none;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  position: relative;
  transition: all 0.3s ease;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  transition: all 0.3s ease;
}

.navbar-toggler-icon::before {
  top: -8px;
}

.navbar-toggler-icon::after {
  top: 8px;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100vh;
  background: var(--bg-primary);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  transition: right 0.3s ease;
  overflow-y: auto;
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

body.mobile-menu-open .mobile-menu-overlay {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.mobile-menu-title {
  font-weight: 600;
  color: var(--text-primary);
}

.mobile-menu-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-primary);
  cursor: pointer;
}

.mobile-menu-body {
  padding: 1rem 0;
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.mobile-menu-item:hover {
  background: var(--bg-secondary);
  color: var(--primary-color);
  text-decoration: none;
}

.mobile-menu-item i {
  margin-right: 1rem;
  width: 20px;
  color: var(--primary-color);
}

.mobile-menu-tools {
  padding: 1rem 0;
}

.mobile-tools {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mobile-lang-toggle {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.mobile-lang-toggle:hover {
  background: var(--primary-color);
  color: white;
  text-decoration: none;
}

/* Desktop Navigation Styles */
.main-navbar {
  background: var(--bg-primary);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar {
  padding: 0.75rem 0;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}

.navbar-logo {
  height: 40px;
  width: auto;
}

.brand-text {
  font-size: 1.25rem;
}

.navbar-nav .nav-link {
  color: var(--text-primary);
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover {
  color: var(--primary-color);
}

.navbar-tools {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lang-toggle {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.lang-toggle:hover {
  background: var(--primary-color);
  color: white;
  text-decoration: none;
}

/* Hide mobile elements on desktop */
@media (min-width: 992px) {
  .mobile-tools {
    display: none;
  }

  .mobile-menu {
    display: none;
  }
}

/* Hide desktop elements on mobile */
@media (max-width: 991px) {
  .navbar-collapse {
    display: none;
  }

  .navbar-tools {
    display: none;
  }
}

/* Utility Classes */
.text-primary-custom {
  color: var(--primary-color) !important;
}

.bg-primary-custom {
  background: var(--gradient-primary) !important;
}

.border-primary-custom {
  border-color: var(--primary-color) !important;
}

.shadow-custom {
  box-shadow: var(--shadow-md) !important;
}
/* Minimal SVG Icon System - FontAwesome Replacement */
.icon{display:inline-block;width:1em;height:1em;vertical-align:-.125em;fill:currentColor}
.icon-sm{width:.875em;height:.875em}
.icon-lg{width:1.33em;height:1.33em}
.icon-2x{width:2em;height:2em}

/* Icon Sprite */
<svg style="display:none" xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
  </symbol>
  <symbol id="icon-calendar" viewBox="0 0 24 24">
    <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
  </symbol>
  <symbol id="icon-star" viewBox="0 0 24 24">
    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
  </symbol>
  <symbol id="icon-heart" viewBox="0 0 24 24">
    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
  </symbol>
  <symbol id="icon-menu" viewBox="0 0 24 24">
    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
  </symbol>
  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
  </symbol>
  <symbol id="icon-check" viewBox="0 0 24 24">
    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
  </symbol>
  <symbol id="icon-arrow-right" viewBox="0 0 24 24">
    <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
  </symbol>
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
  <symbol id="icon-phone" viewBox="0 0 24 24">
    <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
  </symbol>
  <symbol id="icon-email" viewBox="0 0 24 24">
    <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
  </symbol>
  <symbol id="icon-facebook" viewBox="0 0 24 24">
    <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/>
  </symbol>
  <symbol id="icon-youtube" viewBox="0 0 24 24">
    <path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
  </symbol>
  <symbol id="icon-sign-in" viewBox="0 0 24 24">
    <path d="M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z"/>
  </symbol>
  <symbol id="icon-user-plus" viewBox="0 0 24 24">
    <path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
  </symbol>
  <symbol id="icon-info" viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
  </symbol>
  <symbol id="icon-check-circle" viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
  </symbol>
  <symbol id="icon-alert" viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
  </symbol>
  <symbol id="icon-om" viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm3.5 13.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm-7 0c-.83 0-1.5-.67-1.5-1.5S7.67 11 8.5 11s1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm3.5-9c1.66 0 3 1.34 3 3 0 .74-.27 1.42-.72 1.94l1.42 1.42C16.46 11.88 17 10.5 17 9c0-2.76-2.24-5-5-5S7 6.24 7 9c0 1.5.54 2.88 1.3 3.86l1.42-1.42C9.27 10.92 9 10.24 9 9.5c0-1.66 1.34-3 3-3z"/>
  </symbol>
</svg>

<script>
// Icon helper function
window.icon = function(name, className = '') {
  return `<svg class="icon ${className}"><use href="#icon-${name}"></use></svg>`;
};
</script>