/* ============================================================
   PetHub — стили каталога. Общие для четырёх витрин:
   ветклиники, ветаптеки, зоомагазины, услуги.

   Заливается в файловый менеджер Tilda и подключается на страницах
   одной строкой <link>. Правка здесь меняет все четыре витрины разом —
   ради этого файл и заведён: до него разметка была скопирована по
   страницам и уже разъехалась.

   Дизайн-система Family — та же, что в виджетах ботов. Все селекторы
   под #phub-root, чтобы стили не протекали на остальную страницу.

   Токены:
     --canvas  #fbfaf9  Cream Canvas — фон блока
     --surface #f2f0ed  Stone Surface — карточки, поля, модалки
     --ink     #121212  Ink Black — заголовки, названия, текст на заливке
     --body    #474645  Body Brown — основной текст
     --muted   #7e7e7d  Muted Gray — подписи
     --line    #e5d5c3  Stone Border — 1px рамка ВМЕСТО тени
     --ember   #ff3e00  Ember Orange — ссылки, рейтинг, обводка фокуса
     --sun     #ffcd6c  Sun Yellow — главная кнопка карточки
     --grass   #00c978  Grass Green — вход в чат, метка города

   Принципиально для стиля: поверхности «вжаты в бумагу» рамкой в 1px, а
   не «парят» на тени. Поэтому box-shadow убран отовсюду, включая
   карточки при наведении и модальные окна — там роль отделения берёт на
   себя затемнённая подложка. По той же причине убран подъём карточки на
   hover: осталось потемнение рамки.

   Текст на заливке — Ink Black, а не белый, на всех трёх акцентах. По Sun
   Yellow белым выходит 1.48:1 — текст просто пропадает, чёрным 11.7:1. На
   Grass Green 2.18:1 против 8.59:1, на Ember Orange 3.52:1 против 5.36:1.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

#phub-root{
  --canvas:#fbfaf9;
  --surface:#f2f0ed;
  --ink:#121212;
  --body:#474645;
  --muted:#7e7e7d;
  --line:#e5d5c3;
  --line-dark:#d8c3a8;
  --ember:#ff3e00;
  --sun:#ffcd6c;
  --sun-dark:#f7bf4d;
  --grass:#00c978;
  --grass-dark:#00b26a;
  --radius:10px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:-0.013em;
  color:var(--body); background:var(--canvas);
  padding:28px clamp(12px,4vw,32px); box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
}
#phub-root *{ box-sizing:border-box; }

/* Атрибут hidden в браузере — это всего лишь правило display:none из
   стандартной таблицы стилей, и любой авторский display его перебивает. На
   этом и попался экран «отзыв отправлен»: у него появился display:flex, и
   зелёная галочка висела в форме ещё до отправки. Правило страхует все
   спрятанные узлы блока разом: и статус, и обе модалки, и кнопку сброса
   города, и текст ошибки формы. */
#phub-root [hidden]{ display:none !important; }

/* ===== Кнопка «назад» ===== */
/* Навигация, а не действие: без заливки и без рамки, в цвете подписей —
   иначе она спорила бы с плашкой бота и полосой скорой помощи, которые на
   этой же странице зовут вперёд. По ширине не растягивается: max-width и
   margin те же, что у шапки, чтобы кнопка встала над заголовком, а не
   уехала к краю окна на широком экране.

   44px по высоте — минимум для пальца. Отрицательный левый отступ съедает
   внутреннее поле, чтобы стрелка встала по одной вертикали с заголовком:
   без него кнопка выглядела сдвинутой вправо относительно всего блока. */
.phub-backrow{ max-width:1200px; margin:0 auto 4px; }
.phub-back{
  display:inline-flex; align-items:center; gap:5px;
  margin-left:-10px; padding:10px; min-height:44px;
  border:0; background:none; cursor:pointer;
  font:inherit; font-size:15px; color:var(--muted);
  transition:color .15s ease;
}
.phub-back:hover{ color:var(--ink); }
.phub-back:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; border-radius:8px; }

