/* public/assets/css/app-services-map-mobile.css */
/* Мобильная версия public/services-map.php */
/* Цвета НЕ меняем — используем существующие переменные */

html.mhk-app-webview,
html.mhk-app-webview body {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

html.mhk-app-webview * {
  box-sizing: border-box;
}

html.mhk-app-webview body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--mhk-bg-1, #f6f8fb);
  color: var(--mhk-text-main, #222);
}

/* Контейнеры */
html.mhk-app-webview .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 12px 12px !important;
}

html.mhk-app-webview .container > .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Верхняя часть */
html.mhk-app-webview .map-topbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 9px !important;

  margin: 0 !important;
  padding: 10px 0 9px !important;

  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.mhk-app-webview .map-topbar .title-wrap {
  width: 100% !important;
  min-width: 0 !important;
}

html.mhk-app-webview .map-topbar h1 {
  width: 100% !important;
  margin: 0 !important;
  font-size: 19px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html.mhk-app-webview .map-topbar .subtitle {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

/* Кнопки сверху */
html.mhk-app-webview .map-topbar .actions {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  align-items: stretch !important;
}

html.mhk-app-webview .btn,
html.mhk-app-webview .btn-ghost {
  width: 100% !important;
  min-height: 42px !important;
  padding: 9px 10px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  justify-content: center !important;
}

html.mhk-app-webview .btn:hover,
html.mhk-app-webview .btn-ghost:hover {
  transform: none !important;
}

/* Пользовательский бейдж */
html.mhk-app-webview .user-badge {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  border-radius: 14px !important;
  padding: 7px 10px !important;
  overflow: hidden !important;
}

html.mhk-app-webview .user-badge .avatar {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 auto !important;
}

html.mhk-app-webview .user-badge span:last-child {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Фильтры */
html.mhk-app-webview .controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: stretch !important;

  margin: 0 0 10px !important;
  padding: 0 !important;

  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.mhk-app-webview .controls select,
html.mhk-app-webview .controls input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 9px 11px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}

html.mhk-app-webview .controls #filter-clear {
  width: auto !important;
  min-width: 88px !important;
  white-space: nowrap !important;
}

/* Убираем пустой spacer */
html.mhk-app-webview .controls > div[style*="flex:1"] {
  display: none !important;
}

/* Легенду на мобильной карте скрываем, чтобы карта была больше */
html.mhk-app-webview .legend {
  display: none !important;
}

/* Карта */
html.mhk-app-webview #map {
  width: 100% !important;
  height: 66svh !important;
  min-height: 430px !important;
  max-height: 680px !important;

  border-radius: 18px !important;
  border: 1px solid var(--mhk-border, #e6eef7) !important;
  box-shadow: var(--mhk-shadow, 0 8px 24px rgba(12,20,30,.04)) !important;
  background: var(--bg-elevated-primary, #fff) !important;
  overflow: hidden !important;
}

/* Google popup */
html.mhk-app-webview .gm-style .gm-style-iw-c {
  max-width: calc(100vw - 28px) !important;
  border-radius: 16px !important;
}

html.mhk-app-webview .gm-style .gm-style-iw-d {
  max-width: calc(100vw - 42px) !important;
  overflow-x: hidden !important;
}

html.mhk-app-webview .gm-style button {
  touch-action: manipulation !important;
}

html.mhk-app-webview .gm-style-iw a {
  color: var(--mhk-text-main, #222) !important;
  font-weight: 900 !important;
}

html.mhk-app-webview .gm-style-iw img {
  max-width: 100% !important;
  height: auto !important;
}

/* Маленькие телефоны */
@media (max-width: 430px) {
  html.mhk-app-webview .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 8px !important;
  }

  html.mhk-app-webview .map-topbar {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    gap: 8px !important;
  }

  html.mhk-app-webview .map-topbar h1 {
    font-size: 17px !important;
  }

  html.mhk-app-webview .map-topbar .subtitle {
    display: none !important;
  }

  html.mhk-app-webview .map-topbar .actions {
    grid-template-columns: 1fr 1fr !important;
  }

  html.mhk-app-webview .user-badge {
    display: none !important;
  }

  html.mhk-app-webview .btn,
  html.mhk-app-webview .btn-ghost {
    min-height: 40px !important;
    font-size: 12px !important;
    padding: 8px 9px !important;
  }

  html.mhk-app-webview .controls {
    grid-template-columns: minmax(0, 1fr) auto !important;
    margin-bottom: 8px !important;
  }

  html.mhk-app-webview .controls select,
  html.mhk-app-webview .controls input {
    min-height: 40px !important;
    font-size: 13px !important;
  }

  html.mhk-app-webview .controls #filter-clear {
    min-width: 78px !important;
  }

  html.mhk-app-webview #map {
    height: 64svh !important;
    min-height: 390px !important;
    max-height: 640px !important;
    border-radius: 16px !important;
  }
}