:root {
  --brand: #0e9488;
  --brand-dark: #0b7268;
  --bg: #f4f7f9;
  --card: #ffffff;
  --text: #1a2b33;
  --text-dim: #6b7c85;
  --line: #e2e8ec;
  --amber: #d97706;
  --red: #dc2626;
  --shadow: 0 4px 20px rgba(14,148,136,0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Segoe UI', Tahoma, system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* الترويسة */
.header {
  position: relative;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  padding: 16px 20px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0 0 24px 24px;
  box-shadow: var(--shadow);
}
.header-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.history-btn {
  background: rgba(255,255,255,0.22);
  border: none;
  padding: 7px 12px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s;
}
.history-btn:hover { background: rgba(255,255,255,0.3); }
.history-btn { position: relative; }
/* عدّاد الطلبات النشطة على زر "طلباتك" */
.orders-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-right: 5px;
  /* كهرماني دافئ من لوحة ألوان التطبيق — واضح ومريح للعين، لا يوحي بالخطر */
  background: var(--amber); color: #fff; font-size: 11px; font-weight: 800;
  border-radius: 9px; vertical-align: middle; line-height: 1;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}
/* علامة الطلب النشط داخل قائمة السجلّ */
.hist-item.active-order { border-color: var(--brand); background: #f0faf9; }
.hist-live-badge {
  display: inline-block; background: var(--brand); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; margin-right: 6px;
}
.hist-item .hist-track-hint { font-size: 11.5px; color: var(--brand-dark); font-weight: 700; margin-top: 4px; }
.logo { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.tagline { font-size: 11.5px; opacity: 0.9; }

/* المحتوى */
.main { flex: 1; padding: 24px 20px; }

.card {
  background: var(--card);
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: var(--shadow);
}
.card-title { font-size: 19px; font-weight: 700; margin-bottom: 20px; color: var(--text); }

/* الحقول */
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 7px;
}
.field input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: #fafbfc;
  transition: border-color 0.2s, background 0.2s;
}
.field input:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
}
.field input::placeholder { color: #a8b4bc; }

/* حقل البحث الذكي (searchable dropdown) */
.search-select { position: relative; }
.search-input {
  width: 100%;
  padding: 15px 16px;
  padding-right: 44px;
  border: 2px solid var(--line);
  border-radius: 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: #f7fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7c85' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat;
  background-position: left 16px center;
  transition: all 0.18s ease;
}
.search-input:focus {
  outline: none;
  border-color: var(--brand);
  background-color: #fff;
}
.search-input::placeholder { color: #a8b4bc; }
.search-input.chosen {
  border-color: var(--brand);
  background-color: #f0faf9;
  font-weight: 600;
}

.search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(14,148,136,0.15);
  max-height: 240px;
  overflow-y: auto;
  z-index: 50;
  -webkit-overflow-scrolling: touch;
}
.search-dropdown.open { display: block; }
.search-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  font-size: 15px;
  color: var(--text);
  border-bottom: 1px solid #f0f3f5;
  transition: background 0.12s;
}
.search-option:last-child { border-bottom: none; }
.search-option:hover, .search-option.active { background: #f0faf9; }
.search-option .opt-pin { font-size: 16px; }
.search-option .opt-zone {
  margin-right: auto;
  font-size: 12px;
  color: var(--text-dim);
  background: #eef2f4;
  padding: 2px 8px;
  border-radius: 6px;
}
.search-option.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #f7f9fa;
}
.search-option.disabled::after {
  content: 'مُختار كبداية';
  margin-right: auto;
  font-size: 11px;
  color: var(--red);
}
.search-no-results {
  padding: 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}

