/* ===============================
   Order Tracking - Page Styles
================================*/

.track-hero {
  margin-block: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}

.tracking-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin-bottom: var(--space-3);
  width: 100%;
}
.tracking-form label {
  flex-basis: 100%;
  font-weight: 500;
  margin-bottom: 0;
}
.tracking-form input[type="text"] {
  flex: 2 1 220px;
  min-width: 180px;
}
.tracking-form button {
  flex: 0 0 auto;
  min-width: 140px;
  margin-top: 0;
}

.tracking-result {
  margin-top: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-success);
}
.tracking-result.error {
  color: var(--color-danger);
}

.status-list {
  margin-block: var(--space-6);
  display: grid;
  gap: var(--space-3);
}
.status-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-md);
}
.status-dot {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-right: 4px;
  margin-left: 0;
  box-shadow: 0 0 4px rgba(0,0,0,.07);
  border: 1.5px solid var(--color-neutral-300);
}
.status-processing {
  background: var(--color-warning);
}
.status-shipped {
  background: var(--color-primary);
}
.status-delivered {
  background: var(--color-success);
}
.status-cancelled {
  background: var(--color-danger);
}

.methods-list, .faq-list {
  margin-top: var(--space-3);
  padding-left: var(--space-3);
  display: grid;
  gap: var(--space-2);
}
.methods-list li {
  list-style: disc inside;
}

.faq-list {
  font-size: var(--font-size-base);
}
.faq-list dt {
  font-weight: 600;
  margin-top: var(--space-2);
}
.faq-list dd {
  margin-left: var(--space-4);
  margin-bottom: var(--space-3);
}

.order-eta-section, .order-history-section {
  margin-block: var(--space-6);
}

.card {
  background: var(--color-neutral-100);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.order-feedback {
  margin-block: var(--space-8) var(--space-12);
  max-width: 620px;
  margin: 90px auto;
  text-align: center;
}
.feedback-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.feedback-form textarea {
  min-height: 78px;
  font-size: var(--font-size-base);
  resize: vertical;
}
.feedback-success {
  color: var(--color-success);
  margin-top: var(--space-2);
  font-weight: 500;
  font-size: var(--font-size-md);
}

/* Responsive styles */
@media (max-width: 800px) {
  .track-hero, .tracking-methods, .tracking-accuracy-section, .tracking-faq-section, .order-feedback {
    padding: var(--space-4);
  }
  .order-feedback {
    max-width: 100%;
  }
}
@media (max-width: 550px) {
  .tracking-form {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .feedback-form button,
  .tracking-form button {
    width: 100%;
    min-width: 0;
  }
}