/* =========================================================================
   إضافات ما بعد آخر بناء لـTailwind
   -------------------------------------------------------------------------
   ملف صغير مستقل حتى تعديل بسيط بالواجهة ما يكلّف إعادة بناء Tailwind.
   المفروض تنضم هالقواعد لـResources/Private/Tailwind/taxi.css بأول بناء
   جاي، وبعدها بينحذف هالملف.
   ========================================================================= */

/* --- شريط «شو بدك تطلب؟» فوق الخريطة --- */
.ts-hailtop {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--ts-surface, #fff);
    box-shadow: var(--tsx-shadow, 0 10px 30px -18px rgba(20, 24, 31, .5));
}

.ts-hailtop__title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ts-ink, #16202e);
}

.ts-hailtop__title small {
    font-weight: 400;
    font-size: 11px;
    opacity: .6;
    margin-inline-start: 6px;
}

/* التبويبات نفسها مستايَلة بـtailwind.css (.ts-services / .ts-service) —
   هون بس منخلّيها تتمدّد على العرض الكامل لما يكون في محل */
.ts-hailtop .ts-services { margin-bottom: 0; }

/* سعر فاضي (قبل ما يحدّد الزبون مسار): ما منترك سطر فاضي يكبّر التبويب */
.ts-hailtop .ts-service__price:empty { display: none; }

/* --- سطر «الدفع للسائق مباشرةً» مكان اختيار طريقة الدفع --- */
.ts-pay__note {
    margin: 10px 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(22, 32, 46, .04);
}

/* --- بطاقة مستحقّات المنصة بلوحة السائق --- */
.ts-due {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: #fdf3d8;
    border: 1px solid #e8c15a;
    color: #16202e;
}

.ts-due__label { font-size: 12px; opacity: .75; }
.ts-due__amount { font-size: 26px; font-weight: 800; line-height: 1.1; }
.ts-due small { font-size: 11px; opacity: .75; }

.ts-due__form { display: grid; gap: 8px; margin-top: 10px; }
.ts-due__history { margin-top: 12px; font-size: 12px; }
.ts-due__history summary { cursor: pointer; opacity: .75; }

.ts-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
.ts-table th,
.ts-table td { border-bottom: 1px solid rgba(22, 32, 46, .12); padding: 5px 6px; text-align: right; }

/* --- «الشبيرة»: حساب السائق موقوف لعدم تحويل العمولة --- */
.ts-locked {
    border: 2px solid #dc2626;
    background: #fdeaea;
    color: #16202e;
}

.ts-locked h3 { color: #b91c1c; margin-top: 0; }

/* نوع المركبة مطلوب: لفتة خفيفة على الشريط لحتى يختار */
.ts-hailtop .ts-services.is-required {
    outline: 2px dashed rgba(245, 183, 49, .75);
    outline-offset: 4px;
    border-radius: 12px;
}

/* --- «ليش ما عم بشوفوني الزبائن؟» — قائمة فحص ظهور السائق --- */
.ts-vis {
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(220, 38, 38, .07);
    border: 1px solid rgba(220, 38, 38, .3);
}

.ts-vis--ok {
    background: rgba(22, 163, 74, .08);
    border-color: rgba(22, 163, 74, .3);
}

.ts-vis summary { cursor: pointer; }
.ts-vis__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ts-vis__list li { display: flex; gap: 8px; align-items: flex-start; }
.ts-vis__mark { line-height: 1.3; }
.ts-vis__text { display: flex; flex-direction: column; }
.ts-vis__text strong { font-size: 13px; }
.ts-vis__text small { font-size: 11px; opacity: .75; }
.ts-vis__list li.is-ok .ts-vis__text strong { opacity: .7; font-weight: 500; }

/* --- اختيار فئات الخدمة بنموذج السائق --- */
.ts-svcpick {
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(22, 32, 46, .04);
    display: grid;
    gap: 6px;
}

.ts-svcpick__title { margin: 0 0 4px; font-size: 12px; font-weight: 700; opacity: .8; }

/* --- تحديد موقع السائق يدوياً --- */
.ts-setloc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(22, 32, 46, .05);
}

.ts-setloc__text { flex: 1 1 200px; font-size: 12px; opacity: .8; }

/* --- خطوات الرحلة عند السائق --- */
.ts-stages { margin-top: 10px; }

.ts-stages__track {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    counter-reset: stage;
}

