/* ==========================================================================
   تكاسي سوريا — طبقة الهوية والتلميع
   --------------------------------------------------------------------------
   قرارات مأخوذة عن قصد، لأن النت بسوريا ضعيف:

   • ولا صورة ولا خط ولا مكتبة جديدة — كل شي هون CSS وSVG مكتوب
     جوّا الصفحة. يعني صفر طلبات شبكة زيادة، والوزن كلّه أقل من
     ٧ كيلوبايت، وبينضغط لأقل من ٢ عند الإرسال.

   • الحركة كلها على transform وopacity بس — هدول التنتين المتصفح
     بينفّذهن على كرت الشاشة بلا ما يعيد حساب تخطيط الصفحة، فما
     بيرفّوا حتى على جهاز قديم. ما في ولا حركة بتشتغل بشكل دائم.

   • ما في backdrop-filter (الضبابية) — بتاكل بطارية ومعالج رسوميات
     على الأجهزة الضعيفة، والمكسب البصري منها ما بيسوى.

   • كل شي بينطفي مع prefers-reduced-motion، وبيخفّ على الموبايل.

   ألوان العلم منفصلة عن ألوان الواجهة عن قصد: الأخضر والأحمر
   بالواجهة محجوزين لحالة السائق (متاح/مشغول)، فألوان العلم
   إلها متغيّراتها لحالها وما بتتقاطع مع الإشارات.
   ========================================================================== */

:root {
    --tsx-flag-green: #007a3d;
    --tsx-flag-white: #ffffff;
    --tsx-flag-black: #101010;
    --tsx-flag-red:   #ce1126;

    /* شدّة ظهور العلم بالخلفية — خفّفها أو زوّدها من هون بس */
    --tsx-flag-wash: .05;

    /* ظلال أنعم وأعمق شوي من الأساسية، بتعطي إحساس ارتفاع */
    --tsx-lift-1: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 12px -6px rgba(16, 24, 40, .18);
    --tsx-lift-2: 0 2px 4px rgba(16, 24, 40, .07), 0 18px 40px -20px rgba(16, 24, 40, .40);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --tsx-flag-wash: .07;
        --tsx-lift-1: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 12px -6px rgba(0, 0, 0, .7);
        --tsx-lift-2: 0 2px 4px rgba(0, 0, 0, .55), 0 18px 40px -20px rgba(0, 0, 0, .9);
    }
}

:root[data-theme="dark"] {
    --tsx-flag-wash: .07;
    --tsx-lift-1: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 12px -6px rgba(0, 0, 0, .7);
    --tsx-lift-2: 0 2px 4px rgba(0, 0, 0, .55), 0 18px 40px -20px rgba(0, 0, 0, .9);
}


/* --------------------------------------------------------------------------
   1) العلم بالخلفية
   --------------------------------------------------------------------------
   العلم الكبير عنصر SVG مكتوب بالقالب (.ts-wallpaper)، مو صورة —
   فبيضل حاد على أي شاشة وما بيكلّف ولا طلب شبكة.

   ليش عنصر ثابت مو background-attachment: fixed؟
   لأن الأخيرة بتجبر المتصفح يعيد رسم الخلفية مع كل تمرير، وهاد
   بيتحسّ فوراً على الموبايل. عنصر position: fixed بينرسم مرة وحدة.
   -------------------------------------------------------------------------- */
/*
  العلم على كل الصفحة متل خيال: ثابت، بيغطي الشاشة كلها،
  وما بيتحرّك مع التمرير. الشفافية واطية جداً عن قصد — بيتحسّ
  أكتر ما بينشاف، وهاد المطلوب: حضور مو لافتة.
*/
.ts-wallpaper {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: var(--tsx-flag-wash);
}

/* الخلفية لازم تكون شفّافة حتى يبين العلم من وراها */
body {
    background-color: var(--tsx-bg);
}


/* --------------------------------------------------------------------------
   2) الترويسة: شريط العلم الرفيع + عمق
   -------------------------------------------------------------------------- */
/*
  الترويسة داكنة، فألوان العلم عليها بتبيّن أوضح بكتير من الخلفية
  الفاتحة. لهيك حطّينا وهج أخضر خفيف من جهة البداية — بيعطي حضور
  للعلم على كل عرض شاشة، حتى الموبايل، بلا ما نكبّر الترويسة.
*/
.ts-site-header {
    position: sticky;
    background:
        radial-gradient(90% 180% at 100% 0%,
            rgba(0, 122, 61, .32) 0%,
            rgba(0, 122, 61, 0) 62%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 60%),
        var(--tsx-night);
    box-shadow: var(--tsx-lift-1);
}

/* خط ثلاثي الألوان على حرف الترويسة العلوي — توقيع صغير مش لافتة */
.ts-site-header::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--tsx-flag-green) 0 33.34%,
        var(--tsx-flag-white) 33.34% 66.67%,
        var(--tsx-flag-black) 66.67% 100%
    );
}

