/* ============================================
   ICON STYLES FOR ELIF ATTARS
   Font Awesome Icons Integration
   ============================================ */

/* Navigation Icons */
.nav-links a i {
    margin-right: 8px;
    font-size: 16px;
    vertical-align: middle;
}

/* Button Icons */
.btn i {
    margin-right: 8px;
}

.btn-icon-only i {
    margin: 0;
}

/* Feature Icons */
.feature i,
.benefit i {
    font-size: 48px;
    color: var(--primary-color, #8B4513);
    margin-bottom: 16px;
    display: block;
}

/* Contact Icons */
.contact-item i,
.contact-method i {
    font-size: 24px;
    color: var(--primary-color, #8B4513);
    margin-right: 12px;
    vertical-align: middle;
}

/* Payment Method Icons */
.payment-method i {
    font-size: 24px;
    margin-right: 12px;
    color: var(--primary-color, #8B4513);
    vertical-align: middle;
}

/* Order Status Icons */
.status-step i {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
    color: #ccc;
}

.status-step.active i {
    color: var(--success-color, #28a745);
}

.status-step.completed i {
    color: var(--success-color, #28a745);
}

/* Form Field Icons */
.form-field label i {
    margin-right: 8px;
    color: var(--primary-color, #8B4513);
}

.input-with-icon {
    position: relative;
}

.input-with-icon i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

.input-with-icon input {
    padding-left: 40px;
}

/* Social Media Icons */
.social-links i {
    font-size: 24px;
    margin-right: 8px;
    transition: color 0.3s ease;
}

.social-links a:hover i {
    color: var(--primary-color, #8B4513);
}

/* Cart Icon with Badge */
.cart-icon-wrapper {
    position: relative;
    display: inline-block;
}

.cart-icon-wrapper .cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--accent-color, #ff6b6b);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

/* Product Card Icons */
.product-card .wishlist-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    background: white;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product-card .wishlist-icon:hover {
    background: var(--primary-color, #8B4513);
    color: white;
}

.product-card .wishlist-icon i {
    font-size: 18px;
}

/* Rating Stars */
.rating i {
    color: #ffc107;
    font-size: 16px;
    margin-right: 2px;
}

.rating i.far {
    color: #ddd;
}

/* Spinning Animation */
.fa-spin {
    animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loading Icon */
.loading-icon {
    display: inline-block;
    margin: 20px auto;
    text-align: center;
}

.loading-icon i {
    font-size: 48px;
    color: var(--primary-color, #8B4513);
}

/* Success/Error Icons */
.message-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.message-icon.success {
    color: var(--success-color, #28a745);
}

.message-icon.error {
    color: var(--error-color, #dc3545);
}

.message-icon.warning {
    color: var(--warning-color, #ffc107);
}

.message-icon.info {
    color: var(--info-color, #17a2b8);
}

/* Checkout Steps Icons */
.checkout-steps .step i {
    font-size: 32px;
    margin-bottom: 8px;
    color: #ccc;
}

.checkout-steps .step.active i {
    color: var(--primary-color, #8B4513);
}

.checkout-steps .step.completed i {
    color: var(--success-color, #28a745);
}

/* Filter Icons */
.filter-toggle i {
    margin-right: 8px;
}

/* Sort Icons */
.sort-option i {
    margin-right: 8px;
}

/* Search Icon */
.search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

.search-box input {
    padding-left: 40px;
}

/* Footer Icons */
.footer-icon {
    font-size: 20px;
    margin-right: 8px;
    color: var(--primary-color, #8B4513);
}

/* Badge Icons */
.badge i {
    margin-right: 4px;
    font-size: 14px;
}

/* Dropdown Icons */
.dropdown-toggle i {
    margin-left: 8px;
    font-size: 12px;
}

/* Mobile Menu Icon */
.nav-toggle i {
    font-size: 24px;
}

/* Notification Icons */
.notification-icon {
    position: relative;
}

.notification-icon .badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--accent-color, #ff6b6b);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
}

/* Icon Colors */
.icon-primary {
    color: var(--primary-color, #8B4513);
}

.icon-secondary {
    color: var(--secondary-color, #6c757d);
}

.icon-success {
    color: var(--success-color, #28a745);
}

.icon-danger {
    color: var(--error-color, #dc3545);
}

.icon-warning {
    color: var(--warning-color, #ffc107);
}

.icon-info {
    color: var(--info-color, #17a2b8);
}

/* Icon Sizes */
.icon-xs {
    font-size: 12px;
}

.icon-sm {
    font-size: 16px;
}

.icon-md {
    font-size: 24px;
}

.icon-lg {
    font-size: 32px;
}

.icon-xl {
    font-size: 48px;
}

/* Responsive Icon Sizes */
@media (max-width: 768px) {
    .nav-links a i {
        margin-right: 4px;
        font-size: 14px;
    }
    
    .feature i {
        font-size: 36px;
    }
    
    .contact-item i {
        font-size: 20px;
    }
}

/* Icon Hover Effects */
.icon-hover {
    transition: all 0.3s ease;
}

.icon-hover:hover {
    transform: scale(1.1);
}

.icon-rotate-hover {
    transition: transform 0.3s ease;
}

.icon-rotate-hover:hover {
    transform: rotate(15deg);
}

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

.icon-pulse {
    animation: icon-pulse 2s infinite;
}

/* Icon Bounce Animation */
@keyframes icon-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

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