/* Obilazak s vodičicom (P30/W30, assets/js/obilazak.js, obilazak-ar.js).
   Učitava se u lokacijskom načinu i na Karti (inline prikaz nakon skeniranja). */

/* Crni sloj za pretapanje između koraka; na početku pokriva učitavanje. */
.odbdb-obilazak-tama {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: #000;
	opacity: 1;
	pointer-events: none;
	transition-property: opacity;
	transition-timing-function: ease-in-out;
}

/* W46: kontrole kao iPhone app (ios/Obilazak/ObilazakView.swift; pt = CSS px,
   iOS Dynamic Type „Large": body 17, title3 20, footnote 13, caption2 11).
   Stupac dolje u sredini (.odbdb-kontrole domaćina): titl, gumb koraka, red
   kontrola — razmak 12, red 14, 20 iznad donje sigurne zone. Bez animacije
   pojave titla (u aplikaciji je nema). */
.odbdb-obilazak {
	--odbdb-ios-font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
}

.odbdb-obilazak .odbdb-kontrole {
	bottom: calc( env( safe-area-inset-bottom ) + 20px );
	gap: 12px;
	font-family: var( --odbdb-ios-font );
}

.odbdb-obilazak .odbdb-video-kontrole {
	gap: 14px;
	align-items: center;
	justify-content: center;
}

.odbdb-obilazak .odbdb-video-btn {
	width: 48px;
	height: 48px;
	padding: 0;
	background: rgba( 0, 0, 0, 0.6 );
	color: #fff;
}

.odbdb-obilazak .odbdb-video-btn svg {
	width: 20px;
	height: 20px;
}

.odbdb-obilazak .odbdb-titlovi-btn svg {
	width: 22px;
	height: 22px;
}

/* iPhone/desktop: stanje titlova je ikona (pun / prazan oblačić); Android
   zadržava svoju ikonu i bijelu podlogu kad su uključeni (Emil). */
.odbdb-obilazak:not( .odbdb-obilazak-android ) .odbdb-titlovi-btn.is-on,
.odbdb-obilazak:not( .odbdb-obilazak-android ) .odbdb-titlovi-btn.is-on:hover,
.odbdb-obilazak:not( .odbdb-obilazak-android ) .odbdb-titlovi-btn.is-on:focus {
	background: rgba( 0, 0, 0, 0.6 );
	color: #fff;
}

/* Pilula žiroskopa: footnote semibold, visina 44, vodoravno 12, kapsula 0,6. */
.odbdb-obilazak .odbdb-gyro-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 12px;
	border: 0;
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	font: 600 13px/1 var( --odbdb-ios-font );
	white-space: nowrap;
}

.odbdb-obilazak .odbdb-gyro-btn[hidden] {
	display: none;
}

.odbdb-obilazak .odbdb-gyro-btn svg {
	flex: none;
	display: block;
}

/* PSV-ov veliki gumb i loader u obilasku ne trebaju (tijek vodi jezgra). */
.odbdb-obilazak .psv-loader-container,
.odbdb-obilazak .psv-video-bigbutton {
	display: none !important;
}

