:root {
  --primary: #3B82F6;
  --primary-dark: #2563EB;
  --primary-light: #60A5FA;
  --success: #10B981;
  --success-dark: #059669;
  --warning: #F59E0B;
  --danger: #EF4444;
  --bg: #F8FAFC;
  --card: #FFFFFF;
  --text: #0F172A;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
  --border: #E2E8F0;
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
  --radius: 16px;
  --radius-sm: 12px;
  
  /* Safe areas - используем ОФИЦИАЛЬНЫЕ CSS переменные Telegram */
  /* В fullscreen режиме contentSafeAreaInset.top = 0, используем только safeAreaInset.top */
  --safe-top: var(--tg-safe-area-inset-top, 24px);
  --safe-bottom: var(--tg-safe-area-inset-bottom, 0px);
}

/* ===== SPLASH SCREEN ===== */
#splash-screen {
  position: fixed;
  inset: 0;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  will-change: clip-path;
}

#splash-screen.circle-reveal {
  clip-path: circle(150% at 0% 100%);
}

#splash-screen.circle-reveal.animate {
  clip-path: circle(0% at 0% 100%);
  transition: clip-path 0.8s ease-out;
}

#splash-screen.hidden {
  display: none;
}

.splash-content {
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  animation: splashFadeIn 0.5s ease-out 0.1s forwards;
}

.splash-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.speed-lines {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 42px;
  margin-right: 0px;
}

.speed-lines span {
  display: block;
  height: 5px;
  background-color: #2A2A2D;
  border-radius: 3px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: right center;
}

.speed-lines span:nth-child(1) {
  width: 10px;
  margin-left: auto;
  margin-right: 0;
  visibility: hidden;
}
.speed-lines span:nth-child(2) {
  width: 18px;
  margin-left: auto;
  margin-right: 3px;
  background-color: #BEBEBE;
  animation: lineGrow 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) 0.55s forwards;
}
.speed-lines span:nth-child(3) {
  width: 27px;
  margin-left: auto;
  margin-right: 6px;
  background-color: #787878;
  animation: lineGrow 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) 0.65s forwards;
}
.speed-lines span:nth-child(4) {
  width: 36px;
  margin-left: auto;
  margin-right: 9px;
  background-color: #2A2A2D;
  animation: lineGrow 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) 0.75s forwards;
}

@keyframes lineGrow {
  0% { opacity: 0; transform: scaleX(0); }
  50% { opacity: 0.6; }
  100% { opacity: 1; transform: scaleX(1); }
}

.splash-title {
  font-family: 'Exo 2', sans-serif;
  font-size: 52px;
  font-weight: 900;
  font-style: italic;
  color: #2A2A2D;
  margin: 0;
  letter-spacing: -1px;
  line-height: 1;
}

.splash-loader {
  position: absolute;
  bottom: 80px;
  display: flex;
  gap: 6px;
  opacity: 0;
  animation: splashFadeIn 0.3s ease-out 0.9s forwards;
}

.splash-loader span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D1D5DB;
  animation: splashPulse 1s ease-in-out infinite;
}

.splash-loader span:nth-child(2) {
  animation-delay: 0.15s;
}

.splash-loader span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes splashFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes splashPulse {
  0%, 100% { 
    opacity: 0.4; 
    transform: scale(1); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2); 
  }
}
/* ===== END SPLASH SCREEN ===== */

/* ===== DUPLICATE TAB BLOCK SCREEN ===== */
#duplicate-tab-screen {
  position: fixed;
  inset: 0;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

#duplicate-tab-screen.hidden {
  display: none;
}

#duplicate-tab-screen .splash-content {
  opacity: 1;
  transform: none;
  animation: none;
}

#duplicate-tab-screen .splash-subtitle {
  opacity: 1;
  transform: none;
  animation: none;
}

.duplicate-tab-message {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 24px;
  padding-bottom: calc(32px + var(--tg-safe-area-inset-bottom, 0px));
  text-align: center;
}

.duplicate-tab-text {
  font-size: 18px;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 8px;
}

.duplicate-tab-hint {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.5;
  margin-bottom: 24px;
}

.duplicate-tab-btn {
  width: 100%;
  padding: 16px;
  background: #1F2937;
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.duplicate-tab-btn:active {
  background: #374151;
}
/* ===== END DUPLICATE TAB BLOCK SCREEN ===== */

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

/* Status bar overlay - полупрозрачная подложка под системный статус-бар */
/* В fullscreen режиме TG header скрыт, остаётся только системный status bar */
#status-bar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Только системный status bar (notch, время, батарейка) */
  height: var(--tg-safe-area-inset-top, 24px);
  background: rgba(0,0,0,0.55);
  z-index: 99999;
  pointer-events: none;
}

/* Bottom safe area - подложка под системные кнопки (home indicator) */
/* Используем ТОЛЬКО safeAreaInset.bottom - это системная зона */
#bottom-safe-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--tg-safe-area-inset-bottom, 0px);
  background: var(--card);
  z-index: 99999;
}

/* Map */
#map {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  contain: layout style;
}

/* Top bar */
#top-bar {
  position: fixed;
  top: var(--safe-top);
  left: 0;
  right: 0;
  padding: 8px 16px;
  z-index: 100;
  pointer-events: none;
}

.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  padding: 8px 14px;
  border-radius: 50px;
  box-shadow: var(--shadow);
  pointer-events: auto;
}

#user-name {
  font-weight: 600;
  font-size: 14px;
}

.role-badge {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.role-badge.client {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
}

.role-badge.driver {
  background: linear-gradient(135deg, var(--success), var(--success-dark));
  color: white;
}

/* Selection mode indicator */
#select-mode {
  position: fixed;
  top: calc(var(--safe-top) + 56px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  transition: opacity 0.3s, transform 0.3s;
}

#select-mode.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
  pointer-events: none;
}

.select-mode-content {
  background: var(--text);
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
}

/* Map buttons */
.map-btn {
  position: fixed;
  width: 48px;
  height: 48px;
  background: var(--card);
  border: none;
  border-radius: 50%;
  box-shadow: var(--shadow);
  cursor: pointer;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: transform 0.2s, box-shadow 0.2s;
}

.map-btn:active {
  transform: scale(0.95);
}

/* btn-locate теперь внутри map-controls */

/* Profile capsule with subscription ring */
.profile-capsule {
  position: fixed;
  right: 16px;
  /* Над btn-locate: 48px кнопка + 12px gap */
  bottom: calc(var(--sheet-height, 280px) + var(--safe-bottom) + 56px + 16px + 48px + 12px);
  background: var(--card);
  border-radius: 24px;
  width: 48px;
  padding: 5px 0 7px 0;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  z-index: 100;
  transition: transform 0.35s ease, opacity 0.35s ease, bottom 0.3s ease;
}

.profile-capsule:active {
  transform: scale(0.95);
}

.profile-capsule {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-capsule.map-dragging {
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

.profile-capsule .profile-avatar-wrap {
  position: relative;
  width: 36px;
  height: 36px;
}

.profile-capsule .subscription-ring {
  position: absolute;
  width: 44px;
  height: 44px;
  top: -4px;
  left: -4px;
  pointer-events: none;
}

.profile-capsule .ring-bg {
  stroke: var(--border);
}

.profile-capsule .ring-progress {
  stroke: var(--success);
  stroke-dasharray: 125.6;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease;
}

.profile-capsule #profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-capsule #profile-avatar[src=""],
.profile-capsule #profile-avatar:not([src]) {
  display: none;
}

.profile-capsule #profile-avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.profile-capsule #profile-avatar:not([src=""]) + #profile-avatar-placeholder {
  display: none;
}

.profile-capsule #subscription-days {
  font-size: 12px;
  font-weight: 600;
  color: var(--success);
  line-height: 1;
  letter-spacing: -0.3px;
}

/* Bottom Sheet */
#sheet {
  position: fixed;
  bottom: var(--safe-bottom);
  left: 0;
  right: 0;
  background: var(--card);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -4px 30px rgba(0,0,0,0.1);
  z-index: 200;
  max-height: calc(85vh - var(--safe-bottom));
  min-height: 80px;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

#sheet:active {
  cursor: grabbing;
}

.sheet-header {
  padding: 10px 0 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
}

#sheet-content {
  padding: 0 20px 10px;
  overflow-y: auto;
  max-height: calc(85vh - 50px - var(--safe-bottom));
  touch-action: pan-y;
}

/* Route inputs */
.route-inputs {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  margin-bottom: 20px;
}

.route-input {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.2s;
}

.route-input:last-child {
  border-bottom: none;
}

.route-input:active {
  background: var(--bg);
  margin: 0 -20px;
  padding: 16px 20px;
}

.route-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.route-dot.from {
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

.route-dot.to {
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}

.route-input-text {
  flex: 1;
  font-size: 15px;
  color: var(--text);
}

.route-input-text.placeholder {
  color: var(--text-muted);
}

.route-line {
  position: absolute;
  left: 6px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: linear-gradient(to bottom, var(--success), var(--primary));
  border-radius: 1px;
}

/* Route info */
.route-info {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
}

.route-info-item {
  flex: 1;
  text-align: center;
}

.route-info-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

.route-info-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Price input */
.price-section {
  margin-bottom: 0;
}

/* Подсказка "Предложите вашу цену" */
.price-label {
  text-align: center;
  font-size: 13px;
  color: #486B6D;
  margin: 12px 0 10px;
  transition: all 0.15s ease;
}

.price-section-confirmed {
  margin-top: 12px;
}

/* Price block enter animation */
.price-block-enter {
  animation: priceBlockFadeIn 0.2s ease;
}

@keyframes priceBlockFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Pulse animation for price value change */
.price-pulse-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  animation: pricePulse 0.15s ease-out;
}

@keyframes pricePulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Новый компактный редактор цены */
.price-compact-editor {
  margin-top: 8px;
  transition: all 0.15s ease;
}

/* Компактная кнопка с ценой */
.price-compact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.price-compact-btn {
  height: 52px;
  border: none;
  border-radius: 50px;
  background: #3b82f6;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  padding: 0;
}

.price-submit-btn {
  height: 52px;
  min-width: 0;
  flex: 1;
  padding: 0 16px;
  border-radius: 50px;
  border: none;
  background: #3b82f6;
  color: white;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.price-submit-btn:active {
  transform: scale(0.95);
  background: #2563eb;
}

.price-compact-minus,
.price-compact-plus {
  width: 48px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.price-compact-minus:active,
.price-compact-plus:active {
  background: rgba(255, 255, 255, 0.15);
}

.price-compact-minus.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.price-compact-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.price-compact-center {
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: white;
  cursor: pointer;
  height: 100%;
  transition: background 0.15s ease;
}

.price-compact-center:active {
  background: rgba(255, 255, 255, 0.1);
}

/* Обёртка для анимации барабана */
.price-value-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 32px;
}

.price-compact-value {
  font-size: 24px;
  font-weight: 600;
  color: white !important; /* Всегда белый */
  position: relative;
}

/* Анимация барабана для нового значения */
.price-value-wrap .price-value-new {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  color: white !important; /* Всегда белый */
}

.price-compact-currency {
  font-size: 24px;
  font-weight: 600;
  color: white;
  margin-left: 0;
}

/* Прогресс-бар */
.price-progress-wrap {
  margin-top: 12px;
}

.price-progress-bar {
  height: 6px;
  background: #e5e5e5;
  border-radius: 3px;
  overflow: hidden;
}

.price-progress-fill {
  height: 100%;
  width: 0%;
  background: #3b82f6;
  border-radius: 3px;
  transition: width 0.3s ease, background 0.3s ease;
}

.price-progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.price-status {
  font-size: 13px;
  font-weight: 500;
  color: #3b82f6;
  transition: color 0.3s ease;
}

.price-recommend {
  font-size: 13px;
  color: #486B6D;
}

.oferta-disclaimer {
  text-align: center;
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
  line-height: 1.4;
}

.oferta-disclaimer a {
  color: #9ca3af;
  text-decoration: underline;
}

/* Старые стили price-card оставляем для совместимости но скрываем */
.price-card {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 16px;
  padding: 16px 20px;
  margin-top: 12px;
  text-align: center;
  transition: all 0.3s ease, background 0.4s ease, box-shadow 0.4s ease;
  display: none; /* Скрыт - используем новый дизайн */
}

.price-card.hiding {
  opacity: 0;
  transform: translateY(-10px);
}

.price-card.hidden {
  display: none;
}

.price-card.showing {
  animation: fadeSlideIn 0.3s ease;
}

.price-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.price-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  transition: all 0.3s ease;
}

/* Цветовая индикация подсказки */
.price-hint.hint-low {
  color: hsl(0, 60%, 45%);
}

.price-hint.hint-medium {
  color: var(--text-secondary);
}

.price-hint.hint-good {
  color: hsl(80, 50%, 38%);
}

.price-hint.hint-excellent {
  color: hsl(120, 50%, 35%);
  font-weight: 500;
}

.price-hint .hint-warn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.price-hint .hint-warn::before {
  content: '⚠️';
  font-size: 11px;
}

.price-hint .hint-excellent {
  font-weight: 600;
}

/* Плавная анимация цвета цены */
.price-value,
.price-value-new,
.price-currency {
  transition: color 0.3s ease;
}

/* Эффект "Отличная цена" - мягкое свечение */
.price-card.price-excellent {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.15);
}

.price-card.price-excellent .price-title {
  color: hsl(120, 40%, 35%);
}

.price-label {
  font-size: 13px;
  color: #486B6D;
  margin-bottom: 8px;
  text-align: center;
}

.price-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.price-btn-round {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.price-btn-round:active,
.price-btn-round.pressed {
  transform: scale(0.92);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  background: #f3f4f6;
}

.price-btn-round.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.price-btn-round svg {
  width: 24px;
  height: 24px;
}

.price-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 16px;
  transition: background 0.15s ease;
  min-width: 120px;
}

.price-display:active {
  background: var(--bg);
}

.price-display.editing {
  visibility: hidden;
}

.price-value-wrap {
  position: relative;
  overflow: hidden;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.price-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  display: inline-block;
}

.price-value-new {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
}

.price-currency {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
}

