/**
 * 2T — تحسين شكل خفيف (طبقة واحدة · ما تمسّ JS/HTML)
 */

:root {
  /* ── الهوية: أخضر + ذهبي + حبر ── */
  --2t-accent: #19a974;
  --2t-accent-dark: #15803d;
  --2t-accent-light: #34d399;
  --2t-green-50: #ecfdf5;
  --2t-green-100: #d1fae5;
  --2t-green-500: #22c55e;
  --2t-green-600: #16a34a;
  --2t-green-soft: var(--2t-green-50);
  --2t-green-soft-border: rgba(25, 169, 116, 0.2);
  --2t-green-glow: rgba(34, 197, 94, 0.22);
  --2t-ink: #0f172a;
  --2t-ink-soft: #121417;
  --2t-muted: #64748b;
  --2t-line: rgba(15, 23, 42, 0.08);
  --2t-card: #ffffff;
  --2t-surface: #f8fafc;
  --2t-surface-2: #f1f5f9;
  --2t-radius: 12px;
  --2t-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  --2t-sheet: 0 -8px 36px rgba(15, 23, 42, 0.08);
  --2t-btn-primary: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
  --2t-btn-primary-shadow: 0 8px 20px rgba(34, 197, 94, 0.22);
  --2t-btn-primary-disabled: #e2e8f0;
  --2t-btn-primary-disabled-text: #94a3b8;
  --2t-yellow: #ffc107;
  --2t-yellow-soft: #fffdf3;
  --2t-danger: #e5484d;
  --2t-danger-soft: #fef2f2;
  /* ── 2T wordmark ── */
  --2t-brand-ink: #0f1419;
  --2t-brand-gold: #d6a11d;
  --2t-brand-fill: linear-gradient(
    112deg,
    var(--2t-brand-ink) 0%,
    #3a4234 36%,
    var(--2t-brand-gold) 50%,
    #3a4234 64%,
    var(--2t-brand-ink) 100%
  );
  --2t-brand-shadow: 0 10px 22px rgba(15, 20, 25, 0.08);
  --2t-brand-track: -0.07em;
}

/* ── T+ wordmark — اللمعان في brand.css ── */

@keyframes brandGlow {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.62;
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-wordmark {
    animation: none !important;
  }
}

