/* Custom Icon System - Ella 3G Website */
/* Using site colors: Primary #1a5ba8, Accent #d4a853 */

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

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

/* Icon sizes */
.icon-sm { width: 20px; height: 20px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 48px; height: 48px; }

/* Icon backgrounds for contact methods */
.icon-bg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 0.75rem;
    transition: all 0.3s ease;
}

.icon-bg-primary {
    background: var(--primary);
    color: white;
}

.icon-bg-accent {
    background: var(--accent);
    color: white;
}

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

.icon-bg-light {
    background: var(--bg-light);
    color: var(--primary);
}

/* Icon hover effects */
.icon-bg:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 91, 168, 0.2);
}

/* Specific icon styles for different contexts */
.contact-method-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-method-icon .icon {
    width: 28px;
    height: 28px;
}

/* Animation for icons */
@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.icon-animated:hover {
    animation: iconPulse 0.6s ease-in-out;
}

/* RTL Support */
[dir="rtl"] .icon-flip {
    transform: scaleX(-1);
}