/* =========================================================
   Кладовые · выбор на схеме (поверх стилей parking-plan.css)
   ЖК «Зелёный остров» · 29.07.2026
   ========================================================= */

/* Плоская инженерная схема: только линии и реальные ячейки кладовых. */
.sb-plan-label,
.sb-plan-passage-label {
  font-family: 'JetBrains Mono', monospace;
  fill: var(--pp-gold);
  pointer-events: none;
}
.sb-plan-label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .1em;
  paint-order: stroke;
  stroke: #101214;
  stroke-width: 6px;
}
.sb-plan-callout { stroke: var(--pp-gold); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* блоки боксов под листом */
.sb-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
.sb-block {
  border: 1px solid var(--pp-line);
  background: var(--pp-sheet);
  padding: 16px 16px 18px;
}
.sb-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.sb-block-head b {
  font: 600 12px 'JetBrains Mono', monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pp-ink);
}
.sb-block-head span {
  font: 500 10.5px 'JetBrains Mono', monospace;
  letter-spacing: .06em;
  color: var(--pp-muted);
}
.sb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
}
.sb-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--pp-muted);
  font-family: 'Manrope', sans-serif;
  cursor: default;
  transition: background .15s, border-color .15s, transform .12s;
}
.sb-cell b { font: 600 13.5px 'JetBrains Mono', monospace; color: inherit; }
.sb-cell span { font-size: 11px; }
.sb-cell.free {
  background: rgba(163, 201, 138, 0.10);
  border-color: rgba(163, 201, 138, 0.45);
  color: #c4dfb2;
  cursor: pointer;
}
.sb-cell.free:hover { background: rgba(203, 163, 92, 0.18); border-color: var(--pp-gold-hi); color: #fff; transform: translateY(-1px); }
.sb-cell.sold { opacity: 0.38; }
.sb-cell.picked {
  background: rgba(242, 193, 78, 0.55);
  border-color: #f2c14e;
  color: #141414;
}
.sb-cell.picked b, .sb-cell.picked span { color: #141414; }
.sb-cell .sb-big {
  font: 600 9px 'JetBrains Mono', monospace;
  letter-spacing: .1em;
  color: var(--pp-gold);
  text-transform: uppercase;
}
.sb-cell.picked .sb-big { color: #141414; }
.pp.only-free .sb-cell.sold { opacity: 0.12; }

.sb-side-note {
  font: 400 11.5px 'JetBrains Mono', monospace;
  letter-spacing: .04em;
  line-height: 1.7;
  color: var(--pp-muted);
}
.sb-cadastral {
  display: block;
  margin-top: 7px;
  color: var(--pp-muted);
  font: 500 10px/1.45 'JetBrains Mono', monospace;
  letter-spacing: .025em;
}

@media (max-width: 900px) {
  .sb-blocks { grid-template-columns: 1fr; }
}

/* мини-ячейки боксов на плане (hover-связка с сеткой) */
.pp-under-muted {
  opacity: .28;
}
.pp-under-focus {
  opacity: 1;
}
.sb-mini {
  fill: rgba(255, 255, 255, .035);
  stroke: rgba(255, 255, 255, .78);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  transition: fill .15s, stroke .15s;
}
.sb-mini.free { fill: rgba(163, 201, 138, .16); cursor: pointer; }
.sb-mini.sold { fill: rgba(255, 255, 255, .025); opacity: .42; }
.sb-mini-label {
  fill: rgba(255, 255, 255, .86);
  font: 600 15px 'JetBrains Mono', monospace;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(13, 15, 17, .92);
  stroke-width: 3px;
}
.sb-mini-label-mask {
  fill: rgba(8, 10, 9, .88);
  pointer-events: none;
}
.sb-mini-label.sold { opacity: .34; }
.sb-mini.hl, .sb-mini.free:hover {
  fill: rgba(242, 193, 78, 0.5);
  stroke: #f2c14e;
  stroke-width: 2.4;
}
.sb-mini.sold.hl { fill: rgba(255, 255, 255, 0.12); stroke: rgba(255, 255, 255, 0.4); }
.sb-mini.picked {
  fill: rgba(242, 193, 78, 0.62);
  stroke: #f2c14e;
  stroke-width: 3;
}
.pp.only-free .sb-mini.sold,
.pp.only-free .sb-mini-label.sold { opacity: .08; }
.sb-cell.hl { border-color: var(--pp-gold-hi); background: rgba(203, 163, 92, 0.18); color: #fff; }
.sb-cell.sold.hl { opacity: 0.7; }