:root {
  --accent: #ff0055;
  --accent-dim: #cc0044;
  --accent-shadow: rgba(255, 0, 85, 0.3);
}

[data-theme="cyber"] { --accent: #00d4ff; --accent-dim: #00aacc; --accent-shadow: rgba(0, 212, 255, 0.3); }
[data-theme="neon"] { --accent: #00ff88; --accent-dim: #00cc66; --accent-shadow: rgba(0, 255, 136, 0.3); }
[data-theme="lava"] { --accent: #ff6600; --accent-dim: #cc5500; --accent-shadow: rgba(255, 102, 0, 0.3); }

.bg-accent { background-color: var(--accent); }
.text-accent { color: var(--accent); }
.border-accent { border-color: var(--accent); }
.bg-accent-dim { background-color: var(--accent-dim); }
.hover\:bg-accent-dim:hover { background-color: var(--accent-dim); }
.hover\:border-accent:hover { border-color: var(--accent); }
.hover\:text-accent:hover { color: var(--accent); }
.focus\:border-accent:focus { border-color: var(--accent); }
.border-l-accent { border-left-color: var(--accent); }
.has-\[\:checked\]\:border-accent:has(:checked) { border-color: var(--accent); }
.has-\[\:checked\]\:bg-accent\/10:has(:checked) { background-color: color-mix(in srgb, var(--accent) 10%, transparent); }
.bg-accent\/10 { background-color: color-mix(in srgb, var(--accent) 10%, transparent); }
.bg-accent\/20 { background-color: color-mix(in srgb, var(--accent) 20%, transparent); }
.text-accent\/70 { color: color-mix(in srgb, var(--accent) 70%, transparent); }
.border-accent\/20 { border-color: color-mix(in srgb, var(--accent) 20%, transparent); }
.border-accent\/30 { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.border-accent\/40 { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.border-accent\/45 { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.border-accent\/70 { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.bg-accent\/5 { background-color: color-mix(in srgb, var(--accent) 5%, transparent); }

/* Black & white map tiles */
.leaflet-tile-pane { filter: grayscale(1) brightness(1.2); }

/* Lower map z-index to allow modals to overlay */
.map-container { z-index: 1; }
.leaflet-container { z-index: 1; }
.shop-comments-section { z-index: 20; pointer-events: auto; position: relative; }
#shops-list { z-index: 10; position: relative; }
#shops-map { z-index: 1; }

/* User suggestion list */
.user-suggestions {
  position: absolute;
  background: #09090b;
  border: 1px solid #27272a;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  width: 200px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.user-suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a1a1aa;
  font-size: 11px;
  transition: all 0.2s;
}
.user-suggestion-item:hover {
  background: #18181b;
  color: #fff;
}
.user-suggestion-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

/* Waypoint marker on drive map */
.waypoint-marker { background: none; border: none; }

/* GPS Location Marker - Modern stylized */
.gps-location-marker { background: none; border: none; }
.gps-marker-container { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.gps-pulse-ring { position: absolute; width: 40px; height: 40px; border: 2px solid var(--accent); border-radius: 50%; animation: gps-pulse 2s ease-out infinite; opacity: 0.6; }
.gps-pulse-ring:nth-child(2) { animation-delay: 1s; }
.gps-core { position: relative; z-index: 2; }
.gps-core svg { width: 20px; height: 20px; filter: drop-shadow(0 0 4px var(--accent)); }
@keyframes gps-pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.5); opacity: 0; } }

/* Driver label above circle markers */
.driver-label {
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.15);
  white-space: nowrap;
}
.placeholder-accent\/50::placeholder { color: color-mix(in srgb, var(--accent) 50%, transparent); }
.accent-\[var\(--accent\)\] { accent-color: var(--accent); }

* { -webkit-tap-highlight-color: transparent; }

body { font-family: 'Space Grotesk', 'Noto Sans Georgian', sans-serif; }

#mobile-nav { font-family: 'Space Grotesk', 'Noto Sans Georgian', sans-serif; }

.jdm-title { font-family: 'Orbitron', monospace; }

.online-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #555;
}
.online-dot.online { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.online-dot.offline { background: #6b7280; }

.active-tab { position: relative; }
.active-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}

.chat-logo-highlight { color: var(--accent) !important; }

.chat-message-bubble {
  display: inline-block;
  background-color: rgba(39, 39, 42, 0.8);
  color: #d4d4d8;
  padding: 6px 12px;
  border-radius: 8px;
  margin-left: 4px;
  line-height: 1.4;
}

@keyframes scanDown {
  0% { top: 0; }
  100% { top: 100%; }
}

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

#messenger-mobile-messages-list > div {
  animation: fadeIn 0.15s ease-out;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

input:disabled, button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Chat message styling */
#meet-chat-box > div,
#club-chat-box > div {
  margin-bottom: 8px;
  line-height: 1.6;
}

/* Message text bubbles with proper padding */
.chat-message-bubble,
#meet-chat-box span.text-gray-300,
#club-chat-box span.text-gray-300 {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 16px;
  background-color: rgba(39, 39, 42, 0.95);
  margin-left: 8px;
  vertical-align: middle;
  line-height: 1.6;
  min-height: 24px;
  max-width: 70%;
  word-wrap: break-word;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

/* DM chat message bubbles text wrapping */
#dm-chat-box > div > div > div,
#messenger-mobile-messages-list > div > div > div {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  max-width: 100%;
}

#dm-chat-box > div > div > div p,
#messenger-mobile-messages-list > div > div > div p {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  margin: 0;
  max-width: 100%;
  display: block;
}

.map-container {
  width: 100%;
  height: 300px;
}

.hidden-map {
  display: none !important;
}

/* Ensure map container doesn't interfere with content below */
#shops-map.hidden + #shops-list {
  z-index: 100;
}

/* Ensure comments section in shops is always clickable */
#shops-list .bg-zinc-950 {
  position: relative;
  z-index: 10;
}

.voice-msg {
  user-select: none;
  -webkit-user-select: none;
}
.voice-play-btn {
  min-width: 28px;
  min-height: 28px;
}
.voice-waveform {
  flex-shrink: 0;
}
#voice-record-btn:active i,
#voice-record-btn.pressed i {
  color: #ef4444 !important;
}

/* Map popups (MapLibre + Leaflet): white background needs dark text for readability */
.maplibregl-popup-content,
.leaflet-popup-content {
  color: #000 !important;
}
.maplibregl-popup-content b,
.maplibregl-popup-content span,
.maplibregl-popup-content div,
.leaflet-popup-content b,
.leaflet-popup-content span,
.leaflet-popup-content div {
  color: #000;
}
.maplibregl-popup-content span[style*="color:#888"],
.leaflet-popup-content span[style*="color:#888"] {
  color: #666 !important;
}