/* Карточка заведения: фото со значками, текст под фото без рамки. */
.vc { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; font-family: Inter, system-ui, sans-serif; color: #1b1a17; }

.vc__media { position: relative; aspect-ratio: 16 / 10.5; border-radius: 22px; overflow: hidden; background: #ece7df; }
/* Без своего слоя у фото: иначе растянутая ссылка карточки легла бы поверх сердечка и кнопки */
.vc__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.vc:hover .vc__media img { transform: scale(1.04); }
.vc__media .illustration-label { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 3px 8px; border-radius: 6px; background: #0000004d; color: #fff; font: 600 10px/1.3 Inter, sans-serif; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Значки слева вверху: оценка, средний чек, партнёр */
.vc__badges { position: absolute; top: 12px; left: 12px; right: 58px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vc__rating { display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 7px; border-radius: 9px; background: #f47721; color: #fff; font: 700 14px/1 Inter, sans-serif; }
.vc__price { display: flex; align-items: center; gap: 1px; height: 30px; padding: 0 8px; border-radius: 9px; background: #ffffffe6; font: 700 13px/1 Inter, sans-serif; color: #1b1a17; }
.vc__price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vc__price.is-unknown { color: #8a857d; }
.vc__rating.is-unknown { background: #ffffffe6; color: #8a857d; }
.vc__flag { height: 30px; display: grid; place-items: center; padding: 0 9px; border-radius: 9px; background: #ff782e; color: #fff; font: 700 12px/1 Inter, sans-serif; }

/* Сердечко и «Забронировать» поверх фото */
.vc__fav {
  position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; place-items: center;
  width: 38px; height: 38px; border: 0; border-radius: 50%; background: #00000038; color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .2s, transform .2s;
}
.vc__fav:hover { background: #00000059; transform: scale(1.06); }
.vc__fav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; transition: fill .2s; }
.vc__fav[aria-pressed=true] svg { fill: #ff4d5e; stroke: #ff4d5e; }
.vc__fav[aria-pressed=true] { animation: vc-pop .35s ease; }
@keyframes vc-pop { 50% { transform: scale(1.2); } }

/* «Забронировать»: чёрная кнопка, белая заливка срезает её по диагонали,
   текст инвертируется и прокручивается. Uiverse.io, doniaskima «btn-31» (MIT). */
.vc .vc__book {
  position: absolute; right: 12px; bottom: 12px; z-index: 3; display: inline-block;
  padding: 10px 18px; border-radius: 999px; background: #000; color: #fff !important;
  font: 700 14px/1.5 Inter, sans-serif; text-decoration: none !important;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff); /* скругление обрезает заливку */
  box-shadow: 0 4px 14px -6px #00000080; -webkit-tap-highlight-color: transparent;
}
.vc .vc__book::before {
  --progress: 100%;
  content: ''; position: absolute; inset: 0; background: #fff;
  clip-path: polygon(100% 0, var(--progress) var(--progress), 0 100%, 100% 100%);
  transition: clip-path .2s ease;
}
.vc .vc__book:hover::before, .vc .vc__book:focus-visible::before { --progress: 0%; }
.vc__book-clip { position: relative; display: block; overflow: hidden; }
.vc__book-text { position: relative; display: block; mix-blend-mode: difference; }
.vc .vc__book:hover .vc__book-text, .vc .vc__book:focus-visible .vc__book-text { animation: vc-book-roll .3s ease forwards; }
@keyframes vc-book-roll { 0% { transform: translateY(0); } 50% { transform: translateY(80%); } 51% { transform: translateY(-80%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .vc .vc__book::before { transition: none; } .vc__book-text { animation: none !important; } }

/* Текст под фото */
.vc__title { margin: 8px 0 0; font: 700 19px/1.25 Inter, sans-serif; letter-spacing: -.02em; }
.vc .vc__link { color: inherit !important; text-decoration: none !important; }
/* Ссылка на заведение растянута на всю карточку, кнопки лежат выше неё */
.vc__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 22px; }
/* Сведения под названием: тип • метро • адрес • кухня. Точка после каждого пункта,
   при переносе она остаётся в конце строки. */
.vc__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 14px; line-height: 1.5; color: #3f3c37; }
.vc__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.vc__meta > span:not(:last-child)::after { content: ''; flex: none; width: 4px; height: 4px; margin: 0 10px 0 4px; border-radius: 50%; background: #cfcac2; }
.vc__metro i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.vc:focus-within .vc__link { outline: none; }
.vc__link:focus-visible::after { outline: 2px solid #ff782e; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .vc__media img, .vc__fav { transition: none; animation: none !important; } }

/* Подсказка гостю без входа: «Авторизуйтесь, чтобы добавить в избранное» */
.fav-hint {
  position: absolute; z-index: 1200; width: 250px; padding: 16px 16px 14px; border-radius: 16px;
  background: #fff; color: #1b1a17; font-family: Inter, system-ui, sans-serif;
  box-shadow: 0 18px 44px -12px #00000040, 0 2px 8px #0000000f;
  animation: fav-hint-in .2s cubic-bezier(.16, 1, .3, 1);
}
.fav-hint[hidden] { display: none; }
.fav-hint::before { content: ''; position: absolute; top: -6px; left: var(--arrow, 24px); width: 12px; height: 12px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.fav-hint__title { margin: 0 0 4px; font: 700 16px/1.3 Inter, sans-serif; }
.fav-hint__text { margin: 0 0 12px; font: 400 14px/1.4 Inter, sans-serif; color: #4d4a44; }
.fav-hint__login { height: 38px; padding: 0 16px; border: 0; border-radius: 10px; background: #ff782e; color: #fff; font: 600 14px/1 Inter, sans-serif; cursor: pointer; transition: filter .15s; }
.fav-hint__login:hover { filter: brightness(1.06); }
@keyframes fav-hint-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Кухня отдельной строкой под адресом, не больше трёх */
.vc__cuisine { margin: 0; font-size: 14px; line-height: 1.45; color: #6f6b64; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Знаки уровня цен одинаковой высоты и на одной линии (знак рубля — картинка-маска) */
.vp-level { display: inline-flex; align-items: center; gap: 1px; line-height: 1; }
.vp-level i { display: inline-flex; align-items: center; justify-content: center; height: 1em; line-height: 1; }
.vp-level .byn-sign { display: block; width: .62em; height: .8em; vertical-align: 0; }

/* Кнопка «Выбрать время» прижата к низу карточки: в ряду все кнопки на одной линии,
   сколько бы строк ни занимали адрес и кухня. */
.grid--places > .vc { height: 100%; }
.vc .refresh-card-cta { margin-top: auto !important; }
.vc .vc__cuisine, .vc .vc__meta { flex: none; }
.vc__meta + .refresh-card-cta, .vc__cuisine + .refresh-card-cta { margin-top: auto !important; }