.showroom-views { display: flex; gap: .5rem; }
.view-btn { min-height: 44px; padding: .4rem 1rem; border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--card); cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--ink);
  transition: border-color .2s, color .2s, background .2s; }
.view-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent-ink); }
.view-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
/* flex-wrap: на 320px три кнопки с nowrap давали 311px при доступных 289 и растягивали всю страницу; теперь лишняя кнопка переходит на вторую строку. */
@media (max-width: 600px) { .showroom-views { flex-wrap: wrap; } .view-btn { padding: .4rem .7rem; font-size: .82rem; white-space: nowrap; } }

.showroom-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem;
  background: var(--card); padding: .75rem 1rem; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow); }

.apt-card-panel { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 1rem; }
/* Планировка занимает всю ширину карточки, кнопка «Печать плана» - под ней на всю ширину. Раньше оба лежали в одной flex-строке:
   кнопка вставала справа от картинки и обрезалась краем панели. */
.apt-card-panel .floor-plan { display: block; width: 100%; margin: .5rem 0; }
.apt-card-panel .floor-plan img { display: block; width: 100%; height: 180px; object-fit: contain;
  background: var(--bg); border-radius: var(--r); }
.apt-card-panel .plan-print-btn { width: 100%; min-height: 44px; margin-top: .5rem; background: var(--card);
  border: 1px solid var(--line); color: var(--ink); }
