/* ============================================================
   Spishri Order Tracker — tracker.css
   Brand: Warm ivory + Deep charcoal + Antique gold
   Font: Cormorant Garamond (display) + DM Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --sp-bg:         #faf6f0;
  --sp-card:       #ffffff;
  --sp-header-bg:  #fdf8f1;
  --sp-border:     #ece5d8;
  --sp-gold:       #b8860b;
  --sp-gold-light: #f5edd8;
  --sp-gold-mid:   #d4a843;
  --sp-dark:       #1c1410;
  --sp-text:       #3d2e1a;
  --sp-muted:      #9e8870;
  --sp-line:       #e8dfd0;
  --sp-done-bg:    #b8860b;
  --sp-done-fg:    #ffffff;
  --sp-active-fg:  #b8860b;
  --sp-inactive:   #c8b99a;
  --sp-success:    #2e7d32;
  --sp-success-bg: #f1faf2;
  --sp-error:      #b71c1c;
  --sp-error-bg:   #fdf1f1;
  --sp-radius:     18px;
  --sp-radius-sm:  10px;
  --sp-shadow:     0 4px 32px rgba(100,70,30,.09);
}

/* Wrapper */
.sp-wrap {
  padding: 1.5rem 1rem;
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── TRACKER CARD ── */
.sp-card {
  background: var(--sp-card);
  border-radius: var(--sp-radius);
  border: 1px solid var(--sp-border);
  box-shadow: var(--sp-shadow);
  overflow: hidden;
  max-width: 480px;
  margin: 0 auto;
}

/* Header */
.sp-card-header {
  background: var(--sp-header-bg);
  padding: 1.6rem 1.75rem 1.4rem;
  border-bottom: 1px solid var(--sp-border);
}
.sp-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.sp-brand-tag {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sp-muted);
  font-weight: 500;
}

/* Status pill */
.sp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
}
.sp-status-pill.status-transit  { background: var(--sp-gold-light); border: 1px solid #e0c070; color: #7a5608; }
.sp-status-pill.status-done     { background: var(--sp-success-bg); border: 1px solid #a5d6a7; color: var(--sp-success); }
.sp-status-pill.status-pending  { background: #faf0dc; border: 1px solid #e8c86a; color: #7a5608; }
.sp-status-pill.status-hold     { background: #fef3e2; border: 1px solid #ffcc80; color: #e65100; }
.sp-status-pill.status-cancel   { background: #fdf0f0; border: 1px solid #ef9a9a; color: var(--sp-error); }

.sp-pulse-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: sp-pulse 1.8s ease-in-out infinite;
}
@keyframes sp-pulse { 0%,100%{opacity:1} 50%{opacity:.25} }

.sp-order-id {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--sp-dark);
  letter-spacing: -.01em;
  margin: 0 0 .25rem;
  line-height: 1.2;
}
.sp-order-date {
  font-size: 12px;
  color: var(--sp-muted);
  font-weight: 400;
  margin: 0;
}

/* Body / Timeline */
.sp-card-body { padding: 1.75rem 1.75rem 1rem; }

.sp-timeline { display: flex; flex-direction: column; gap: 0; }

.sp-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
}

/* Connector line between steps */
.sp-step-connector {
  position: absolute;
  left: 17px;
  top: 38px;
  width: 2px;
  height: calc(100% - 8px);
  z-index: 0;
}
.sp-connector-line {
  width: 100%;
  height: 100%;
  background: var(--sp-line);
  border-radius: 2px;
  transition: background .4s ease;
}
.sp-connector-line--filled { background: linear-gradient(180deg, var(--sp-gold) 0%, var(--sp-gold-mid) 100%); }

/* Node */
.sp-step-node { position: relative; z-index: 1; flex-shrink: 0; }
.sp-node-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--sp-line);
  background: var(--sp-bg);
  color: var(--sp-inactive);
  transition: all .3s ease;
  position: relative;
}
.sp-node-circle svg { width: 16px; height: 16px; }

/* Done state */
.sp-step--done .sp-node-circle {
  background: var(--sp-done-bg);
  border-color: var(--sp-done-bg);
  color: var(--sp-done-fg);
}
.sp-check-icon { width: 16px; height: 16px; }

/* Active state */
.sp-step--active .sp-node-circle {
  background: #fff;
  border-color: var(--sp-gold);
  color: var(--sp-active-fg);
  box-shadow: 0 0 0 5px rgba(184,134,11,.1);
}
.sp-active-ring {
  position: absolute;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1.5px solid var(--sp-gold);
  animation: sp-ring 2s ease-in-out infinite;
}
@keyframes sp-ring { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.25);opacity:0} }

