/* ════════════════════════════════════════════
   style.css — وردان رايد
   يحتوي على كل تنسيقات التطبيق مقسَّمة بوضوح
   ════════════════════════════════════════════ */

/* ══════════════════════════════════════
   [1] VARIABLES — المتغيرات العامة للألوان والخطوط
   كل تعديل للألوان يكون هنا فقط وينعكس على كل التطبيق
══════════════════════════════════════ */
:root {
  --green:#1D9E75; --gdark:#0F6E56; --glight:#E1F5EE; --gmed:#5DCAA5;  /* الأخضر بدرجاته */
  --red:#E24B4A;   --blue:#185FA5;                                       /* الأحمر والأزرق */
  --bg:#f0f4f2;    --card:#fff;     --border:#e2e8e5;                   /* خلفية، بطاقة، حدود */
  --text:#1a2e25;  --muted:#6b8278;                                      /* النص الأساسي والخافت */
  --font:'Cairo', sans-serif;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,.10);
  --shadow-green: 0 4px 18px rgba(29,158,117,.35);
}
*{box-sizing:border-box;margin:0;padding:0}                              /* إزالة الهوامش الافتراضية لكل العناصر */
body{font-family:var(--font);background:var(--bg);direction:rtl;min-height:100vh;color:var(--text);-webkit-tap-highlight-color:transparent}
.app{max-width:500px;margin:0 auto;padding:.75rem;padding-bottom:2rem}  /* الغلاف الرئيسي — محدود العرض ومحاذى للوسط */

