/* ==========================================
   Viewer 360 (Senso) – Frontend Styles
   ========================================== */

/* ── TOKENS (scoped to #v360-app) ── */
#v360-app {
  --v3-bg:       #0a0c0f;
  --v3-surf:     #13161b;
  --v3-surf2:    #1c2029;
  --v3-surf3:    #222736;
  --v3-border:   #22272f;
  --v3-border2:  #2e3545;
  --v3-accent:   #4f7cff;
  --v3-green:    #00c98d;
  --v3-orange:   #ff8c42;
  --v3-red:      #f04040;
  --v3-indigo:   #818cf8;
  --v3-text:     #dde1e9;
  --v3-muted:    #5a6375;
  --v3-muted2:   #8490a8;
  --v3-font:     'Sora', sans-serif;
  --v3-mono:     'JetBrains Mono', monospace;
  --v3-bottom:   64px;
  --v3-r:        9px;
}
#v360-app, #v360-app *, #v360-app *::before, #v360-app *::after { box-sizing: border-box; margin: 0; padding: 0; }
#v360-app {
  display: flex; flex-direction: column;
  background: var(--v3-bg); color: var(--v3-text); font-family: var(--v3-font);
  font-size: 14px; overflow: hidden; -webkit-font-smoothing: antialiased;
  position: relative;
}
#v360-body-row { flex: 1; display: flex; overflow: hidden; position: relative; }
#v360-viewer-wrap { flex: 1; position: relative; background: #000; overflow: hidden; min-width: 0; }
#v360-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
#v360-canvas.dragging { cursor: grabbing; }
#v360-filterBar {
  position: absolute; bottom: 0; left: 0; right: 0; height: var(--v3-bottom);
  background: transparent; border-top: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; z-index: 20;
}
.v360-fbtn {
  display: flex; align-items: center; gap: 7px; padding: 7px 15px !important; border-radius: 20px;
  border: 1px solid transparent;
  background: rgba(10,12,15,.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--v3-muted2);
  font-family: var(--v3-font); font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background .17s, border-color .17s, color .17s;
  white-space: nowrap; user-select: none;
}
.v360-fbtn:hover { background: rgba(30,40,60,.75); color: var(--v3-text); }
.v360-fbtn.active {
  background: rgba(79,124,255,.28);
  border-color: var(--v3-accent);
  color: #fff;
}
.v360-fbtn.active .dot-all { background: var(--v3-text); }
.v360-fbtn.active .dot-free { background: var(--v3-green); }
.v360-fbtn.active .dot-res { background: var(--v3-orange); }
.v360-fbtn.active .dot-sold { background: var(--v3-red); }
.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; transition: background .17s; }
.dot-all { background: var(--v3-muted); } .dot-free { background: var(--v3-green); }
.dot-res { background: var(--v3-orange); } .dot-sold { background: var(--v3-red); }
.v360-fbtn-cnt { font-family: var(--v3-mono); font-size: 10px; opacity: .7; margin-left: 2px; }
.v360-fbtn-cnt:empty { display: none; }
#v360-topNav {
  position: absolute; top: 0; left: 0; right: 0; height: 52px;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 14px;
  pointer-events: none; z-index: 10;
}
#v360-topNav > * { pointer-events: auto; }
#v360-viewBadge { font-family: var(--v3-mono); font-size: 10px; letter-spacing: .08em; color: rgba(255,255,255,.3); white-space: nowrap; }
#v360-playOverlay { position: absolute; bottom: calc(var(--v3-bottom) + 12px); right: 52px; display: flex; gap: 4px; z-index: 10; }
.v360-hbtn {
  padding: 6px 11px !important; background: rgba(10,12,15,.65); border: 1px solid var(--v3-border2); border-radius: 7px;
  color: var(--v3-text); font-family: var(--v3-font); font-size: 12px; cursor: pointer;
  transition: background .15s, border-color .15s; backdrop-filter: blur(6px);
}
.v360-hbtn:hover { background: rgba(30,40,60,.8); border-color: var(--v3-accent); }
#v360-bottomLeft { position: absolute; bottom: calc(var(--v3-bottom) + 10px); left: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 10; pointer-events: none; user-select: none; }
#v360-domuly { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.75); letter-spacing: .04em; pointer-events: auto; }
#v360-domuly a { pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; }
#v360-domunlyLogo { height: 24px; width: auto; opacity: .85; filter: brightness(0) invert(1); transition: opacity .2s; }
#v360-domunlyLogo:hover { opacity: 1; }
#v360-loader {
  position: absolute; bottom: calc(var(--v3-bottom) + 100px); left: 14px; background: rgba(10,12,15,.82);
  border: 1px solid var(--v3-border2); border-radius: 10px; padding: 8px 14px;
  display: flex; align-items: center; gap: 10px; min-width: 160px;
  backdrop-filter: blur(10px); z-index: 30; transition: opacity .35s, transform .35s; pointer-events: none;
}
#v360-loader.hidden { opacity: 0; transform: translateY(6px); }
#v360-previewProgress {
  position: absolute; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--v3-accent); z-index: 35; border-radius: 0 2px 2px 0;
  transition: width 0.35s ease, opacity 0.6s ease;
  opacity: 0; pointer-events: none;
}
#v360-previewProgress.active { opacity: 1; }
#v360-loaderTitle { font-size: 12px; font-weight: 500; color: var(--v3-muted2); white-space: nowrap; }
#v360-loaderPct { font-family: var(--v3-mono); font-size: 11px; color: var(--v3-muted); margin-left: auto; }
#v360-fade { position: absolute; inset: 0; background: var(--v3-bg); opacity: 0; pointer-events: none; z-index: 25; transition: opacity .28s; }
#v360-fade.on { opacity: 1; }
#v360-tooltip {
  position: absolute; background: rgba(10,12,15,.93); border: 1px solid var(--v3-border2); border-radius: 11px;
  padding: 12px 15px; min-width: 190px; max-width: 230px; pointer-events: none; z-index: 20;
  backdrop-filter: blur(12px); box-shadow: 0 14px 44px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; will-change: transform;
}
#v360-tooltip.show { opacity: 1; visibility: visible; }
.tt-name { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 7px; }
.tt-row { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--v3-muted2); line-height: 1.85; }
.tt-val { color: var(--v3-text); font-variant-numeric: tabular-nums; }
.tt-val.apt-status-free { color: var(--v3-green); font-weight: 600; }
.tt-val.apt-status-res { color: var(--v3-orange); font-weight: 600; }
.tt-val.apt-status-sold { color: var(--v3-red); font-weight: 600; }
.tt-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 20px; }
.tt-tag.sale { background: rgba(0,201,141,.14); color: var(--v3-green); }
.tt-tag.soon { background: rgba(255,140,66,.14); color: var(--v3-orange); }
.tt-tag.sold2 { background: rgba(240,64,64,.14); color: var(--v3-red); }
.tt-hint { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--v3-border); font-size: 11px; color: var(--v3-muted); }
.tt-finished { display: flex; align-items: center; gap: 6px; margin-top: 7px; padding: 5px 8px; border-radius: 7px; background: rgba(22,163,74,.15); color: #4ade80; font-size: 11.5px; font-weight: 600; }
#v360-fsBtn {
  position: absolute; bottom: calc(var(--v3-bottom) + 10px); right: 12px; background: rgba(10,12,15,.6);
  border: 1px solid var(--v3-border2); color: var(--v3-text); padding: 7px 10px; border-radius: 8px;
  cursor: pointer; font-size: 14px; z-index: 5; transition: background .18s;
}
#v360-fsBtn:hover { background: rgba(10,12,15,.88); }
#v360-aptPopup {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); z-index: 100; display: flex; align-items: center;
  justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .25s;
}
#v360-aptPopup.open { opacity: 1; pointer-events: auto; }
#v360-aptPopupInner {
  background: var(--v3-surf); border: 1px solid var(--v3-border2); border-radius: 18px;
  width: 100%; max-width: 840px; overflow: hidden; position: relative;
  transform: translateY(12px) scale(.97); transition: transform .28s cubic-bezier(.22,.68,0,1.2);
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
#v360-aptPopup.open #v360-aptPopupInner { transform: translateY(0) scale(1); }
#v360-aptPopupClose {
  position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,.06);
  border: 1px solid var(--v3-border2); border-radius: 8px; color: var(--v3-muted2);
  padding: 8px; cursor: pointer; line-height: 0; transition: background .15s, color .15s; z-index: 2;
}
#v360-aptPopupClose:hover { background: rgba(255,255,255,.12); color: #fff; }
#v360-aptPopupClose svg { width: 20px; height: 20px; display: block; }
#v360-aptPopupHeader { padding: 30px 30px 0; }
#v360-aptPopupTitle { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -.01em; line-height: 1.15; }
#v360-aptPopupSub { font-size: 16px; color: var(--v3-muted2); margin-top: 6px; }
#v360-aptPopupPreview {
  margin: 22px 30px; height: 360px; background: var(--v3-surf2); border: 1px solid var(--v3-border);
  border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#v360-aptPopupPlaceholder { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--v3-text); font-size: 14px; font-weight: 500; opacity: .45; }
