/* CarCheck Icon System - Font Awesome 6 */

/* Base icon styles */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.icon i {
    font-size: 1rem;
    line-height: 1;
}

.icon-sm { width: 1rem; height: 1rem; }
.icon-sm i { font-size: 0.75rem; }
.icon-md { width: 1.5rem; height: 1.5rem; }
.icon-md i { font-size: 1rem; }
.icon-lg { width: 2rem; height: 2rem; }
.icon-lg i { font-size: 1.25rem; }
.icon-xl { width: 3rem; height: 3rem; }
.icon-xl i { font-size: 2rem; }
.icon-2xl { width: 4rem; height: 4rem; }
.icon-2xl i { font-size: 2.5rem; }

/* Zone Icons - Car Parts */
.zone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    color: var(--primary-color);
    margin: 0 auto 0.75rem;
}

.zone-icon i {
    font-size: 1.5rem;
    line-height: 1;
}

/* Fullscreen zone icon (larger) */
.zone-transition-icon .zone-icon,
.fullscreen-zone-icon {
    width: 5rem;
    height: 5rem;
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.zone-transition-icon .zone-icon i,
.fullscreen-zone-icon i {
    font-size: 2.5rem;
}

/* Category section icons */
.section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-secondary);
}

.section-icon i {
    font-size: 1rem;
    line-height: 1;
}

/* App Header Logo */
.app-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    color: white;
}

.app-logo i {
    font-size: 1.25rem;
    line-height: 1;
}

/* Loading screen logo */
.loading-logo-icon {
    width: 5rem;
    height: 5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: pulse 2s ease-in-out infinite;
    color: white;
}

.loading-logo-icon i {
    font-size: 2.5rem;
    line-height: 1;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

/* Card header icons */
.card-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-radius: 0.625rem;
    color: var(--primary-color);
}

.card-icon-wrap i {
    font-size: 1.25rem;
    line-height: 1;
}

/* Status icons */
.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
}

.status-icon i {
    font-size: 0.75rem;
    line-height: 1;
}

/* Button icons */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
}

.btn-icon i {
    font-size: 1rem;
    line-height: 1;
}

/* Empty state icon */
.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1rem;
    background: var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
}

.empty-state-icon i {
    font-size: 2rem;
    line-height: 1;
}

/* Direction choice icons */
.direction-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%);
    border-radius: 50%;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}

.direction-icon-wrap i {
    font-size: 2rem;
    line-height: 1;
}

.direction-btn.selected .direction-icon-wrap {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
}