.track-section{background: var(--bg-soft)}.track-form{max-width: 760px;margin: 0 auto}.track-input{display: flex;align-items: center;gap: 10px;background: var(--surface);border-radius: 60px;padding: 8px;border: 2px solid var(--border);box-shadow: var(--shadow);transition: border-color .3s}.track-input:focus-within{border-color: var(--gold)}.track-input > i{color: var(--heading);font-size: 22px;padding-inline-start: 16px}.track-input input{flex: 1;min-width: 0;border: none;outline: none;font-size: 17px;font-weight: 700;color: var(--heading);background: none;height: 50px;letter-spacing: .5px;font-family: 'Montserrat','Cairo',sans-serif}.track-input input::placeholder{color: var(--subtle);font-weight: 500;font-family: 'Cairo',sans-serif;letter-spacing: 0}.track-input .btn{height: 52px;padding: 0 30px}.track-input .btn .spinner{display: none;width: 18px;height: 18px;border: 3px solid rgba(2,54,76,.25);border-top-color: var(--navy);border-radius: 50%;animation: spin .7s linear infinite}.track-input .btn.loading .spinner{display: inline-block}.track-input .btn.loading .label,.track-input .btn.loading .fa-magnifying-glass{display: none}.track-samples{text-align: center;margin-top: 16px;font-size: 14px;color: var(--muted);display: flex;flex-wrap: wrap;gap: 8px;justify-content: center;align-items: center}.track-samples button{border: 1px dashed rgba(2,54,76,.3);background: var(--surface);color: var(--heading);border-radius: 30px;padding: 4px 14px;font-size: 13px;font-weight: 700;cursor: pointer;font-family: 'Montserrat',sans-serif;transition: .3s}.track-samples button:hover{background: var(--navy);color: var(--gold);border-style: solid}.track-form.shake{animation: shake .35s}@keyframes shake{0%,100%{transform: translateX(0)}20%,60%{transform: translateX(-5px)}40%,80%{transform: translateX(5px)}}.track-msg{max-width: 760px;margin: 18px auto 0;padding: 14px 18px;border-radius: 12px;font-weight: 600;font-size: 14px;display: flex;gap: 10px;align-items: flex-start;animation: heroUp .3s ease}.track-msg.err{background: var(--danger-bg);color: var(--danger);border: 1px solid var(--danger-border)}.track-msg a{text-decoration: underline;font-weight: 800}.track-msg i{margin-top: 4px}.track-result{max-width: 1000px;margin: 34px auto 0;background: var(--surface);border-radius: 16px;overflow: hidden;box-shadow: var(--shadow);border: 1px solid var(--border)}.track-result.animate{animation: heroUp .4s ease}.tr-head{display: flex;justify-content: space-between;align-items: center;gap: 16px;flex-wrap: wrap;padding: 22px 28px;color: #fff;background: var(--navy-dark)}.tr-id{display: flex;align-items: center;gap: 14px}.tr-id small{display: block;opacity: .75;font-size: 13px}.tr-id strong{font-family: 'Montserrat',sans-serif;font-size: 22px;letter-spacing: 1px;direction: ltr;display: inline-block}.tr-mode{width: 52px;height: 52px;border-radius: 14px;display: grid;place-items: center;font-size: 22px;color: var(--navy);background: var(--gold)}.tr-status{display: inline-flex;align-items: center;gap: 8px;padding: 8px 18px;border-radius: 30px;font-weight: 800;font-size: 14px;background: rgba(34,169,204,.15);color: var(--gold);border: 1px solid rgba(34,169,204,.5)}.tr-status.done{background: rgba(31,157,90,.15);color: var(--success-light);border-color: rgba(31,157,90,.5)}.tr-route{display: grid;grid-template-columns: auto 1fr auto;align-items: center;gap: 20px;padding: 30px 28px 10px}.tr-point{display: flex;align-items: center;gap: 10px;max-width: 220px}.tr-point > i{font-size: 24px;color: var(--heading)}.tr-point.end > i{color: var(--gold-2)}.tr-point small{display: block;color: var(--muted);font-size: 12px}.tr-point b{color: var(--heading);font-size: 15px;line-height: 1.4}.tr-line{position: relative;height: 8px;border-radius: 10px;background: repeating-linear-gradient(90deg,var(--border) 0 12px,transparent 12px 20px)}.tr-line-fill{position: absolute;inset-block: 0;inset-inline-start: 0;width: 0;border-radius: 10px;background: var(--gold);animation: fillTo 1.2s ease .2s forwards}@keyframes fillTo{to{width: var(--p)}}.tr-vehicle{position: absolute;top: 50%;inset-inline-start: 0;width: 44px;height: 44px;margin-inline-start: -22px;margin-top: -22px;border-radius: 50%;background: var(--navy);color: var(--gold);display: grid;place-items: center;font-size: 18px;box-shadow: 0 0 0 4px var(--surface);animation: moveTo 1.2s ease .2s forwards}html[dir="rtl"] .tr-vehicle i{transform: scaleX(-1)}@keyframes moveTo{to{inset-inline-start: var(--p)}}.tr-steps{display: flex;justify-content: space-between;padding: 30px 28px 10px;gap: 6px}.tr-step{flex: 1;text-align: center;opacity: 0;animation: stepIn .3s ease forwards;animation-delay: calc(.2s + var(--i) * .06s)}@keyframes stepIn{from{opacity: 0}to{opacity: 1}}.tr-step span{width: 46px;height: 46px;margin: 0 auto 8px;border-radius: 50%;display: grid;place-items: center;font-size: 17px;background: var(--bg-soft);color: var(--subtle);position: relative;transition: .3s}.tr-step em{font-style: normal;font-size: 13px;font-weight: 700;color: var(--subtle)}.tr-step.done span{background: var(--success);color: #fff}.tr-step.done em{color: var(--heading)}.tr-step.current span{background: var(--gold);color: var(--navy);box-shadow: 0 0 0 4px rgba(34,169,204,.25)}.tr-step.current em{color: var(--gold-2)}.tr-info{display: grid;grid-template-columns: repeat(4,1fr);gap: 14px;padding: 20px 28px}.tr-info > div{background: var(--bg-soft);border-radius: 14px;padding: 16px;border: 1px solid var(--border);opacity: 0;animation: stepIn .3s ease forwards;animation-delay: calc(.3s + var(--i) * .05s)}.tr-info i{color: var(--gold-2);font-size: 20px;margin-bottom: 6px;display: block}.tr-info small{display: block;color: var(--muted);font-size: 12px}.tr-info b{color: var(--heading);font-size: 15px}.tr-history{padding: 10px 28px 10px}.tr-history h4{color: var(--heading);font-size: 17px;font-weight: 800;margin-bottom: 14px;display: flex;gap: 8px;align-items: center}.tr-history ul{position: relative;padding-inline-start: 26px}.tr-history ul::before{content: '';position: absolute;top: 6px;bottom: 6px;inset-inline-start: 7px;width: 2px;background: var(--border)}.tr-history li{position: relative;padding-bottom: 18px;opacity: 0;animation: stepIn .3s ease forwards;animation-delay: calc(.4s + var(--i) * .05s)}.tr-history .dot{position: absolute;inset-inline-start: -26px;top: 5px;width: 16px;height: 16px;border-radius: 50%;background: var(--surface);border: 3px solid var(--subtle)}.tr-history li.latest .dot{border-color: var(--gold);background: var(--gold)}.tr-history b{color: var(--heading);display: block;font-size: 15px}.tr-history small{color: var(--muted);font-size: 13px}.tr-history small i{color: var(--gold-2)}.tr-actions{display: flex;gap: 12px;flex-wrap: wrap;padding: 16px 28px 28px;border-top: 1px solid var(--border);margin-top: 6px}.tr-actions .btn{padding: 11px 22px;font-size: 14px}.tr-actions .btn.copied{background: var(--success);border-color: var(--success);color: #fff}@media (max-width: 768px){.tr-route{grid-template-columns: 1fr;gap: 14px}.tr-point{max-width: none}.tr-line{margin: 10px 22px}.tr-info{grid-template-columns: 1fr 1fr}.tr-step em{font-size: 11px}.tr-step span{width: 38px;height: 38px;font-size: 14px}}@media (max-width: 520px){.track-input{border-radius: 18px;flex-wrap: wrap;padding: 10px}.track-input > i{display: none}.track-input input{flex-basis: 100%;padding: 0 10px;font-size: 15px}.track-input .btn{width: 100%}.tr-head,.tr-route,.tr-steps,.tr-info,.tr-history,.tr-actions{padding-inline: 16px}.tr-steps{gap: 2px}.tr-step span{width: 32px;height: 32px;font-size: 12px}.tr-step em{font-size: 9.5px}.tr-info{grid-template-columns: 1fr}.tr-actions .btn{flex: 1 1 100%}}@media print{body *{visibility: hidden}.track-result,.track-result *{visibility: visible}.track-result{position: absolute;top: 0;left: 0;right: 0;box-shadow: none}.tr-actions{display: none}.tr-step,.tr-info > div,.tr-history li{opacity: 1 !important;animation: none !important}.tr-line-fill{width: var(--p) !important}.tr-vehicle{inset-inline-start: var(--p) !important}}.tr-head-side{display: flex;flex-direction: column;align-items: flex-end;gap: 8px}html[dir="rtl"] .tr-head-side{align-items: flex-start}.tr-live{display: inline-flex;align-items: center;gap: 7px;font-size: 12px;color: var(--on-dark-muted)}.tr-live i{width: 8px;height: 8px;border-radius: 50%;background: var(--success-light);box-shadow: 0 0 0 0 rgba(95,208,143,.7);animation: livePulse 1.8s infinite}@keyframes livePulse{0%{box-shadow: 0 0 0 0 rgba(95,208,143,.7)}70%{box-shadow: 0 0 0 8px rgba(95,208,143,0)}100%{box-shadow: 0 0 0 0 rgba(95,208,143,0)}}.tr-ref{display: block;font-style: normal;font-size: 12.5px;color: var(--on-dark-muted);margin-top: 3px;direction: ltr;text-align: start}html[dir="rtl"] .tr-ref{text-align: right}.tr-ref i{color: var(--gold);margin-inline-end: 4px}.tr-summary{display: flex;align-items: center;justify-content: space-between;gap: 14px;flex-wrap: wrap;padding: 18px 28px 0}.tr-progress{display: flex;align-items: center;gap: 12px;flex: 1 1 260px}.tr-progress span{font-size: 13px;font-weight: 700;color: var(--muted);white-space: nowrap}.tr-progress .bar{flex: 1;height: 10px;border-radius: 10px;background: var(--bg-soft);border: 1px solid var(--border);overflow: hidden}.tr-progress .bar i{display: block;height: 100%;width: 0;border-radius: 10px;background: var(--gold);animation: fillTo 1.2s ease .2s forwards}.tr-progress b{font-family: 'Montserrat',sans-serif;color: var(--heading);font-size: 15px;min-width: 42px}.tr-eta-chip{display: inline-flex;align-items: center;gap: 8px;padding: 8px 16px;border-radius: 30px;font-size: 13.5px;font-weight: 700;background: rgba(34,169,204,.1);color: var(--gold-dark);border: 1px solid rgba(34,169,204,.35)}.tr-eta-chip.today{background: rgba(255,131,38,.12);color: #c25a00;border-color: rgba(255,131,38,.4)}.tr-eta-chip.soon{background: var(--bg-soft);color: var(--muted);border-color: var(--border)}.tr-eta-chip.ok{background: rgba(31,157,90,.12);color: var(--success);border-color: rgba(31,157,90,.35)}:root[data-theme="dark"] .tr-eta-chip{color: var(--gold-light)}:root[data-theme="dark"] .tr-eta-chip.ok{color: var(--success-light)}.tr-history h4 .count{font-size: 12px;background: var(--bg-soft);border: 1px solid var(--border);color: var(--muted);border-radius: 20px;padding: 1px 9px;font-family: 'Montserrat',sans-serif}.track-result.quiet .tr-step,.track-result.quiet .tr-info > div,.track-result.quiet .tr-history li{animation: none;opacity: 1}.track-result.quiet .tr-line-fill,.track-result.quiet .tr-progress .bar i{animation-duration: .01s;animation-delay: 0s}.track-result.quiet .tr-vehicle{animation-duration: .01s;animation-delay: 0s}.tr-updated-toast{display: flex;align-items: center;justify-content: center;gap: 8px;padding: 10px;font-weight: 800;font-size: 14px;background: var(--gold);color: var(--navy);animation: heroUp .3s ease}.modal-box.track-off{max-width: 440px;text-align: center}.track-off-ico{font-size: 44px;color: var(--gold-2);margin-bottom: 12px}.modal-box.track-off h3{margin-bottom: 8px}.track-recent{display: flex;flex-wrap: wrap;gap: 8px;justify-content: center;align-items: center;margin-top: 14px;font-size: 13px;color: var(--muted)}.track-recent[hidden]{display: none}.track-recent button{border: 1px solid var(--border);background: var(--surface);color: var(--heading);border-radius: 30px;padding: 4px 14px;font-size: 13px;font-weight: 700;cursor: pointer;font-family: 'Montserrat',sans-serif;transition: .25s}.track-recent button:hover{border-color: var(--gold);color: var(--gold-2)}.track-recent .clear{width: 28px;height: 28px;padding: 0;border-radius: 50%;color: var(--subtle)}@media (max-width: 520px){.tr-summary{padding-inline: 16px}.tr-head-side,html[dir="rtl"] .tr-head-side{align-items: flex-start;width: 100%;flex-direction: row;justify-content: space-between;flex-wrap: wrap}.tr-actions .btn{flex: 1 1 calc(50% - 6px)}.tr-actions .btn-gold{flex-basis: 100%}}@media print{.tr-live,.tr-updated-toast,.track-recent{display: none !important}.tr-progress .bar i{width: var(--p) !important}}