.odbdb-obilazak-gumb {
	position: absolute;
	left: 50%;
	bottom: calc( max( 1.5rem, env( safe-area-inset-bottom ) ) + 4.25rem );
	z-index: 16;
	transform: translateX( -50% );
	padding: 0.95rem 2.2rem;
	border: 0;
	border-radius: 999px;
	background: #4caf50;
	color: #fff;
	font-size: 1.1rem;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 4px 18px rgba( 0, 0, 0, 0.35 );
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.odbdb-obilazak-gumb[hidden] {
	display: none;
}

/* W46: gumb koraka u stupcu — title3 bold, borderedProminent large, boja
   aplikacije rgb(0,17 · 0,37 · 0,18). */
.odbdb-kontrole > .odbdb-obilazak-gumb {
	position: static;
	transform: none;
	min-height: 52px;
	padding: 0 20px;
	border-radius: 999px;
	background: #2b5e2e;
	font: 700 20px/1.2 var( --odbdb-ios-font );
	box-shadow: none;
}

.odbdb-obilazak-titl {
	position: absolute;
	left: 50%;
	bottom: calc( max( 1.5rem, env( safe-area-inset-bottom ) ) + 8.75rem );
	z-index: 16;
	transform: translateX( -50% );
	width: max-content;
	max-width: min( 40rem, calc( 100% - 2rem ) );
	margin: 0;
	padding: 0.45rem 0.85rem;
	border-radius: 0.5rem;
	background: rgba( 0, 0, 0, 0.72 );
	color: #fff;
	font-size: 1.05rem;
	line-height: 1.35;
	text-align: center;
	white-space: pre-line;
	pointer-events: none;
}

.odbdb-obilazak-titl[hidden] {
	display: none;
}

/* W46: titl u stupcu — body medium 17/22, okvir 12×6, crna 0,7, zaobljenje 8,
   16 od rubova ekrana. */
.odbdb-kontrole > .odbdb-obilazak-titl {
	position: static;
	transform: none;
	box-sizing: border-box;
	max-width: min( 640px, calc( 100% - 32px ) );
	padding: 6px 12px;
	border-radius: 8px;
	background: rgba( 0, 0, 0, 0.7 );
	font: 500 17px/22px var( --odbdb-ios-font );
	pointer-events: none;
}

.odbdb-titlovi-btn.is-on {
	background: #fff;
	color: #111;
}

/* Strelica prema vodičici (W35, W46 kao iPhone app): rub ekrana na pola
   visine sigurne zone, 10 od ruba; krug 44 (crna 0,55, bijeli rub 2 · 0,9),
   strelica 20 bold, oznaka caption2 semibold sa sjenom, razmak 4. */
.odbdb-obilazak-strelica {
	position: absolute;
	top: calc( 50% + ( env( safe-area-inset-top ) - env( safe-area-inset-bottom ) ) / 2 );
	z-index: 16;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	transform: translateY( -50% );
	pointer-events: none;
}

.odbdb-obilazak-strelica.is-lijevo {
	left: calc( env( safe-area-inset-left ) + 10px );
}

.odbdb-obilazak-strelica.is-desno {
	right: calc( env( safe-area-inset-right ) + 10px );
}

.odbdb-obilazak-strelica[hidden] {
	display: none;
}

.odbdb-strelica-krug {
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid rgba( 255, 255, 255, 0.9 );
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.55 );
	color: #fff;
}

.odbdb-strelica-krug svg {
	display: block;
	width: 20px;
	height: 20px;
}

.odbdb-strelica-oznaka {
	color: #fff;
	font: 600 11px/13px var( --odbdb-ios-font, system-ui, sans-serif );
	text-shadow: 0 0 2px rgba( 0, 0, 0, 0.33 ), 0 0 2px rgba( 0, 0, 0, 0.33 );
}

