/* Virtualni ogled RESEDA — vmesnik v slogu reseda-v2 (delovanje po vzoru prejšnjega ogleda na Klaptyju) */
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin-standard-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin-ext-standard-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #0b0c0e; --ink-2: #131519; --panel: rgba(19, 21, 25, 0.86); --rule: rgba(255, 255, 255, 0.14);
  --fg: #fff; --steel: #9aa1aa; --red: #ee2d38; --red-2: #c81e28;
  --f: "Archivo", "Helvetica Neue", Arial, sans-serif; --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --bar: 52px; --pad: max(12px, env(safe-area-inset-left)); --padr: max(12px, env(safe-area-inset-right)); --padb: env(safe-area-inset-bottom);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--fg); font-family: var(--f); -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }

.og { position: fixed; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.og-stage { position: absolute; inset: 0; }
.og-pano, .og-flat { position: absolute; inset: 0; transition: opacity 0.6s var(--ease); }
.og-pano { opacity: 0; pointer-events: none; }
.og.is-cube .og-pano { opacity: 1; pointer-events: auto; }
.og.is-cube .og-flat { opacity: 0; pointer-events: none; }
.og-pano .psv-container { background: var(--ink); }
.og-pano .psv-loader-container { display: none; }

/* ---------- ravni prizori (uvod, letalski posnetek) ---------- */
.og-flat { overflow: hidden; touch-action: none; cursor: grab; background: var(--ink); }
.og-flat.is-drag { cursor: grabbing; }
.og-flat__in { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.og-flat__img { display: block; max-width: none; pointer-events: none; }
.og-flat__hs { position: absolute; inset: 0; }
.og-flat__hs .hs { position: absolute; transform: translate(-50%, -50%) scale(calc(var(--inv, 1) * var(--f, 1))); }

/* ---------- točke (prehodi in informacije) ---------- */
.hs { --s: 72px; width: var(--s); height: var(--s); border-radius: 50%; cursor: pointer; position: relative; display: grid; place-items: center; }
.hs__lbl { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px); white-space: nowrap; padding: 6px 11px; border-radius: 8px; background: var(--panel); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.35s var(--ease); }
.hs:hover .hs__lbl, .hs:focus-visible .hs__lbl { opacity: 1; transform: translate(-50%, 0); }
.hs--thumb { background: var(--ink-2) center / cover no-repeat; box-shadow: 0 0 0 3px var(--red), 0 6px 18px rgba(0, 0, 0, 0.45); transition: transform 0.35s var(--ease), box-shadow 0.3s; }
.hs--thumb:hover { transform: scale(1.08); box-shadow: 0 0 0 4px var(--red), 0 8px 24px rgba(0, 0, 0, 0.5); }
.og-flat__hs .hs--thumb:hover { transform: translate(-50%, -50%) scale(calc(var(--inv, 1) * var(--f, 1) * 1.08)); }
.hs--back { background: #fff; color: var(--ink); font-weight: 700; font-size: calc(var(--s) * 0.2); letter-spacing: 0.02em; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); transition: transform 0.35s var(--ease), background-color 0.3s, color 0.3s; }
.hs--back:hover { background: var(--red); color: #fff; transform: scale(1.06); }
.hs--back-dark { background: var(--ink); color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 6px 18px rgba(0, 0, 0, 0.4); }
.hs--back-dark:hover { background: var(--red); }
.hs--rings::before, .hs--rings::after, .hs--rings i { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 3px solid var(--red); animation: og-ring 2.2s var(--ease) infinite; pointer-events: none; }
.hs--rings::after { animation-delay: 0.73s; }
.hs--rings i { animation-delay: 1.46s; }
@keyframes og-ring { 0% { transform: scale(0.85); opacity: 0.95; } 100% { transform: scale(1.75); opacity: 0; } }
.hs--info { background: var(--red); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 6px 18px rgba(0, 0, 0, 0.45); transition: transform 0.35s var(--ease), background-color 0.3s; }
.hs--info::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.55); animation: og-ring 2.6s var(--ease) infinite; }
.hs--info svg { width: 58%; height: 58%; fill: #fff; }
.hs--info:hover { transform: scale(1.1); background: var(--red-2); }

/* ---------- nalaganje ---------- */
.og-load { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 30; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
.og-load.is-on { opacity: 1; }
.og-load span { display: block; height: 100%; width: 0; background: var(--red); transition: width 0.35s var(--ease); }
.og-spin { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.22); border-top-color: var(--red); z-index: 29; opacity: 0; pointer-events: none; transition: opacity 0.3s; animation: og-rot 0.9s linear infinite; }
.og-spin.is-on { opacity: 1; }
@keyframes og-rot { to { transform: rotate(360deg); } }

/* ---------- zgornja vrstica ---------- */
.og-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: max(10px, env(safe-area-inset-top)) var(--padr) 0 var(--pad); z-index: 20; pointer-events: none; }
.og-name { padding: 6px 11px; border-radius: 8px; background: var(--panel); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; }
.og-logo { height: 26px; width: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); }