.ts-stages__track li {
    flex: 1;
    font-size: 10px;
    text-align: center;
    padding: 6px 4px;
    border-radius: 8px;
    background: rgba(22, 32, 46, .06);
    opacity: .55;
}

.ts-stages__track li.is-done {
    background: rgba(22, 163, 74, .16);
    opacity: 1;
    font-weight: 700;
}

.ts-stages__now { margin: 0 0 8px; font-size: 13px; }

/* =========================================================================
   «عم ندوّر على سائق» — الإشارة البصرية على الخريطة
   -------------------------------------------------------------------------
   الطلب المعلّق كان يقعد بلا أي حركة: خريطة ساكنة و«٠ سائق قريب»،
   فالزبون بيظن إنه الموقع علّق. هون الدبوس بيومض والدائرة بتكبر مع
   نصف قطر البحث الحقيقي — فبيبيّن إنه في شي عم يصير.
   ========================================================================= */

/* الدبوس بيومض شوي شوي */
.ts-marker.is-searching {
    animation: ts-pin-pulse 1.8s ease-in-out infinite;
}

@keyframes ts-pin-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(245, 183, 49, .55); }
    50%      { transform: scale(1.12); box-shadow: 0 0 0 14px rgba(245, 183, 49, 0); }
}

/* حلقة البحث الثابتة: تنفّس خفيف بالشفافية */
.leaflet-overlay-pane path.ts-searchring {
    animation: ts-ring-breathe 2.6s ease-in-out infinite;
}

@keyframes ts-ring-breathe {
    0%, 100% { fill-opacity: .07; stroke-opacity: .85; }
    50%      { fill-opacity: .16; stroke-opacity: .45; }
}

/* موجة الرادار بتنحرّك بالجافاسكربت (نصف قطر جغرافي) مو بالـCSS.
   السبب: transform: scale() على مسار SVG جوّا طبقة ليفلِت بينضرب
   بتحويلات الطبقة، فالدائرة كانت تطير لمحل تاني بعيد عن الدبوس. */

/* من بيفضّل حركة أقل: منكتفي بالتنفّس بلا تكبير */
@media (prefers-reduced-motion: reduce) {
    .ts-marker.is-searching { animation: none; }
}

/* شريط «عم ندوّر» فوق تفاصيل الطلب */
.ts-searching {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(245, 183, 49, .14);
    border: 1px solid rgba(245, 183, 49, .45);
    font-size: 12px;
}

.ts-searching[hidden] { display: none !important; }

.ts-searching__dots { display: inline-flex; gap: 3px; }
.ts-searching__dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d99a12;
    animation: ts-dots 1.2s ease-in-out infinite;
}
.ts-searching__dots i:nth-child(2) { animation-delay: .15s; }
.ts-searching__dots i:nth-child(3) { animation-delay: .3s; }

@keyframes ts-dots {
    0%, 100% { opacity: .25; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(-3px); }
}

/* --- فاتورة رسوم الخدمة + باركود شام كاش --- */
.ts-invoice {
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(22, 32, 46, .15);
}

.ts-invoice.is-overdue { border-color: #dc2626; background: #fdeaea; }

.ts-invoice__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px;
    font-size: 12px;
    margin-bottom: 10px;
}

