/* =====================================================================
   Hilbert — Lightbox для SVG планировок  ·  v2.0
   Векторно-чёткий зум, пан, колесо/щипок. Эстетика Porsche DS.
   ===================================================================== */

:root{
  --hh-lb-bg:      #0e0e12;
  --hh-lb-accent:  #af0b0b;   /* Guards Red */
  --hh-lb-ui:      #ffffff;
  --hh-lb-ink:     #1d1d1d;
  --hh-lb-ease:    cubic-bezier(.22,.61,.36,1);
}

/* блокировка прокрутки фона */
html.hh-lb-lock{ overflow:hidden; }

/* ---------- контейнер ---------- */
.custom-lightbox{
  position:fixed; inset:0;
  display:none;
  z-index:99999;
  background:radial-gradient(120% 120% at 50% 38%,
              rgba(22,22,28,.86), rgba(8,8,11,.97));
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .3s ease;
  padding:
    env(safe-area-inset-top,0)
    env(safe-area-inset-right,0)
    env(safe-area-inset-bottom,0)
    env(safe-area-inset-left,0);
  touch-action:none;          /* жесты обрабатываем сами */
}
.custom-lightbox.active{ display:block; opacity:1; }

/* ---------- сцена (область зума/пана) ---------- */
.custom-lightbox-stage{
  position:absolute; inset:0;
  overflow:hidden;
  cursor:grab;
}
.custom-lightbox.is-zoomed .custom-lightbox-stage:active{ cursor:grabbing; }

/* трансформируемый холст с планировкой */
.custom-lightbox-canvas{
  position:absolute; top:0; left:0;
  transform-origin:0 0;
  opacity:0;
  /* НЕ ставим will-change: transform — иначе SVG кэшируется в текстуру
     и теряет чёткость при увеличении */
}
.custom-lightbox.is-ready .custom-lightbox-canvas{
  opacity:1;
  transition:opacity .35s ease;
}
.custom-lightbox-canvas > svg,
.custom-lightbox-canvas > img{
  display:block;
  max-width:none !important;   /* тема: img,svg,video{max-width:100%} режет размер */
  max-height:none !important;  /* реальный размер задаёт JS в px */
  user-select:none;
  -webkit-user-drag:none;
}

/* ---------- слой интерфейса (вне трансформации) ---------- */
.custom-lightbox-ui{
  position:absolute; inset:0;
  z-index:20;
  pointer-events:none;          /* клики проходят к сцене, кроме кнопок */
}

/* индикатор загрузки */
.custom-lightbox-spinner{
  position:absolute; inset:0; margin:auto;
  width:34px; height:34px; border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
  border-top-color:var(--hh-lb-accent);
  display:none; pointer-events:none; z-index:15;
}
.custom-lightbox.is-loading .custom-lightbox-spinner{
  display:block;
  animation:hh-lb-spin .8s linear infinite;
}
@keyframes hh-lb-spin{ to{ transform:rotate(360deg); } }

/* подсказка */
.custom-lightbox-hint{
  position:absolute; left:50%;
  top:max(20px, calc(env(safe-area-inset-top,0) + 16px));
  transform:translateX(-50%);
  color:rgba(255,255,255,.55);
  font-size:12px; letter-spacing:.04em; white-space:nowrap;
  pointer-events:none;
  transition:opacity .4s ease;
}
.custom-lightbox.is-zoomed .custom-lightbox-hint{ opacity:0; }

/* ---------- кнопка закрытия (верх-право) ---------- */
.custom-lightbox-close-wrapper{
  position:absolute;
  top:max(20px, calc(env(safe-area-inset-top,0) + 16px));
  right:max(20px, calc(env(safe-area-inset-right,0) + 16px));
  pointer-events:auto;
}
.custom-lightbox-close{
  width:44px; height:44px; border:none; border-radius:50%;
  background:var(--hh-lb-ui); cursor:pointer; line-height:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color .2s ease, transform .2s ease;
}
.custom-lightbox-close:hover{ background:var(--hh-lb-accent); }
.custom-lightbox-close:active{ transform:scale(.94); }
.custom-lightbox-close svg{ width:22px !important; height:22px !important; display:block; max-width: none;}
.custom-lightbox-close svg path{
  stroke:var(--hh-lb-ink); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; fill:none;
  vector-effect:non-scaling-stroke;
}
.custom-lightbox-close:hover svg path{ stroke:#fff; }

/* ---------- панель управления (низ-центр) ---------- */
.custom-lightbox-controls{
  position:absolute; left:50%;
  bottom:max(24px, calc(env(safe-area-inset-bottom,0) + 18px));
  transform:translateX(-50%);
  display:flex; align-items:center; gap:4px;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  pointer-events:auto;
}
.custom-lightbox-btn{
  width:40px; height:40px; border:none; border-radius:50%;
  background:transparent; color:#fff; cursor:pointer; line-height:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color .2s ease, transform .12s ease;
}
.custom-lightbox-btn:hover{ background:var(--hh-lb-accent); }
.custom-lightbox-btn:active{ transform:scale(.92); }
.custom-lightbox-btn svg{ width:22px !important; height:22px !important; display:block; flex:0 0 auto; max-width: none; }
.custom-lightbox-btn svg path{
  stroke:#fff; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; fill:none;
  vector-effect:non-scaling-stroke;
}

.custom-lightbox-percent{
  min-width:54px; text-align:center;
  color:#fff; font-size:13px; letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  opacity:.9; user-select:none;
}
.custom-lightbox-divider{
  width:1px; height:22px; margin:0 2px;
  background:rgba(255,255,255,.16);
}

/* текстовая кнопка «Сброс» (вместо непонятной иконки) */
.custom-lightbox-reset{
  width:auto !important;
  height:40px;
  padding:0 16px;
  border-radius:999px;
  line-height:1;
  font-size:13px;
  letter-spacing:.04em;
  color:#fff;
  white-space:nowrap;
}

/* доступность: фокус с клавиатуры */
.custom-lightbox-btn:focus-visible,
.custom-lightbox-close:focus-visible{
  outline:2px solid var(--hh-lb-accent);
  outline-offset:2px;
}

/* уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .custom-lightbox,
  .custom-lightbox-canvas,
  .custom-lightbox-close,
  .custom-lightbox-btn{ transition:none !important; }
  .custom-lightbox-spinner{ animation-duration:1.4s; }
}

/* курсор на триггерах задаётся из JS, но дублируем для надёжности */
img.vc_single_image-img[src$=".svg"]{ cursor:zoom-in; }