/* ══════════════════════════════════════════════════
   PROJECT TRACKER — public tracking page + admin
   ══════════════════════════════════════════════════ */

.tracker-page{ padding:140px 22px 100px; max-width:640px; margin:0 auto; }
.tracker-hero{ text-align:center; }
.tracker-hero .section-desc{ max-width:52ch; margin-left:auto; margin-right:auto; }

.tracker-form{
  display:flex; flex-direction:column; gap:14px;
  max-width:360px; margin:32px auto 0; text-align:left;
}
.tracker-field{ display:flex; flex-direction:column; gap:8px; }
.tracker-field span{
  font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--muted); font-family:'Barlow Condensed',sans-serif;
}
.tracker-field input{
  width:100%; color:var(--text); font-family:'Inter',sans-serif; font-size:16px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase;
  padding:14px 16px; outline:none;
  border:1px solid #1f1f1f; border-radius:10px;
  background:rgba(255,255,255,.02);
  transition:border-color .2s, background .2s;
}
.tracker-field input:focus{ border-color:rgba(255,237,84,.4); background:rgba(255,237,84,.03); }
.tracker-field input::placeholder{ color:rgba(255,255,255,.3); text-transform:none; letter-spacing:0; font-weight:400; }

.tracker-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px;
  border:none; border-radius:50px; cursor:pointer;
  background:var(--yellow); color:#000; font-family:inherit;
  font-weight:800; font-size:14px; letter-spacing:1px; text-decoration:none;
  transition:background .2s, opacity .2s;
}
.tracker-btn:hover{ background:#D4C400; }
.tracker-btn:disabled{ opacity:.6; cursor:default; }
.tracker-btn--ghost{
  background:none; border:1px solid var(--border); color:var(--text);
}
.tracker-btn--ghost:hover{ border-color:rgba(255,237,84,.4); color:var(--yellow); background:rgba(255,237,84,.05); }
.tracker-btn--small{ padding:8px 16px; font-size:12px; }

.tracker-error{
  max-width:360px; margin:18px auto 0;
  color:#ef4444; font-size:13px; line-height:1.6; text-align:left;
}

.tracker-result{ margin:40px auto 0; text-align:left; }
.tracker-result-title{
  font-family:'Barlow Condensed',sans-serif; font-size:24px; font-weight:800;
  text-transform:uppercase; margin:0 0 26px; text-align:center;
}

/* Horizontal progress stepper — dots connected left-to-right, stage name
   only (no per-stage description), so the whole path stays scannable
   in one glance instead of a long dimmed-text list. The start/delivery
   dates sit directly above the first/last dot with a dotted connector,
   each reserving the same slot height so every dot still lines up. */
.tracker-hstepper{ display:flex; align-items:flex-start; gap:2px; }
.hstep{ position:relative; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; }

.hstep-date-slot{ height:38px; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.hstep-date-text{
  font-size:9px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:var(--muted); line-height:1.25;
}
.hstep-date-dots{ width:0; height:8px; margin-top:4px; border-left:1px dotted #3a3a3a; }

.hstep-dot-row{ position:relative; width:100%; display:flex; justify-content:center; margin:6px 0 10px; }
.hstep-dot-row::before{
  content:''; position:absolute; top:50%; left:-50%; width:100%; height:2px;
  background:#2a2a2a; transform:translateY(-50%); z-index:0;
}
.hstep:first-child .hstep-dot-row::before{ content:none; }
.hstep-dot{
  width:14px; height:14px; border-radius:50%;
  background:#2a2a2a; border:2px solid #2a2a2a;
  position:relative; z-index:1;
}
.hstep-label{ font-size:10px; font-weight:600; line-height:1.3; color:var(--muted); padding:0 2px; }
.hstep--done .hstep-dot, .hstep--current .hstep-dot{ background:var(--yellow); border-color:var(--yellow); }
.hstep--done .hstep-dot-row::before, .hstep--current .hstep-dot-row::before{ background:var(--yellow); }
.hstep--done .hstep-label{ color:var(--text); }
.hstep--current .hstep-label{ color:var(--yellow); font-weight:700; }
/* Payment note (admin-written) shown under the current stage's own label,
   instead of a separate box elsewhere on the page. */
.hstep-note{
  display:block; margin-top:4px;
  font-size:9px; font-weight:500; line-height:1.3; color:var(--text);
  word-break:break-word;
}

@media (min-width:600px){
  .hstep-date-slot{ height:42px; }
  .hstep-date-text{ font-size:11px; }
  .hstep-dot{ width:16px; height:16px; }
  .hstep-label{ font-size:12px; }
  .hstep-note{ font-size:11px; }
}

/* ── Admin ── */
.tracker-body{ background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; min-height:100vh; }
.tracker-auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.tracker-auth-card{
  width:100%; max-width:340px;
  background:var(--panel); border:1px solid #1f1f1f; border-radius:18px;
  padding:32px 28px; text-align:center;
}
.tracker-auth-title{
  font-family:'Barlow Condensed',sans-serif; font-size:28px; font-weight:900;
  text-transform:uppercase; margin:0 0 22px;
}
.tracker-auth-error{ color:#ef4444; font-size:13px; margin:0 0 16px; }
.tracker-auth-card .tracker-field{ margin-bottom:18px; text-align:left; }
.tracker-auth-card .tracker-btn{ width:100%; }

.tracker-admin-wrap{ max-width:900px; margin:0 auto; padding:48px 22px 100px; }
.tracker-admin-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:32px; flex-wrap:wrap; }
.tracker-notice{
  background:rgba(255,237,84,.08); border:1px solid var(--border); border-radius:10px;
  padding:12px 16px; font-size:13px; margin-bottom:24px;
}
.tracker-admin-section{ margin-bottom:40px; }
.tracker-admin-section h2{
  font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:800;
  text-transform:uppercase; margin:0 0 16px;
}
.tracker-inline-form{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.tracker-inline-form .tracker-field{ flex:1; min-width:220px; }
.tracker-inline-form input{ text-transform:none; letter-spacing:0; font-weight:500; }
.tracker-muted{ color:var(--muted); font-size:14px; }

.tracker-table-wrap{ overflow-x:auto; border:1px solid #1f1f1f; border-radius:14px; }
.tracker-table{ width:100%; border-collapse:collapse; font-size:14px; }
.tracker-table th{
  text-align:left; padding:12px 16px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid #1f1f1f; white-space:nowrap;
}
.tracker-table td{ padding:12px 16px; border-bottom:1px solid #1a1a1a; vertical-align:middle; }
.tracker-table tr:last-child td{ border-bottom:none; }
.tracker-code{ font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:1px; color:var(--yellow); white-space:nowrap; }
.tracker-stage-form select{
  background:rgba(255,255,255,.03); color:var(--text); border:1px solid #1f1f1f; border-radius:8px;
  padding:8px 10px; font-family:inherit; font-size:13px;
}
/* Native dropdown popups don't inherit the select's background — set it
   explicitly on the options too, or unselected rows render white-on-white. */
.tracker-stage-form select option{
  background:#161616; color:var(--text);
}
.tracker-note-form{ display:flex; flex-direction:column; gap:8px; min-width:220px; }
.tracker-note-form textarea{
  width:100%; resize:vertical; min-height:44px;
  background:rgba(255,255,255,.03); color:var(--text); border:1px solid #1f1f1f; border-radius:8px;
  padding:8px 10px; font-family:inherit; font-size:13px; line-height:1.5;
}
.tracker-note-form textarea::placeholder{ color:rgba(255,255,255,.3); }
.tracker-note-form .tracker-btn{ align-self:flex-start; }
.tracker-date-form{ display:flex; align-items:center; gap:8px; }
.tracker-date-form input[type="date"]{
  color-scheme:dark;
  background:rgba(255,255,255,.03); color:var(--text); border:1px solid #1f1f1f; border-radius:8px;
  padding:8px 10px; font-family:inherit; font-size:13px;
}

@media (max-width:480px){
  .tracker-page{ padding-top:120px; }
}