/* ShipTrack Pro — Frontend */
.stp-page { max-width: 540px; margin: 0 auto; direction: rtl; font-family: 'Segoe UI', Arial, sans-serif; }
.stp-page h2 { font-size: 22px; margin-bottom: 18px; color: #111; }

.stp-row { margin-bottom: 14px; }
.stp-row label { display: block; font-weight: 600; margin-bottom: 5px; color: #333; }
.stp-row select,
.stp-row input[type="text"] { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 15px; box-sizing: border-box; }

.stp-btn { background: #0d6efd; color: #fff; border: none; padding: 11px 28px; border-radius: 7px; font-size: 15px; cursor: pointer; }
.stp-btn:hover { background: #0b5ed7; }

#stp-loading { margin-top: 14px; color: #666; font-style: italic; }

#stp-error { margin-top: 14px; background: #fee2e2; color: #991b1b; padding: 12px 16px; border-radius: 7px; }

#stp-result { margin-top: 22px; }
#stp-status-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }

#stp-badge { display: inline-block; padding: 6px 18px; border-radius: 20px; font-weight: 700; font-size: 15px; }
#stp-badge.delivered        { background: #d1fae5; color: #065f46; }
#stp-badge.in_transit       { background: #dbeafe; color: #1e40af; }
#stp-badge.out_for_delivery { background: #fef3c7; color: #92400e; }
#stp-badge.exception        { background: #fee2e2; color: #991b1b; }
#stp-badge.returned         { background: #f3e8ff; color: #6b21a8; }
#stp-badge.pending          { background: #f3f4f6; color: #374151; }

#stp-carrier-link { font-size: 13px; color: #0d6efd; text-decoration: none; font-weight: 600; }
#stp-carrier-link:hover { text-decoration: underline; }

#stp-details { font-size: 14px; color: #555; margin: 6px 0 14px; }

/* Timeline */
#stp-timeline { border-right: 3px solid #e5e7eb; padding-right: 18px; }
.stp-event { position: relative; padding: 8px 0; }
.stp-event::before { content: ''; position: absolute; right: -24px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: #0d6efd; border: 2px solid #fff; box-shadow: 0 0 0 2px #0d6efd; }
.stp-event-date { font-size: 11px; color: #9ca3af; }
.stp-event-desc { font-size: 14px; color: #111; font-weight: 500; }
.stp-event-loc  { font-size: 12px; color: #6b7280; }