/* contents extracted from your "Track Shipment" page styles (kept identical)
   Modified to place the search input on its own row and the search button below it,
   and to make the page title (h2) 60% smaller. */
: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)}
/* Reduced page title size by 60% (previous 1.18rem -> 0.472rem ≈ 40% of original) */
h2{color:#1976d2;text-align:center;margin:0 0 8px;font-size:0.47rem;line-height:1.2}
.mini-hint{color:#6f86a6;font-size:13px;text-align:center;margin-bottom:12px}

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

/* شريط البحث — الآن: الحقل في صف والزر تحته (عمودي) */
/* We force a vertical layout: input first (full width), button below (full width).
   This applies on all viewports but keeps spacing consistent. */
.tracking-bar{
  display:flex;
  flex-direction:column; /* INPUT on top, BUTTON below */
  gap:10px;
  align-items:stretch;
  justify-content:flex-start;
}
.track-input-container{
  width:100%;
  position:relative;
}
.track-input-container input{
  width:100%;
  padding:10px 34px 10px 12px;
  border-radius:10px;
  border:1.1px solid #acd4f9;
  background:#f6fbff;
  font-size:15px;
  box-sizing:border-box;
}

/* search icon stays absolutely positioned inside input */
.track-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:18px;color:#1976d2;opacity:.6}

/* Button now full width under the input */
.track-btn{
  display:inline-block;
  width:100%;
  padding:10px 14px;
  border-radius:10px;
  border:none;
  background:linear-gradient(90deg,#1976d2,#0b6fbf);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  box-sizing:border-box;
  text-align:center;
}

/* Disabled state */
.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: نص رسالة البحث ككتلة نصية (سطر لكل حقل) */
.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}
}

/* For small screens keep the vertical layout; adjust paddings */
@media (max-width:520px){
  .track-input-container input{font-size:14px;padding:9px 34px 9px 10px;}
  .track-btn{padding:9px 10px;font-size:14px;}
}

/* Very narrow screens: keep vertical stacking and comfortable spacing */
@media (max-width:380px){
  .track-input-container input{padding:8px 10px}
  .track-btn{margin-top:6px}
}

/* small refinement for very small titles */
@media (max-width:420px){
  h2{font-size:0.44rem}
  .notice .notice-text{font-size:13px}
}