.splash-tag {
  margin: 0;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* ── إطار عام ── */
@media (min-width: 461px) {
  .phone {
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
      0 28px 70px rgba(18, 20, 23, 0.14),
      0 0 0 1px rgba(18, 20, 23, 0.04);
  }
}

.screen.on {
  animation-duration: 0.22s;
}

/* ── دخول ── */
.screen.login .field {
  border-color: var(--2t-line);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.screen.login .field:focus-within {
  border-color: rgba(25, 169, 116, 0.35);
  box-shadow: 0 0 0 3px rgba(25, 169, 116, 0.1);
}

/* ── أزرار رئيسية موحّدة (لون زر متابعة) ── */
.screen.login .primary,
.otp-send:not(:disabled),
.screen.ride .btn-continue-route:not(:disabled),
.screen.ride .btn-request:not(:disabled),
.screen.ride .btn-surge,
.screen.ride .btn-finish,
.screen.ride .btn-new-trip,
.screen.ride .btn-receipt-wa,
.profile-save-btn,
.history-reorder {
  background: var(--2t-btn-primary);
  color: #fff;
  border: none;
  font-weight: 800;
  box-shadow: var(--2t-btn-primary-shadow);
}

.screen.login .primary {
  border-radius: 14px;
}

.otp-send:not(:disabled) {
  border-radius: 14px;
}

.screen.ride .btn-continue-route:not(:disabled),
.screen.ride .btn-request:not(:disabled),
.screen.ride .btn-surge,
.screen.ride .btn-finish,
.screen.ride .btn-new-trip,
.screen.ride .btn-receipt-wa {
  height: 48px;
  border-radius: 14px;
  font-size: 14px;
}

.screen.login .primary:disabled,
.screen.ride .btn-continue-route:disabled,
.screen.ride .btn-request:disabled {
  background: var(--2t-btn-primary-disabled);
  color: var(--2t-btn-primary-disabled-text);
  opacity: 1;
  box-shadow: none;
}

.profile-save-btn {
  height: 44px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 900;
}

.history-reorder {
  height: 40px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 900;
}

/* ── اختيار المركبة — التفاصيل في choose-pro.css ── */
#choose.screen.on {
  background: #ffffff !important;
}

/* ── خريطة: يُدار من map-pro.css ── */

/* ── ورقة الرحلة ── */
.screen.ride .ride-sheet {
  border-radius: 16px 16px 0 0;
  box-shadow: var(--2t-sheet);
  background: #fff;
}

.screen.ride .sheet-handle {
  width: 40px;
  background: #e2e8f0;
}

.screen.ride #phasePlan .route-card,
.screen.ride .service-card,
.screen.ride .driver-hero,
.screen.ride .driver-vehicle-card,
.screen.ride .live-status-card,
.screen.ride .dest-history-list {
  border: 1px solid var(--2t-line);
  border-radius: var(--2t-radius);
  box-shadow: var(--2t-shadow);
}

.screen.ride .service-card.selected {
  border-color: rgba(25, 169, 116, 0.5);
  background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
}

.screen.ride .service-card .meta strong {
  color: var(--2t-accent-dark);
}

/* ── خريطة: يُدار من map-pro.css ── */

.screen.ride .route-gps {
  background: #ecfdf5;
  border-color: rgba(25, 169, 116, 0.2);
  color: var(--2t-accent-dark);
}

.screen.ride .route-gps:active {
  background: #d1fae5;
  border-color: rgba(25, 169, 116, 0.35);
}

.screen.ride .map-btn--gps {
  color: var(--2t-accent-dark);
  border-color: rgba(25, 169, 116, 0.18);
}

.screen.ride .map-btn--gps:active {
  background: #ecfdf5;
  border-color: rgba(25, 169, 116, 0.28);
  box-shadow: 0 2px 10px rgba(25, 169, 116, 0.12);
}

.screen.ride .dest-history-item:active {
  background: #f8fafc;
}

.screen.ride .dest-history-item--place .dest-history-icon {
  background: #ecfdf5;
  color: var(--2t-accent-dark);
}

.screen.ride .search-radar .core {
  background: linear-gradient(135deg, #34d399, var(--2t-accent));
}

.screen.ride .search-radar .ring {
  border-color: rgba(25, 169, 116, 0.28);
}

/* ── تم العثور على كابتن ── */
.screen.ride .driver-status-bar {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid rgba(25, 169, 116, 0.16);
  color: var(--2t-accent-dark);
}

.screen.ride .driver-eta-chip {
  background: #fff;
  color: var(--2t-accent-dark);
  border: 1px solid rgba(25, 169, 116, 0.2);
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(25, 169, 116, 0.08);
}

.screen.ride .status-dot-live {
  background: var(--2t-accent);
  box-shadow: 0 0 0 5px rgba(25, 169, 116, 0.22);
}

/* ── وصل الكابتن / مراحل الرحلة ── */
.screen.ride .status-stepper .step.on {
  background: linear-gradient(90deg, var(--2t-accent), var(--2t-accent-dark));
}

.screen.ride .status-stepper .step.done {
  background: #86efac;
}

.screen.ride .live-status-card[data-stage="1"] {
  background: linear-gradient(180deg, #ecfdf5 0%, #fff 72%);
  border-color: rgba(25, 169, 116, 0.28);
}

.screen.ride .live-status-card[data-stage="1"] strong {
  color: var(--2t-accent-dark);
}

.screen.ride .live-status-card[data-stage="1"] .status-stepper .step.on {
  background: linear-gradient(90deg, #22c55e, #16a34a);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
}

/* ── زر الاتصال والإجراءات ── */
.screen.ride .trip-act.call {
  height: 48px;
  gap: 10px;
  border-radius: 14px;
  background: var(--2t-btn-primary);
  box-shadow: var(--2t-btn-primary-shadow);
}

.screen.ride .trip-act-iconpod--call {
  width: 36px;
  height: 36px;
}

.screen.ride .trip-act-iconpod--call .ui-wrap--call {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.screen.ride .trip-act-iconpod--call .ui-icon {
  width: 20px;
  height: 20px;
}

.screen.ride .trip-act.call .act-label {
  font-size: 14px;
  font-weight: 800;
}

.screen.ride .trip-act-iconpod--chat .ui-wrap--chat {
  background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%);
  color: var(--2t-accent-dark);
  border: 1px solid rgba(25, 169, 116, 0.12);
}

.screen.ride .trip-act-iconpod--share .ui-wrap--share {
  background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
  color: #475569;
  border: 1px solid rgba(148, 163, 184, 0.16);
}

/* ── حساب / سجل (extras) ── */
.screen.account,
.screen.history {
  background: #f8fafc;
}

.account-card,
.history-item {
  border-radius: var(--2t-radius);
  box-shadow: var(--2t-shadow);
}

/* ── نسخة أندرويد: لا نغطي زر الخادم ── */
.beta-api-hint {
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ══════════════════════════════════════════
   توحيد ألوان التطبيق — طبقة نهائية
   (الشكل كما هو · الألوان فقط)
   ══════════════════════════════════════════ */

/* ── خريطة · ETA · دبابيس ── */
.map-eta-chip {
  border-color: var(--2t-green-soft-border) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 8px 24px var(--2t-green-glow) !important;
}

.map-chip-live {
  background: var(--2t-accent-light) !important;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22) !important;
}

.map-chip-eta {
  color: var(--2t-accent-dark) !important;
}

.map-pin--pickup .map-pin-head {
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.28) !important;
}

.map-pin--dest .map-pin-head {
  background: linear-gradient(145deg, #fef08a 0%, #eab308 52%, #ca8a04 100%) !important;
  box-shadow: 0 4px 14px rgba(202, 138, 4, 0.28) !important;
}

/* ── رقائق · أيقونات · عناصر تفاعل ── */
.ui-chip--eta,
.ui-chip--clock,
.ui-chip--route {
  background: var(--2t-green-soft) !important;
  color: var(--2t-accent-dark) !important;
}

.ui-pin--to {
  color: var(--2t-brand-gold) !important;
}

.screen.ride .pay-method.on {
  border-color: rgba(25, 169, 116, 0.45) !important;
  background: var(--2t-green-soft) !important;
  color: var(--2t-accent-dark) !important;
}

.screen.ride .search-step.active {
  background: var(--2t-accent) !important;
}

.screen.ride .search-step.done {
  background: var(--2t-green-500) !important;
}

/* ── محادثة · إيصال · OTP ── */
.chat-send {
  background: var(--2t-btn-primary) !important;
  box-shadow: var(--2t-btn-primary-shadow) !important;
}

.chat-msg.me {
  background: var(--2t-green-600) !important;
}

.receipt-total-row {
  background: linear-gradient(135deg, var(--2t-green-soft), #f0fdf4) !important;
}

.receipt-total-row strong {
  color: var(--2t-accent-dark) !important;
}

.otp-send:not(:disabled) {
  color: #fff !important;
}

.otp-hint.demo-code {
  background: linear-gradient(180deg, var(--2t-green-soft) 0%, #f0fdf4 100%) !important;
  border-color: rgba(25, 169, 116, 0.22) !important;
}

.otp-hint.demo-code strong {
  color: var(--2t-accent-dark) !important;
}

/* ── حساب · سجل · كابتن ── */
.account-menu-item .ui-wrap,
.captain-entry-below-btn .ui-wrap,
.captain-entry-link .ui-wrap {
  background: var(--2t-green-soft) !important;
  color: var(--2t-accent-dark) !important;
}

.captain-entry-below-btn--hub {
  background: var(--2t-green-soft) !important;
}

.captain-entry-below-btn--hub:active {
  background: var(--2t-green-100) !important;
}

.nav-chip,
.ui-wrap--menu-reorder {
  background: var(--2t-green-soft) !important;
  border-color: rgba(25, 169, 116, 0.18) !important;
  color: var(--2t-accent-dark) !important;
}

.account-card-avatar,
.profile-avatar {
  background: linear-gradient(145deg, var(--2t-green-soft), #fff) !important;
  border-color: rgba(25, 169, 116, 0.14) !important;
  color: var(--2t-accent-dark) !important;
}

.stat-card strong {
  color: var(--2t-accent-dark) !important;
}

.account-menu-item .ui-chip {
  color: var(--2t-accent-dark) !important;
}

.captain-entry-below-copy b {
  color: var(--2t-accent-dark) !important;
}

.captain-entry-below-btn--hub {
  border-color: rgba(25, 169, 116, 0.2) !important;
}

.captain-entry-below-btn--hub:active {
  border-color: rgba(25, 169, 116, 0.35) !important;
}

.captain-entry-below-btn:active {
  border-color: rgba(25, 169, 116, 0.2) !important;
}

/* ── لوحة الكابتن ── */
.cap-hub-avatar {
  background: linear-gradient(145deg, var(--2t-green-soft), #fff) !important;
  border-color: rgba(25, 169, 116, 0.16) !important;
  color: var(--2t-accent-dark) !important;
}

.cap-hub-map-pulse {
  background: var(--2t-accent) !important;
  box-shadow: 0 0 0 6px rgba(25, 169, 116, 0.22) !important;
}

@keyframes capMapPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(25, 169, 116, 0.22); }
  50% { box-shadow: 0 0 0 18px rgba(25, 169, 116, 0); }
}

.cap-hub-go.on {
  background: var(--2t-btn-primary) !important;
  box-shadow:
    0 16px 40px var(--2t-green-glow),
    0 0 0 8px rgba(255, 255, 255, 0.9) !important;
}

.cap-hub-go-ring {
  border-color: rgba(34, 197, 94, 0.35) !important;
}

.cap-hub-request-badge {
  background: var(--2t-green-soft) !important;
  color: var(--2t-accent-dark) !important;
}

.cap-hub-request-route p i {
  background: var(--2t-accent) !important;
}

.cap-hub-cta {
  background: var(--2t-btn-primary) !important;
  box-shadow: var(--2t-btn-primary-shadow) !important;
}

.cap-hub-cta:active {
  background: var(--2t-green-600) !important;
}

.cap-hub-trip {
  background: linear-gradient(160deg, #0f2922 0%, #134e4a 100%) !important;
}

.cap-hub-trip-head > strong {
  color: #6ee7b7 !important;
}

.cap-hub-trip-steps span.on {
  background: var(--2t-green-600) !important;
}

.cap-hub-trip-line {
  background: linear-gradient(180deg, var(--2t-accent), var(--2t-brand-gold)) !important;
}

.cap-hub-trip-status {
  background: rgba(25, 169, 116, 0.18) !important;
  color: #86efac !important;
}

.cap-hub-settings-save,
#captainHubProfileSave {
  background: var(--2t-btn-primary) !important;
  box-shadow: var(--2t-btn-primary-shadow) !important;
}

.cap-nav-link {
  background: var(--2t-green-soft) !important;
  color: var(--2t-accent-dark) !important;
}

.cap-hub-request-timer i {
  background: linear-gradient(90deg, var(--2t-green-500), var(--2t-accent)) !important;
}

/* ── اختيار المركبة ── */
#choose .top .choose-captain-icon {
  background: var(--2t-green-soft) !important;
  border-color: rgba(25, 169, 116, 0.16) !important;
  color: var(--2t-accent-dark) !important;
}

.ui-wrap--choose-captain {
  background: var(--2t-green-soft) !important;
  color: var(--2t-accent-dark) !important;
}

/* ── خلفيات الشاشات ── */
.screen.login,
.screen.account,
.screen.history {
  background: var(--2t-surface) !important;
}

.screen.ride {
  background: var(--2t-surface-2) !important;
}

.screen.captain-hub {
  background: var(--2t-surface-2) !important;
}

/* ── إشعارات الرحلة (toast) ── */
.screen.ride .ride-toast--primary {
  background: var(--2t-btn-primary);
  color: #fff;
  border-radius: 14px;
  font-weight: 800;
  box-shadow: var(--2t-btn-primary-shadow);
}

.screen.ride .ride-toast--soft {
  background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%);
  color: #15803d;
  border: 1.5px solid rgba(34, 197, 94, 0.22);
  border-radius: 14px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.1);
}

@media (max-width: 460px) {
  .screen.ride .sheet-body {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── أيقونات تتبع الكابتn — منفصلة ── */
.screen.ride .driver-side-btn--call {
  color: var(--2t-accent-dark);
}

.screen.ride .map-btn--gps {
  color: var(--2t-accent-dark);
}