/* Файл собран tools/build-css.py из design/venue.css — правьте там. */
/* ——— Страница площадки /p/[slug] по макету VENUE-PAGE-02 (7 сентября 2026).
   Изолированные классы vp-*; цвета — токены сайта. Шапка и подвал — из layout. ——— */
/* VP–02. Scoped public-venue surface. Does not reset the host application. */
.vp {
  --wine: var(--accent);
  --paper: var(--surface-2);
  --tint: var(--accent-soft);
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.vp *,
.vp-modal * {
  box-sizing: border-box;
}
.vp button,
.vp input,
.vp select,
.vp-modal button {
  font: inherit;
}
.vp button,
.vp a,
.vp input,
.vp select {
  touch-action: manipulation;
}
.vp button {
  cursor: pointer;
}
.vp button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
.vp a {
  color: inherit;
  text-decoration: none;
}
.vp a:hover {
  color: var(--wine);
}
.vp button {
  color: inherit;
}
.vp button:focus-visible,
.vp a:focus-visible,
.vp input:focus-visible,
.vp select:focus-visible {
  outline: 3px solid #a1677b;
  outline-offset: 3px;
}
.vp svg {
  flex-shrink: 0;
}
.vp h1,
.vp h2,
.vp p {
  margin: 0;
}
.vp h2 {
  font-size: 36px;
  line-height: 1.13;
  letter-spacing: -1.2px;
  font-weight: 500;
}
.vp h2 i {
  font-family: Georgia, serif;
  font-weight: 400;
  color: var(--wine);
}
.vp-main {
  max-width: 1336px;
  margin: auto;
  padding: 0 28px;
}
.vp-breadcrumb {
  display: flex;
  align-items: baseline;
  gap: 13px;
  color: var(--muted);
  font-size: 12px;
  padding: 26px 0 22px;
}
/* Ссылки района внутри крошек — та же строка: общий отступ `.geo-links a`
   (padding-block для пальца) здесь ронял «Москву» ниже соседей. */
.vp-breadcrumb .geo-links a { padding-block: 0; display: inline; }
/* Крошки, ссылка на адрес и раскрывающиеся заголовки — обычные цели для
   пальца, а не строчки текста. Внешний вид строки не меняется: высоту
   добирают выравнивание и отступ. */
@media (max-width: 700px) {
  .vp-breadcrumb { padding: 6px 0 10px; }
  .vp-breadcrumb > a, .vp-breadcrumb > span { display: inline-flex; align-items: center; min-height: 44px; }
  .vp-breadcrumb .geo-links { gap: 4px; }
  .vp-breadcrumb .geo-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .vp-address { display: inline-flex; align-items: center; min-height: 44px; }
  .vp-calc-detail summary, .vp-options summary, .vp-detail summary { min-height: 44px; align-items: center; padding-block: 6px; }
  .vp-cta-row a, .vp-suggest a { display: inline-flex; align-items: center; min-height: 44px; }
}
.vp-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 20px;
}
/* Название площадки приходит от владельца и бывает длинным. У гибкого элемента
   минимальная ширина по умолчанию равна ширине содержимого, поэтому заголовок
   не давал строке сжаться и выталкивал кнопки за край экрана. */
