/* ====================================================================
   POPUP REDESIGN — ЖК Империя
   База сайта: 1rem = 10px (html { font-size: 10px })
   Тёмный фон rgb(29,29,29), акцент #ffda07
   Двухколоночный макет: планировка слева, инфо справа
   ==================================================================== */

/* ── Backdrop ──────────────────────────────────────────────────────── */
.info__bg_1,
.info__bg_2,
.info__bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.78) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  z-index: 5000 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
  box-sizing: border-box !important;
}

.info__bg_1.active,
.info__bg_2.active,
.info__bg.active {
  opacity: 1 !important;
  pointer-events: all !important;
}

/* ── Modal card ─────────────────────────────────────────────────────── */
.info_1,
.info_2,
.info {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: translateY(30px) !important;
  width: 100% !important;
  max-width: 760px !important;
  height: auto !important;
  max-height: 88vh !important;
  display: grid !important;
  grid-template-columns: 42% 58% !important;
  grid-auto-rows: auto !important;
  background: rgb(29, 29, 29) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8) !important;
  transition: transform 0.3s ease !important;
}

.info__bg_1.active .info_1,
.info__bg_2.active .info_2,
.info__bg.active .info {
  transform: translateY(0) !important;
}

/* тонкий скроллбар внутри */
.info_1::-webkit-scrollbar,
.info_2::-webkit-scrollbar,
.info::-webkit-scrollbar { width: 3px; }
.info_1::-webkit-scrollbar-thumb,
.info_2::-webkit-scrollbar-thumb,
.info::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}

/* ── Изображение — левая колонка, вся высота ─────────────────────── */
.info__photo_1,
.info__photo_2,
.info__photo {
  grid-column: 1 !important;
  grid-row: 1 / 20 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 300px !important;
  object-fit: contain !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
  padding: 28px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* ── Правая колонка: заголовки ──────────────────────────────────── */
.info__title_1,
.info__title_2,
.info__title {
  grid-column: 2 !important;
  color: #ffffff !important;
  font-size: 2.2rem !important;    /* = 22px */
  font-weight: 600 !important;
  margin: 32px 32px 6px !important;
  text-align: left !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}

.info__title2_1,
.info__title2_2,
.info__title2 {
  grid-column: 2 !important;
  color: rgb(162, 169, 190) !important;
  font-size: 1.5rem !important;    /* = 15px */
  font-weight: 400 !important;
  margin: 0 32px 24px !important;
  text-align: left !important;
  white-space: normal !important;
}

/* ── Правая колонка: строки площади ─────────────────────────────── */
.info_1 .obshp,
.info_2 .obshp,
.info .obshp,
.info_1 .jilp,
.info_2 .jilp,
.info .jilp {
  grid-column: 2 !important;
  display: block !important;
  margin: 0 32px 12px !important;
  text-align: left !important;
}


.obshp2,
.jilp2 {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}

.obshp2p,
.jilp2p {
  color: rgb(162, 169, 190) !important;
  font-size: 1.5rem !important;    /* = 15px */
  margin: 0 !important;
  white-space: nowrap !important;
  opacity: 1 !important;
}

.info__text_1,
.info__text_2,
.info__text,
.info__text2_1,
.info__text2_2,
.info__text2 {
  color: #ffffff !important;
  font-size: 1.6rem !important;    /* = 16px */
  font-weight: 600 !important;
  margin: 0 !important;
}

/* ── Правая колонка: цена ────────────────────────────────────────── */
.info_1 .cena,
.info_2 .cena,
.info .cena {
  grid-column: 2 !important;
  display: block !important;
  margin: 8px 32px 28px !important;
  text-align: left !important;
}

.cena2 {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.cena2p {
  color: rgb(162, 169, 190) !important;
  font-size: 1.5rem !important;    /* = 15px */
  margin: 0 !important;
  opacity: 1 !important;
}

.info__text3_1,
.info__text3_2,
.info__text3 {
  color: #ffda07 !important;
  font-size: 3.2rem !important;    /* = 32px — крупная цена */
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}

/* ₽ рядом с ценой */
.info_1 .cena p:last-child,
.info_2 .cena p:last-child,
.info .cena p:last-child {
  color: rgb(162, 169, 190) !important;
  font-size: 1.6rem !important;
  margin: 0 !important;
}

/* ── Все <p> внутри попапа ──────────────────────────────────────── */
.info_1 p,
.info_2 p,
.info p {
  color: #ffffff !important;
  font-size: 1.5rem !important;
  text-align: left !important;
  white-space: normal !important;
  margin: 0 !important;
}

/* ── Правая колонка: кнопки ─────────────────────────────────────── */
.info_1 .batone1,
.info_2 .batone1,
.info .batone1 {
  grid-column: 2 !important;
  text-align: center !important;
  margin: 0 32px 14px !important;
  white-space: normal !important;
}

/* разделитель перед первой кнопкой */
.info_1 .batone1:has(#batone1),
.info_2 .batone1:has(#batone1),
.info .batone1:has(#batone1) {
  border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
  padding-top: 24px !important;
}

.info_1 .batone-3d,
.info_2 .batone-3d,
.info .batone-3d {
  grid-column: 2 !important;
  text-align: center !important;
  margin: 0 32px 14px !important;
}

/* отступ снизу у последней кнопки */
.info_1 .batone-3d:last-child,
.info_2 .batone-3d:last-child,
.info .batone-3d:last-child,
.info_1 .batone1:last-child,
.info_2 .batone1:last-child,
.info .batone1:last-child {
  margin-bottom: 32px !important;
}

/* ── Кнопка «Заказать звонок» ───────────────────────────────────── */
#batone1 {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #5a5959 !important;
  color: #e9e9e9 !important;
  border: 2px solid rgba(56, 56, 56, 0.7) !important;
  border-radius: 10px !important;
  padding: 14px 24px !important;
  font-size: 1.6rem !important;    /* = 16px */
  font-weight: 500 !important;
  font-family: inherit !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s !important;
  white-space: nowrap !important;
}

#batone1:hover {
  background: #6a6969 !important;
  color: #ffda07 !important;
}

/* ── Кнопка «3D тур» ────────────────────────────────────────────── */
.btn-3d-tour {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #ffda07 !important;
  color: rgb(29, 29, 29) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 24px !important;
  font-size: 1.6rem !important;    /* = 16px */
  font-weight: 600 !important;
  /* Arial как запасной шрифт для корректного кириллического «д» */
  font-family: 'Satreva Nova Regular', 'Century Gothic', Arial, sans-serif !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  letter-spacing: 0.5px !important;
  transition: background 0.2s, box-shadow 0.2s !important;
}

.btn-3d-tour::before {
  content: "" !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  flex-shrink: 0 !important;
}

.btn-3d-tour:hover {
  background: #ffe830 !important;
  box-shadow: 0 6px 24px rgba(255, 218, 7, 0.45) !important;
  color: rgb(29, 29, 29) !important;
}
.gift-modal { display: none !important; }
/* ── Кнопка «Получить подарок!» ─────────────────────────────────── */
.gift-btn {
   display: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #5a5959 !important;
  color: #e9e9e9 !important;
  border: 2px solid rgba(56, 56, 56, 0.7) !important;
  border-radius: 10px !important;
  padding: 14px 24px !important;
  font-size: 1.6rem !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s !important;
}

.gift-btn:hover {
  background: #6a6969 !important;
  color: #ffda07 !important;
}

/* ── Кнопка закрытия «×» ────────────────────────────────────────── */
.modal-close_1,
.modal-close_2,
.modal-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  bottom: auto !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 50% !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 300 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  z-index: 20 !important;
  text-decoration: none !important;
  font-family: inherit !important;
  transition: background 0.2s, color 0.2s !important;
}

.modal-close_1:hover,
.modal-close_2:hover,
.modal-close:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

/* ── 3D-тур: оверлей с iframe ───────────────────────────────────── */
.tour3d-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 99999;
  background: #000;
  flex-direction: column;
}

