/* ═══════════════════════════════════════════
   WAREHOUSE BLUEPRINT — технічне креслення
   Префікс: wb-
   Вставити в head після sklad.css
   Секція — СВІТЛА; креслення-картка (.wb-wrap) — темна
   ═══════════════════════════════════════════ */
.wb-page,.wb-page *{box-sizing:border-box}
.wb-section{background:#f0f2f5;padding:72px 0 80px}

/* Заголовок секції (на світлому фоні) */
.wb-section .wb-h2{color:#0d1117!important}
.wb-section .wb-sub{color:rgba(13,17,23,.6)!important}
.wb-section .wb-tag{color:#ba7517!important}

.wb-lbl{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.wb-line{flex:1;height:.5px;background:rgba(13,17,23,.1)}
.wb-tag{font-size:9px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;white-space:nowrap}
.wb-h2{font-family:var(--ln-D,'Bebas Neue','Impact',sans-serif);font-size:clamp(26px,3.5vw,44px);letter-spacing:.04em;line-height:.95;margin-bottom:10px;font-weight:400}
.wb-h2 em{font-style:normal;color:#ef9f27}
.wb-sub{font-size:13px;line-height:1.7;max-width:620px;margin-bottom:14px}

/* Демо-плашка (приклад, не конкретний обʼєкт) */
.wb-demo{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#ba7517;background:rgba(239,159,39,.1);border:.5px solid rgba(239,159,39,.35);padding:4px 11px;border-radius:4px;margin-bottom:24px}
.wb-demo::before{content:'';width:6px;height:6px;border-radius:50%;background:#ef9f27;flex-shrink:0}

/* Обгортка креслення — ТЕМНА картка на світлій секції */
.wb-wrap{background:#0a0f1a;border-radius:10px;padding:16px;border:.5px solid rgba(96,165,250,.2);box-shadow:0 20px 50px rgba(13,17,23,.18)}
.wb-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.wb-title{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#60a5fa!important}
.wb-meta{display:flex;gap:14px;flex-wrap:wrap}
.wb-meta-item{font-size:8px;color:rgba(96,165,250,.5)!important;display:flex;align-items:center;gap:4px}
.wb-meta-dot{width:5px;height:5px;border-radius:50%;background:#60a5fa;opacity:.5;flex-shrink:0}

/* Tabs зон */
.wb-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.wb-tab{font-size:8px;font-weight:600;padding:4px 10px;border-radius:3px;cursor:pointer;border:.5px solid transparent;transition:all .2s;text-transform:uppercase;letter-spacing:.5px;user-select:none}
.wb-tab:hover{opacity:.85}
.wb-tab.recv{background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.3);color:#60a5fa!important}
.wb-tab.zona-a{background:rgba(239,159,39,.12);border-color:rgba(239,159,39,.35);color:#ef9f27!important}
.wb-tab.zona-b{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.6)!important}
.wb-tab.zona-cd{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.35)!important}
.wb-tab.pick{background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.25);color:rgba(74,222,128,.8)!important}
.wb-tab.ship{background:rgba(168,85,247,.08);border-color:rgba(168,85,247,.25);color:#a855f7!important}
.wb-tab.on{box-shadow:0 0 0 2px currentColor;opacity:1}

/* SVG план */
.wb-svg{width:100%;display:block;border-radius:6px;border:.5px solid rgba(96,165,250,.15)}

/* Легенда під кресленням */
.wb-legend{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px}
.wb-leg-item{display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:4px;background:rgba(255,255,255,.02);border:.5px solid rgba(255,255,255,.05)}
.wb-leg-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.wb-leg-text{font-size:8px;color:rgba(255,255,255,.45)!important;line-height:1.3}

/* stats під кресленням */
.wb-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;padding-top:12px;border-top:.5px solid rgba(255,255,255,.06)}
.wb-stat{text-align:center}
.wb-stat-n{font-family:var(--ln-D,'Bebas Neue',sans-serif);font-size:22px;color:#ef9f27!important;letter-spacing:.04em;line-height:1}
.wb-stat-l{font-size:8px;color:rgba(255,255,255,.3)!important;margin-top:3px;line-height:1.3}

/* МОБІЛЬНІ — scroll по горизонталі */
@media(max-width:991px){
  .wb-legend{grid-template-columns:repeat(3,1fr)}
  .wb-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:575px){
  .wb-wrap{padding:10px;overflow-x:auto}
  .wb-svg{min-width:500px}
  .wb-legend{grid-template-columns:repeat(2,1fr)}
  .wb-stats{grid-template-columns:repeat(2,1fr)}
}