.price-chips {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.price-chip {
  padding: 6px 14px;
  border: 1.5px solid var(--border);
  background: #ffffff;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.1s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.price-chip:active {
  transform: scale(0.95);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  background: #f3f4f6;
}

.price-chip.active {
  background: #f3f4f6;
  border-color: var(--text-secondary);
  color: var(--text);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.price-input-inline {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  border: none;
  background: transparent;
  color: white;
  width: 4ch;
  min-width: 3ch;
  max-width: 6ch;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.price-input-inline::-webkit-outer-spin-button,
.price-input-inline::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Buttons */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-primary:active {
  transform: scale(0.98);
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.2);
}

.btn-primary:disabled {
  background: var(--border);
  color: var(--text-muted);
  box-shadow: none;
  cursor: not-allowed;
}

/* Split Button (Price | Action) */
.btn-split {
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  border-radius: 50px;
  height: 52px;
}

.btn-split-price {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  height: 100%;
  font-size: 24px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-split-price svg {
  flex-shrink: 0;
}

.btn-split-price:active {
  background: rgba(255,255,255,0.15);
}

.btn-split-divider {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.5);
  flex-shrink: 0;
}

.btn-split-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  height: 100%;
  font-size: 16px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-split-action:active {
  background: rgba(0,0,0,0.1);
}

/* Price Editor Animations - теперь на .price-card */

/* Button Animations */
.btn-split {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.btn-split {
  transition: opacity 0.15s ease, transform 0.15s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.btn-success {
  background: linear-gradient(135deg, var(--success), var(--success-dark));
  color: white;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn-danger {
  background: var(--danger);
  color: white;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--border);
  color: var(--text-secondary);
}

.btn-outline:active {
  background: var(--bg);
}

.btn-outline-danger {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}

.btn-outline-danger:active {
  background: rgba(239, 68, 68, 0.1);
}

.btn-sm {
  padding: 10px 16px;
  font-size: 14px;
}

/* Status card */
.status-card {
  text-align: center;
  padding: 30px 0;
}

.status-icon {
  font-size: 60px;
  margin-bottom: 16px;
}

.status-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.status-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Trip route display for "Вы в пути" */
.trip-route-display {
  background: #F5F5F5;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.trip-route-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
}

.trip-route-row:first-child {
  padding-top: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding-bottom: 12px;
  margin-bottom: 4px;
}

.trip-route-row:last-child {
  padding-bottom: 0;
}

.trip-route-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.trip-route-dot.from {
  background: transparent;
  border: 3px solid #EF4444;
}

.trip-route-dot.to {
  background: #486B6D;
  border: none;
}

.trip-route-text {
  flex: 1;
  min-width: 0;
}

.trip-route-label {
  font-size: 12px;
  color: #9CA3AF;
  margin-bottom: 2px;
}

.trip-route-address {
  font-size: 15px;
  font-weight: 500;
  color: #1F2937;
}

/* Offers */
.offers-section {
  margin-top: 12px;
  margin-bottom: 0;
  padding-bottom: 0;
}

.offers-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.offer-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.offer-card:last-child {
  margin-bottom: 0;
}

.offer-card:active {
  transform: scale(0.99);
}

/* Анимация появления карточки - slide-in справа с пружинкой */
@keyframes slideInSpring {
  0% {
    opacity: 0;
    transform: translate3d(60px, 0, 0);
  }
  70% {
    opacity: 1;
    transform: translate3d(-8px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.offer-card.slide-in {
  animation: slideInSpring 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  backface-visibility: hidden;
}

/* Анимация исчезновения карточки - slide-out вправо */
@keyframes slideOutSpring {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  30% {
    opacity: 1;
    transform: translate3d(-10px, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(60px, 0, 0);
  }
}

.offer-card.slide-out {
  animation: slideOutSpring 0.25s cubic-bezier(0.55, 0, 1, 0.45) both;
  backface-visibility: hidden;
}

/* Подсветка обновления цены */
.offer-price.price-updated {
  animation: price-flash 0.3s ease;
}

@keyframes price-flash {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); color: var(--primary); }
  100% { transform: scale(1); }
}

/* Avatar wrapper с бейджем рейтинга */
.offer-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
  margin-bottom: 4px;
}

.offer-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.offer-avatar-placeholder {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}

img.offer-avatar {
  object-fit: cover;
  background: var(--bg);
}

.offer-rating-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.offer-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.offer-name {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.offer-car-info {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 1px;
}

.offer-car-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.12);
  flex-shrink: 0;
}

.offer-car-model {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.offer-car-number {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.3px;
}

.offer-eta {
  font-size: 11px;
  color: #4CAF50;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.offer-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.offer-price {
  font-size: 15px;
  font-weight: 700;
  color: #486B6D;
}

.offer-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}

.offer-accept {
  padding: 8px 16px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Driver card */
.driver-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #F3F4F6;
  border-radius: 16px;
  margin-bottom: 16px;
}

.driver-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

.driver-avatar-lg {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--success), var(--success-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  color: white;
}

.driver-avatar-placeholder {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}

img.driver-avatar-lg {
  object-fit: cover;
  background: var(--bg);
}

.driver-rating-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Бейдж рейтинга клиента в карточке заказа - тот же стиль */
.client-avatar-wrap .driver-rating-badge {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
}

.driver-details {
  flex: 1;
  min-width: 0;
}

.driver-name-lg {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}

.driver-car-info-lg {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.driver-car-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.driver-car-info-lg span:not(.driver-car-color) {
  font-size: 14px;
  color: var(--text-secondary);
}

.driver-car-number-lg {
  font-size: 13px;
  color: #486B6D;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.driver-eta {
  text-align: right;
}

.driver-eta-value {
  font-size: 28px;
  font-weight: 700;
  color: #1F2937;
}

.driver-eta-label {
  font-size: 12px;
  color: #486B6D;
}

/* Orders list (for drivers) */
.orders-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.order-card {
  padding: 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.order-card:active {
  transform: scale(0.98);
}

.order-route {
  margin-bottom: 12px;
}

.order-point {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 6px;
}

.order-point:last-child {
  margin-bottom: 0;
}

.order-point-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.order-point-dot.from { background: var(--success); }
.order-point-dot.to { background: var(--primary); }

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.order-price {
  font-size: 22px;
  font-weight: 700;
}

.order-distance {
  font-size: 13px;
  color: var(--text-muted);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 40px 20px;
}

/* Анимация появления empty-state */
.empty-state.fade-in {
  animation: emptyStateFadeIn 0.3s ease;
}

@keyframes emptyStateFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-text {
  color: var(--text-muted);
  font-size: 15px;
}

/* Actions row */
.actions-row {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.actions-row .btn {
  flex: 1;
}

/* Rating */
.rating-stars {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 24px 0;
}

.rating-star {
  font-size: 40px;
  color: var(--border);
  cursor: pointer;
  transition: all 0.2s;
}

.rating-star.active {
  color: var(--warning);
  transform: scale(1.1);
}

/* Price offer */
.price-offer-input {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.price-offer-input input {
  flex: 1;
  padding: 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: border-color 0.2s;
}

.price-offer-input input:focus {
  border-color: var(--primary);
}

/* Toast */
/* ===== Smart Toast System ===== */
#toast-container {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 250;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
  width: calc(100% - 32px);
  max-width: 400px;
  bottom: 50%;
  transition: bottom 0.3s ease;
}

.smart-toast {
  background: rgba(32, 33, 36, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #F3F4F6;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 0 0 0.5px rgba(255,255,255,0.06) inset;
  opacity: 0;
  transform: translateY(16px) scale(0.95);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: auto;
  line-height: 1.35;
  position: relative;
  overflow: hidden;
}

.smart-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.smart-toast.hide {
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast-icon-wrap {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast-icon-wrap svg {
  width: 14px;
  height: 14px;
}

.smart-toast.success .toast-icon-wrap { background: rgba(52, 211, 153, 0.2); }
.smart-toast.success svg { color: #34D399; }

.smart-toast.error .toast-icon-wrap { background: rgba(248, 113, 113, 0.2); }
.smart-toast.error svg { color: #F87171; }

.smart-toast.warning .toast-icon-wrap { background: rgba(251, 191, 36, 0.2); }
.smart-toast.warning svg { color: #FBBF24; }

.smart-toast.info .toast-icon-wrap { background: rgba(96, 165, 250, 0.2); }
.smart-toast.info svg { color: #60A5FA; }

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 1px;
  overflow: hidden;
}

.toast-progress-inner {
  height: 100%;
  border-radius: 1px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(1);
}

.smart-toast.show .toast-progress-inner {
  transform: scaleX(0);
}

.smart-toast.success .toast-progress-inner { background: rgba(52, 211, 153, 0.4); }
.smart-toast.error .toast-progress-inner { background: rgba(248, 113, 113, 0.4); }
.smart-toast.warning .toast-progress-inner { background: rgba(251, 191, 36, 0.4); }
.smart-toast.info .toast-progress-inner { background: rgba(96, 165, 250, 0.4); }

/* Pulse animation */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* Loading spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Hidden utility */
.hidden {
  display: none !important;
}

/* Driver marker (your assigned driver - car icon) */
.driver-marker {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.driver-marker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Available driver markers (free taxis - car icons) */
.available-driver-marker {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.available-driver-marker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* My location marker (driver's own position - blue arrow) */
.my-location-marker {
  width: 40px;
  height: 40px;
}

.my-loc-pulse {
  transform-origin: 20px 20px;
  animation: myLocPulse 2s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes myLocPulse {
  0%, 100% { transform: scale(0.8); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.3; }
}

.client-location-marker {
  width: 40px;
  height: 40px;
  pointer-events: none;
}

/* ===== TAB BAR ===== */
#tab-bar {
  position: fixed;
  bottom: var(--safe-bottom);
  left: 0;
  right: 0;
  height: 56px;
  background: var(--card);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 600;
  padding: 0 8px;
  pointer-events: auto !important;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.2s, background 0.2s;
  pointer-events: auto !important;
  border-radius: 12px;
  margin: 0 4px;
}

.tab-item:active {
  background: rgba(59, 130, 246, 0.1);
}

.tab-item.active {
  color: var(--primary);
}

.tab-icon {
  width: 24px;
  height: 24px;
}

.tab-item span {
  font-size: 11px;
  font-weight: 500;
}

/* ===== ADDRESS SEARCH SCREEN ===== */
/* ===== NEW ADDRESS INPUT STYLE (like Maxim) ===== */
.address-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

.address-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #F5F5F5;
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.2s;
}

.address-row:active {
  background: #EBEBEB;
}

.address-row:last-child {
  border-bottom: none;
}

.address-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.address-icon.from {
  background: transparent;
}

.address-icon.from::after {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #E53935;
  background: transparent;
}

.address-icon.from.spinning::after {
  border: 3px solid rgba(229, 57, 53, 0.25);
  border-top-color: #E53935;
  animation: addr-spin 0.8s linear infinite;
}

.address-icon.to.spinning {
  animation: addr-spin 0.8s linear infinite;
}

@keyframes addr-spin {
  to { transform: rotate(360deg); }
}

.address-icon.to {
  background: #445E6B;
  position: relative;
}

.address-icon.to svg {
  display: none;
}

.address-icon.to::after {
  content: '';
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6h-5.6z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(-15deg);
}

.address-text {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.address-text.placeholder {
  color: #486B6D;
}

.address-content .route-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  display: block;
  padding-left: 0;
  text-align: left;
}

.address-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.address-arrow svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

/* ===== ADDRESS ROW WITH LANDMARK ===== */
.address-row-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #F5F5F5;
  border-radius: 14px;
  transition: background 0.2s;
}

.address-row-wrap:active {
  background: #EBEBEB;
}

.address-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.address-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.address-content > * {
  width: 100%;
}

.address-label {
  font-size: 10px;
  color: #486B6D;
  font-weight: 500;
}

.address-subtitle {
  font-size: 12px;
  color: #7A8A8C;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.landmark-pill {
  padding: 4px 8px;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 400;
  color: #486B6D;
  cursor: pointer;
  width: 96px;
  min-height: 32px;
  max-height: 56px; /* 3 строки × 16px + 8px padding */
  text-align: center;
  line-height: 16px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  overflow: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;
  
  /* Обрезка текста — 3 строки */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Когда есть текст */
.landmark-pill.has-text {
  -webkit-line-clamp: 3;
}

.landmark-pill:active {
  transform: scale(0.96);
  background: #F5F5F5;
}

/* ===== LANDMARK MODAL ===== */
#landmark-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#landmark-modal.hidden {
  display: none;
}

.landmark-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.landmark-sheet {
  position: relative;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding-bottom: calc(var(--safe-bottom) + 20px);
  animation: slideUp 0.3s ease;
  max-height: 85vh;
  overflow: hidden;
}

@keyframes slideUp {
  from { 
    transform: translateY(100%);
    opacity: 0;
  }
  to { 
    transform: translateY(0);
    opacity: 1;
  }
}

.landmark-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.landmark-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 50%;
  transition: background 0.2s;
}

.landmark-close:active {
  background: #F0F0F0;
}

.landmark-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.landmark-done {
  padding: 8px 16px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.landmark-done:active {
  transform: scale(0.96);
  opacity: 0.9;
}

.landmark-content {
  padding: 20px;
}

.landmark-address-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #F8F9FA;
  border-radius: 12px;
  margin-bottom: 16px;
}

.landmark-address-icon {
  width: 24px;
  height: 24px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.landmark-address-icon svg {
  width: 100%;
  height: 100%;
}

.landmark-address-text {
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.landmark-hint {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 16px;
}

.landmark-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.landmark-chip {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid #E0E0E0;
  background: #FFFFFF;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
  line-height: 1.2;
}

.landmark-chip:active {
  transform: scale(0.96);
}

.landmark-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: transparent;
}

.landmark-chips-spinner {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
}

.spinner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted, #999);
  animation: chipsBounce 1s ease-in-out infinite;
}
.spinner-dot:nth-child(2) { animation-delay: 0.15s; }
.spinner-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes chipsBounce {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

.landmark-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

#landmark-input {
  width: 100%;
  padding: 16px 50px 16px 18px;
  font-size: 16px;
  border: 2px solid #E8E8E8;
  border-radius: 14px;
  background: #FAFAFA;
  color: var(--text);
  outline: none;
  transition: all 0.2s;
}

#landmark-input:focus {
  border-color: var(--primary);
  background: #FFF;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

#landmark-input::placeholder {
  color: var(--text-muted);
}

.landmark-clear {
  position: absolute;
  right: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 50%;
  transition: all 0.2s;
}

.landmark-clear:active {
  background: #F0F0F0;
  color: var(--text-secondary);
}

/* ===== FAVORITES TAB ===== */
.favorites-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.favorites-title {
  font-size: 15px;
  color: var(--text-secondary);
}

.favorites-clear {
  font-size: 14px;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}

.favorites-list {
  padding: 8px 0;
}

.favorite-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.favorite-item:active {
  background: var(--bg);
}

.favorite-letter {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.favorite-address {
  flex: 1;
  font-size: 15px;
  color: var(--text);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.favorite-edit {
  color: var(--text-muted);
  padding: 8px;
}

.favorite-edit svg {
  width: 18px;
  height: 18px;
}

.favorites-add-btn {
  margin: 16px 20px;
  padding: 14px;
  background: #FFF9C4;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: center;
}

.favorites-add-btn:active {
  background: #FFF59D;
}

/* ===== ORDERS HISTORY TAB ===== */
.orders-history-title {
  padding: 16px 20px;
  font-size: 15px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.order-history-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.order-history-item:active {
  background: var(--bg);
}

.order-history-route {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
}

.order-history-arrow {
  color: var(--text-muted);
}

.order-history-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-muted);
}

.order-history-price {
  font-weight: 600;
  color: var(--text);
}

/* ===== MENU TAB ===== */
.menu-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.menu-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}

.menu-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-user-info {
  flex: 1;
}

.menu-user-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.menu-user-phone {
  font-size: 14px;
  color: var(--text-muted);
}

.menu-arrow {
  color: var(--text-muted);
}

/* Car type selector for drivers */
.menu-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.menu-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.car-type-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.car-type-option {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 20px;
  border: none;
  background: #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.car-type-option img {
  display: none;
}

.car-type-option span {
  font-size: 13px;
  font-weight: 500;
  color: #486B6D;
}

.car-type-option.active,
.car-type-option.selected {
  background: rgba(72, 107, 109, 0.18);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.12);
}

.car-type-option.active span,
.car-type-option.selected span,
.car-type-option.selected .car-type-label {
  color: #486B6D;
  font-weight: 700;
}

.car-type-option:active {
  transform: scale(0.95);
}

/* ===== Menu Block System (driver) ===== */
.menu-blocks {
  background: #ececec;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.menu-block {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.menu-block .menu-item {
  border-bottom: 1px solid #f2f2f7;
}

.menu-block .menu-item:last-child,
.menu-block > :last-child .menu-item:not(.menu-accordion-header) {
  border-bottom: none;
}

.menu-block .menu-accordion {
  border-bottom: 1px solid #f2f2f7;
}

.menu-block .menu-accordion:last-child {
  border-bottom: none;
}

.menu-block .menu-item-accent {
  margin: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: #fff;
}

.menu-items {
  padding: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.menu-item:active {
  background: rgba(0,0,0,0.03);
}

.menu-item-icon {
  width: 24px;
  height: 24px;
  color: #8e8e93;
}

.menu-item-text {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
  color: #1c1c1e;
}

.menu-item-badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
}

/* ===== Setting Toggle ===== */
.menu-setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--card);
  border-radius: var(--radius-sm);
}

.setting-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.setting-icon {
  width: 20px;
  height: 20px;
  color: #8e8e93;
}

.setting-info span {
  font-size: 15px;
  color: #1c1c1e;
}

.setting-toggle {
  width: 50px;
  height: 28px;
  background: var(--border);
  border-radius: 14px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}

.setting-toggle.active {
  background: var(--primary);
}

.toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}

.setting-toggle.active .toggle-knob {
  transform: translateX(22px);
}

/* ===== Driver Menu Header ===== */
.menu-header {
  margin-bottom: 0;
  /* Используем те же отступы что и на главной */
}

/* ===== Menu Accordion ===== */
.menu-accordion {
  border-bottom: 1px solid #f2f2f7;
}

.menu-accordion-header {
  cursor: pointer;
}

.menu-accordion-arrow {
  width: 20px;
  height: 20px;
  color: #c7c7cc;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.menu-accordion.expanded .menu-accordion-arrow {
  transform: rotate(180deg);
}

.menu-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #f9f9f9;
}

.menu-accordion.expanded .menu-accordion-content {
  max-height: 500px;
}

.accordion-setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 12px 58px;
  border-bottom: 1px solid var(--border);
}

.accordion-setting-item .setting-info {
  gap: 10px;
}

.accordion-setting-item .setting-icon {
  width: 18px;
  height: 18px;
}

.accordion-setting-item .setting-info span {
  font-size: 14px;
}

.price-filter-item {
  border-bottom: none;
  padding-bottom: 8px;
}

.price-filter-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  min-width: 70px;
  text-align: right;
}

/* ===== Price Slider ===== */
.price-slider-container {
  padding: 0 20px 16px 58px;
  position: relative;
}

.price-slider {
  width: 100%;
  height: 32px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.price-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
  border: 3px solid white;
  margin-top: -10px;
}

.price-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
  border: 3px solid white;
}

.price-slider-track {
  position: absolute;
  top: 14px;
  left: 58px;
  right: 20px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  pointer-events: none;
}

.price-slider-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.1s ease;
}

.price-slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

/* ===== Car Data Fields ===== */
.data-field-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.data-field-item:last-child {
  border-bottom: none;
}

.data-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.data-field-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.info-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0.6;
  transition: opacity 0.2s;
}

.info-btn:active {
  opacity: 1;
}

.info-btn svg {
  width: 18px;
  height: 18px;
}

.data-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}

.data-input:focus {
  border-color: var(--primary);
}

.data-input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

#car-number-input {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

/* Autocomplete dropdown */
.autocomplete-wrapper {
  position: relative;
  flex: 1;
}

/* Input с кнопкой подтверждения */
.input-with-confirm {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.input-with-confirm .data-input {
  flex: 1;
}

.input-with-confirm .autocomplete-wrapper {
  flex: 1;
}

.confirm-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: var(--text-muted);
}

.confirm-btn svg {
  width: 20px;
  height: 20px;
}

.confirm-btn:active {
  transform: scale(0.95);
}

.confirm-btn.saved {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.confirm-btn.pulse {
  animation: confirmPulse 0.3s ease;
}

@keyframes confirmPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  margin-top: 4px;
}

.autocomplete-item {
  padding: 12px 14px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:active {
  background: var(--bg);
}

.autocomplete-item strong {
  color: var(--primary);
}

/* Car type selector */
/* Car type - styles defined above */

.car-type-option input {
  display: none;
}

.car-type-label {
  font-size: 13px;
  font-weight: 500;
  color: #486B6D;
}

/* Car color selector */
:root {
  --car-white: #FFFFFF;
  --car-black: #1a1a1a;
  --car-silver: #A8A8A8;
  --car-blue: #2563EB;
  --car-red: #DC2626;
  --car-green: #059669;
  --car-yellow: #EAB308;
  --car-brown: #92400E;
  --car-orange: #EA580C;
}

.car-color-selector {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  justify-items: center;
}

.car-color-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--color);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.car-color-btn[data-color="white"] {
  border-color: #ddd;
}

.car-color-btn:active {
  transform: scale(0.9);
}

.car-color-btn.selected {
  border-color: var(--primary);
  border-width: 3px;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}

.car-color-btn svg {
  width: 18px;
  height: 18px;
  stroke: white;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.car-color-btn[data-color="white"] svg,
.car-color-btn[data-color="yellow"] svg,
.car-color-btn[data-color="silver"] svg {
  stroke: #333;
  filter: none;
}

/* Info modal */
.info-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.info-modal {
  background: var(--card);
  border-radius: 16px;
  max-width: 320px;
  width: 100%;
  overflow: hidden;
  animation: slideUp 0.25s ease;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Driver Approaching Modal (for client) */
.driver-approaching-modal {
  text-align: center;
  padding: 32px 24px;
  max-width: 300px;
}

.approaching-icon {
  font-size: 56px;
  margin-bottom: 16px;
  animation: carBounce 1s ease-in-out infinite;
}

@keyframes carBounce {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.approaching-title {
  font-size: 20px;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 12px;
}

.approaching-text {
  font-size: 15px;
  color: #6B7280;
  line-height: 1.5;
  margin-bottom: 24px;
}

.approaching-btn {
  width: 100%;
  padding: 16px 24px;
  background: #10B981;
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.approaching-btn:active {
  background: #059669;
  transform: scale(0.98);
}

.info-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.info-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.info-modal-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-muted);
}

.info-modal-close svg {
  width: 20px;
  height: 20px;
}

.info-modal-body {
  padding: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

/* ===== CHAT TAB ===== */
.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.chat-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.chat-empty-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.chat-empty-text {
  font-size: 14px;
  color: var(--text-muted);
}

/* ===== ADJUST SHEET FOR TABBAR ===== */
#sheet {
  bottom: calc(var(--safe-bottom) + 56px);
}

/* ===== DRIVER FIXED HEADER ===== */
.driver-fixed-header {
  position: sticky;
  top: 0;
  background: transparent;
  z-index: 10;
  padding: 0;
  margin: 0;
  width: 100%;
  cursor: grab;
  touch-action: none;
}

/* Убираем заглушку */
.driver-fixed-header::before {
  display: none;
}

.driver-fixed-header .header-card {
  background: #F0F0F0;
  border-radius: 16px 16px 0 0;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.12);
}

.driver-fixed-header .driver-avatar {
  position: relative;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

/* Белая подложка под всё - самый нижний слой */
.driver-fixed-header .driver-avatar::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 0;
}

/* Прогресс-кольцо с conic-gradient */
.driver-fixed-header .avatar-progress {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(
    var(--color) calc(var(--progress) * 360deg),
    #E5E7EB calc(var(--progress) * 360deg)
  );
  z-index: 1;
  /* Маска для создания кольца */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
}

.driver-fixed-header .avatar-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  z-index: 2;
}

.driver-fixed-header .avatar-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Рейтинг под аватаром */
.driver-fixed-header .avatar-rating {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  z-index: 3;
}

/* Контейнер для города и подписки */
.driver-fixed-header .header-info-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.driver-fixed-header .city-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
  white-space: nowrap;
}

.driver-fixed-header .subscription-info {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.driver-fixed-header .sub-line {
  white-space: nowrap;
  line-height: 1.2;
}

.driver-fixed-header .sub-from {
  font-size: 11px;
  color: var(--text-muted);
}

.driver-fixed-header .sub-until {
  font-size: 14px;
  font-weight: 600;
  color: #486B6D;
}

.driver-fixed-header .sub-rating {
  font-size: 11px;
  color: #f59e0b;
  font-weight: 500;
}

/* Статичная информация о подписке в Меню */
.driver-fixed-header .menu-subscription-static {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}

.driver-fixed-header .menu-subscription-static .sub-line {
  position: static;
  opacity: 1;
  transform: none;
}

/* Анимация: показать подписку */
.driver-fixed-header .header-info-area.show-subscription .city-name {
  transform: translateY(-50%) translateX(20px);
  opacity: 0;
}

.driver-fixed-header .header-info-area.show-subscription .subscription-info {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

.driver-fixed-header .header-divider {
  width: 1px;
  height: 32px;
  background: var(--border);
}

.driver-fixed-header .orders-counter {
  text-align: center;
  padding-left: 12px;
}

.driver-fixed-header .orders-number {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.driver-fixed-header .orders-label {
  font-size: 9px;
  color: #486B6D;
  margin-top: 2px;
  letter-spacing: 0.5px;
}

/* Счётчик в меню - 2 строки */
.driver-fixed-header .orders-counter.menu-stats .orders-label {
  line-height: 1.3;
  font-size: 8px;
}

/* Старые классы для совместимости */
.driver-fixed-header .orders-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  padding: 6px 14px;
  border-radius: 20px;
}

.driver-fixed-header .orders-count.has-orders {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.12));
  color: #16a34a;
  font-weight: 700;
}

/* Минимальная высота шторки для водителя */
body.driver-mode #sheet {
  min-height: 0;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Скрываем аватар на карте в режиме водителя - он теперь в шапке */
body.driver-mode .profile-capsule {
  display: none !important;
}

body.driver-mode #sheet.collapsed {
  /* Transform-based: height stays fixed, translateY positions the sheet */
  overflow: hidden;
}

body.driver-mode #sheet.collapsed .orders-list,
body.driver-mode #sheet.collapsed .empty-state {
  display: none;
}

/* Блокируем скролл контента когда шторка свёрнута */
body.driver-mode #sheet.collapsed #sheet-content {
  overflow: hidden;
  touch-action: none;
  background: transparent;
}

body.driver-mode .orders-list {
  padding: 12px 0 16px; /* Небольшой отступ снизу */
  touch-action: pan-y; /* Разрешаем вертикальный скролл */
}

/* Когда шторка свёрнута - блокируем все touch actions на контенте */
body.driver-mode #sheet.collapsed .orders-list {
  touch-action: none;
}

/* Для водителя sheet-header скрыт */
body.driver-mode .sheet-header {
  display: none;
}

body.driver-mode #sheet-content {
  padding: 0;
  max-height: none;
  overflow-y: auto;
  background: #ececec;
}

/* ============================================================
   DRIVER DARK THEME — #273238 frame
   Только для body.driver-mode. Клиент не затрагивается.
   ============================================================ */

/* --- 1. ВЕРХНИЙ ТАБ-БАР (status-bar-overlay → тёмная шапка) --- */
body.driver-mode #status-bar-overlay {
  height: var(--safe-top, 68px);
  background: #273238;
  pointer-events: none;
}

/* --- 2. CITY SELECTOR в зоне contentSafeArea (между кнопками TG) --- */
/* Полоска-подложка на всю ширину — объединяет нативные кнопки TG + city pill в единый тулбар */
body.driver-mode #city-selector::before {
  content: '';
  position: fixed;
  top: calc(var(--tg-safe-area-inset-top, 24px) + 8px);
  left: 0;
  right: 0;
  /* Заполняем от верха кнопок до низа нативного хедера */
  height: calc(var(--tg-content-safe-area-inset-top, 44px) - 16px);
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 0;
  z-index: -1;
  pointer-events: none;
}