.ts-invoice__due { opacity: .75; }
.ts-invoice.is-overdue .ts-invoice__due { color: #b91c1c; opacity: 1; font-weight: 700; }

.ts-invoice__body { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.ts-invoice__qr {
    background: #fff;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid rgba(22, 32, 46, .12);
    line-height: 0;
    min-width: 140px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ts-invoice__qr img { width: 140px; height: 140px; image-rendering: pixelated; }
.ts-invoice__qr.is-failed::after { content: 'ما قدرنا نرسم الباركود — حوّل يدوياً'; font-size: 11px; line-height: 1.4; }

.ts-invoice__side { flex: 1 1 180px; display: flex; flex-direction: column; gap: 2px; }
.ts-invoice__side small { font-size: 11px; opacity: .75; }

/* --- إلغاء الطلب مع سبب --- */
.ts-cancel { display: inline-block; }
.ts-cancel > summary { cursor: pointer; list-style: none; display: inline-block; }
.ts-cancel > summary::-webkit-details-marker { display: none; }
.ts-cancel__form { display: grid; gap: 8px; margin-top: 8px; }

/* --- بطاقة السائق المختار قبل الطلب --- */
.ts-picked {
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(245, 183, 49, .12);
    border: 1px solid rgba(245, 183, 49, .5);
}

.ts-picked[hidden] { display: none !important; }
.ts-picked__head { font-size: 11px; font-weight: 700; opacity: .7; margin-bottom: 6px; }
.ts-picked__row { display: flex; align-items: center; gap: 10px; }
.ts-picked__avatar { font-size: 24px; line-height: 1; }
.ts-picked__body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ts-picked__body strong { font-size: 14px; }
.ts-picked__body small { font-size: 11px; opacity: .75; }
.ts-picked .ts-hint { margin: 8px 0 0; font-size: 11px; }

/* --- لوحة السائق على الموبايل: شريط التوفّر دايماً بالمتناول --- */
@media (max-width: 860px) {
    .ts-availability {
        position: sticky;
        top: 0;
        z-index: 40;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        margin: -12px -12px 10px;
        padding: 10px 12px;
        background: var(--ts-surface, #fff);
        border-bottom: 1px solid rgba(22, 32, 46, .12);
        box-shadow: 0 6px 14px -12px rgba(20, 24, 31, .6);
    }

    .ts-availability .ts-btn { flex: 1 1 auto; }

    /* الأزرار والحقول أكبر شوي عالموبايل — الإصبع مو الفأرة */
    .ts-stages__track li { font-size: 9px; padding: 5px 2px; }
    .ts-invoice__body { justify-content: center; }
    .ts-invoice__qr img { width: 120px; height: 120px; }
}

/* --- شريط حساب الراكب (لوحته المصغّرة) --- */
.ts-me {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--ts-surface, #fff);
    box-shadow: var(--tsx-shadow, 0 10px 30px -18px rgba(20, 24, 31, .5));
}

.ts-me__who { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; }
.ts-me__avatar { font-size: 22px; line-height: 1; }
.ts-me__who strong { display: block; font-size: 14px; }
.ts-me__who small { font-size: 11px; opacity: .7; }

.ts-me__links { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-me__link {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    background: rgba(22, 32, 46, .06);
}
.ts-me__link:hover { background: rgba(245, 183, 49, .25); }

.ts-me__warn {
    flex: 1 1 100%;
    margin: 0;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(245, 183, 49, .18);
}
.ts-me__warn.is-blocked { background: rgba(220, 38, 38, .12); color: #b91c1c; font-weight: 600; }

/* --- «ليش ما وصلني طلب؟» بلوحة السائق --- */
.ts-why {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(245, 183, 49, .14);
    border: 1px solid rgba(245, 183, 49, .45);
    font-size: 12px;
    text-align: start;
}

.ts-why summary { cursor: pointer; font-weight: 700; }
.ts-why ul { margin: 8px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.ts-why li { line-height: 1.5; }

/* --- زر تفعيل الإشعارات --- */
.ts-push { margin: 10px 0; }
.ts-push .ts-btn.is-on { background: rgba(22, 163, 74, .15); color: #15803d; }
.ts-push .ts-hint { margin: 6px 0 0; font-size: 11px; }

/* --- «عم ندوّر على سيارة» بنموذج الطلب (قبل ما يطلب) --- */
.ts-scanning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(245, 183, 49, .14);
    border: 1px solid rgba(245, 183, 49, .45);
    font-size: 12px;
}

.ts-scanning[hidden] { display: none !important; }

/* --- شرح خيارات الطلب (سائقة فقط / قبول تلقائي) --- */
.ts-optnote {
    display: grid;
    gap: 4px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(22, 32, 46, .05);
    font-size: 11px;
    line-height: 1.6;
}

.ts-optnote[hidden] { display: none !important; }

/* --- مجموعات العروض (مزاد عكسي مفتوح) ---------------------------------
   العروض انقسمت مجموعتين لأنه قرار الزبون مختلف بكل وحدة: «وافقوا بسعرك»
   بيختار منهن واحد، و«عروض أعلى» بيقبل أو يرفض كل واحد لحاله. */
.ts-offers__group {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--ts-surface-2, #f6f8fb);
}

.ts-offers__group + .ts-offers__group { margin-top: 4px; }

.ts-offers__group .ts-offers__title {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
}

.ts-offers__group .ts-hint { margin: 0 0 8px; }

/* --- نطاق عمل السائق -----------------------------------------------
   السائق بيحدّد كم كيلومتر حوالي موقعه بيقبل ياخد طلبات. الرقم لازم
   يبين وهو عم يسحب، مو بعد الحفظ. */
.ts-radius {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--ts-surface-2, #f6f8fb);
}

.ts-radius__label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
}

.ts-radius__value {
    font-size: 13px;
    font-weight: 800;
    color: var(--ts-accent, #e9a412);
}

.ts-radius__range {
    width: 100%;
    margin: 8px 0 2px;
    accent-color: var(--ts-accent, #e9a412);
}

.ts-radius__scale {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    opacity: .6;
    margin-bottom: 8px;
}

.ts-radius .ts-hint { margin: 6px 0 0; }

/* --- العدّ التنازلي للعرض -------------------------------------------
   العرض صالح ثواني معدودة. الشريط بيفرغ مع الوقت حتى يكون القرار
   مستعجل بشكل مرئي، مو رقم صغير بزاوية. */
.ts-offer__timer {
    position: relative;
    margin: 6px 0;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--ts-surface-2, #eef2f7);
    overflow: hidden;
    font-size: 11px;
}

.ts-offer__timer-bar {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--ts-green, #16a34a) 22%, transparent);
    transition: width 1s linear;
}

.ts-offer__timer-text {
    position: relative;
    z-index: 1;
}

.ts-offer__timer.is-urgent .ts-offer__timer-bar {
    background: color-mix(in srgb, var(--ts-red, #dc2626) 26%, transparent);
}

.ts-offer__timer.is-urgent .ts-offer__timer-text {
    color: var(--ts-red, #dc2626);
    font-weight: 800;
}

/* ===== مبدّل اللغة (taxi_syria 3.9.0) ===== */
.ts-langswitch{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin:0 0 14px}
.ts-langswitch .ts-lang{appearance:none;cursor:pointer;font:inherit;font-size:13px;line-height:1;
  padding:6px 12px;border-radius:999px;border:1px solid #d9dbe0;background:#fff;color:#3a3f4a}
.ts-langswitch .ts-lang:hover{border-color:#c98a06;color:#1a1c20}
.ts-langswitch .ts-lang.is-active{background:#f5c518;border-color:#f5c518;color:#1a1c20;font-weight:600}
[dir="ltr"] .ts-langswitch{justify-content:flex-start}

/* اتجاه LTR للّغات غير العربية — يغلب أي direction:rtl مفروض بالـCSS */
.ts-app[dir="ltr"]{direction:ltr;text-align:left}
.ts-app[dir="ltr"] .ts-card,
.ts-app[dir="ltr"] .ts-message,
.ts-app[dir="ltr"] .ts-note,
.ts-app[dir="ltr"] .ts-hint,
.ts-app[dir="ltr"] fieldset,
.ts-app[dir="ltr"] legend,
.ts-app[dir="ltr"] label,
.ts-app[dir="ltr"] p,
.ts-app[dir="ltr"] h1,
.ts-app[dir="ltr"] h2,
.ts-app[dir="ltr"] h3{direction:ltr;text-align:left}
.ts-app[dir="ltr"] .ts-langswitch{justify-content:flex-start}

/* ===== اختيار الدولة + الرقم (تسجيل دولي) v3.10.0 ===== */
.ts-phone{
    display:flex;
    gap:8px;
    align-items:stretch;
    margin-top:6px;
}
.ts-phone .ts-cc{
    flex:0 0 auto;
    max-width:46%;
    min-width:120px;
    padding:10px 8px;
    border:1px solid var(--ts-border,#d0d5dd);
    border-radius:10px;
    background:#fff;
    font-size:14px;
    direction:rtl;
}
.ts-phone .ts-phone-num{
    flex:1 1 auto;
    min-width:0;
    direction:ltr;
    text-align:left;
}
.ts-app[dir="ltr"] .ts-phone .ts-cc{ direction:ltr; }
@media (max-width:420px){
    .ts-phone{ flex-wrap:wrap; }
    .ts-phone .ts-cc{ max-width:100%; flex:1 1 100%; }
}

/* 4.17: ملاحظة «المدة معدّلة حسب رحلات حقيقية» تحت تقدير الرحلة */
.ts-est-time-hint { display: block; margin-top: 2px; font-size: .78rem; color: var(--ts-text-muted, #6B6354); }
.ts-est-time-hint[hidden] { display: none; }