/* Шапка блока: слева заголовок с подзаголовком, по центру строки — вход в
   чат с ботом-помощником, если он для этой витрины задан.

   Сетка 1fr auto 1fr, а не flex с space-between: у флекса плашка прижималась
   к правому краю и вставала тем дальше от середины, чем короче заголовок.
   Здесь третья колонка пустая и ровно того же размера, что первая, поэтому
   средняя всегда приходится на центр строки — независимо от длины заголовка. */
.phub-head{
  max-width:1200px; margin:0 auto 22px;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:start; gap:16px 28px;
}
.phub-head-text{ min-width:0; }
.phub-title{
  font-family:inherit; font-weight:600;
  font-size:clamp(26px,4vw,38px); line-height:1.1; margin:0 0 6px;
  letter-spacing:-0.02em; color:var(--ink);
}
.phub-sub{ margin:0; color:var(--muted); font-size:15px; max-width:52ch; }

/* ===== Вход в чат с ботом ===== */
/* Порядок сверху вниз: сначала плашка, под ней поясняющая фраза. Действие
   должно попасть в глаз первым, фраза объясняет уже нажатое решение. */
.phub-cta{
  grid-column:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  /* Прижимаем к первой строке заголовка: у clamp(26..38px) верхний внутренний
     отступ строки заметен, и без этой поправки плашка вставала выше буквы. */
  padding-top:5px;
}
.phub-cta-badge{
  display:inline-flex; align-items:center; gap:11px;
  padding:5px 20px 5px 5px;
  border-radius:999px;
  background:var(--grass); border:1px solid var(--grass);
  color:var(--ink); text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
}
.phub-cta-badge:hover{ background:var(--grass-dark); border-color:var(--grass-dark); }
.phub-cta-badge:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
/* Кольцо цвета фона отделяет аватар от заливки: без него тёмная фотография
   сливалась с краем плашки. */
.phub-cta-ava{
  flex:0 0 auto; width:44px; height:44px;
  border-radius:50%; overflow:hidden;
  border:2px solid var(--canvas); background:var(--canvas);
}
.phub-cta-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.phub-cta-label{ font-size:17px; font-weight:600; line-height:1.2; }
.phub-cta-arrow{ flex:0 0 auto; margin-left:-3px; }
.phub-cta-lead{
  margin:0; max-width:230px; text-align:center;
  font-size:14px; line-height:1.35; color:var(--muted);
}

/* Ниже этой ширины на три колонки места нет: заголовок сжимался бы до двух
   слов в строку. Плашка уходит под текст и остаётся по центру. */
@media (max-width:860px){
  .phub-head{ grid-template-columns:1fr; }
  .phub-cta{ grid-column:1; justify-self:center; padding-top:0; }
}

/* ===== Полоса «вызвать скорую» ===== */
/* Цвет — Sun Yellow. Зелёный тут был бы ошибкой смысла: он у нас означает
   «спокойный сценарий» (вход к боту, метка города), и человек в панике на него
   не среагирует.
   Текст — Ink Black, и по контрасту это лучший из акцентов системы: по Sun
   чёрным 11.7:1 против 5.36:1 по Ember. Белым по Sun нельзя вовсе — 1.48:1,
   текст просто пропадает.
   Кнопка на всю ширину, а не по содержимому: цель нажатия должна быть больше
   всех прочих на странице, иначе цвет остаётся просто украшением. */
