/* ══════════════════════════════════════════
   order-status.html — page-specific styles
══════════════════════════════════════════ */
.tracker-wrap { max-width:620px; margin:4rem auto; padding:0 5%; }
    .search-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:2rem 2rem 1.75rem; margin-bottom:1.5rem; }
    .search-row { display:flex; gap:0.75rem; }
    .order-input { flex:1; background:var(--bg-surface); border:2px solid var(--border-color); color:var(--text-primary); padding:0.75rem 1rem; border-radius:var(--radius); font-size:1rem; font-family:'Courier New',monospace; letter-spacing:1px; outline:none; transition:border-color 0.2s; text-transform:uppercase; }
    .order-input::placeholder { text-transform:none; letter-spacing:0; font-family:'Segoe UI',system-ui,sans-serif; }
    .order-input:focus { border-color:var(--purple-bright); }
    .search-btn { padding:0.75rem 1.5rem; background:linear-gradient(135deg,var(--purple-main),var(--purple-bright)); color:white; border:none; border-radius:var(--radius); font-size:0.95rem; font-weight:700; cursor:pointer; transition:var(--transition); white-space:nowrap; display:flex; align-items:center; gap:0.5rem; }
    .search-btn:hover { opacity:0.88; }
    .search-btn:disabled { opacity:0.5; cursor:not-allowed; }

    .result-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); overflow:hidden; display:none; }
    .result-card.visible { display:block; }
    .result-header { padding:1.5rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--border-color); }
    .order-num { font-family:'Courier New',monospace; font-size:1rem; font-weight:700; color:var(--purple-light); letter-spacing:1px; }
    .status-badge { display:inline-flex; align-items:center; gap:0.5rem; padding:0.45rem 1.1rem; border-radius:30px; font-size:0.85rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; }

    .badge-new         { background:rgba(124,77,255,.15);  color:#b39ddb; border:1px solid rgba(124,77,255,.3); }
    .badge-in_progress { background:rgba(255,171,64,.12);  color:#ffab40; border:1px solid rgba(255,171,64,.3); }
    .badge-ready       { background:rgba(0,229,255,.1);    color:#00e5ff; border:1px solid rgba(0,229,255,.25); }
    .badge-completed   { background:rgba(0,230,118,.1);    color:#00e676; border:1px solid rgba(0,230,118,.25); }
    .badge-cancelled   { background:rgba(255,82,82,.1);    color:#ff5252; border:1px solid rgba(255,82,82,.3); }

    /* ── Progress timeline ─────────────────────────────────── */
    .progress-track { padding:1.75rem 2rem 1.5rem; border-bottom:1px solid var(--border-color); }
    .track-steps { display:flex; align-items:flex-start; position:relative; }

    /* Base unfilled connector */
    .track-steps::before {
      content:''; position:absolute; top:21px; left:21px; right:21px;
      height:3px; background:var(--border-color); border-radius:2px;
    }

    /* Animated fill line — width driven by JS */
    .track-fill {
      position:absolute; top:21px; left:21px; height:3px; width:0;
      background:linear-gradient(90deg,var(--purple-main),var(--purple-bright));
      border-radius:2px; box-shadow:0 0 10px rgba(124,77,255,0.45);
      transition:width 0.85s cubic-bezier(0.4,0,0.2,1);
    }

    .track-step { flex:1; text-align:center; position:relative; z-index:1; }
    .step-icon-wrap { position:relative; display:inline-block; margin-bottom:0.6rem; }

    .step-circle {
      width:42px; height:42px; border-radius:50%;
      border:2px solid var(--border-color); background:var(--bg-elevated);
      display:flex; align-items:center; justify-content:center;
      font-size:0.9rem; color:var(--text-muted); transition:all 0.4s ease;
    }
    .step-circle.done    { background:var(--purple-main); border-color:var(--purple-bright); color:white; }
    .step-circle.current {
      background:linear-gradient(135deg,var(--purple-main),var(--purple-bright));
      border-color:var(--purple-bright); color:white;
      box-shadow:0 0 20px rgba(124,77,255,0.6);
      animation:pulse-step 2s ease-in-out infinite;
    }
    /* Spinning activity ring around active step */
    .step-circle.current::after {
      content:''; position:absolute; inset:-5px; border-radius:50%;
      border:2px solid transparent; border-top-color:var(--purple-bright);
      animation:spin-ring 1.4s linear infinite;
    }

    @keyframes pulse-step {
      0%,100% { box-shadow:0 0 16px rgba(124,77,255,0.5); }
      50%      { box-shadow:0 0 32px rgba(124,77,255,0.9); }
    }
    @keyframes spin-ring { to { transform:rotate(360deg); } }

    .step-label { font-size:0.7rem; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:0.5px; line-height:1.3; }
    .step-label.done, .step-label.current { color:var(--text-secondary); }
    .step-label.current { color:var(--purple-light); }

    /* Stage description callout */
    .stage-callout {
      margin-top:1.2rem; padding:0.7rem 0.95rem;
      background:rgba(124,77,255,0.07); border:1px solid rgba(124,77,255,0.2);
      border-radius:var(--radius); font-size:0.83rem; color:var(--text-secondary);
      display:none; align-items:flex-start; gap:0.6rem; line-height:1.45;
    }
    .stage-callout.visible { display:flex; }
    .stage-callout i { color:var(--purple-bright); margin-top:2px; flex-shrink:0; }

    /* Detail rows */
    .result-detail { padding:1.25rem 2rem; }
    .detail-row { display:flex; justify-content:space-between; align-items:center; padding:0.55rem 0; border-bottom:1px solid var(--border-color); font-size:0.88rem; }
    .detail-row:last-child { border-bottom:none; }
    .detail-label { color:var(--text-muted); font-weight:600; }
    .detail-value { color:var(--text-primary); font-weight:600; }

    .error-msg { background:rgba(255,82,82,0.08); border:1px solid rgba(255,82,82,0.25); color:var(--danger); border-radius:var(--radius); padding:0.85rem 1.1rem; font-size:0.9rem; margin-top:0.75rem; display:none; align-items:center; gap:0.5rem; }
    .error-msg.visible { display:flex; }

    .spinner { display:none; width:20px; height:20px; border:2px solid rgba(255,255,255,0.3); border-top-color:white; border-radius:50%; animation:spin 0.7s linear infinite; }
    @keyframes spin { to { transform:rotate(360deg); } }
    .search-btn.loading .spinner { display:block; }
    .search-btn.loading .btn-icon { display:none; }

    /* ── order-status mobile ── */
    @media (max-width: 600px) {
      .tracker-wrap { margin-top: 2rem; }
      .search-card { padding: 1.25rem 1.25rem 1rem; }
      .result-header {
        padding: 1rem 1.25rem;
        flex-wrap: wrap;
        gap: 0.65rem;
      }
      .progress-track { padding: 1.25rem 1rem 1rem; }
      .result-detail { padding: 1rem 1.25rem; }
      .step-label { font-size: 0.62rem; letter-spacing: 0; }
      .step-circle { width: 36px; height: 36px; font-size: 0.8rem; }
      /* Adjust connector line position to match smaller circles */
      .track-steps::before { top: 18px; left: 18px; right: 18px; }
      .track-fill { top: 18px; left: 18px; }
    }

    @media (max-width: 400px) {
      /* Stack the search row on very narrow phones */
      .search-row { flex-direction: column; }
      .search-btn { width: 100%; justify-content: center; }
    }