/* ================================
   Шахматка — финальная версия
   Адаптив + свайп (nat-scroll) без сторонних плагинов
   ================================ */
   @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');

   /* ---------- Reset ---------- */
   *{box-sizing:border-box;margin:0;padding:0}
   body{font-family:'Montserrat',sans-serif;background:#fff;color:#2A2A2A}
   
   /* ---------- Легенда ---------- */
   .legend{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:24px 0 32px;font-size:14px}
   .legend-item{display:flex;align-items:center;gap:6px}
   .legend-circle{width:18px;height:18px;border-radius:4px}
   .green{background:#2B9C3C}.brown{background:#BFC4D6}.gray{background:#EFEFEF}.blue{background:#4B7CD1}.red{background:#9C2141}
   
   /* ---------- Карточка шахматки ---------- */
   .checker-wrapper{position:relative;margin:0 auto;padding:24px 0;background:#fff;border:1px solid #E4E6F0;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.04);max-width:100%;overflow:hidden}
   
   /* ---------- Навигационные стрелки ---------- */
   .nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:#2B9C3C;border:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;cursor:pointer;transition:background .2s;z-index:10}
   .nav-btn:hover{background:#228131}.nav-prev{left:6px}.nav-next{right:6px}
   
   /* ---------- Скролл-контейнер ---------- */
   .buildings-scroll-wrapper {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  display: flex;
  gap: 36px;
  scroll-padding: 32px;
  -webkit-overflow-scrolling: touch;
  padding: 0 32px 12px;
}
   .buildings-scroll-wrapper::-webkit-scrollbar{display:none}
   
   .buildings-row {
  display: flex;
  gap: 36px;
  width: max-content;
}
   .building-box {
  scroll-snap-align: start;
  min-width: 140px;
  transition: transform 0.3s;
}

   .building-title{font-size:15px;font-weight:600;color:#2A2A2A}
   
   /* ---------- Сетка ---------- */
   .floors-container{display:flex;flex-direction:column-reverse;gap:4px}
   .floor{display:flex;align-items:center;gap:4px}
   .floor-number{width:28px;text-align:right;font-size:12px;line-height:1;color:#646A7B;user-select:none}
   .apartments-row{display:flex;gap:4px}
   .apartment {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
  position: relative;
}
.apartment:hover {
  transform: scale(1.1);
  z-index: 5;
}
.apartment[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #2a2a2a;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 12px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  opacity: 0;
  animation: fadeIn .3s forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}

   .apartment.green  { background: #00C18C; }
.apartment.brown  { background: #D7CBAA; color: #333; }
.apartment.gray   { background: #E2E6EA; color: #555; }
.apartment.blue   { background: #4B7CD1; }
.apartment.red    { background: #CC3344; }

#modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

#modal.is-open {
  opacity: 1;
  visibility: visible;
}

.modal__dialog {
  background: #fff;
  width: 100%;
  max-width: 440px;
  border-radius: 14px;
  padding: 36px 28px;
  position: relative;
  animation: dialogEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dialogEnter {
  from {
    transform: translateY(16px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

.lot-status {
  font-size: 0.875rem;
  color: #777;
}

.modal-plan img {
  width: 100%;
  border-radius: 8px;
  margin: 12px 0 18px;
}

.details {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #eee;
  margin-bottom: 24px;
}

.details li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.cta-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn--primary {
  background: #009944;
  color: #fff;
  border: none !important;
  box-shadow: none !important;
}

.btn--primary:hover {
  background: #007937;
}

.btn--outline {
  background: #fff;
  border: 2px solid #009944;
  color: #009944;
}

.btn--outline:hover {
  background: #009944;
  color: #fff;
}

   
   /* ---------- Tooltip ---------- */
   .tooltip-global{position:absolute;top:0;left:0;background:#fff;padding:10px 12px;border:1px solid #D9DCE6;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.08);font-size:13px;z-index:1000}
   .tooltip-image{width:120px;margin-top:8px}
   
   /* ---------- Медиазаписи ---------- */
   @media(max-width:768px){.buildings-scroll-wrapper{padding:0 24px 12px}.buildings-row{gap:24px}.apartment{width:24px;height:24px;font-size:11px}.floor-number{width:24px;font-size:11px}.building-title{font-size:14px}}
   @media(max-width:350px){.building-box{min-width:96px}.apartments-row{gap:3px}.apartment{width:20px;height:20px;font-size:10px}.floor-number{width:22px;font-size:10px}.buildings-row{gap:16px}}