.tour3d-overlay.active { display: flex; }

.tour3d-overlay iframe {
  flex: 1;
  width: 100%; height: 100%;
  border: none;
}

.tour3d-close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 100000;
  background: rgb(29, 29, 29);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 46px; height: 46px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.tour3d-close:hover { background: #5a5959; }

/* ── Мобильные ≤ 640px: одна колонка, bottom-sheet ──────────────── */
@media (max-width: 640px) {
  .info__bg_1,
  .info__bg_2,
  .info__bg {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .info_1,
  .info_2,
  .info {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    transform: translateY(80px) !important;
  }

  .info__bg_1.active .info_1,
  .info__bg_2.active .info_2,
  .info__bg.active .info {
    transform: translateY(0) !important;
  }

  .info__photo_1,
  .info__photo_2,
  .info__photo {
    grid-column: 1 !important;
    grid-row: auto !important;
    height: 220px !important;
    min-height: unset !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    padding: 20px !important;
  }

  .info__title_1,
  .info__title_2,
  .info__title {
    grid-column: 1 !important;
    font-size: 2rem !important;
    margin: 22px 22px 6px !important;
  }

  .info__title2_1,
  .info__title2_2,
  .info__title2 {
    grid-column: 1 !important;
    margin: 0 22px 18px !important;
  }

  /* obshp — первая строка после картинки, нужен отступ сверху */
  .info_1 .obshp, .info_2 .obshp, .info .obshp {
    grid-column: 1 !important;
    margin: 20px 22px 12px !important;
  }

  .info_1 .jilp, .info_2 .jilp, .info .jilp {
    grid-column: 1 !important;
    margin: 0 22px 12px !important;
  }

  .info_1 .cena, .info_2 .cena, .info .cena {
    grid-column: 1 !important;
    margin: 8px 22px 24px !important;
  }

  .info_1 .batone1, .info_2 .batone1, .info .batone1 {
    grid-column: 1 !important;
    margin: 0 22px 12px !important;
  }

  .info_1 .batone-3d, .info_2 .batone-3d, .info .batone-3d {
    grid-column: 1 !important;
    margin: 0 22px 12px !important;
  }

  .info_1 .batone-3d:last-child, .info_2 .batone-3d:last-child, .info .batone-3d:last-child,
  .info_1 .batone1:last-child,   .info_2 .batone1:last-child,   .info .batone1:last-child {
    margin-bottom: 28px !important;
  }

  .info__text3_1, .info__text3_2, .info__text3 {
    font-size: 2.8rem !important;
  }
}