/* Общие стили предпросмотра макета ZooHelp */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
html.zh-lock { overflow: hidden; }
body { margin: 0; background: #F3F6F7; -webkit-font-smoothing: antialiased; }
a { color: #0E7A70; }
[id] { scroll-margin-top: 64px; }

/* ---------- состояния при наведении и фокусе ---------- */
a, button { transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #0E7A70; outline-offset: 2px; }
@media (hover: hover) {
  a:hover { color: #0A5F58; }
  /* основная кнопка */
  a[style*="background: #0E7A70"]:hover, button[style*="background: #0E7A70"]:hover { background: #0A5F58 !important; }
  /* тёмная кнопка */
  button[style*="background: #14233A"]:hover { background: #344C70 !important; }
  /* контурная кнопка */
  a[style*="border: 1.5px solid #14233A"]:hover, button[style*="border: 1.5px solid #14233A"]:hover { background: #14233A !important; color: #FFFFFF !important; }
  button[style*="border: 1.5px solid #FFFFFF"]:hover { background: #FFFFFF !important; color: #14233A !important; }
  /* пункты меню, телефоны, строки списка услуг */
  a[style*="color: #14233A"][style*="text-decoration: none"]:not([style*="border: 1.5px solid"]):not([style*="background:"]):hover { color: #0E7A70 !important; }
  a[style*="color: #0E7A70"]:hover { color: #0A5F58 !important; }
  footer a[style*="color: #FFFFFF"]:hover { color: #8AD3C8 !important; }
  /* стрелка в строке списка и круглые кнопки слайдера */
  a:hover > span[style*="border-radius: 50%"] { background: #0E7A70 !important; color: #FFFFFF !important; }
  a > span[style*="border-radius: 50%"] { transition: background-color .15s, color .15s; }
  button[style*="border-radius: 50%"][style*="background: #FFFFFF"]:hover, button[style*="border-radius: 50%"][style*="background: #F3F6F7"]:hover { background: #14233A !important; color: #FFFFFF !important; }
  /* фильтры и плитки документов */
  button[style*="border: 1px solid #DCE4E8"]:hover { border-color: #0E7A70 !important; }
  /* плитки услуг: питомец чуть приближается */
  a[style*="overflow: hidden"] img { transition: transform .35s ease; transform-origin: 80% 100%; }
  a[style*="overflow: hidden"]:hover img { transform: scale(1.04); }
}

/* ---------- телефонная версия ---------- */
body.zh-phone #app { width: 390px; margin: 0 auto; }
body.zh-phone { padding-bottom: 84px; }
body.zh-phone div[style*="position: sticky; bottom: 12px"] {
  position: fixed !important; left: 50%; bottom: 12px; width: 358px; margin-left: -179px; box-sizing: border-box; z-index: 20;
}
html.zh-inframe { scrollbar-width: none; }
html.zh-inframe::-webkit-scrollbar { display: none; }

/* ---------- панель предпросмотра (видна только на компьютере) ---------- */
.zh-bar {
  position: sticky; top: 0; z-index: 100; height: 48px; box-sizing: border-box; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #14233A; color: #FFFFFF; font: 500 14px/1 'Golos Text', system-ui, sans-serif;
}
.zh-bar-t { flex: 1; white-space: nowrap; }
.zh-bar-n { flex: 1; text-align: right; color: #B9C4D2; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zh-bar-s { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.zh-bar-s button { height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #FFFFFF; font: inherit; font-weight: 600; cursor: pointer; }
.zh-bar-s button.on { background: #FFFFFF; color: #14233A; }
.zh-stage { display: none; }
body.zh-framed { background: #E3E9ED; }
body.zh-framed #app { display: none; }
body.zh-framed .zh-stage { display: flex; justify-content: center; height: calc(100vh - 48px); box-sizing: border-box; padding: 28px 0; }
.zh-stage iframe { width: 390px; height: 100%; max-height: 844px; border: 0; border-radius: 36px; background: #F3F6F7; box-shadow: 0 0 0 10px #14233A, 0 24px 60px rgba(20, 35, 58, .25); }
@media (max-width: 900px) { .zh-bar-n { display: none; } }
/* в узком окне и так показана телефонная версия - панель не нужна */
@media (max-width: 767px) {
  .zh-bar, .zh-stage { display: none !important; }
  body.zh-framed #app { display: block; }
  body.zh-framed { background: #F3F6F7; }
}