.phub-emergency{
  max-width:1200px; margin:0 auto 20px;
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
.phub-emergency-btn{
  width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  padding:15px 22px; border-radius:var(--radius);
  background:var(--sun); border:1px solid var(--sun);
  color:var(--ink); text-decoration:none;
  font-size:17px; font-weight:700; line-height:1.2; text-align:center;
  transition:background .15s ease, border-color .15s ease;
}
.phub-emergency-btn:hover{ background:var(--sun-dark); border-color:var(--sun-dark); }
.phub-emergency-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.phub-emergency-ico{ flex:0 0 auto; }
.phub-emergency-note{
  margin:0; text-align:center; font-size:14px; line-height:1.35; color:var(--muted);
}

.phub-filters{
  max-width:1200px; margin:0 auto 18px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
/* Родная стрелка селекта рисуется системой и остаётся синей на всех платформах,
   поэтому гасим оформление целиком и подставляем свою — Ember Orange, как и
   остальные активные элементы. */
.phub-city-select{
  width:auto; max-width:260px; padding:10px 38px 10px 14px;
  font-size:14px; font-weight:500; color:var(--ink); cursor:pointer;
  background-color:var(--surface);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ff3e00' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:11px 7px;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
}
/* Поиск по названию и адресу. У витрин аптек, магазинов и услуг он был и до
   переноса, у клиник его не было — здесь он общий и включается настройкой. */
.phub-q{ flex:1 1 220px; max-width:340px; }
.phub-city-reset{
  flex:0 0 auto; padding:9px 16px; font-size:13px;
}
/* «Найдено: N». Сколько записей всего — того, что не видно из подписи
   «Страница 1 из 98» под сеткой. Показывается, только когда на странице
   помещается не всё. */
.phub-count{
  max-width:1200px; margin:0 auto 12px;
  font-size:13px; color:var(--muted);
}

/* Постраничная навигация под сеткой. Кнопки те же .phub-btn, что и в
   карточках, поэтому здесь только раскладка и ширина: иначе «Назад» и
   «Вперёд» получались разной длины и подпись между ними прыгала при
   переходе с однозначного номера страницы на двузначный. */
.phub-pagination{
  max-width:1200px; margin:22px auto 0;
  display:flex; align-items:center; justify-content:center;
  gap:16px; flex-wrap:wrap;
}
.phub-page-info{ font-size:14px; color:var(--muted); white-space:nowrap; }
.phub-page-btn{ min-width:112px; flex:0 0 auto; }
.phub-page-btn:disabled{ opacity:.4; cursor:default; }

/* align-items:stretch — это и так значение по умолчанию у грида, но здесь оно
   несущее: на нём держится одинаковая высота карточек в ряду, а на ней —
   выравнивание кнопок. Оставлено явно, чтобы его не сняли случайно. */
.phub-grid{
  max-width:1200px; margin:0 auto;
  display:grid; gap:18px; align-items:stretch;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}

.phub-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px;
  display:flex; flex-direction:column; gap:12px;
  transition:border-color .18s ease;
}
.phub-card:hover{ border-color:var(--line-dark); }
/* Переход по ссылке вида #org-12 — карточку надо показать, а не украсить:
   рамка Ember на пару секунд, без свечения. */
.phub-card--focus{ border-color:var(--ember); }

.phub-card-head{ display:flex; align-items:flex-start; gap:10px; justify-content:space-between; }
.phub-name{
  font-family:inherit; font-weight:600;
  font-size:19px; line-height:1.25; margin:0; color:var(--ink);
}
.phub-city{
  flex:0 0 auto; font-size:12px; font-weight:600; letter-spacing:.01em;
  color:var(--ink); background:var(--grass);
  padding:4px 10px; border-radius:999px; white-space:nowrap;
}

/* Метка круглосуточности — рамкой, а не заливкой: заливок на карточке уже
   две (город и главная кнопка), а третья превратила бы её в светофор.
   Та же форма, что на странице /vet-emergency, чтобы владелец узнавал метку,
   переходя с каталога на страницу скорой и обратно. */
.phub-247{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-size:12px; font-weight:600; color:var(--ink);
  border:1px solid var(--ember); border-radius:999px; padding:3px 11px;
}
.phub-247-dot{
  width:7px; height:7px; border-radius:50%; background:var(--ember); flex:0 0 auto;
}

.phub-desc{
  margin:0; font-size:14px; line-height:1.5; color:var(--body);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

.phub-meta{ display:flex; flex-direction:column; gap:6px; }
.phub-addr{ font-size:13px; color:var(--muted); line-height:1.4; }
.phub-contacts{ display:flex; flex-wrap:wrap; gap:6px 14px; }
.phub-contact{ font-size:13px; color:var(--muted); }
.phub-link{ color:var(--ember); text-decoration:none; font-weight:600; }
.phub-link:hover{ text-decoration:underline; }

.phub-tags{ display:flex; flex-wrap:wrap; gap:6px; }
/* Услуги — справка, а не действие: рамка и приглушённый текст, без заливки,
   иначе теги начинают спорить с кнопками за внимание. */
.phub-tag{
  font-size:12px; color:var(--body);
  background:var(--canvas); border:1px solid var(--line);
  padding:3px 10px; border-radius:999px;
}

.phub-ratings{
  margin-top:2px; padding-top:12px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:7px;
}
.phub-rate{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.phub-rate-label{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--muted); font-weight:500;
}
.phub-rate--brand .phub-rate-label{ color:var(--ink); font-weight:600; }
.phub-rate--yandex{ min-height:34px; }
.phub-ya-badge{ display:block; border:0; max-width:150px; }
.phub-paw{ fill:var(--ember); }
.phub-rate-empty{ font-size:13px; color:var(--muted); }
.phub-rate-val{ display:inline-flex; align-items:center; gap:4px; font-size:14px; color:var(--ink); }
.phub-rate-val b{ font-weight:700; }
.phub-rate-cnt{ color:var(--muted); font-size:12px; font-weight:400; }
/* Звёзды — единственные данные на карточке, ради которых сюда и заходят,
   поэтому им отдан акцентный цвет; погашенные держим на цвете рамки. */
.phub-star{ color:var(--line); font-size:14px; line-height:1; }
.phub-star.on{ color:var(--ember); }

/* margin-top:auto прижимает кнопки к низу карточки и съедает весь остаток
   свободной высоты. Карточки в ряду растянуты гридом до одинаковой высоты,
   поэтому кнопки встают на одну линию по всему ряду — сколько бы ни было
   текста в описании и тегов услуг в конкретной карточке. Без этого блок
   кнопок шёл сразу за содержимым и получалась лесенка. */
.phub-actions{ display:flex; gap:8px; margin-top:auto; padding-top:4px; }
.phub-btn{
  flex:1; font:inherit; font-size:13px; font-weight:600;
  padding:10px 12px; border-radius:var(--radius); cursor:pointer;
  border:1px solid var(--line); background:var(--canvas); color:var(--ink);
  transition:background .15s ease, border-color .15s ease;
}
.phub-btn:hover{ border-color:var(--line-dark); }
/* Главная кнопка карточки — Sun Yellow. Прежний тёмный залив бил по глазам:
   на сетке из десятков карточек он читался как предупреждение, а не как
   приглашение оставить отзыв. */
.phub-btn--primary{ background:var(--sun); border-color:var(--sun); color:var(--ink); }
.phub-btn--primary:hover{ background:var(--sun-dark); border-color:var(--sun-dark); }
.phub-btn:disabled{ opacity:.45; cursor:default; }

.phub-status{ max-width:1200px; margin:0 auto; }
.phub-empty,.phub-error,.phub-loading{
  display:flex; flex-direction:column; gap:4px;
  padding:28px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--muted); font-size:14px;
  text-align:center; align-items:center;
}
.phub-empty b,.phub-error b{ color:var(--ink); font-size:15px; }
.phub-error{ border-color:var(--ember); }

.phub-btn:focus-visible,.phub-link:focus-visible,
.phub-input:focus-visible,
.phub-city-select:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }

