/* ═══════════════════════════════════════
   Afaq Orders Tracking — صفحة طلباتي
═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;600;700;800&display=swap');

.afaq-ot { font-family:'Tajawal',sans-serif; direction:rtl; margin-bottom:28px; }

/* ══ البطاقة الكبيرة ══ */
.afaq-ot-featured { border-radius:16px; overflow:hidden; margin-bottom:20px; border:2px solid #e0d8ca; box-shadow:0 4px 24px rgba(0,0,0,.07); }

.afaq-ot-feat-head { display:flex; align-items:center; gap:10px; padding:16px 20px; background:linear-gradient(135deg,#1a1a1a,#2c2c2c); flex-wrap:wrap; }
.afaq-ot-feat-num  { font-size:16px; font-weight:800; color:#fff; display:flex; align-items:center; gap:8px; }
.afaq-ot-feat-num span { color:#b8965a; }
.afaq-ot-feat-badge { font-size:11px; font-weight:700; padding:4px 14px; border-radius:20px; }
.afaq-ot-feat-date  { font-size:11px; color:rgba(255,255,255,.5); margin-right:auto; }

/* منتجات البطاقة الكبيرة */
.afaq-ot-feat-products { padding:14px 20px; background:#fff; border-bottom:1px solid #f0ece3; display:flex; flex-direction:column; gap:9px; }
.afaq-ot-feat-item     { display:flex; align-items:center; gap:11px; }
.afaq-ot-feat-img      { width:50px; height:50px; border-radius:10px; object-fit:cover; border:1.5px solid #f0ece3; background:#faf8f4; flex-shrink:0; }
.afaq-ot-feat-img-ph   { width:50px; height:50px; border-radius:10px; background:linear-gradient(135deg,#f0e8d8,#e8dcc8); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.afaq-ot-feat-iname    { font-size:13px; font-weight:700; color:#1a1a1a; flex:1; min-width:0; }
.afaq-ot-feat-imeta    { font-size:11px; color:#888; margin-top:2px; }
.afaq-ot-feat-iqty     { font-size:12px; font-weight:700; color:#b8965a; background:rgba(184,150,90,.1); padding:3px 10px; border-radius:20px; white-space:nowrap; }
.afaq-ot-feat-iprice   { font-size:12px; font-weight:700; color:#1a1a1a; white-space:nowrap; min-width:55px; text-align:left; }

/* مسار الطلب */
.afaq-ot-timeline       { padding:18px 20px; background:#faf8f4; border-bottom:1px solid #f0ece3; }
.afaq-ot-tl-title       { font-size:11px; font-weight:700; color:#999; text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px; }
.afaq-ot-tl-steps       { display:flex; align-items:flex-start; gap:0; width:100%; }
.afaq-ot-step           { display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; min-width:0; }
.afaq-ot-step-ring      { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; border:2.5px solid #e0d8ca; background:#f5f0e8; color:#ccc; transition:all .3s; flex-shrink:0; }
.afaq-ot-step.done   .afaq-ot-step-ring { background:#b8965a; border-color:#b8965a; color:#fff; font-size:14px; box-shadow:0 3px 10px rgba(184,150,90,.35); }
.afaq-ot-step.active .afaq-ot-step-ring { background:#fff; border-color:#b8965a; color:#b8965a; box-shadow:0 0 0 4px rgba(184,150,90,.18); animation:afaqPulse 2s infinite; }
@keyframes afaqPulse { 0%,100%{ box-shadow:0 0 0 4px rgba(184,150,90,.18); } 50%{ box-shadow:0 0 0 8px rgba(184,150,90,.06); } }
.afaq-ot-step-lbl        { font-size:10px; font-weight:700; color:#bbb; text-align:center; white-space:nowrap; }
.afaq-ot-step.done  .afaq-ot-step-lbl,
.afaq-ot-step.active .afaq-ot-step-lbl { color:#b8965a; }
.afaq-ot-line            { flex:1; height:2.5px; background:#e0d8ca; margin:0 3px 22px; border-radius:3px; }
.afaq-ot-line.done       { background:linear-gradient(90deg,#b8965a,#d4af6e); }

/* تذييل */
.afaq-ot-feat-foot   { display:flex; align-items:center; gap:10px; padding:12px 20px; background:#fff; flex-wrap:wrap; }
.afaq-ot-feat-total  { font-size:13px; color:#666; margin-right:auto; }
.afaq-ot-feat-total strong { color:#b8965a; font-weight:800; font-size:15px; }

/* أزرار */
.afaq-ot-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:30px; font-family:'Tajawal',sans-serif; font-size:13px; font-weight:700; text-decoration:none !important; transition:all .2s; white-space:nowrap; }
.afaq-ot-btn:hover { transform:translateY(-1px); }
.afaq-ot-btn-view  { background:#f5f0e8; color:#8a6e3e !important; border:1.5px solid rgba(184,150,90,.3); }
.afaq-ot-btn-track { background:linear-gradient(135deg,#b8965a,#8a6e3e); color:#fff !important; box-shadow:0 3px 12px rgba(184,150,90,.35); }
@keyframes afaqTruck { from{ transform:translateX(0); } to{ transform:translateX(3px); } }
.afaq-ot-btn-track svg { animation:afaqTruck .5s ease infinite alternate; }

/* ══ بطاقات التتبع الصغيرة ══ */
.afaq-ot-cards        { display:flex; flex-direction:column; gap:12px; }
.afaq-ot-card         { border-radius:14px; overflow:hidden; border:1.5px solid #e0d8ca; background:#fff; }
.afaq-ot-card-head    { display:flex; align-items:center; gap:8px; padding:11px 16px; flex-wrap:wrap; }
.afaq-ot-card-num     { font-size:13px; font-weight:800; color:#1a1a1a; display:flex; align-items:center; gap:5px; }
.afaq-ot-card-badge   { font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; }
.afaq-ot-card-date    { font-size:10px; color:#999; margin-right:auto; }
.afaq-ot-card-products { padding:10px 16px; border-top:1px solid #f0f0f0; display:flex; flex-direction:column; gap:7px; }
.afaq-ot-card-item    { display:flex; align-items:center; gap:8px; }
.afaq-ot-card-img     { width:38px; height:38px; border-radius:8px; object-fit:cover; border:1px solid #eee; flex-shrink:0; background:#faf8f4; }
.afaq-ot-card-img-ph  { width:38px; height:38px; border-radius:8px; background:#f0e8d8; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.afaq-ot-card-iname   { font-size:12px; font-weight:700; color:#1a1a1a; flex:1; }
.afaq-ot-card-iqty    { font-size:11px; font-weight:700; color:#b8965a; background:rgba(184,150,90,.1); padding:2px 8px; border-radius:20px; white-space:nowrap; }
.afaq-ot-card-track   { padding:10px 16px; border-top:1px solid #f0f0f0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fdfaf4; }
.afaq-ot-card-track-num { font-size:12px; font-weight:700; color:#1a1a1a; direction:ltr; letter-spacing:.5px; flex:1; }
.afaq-ot-card-foot    { padding:10px 16px; border-top:1px solid #f0f0f0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.afaq-ot-card-total   { font-size:12px; color:#666; margin-right:auto; }
.afaq-ot-card-total strong { color:#b8965a; font-weight:800; }

/* مراحل مصغّرة */
.afaq-ot-mini-steps    { display:flex; align-items:center; gap:0; flex:1; min-width:140px; }
.afaq-ot-mini-step     { display:flex; flex-direction:column; align-items:center; gap:3px; }
.afaq-ot-mini-ring     { width:26px; height:26px; border-radius:50%; background:#f0ece3; border:2px solid #e0d8ca; display:flex; align-items:center; justify-content:center; font-size:11px; color:#bbb; }
.afaq-ot-mini-step.done .afaq-ot-mini-ring  { background:#b8965a; border-color:#b8965a; color:#fff; font-size:10px; }
.afaq-ot-mini-step.active .afaq-ot-mini-ring { background:#fff; border-color:#b8965a; color:#b8965a; }
.afaq-ot-mini-lbl      { font-size:8px; color:#bbb; white-space:nowrap; }
.afaq-ot-mini-step.done  .afaq-ot-mini-lbl,
.afaq-ot-mini-step.active .afaq-ot-mini-lbl { color:#b8965a; font-weight:700; }
.afaq-ot-mini-line     { flex:1; height:2px; background:#e0d8ca; margin:0 2px 11px; }
.afaq-ot-mini-line.done { background:#b8965a; }

@media(max-width:640px) {
    .afaq-ot-feat-head      { padding:12px 14px; }
    .afaq-ot-feat-products  { padding:10px 14px; }
    .afaq-ot-timeline       { padding:14px; }
    .afaq-ot-feat-foot      { padding:10px 14px; }
    .afaq-ot-step-ring      { width:30px; height:30px; font-size:14px; }
    .afaq-ot-step-lbl       { font-size:9px; }
    .afaq-ot-mini-lbl       { display:none; }
}