/* ==========================================================================
   Track Order — V2 skin. Loads AFTER track-order.css and re-themes the page
   to the Account V2 design system (flat warm background, solid cards, quiet
   teal accents) without touching js/pages/track-order.js or the markup.
   ========================================================================== */

.track-order-page {
  /* Retune the token set the whole page is built on */
  --track-radius-sm: 10px;
  --track-radius: 14px;
  --track-radius-lg: 16px;
  --track-radius-xl: 20px;
  --track-shadow-sm: 0 1px 2px rgba(23, 23, 23, 0.04);
  --track-shadow: 0 1px 2px rgba(23, 23, 23, 0.04), 0 6px 20px rgba(23, 23, 23, 0.05);
  --track-shadow-lg: 0 2px 4px rgba(23, 23, 23, 0.06), 0 12px 32px rgba(23, 23, 23, 0.09);
  --track-shadow-glow: 0 4px 12px rgba(27, 123, 137, 0.28);
  --track-gradient-hero: none;

  background: #f7f6f2;
}

/* --------------------------------------------------------------------------
   Preloader — warm brand tone instead of dark navy
   -------------------------------------------------------------------------- */

.track-order-preloader {
  background: #f7f6f2;
}

.track-order-preloader .preloader-icon {
  background: var(--track-primary);
  box-shadow: 0 8px 24px rgba(27, 123, 137, 0.25);
}

.track-order-preloader .preloader-content p {
  color: #6b7280;
}

/* --------------------------------------------------------------------------
   Hero — compact, calm
   -------------------------------------------------------------------------- */

.track-hero {
  padding: 24px 20px 44px;
}

.track-hero-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  animation: none;
}

.track-hero-icon-inner,
.track-hero-icon {
  border-radius: 16px;
  background: #e8f3f5;
  box-shadow: none;
}

.track-hero-icon i {
  font-size: 22px;
  color: var(--track-primary);
  filter: none;
  animation: none;
}

.track-hero-title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.track-hero-subtitle {
  font-size: 13.5px;
}

/* Form card — solid, bordered */
.track-form {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #e8e4da;
  border-radius: 16px;
  box-shadow: var(--track-shadow);
  padding: 20px;
}

.track-form::before {
  display: none;
}

.track-order-page .form-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #1f2937;
}

.track-order-page .form-label i {
  color: var(--track-primary);
}

.track-order-page .form-input {
  height: 48px;
  border: 1px solid #d9d3c6;
  border-radius: 10px;
  font-size: 14px;
}

.track-order-page .form-input:focus {
  border-color: var(--track-primary);
  box-shadow: 0 0 0 3px rgba(27, 123, 137, 0.14);
}

.track-btn {
  background: var(--track-primary);
  border-radius: 10px;
  font-weight: 600;
  font-size: 14.5px;
  padding: 13px 18px;
}

.track-btn:hover {
  background: #14616c;
  box-shadow: 0 6px 16px rgba(27, 123, 137, 0.3);
}

/* Error message — flat V2 alert */
.track-order-page .error-message {
  background: #fdecea;
  border: 1px solid rgba(217, 45, 32, 0.25);
  border-radius: 10px;
  color: #d92d20;
}

/* --------------------------------------------------------------------------
   Result cards — solid white with V2 borders; header as quiet band
   -------------------------------------------------------------------------- */

.result-card {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #e8e4da;
  box-shadow: var(--track-shadow);
}

.result-card .card-header {
  background: #fbfaf6;
  border-bottom: 1px solid #f1eee6;
}

.result-card .card-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #9ca3af;
}

.result-card .card-title i {
  color: var(--track-primary);
}

/* --------------------------------------------------------------------------
   Order Summary hero card — track-order.css designs this as a DARK glass
   card (white text, translucent status-badge overlays, an animated glow —
   all tuned to sit on a dark gradient). The generic `.result-card` rule
   above flips its background to white, which otherwise leaves white-on-
   white text, a washed-out status pill, and a stray glow blob. Re-tune
   everything inside this specific card for a light background.
   -------------------------------------------------------------------------- */

