/* ==========================================================================
   تكسي سوريا 4.14 — الأمان: SOS، رقم الطوارئ، SOS الواصل، «📄 وثائقي»، صورة السيارة
   بيتحمّل بكل الصفحات (TypoScript: site_safety414) بعد theme413.css — الألوان كلها var(--ts-…).
   كبير، الأيقونة أول، RTL (inset-inline-*).
   ========================================================================== */

.ts414-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ts414-muted { margin: 0 0 10px; color: var(--ts-muted); font-size: .9rem; line-height: 1.6; }
.ts414-small { font-size: .8rem; }

/* ---------------- زر SOS الصغير الأحمر ---------------- */
.ts414-sosbtn {
    display: inline-grid;
    place-items: center;
    min-width: 52px;
    height: 46px;
    padding: 0 12px;
    border: 2px solid #fff;
    border-radius: var(--ts-radius-pill, 999px);
    background: var(--ts-danger, #C62828);
    color: #fff;
    font: 900 1rem/1 var(--ts-font-display, system-ui);
    letter-spacing: .04em;
    box-shadow: 0 6px 18px -6px rgba(198, 40, 40, .7);
    cursor: pointer;
}
.ts414-sosbtn:hover, .ts414-sosbtn:focus-visible { filter: brightness(1.08); outline: 3px solid var(--ts-focus, #C6952E); outline-offset: 2px; }
:root[data-theme="dark"] .ts414-sosbtn { background: #D32F2F; border-color: rgba(255, 255, 255, .85); }
.ts414-sosbtn--drv { position: absolute; z-index: 800; inset-block-end: 14px; inset-inline-start: 12px; }
.ts414-sosbtn--ride { margin-inline-start: 6px; }
body.ts414-sos-on .ts414-sosbtn { animation: ts414-pulse 1.4s ease-in-out infinite; }

/* ---------------- كبس مطوّل ---------------- */
.ts414-modal .ts-modal__card { max-width: 460px; }
.ts414-hold {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    width: 168px;
    height: 168px;
    margin: 8px auto 4px;
    border: 0;
    border-radius: 50%;
    background: var(--ts-danger, #C62828);
    color: #fff;
    box-shadow: 0 0 0 10px var(--ts-danger-bg, #FDECEC), 0 14px 30px -12px rgba(198, 40, 40, .8);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
    overflow: hidden;
}
.ts414-hold::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .28);
    transform: scale(0);
}
.ts414-hold.is-holding::after { transform: scale(1); transition: transform 2s linear; }
.ts414-hold.is-done::after { transform: scale(1); }
.ts414-hold__txt { position: relative; z-index: 1; font: 900 2.4rem/1 var(--ts-font-display, system-ui); letter-spacing: .06em; }
.ts414-hold__sub { position: relative; z-index: 1; font-size: .85rem; font-weight: 700; opacity: .95; }
.ts414-hold:focus-visible { outline: 4px solid var(--ts-focus, #C6952E); outline-offset: 6px; }

/* ---------------- ورقة «🚨 التنبيه انبعت» ---------------- */
.ts414-state { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; font-weight: 700; font-size: .92rem; line-height: 1.55; }
.ts414-state.is-ok { background: color-mix(in srgb, var(--ts-ok, #0E9C62) 14%, transparent); color: var(--ts-text); }
.ts414-state.is-fail { background: var(--ts-danger-bg, #FDECEC); color: var(--ts-danger, #C62828); }
.ts414-ct {
    margin: 0 0 12px;
    padding: 12px;
    border: 1px solid var(--ts-outline);
    border-radius: 18px;
    background: var(--ts-surface);
    text-align: start;
}
.ts414-ct__head { display: flex; align-items: center; gap: 10px; }
.ts414-ct__av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ts-surface2); font-size: 1.3rem; flex: none; }
.ts414-ct__who { display: flex; flex-direction: column; min-width: 0; }
.ts414-ct__who b { color: var(--ts-text); font-size: 1.05rem; overflow-wrap: anywhere; }
.ts414-ct__who small { color: var(--ts-muted); font-variant-numeric: tabular-nums; text-align: start; }
.ts414-ct__st { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.ts414-ch {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    border-radius: var(--ts-radius-pill, 999px);
    background: var(--ts-surface2);
    color: var(--ts-muted);
    font-size: .82rem; font-weight: 700;
}
.ts414-ch i { font-style: normal; font-weight: 900; }
.ts414-ch.is-on { background: color-mix(in srgb, var(--ts-ok, #0E9C62) 16%, transparent); color: var(--ts-ok, #0E9C62); }
.ts414-ct__btns { display: grid; gap: 8px; margin-top: 10px; }
.ts414-big {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 54px;
    padding: 10px 14px;
    border: 0;
    border-radius: 16px;
    background: var(--ts-surface2);
    color: var(--ts-text);
    font: 800 1.05rem/1.25 var(--ts-font, system-ui);
    text-decoration: none;
    cursor: pointer;
    width: 100%;
}
.ts414-big > span[aria-hidden] { font-size: 1.35rem; }
.ts414-big:hover { filter: brightness(.97); color: inherit; }
.ts414-big.is-wa { background: #25D366; color: #06281B; }
.ts414-big.is-sms { background: var(--ts-surface2); }
.ts414-big.is-call { background: var(--ts-primary-grad, var(--ts-primary)); color: var(--ts-on-primary); }
.ts414-big.is-police { margin: 4px 0 8px; background: var(--ts-danger, #C62828); color: #fff; font-size: 1.15rem; min-height: 60px; }
.ts414-big.is-police:hover { color: #fff; }
.ts414-big.is-safe { margin-top: 14px; background: var(--ts-ok, #0E9C62); color: #fff; min-height: 58px; }
.ts414-big.is-safe:hover { color: #fff; }
.ts414-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ts414-num {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
    padding: 10px 12px; border: 1px solid var(--ts-outline); border-radius: 14px;
    color: var(--ts-text); text-decoration: none;
}
.ts414-num > span { grid-row: 1 / 3; font-size: 1.4rem; }
.ts414-num b { font-size: .92rem; }
.ts414-num small { color: var(--ts-danger, #C62828); font-weight: 900; font-size: 1.05rem; text-align: start; }
.ts414-link { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ts-outline); text-align: start; }
.ts414-link b { color: var(--ts-text); font-size: .95rem; }
.ts414-link__row { display: flex; gap: 6px; }
.ts414-link__url { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--ts-outline); border-radius: 12px; background: var(--ts-surface2); color: var(--ts-text); font-size: .85rem; }
.ts414-none { margin: 0 0 12px; padding: 12px; border: 1px dashed var(--ts-outline); border-radius: 16px; text-align: start; }
.ts414-none p { margin: 0 0 8px; color: var(--ts-muted); font-size: .9rem; }

/* الشريط الأحمر وقت التنبيه شغّال */
.ts414-bar {
    position: fixed; z-index: 9990;
    inset-inline: 12px; inset-block-end: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 10px;
    max-width: 520px; margin: 0 auto;
    padding: 10px 12px 10px 14px;
    border-radius: 18px;
    background: var(--ts-danger, #C62828);
    color: #fff;
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .5);
    font-size: .95rem;
}
.ts414-bar b { flex: 1; min-width: 0; }
.ts414-bar__dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; flex: none; animation: ts414-blink 1s steps(2, start) infinite; }
.ts414-bar__btn { padding: 8px 16px; border: 0; border-radius: var(--ts-radius-pill, 999px); background: #fff; color: #B71C1C; font-weight: 900; cursor: pointer; }

/* ---------------- SOS الواصل (بكل الصفحات) ---------------- */
.ts414-inbox {
    position: fixed; z-index: 9995;
    inset-inline: 10px; inset-block-start: calc(10px + env(safe-area-inset-top, 0px));
    display: flex; flex-direction: column; gap: 8px;
    max-width: 560px; margin: 0 auto;
    pointer-events: none;
}
.ts414-in {
    pointer-events: auto;
    padding: 12px;
    border-radius: 20px;
    background: var(--ts-danger, #C62828);
    color: #fff;
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6);
    animation: ts414-drop .25s ease-out;
}
.ts414-in.is-safe { background: var(--ts-ok, #0E9C62); }
.ts414-in__top { display: flex; align-items: flex-start; gap: 10px; }
.ts414-in__ico { font-size: 1.8rem; line-height: 1; }
.ts414-in:not(.is-safe) .ts414-in__ico { animation: ts414-pulse 1.2s ease-in-out infinite; }
.ts414-in__txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts414-in__txt b { font-size: 1.08rem; line-height: 1.4; overflow-wrap: anywhere; }
.ts414-in__txt small { opacity: .9; }
.ts414-in__x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-size: 1rem; cursor: pointer; flex: none; }
.ts414-in__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ts414-in__btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 8px 14px;
    border-radius: var(--ts-radius-pill, 999px);
    background: rgba(255, 255, 255, .18); color: #fff;
    font-weight: 800; text-decoration: none;
}
.ts414-in__btn:hover { color: #fff; background: rgba(255, 255, 255, .28); }
.ts414-in__btn.is-main { flex: 1 1 100%; justify-content: center; background: #fff; color: #B71C1C; font-size: 1.05rem; }
.ts414-in__btn.is-main:hover { color: #B71C1C; }

/* ---------------- تذكير «ضيف رقم شخص بتثق فيه» ---------------- */
.ts414-prompt {
    position: fixed; z-index: 9980;
    inset-inline: 12px; inset-block-end: calc(14px + env(safe-area-inset-bottom, 0px));
    display: flex; gap: 12px; align-items: flex-start;
    max-width: 460px; margin: 0 auto;
    padding: 14px;
    border: 1px solid var(--ts-outline);
    border-radius: var(--ts-radius-card, 20px);
    background: var(--ts-surface);
    color: var(--ts-text);
    box-shadow: var(--ts-shadow-card), 0 18px 40px -18px rgba(0, 0, 0, .45);
    animation: ts414-rise .25s ease-out;
}
.ts414-prompt__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--ts-danger-bg); font-size: 1.5rem; flex: none; }
.ts414-prompt__txt { flex: 1; min-width: 0; }
.ts414-prompt__txt b { font-size: 1.05rem; }
.ts414-prompt__txt p { margin: 4px 0 10px; color: var(--ts-muted); font-size: .9rem; line-height: 1.5; }
.ts414-prompt__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ts414-prompt__go { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: var(--ts-radius-pill, 999px); background: var(--ts-primary-grad, var(--ts-primary)); color: var(--ts-on-primary); font-weight: 800; text-decoration: none; }
.ts414-prompt__go:hover { color: var(--ts-on-primary); }
.ts414-prompt__later { min-height: 42px; padding: 0 16px; border: 0; border-radius: var(--ts-radius-pill, 999px); background: var(--ts-surface2); color: var(--ts-text); font-weight: 700; cursor: pointer; }
body.ts414-sos-on .ts414-prompt { display: none; }

/* ---------------- محرّر أرقام الطوارئ ---------------- */
.ts414-em { display: flex; flex-direction: column; gap: 12px; text-align: start; }
.ts414-em__head { display: flex; align-items: center; gap: 10px; }
.ts414-em__head h3 { margin: 0; font-size: 1.15rem; color: var(--ts-text); }
.ts414-em__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ts-danger-bg); font-size: 1.4rem; }
.ts414-slot { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--ts-outline); border-radius: 18px; background: var(--ts-surface); }
.ts414-slot[hidden] { display: none; }
.ts414-slot__head { display: flex; align-items: center; gap: 8px; }
.ts414-slot__head b { flex: 1; color: var(--ts-text); }
.ts414-slot__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ts-danger, #C62828); color: #fff; font-weight: 900; font-size: .9rem; }
.ts414-slot__row { display: flex; gap: 8px; align-items: flex-end; }
.ts414-slot__row .ts414-field { flex: 1; min-width: 0; }
.ts414-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ts414-field > span { font-size: .88rem; font-weight: 700; color: var(--ts-text); }
.ts414-input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--ts-outline);
    border-radius: 14px;
    background: var(--ts-surface2);
    color: var(--ts-text);
    font: 600 1rem var(--ts-font, system-ui);
}
.ts414-input:focus { outline: 2px solid var(--ts-focus, #C6952E); outline-offset: 1px; }
.ts414-input[dir="ltr"] { text-align: left; }
.ts414-test {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 48px; padding: 0 14px;
    border: 1px solid var(--ts-outline); border-radius: 14px;
    background: var(--ts-surface); color: var(--ts-text);
    font-weight: 800; cursor: pointer; flex: none;
}
.ts414-test:disabled { opacity: .5; cursor: default; }
.ts414-add { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1px dashed var(--ts-outline); border-radius: 16px; background: transparent; color: var(--ts-primary-text, var(--ts-text)); font-weight: 800; cursor: pointer; }
.ts414-add[hidden] { display: none; }
.ts414-link-btn { border: 0; background: none; color: var(--ts-danger, #C62828); font-weight: 700; cursor: pointer; padding: 4px 6px; }
.ts414-emcard { margin: 0 0 14px; }

/* ---------------- «📄 وثائقي» ---------------- */
.ts414-docs { display: flex; flex-direction: column; gap: 12px; text-align: start; }
.ts414-docs.is-busy { opacity: .7; pointer-events: none; }
.ts414-docs__busy { margin: 0; font-weight: 700; color: var(--ts-primary-text, var(--ts-text)); }
.ts414-okline { margin: 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ts-ok, #0E9C62) 14%, transparent); color: var(--ts-ok, #0E9C62); font-weight: 800; }
.ts414-doc { padding: 12px; border: 1px solid var(--ts-outline); border-radius: 18px; background: var(--ts-surface); }
.ts414-doc__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.ts414-doc__head b { color: var(--ts-text); font-size: 1.05rem; }
.ts414-doc__ico { font-size: 1.5rem; }
.ts414-req { color: var(--ts-danger, #C62828); font-weight: 700; font-size: .78rem; }
.ts414-doc__head .ts414-badge { margin-inline-start: auto; }
.ts414-doc__body { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.ts414-doc__side { flex: 1 1 180px; display: flex; flex-direction: column; gap: 6px; }
.ts414-doc__img {
    position: relative;
    display: grid; place-items: center; align-content: center;
    width: 132px; height: 92px;
    padding: 0; border: 1px solid var(--ts-outline); border-radius: 14px;
    background: var(--ts-surface2); color: var(--ts-muted);
    overflow: hidden; cursor: zoom-in; font-size: 2rem; flex: none;
}
.ts414-doc__img.is-empty { cursor: default; border-style: dashed; }
.ts414-doc__img small { font-size: .72rem; font-weight: 700; }
.ts414-doc__img img { width: 100%; height: 100%; object-fit: cover; }
.ts414-doc__zoom { position: absolute; inset-block-end: 4px; inset-inline-end: 4px; padding: 2px 5px; border-radius: 8px; background: rgba(0, 0, 0, .45); font-size: .8rem; }
.ts414-doc__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ts414-dbtn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 0 14px;
    border: 0; border-radius: var(--ts-radius-pill, 999px);
    background: var(--ts-surface2); color: var(--ts-text);
    font-weight: 800; cursor: pointer;
}
.ts414-dbtn:first-child { background: var(--ts-primary-grad, var(--ts-primary)); color: var(--ts-on-primary); }
.ts414-dbtn.is-del { background: var(--ts-danger-bg); color: var(--ts-danger, #C62828); }
.ts414-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--ts-radius-pill, 999px);
    font-size: .8rem; font-weight: 800; white-space: nowrap;
    background: var(--ts-surface2); color: var(--ts-muted);
}
.ts414-badge.is-missing { background: color-mix(in srgb, #F59E0B 18%, transparent); color: #92400E; }
.ts414-badge.is-pending { background: color-mix(in srgb, var(--ts-primary, #C6952E) 16%, transparent); color: var(--ts-primary-text, var(--ts-text)); }
.ts414-badge.is-approved { background: color-mix(in srgb, var(--ts-ok, #0E9C62) 16%, transparent); color: var(--ts-ok, #0E9C62); }
.ts414-badge.is-rejected { background: var(--ts-danger-bg); color: var(--ts-danger, #C62828); }
:root[data-theme="dark"] .ts414-badge.is-missing { color: #FBBF24; }
.ts414-cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.ts414-car { display: flex; flex-direction: column; gap: 6px; }
.ts414-car .ts414-doc__img { width: 100%; height: 96px; }
.ts414-car.is-first .ts414-doc__img { outline: 2px solid var(--ts-primary, #C6952E); outline-offset: 1px; }
.ts414-car__n { font-size: .8rem; font-weight: 700; color: var(--ts-muted); }
.ts414-car__btns { display: flex; gap: 6px; }
.ts414-ibtn { flex: 1; min-height: 40px; border: 0; border-radius: 12px; background: var(--ts-surface2); font-size: 1.05rem; cursor: pointer; }
.ts414-ibtn.is-del { background: var(--ts-danger-bg); }
.ts414-car.is-add { justify-content: center; min-height: 96px; padding: 8px; border: 1px dashed var(--ts-outline); border-radius: 14px; }
.ts414-car__add { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border: 0; border-radius: 12px; background: var(--ts-surface2); color: var(--ts-text); font-weight: 800; cursor: pointer; }
.ts414-docview { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 12px; background: #000; }
.ts414-modal--wide .ts-modal__card { max-width: 720px; }
.ts414-warn {
    display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
    margin: 0 0 12px; padding: 12px 14px;
    border-radius: 16px;
    background: color-mix(in srgb, #F59E0B 16%, var(--ts-surface));
    color: var(--ts-text);
    border: 1px solid color-mix(in srgb, #F59E0B 45%, transparent);
    text-align: start;
}
.ts414-warn p { margin: 0; font-size: .9rem; line-height: 1.5; }
.ts414-warn.is-danger { background: var(--ts-danger-bg); border-color: color-mix(in srgb, var(--ts-danger, #C62828) 40%, transparent); }
.ts414-warn.is-danger b { color: var(--ts-danger, #C62828); }
.ts414-fold-badge { margin-inline-start: 8px; }
.ts414-fold-badge:empty { display: none; }

/* ---------------- صورة السيارة عند الراكب (عرض + تتبّع) ---------------- */
.ts414-carph { display: block; width: 100%; max-height: 120px; margin: 8px 0 0; border-radius: 14px; object-fit: cover; background: var(--ts-surface2); }
.ts414-carph--sm { width: 64px; height: 44px; max-height: none; margin: 0; border-radius: 10px; flex: none; }
.ts413-dcard .ts414-carph { max-height: 140px; }

@keyframes ts414-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes ts414-blink { to { visibility: hidden; } }
@keyframes ts414-drop { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ts414-rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .ts414-in__ico, .ts414-bar__dot, body.ts414-sos-on .ts414-sosbtn, .ts414-in, .ts414-prompt { animation: none !important; }
    .ts414-hold.is-holding::after { transition-duration: 2s; }
}
@media (max-width: 420px) {
    .ts414-slot__row { flex-direction: column; align-items: stretch; }
    .ts414-nums { grid-template-columns: 1fr; }
}