/* ── RESET & BASE ── */
@import url("../theme.css");

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Outfit', sans-serif;
  background: var(--cream);
  color: var(--text);
  min-height: 100vh;
}

/* noise overlay */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none; z-index:0;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 40px;
  background:rgba(253,246,236,0.93);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}

.nav-logo {
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.nav-logo-emblem {
  width:38px; height:38px;
  border-radius:10px; overflow:hidden;
  background:linear-gradient(135deg,var(--terra),var(--saffron));
  box-shadow:0 3px 12px rgba(193,68,14,0.28);
  display:flex; align-items:center; justify-content:center;
}
.nav-logo-emblem img { width:100%; height:100%; object-fit:contain; display:block; }
.nav-logo-text {
  font-family:'Cormorant Garamond',serif;
  font-size:20px; font-weight:700; color:var(--text);
}

.nav-back {
  padding:8px 16px;
  border:1.5px solid var(--border); border-radius:9px;
  color:var(--text-lt); font-size:13px; font-weight:500;
  text-decoration:none; background:transparent;
  transition:all 0.2s;
}
.nav-back:hover { border-color:var(--terra); color:var(--terra); background:rgba(193,68,14,0.05); }

/* ── MAIN ── */
.tracking-main {
  padding:90px 20px 60px;
  max-width:760px; margin:0 auto;
  position:relative; z-index:1;
}

/* ── SEARCH CARD ── */
.search-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  padding:40px 44px;
  box-shadow:0 8px 40px var(--shadow);
  text-align:center;
  animation:fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) both;
  position:relative; overflow:hidden;
}
.search-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--terra),var(--saffron),var(--terra));
  background-size:200% 100%;
  animation:shimmer 3s linear infinite;
}
@keyframes shimmer { to { background-position:200% 0; } }

.search-eyebrow {
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,rgba(244,160,35,0.15),rgba(193,68,14,0.1));
  border:1px solid rgba(244,160,35,0.35);
  border-radius:100px;
  padding:5px 16px;
  font-size:11.5px; font-weight:700;
  color:var(--terra);
  text-transform:uppercase; letter-spacing:0.1em;
  margin-bottom:20px;
}

.search-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(32px,5vw,48px);
  font-weight:700; line-height:1.1;
  color:var(--text); margin-bottom:12px;
}
.search-title em {
  font-style:italic; color:var(--terra);
  position:relative;
}
.search-title em::after {
  content:'';
  position:absolute; bottom:2px; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--saffron),var(--terra));
  border-radius:2px; opacity:0.6;
}

.search-sub {
  font-size:15px; font-weight:300;
  color:var(--text-lt); margin-bottom:32px;
  line-height:1.6;
}

.search-box {
  text-align:left;
  display:flex; flex-direction:column; gap:0;
}

.search-field { display:flex; flex-direction:column; gap:7px; }
.search-field label {
  font-size:12px; font-weight:700;
  color:var(--text-lt);
  text-transform:uppercase; letter-spacing:0.08em;
}
.search-field input,
.search-field .mobile-wrap {
  background:var(--warm);
  border:1.5px solid var(--border);
  border-radius:12px;
  font-family:'Outfit',sans-serif;
  font-size:14px; color:var(--text);
  transition:border-color 0.2s, box-shadow 0.2s;
}
.search-field input {
  padding:12px 16px; outline:none; width:100%;
}
.search-field input::placeholder { color:var(--text-lt); }
.search-field input:focus,
.search-field .mobile-wrap:focus-within {
  border-color:var(--saffron);
  box-shadow:0 0 0 3px rgba(244,160,35,0.14);
}

.mobile-wrap {
  display:flex; align-items:center;
  padding:0 0 0 14px; overflow:hidden;
}
.prefix {
  font-size:14px; font-weight:600;
  color:var(--text-mid); margin-right:6px;
  white-space:nowrap;
}
.mobile-wrap input {
  flex:1; border:none; background:transparent;
  padding:12px 16px 12px 0;
  outline:none;
}

.search-divider {
  display:flex; align-items:center; gap:12px;
  margin:18px 0;
  color:var(--text-lt); font-size:12px; font-weight:500;
}
.search-divider::before,
.search-divider::after {
  content:''; flex:1; height:1px;
  background:var(--border);
}

