/* Новый вид каталогов «Сервисов» (aero2/services/catalog_view.py; макет «Страховые: Литва» 27.10) в видах А/Б/В.
   Токены --sk-* из css/skins/a|b|c.css. Телефон (≤ 760) и монитор — свои правила под своим @media; общая основа — page-services.css. */

html[data-skin] .svc-cat .svc-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[data-skin] .svc-cat .svc-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-skin] .svc-cat__sum { margin: -16px 0 20px; color: var(--sk-muted); font-size: 14px; }

/* ---------- город + «Рядом со мной» ---------- */
html[data-skin] .svc-cat__tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
html[data-skin] .svc-cat__find { display: flex; align-items: center; gap: 10px; flex: 1 1 360px; min-width: 0; height: 52px; padding: 0 16px;
  border: 1px solid var(--sk-line); border-radius: 12px; background: #fff; color: var(--sk-muted); }
html[data-skin] .svc-cat__find:focus-within { border-color: var(--sk-ink); }
html[data-skin] .svc-cat__q { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--sk-ink); font: inherit; font-size: 16px; }
html[data-skin] .svc-cat__near { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 20px;
  border: 1px solid var(--sk-ink); border-radius: 12px; background: var(--sk-ink); color: #fff; font: 600 16px/1 var(--sk-font); cursor: pointer; }
html[data-skin] .svc-cat__near:hover { filter: brightness(1.15); }
html[data-skin] .svc-cat__near:disabled { opacity: .6; cursor: progress; }
html[data-skin] .svc-cat__note { min-height: 1.5em; margin: 8px 0 0; color: var(--sk-muted); font-size: 14px; }
html[data-skin] .svc-cat__note:empty { min-height: 0; margin: 0; }

/* ---------- кнопки компаний ---------- */
html[data-skin] .svc-brands { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
html[data-skin] .svc-brands > li { min-width: 0; }
html[data-skin] .svc-brand { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 44px; padding: 12px 16px; text-align: left;
  border: 1px solid var(--sk-line); border-radius: 14px; background: #fff; color: var(--sk-ink); font: inherit; cursor: pointer; }
html[data-skin] .svc-brand:hover { background: var(--sk-soft); }
html[data-skin] .svc-brand.is-on { border: 2px solid var(--sk-ink); padding: 11px 15px; background: var(--sk-soft); }
html[data-skin] .svc-brand__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html[data-skin] .svc-brand__name { font: 700 16px/1.2 var(--sk-font); overflow-wrap: anywhere; }
html[data-skin] .svc-brand__n { color: var(--sk-muted); font-size: 13px; }

/* логотип или кружок с буквами бренда */
html[data-skin] .svc-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; overflow: hidden;
  border-radius: 10px; background: #4a5563; color: #fff; font: 800 14px/1 var(--sk-font); letter-spacing: -.02em; }
html[data-skin] .svc-logo--img { background: #fff; border: 1px solid var(--sk-line); }
html[data-skin] .svc-logo--img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
html[data-skin] .svc-logo--all { background: var(--sk-ink); font-size: 20px; }
html[data-skin] .svc-logo--c0 { background: #00609c; } html[data-skin] .svc-logo--c1 { background: #b0001a; }
html[data-skin] .svc-logo--c2 { background: #0a6e37; } html[data-skin] .svc-logo--c3 { background: #5a3d99; }
html[data-skin] .svc-logo--c4 { background: #1a5fb4; } html[data-skin] .svc-logo--c5 { background: #9a4f00; }
html[data-skin] .svc-logo--c6 { background: #4a5563; } html[data-skin] .svc-logo--c7 { background: #7a2e6a; }
html[data-skin] .svc-logo--c8 { background: #00676b; } html[data-skin] .svc-logo--c9 { background: #3d5a00; }

/* ---------- карта + список ---------- */
html[data-skin] .svc-cat__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 28px; }
html[data-skin] .svc-cat__mapcol { position: sticky; top: 16px; min-width: 0; }
html[data-skin] .svc-cat__map { position: relative; height: 620px; overflow: hidden; border: 1px solid var(--sk-line); border-radius: 16px; background: #eef2ee; }
html[data-skin] .svc-cat__map-soon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 24px;
  text-align: center; color: var(--sk-muted); font-size: 15px; }
html[data-skin] .svc-cat__map.is-live .svc-cat__map-soon { display: none; }
html[data-skin] .svc-cat__mapcanvas { position: absolute; inset: 0; }
html[data-skin] .svc-cat__listcol { min-width: 0; }
html[data-skin] .svc-cat__listhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
html[data-skin] .svc-cat__listhead .svc-h2 { margin: 0 0 12px; }
html[data-skin] .svc-cat__count { color: var(--sk-muted); font-size: 14px; }
html[data-skin] .svc-offices { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
html[data-skin] .svc-office { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--sk-line); border-radius: 14px; background: #fff; }
html[data-skin] .svc-office[hidden] { display: none; }
html[data-skin] .svc-office.is-hit { outline: 2px solid var(--sk-accent); outline-offset: 2px; }
html[data-skin] .svc-office__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
html[data-skin] .svc-office__head .svc-logo { width: 36px; height: 36px; border-radius: 8px; font-size: 12px; }
html[data-skin] .svc-office__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
html[data-skin] .svc-main a.svc-office__name { font: 700 16px/1.3 var(--sk-font); color: var(--sk-ink); text-decoration: none; overflow-wrap: anywhere; }
html[data-skin] .svc-main a.svc-office__name:hover { text-decoration: underline; }
html[data-skin] .svc-office__addr { color: var(--sk-muted); font-size: 14px; overflow-wrap: anywhere; }
html[data-skin] .svc-office__dist { flex: none; color: var(--sk-muted); font-size: 13px; white-space: nowrap; }
html[data-skin] .svc-office__time { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0; color: var(--sk-muted); font-size: 14px; }
html[data-skin] .svc-office__time:not(:has(*:not(:empty))) { display: none; }
html[data-skin] .svc-office__state { font-weight: 600; }
html[data-skin] .svc-office__state:empty { display: none; }
html[data-skin] .svc-office__state.is-open { color: var(--sk-ok, #1a8f5c); }
html[data-skin] .svc-office__state.is-closed { color: #b3261e; }
html[data-skin] .svc-office__state:not(:empty) + .svc-office__hours::before { content: "· "; }
html[data-skin] .svc-office__acts { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-skin] .svc-main .svc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--sk-line); border-radius: 10px; background: #fff; color: var(--sk-ink); font: 600 15px/1.2 var(--sk-font); text-decoration: none; cursor: pointer; }
html[data-skin] .svc-main .svc-btn:hover { background: var(--sk-soft); }
html[data-skin] .svc-main .svc-btn--call { border-color: var(--sk-accent); background: var(--sk-accent); color: #fff; }
html[data-skin] .svc-main .svc-btn--call:hover { background: var(--sk-accent); filter: brightness(.93); }
html[data-skin] .svc-main .svc-btn--more { border-color: transparent; background: transparent; padding: 0 10px; color: #1a5fb4; font-weight: 500; }
html[data-skin] .svc-main .svc-btn--more[aria-expanded="true"] { text-decoration: underline; }
html[data-skin] .svc-btn__narrow { display: none; }
html[data-skin] .svc-cat__empty { margin: 16px 0; color: var(--sk-muted); }
html[data-skin] .svc-cat__morebtn { display: block; margin: 16px auto 0; padding: 12px 20px; border: 0; background: transparent; color: var(--sk-ink);
  font: 600 15px/1 var(--sk-font); text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--sk-accent); cursor: pointer; }
html[data-skin] .svc-cat__morebtn[hidden] { display: none; }
html[data-skin] .svc-cat__shown { margin: 12px 0 0; color: var(--sk-muted); font-size: 14px; }

/* ---------- страны и города ---------- */
html[data-skin] .svc-cat__countries { margin-top: 28px; }
html[data-skin] .svc-cat__cities { margin-top: 32px; padding-top: 8px; border-top: 1px solid var(--sk-line); }
html[data-skin] .svc-chips--list { list-style: none; padding: 0; }
html[data-skin] .svc-chips--list .svc-chip { min-height: 40px; font-weight: 600; background: var(--sk-soft); border-color: transparent; }
html[data-skin] .svc-chips--list .svc-chip.is-on { border-color: var(--sk-ink); }
html[data-skin] .svc-chip__n { margin-left: 6px; color: var(--sk-muted); font-weight: 400; }
html[data-skin] .svc-cat__allcities > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; cursor: pointer; list-style: none;
  color: #1a5fb4; font-size: 15px; }
html[data-skin] .svc-cat__allcities > summary::-webkit-details-marker { display: none; }
html[data-skin] .svc-cat__allcities[open] > summary { margin-bottom: 8px; }

/* ---------- детали Google (по клику / в карточке) ---------- */
html[data-skin] .svc-office__gp[hidden] { display: none; }
html[data-skin] .svc-office__gp, html[data-skin] .svc-gp--card { border-top: 1px solid var(--sk-line); padding-top: 10px; font-size: 14px; }
html[data-skin] .svc-gp--card { max-width: 720px; margin-top: 16px; }
html[data-skin] .svc-gp--card:empty { display: none; }
html[data-skin] .svc-gp__rating { margin: 0 0 8px; }
html[data-skin] .svc-gp__stars { color: #b06000; letter-spacing: 1px; }
html[data-skin] .svc-gp__muted { color: var(--sk-muted); }
html[data-skin] .svc-gp__photo { margin: 0 0 10px; }
html[data-skin] .svc-gp__photo img { display: block; width: 100%; max-width: 480px; height: auto; border-radius: 10px; }
html[data-skin] .svc-gp__photo figcaption { margin-top: 4px; font-size: 12px; }
html[data-skin] .svc-gp__h { margin: 8px 0 4px; font: 600 14px/1.3 var(--sk-font); }
html[data-skin] .svc-gp__hours { margin: 0 0 8px; padding: 0; list-style: none; }
html[data-skin] .svc-gp__reviews { margin: 8px 0; padding: 0; list-style: none; display: grid; gap: 10px; }
html[data-skin] .svc-gp__rhead { margin: 0; }
html[data-skin] .svc-gp__author { font-weight: 600; }
html[data-skin] .svc-gp__text { margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
html[data-skin] .svc-gp__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 8px 0 0; font-size: 13px; }
html[data-skin] .svc-gp__attr { color: var(--sk-muted); font-family: Roboto, Arial, sans-serif; }
html[data-skin] .svc-cat--card .svc-office__acts { margin-top: 16px; }

/* ---------- вид Б «Витрина»: карточки на тенях; вид В «Табло»: плотнее ---------- */
html[data-skin="b"] .svc-brand, html[data-skin="b"] .svc-office { border-color: transparent; box-shadow: var(--sk-shadow); }
html[data-skin="b"] .svc-brand.is-on { border-color: var(--sk-ink); }
html[data-skin="b"] .svc-cat__map { border-color: transparent; box-shadow: var(--sk-shadow); border-radius: var(--sk-r, 14px); }
html[data-skin="c"] .svc-brand, html[data-skin="c"] .svc-office { border-radius: 6px; }
html[data-skin="c"] .svc-office { padding: 12px 14px; gap: 8px; }
html[data-skin="c"] .svc-brand { padding: 8px 12px; }
html[data-skin="c"] .svc-brand.is-on { padding: 7px 11px; }
html[data-skin="c"] .svc-cat__map { border-radius: 6px; }
html[data-skin="c"] .svc-main .svc-btn { border-radius: 6px; min-height: 40px; font-size: 14px; }

/* ---------- монитор поуже ---------- */
@media (max-width: 1023px) {
  html[data-skin] .svc-cat__body { grid-template-columns: minmax(0, 1fr); }
  html[data-skin] .svc-cat__mapcol { position: static; }
  html[data-skin] .svc-cat__map { height: 360px; }
}

/* ---------- телефон ---------- */
@media (max-width: 760px) {
  html[data-skin] .svc-cat__sum { margin: -16px 0 16px; }
  html[data-skin] .svc-cat__tools { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  html[data-skin] .svc-cat__find { flex: 0 0 auto; height: 48px; }
  html[data-skin] .svc-cat__near { width: 100%; }
  html[data-skin] .svc-brands { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--sk-gut)); padding: 0 var(--sk-gut) 4px; scrollbar-width: none; }
  html[data-skin] .svc-brands::-webkit-scrollbar { display: none; }
  html[data-skin] .svc-brands > li { flex: none; }
  html[data-skin] .svc-brand { width: auto; gap: 8px; min-height: 44px; padding: 6px 14px 6px 6px; border-radius: 999px; }
  html[data-skin] .svc-brand.is-on { padding: 5px 13px 5px 5px; }
  html[data-skin] .svc-brand .svc-logo { width: 32px; height: 32px; border-radius: 999px; font-size: 11px; }
  html[data-skin] .svc-brand__txt { flex-direction: row; align-items: baseline; gap: 6px; }
  html[data-skin] .svc-brand__name { font-size: 15px; white-space: nowrap; }
  html[data-skin] .svc-cat__body { margin-top: 16px; gap: 16px; }
  html[data-skin] .svc-cat__map { height: 220px; border-radius: 14px; }
  html[data-skin] .svc-office { padding: 14px; }
  html[data-skin] .svc-office__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-skin] .svc-main .svc-btn { min-height: 46px; padding: 0 10px; }
  html[data-skin] .svc-main .svc-btn--more { grid-column: 1 / -1; min-height: 40px; }
  html[data-skin] .svc-btn__wide { display: none; }
  html[data-skin] .svc-btn__narrow { display: inline; }
  html[data-skin="c"] .svc-brand { border-radius: 6px; }
}