/* ---------- puščici (prejšnji / naslednji prizor) ---------- */
.og-arrow { position: absolute; top: 50%; z-index: 20; width: 44px; height: 64px; margin-top: -32px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; opacity: 0.8; transition: opacity 0.3s, transform 0.4s var(--ease); }
.og-arrow svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }
.og-arrow--prev { left: calc(var(--pad) - 6px); }
.og-arrow--next { right: calc(var(--padr) - 6px); }
.og-arrow:hover { opacity: 1; }
.og-arrow--prev:hover { transform: translateX(-3px); }
.og-arrow--next:hover { transform: translateX(3px); }

/* ---------- spodnja vrstica ---------- */
.og-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 22; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: var(--bar); padding: 6px var(--padr) calc(6px + var(--padb)) var(--pad); background: linear-gradient(to top, rgba(11, 12, 14, 0.82), rgba(11, 12, 14, 0)); }
.og-bar__l, .og-bar__r { display: flex; align-items: center; gap: 4px; min-width: 0; }
.og-bar__r { flex: none; }
.og-title { font-size: 0.9375rem; font-weight: 600; margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.og-btn { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; display: grid; place-items: center; cursor: pointer; transition: background-color 0.25s, color 0.25s; }
.og-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); }
.og-btn:hover, .og-btn.is-on { background: rgba(255, 255, 255, 0.12); }
.og-btn.is-on { color: var(--red); }
.og-btn:disabled { opacity: 0.35; cursor: default; background: transparent; }
.og-btn--thumbs { background: var(--panel); }
.og-copy { position: absolute; right: var(--padr); bottom: calc(1px + var(--padb)); font-size: 0.625rem; color: rgba(255, 255, 255, 0.55); pointer-events: none; }
@media (max-width: 560px) {
  :root { --bar: 46px; }
  .og-bar { gap: 4px; padding-top: 4px; padding-bottom: calc(4px + var(--padb)); }
  .og-bar__r { gap: 0; }
  .og-btn { width: 34px; height: 34px; }
  .og-title { font-size: 0.8125rem; margin-left: 4px; }
  .og-copy { bottom: auto; top: calc(max(10px, env(safe-area-inset-top)) + 36px); }
}
@media (max-width: 400px) { .og-title { display: none; } }

