/* Tracking page: form usability and the shipment result layout (cards, timeline, popup) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img{max-width:100%}

/* header: red contact bar + main bar (matches the main website) */
.trk-header{position:sticky;top:0;z-index:1030}
.trk-topbar{background:#e8260a;color:#fff;font-size:15px}
.trk-topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1320px;margin:0 auto;padding:10px 24px}
.trk-topbar a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.trk-topbar a:hover{text-decoration:underline;color:#fff}
.trk-topbar-contact{display:flex;align-items:center;gap:14px;min-width:0}
.trk-topbar-sep{opacity:.8}
.trk-topbar-tag{margin:0;font-weight:500;text-align:right;color:#fff}
.trk-header-main{background:#f1f1f1;border-bottom:1px solid #e2e2e2}
.trk-header-inner{display:flex;align-items:center;gap:28px;max-width:1320px;margin:0 auto;padding:10px 24px}
.trk-logo img{display:block;height:64px;width:auto}
.trk-nav{display:flex;align-items:center;gap:32px;margin-left:auto}
.trk-nav-link{font-size:1.1rem;font-weight:600;color:#1f2933;text-decoration:none}
.trk-nav-link:hover,.trk-nav-link.is-active{color:#e8260a;text-decoration:none}
.trk-header-actions{display:flex;align-items:center;gap:14px}
.trk-search-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:#1f2933;cursor:pointer}
.trk-search-btn:hover{background:#e4e4e4}
.trk-pill{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border-radius:999px;font-weight:700;font-size:1.05rem;text-decoration:none;white-space:nowrap;border:2px solid #e8260a}
.trk-pill-solid{background:#e8260a;color:#fff}
.trk-pill-solid:hover{background:#c71f06;border-color:#c71f06;color:#fff;text-decoration:none}
.trk-pill-outline{background:transparent;color:#e8260a}
.trk-pill-outline:hover{background:#e8260a;color:#fff;text-decoration:none}

/* search form (landing card and popup) */
.trk-form{text-align:center}
.trk-form-title{margin:0 0 8px;font-size:1.9rem;font-weight:700;color:#1f2933}
.trk-form-sub{margin:0 0 20px;color:#52606d;font-size:.95rem}
.trk-form .search-type{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
.trk-form .search-type input[type=radio]{margin:0 2px 0 0!important;vertical-align:middle}
.trk-form .search-type label{display:inline-block;margin:0 10px 0 0;padding:8px 0 8px 2px;white-space:nowrap;cursor:pointer;vertical-align:middle}
.trk-form .form-control{min-height:52px;font-size:16px;text-align:center;border-radius:10px}
.trk-form .form-control.is-invalid{border-color:#dc3545}
.trk-form .help-block:empty{display:none}
.trk-form .help-block{margin-top:6px;text-align:left}
.trk-form .btntrack{display:block;width:100%;min-height:52px;border:0;background:#ff0000;color:#fff;font-size:1.1rem;font-weight:600;cursor:pointer}
.trk-form .btntrack:hover{background:#d90000}
.trk-form .btntrack:disabled{opacity:.7;cursor:wait}
.tracking-alert{margin:8px 0 16px}

/* landing: illustration + search card */
.trk-landing{padding:40px 0 56px}
.trk-landing-card{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:32px;padding:40px 48px;background:#fff;border-radius:20px;box-shadow:0 2px 18px rgba(15,23,42,.08)}
.trk-landing-art svg{display:block;width:100%;max-width:460px;height:auto;margin:0 auto}
.trk-landing-form{max-width:440px;width:100%;margin:0 auto;padding:36px 32px;border:1px solid #dbe3ea;border-radius:16px}

@media (max-width:991.98px){
  .trk-topbar-tag{display:none}
  .trk-topbar-inner{padding:8px 16px;justify-content:center}
  .trk-header-inner{gap:12px;padding:8px 16px}
  .trk-nav{display:none}
  .trk-header-actions{margin-left:auto;gap:8px}
}
@media (max-width:575.98px){
  .trk-topbar{font-size:14px}
  .trk-topbar-sep,.trk-topbar a.trk-topbar-mail{display:none}
  .trk-logo img{height:48px}
  .trk-pill{min-height:40px;padding:0 16px;font-size:.95rem}
  .trk-search-btn{width:40px;height:40px}
}

@media (max-width:767.98px){
  .trk-landing{padding:16px 0 32px}
  .trk-landing-card{grid-template-columns:1fr;gap:8px;padding:20px 14px}
  .trk-landing-art svg{max-width:260px}
  .trk-landing-form{padding:22px 16px;border:0}
  .trk-form-title{font-size:1.5rem}
}
@media (max-width:420px){
  .trk-form .search-type label{font-size:.9rem;margin-right:6px}
}

.checkout-area{margin-top:28px}

/* result: headline + timeline on the left, shipment details on the right */
:root{--trk-accent:#ff6600;--trk-good:#2e9e4f;--trk-bad:#e03131;--trk-ink:#1f2933;--trk-muted:#7b8794;--trk-line:#e4e7eb}
.trk-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start;margin:0 0 32px}
.trk-card{background:#fff;border-radius:16px;box-shadow:0 2px 14px rgba(15,23,42,.08);padding:24px 28px}
.trk-side .trk-card{padding:22px 24px}
.trk-head{padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--trk-line)}
.trk-head-label{margin:0;font-size:1.6rem;font-weight:700;line-height:1.25;color:var(--trk-accent)}
.trk-head.is-good .trk-head-label{color:var(--trk-good)}
.trk-head.is-bad .trk-head-label{color:var(--trk-bad)}
.trk-head-text{margin:6px 0 0;font-size:1.15rem;color:var(--trk-ink)}

.trk-steps{list-style:none;margin:0;padding:0}
.trk-step{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;column-gap:16px;padding-bottom:26px;color:var(--trk-muted)}
.trk-step:last-child{padding-bottom:0}
.trk-step::before{content:"";position:absolute;left:13px;top:30px;bottom:2px;width:2px;background:var(--trk-line)}
.trk-step:last-child::before{display:none}
.trk-step.line-done::before{background:var(--trk-accent)}
.trk-dot{width:28px;height:28px;border-radius:50%;border:2px solid #cfd5dc;background:#fff;box-sizing:border-box;position:relative}
.trk-step.is-done .trk-dot{background:var(--trk-accent);border-color:var(--trk-accent)}
.trk-step.is-done .trk-dot::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.trk-step.is-ndr .trk-dot,.trk-step.is-rto .trk-dot{background:var(--trk-bad);border-color:var(--trk-bad)}
.trk-step.is-ndr .trk-step-title,.trk-step.is-rto .trk-step-title{color:var(--trk-bad)}
.trk-step.is-done .trk-step-title{color:var(--trk-ink)}
.trk-step.is-current .trk-step-title{font-weight:700}
.trk-step-body{min-width:0}
.trk-step-title{display:block;font-size:1.1rem;line-height:28px}
.trk-step-sub{display:block;font-size:.95rem;color:var(--trk-muted);word-break:break-word}
.trk-step-time{font-size:.95rem;color:var(--trk-muted);line-height:28px;white-space:nowrap;text-align:right}
.trk-link{display:inline-block;margin:18px 0 0 44px;padding:6px 0;border:0;background:none;color:#0b66c3;text-decoration:underline;font-size:1rem;cursor:pointer}
.trk-link:hover{color:#084d94}

.trk-card-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;margin:0 0 8px;padding:0;border:0;background:none;text-align:left;cursor:default}
.trk-card-title{font-size:1.2rem;font-weight:700;color:var(--trk-ink)}
.trk-chevron{display:none;width:9px;height:9px;margin:0 6px 4px 0;border:solid var(--trk-ink);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
.trk-card-toggle[aria-expanded=true] .trk-chevron{transform:rotate(-135deg);margin-bottom:-4px}
.trk-details-more>div:first-child{border-top:1px solid #f0f2f4}
/* desktop: details always open */
@media (min-width:992px){.trk-collapse{display:block!important;height:auto!important}}
.trk-card-title i{color:var(--trk-accent);margin-right:8px}
.trk-details{margin:0}
.trk-details>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0}
.trk-details>div+div{border-top:1px solid #f0f2f4}
.trk-details dt{font-weight:400;color:var(--trk-muted)}
.trk-details dd{margin:0;font-weight:600;text-align:right;color:var(--trk-ink);word-break:break-word}

.trk-modal{border:0;border-radius:16px}
.trk-modal .modal-header{border-bottom:0;padding:20px 24px 4px}
.trk-modal .modal-title{font-weight:700}
.trk-modal .modal-body{max-height:65vh;overflow-y:scroll;padding:12px 16px 24px 24px;-webkit-overflow-scrolling:touch}
/* always-visible scrollbar (macOS hides the default one) */
.trk-modal .modal-body::-webkit-scrollbar{width:12px}
.trk-modal .modal-body::-webkit-scrollbar-track{background:#f1f3f5;border-radius:8px}
.trk-modal .modal-body::-webkit-scrollbar-thumb{background:#b3bcc6;border-radius:8px;border:3px solid #f1f3f5}
.trk-modal .modal-body::-webkit-scrollbar-thumb:hover{background:#8b97a4}
@supports not selector(::-webkit-scrollbar){.trk-modal .modal-body{scrollbar-width:auto;scrollbar-color:#b3bcc6 #f1f3f5}}
.trk-log .trk-step{grid-template-columns:28px minmax(0,1fr)}
.trk-log .trk-step-title{font-size:1rem}

.table-margin{width:100%}

@media (max-width:991.98px){
  .trk-layout{grid-template-columns:minmax(0,1fr);gap:16px}
  .trk-side{order:-1}
  .trk-card-toggle{cursor:pointer}
  .trk-chevron{display:inline-block}
  .trk-side .trk-card{padding:16px 18px}
}
@media (max-width:575.98px){
  .checkout-area{margin-top:12px!important}
  .trk-card,.trk-side .trk-card{padding:18px 16px;border-radius:14px}
  .trk-head-label{font-size:1.35rem}
  .trk-head-text{font-size:1.05rem}
  .trk-step{grid-template-columns:28px minmax(0,1fr);column-gap:14px}
  .trk-step-time{grid-column:2;text-align:left;line-height:1.4;white-space:normal;margin-top:2px}
  /* compact: only the current step shows its time (the popup has every scan) */
  .trk-steps:not(.trk-log) .trk-step:not(.is-current) .trk-step-time{display:none}
  .trk-steps:not(.trk-log) .trk-step{padding-bottom:22px}
  .trk-link{margin-left:42px}
  .trk-modal .modal-body{padding:8px 16px 20px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}