/* عدّاد الركاب */
.counter {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  padding: 6px 0;
}
.counter-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--brand);
  background: #fff;
  color: var(--brand);
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  user-select: none;
}
.counter-btn:active { background: var(--brand); color: #fff; transform: scale(0.92); }
.counter-val { font-size: 28px; font-weight: 800; min-width: 40px; text-align: center; color: var(--text); }

/* زر الإرسال */
.submit-btn {
  width: 100%;
  padding: 16px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s, transform 0.1s;
  box-shadow: 0 4px 14px rgba(14,148,136,0.25);
}
.submit-btn:active { background: var(--brand-dark); transform: translateY(1px); }
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.hint {
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  margin-top: 18px;
}

/* شاشة النجاح */
.success-view { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; }
.success-icon { font-size: 72px; margin-bottom: 16px; animation: pop 0.4s ease; }
.status-icon-pay { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 3px 12px rgba(141,198,63,0.35); vertical-align: middle; }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.success-title { font-size: 24px; font-weight: 800; color: var(--brand); margin-bottom: 12px; }
.success-text { font-size: 16px; color: var(--text-dim); margin-bottom: 28px; max-width: 320px; }

/* التذييل */
.footer {
  text-align: center;
  padding: 20px;
  color: var(--text-dim);
  font-size: 13px;
}
.support-line {
  margin-bottom: 8px; font-size: 13.5px; color: var(--text);
  background: #f0faf9; border: 1px solid #b8e6e1; border-radius: 10px;
  padding: 8px 12px; display: inline-block;
}
.support-line a { color: var(--brand-dark); font-weight: 700; text-decoration: none; }

/* زر السيارة الخاصة + ملاحظة الديالوج */
.private-btn {
  width: 100%; margin-top: 10px; padding: 14px;
  background: #fff; color: var(--brand-dark);
  border: 2px solid var(--brand); border-radius: 14px;
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.private-btn:active { background: #f0faf9; }
.private-note {
  background: #fff7ed; border: 1px solid #fdba74; border-radius: 10px;
  padding: 11px 13px; font-size: 13px; color: #9a3412; line-height: 1.7; margin-bottom: 14px;
}

/* موعد الرحلة (الآن / بموعد) */
.when-toggle { display: flex; gap: 8px; }
.when-opt {
  flex: 1; padding: 11px; border: 2px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--text-dim); font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.when-opt.active { border-color: var(--brand); background: #f0faf9; color: var(--brand-dark); }
.when-input {
  width: 100%; margin-top: 10px; padding: 12px 14px; border: 2px solid var(--line);
  border-radius: 12px; font-size: 15px; font-family: inherit;
}
.when-input:focus { outline: none; border-color: var(--brand); }
.when-hint { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.when-panel {
  margin-top: 12px; background: #f8fafc; border: 1px solid var(--line);
  border-radius: 14px; padding: 14px;
}
.when-sub { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
.day-toggle { display: flex; gap: 8px; }
.day-opt {
  flex: 1; padding: 10px; border: 2px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--text-dim); font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.day-opt.active { border-color: var(--brand); background: #f0faf9; color: var(--brand-dark); }
select.when-input { background: #fff; cursor: pointer; }
.when-opt:disabled { opacity: .45; cursor: not-allowed; }
.closed-banner {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fef3c7; border: 1px solid #fcd34d; color: #78350f;
  border-radius: 14px; padding: 14px 16px; margin-bottom: 14px;
}
.closed-banner .cb-icon { font-size: 26px; line-height: 1; }
.closed-banner .cb-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.closed-banner .cb-text { font-size: 13.5px; line-height: 1.7; }
.closed-note { margin-top: 8px; font-size: 13px; color: #92400e; background: #fef3c7; border-radius: 10px; padding: 8px 10px; line-height: 1.6; }

/* أزرار تعديل/إلغاء الطلب في شاشة التتبّع — أصغر */
.status-actions { display: flex; gap: 8px; margin: 12px 0; justify-content: center; }
.edit-btn, .cancel-btn {
  padding: 7px 16px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.edit-btn { background: #fff; color: var(--brand-dark); border: 2px solid var(--brand); }
.cancel-btn { background: #fff; color: #dc2626; border: 2px solid #fca5a5; }
.edit-btn:active { background: #f0faf9; }
.cancel-btn:active { background: #fef2f2; }
.sched-badge {
  margin-top: 10px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
  padding: 8px 12px; font-size: 13.5px; color: #1e40af;
}
.sched-badge b { color: #1d4ed8; }
.reminder-banner {
  margin-top: 10px; background: linear-gradient(135deg,#fff7ed,#ffedd5);
  border: 1px solid #fdba74; border-radius: 10px; padding: 10px 12px;
  font-size: 13.5px; color: #9a3412; font-weight: 600; line-height: 1.6;
}

/* التوست */
.toast {
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,0.2);
  transition: bottom 0.3s ease;
  z-index: 1000; /* فوق كل النوافذ (join-overlay = 300) حتى تظهر رسائل الخطأ داخلها */
  max-width: 90%;
  text-align: center;
}
.toast.show { bottom: 30px; }
.toast.error { background: var(--red); }
.toast.success { background: var(--brand); }

/* شريط التتبّع الحيّ */
.status-trip {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #f0faf9; border-radius: 14px; padding: 14px 18px;
  margin: 18px 0; font-size: 15px; font-weight: 600; color: var(--text);
  flex-wrap: wrap;
}
.status-trip .arrow { color: var(--brand); font-weight: 800; }
.status-live {
  font-size: 13px; color: var(--brand); margin-bottom: 18px;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* لوحة السجلّ الجانبية */
.history-panel {
  position: fixed; top: 0; right: -320px; width: 300px; height: 100%;
  background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,0.12);
  z-index: 200; transition: right 0.28s ease; overflow-y: auto;
}
.history-panel.open { right: 0; }
.history-panel.open ~ .history-overlay { display: block; }
.history-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.3); z-index: 150;
}
.history-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: #fff;
}
.history-head h3 { font-size: 17px; color: var(--text); }
.hist-close {
  background: #f0f3f5; border: none; width: 34px; height: 34px;
  border-radius: 10px; font-size: 15px; cursor: pointer; color: var(--text-dim);
}
.history-list { padding: 14px; }
.hist-item {
  background: #f7fafb; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; margin-bottom: 10px; cursor: pointer; transition: all 0.16s;
}
.hist-item:hover { border-color: var(--brand); background: #f0faf9; }
.hist-route { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.hist-meta { font-size: 12px; color: var(--text-dim); }
.hist-empty { text-align: center; color: var(--text-dim); padding: 30px; font-size: 14px; }

/* الرحلات المتاحة للانضمام */
.shared-trips {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 2px solid #fed7aa;
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 20px;
}
.shared-title { font-size: 16px; color: #b45309; margin-bottom: 4px; }
.shared-sub { font-size: 13px; color: #c2834a; margin-bottom: 14px; }
.shared-item {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid #fed7aa; border-radius: 12px;
  padding: 13px 15px; margin-bottom: 10px; cursor: pointer;
  transition: all 0.16s;
}
.shared-item:last-child { margin-bottom: 0; }
.shared-item:hover { border-color: var(--amber); box-shadow: 0 3px 12px rgba(217,119,6,0.15); }
.shared-route { font-size: 14px; font-weight: 600; color: var(--text); }
.shared-route .sr-arrow { color: var(--amber); margin: 0 6px; }
.shared-seats { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.shared-join {
  background: var(--amber); color: #fff; border: none;
  padding: 8px 16px; border-radius: 10px; font-size: 13px;
  font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.shared-badge {
  display: inline-block; background: #fef3c7; color: #b45309;
  font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 6px; margin-right: 6px;
}

/* ديالوج الانضمام للرحلة */
.join-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:300; align-items:flex-start; justify-content:center; padding:20px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.join-overlay.open { display:flex; }
/* margin:auto يوسّط النافذة القصيرة، والطويلة تبدأ من الأعلى وتُمرَّر بدل أن تُقصّ */
.join-modal { background:#fff; border-radius:20px; padding:24px; width:100%; max-width:380px; box-shadow:0 20px 60px rgba(0,0,0,0.3); margin:auto; }
.join-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.join-head h3 { font-size:19px; color:var(--brand-dark); }
.join-x { background:#f0f3f5; border:none; width:34px; height:34px; border-radius:10px; font-size:15px; cursor:pointer; color:var(--text-dim); }
.join-route { background:#f0faf9; border-radius:12px; padding:12px; text-align:center; font-weight:600; font-size:14px; margin-bottom:16px; }
.join-field { margin-bottom:14px; }
.join-field label { display:block; font-size:13px; font-weight:600; color:var(--text-dim); margin-bottom:6px; }
.join-field input { width:100%; padding:13px 14px; border:2px solid var(--line); border-radius:12px; font-size:15px; font-family:inherit; }
.join-field input:focus { outline:none; border-color:var(--brand); }
.join-counter { display:flex; align-items:center; gap:18px; justify-content:center; }
.join-counter button { width:42px; height:42px; border-radius:50%; border:2px solid var(--brand); background:#fff; color:var(--brand); font-size:20px; cursor:pointer; }
.join-counter span { font-size:20px; font-weight:700; min-width:28px; text-align:center; }
.join-submit { width:100%; padding:15px; background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; border:none; border-radius:14px; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; margin-top:6px; }
.join-field select { width:100%; padding:13px 14px; border:2px solid var(--line); border-radius:12px; font-size:15px; font-family:inherit; background:#fff; }
.join-field select:focus { outline:none; border-color:var(--brand); }
.mc-sub { font-size:13px; color:var(--text-dim); margin-bottom:14px; line-height:1.5; }

/* تنبيه الحد الأقصى + زر طلب عدة سيارات */
.maxcar-note { margin-top:14px; background:linear-gradient(135deg,#fff7ed,#ffedd5); border:2px solid #fdba74; border-radius:14px; padding:14px; text-align:center; }
.mcn-text { font-size:13.5px; font-weight:600; color:#9a3412; line-height:1.5; margin-bottom:12px; }
.mcn-btn { width:100%; padding:13px; background:linear-gradient(135deg,#f97316,#ea580c); color:#fff; border:none; border-radius:12px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; }

/* بطاقة جوّال باي */
/* بطاقة الدفع بألوان جوّال باي (أخضر/أزرق) */
.pay-box {
  background:linear-gradient(135deg,#f3f9e8 0%,#e6f3d5 100%);
  border:2px solid #8dc63f; border-radius:16px; padding:18px; margin:16px 0; text-align:center;
}
.pay-logo { display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.pay-logo-img { width:64px; height:64px; border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,0.12); }
.pay-amount { font-size:17px; color:var(--text); margin-bottom:4px; }
.pay-amount b { color:#4a7c1f; font-size:22px; }
.pay-per { font-size:12.5px; color:#5a7a3a; margin-bottom:8px; }
.pay-number { font-size:15px; color:var(--text); margin-bottom:6px; }
.pay-number b { color:#1b75bb; letter-spacing:1px; }
.pay-hint { font-size:12px; color:#4a7c1f; }

/* بطاقة بيانات السيارة للزبون */
.vehicle-box {
  background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%);
  border:2px solid #6ee7b7; border-radius:16px; padding:18px; margin:16px 0; text-align:right;
}
.veh-title { font-size:16px; font-weight:800; color:#047857; margin-bottom:12px; text-align:center; }
.veh-row { font-size:14px; color:var(--text); margin-bottom:7px; display:flex; justify-content:space-between; }
.veh-row span { color:var(--text-dim); }
.veh-row b { color:var(--text); }
.veh-call {
  display:block; margin-top:12px; background:var(--brand); color:#fff; text-decoration:none;
  padding:12px; border-radius:12px; text-align:center; font-weight:700; font-size:15px;
}

/* بطاقة التقييم */
.rate-box {
  background:#fff; border:2px solid var(--line); border-radius:16px;
  padding:20px; margin:16px 0; text-align:center;
}
.rate-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:14px; }
.rate-stars { display:flex; justify-content:center; gap:8px; margin-bottom:16px; }
.rate-stars .star {
  font-size:38px; color:#d1d5db; cursor:pointer; transition:transform .12s,color .12s;
}
.rate-stars .star:hover { transform:scale(1.15); }
.rate-stars .star.on { color:#f59e0b; }
.rate-send {
  width:100%; padding:13px; background:var(--brand); color:#fff; border:none;
  border-radius:12px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit;
}
.rate-send:disabled { background:#cbd5e1; cursor:not-allowed; }
.rate-done { font-size:17px; font-weight:700; color:#047857; padding:8px; }

/* ============ الواجهة الجديدة: كروت الرحلات ============ */
.trip-card {
  background: var(--card); border-radius: 18px; box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 16px;
}
.trip-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.trip-card-head h3 { font-size: 16px; color: var(--brand-dark); }
.tc-hint { font-size: 12px; color: var(--text-dim); }

/* صف السوايب الأفقي */
.swipe-row {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  align-items: stretch; /* كل الكروت بنفس الارتفاع حتى لو اختلف محتواها */
}
.swipe-row::-webkit-scrollbar { display: none; }
.trip-slide {
  scroll-snap-align: start; flex: 0 0 86%; max-width: 86%;
  background: linear-gradient(135deg, #f0faf9 0%, #e6f6f4 100%);
  border: 1px solid #c7ebe6; border-radius: 14px; padding: 14px;
  /* عمود مرتّب: المحتوى بالأعلى وزر الانضمام ثابت بالأسفل → كروت متناسقة */
  display: flex; flex-direction: column;
}
/* رحلة واحدة فقط: تمتد لعرض الكارد كاملاً بلا فراغ */
.swipe-row.single .trip-slide { flex: 0 0 100%; max-width: 100%; }
.ts-sched { font-size: 12.5px; color: #1e40af; background: #dbeafe; border-radius: 8px; padding: 4px 9px; display: inline-block; margin-bottom: 8px; font-weight: 600; white-space: nowrap; }
.ts-route { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; margin-bottom: 8px; flex-wrap: wrap; }
.ts-arrow { color: var(--amber); }
.ts-seats { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.ts-badge { background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 6px; }
.ts-join { width: 100%; padding: 10px; background: var(--brand); color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; margin-top: auto; }

/* كارد ابدأ رحلة جديدة (مميّز) */
.start-card {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-radius: 18px; padding: 18px; margin-bottom: 16px; color: #fff;
  box-shadow: 0 8px 28px rgba(14,148,136,0.28);
}
.start-title { font-size: 19px; font-weight: 800; margin-bottom: 4px; }
.start-sub { font-size: 13px; opacity: 0.92; margin-bottom: 16px; line-height: 1.6; }
.start-actions { display: flex; gap: 10px; }
.start-btn { flex: 1; padding: 14px; border-radius: 13px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; border: none; }
.start-btn.primary { background: #fff; color: var(--brand-dark); }
.start-btn.ghost { background: rgba(255,255,255,0.15); color: #fff; border: 2px solid rgba(255,255,255,0.5); }
.start-btn:active { transform: translateY(1px); }

/* سطر الدعم أسفل الكروت */
.support-foot { text-align: center; padding: 8px 0 4px; }
.sf-line { font-size: 13.5px; color: var(--text-dim); margin-bottom: 6px; }
.sf-num { font-size: 13.5px; color: var(--text); }
.sf-num a { color: var(--brand-dark); font-weight: 700; text-decoration: none; }

/* ملاحظة طبيعة الرحلة في الديالوج */
.start-note {
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px;
  padding: 11px 13px; font-size: 13px; color: #1e40af; line-height: 1.7; margin-bottom: 14px;
}
.start-modal { max-height: 88vh; overflow-y: auto; }

/* ============ مخطّط المسار المرئي (تتبّع) ============ */
.journey {
  width: 100%; background: var(--card); border-radius: 16px; box-shadow: var(--shadow);
  padding: 18px 14px 20px; margin-bottom: 18px;
}
.journey-track { position: relative; height: 78px; }
/* الخط الأساسي + التعبئة (في RTL يبدآن من اليمين) — على مستوى النقاط */
.journey-track::before {
  content: ''; position: absolute; top: 14px; right: 10%; left: 10%; height: 4px;
  background: var(--line); border-radius: 3px;
}
.journey-fill {
  position: absolute; top: 14px; right: 10%; height: 4px; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand-dark), var(--brand));
  transition: width .6s ease; max-width: 80%;
}
/* السيارة تسير في مسار خاص بها أسفل المحطات، مع خط باهت يدلّ على المسار للنهاية */
.journey-car {
  position: absolute; bottom: 2px; font-size: 24px; transition: right .6s ease; z-index: 3;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
}
.journey-carlane {
  position: absolute; bottom: 8px; right: 10%; left: 10%; height: 3px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
}
.journey-stops { position: absolute; top: 0; right: 10%; left: 10%; display: flex; justify-content: space-between; }
.jstop { display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
.jdot {
  position: relative;
  width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all .3s; z-index: 2;
}
.jstop.done .jdot { border-color: var(--brand); background: #f0faf9; }
.jstop.active .jdot { border-color: var(--brand); background: var(--brand); transform: scale(1.2); }
/* محطة الدفع: شعار جوّال باي داخل النقطة — ثابتة بلا حركة */
.jdot-pay { background: #fff !important; padding: 0; overflow: hidden; }
/* لا نطبّق تكبير النقطة النشطة على محطة الدفع حتى لا تهتزّ الصورة */
.jstop.active .jdot-pay { background: #fff !important; border-color: #8dc63f; transform: none !important; }
.jstop.done .jdot-pay { border-color: #8dc63f; }
.jdot-pay-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* التموّج النابض على المحطة النشطة — بطيء وخفيف */
.jstop.active .jdot::before {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 1.5px solid var(--brand); z-index: -1;
  animation: jripple 3.4s ease-out infinite;
}
@keyframes jripple {
  0%   { transform: scale(1);   opacity: .35; }
  100% { transform: scale(1.8); opacity: 0;   }
}
.jlabel { font-size: 10px; color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.jstop.active .jlabel, .jstop.done .jlabel { color: var(--brand-dark); }
.journey-stopped { opacity: 0.55; filter: grayscale(0.6); }
.journey-stopped .jstop.active .jdot::before, .journey-stopped .jstop.active .jdot::after { animation: none; display: none; }

/* زر "عرض الكل" في كروت الرحلات + نافذة كل الرحلات */
.tc-all { background: #f0faf9; color: var(--brand-dark); border: 1px solid #b2e0db; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }
.tc-all:active { transform: scale(.97); }
.all-trips-modal { max-width: 440px; }
.all-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--brand); color: #fff; font-size: 13px; margin-inline-start: 6px; vertical-align: middle; }
.all-trips-list { display: flex; flex-direction: column; gap: 10px; }
.all-trips-list .trip-slide { flex: none; max-width: 100%; width: 100%; }
.all-empty { text-align: center; color: var(--text-dim); padding: 24px 0; font-size: 14px; }