.vp-title-row > *, .vp-halls > * { min-width: 0; }
.vp-kicker,
.vp-section-number {
  font-size: 12px;
  letter-spacing: 0.13em;
  font-weight: 500;
  color: var(--wine);
}
.vp-title-row h1 {
  display: flex;
  align-items: baseline;
  gap: 26px;
  font-size: 58px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -2.5px;
  margin: 8px 0 14px;
  /* Название площадки пишет сам подрядчик. Одно длинное слово без пробелов
     выезжало за правый край и тянуло за собой всю страницу: шапку, панель
     брони, значки. На узком экране перенос уже стоял (медиазапрос ниже) —
     на широком его не было. */
  overflow-wrap: anywhere;
}
.vp-title-row h1 > span {
  font:
    italic 23px/1.2 Georgia,
    serif;
  color: var(--wine);
  letter-spacing: -0.5px;
}
.vp-address {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--muted) !important;
}
.vp-address-full {
  margin-left: 7px;
}
.vp-title-actions {
  display: flex;
  gap: 9px;
  align-self: flex-end;
  /* Кнопки не сжимаются: `min-width: 0` выше разрешает гибкому элементу стать
     уже своего содержимого, и при длинном названии площадки круглые значки
     вылезали за правый край строки. Уступать место должен заголовок. */
  flex: none;
}
.vp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  flex-shrink: 0;
}
.vp-icon:hover {
  background: var(--paper);
}
.vp-icon.is-saved {
  color: var(--wine);
  background: var(--tint);
}
.vp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 356px;
  gap: 48px;
  align-items: start;
}
.vp-content {
  min-width: 0;
}
.vp-halls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  gap: 18px;
}
.vp-halls button {
  text-align: left;
  padding: 0 0 15px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  min-width: 0;
}
.vp-halls button > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 17px;
  font-weight: 500;
}
.vp-halls small {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}
.vp-halls em {
  display: block;
  font-size: 12px;
  font-style: normal;
  color: var(--muted);
  margin-top: 5px;
}
.vp-halls button.is-active {
  border-bottom-color: var(--wine);
  color: var(--wine);
}
.vp-halls button.is-active em {
  color: var(--wine);
}
.vp-gallery {
  display: grid;
  gap: 8px;
}
.vp-gallery button {
  border: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: #dedbd6;
  display: block;
  text-align: left;
}
.vp-gallery img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.vp-gallery button:hover img {
  transform: scale(1.025);
}
.vp-gallery-main {
  height: 388px;
  border-radius: 9px 9px 0 0;
}
.vp-gallery-main:after {
  content: "";
  position: absolute;
  inset: 65% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  pointer-events: none;
}
.vp-gallery-main img {
  object-position: center 58%;
}
.vp-image-label {
  position: absolute;
  z-index: 1;
  bottom: 20px;
  left: 23px;
  right: 23px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: white;
  font-size: 16px;
  /* Название зала — тоже из анкеты; на снимке оно уезжало за край кадра. */
  overflow-wrap: anywhere;
  min-width: 0;
}
.vp-image-label > span {
  font-size: 12px;
  letter-spacing: 0.08em;
  min-width: 0;
}
.vp-image-label > span:last-child { flex: none; }
.vp-gallery-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.vp-gallery-bottom button {
  height: 158px;
}
.vp-gallery-bottom button:first-child {
  border-radius: 0 0 0 9px;
}
.vp-gallery-bottom button:last-child {
  border-radius: 0 0 9px 0;
}
.vp-all-photos {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 5px;
  background: var(--surface);
  padding: 10px 14px;
  font-size: 13px;
  box-shadow: 0 2px 12px #0001;
}
.vp-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.vp-facts > div {
  border-right: 1px solid var(--line);
  padding-right: 12px;
}
.vp-facts > div:last-of-type {
  border: 0;
}
.vp-facts.has-5 {
  grid-template-columns: repeat(5, 1fr);
}
.vp-facts strong {
  display: block;
  font-size: 29px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -1px;
}
.vp-facts strong small {
  font-size: 17px;
  letter-spacing: 0;
}
.vp-facts span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 7px;
}
/* Зоны площадки (веранда, крыша…) — каждая со своей площадью, без суммы. */
.vp-zones {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vp-zones li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.3;
}
.vp-zones b {
  font-weight: 500;
}
.vp-zones span {
  color: var(--ink, inherit);
}
.vp-zones small {
  color: var(--muted);
  font-size: 12px;
}
.vp-section-nav {
  display: flex;
  gap: 26px;
  position: sticky;
  top: 0;
  /* Полупрозрачная подложка липкой полосы — из токена, а не числом: при
     тёмной теме системы белый оставался белым, а текст поверх него —
     светлым, и названия разделов пропадали. */
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  /* Без размытия сквозь полосу при прокрутке проступал «призрак» текста. */
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  backdrop-filter: saturate(1.2) blur(12px);
  z-index: 4;
  border-bottom: 1px solid var(--line);
  padding: 21px 0;
  font-size: 14px;
  overflow: auto;
  white-space: nowrap;
}
.vp-section-nav a:hover {
  color: var(--wine);
}
.vp-section {
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 80px;
}
.vp-section-number {
  margin-bottom: 20px;
}
.vp-section h2 {
  margin-bottom: 22px;
}
.vp-section > p {
  color: var(--muted);
  max-width: 650px;
  line-height: 1.7;
  margin-top: 14px;
}
.vp-included {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0;
}
.vp-included span {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.vp-included svg {
  color: var(--wine);
  width: 18px;
}
.vp-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 12px !important;
}
.vp-section-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.vp-tag {
  padding: 7px 10px;
  background: var(--tint);
  color: var(--wine);
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}
.vp-extra-list {
  margin-top: 25px;
}
.vp-extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 0;
  border-top: 1px solid var(--line);
}
.vp-extra strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
}
.vp-extra > div > span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}
.vp-extra.is-selected strong {
  color: var(--wine);
}
.vp-extra-description { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }
.vp-checkbox {
  display: flex;
  position: relative;
  cursor: pointer;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vp-checkbox input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.vp-checkbox > span {
  width: 24px;
  height: 24px;
  border: 1px solid #c4bfbd;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}
.vp-checkbox input:checked + span {
  background: var(--wine);
  border-color: var(--wine);
  color: var(--accent-ink, #fff);
}
.vp-checkbox input:focus-visible + span {
  outline: 3px solid #a1677b;
  outline-offset: 3px;
}
.vp-counter {
  border: 1px solid var(--line);
  border-radius: 5px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.vp-counter button {
  width: 38px;
  height: 40px;
  background: none;
  border: 0;
  font-size: 20px;
}
.vp-counter output {
  font-size: 14px;
  min-width: 24px;
  text-align: center;
}
.vp-more {
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  width: 100%;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px !important;
  color: var(--wine) !important;
}
.vp-more > span {
  font-size: 22px;
}
.vp-food-panel {
  padding: 25px;
  background: var(--paper);
  border-left: 2px solid var(--wine);
  margin-bottom: 24px;
}
.vp-food-panel strong {
  font-size: 16px;
  font-weight: 500;
  display: block;
}
.vp-food-panel p {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
}
.vp-food-condition + .vp-food-condition {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.vp-detail {
  padding: 19px 0;
  border-top: 1px solid var(--line);
}
.vp-detail summary {
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.vp-detail summary span {
  font-size: 22px;
  font-weight: 300;
}
.vp-detail p {
  font-size: 14px;
  color: var(--muted);
  margin-top: 14px;
  line-height: 1.7;
}
.vp-detail[open] summary span {
  transform: rotate(45deg);
}
.vp-review-empty {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin: 30px 0;
}
.vp-review-symbol {
  font:
    80px/0.9 Georgia,
    serif;
  color: #cbb7bd;
}
.vp-review-empty strong {
  font-size: 16px;
  font-weight: 500;
}
.vp-review-empty p {
  font-size: 14px;
  color: var(--muted);
  max-width: 490px;
  margin-top: 10px;
  line-height: 1.7;
}
.vp-location-line {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 24px 0;
}
.vp-location-line svg {
  color: var(--wine);
}
.vp-location-line strong {
  font-weight: 500;
}
.vp-location-line p {
  font-size: 14px;
  color: var(--muted);
  margin-top: 5px;
}
.vp-outline {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  background: var(--surface);
  border: 1px solid #cbb7bd;
  border-radius: 5px;
  padding: 13px 18px;
  color: var(--wine) !important;
  font-size: 14px !important;
}
.vp-photo-empty {
  min-height: 554px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 45px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.vp-photo-empty > span {
  font:
    italic 80px Georgia,
    serif;
  color: #cec2bf;
}
.vp-photo-empty h2 {
  margin: 22px 0;
}
.vp-photo-empty p {
  max-width: 430px;
}
.vp-muted {
  color: var(--muted);
  font-size: 14px;
  margin-top: 20px !important;
}
.vp-text-button {
  border: 0;
  background: none;
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--wine) !important;
  font-size: 14px !important;
}
.vp-empty-note {
  padding: 25px 0;
  color: var(--muted);
  font-size: 14px;
}
.vp-booking-wrap {
  position: sticky;
  top: 24px;
}
.vp-booking {
  padding: 25px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px;
  scroll-margin-top: 20px;
}
.vp-booking-eyebrow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--wine);
}
.vp-booking-eyebrow span:last-child {
  letter-spacing: 0;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
  /* Название зала — из анкеты. Без переноса оно раздвигало панель и всю
     страницу. Переносим только его: слева стоит наша надпись «Ваше
     событие», и ломать её посреди слова незачем. */
  overflow-wrap: anywhere;
}
.vp-price-intro {
  margin-top: 14px;
  font-size: 15px;
  color: var(--muted);
}
.vp-price-intro strong {
  color: var(--ink);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.8px;
}
.vp-booking-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px !important;
  margin-bottom: 22px !important;
}
.vp-date-input {
  background: var(--surface);
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}
.vp-date-input span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vp-date-input small {
  font-size: 12px;
  color: var(--muted);
}
.vp-date-input strong {
  font-size: 16px;
  font-weight: 500;
}
.vp-date-input svg {
  color: var(--wine);
}
.vp-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 10px;
  margin-top: 14px;
}
.vp-fields label {
  font-size: 12px;
  color: var(--muted);
  min-width: 0;
}
.vp-fields input,
.vp-fields select {
  display: block;
  min-width: 0;
  width: 100%;
  height: 46px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: 5px;
  padding: 8px 10px;
  margin-top: 5px;
  font-size: 16px;
  color: var(--ink);
}
.vp-fields input[type="time"] {
  padding-right: 5px;
}
.vp-availability {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin: 18px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.vp-availability.free {
  color: #326247;
}
.vp-availability.busy {
  color: #913e42;
}
.vp-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.vp-alert {
  padding: 10px;
  background: #f5e7e7;
  color: #913e42;
  font-size: 13px;
  margin-bottom: 15px !important;
}
.vp-section > .vp-alert {
  color: #913e42;
}
/* Ошибка отправки — внутри окна заявки, над полями, а не под затемнением */
.vp-lead-error {
  margin: 18px 0 0 !important;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  border-left: 3px solid #913e42;
}
/* Владелец смотрит свою страницу: вместо кнопки заявки — объяснение */
.vp-own {
  padding: 14px 16px;
  margin: 4px 0 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--wine);
}
.vp-own p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.vp-own a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  min-height: 32px;
  font-size: 13px;
  font-weight: 500;
  color: var(--wine);
}
.vp-calc-detail summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 14px;
}
.vp-cost-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 13px;
  line-height: 1.4;
  margin: 14px 0;
}
.vp-cost-row > div {
  max-width: 70%;
}
.vp-cost-row small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
.vp-cost-row > span {
  text-align: right;
  white-space: nowrap;
}
.vp-warning {
  font-size: 12px !important;
  padding-left: 10px;
  border-left: 2px solid #cbb7bd;
}
.vp-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 18px;
}
.vp-total > span {
  font-size: 13px;
  max-width: 45%;
  line-height: 1.4;
}
.vp-total > strong {
  font-size: 28px;
  letter-spacing: -1px;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}