.v360-plan-img { display: block; width: 100%; height: 360px; object-fit: contain; transition: transform .25s ease; }
.v360-plan-img-3d { transform: scale(1.2); }
#v360-aptPopupDetails { margin: 0 30px 22px; background: var(--v3-surf2); border: 1px solid var(--v3-border); border-radius: 12px; overflow: hidden; }
.apt-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--v3-border); font-size: 16px; }
.apt-detail-row:last-child { border-bottom: none; }
.apt-popup-finished { display: flex; align-items: center; gap: 8px; padding: 14px 22px; background: rgba(22,163,74,.12); color: #4ade80; font-size: 14px; font-weight: 600; border-top: 1px solid rgba(22,163,74,.2); }
.apt-detail-lbl { color: var(--v3-muted2); } .apt-detail-val { color: var(--v3-text); font-weight: 500; }
.apt-status-free { color: var(--v3-green); } .apt-status-res { color: var(--v3-orange); } .apt-status-sold { color: var(--v3-red); }
#v360-aptPopupCTA {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 30px 30px;
  padding: 16px 26px; background: var(--v3-accent); border: none; border-radius: 12px;
  color: #fff; font-family: var(--v3-font); font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: background .18s, transform .15s;
}
#v360-aptPopupCTA:hover { background: #3d68e8; transform: translateY(-1px); }
@media (max-width: 768px) {
  #v360-aptPopupInner { max-width: 100%; }
  #v360-aptPopupHeader { padding: 22px 22px 0; }
  #v360-aptPopupTitle { font-size: 22px; }
  #v360-aptPopupSub { font-size: 14px; }
  #v360-aptPopupPreview { margin: 16px 22px; height: 240px; }
  .v360-plan-img { height: 240px; }
  #v360-aptPopupDetails { margin: 0 22px 16px; }
  .apt-detail-row { padding: 12px 16px; font-size: 14px; }
  #v360-aptPopupCTA { margin: 0 22px 22px; padding: 13px 20px; font-size: 14px; }
}
#v360-dragHint {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 90px; z-index: 15; pointer-events: none; opacity: 1; transition: opacity .5s ease;
}
#v360-dragHint.hide { opacity: 0; } #v360-dragHint.gone { display: none; }
#v360-dragHintInner {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: rgba(0,0,0,.52); border: 1px solid rgba(255,255,255,.12); border-radius: 20px;
  padding: 24px 36px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