body.driver-mode #city-selector {
  position: fixed;
  top: var(--tg-safe-area-inset-top, 24px);
  left: calc(var(--tg-btn-left, 100px) + 3px);
  right: calc(var(--tg-btn-right, 78px) + 3px);
  width: auto;
  margin: 0;
  padding: 0;
  height: var(--tg-content-safe-area-inset-top, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Пилюля города — имитация нативных blur-кнопок TG */
body.driver-mode .city-pill {
  display: inline-flex;
  align-items: center;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 50px;
  color: #ffffff;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  gap: 0;
  flex-shrink: 1;
  min-width: 0;
  transition: opacity 0.2s ease !important;
  opacity: 1;
}
body.driver-mode .city-pill:active {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: none !important;
}
body.driver-mode .city-pill:focus,
body.driver-mode .city-pill:focus-visible,
body.driver-mode button.city-pill {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  border: none !important;
  background: transparent !important;
}
/* Текст внутри — ellipsis */
body.driver-mode #city-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Скрываем шеврон и иконку */
body.driver-mode .city-pill .chevron {
  display: none;
}
body.driver-mode .city-pill svg {
  display: none;
}

/* Dropdown — центрируем на экране, скролл */
body.driver-mode .city-dropdown-menu {
  position: fixed;
  top: calc(var(--tg-safe-area-inset-top, 24px) + var(--tg-content-safe-area-inset-top, 44px) + 8px);
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(-8px);
  width: min(280px, calc(100vw - 32px));
  max-height: calc(100vh - var(--tg-safe-area-inset-top, 24px) - var(--tg-content-safe-area-inset-top, 44px) - 220px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: rgba(39, 50, 56, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid #3a4a54;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
body.driver-mode .city-selector.open .city-dropdown-menu {
  transform: translateX(-50%) translateY(0);
}
body.driver-mode .city-option {
  color: #e0e0e0;
}
body.driver-mode .city-option:active {
  background: #3a4a54;
}
body.driver-mode .city-option.active {
  color: #4CAF50;
  background: rgba(76, 175, 80, 0.1);
}
body.driver-mode .city-option:not(:last-child) {
  border-bottom-color: #3a4a54;
}

/* --- 3. SHEET HEADER (drag handle) → скрыт для водителя --- */
body.driver-mode .sheet-header {
  display: none;
}
body.driver-mode .sheet-handle {
  display: none;
}

/* --- 4. SHEET фон --- */
body.driver-mode #sheet {
  background: #ececec;
  border-radius: 16px 16px 0 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 550;
}

/* --- 5. DRIVER FIXED HEADER → парящая карточка --- */
body.driver-mode .driver-fixed-header {
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 2;
}
body.driver-mode .driver-fixed-header::before {
  display: none;
}
body.driver-mode .driver-fixed-header .header-card {
  background: #273238;
  border: none;
  border-radius: 16px 16px 0 0;
  box-shadow: none;
}
body.driver-mode .driver-fixed-header .city-name {
  color: #ffffff;
}
body.driver-mode .driver-fixed-header .subscription-info .sub-line {
  color: #8a9aa8;
}
body.driver-mode .driver-fixed-header .menu-subscription-static .sub-line {
  color: #8a9aa8;
}
body.driver-mode .driver-fixed-header .sub-rating {
  color: #FFD54F;
}
body.driver-mode .driver-fixed-header .subscription-info .sub-rating {
  color: #FFD54F;
}
body.driver-mode .driver-fixed-header .menu-subscription-static .sub-rating {
  color: #FFD54F;
}
body.driver-mode .driver-fixed-header .header-divider {
  background: #3a4a54;
}
body.driver-mode .driver-fixed-header .orders-number {
  color: #ffffff;
}
body.driver-mode .driver-fixed-header .orders-label {
  color: #8a9aa8;
}
body.driver-mode .driver-fixed-header .avatar-inner {
  color: #ffffff;
  background: #3a4a54;
}
body.driver-mode .driver-fixed-header .avatar-inner img {
  border: none;
}
body.driver-mode .driver-fixed-header .avatar-rating {
  background: #FF9800;
  color: #fff;
}
body.driver-mode .driver-fixed-header .driver-avatar::before {
  background: #273238;
  box-shadow: none;
}

/* --- 6. ORDERS LIST → серый фон, карточки edge-to-edge --- */
body.driver-mode .orders-list {
  background: #ececec;
  margin: 0;
  padding: 6px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.driver-mode .order-card-v2 {
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
/* Левая полоска остаётся */

/* Empty state — серый фон как шторка */
body.driver-mode .empty-state {
  background: #ececec;
  border-radius: 0;
  margin: 0;
  padding: 20px;
}
body.driver-mode .empty-state .empty-text {
  color: #7a8a94;
}

/* --- 7. TAB BAR → тёмный --- */
body.driver-mode #tab-bar {
  background: #273238;
  border-top: 1px solid #3a4a54;
}
body.driver-mode .tab-item {
  color: #7a8a98;
}
body.driver-mode .tab-item.active {
  color: #4CAF50;
}
body.driver-mode .tab-item:active {
  background: rgba(76, 175, 80, 0.08);
}

/* --- 8. BOTTOM SAFE AREA → тёмный --- */
body.driver-mode #bottom-safe-area {
  background: #273238;
}

/* --- 9. Bidding bar на тёмном фоне --- */
body.driver-mode .bidding-bar {
  background: rgba(58, 74, 84, 0.9);
  border: 1px solid #3a4a54;
}

/* --- 10. MENU / HISTORY tabs в driver mode → тёмный хедер --- */
body.driver-mode .menu-items {
  background: var(--card);
}
body.driver-mode .menu-blocks {
  background: #ececec;
}
body.driver-mode .driver-stats-section {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
body.driver-mode .driver-history-section {
  background: #ececec;
}

/* --- 11. Collapsed sheet — прозрачный (карточка парит) --- */
body.driver-mode #sheet.collapsed {
  background: transparent;
}

/* ============================================================
   END DRIVER DARK THEME
   ============================================================ */

/* ===== CENTER PIN (CROSSHAIR) ===== */
#center-pin {
  position: fixed;
  left: 50%;
  top: 32%;
  transform: translateX(-50%);
  z-index: 150;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.3s ease;
}

#center-pin.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Pin body container (head + stick) */
.pin-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Pin head */
.pin-head {
  width: 36px;
  height: 36px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* White dot inside pin head */
.pin-head-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  transform: rotate(45deg);
  transition: all 0.3s ease;
}

/* [MAXIM] Lifted: dot PULSES (scale 1→2), no spinner */
#center-pin.lifted .pin-head-dot {
  animation: pin-dot-pulse 2s ease alternate infinite;
}

/* Landing: dot smoothly returns to base size */
#center-pin.landing .pin-head-dot {
  animation: pin-dot-land 0.3s ease forwards;
}

@keyframes pin-dot-land {
  0%   { transform: rotate(45deg) scale(1.4); }
  100% { transform: rotate(45deg) scale(1); }
}

@keyframes pin-dot-pulse {
  0%  { transform: rotate(45deg) scale(1); }
  100% { transform: rotate(45deg) scale(1.8); }
}

/* Pin stick */
.pin-stick {
  width: 3px;
  height: 20px;
  background: #1a1a1a;
  border-radius: 0 0 2px 2px;
  margin-top: -4px;
}

/* Pin ground - THE ANCHOR POINT (never moves!) */
.pin-ground {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 12px;
}

/* Pin shadow - expands/contracts around center */
.pin-shadow {
  position: absolute;
  width: 12px;
  height: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  transition: all 0.2s ease;
  /* Centered in pin-ground */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Black dot - THE TARGET POINT (absolute center, never moves!) */
.pin-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #000;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* FROM mode (Maxim red) */
#center-pin.pin-from .pin-head {
  background: #e12d23;
}

/* TO mode (Maxim grey-blue) */
#center-pin.pin-to .pin-head {
  background: #546e7a;
}

/* [MAXIM] Lifted: pin FLOATS UP then BOUNCES continuously */
#center-pin.lifted .pin-body {
  animation: pin-jump-up 2s ease-out forwards,
             pin-bounce 2s cubic-bezier(.2,.22,1,.53) alternate infinite 2s;
}

/* [MAXIM] Lifted: shadow SHRINKS and FADES (opposite of before) */
#center-pin.lifted .pin-shadow {
  animation: pin-shadow-shrink 2s ease alternate infinite;
}

/* Jump up */
@keyframes pin-jump-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-20px); }
}

/* Continuous bounce while floating */
@keyframes pin-bounce {
  0%   { transform: translateY(-20px); }
  100% { transform: translateY(-8px); }
}

/* Shadow shrinks + fades while pin is up */
@keyframes pin-shadow-shrink {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.1; }
}

/* [MAXIM] Landing: smooth return with subtle bounce */
#center-pin.landing .pin-body {
  animation: pin-land 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

#center-pin.landing .pin-shadow {
  animation: pin-shadow-land 0.4s ease forwards;
}

/* Landing: from floating position back to ground with overshoot */
@keyframes pin-land {
  0%   { transform: translateY(-16px); }
  60%  { transform: translateY(2px); }
  80%  { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

/* Shadow returns to normal */
@keyframes pin-shadow-land {
  0%   { transform: translate(-50%, -50%) scale(1.3); opacity: 0.15; }
  60%  { transform: translate(-50%, -50%) scale(0.9); opacity: 0.35; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
}

/* ===== AUTO-HIDE UI ON MAP INTERACTION ===== */
/* Шторка и tab-bar скрываются через translateY (GPU-composited, как в Maxim) */
/* Анимация управляется из JS через Web Animations API */
#sheet.map-dragging {
  pointer-events: none;
}
.address-search-modal {
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.address-search-modal.map-dragging {
  opacity: 0;
  pointer-events: none;
}
#tab-bar.map-dragging {
  transform: translateY(100%);
  pointer-events: none;
}

#tab-bar {
  transition: transform 285ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Убираем старую opacity-transition на шторке — теперь Web Animations API */

/* ===== ROUTE MARKERS (static pins on map) ===== */
.route-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.route-marker .marker-head {
  width: 28px;
  height: 28px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.route-marker .marker-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  transform: rotate(45deg);
}

.route-marker .marker-stick {
  width: 2px;
  height: 16px;
  background: #1a1a1a;
  margin-top: -3px;
}

.route-marker .marker-shadow {
  width: 10px;
  height: 5px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  margin-top: 0;
}

.route-marker.from .marker-head {
  background: #E53935;
}

.route-marker.to .marker-head {
  background: #00ACC1;
}

/* Active entrance marker */
.entrance-active {
  pointer-events: none;
}

.entrance-active img {
  width: 16px;
  height: 16px;
}

/* ===== City Selector (Driver) - ON MAP ===== */
.city-selector {
  position: fixed;
  top: var(--safe-top); /* Как у погоды - отзеркалено */
  left: 16px;
  z-index: 100;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Map controls (zoom + locate) */
.map-controls {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 100;
}

.map-ctrl-btn {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background 0.15s, transform 0.15s;
}

.map-ctrl-btn:active {
  background: rgba(255, 255, 255, 0.95);
  transform: scale(0.92);
}

.map-ctrl-btn#btn-locate svg {
  color: #445E6B;
}

/* Стрелочка геолокации - заливка */
.map-ctrl-btn#btn-locate svg path,
.map-ctrl-btn#btn-locate svg polygon {
  fill: #445E6B;
  stroke: none;
}

/* === PIN CONFIRM MINI SHEET === */
.pin-confirm-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-radius: 20px 20px 0 0;
  padding: 20px 20px calc(16px + var(--tg-safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
  z-index: 200;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.pin-confirm-sheet.visible {
  transform: translateY(0);
}

.pin-confirm-label {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.pin-confirm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.pin-confirm-address {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}

.pin-confirm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 0 24px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.pin-confirm-btn:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.city-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  white-space: nowrap;
}

.city-pill:active {
  background: rgba(255, 255, 255, 0.95);
  transform: scale(0.95);
}

.city-pill svg {
  color: var(--primary);
  flex-shrink: 0;
}

.city-pill .chevron {
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.city-selector.open .city-pill .chevron {
  transform: rotate(180deg);
}

.city-dropdown-menu {
  position: fixed;
  top: calc(var(--safe-top, 68px) + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(280px, calc(100vw - 32px));
  min-width: 0;
  max-height: calc(100vh - var(--safe-top, 68px) - 220px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 100001;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.city-selector.open .city-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.city-option {
  padding: 12px 18px;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease;
}

.city-dropdown-menu::-webkit-scrollbar {
  width: 4px;
}
.city-dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}
.city-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.3);
  border-radius: 4px;
}

.city-option:active {
  background: var(--bg);
}

.city-option.active {
  color: var(--primary);
  font-weight: 600;
  background: rgba(99, 102, 241, 0.08);
}

.city-option:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

/* ===== Driver Sheet Header ===== */
.driver-sheet-header {
  margin-bottom: 16px;
}

.driver-city-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.driver-orders-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ===== Order Detail Card (Driver) ===== */
.order-detail-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.order-route-detail {
  margin-bottom: 20px;
}

.order-point-detail {
  display: flex;
  gap: 14px;
  position: relative;
}

.order-point-detail:not(:last-child) {
  padding-bottom: 16px;
}

.order-point-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
}

.order-point-marker .marker-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid;
}

.order-point-marker.from .marker-dot {
  border-color: #4CAF50;
  background: #E8F5E9;
}

.order-point-marker.to .marker-dot {
  border-color: #2196F3;
  background: #E3F2FD;
}

.order-point-marker .marker-line {
  width: 2px;
  flex: 1;
  min-height: 24px;
  background: linear-gradient(to bottom, #4CAF50, #2196F3);
  margin-top: 4px;
}

.order-point-info {
  flex: 1;
}

.order-point-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.order-point-address {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}

.order-stats {
  display: flex;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.order-stat {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.order-stat.highlight {
  background: rgba(99, 102, 241, 0.1);
}

.order-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.order-stat.highlight .order-stat-value {
  color: var(--primary);
}

.order-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.order-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.order-option {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--bg);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ===== Offer Section ===== */
.offer-section {
  margin-bottom: 12px;
}

.offer-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}

.offer-input-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.offer-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.offer-input-wrap input {
  width: 100%;
  padding: 14px 40px 14px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  transition: border-color 0.2s;
}

.offer-input-wrap input:focus {
  outline: none;
  border-color: var(--primary);
}

.offer-currency {
  position: absolute;
  right: 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-muted);
}

.offer-input-row .btn {
  padding: 14px 24px;
  font-size: 15px;
  white-space: nowrap;
}

.btn-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

/* ===== Order Details Section (Client) ===== */
.details-section {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.details-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--bg);
  border: 1.5px dashed var(--border);
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.details-trigger:active {
  transform: scale(0.96);
}

.details-trigger:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(99, 102, 241, 0.05);
}

.details-trigger svg {
  transition: transform 0.3s ease;
}

.details-trigger:hover svg {
  transform: rotate(90deg);
}

.details-trigger.hidden {
  display: none;
}

.details-trigger.hiding {
  animation: detailsTriggerHide 0.15s ease forwards;
}

@keyframes detailsTriggerHide {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

.details-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.details-options.expanded {
  opacity: 1;
  max-height: 100px;
}

.detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(10px) scale(0.9);
  opacity: 0;
}

.details-options.expanded .detail-chip {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.detail-chip:active {
  transform: scale(0.95);
}

.detail-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.detail-chip .detail-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}

.detail-chip .detail-icon[fill="currentColor"] {
  fill: currentColor;
  stroke: none;
}

.detail-chip.active .detail-icon {
  stroke: white;
}

.detail-chip.active .detail-icon[fill="currentColor"] {
  fill: white;
  stroke: none;
}

/* ===== Order Options Display (Driver) ===== */
.order-options-display {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.order-option-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.05));
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
}

.order-option-tag svg {
  flex-shrink: 0;
  stroke: var(--primary);
}

/* ===== Order Options Row (4 pills) ===== */
.order-options-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.option-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: #F5F5F5;
  border: none;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  color: #486B6D;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.option-pill:active {
  transform: scale(0.96);
  background: #EBEBEB;
}

.option-pill svg {
  color: #486B6D;
}

.option-pill span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.option-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #445E6B;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ===== Options Overlay ===== */
.options-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.options-overlay.visible {
  pointer-events: auto;
}

.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.25s ease;
}

.options-overlay.visible .overlay-backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.options-overlay.closing .overlay-backdrop {
  background: rgba(0, 0, 0, 0);
}

.overlay-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 12px 16px calc(16px + var(--safe-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 70vh;
  overflow-y: auto;
}

/* Fullscreen шторка для подписок */
.overlay-sheet.fullscreen {
  max-height: calc(100vh - var(--safe-top, 24px) - 20px);
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(16px + var(--safe-bottom, 0px));
}

.overlay-sheet.fullscreen .overlay-handle {
  flex-shrink: 0;
}

.overlay-sheet.fullscreen .overlay-header-clean {
  flex-shrink: 0;
}

.overlay-sheet.fullscreen .sub-blocks,
.overlay-sheet.fullscreen .become-driver-content,
.overlay-sheet.fullscreen .driver-payment-content,
.overlay-sheet.fullscreen .payment-pending-screen {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.overlay-sheet.fullscreen .overlay-buttons {
  flex-shrink: 0;
  padding-top: 12px;
  margin-top: auto;
}

.options-overlay.visible .overlay-sheet {
  transform: translateY(0);
}

.options-overlay.closing .overlay-sheet {
  transform: translateY(100%);
}

.overlay-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 16px;
}

.overlay-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
  text-align: center;
}

/* Overlay Options (payment, car type) */
.overlay-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.overlay-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--bg);
  border: 1.5px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.overlay-option:active {
  transform: scale(0.98);
}

.overlay-option.active {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.08);
}