.apt-card-panel .plan-print-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.apt-card-panel .plan-print-btn svg { flex-shrink: 0; }
.apt-card-panel .apt-price { font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.apt-card-panel .apt-price-m2 { font-size: .8rem; color: var(--muted); }

/* Легенда шахматки - единственное определение .legend/.legend-dot в проекте
   (раньше дублировалось здесь и в style.css с разным размером точки). */

/* Calc modal price: цвет задаёт style.css */

.visual-wrap { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 1rem; min-height: 400px; }
.visual-wrap > div[style*="text-align:center"] { padding-top: 3rem; }
.visual-img { max-width: 100%; max-height: 600px; border-radius: var(--r-cell); display: block; }

.visual-stage { position: relative; display: inline-block; max-width: 100%; }
.visual-overlay { position: absolute; inset: 0; }

/* Затемняет весь снимок кроме формы наведённой зоны (clip-path выставляется
   из JS, см. Showroom._setSpotlight) - сама наведённая зона остаётся в
   естественных цветах фото, всё вокруг гаснет. pointer-events:none - лежит
   между картинкой и .visual-overlay, наведение продолжает ловить сам хотспот
   поверх, не эту прослойку. */
.visual-spotlight { position: absolute; inset: 0; background: rgba(30,27,58,.72);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, clip-path .18s ease; }
.visual-spotlight.active { opacity: 1; }

/* "Визуальный вид" во всю страницу: картинка растягивается на всю доступную высоту
   контента вместо фиксированных 600px. .visual-stage должен облегать РЕАЛЬНЫЕ
   отрисованные размеры картинки (не размеры .visual-frame) - иначе проценты координат
   хотспотов (left/top в %) разъедутся с реальным изображением из-за леттербоксинга. */
#content.sr-visual-full { display: flex; flex-direction: column; }
#content.sr-visual-full > #sr-body { flex: 1; display: flex; min-height: 0; }
.sr-visual-full .visual-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sr-visual-full .visual-frame { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.sr-visual-full .visual-stage { height: 100%; max-width: 100%; }
.sr-visual-full .visual-img { max-height: 100%; width: auto; }
.visual-hotspot { position: absolute; border: 2px solid rgba(30,27,58,.65);
  background: rgba(30,27,58,.12); border-radius: 4px; cursor: pointer;
  transition: background .15s, opacity .15s, filter .15s, box-shadow .15s; }
.visual-hotspot:hover { background: rgba(30,27,58,.28); }
.visual-hotspot-draft { border-color: var(--accent); background: rgba(108,92,231,.15); cursor: default; }

/* Наведение на одну зону подсвечивает её и приглушает остальные - легче
   разглядеть границы нужного дома/квартиры на плотной сетке зон. Не трогаем
   .visual-hotspot-draft (черновик при рисовании новой зоны - у него нет
   :hover-конкурентов, глушить нечего) и сам наведённый элемент (:hover всегда
   выигрывает у :not(:hover) по специфичности здесь не нужен - это два разных
   правила на два разных состояния). */
.visual-overlay:has(.visual-hotspot:hover) .visual-hotspot:not(:hover) {
  opacity: .35; filter: grayscale(.4);
}
.visual-overlay .visual-hotspot:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 0 16px 4px rgba(255,255,255,.55);
  z-index: 4;
}

/* Зоны квартир на плане этажа красятся по contract_status - те же цвета, что в легенде. */
.visual-hotspot-free { border-color: rgba(21,132,93,.95); background: rgba(21,132,93,.3); }
.visual-hotspot-free:hover { background: rgba(21,132,93,.45); }
.visual-hotspot-booked { border-color: rgba(245,165,36,.95); background: rgba(245,165,36,.3); }
.visual-hotspot-booked:hover { background: rgba(245,165,36,.45); }
.visual-hotspot-sold { border-color: rgba(217,60,58,.95); background: rgba(217,60,58,.3); }
.visual-hotspot-sold:hover { background: rgba(217,60,58,.45); }

/* Кнопка закрытия панели квартиры: краснеет при наведении (раньше это делали onmouseover/onmouseout в разметке). */
.apt-panel-close { background: var(--empty); color: var(--text); }
.apt-panel-close:hover { background: var(--danger); color: #fff; }
.visual-hotspot-no_sale { border-color: rgba(110,107,138,.95); background: rgba(110,107,138,.3); }
.visual-hotspot-no_sale:hover { background: rgba(110,107,138,.45); }
.visual-hotspot-del { position: absolute; width: 20px; height: 20px;
  border: none; border-radius: 50%; background: var(--danger-tx); color: #fff; font-size: .7rem;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 6;
  transform: translate(-50%, calc(-100% - 14px)); }
.visual-hotspot-edit { position: absolute; width: 20px; height: 20px;
  border: none; border-radius: 50%; background: var(--accent); color: #fff; font-size: .7rem;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 6;
  transform: translate(-50%, calc(-100% - 14px)); }
.visual-hotspot-editable { cursor: move; }
.visual-hotspot-handle { position: absolute; width: 9px; height: 9px; background: #fff;
  border: 2px solid rgba(30,27,58,.9); border-radius: 2px; z-index: 5; cursor: move;
  transform: translate(-50%, -50%); }
/* Ручки на серединах сторон (в дополнение к 4 угловым) - таскают сразу оба
   соседних угла, сторона едет параллельно себе. Круглая форма отличает их от
   угловых визуально, не нарушая общую раскладку "8 ручек по периметру". */
.visual-hotspot-handle-edge { border-radius: 50%; }

.visual-draft-form { position: absolute; top: 100%; left: 0; margin-top: .3rem; z-index: 20;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-cell); padding: .6rem;
  box-shadow: var(--shadow-hover); width: 160px; }
.visual-draft-form .form-control { font-size: .8rem; padding: .35rem .5rem; }
.visual-draft-form .btn { width: 100%; }

.visual-popup { position: absolute; z-index: 30; background: var(--card); border-radius: var(--r);
  box-shadow: 0 12px 32px rgba(30,27,58,.2); padding: .85rem 1rem; width: 220px;
  border: 1px solid var(--line); }
.visual-popup-title { font-weight: 700; font-size: .95rem; margin-bottom: .5rem; }
.visual-popup-divider { height: 1px; background: var(--line); margin-bottom: .5rem; }
.visual-popup-row { display: flex; align-items: center; justify-content: space-between;
  font-size: .82rem; color: var(--muted); padding: .2rem 0; }
.visual-popup-row b { color: var(--ink); }

/* Открывается по наведению; вся карточка ведёт дальше (в карточку квартиры /
   дома / этажа) - взамен отдельной кнопки "Подробнее →". */
.visual-popup-clickable { cursor: pointer; transition: box-shadow .15s, transform .1s; }
.visual-popup-clickable:hover { box-shadow: 0 14px 36px rgba(30,27,58,.26); }
.visual-popup-clickable:active { transform: scale(.98); }

/* Печать предложения по квартире (#apt-print-modal). Раньше это был <style id="apt-print-style"> внутри самого окна: CSP не пускает
   встроенные <style>. «Спрятать всё остальное при печати» уже есть в style.css (@media print), здесь только то, что относится к окну;
   эти селекторы существуют лишь пока окно открыто, на печать других форм они не влияют. */
@media print {
  #apt-print-modal { position: fixed !important; inset: 0 !important; background: #fff !important; display: block !important; overflow: visible !important; }
  .apt-print-toolbar { display: none !important; }
  .apt-print-box { box-shadow: none !important; max-height: none !important; border-radius: 0 !important; width: 100% !important; max-width: none !important; }
  .apt-print-content { page-break-inside: avoid; }
}