.vp-deposit {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 11px;
  color: var(--muted);
  margin: 10px 0 20px;
}
.vp-deposit > span:last-child {
  white-space: nowrap;
}
.vp-primary {
  border: 1px solid var(--accent-fill);
  background: var(--accent-fill);
  border-radius: 5px;
  color: var(--accent-ink, #fff) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  width: 100%;
  font-size: 14px !important;
  line-height: 1.35;
  min-height: 50px;
  transition: background 0.2s;
}
.vp-primary:hover:not(:disabled) {
  background: #51202e;
}
.vp-no-payment {
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  color: var(--muted);
  margin-top: 12px !important;
}
.vp-options {
  font-size: 12px;
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.vp-options summary {
  cursor: pointer;
}
.vp-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.vp-options input {
  accent-color: var(--wine);
}
.vp-booking-foot {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  margin-top: 25px;
}
.vp-booking-foot i {
  font-family: Georgia, serif;
  font-size: 17px;
  color: var(--wine);
}
.vp-mobile-bar {
  display: none;
}
.vp-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  z-index: 30;
  background: var(--ink);
  color: var(--bg);
  border-radius: 8px;
  padding: 16px 18px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 5px 30px #0002;
}
.vp-toast button {
  border: 0;
  background: none;
  color: white;
  padding: 5px;
  display: flex;
}
.vp-modal {
  --wine: #682c3b; --accent-ink: #fff;
  --line: #e5e2df;
  --muted: #73706e;
  --paper: #faf9f7;
  --tint: #f5eff1;
  width: 440px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 40px);
  padding: 26px;
  border: 0;
  border-radius: 12px;
  color: #252424;
  font-family: Onest, Arial, sans-serif;
  box-shadow: 0 20px 90px #0003;
  overscroll-behavior: contain;--bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#F5F3F1;--surface-3:#F1EDEB;--ink:#242223;--line-strong:#968C88;--accent:#682C3B;--accent-fill:var(--accent);--accent-fill-hover:var(--accent-hover);--accent-soft:#F3E9EC;--accent-hover:#4B1C29;--ok:#2E6B45;--warn:#A8561A;--danger:#8C2F2F;--ph-a:#CFCAC0;--ph-b:#8A8378;--shadow-float:0 1px 2px rgba(36,34,35,.06), 0 12px 32px rgba(36,34,35,.10);}
.vp-modal::backdrop {
  background: #19121590;
  backdrop-filter: blur(3px);
}
.vp-modal h2 {
  font-size: 23px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.6px;
  margin: 0;
}
.vp-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
.vp-modal-head .vp-icon {
  width: 36px;
  height: 36px;
}
/* На телефоне крестик «Закрыть» держим 44×44, как все прочие цели. */
@media (max-width: 700px) {
  .vp-modal-head .vp-icon { width: 44px; height: 44px; }
}
.vp-modal p {
  font-size: 14px;
  line-height: 1.65;
  margin: 14px 0;
}
.vp-modal button {
  cursor: pointer;
}
.vp-month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 23px 0 17px;
}
.vp-month strong {
  font-size: 17px;
  font-weight: 500;
  text-transform: capitalize;
}
.vp-month .vp-icon {
  width: 36px;
  height: 36px;
}
.vp-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.vp-weekday {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  padding: 5px 0 10px;
}
.vp-calendar-grid button {
  height: 54px;
  padding: 5px 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  position: relative;
}
.vp-calendar-grid button strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
}
.vp-calendar-grid button small {
  display: block;
  font-size: 10px;
  margin-top: 4px;
  color: var(--muted);
}
.vp-calendar-grid button.free {
  background: #f0f6f1;
  border-color: #cbdcd0;
}
.vp-calendar-grid button.busy {
  background: #f5e8e9;
  border-color: #e7c6cb;
}
.vp-calendar-grid button.busy small {
  color: #913e42;
}
.vp-calendar-grid button:disabled {
  opacity: 0.25;
  cursor: default;
}
.vp-calendar-grid button.is-selected {
  outline: 2px solid var(--wine);
  outline-offset: 0;
}
.vp-calendar-grid button.partial { background: var(--accent-soft); border-color: var(--accent); }
.vp-calendar-grid button.partial small { color: var(--accent); }
.vp-calendar-grid button > .day-occupancy { position: absolute; bottom: 2px; left: 3px; right: 3px; height: 3px; }
.vp-day-availability { margin-top: 12px; padding: 12px; background: var(--surface-2); border-left: 2px solid var(--wine); font-size: 12px; line-height: 1.6; }
.vp-day-availability > p { margin: 0 0 10px; overflow-wrap: anywhere; }
.vp-day-availability > p:last-child { margin: 10px 0 0; }
.vp-calendar-legend {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  margin: 19px 0;
  font-size: 11px;
  color: var(--muted);
}
.vp-calendar-legend > span {
  display: flex;
  gap: 5px;
  align-items: center;
}
.vp-calendar-legend i {
  width: 10px;
  height: 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.vp-calendar-legend i.free {
  background: #f0f6f1;
  border-color: #cbdcd0;
}
.vp-calendar-legend i.busy {
  background: #f5e8e9;
  border-color: #e7c6cb;
}
.vp-calendar-legend i.partial { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); }
.vp-modal-wide {
  width: 1000px;
}
.vp-lightbox > img {
  width: 100%;
  max-height: 62dvh;
  object-fit: contain;
  display: block;
  background: #f5f3f0;
  border-radius: 5px;
}
.vp-lightbox-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 14px;
}
.vp-lightbox-controls p {
  font-size: 14px;
  text-align: center;
  color: var(--muted);
}
.vp-lightbox-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 15px;
  overflow: auto;
}
.vp-lightbox-thumbs button {
  border: 2px solid transparent;
  padding: 0;
  width: 88px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  background: none;
  flex-shrink: 0;
}
.vp-lightbox-thumbs button[aria-pressed="true"] {
  border-color: var(--wine);
}
.vp-lightbox-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vp-request-intro {
  font-size: 21px !important;
  color: var(--wine);
  font-family: Georgia, serif;
}
.vp-request-facts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.vp-request-facts span {
  font-size: 13px;
  background: var(--paper);
  padding: 7px 9px;
  border-radius: 4px;
}
.vp-full {
  width: 100%;
  margin-top: 10px;
}
.vp-modal .vp-primary {
  margin-top: 23px;
}
.vp-modal .vp-more {
  font-size: 13px !important;
}
.vp-modal .vp-total strong {
  font-size: 28px;
}
.vp-modal .vp-total > span {
  font-size: 13px;
}
@media (min-width: 1550px) {
  .vp-layout {
    grid-template-columns: minmax(0, 1fr) 376px;
    gap: 58px;
  }
  .vp-gallery-main {
    height: 430px;
  }
  .vp-gallery-bottom button {
    height: 178px;
  }
}

