:root{
  --slot: 46px;   /* размер квадрата */
  --gap: 6px;     /* промежуток между слотами */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f5f7fa;color:#222;line-height:1.4;overflow-x:hidden}

/* Header */
.catalog-header{max-width:1440px;margin:0 auto;padding:24px 24px 8px}
.catalog-header h1{font-size:26px;font-weight:700;margin-bottom:6px}
.breadcrumbs{font-size:.875rem;color:#777}

/* Switch */
.address-switch{max-width:1440px;margin:0 auto;padding:0 24px 8px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.addr-btn{padding:8px 16px;border:2px solid #009944;border-radius:999px;background:#fff;color:#009944;font-weight:600;cursor:pointer;transition:.2s}
.addr-btn:hover,.addr-btn.is-active{background:#009944;color:#fff}

/* Toolbar */
.toolbar{max-width:1440px;margin:0 auto 10px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:14px}
.legend-item{display:flex;align-items:center;gap:6px}
.legend-circle{width:14px;height:14px;border-radius:50%}
.green{background:#2DBE64}.yellow{background:#F6C644}.gray{background:#C4C4C4}

.zoom{display:flex;align-items:center;gap:12px}
.zoom__label{display:flex;align-items:center;gap:8px;font-size:14px;color:#333}
.zoom__ctrl{display:flex;align-items:center;gap:10px}
#zoomRange{width:180px}

/* Контейнер схемы */
.parking-container{
  max-width:1440px;margin:0 auto 50px;
  padding:24px;                /* достаточно воздуха, чтобы слоты не били в края */
  background:#fff;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.06);
  overflow:auto;               /* и вертикальная, и горизонтальная прокрутка если нужно */
}
.scale-wrap{
  display:flex;justify-content:center;align-items:flex-start;
  min-width:100%;              /* чтобы центрирование работало на любой ширине */
}

/* Сетка парковки */
.parking-grid{
  display:flex;flex-direction:column;align-items:center;
  padding:6px 8px;
  transform-origin:top center; /* масштаб от верхнего центра, не режем левый край */
  transition:transform .25s ease;
}


/* Ряд */
.parking-row{display:grid;gap:var(--gap);justify-content:center}
.parking-row:nth-child(1){margin-bottom:40px}
.parking-row:nth-child(2){margin-bottom:10px}
.parking-row:nth-child(3){margin-bottom:40px}
.parking-row:nth-child(4){margin-bottom:40px}
.parking-row:nth-child(5){margin-bottom:10px}
.parking-row:nth-child(6){margin-bottom:40px}
.parking-row:nth-child(7){margin-bottom:10px}
.parking-row:nth-child(8){margin-bottom:40px}

/* Слот */
.slot{
  width:var(--slot);height:var(--slot);
  border-radius:8px;border:2px solid #1E7E34;background:#E7F6E7;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;color:#1E7E34;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease;
}
.slot:hover{transform:scale(1.09);box-shadow:0 2px 8px rgba(0,0,0,.14)}
.slot.reserved{background:#FFF7E1;border-color:#F6C644;color:#9B7A07}
.slot.sold{background:#EAEAEA;border-color:#BFBFBF;color:#777}

/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:.25s}
.modal.is-open{opacity:1;visibility:visible}
.modal__dialog{background:#fff;border-radius:12px;padding:24px;max-width:420px;width:90%;position:relative}
.modal__close{position:absolute;right:16px;top:10px;font-size:22px;border:none;background:none;cursor:pointer}
.details{list-style:none;margin:16px 0;border-top:1px solid #eee}
.details li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #eee}
.btn{padding:12px 18px;border-radius:8px;font-weight:700;border:none;cursor:pointer}
.btn--primary{background:#009944;color:#fff}
.btn--primary:hover{background:#007d37}

/* Адаптив — чуть компактнее на узких */
@media (max-width:900px){
  :root{ --slot: 40px; --gap: 5px; }
  .parking-container{padding:18px}
}
@media (max-width:600px){
  :root{ --slot: 36px; --gap: 4px; }
  .toolbar{gap:8px}
  #zoomRange{width:140px}
}

/* === Секция "Посмотреть на схеме" === */
.scheme-block{
  margin-top:40px;
  background:#f9fafb;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.05);
  text-align:center;
  padding:40px 20px;
}
.scheme-inner h2{
  font-size:20px;
  font-weight:700;
  margin-bottom:8px;
  color:#1E7E34;
}
.scheme-inner p{
  color:#555;
  margin-bottom:18px;
  font-size:15px;
}
.btn-scheme{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#009944;
  color:#fff;
  font-weight:600;
  padding:12px 20px;
  border-radius:8px;
  text-decoration:none;
  transition:all .25s ease;
  box-shadow:0 4px 12px rgba(0,153,68,.25);
}
.btn-scheme:hover{
  background:#00853a;
  box-shadow:0 6px 14px rgba(0,153,68,.35);
  transform:translateY(-1px);
}
.btn-scheme svg{
  stroke:#fff;
}