.tracking-page { --navy:#071b33; --blue:#1769e0; --blue-dark:#0e4fae; --ink:#132238; --muted:#66758a; --line:#dfe6ef; --soft:#f4f7fb; background:#f7f9fc; color:var(--ink); overflow:hidden; }
.tracking-page * { box-sizing:border-box; }
.tracking-page .container { max-width:1220px; }
.tracking-hero { min-height:360px; position:relative; display:flex; align-items:center; background:url('../img/bg/tracking_bg.jpg') center/cover no-repeat; color:#fff; }
.tracking-hero__overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,21,42,.94),rgba(4,34,68,.73) 55%,rgba(4,34,68,.35)); }
.tracking-hero__content { position:relative; z-index:1; padding-top:35px; padding-bottom:75px; }
.tracking-eyebrow,.section-heading>div>span { margin:0 0 10px; color:#75aefb; font-size:13px; line-height:1; font-weight:800; letter-spacing:1.7px; text-transform:uppercase; }
.tracking-hero h1 { color:#fff; font-size:clamp(38px,4.2vw,54px); line-height:1.06; letter-spacing:-1.4px; margin:0 0 18px; text-transform:none; }
.tracking-hero h1 span { color:#8ec0ff; }
.tracking-hero__content>p:last-child { max-width:650px; margin:0; color:#dbe9fb; font-size:17px; line-height:1.7; }
.tracking-shell { padding:0 0 72px; }
.tracking-search-card { position:relative; z-index:3; margin:-55px 0 42px; background:#fff; border:1px solid rgba(15,53,91,.08); border-radius:16px; box-shadow:0 18px 48px rgba(8,31,61,.14); padding:26px 30px 24px; }
.tracking-search-card label { display:block; margin-bottom:10px; font-size:15px; font-weight:700; color:var(--ink); }
.tracking-search-row { display:flex; gap:12px; }
.tracking-input-wrap { position:relative; flex:1; }
.tracking-input-wrap i { position:absolute; left:18px; top:50%; transform:translateY(-50%); color:#7890ad; }
.tracking-input-wrap input { width:100%; height:56px; border:1px solid #cbd6e4; border-radius:9px; padding:0 18px 0 50px; font-size:16px; color:var(--ink); outline:none; transition:.2s; }
.tracking-input-wrap input:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(23,105,224,.12); }
.tracking-submit,.tracking-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:0; border-radius:9px; font-weight:700; transition:.2s; cursor:pointer; }
.tracking-submit { min-width:190px; height:56px; padding:0 25px; background:var(--blue); color:#fff; }
.tracking-submit:hover,.tracking-btn--primary:hover { background:var(--blue-dark); color:#fff; transform:translateY(-1px); }
.tracking-submit:disabled { opacity:.72; cursor:wait; }
.tracking-form-meta { display:flex; justify-content:space-between; margin-top:9px; color:var(--muted); }
.tracking-error { color:#b42318; }
.tracking-empty-state { max-width:720px; margin:18px auto 15px; padding:58px 28px; border:1px solid var(--line); border-radius:16px; background:#fff; text-align:center; box-shadow:0 8px 28px rgba(12,43,77,.06); }
.state-icon,.card-icon { display:inline-flex; width:58px; height:58px; align-items:center; justify-content:center; border-radius:14px; background:#eaf3ff; color:var(--blue); font-size:24px; }
.tracking-empty-state h2 { margin:20px 0 10px; font-size:26px; color:var(--ink); text-transform:none; }
.tracking-empty-state p { margin:0 auto; color:var(--muted); font-size:15px; line-height:1.7; }
.tracking-not-found .state-icon { background:#fff0ef; color:#c43d35; }
.tracking-not-found .state-secondary { margin-top:2px; }
.searched-number { margin:22px auto; padding:12px 18px; max-width:380px; border-radius:8px; background:var(--soft); overflow-wrap:anywhere; }
.searched-number span { display:block; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.8px; }
.searched-number strong { display:block; margin-top:2px; }
.state-actions { display:flex; justify-content:center; gap:10px; }
.tracking-btn { padding:12px 18px; font-size:14px; }
.tracking-btn--primary { background:var(--blue); color:#fff; }
.tracking-btn--outline { border:1px solid #c8d4e3; background:#fff; color:var(--ink); }
.tracking-btn--outline:hover { border-color:var(--blue); color:var(--blue); }
.tracking-btn--block { width:100%; }
.shipment-found { display:flex; align-items:center; gap:13px; margin-bottom:18px; padding:15px 18px; border:1px solid #b8e4ce; border-radius:11px; background:#edf9f3; color:#176840; }
.shipment-found i { font-size:22px; }.shipment-found strong,.shipment-found span { display:block; }.shipment-found span { margin-top:1px; font-size:13px; color:#3d765b; }
.tracking-card { border:1px solid var(--line); border-radius:14px; background:#fff; padding:25px; box-shadow:0 7px 24px rgba(14,42,72,.055); }
.shipment-summary { margin-bottom:22px; }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:22px; }
.section-heading h2,.tracking-side-column h2 { margin:0; color:var(--ink); font-size:21px; line-height:1.25; text-transform:none; }
.copy-button { border:1px solid var(--line); border-radius:7px; background:#fff; color:#49617d; padding:7px 11px; font-size:12px; cursor:pointer; }
.summary-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; }
.summary-grid>div { min-width:0; padding:4px 19px; border-left:1px solid var(--line); }
.summary-grid>div:first-child { border-left:0; padding-left:0; }
.summary-grid span,.details-card dt,.partner-card dt { display:block; margin-bottom:7px; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.summary-grid strong { color:var(--ink); font-size:15px; }
.status-badge { display:inline-flex!important; width:max-content; margin:0!important; border-radius:999px; padding:6px 10px; font-size:12px!important; letter-spacing:0!important; text-transform:none!important; }
.status-badge--primary { color:#1458ad!important; background:#e8f1ff; }.status-badge--success { color:#127044!important; background:#e4f7ed; }.status-badge--warning { color:#905410!important; background:#fff1da; }.status-badge--danger { color:#a72b25!important; background:#ffebe9; }
.tracking-result-grid { display:grid; grid-template-columns:minmax(0,2.15fr) minmax(280px,1fr); gap:22px; align-items:start; }
.tracking-main-column,.tracking-side-column { display:grid; gap:22px; min-width:0; }
.shipment-progress { display:grid; grid-template-columns:repeat(4,1fr); margin:30px 0 8px; padding:0; list-style:none; }
.shipment-progress li { position:relative; min-width:0; text-align:center; color:#8b98a9; }
.shipment-progress li:before { content:""; position:absolute; top:22px; right:50%; width:100%; height:3px; background:#dce4ed; z-index:0; }
.shipment-progress li:first-child:before { display:none; }
.progress-marker { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:46px; height:46px; margin:0 auto 10px; border:3px solid #dce4ed; border-radius:50%; background:#fff; font-size:15px; }
.shipment-progress li.is-complete:before,.shipment-progress li.is-current:before { background:var(--blue); }.shipment-progress .is-complete .progress-marker,.shipment-progress .is-current .progress-marker { border-color:var(--blue); background:var(--blue); color:#fff; }.shipment-progress .is-current .progress-marker { box-shadow:0 0 0 6px rgba(23,105,224,.12); }
.shipment-progress strong,.shipment-progress small { display:block; overflow-wrap:anywhere; }.shipment-progress strong { font-size:13px; }.shipment-progress small { margin-top:4px; font-size:11px; color:var(--muted); }
.progress-notice { margin:20px 0 0; border-radius:8px; padding:10px 12px; background:#fff5e6; color:#89520e; font-size:13px; }
.event-count { border-radius:999px; padding:5px 9px; background:var(--soft); color:var(--muted); font-size:12px; }
.tracking-timeline { margin:0; padding:0; list-style:none; }
.tracking-timeline li { display:grid; grid-template-columns:120px 24px 1fr; gap:15px; position:relative; min-height:112px; }
.tracking-timeline li:not(:last-child):after { content:""; position:absolute; left:146px; top:25px; bottom:-5px; width:2px; background:#dbe4ee; }
.timeline-date { text-align:right; padding-top:2px; }.timeline-date strong,.timeline-date span { display:block; }.timeline-date strong { font-size:13px; }.timeline-date span { margin-top:3px; color:var(--muted); font-size:12px; }
.timeline-dot { position:relative; z-index:1; width:14px; height:14px; margin:4px auto 0; border:3px solid #fff; border-radius:50%; background:#93a4b8; box-shadow:0 0 0 2px #93a4b8; }
.is-latest .timeline-dot { background:var(--blue); box-shadow:0 0 0 2px var(--blue),0 0 0 7px rgba(23,105,224,.11); }
.timeline-content { padding:0 0 28px; }.timeline-content h3 { margin:0 0 7px; color:var(--ink); font-size:16px; text-transform:none; }.timeline-content p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.55; }.timeline-location i { width:16px; color:var(--blue); }
.history-empty { display:flex; gap:11px; padding:15px; border-radius:9px; background:var(--soft); color:var(--muted); }.history-empty p { margin:0; }.history-empty i { color:var(--blue); margin-top:4px; }
.partner-card { border-top:4px solid var(--blue); }.partner-card .card-icon,.help-card .card-icon { width:44px; height:44px; margin-bottom:15px; font-size:18px; }.partner-card dl,.details-card dl { margin:20px 0; }.partner-card dl>div,.details-card dl>div { padding:11px 0; border-bottom:1px solid #edf1f5; }.partner-card dd,.details-card dd { margin:0; color:var(--ink); font-size:14px; font-weight:700; }.partner-card dt,.details-card dt { margin:0 0 4px; }
.details-card dl { margin-bottom:0; }.details-card dl>div { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }.details-card dd { text-align:right; }
.help-card { background:var(--navy); color:#fff; }.help-card h2 { color:#fff; }.help-card p { margin:12px 0 18px; color:#c3d0df; font-size:14px; line-height:1.65; }.help-card .tracking-btn--outline { border-color:#54708f; background:transparent; color:#fff; }
.breakable { overflow-wrap:anywhere; word-break:break-word; }
.useful-services { padding:65px 0 75px; background:#fff; }.service-card-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }.service-card-grid>a { display:grid; grid-template-columns:42px 1fr 18px; align-items:center; gap:13px; min-width:0; border:1px solid var(--line); border-radius:12px; padding:19px; color:var(--ink); transition:.2s; }.service-card-grid>a:hover { border-color:#9dbce4; box-shadow:0 9px 24px rgba(20,65,110,.09); transform:translateY(-2px); }.service-card-grid>a>i:first-child { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; background:#eaf3ff; color:var(--blue); }.service-card-grid strong,.service-card-grid small { display:block; }.service-card-grid small { margin-top:4px; color:var(--muted); font-size:12px; line-height:1.45; }.service-card-grid>a>i:last-child { color:#8aa0b8; font-size:12px; }
.tracking-page-body .footer-wrap { background:#071b33!important; padding-top:70px!important; }.tracking-page-body .copyright-text p { margin:0; }
@media (max-width:991px) { .summary-grid { grid-template-columns:repeat(3,1fr); row-gap:18px; }.summary-grid>div:nth-child(4) { border-left:0; padding-left:0; }.tracking-result-grid { grid-template-columns:1fr; }.tracking-side-column { grid-template-columns:repeat(2,minmax(0,1fr)); }.partner-card { grid-row:span 2; }.service-card-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px) { .tracking-hero { min-height:280px; }.tracking-hero__content { padding:35px 20px 70px; }.tracking-hero h1 { font-size:36px; }.tracking-hero__content>p:last-child { font-size:15px; }.tracking-shell { padding-bottom:48px; }.tracking-search-card { margin:-42px 5px 30px; padding:20px; }.tracking-search-row { flex-direction:column; }.tracking-submit { width:100%; }.tracking-form-meta { display:block; }.tracking-error { display:block; margin-top:4px; }.tracking-card { padding:20px; }.summary-grid { grid-template-columns:1fr 1fr; }.summary-grid>div { border-left:0; padding:7px 10px 7px 0; }.tracking-side-column { grid-template-columns:1fr; }.shipment-progress { grid-template-columns:1fr; margin:20px 0 0; padding-left:4px; }.shipment-progress li { display:grid; grid-template-columns:46px 1fr; column-gap:14px; min-height:75px; text-align:left; }.shipment-progress li:before { left:22px; top:-28px; width:3px; height:32px; }.shipment-progress li:first-child:before { display:none; }.progress-marker { grid-row:1/3; margin:0; }.shipment-progress strong { align-self:center; font-size:14px; }.tracking-timeline li { grid-template-columns:24px 1fr; gap:13px; padding-bottom:25px; }.timeline-date { grid-column:2; grid-row:2; text-align:left; padding:0; }.timeline-date strong,.timeline-date span { display:inline; margin-right:7px; }.timeline-dot { grid-column:1; grid-row:1/3; }.timeline-content { grid-column:2; grid-row:1; padding:0; }.tracking-timeline li:not(:last-child):after { left:11px; top:20px; bottom:-2px; }.service-card-grid { grid-template-columns:1fr; }.useful-services { padding:48px 0; }.state-actions { flex-direction:column; }.tracking-btn { width:100%; } }
@media (max-width:430px) { .tracking-hero h1 { font-size:31px; }.tracking-search-card { margin-left:0; margin-right:0; border-radius:12px; }.summary-grid { grid-template-columns:1fr; }.section-heading { align-items:flex-start; }.copy-button { white-space:nowrap; }.tracking-card { border-radius:12px; }.tracking-empty-state { padding:42px 18px; } }