@media (max-width: 1100px) {
  .vp-layout {
    gap: 26px;
    grid-template-columns: minmax(0, 1fr) 326px;
  }
  .vp-booking {
    padding: 20px;
  }
  .vp-title-row h1 > span {
    font-size: 20px;
  }
  .vp-halls {
    gap: 10px;
  }
  .vp-halls button > span {
    flex-direction: column;
    gap: 2px;
  }
  .vp-halls em {
    font-size: 11px;
  }
  .vp-gallery-main {
    height: 340px;
  }
  .vp-gallery-bottom button {
    height: 135px;
  }
  .vp-photo-empty {
    min-height: 483px;
  }
  .vp-section-nav {
    gap: 18px;
    font-size: 13px;
  }
  .vp-facts {
    gap: 12px;
  }
  .vp-facts strong {
    font-size: 25px;
  }
  .vp-title-row h1 {
    gap: 17px;
  }
}

@media (max-width: 900px) {
  .vp-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .vp-booking-wrap {
    position: static;
    grid-row: 2;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
  }
  .vp-content {
    display: contents;
  }
  .vp-halls,
  .vp-gallery,
  .vp-photo-empty,
  .vp-facts,
  .vp-section-nav,
  .vp-section {
    grid-column: 1;
  }
  .vp-halls {
    grid-row: 1;
    margin-bottom: 0;
  }
  .vp-gallery,
  .vp-photo-empty {
    grid-row: 2;
  }
  .vp-booking-wrap {
    grid-row: 4;
    max-width: none;
  }
  .vp-facts {
    grid-row: 3;
  }
  .vp-section-nav {
    grid-row: 5;
  }
  .vp-layout {
    gap: 0;
  }
  .vp-booking {
    margin-top: 24px;
    padding: 25px;
  }
  .vp-booking-foot {
    display: none;
  }
  .vp-gallery {
    margin-top: 18px;
  }
  .vp-gallery-main {
    height: 420px;
  }
  .vp-gallery-bottom button {
    height: 175px;
  }
  .vp-booking-sub {
    margin-bottom: 18px !important;
  }
  .vp-halls button > span {
    flex-direction: row;
  }
  :where(.vp-booking) .vp-fields {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
  }
  .vp-booking .vp-cost-row {
    font-size: 14px;
  }
  .vp-booking .vp-cost-row small {
    font-size: 12px;
  }
  .vp-booking .vp-cost-row > div {
    max-width: 75%;
  }
  .vp-title-row h1 {
    font-size: 54px;
  }
  .vp-title-row h1 > span {
    display: none;
  }
  .vp-address-full {
    display: none;
  }
  .vp-mobile-bar {
    display: flex;
    position: fixed;
    z-index: 12;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 12px 28px max(12px, env(safe-area-inset-bottom));
  }
  .vp-mobile-bar > div {
    min-width: 0;
  }
  .vp-mobile-bar small {
    display: block;
    font-size: 11px;
    color: var(--muted);
  }
  .vp-mobile-bar strong {
    display: block;
    font-size: 23px;
    letter-spacing: -0.6px;
    font-weight: 500;
  }
  .vp-mobile-bar .vp-primary {
    width: auto;
    min-width: 160px;
  }
  .vp-toast {
    bottom: 95px;
  }
  .vp-facts span {
    font-size: 13px;
  }
  .vp-booking {
    scroll-margin-top: 15px;
  }
  .vp-photo-empty {
    margin-top: 20px;
  }
  .vp-title-actions {
    align-self: center;
  }
}

