@import url(main.css);

.order-container {
  width: 60%;
  padding-bottom: var(--ws-4);
}

.order-header {
  padding: var(--ws-4) 0px;
}

.order-content {
    gap: var(--ws-4);
}

.order-recent {
  border-radius: 8px;
  border: 2px solid #fff;
  background: #f6f6f6;
  box-shadow: 10px 10px 50px 0px #cdcdcd;
}

.order-recent-header {
    padding: var(--ws-3);
    border-bottom: 2px solid var(--clr-white);
}

.order-date-time {
    gap: 0px;
    width: fit-content;
}

.order-date, .order-time {
    padding: var(--ws-1) var(--ws-2);
}

.order-date {
    background: var(--clr-white);
    border-radius: 8px 8px 0px 0px;
}

.order-time {
    background: var(--clr-dark);
    border-radius: 0px 0px 8px 8px;
}

.order-items {
    padding: var(--ws-3);
}

.order-itenary {
    gap: var(--ws-3);
}

.order-tracking {
    padding: var(--ws-3);
    background: linear-gradient(90deg, #FF6315 0%, #FF411C 25%, #FF1D23 50%, #FF0728 75%, #FF002A 100%), #FFF;
    border-radius: 0px 0px 8px 8px;
}

.order-tracking p {
    color: var(--clr-white);
}

.order-reorder {
    padding: var(--ws-3);
    background: var(--clr-white);
}

.order-stars {
    padding: var(--ws-3);
}

@media (max-width: 828px) {
    .order-container {
        width: 100%;
      }
      
}
