/* contents extracted from your "Track Shipment" page styles (kept identical) */
:root{
  --accent:#00BFFF;
  --gutter:12px;
  --max-w:920px;

  --step-size:7px;
  --step-border:2px;
  --truck-size:28px;
  --road-height:12px;
  --road-color-remaining:#d6dbe0;
  --road-color-done:#38b673;
  --err-color:#e53935;

  --notice-bg:#f7fff5;
  --notice-border:#d8f2dd;
  --notice-text:#083814;
  --notice-key-color:#0b72b9;
  --truck-gap:2px;
  --truck-duration:6000;
}

/* عام */
*{box-sizing:border-box}
html,body{font-family:'Almarai',Tahoma,Arial,sans-serif;background:linear-gradient(135deg,#eef6ff,#eafff1);margin:0;padding:0}
.wrapper{padding:16px var(--gutter);box-sizing:border-box}
.track-container{max-width:var(--max-w);margin:12px auto;background:#fff;border-radius:10px;padding:14px;box-shadow:0 8px 30px rgba(11,114,185,0.05)}
h2{color:#1976d2;text-align:center;margin:0 0 8px;font-size:1.18rem}
.mini-hint{color:#6f86a6;font-size:13px;text-align:center;margin-bottom:12px}

/* ترتيب عمودي: البحث ثم النتيجة تحت */
.search-column{display:flex;flex-direction:column;gap:12px}

/* شريط البحث — الحقل والزر مناصفة في الصف */
.tracking-bar{display:flex;gap:10px;align-items:center}
.track-input-container{flex:1;position:relative}
.track-input-container input{width:100%;padding:10px 38px 10px 12px;border-radius:10px;border:1.1px solid #acd4f9;background:#f6fbff;font-size:15px}
.track-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:18px;color:#1976d2;opacity:.6}
.track-btn{flex:1;padding:10px 14px;border-radius:10px;border:none;background:linear-gradient(90deg,#1976d2,#0b6fbf);color:#fff;font-weight:800;cursor:pointer;min-width:90px}
.track-btn[disabled]{opacity:.5;cursor:not-allowed}
.field-help{font-size:12px;color:var(--err-color);margin-top:8px;text-align:right;display:none}

/* النتائج تحت الشريط */
.result-area{margin-top:4px}

/* بطاقة النتيجة */
.shipment-card{background:#ffffff;border:1px solid #e6f6f8;border-radius:10px;padding:12px;margin-bottom:14px;box-shadow:0 6px 18px rgba(11,114,185,0.03)}
.shipment-card h4{margin:0 0 10px;color:#0b72b9;font-size:15px;text-align:right}
.not-found{background:#fff6f5;color:var(--err-color);border:1px solid #ffdada;border-radius:8px;padding:10px;text-align:center;margin-top:12px}

/* NOTICE: نص رسالة البحث ككتلة نصية (سطر لكل حقل) */
/* - direction: rtl حتى تكون أسماء الحقول على اليمين
   - notice-text يستخدم white-space: pre-line للحفاظ على الأسطر كما تريد
   - text-align: right لجعل بداية كل سطر ملتصقة بالجانب الأيمن داخل المربع */
.notice{
  direction: rtl;                /* يجعـل اسم الحقل على جانـب اليمين */
  background:var(--notice-bg);
  border:1px solid var(--notice-border);
  color:var(--notice-text);
  padding:8px 10px;
  border-radius:10px;
  box-shadow:0 6px 16px rgba(10,80,45,0.04);
  font-size:14px;
  line-height:1.45;
  text-align:right;
  display:block;
  width:100%;
  box-sizing:border-box;
}
/* العنصر الذي يحمل النص (كل الأسطر) */
.notice .notice-text{
  white-space: pre-line; /* يحافظ على الأسطر الجديدة */
  direction: rtl;
  text-align: right;     /* بداية كل سطر ملتصقة يمين المربع */
  margin:0;
  padding:0;
  color:var(--notice-text);
  font-size:14px;
}

/* الطريق والنقاط */
.steps-wrap{margin-top:12px;padding:6px 2px 12px 2px;position:relative}
.road{position:relative;height:140px;background:transparent;display:flex;align-items:flex-start;justify-content:center}
.road-line-bg{position:absolute;left:0;width:100%;height:var(--road-height);border-radius:8px;background:var(--road-color-remaining);overflow:visible;z-index:1;box-sizing:border-box}
.road-line-done{position:absolute;left:0;top:0;height:100%;background:var(--road-color-done);width:0%;transition:width .7s ease;z-index:2}
.steps{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;z-index:11;pointer-events:none}
.step{position:relative;width:1%;min-width:44px;max-width:160px;display:flex;align-items:center;justify-content:center;height:0}
.step-dot{position:relative;z-index:13;width:var(--step-size);height:var(--step-size);border-radius:50%;background:#fff;border:var(--step-border) solid #d0e9ff;box-shadow:0 2px 6px rgba(11,114,185,0.04);pointer-events:auto;flex:0 0 auto}
.step-dot.active{background:var(--road-color-done);border-color:var(--road-color-done);box-shadow:0 6px 16px rgba(56,182,115,0.14)}
.step-label{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:var(--step-label-width);font-size:13px;color:#0b3b66;text-align:center;direction:rtl;z-index:14}

/* الشاحنة */
.truck-emoji{position:absolute;left:0;top:0;font-size:var(--truck-size);z-index:12;transition:left calc(var(--truck-duration) / 1000)s cubic-bezier(0.22,0.9,0.32,1), transform .3s ease;pointer-events:none;will-change:left,transform}

/* WhatsApp button */
.share-wa{display:inline-block;padding:8px 12px;border-radius:8px;background:#25d366;color:#fff;font-weight:700;text-decoration:none;margin-top:12px;align-self:flex-start}

/* responsive tweaks */
@media (max-width:720px){
  .track-container{padding:12px}
  .notice .notice-text{font-size:13px}
}