/* علم الترويسة الصغير */
.ts-flag {
    display: block;
    width: 30px;
    height: 20px;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 5px rgba(0, 0, 0, .35);
}

@media (max-width: 560px) {
    .ts-flag { width: 26px; height: 17px; }
}

/* شعار التكسي: لمعة خفيفة عند المرور */
.ts-brand__mark {
    box-shadow: 0 2px 8px -2px rgba(233, 164, 18, .6);
    transition: transform .2s ease;
}
.ts-brand:hover .ts-brand__mark { transform: translateY(-1px) rotate(-3deg); }

/* روابط القائمة: خط سفلي بينمد بدل خلفية بتظهر فجأة */
.ts-nav__link {
    position: relative;
}
.ts-nav__link::after {
    content: "";
    position: absolute;
    inset-inline: 12px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--tsx-amber);
    transform: scaleX(0);
    transition: transform .18s ease;
}
.ts-nav__link:hover::after { transform: scaleX(1); }
.ts-nav__link.is-current::after { display: none; }


/* --------------------------------------------------------------------------
   3) البطاقات: حواف أنعم، ظل أعمق، ارتفاع خفيف عند المرور
   -------------------------------------------------------------------------- */
.ts-card,
.ts-panel,
.ts-sheet,
.ts-main .frame-type-textmedia,
.ts-driver-card {
    box-shadow: var(--tsx-lift-1);
    transition: box-shadow .22s ease, transform .22s ease;
}

.ts-card:hover,
.ts-panel:hover,
.ts-driver-card:hover {
    box-shadow: var(--tsx-lift-2);
    transform: translateY(-2px);
}

/* شريط ملوّن رفيع على حرف البطاقة — بيعطي ترتيب بصري بلا زحمة
 *
 * انتبه: ممنوع نحط overflow: hidden هون.
 * كانت موجودة لتقصّ الشريط عند زوايا البطاقة المدوّرة، بس overflow
 * بتقصّ كل الأولاد — يعني القوائم المنسدلة (بحث المدن) كانت تطلع
 * مقطوعة عند حرف البطاقة. بدلها منعطي الشريط نفسه نفس تدوير
 * الزوايا، فبينضبط لحاله وبتضل القوائم حرّة تطلع برّا. */
.ts-card {
    position: relative;
}
.ts-card::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--tsx-amber), var(--tsx-amber-deep));
    border-start-start-radius: inherit;
    border-end-start-radius: inherit;
    opacity: 0;
    transition: opacity .22s ease;
}
.ts-card:hover::before { opacity: 1; }


/* --------------------------------------------------------------------------
   4) الأزرار
   -------------------------------------------------------------------------- */
.ts-btn,
.ts-btn-hail,
button.ts-btn-primary,
input[type="submit"] {
    position: relative;
    transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}

.ts-btn:hover,
.ts-btn-hail:hover,
button.ts-btn-primary:hover {
    filter: brightness(1.05);
    box-shadow: 0 6px 18px -6px rgba(233, 164, 18, .75);
}

/* الضغطة: العنصر بينزل شوي — إحساس ملموس بلا كلفة */
.ts-btn:active,
.ts-btn-hail:active,
button.ts-btn-primary:active {
    transform: translateY(1px);
}

/* حلقة تركيز واضحة لمستخدمي لوحة المفاتيح */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--tsx-amber);
    outline-offset: 2px;
    border-radius: 6px;
}


/* --------------------------------------------------------------------------
   5) نقطة حالة السائق: نبضة هادية
   --------------------------------------------------------------------------
   الحركة الوحيدة المستمرة بالموقع، ومحصورة بنقطة قطرها ١٠ بكسل.
   معناها الحالة حيّة عم تتحدّث — يعني بتحمل معلومة، مو زينة.
   -------------------------------------------------------------------------- */
.ts-user__dot,
.ts-status-green::before {
    animation: ts-pulse 2.4s ease-in-out infinite;
}

@keyframes ts-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}


/* --------------------------------------------------------------------------
   6) دخول المحتوى: صعود خفيف مرة وحدة عند فتح الصفحة
   --------------------------------------------------------------------------
   بيشتغل مرة وحدة وبيخلص. التأخير المتدرّج بيخلّي الصفحة تنبني
   قدام العين بدل ما تظهر دفعة وحدة — وهاد اللي بيعطي الإحساس
   الفخم، مو الحركة الكتيرة.
   -------------------------------------------------------------------------- */
.ts-main > .ts-container > *,
.ts-hail,
.ts-card {
    animation: ts-rise .42s cubic-bezier(.2, .7, .3, 1) both;
}

.ts-main > .ts-container > *:nth-child(2) { animation-delay: .06s; }
.ts-main > .ts-container > *:nth-child(3) { animation-delay: .12s; }
.ts-main > .ts-container > *:nth-child(4) { animation-delay: .18s; }

