/**
 * Pesmen Haustechnik - Icon System
 * SVG-based icons without emojis for professional appearance
 */

/* ============================================
   ICON BASE STYLES
   ============================================ */

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
}

.icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.icon-sm {
    width: 1rem;
    height: 1rem;
}

.icon-md {
    width: 1.5rem;
    height: 1.5rem;
}

.icon-lg {
    width: 2rem;
    height: 2rem;
}

.icon-xl {
    width: 2.5rem;
    height: 2.5rem;
}

.icon-2xl {
    width: 3rem;
    height: 3rem;
}

.icon-3xl {
    width: 4rem;
    height: 4rem;
}

/* ============================================
   SERVICE ICONS
   ============================================ */

.service-icon-wrapper {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-4);
    transition: transform var(--transition-base);
}

.service-card:hover .service-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
}

.service-icon-wrapper svg {
    width: 32px;
    height: 32px;
    fill: white;
}

/* ============================================
   TRUST BADGE ICONS
   ============================================ */

.trust-badge-icon-wrapper {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
}

.trust-badge-icon-wrapper svg {
    width: 28px;
    height: 28px;
    fill: white;
}

/* ============================================
   USP ICONS
   ============================================ */

.usp-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-100), var(--primary-300));
    border-radius: var(--radius-2xl);
}

.usp-icon-wrapper svg {
    width: 40px;
    height: 40px;
    fill: var(--primary-700);
}

/* ============================================
   CONTACT ICONS
   ============================================ */

.contact-icon-wrapper {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-100);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-4);
}

.contact-icon-wrapper svg {
    width: 30px;
    height: 30px;
    fill: var(--primary-700);
}

/* ============================================
   INLINE ICONS
   ============================================ */

.icon-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.icon-inline svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* ============================================
   FOOTER ICONS
   ============================================ */

.footer-icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: var(--space-2);
    vertical-align: middle;
}

.footer-icon svg {
    width: 100%;
    height: 100%;
    fill: var(--gray-300);
}