/* =====================================================================
   تكسي سوريا — طبقة الهوية المعدنية (تُحمّل بعد tailwind.css)
   بتلبّس المكوّنات الموجودة شكل معدني فخم بلا ما تغيّر أي تخطيط:
   تدرّجات وظلال وحواف بس — كلّها مبنية على متغيّرات --tsx-* فبتشتغل
   بالوضعين الفاتح والغامق تلقائياً.
   ===================================================================== */

/* 1) أزرار الفعل الأساسية — ذهب شمبانيا متدرّج بلمعة معدنية */
.ts-btn-primary,
.ts-btn-hail,
button.ts-btn-primary,
input[type="submit"].ts-btn-primary{
    background-image:
        linear-gradient(150deg, #F6DF9A 0%, var(--tsx-amber) 46%, var(--tsx-amber-deep) 100%) !important;
    color:#3a2708 !important;
    border-color:transparent !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 9px 22px -8px rgba(150,110,30,.6) !important;
}
.ts-btn-primary:hover,
.ts-btn-hail:hover{ filter:brightness(1.05); }
.ts-btn-primary:active,
.ts-btn-hail:active{ filter:brightness(.97); }

/* 2) الهيدر — عمق بترولي + خيط ضوء علوي معدني خفيف */
.ts-site-header{
    background:
        radial-gradient(90% 180% at 100% 0%, rgba(23,69,94,.5) 0%, rgba(23,69,94,0) 60%),
        linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,0) 55%),
        var(--tsx-night) !important;
}

/* 3) كروت لوحة التحكم (التبويبات) — سطح معدني، عمق، ولمسة ذهب عند المرور */
.ts-tile{
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 42%),
        var(--tsx-surface) !important;
    border:1px solid var(--tsx-line) !important;
    border-radius:18px !important;
    box-shadow:var(--tsx-lift-1) !important;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.ts-tile:hover{
    transform:translateY(-3px);
    box-shadow:var(--tsx-lift-2) !important;
    border-color:var(--tsx-amber) !important;
}
.ts-tile__icon{
    width:46px; height:46px;
    display:grid; place-items:center;
    border-radius:13px;
    font-size:22px; line-height:1;
    background:var(--tsx-amber-wash) !important;
    border:1px solid color-mix(in srgb, var(--tsx-amber) 55%, transparent) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}

/* 4) البطاقات العامة — حافة أنعم وظل أعمق (النظام موجود، بس منعمّقه) */
.ts-card,
.ts-panel,
.ts-sheet{
    border-radius:16px !important;
    box-shadow:var(--tsx-lift-1) !important;
}

/* 5) شارة الشعار بالهيدر — تدرّج ذهبي معدني */
.ts-brand__mark{
    background-image:linear-gradient(150deg, #F6DF9A, var(--tsx-amber-deep)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px -4px rgba(150,110,30,.55) !important;
}

/* =====================================================================
   6) شاشة طلب الرحلة — الخريطة، السعر، الوقت، الأماكن المحفوظة
   ===================================================================== */
.ts-map,
.ts-hail__map{
    border-radius:16px !important;
    border:1px solid var(--tsx-line) !important;
    box-shadow:var(--tsx-lift-1) !important;
    overflow:hidden;
}
.ts-fare__price{
    color:var(--tsx-amber-deep) !important;
    font-weight:800 !important;
    font-variant-numeric:tabular-nums;
}
.ts-eta__big{
    font-weight:800 !important;
    color:var(--tsx-ink) !important;
    font-variant-numeric:tabular-nums;
}
.ts-chip{
    border:1px solid var(--tsx-line) !important;
    border-radius:999px !important;
}
.ts-chip--live{
    color:var(--tsx-ok) !important;
    border-color:color-mix(in srgb, var(--tsx-ok) 45%, transparent) !important;
    background:color-mix(in srgb, var(--tsx-ok) 10%, var(--tsx-surface)) !important;
}
/* الأماكن المحفوظة (بيتي/شغلي…) — حبوب أنيقة */
.ts-fav{
    border:1px solid var(--tsx-line) !important;
    border-radius:13px !important;
    background:var(--tsx-surface) !important;
    transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.ts-fav:hover{
    border-color:var(--tsx-amber) !important;
    transform:translateY(-1px);
    box-shadow:var(--tsx-lift-1) !important;
}
.ts-fav--add{
    border-style:dashed !important;
    color:var(--tsx-amber-deep) !important;
}
.ts-driver-card{
    border-radius:16px !important;
    border:1px solid var(--tsx-line) !important;
    box-shadow:var(--tsx-lift-1) !important;
}

/* =====================================================================
   7) المحفظة — الرصيد والحركات
   ===================================================================== */
.ts-balance{
    color:var(--tsx-amber-deep) !important;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.01em;
}
.ts-tx-plus{ color:var(--tsx-ok) !important; }
.ts-tx-minus{ color:var(--tsx-danger) !important; }

/* =====================================================================
   8) أزرار دلالية + لوحة السائق
   ===================================================================== */
.ts-btn-green{
    background-image:linear-gradient(150deg, var(--tsx-ok), color-mix(in srgb, var(--tsx-ok) 68%, #000)) !important;
    color:#fff !important;
    border-color:transparent !important;
    box-shadow:0 8px 20px -8px rgba(14,156,98,.55) !important;
}
.ts-btn-red{
    background:var(--tsx-danger) !important;
    color:#fff !important;
    border-color:transparent !important;
}
.ts-due__amount{
    color:var(--tsx-amber-deep) !important;
    font-weight:800 !important;
    font-variant-numeric:tabular-nums;
}
.ts-invoice__qr{
    background:#fff !important;
    padding:12px !important;
    border-radius:14px !important;
    box-shadow:var(--tsx-lift-1) !important;
}