.search-msg {
  font-size:13px; font-weight:500;
  border-radius:8px; padding:0;
  max-height:0; overflow:hidden;
  transition:max-height 0.3s, padding 0.3s;
}
.search-msg.visible {
  max-height:60px; padding:10px 14px; margin-top:4px;
}
.search-msg.error { background:rgba(231,76,60,0.08); color:#c0392b; }
.search-msg.info  { background:rgba(193,68,14,0.07); color:var(--terra); }

.btn-track {
  margin-top:20px;
  padding:14px 32px;
  background:linear-gradient(135deg,var(--terra),var(--terra-lt));
  border:none; border-radius:14px; color:#fff;
  font-family:'Outfit',sans-serif;
  font-size:15px; font-weight:600;
  cursor:pointer; width:100%;
  box-shadow:0 6px 22px rgba(193,68,14,0.38);
  transition:all 0.25s;
}
.btn-track:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(193,68,14,0.48); }
.btn-track:active { transform:scale(0.98); }
.btn-track:disabled { opacity:0.6; cursor:not-allowed; transform:none; }

/* ── ORDER CARD ── */
.order-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:0 8px 40px var(--shadow);
  overflow:hidden;
  animation:fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) both;
}

.order-card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 28px 20px;
  background:linear-gradient(135deg,var(--warm),rgba(244,160,35,0.08));
  border-bottom:1px solid var(--border);
}

.order-ref-label {
  display:block;
  font-size:10.5px; font-weight:700;
  color:var(--text-lt);
  text-transform:uppercase; letter-spacing:0.1em;
  margin-bottom:4px;
}
.order-ref-val {
  font-family:'Cormorant Garamond',serif;
  font-size:26px; font-weight:700; color:var(--text);
}

