/* ==========================================
   SELECTED VEHICLES DISPLAY CARD
   Shows selected cars with images and tuning
   ========================================== */

.selected - vehicles - card {
    margin - top: 20px;
    animation: slideInCard 0.3s ease;
}

@keyframes slideInCard {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.selected - vehicles - grid {
    display: flex;
    flex - direction: column;
    gap: 16px;
}

/* Individual Selected Vehicle Item */
.selected - vehicle - item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border - radius: 12px;
    transition: all 0.3s ease;
    animation: slideInItem 0.3s ease;
}

@keyframes slideInItem {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.selected - vehicle - item:hover {
    background: rgba(255, 255, 255, 0.05);
    border - color: rgba(0, 255, 157, 0.3);
    transform: translateX(4px);
}

/* Vehicle Image */
.selected - vehicle - image {
    flex - shrink: 0;
    width: 120px;
    height: 80px;
    border - radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.selected - vehicle - image img {
    width: 100 %;
    height: 100 %;
    object - fit: cover;
    transition: transform 0.3s ease;
}

.selected - vehicle - item: hover.selected - vehicle - image img {
    transform: scale(1.05);
}

/* Vehicle Info */
.selected - vehicle - info {
    flex: 1;
    display: flex;
    flex - direction: column;
    justify - content: space - between;
}

.selected - vehicle - name {
    margin: 0;
    font - size: 16px;
    font - weight: 700;
    color: #ffffff;
    letter - spacing: 0.5px;
    line - height: 1.3;
}

/* Action Buttons */
.selected - vehicle - actions {
    display: flex;
    gap: 10px;
    margin - top: 8px;
}

.selected - vehicle - actions.btn - tune {
    flex: 1;
    display: flex;
    align - items: center;
    justify - content: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear - gradient(135deg, rgba(0, 255, 157, 0.2), rgba(0, 204, 255, 0.2));
    border: 2px solid rgba(0, 255, 157, 0.4);
    border - radius: 8px;
    color: #00ff9d;
    font - size: 13px;
    font - weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font - family: 'Rajdhani', sans - serif;
}

.selected - vehicle - actions.btn - tune:hover {
    background: linear - gradient(135deg, rgba(0, 255, 157, 0.3), rgba(0, 204, 255, 0.3));
    border - color: #00ff9d;
    transform: translateY(-2px);
    box - shadow: 0 4px 12px rgba(0, 255, 157, 0.3);
}

.selected - vehicle - actions.btn - tune.btn - icon {
    font - size: 16px;
}

.selected - vehicle - actions.btn - remove {
    width: 36px;
    height: 36px;
    display: flex;
    align - items: center;
    justify - content: center;
    padding: 0;
    background: rgba(255, 68, 68, 0.1);
    border: 2px solid rgba(255, 68, 68, 0.3);
    border - radius: 8px;
    color: #ff4444;
    font - size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.selected - vehicle - actions.btn - remove:hover {
    background: rgba(255, 68, 68, 0.2);
    border - color: #ff4444;
    transform: scale(1.05);
}

/* Responsive Design */
@media(max - width: 768px) {
    .selected - vehicle - item {
        flex - direction: column;
        gap: 12px;
    }

    .selected - vehicle - image {
        width: 100 %;
        height: 120px;
    }

    .selected - vehicle - name {
        font - size: 15px;
    }

    .selected - vehicle - actions.btn - tune {
        font - size: 12px;
        padding: 8px 12px;
    }
}

@media(max - width: 480px) {
    .selected - vehicle - image {
        height: 100px;
    }

    .selected - vehicle - name {
        font - size: 14px;
    }

    .selected - vehicle - actions {
        flex - direction: column;
    }

    .selected - vehicle - actions.btn - remove {
        width: 100 %;
        height: 36px;
    }
}

/* Empty State */
.selected - vehicles - grid: empty::after {
    content: 'No vehicles selected yet';
    display: block;
    padding: 32px;
    text - align: center;
    color: rgba(255, 255, 255, 0.3);
    font - size: 14px;
    font - style: italic;
}

/* Tuning Indicator */
.selected - vehicle - item.tuned::before {
    content: '⚡';
    position: absolute;
    top: 12px;
    right: 12px;
    font - size: 20px;
    animation: pulse 2s ease infinite;
}

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