/**
 * Frontend Styles for Order Status Display
 */

/* Prevent double styling from template */
.osd-container * {
    box-sizing: border-box;
}

/* Loading state */
.osd-container.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Progress bar animations */
@keyframes fillProgress {
    from {
        width: 0;
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .osd-table thead th:nth-child(1),
    .osd-table tbody td:nth-child(1) {
        display: none;
    }
    
    .osd-buyer-name {
        flex-direction: column;
        align-items: flex-start !important;
    }
}