#v360-dragHintIcons { display: flex; align-items: center; gap: 16px; }
.dh-arrow { width: 40px; height: 40px; color: rgba(255,255,255,.9); filter: drop-shadow(0 2px 8px rgba(0,0,0,.7)); }
.dh-left { animation: dhLeft 1.4s ease-in-out infinite; }
.dh-right { animation: dhRight 1.4s ease-in-out infinite; }
@keyframes dhLeft { 0%,100% { transform: translateX(0); opacity: .4; } 50% { transform: translateX(-14px); opacity: 1; } }
@keyframes dhRight { 0%,100% { transform: translateX(0); opacity: .4; } 50% { transform: translateX(14px); opacity: 1; } }
#v360-dragHintHand { width: 46px; height: 68px; color: rgba(255,255,255,.92); filter: drop-shadow(0 3px 12px rgba(0,0,0,.7)); animation: dhHandRock 1.4s ease-in-out infinite; }
@keyframes dhHandRock { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
#v360-dragHintHand .dh-mouse-btn { animation: dhMouseBtn 1.4s ease-in-out infinite; }
@keyframes dhMouseBtn { 0%,55%,100% { opacity: .15; } 15%,40% { opacity: .6; } }
#v360-dragHintText { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.9); text-shadow: 0 1px 6px rgba(0,0,0,.8); letter-spacing: .04em; }
@keyframes v360spin{to{transform:rotate(360deg)}}
/* ── Nav panel (wystaje 50px ponad canvas, content w containerze 1350px) ── */
.v360-outer { position: relative; margin-top: 100px; }
.v360-outer #v360-navPanel {
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  pointer-events: none;
}
.v360-outer #v360-navPanel:empty { display: none; }
.v360-outer .v360-np-container {
  max-width: var(--main-width, 1350px);
  width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  pointer-events: none;
}
.v360-outer .v360-np-frame {
  display: inline-block;
  background: var(--main-primary-color, #02d5e1);
  color: #fff;
  padding: 30px 50px 30px 50px;
  pointer-events: auto;
  max-width: 100%;
  box-sizing: border-box;
  vertical-align: top;
  font-family: 'Poppins', sans-serif;
}
.v360-outer .v360-np-frame * { color: #fff; box-sizing: border-box; }
.v360-outer .v360-np-l1 {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 200;
  margin: 0 0 4px;
}
.v360-outer .v360-np-l2 {
  font-size: 50px;
  line-height: 1;
  font-weight: 600;
  margin: 0 0 50px;
}
.v360-outer .v360-np-l3 {
  font-size: 25px;
  line-height: 1.2;
  font-weight: 200;
  margin: 0 0 14px;
}
.v360-outer .v360-np-list {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin: 0;
}
.v360-outer .v360-np-list > div {
  font-size: 35px;
  line-height: 1.05;
  font-weight: 200;
  cursor: pointer;
  position: relative;
  z-index: 1;
  padding: 2px 0;
  transition: font-weight .12s;
}
.v360-outer .v360-np-list > div:hover,
.v360-outer .v360-np-list > div.active {
  font-weight: 500;
}
.v360-outer .v360-np-list > div.active::before,
.v360-outer .v360-np-list > div:hover::before {
  content: '';
  position: absolute;
  left: -14px; top: -4px; right: -14px; bottom: -4px;
  background: var(--main-secondary-color, #38393b);
  z-index: -1;
}
@media (max-width: 1380px) {
  .v360-outer .v360-np-container { padding: 0 15px; }
}
@media (max-width: 1024px) {
  .v360-outer #v360-navPanel { top: -30px; }
  .v360-outer .v360-np-frame { padding: 24px 32px; }
  .v360-outer .v360-np-l1 { font-size: 24px; }
  .v360-outer .v360-np-l2 { font-size: 36px; margin-bottom: 28px; }
  .v360-outer .v360-np-l3 { font-size: 18px; margin-bottom: 10px; }
  .v360-outer .v360-np-list { gap: 20px; }
  .v360-outer .v360-np-list > div { font-size: 22px; }
}
@media (max-width: 600px) {
  .v360-outer #v360-navPanel { top: -16px; }
  .v360-outer .v360-np-frame { padding: 16px 20px; }
  .v360-outer .v360-np-l1 { font-size: 16px; }
  .v360-outer .v360-np-l2 { font-size: 26px; margin-bottom: 14px; }
  .v360-outer .v360-np-l3 { font-size: 13px; margin-bottom: 8px; }
  .v360-outer .v360-np-list { gap: 14px; }
  .v360-outer .v360-np-list > div { font-size: 16px; }
}
/* ── No-highlights dot ── */
.dot-none { background: transparent; border: 1.5px dashed var(--v3-muted); }
.v360-fbtn.active .dot-none { background: var(--v3-muted2); border-style: solid; }
@media (max-width: 768px) {
  /* navPanel — z absolute (top:-50px) na relative w flow nad canvas, edge-to-edge */
  .v360-outer #v360-navPanel {
    position: relative !important;
    top: 0 !important;
  }
  .v360-outer .v360-np-container { padding: 0 !important; max-width: none; }
  .v360-outer .v360-np-frame {
    display: block;
    width: 100%;
    border-radius: 0;
    padding: 18px 22px;
  }
  /* body-row już nie potrzebuje top paddingu — navPanel jest nad nim */
  #v360-body-row { padding-top: 0; }

  /* Filter bar — bez zaokrągleń, skrócone etykiety, węższy padding */
  .v360-outer, #v360-app, #v360-body-row, #v360-viewer-wrap,
  #v360-filterBar { border-radius: 0 !important; }
  #v360-filterBar { gap: 5px; padding: 0 8px; }
  .v360-fbtn { padding: 6px 10px; font-size: 11px; gap: 5px; }
  #v360-viewBadge { display: none; }
  .v360-fbtn[data-f="null"] .fbtn-txt,
  .v360-fbtn[data-f="1"]    .fbtn-txt,
  .v360-fbtn[data-f="2"]    .fbtn-txt { font-size: 0; line-height: 1; }
  .v360-fbtn[data-f="null"] .fbtn-txt::before { content: "Wszyst."; font-size: 11px; }
  .v360-fbtn[data-f="1"]    .fbtn-txt::before { content: "Zarez.";  font-size: 11px; }
  .v360-fbtn[data-f="2"]    .fbtn-txt::before { content: "Sprzed."; font-size: 11px; }
}
/* ── Mobile: rectangle aspect ratio ── */
@media (max-width: 768px) {
  #v360-app {
    height: auto !important;
    aspect-ratio: 16 / 10;
    max-height: 75vh;
  }
  #v360-body-row { min-height: 0; }
  #v360-viewer-wrap { min-height: 0; }
  #v360-topNav { height: 44px; padding: 0 10px; }
  #v360-playOverlay { bottom: calc(var(--v3-bottom) + 8px); right: 44px; }
  .v360-hbtn { padding: 5px 9px; font-size: 11px; }
  #v360-fsBtn { bottom: calc(var(--v3-bottom) + 8px); right: 8px; padding: 5px 8px; font-size: 12px; }
  #v360-bottomLeft { bottom: calc(var(--v3-bottom) + 6px); left: 10px; }
  #v360-loader { bottom: calc(var(--v3-bottom) + 60px); left: 10px; }
  #v360-dragHint { padding-bottom: 110px; }
  #v360-dragHintInner { padding: 10px 16px; gap: 6px; transform: scale(.85); transform-origin: center bottom; }
  .dh-arrow { width: 22px; height: 22px; }
  #v360-dragHintHand { width: 24px; height: 36px; }
  #v360-dragHintText { font-size: 11px; letter-spacing: .02em; }
  #v360-domuly { font-size: 11px; }
  #v360-domunlyLogo { height: 18px; }
}
@media (max-width: 480px) {
  #v360-app {
    aspect-ratio: 4 / 3;
    max-height: 65vh;
  }
  #v360-filterBar {
    height: 50px;
    gap: 4px;
    padding: 0 6px;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #v360-filterBar::-webkit-scrollbar { display: none; }
  .v360-fbtn { flex-shrink: 0; padding: 5px 8px; font-size: 10px; gap: 4px; }
  .v360-fbtn-cnt { font-size: 9px; }
  .v360-fbtn[data-f="null"] .fbtn-txt,
  .v360-fbtn[data-f="1"]    .fbtn-txt,
  .v360-fbtn[data-f="2"]    .fbtn-txt { font-size: 0; line-height: 1; }
  .v360-fbtn[data-f="null"] .fbtn-txt::before { content: "Wszyst."; font-size: 10px; }
  .v360-fbtn[data-f="1"]    .fbtn-txt::before { content: "Zarez.";  font-size: 10px; }
  .v360-fbtn[data-f="2"]    .fbtn-txt::before { content: "Sprzed."; font-size: 10px; }
}
/* ── Locate mode ── */
#v360-app.v360--locate-mode #v360-topNav,
#v360-app.v360--locate-mode #v360-navPanel,
#v360-app.v360--locate-mode #v360-filterBar {
  display: none !important;
}
#v360-app.v360--locate-mode #v360-playOverlay { bottom: 14px !important; }
#v360-app.v360--locate-mode #v360-fsBtn      { bottom: 12px !important; }
#v360-app.v360--locate-mode #v360-bottomLeft { bottom: 12px !important; }
#v360-app.v360--locate-mode #v360-dragHint { padding-bottom: 20px; }
#v360-app.v360--locate-mode #v360-dragHintInner {
  padding: 14px 22px;
  gap: 8px;
  transform: scale(0.72);
  transform-origin: bottom center;
}