@use '../../styles/variables' as *;

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: $space-5 $space-3;
}

.heading {
  margin: 0 0 $space-4;
}

@keyframes empty-state-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $space-1;
  padding: $space-5 $space-3;
  text-align: center;
  border: 1px dashed $color-border;
  border-radius: $radius;
  background: $color-surface;

  @media (prefers-reduced-motion: no-preference) {
    animation: empty-state-enter 0.32s cubic-bezier(0.2, 0, 0, 1) both;
  }

  svg {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: $space-2;
    color: $color-text-muted;
  }
}

.emptyTitle {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.emptyText {
  margin: 0 0 $space-3;
  color: $color-text-muted;
}

.emptyCta {
  display: inline-flex;
  align-items: center;
  gap: $space-1;
  padding: $space-2 $space-4;
  border-radius: $radius;
  background: $color-primary;
  color: $color-primary-contrast;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 8px color-mix(in srgb, $color-primary 35%, transparent);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px color-mix(in srgb, $color-primary 45%, transparent);
  }

  &:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px color-mix(in srgb, $color-primary 35%, transparent);
  }
}

.emptyCtaArrow {
  transition: transform 0.15s ease;
}

.emptyCta:hover .emptyCtaArrow {
  transform: translateX(3px);
}

.orders {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: $space-3;
}

.order {
  display: block;
  padding: $space-3;
  border: 1px solid $color-border;
  border-radius: $radius;
  background: $color-surface;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    opacity 0.28s ease,
    transform 0.28s ease;

  &:hover {
    border-color: $color-primary;
  }
}

.orderExiting .order {
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
}

.orderHeader {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: $space-1;
}

.orderStatus {
  text-transform: capitalize;
  color: $color-text-muted;
  font-weight: 500;
}

.orderItems {
  margin: 0 0 $space-1;
  font-size: 0.9rem;
}

.orderMeta {
  margin: 0;
  font-size: 0.85rem;
  color: $color-text-muted;
}