/* Icon Enhancements for PCB-Tie Plugin */

/* Ensure FontAwesome icons display properly */
.fas, .far, .fab, .fal {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Analysis Cards with Enhanced Icons */
.analysis-icon i {
    transition: all 0.3s ease;
    color: #8B0000 !important;
    font-size: inherit !important;
}

.analysis-card:hover .analysis-icon i {
    transform: rotate(5deg) scale(1.1);
    color: #B91C1C !important;
}

/* Material Cards with Enhanced Icons */
.material-card .material-icon i {
    transition: all 0.3s ease;
    color: #8B0000 !important;
    font-size: inherit !important;
}

.material-card:hover .material-icon i {
    transform: rotate(5deg) scale(1.1);
    color: #B91C1C !important;
}

/* Upload Cards with Enhanced Icons */
.upload-card .upload-icon i {
    transition: all 0.3s ease;
    color: #8B0000 !important;
    font-size: inherit !important;
}

.upload-card:hover .upload-icon i {
    transform: rotate(5deg) scale(1.1);
    color: #B91C1C !important;
}

/* Upload Visual with Enhanced Icons */
.upload-visual i {
    transition: all 0.3s ease;
    color: #8B0000 !important;
    font-size: inherit !important;
}

.upload-dropzone:hover .upload-visual i {
    transform: rotate(5deg) scale(1.1);
    color: #B91C1C !important;
}

/* General FontAwesome icon styling */
i.fas, i.far, i.fab, i.fal {
    color: #8B0000;
    transition: all 0.3s ease;
}

/* Step header icons */
.gba-step-title i {
    color: #8B0000 !important;
    margin-right: 10px;
}

/* Section title icons */
.section-title i {
    color: #8B0000 !important;
    margin-right: 8px;
}

/* Card header icons */
.card-header .card-icon i {
    color: #8B0000 !important;
}

/* Color Chips with Icons */
.color-chip::after {
    content: '\f53f'; /* FontAwesome palette icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: 15px;
    left: 15px;
    font-size: 14px;
    color: #8B0000;
    opacity: 0.6;
}

.color-chip:hover::after {
    opacity: 1;
}

/* Finish Options with Icons */
.finish-option::after {
    content: '\f70c'; /* FontAwesome spray-can icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: 15px;
    left: 15px;
    font-size: 14px;
    color: #8B0000;
    opacity: 0.6;
}

.finish-option:hover::after {
    opacity: 1;
}

/* Via Options with Icons */
.via-option::after {
    content: '\f0c1'; /* FontAwesome link icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: 15px;
    left: 15px;
    font-size: 14px;
    color: #8B0000;
    opacity: 0.6;
}

.via-option:hover::after {
    opacity: 1;
}

/* Silkscreen Options with Icons */
.silkscreen-option::after {
    content: '\f03e'; /* FontAwesome image icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: 15px;
    left: 15px;
    font-size: 14px;
    color: #8B0000;
    opacity: 0.6;
}

.silkscreen-option:hover::after {
    opacity: 1;
}

/* Thickness Options with Icons */
.thickness-option::after {
    content: '\f07d'; /* FontAwesome folder icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: 12px;
    left: 12px;
    font-size: 12px;
    color: #8B0000;
    opacity: 0.6;
}

.thickness-option:hover::after {
    opacity: 1;
}

/* Via Size Options with Icons */
.via-size-option::after {
    content: '\f111'; /* FontAwesome circle icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 10px;
    color: #8B0000;
    opacity: 0.6;
}

.via-size-option:hover::after {
    opacity: 1;
}

/* Mark Options with Icons */
.mark-option::after {
    content: '\f02a'; /* FontAwesome bookmark icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: 15px;
    left: 15px;
    font-size: 14px;
    color: #8B0000;
    opacity: 0.6;
}

.mark-option:hover::after {
    opacity: 1;
}

/* Product Type Options with Icons */
.product-type-option::after {
    content: '\f54e'; /* FontAwesome box icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: 15px;
    left: 15px;
    font-size: 14px;
    color: #8B0000;
    opacity: 0.6;
}

.product-type-option:hover::after {
    opacity: 1;
}

/* Enhanced Hover Effects */
.color-chip:hover .color-preview,
.silkscreen-option:hover .silkscreen-preview {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Loading State Icons */
.loading-icon {
    content: '\f110'; /* FontAwesome spinner icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    animation: spin 1s linear infinite;
}

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

/* Success State Icons */
.success-icon {
    content: '\f00c'; /* FontAwesome check icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #28a745;
}

/* Error State Icons */
.error-icon {
    content: '\f00d'; /* FontAwesome times icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #dc3545;
}

/* Warning State Icons */
.warning-icon {
    content: '\f071'; /* FontAwesome exclamation-triangle icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #ffc107;
}

/* Info State Icons */
.info-icon {
    content: '\f05a'; /* FontAwesome info-circle icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #17a2b8;
}

/* Hover effects for all FontAwesome icons */
i.fas:hover, i.far:hover, i.fab:hover, i.fal:hover {
    transform: scale(1.1);
    color: #B91C1C !important;
}

/* Required badges */
.required-badge i {
    color: #dc3545 !important;
}

/* Status icons */
.status-icon i {
    color: #8B0000 !important;
    font-size: 24px !important;
}

/* Button icons */
button i, .btn i, .button i {
    color: inherit !important;
    margin-right: 5px;
}

/* Tooltip icons */
.tooltip-trigger {
    color: #6c757d !important;
    cursor: help;
}

.tooltip-trigger:hover {
    color: #8B0000 !important;
}