/* ---------- trak prizorov ---------- */
.og-thumbs { position: absolute; left: 0; right: 0; bottom: calc(var(--bar) + var(--padb)); z-index: 21; padding: 0 var(--padr) 6px var(--pad); transform: translateY(14px); opacity: 0; pointer-events: none; transition: opacity 0.35s, transform 0.45s var(--ease); }
.og.is-thumbs .og-thumbs { opacity: 1; transform: none; pointer-events: auto; }
.og-thumbs__track { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; scroll-snap-type: x proximity; }
.og-thumbs__track::-webkit-scrollbar { display: none; }
.og-th { flex: none; width: 120px; border: 0; padding: 0; background: none; cursor: pointer; text-align: left; scroll-snap-align: start; }
.og-th__img { display: block; width: 120px; height: 80px; border-radius: 8px; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18); transition: box-shadow 0.25s, transform 0.35s var(--ease); background: var(--ink-2); }
.og-th:hover .og-th__img { transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); }
.og-th.is-on .og-th__img { box-shadow: 0 0 0 3px var(--red); }
.og-th__t { display: block; margin-top: 5px; font-size: 0.6875rem; line-height: 1.25; color: rgba(255, 255, 255, 0.86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
@media (max-width: 520px) { .og-th, .og-th__img { width: 96px; } .og-th__img { height: 64px; } }

/* ---------- okna ---------- */
.og-modal { position: absolute; inset: 0; z-index: 40; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: max(14px, env(safe-area-inset-top)) var(--padr) max(14px, env(safe-area-inset-bottom)) var(--pad); }
.og-modal__bg { position: absolute; inset: 0; background: rgba(11, 12, 14, 0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: og-fade 0.3s; }
.og-modal__box { position: relative; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; background: var(--ink-2); border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7); overflow: hidden; animation: og-pop 0.4s var(--ease); }
@keyframes og-fade { from { opacity: 0; } }
@keyframes og-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.og-mh { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 20px; border-bottom: 1px solid var(--rule); }
.og-mh h2 { flex: 1; margin: 0; font-size: 1.0625rem; font-weight: 650; letter-spacing: 0.005em; }
.og-x { width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.06); cursor: pointer; display: grid; place-items: center; flex: none; transition: background-color 0.25s; }
.og-x:hover { background: var(--red); }
.og-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.og-mb { padding: 18px 20px 22px; overflow: auto; overscroll-behavior: contain; font-size: 0.9375rem; line-height: 1.55; color: rgba(255, 255, 255, 0.86); }
.og-mb img { display: block; max-width: 100%; height: auto; border-radius: 10px; margin: 6px 0; }
.og-mb ul { margin: 0 0 6px; padding-left: 1.1em; }
.og-mb p { margin: 0 0 10px; }
.og-mb p:last-child { margin-bottom: 0; }
.og-mb a { color: #fff; }
.og-mb .sh-btn { color: var(--ink); }
.og-mb .sh-btn:hover { color: #fff; }
.m-info { width: 760px; }
.m-info .og-mb img { width: auto; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); margin-inline: auto; }
.m-about { width: 560px; }
.m-about .og-mb .ad { color: var(--steel); font-size: 0.875rem; margin-bottom: 12px; }
.m-share { width: 520px; }

/* deljenje */
.sh-net { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.sh-net a { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: #fff; text-decoration: none; font-size: 0.75rem; transition: background-color 0.25s; }
.sh-net a:hover { background: var(--red); }
.sh-net svg { width: 24px; height: 24px; fill: currentColor; }
.sh-lbl { display: block; font-size: 0.75rem; color: var(--steel); margin: 0 0 6px; }
.sh-row { display: flex; gap: 8px; margin-bottom: 14px; }
.sh-row input, .sh-row textarea { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--ink); color: #fff; font: 0.8125rem/1.4 var(--f); }
.sh-row textarea { height: 62px; padding: 8px 12px; resize: none; }
.sh-btn { flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: #fff; color: var(--ink); font-weight: 600; font-size: 0.8125rem; cursor: pointer; transition: background-color 0.25s, color 0.25s; }
.sh-btn:hover { background: var(--red); color: #fff; }
.sh-qr { display: flex; align-items: center; gap: 16px; }
.sh-qr canvas { width: 108px; height: 108px; border-radius: 8px; background: #fff; padding: 6px; }

/* tloris */
.m-plan { width: min(900px, 100%); height: 100%; max-height: 100%; }
.m-plan .og-mb { padding: 12px; flex: 1; display: grid; place-items: center; background: #fff; }
.pl { position: relative; display: inline-block; max-width: 100%; max-height: 100%; line-height: 0; }
.pl img { max-width: 100%; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); width: auto; height: auto; margin: 0; border-radius: 0; }
.pl-pt { position: absolute; width: var(--pt, 22px); height: var(--pt, 22px); margin: calc(var(--pt, 22px) / -2) 0 0 calc(var(--pt, 22px) / -2); border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--ink); box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0, 0, 0, 0.45); transition: transform 0.3s var(--ease), background-color 0.25s; }
.pl-pt:hover { transform: scale(1.25); background: var(--red-2); }
.pl-pt.is-on { background: var(--red); box-shadow: 0 0 0 3px #fff, 0 0 0 9px rgba(238, 45, 56, 0.28); }
.pl-pt .hs__lbl { line-height: 1.2; color: #fff; }
.pl-pt:hover .hs__lbl { opacity: 1; transform: translate(-50%, 0); }
.og-mini { position: absolute; left: var(--pad); bottom: calc(var(--bar) + var(--padb) + 8px); z-index: 23; width: 200px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6); cursor: pointer; }
.og.is-thumbs .og-mini { bottom: calc(var(--bar) + var(--padb) + 116px); }
.og-mini .pl img { max-height: 200px; }
.og-mini .pl-pt { width: 12px; height: 12px; margin: -6px 0 0 -6px; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.og-mini .pl-pt.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(238, 45, 56, 0.3); }
.og-mini .pl-pt .hs__lbl { display: none; }

/* galerija */
.m-gal { width: 100%; height: 100%; background: transparent; border: 0; box-shadow: none; }
.gl { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; }
.gl img { max-width: 100%; max-height: calc(100% - 8px); border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8); }
.gl-top { display: flex; align-items: center; justify-content: space-between; padding: 0 0 10px; }
.gl-n { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.8); font-variant-numeric: tabular-nums; }
.gl-nav { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; background: var(--panel); cursor: pointer; display: grid; place-items: center; transition: background-color 0.25s; }
.gl-nav:hover { background: var(--red); }
.gl-nav svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gl-nav--p { left: 4px; }
.gl-nav--n { right: 4px; }

/* sporočilo */
.og-toast { position: absolute; left: 50%; bottom: calc(var(--bar) + var(--padb) + 18px); z-index: 50; max-width: calc(100% - 40px); padding: 10px 16px; border-radius: 10px; background: var(--panel); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 0.875rem; transform: translate(-50%, 10px); opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.4s var(--ease); text-align: center; }
.og-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* način VR: vmesnik skrit */
.og.is-vr .og-top, .og.is-vr .og-bar, .og.is-vr .og-arrow, .og.is-vr .og-thumbs, .og.is-vr .og-mini { display: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* nizko okno (npr. ogled, vgrajen na telefonu): okna zasedejo skoraj ves prostor */
@media (max-height: 420px) {
  .og-modal { padding: 6px; }
  .og-mh { padding: 6px 6px 6px 14px; }
  .og-mh h2 { font-size: 0.9375rem; }
  .og-x { width: 30px; height: 30px; }
  .og-mb { padding: 10px 12px 12px; }
  .m-plan .og-mb { padding: 6px; }
  .pl img { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); }
  .pl-pt { box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, 0.45); }
  .pl-pt.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(238, 45, 56, 0.28); }
}