/* public/assets/css/app-services.css */
/* Мобильная версия страницы services.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 body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Убираем лишний десктопный запас */
html.mhk-app-webview .container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 10px 12px 88px !important;
}

/* Мобильная верхняя панель */
html.mhk-app-webview .svc-appbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 0 10px;
  backdrop-filter: blur(14px);
}

html.mhk-app-webview .svc-app-search {
  flex: 1;
  min-width: 0;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--svc-line);
  background: var(--svc-input-bg);
  color: var(--svc-text);
  padding: 0 14px;
  font-size: 15px;
  font-weight: 800;
  outline: none;
  box-shadow: var(--svc-shadow-sm);
}

html.mhk-app-webview .svc-app-search::placeholder {
  color: var(--svc-muted);
}

html.mhk-app-webview .svc-app-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

html.mhk-app-webview .svc-app-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--svc-line);
  background: var(--svc-panel-bg-soft);
  color: var(--svc-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 19px;
  font-weight: 900;
  box-shadow: var(--svc-shadow-sm);
  cursor: pointer;
}

/* Заголовок списка в мобильном */
html.mhk-app-webview .svc-app-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 8px 2px 12px;
  color: var(--svc-title);
  font-size: 22px;
  line-height: 1.15;
  font-weight: 1000;
  letter-spacing: -0.02em;
}

html.mhk-app-webview .svc-app-title span {
  color: var(--svc-muted);
  font-size: 14px;
  font-weight: 900;
}

/* На мобильном основной hero не нужен — его заменяет appbar/title */
html.mhk-app-webview .svc-hero {
  display: none !important;
}

/* Панель фильтров превращаем в нижний drawer */
html.mhk-app-webview .svc-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 1300;
  max-height: min(82vh, 720px);
  border-radius: 26px 26px 0 0;
  overflow: hidden;
  transform: translateY(105%);
  transition: transform .22s ease;
  box-shadow: var(--svc-shadow-lg);
}

html.mhk-app-webview.svc-app-filters-open .svc-panel {
  transform: translateY(0);
}

html.mhk-app-webview.svc-app-filters-open body {
  overflow: hidden !important;
}

/* Шапка фильтров */
html.mhk-app-webview .svc-app-filter-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--svc-line);
  background: var(--svc-panel-bg);
}

html.mhk-app-webview .svc-app-filter-close,
html.mhk-app-webview .svc-app-filter-clear {
  border: 1px solid var(--svc-line);
  background: var(--svc-panel-bg-soft);
  color: var(--svc-text);
  box-shadow: var(--svc-shadow-sm);
  cursor: pointer;
}

html.mhk-app-webview .svc-app-filter-close {
  width: 40px;
  height: 40px;
  border-radius: 15px;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
}

html.mhk-app-webview .svc-app-filter-title {
  min-width: 0;
  color: var(--svc-title);
  font-size: 16px;
  font-weight: 1000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.mhk-app-webview .svc-app-filter-clear {
  min-height: 38px;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
}

/* Сами фильтры */
html.mhk-app-webview .svc-filters {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  max-height: calc(min(82vh, 720px) - 65px);
  overflow-y: auto;
  padding: 14px 14px calc(18px + env(safe-area-inset-bottom)) !important;
  border-top: 0 !important;
}

html.mhk-app-webview .svc-field {
  gap: 7px;
}

html.mhk-app-webview .svc-label {
  font-size: 12px;
}

html.mhk-app-webview .svc-input,
html.mhk-app-webview .svc-select {
  min-height: 46px;
  border-radius: 16px;
  font-size: 15px;
}

/* Список */
html.mhk-app-webview .svc-shell {
  gap: 12px;
}

html.mhk-app-webview .svc-list {
  gap: 12px;
}

/* Карточка сервиса */
html.mhk-app-webview .card {
  width: 100%;
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  padding: 12px !important;
  border-radius: 22px;
}

html.mhk-app-webview .service-card-linkable:hover {
  transform: none;
}

html.mhk-app-webview .svc-card__media {
  width: 96px !important;
  height: 96px !important;
  border-radius: 18px;
}

html.mhk-app-webview .svc-card__body {
  min-width: 0;
}

html.mhk-app-webview .svc-card__top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

html.mhk-app-webview .service-title {
  max-width: 100%;
  font-size: 16px;
  line-height: 1.2;
}

html.mhk-app-webview .service-desc {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.38;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html.mhk-app-webview .svc-card__badges {
  justify-content: flex-start;
  gap: 6px;
}

html.mhk-app-webview .status-badge,
html.mhk-app-webview .badge-premium,
html.mhk-app-webview .badge-super {
  min-height: 26px;
  padding: 0 9px;
  font-size: 10px;
}

html.mhk-app-webview .svc-card__meta {
  margin-top: 9px;
  gap: 7px;
  align-items: flex-start;
  flex-direction: column;
}

html.mhk-app-webview .rating {
  gap: 6px;
  font-size: 12px;
}

html.mhk-app-webview .stars {
  font-size: 13px;
  letter-spacing: 0;
}

html.mhk-app-webview .svc-location {
  font-size: 12px;
  line-height: 1.25;
}

html.mhk-app-webview .svc-card__bottom {
  margin-top: 10px;
}

html.mhk-app-webview .svc-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

html.mhk-app-webview .svc-actions .btn,
html.mhk-app-webview .svc-actions .btn-ghost {
  width: 100%;
  min-height: 38px;
  font-size: 12px;
}

/* Состояния */
html.mhk-app-webview .svc-alert,
html.mhk-app-webview .svc-empty {
  border-radius: 20px;
  padding: 13px 14px;
}

/* Старые floating icons на этой странице лучше скрыть:
   кнопки уже есть в верхней мобильной панели */
html.mhk-app-webview .svc-floating-icons {
  display: none !important;
}

/* Очень узкие экраны */
@media (max-width: 380px) {
  html.mhk-app-webview .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html.mhk-app-webview .card {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
  }

  html.mhk-app-webview .svc-card__media {
    width: 86px !important;
    height: 86px !important;
  }

  html.mhk-app-webview .svc-app-icon {
    width: 42px;
    height: 42px;
  }

  html.mhk-app-webview .svc-app-search {
    height: 42px;
  }
}
/* Fix mobile service cards */
html.mhk-app-webview .card,
html.mhk-app-webview .svc-card__body,
html.mhk-app-webview .svc-card__top,
html.mhk-app-webview .svc-card__title-wrap {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Описание не выходит за рамки карточки */
html.mhk-app-webview .service-desc {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: normal !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* Название тоже страхуем от длинных слов */
html.mhk-app-webview .service-title {
  max-width: 100% !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Кнопки "Открыть" и "Записаться" в одну строку */
html.mhk-app-webview .svc-card__bottom {
  width: 100% !important;
  display: block !important;
  margin-top: 10px !important;
}

html.mhk-app-webview .svc-actions {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: stretch !important;
}

html.mhk-app-webview .svc-actions .btn,
html.mhk-app-webview .svc-actions .btn-ghost {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

/* Скрыть статус (Active) только в мобильном виде */
html.mhk-app-webview .status-badge.active {
  display: none !important;
}