/* AR uvod: prozirna WebGL scena iznad žive kamere (#odbdb-qr-video). */
.odbdb-ar-sloj {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.odbdb-ar-sloj canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Debug klizači AR-a (localStorage odbdb-ardebug=1). */
.odbdb-ar-debug {
	position: absolute;
	/* W46 kao DijagnostikaPanel: 70 ispod sigurne zone (ispod ×), 10 od rubova. */
	top: calc( env( safe-area-inset-top ) + 70px );
	left: 10px;
	right: 10px;
	z-index: 20;
	padding: 10px;
	border-radius: 10px;
	background: rgba( 0, 0, 0, 0.72 );
	color: #fff;
	font: 13px/1.3 system-ui, sans-serif;
}

.odbdb-ar-debug label {
	display: block;
	margin-bottom: 0.35rem;
}

.odbdb-ar-debug input[type="range"] {
	display: block;
	width: 100%;
}

.odbdb-ar-debug button {
	margin-right: 0.4rem;
	padding: 0.3rem 0.7rem;
	border: 0;
	border-radius: 0.4rem;
	background: #fff;
	color: #111;
	font: inherit;
}

.odbdb-ar-debug pre {
	margin: 0.4rem 0 0;
	white-space: pre-wrap;
	word-break: break-all;
	font-size: 11px;
}

.odbdb-ar-debug.is-skupljen label,
.odbdb-ar-debug.is-skupljen pre {
	display: none;
}

/* Na Karti (skener overlay) 360 prikaz ima z-index 18, kontrole 19 —
   AR sloj iznad 360 kontejnera (kasnije u DOM-u), pretapanje iznad AR-a,
   gumb/titl/strelica iznad svega osim debug panela. */
.odbdb-skener-overlay .odbdb-ar-sloj {
	z-index: 18;
}

.odbdb-skener-overlay .odbdb-obilazak-tama {
	z-index: 19;
}

.odbdb-skener-overlay .odbdb-obilazak-gumb,
.odbdb-skener-overlay .odbdb-obilazak-titl,
.odbdb-skener-overlay .odbdb-obilazak-strelica,
.odbdb-skener-overlay .odbdb-obilazak-preskoci {
	z-index: 20;
}

.odbdb-skener-overlay .odbdb-ar-debug {
	z-index: 21;
}

/* 3DoF AR (iPhone, rezerva): kratka uputa „Stojite kod ploče" (W33). */
.odbdb-ar-uputa {
	position: absolute;
	top: calc( env( safe-area-inset-top ) + 1rem );
	left: 50%;
	z-index: 20;
	transform: translateX( -50% );
	margin: 0;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	font-size: 0.95rem;
	max-width: calc( 100% - 8rem );
	text-align: center;
	pointer-events: none;
	transition: opacity 0.6s ease;
}

.odbdb-ar-uputa.is-skrivena {
	opacity: 0;
}

/* WebXR (Android, W33): korijen dom-overlaya je prozirni sloj UI-ja nad
   slikom kamere — sve što bi pokrilo kameru se skriva. */
.odbdb-u-xr {
	background: transparent !important;
	/* W36: povlačenje prstom okreće 360 sferu — bez gesta preglednika. */
	touch-action: none;
}

.odbdb-u-xr .odbdb-360,
.odbdb-u-xr .odbdb-qr-video,
.odbdb-u-xr .odbdb-qr-dim,
.odbdb-u-xr .odbdb-skener-360,
.odbdb-u-xr .odbdb-skener-video,
.odbdb-u-xr .odbdb-skener-dim,
.odbdb-u-xr .odbdb-ar-sloj {
	display: none !important;
}

.odbdb-xr-canvas {
	display: none;
}

/* Dijagnostika medija (?ardebug=1, W35). */
.odbdb-obilazak-dijag {
	position: absolute;
	left: 10px;
	/* W46: gore kao ardebug ploča (70 ispod sigurne zone); uz AR / WebXR
	   klizače premješta se u tu ploču (obilazak.js) — ne prekriva gumbe na dnu. */
	top: calc( env( safe-area-inset-top ) + 70px );
	max-width: calc( 100% - 20px );
	z-index: 21;
	margin: 0;
	padding: 0.3rem 0.5rem;
	border-radius: 0.4rem;
	background: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	font: 10px/1.3 ui-monospace, monospace;
	pointer-events: none;
	white-space: pre;
}

/* W46: × kao iPhone app — gore desno, 12 od sigurne zone, krug 48, crna 0,6,
   bijeli rub 2, xmark 20 semibold. W37: u WebXR punom zaslonu safe-area često
   daje 0 — tamo najmanje 48 od vrha (ispod statusne trake). */
.odbdb-obilazak .odbdb-prikaz-izlaz,
.odbdb-obilazak .odbdb-skener-zatvori,
.odbdb-u-xr .odbdb-prikaz-izlaz,
.odbdb-u-xr .odbdb-skener-zatvori {
	top: calc( env( safe-area-inset-top ) + 12px );
	right: calc( env( safe-area-inset-right ) + 12px );
	left: auto;
	z-index: 22;
	width: 48px;
	height: 48px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.6 ) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5.5 5.5l13 13M18.5 5.5l-13 13'/%3E%3C/svg%3E" ) center / 18px 18px no-repeat;
	box-shadow: none;
	color: transparent;
	font-size: 0;
	box-sizing: border-box;
}

.odbdb-u-xr .odbdb-prikaz-izlaz,
.odbdb-u-xr .odbdb-skener-zatvori {
	top: max( 48px, calc( env( safe-area-inset-top ) + 12px ) );
}

.odbdb-u-xr .odbdb-ar-debug {
	top: calc( max( 48px, env( safe-area-inset-top ) + 12px ) + 58px );
}

/* W37 čuvar / W46 AR usred niza: „Dodirni za nastavak" preko cijelog ekrana
   kao u aplikaciji (crna 0,55, title3 bold) — dodir bilo gdje; × ostaje iznad. */
.odbdb-obilazak-nastavak {
	position: absolute;
	inset: 0;
	z-index: 21;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba( 0, 0, 0, 0.55 );
	color: #fff;
	font: 700 20px/1.2 var( --odbdb-ios-font, system-ui, sans-serif );
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* W46: „Nastavi bez ploče (360)" dok se traži QR za AR korak usred niza. */
.odbdb-obilazak-preskoci {
	position: absolute;
	left: 50%;
	bottom: calc( env( safe-area-inset-bottom ) + 48px );
	z-index: 22;
	transform: translateX( -50% );
	padding: 0 16px;
	min-height: 44px;
	border: 1.5px solid rgba( 255, 255, 255, 0.85 );
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.45 );
	color: #fff;
	font: 600 15px/1.2 var( --odbdb-ios-font, system-ui, sans-serif );
	white-space: nowrap;
	cursor: pointer;
}

.odbdb-obilazak-preskoci[hidden] {
	display: none;
}

