/* CSS Variables for map components */
:root {
  --interact-action: #eb5547;

  /* Safe area insets для поддержки notch и других вырезов на мобильных устройствах */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);

  /* Базовые отступы для мобильных устройств */
  --mobile-padding-small: 12px;
  --mobile-padding-medium: 16px;
  --mobile-padding-large: 20px;

  /* Z-index слои для правильного наложения элементов */
  --z-index-map: 1;
  --z-index-search-panel: 50;
  --z-index-animated-card-overlay: 99;
  --z-index-animated-card: 100;
  --z-index-location-indicator: 100;
  --z-index-user-card: 1000;
  --z-index-auth-button: 1000;
  --z-index-modal: 1500;
  --z-index-location-banner: 2000;
}

.circle {
  cursor: pointer;
  position: relative;
  width: 40px;
  height: 40px;
  color: var(--interact-action);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -50%);
}

.circle-content {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background-color: currentColor;
  transform: translate3d(-50%, -50%, 0);
}

.circle-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  color: #fff;
}