/* ══════════════════════════════════════
   [2] HEADER — شريط الرأس الأخضر العلوي
══════════════════════════════════════ */
.header{
  background:linear-gradient(135deg,#1D9E75 0%,#0d7a5a 100%);
  padding:1rem 1.25rem;border-radius:20px;margin-bottom:.85rem;
  display:flex;align-items:center;gap:12px;
  box-shadow:var(--shadow-green);position:relative;overflow:hidden;
}
.header::before{content:'';position:absolute;left:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08)}   /* دائرة زخرفية يسار */
.header::after{content:'';position:absolute;right:-20px;bottom:-40px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.05)}   /* دائرة زخرفية يمين */
.header-icon{font-size:30px;color:#fff;position:relative;z-index:1}
.header-text{position:relative;z-index:1;flex:1}
.header-text h1{font-size:18px;font-weight:900;color:#fff;margin-bottom:1px}
.header-text p{font-size:11.5px;color:rgba(255,255,255,.82)}
.header-actions{position:relative;z-index:1;display:flex;gap:8px;align-items:center}
.header-btn{background:rgba(255,255,255,.18);border:none;border-radius:10px;width:36px;height:36px;cursor:pointer;color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;transition:background .2s}
.header-btn:active{background:rgba(255,255,255,.3)}
.version-badge{background:rgba(255,255,255,.22);color:#fff;font-size:10px;font-weight:800;padding:2px 7px;border-radius:8px;position:absolute;top:10px;left:10px;z-index:2;letter-spacing:.5px}  /* شارة رقم الإصدار */

/* ══════════════════════════════════════
   [3] TABS — تابات التنقل (راكب / سائق)
══════════════════════════════════════ */
.tabs{display:flex;border-radius:16px;overflow:hidden;margin-bottom:.85rem;background:var(--card);border:1px solid var(--border);padding:4px;gap:4px;box-shadow:var(--shadow-sm)}
.tab{flex:1;padding:10px;text-align:center;font-size:14px;cursor:pointer;background:transparent;color:var(--muted);border:none;font-family:var(--font);font-weight:700;border-radius:12px;transition:all .22s;display:flex;align-items:center;justify-content:center;gap:6px}
.tab.active{background:var(--green);color:#fff;box-shadow:var(--shadow-green)}   /* التاب النشط يظهر بالأخضر */
.sec{display:none}.sec.active{display:block}                             /* إخفاء القسم غير النشط */

/* ══════════════════════════════════════
   [4] CARDS — البطاقات العامة
══════════════════════════════════════ */
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:1.15rem 1.2rem;margin-bottom:.85rem;box-shadow:var(--shadow-sm)}
.stitle{font-size:14.5px;font-weight:800;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.stitle i{color:var(--green);font-size:18px}
label{font-size:13px;color:var(--muted);margin-bottom:5px;display:block;font-weight:700}
input,select{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:12px;font-size:15px;background:#f8fbf9;color:var(--text);margin-bottom:12px;direction:rtl;font-family:var(--font);transition:border-color .2s,box-shadow .2s;outline:none}
input:focus,select:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 3px rgba(29,158,117,.12)}  /* تأثير التركيز بإطار أخضر */

/* ══════════════════════════════════════
   [5] LEAFLET MAP — تنسيقات الخريطة
══════════════════════════════════════ */
.map-outer{border-radius:15px;overflow:hidden;border:2.5px solid var(--border);margin-bottom:12px;position:relative;transition:border-color .25s}
.map-outer.mode-from{border-color:var(--green)}  /* لون الإطار عند تحديد نقطة البداية */
.map-outer.mode-to{border-color:var(--red)}       /* لون الإطار عند تحديد نقطة الوصول */
#leafletMap{width:100%;height:280px;border-radius:13px;background:#e8f0eb}
.leaflet-control-attribution{font-size:9px !important;direction:ltr}
.leaflet-control-zoom{display:none}               /* إخفاء أزرار التكبير الافتراضية — نستخدم أزرارنا */
.pin-from,.pin-to{width:28px;height:28px;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;font-weight:900}
.pin-from{background:var(--green)}               /* دبوس نقطة البداية */
.pin-to{background:var(--red)}                   /* دبوس نقطة الوصول */
.driver-marker{width:40px;height:40px;background:#185FA5;border:3px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 3px 12px rgba(24,95,165,.5);animation:driverPulse 2s ease-in-out infinite}
@keyframes driverPulse{0%,100%{box-shadow:0 0 0 0 rgba(24,95,165,.4),0 3px 12px rgba(24,95,165,.5)}50%{box-shadow:0 0 0 10px rgba(24,95,165,0),0 3px 12px rgba(24,95,165,.5)}}   /* نبضة زرقاء على ماركر السائق */
.map-mode-bar{display:flex;gap:6px;margin-bottom:8px}
.mmb{flex:1;padding:9px 4px;border-radius:11px;border:1.5px solid var(--border);background:#fff;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;color:var(--muted);transition:all .2s;text-align:center}
.mmb.af{background:var(--glight);border-color:var(--green);color:var(--gdark)}  /* زر من — مفعّل */
.mmb.at{background:#FCEBEB;border-color:var(--red);color:var(--red)}            /* زر إلى — مفعّل */
.map-hint{font-size:12px;color:var(--muted);background:#f4f8f6;border-radius:9px;padding:7px 10px;margin-bottom:8px;border:1px solid var(--border);display:flex;align-items:center;gap:6px}
.gps-fab{position:absolute;bottom:10px;left:10px;z-index:1000;background:#fff;border:none;border-radius:10px;padding:8px 13px;font-size:12px;font-weight:700;color:var(--green);cursor:pointer;font-family:var(--font);box-shadow:var(--shadow-md);display:flex;align-items:center;gap:5px;transition:transform .15s}
.gps-fab:active{transform:scale(.94)}
.zoom-wrap{position:absolute;top:10px;left:10px;z-index:1000;display:flex;flex-direction:column;gap:4px}  /* حاوي أزرار التكبير المخصصة */
.zbtn{background:#fff;border:none;border-radius:8px;width:32px;height:32px;font-size:18px;font-weight:700;cursor:pointer;color:#333;box-shadow:0 2px 6px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;transition:opacity .15s}
.zbtn:active{opacity:.65}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.loc-grid div input{margin-bottom:0}

/* ★ v17: OSRM BAR — شريط نتيجة حساب المسار الحقيقي */
.osrm-bar{display:none;background:linear-gradient(135deg,#185FA5,#0d4580);border-radius:12px;padding:11px 14px;margin-bottom:10px;align-items:center;gap:10px}
.osrm-bar.show{display:flex}                     /* يظهر فقط بعد نجاح OSRM */
.osrm-bar i{font-size:20px;color:#fff;flex-shrink:0}
.osrm-info{flex:1}
.osrm-info b{display:block;font-size:13.5px;font-weight:900;color:#fff}
.osrm-info span{font-size:11.5px;color:rgba(255,255,255,.82)}
.osrm-loading{display:none;background:#f4f8f6;border-radius:12px;padding:10px 14px;margin-bottom:10px;align-items:center;gap:8px;border:1px solid var(--border);font-size:13px;color:var(--muted);font-weight:700}
.osrm-loading.show{display:flex}                 /* يظهر أثناء جلب المسار */
.osrm-spinner{width:16px;height:16px;border:2.5px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin 0.8s linear infinite;flex-shrink:0}

/* ══════════════════════════════════════
   [6] VEHICLE SELECTOR — اختيار نوع العربية
══════════════════════════════════════ */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.vbtn{padding:12px 4px;border:1.5px solid var(--border);border-radius:13px;background:#f8fbf9;cursor:pointer;text-align:center;font-size:13px;color:var(--muted);transition:all .22s;font-family:var(--font);font-weight:700}
.vbtn i{font-size:22px;display:block;margin-bottom:4px}
.vbtn.sel{border:2px solid var(--green);background:var(--glight);color:var(--gdark)}  /* العربية المختارة */

/* ══════════════════════════════════════
   [7] PRICE BOX — صندوق عرض السعر
══════════════════════════════════════ */
.price-box{background:linear-gradient(135deg,#E1F5EE,#d0f0e4);border:1.5px solid var(--gmed);border-radius:16px;padding:16px;margin-bottom:14px}
.price-box-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.price-label{font-size:12.5px;color:var(--gdark);font-weight:700;opacity:.85}
.price-edit-hint{font-size:11px;color:var(--gdark);background:rgba(255,255,255,.6);border-radius:20px;padding:3px 9px;font-weight:600}
.price-input-wrap{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.8);border-radius:12px;padding:8px 14px;border:2px solid var(--gmed)}
.price-input-wrap i{color:var(--gdark);font-size:20px;flex-shrink:0}
#priceInput{border:none;background:transparent;font-size:28px;font-weight:900;color:var(--gdark);width:100%;margin:0;padding:0;font-family:var(--font);direction:rtl}
#priceInput:focus{box-shadow:none;border:none}
.price-currency{font-size:16px;font-weight:800;color:var(--gdark);flex-shrink:0}
.price-sub{font-size:11.5px;color:var(--gdark);opacity:.8;margin-top:6px;text-align:center}
.price-break{font-size:12px;color:var(--gdark);margin-top:5px;background:rgba(255,255,255,.55);border-radius:7px;padding:5px 8px;text-align:center}  /* تفصيل حساب السعر */
.dist-badge{background:#fff;border-radius:8px;padding:5px 11px;font-size:12.5px;color:var(--gdark);font-weight:700;margin-top:6px;display:inline-block;border:1px solid var(--gmed)}

/* Remote Config price banner — بانر أسعار Firebase */
.rc-banner{background:linear-gradient(135deg,#185FA5,#0d4580);border-radius:12px;padding:10px 14px;margin-bottom:10px;display:flex;align-items:center;gap:8px;font-size:12px;color:#fff;font-weight:700}
.rc-banner i{font-size:16px;flex-shrink:0}

/* ══════════════════════════════════════
   [8] BUTTONS — الأزرار بأنواعها
══════════════════════════════════════ */
.btn{width:100%;padding:13px;border:none;border-radius:14px;font-size:15px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;font-family:var(--font)}
.btn:active{transform:scale(.97);opacity:.88}
.btn-green{background:var(--green);color:#fff;box-shadow:var(--shadow-green)}   /* الزر الأساسي */
.btn-call{background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(24,95,165,.25);margin-top:8px}
.btn-red{background:var(--red);color:#fff}        /* زر الإلغاء / الخطر */
.btn-outline{background:transparent;color:var(--green);border:2px solid var(--green)}  /* زر مخطط */
.btn-sm{padding:8px 14px;font-size:13px;border-radius:10px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-weight:700;font-family:var(--font);transition:all .2s}
.btn-sm:active{opacity:.75}
.btn-accept{background:var(--green);color:#fff}   /* زر قبول الطلب */
.btn-reject{background:var(--red);color:#fff}     /* زر رفض الطلب */
.btn-done{background:var(--blue);color:#fff}      /* زر إنهاء الرحلة */

/* ══════════════════════════════════════
   [9] PWA INSTALL BANNER — بانر تثبيت التطبيق
══════════════════════════════════════ */
.pwa-banner{background:linear-gradient(135deg,#0F6E56,#1D9E75);border-radius:14px;padding:12px 14px;margin-bottom:.85rem;display:flex;align-items:center;gap:10px;cursor:pointer;box-shadow:var(--shadow-green)}
.pwa-banner i{font-size:22px;color:#fff;flex-shrink:0}
.pwa-banner-text{flex:1}
.pwa-banner-text b{display:block;font-size:13px;font-weight:800;color:#fff}
.pwa-banner-text span{font-size:11px;color:rgba(255,255,255,.85)}
.pwa-banner-close{color:rgba(255,255,255,.7);font-size:16px;background:none;border:none;cursor:pointer;padding:4px}

/* ══════════════════════════════════════
   [10] WAITING OVERLAY — شاشة انتظار السائق
   تظهر بعد إرسال الطلب وتملأ الشاشة كاملة
══════════════════════════════════════ */
#waitingOverlay{
  display:none;position:fixed;inset:0;z-index:5000;
  background:linear-gradient(160deg,#0F6E56 0%,#1D9E75 50%,#0d5a44 100%);
  flex-direction:column;align-items:center;justify-content:center;
  padding:2rem;
}
#waitingOverlay.show{display:flex;animation:overlayIn .3s ease}
@keyframes overlayIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
.waiting-spinner{width:90px;height:90px;border-radius:50%;border:5px solid rgba(255,255,255,.2);border-top-color:#fff;animation:spin 1s linear infinite;margin-bottom:28px;position:relative;}
.waiting-spinner::after{content:'🛺';font-size:28px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}  /* أيقونة داخل المحور */
@keyframes spin{to{transform:rotate(360deg)}}
.waiting-title{font-size:22px;font-weight:900;color:#fff;margin-bottom:8px;text-align:center}
.waiting-sub{font-size:14px;color:rgba(255,255,255,.8);text-align:center;margin-bottom:36px;line-height:1.6}
.waiting-dots span{display:inline-block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);margin:0 3px;animation:blink 1.4s infinite}
.waiting-dots span:nth-child(2){animation-delay:.2s}
.waiting-dots span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{transform:scale(.7);opacity:.5}40%{transform:scale(1);opacity:1}}  /* نبضة للنقاط الثلاث */
.offer-panel{display:none;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1.5px solid rgba(255,255,255,.25);border-radius:20px;padding:1.3rem 1.5rem;margin-bottom:20px;width:100%;max-width:360px;text-align:center;animation:offerIn .4s cubic-bezier(.34,1.56,.64,1)}
.offer-panel.show{display:block}   /* لوحة عرض السعر من السائق */
@keyframes offerIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.offer-badge{font-size:11.5px;color:rgba(255,255,255,.75);font-weight:700;margin-bottom:6px;letter-spacing:.5px}
.offer-driver-name{font-size:16px;font-weight:800;color:#fff;margin-bottom:4px}
.offer-price-big{font-size:38px;font-weight:900;color:#fff;line-height:1.1;margin-bottom:4px}
.offer-price-lbl{font-size:13px;color:rgba(255,255,255,.75);margin-bottom:14px}
.offer-btns{display:flex;gap:8px}
.offer-btns .btn{margin:0;flex:1;border-radius:12px;padding:11px}
.waiting-cancel{background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.3);border-radius:30px;padding:12px 32px;font-size:14px;font-weight:700;font-family:var(--font);cursor:pointer;transition:background .2s}
.waiting-cancel:active{background:rgba(255,255,255,.25)}
.waiting-trip-info{font-size:12px;color:rgba(255,255,255,.7);text-align:center;margin-bottom:24px;background:rgba(255,255,255,.1);border-radius:10px;padding:8px 16px;line-height:1.7}

/* ══════════════════════════════════════
   [11] STATS — الإحصائيات (إجمالي / نُفِّذت / تنتظر)
══════════════════════════════════════ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:.85rem}
.stat{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px;text-align:center;box-shadow:var(--shadow-sm)}
.stat-n{font-size:26px;font-weight:900;color:var(--green)}  /* الرقم الكبير */
.stat-l{font-size:11px;color:var(--muted);margin-top:2px;font-weight:600}

/* ══════════════════════════════════════
   [12] RIDE CARDS — بطاقات الطلبات
══════════════════════════════════════ */
.rcard{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.1rem 1.15rem;margin-bottom:10px;box-shadow:var(--shadow-sm)}
.rcard.done{opacity:.5}             /* الرحلات المنتهية تظهر باهتة */
.rcard .rname{font-weight:800;font-size:15px;color:var(--text)}
.rcard .rroute{font-size:13px;color:var(--muted);margin:6px 0 3px;line-height:1.5}
.rcard .rdist{font-size:12px;color:#9aada5;margin-bottom:8px}
.rcard .rprice{font-size:17px;font-weight:900;color:var(--gdark);margin-bottom:10px;display:flex;align-items:center;gap:5px}
.rcard .rmeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.badge{font-size:11px;padding:3px 10px;border-radius:20px;font-weight:700}
.bm{background:#E6F1FB;color:var(--blue)}   /* شارة موتوسيكل */
.bt{background:#FAEEDA;color:#854F0B}        /* شارة توك توك */
.br{background:#EEEDFE;color:#534AB7}        /* شارة تروسيكل */
.bs-pending{background:#FAEEDA;color:#854F0B}
.bs-accepted{background:var(--glight);color:var(--gdark)}
.bs-rejected{background:#FCEBEB;color:#A32D2D}
.bs-done{background:#EAF3DE;color:#3B6D11}

/* ══════════════════════════════════════
   [13] FIREBASE STATUS BANNER — حالة الاتصال بالسيرفر
══════════════════════════════════════ */
.fb-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;font-size:12.5px;font-weight:700;margin-bottom:12px}
.fb-banner.fb-off{background:#FFF3CD;color:#856404;border:1px solid #ffd970}   /* أصفر = جاري الاتصال */
.fb-banner.fb-on{background:var(--glight);color:var(--gdark);border:1px solid var(--gmed)}   /* أخضر = متصل */
.fb-banner.fb-err{background:#FCEBEB;color:#A32D2D;border:1px solid #f5b0b0}  /* أحمر = خطأ */
.fb-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}  /* نقطة مؤشر الحالة */
.fb-on .fb-dot{background:var(--green);box-shadow:0 0 6px var(--green)}
.fb-off .fb-dot{background:#856404}
.fb-err .fb-dot{background:#A32D2D}

/* ══════════════════════════════════════
   [14] DRIVER BID — حقل عرض السعر المضاد من السائق
══════════════════════════════════════ */
.bid-row{display:flex;gap:6px;align-items:center;margin-bottom:10px;background:#f4f8f6;border-radius:11px;padding:8px 10px;border:1.5px dashed var(--gmed)}
.bid-row label{margin:0;white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--gdark);flex-shrink:0}
.bid-row input{margin:0;flex:1;font-size:15px;font-weight:800;color:var(--gdark);background:#fff;border-color:var(--gmed);padding:7px 10px;max-width:90px;text-align:center}
.bid-send{background:var(--green);color:#fff;border:none;border-radius:9px;padding:8px 14px;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:opacity .2s}
.bid-send:active{opacity:.75}

/* ══════════════════════════════════════
   [15] RIDER TABS — تابات الراكب (طلب جديد / طلباتي)
══════════════════════════════════════ */
.rider-tabs{display:flex;gap:8px;margin-bottom:12px}
.rtab{padding:8px 18px;border-radius:22px;border:1.5px solid var(--border);font-size:13px;cursor:pointer;background:#fff;color:var(--muted);font-family:var(--font);font-weight:700;transition:all .2s}
.rtab.active{background:var(--green);color:#fff;border-color:var(--green)}

/* Offer notify — إشعار داخل بطاقة الطلب بوجود عرض سعر */
.offer-notify{background:linear-gradient(135deg,var(--glight),#d0f0e4);border:1.5px solid var(--gmed);border-radius:14px;padding:12px 14px;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.offer-notify i{color:var(--gdark);font-size:22px;flex-shrink:0}
.offer-notify-text{flex:1}
.offer-notify-text b{display:block;font-size:13.5px;color:var(--gdark);font-weight:800}
.offer-notify-text span{font-size:12px;color:var(--gdark);opacity:.8}

.sr-status-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.rate-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rate-row label{margin:0;min-width:140px}
.rate-row input{margin:0;flex:1;max-width:110px}
.formula-hint{font-size:12px;color:var(--muted);margin-top:-6px;margin-bottom:10px;background:#f4f8f6;padding:7px 10px;border-radius:10px;border:1px solid var(--border)}  /* نص معادلة السعر */
.empty{text-align:center;padding:2.5rem 1rem;color:#bbb;font-size:14px}
.empty i{font-size:40px;display:block;margin-bottom:10px;color:#ddd}

/* مسافة السائق من الراكب */
.driver-distance-box{background:linear-gradient(135deg,#E1F5EE,#d0f0e4);border:2px solid var(--gmed);border-radius:14px;padding:12px 14px;margin-bottom:10px;display:flex;align-items:center;gap:10px;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(29,158,117,.3)}50%{box-shadow:0 0 0 6px rgba(29,158,117,0)}}
.driver-distance-box i{color:var(--gdark);font-size:26px;flex-shrink:0}
.driver-distance-text{flex:1}
.driver-distance-text b{display:block;font-size:15px;color:var(--gdark);font-weight:900}
.driver-distance-text span{font-size:12px;color:var(--gdark);opacity:.8}

/* Toast — إشعار النص المؤقت في أسفل الشاشة */
.toast{display:none;position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1a2e25;color:#fff;padding:11px 24px;border-radius:28px;font-size:14px;font-weight:700;z-index:9999;white-space:nowrap;box-shadow:0 6px 24px rgba(0,0,0,.3);font-family:var(--font)}

/* ══════════════════════════════════════
   [16] DRIVER GATE — بوابة دخول السائق (قبل تسجيل الدخول)
══════════════════════════════════════ */
#driverGate{display:block}
#driverContent{display:none}  /* المحتوى الفعلي مخفي حتى تسجيل الدخول */
.gate-card{text-align:center;padding:2rem 1.5rem}
.gate-card i.gate-icon{font-size:48px;color:var(--green);margin-bottom:12px;display:block}
.gate-card h2{font-size:18px;font-weight:900;margin-bottom:6px}
.gate-card p{font-size:13px;color:var(--muted);margin-bottom:16px}

/* ══════════════════════════════════════
   [17] AUTH MODAL — نافذة تسجيل الدخول / إنشاء حساب
══════════════════════════════════════ */
#authModal{display:none;position:fixed;inset:0;z-index:8000;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:1rem}
#authModal.show{display:flex;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.auth-box{background:#fff;border-radius:24px;padding:2rem 1.75rem;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:slideUp .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.auth-logo{text-align:center;margin-bottom:1.5rem}
.auth-logo i{font-size:44px;color:var(--green)}
.auth-logo h2{font-size:20px;font-weight:900;color:var(--text);margin-top:8px}
.auth-logo p{font-size:13px;color:var(--muted);margin-top:4px}
.auth-tabs{display:flex;background:#f0f4f2;border-radius:12px;padding:4px;gap:4px;margin-bottom:1.25rem}
.auth-tab{flex:1;padding:8px;border:none;border-radius:9px;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;background:transparent;color:var(--muted);transition:all .2s}
.auth-tab.active{background:#fff;color:var(--green);box-shadow:var(--shadow-sm)}
.auth-form{display:none}.auth-form.active{display:block}   /* يُظهر فقط الفورم النشط */
.auth-err{background:#FCEBEB;color:#A32D2D;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:700;margin-bottom:12px;display:none}
.auth-err.show{display:block}  /* رسالة خطأ المصادقة */

/* ══════════════════════════════════════
   [18] DRIVER PROFILE CARD — بطاقة ملف السائق
══════════════════════════════════════ */
.profile-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--glight),#d0f0e4);border:1.5px solid var(--gmed);border-radius:18px;padding:14px 16px;margin-bottom:.85rem}
.profile-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid var(--green);background:#ddd;flex-shrink:0}
.profile-avatar-placeholder{width:60px;height:60px;border-radius:50%;background:var(--gmed);display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;flex-shrink:0;border:3px solid var(--green)}
.profile-info{flex:1}
.profile-name{font-size:16px;font-weight:900;color:var(--gdark)}
.profile-phone{font-size:12px;color:var(--gdark);opacity:.8;margin-top:2px}
.profile-rating{display:flex;align-items:center;gap:4px;margin-top:4px}
.stars{color:#f5a623;font-size:14px;letter-spacing:1px}  /* نجوم التقييم بالذهبي */
.rating-val{font-size:12px;font-weight:700;color:var(--gdark)}
.profile-status{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:700;margin-top:6px;cursor:pointer;border:none;font-family:var(--font)}
.status-online{background:#d4f5e7;color:var(--gdark)}   /* متاح */
.status-offline{background:#f5e4e4;color:#8b2020}        /* غير متاح */
.profile-edit-btn{background:rgba(255,255,255,.7);border:none;border-radius:10px;padding:8px;cursor:pointer;color:var(--gdark);font-size:16px}

/* Avatar Upload — رفع الصورة الشخصية */
.avatar-upload-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:14px}
.avatar-preview{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--green);background:#e8f5ee}
.avatar-preview-placeholder{width:80px;height:80px;border-radius:50%;background:var(--gmed);display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;border:3px solid var(--green)}
.avatar-upload-label{background:var(--glight);border:1.5px dashed var(--gmed);border-radius:10px;padding:8px 18px;font-size:13px;font-weight:700;color:var(--gdark);cursor:pointer}
#avatarFileInput{display:none}  /* إخفاء حقل الرفع الافتراضي — نستخدم الـ label بدله */

/* ══════════════════════════════════════
   [19] RATING SYSTEM — نظام تقييم الرحلة
══════════════════════════════════════ */
.rating-modal{display:none;position:fixed;inset:0;z-index:7000;background:rgba(0,0,0,.5);align-items:flex-end;justify-content:center;padding:0}
.rating-modal.show{display:flex;animation:fadeIn .25s}
.rating-sheet{background:#fff;border-radius:24px 24px 0 0;padding:2rem 1.5rem 3rem;width:100%;max-width:500px;text-align:center;animation:slideUpSheet .35s cubic-bezier(.34,1.56,.64,1)}  /* يصعد من الأسفل */
@keyframes slideUpSheet{from{transform:translateY(100%)}to{transform:translateY(0)}}
.rating-sheet h3{font-size:18px;font-weight:900;margin-bottom:6px}
.rating-sheet p{font-size:13px;color:var(--muted);margin-bottom:1.5rem}
.star-picker{display:flex;justify-content:center;gap:10px;margin-bottom:1.5rem}
.star-btn{font-size:40px;cursor:pointer;transition:transform .15s;color:#ddd;background:none;border:none;padding:0}
.star-btn.active{color:#f5a623}      /* النجمة المضاءة */
.star-btn:hover{transform:scale(1.2)}

/* ══════════════════════════════════════
   [20] ADMIN DASHBOARD — لوحة تحكم المشرف
══════════════════════════════════════ */
#adminDash{display:none;position:fixed;inset:0;z-index:6000;background:#f0f4f2;overflow-y:auto}
#adminDash.show{display:block;animation:fadeIn .25s}
.admin-header{background:linear-gradient(135deg,#185FA5,#0d4580);padding:1rem 1.25rem;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10}  /* ثابت في الأعلى عند السكرول */
.admin-header h1{font-size:17px;font-weight:900;color:#fff;flex:1}
.admin-header button{background:rgba(255,255,255,.2);border:none;border-radius:10px;width:36px;height:36px;cursor:pointer;color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center}
.admin-body{padding:1rem;max-width:500px;margin:0 auto}
.admin-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:1rem}
.admin-stat{background:#fff;border-radius:16px;padding:14px;text-align:center;box-shadow:var(--shadow-sm)}
.admin-stat-n{font-size:30px;font-weight:900;color:var(--blue)}
.admin-stat-l{font-size:12px;color:var(--muted);font-weight:700;margin-top:2px}
.driver-admin-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow-sm)}
.dac-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.dac-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--border);background:#ddd;flex-shrink:0}
.dac-avatar-ph{width:48px;height:48px;border-radius:50%;background:var(--gmed);display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;flex-shrink:0}
.dac-info{flex:1}
.dac-name{font-size:14px;font-weight:800;color:var(--text)}
.dac-phone{font-size:12px;color:var(--muted);margin-top:2px}
.dac-rating{font-size:12px;color:#f5a623;font-weight:700}
.dac-actions{display:flex;gap:6px;flex-wrap:wrap}
.dac-btn{padding:7px 12px;border-radius:9px;border:none;font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .18s}
.dac-btn:active{opacity:.7}
.dac-approve{background:var(--glight);color:var(--gdark)}   /* تفعيل السائق */
.dac-suspend{background:#FAEEDA;color:#854F0B}               /* تعطيل السائق */
.dac-delete{background:#FCEBEB;color:#A32D2D}                /* حذف السائق */
.dac-reset{background:#EEF0FF;color:#4346A8}                 /* إعادة ضبط التقييم */
.dac-badge{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700}
.dac-online{background:#d4f5e7;color:var(--gdark)}
.dac-offline{background:#f5e4e4;color:#8b2020}
.dac-approved{background:var(--glight);color:var(--gdark)}
.dac-pending{background:#FFF3CD;color:#856404}
.admin-section-title{font-size:14px;font-weight:800;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.admin-section-title i{color:var(--blue)}
.monitor-card{background:#fff;border-radius:16px;padding:14px 16px;margin-bottom:.85rem;box-shadow:var(--shadow-sm);display:flex;gap:14px}
.monitor-item{flex:1;text-align:center}
.monitor-n{font-size:28px;font-weight:900}
.monitor-l{font-size:11px;color:var(--muted);font-weight:700}
.mon-online{color:var(--green)}   /* عدد السائقين المتصلين */
.mon-trips{color:var(--blue)}     /* عدد الرحلات النشطة */

/* FCM permission banner — طلب إذن الإشعارات */
.fcm-banner{background:linear-gradient(135deg,#185FA5,#0d4580);border-radius:14px;padding:14px 16px;margin-bottom:.85rem;display:flex;align-items:center;gap:12px;cursor:pointer}
.fcm-banner i{font-size:24px;color:#fff;flex-shrink:0}
.fcm-banner-text{flex:1}
.fcm-banner-text b{display:block;font-size:13px;font-weight:800;color:#fff}
.fcm-banner-text span{font-size:11.5px;color:rgba(255,255,255,.8)}
.fcm-banner-arrow{color:#fff;font-size:20px}

/* ══════════════════════════════════════
   [21] PROFILE EDIT MODAL — تعديل الملف الشخصي
══════════════════════════════════════ */
#profileModal{display:none;position:fixed;inset:0;z-index:7500;background:rgba(0,0,0,.5);align-items:flex-end;justify-content:center}
#profileModal.show{display:flex;animation:fadeIn .25s}
.profile-sheet{background:#fff;border-radius:24px 24px 0 0;padding:1.5rem 1.5rem 3rem;width:100%;max-width:500px;animation:slideUpSheet .35s cubic-bezier(.34,1.56,.64,1);max-height:90vh;overflow-y:auto}
.modal-handle{width:40px;height:4px;background:#e0e0e0;border-radius:2px;margin:0 auto 1.25rem}  /* مقبض السحب للأعلى */

/* App Check info box */
.appcheck-info{background:#f0f4f2;border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:10px;font-size:12px;color:var(--muted);line-height:1.7}
.appcheck-info b{color:var(--gdark);display:block;margin-bottom:4px}

/* ══════════════════════════════════════
   [22] ★ v17: LIVE TRACK OVERLAY — شاشة تتبع الرحلة الحية (القديمة)
   ملاحظة: استُبدلت بـ activeTripOverlay في v17.1
══════════════════════════════════════ */
#liveTrackOverlay{
  display:none;position:fixed;inset:0;z-index:5500;
  background:#f0f4f2;flex-direction:column;
}
#liveTrackOverlay.show{display:flex;animation:fadeIn .3s ease}
.lto-header{
  background:linear-gradient(135deg,#1D9E75,#0F6E56);
  padding:1rem 1.25rem;
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;
}
.lto-header-info{flex:1}
.lto-header-info h2{font-size:16px;font-weight:900;color:#fff;margin-bottom:2px}
.lto-header-info p{font-size:12px;color:rgba(255,255,255,.82)}
.lto-close-btn{background:rgba(255,255,255,.2);border:none;border-radius:10px;width:36px;height:36px;cursor:pointer;color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center}
.lto-map{flex:1;min-height:0;position:relative}
#liveTrackMap{width:100%;height:100%;background:#e8f0eb}
.lto-panel{
  background:#fff;border-top:1px solid var(--border);
  padding:1rem 1.25rem 1.5rem;flex-shrink:0;
  border-radius:20px 20px 0 0;
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
}
.lto-status-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.lto-pulse-dot{width:12px;height:12px;border-radius:50%;background:var(--green);flex-shrink:0;animation:ltoPulse 1.5s ease-in-out infinite}
@keyframes ltoPulse{0%,100%{box-shadow:0 0 0 0 rgba(29,158,117,.5)}70%{box-shadow:0 0 0 8px rgba(29,158,117,0)}}  /* نبضة خضراء */
.lto-status-txt{font-size:14px;font-weight:800;color:var(--gdark)}
.lto-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.lto-info-item{background:var(--glight);border-radius:12px;padding:10px 12px;text-align:center}
.lto-info-item .lto-val{font-size:20px;font-weight:900;color:var(--gdark)}
.lto-info-item .lto-lbl{font-size:11px;color:var(--gdark);opacity:.75;font-weight:700}
.lto-driver-row{display:flex;align-items:center;gap:10px;background:#f4f8f6;border-radius:12px;padding:10px 12px;margin-bottom:12px}
.lto-driver-avatar{width:42px;height:42px;border-radius:50%;background:var(--gmed);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0;border:2.5px solid var(--green)}
.lto-driver-info{flex:1}
.lto-driver-name{font-size:14px;font-weight:800;color:var(--text)}
.lto-driver-sub{font-size:11.5px;color:var(--muted)}
.lto-call-btn{background:var(--blue);color:#fff;border:none;border-radius:10px;padding:8px 14px;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px}
.lto-actions{display:flex;gap:8px}
.lto-chat-open-btn{flex:1;background:var(--green);color:#fff;border:none;border-radius:12px;padding:11px;font-family:var(--font);font-size:14px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
.lto-done-btn{flex:1;background:var(--blue);color:#fff;border:none;border-radius:12px;padding:11px;font-family:var(--font);font-size:14px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}

/* ══════════════════════════════════════
   [23] ★ v17: CHAT OVERLAY — شاشة الدردشة الكاملة
══════════════════════════════════════ */
#chatOverlay{
  display:none;position:fixed;inset:0;z-index:6500;
  background:#f0f4f2;flex-direction:column;
}
#chatOverlay.show{display:flex;animation:slideUpFull .3s cubic-bezier(.34,1.1,.64,1)}
@keyframes slideUpFull{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
.chat-header{
  background:linear-gradient(135deg,#1D9E75,#0F6E56);
  padding:1rem 1.25rem;
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;
}
.chat-header-info{flex:1}
.chat-header-info h2{font-size:16px;font-weight:900;color:#fff;margin-bottom:1px}
.chat-header-info p{font-size:11.5px;color:rgba(255,255,255,.8)}
.chat-close-btn{background:rgba(255,255,255,.2);border:none;border-radius:10px;width:36px;height:36px;cursor:pointer;color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center}
.chat-messages{
  flex:1;min-height:0;overflow-y:auto;
  padding:1rem;display:flex;flex-direction:column;gap:8px;
}
.chat-messages::-webkit-scrollbar{width:4px}
.chat-messages::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}
.chat-bubble-wrap{display:flex;flex-direction:column}
.chat-bubble-wrap.mine{align-items:flex-start}    /* رسائلي على اليمين (RTL → اليسار) */
.chat-bubble-wrap.theirs{align-items:flex-end}    /* رسائل الطرف الآخر على اليسار */
.chat-bubble{
  max-width:80%;padding:10px 14px;border-radius:16px;
  font-size:14px;font-weight:600;line-height:1.5;
  word-break:break-word;
}
.chat-bubble-wrap.mine .chat-bubble{
  background:var(--green);color:#fff;
  border-bottom-right-radius:4px;
}
.chat-bubble-wrap.theirs .chat-bubble{
  background:#fff;color:var(--text);border:1px solid var(--border);
  border-bottom-left-radius:4px;
}
.chat-time{font-size:10.5px;color:var(--muted);margin-top:3px;padding:0 4px}
.chat-sender{font-size:11px;color:var(--muted);margin-bottom:2px;padding:0 4px;font-weight:700}
.chat-empty{text-align:center;padding:3rem 1rem;color:#bbb;font-size:13px}
.chat-empty i{font-size:36px;display:block;margin-bottom:8px;color:#ddd}
.chat-input-bar{
  background:#fff;border-top:1px solid var(--border);
  padding:.85rem 1rem;display:flex;gap:8px;align-items:flex-end;
  flex-shrink:0;
}
#chatInput{
  flex:1;border:1.5px solid var(--border);border-radius:22px;
  padding:10px 16px;font-size:14px;font-family:var(--font);
  resize:none;outline:none;max-height:100px;min-height:42px;
  background:#f8fbf9;direction:rtl;margin:0;
  transition:border-color .2s;
}
#chatInput:focus{border-color:var(--green);background:#fff}
.chat-send-btn{
  width:42px;height:42px;border-radius:50%;background:var(--green);
  border:none;cursor:pointer;color:#fff;font-size:18px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:var(--shadow-green);transition:transform .15s;
}
.chat-send-btn:active{transform:scale(.9)}

/* ★ v17: Chat FAB — زر الدردشة العائم يظهر أثناء الرحلة */
.chat-fab{
  display:none;position:fixed;bottom:28px;left:20px;z-index:5400;
  width:56px;height:56px;border-radius:50%;
  background:var(--green);color:#fff;border:none;
  font-size:24px;cursor:pointer;
  box-shadow:0 6px 20px rgba(29,158,117,.5);
  align-items:center;justify-content:center;
  animation:fabIn .4s cubic-bezier(.34,1.56,.64,1);
}
.chat-fab.visible{display:flex}  /* يُظهره عند الرحلة النشطة */
@keyframes fabIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.chat-fab-badge{
  position:absolute;top:-2px;left:-2px;
  width:18px;height:18px;border-radius:50%;
  background:var(--red);color:#fff;
  font-size:10px;font-weight:900;
  display:none;align-items:center;justify-content:center;
  border:2px solid #fff;
}
.chat-fab-badge.show{display:flex}  /* شارة عدد الرسائل غير المقروءة */

/* ══════════════════════════════════════
   [24] ★ v17.1: ACTIVE TRIP OVERLAY — شاشة الرحلة النشطة الكاملة
   تظهر للسائق والراكب معاً أثناء تنفيذ الرحلة
══════════════════════════════════════ */
#activeTripOverlay{
  display:none;position:fixed;inset:0;z-index:5200;
  background:#f0f4f2;flex-direction:column;overflow-y:auto;
}
#activeTripOverlay.show{display:flex;animation:tripSlideIn .4s cubic-bezier(.22,1,.36,1)}
@keyframes tripSlideIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
.atp-header{
  background:linear-gradient(135deg,#1D9E75,#0F6E56);
  padding:1rem 1.25rem;display:flex;align-items:center;gap:12px;flex-shrink:0;
  position:sticky;top:0;z-index:10;  /* ثابت أعلى الشاشة عند السكرول */
}
.atp-header-info{flex:1}
.atp-header-info h2{font-size:16px;font-weight:900;color:#fff;margin-bottom:1px}
.atp-header-info p{font-size:11.5px;color:rgba(255,255,255,.82)}
.atp-header-badge{background:rgba(255,255,255,.22);color:#fff;font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px}
.atp-map-wrap{position:relative;flex-shrink:0;height:230px}
#activeTripMap{width:100%;height:100%;background:#e8f0eb}
.atp-body{flex:1;padding:1rem;display:flex;flex-direction:column;gap:10px}
.atp-person-card{
  background:#fff;border-radius:18px;border:1px solid var(--border);
  padding:14px 16px;display:flex;align-items:center;gap:14px;
  box-shadow:var(--shadow-sm);
}
.atp-avatar{
  width:56px;height:56px;border-radius:50%;
  background:var(--gmed);display:flex;align-items:center;justify-content:center;
  font-size:22px;color:#fff;flex-shrink:0;
  border:3px solid var(--green);overflow:hidden;
}
.atp-avatar img{width:100%;height:100%;object-fit:cover}
.atp-person-info{flex:1}
.atp-person-name{font-size:15px;font-weight:900;color:var(--text)}
.atp-person-sub{font-size:12px;color:var(--muted);margin-top:2px}
.atp-person-vehicle{font-size:11.5px;color:var(--gdark);background:var(--glight);border-radius:20px;padding:3px 9px;font-weight:700;display:inline-block;margin-top:4px}
.atp-call-pill{background:var(--blue);color:#fff;border:none;border-radius:22px;padding:8px 16px;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;text-decoration:none;flex-shrink:0}
.atp-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}   /* المسافة / الوقت / السعر */
.atp-stat{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 8px;text-align:center;box-shadow:var(--shadow-sm)}
.atp-stat-val{font-size:20px;font-weight:900;color:var(--gdark)}
.atp-stat-lbl{font-size:10.5px;color:var(--muted);font-weight:700;margin-top:2px}
.atp-status-bar{
  background:#fff;border-radius:14px;border:1px solid var(--border);
  padding:12px 14px;display:flex;align-items:center;gap:10px;
  box-shadow:var(--shadow-sm);
}
.atp-pulse{width:12px;height:12px;border-radius:50%;background:var(--green);flex-shrink:0;animation:ltoPulse 1.5s ease-in-out infinite}
.atp-status-txt{font-size:13.5px;font-weight:800;color:var(--gdark);flex:1}
.atp-actions{display:flex;gap:8px;margin-bottom:4px}
.atp-chat-btn{
  flex:1;background:var(--green);color:#fff;border:none;border-radius:13px;
  padding:13px;font-family:var(--font);font-size:14px;font-weight:800;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
  box-shadow:var(--shadow-green);
}
.atp-done-btn{
  flex:1;background:var(--blue);color:#fff;border:none;border-radius:13px;
  padding:13px;font-family:var(--font);font-size:14px;font-weight:800;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
}
.atp-cancel-btn{
  width:100%;background:transparent;color:var(--red);border:1.5px solid var(--red);
  border-radius:13px;padding:11px;font-family:var(--font);font-size:13px;font-weight:800;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
  margin-bottom:16px;
}

/* ★ v17.1: ACCEPT LOADER — شاشة تحميل قبول الرحلة */
#acceptLoader{
  display:none;position:fixed;inset:0;z-index:9000;
  background:rgba(15,110,86,.92);backdrop-filter:blur(6px);
  flex-direction:column;align-items:center;justify-content:center;
}
#acceptLoader.show{display:flex;animation:fadeIn .2s ease}
.accept-loader-ring{
  width:80px;height:80px;border-radius:50%;
  border:5px solid rgba(255,255,255,.2);border-top-color:#fff;
  animation:spin 0.9s linear infinite;margin-bottom:20px;
}
.accept-loader-txt{font-size:17px;font-weight:800;color:#fff;text-align:center}
.accept-loader-sub{font-size:13px;color:rgba(255,255,255,.75);margin-top:6px}

/* ★ v17.1: PROXIMITY BADGE — شارة قرب الراكب من السائق */
.proximity-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:#e0f2fe;color:#0369a1;
  font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px;
}
.proximity-badge.near{background:var(--glight);color:var(--gdark)}  /* أقل من كيلومتر */
.rcard-wrap{position:relative}
.closest-tag{
  position:absolute;top:-8px;right:12px;z-index:2;
  background:var(--green);color:#fff;font-size:10px;font-weight:900;
  padding:2px 8px;border-radius:20px;box-shadow:var(--shadow-green);
}

/* ★ v17.1: DRIVER ACTIVE TRIP BANNER — بانر الرحلة النشطة في قائمة السائق */
.driver-active-banner{
  background:linear-gradient(135deg,#1D9E75,#0F6E56);
  border-radius:16px;padding:14px 16px;margin-bottom:12px;
  display:flex;align-items:center;gap:12px;cursor:pointer;
  box-shadow:var(--shadow-green);position:relative;overflow:hidden;
  animation:tripSlideIn .4s cubic-bezier(.22,1,.36,1);
}
.driver-active-banner::before{
  content:'';position:absolute;left:-20px;top:-20px;
  width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.08);
}
.dab-icon{font-size:28px;color:#fff;flex-shrink:0;position:relative;z-index:1}
.dab-info{flex:1;position:relative;z-index:1}
.dab-title{font-size:14px;font-weight:900;color:#fff}
.dab-sub{font-size:11.5px;color:rgba(255,255,255,.82);margin-top:2px}
.dab-arrow{color:rgba(255,255,255,.7);font-size:20px;position:relative;z-index:1}

/* Responsive — تعديلات للشاشات الصغيرة جداً */
@media(max-width:380px){.app{padding:.5rem}.header-text h1{font-size:16px}}

/* ══════════════════════════════════════
   [25] ★ v18: USER CHIP — شريحة اسم المستخدم في الهيدر
══════════════════════════════════════ */
.user-chip{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.2);border-radius:22px;
  padding:5px 10px 5px 6px;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.3);
  transition:background .2s;
}
.user-chip:active{background:rgba(255,255,255,.3)}
.user-chip-avatar{
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;overflow:hidden;flex-shrink:0;
}
.user-chip-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.user-chip-name{font-size:12px;font-weight:800;color:#fff;max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ══════════════════════════════════════
   [26] ★ v18: ACCOUNT MENU — قائمة حساب المستخدم المنسدلة
══════════════════════════════════════ */
.acct-menu-box{
  position:absolute;top:70px;left:50%;transform:translateX(-50%);
  width:300px;background:#fff;border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.2);overflow:hidden;
  animation:slideDown .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes slideDown{from{opacity:0;transform:translateX(-50%) translateY(-15px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.acct-menu-header{
  background:linear-gradient(135deg,#1D9E75,#0F6E56);
  padding:18px 16px;display:flex;align-items:center;gap:12px;
}
.acct-menu-avatar{
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;overflow:hidden;flex-shrink:0;
  border:2px solid rgba(255,255,255,.4);
}
.acct-menu-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.acct-menu-info{flex:1}
.acct-menu-name{font-size:15px;font-weight:900;color:#fff}
.acct-menu-email{font-size:11px;color:rgba(255,255,255,.8);margin-top:2px}
.acct-menu-items{padding:10px 8px}
.acct-menu-item{
  width:100%;background:none;border:none;cursor:pointer;
  font-family:var(--font);font-size:14px;font-weight:700;
  color:var(--text);padding:12px 14px;border-radius:12px;
  display:flex;align-items:center;gap:10px;text-align:right;
  transition:background .15s;
}
.acct-menu-item:hover,.acct-menu-item:active{background:var(--glight)}
.acct-menu-item i{color:var(--green);font-size:18px}
.acct-menu-divider{height:1px;background:var(--border);margin:6px 8px}
.acct-logout{color:var(--red)!important}   /* زر تسجيل الخروج بالأحمر */
.acct-logout i{color:var(--red)!important}

/* ══════════════════════════════════════
   [27] ★ v18: GEOCODING INPUTS — حقول البحث بالأماكن
══════════════════════════════════════ */
.geo-inputs-wrap{
  background:#f4f8f6;border-radius:14px;
  border:1.5px solid var(--border);margin-bottom:12px;overflow:visible;
}
.geo-input-row{display:flex;align-items:flex-start;gap:0;padding:10px 12px;position:relative}
.geo-icon{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;margin-left:10px;margin-top:18px;
}
.geo-from-icon{background:var(--glight);color:var(--gdark)}  /* أيقونة نقطة البداية */
.geo-to-icon{background:#FCEBEB;color:var(--red)}             /* أيقونة نقطة الوصول */
.geo-input-inner{flex:1;position:relative}
.geo-input-inner label{font-size:11.5px;color:var(--muted);font-weight:700;margin-bottom:3px}
.geo-input-inner input{margin-bottom:0;background:transparent;border:none;border-bottom:1.5px solid var(--border);border-radius:0;padding:6px 0;font-size:14px}
.geo-input-inner input:focus{border-bottom-color:var(--green);box-shadow:none;background:transparent}
.geo-divider{height:1px;background:var(--border);margin:0 12px}
.geo-suggestions{
  position:absolute;top:100%;right:0;left:0;z-index:2000;
  background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-md);max-height:180px;overflow-y:auto;display:none;
}
.geo-suggestions.show{display:block}
.geo-sug-item{
  padding:10px 14px;font-size:13px;color:var(--text);cursor:pointer;
  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;
  transition:background .15s;
}
.geo-sug-item:last-child{border-bottom:none}
.geo-sug-item:hover,.geo-sug-item:active{background:var(--glight)}
.geo-sug-item i{color:var(--muted);font-size:14px;flex-shrink:0}
.geo-loading{padding:10px 14px;font-size:12px;color:var(--muted);text-align:center}

/* ══════════════════════════════════════
   [28] ★ v18/v21: CHAT NOTIFICATION POPUP — نافذة إشعار رسالة جديدة
══════════════════════════════════════ */
.chat-notif-box{
  background:#fff;border-radius:18px;
  box-shadow:0 12px 40px rgba(0,0,0,.2);
  overflow:hidden;
  animation:notifSlideIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes notifSlideIn{from{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.chat-notif-header{
  display:flex;align-items:center;gap:8px;
  padding:12px 14px;border-bottom:1px solid var(--border);
}
.chat-notif-msg{
  padding:12px 14px;font-size:14px;color:var(--text);
  line-height:1.5;max-height:80px;overflow:hidden;
  text-overflow:ellipsis;
}
.chat-notif-reply-btn{
  width:100%;background:var(--green);color:#fff;border:none;
  padding:11px;font-family:var(--font);font-size:13px;font-weight:800;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
  transition:opacity .2s;
}
.chat-notif-reply-btn:active{opacity:.85}

/* ★ v18: DRIVER RIDE LIFECYCLE — زر بدء الرحلة (يظهر للسائق فقط قبل البدء) */
.atp-start-btn{
  flex:1;background:var(--blue);color:#fff;border:none;border-radius:13px;
  padding:13px;font-family:var(--font);font-size:14px;font-weight:800;
  cursor:pointer;display:none;align-items:center;justify-content:center;gap:7px;
}
.atp-start-btn.show{display:flex}

/* ══════════════════════════════════════
   [29] ★ v18: HISTORY TAB — بطاقات سجل الرحلات
══════════════════════════════════════ */
.history-card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:1rem 1.15rem;margin-bottom:10px;box-shadow:var(--shadow-sm);
  opacity:.85;
}
.history-card .hc-route{font-size:13px;color:var(--muted);margin:4px 0}
.history-card .hc-meta{font-size:12px;color:#9aada5;margin-bottom:6px}
.history-card .hc-price{font-size:16px;font-weight:900;color:var(--gdark)}
.history-empty{text-align:center;padding:3rem 1rem;color:#bbb;font-size:14px}
.history-empty i{font-size:40px;display:block;margin-bottom:10px;color:#ddd}

/* ★ v18: تمييز بصري للرحلات المنتهية */
.rcard.done {
  opacity: 0.7;
  background: #f8f8f8;
  border-style: dashed;
}

/* ══════════════════════════════════════
   [30] ★ v21: INLINE CHAT PANEL — الدردشة المدمجة داخل شاشة الرحلة
   بديل للفتح في شاشة كاملة — يظهر ويختفي بأنيميشن ناعم
══════════════════════════════════════ */
.atp-chat-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0 0 10px 0;
  box-shadow: var(--shadow-sm);
  transition: max-height .35s ease, opacity .3s ease;
  max-height: 0;     /* مخفي افتراضياً */
  opacity: 0;
  pointer-events: none;
}
.atp-chat-panel.open {
  max-height: 360px; /* ينفتح للأسفل */
  opacity: 1;
  pointer-events: auto;
}
.atp-chat-panel-header {
  background: linear-gradient(135deg, var(--green), #0f7d53);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.atp-chat-panel-header span {
  flex: 1;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.atp-chat-panel-close {
  background: rgba(255,255,255,.2);
  border: none;
  border-radius: 50%;
  width: 28px; height: 28px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.atp-chat-toggle-btn {
  flex: 1;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 13px;
  padding: 12px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: 0 4px 14px rgba(29,158,117,.35);
  position: relative;
  transition: background .2s, transform .15s;
}
.atp-chat-toggle-btn:active { transform: scale(.97); }
.atp-chat-toggle-btn.has-unread {
  background: var(--red, #e24b4a);
  animation: chatPulse 1s ease-in-out 3;  /* ينبض 3 مرات عند رسالة جديدة */
}
@keyframes chatPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(226,75,74,.45); }
  50%      { box-shadow: 0 0 0 10px rgba(226,75,74,0); }
}
.atp-chat-unread-dot {
  position: absolute;
  top: -6px; right: -6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #e24b4a;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.atp-chat-unread-dot.show { display: flex; }  /* يظهر فقط عند وجود رسائل غير مقروءة */
.atp-inline-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
}
.atp-inline-input-bar {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: #f8fbf9;
  flex-shrink: 0;
}
.atp-inline-input {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 22px;
  padding: 8px 14px;
  font-size: 14px;
  font-family: var(--font);
  background: #fff;
  outline: none;
  resize: none;
  transition: border-color .2s;
}
.atp-inline-input:focus { border-color: var(--green); }
.atp-inline-send {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--green);
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(29,158,117,.4);
  transition: transform .15s;
}
.atp-inline-send:active { transform: scale(.92); }

/* ══════════════════════════════════════
   [31] ★ v22: INPUT MODE TOGGLE — زر التبديل بين الإدخال اليدوي والخريطة
══════════════════════════════════════ */
.input-mode-toggle {
  display: flex;
  background: #f0f4f2;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 14px;
  gap: 4px;
}
.imt-btn {
  flex: 1;
  padding: 9px 6px;
  border: none;
  border-radius: 9px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.imt-btn.active {
  background: #fff;
  color: var(--green);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);  /* الوضع النشط بخلفية بيضاء */
}
.manual-inputs-wrap {
  display: none;
  flex-direction: column;
  gap: 10px;
}
.manual-inputs-wrap.show { display: flex; }  /* يظهر في الوضع اليدوي */
.manual-price-row {
  background: linear-gradient(135deg,#f0faf5,#e8f5ee);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
}
.manual-price-row label {
  font-size: 13px;
  font-weight: 800;
  color: var(--green);
  display: block;
  margin-bottom: 6px;
}
.manual-price-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0 12px;
}
.manual-price-input-wrap i { color: var(--muted); font-size: 16px; }
.manual-price-input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 0;
  font-size: 18px;
  font-weight: 900;
  font-family: var(--font);
  color: var(--text);
  background: transparent;
}
.manual-price-input-wrap span {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.manual-info-note {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 4px;
}