.odbdb-obilazak-preskoci:hover,
.odbdb-obilazak-preskoci:focus {
	background: rgba( 0, 0, 0, 0.45 );
	color: #fff;
}

.odbdb-obilazak-nastavak[hidden] {
	display: none;
}

/* W37: tema (GeneratePress) boji button:hover/:focus u #3f4047 — gumbi
   obilaska zadržavaju svoj izgled i nakon dodira. */
.odbdb-obilazak-gumb:hover,
.odbdb-obilazak-gumb:focus {
	background: #4caf50;
	color: #fff;
}

.odbdb-kontrole > .odbdb-obilazak-gumb:hover,
.odbdb-kontrole > .odbdb-obilazak-gumb:focus {
	background: #2b5e2e;
}

.odbdb-obilazak-nastavak:hover,
.odbdb-obilazak-nastavak:focus {
	background: rgba( 0, 0, 0, 0.55 );
	color: #fff;
}

.odbdb-obilazak .odbdb-gyro-btn:hover,
.odbdb-obilazak .odbdb-gyro-btn:focus,
.odbdb-obilazak .odbdb-video-btn:hover,
.odbdb-obilazak .odbdb-video-btn:focus {
	background: rgba( 0, 0, 0, 0.6 );
	color: #fff;
}

.odbdb-obilazak .odbdb-skener-zatvori:hover,
.odbdb-obilazak .odbdb-skener-zatvori:focus {
	background-color: rgba( 0, 0, 0, 0.6 );
	color: transparent;
}

.odbdb-obilazak-android .odbdb-titlovi-btn.is-on:hover,
.odbdb-obilazak-android .odbdb-titlovi-btn.is-on:focus {
	background: #fff;
	color: #111;
}

/* W41: oznaka veličine QR koda / A/B i udaljenosti ploče — i u sklopljenom panelu. */
.odbdb-ar-debug-ab {
	margin-left: 0.2rem;
	font-size: 11px;
	/* W40b: dijagnostika App Clipa je dulja — prelama se. */
	white-space: normal;
	word-break: break-word;
}

/* W40 test (iPhone kroz Needle Go App Clip): stranica je sloj PREKO ARKit
   kamere — sve pozadine prozirne, WebXR canvas vidljiv ispod sučelja. */
.odbdb-xr-prozirno,
.odbdb-xr-prozirno body,
.odbdb-xr-prozirno .odbdb-prikaz-wrap,
.odbdb-xr-prozirno .odbdb-skener-overlay {
	background: transparent !important;
}

.odbdb-xr-prozirno .odbdb-xr-canvas.is-vidljiv {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	z-index: 0;
	pointer-events: none;
}

.odbdb-xr-prozirno .odbdb-prikaz-wrap {
	z-index: 1;
}

/* W46: na Karti kontrole (s titlom i gumbom koraka) iznad sloja pretapanja. */
.odbdb-skener-overlay.odbdb-obilazak .odbdb-kontrole {
	z-index: 20;
}

/* W46: stanje medija kao red ardebug ploče (i kad je ploča sklopljena). */
.odbdb-ar-debug .odbdb-obilazak-dijag,
.odbdb-ar-debug.is-skupljen .odbdb-obilazak-dijag {
	display: block;
	position: static;
	max-width: none;
	margin: 4px 0 0;
	padding: 0;
	background: none;
	white-space: pre-wrap;
}

/* W46: dok se traži ploča za AR korak usred niza — bez kontrola i strelice. */
.odbdb-obilazak-sken .odbdb-kontrole,
.odbdb-obilazak-sken .odbdb-obilazak-strelica {
	display: none !important;
}

/* W50b: okvir skeniranja kao iPhone app (qr-provjera.js odbdbOkvirSkena):
   isprekidani kvadrat 230, zeleni četverokut na kodu (systemGreen). */
.odbdb-sken-okvir {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 16;
	pointer-events: none;
}

.odbdb-sken-kvadrat {
	fill: none;
	stroke: rgba( 255, 255, 255, 0.85 );
	stroke-width: 3;
	stroke-dasharray: 14 10;
	transition: opacity 0.15s;
}

.odbdb-sken-kod {
	fill: rgba( 52, 199, 89, 0.18 );
	stroke: #34c759;
	stroke-width: 4;
	stroke-linejoin: round;
}

/* 3DoF (iPhone web, stari Android): stari okvir ostaje samo nositelj upute
   ispod kvadrata — crta ga SVG. */
.odbdb-qr-okvir.is-ios,
.odbdb-qr-okvir.is-ios.is-poravnano {
	width: 230px;
	height: 230px;
	border-color: transparent;
	box-shadow: none;
}