.overlay-option svg:first-child {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.overlay-option.active svg:first-child {
  color: var(--primary);
}

.overlay-option span {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.overlay-option .check-icon {
  color: var(--primary);
}

/* Car type options */
.car-option {
  flex-direction: row;
}

.car-option-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.car-option-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.car-option-desc {
  font-size: 13px;
  color: var(--text-muted);
}

/* Details list */
.details-list {
  display: flex;
  flex-direction: column;
}

.detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-row:active {
  opacity: 0.7;
}

.detail-row-info {
  flex: 1;
  padding-right: 12px;
}

.detail-row-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.detail-row-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Toggle switch */
.detail-toggle {
  width: 48px;
  height: 28px;
  background: var(--border);
  border-radius: 14px;
  position: relative;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.detail-toggle.active {
  background: var(--primary);
}

.detail-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}

.detail-toggle.active .detail-toggle-knob {
  transform: translateX(20px);
}

/* Schedule picker */
.schedule-picker {
  margin-bottom: 20px;
}

.schedule-now-btn {
  display: block;
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.schedule-now-btn:active {
  transform: scale(0.98);
}

.schedule-now-btn.active {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.08);
  color: var(--primary);
}

.schedule-wheels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 180px;
  background: var(--bg);
  border-radius: 12px;
  overflow: hidden;
}

.wheel-col {
  flex: 1;
  max-width: 100px;
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.wheel-col::-webkit-scrollbar {
  display: none;
}

.wheel-item {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-muted);
  scroll-snap-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wheel-item.selected {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  background: rgba(99, 102, 241, 0.1);
  border-radius: 8px;
}

.wheel-separator {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Overlay buttons */
.overlay-buttons {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.overlay-btn {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.overlay-btn:active {
  transform: scale(0.98);
}

.overlay-btn.primary {
  background: var(--primary);
  color: white;
}

.overlay-btn.secondary {
  background: var(--bg);
  color: var(--text);
}

.overlay-btn.full {
  flex: none;
  width: 100%;
}

.overlay-buttons-vertical {
  flex-direction: column;
  gap: 8px;
}

.overlay-buttons-vertical .overlay-btn {
  flex: none;
  width: 100%;
  border-radius: 50px;
  padding: 16px;
  font-size: 16px;
}

.overlay-btn-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ===== Order Detail - Scheduled Banner ===== */
.order-scheduled-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #92400e;
}

.order-scheduled-banner svg {
  flex-shrink: 0;
  color: #d97706;
}

/* ===== Order Detail - Meta Row ===== */
.order-meta-row {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}

.order-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.order-meta-item svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

/* ===== Order Card V2 (Driver) ===== */
.order-card-v2 {
  background: #ECEDF0;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  position: relative;
}

/* Анимация появления карточки - slide-in справа с пружинкой */
.order-card-v2.card-entering,
.order-card-v2.slide-in {
  animation: cardSlideInSpring 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  backface-visibility: hidden;
}

/* После анимации - оптимизация рендеринга */
.order-card-v2:not(.slide-in):not(.card-entering):not(.card-removing) {
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}

/* Анимация исчезновения карточки - slide-out вправо */
.order-card-v2.card-removing {
  animation: cardSlideOutSpring 0.25s cubic-bezier(0.55, 0, 1, 0.45) both;
  backface-visibility: hidden;
  pointer-events: none;
}

@keyframes cardSlideInSpring {
  0% {
    opacity: 0;
    transform: translate3d(60px, 0, 0);
  }
  70% {
    opacity: 1;
    transform: translate3d(-8px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes cardSlideOutSpring {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  30% {
    opacity: 1;
    transform: translate3d(-10px, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(60px, 0, 0);
  }
}

/* Левая полоска-индикатор цены */
.order-card-v2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #22C55E;
}

.order-card-v2.price-good::before { background: #22C55E; }
.order-card-v2.price-mid::before { background: #F59E0B; }
.order-card-v2.price-bad::before { background: #EF4444; }

/* ===== 3-блочная структура OrderCard ===== */
.oc-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #ECEDF0;
}

/* --- БЛОК 1: Аватар + Имя + Цена --- */
.oc-block-info {
  background: white;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border-radius: 0 6px 0 0;
}

.oc-info-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.oc-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  gap: 2px;
  position: relative;
}
.oc-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
}
.oc-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.oc-avatar-initial {
  color: white;
  font-weight: 600;
  font-size: 17px;
}
.oc-rating-badge {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  white-space: nowrap;
  line-height: 1.3;
  margin-top: -8px;
}

.oc-client-info {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}
.oc-client-name {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.oc-client-meta {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
}
.oc-pickup-text {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.oc-status-badge {
  font-weight: 600;
  font-size: 9px;
  white-space: nowrap;
}
.oc-status-badge.verified { color: #22C55E; }
.oc-status-badge.newbie { color: #F59E0B; }
.oc-time-ago {
  color: #aaa;
  font-size: 11px;
  margin-top: 1px;
  text-align: right;
}

/* --- Цена справа --- */
.oc-price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.oc-price {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
}
.oc-price-num {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: #1a1a1a;
}
.oc-price-rub {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin-left: 1px;
}
.oc-ppk {
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}
.oc-ppk.good { color: #22C55E; }
.oc-ppk.mid { color: #F59E0B; }
.oc-ppk.bad { color: #EF4444; }

/* --- БЛОК 2: Адреса + опции --- */
.oc-block-route {
  background: white;
  padding: 10px 14px;
}

.oc-route-line {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.oc-route-addrs {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.oc-addr {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.oc-addr-street {
  font-size: 12px;
  font-weight: 400;
  color: #6B7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin-top: -1px;
}
.oc-landmark {
  font-size: 12px;
  color: #6B7280;
  line-height: 1.3;
  margin: -1px 0 1px;
}
.oc-route-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.oc-route-meta {
  font-size: 13px;
  color: #888;
}
.oc-route-meta strong {
  color: #555;
}
.oc-options {
  display: flex;
  gap: 5px;
}

/* Car type badge */
.car-type-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 8px;
  white-space: nowrap;
  line-height: 1.6;
  background: #E8F5E9;
  color: #2E7D32;
}
.car-type-badge.econom { background: #E8F5E9; color: #2E7D32; }
.car-type-badge.comfort { background: #E3F2FD; color: #1565C0; }
.car-type-badge.business { background: #F1F1F1; color: #1A1A1A; }
.car-type-badge.cargo { background: #FFF3E0; color: #E65100; }

/* --- БЛОК 3: Кнопка действия --- */
.oc-block-action {
  background: white;
  padding: 8px 14px 12px;
  border-radius: 0 0 6px 0;
}

.route-with-line {
  display: flex;
  gap: 12px;
}

.route-icons-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.route-connector {
  width: 2px;
  flex: 1;
  min-height: 8px;
  background: #D1D5DB;
}

.route-addrs-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.route-landmark-text {
  font-size: 12px;
  color: #6B7280;
  padding: 4px 0;
  line-height: 1.3;
}

.route-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  position: relative;
}

.route-row:last-of-type {
  margin-bottom: 0;
}

.route-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.route-dot.from {
  background: var(--success);
}

.route-dot.to {
  background: var(--primary);
}

/* Новые иконки для карточки заказа */
.route-icon-sm {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.route-icon-sm.from::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2.5px solid #E53935;
  background: transparent;
}

.route-icon-sm.to {
  background: #445E6B;
}

.route-icon-sm.to::after {
  content: '';
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6h-5.6z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(-15deg);
}

.route-addr {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.route-addr.from {
  font-weight: 500;
  color: var(--text);
}

.route-addr.to {
  font-weight: 500;
  color: var(--text);
}
.route-addr-street {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted, #6B7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin-top: -2px;
}

.route-meta {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  padding-left: 30px;
  margin-top: 6px;
}

.route-meta strong {
  color: var(--text-secondary);
  font-weight: 600;
}

/* Торги и кнопка */
.order-action-bar {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price-adjuster {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: #F1F5F9;
  border-radius: 14px;
}

.price-adjuster .adj-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  background: white;
  font-size: 22px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.price-adjuster .adj-btn:active {
  transform: scale(0.94);
  background: #F8FAFC;
}

.price-adjuster .adj-value {
  flex: 1;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.btn-action {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-action:active {
  transform: scale(0.98);
  filter: brightness(0.95);
}

/* Scheduled order strip */
.order-scheduled-strip {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  padding: 8px 16px 8px 20px;
}

.scheduled-badge {
  font-size: 12px;
  font-weight: 600;
  color: #92400e;
}

/* ===== Order Detail Content ===== */
.order-detail-content {
  padding: 0;
}

.order-detail-content .order-card-v2 {
  margin: 0;
}

.detail-back-btn {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.detail-back-btn:active {
  background: var(--bg);
}

/* ===== Split Action Button ===== */
.action-btn-group {
  display: flex;
  gap: 0;
  flex: 1;
}

.btn-action-main {
  flex: 1;
  height: 52px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-action-main.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-action-main:active:not(.disabled) {
  transform: scale(0.98);
  filter: brightness(0.95);
}

/* Кнопка глаза */
.btn-action-eye {
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 14px;
  background: var(--card);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.btn-action-eye:active {
  transform: scale(0.95);
  background: var(--bg);
}

/* Spinner в кнопке */
.btn-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Disabled price adjuster */
.price-adjuster.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ===== Offers Modal ===== */
.offers-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none;
}

.offers-modal.visible {
  display: block;
}

.offers-modal.visible .offers-modal-backdrop {
  animation: fadeIn 0.25s ease;
}

.offers-modal.closing .offers-modal-backdrop {
  animation: fadeOut 0.25s ease forwards;
}

.offers-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
}

.offers-modal-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.15s ease;
  will-change: transform;
}

.offers-modal.visible .offers-modal-content {
  animation: slideUp 0.25s ease forwards;
}

/* Ручка для свайпа */
.offers-modal-content::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  background: #D1D5DB;
  border-radius: 2px;
}

.offers-modal.closing .offers-modal-content {
  animation: slideDown 0.25s ease forwards;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes slideDown {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.offers-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  font-weight: 600;
  color: #1F2937;
}

.offers-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg);
  border-radius: 50%;
  font-size: 16px;
  color: var(--text-muted);
  cursor: pointer;
}

/* Блок маршрута в модалке офферов */
.offers-modal-route {
  padding: 12px 20px;
  background: #F5F5F5;
  border-bottom: 1px solid var(--border);
}

.offers-route-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.offers-route-line:last-of-type {
  margin-bottom: 8px;
}

.offers-route-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.offers-route-dot.from {
  background: transparent;
  border: 2.5px solid #EF4444;
}

.offers-route-dot.to {
  background: #486B6D;
}

.offers-route-addr {
  font-size: 15px;
  color: #1F2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.offers-client-price {
  font-size: 15px;
  color: #1F2937;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.offers-client-price strong {
  font-weight: 700;
  color: #1F2937;
}

.offers-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.offers-loading {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

.offers-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

.offers-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
}

/* Универсальный серый спиннер */
.spinner-gray {
  width: 32px;
  height: 32px;
  border: 3px solid #e0e0e0;
  border-top-color: #999;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.offers-list {
  display: flex;
  flex-direction: column;
}

.offer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: 12px;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  animation: offerSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.offer-row:last-child {
  margin-bottom: 0;
}

/* Stagger animation delay */
.offer-row:nth-child(1) { animation-delay: 0ms; }
.offer-row:nth-child(2) { animation-delay: 40ms; }
.offer-row:nth-child(3) { animation-delay: 80ms; }
.offer-row:nth-child(4) { animation-delay: 120ms; }
.offer-row:nth-child(5) { animation-delay: 160ms; }
.offer-row:nth-child(6) { animation-delay: 200ms; }
.offer-row:nth-child(7) { animation-delay: 240ms; }
.offer-row:nth-child(8) { animation-delay: 280ms; }
.offer-row:nth-child(9) { animation-delay: 320ms; }
.offer-row:nth-child(10) { animation-delay: 360ms; }

@keyframes offerSlideIn {
  0% {
    opacity: 0;
    transform: translate3d(60px, 0, 0);
  }
  70% {
    opacity: 1;
    transform: translate3d(-6px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.offer-row.slide-out {
  animation: offerSlideOut 0.25s ease forwards;
}

@keyframes offerSlideOut {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(60px, 0, 0);
  }
}

.offer-row.is-you {
  background: rgba(38, 166, 154, 0.1);
  border: 1px solid var(--primary);
}

.offer-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Переопределяем стили бейджа рейтинга для модалки водителя */
.offer-row .offer-rating-badge {
  position: static;
  transform: none;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.offer-position {
  font-weight: 600;
  color: #1F2937;
  min-width: 28px;
}

.offer-rating {
  color: #F59E0B;
  font-weight: 500;
}

.offer-row-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.offer-row-price {
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
}

.offer-you-badge {
  padding: 4px 10px;
  background: var(--primary);
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.offers-hint {
  margin-top: 16px;
  padding: 12px;
  background: #F5F5F5;
  border-radius: 10px;
  font-size: 13px;
  color: #1F2937;
  text-align: center;
}

.offers-withdraw-btn {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--danger);
  border-radius: 12px;
  background: transparent;
  color: var(--danger);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.offers-withdraw-btn:active {
  background: rgba(239, 68, 68, 0.1);
}

.offers-modal-footer {
  padding: 16px 20px;
  margin-bottom: var(--safe-bottom);
  border-top: 1px solid var(--border);
  background: var(--card);
  flex-shrink: 0;
}


/* ===== History Tab Header ===== */
.header-earnings {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.header-earnings-label {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: opacity 0.25s ease;
}

/* === Animated Earnings (History Tab) === */
.header-earnings-animated {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  transition: opacity 0.25s ease;
}

.header-earnings-animated .earnings-value {
  color: #10B981;
}

/* В driver mode — белый как счётчик поездок */
body.driver-mode .header-earnings-animated .earnings-value {
  color: #ffffff;
}
body.driver-mode .header-earnings-animated .earnings-currency {
  color: #ffffff;
}
body.driver-mode .header-earnings-label {
  color: #8a9aa8;
}

.header-earnings-animated .earnings-currency {
  color: var(--text);
  margin-left: 2px;
}

/* Fade анимации для смены периодов — только opacity, без сдвигов */
.fade-out {
  opacity: 0;
}

.fade-in {
  opacity: 1;
}

/* Анимация для счётчика поездок */
#history-trips-count,
#history-trips-label {
  transition: opacity 0.25s ease;
}

/* ===== Driver Stats & History ===== */
/* ===== STATS SECTION — блочная система ===== */
.driver-stats-section {
  padding: 0;
  background: #fff;
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.driver-stats-title {
  display: none;
}

.driver-stats-grid {
  display: flex;
}

.driver-stat-card {
  flex: 1;
  background: none;
  border: none;
  border-radius: 0;
  border-right: 1px solid #f0f0f0;
  padding: 14px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.driver-stat-card:last-child {
  border-right: none;
}

.driver-stat-period {
  font-size: 12px;
  font-weight: 500;
  color: #8e8e93;
  margin-bottom: 3px;
  letter-spacing: 0.2px;
}

.driver-stat-trips {
  font-size: 11px;
  color: #aeaeb2;
  margin-bottom: 5px;
}

.driver-stat-amount {
  font-size: 18px;
  font-weight: 700;
  color: #34C759;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.3px;
}

/* Адаптивный размер для больших сумм */
.driver-stat-amount.large-amount {
  font-size: 16px;
}

.driver-stat-amount.xlarge-amount {
  font-size: 14px;
}

/* ===== HISTORY SECTION — блочная система ===== */
.driver-history-section {
  padding: 0;
  background: #ececec;
  border-radius: 0;
  margin-top: 6px;
}

.driver-history-title {
  display: none;
}

/* История по датам - блоки с серым gap */
.history-date-accordion {
  background: #fff;
  border: none;
  border-radius: 0;
  margin-bottom: 6px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.history-date-accordion:last-child {
  margin-bottom: 0;
}

.history-date-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.history-date-header:active {
  background: rgba(0,0,0,0.03);
}

.history-date-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.history-date-label {
  font-size: 16px;
  font-weight: 600;
  color: #1c1c1e;
  letter-spacing: -0.2px;
}

.history-date-count {
  font-size: 13px;
  color: #8e8e93;
  font-weight: 400;
}

.history-date-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-date-total {
  font-size: 18px;
  font-weight: 700;
  color: #34C759;
  letter-spacing: -0.3px;
}

.history-date-chevron {
  font-size: 20px;
  color: #c7c7cc;
  transition: transform 0.3s ease;
  transform: rotate(0deg);
  font-weight: 300;
}

.history-date-accordion.expanded .history-date-chevron {
  transform: rotate(90deg);
}

.history-date-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 16px;
}

.history-date-accordion.expanded .history-date-content {
  max-height: 1000px;
  padding-bottom: 6px;
}

.driver-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid #f2f2f7;
}

.driver-history-item:first-child {
  border-top: 1px solid #f2f2f7;
}

.driver-history-item:last-child {
  border-bottom: none;
}

.driver-history-route {
  flex: 1;
  min-width: 0;
}

.driver-history-from,
.driver-history-to {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.driver-history-from {
  color: #1c1c1e;
  font-weight: 500;
  letter-spacing: -0.1px;
}

.driver-history-to {
  color: #8e8e93;
  font-weight: 400;
}

.driver-history-arrow {
  font-size: 9px;
  color: #c7c7cc;
  margin: 2px 0;
  line-height: 1;
}

.driver-history-right {
  text-align: right;
  flex-shrink: 0;
  margin-left: 12px;
}

.driver-history-price {
  font-size: 16px;
  font-weight: 600;
  color: #34C759;
}

.driver-history-time {
  font-size: 12px;
  color: #aeaeb2;
  margin-top: 2px;
}



/* ===== Search Status Row (compact spinner) ===== */

/* Компактная шторка в режиме поиска водителя */
#sheet.searching-mode {
  max-height: none;
}

/* Режим поиска - компактная шторка, растёт с контентом */
#sheet-content.searching-mode {
  display: block;
  overflow-y: auto;
  max-height: calc(70vh - 50px - var(--safe-bottom));
  padding: 0 20px !important;
}

.search-status-row {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: transparent;
  border-radius: 14px;
}

/* Серый фон плашки */
.search-status-row::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  z-index: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Белый фон скрывает контент за верхней половиной */
.search-status-row::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -20px;
  right: -20px;
  height: calc(50% + 10px);
  background: var(--card);
  z-index: 0;
  pointer-events: none;
}

/* Контент плашки поверх фонов */
.search-status-row > * {
  position: relative;
  z-index: 2;
}

.offers-scroll {
  padding: 0;
}

/* Компактный empty-state в режиме поиска */
.offers-scroll .empty-state {
  padding: 20px;
}

.cancel-order-btn {
  position: sticky;
  bottom: 0;
  z-index: 10;
  width: 100%;
  padding: 14px;
  margin-top: 12px;
  border: none !important;
  border-radius: 50px;
  background: transparent !important;
  color: var(--danger) !important;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

/* Белый фон кнопки с бордером */
.cancel-order-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--card);
  border: 1px solid var(--danger);
  border-radius: 50px;
  z-index: 1;
}

/* Белый фон скрывает контент за нижней половиной */
.cancel-order-btn::before {
  content: '';
  position: absolute;
  bottom: -16px;
  left: -20px;
  right: -20px;
  height: calc(50% + 16px);
  background: var(--card);
  z-index: 0;
  pointer-events: none;
}

/* Текст кнопки поверх фонов */
.cancel-order-btn span {
  position: relative;
  z-index: 2;
}

.cancel-order-btn:active {
  background: rgba(239, 68, 68, 0.1) !important;
}

.search-status-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid #e5e7eb;
  border-top-color: #999;
  border-radius: 50%;
  animation: search-spin 0.8s linear infinite;
}

@keyframes search-spin {
  to { transform: rotate(360deg); }
}

.search-status-text {
  font-size: 15px;
  font-weight: 500;
  color: #334155;
}

.search-status-price {
  font-size: 16px;
  font-weight: 700;
  color: #486B6D;
  min-width: 90px;
  text-align: center;
}



/* ===== Order Accepted Overlay ===== */
.order-accepted-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  animation: overlayFadeIn 0.3s ease forwards;
}

@keyframes overlayFadeIn {
  to { opacity: 1; }
}

.order-accepted-overlay.hiding {
  animation: overlayFadeOut 0.3s ease forwards;
}

@keyframes overlayFadeOut {
  to { opacity: 0; }
}

.order-accepted-card {
  background: white;
  border-radius: 20px;
  padding: 32px 24px;
  width: 85%;
  max-width: 320px;
  text-align: center;
  transform: scale(0.8);
  animation: cardPopIn 0.3s ease forwards;
}

@keyframes cardPopIn {
  to { transform: scale(1); }
}

.order-accepted-overlay.hiding .order-accepted-card {
  animation: cardPopOut 0.3s ease forwards;
}

@keyframes cardPopOut {
  to { transform: scale(0.8); }
}

.order-accepted-icon {
  width: 72px;
  height: 72px;
  background: #22c55e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  animation: iconPulse 0.6s ease;
}

@keyframes iconPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.order-accepted-icon svg {
  width: 40px;
  height: 40px;
  stroke: white;
  stroke-width: 3;
}

.order-accepted-title {
  font-size: 22px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 20px;
}

.order-accepted-route {
  text-align: left;
  margin-bottom: 20px;
}

.order-accepted-address {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
}

.order-accepted-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.order-accepted-dot.from { background: #22c55e; }
.order-accepted-dot.to { background: #3b82f6; }

.order-accepted-addr-text {
  font-size: 15px;
  color: #334155;
  line-height: 1.3;
}

.order-accepted-price {
  font-size: 32px;
  font-weight: 700;
  color: #22c55e;
}


/* ===== Rating Badge in Offers Modal ===== */
.offers-modal .offer-rating-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* ===== Order Lost Overlay ===== */
.order-lost-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  animation: overlayFadeIn 0.3s ease forwards;
}

.order-lost-overlay.hiding {
  animation: overlayFadeOut 0.3s ease forwards;
}

.order-lost-card {
  background: white;
  border-radius: 20px;
  padding: 32px 24px;
  width: 85%;
  max-width: 320px;
  text-align: center;
  transform: scale(0.8);
  animation: cardPopIn 0.3s ease forwards;
}

.order-lost-overlay.hiding .order-lost-card {
  animation: cardPopOut 0.3s ease forwards;
}

.order-lost-icon {
  width: 72px;
  height: 72px;
  background: #ef4444;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  animation: iconPulse 0.6s ease;
}

.order-lost-icon svg {
  width: 40px;
  height: 40px;
  stroke: white;
  stroke-width: 3;
}

.order-lost-title {
  font-size: 22px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}

.order-lost-subtitle {
  font-size: 15px;
  color: #64748b;
}



/* ===== Driver Order Status Screen ===== */

/* NEW: Driver Active Order Layout */
.driver-active-order {
  padding-top: 8px;
}

/* Route Input Cards */
.driver-route-inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.route-input-card {
  background: #F3F4F6;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.route-input-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.route-input-icon.from::after {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid #E53935;
  background: transparent;
}

.route-input-icon.to {
  background: #445E6B;
}

.route-input-icon.to::after {
  content: '';
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6h-5.6z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(-15deg);
}

.route-input-content {
  flex: 1;
  min-width: 0;
}

.route-input-label {
  font-size: 10px;
  font-weight: 500;
  color: #486B6D;
  margin-bottom: 3px;
}

.route-input-address {
  font-size: 15px;
  font-weight: 500;
  color: #1F2937;
  line-height: 1.35;
}

.route-input-meta {
  font-size: 13px;
  color: #6B7280;
  margin-top: 4px;
}

/* Cancel Section */
.driver-cancel-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #E5E7EB;
}

/* Trip Stats Row */
.driver-trip-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 8px 0;
}

.trip-stat {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.trip-stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #1F2937;
}

.trip-stat-unit {
  font-size: 13px;
  font-weight: 500;
  color: #6B7280;
}

.trip-stat.price .trip-stat-value {
  color: #10B981;
}

.trip-stat.price .trip-stat-unit {
  color: #10B981;
}

.trip-stat-divider {
  color: #D1D5DB;
  font-size: 14px;
}

/* Order Notice - updated */
.driver-order-notice {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  text-align: center;
  font-size: 14px;
  color: #4B5563;
  line-height: 1.45;
}

.driver-order-notice.in-progress {
  background: transparent;
  border-color: transparent;
  color: #1F2937;
  font-size: 18px;
  font-weight: 600;
  padding-left: 0;
  padding-right: 0;
}

.driver-order-notice.in-progress .notice-price {
  color: #486B6D;
  font-weight: 700;
}

.driver-order-notice.approach-notified {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #92400E;
}

.driver-order-notice.client-coming {
  background: #ECFDF5;
  border-color: #A7F3D0;
  color: #065F46;
  font-weight: 500;
}

/* Order Buttons */
.driver-order-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.driver-btn-primary {
  width: 100%;
  height: 52px;
  padding: 0 24px;
  background: #10B981;
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: background 0.15s, transform 0.15s;
}

.driver-btn-primary:active {
  background: #059669;
  transform: scale(0.98);
}

.driver-btn-cancel {
  width: 100%;
  height: 52px;
  padding: 0 24px;
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.driver-btn-cancel:active {
  background: rgba(239, 68, 68, 0.1);
  transform: scale(0.98);
}

/* OLD styles kept for compatibility */
.driver-order-header {
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.driver-order-route {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.driver-order-point {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #334155;
  line-height: 1.3;
}

.driver-order-point span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.driver-order-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.driver-order-dot.from {
  background: #22c55e;
}

.driver-order-dot.to {
  background: #3b82f6;
}

.driver-order-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  text-align: right;
}

.driver-order-distance {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.driver-order-price {
  font-size: 16px;
  font-weight: 600;
  color: #22c55e;
}

.driver-order-actions {
  display: flex;
  gap: 10px;
}

.driver-order-actions .btn-success {
  flex: 1;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.driver-order-actions .btn-outline {
  padding: 14px 20px;
  font-size: 14px;
  white-space: nowrap;
}



/* ===== Rate Client Modal ===== */
.rate-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: overlayFadeIn 0.2s ease forwards;
}

.rate-modal-overlay.hiding {
  animation: overlayFadeOut 0.2s ease forwards;
}

.rate-modal {
  background: white;
  border-radius: 20px;
  padding: 28px 24px;
  width: 85%;
  max-width: 320px;
  text-align: center;
  transform: scale(0.9);
  animation: cardPopIn 0.2s ease forwards;
}

.rate-modal-overlay.hiding .rate-modal {
  animation: cardPopOut 0.2s ease forwards;
}

.rate-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
}

.rate-modal-name {
  font-size: 15px;
  color: #64748b;
  margin-bottom: 20px;
}

.rate-modal-stars {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.rate-star {
  font-size: 36px;
  color: #e2e8f0;
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
}

.rate-star:active {
  transform: scale(1.2);
}

.rate-star.active {
  color: #fbbf24;
}

.rate-modal-hint {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 24px;
  min-height: 20px;
}

.rate-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rate-modal-actions .btn-success {
  padding: 14px 20px;
  font-size: 15px;
  width: 100%;
}

.rate-modal-actions .btn-text {
  background: none;
  border: none;
  color: #64748b;
  font-size: 14px;
  padding: 10px;
  cursor: pointer;
}

.rate-modal-actions .btn-text:active {
  color: #334155;
}

/* ===== Support Chat ===== */
.support-chat-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.support-chat-modal.open {
  opacity: 1;
  visibility: visible;
}

.support-chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

.support-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.support-chat-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.support-chat-close {
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  border-radius: 50%;
}

.support-chat-close:active {
  background: var(--bg);
}

.support-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.support-loading,
.support-error {
  text-align: center;
  color: var(--text-muted);
  padding: 40px;
}

.support-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
}

.support-empty-icon {
  font-size: 48px;
}

.support-empty-text {
  color: var(--text-muted);
  text-align: center;
  font-size: 14px;
}

.support-message {
  display: flex;
  flex-direction: column;
  max-width: 80%;
  margin-bottom: 2px;
}

.support-message.last-in-group {
  margin-bottom: 12px;
}

.support-message.outgoing {
  align-self: flex-end;
  align-items: flex-end;
}

.support-message.incoming {
  align-self: flex-start;
  align-items: flex-start;
}

.support-message-author {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  margin-top: 4px;
}

.support-message.outgoing .support-message-author {
  color: var(--primary);
}

.support-message.incoming .support-message-author {
  color: var(--text-secondary);
}

.support-message-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.4;
  word-break: break-word;
}

/* Скругления для группировки */
.support-message.outgoing .support-message-bubble {
  background: var(--primary);
  color: white;
  border-bottom-right-radius: 4px;
}

.support-message.outgoing:not(.last-in-group) .support-message-bubble {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

.support-message.outgoing.first-in-group .support-message-bubble {
  border-top-right-radius: 16px;
}

.support-message.incoming .support-message-bubble {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.support-message.incoming:not(.last-in-group) .support-message-bubble {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.support-message.incoming.first-in-group .support-message-bubble {
  border-top-left-radius: 16px;
}

.support-message.error .support-message-bubble {
  opacity: 0.6;
}

.support-message-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  padding: 0 4px;
}

.support-chat-input-area {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--card);
  border-top: 1px solid var(--border);
}

.support-chat-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--bg);
  font-size: 15px;
  color: var(--text);
  outline: none;
}

.support-chat-input:focus {
  border-color: var(--primary);
}

.support-chat-input::placeholder {
  color: var(--text-muted);
}

.support-chat-send {
  width: 48px;
  height: 48px;
  border: none;
  background: var(--primary);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.support-chat-send:active {
  opacity: 0.8;
}

.support-chat-send:disabled {
  opacity: 0.5;
}

/* Support badge */
.support-badge {
  background: var(--primary);
  color: white;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  margin-left: auto;
}

.menu-item {
  position: relative;
}

/* ===== SUPPORT MINI CHAT ===== */
.support-mini-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.support-mini-overlay.open {
  opacity: 1;
  visibility: visible;
}

.support-mini-modal {
  background: var(--card);
  border-radius: 20px;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: translateY(30px) scale(0.95);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}

.support-mini-overlay.open .support-mini-modal {
  transform: translateY(0) scale(1);
}

.support-mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.support-mini-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.support-mini-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}

.support-mini-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.support-mini-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.support-mini-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.support-mini-close:active {
  background: var(--border);
}

.support-mini-body {
  padding: 16px;
  max-height: 250px;
  min-height: 60px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.support-mini-msg {
  max-width: 85%;
  display: flex;
  flex-direction: column;
  margin-bottom: 2px;
}

.support-mini-msg.last-in-group {
  margin-bottom: 12px;
}

.support-mini-msg.incoming {
  align-self: flex-start;
  align-items: flex-start;
}

.support-mini-msg.outgoing {
  align-self: flex-end;
  align-items: flex-end;
}

.support-mini-msg-author {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  padding: 0 2px;
}

.support-mini-msg.incoming .support-mini-msg-author {
  color: var(--text-secondary);
}

.support-mini-msg.outgoing .support-mini-msg-author {
  color: var(--primary);
  text-align: right;
}

.support-mini-msg-bubble {
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.4;
  word-wrap: break-word;
  border-radius: 16px;
  width: fit-content;
  max-width: 85%;
}

.support-mini-msg.incoming .support-mini-msg-bubble {
  background: var(--bg);
  color: var(--text);
  border-top-left-radius: 4px;
}

.support-mini-msg.incoming:not(.first-in-group) .support-mini-msg-bubble {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.support-mini-msg.incoming.last-in-group .support-mini-msg-bubble {
  border-bottom-left-radius: 16px;
}

.support-mini-msg.outgoing .support-mini-msg-bubble {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border-top-right-radius: 4px;
}

.support-mini-msg.outgoing:not(.first-in-group) .support-mini-msg-bubble {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.support-mini-msg.outgoing.last-in-group .support-mini-msg-bubble {
  border-bottom-right-radius: 16px;
}

.support-mini-msg-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  padding: 0 4px;
}

.support-mini-msg.outgoing .support-mini-msg-time {
  text-align: right;
}

.support-mini-input-area {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
  background: var(--card);
  flex-shrink: 0;
}

.support-mini-input {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 11px 16px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  outline: none;
  resize: none;
  overflow-y: auto;
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.support-mini-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.support-mini-input::placeholder {
  color: var(--text-muted);
}

.support-mini-send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}

.support-mini-send:active {
  transform: scale(0.92);
}

.support-mini-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.support-mini-link {
  display: block;
  text-align: center;
  padding: 12px 16px 16px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}

.support-mini-link:active {
  opacity: 0.7;
}

/* ===== ORDER CHAT (водитель-клиент) ===== */

/* Кнопка чата в шторке */
.order-chat-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s;
}

.order-chat-btn:active {
  transform: scale(0.92);
}

.order-chat-btn svg {
  width: 24px;
  height: 24px;
}

.order-chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #EF4444;
  color: white;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* Шаблоны сообщений */
.order-chat-templates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.order-chat-template-btn {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.order-chat-template-btn:active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.order-chat-template-btn .emoji {
  font-size: 16px;
}

/* Переключатель шаблоны/текст */
.order-chat-mode-toggle {
  display: flex;
  justify-content: center;
  padding: 8px 16px 0;
}

.order-chat-mode-btn {
  padding: 6px 16px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.order-chat-mode-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.order-chat-badge-inline {
  background: #EF4444;
  color: white;
  font-size: 10px;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  margin-left: 6px;
}

/* ===== ADDRESS SEARCH MODAL ===== */
.address-search-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  padding: 12px;
  padding-top: calc(12px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  padding-bottom: 0;
  gap: 12px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.address-search-modal > * {
  pointer-events: auto;
}

.address-search-content > * {
  pointer-events: auto;
}

.address-search-bottom-safe {
  pointer-events: none;
}

.address-search-modal.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Белая полоска внизу для safe area */
.address-search-bottom-safe {
  margin-top: auto;
  background: white;
  padding-bottom: var(--tg-safe-area-inset-bottom, 0px);
  margin-left: -12px;
  margin-right: -12px;
}

.address-search-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: white;
  border-radius: 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.address-search-back {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  cursor: pointer;
  flex-shrink: 0;
}

.address-search-back:active {
  opacity: 0.6;
}

#address-search-input {
  flex: 1;
  height: 44px;
  border: none;
  background: transparent;
  font-size: 16px;
  color: #1a1a1a;
  outline: none;
}

#address-search-input::placeholder {
  color: #999;
}

.address-search-clear {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  cursor: pointer;
  flex-shrink: 0;
}

.address-search-clear.hidden {
  display: none;
}

.address-search-content {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.address-search-map-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: white;
  border-radius: 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: background 0.2s;
}

.address-search-map-option:active {
  background: #F0F0F0;
}

.address-search-map-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #445E6B;
}

.address-search-map-icon svg {
  width: 24px;
  height: 24px;
}

.address-search-map-option span {
  font-size: 15px;
  font-weight: 500;
  color: #486B6D;
}

.address-search-results {
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  overflow: hidden;
  max-height: 55vh;
  overflow-y: auto;
}

.address-search-results:empty {
  display: none;
}

.address-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background 0.2s;
}

.address-result-item:last-child {
  border-bottom: none;
}

.address-result-item:active {
  background: #F5F5F5;
}

.address-result-info {
  flex: 1;
  min-width: 0;
}

.address-result-name {
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.address-result-subtitle {
  font-size: 13px;
  color: #666;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.address-result-distance {
  font-size: 13px;
  color: #999;
}

.address-search-empty {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 14px;
}

/* Скелетон загрузки */
.address-search-loading {
  padding: 8px 0;
}

.address-skeleton {
  height: 52px;
  margin: 8px 16px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Мета-блок с расстоянием и городом */
.address-result-meta {
  text-align: right;
  flex-shrink: 0;
  margin-left: 12px;
}

.address-result-city {
  font-size: 11px;
  color: #aaa;
  margin-top: 2px;
}

.address-result-type {
  color: #3B82F6;
  font-weight: 500;
}

/* Спиннер в поле поиска */
.address-search-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #e0e0e0;
  border-top-color: #999;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* ===== Become Driver Flow ===== */
.become-driver-item {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  color: white !important;
  border-radius: 12px !important;
  margin-bottom: 8px;
}

.become-driver-item .menu-item-icon {
  color: white;
}

.become-driver-item .menu-item-badge {
  font-size: 16px;
}

.become-driver-content {
  padding: 0 4px;
}

.driver-benefits {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-primary);
}

.benefit-item svg {
  width: 20px;
  height: 20px;
  color: #10B981;
  flex-shrink: 0;
}

.tariff-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
  text-align: center;
}

.tariff-options {
  display: flex;
  gap: 8px;
}

.tariff-option {
  flex: 1;
  background: var(--bg-secondary);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.tariff-option.selected {
  border-color: #10B981;
  background: rgba(16, 185, 129, 0.1);
}

.tariff-option.popular {
  border-color: #F59E0B;
}

.tariff-option.popular.selected {
  border-color: #10B981;
}

.tariff-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #F59E0B;
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.tariff-name {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.tariff-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.tariff-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* Driver Payment Overlay */
.driver-payment-content {
  padding: 0 4px;
}

.payment-info {
  text-align: center;
  padding: 16px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border-radius: 12px;
  margin-bottom: 16px;
}

.payment-tariff {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 4px;
}

.payment-amount {
  font-size: 32px;
  font-weight: 700;
  color: white;
}

.payment-instructions {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.payment-instructions p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 8px 0;
}

.payment-instructions p:not(:first-child) {
  margin-top: 16px;
}

.payment-card,
.payment-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.payment-card:active,
.payment-code:active {
  background: var(--bg-secondary);
}

.card-number {
  font-size: 16px;
  font-weight: 600;
  font-family: monospace;
  letter-spacing: 1px;
}

.code-value {
  font-size: 18px;
  font-weight: 700;
  color: #10B981;
  font-family: monospace;
}

.payment-card svg,
.payment-code svg {
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
}

.payment-warning {
  background: #FEF3C7;
  color: #92400E;
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-align: center;
}

/* Extend Subscription Button */
.extend-sub-item {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
  color: white !important;
  border-radius: 12px !important;
  margin-bottom: 8px;
}

.extend-sub-item .menu-item-icon {
  color: white;
}

.extend-sub-item .menu-item-badge {
  font-size: 18px;
  font-weight: 700;
}

/* Current Subscription Info */
.current-sub-info {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
}

.sub-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sub-status.expired {
  color: #EF4444;
}

.sub-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.sub-value {
  font-size: 16px;
  font-weight: 600;
  color: #10B981;
}

.sub-status.expired .sub-label {
  font-size: 15px;
  font-weight: 600;
}

/* ==================== */
/* NEW SUBSCRIPTION UI  */
/* ==================== */

/* New Tariff Cards */
.tariff-options-new {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
}

.tariff-card {
  position: relative;
  display: flex;
  align-items: center;
  padding: 16px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.tariff-card:active {
  transform: scale(0.98);
}

.tariff-card.selected {
  background: rgba(59, 130, 246, 0.08);
  border-color: #3B82F6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.tariff-card.popular {
  border-color: #F59E0B;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.tariff-card.popular.selected {
  border-color: #3B82F6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.tariff-badge-new {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.tariff-card-main {
  flex: 1;
}

.tariff-card-period {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.tariff-card-daily {
  font-size: 13px;
  color: var(--text-secondary);
}

.tariff-card-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-right: 12px;
}

.tariff-card-savings {
  position: absolute;
  top: -8px;
  right: 12px;
  padding: 3px 8px;
  background: #445E6B;
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
}

.tariff-card-check {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.tariff-card-check svg {
  width: 14px;
  height: 14px;
  stroke: white;
  opacity: 0;
  transition: opacity 0.2s;
}

.tariff-card.selected .tariff-card-check {
  background: #3B82F6;
  border-color: #3B82F6;
}

.tariff-card.selected .tariff-card-check svg {
  opacity: 1;
}

/* Current Sub Info New */
.current-sub-info-new {
  margin-bottom: 20px;
}

.sub-status-card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 12px 16px;
  text-align: center;
}

.sub-status-card .sub-label {
  font-size: 13px;
  color: #486B6D;
  margin-bottom: 4px;
  display: block;
}

.sub-status-card .sub-date {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.sub-status-card.expired {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
  border-color: rgba(239, 68, 68, 0.2);
}

.sub-status-card.expired .sub-label {
  color: #EF4444;
  font-weight: 600;
  font-size: 15px;
}

.sub-status-card.expired .sub-date {
  color: #B91C1C;
  font-size: 14px;
  font-weight: 400;
}

/* Payment Screen New */
.payment-info-new {
  text-align: center;
  padding: 20px 0;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
  border-radius: 20px;
}

.payment-tariff-badge {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(139, 92, 246, 0.15);
  color: #7C3AED;
  font-size: 14px;
  font-weight: 600;
  border-radius: 20px;
  margin-bottom: 8px;
}

.payment-amount-big {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Payment Steps */
.payment-steps {
  margin-bottom: 20px;
}

.payment-step {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.step-number {
  width: 28px;
  height: 28px;
  background: #3B82F6;
  color: white;
  font-size: 14px;
  font-weight: 600;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-title {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.payment-card-new,
.payment-code-new {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.payment-card-new:active,
.payment-code-new:active {
  background: var(--bg-tertiary);
  transform: scale(0.98);
}

.payment-card-new .card-number {
  font-size: 18px;
  font-weight: 600;
  font-family: 'SF Mono', monospace;
  letter-spacing: 1px;
}

.payment-code-new .code-value {
  font-size: 20px;
  font-weight: 700;
  color: #3B82F6;
  font-family: 'SF Mono', monospace;
}

.payment-card-new svg,
.payment-code-new svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-secondary);
}

.payment-warning-new {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #FEF3C7;
  border-radius: 12px;
}

.payment-warning-new svg {
  width: 20px;
  height: 20px;
  stroke: #92400E;
  flex-shrink: 0;
}

.payment-warning-new span {
  font-size: 13px;
  color: #92400E;
  line-height: 1.4;
}

/* Pending Screen */
.payment-pending-screen {
  text-align: center;
  padding: 20px 0;
}

.pending-animation {
  margin-bottom: 20px;
}

.pending-circle {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-ring 2s infinite;
}

.pending-circle svg {
  width: 36px;
  height: 36px;
  stroke: white;
  animation: spin 3s linear infinite;
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
  70% { box-shadow: 0 0 0 20px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.pending-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.pending-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.pending-info-card {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
  text-align: left;
}

.pending-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.pending-info-row:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}

.pending-info-label {
  font-size: 14px;
  color: var(--text-secondary);
}

.pending-info-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}

.pending-hint {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* Success Screen */
.payment-success-screen {
  text-align: center;
  padding: 30px 0;
}

.success-animation {
  margin-bottom: 24px;
}

.success-circle {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
  animation: success-pop 0.5s ease-out;
}

.success-circle svg {
  width: 48px;
  height: 48px;
  stroke: white;
  animation: check-draw 0.6s ease-out 0.2s forwards;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
}

@keyframes success-pop {
  0% { transform: scale(0); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}

.success-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.success-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.success-info-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 10px;
}

.success-info-label {
  font-size: 14px;
  color: #10B981;
  margin-bottom: 6px;
}

.success-info-date {
  font-size: 20px;
  font-weight: 600;
  color: #065F46;
}

.success-btn {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
}

/* Confetti */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* ===== NEW MENU ACCENT BUTTONS ===== */
.menu-item-accent {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border-radius: 16px;
  margin-top: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

.menu-item-accent:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.menu-accent-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.menu-accent-icon svg {
  width: 22px;
  height: 22px;
}

.driver-accent .menu-accent-icon {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: white;
}

.extend-accent .menu-accent-icon {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  color: white;
}

.menu-accent-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-accent-title {
  font-size: 16px;
  font-weight: 600;
  color: #1c1c1e;
}

.menu-accent-sub {
  font-size: 13px;
  color: #8e8e93;
}

.menu-accent-arrow {
  width: 20px;
  height: 20px;
  color: #c7c7cc;
  flex-shrink: 0;
}

/* ===== NEW OVERLAY HEADERS ===== */
.overlay-header-clean {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0 20px;
}

.overlay-header-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.overlay-header-icon svg {
  width: 26px;
  height: 26px;
}

.overlay-header-icon.driver {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: white;
}

.overlay-header-icon.extend {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  color: white;
}

.overlay-header-icon.payment {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
  color: white;
}

.overlay-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.overlay-header-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}

.overlay-header-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ===== NEW BENEFITS LIST ===== */
.benefits-list {
  background: var(--bg);
  border-radius: 14px;
  padding: 2px 0;
  margin-bottom: 16px;
}

.benefit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
}

.benefit-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(16, 185, 129, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.benefit-icon svg {
  width: 14px;
  height: 14px;
  color: #10B981;
}

.benefit-row span {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}


/* ===== CLIENT AVATAR IN ORDER CARD ===== */
.client-avatar-wrap {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.client-avatar-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #60A5FA, #3B82F6);
  color: white;
  font-weight: 600;
  font-size: 18px;
}

.client-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.client-avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 18px;
}

.client-rating-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #fff !important;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.client-warning-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background: #EF4444;
  border-radius: 50%;
  border: 2px solid white;
}

/* ===== CLIENT STATUS BADGE ===== */
.client-status-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 4px;
  text-align: center;
}

.client-status-badge.verified {
  background: #D1FAE5;
  color: #065F46;
}

.client-status-badge.newbie {
  background: #FEF3C7;
  color: #92400E;
}

/* ===== ORDER OPTIONS STRIP V2 ===== */
.order-options-strip-v2 {
  display: flex;
  gap: 6px;
  padding: 0 16px 10px 20px;
}

.opt-icon-v2 {
  width: 28px;
  height: 28px;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #445E6B;
}

.opt-icon-v2:active {
  transform: scale(0.95);
  background: #E2E8F0;
}

.opt-icon-v2 svg {
  width: 16px;
  height: 16px;
}

/* ===== ROUTE LANDMARK ===== */
.route-landmark {
  font-size: 12px;
  color: #6B7280;
  padding-left: 30px;
  margin: 4px 0 8px;
  line-height: 1.3;
}

/* ===== ORDER OPTIONS STRIP (legacy) ===== */
.order-options-strip {
  display: flex;
  gap: 6px;
  padding: 0 16px 10px 20px;
}

/* ===== ACTION BAR V2 ===== */
.order-action-bar-v2,
.oc-block-action {
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* Единая синяя кнопка водителя */
.driver-offer-btn {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 50px;
  background: #3b82f6;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.driver-offer-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.driver-offer-minus,
.driver-offer-plus {
  width: 56px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.driver-offer-minus:active,
.driver-offer-plus:active {
  background: rgba(255, 255, 255, 0.15);
}

.driver-offer-minus.disabled,
.driver-offer-plus.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.driver-offer-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.driver-offer-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  height: 100%;
  transition: background 0.15s ease;
}

.driver-offer-center:active {
  background: rgba(255, 255, 255, 0.1);
}

/* Старые стили для совместимости */
.btn-adj-v2 {
  width: 52px;
  height: 48px;
  border: none;
  background: white;
  color: #374151;
  font-size: 22px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.btn-adj-v2:first-child {
  border-radius: 12px 0 0 12px;
}

.btn-adj-v2:last-child {
  border-radius: 0 12px 12px 0;
}

.btn-adj-v2:active:not(.disabled) {
  background: #F3F4F6;
}

.btn-adj-v2.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Основная кнопка белая */
.btn-offer-v2 {
  flex: 1;
  height: 48px;
  border: none;
  background: white;
  color: #1F2937;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.btn-offer-v2:active:not(.disabled) {
  background: #F3F4F6;
}

.btn-offer-v2.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Кнопка ожидания */
.btn-waiting-v2 {
  flex: 1;
  height: 52px;
  border: none;
  border-radius: 50px;
  background: #3b82f6;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.btn-waiting-v2 svg {
  flex-shrink: 0;
  color: white;
  opacity: 0.8;
}

.waiting-spinner-v2 {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  flex-shrink: 0;
}

/* ===== PASSENGER PROFILE POPUP - CLEAN WHITE ===== */
.ppm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.ppm-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.ppm-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.ppm-popup {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: white;
  border-radius: 16px;
  padding: 24px;
  transform: scale(0.95);
  transition: transform 0.2s ease;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.ppm-overlay.visible .ppm-popup {
  transform: scale(1);
}

.ppm-header {
  text-align: center;
  margin-bottom: 20px;
}

.ppm-avatar-block {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: white;
  padding: 3px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.ppm-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.ppm-avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 28px;
}

.ppm-name {
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 4px;
}

.ppm-rating {
  font-size: 15px;
  font-weight: 600;
}

.ppm-rating-count {
  color: #9CA3AF;
  font-weight: 400;
  margin-left: 6px;
}

.ppm-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 16px 0;
  border-top: 1px solid #F3F4F6;
  border-bottom: 1px solid #F3F4F6;
  margin-bottom: 16px;
}

.ppm-stat-item {
  text-align: center;
}

.ppm-stat-num {
  font-size: 24px;
  font-weight: 700;
  color: #1F2937;
}

.ppm-stat-num.warn {
  color: #F97316;
}

.ppm-stat-label {
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 2px;
}

.ppm-stat-sep {
  width: 1px;
  height: 36px;
  background: #E5E7EB;
}

.ppm-tags {
  margin-bottom: 20px;
}

.ppm-tags-header {
  font-size: 12px;
  font-weight: 600;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.ppm-tag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #FEF2F2;
  border-radius: 8px;
  margin-bottom: 6px;
}

.ppm-tag-row:last-child {
  margin-bottom: 0;
}

.ppm-tag-text {
  font-size: 14px;
  color: #1F2937;
}

.ppm-tag-num {
  font-size: 14px;
  font-weight: 700;
  color: #EF4444;
}

.ppm-no-tags {
  text-align: center;
  padding: 16px;
  background: #F0FDF4;
  border-radius: 8px;
  color: #22C55E;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
}

.ppm-btn {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: #F3F4F6;
  color: #1F2937;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.ppm-btn:active {
  background: #E5E7EB;
}

/* ===== DRIVER RATE CLIENT SCREEN ===== */
.driver-rate-client {
  padding: 20px 16px;
}

.rate-client-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.rate-client-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 22px;
  flex-shrink: 0;
}

.rate-client-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.rate-client-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.rate-client-name {
  font-size: 15px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Stars Section */
.rate-stars-section {
  text-align: center;
  margin-bottom: 24px;
}

.rating-stars-large {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rating-star-lg {
  font-size: 40px;
  color: #E5E7EB;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
}

.rating-star-lg.active {
  color: #FBBF24;
}

.rating-star-lg:active {
  transform: scale(1.1);
}

.rating-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
  min-height: 24px;
}

/* Issues Accordion */
.issues-accordion {
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.issues-accordion.hidden {
  display: none;
}

.issues-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: background 0.15s;
}

.issues-accordion-header:active {
  background: #F3F4F6;
}

.issues-arrow {
  font-size: 12px;
  color: var(--text-secondary);
  transition: transform 0.2s;
}

.issues-content {
  background: white;
  overflow: hidden;
  transition: max-height 0.25s ease;
  max-height: 300px;
}

.issues-content.collapsed {
  max-height: 0;
}

.issue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-top: 1px solid var(--border);
  transition: background 0.15s;
}

.issue-item:active {
  background: #F9FAFB;
}

.issue-checkbox {
  width: 20px;
  height: 20px;
  accent-color: #EF4444;
  cursor: pointer;
  flex-shrink: 0;
}

.issue-label {
  font-size: 14px;
  color: var(--text);
}

/* Actions */
.rate-client-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

/* Кнопки модалок оценки */
.btn-rating-submit {
  width: 100%;
  height: 52px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: background 0.15s, transform 0.15s, opacity 0.15s;
}

.btn-rating-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-rating-submit:not(:disabled):active {
  background: #2563eb;
  transform: scale(0.98);
}

.btn-rating-close {
  width: 100%;
  height: 52px;
  background: transparent;
  color: #6B7280;
  border: 1px solid #E5E7EB;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 12px;
  transition: background 0.15s, transform 0.15s;
}

.btn-rating-close:active {
  background: #F5F5F5;
  transform: scale(0.98);
}

.btn-text {
  background: none;
  border: none;
  padding: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s;
}

.btn-text:active {
  color: var(--text);
}

/* Old styles kept for compatibility */
.rate-client-section {
  margin-bottom: 20px;
}

.rate-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.rate-tags-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rate-tag-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rate-tag-item:has(.rate-tag-checkbox:checked) {
  background: #FEF2F2;
  border-color: #FCA5A5;
}

.rate-tag-checkbox {
  width: 20px;
  height: 20px;
  accent-color: #EF4444;
  cursor: pointer;
}

.rate-tag-label {
  font-size: 14px;
  color: var(--text);
}

/* ===== RATE MODAL ACCORDION ===== */
.rate-issues-accordion {
  margin: 16px 0 20px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
}

.rate-issues-accordion.hidden {
  display: none;
}

.rate-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: #F9FAFB;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.rate-accordion-header:active {
  background: #F3F4F6;
}

.rate-accordion-arrow {
  font-size: 12px;
  color: #9CA3AF;
}

.rate-accordion-content {
  background: white;
  overflow: hidden;
  transition: max-height 0.25s ease;
  max-height: 350px;
}

.rate-accordion-content.collapsed {
  max-height: 0;
}

.rate-issue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-top: 1px solid #E5E7EB;
  font-size: 14px;
  color: #374151;
  transition: background 0.15s;
}

.rate-issue-item:active {
  background: #F9FAFB;
}

.rate-issue-item:has(.rate-tag-cb:checked) {
  background: #FEF2F2;
  color: #DC2626;
}

.rate-tag-cb {
  width: 18px;
  height: 18px;
  accent-color: #EF4444;
  cursor: pointer;
  flex-shrink: 0;
}

/* Old styles kept for compatibility */
.rate-tags-section {
  margin: 16px 0 20px;
  text-align: left;
}

.rate-tags-title {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  text-align: center;
}

.rate-tags-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rate-tag-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 13px;
  color: #475569;
}

.rate-tag-item:has(.rate-tag-cb:checked) {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
}

/* ===== CLIENT HISTORY STYLES ===== */
.client-history-sticky-header {
  position: sticky;
  top: -16px;
  z-index: 10;
  background: var(--bg);
  padding: 16px 0 8px 0;
  margin: 0 0 0 0;
}

/* Клиентская аватарка без кольца подписки */
.client-avatar-simple {
  position: relative;
  width: 50px !important;
  height: 50px !important;
  flex-shrink: 0;
  z-index: 11;
}

/* Белая подложка как у водителя */
.client-avatar-simple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 0;
}

.client-avatar-simple .avatar-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 15px;
  overflow: hidden;
  z-index: 1;
}

.client-avatar-simple .avatar-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.client-avatar-simple .avatar-rating {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  z-index: 2;
}

/* ===== CLIENT TABS — FULL-WIDTH LAYOUT ===== */
/* Когда grip убран — обнуляем padding и min-height как в driver-mode */
#sheet.no-grip {
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#sheet.no-grip #sheet-content {
  padding: 0;
  max-height: none;
  overflow-y: auto;
}

/* Стандартный gap снизу контента */
#sheet.no-grip .driver-history-section {
  padding-bottom: 6px;
}

.client-fixed-header {
  width: auto;
}

/* Скрытие grip на вкладках История/Меню у пассажира */
#sheet.no-grip .sheet-header {
  display: none;
}

/* Header-card скругляется под углы шторки когда grip скрыт */
#sheet.no-grip .client-fixed-header .header-card {
  border-radius: 24px 24px 0 0;
}

/* ===== CLIENT HEADER-CARD — чистый белый фон, компактный ===== */
.client-fixed-header .header-card {
  background: #fff;
  box-shadow: none;
  border-radius: 0;
  padding: 6px 16px 8px;
}

/* Серый разделитель под шапкой — виден когда контент скроллится */
.client-fixed-header::after {
  content: '';
  display: block;
  height: 1px;
  background: #e5e5ea;
  margin: 0;
}

/* В свёрнутом состоянии — убираем разделитель */
#sheet.collapsed .client-fixed-header::after {
  display: none;
}

/* Убираем тень шторки в свёрнутом — чтобы не дублировать border таб-бара */
#sheet.no-grip.collapsed {
  box-shadow: none;
}

/* Для клиента - темно-серый цвет цифр (не кричим цветами о тратах) */
.client-fixed-header .earnings-value {
  color: #374151 !important;
}

/* Клиент: цвета в карточках статистики */
.client-fixed-header ~ .driver-stats-section .driver-stat-amount {
  color: #374151;
}

/* Клиент: цвета в списке поездок */
.client-fixed-header ~ .driver-history-section .history-date-total {
  color: #374151;
}

.client-fixed-header ~ .driver-history-section .driver-history-price {
  color: #374151;
}

/* Шапка меню клиента — на основе header-card скелета */
.client-menu-header {
  /* Наследует от driver-fixed-header и client-fixed-header */
}

/* Имя и телефон в шапке меню клиента */
.client-menu-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  min-width: 0;
}

.client-menu-name {
  font-size: 16px;
  font-weight: 600;
  color: #1c1c1e;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-menu-phone {
  font-size: 12px;
  color: #8e8e93;
  line-height: 1.2;
}

.client-history-header {
  display: flex;
  align-items: center;
  padding: 16px;
  background: var(--card-bg);
  border-radius: 16px;
  gap: 16px;
}

.client-avatar-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.client-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 18px;
  position: relative;
  flex-shrink: 0;
}

.client-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.client-avatar-rating {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.client-header-info {
  display: flex;
  flex-direction: column;
}

.client-header-amount {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

.client-header-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.client-header-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
}

.client-trips-counter {
  text-align: center;
  min-width: 60px;
}

.client-trips-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.client-trips-label {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.client-history-scroll-content {
  padding-top: 12px;
}

.client-stats-section {
  margin-bottom: 20px;
}

.client-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.client-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
}

.client-stat-period {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.client-stat-trips {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.client-stat-amount {
  font-size: 16px;
  font-weight: 700;
  color: #374151;
}

.client-stat-amount.large-amount {
  font-size: 14px;
}

.client-stat-amount.xlarge-amount {
  font-size: 12px;
}

.client-history-section {
  padding-bottom: 20px;
}

.client-history-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
}

/* Используем те же стили аккордеона что у водителя */
.history-date-total.client-total {
  color: #374151;
}

.client-history-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.client-history-item:last-child {
  border-bottom: none;
}

.client-history-route {
  flex: 1;
  min-width: 0;
}

.client-history-from,
.client-history-to {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-history-arrow {
  font-size: 10px;
  color: var(--text-secondary);
  margin: 2px 0;
}

.client-history-right {
  text-align: right;
  margin-left: 12px;
  flex-shrink: 0;
}

.client-history-price {
  font-size: 14px;
  font-weight: 600;
  color: #6366F1;
}

.client-history-time {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ===== ORDER MARKERS (Pills & Clusters) ===== */

/* Контейнер маркера заказа */
.order-marker {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.3));
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: auto !important;
  max-width: none !important;
}

.order-marker:hover {
  transform: scale(1.1);
  z-index: 100 !important;
}

/* Пилюля с ценой */
.order-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4ECDC4, #26A69A);
  padding: 6px 14px;
  border-radius: 16px;
  white-space: nowrap;
  position: relative;
  width: auto;
  min-width: 50px;
}

.order-pill-price {
  font-size: 13px;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  white-space: nowrap;
}

/* Указатель (треугольник) */
.order-pill::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid #26A69A;
}

/* Точка под указателем */
.order-marker-dot {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #4ECDC4;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(78, 205, 196, 0.8);
}

/* Кластер заказов */
.order-cluster {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-cluster-circle {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #4ECDC4, #26A69A);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}

.order-cluster-count {
  font-size: 16px;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Кольцо вокруг кластера */
.order-cluster-ring {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid rgba(78, 205, 196, 0.4);
  border-radius: 50%;
  animation: cluster-pulse 2s ease-in-out infinite;
}

/* Ножка кластера */
.order-cluster::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 10px;
  background: linear-gradient(to bottom, #26A69A, transparent);
}

.order-cluster-dot {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #4ECDC4;
  border-radius: 50%;
}

@keyframes cluster-pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.15); opacity: 0.2; }
}

/* Пунктирная линия до заказа */
.order-dashed-line {
  stroke: #4ECDC4;
  stroke-width: 3;
  stroke-dasharray: 8, 8;
  stroke-linecap: round;
  fill: none;
}

/* Анимация появления маркера */
.order-marker.appearing {
  animation: marker-appear 0.3s ease-out;
}

@keyframes marker-appear {
  0% { transform: scale(0) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Выбранный заказ */
.order-marker.selected .order-pill {
  background: linear-gradient(135deg, #6366F1, #4F46E5);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4);
}

.order-marker.selected .order-pill::after {
  border-top-color: #4F46E5;
}

.order-marker.selected .order-marker-dot {
  background: #6366F1;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.8);
}

/* Фикс для MapLibre маркеров - не растягивать */
.maplibregl-marker {
  width: auto !important;
  max-width: none !important;
}

.maplibregl-marker .order-marker {
  width: auto !important;
  max-width: 200px;
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
}

.maplibregl-marker .order-pill {
  width: auto !important;
  max-width: 150px;
  display: inline-flex !important;
}

/* ===== BIDDING STATUS BAR (Интегрирован в шапку) ===== */

/* Когда есть bidding bar - header-card не имеет скругления снизу */
/* Bidding bar removed from header — now in top panel */

.bidding-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #F0F0F0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0 0 16px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
  z-index: 1;
  /* Усиленная тень как у шапки */
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.bidding-bar:active {
  background: #E8E8E8;
}

/* Левая группа: индикатор + торги + участники */
.bidding-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Правая группа: цена + таймер + стрелка */
.bidding-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Пульсирующий индикатор */
.bidding-bar-indicator {
  position: relative;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.bidding-bar-dot {
  width: 8px;
  height: 8px;
  background: #22C55E;
  border-radius: 50%;
}

.bidding-bar-pulse {
  position: absolute;
  inset: -4px;
  background: rgba(34, 197, 94, 0.35);
  border-radius: 50%;
  animation: bidding-dot-pulse 2s ease-in-out infinite;
}

@keyframes bidding-dot-pulse {
  0%, 100% { transform: scale(0.5); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0; }
}

/* Лейбл "Торги" */
.bidding-bar-label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

/* Разделитель */
.bidding-bar-sep {
  color: #D1D5DB;
  font-size: 10px;
}

/* Маршрут */
.bidding-bar-route {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #6B7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Бейдж конкурентов */
.bidding-bar-competitors {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  background: rgba(249, 115, 22, 0.12);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #EA580C;
}

.bidding-bar-competitors-icon {
  font-size: 11px;
}

/* Цена */
.bidding-bar-price {
  font-size: 15px;
  font-weight: 700;
  color: #486B6D;
  white-space: nowrap;
}

/* Таймер */
.bidding-bar-timer {
  font-size: 13px;
  color: #9CA3AF;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 34px;
}

/* Стрелка с белой подложкой */
.bidding-bar-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  color: #6B7280;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

/* Состояние: есть конкуренты */
.bidding-bar.has-competitors .bidding-bar-dot {
  background: #F97316;
}

.bidding-bar.has-competitors .bidding-bar-pulse {
  background: rgba(249, 115, 22, 0.35);
}

.bidding-bar.has-competitors .bidding-bar-label {
  color: #C2410C;
}

/* ===== END BIDDING STATUS BAR ===== */

/* ===== BIDDING TOP PANEL (fixed header dropdown) ===== */
.bidding-top-panel {
  position: fixed;
  top: calc(var(--tg-safe-area-inset-top, 24px) + var(--tg-content-safe-area-inset-top, 44px) - 10px);
  left: 0;
  right: 0;
  z-index: 99999;
  overflow: visible;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  will-change: transform;
}

.bidding-top-panel.visible {
  transform: translateY(0);
  pointer-events: auto;
}

/* Collapsed bar */
.bidding-top-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  cursor: pointer;
  height: calc(var(--tg-content-safe-area-inset-top, 44px) - 16px);
  box-sizing: border-box;
  background: #273238;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

.bidding-top-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bidding-top-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Pulsating indicator */
.bidding-top-indicator {
  position: relative;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.bidding-top-dot {
  width: 8px;
  height: 8px;
  background: #22C55E;
  border-radius: 50%;
}

.bidding-top-pulse {
  position: absolute;
  inset: -4px;
  background: rgba(34, 197, 94, 0.35);
  border-radius: 50%;
  animation: bidding-dot-pulse 2s ease-in-out infinite;
}

.bidding-top-label {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.bidding-top-competitors {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  background: rgba(249, 115, 22, 0.2);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #FB923C;
}

.bidding-top-price {
  font-size: 14px;
  font-weight: 700;
  color: #26A69A;
  white-space: nowrap;
}

.bidding-top-timer {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 30px;
}

.bidding-top-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.bidding-top-panel.expanded .bidding-top-arrow {
  transform: rotate(90deg);
}

/* Competitors state */
.bidding-top-panel.has-competitors .bidding-top-dot {
  background: #F97316;
}

.bidding-top-panel.has-competitors .bidding-top-pulse {
  background: rgba(249, 115, 22, 0.35);
}

/* Handle — pull tab below bar (SVG concave) */
.bidding-top-handle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -12px;
  width: 70px;
  height: 14px;
  z-index: 2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.25s ease;
  pointer-events: auto;
}

.bidding-top-handle-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bidding-top-grip {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
}

.bidding-top-panel.expanded .bidding-top-handle {
  opacity: 0;
  pointer-events: none;
}

/* Expanded content */
.bidding-top-expanded {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background: #273238;
}

.bidding-top-panel.expanded .bidding-top-expanded {
  max-height: 600px;
}

.bidding-top-expanded-inner {
  padding: 0 16px 16px;
}

/* Route info */
.bidding-top-route {
  padding: 8px 0 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bidding-top-route-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.bidding-top-route-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bidding-top-route-dot.from { background: #EF4444; }
.bidding-top-route-dot.to { background: #6B7280; }

.bidding-top-client-price {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.bidding-top-client-price strong {
  color: #fff;
}

/* Offers list */
.bidding-top-offers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
}

.bidding-top-offer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  animation: biddingOfferIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.bidding-top-offer-row:nth-child(1) { animation-delay: 0ms; }
.bidding-top-offer-row:nth-child(2) { animation-delay: 40ms; }
.bidding-top-offer-row:nth-child(3) { animation-delay: 60ms; }
.bidding-top-offer-row:nth-child(4) { animation-delay: 80ms; }
.bidding-top-offer-row:nth-child(5) { animation-delay: 100ms; }
.bidding-top-offer-row:nth-child(6) { animation-delay: 120ms; }
.bidding-top-offer-row:nth-child(7) { animation-delay: 140ms; }
.bidding-top-offer-row:nth-child(8) { animation-delay: 160ms; }

@keyframes biddingOfferIn {
  0% { opacity: 0; transform: translate3d(40px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

.bidding-top-offer-row.is-you {
  background: rgba(38, 166, 154, 0.15);
  border: 1px solid rgba(38, 166, 154, 0.3);
}

.bidding-top-offer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bidding-top-offer-position {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  min-width: 28px;
}

.bidding-top-offer-rating {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.bidding-top-offer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bidding-top-offer-price {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.bidding-top-you-badge {
  padding: 3px 8px;
  background: #26A69A;
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

/* Hint */
.bidding-top-hint {
  padding: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin-top: 8px;
}

/* Withdraw button */
.bidding-top-withdraw {
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 10px;
  background: transparent;
  color: #EF4444;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bidding-top-withdraw:active {
  background: rgba(239, 68, 68, 0.1);
}

/* ===== END BIDDING TOP PANEL ===== */

/* ===== Route Pin Markers (driver map) ===== */
.route-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.route-pin .pin-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.route-pin .pin-head {
  width: 36px;
  height: 36px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.route-pin .pin-head-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  transform: rotate(45deg);
}

.route-pin .pin-stick {
  width: 3px;
  height: 20px;
  background: #1a1a1a;
  border-radius: 0 0 2px 2px;
  margin-top: -4px;
}

.route-pin .pin-ground {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 12px;
}

.route-pin .pin-shadow {
  position: absolute;
  width: 16px;
  height: 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Pin colors */
.route-pin .pin-head-from {
  background: #E53935;
}

.route-pin .pin-head-to {
  background: #00ACC1;
}

/* ===== Order Route Markers (circle from + flag to) ===== */
.order-route-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.order-route-marker .marker-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.order-route-marker .marker-circle::after {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid #E53935;
  background: transparent;
}

.order-route-marker .marker-flag {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #445E6B;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.order-route-marker .marker-flag::after {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6h-5.6z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


/* ===== Cancel Order Modal ===== */
.cancel-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: none;
}

.cancel-modal-overlay.visible {
  display: block;
}

.cancel-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.2s ease;
}

.cancel-modal-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 24px 20px;
  padding-bottom: calc(24px + var(--safe-bottom));
  animation: slideUp 0.3s ease;
  max-height: 85vh;
  overflow-y: auto;
}

.cancel-modal-header {
  text-align: center;
  margin-bottom: 20px;
}

.cancel-modal-icon {
  margin-bottom: 12px;
}

.cancel-modal-title {
  font-size: 20px;
  font-weight: 600;
  color: #486B6D;
  margin-bottom: 8px;
}

.cancel-modal-subtitle {
  font-size: 14px;
  color: #486B6D;
  opacity: 0.7;
}

.cancel-modal-wait-btn {
  width: 100%;
  padding: 16px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 24px;
  transition: transform 0.15s, opacity 0.15s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.cancel-modal-wait-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.cancel-modal-reasons {
  margin-bottom: 16px;
}

.cancel-modal-reasons-title {
  font-size: 14px;
  font-weight: 500;
  color: #486B6D;
  opacity: 0.7;
  margin-bottom: 12px;
}

.cancel-reason-item {
  padding: 14px 16px;
  background: var(--bg);
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 15px;
  color: #486B6D;
  cursor: pointer;
  transition: background 0.15s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.cancel-reason-item:active {
  background: var(--border);
}

.cancel-reason-item:last-child {
  margin-bottom: 0;
}

.cancel-modal-back-btn {
  width: 100%;
  padding: 14px;
  background: transparent;
  color: #486B6D;
  border: none;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px;
}

.cancel-modal-back-btn:active {
  opacity: 0.7;
}

.cancel-modal-danger-btn {
  width: 100%;
  padding: 14px;
  background: transparent;
  color: #EF4444;
  border: 1px solid #FECACA;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 12px;
  transition: all 0.2s;
}

.cancel-modal-danger-btn:active {
  background: #FEE2E2;
  border-color: #EF4444;
}

/* ===== Voice Call Styles ===== */

.call-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  z-index: 10000;
  padding: 8px 12px;
  padding-top: calc(var(--safe-top, 0px) + 8px);
}

.call-overlay.hidden {
  display: none;
}

.call-content {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
}

.call-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.call-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
}

.call-avatar img,
.call-avatar > div:first-child {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

#call-avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
}

.call-pulse {
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 2.5px solid #4CAF50;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.15s ease-out, box-shadow 0.15s ease-out;
}

.call-pulse.ringing {
  animation: callPulseRinging 1.5s ease-out infinite;
}

@keyframes callPulseRinging {
  0% { opacity: 0.8; box-shadow: 0 0 8px 3px rgba(76,175,80,0.4); }
  50% { opacity: 0.3; box-shadow: 0 0 4px 1px rgba(76,175,80,0.2); }
  100% { opacity: 0.8; box-shadow: 0 0 8px 3px rgba(76,175,80,0.4); }
}

.call-info {
  min-width: 0;
}

.call-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

.call-status {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

.call-timer {
  font-size: 14px;
  font-weight: 500;
  color: #4CAF50;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

.call-timer.hidden {
  display: none;
}

.call-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.call-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}

.call-btn:active {
  transform: scale(0.95);
}

.call-btn-mute,
.call-btn-speaker {
  background: rgba(22, 33, 62, 0.95);
  color: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.call-btn-mute.active,
.call-btn-speaker.active {
  background: #fff;
  color: #1a1a2e;
}

.call-btn-end {
  background: #f44336;
  color: #fff;
  width: 44px;
  height: 44px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* Incoming Call Modal */
.incoming-call {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.85);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.incoming-call.hidden {
  display: none;
}

.incoming-call-content {
  background: linear-gradient(180deg, #2a2a4a 0%, #1a1a2e 100%);
  border-radius: 24px;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 280px;
}

.incoming-call-avatar {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
}

.incoming-call-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

#incoming-call-avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
}

.incoming-pulse {
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
  border: 2px solid rgba(76, 175, 80, 0.6);
  animation: callPulse 1.5s ease-out infinite;
}

.incoming-call-name {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

.incoming-call-label {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 32px;
}

.incoming-call-actions {
  display: flex;
  gap: 48px;
}

.incoming-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s;
}

.incoming-btn:active {
  transform: scale(0.95);
}

.incoming-btn-decline {
  background: #f44336;
  color: #fff;
}

.incoming-btn-accept {
  background: #4CAF50;
  color: #fff;
}

/* ===== Call Driver Button ===== */

.call-driver-section {
  margin: 16px 0;
}

.btn-call-driver {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.btn-call-driver:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(76, 175, 80, 0.2);
}

.btn-call-driver svg {
  flex-shrink: 0;
}

/* Новые кнопки для клиента - шторка "Водитель едет к Вам" */
.action-buttons-client {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.btn-call-driver-new {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: background 0.15s, transform 0.15s;
}

.btn-call-driver-new:active {
  background: #2563eb;
  transform: scale(0.98);
}
.btn-call-driver-new.btn-call-end {
  background: #f44336;
}
.btn-call-driver-new.btn-call-end:active {
  background: #d32f2f;
}

.btn-call-driver-new svg {
  flex-shrink: 0;
}

.btn-cancel-order-new {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #EF4444;
  border: 1px solid #EF4444;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.btn-cancel-order-new:active {
  background: rgba(239, 68, 68, 0.1);
  transform: scale(0.98);
}

/* Call client button for driver */
.btn-call-client {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: background 0.15s, transform 0.15s;
}

.btn-call-client:active {
  background: #2563eb;
  transform: scale(0.98);
}

.btn-call-client svg {
  flex-shrink: 0;
}

/* ===== Ban Screen Overlay ===== */
#ban-screen-overlay {
  position: fixed;
  inset: 0;
  background: #FFFFFF;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 25vh;
  clip-path: circle(0% at 100% 0%);
}

#ban-screen-overlay.animating {
  animation: ban-reveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes ban-reveal {
  from { clip-path: circle(0% at 100% 0%); }
  to { clip-path: circle(150% at 100% 0%); }
}

/* Название вверху */
.ban-screen-title-main {
  font-size: 52px;
  font-weight: 700;
  color: #1F2937;
  letter-spacing: -1px;
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
}

#ban-screen-overlay.animating .ban-screen-title-main {
  animation: ban-content-appear 0.4s ease-out 0.5s forwards;
}

/* Контент внизу */
.ban-screen-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 24px;
  padding-bottom: calc(24px + var(--tg-safe-area-inset-bottom, 0px));
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
}

#ban-screen-overlay.animating .ban-screen-bottom {
  animation: ban-content-appear 0.4s ease-out 0.6s forwards;
}

@keyframes ban-content-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ban-screen-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.ban-screen-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #1F2937;
}

.ban-screen-subtitle {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.5;
  margin: 0 0 16px;
}

.ban-screen-time {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 14px;
  padding: 12px 20px;
  margin-bottom: 12px;
  display: inline-block;
}

.ban-screen-time-label {
  display: block;
  font-size: 12px;
  color: #9CA3AF;
  margin-bottom: 2px;
}

.ban-screen-time-value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #DC2626;
}

.ban-screen-hint {
  font-size: 12px;
  color: #9CA3AF;
  line-height: 1.4;
  margin-bottom: 16px;
}

.ban-screen-btn {
  width: 100%;
  padding: 16px;
  background: #1F2937;
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.ban-screen-btn:active {
  background: #374151;
}

.ban-screen-btn.support {
  background: #6366F1;
}

.ban-screen-btn.support:active {
  background: #4F46E5;
}


/* Info box for cancelled order */
.cancelled-info-box {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 16px 0;
}

.cancelled-info-text {
  color: #EF4444;
  font-size: 14px;
  text-align: center;
}


/* ===== AVATAR SKELETON LOADING ===== */
img.offer-avatar,
img.driver-avatar-lg,
.menu-avatar-img,
.client-avatar-img,
.rate-client-avatar img,
.driver-fixed-header .avatar-inner img,
.client-avatar-simple .avatar-inner img {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: avatar-skeleton 1.2s ease-in-out infinite;
}

@keyframes avatar-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Скелетон-фон на аватарах (CSS-only, без JS) */
.oc-avatar-img,
.mini-card-avatar-img,
.client-avatar-img {
  background: linear-gradient(90deg, #e8e8e8 25%, #d8d8d8 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: avatar-skeleton 1.2s ease-in-out infinite;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ===== SCHEDULED ORDER MODALS & TAB ===== */

/* Общие стили модалок scheduled */
.scheduled-confirm-overlay,
.scheduled-reminder-overlay,
.scheduled-activated-overlay,
.scheduled-driver-failed-overlay,
.scheduled-warning-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 20px;
}

.scheduled-confirm-overlay.visible,
.scheduled-reminder-overlay.visible,
.scheduled-activated-overlay.visible,
.scheduled-driver-failed-overlay.visible,
.scheduled-warning-overlay.visible {
  opacity: 1;
}

.scheduled-confirm-card,
.scheduled-reminder-card,
.scheduled-activated-card,
.scheduled-driver-failed-card,
.scheduled-warning-card {
  background: white;
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  max-width: 340px;
  width: 100%;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.scheduled-confirm-overlay.visible .scheduled-confirm-card,
.scheduled-reminder-overlay.visible .scheduled-reminder-card,
.scheduled-activated-overlay.visible .scheduled-activated-card,
.scheduled-driver-failed-overlay.visible .scheduled-driver-failed-card,
.scheduled-warning-overlay.visible .scheduled-warning-card {
  transform: scale(1);
}

.scheduled-confirm-icon,
.scheduled-reminder-icon,
.scheduled-activated-icon,
.scheduled-driver-failed-icon,
.scheduled-warning-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.scheduled-confirm-title,
.scheduled-reminder-title,
.scheduled-activated-title,
.scheduled-driver-failed-title,
.scheduled-warning-title {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}

.scheduled-confirm-subtitle,
.scheduled-reminder-subtitle,
.scheduled-activated-subtitle,
.scheduled-driver-failed-subtitle {
  font-size: 15px;
  color: #64748b;
  margin-bottom: 16px;
}

.scheduled-confirm-route,
.scheduled-warning-route {
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  text-align: left;
}

.scheduled-addr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  color: #334155;
}

.scheduled-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.scheduled-dot.from {
  background: #22C55E;
}

.scheduled-dot.to {
  background: #3B82F6;
}

.scheduled-confirm-price,
.scheduled-warning-price {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 12px;
}

.scheduled-confirm-note {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 16px;
}

.scheduled-confirm-btn {
  width: 100%;
}

/* Warning modal specifics */
.scheduled-warning-time {
  font-size: 18px;
  font-weight: 600;
  color: #f59e0b;
  margin-bottom: 16px;
}

.scheduled-warning-note {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 16px;
  line-height: 1.4;
}

/* ===== SCHEDULED TAB CONTENT ===== */
.scheduled-tab-content {
  padding: 16px 0;
}

.scheduled-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 12px;
}

.scheduled-header-icon {
  font-size: 28px;
}

.scheduled-header-info {
  flex: 1;
}

.scheduled-header-title {
  font-size: 14px;
  font-weight: 600;
  color: #92400e;
}

.scheduled-header-date {
  font-size: 16px;
  font-weight: 700;
  color: #78350f;
}

.scheduled-header-countdown {
  background: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #92400e;
}

.scheduled-header-countdown.ready {
  background: #22C55E;
  color: white;
}

/* Карточка заказа */
.scheduled-order-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.scheduled-order-card:active {
  transform: scale(0.98);
}

.scheduled-card-client {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.scheduled-client-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  font-weight: 600;
  overflow: hidden;
}

.scheduled-client-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scheduled-client-info {
  flex: 1;
}

.scheduled-client-name {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.scheduled-client-rating {
  font-size: 13px;
  color: #64748b;
}

.scheduled-card-price {
  font-size: 22px;
  font-weight: 700;
  color: #22C55E;
}

.scheduled-card-route {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.scheduled-route-point {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scheduled-route-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.scheduled-route-dot.from {
  background: #22C55E;
}

.scheduled-route-dot.to {
  background: #3B82F6;
}

.scheduled-route-address {
  font-size: 14px;
  color: #334155;
  flex: 1;
}

.scheduled-card-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: #94a3b8;
}

/* Кнопки действий */
.scheduled-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-start-scheduled {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}

.btn-start-scheduled:active {
  transform: scale(0.98);
}

.btn-start-scheduled.disabled {
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
}

.btn-start-scheduled.disabled:active {
  transform: none;
}

.btn-cancel-scheduled {
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  color: #EF4444;
  border: 1px solid #EF4444;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-cancel-scheduled:active {
  background: rgba(239, 68, 68, 0.1);
}

/* Empty state */
.empty-scheduled {
  text-align: center;
  padding: 60px 20px;
}

.empty-scheduled-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-scheduled-text {
  font-size: 16px;
  color: #94a3b8;
}

/* ===== Client Scheduled Order UI ===== */
.scheduled-client-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 12px;
  margin-bottom: 16px;
}

.scheduled-client-icon {
  font-size: 32px;
}

.scheduled-client-info {
  flex: 1;
}

.scheduled-client-title {
  font-size: 14px;
  font-weight: 600;
  color: #92400e;
}

.scheduled-client-date {
  font-size: 18px;
  font-weight: 700;
  color: #78350f;
}

.scheduled-status {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #bbf7d0;
}

.scheduled-status .status-title {
  color: #166534;
}

.scheduled-status .status-subtitle {
  color: #15803d;
}

/* ===== BOOKING TAB (Client) ===== */
.booking-tab-content {
  padding: 16px 0;
}

.booking-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 12px;
}

.booking-header-icon {
  font-size: 28px;
}

.booking-header-info {
  flex: 1;
}

.booking-header-title {
  font-size: 14px;
  font-weight: 600;
  color: #92400e;
}

.booking-header-date {
  font-size: 18px;
  font-weight: 700;
  color: #78350f;
}

.booking-driver-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 12px;
}

.booking-driver-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

.booking-driver-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  font-weight: 600;
  overflow: hidden;
}

.booking-driver-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.booking-driver-rating-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
}

.booking-driver-info {
  flex: 1;
}

.booking-driver-name {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.booking-driver-car {
  font-size: 14px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.booking-car-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.booking-driver-number {
  font-size: 13px;
  color: #94a3b8;
  font-family: monospace;
}

.booking-route-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  cursor: pointer;
}

.booking-route-point {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.booking-route-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.booking-route-dot.from { background: #22C55E; }
.booking-route-dot.to { background: #3B82F6; }

.booking-route-address {
  font-size: 14px;
  color: #334155;
}

.booking-route-meta {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

.booking-route-meta span:first-child {
  color: #22C55E;
  font-size: 16px;
}

.booking-note {
  text-align: center;
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 16px;
}

.booking-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-cancel-booking {
  width: 100%;
  padding: 14px 20px;
  background: transparent;
  color: #EF4444;
  border: 1px solid #EF4444;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.empty-booking {
  text-align: center;
  padding: 60px 20px;
}

.empty-booking-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-booking-text {
  font-size: 16px;
  color: #94a3b8;
}

/* ===== SCHEDULED TAB V2 (Driver) ===== */
.scheduled-tab-content {
  padding: 8px 0;
}

.scheduled-order-card-v2 {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 16px;
  cursor: pointer;
}

.scheduled-actions-v2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-start-scheduled-v2 {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.btn-start-scheduled-v2.disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

.btn-cancel-scheduled-v2 {
  width: 100%;
  padding: 14px 20px;
  background: transparent;
  color: #EF4444;
  border: 1px solid #fecaca;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

/* ===== MODALS ===== */
.scheduled-cancelled-overlay,
.booking-block-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 20px;
}

.scheduled-cancelled-overlay.visible,
.booking-block-overlay.visible {
  opacity: 1;
}

.scheduled-cancelled-card,
.booking-block-card {
  background: white;
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  max-width: 340px;
  width: 100%;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.scheduled-cancelled-overlay.visible .scheduled-cancelled-card,
.booking-block-overlay.visible .booking-block-card {
  transform: scale(1);
}

.scheduled-cancelled-icon,
.booking-block-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.scheduled-cancelled-title,
.booking-block-title {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}

.scheduled-cancelled-subtitle,
.booking-block-subtitle {
  font-size: 15px;
  color: #64748b;
  margin-bottom: 16px;
  white-space: pre-line;
}

.booking-block-note {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 16px;
}

.booking-block-cancel {
  margin-top: 8px;
  background: transparent !important;
  color: #3B82F6 !important;
  border: 1px solid #3B82F6 !important;
}

/* Cancel booking modal */
.cancel-booking-warning {
  color: #F59E0B;
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
  padding: 8px 12px;
  background: #fffbeb;
  border-radius: 8px;
}

/* =====================================================
   PERFORMANCE OPTIMIZATIONS
   Этот блок можно целиком удалить для отката.
   ===================================================== */

/* --- GPU Layer Promotion --- */
#sheet {
  will-change: transform, height;
  transform: translateZ(0);
}

#sheet-content {
  will-change: scroll-position;
  transform: translateZ(0);
}

.orders-list {
  contain: content;
  will-change: transform;
  transform: translateZ(0);
}

.offers-scroll {
  contain: content;
  will-change: transform;
  transform: translateZ(0);
}

/* --- Заменяем transition: all на конкретные свойства ---
   transition: all заставляет браузер мониторить ВСЕ свойства.
   Реально меняются только transform, opacity, background, color. */

.offer-card {
  transition: transform 0.2s, opacity 0.2s;
  contain: layout style;
}

.order-card {
  transition: transform 0.2s, opacity 0.2s;
  contain: layout style;
}

.order-card-v2 {
  contain: layout style;
}

.btn {
  transition: transform 0.2s, opacity 0.2s, background 0.2s;
}

.price-card {
  transition: transform 0.3s ease, background 0.4s ease, opacity 0.3s ease;
}

.price-label {
  transition: opacity 0.25s ease, color 0.25s ease;
}

.price-compact-editor {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.price-hint {
  transition: opacity 0.3s ease, color 0.3s ease;
}

.price-btn-round {
  transition: transform 0.1s ease, background 0.1s ease;
}

.price-chip {
  transition: transform 0.1s ease, background 0.1s ease, color 0.1s ease;
}

.rating-star {
  transition: transform 0.2s, color 0.2s;
}

.car-type-option {
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.car-color-btn {
  transition: transform 0.2s, border-color 0.2s;
}

.overlay-option {
  transition: transform 0.2s ease, background 0.2s ease;
}

.landmark-done {
  transition: opacity 0.2s, transform 0.2s;
}

#landmark-input {
  transition: border-color 0.2s, background 0.2s;
}

.details-options {
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pin-head-dot {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pin-shadow {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* --- Облегчённые box-shadow для карточек в списках ---
   Оригинал: box-shadow: 0 2px 6px rgba(0,0,0,0.1)
   Оптимизация: более простая тень = быстрее paint */

.offer-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.order-card-v2 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* --- Облегчаем backdrop-filter на постоянно видимых элементах ---
   backdrop-filter: blur() = 10-30ms на кадр на слабых GPU.
   Город-пилюля видна всегда — оптимизируем. */

.city-pill {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* --- Оптимизация scroll --- */
#sheet-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* =====================================================
   ADAPTIVE PERFORMANCE — LOW DEVICES
   Telegram передаёт performance_class в User-Agent.
   body[data-perf="low"] = отключаем всё тяжёлое.
   ===================================================== */

body[data-perf="low"] * {
  animation-duration: 0.01ms !important;
  animation-delay: 0.01ms !important;
  transition-duration: 0.05s !important;
}

body[data-perf="low"] .offer-card,
body[data-perf="low"] .order-card,
body[data-perf="low"] .order-card-v2 {
  box-shadow: none !important;
  contain: strict;
}

body[data-perf="low"] .city-pill,
body[data-perf="low"] .smart-toast,
body[data-perf="low"] .call-overlay,
body[data-perf="low"] .city-dropdown-menu {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-perf="low"] #sheet {
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08) !important;
}

body[data-perf="low"] .order-card-v2.slide-in,
body[data-perf="low"] .order-card-v2.card-entering,
body[data-perf="low"] .offer-card.slide-in {
  animation: none !important;
}

body[data-perf="low"] .search-spinner {
  animation-duration: 1s !important;
}

/* =====================================================
   ADAPTIVE PERFORMANCE — AVERAGE DEVICES
   Облегчаем, но не убиваем.
   ===================================================== */

body[data-perf="average"] .offer-card,
body[data-perf="average"] .order-card,
body[data-perf="average"] .order-card-v2 {
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}

body[data-perf="average"] .city-pill {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

body[data-perf="average"] .smart-toast {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

body[data-perf="average"] .order-card-v2.slide-in,
body[data-perf="average"] .offer-card.slide-in {
  animation-duration: 0.15s !important;
}

/* =====================================================
   content-visibility для скролл-контейнеров
   Браузер не рисует то что за экраном.
   ===================================================== */

.orders-list > * {
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
}

.offers-section > * {
  content-visibility: auto;
  contain-intrinsic-size: auto 80px;
}

/* END PERFORMANCE OPTIMIZATIONS */

/* ============================================================
   MINI ORDER CARDS — карусель мини-карточек над таб баром
   ============================================================ */

/* Контейнер — фиксированный над таб баром */
#mini-order-cards {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  pointer-events: none;
  overflow: hidden;
}

.mini-cards-container {
  pointer-events: auto;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  margin-bottom: calc(56px + var(--safe-bottom, 0px));
}
.mini-cards-container.show {
  transform: translateY(0);
}

.mini-cards-viewport {
  overflow: hidden;
  width: 100%;
}

.mini-cards-track {
  display: flex;
  transition: transform 0.25s ease-out;
  will-change: transform;
}

.mini-cards-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 12px 8px;
  box-sizing: border-box;
}

/* === Мини-карточка === */
.mini-card {
  background: #ECEDF0;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mini-card:active {
  opacity: 0.92;
}

.mini-card-color-strip {
  width: 4px;
  flex-shrink: 0;
}

.mini-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #ECEDF0;
}

/* --- БЛОК 1: Инфо (белый) --- */
.mini-card-block-info {
  background: white;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border-radius: 0 6px 0 0;
}

.mini-card-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.mini-card-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.mini-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
}
.mini-card-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.mini-card-avatar-initial {
  color: white;
  font-weight: 600;
  font-size: 16px;
}
.mini-card-rating-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  white-space: nowrap;
  line-height: 1.3;
}

/* --- Имя + пикап --- */
.mini-card-info {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}
.mini-card-client-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.mini-card-pickup {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.3;
}
.mini-card-pickup-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid #ddd;
  border-top-color: #009688;
  border-radius: 50%;
  animation: mini-card-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes mini-card-spin {
  to { transform: rotate(360deg); }
}

/* --- Цена справа --- */
.mini-card-price-block {
  text-align: right;
  flex-shrink: 0;
}
.mini-card-price {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
}
.mini-card-price-num {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #1a1a1a;
}
.mini-card-price-rub {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin-left: 1px;
}
.mini-card-ppk {
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}

/* --- БЛОК 2: Адреса (белый) --- */
.mini-card-block-route {
  background: white;
  padding: 10px 14px;
  border-radius: 0 0 6px 0;
}

.mini-card-route-line {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.mini-card-route-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 3px;
}
.mini-card-connector {
  width: 2px;
  flex: 1;
  min-height: 4px;
  background: #ddd;
  margin: 2px 0;
}
.mini-card-route-addrs {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mini-card-addr {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.mini-card-addr-street {
  font-size: 12px;
  font-weight: 400;
  color: #6B7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin-top: -1px;
}

/* === Анимация шапки шторки при мини-карточках === */
body.driver-mode.mini-cards-active .driver-fixed-header {
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
}
body.driver-mode .driver-fixed-header {
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Когда шторка свёрнута при мини-карточках — полностью скрываем контент */
body.driver-mode.mini-cards-active #sheet {
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
}
body.driver-mode #sheet {
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Скрытие шапки при деталях заказа из мини-карточки */
body.mini-card-detail .driver-fixed-header {
  display: none !important;
}

/* Скрытие шапки при деталях заказа */
body.viewing-order-detail .driver-fixed-header {
  display: none !important;
}

/* Скрытие тёмного sheet-header при просмотре деталей заказа */
body.viewing-order-detail .sheet-header {
  display: none !important;
}

/* Edge-to-edge: карточка = шторка */
body.viewing-order-detail #sheet {
  border-radius: 0 !important;
  background: white !important;
  box-shadow: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}
body.viewing-order-detail #sheet-content {
  padding: 0 !important;
}
body.viewing-order-detail .order-card-v2 {
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.viewing-order-detail .order-card-v2::before {
  display: none !important;
}
body.viewing-order-detail .oc-body {
  background: #ECEDF0;
  gap: 5px;
}
body.viewing-order-detail .oc-block-info,
body.viewing-order-detail .oc-block-route {
  border-radius: 0;
}
body.viewing-order-detail .oc-block-action {
  border-radius: 0;
  padding: 6px 14px 8px;
}

/* mini-card-detail — класс для состояния просмотра деталей из мини-карточки */

/* ============================================================
   Active Ride Cards — водитель в поездке
   Мини-карточка реиспользует mini-card-* классы
   Развёрнутая карточка реиспользует oc-* классы
   ============================================================ */

/* --- Контейнер (mount point) --- */
#active-ride-cards {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  pointer-events: none;
  overflow: hidden;
}

/* --- Внутренний контейнер с анимацией --- */
.ride-cards-container {
  pointer-events: auto;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  margin-bottom: calc(56px + var(--safe-bottom, 0px));
  padding: 0 12px 8px;
}
.ride-cards-container.show {
  transform: translateY(0);
}
.ride-cards-container.expanded {
  padding: 0 0 calc(56px + var(--safe-bottom, 0px)) 0;
  margin-bottom: 0;
}

/* --- Скрываем остальной UI при активной поездке --- */
/* !important нужен чтобы перебить inline sheet.style.transition из renderSheet */
body.active-ride-visible #sheet {
  transform: translateY(100%) !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  pointer-events: none;
}
body.active-ride-visible .driver-fixed-header {
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
}
body.active-ride-visible #mini-order-cards {
  display: none;
}

/* --- Развёрнутая карточка: overrides --- */
.ride-detail-card {
  margin: 0 !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.1) !important;
  border-radius: 0 !important;
}
.ride-detail-card::before {
  display: none !important;
}
.ride-detail-card .oc-body {
  background: #ECEDF0;
  gap: 3px;
}
.ride-detail-card .oc-block-info {
  border-radius: 0;
}
.ride-detail-card .oc-block-route {
  border-radius: 0;
}

/* --- Уведомление о статусе --- */
.ride-notice.in-progress {
  color: #3B82F6;
  font-weight: 500;
}
.ride-notice.client-coming {
  color: #22C55E;
  font-weight: 500;
}

/* --- Блок действий --- */
.ride-actions-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 16px !important;
  background: #fff;
  border-radius: 0 !important;
}

/* Ряд: (📞)(💬) [=== Я на месте ===] */
.ride-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Главная кнопка — занимает всё оставшееся */
.ride-btn-primary {
  flex: 1;
  padding: 14px 0;
  border: none;
  border-radius: 12px;
  background: #22C55E;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.ride-btn-primary:active {
  opacity: 0.85;
}

/* Круглые кнопки звонок + чат */
.ride-circle-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
  position: relative;
}
.ride-circle-btn:active {
  opacity: 0.8;
}
.ride-circle-call {
  background: #22C55E;
  color: #fff;
}
.ride-circle-end {
  background: #f44336;
  color: #fff;
}
.ride-circle-chat {
  background: #fff;
  color: #6B7280;
  border: 1.5px solid #E5E7EB !important;
}
.ride-circle-chat:active {
  background: #F3F4F6;
}

/* Чат заказа — прибит к верху чтобы клавиатура не сдвигала */
#order-chat-overlay {
  align-items: center;
}
/* Прячем таб-бар и карточки при открытом чате (visibility сохраняет layout) */
body.order-chat-open #tab-bar,
body.order-chat-open #active-ride-cards {
  visibility: hidden;
}

/* Бейдж чата */
.ride-chat-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #EF4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Отмена */
.ride-btn-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px 0;
  border: 1.5px solid #EF4444;
  border-radius: 12px;
  background: transparent;
  color: #EF4444;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.ride-btn-cancel:active {
  opacity: 0.7;
  background: rgba(239, 68, 68, 0.05);
}

/* ===== RideStatus — Maxim-style unified ride sheet ===== */
.ride-status-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
}
.ride-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ride-status-text {
  font-size: 14px;
  font-weight: 600;
  color: #1F2937;
  flex: 1;
}
.ride-car-plate {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background: #F3F4F6;
  border-radius: 6px;
  color: #374151;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Driver card */
.ride-driver-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
}
.ride-driver-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.ride-driver-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.ride-driver-avatar-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #546e7a;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}
.ride-driver-rating {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
}
.ride-driver-info {
  flex: 1;
  min-width: 0;
}
.ride-driver-name {
  font-size: 15px;
  font-weight: 600;
  color: #1F2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ride-driver-car {
  font-size: 13px;
  color: #6B7280;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ride-car-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
}
/* ETA block */
.ride-eta-block {
  text-align: center;
  flex-shrink: 0;
  padding-left: 8px;
}
.ride-eta-value {
  font-size: 22px;
  font-weight: 700;
  color: #1F2937;
  line-height: 1;
}
.ride-eta-label {
  font-size: 11px;
  color: #9CA3AF;
  margin-top: 2px;
}

/* Route block */
.ride-route-block {
  padding: 12px 16px;
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
}
.ride-route-line {
  display: flex;
  gap: 10px;
}
.ride-route-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}
.ride-route-dot-from {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e12d23;
}
.ride-route-connector {
  width: 1.5px;
  height: 20px;
  background: #D1D5DB;
}
.ride-route-dot-to {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #546e7a;
}
.ride-route-addrs {
  flex: 1;
  min-width: 0;
}
.ride-route-addr {
  font-size: 13px;
  color: #1F2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ride-route-addr-to {
  margin-top: 10px;
}
.ride-route-addr-sub {
  font-size: 11px;
  color: #9CA3AF;
  margin-top: 1px;
}
.ride-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.ride-price-value {
  font-size: 16px;
  font-weight: 700;
  color: #1F2937;
}
.ride-price-method {
  font-size: 12px;
  color: #9CA3AF;
}

/* Maxim-style circle action buttons */
.ride-actions-maxim {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 14px 16px;
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
}
.ride-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ride-action-label {
  font-size: 11px;
  color: #6B7280;
}
.ride-circle-cancel {
  background: #fff;
  color: #EF4444;
  border: 1.5px solid #FCA5A5 !important;
}
.ride-circle-cancel:active {
  background: #FEE2E2;
}
.ride-circle-comingout {
  background: #fff;
  color: #22C55E;
  border: 2px solid #22C55E !important;
}
.ride-circle-comingout:active {
  background: #DCFCE7;
}

/* Share trip button */
.ride-share-block {
  padding: 12px 16px;
}
.ride-share-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: #F3F4F6;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ride-share-btn:active {
  background: #E5E7EB;
}

/* ========================================= */
/* Subscription Block-Based Layout (Driver)  */
/* ========================================= */

/* Контейнер блоков — серый фон, заполняет шторку */
.sub-blocks {
  background: #ECEDF0;
  margin: -12px -16px calc(-16px - var(--safe-bottom, 0px));
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Базовый блок — белый */
.sub-block {
  background: #fff;
  padding: 16px;
}

/* Блок 1: Хедер */
.sub-block-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.sub-header-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sub-header-icon svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
}
.sub-header-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
}
.sub-header-subtitle {
  font-size: 13px;
  color: #6B7280;
  margin-top: 2px;
}

/* Блок 2: Статус подписки */
.sub-block-status {
  text-align: center;
  padding: 14px 16px;
}
.sub-status-label {
  font-size: 13px;
  color: #6B7280;
  margin-bottom: 4px;
}
.sub-status-label.expired {
  color: #EF4444;
  font-weight: 600;
  font-size: 15px;
}
.sub-status-date {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}
.sub-status-date.expired {
  color: #B91C1C;
  font-size: 14px;
  font-weight: 400;
}

/* Блок 3: Тарифы */
.sub-block-tariffs {
  padding: 12px 16px;
}
.sub-tariffs-title {
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  text-align: center;
}
.sub-tariff-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.sub-tariff-item:active {
  background: #F9FAFB;
}
.sub-tariff-divider {
  height: 1px;
  background: #F2F2F7;
}
.sub-tariff-left {
  flex: 1;
}
.sub-tariff-period {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}
.sub-tariff-daily {
  font-size: 13px;
  color: #6B7280;
  margin-top: 1px;
}
.sub-tariff-price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 12px;
}
.sub-tariff-discount {
  font-size: 11px;
  font-weight: 600;
  color: #10B981;
  margin-bottom: 1px;
}
.sub-tariff-price {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
}
.sub-tariff-badge {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 10px;
}
.sub-tariff-check {
  width: 24px;
  height: 24px;
  border: 2px solid #D1D5DB;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.sub-tariff-check svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  opacity: 0;
  transition: opacity 0.2s;
}
.sub-tariff-item.selected .sub-tariff-check {
  background: #3B82F6;
  border-color: #3B82F6;
}
.sub-tariff-item.selected .sub-tariff-check svg {
  opacity: 1;
}
/* Подсветка популярного */
.sub-tariff-item.popular {
  padding-top: 16px;
}

/* Блок 4: Действия */
.sub-block-actions {
  padding: 12px 16px calc(12px + var(--safe-bottom, 0px));
  margin-top: auto;
}

/* Иконка хедера — зелёная для "Стать водителем" */
.sub-header-icon.driver-icon {
  background: linear-gradient(135deg, #10B981, #059669);
}

/* Блок преимуществ — компактный */
.sub-block-benefits {
  padding: 8px 20px;
}
.sub-benefit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
.sub-benefit-row + .sub-benefit-row {
  border-top: 1px solid #F2F2F7;
}
.sub-benefit-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F0FDF4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sub-benefit-icon svg {
  width: 14px;
  height: 14px;
  stroke: #10B981;
}
.sub-benefit-row span {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
}
.sub-oferta {
  text-align: center;
  font-size: 12px;
  color: #9CA3AF;
  margin-bottom: 8px;
}
.sub-oferta a {
  color: #3B82F6;
  text-decoration: underline;
}
.sub-pay-btn {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-radius: 12px;
  background: #3B82F6;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
  margin-bottom: 8px;
}
.sub-pay-btn:active {
  opacity: 0.85;
}
.sub-back-btn {
  width: 100%;
  padding: 12px 0;
  border: none;
  border-radius: 12px;
  background: #F3F4F6;
  color: #374151;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sub-back-btn:active {
  background: #E5E7EB;
}

/* ===== TRAFFIC BUTTON ===== */

/* ===== ONBOARDING OVERLAY ===== */
#onboarding-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #ffffff;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}
#onboarding-overlay.hidden { display: none; }
#onboarding-overlay.fade-out { opacity: 0; }

.onboarding-content {
  text-align: center;
  padding: 0 32px;
  max-width: 360px;
  width: 100%;
}
.onboarding-icon {
  margin-bottom: 32px;
}
.onboarding-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12px;
  line-height: 1.3;
}
.onboarding-text {
  font-size: 15px;
  color: #6B7280;
  margin: 0 0 36px;
  line-height: 1.5;
}
.onboarding-btn-primary {
  display: block;
  width: 100%;
  padding: 16px;
  background: #3B82F6;
  color: white;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  margin-bottom: 16px;
  -webkit-tap-highlight-color: transparent;
}
.onboarding-btn-primary:active {
  background: #2563EB;
  transform: scale(0.98);
}
.onboarding-btn-secondary {
  display: block;
  width: 100%;
  padding: 12px;
  background: none;
  color: #3B82F6;
  font-size: 15px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.onboarding-btn-secondary:active {
  color: #2563EB;
}

/* ===== CITY PICKER OVERLAY ===== */
#city-picker-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #ffffff;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  transition: opacity 0.3s ease;
}
#city-picker-overlay.hidden { display: none; }
#city-picker-overlay.fade-out { opacity: 0; }

.city-picker-content {
  flex: 1;
  padding: 16px;
  padding-top: calc(var(--safe-top, 44px) + 16px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.city-picker-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 16px;
}
.city-search-wrap {
  margin-bottom: 16px;
}
.city-search-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  outline: none;
  background: #F9FAFB;
  color: #1a1a1a;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.city-search-input:focus {
  border-color: #3B82F6;
  background: #fff;
}
.city-search-input::placeholder {
  color: #9CA3AF;
}

/* Search results */
.city-search-results {
  margin-bottom: 16px;
}
.city-search-results.hidden { display: none; }

.city-search-item {
  display: block;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid #F3F4F6;
  font-size: 16px;
  color: #1a1a1a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.city-search-item:active {
  background: #F3F4F6;
}
.city-search-sub {
  display: block;
  font-size: 13px;
  color: #9CA3AF;
  margin-top: 2px;
}
.city-search-empty {
  padding: 20px 16px;
  text-align: center;
  color: #9CA3AF;
  font-size: 15px;
}

/* Popular cities grid */
.popular-cities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.city-btn {
  padding: 14px 8px;
  background: #F3F4F6;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.city-btn:active {
  background: #E5E7EB;
  transform: scale(0.96);
}

/* Dark mode support */
body.driver-mode #onboarding-overlay,
body.driver-mode #city-picker-overlay {
  background: #1a2332;
}
body.driver-mode .onboarding-title,
body.driver-mode .city-picker-title {
  color: #ffffff;
}
body.driver-mode .onboarding-text {
  color: #94A3B8;
}
body.driver-mode .city-search-input {
  background: #273238;
  border-color: #374151;
  color: #ffffff;
}
body.driver-mode .city-search-input:focus {
  border-color: #3B82F6;
  background: #1E293B;
}
body.driver-mode .city-btn {
  background: #273238;
  color: #E2E8F0;
}
body.driver-mode .city-btn:active {
  background: #374151;
}
body.driver-mode .city-search-item {
  color: #E2E8F0;
  border-bottom-color: #374151;
}
body.driver-mode .city-search-item:active {
  background: #374151;
}

/* ===== ONBOARDING SPINNER ===== */
.onboarding-spinner {
  margin-top: 24px;
  text-align: center;
}
.onboarding-spinner.hidden { display: none; }
.onboarding-spinner-ring {
  width: 40px;
  height: 40px;
  border: 3px solid #E5E7EB;
  border-top-color: #3B82F6;
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: onb-spin 0.8s linear infinite;
}
@keyframes onb-spin {
  to { transform: rotate(360deg); }
}
.onboarding-spinner-text {
  font-size: 14px;
  color: #6B7280;
}
body.driver-mode .onboarding-spinner-ring {
  border-color: #374151;
  border-top-color: #3B82F6;
}
body.driver-mode .onboarding-spinner-text {
  color: #94A3B8;
}

/* ===== FREEMIUM: Mode Switch Button ===== */
.tab-item.mode-switch {
  position: relative;
}
.tab-item.mode-switch.disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ===== FREEMIUM: Onboarding Overlay ===== */
.onboarding-content { text-align: center; padding: 20px 0; }
.onboarding-icon { margin: 0 auto 16px; width: 64px; height: 64px; color: var(--primary, #3B82F6); }
.onboarding-icon svg { width: 100%; height: 100%; }
.onboarding-title { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.onboarding-subtitle { font-size: 14px; color: var(--muted, #94A3B8); line-height: 1.4; }
.overlay-buttons { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
.overlay-btn { border: none; border-radius: 12px; padding: 14px; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; }
.overlay-btn:active { opacity: 0.7; }
.overlay-btn.primary { background: var(--primary, #3B82F6); color: #fff; }
.overlay-btn.secondary { background: var(--surface, #1E293B); color: var(--text-secondary, #94A3B8); }

/* ===== FREEMIUM: Free Limit Overlay extras ===== */
.free-limit-back-btn {
  margin-top: 8px;
  background: none;
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  color: var(--text-secondary, #94A3B8);
  cursor: pointer;
  width: 100%;
}