/* ===== Модалки ===== */
.phub-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px; }
.phub-modal[hidden]{ display:none; }
.phub-modal-backdrop{ position:absolute; inset:0; background:rgba(18,18,18,.55); }
.phub-modal-box{
  position:relative; width:100%; max-width:440px; max-height:90vh; overflow:auto;
  background:var(--canvas); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px 24px; color:var(--body);
}
.phub-modal-x{
  position:absolute; top:12px; right:14px; border:0; background:transparent;
  font-size:26px; line-height:1; color:var(--muted); cursor:pointer; padding:4px;
}
.phub-modal-x:hover{ color:var(--ink); }
.phub-modal-title{ font-family:inherit; font-weight:600; font-size:22px; margin:0 0 2px; color:var(--ink); letter-spacing:-0.02em; }
.phub-modal-org{ margin:0 0 18px; font-size:14px; color:var(--muted); }
.phub-modal-org b{ color:var(--ink); }

.phub-field{ display:block; margin-bottom:15px; }
.phub-label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.phub-input{
  width:100%; font:inherit; font-size:14px; color:var(--body);
  padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); letter-spacing:inherit;
}
/* Заливка полей — Stone Surface, то есть поле само по себе выглядит слегка
   притенённым. Если при этом на фокусе только чуть темнеет рамка, клик по
   полю не даёт никакого заметного отклика, и поле легко принять за
   заблокированное. Поэтому фокус помечаем обводкой акцентного цвета — так же,
   как кнопки и ссылки. Это не декоративная тень, а индикатор состояния. */