/* Step text */
.sp-step-text { padding: 7px 0 28px; flex: 1; }
.sp-step:last-child .sp-step-text { padding-bottom: 0; }
.sp-step-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sp-inactive);
  display: block;
  transition: color .3s ease;
}
.sp-step--done  .sp-step-label,
.sp-step--active .sp-step-label { color: var(--sp-dark); }

/* Details table */
.sp-details {
  background: #fdf9f4;
  border-top: 1px solid var(--sp-border);
  border-bottom: 1px solid var(--sp-border);
  padding: 0 1.75rem;
}
.sp-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--sp-line);
}
.sp-detail-row:last-child { border-bottom: none; }
.sp-detail-key {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sp-muted);
}
.sp-detail-val {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sp-text);
}
.sp-mono { font-family: 'DM Mono', 'Courier New', monospace; letter-spacing: .04em; }
.sp-dash { color: var(--sp-muted); font-style: italic; font-size: 12px; }

/* Delivered banner */
.sp-delivered-banner {
  margin: 0 1.75rem;
  background: var(--sp-success-bg);
  border: 1px solid #c8e6c9;
  border-radius: var(--sp-radius-sm);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--sp-success);
  font-weight: 500;
  margin-top: 1.25rem;
}
.sp-delivered-banner svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Footer / CTA */
.sp-card-footer { padding: 1.25rem 1.75rem 1.75rem; }
.sp-track-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  background: var(--sp-dark);
  color: #f5e9c8;
  text-decoration: none;
  border: none;
  border-radius: var(--sp-radius-sm);
  padding: 14px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.sp-track-btn svg { width: 16px; height: 16px; }
.sp-track-btn:hover  { background: #2e2015; transform: translateY(-1px); color: #f5e9c8; }
.sp-track-btn:active { transform: translateY(0); }

.sp-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--sp-muted);
  margin: 0;
  line-height: 1.6;
}

/* ── FORM CARD ── */
.sp-form-card {
  background: var(--sp-card);
  border-radius: var(--sp-radius);
  border: 1px solid var(--sp-border);
  box-shadow: var(--sp-shadow);
  overflow: hidden;
  max-width: 440px;
  margin: 0 auto;
}
.sp-form-header {
  background: var(--sp-header-bg);
  padding: 2rem 2rem 1.5rem;
  border-bottom: 1px solid var(--sp-border);
  text-align: center;
}
.sp-form-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--sp-gold-light);
  border: 1px solid #e8c870;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.1rem;
  color: var(--sp-gold);
}
.sp-form-icon svg { width: 24px; height: 24px; }
.sp-form-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--sp-dark);
  margin: 0 0 .4rem;
}
.sp-form-sub { font-size: 13px; color: var(--sp-muted); margin: 0; line-height: 1.6; }

/* Error */
.sp-error-box {
  margin: 1.25rem 1.75rem 0;
  background: var(--sp-error-bg);
  border: 1px solid #ffcdd2;
  border-radius: var(--sp-radius-sm);
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--sp-error);
  font-weight: 500;
}
.sp-error-box svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Form fields */
.sp-form { padding: 1.5rem 1.75rem 1.25rem; display: flex; flex-direction: column; gap: 14px; }
.sp-field { display: flex; flex-direction: column; gap: 6px; }
.sp-label { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-muted); }
.sp-input {
  padding: 12px 14px;
  border: 1.5px solid var(--sp-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  background: #fdfaf6;
  color: var(--sp-dark);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.sp-input::placeholder { color: var(--sp-inactive); }
.sp-input:focus { border-color: var(--sp-gold); box-shadow: 0 0 0 3px rgba(184,134,11,.1); }

.sp-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  background: var(--sp-dark);
  color: #f5e9c8;
  border: none;
  border-radius: 8px;
  padding: 14px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .05em;
  cursor: pointer;
  margin-top: 4px;
  transition: background .2s, transform .15s;
}
.sp-submit-btn svg { width: 17px; height: 17px; }
.sp-submit-btn:hover  { background: #2e2015; transform: translateY(-1px); }
.sp-submit-btn:active { transform: translateY(0); }

.sp-form-hint {
  font-size: 12px;
  color: var(--sp-muted);
  text-align: center;
  padding: 0 1.75rem 1.5rem;
  margin: 0;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 480px) {
  .sp-wrap { padding: 1rem .5rem; }
  .sp-card-header, .sp-card-body, .sp-card-footer,
  .sp-form-header, .sp-form { padding-left: 1.25rem; padding-right: 1.25rem; }
  .sp-details { padding-left: 1.25rem; padding-right: 1.25rem; }
  .sp-delivered-banner { margin-left: 1.25rem; margin-right: 1.25rem; }
  .sp-form-hint { padding-left: 1.25rem; padding-right: 1.25rem; }
  .sp-order-id { font-size: 24px; }
}