/* XTaxi24 Icon System - Minimal black/white/grey with orange accent */

/* Base icon wrapper */
.xtaxi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.xtaxi-icon svg {
    width: 100%;
    height: 100%;
}

/* Icon color variants */
.icon-dark svg { stroke: #1a1a1a; fill: none; }
.icon-grey svg { stroke: #666; fill: none; }
.icon-light svg { stroke: #999; fill: none; }
.icon-accent svg { stroke: #FF6B35; fill: none; }
.icon-filled svg { fill: #1a1a1a; stroke: none; }
.icon-accent-filled svg { fill: #FF6B35; stroke: none; }

/* Icon sizes */
.icon-sm { width: 32px; height: 32px; }
.icon-md { width: 48px; height: 48px; }
.icon-lg { width: 64px; height: 64px; }
.icon-xl { width: 80px; height: 80px; }

/* Minimal icon container for features */
.feature-icon-minimal {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    background: #fafafa;
}

.feature-icon-minimal svg {
    width: 28px;
    height: 28px;
    stroke: #1a1a1a;
    stroke-width: 2;
    fill: none;
}

/* Accent variation */
.feature-icon-minimal.accent {
    border-color: #FF6B35;
    background: #FFF5F0;
}

.feature-icon-minimal.accent svg {
    stroke: #FF6B35;
}

/* Simple line icons - matching app style */
.icon-wheelchair {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-clock {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-door {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-price-tag {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-refresh {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-shield {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-location {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-car {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-hospital {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Hover effect - subtle */
.feature-icon-minimal {
    transition: all 0.2s ease;
}

.feature-icon-minimal:hover {
    border-color: #FF6B35;
    background: #FFF5F0;
}

.feature-icon-minimal:hover svg {
    stroke: #FF6B35;
}