/* STATUS BADGES */
.order-status-badge {
  padding:8px 18px;
  border-radius:100px;
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.08em;
}
.badge-pending    { background:rgba(244,160,35,0.15); color:#b07d00; border:1px solid rgba(244,160,35,0.4); }
.badge-confirmed  { background:rgba(74,124,89,0.12);  color:#2e6b46; border:1px solid rgba(74,124,89,0.3); }
.badge-preparing  { background:rgba(193,68,14,0.1);   color:var(--terra); border:1px solid rgba(193,68,14,0.25); }
.badge-ready      { background:rgba(74,124,89,0.2);   color:#1e5e38; border:1px solid rgba(74,124,89,0.4); }
.badge-delivered  { background:rgba(74,124,89,0.25);  color:#1a5232; border:1px solid rgba(74,124,89,0.5); }
.badge-cancelled  { background:rgba(231,76,60,0.1);   color:#c0392b; border:1px solid rgba(231,76,60,0.25); }

/* ── META ROW ── */
.order-meta-row {
  display:flex; flex-wrap:wrap; gap:0;
  padding:0 28px;
  border-bottom:1px solid var(--border);
}
.meta-item {
  display:flex; align-items:center; gap:10px;
  padding:16px 0;
  flex:1; min-width:140px;
  border-right:1px solid var(--border);
  padding-right:20px; padding-left:0;
}
.meta-item:last-child { border-right:none; }
.meta-item + .meta-item { padding-left:20px; }
.meta-icon { font-size:20px; flex-shrink:0; }
.meta-label {
  display:block;
  font-size:10px; font-weight:700;
  color:var(--text-lt);
  text-transform:uppercase; letter-spacing:0.08em;
  margin-bottom:2px;
}
.meta-val { font-size:13px; font-weight:600; color:var(--text); }

/* ── STEPPER ── */
.stepper-wrap {
  padding:28px 28px 24px;
  border-bottom:1px solid var(--border);
}

.stepper {
  display:flex; align-items:flex-start;
  position:relative;
}

.step {
  display:flex; flex-direction:column; align-items:center;
  flex:1; position:relative;
}

/* connecting line between steps */
.step:not(:last-child)::after {
  content:'';
  position:absolute;
  top:18px; left:calc(50% + 18px);
  right:calc(-50% + 18px);
  height:3px;
  background:var(--border);
  z-index:0;
  transition:background 0.5s;
}
.step.done:not(:last-child)::after {
  background:linear-gradient(90deg,var(--terra),var(--saffron));
}

.step-circle {
  width:36px; height:36px;
  border-radius:50%;
  background:var(--warm);
  border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  position:relative; z-index:1;
  transition:all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.step.done .step-circle {
  background:linear-gradient(135deg,var(--terra),var(--terra-lt));
  border-color:var(--terra);
  box-shadow:0 4px 14px rgba(193,68,14,0.35);
}
.step.active .step-circle {
  background:linear-gradient(135deg,var(--saffron),var(--turmeric));
  border-color:var(--saffron);
  box-shadow:0 4px 14px rgba(244,160,35,0.4);
  animation:pulse 1.8s ease infinite;
}
.step.cancelled .step-circle {
  background:rgba(231,76,60,0.12);
  border-color:#e74c3c;
}

@keyframes pulse {
  0%,100% { box-shadow:0 4px 14px rgba(244,160,35,0.4); }
  50%      { box-shadow:0 4px 24px rgba(244,160,35,0.7); }
}

.step-label {
  margin-top:8px;
  font-size:11px; font-weight:600;
  color:var(--text-lt);
  text-align:center; line-height:1.3;
}
.step.done .step-label,
.step.active .step-label { color:var(--text); }

/* ── ITEMS SECTION ── */
.items-section { padding:24px 28px; }

.items-title {
  font-family:'Cormorant Garamond',serif;
  font-size:18px; font-weight:600;
  color:var(--text); margin-bottom:16px;
}

.items-list { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }

.item-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px;
  background:var(--warm);
  border:1px solid var(--border);
  border-radius:10px;
  gap:10px;
}
.item-row-left { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.item-qty-badge {
  background:linear-gradient(135deg,var(--terra),var(--terra-lt));
  color:#fff;
  border-radius:8px; padding:2px 9px;
  font-size:12px; font-weight:700;
  white-space:nowrap; flex-shrink:0;
}
.item-name-text {
  font-size:13px; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.item-price-text {
  font-size:13px; font-weight:700; color:var(--terra);
  white-space:nowrap;
}

/* TOTALS */
.items-totals { border-top:1px solid var(--border); padding-top:14px; display:flex; flex-direction:column; gap:8px; }
.total-row {
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; font-weight:500; color:var(--text-lt);
}
.total-row.discount { color:var(--leaf); }
.total-row.final {
  font-size:16px; font-weight:700; color:var(--text);
  border-top:1px dashed var(--border); padding-top:10px; margin-top:2px;
}

/* ── FOOTER BUTTONS ── */
.order-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  border-top:1px solid var(--border);
  background:var(--warm);
  gap:12px;
}

.btn-refresh {
  display:flex; align-items:center; gap:7px;
  padding:10px 20px;
  background:linear-gradient(135deg,var(--terra),var(--terra-lt));
  border:none; border-radius:10px; color:#fff;
  font-family:'Outfit',sans-serif;
  font-size:13px; font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(193,68,14,0.3);
  transition:all 0.25s;
}
.btn-refresh:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(193,68,14,0.42); }
.btn-refresh.spinning #refreshIcon { display:inline-block; animation:spin 0.7s linear infinite; }

@keyframes spin { to { transform:rotate(360deg); } }

.btn-new-search {
  padding:10px 20px;
  background:transparent;
  border:1.5px solid var(--border); border-radius:10px;
  color:var(--text-lt);
  font-family:'Outfit',sans-serif;
  font-size:13px; font-weight:600;
  cursor:pointer; transition:all 0.2s;
}
.btn-new-search:hover { border-color:var(--terra); color:var(--terra); background:rgba(193,68,14,0.05); }

/* ── MULTIPLE ORDERS LIST ── */
.multi-title {
  font-family:'Cormorant Garamond',serif;
  font-size:22px; font-weight:600; color:var(--text);
  margin:28px 0 14px;
}

.multi-list { display:flex; flex-direction:column; gap:12px; }

.multi-order-row {
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer;
  transition:all 0.22s;
  gap:12px;
}
.multi-order-row:hover {
  border-color:rgba(193,68,14,0.28);
  box-shadow:0 6px 20px var(--shadow);
  transform:translateY(-2px);
}
.multi-order-left { display:flex; flex-direction:column; gap:4px; }
.multi-ref {
  font-family:'Cormorant Garamond',serif;
  font-size:18px; font-weight:700; color:var(--text);
}
.multi-time { font-size:12px; color:var(--text-lt); font-weight:400; }
.multi-right { display:flex; align-items:center; gap:12px; }
.multi-amount { font-size:14px; font-weight:700; color:var(--terra); }
.multi-arrow { color:var(--text-lt); font-size:18px; }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── RESPONSIVE ── */
@media (max-width:600px) {
  nav { padding:12px 16px; }
  .tracking-main { padding:78px 14px 50px; }
  .search-card { padding:28px 20px; }
  .order-card-header { flex-direction:column; align-items:flex-start; gap:12px; padding:20px; }
  .order-meta-row { padding:0 20px; flex-wrap:wrap; }
  .meta-item { min-width:calc(50% - 20px); border-right:none; padding-left:0 !important; }
  .stepper-wrap { padding:20px; overflow-x:auto; }
  .stepper { min-width:480px; }
  .items-section { padding:18px 20px; }
  .order-card-footer { padding:14px 20px; flex-wrap:wrap; }
  .btn-refresh, .btn-new-search { flex:1; justify-content:center; }
}