@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
.track-back{font-weight:700;text-decoration:none}.track-page{min-height:calc(100vh - 170px);padding:80px 20px}.track-hero{max-width:820px;margin:0 auto;text-align:center}.track-hero h1{font-size:clamp(42px,7vw,76px);margin:10px 0}.track-hero h1 em{font-style:normal}.track-hero p{max-width:650px;margin:0 auto 35px;color:#687168;font-size:17px;line-height:1.9}.track-search{background:#fff;border:1px solid #dfe5df;border-radius:22px;padding:24px;text-align:right;box-shadow:0 18px 60px rgba(20,35,25,.08)}.track-search label{display:block;font-weight:700;margin-bottom:10px}.track-input-row{display:flex;gap:12px}.track-input-row input{flex:1;min-width:0;border:1px solid #ccd5ce;border-radius:12px;padding:15px 16px;font:inherit;direction:ltr;text-align:left;outline:none}.track-input-row input:focus{border-color:#52675a;box-shadow:0 0 0 3px rgba(82,103,90,.1)}.track-input-row button{min-width:170px}.track-search small{display:block;margin-top:9px;color:#89938b}.track-results{max-width:900px;margin:35px auto 0}.track-empty,.track-error{background:#fff;border:1px solid #dfe5df;border-radius:18px;padding:24px;text-align:center;color:#657068}.track-list{display:grid;gap:18px}.track-card{background:#fff;border:1px solid #dfe5df;border-radius:22px;padding:22px;box-shadow:0 12px 35px rgba(20,35,25,.06)}.track-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;border-bottom:1px solid #edf0ed;padding-bottom:16px}.track-card-head h3{margin:0 0 6px;font-size:18px}.track-date{color:#7a847d;font-size:13px}.status-pill{padding:8px 12px;border-radius:999px;background:#eef3ef;font-size:13px;font-weight:700;white-space:nowrap}.track-total{font-size:19px;font-weight:700;margin-top:4px}.track-items{display:grid;gap:12px;margin-top:18px}.track-item{display:flex;justify-content:space-between;gap:15px;padding:12px 0}.track-item-main{display:flex;gap:12px;align-items:center}.track-item img{width:58px;height:58px;object-fit:cover;border-radius:12px;background:#f2f4f1}.track-item-name{font-weight:700}.track-item-meta{font-size:12px;color:#7a847d;margin-top:4px}.track-item-price{font-weight:700;white-space:nowrap}.track-timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:24px}.timeline-step{position:relative;text-align:center;color:#929b94;font-size:11px;font-weight:700}.timeline-dot{width:12px;height:12px;border-radius:50%;background:#d7ddd8;margin:0 auto 7px;position:relative;z-index:2}.timeline-step.done{color:#25352b}.timeline-step.done .timeline-dot{background:#25352b}.timeline-step.current .timeline-dot{box-shadow:0 0 0 5px #e6ece7}.timeline-line{height:2px;background:#d7ddd8;position:absolute;top:5px;right:50%;left:-50%;z-index:1}.timeline-step:first-child .timeline-line{display:none}.timeline-step.done:not(:first-child) .timeline-line{background:#25352b}@media(max-width:650px){.track-page{padding:50px 14px}.track-input-row{flex-direction:column}.track-input-row button{width:100%}.track-card-head{flex-direction:column}.track-timeline{grid-template-columns:1fr 1fr 1fr;gap:12px}.timeline-line{display:none}.track-item{align-items:flex-start}.track-item-price{font-size:13px}}

/* CARTEL tracking mobile QA */
@media(max-width:700px){
 .track-page,.track-wrap,.track-card{max-width:100%;box-sizing:border-box}.track-wrap{padding-left:12px!important;padding-right:12px!important}.track-card{padding:18px!important}.track-form{display:flex;flex-direction:column;gap:10px}.track-form input,.track-form button{width:100%;min-height:50px;box-sizing:border-box;font-size:16px}.track-order-head{align-items:flex-start;flex-direction:column}.track-meta{line-height:1.7}.track-items{word-break:break-word}
}

/* CARTEL bilingual typography */
html[lang="ar"] body, html[lang="ar"] button, html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] select { font-family: "IBM Plex Sans Arabic", Arial, Tahoma, sans-serif; }
html[lang="en"] body, html[lang="en"] button, html[lang="en"] input, html[lang="en"] textarea, html[lang="en"] select { font-family: "IBM Plex Sans", Arial, Tahoma, sans-serif; }
html[lang="en"] .eyebrow, html[lang="en"] .ticker, html[lang="en"] .hero-tagline, html[lang="en"] .cat-card small { letter-spacing: .045em; }