/**
 * P0/P1 safe UI overrides (2026-07-27)
 * Low-risk only. No redesign / type-scale / dual-jQuery.
 */

/* Wave A — app store badges: SVG intrinsic 145×45; reserve space (CLS) */
img#android,
img#ios {
  width: 145px;
  height: 45px;
  max-width: 100%;
  aspect-ratio: 145 / 45;
  display: inline-block;
  vertical-align: middle;
}

/*
 * Doctor PROFILE photo only (.centered-image).
 * Do NOT target listing .vimg img — mobile theme is 102×145 float card.
 */
.centered-image img[itemprop="image"] {
  aspect-ratio: 187 / 248;
  height: auto;
}

/* Related doctors strip — style 42x42 */
img.vrach-sm-avatar {
  width: 42px;
  height: 42px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Icon-only «edit / report» control next to H1 */
.edit-node a img[src*="edit.png"] {
  width: 43px;
  height: 43px;
  aspect-ratio: 1 / 1;
}

/* Wave B — listing badge: white on cyan (not dark text / not soft-green pill). */
.v-fio h2 span.in-h2 {
  background-color: #2CC4DC;
  color: #fff;
  font-weight: 700;
  border-radius: 0;
  padding: 5px;
}

/* Wave C — space between FIO </a> and badge (was visually glued). */
.v-fio h2 a + span.in-h2 {
  margin-left: 0.45em;
  display: inline;
  vertical-align: baseline;
}

/*
 * Logo row: DO NOT set display:flex/inline-flex on .logos a —
 * theme relies on floated img inside .logos + floated .logos-desc
 * sitting on one line. flex ignored the float and stacked icon above text.
 */
.logos {
  float: left;
  width: auto !important;
  height: auto;
}

.logos a {
  display: inline-block;
  line-height: 0;
}

/* Wave C — tap targets (header only; listing .in-h2 must stay inline) */
.add a,
.sign-in a {
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}

/* Wave C — mobile inputs ≥16px (iOS zoom) + taller hit area */
@media (max-width: 1023px) {
  input.form-text,
  input.form-autocomplete,
  select.form-select,
  .smart-fio-search-filter {
    font-size: 16px;
    min-height: 44px;
  }
}

/* Wave D — logo slogan readable (was 9px / 7px; not sitewide type-scale).
 * !important: custom-theme.css is also loaded later via $styles. */
.logos-desc .slogan {
  font-size: 12px !important;
  line-height: 1.25 !important;
  height: auto !important;
  width: auto !important;
  max-width: 160px;
}

@media (max-width: 1023px) {
  .logos-desc .slogan {
    font-size: 11px !important;
    line-height: 1.25 !important;
    height: auto !important;
    width: auto !important;
    max-width: 140px;
  }
}

/* Clinic dual H1: do NOT CSS-hide h1[itemprop=name] — after p0-clinic-h1.js
 * the hero keeps itemprop=name; display:none would kill the visible title.
 * Trailing duplicate is removed in JS only. */

/*
 * Wave E — map skeleton (IO lazy-load). Height comes from yamaps inline style
 * (usually 400px) → no CLS. No CTA button on the default path.
 */
.yamaps-map-container.p0-yamap-lazy {
  position: relative;
  background:
    linear-gradient(180deg, #e8eef5 0%, #dfe7f0 55%, #d5dee8 100%);
  overflow: hidden;
}

.yamaps-map-container.p0-yamap-lazy::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 18px;
  height: 18px;
  margin: -18px 0 0 -9px;
  border-radius: 50% 50% 50% 0;
  background: #c45c5c;
  transform: rotate(-45deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.85;
}

.yamaps-map-container.p0-yamap-loading {
  cursor: wait;
}

.yamaps-map-container.p0-yamap-tap {
  cursor: pointer;
}

.yamaps-map-container.p0-yamap-tap::before {
  content: "Нажмите, чтобы загрузить карту";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 1;
  text-align: center;
  font-size: 13px;
  color: #334155;
  pointer-events: none;
}

/* Maps blocked / failed — collapse 400px hole (adblock, network) */
.yamaps-map-container.p0-yamap-failed {
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 12px;
  background: #f1f5f9;
}

.yamaps-map-container.p0-yamap-failed::after {
  display: none;
}

.yamaps-map-container.p0-yamap-failed::before {
  content: "Карта недоступна (заблокирована или не загрузилась)";
  display: block;
  font-size: 13px;
  color: #475569;
  text-align: center;
}