/* Cart and Checkout Styles */

/* Quantity input */
.input-group {
    width: 120px;
}

    .input-group .btn {
        width: 40px;
    }

/* Order summary */
.order-summary {
    position: sticky;
    top: 20px;
}

/* Timeline styles */
.timeline {
    position: relative;
}

    .timeline::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 0;
        bottom: 0;
        width: 2px;
        background-color: #dee2e6;
    }

.timeline-item {
    position: relative;
    padding-left: 40px;
    margin-bottom: 20px;
}

.timeline-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #dee2e6;
    border: 4px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-item.active .timeline-marker {
    background-color: #198754;
}

/* Product thumbnails */
.thumbnail-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
}

    .thumbnail:hover,
    .thumbnail.active {
        border-color: #0d6efd;
    }

/* Loading spinner */
.spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* Toast notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .input-group {
        width: 100%;
    }

    .timeline::before {
        left: 12px;
    }

    .timeline-item {
        padding-left: 30px;
    }

    .timeline-marker {
        width: 24px;
        height: 24px;
    }
}