@media (max-width: 560px) {
  .vp-main {
    padding: 0 18px;
  }
  .vp-breadcrumb {
    padding: 20px 0 18px;
    font-size: 11px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .vp-breadcrumb > span:nth-last-child(-n + 2) {
    display: none;
  }
  .vp-title-row {
    margin-bottom: 28px;
    gap: 8px;
  }
  .vp-title-row h1 {
    font-size: 44px;
    letter-spacing: -1.7px;
    margin: 7px 0 12px;
  }
  .vp-kicker {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .vp-title-actions {
    gap: 6px;
    align-self: center;
  }
  .vp-title-actions .vp-icon {
    width: 36px;
    height: 36px;
  }
  .vp-title-actions svg {
    width: 17px;
  }
  .vp-address {
    font-size: 12px;
  }
  .vp-address svg {
    width: 15px;
  }
  .vp-halls {
    gap: 15px;
  }
  .vp-halls button > span {
    font-size: 14px;
    flex-direction: column;
    gap: 3px;
  }
  .vp-halls small {
    font-size: 12px;
  }
  .vp-halls em {
    font-size: 10px;
    line-height: 1.4;
    max-width: 110px;
  }
  .vp-halls button {
    padding-bottom: 13px;
  }
  .vp-gallery-main {
    height: 310px;
  }
  .vp-gallery {
    gap: 5px;
    margin-top: 15px;
  }
  .vp-gallery-bottom {
    gap: 5px;
  }
  .vp-gallery-bottom button {
    height: 110px;
  }
  .vp-image-label {
    font-size: 14px;
    left: 16px;
    right: 16px;
    bottom: 15px;
  }
  .vp-all-photos {
    padding: 8px 9px;
    font-size: 11px;
    right: 9px;
    bottom: 9px;
    gap: 5px;
  }
  .vp-all-photos svg {
    width: 13px;
  }
  .vp-facts {
    grid-template-columns: repeat(4, 1fr);
    padding: 24px 0;
    gap: 8px;
  }
  .vp-facts.has-5 {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 16px;
  }
  .vp-facts.has-5 > div:nth-of-type(3) {
    border: 0;
  }
  .vp-facts > div {
    padding-right: 5px;
  }
  .vp-facts strong {
    font-size: 23px;
  }
  .vp-facts strong small {
    font-size: 14px;
  }
  .vp-facts span {
    font-size: 10px;
    line-height: 1.4;
  }
  .vp-booking {
    padding: 20px;
    margin-top: 24px;
  }
  .vp-fields {
    grid-template-columns: 1fr 1fr;
  }
  .vp-booking-eyebrow {
    font-size: 10px;
  }
  .vp-price-intro strong {
    font-size: 29px;
  }
  .vp-booking-sub {
    font-size: 12px;
  }
  .vp-availability {
    font-size: 12px;
  }
  .vp-total > strong {
    font-size: 28px;
  }
  .vp-total > span {
    font-size: 12px;
  }
  .vp-cost-row > div {
    max-width: 69% !important;
  }
  .vp-cost-row {
    gap: 12px;
  }
  .vp-section-nav {
    gap: 22px;
    font-size: 13px;
    padding: 21px 0;
    margin-top: 12px;
  }
  .vp-section {
    padding: 37px 0;
  }
  .vp-section-number {
    font-size: 10px;
    letter-spacing: 0.12em;
    margin-bottom: 17px;
  }
  .vp h2 {
    font-size: 32px;
    letter-spacing: -1px;
  }
  .vp-section > p {
    font-size: 15px;
    line-height: 1.7;
  }
  .vp-included {
    gap: 15px 10px;
  }
  .vp-included span {
    font-size: 12px;
    gap: 8px;
  }
  .vp-included svg {
    width: 15px;
  }
  .vp-section .vp-note {
    font-size: 12px;
  }
  .vp-extra {
    gap: 14px;
    padding: 17px 0;
  }
  .vp-extra strong {
    font-size: 14px;
  }
  .vp-extra > div > span {
    font-size: 12px;
  }
  .vp-counter button {
    width: 32px;
    min-height: 44px;
  }
  .vp-counter output {
    min-width: 20px;
  }
  .vp-section-top {
    gap: 8px;
  }
  .vp-section-top h2 {
    font-size: 29px;
  }
  .vp-tag {
    font-size: 10px;
    padding: 6px 7px;
  }
  .vp-food-panel {
    padding: 20px;
  }
  .vp-food-panel strong {
    font-size: 15px;
  }
  .vp-food-panel p {
    font-size: 13px;
  }
  .vp-detail summary {
    font-size: 14px;
  }
  .vp-detail p {
    font-size: 13px;
  }
  .vp-review-empty {
    gap: 13px;
  }
  .vp-review-empty strong {
    font-size: 15px;
  }
  .vp-review-empty p {
    font-size: 13px;
  }
  .vp-location-line {
    gap: 14px;
  }
  .vp-location-line strong {
    font-size: 15px;
  }
  .vp-location-line p {
    font-size: 13px;
  }
  .vp-mobile-bar {
    padding: 11px 18px max(11px, env(safe-area-inset-bottom));
    gap: 12px;
  }
  .vp-mobile-bar .vp-primary {
    min-width: 135px;
    font-size: 13px !important;
    padding: 12px 15px;
    min-height: 46px;
  }
  .vp-mobile-bar strong {
    font-size: 22px;
  }
  .vp-mobile-bar small {
    font-size: 10px;
  }
  .vp-photo-empty {
    padding: 28px;
    min-height: 425px;
  }
  .vp-photo-empty > span {
    font-size: 65px;
  }
  .vp-photo-empty p {
    font-size: 14px;
  }
  .vp-modal {
    padding: 20px;
    max-height: calc(100dvh - 24px);
  }
  .vp-modal h2 {
    font-size: 21px;
  }
  .vp-modal .vp-note {
    font-size: 12px;
  }
  .vp-calendar-grid {
    gap: 4px;
  }
  .vp-calendar-grid button {
    height: 49px;
  }
  .vp-calendar-grid button small {
    font-size: 9px;
  }
  .vp-calendar-grid button strong {
    font-size: 14px;
  }
  .vp-modal .vp-total > strong {
    font-size: 26px;
  }
  .vp-lightbox-controls p {
    font-size: 12px;
  }
  .vp-lightbox-controls {
    gap: 8px;
  }
  .vp-lightbox-controls .vp-icon {
    width: 36px;
    height: 36px;
  }
  .vp-toast {
    font-size: 13px;
    padding: 12px 15px;
  }
}

@media (max-width: 360px) {
  .vp-title-row h1 {
    font-size: 39px;
  }
  .vp-title-actions .vp-icon {
    width: 32px;
    height: 32px;
  }
  .vp-title-actions {
    gap: 3px;
  }
  .vp-address {
    font-size: 11px;
  }
  .vp-halls {
    gap: 10px;
  }
  .vp-halls button > span {
    font-size: 13px;
  }
  .vp-gallery-main {
    height: 260px;
  }
  .vp-gallery-bottom button {
    height: 95px;
  }
  .vp-facts strong {
    font-size: 21px;
  }
  .vp-booking {
    padding: 16px;
  }
  .vp-fields input,
  .vp-fields select {
    padding-left: 8px;
  }
  .vp-total > strong {
    font-size: 26px;
  }
  .vp-calendar-grid {
    gap: 3px;
  }
  .vp-modal {
    padding: 16px;
  }
  .vp-modal h2 {
    font-size: 19px;
  }
  .vp-calendar-grid button small {
    font-size: 8px;
  }
  .vp-mobile-bar {
    padding-left: 14px;
    padding-right: 14px;
  }
  .vp-mobile-bar strong {
    font-size: 20px;
  }
  .vp-mobile-bar .vp-primary {
    min-width: 120px;
    padding: 12px;
    font-size: 12px !important;
  }
  .vp-included {
    grid-template-columns: 1fr;
  }
  .vp-section-top h2 {
    font-size: 27px;
  }
  .vp-section-top {
    flex-wrap: wrap;
  }
  .vp-extra strong {
    font-size: 13px;
  }
  .vp-extra > div > span {
    font-size: 11px;
  }
  .vp-all-photos {
    font-size: 10px;
    padding: 7px;
  }
}

.vp-calc-detail[open] summary > span {
  transform: rotate(45deg);
}
.vp-media {
  grid-column: 1;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}
.vp-media h3 {
  font-weight: 500;
  font-size: 18px;
}
.vp-media > a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  color: var(--wine);
  font-size: 14px;
}
.vp-media > a > span {
  font-size: 12px;
}
.vp-media > button {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 15px 0;
  background: var(--surface);
  border: 0;
  border-top: 1px solid var(--line);
  text-align: left;
}
.vp-media > button > img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}
.vp-media > button strong,
.vp-media > button small {
  display: block;
}
.vp-media > button strong {
  font-weight: 500;
  font-size: 16px;
}
.vp-media > button small {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}
.vp-event-album figure {
  margin: 20px 0;
}
.vp-event-album img {
  width: 100%;
  display: block;
}
.vp-event-album figcaption {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}
@media (min-width: 901px) {
  .vp-booking-wrap {
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vp * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Final density pass: keep primary choices and the estimate near the imagery. */
.vp-date-input{margin-top:18px}
.vp-fields label{font-size:14px}
.vp-halls em{font-size:12px}
@media(min-width:901px){
 .vp-breadcrumb{padding:18px 0 15px}
 .vp-title-row{margin-bottom:24px}
 .vp-title-row h1{margin:6px 0 10px}
 .vp-booking{padding:22px}
 .vp-fields input,.vp-fields select{height:42px}
 .vp-availability{margin:12px 0;padding-bottom:12px}
 .vp-booking .vp-total{padding-top:12px;margin-top:12px}
 .vp-booking .vp-deposit{margin-bottom:14px}
}

@media(max-width:560px){.vp-section>p{font-size:16px}.vp-halls em{font-size:12px}.vp-halls button>span{font-size:14px}}

/* ——— Дополнения при внедрении: поле даты, форма заявки, отзывы, карта ——— */
.vp-date-input { padding: 8px 10px 8px 14px; }
.vp-date-input label { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; cursor: pointer; }
.vp-date-input input[type="date"] { border: 0; padding: 0; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); background: transparent; min-width: 0; width: 100%; }
/* Рядом уже есть своя кнопка календаря (цены и занятость): вторая, системная
   иконка рядом с ней выглядела дублем. Поле открывает системный выбор даты по нажатию. */
.vp-date-input input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
/* Было `outline: none` без замены — поле даты не показывало фокус с клавиатуры (WCAG 2.4.7).
   Рамка внутрь, чтобы не перекрывать соседнюю кнопку календаря. */
.vp-date-input input[type="date"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vp-date-input .vp-icon { border-color: transparent; }
.vp-field-wide { grid-column: 1 / -1; }
.vp-fields textarea { display: block; width: 100%; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 5px; padding: 8px 10px; margin-top: 5px; font: inherit; font-size: 16px; color: var(--ink); resize: vertical; }
.vp-lead { margin-top: 18px; display: grid; gap: 14px; }
.vp-lead .vp-primary { width: 100%; }
.vp-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); }
/* Браузерный чекбокс по умолчанию 13×13: рядом в подписи лежит ссылка на
   политику, и промах уводил со страницы с заполненной формой. */
