/* ---------------------------------------------------------------------------
   Live shipment tracking — the rendered output of assets/js/tracking.js.
   
   Shared on purpose. These rules used to live only in portal.css, which meant
   the public tracking page could not exist without either duplicating them or
   loading the whole portal stylesheet over the marketing one. Both the portal
   (includes/header.php) and the public page (track.php) load this file, so the
   panel cannot drift into looking like two different products.
   --------------------------------------------------------------------------- */

.badge-track-delivered {
    background: #e8f5e9;
    color: #2e7d32;
    font-weight: 600;
}

.badge-track-transit {
    background: #fff3e0;
    color: #e65100;
    font-weight: 600;
}

.badge-track-ofd {
    background: #fff8e1;
    color: #f57f17;
    font-weight: 600;
}

.badge-track-booked {
    background: #e3f2fd;
    color: var(--primary-blue, #DC3A28);
    font-weight: 600;
}

.badge-track-default {
    background: #f5f5f5;
    color: #555;
    font-weight: 600;
}

.badge-track-delivered { background: #d4edda; color: #155724; }

.badge-track-ofd { background: #ffe8cc; color: #a25b00; }

.badge-track-transit { background: var(--primary-tint, #FDECE9); color: var(--primary-blue, #DC3A28); }

.badge-track-booked { background: #fff3cd; color: #856404; }

.badge-track-default { background: var(--gray-200, #EAE3DA); color: var(--gray-700, #3A3F46); }

.track-empty {
    text-align: center;
    padding: 60px 20px;
    color: #888;
}

.track-empty span {
    font-size: 3rem;
    display: block;
    margin-bottom: 16px;
}

.track-status-header {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.track-status-header h3 {
    font-family: var(--font-display, 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif);
    font-size: 1.2rem;
    color: var(--primary-dark, #22262C);
    margin-bottom: 4px;
}

.track-status-header .tracking-number {
    font-size: 0.95rem;
    color: #666;
}

.track-status-badge {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.track-status-badge.in-transit {
    background: #fff3e0;
    color: #e65100;
}

.track-details {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    margin-bottom: 24px;
}

.track-details h4 {
    font-family: var(--font-display, 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif);
    font-size: 1.1rem;
    color: var(--primary-dark, #22262C);
    margin-bottom: 20px;
}

.track-timeline {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}

.track-timeline h4 {
    font-family: var(--font-display, 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif);
    font-size: 1.1rem;
    color: var(--primary-dark, #22262C);
    margin-bottom: 24px;
}

.timeline {
    position: relative;
    padding-left: 40px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #e0e0e0;
}

.timeline-step {
    position: relative;
    padding-bottom: 30px;
}

.timeline-step:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -33px;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e0e0e0;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #e0e0e0;
}

.timeline-step.completed .timeline-dot {
    background: var(--primary-blue, #DC3A28);
    box-shadow: 0 0 0 2px var(--primary-blue, #DC3A28);
}

.timeline-step.active .timeline-dot {
    background: var(--accent-orange, #DC3A28);
    box-shadow: 0 0 0 2px var(--accent-orange, #DC3A28), 0 0 0 6px rgba(245,166,35,0.2);
}

.timeline-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary-dark, #22262C);
    margin-bottom: 4px;
}

.timeline-step.pending .timeline-title {
    color: #bbb;
}

.timeline-meta {
    font-size: 0.85rem;
    color: #888;
}

.timeline-step.pending .timeline-meta {
    color: #ccc;
}

.timeline-location {
    font-size: 0.85rem;
    color: var(--primary-blue, #DC3A28);
    margin-top: 2px;
}

.timeline-step.pending .timeline-location {
    color: #ccc;
}

    .track-status-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .track-page-hero {
        padding: 40px 0 35px;
    }

    .track-page-hero .track-form {
        flex-direction: column;
        gap: 12px;
        padding: 0 10px;
    }

    .track-page-hero .track-form .track-input {
        border-radius: 5px;
    }

    .track-page-hero .track-form .btn {
        border-radius: 5px;
    }


/* The panel's summary grid. Scoped to #trackResultsArea on purpose: portal.css
   has its own .detail-label / .detail-value for the request detail view, and
   these must not reach across and restyle that. */
#trackResultsArea .details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px 22px;
}
#trackResultsArea .detail-item { display: flex; flex-direction: column; gap: 2px; }
#trackResultsArea .detail-label {
    font-size: .75rem;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--gray-500, #6E7480);
}
#trackResultsArea .detail-value {
    font-size: .98rem;
    color: var(--primary-dark, #22262C);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   The signed-out tracker on the app host (portal-track.php).

   app.indiarabbit.com/track has to render for somebody with no session — the
   recipient of a parcel, usually. There is no portal chrome to hang it on and
   no marketing header either, so it gets its own small shell. Deliberately
   plain: one card, the brand, and a way back to the sign-in page.

   Every colour carries a literal fallback because this file is loaded next to
   two different stylesheets and cannot assume either one's variables.
   --------------------------------------------------------------------------- */

.track-standalone-body {
    background: var(--gray-50, #f6f7f9);
    margin: 0;
}

.track-standalone {
    max-width: 720px;
    margin: 0 auto;
    padding: 34px 20px 60px;
}

.track-standalone-head {
    text-align: center;
    margin-bottom: 24px;
}

.track-standalone-head .brand-lockup {
    width: 168px;
    height: auto;
}

.track-standalone-head h1 {
    margin: 12px 0 6px;
    font-size: 1.6rem;
    color: var(--gray-900, #22262c);
}

.track-standalone-head p {
    margin: 0;
    color: var(--gray-500, #6b7280);
    font-size: .95rem;
}

.track-standalone-card {
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.track-standalone-card #trackInput {
    padding: 12px 14px;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 10px;
    font: inherit;
    min-width: 0;
}

.track-standalone-foot {
    text-align: center;
    margin: 22px 0 0;
    color: var(--gray-500, #6b7280);
    font-size: .92rem;
}

/* Loaded beside both stylesheets, and only one of them defines this. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}