/**
 * Lightweight Icon System
 * CSS-only icons to replace FontAwesome
 */

/* Base icon class */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: middle;
    position: relative;
}

/* Chevron icons using CSS borders */
.icon-chevron-down,
.icon-chevron-up {
    width: 0.8em;
    height: 0.8em;
}

.icon-chevron-down::before,
.icon-chevron-up::before {
    content: '';
    position: absolute;
    width: 0.4em;
    height: 0.4em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    left: 50%;
    top: 50%;
}

.icon-chevron-down::before {
    transform: translate(-50%, -70%) rotate(45deg);
}

.icon-chevron-up::before {
    transform: translate(-50%, -30%) rotate(-135deg);
}

/* Size variants */
.icon-sm {
    font-size: 0.875em;
}

.icon-lg {
    font-size: 1.25em;
}

.icon-xl {
    font-size: 1.5em;
}

.icon-2x {
    font-size: 2em;
}

.icon-3x {
    font-size: 3em;
}

/* Alternative: Using Unicode symbols (even lighter) */
.icon-chevron-down-unicode::before {
    content: '▼';
    font-size: 0.8em;
}

.icon-chevron-up-unicode::before {
    content: '▲';
    font-size: 0.8em;
}

/* Social media icons using Unicode or simple shapes */
.icon-facebook::before {
    content: 'f';
    font-weight: bold;
    background: #1877f2;
    color: white;
    border-radius: 3px;
    width: 1em;
    height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: serif;
}

.icon-twitter::before {
    content: '🐦';
    font-size: 0.9em;
}

.icon-linkedin::before {
    content: 'in';
    font-weight: bold;
    background: #0077b5;
    color: white;
    border-radius: 2px;
    width: 1em;
    height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    font-family: sans-serif;
}

.icon-youtube::before {
    content: '▶';
    background: #ff0000;
    color: white;
    border-radius: 3px;
    width: 1em;
    height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
}

/* Utility icons */
.icon-shield-check::before {
    content: '🛡️';
    font-size: 0.9em;
}

.icon-check::before {
    content: '✓';
    font-weight: bold;
}

.icon-info::before {
    content: 'ℹ️';
    font-size: 0.9em;
}

.icon-warning::before {
    content: '⚠️';
    font-size: 0.9em;
}

.icon-close::before {
    content: '×';
    font-weight: bold;
    font-size: 1.2em;
}

/* Utility classes */
.icon-spin {
    animation: icon-spin 1s linear infinite;
}

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

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

@keyframes icon-pulse {
    0% { opacity: 1; }
    100% { opacity: 0.25; }
}