/* A23 Games Icons CSS */

/* Icon base styles */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 2.5;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Image icon styles */
.icon-img {
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

.icon-img:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

/* Icon sizes */
.icon-sm {
    width: 0.875em;
    height: 0.875em;
}

.icon-lg {
    width: 1.5em;
    height: 1.5em;
}

.icon-xl {
    width: 2em;
    height: 2em;
}

/* Image icon sizes */
.icon-img.icon-sm {
    width: 20px;
    height: 20px;
}

.icon-img.icon-lg {
    width: 48px;
    height: 48px;
}

.icon-img.icon-xl {
    width: 64px;
    height: 64px;
}

/* Icon colors */
.icon-primary {
    color: #00d4ff;
}

.icon-secondary {
    color: #ff4757;
}

.icon-white {
    color: #fff;
}

.icon-muted {
    color: rgba(255, 255, 255, 0.8);
}

/* Icon animations */
.icon-spin {
    animation: icon-spin 2s linear infinite;
}

.icon-pulse {
    animation: icon-pulse 1s ease-in-out infinite;
}

.icon-bounce {
    animation: icon-bounce 1s ease-in-out infinite;
}

/* Icon hover effects */
.icon-hover:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Icon with background */
.icon-bg {
    padding: 0.5em;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.icon-bg-primary {
    background: rgba(78, 205, 196, 0.2);
    border-color: rgba(78, 205, 196, 0.3);
}

.icon-bg-secondary {
    background: rgba(255, 107, 107, 0.2);
    border-color: rgba(255, 107, 107, 0.3);
}

/* Icon in buttons */
.btn .icon {
    margin-right: 0.5em;
    stroke-width: 2;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.btn .icon-img {
    margin-right: 0.5em;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5em;
    height: 2.5em;
    padding: 0;
}

/* Icon in navigation */
.nav-link .icon {
    margin-right: 0.5em;
}

/* Icon in feature cards */
.feature .icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    color: #00d4ff;
    filter: drop-shadow(0 2px 4px rgba(0, 212, 255, 0.4));
}

.feature .icon-img {
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 3px 6px rgba(0, 212, 255, 0.3));
}

/* Icon in contact methods */
.contact-method .icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: #ff4757;
    filter: drop-shadow(0 2px 4px rgba(255, 71, 87, 0.4));
}

.contact-method .icon-img {
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 3px 6px rgba(255, 71, 87, 0.3));
}

/* Icon in FAQ items */
.faq-item .icon {
    font-size: 1.5rem;
    margin-right: 1rem;
    color: #4ecdc4;
}

/* Icon in error page */
.error-number .icon {
    font-size: 8rem;
    color: #ff6b6b;
}

/* Icon animations */
@keyframes icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes icon-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes icon-bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

/* Responsive icon sizing */
@media (max-width: 768px) {
    .icon-xl {
        width: 1.5em;
        height: 1.5em;
    }
    
    .feature .icon {
        font-size: 3rem;
    }
    
    .contact-method .icon {
        font-size: 2.5rem;
    }
    
    .btn .icon {
        font-size: 1.2em;
    }
    
    /* Responsive image icon sizing */
    .icon-img.icon-xl {
        width: 48px;
        height: 48px;
    }
    
    .icon-img.icon-lg {
        width: 36px;
        height: 36px;
    }
    
    .icon-img.icon-sm {
        width: 16px;
        height: 16px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .icon {
        stroke-width: 3;
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
    }
    
    .icon-bg {
        background: #fff;
        border-color: #000;
    }
    
    .feature .icon {
        color: #0066cc;
    }
    
    .contact-method .icon {
        color: #cc0000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .icon-spin,
    .icon-pulse,
    .icon-bounce {
        animation: none;
    }
}