/* Sales mode: unit scopes over the building, the filters on the left, unit cards on the right,
   the unit panel and its 2D plan, instalments and 360° windows. Desktop layout from the Figma
   Pre-Sale page; the mobile layout comes later from its own design. */
.sales { position: absolute; inset: 0; pointer-events: none; }
.scopes { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Filters ---------- */
.filters {
  position: absolute; left: 14px; top: 14px; bottom: 14px; width: 220px; box-sizing: border-box;
  border-radius: 25px; border: 1px solid var(--glass-line); pointer-events: auto;
  display: flex; flex-direction: column; padding: 16px 0 16px;
}
.filters-close {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; margin: 0 16px; flex: none;
  border-radius: 50%; border: 1px solid var(--glass-line); cursor: pointer;
}
.filters-close img { display: block; }
.filters-title { margin: 18px 16px 6px; font-size: 17px; font-weight: 700; }
.filters-body { overflow-y: auto; padding: 0 16px 6px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.filters-sep { border: 0; height: 1px; background: rgba(255, 255, 255, 0.12); margin: 14px 0; }
.f-sec { padding-top: 4px; }
.f-title { margin: 6px 0 12px; font-size: 13px; font-weight: 700; }
.f-vals { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255, 255, 255, 0.8); margin-bottom: 4px; }
.f-range { position: relative; height: 22px; margin: 0 10px; }
.f-track, .f-fill { position: absolute; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; }
.f-track { left: -10px; right: -10px; background: rgba(255, 255, 255, 0.25); }
.f-fill { background: #fff; }
.f-thumb {
  position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.25); border: 2px solid #fff; box-sizing: border-box; cursor: grab;
  backdrop-filter: blur(6px); touch-action: none;
}
.f-thumb:active { cursor: grabbing; }
.f-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.f-minmax { display: flex; justify-content: space-between; font-size: 8px; letter-spacing: .04em; color: rgba(255, 255, 255, 0.45); margin-top: 4px; }
.f-check { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 0; font-size: 12px; cursor: pointer; text-align: left; }
.f-box {
  flex: none; width: 18px; height: 18px; border-radius: 5px; box-sizing: border-box;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.f-check[aria-pressed="true"] .f-box { border: 0; background: url("/viewer/icons/checkmark.svg") center / 18px 18px no-repeat; }
.compass {
  position: relative; width: 124px; height: 124px; margin: 4px auto 6px; box-sizing: border-box;
  border-radius: 40px; border: 1px solid rgba(255, 255, 255, 0.22);
}
.compass-dir {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 13px;
  display: grid; place-items: center; font-size: 10px; font-weight: 700; cursor: pointer;
  color: rgba(255, 255, 255, 0.85); transition: background .15s, color .15s;
}
.compass-dir:hover { background: rgba(255, 255, 255, 0.12); }
.compass-dir[aria-pressed="true"] { background: var(--accent); color: #000; }
.compass-dir.d-N { left: 50%; top: 14%; }
.compass-dir.d-NE { left: 82%; top: 18%; }
.compass-dir.d-E { left: 86%; top: 50%; }
.compass-dir.d-SE { left: 82%; top: 82%; }
.compass-dir.d-S { left: 50%; top: 86%; }
.compass-dir.d-SW { left: 18%; top: 82%; }
.compass-dir.d-W { left: 14%; top: 50%; }
.compass-dir.d-NW { left: 18%; top: 18%; }
/* Collapsed: the panel shrinks into its own round button, which turns to point back in. */
.filters { clip-path: inset(0 0 0 0 round 25px); transition: clip-path .42s var(--ease-quick) .06s; }
.filters-close img { transition: transform .35s var(--ease-quick); }
.filters-title, .filters-body { transition: opacity .22s .12s; }
.filters-collapsed .filters { clip-path: inset(16px calc(100% - 50px) calc(100% - 50px) 16px round 17px); transition-delay: 0s; }
.filters-collapsed .filters-title, .filters-collapsed .filters-body { opacity: 0; pointer-events: none; transition-delay: 0s; }
.filters-collapsed .filters-close img { transform: rotate(180deg); }
/* The column that sums the filters up while the panel is minimised: no panel behind it, just
   short lines over the picture, under the round button. */
.filters-summary {
  position: absolute; left: 31px; top: 80px; bottom: 30px; width: 52px; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateX(-12px); visibility: hidden;
  transition: opacity .2s, transform .2s var(--ease-quick), visibility 0s .2s;
}
.filters-collapsed .filters-summary {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity .3s .3s, transform .35s var(--ease-quick) .3s, visibility 0s .3s;
}
.no-filters .filters-summary, .no-filters .filters-shade { display: none; }
/* A blurred, darkened strip down the left edge behind the summary, so it reads over any picture;
   it fades out to the right instead of ending in a hard edge. */
.filters-shade {
  position: absolute; left: 0; top: 0; bottom: 0; width: 170px; pointer-events: none;
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  background: linear-gradient(to right, rgba(16, 18, 22, 0.55), rgba(16, 18, 22, 0.3) 60%, rgba(16, 18, 22, 0));
  mask-image: linear-gradient(to right, #000 55%, transparent);
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s;
}
.filters-collapsed .filters-shade { opacity: 1; visibility: visible; transition: opacity .35s .2s, visibility 0s .2s; }
.f-sum-head { margin: 0 0 24px; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.f-sum-sec { display: flex; flex-direction: column; gap: 6px; }
.f-sum-title { margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.f-sum-title, .f-sum-val { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.f-sum-val { margin: 0; font-size: 11px; line-height: 1.35; color: rgba(255, 255, 255, 0.95); }
.f-sum-val.f-sum-big { font-size: 13px; font-weight: 500; color: #fff; }
.f-sum-sep { width: 100%; border: 0; height: 1px; background: rgba(255, 255, 255, 0.35); margin: 18px 0; }

/* ---------- Unit cards ---------- */
.units {
  position: absolute; top: 0; right: 0; bottom: 0; width: 262px; pointer-events: auto;
  display: flex; flex-direction: column; isolation: isolate;
}
.units-head { display: flex; align-items: center; justify-content: space-between; padding: 26px 22px 14px 30px; }
.units-title { margin: 0; font-size: 22px; font-weight: 700; }
.units-toggle {
  display: flex; justify-content: center; align-items: center; flex: none; width: 34px; height: 34px; box-sizing: border-box;
  border-radius: 50%; background: rgba(54, 54, 54, 0.6); border: 1px solid var(--glass-line); backdrop-filter: blur(20px);
  cursor: pointer; transform: rotate(180deg); transition: transform .35s var(--ease-quick);
}
.units-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 22px 30px 30px; display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: none; mask-image: linear-gradient(to bottom, #000 calc(100% - 50px), transparent);
}
.units-list::-webkit-scrollbar { display: none; }
.units-list { position: relative; }
.unit-card[hidden], .units-empty[hidden] { display: none; }
.unit-card.uc-ghost { position: absolute; margin: 0; pointer-events: none; }   /* out of the list's flow */
/* Collapsing only slides the title and the cards out and fades the shade behind them; the round
   toggle never moves or changes size, so nothing jumps. */
.units::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to left, rgba(20, 22, 26, 0.55), rgba(20, 22, 26, 0));
  transition: opacity .4s;
}
.units-title, .units-list { transition: transform .42s var(--ease-quick), opacity .3s, visibility 0s; }
.units-collapsed .units { pointer-events: none; }
.units-collapsed .units::before { opacity: 0; }
.units-collapsed .units-title, .units-collapsed .units-list {
  transform: translateX(70px); opacity: 0; visibility: hidden;
  transition: transform .42s var(--ease-quick), opacity .25s, visibility 0s .42s;
}
.units-collapsed .units-toggle { transform: none; pointer-events: auto; }
.unit-card {
  position: relative; flex: none; width: 200px; box-sizing: border-box; padding: 18px 20px; border-radius: 25px;
  border: 1px solid var(--glass-line); text-align: left; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 3px 0 1px rgba(0, 0, 0, 0.25);
  transition: transform .2s var(--ease-quick), border-color .2s;
}
.unit-card::before { background: rgba(54, 54, 54, 0.6); }
.unit-card:hover:not(:disabled), .unit-card.hover:not(:disabled) { border-color: rgba(225, 222, 191, 0.75); transform: translateX(-4px); }
.unit-card:disabled { cursor: default; opacity: 0.6; }
.uc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.uc-code { font-size: 16px; font-weight: 700; }
.uc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #e3e0c3; white-space: nowrap; }
.uc-status::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.uc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.uc-tag { padding: 4px 7px; border-radius: 14px; background: rgba(255, 255, 255, 0.1); font-size: 10px; font-weight: 700; white-space: nowrap; }
.uc-price { margin-top: 12px; font-size: 17px; font-weight: 700; }
.units-empty { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.6); }

/* ---------- Unit panel ---------- */
.unit-panel {
  position: absolute; z-index: 6; width: 470px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 14px;
  border-radius: 32px; background: rgba(45, 45, 45, 0.75); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: scale(0.97); transition: opacity .25s, transform .25s var(--ease-quick); cursor: move; touch-action: none;
}
.unit-panel.open { opacity: 1; transform: none; }
.unit-close {
  position: absolute; top: -15px; right: -15px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: rgba(150, 150, 150, 0.7); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.unit-code {
  height: 150px; border-radius: 22px; background: rgba(0, 0, 0, 0.38); display: grid; place-items: center;
  font-size: 55px; font-weight: 700; letter-spacing: -0.01em; overflow: hidden;
}
.unit-code span { max-width: 100%; padding: 0 16px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-rows { display: grid; grid-template-columns: auto 1fr; gap: 10px 50px; margin: 24px 20px 22px; font-size: 21px; }
.unit-rows dt { color: rgba(255, 255, 255, 0.5); }
.unit-rows dd { margin: 0; }
.unit-wide {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; border-radius: 19px;
  background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 14px; cursor: pointer;
}
.unit-wide:hover, .unit-fn:hover { background: rgba(255, 255, 255, 0.16); }
.unit-fns { display: flex; margin-top: 10px; padding: 14px 6px; border-radius: 19px; background: rgba(112, 112, 112, 0.2); }
.unit-fn {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px; font-size: 14px;
  border-radius: 12px; cursor: pointer; position: relative;
}
.unit-fn + .unit-fn::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: rgba(255, 255, 255, 0.14); }
.unit-fn img { display: block; }

/* ---------- Modals ---------- */
.modal { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); }
.modal-close {
  position: absolute; top: -15px; right: -15px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; z-index: 2;
  display: grid; place-items: center; background: rgba(150, 150, 150, 0.85); border: 1px solid rgba(255, 255, 255, 0.5);
}
.plan-card {
  position: relative; width: min(760px, 92vw); height: min(780px, 88vh); box-sizing: border-box; padding: 30px 34px;
  border-radius: 34px; background: #fff; color: #111; display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.plan-code { margin: 0; font-size: 30px; font-weight: 700; display: inline-block; align-self: flex-start; border-bottom: 3px solid #111; padding-bottom: 4px; }
.plan-type { margin: 10px 0 14px; font-size: 19px; }
.plan-card { cursor: grab; touch-action: none; }
.plan-card.dragging { cursor: grabbing; }
.plan-view { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: none; cursor: zoom-in; border-radius: 12px; }
.plan-view.zoomed { cursor: grab; }
.plan-view.panning { cursor: grabbing; }
.plan-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
.plan-zoom { position: absolute; right: 26px; bottom: 24px; display: flex; gap: 6px; }
.plan-zoom [data-z="0"] { min-width: 64px; font-variant-numeric: tabular-nums; }
.plan-zoom button {
  min-width: 36px; height: 36px; padding: 0 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.92); color: #111; border: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 15px; font-weight: 700; cursor: pointer;
}
.plan-zoom button:hover { background: rgba(0, 0, 0, 0.12); }
.html-card {
  position: relative; width: min(680px, 92vw); max-height: 84vh; box-sizing: border-box; padding: 28px 30px; display: flex; flex-direction: column;
  border-radius: 32px; background: rgba(45, 45, 45, 0.85); backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.12);
}
.html-title { margin: 0 0 16px; font-size: 20px; font-weight: 700; }
.html-body { overflow-y: auto; font-size: 15px; color: rgba(255, 255, 255, 0.8); padding: 0; }
.html-body table { border-collapse: collapse; width: 100%; }
.html-body td, .html-body th { border: 1px solid rgba(255, 255, 255, 0.15); padding: 6px 10px; }
.html-body img { max-width: 100%; height: auto; }
.html-body .inst-table { margin-bottom: 14px; }
.html-body .inst-table th { text-align: start; font-weight: 500; color: rgba(255, 255, 255, 0.6); white-space: nowrap; }
.html-body .inst-table td { color: #fff; }
.pano-modal { position: absolute; inset: 0; z-index: 11; background: #000; display: flex; flex-direction: column; }
.pano-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; flex: none; }
.pano-title { margin: 0; font-size: 18px; font-weight: 700; }
.pano-view { position: relative; flex: 1 1 auto; min-height: 0; }

body.mode-sales .navigation { z-index: 1; }