.phub-input:focus{
  outline:2px solid var(--ember);
  outline-offset:1px;
  border-color:var(--ember);
  background:var(--canvas);
}
.phub-textarea{ min-height:96px; resize:vertical; line-height:1.45; }
.phub-file{ width:100%; font:inherit; font-size:13px; color:var(--body); }
.phub-hint{ display:block; margin-top:7px; font-size:12px; line-height:1.45; color:var(--muted); }
.phub-hint b{ color:var(--ink); }

.phub-stars-input{ display:inline-flex; gap:4px; }
.phub-star-btn{
  border:0; background:transparent; cursor:pointer; padding:2px;
  font-size:30px; line-height:1; color:var(--line); transition:color .1s ease, transform .1s ease;
}
.phub-star-btn:hover{ transform:scale(1.08); }
.phub-star-btn.on{ color:var(--ember); }
.phub-star-btn:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; border-radius:4px; }

.phub-consent{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--body); line-height:1.4; margin-bottom:16px; cursor:pointer; }
/* accent-color сохраняет родной чекбокс со всем его управлением с клавиатуры,
   но перекрашивает системный синий в фирменный зелёный. */
.phub-consent input{ margin-top:2px; flex:0 0 auto; width:17px; height:17px; accent-color:var(--grass); }

.phub-form-err{
  font-size:13px; color:var(--ink); background:var(--surface);
  border:1px solid var(--ember);
  padding:10px 13px; border-radius:var(--radius); margin-bottom:14px;
}

.phub-form-done{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:22px 16px; text-align:center; font-size:14px; color:var(--muted);
}
.phub-form-done b{ color:var(--ink); font-size:16px; font-weight:600; }
.phub-done-ico{
  width:44px; height:44px; border-radius:50%;
  background:var(--grass); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; line-height:1; margin-bottom:4px;
}

.phub-reviews-list{ display:flex; flex-direction:column; gap:14px; }
.phub-rev{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 16px;
  display:flex; flex-direction:column; gap:6px;
}
.phub-rev-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.phub-rev-author{ font-size:14px; font-weight:600; color:var(--ink); }
.phub-rev-stars{ flex:0 0 auto; }
.phub-rev-text{ margin:0; font-size:14px; line-height:1.5; color:var(--body); }
.phub-rev-date{ font-size:12px; color:var(--muted); }
.phub-rev-empty{
  padding:22px; text-align:center; font-size:14px; color:var(--muted);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
}