/* ==========================================================================
   Taxi Syria Site — مبدّل اللغة بالترويسة + أدوات الترويسة (4.10)
   --------------------------------------------------------------------------
   CSS عادي بالسايت باكج (متل nav-services.css): تعديل الترويسة ما بيحتاج
   بناء Tailwind. الألوان من نفس متغيّرات --tsx-* مع قيم احتياطية.
   الترويسة كحلية بالوضعين (فاتح/غامق)، فالقائمة كمان كحلية بلمسة ذهبي.
   RTL/LTR: كل المسافات والمواقع منطقية (inline-start/end).
   ========================================================================== */

/* نص للقارئ الصوتي بس */
.ts-hdrtools .ts-vh {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- مجموعة الأدوات: اللغة + زر القائمة ---- */
.ts-hdrtools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

/* على الديسكتوب: المبدّل بآخر الترويسة (بعد القائمة وحالة الدخول) */
@media (min-width: 901px) {
    .ts-hdrtools { order: 5; margin-inline-start: 0; }
}

/* ---- زر المبدّل ---- */
.ts-sitelang { position: relative; }

.ts-sitelang__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    min-width: 44px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(225, 181, 88, .45);
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
    color: #f2f4f7;
    font: inherit;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.ts-sitelang__btn:hover {
    background-color: rgba(225, 181, 88, .14);
    border-color: rgba(246, 223, 154, .8);
}

.ts-sitelang__btn:focus-visible,
.ts-sitelang__opt:focus-visible {
    outline: 2px solid #F6DF9A;
    outline-offset: 2px;
}

.ts-sitelang__globe { flex: 0 0 auto; color: #F6DF9A; }

.ts-sitelang__code {
    min-width: 1.6em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.ts-sitelang__caret { flex: 0 0 auto; opacity: .75; transition: transform .15s ease; }

.ts-sitelang.is-open .ts-sitelang__btn {
    background: linear-gradient(150deg, #F6DF9A, var(--tsx-amber, #C6952E) 60%, var(--tsx-amber-deep, #9A6E1E));
    border-color: transparent;
    color: #1a1406;
}
.ts-sitelang.is-open .ts-sitelang__globe { color: currentColor; }
.ts-sitelang.is-open .ts-sitelang__caret { transform: rotate(180deg); }

/* ---- القائمة ---- */
.ts-sitelang__menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 70;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: 14px;
    border: 1px solid rgba(225, 181, 88, .35);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 40%),
        var(--tsx-night, #0E2A3D);
    color: #f2f4f7;
    box-shadow: 0 18px 44px -12px rgba(5, 12, 20, .65), inset 0 1px 0 rgba(255, 255, 255, .08);
}

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

.ts-sitelang__menu li { margin: 0; padding: 0; }

.ts-sitelang__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    text-align: start;
}

/* الاسم باتجاه لغته (dir على الـspan)، والرمز بالطرف التاني حسب اتجاه الصفحة */
.ts-sitelang__name { unicode-bidi: isolate; }
.ts-sitelang__opt[lang="ar"] .ts-sitelang__name { font-family: "IBM Plex Sans Arabic", "Cairo", system-ui, sans-serif; }

.ts-sitelang__tag {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 3px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    color: rgba(242, 244, 247, .7);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.ts-sitelang__opt:hover,
.ts-sitelang__opt:focus-visible { background: rgba(255, 255, 255, .09); }

.ts-sitelang__opt.is-active {
    background: rgba(225, 181, 88, .16);
    color: #F6DF9A;
}
.ts-sitelang__opt.is-active .ts-sitelang__tag {
    background: linear-gradient(150deg, #F6DF9A, var(--tsx-amber, #C6952E));
    color: #1a1406;
}

/* ---- الشاشات الصغيرة (360px) ---- */
@media (max-width: 420px) {
    .ts-hdr__row { gap: 10px; }
    .ts-hdrtools { gap: 6px; }
    .ts-sitelang__btn { padding: 0 10px; gap: 4px; }
    .ts-sitelang__caret { display: none; }
    /* زر القائمة: الأيقونة بس — النص بيضل للقارئ الصوتي */
    .ts-hdrtools .ts-nav-toggle { padding-inline: 12px; min-width: 44px; justify-content: center; }
    .ts-hdrtools .ts-nav-toggle__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ts-sitelang__btn,
    .ts-sitelang__caret { transition: none; }
}

/* ---- منتقي الدولة (245 دولة): أسماء طويلة ما لازم تفلّش الحقل ---- */
.ts-phone > select.ts-cc {
    max-width: min(46%, 15rem);
    text-overflow: ellipsis;
}
@media (max-width: 420px) {
    .ts-app .ts-phone > select.ts-cc { max-width: 100%; }
}

/* ---------- 4.10.2: Länderflaggen auch unter Windows ----------
   Windows hat keine Flaggen-Emojis (statt 🇸🇾 erscheint „SY“). Diese kleine
   Schrift (Twemoji Country Flags, nur die Flaggen-Zeichen per unicode-range)
   kommt davor — alle anderen Zeichen nimmt weiter die normale Schrift. */
@font-face {
    font-family: "Twemoji Country Flags";
    src: url("../Fonts/TwemojiCountryFlags.woff2") format("woff2");
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
    font-display: swap;
}
select.ts-cc,
select.ts-cc option,
select.ts-cc optgroup {
    font-family: "Twemoji Country Flags", var(--tsx-body, system-ui), system-ui, sans-serif;
}

/* 4.10.3: رقم الهاتف دايماً من اليسار لليمين — الرمز الدولي بالشمال والرقم بعده,
   حتى بالصفحات العربية (متل ما بينكتب الرقم بالدنيا كلها). */
.ts-phone { direction: ltr; }
.ts-phone > select.ts-cc { direction: ltr; text-align: left; }

/* 4.10.5: روابط «لوحة السائق / لوحتي» و«حسابي» جنب «مسجّل دخول» بالترويسة */
.ts-hdrlink { display: inline-flex; align-items: center; min-height: 44px; padding: 3px 12px; border-radius: 999px;
    border: 1px solid rgba(245, 197, 24, .45); color: #f5c518; text-decoration: none; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.ts-hdrlink:hover { background: rgba(245, 197, 24, .12); }