.order-summary-card {
  background: #fff;
}

.order-summary-card::before {
  display: none;
}

.order-summary-card .order-badge {
  color: #1f2937;
}

.order-summary-card .order-badge i {
  color: var(--track-primary);
}

.order-summary-card .meta-label {
  color: #9ca3af;
}

.order-summary-card .meta-value {
  color: #1f2937;
}

/* Status badge — solid soft-tinted pill instead of a translucent overlay
   (the original alpha values assumed a dark card behind them) */
.order-summary-card .order-status-badge.status-processing {
  background: #fef3c7;
  color: #b45309;
}
.order-summary-card .order-status-badge.status-processing::before { background: #b45309; }

.order-summary-card .order-status-badge.status-shipped,
.order-summary-card .order-status-badge.status-in-transit,
.order-summary-card .order-status-badge.status-transit {
  background: rgba(var(--track-primary-rgb), 0.12);
  color: var(--track-primary);
}
.order-summary-card .order-status-badge.status-shipped::before,
.order-summary-card .order-status-badge.status-in-transit::before,
.order-summary-card .order-status-badge.status-transit::before { background: var(--track-primary); }

.order-summary-card .order-status-badge.status-out-for-delivery {
  background: #fce7f3;
  color: #be185d;
}
.order-summary-card .order-status-badge.status-out-for-delivery::before { background: #be185d; }

.order-summary-card .order-status-badge.status-delivered {
  background: rgba(var(--track-primary-rgb), 0.12);
  color: var(--track-primary);
}
.order-summary-card .order-status-badge.status-delivered::before { background: var(--track-primary); }

.order-summary-card .order-status-badge.status-exception,
.order-summary-card .order-status-badge.status-failed {
  background: #fee2e2;
  color: #dc2626;
}
.order-summary-card .order-status-badge.status-exception::before,
.order-summary-card .order-status-badge.status-failed::before { background: #dc2626; }

/* Live Tracking Status mini-summary — same white-on-pale-teal problem */
.order-summary-card .tracking-summary-status {
  color: #1f2937;
}

.order-summary-card .tracking-summary-time {
  color: #6b7280;
}

/* --------------------------------------------------------------------------
   Live Status card — same dark-glass pattern as the order summary card
   above (dark gradient header/body, glowing border, white text/chips),
   hit by the same white-background override. Currently only shown for
   in-transit shipments, but re-tune it now so it doesn't break the moment
   someone tracks an order that's on the way.
   -------------------------------------------------------------------------- */

.live-status-card {
  background: #fff;
  border: 1px solid #e8e4da;
}

.live-status-card::before {
  display: none;
}

.live-status-card .card-header {
  background: #fbfaf6;
}

.live-status-card .card-title {
  color: #1f2937;
}

.live-status-card .live-status-title {
  color: #1f2937;
}

.live-status-card .live-status-message {
  color: #6b7280;
}

.live-status-card .live-status-icon {
  background: rgba(var(--track-primary-rgb), 0.08);
}

.live-status-card .live-location,
.live-status-card .live-time {
  background: #f4f2ec;
  color: #4b5563;
  border: 1px solid #e8e4da;
}

/* Track-again pill */
.track-again-link {
  background: #fff;
  border: 1px solid #d9d3c6;
  border-radius: 999px;
}

.track-again-link:hover {
  border-color: var(--track-primary);
  background: #e8f3f5;
}

/* --------------------------------------------------------------------------
   Focus visibility
   -------------------------------------------------------------------------- */

.track-order-page a:focus-visible,
.track-order-page button:focus-visible,
.track-order-page input:focus-visible {
  outline: 2px solid var(--track-primary);
  outline-offset: 2px;
}