@keyframes ts-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   7) العناوين
   -------------------------------------------------------------------------- */
.ts-main h1,
.ts-main h2 {
    position: relative;
    padding-bottom: 10px;
}

.ts-main h1::after,
.ts-main h2::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 46px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(
        90deg,
        var(--tsx-flag-green) 0 33.34%,
        var(--tsx-amber) 33.34% 66.67%,
        var(--tsx-flag-black) 66.67% 100%
    );
}


/* --------------------------------------------------------------------------
   8) التذييل: خط العلم بيقفل الصفحة متل ما فتحها
   -------------------------------------------------------------------------- */
.ts-site-footer {
    position: relative;
}
.ts-site-footer::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--tsx-flag-green) 0 33.34%,
        var(--tsx-flag-white) 33.34% 66.67%,
        var(--tsx-flag-black) 66.67% 100%
    );
}


/* --------------------------------------------------------------------------
   9) تخفيف على الأجهزة الضعيفة والشاشات الصغيرة
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    /* الظلال العميقة أغلى شي بالرسم على الموبايل */
    .ts-card:hover,
    .ts-panel:hover,
    .ts-driver-card:hover {
        box-shadow: var(--tsx-lift-1);
        transform: none;
    }
    /* على شاشة صغيرة الخلفية بتنحجب كلها تقريباً، فمنخفّفها أكتر */
    .ts-wallpaper { opacity: calc(var(--tsx-flag-wash) * .8); }
}

/* من عنده حساسية للحركة: بينطفي كل شي */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .ts-main > .ts-container > *,
    .ts-hail,
    .ts-card { animation: none; opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   10) رابط تنزيل التطبيق بالتذييل
   -------------------------------------------------------------------------- */
.ts-site-footer__link {
    color: var(--tsx-amber);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .18s ease;
}
.ts-site-footer__link:hover { border-bottom-color: var(--tsx-amber); }

.ts-site-footer__links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}


/* --------------------------------------------------------------------------
   11) شعار التكسي
   --------------------------------------------------------------------------
   الحركة كلها transform وopacity، ومحصورة بعنصر واحد صغير بالترويسة.
   ما في ولا حركة بتشتغل بشكل دائم إلا نبضة ضو السقف — وهي بطيئة
   وعلى عنصر قياسه ١١×٥ وحدة، يعني كلفتها لا شي.
   -------------------------------------------------------------------------- */
.ts-brand__mark {
    /* الشعار الجديد أعرض من القديم */
    width: 48px;
    height: 44px;
    background: linear-gradient(150deg, var(--tsx-amber), var(--tsx-amber-deep));
    overflow: hidden;
}

.ts-logo {
    overflow: visible;
}

/* جسم السيارة والشبابيك والشطرنج */
.ts-logo__body   { fill: var(--tsx-night); }
.ts-logo__glass  { fill: rgba(255, 255, 255, .82); }
.ts-logo__check  { fill: rgba(255, 255, 255, .92); }
.ts-logo__lamp   { fill: var(--tsx-night); }
.ts-logo__speed  { fill: rgba(22, 32, 46, .35); }

.ts-logo__wheel circle { fill: var(--tsx-night); }
.ts-logo__spoke {
    stroke: rgba(255, 255, 255, .55);
    stroke-width: 1.4;
    stroke-linecap: round;
    fill: none;
}

/*
  اللفّة: منحدد نقطة الدوران بمركز كل دولاب، وإلا بيلف حول زاوية
  الرسمة كلها وبيطير برّا مكانه.
*/
.ts-logo__wheel--back  { transform-origin: 18px 32px; }
.ts-logo__wheel--front { transform-origin: 35px 32px; }

/* ضو السقف: نبضة بطيئة بتخلّي الشعار حيّ بلا ما يشدّ النظر */
.ts-logo__lamp {
    animation: ts-lamp 3.2s ease-in-out infinite;
}

@keyframes ts-lamp {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

/* خط السرعة: مخفي، وبيمر لما تمرّ على الشعار */
.ts-logo__speed {
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .2s ease, transform .35s ease;
}

/*
  عند المرور: التكسي بينط لقدام شوي، والدواليب بتلف، وخط السرعة بيطلع.
  بالعربي الاتجاه معكوس، فالتقدّم لليسار — لهيك translateX سالب.
*/
.ts-brand:hover .ts-logo { transform: translateX(-2px); }
.ts-brand:hover .ts-logo__speed { opacity: 1; transform: translateX(0); }
.ts-brand:hover .ts-logo__wheel { animation: ts-roll 1.1s linear infinite; }

.ts-logo { transition: transform .25s cubic-bezier(.2, .7, .3, 1); }

@keyframes ts-roll {
    to { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ts-logo__lamp,
    .ts-brand:hover .ts-logo__wheel { animation: none; }
}