.vp-consent input { margin-top: 3px; width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--accent); }
.vp-consent a { text-decoration: underline; }
.vp-reviews { margin-top: 18px; }
.vp-map { margin: 18px 0; }
.vp-map .map { border-radius: 9px; overflow: hidden; }
.vp .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.vp .seal { margin: 18px 0 0; }
.vp .badge { display: inline-block; }
/* MOBILE-01: компактная галерея, крупные зоны нажатия, все инструменты запроса.
   Раньше блок жил только в собранном app/src/styles/venue.css, который
   страница площадки не подключает, — и не действовал. */
@media (max-width: 700px) {
  body .vp-main { padding-inline: 16px; }
  body .vp-title-row { margin-bottom: 18px; flex-wrap: wrap; }
  body .vp-title-row h1 { font-size: clamp(29px, 8vw, 36px); line-height: 1.1; margin-block: 6px 10px; overflow-wrap: anywhere; }
  body .vp-title-actions .vp-icon { width: 44px; height: 44px; }
  body .vp-gallery-main { height: auto; aspect-ratio: 4 / 3; }
  body .vp-gallery-bottom button { height: 78px; }
  body .vp-all-photos { min-height: 44px; font-size: 12px; }
  body .vp-facts { padding-block: 18px; }
  body .vp-booking { padding: 18px; margin-top: 16px; border-radius: 10px; }
  body .vp-section-nav { padding-block: 10px; gap: 20px; max-width: 100%; min-width: 0; contain: inline-size; overflow-x: auto; }
  body .vp-section-nav a { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; }
  body .vp-section { padding-block: 28px; }
  body .vp h2 { font-size: 28px; }
  body .vp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .vp-counter button { width: 44px; min-height: 44px; }
  body .vp-mobile-bar { gap: 12px; padding-inline: 16px; }
  body .vp-mobile-bar .vp-primary { min-width: 0; min-height: 48px; font-size: 14px !important; padding-inline: 16px; }
  body .vp-mobile-bar strong { font-size: 21px; }
  body .vp-modal { max-height: 90dvh; overscroll-behavior: contain; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

/* Нижняя панель площадки (≤ 900 px) закреплена у края экрана: без запаса
   внизу она закрывала конец подвала — последние ссылки было не нажать.
   Запас даём самому подвалу, чтобы его фон уходил под панель. */
@media (max-width: 900px) {
  body:has(.vp-mobile-bar) footer.site { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* Видео выбранного зала — в разделе «Пространство», под описанием */
.vp-videos {
  display: grid;
  /* auto-fit: единственный ролик занимает всю ширину раздела, а не половину */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 18px;
  margin: 26px 0 6px;
}
.vp-video {
  margin: 0;
}
.vp-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}
.vp-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.vp-video figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}
.vp-video figcaption a {
  color: inherit;
  text-decoration: underline;
}

/* Невысокий экран ноутбука (768–860 px): форма расчёта в липкой колонке не
   помещалась, и вторая кнопка «Добавить в моё мероприятие» пряталась во
   вложенной прокрутке (аудит 30 сентября 2026). Ужимаем отступы, не меняя состав. */
@media (min-width: 901px) and (max-height: 860px) {
  .vp-booking-wrap { top: 16px; max-height: calc(100dvh - 32px); }
  .vp-booking { padding: 18px 20px; }
  .vp-fields { gap: 9px 10px; margin-top: 10px; }
  .vp-fields input,
  .vp-fields select { height: 42px; margin-top: 4px; }
}

/* Карточка расчёта на экране — нижняя панель уезжает вниз (VenuePage, bookingOnScreen). */
@media (max-width: 900px) {
  .vp-mobile-bar { transition: transform .2s ease; }
  .vp-mobile-bar.is-away { transform: translateY(110%); }
}
@media (prefers-reduced-motion: reduce) { .vp-mobile-bar { transition: none; } }


/* System night palette. Light layout and photographic artwork stay unchanged. */
@media (prefers-color-scheme: dark) {
.vp button:focus-visible,
.vp a:focus-visible,
.vp input:focus-visible,
.vp select:focus-visible{outline:3px solid var(--theme-line-strong)}
.vp-gallery button{background:var(--theme-surface-2)}
.vp-checkbox > span{border:1px solid var(--theme-line-strong)}
.vp-checkbox input:checked + span{background:var(--theme-fill)}
.vp-checkbox input:focus-visible + span{outline:3px solid var(--theme-line-strong)}
.vp-review-symbol{color:var(--theme-muted)}
.vp-outline{border:1px solid var(--theme-line-strong)}
.vp-availability.free{color:var(--theme-ok)}
.vp-availability.busy{color:var(--theme-accent)}
.vp-alert{background:var(--theme-surface-2);color:var(--theme-accent)}
.vp-section > .vp-alert{color:var(--theme-accent)}
.vp-warning{border-left:2px solid var(--theme-line-strong)}
.vp-modal{--wine:var(--theme-accent);--line:var(--theme-line);--muted:var(--theme-muted);--paper:var(--theme-surface-2);--tint:var(--theme-tint);color:var(--theme-ink);--bg:var(--theme-surface);--surface:var(--theme-surface);--surface-2:var(--theme-surface-2);--surface-3:var(--theme-surface-3);--ink:var(--theme-ink);--line-strong:var(--theme-line-strong);--accent:var(--theme-accent);--accent-fill:var(--theme-fill);--accent-fill-hover:var(--theme-fill-hover);--accent-soft:var(--theme-tint);--accent-hover:var(--theme-accent-hover);--ok:var(--theme-ok);--warn:var(--theme-warn);--danger:var(--theme-danger)}
.vp-calendar-grid button.free{background:var(--theme-surface-2);border-color:var(--theme-line-strong)}
.vp-calendar-grid button.busy{background:var(--theme-surface-2);border-color:var(--theme-line-strong)}
.vp-calendar-grid button.busy small{color:var(--theme-accent)}
.vp-calendar-legend i.free{background:var(--theme-surface-2);border-color:var(--theme-line-strong)}
.vp-calendar-legend i.busy{background:var(--theme-surface-2);border-color:var(--theme-line-strong)}
.vp-lightbox > img{background:var(--theme-surface-2)}
}