/* tour.css */
/* Self-hosted, immersive Dental Hodžić tour. */
.tour-page {
  padding-top:88px;
  height:100dvh;
  overflow:hidden;
  background:#10272d
}
.tour-page>.topbar,.tour-page>.reading-progress,.tour-page>.back-to-top {
  display:none
}
.tour-page>.header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:#f7f7f0
}
.tour-main {
  position:relative;
  height:calc(100dvh - 88px);
  min-height:0;
  overflow:hidden;
  isolation:isolate;
  background:#10272d
}
.tour-main:fullscreen {
  height:100dvh;
  width:100vw
}
.tour-immersive .tour-main {
  position:fixed;
  inset:0;
  height:100dvh;
  width:100vw;
  z-index:1200
}
.tour-immersive>.header {
  display:none
}
#panorama {
  position:absolute;
  inset:0;
  overflow:hidden;
  touch-action:none;
  outline-offset:-4px;
  cursor:grab
}
#panorama:active {
  cursor:grabbing
}
.tour-shade {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,#0a212bb0 0%,transparent 27%,transparent 60%,#0a212bc9 100%);
  z-index:2
}
.tour-top {
  position:absolute;
  z-index:4;
  top:30px;
  left:35px;
  right:30px;
  display:flex;
  align-items:start;
  justify-content:space-between;
  pointer-events:none;
  gap:20px
}
.tour-scene-heading {
  color:white;
  text-shadow:0 2px 12px #10272d60
}
.tour-scene-heading>span {
  font-size:8px;
  letter-spacing:.18em;
  color:#d5e5c4
}
.tour-scene-heading h1 {
  font-size:43px;
  letter-spacing:-.055em;
  line-height:1.1;
  margin:13px 0 8px
}
.tour-scene-heading p {
  color:#d7e3dd;
  font-size:11px;
  margin:0
}
.tour-top-actions {
  display:flex;
  gap:8px;
  pointer-events:auto
}
.tour-top-actions button,.tour-top-actions a,.tour-tools button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  background:#10282c6b;
  border:1px solid #ffffff35;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:white;
  border-radius:50%;
  padding:0;
  cursor:pointer;
  transition:background .25s,color .25s
}
.tour-top-actions .ui-icon,.tour-tools .ui-icon {
  width:18px;
  height:18px
}
.tour-top-actions button:hover,.tour-top-actions a:hover,.tour-tools button:hover,.tour-tools button[aria-pressed=true] {
  background:#d0e18e;
  color:#193038;
  border-color:#d0e18e
}
.tour-tools {
  position:absolute;
  right:30px;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
  display:flex;
  flex-direction:column;
  gap:8px
}
.tour-tools>span {
  height:6px
}
.tour-bottom {
  position:absolute;
  left:35px;
  right:35px;
  bottom:25px;
  z-index:4;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  pointer-events:none
}
.tour-room-list {
  pointer-events:auto;
  display:flex;
  gap:8px;
  background:#10272d75;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:9px;
  border:1px solid #ffffff20
}
.tour-room {
  display:block;
  width:116px;
  text-align:left;
  padding:0 0 5px;
  background:none;
  border:1px solid transparent;
  color:#cad7ce;
  cursor:pointer;
  transition:background .3s,border-color .3s;
  overflow:hidden
}
.tour-room img {
  height:64px;
  width:100%;
  object-fit:cover;
  filter:brightness(.7);
  transition:filter .3s;
  pointer-events:none
}
.tour-room>span {
  font-size:10px;
  display:block;
  padding:8px 7px 0
}
.tour-room small {
  font-size:8px;
  margin-right:7px;
  color:#97b080
}
.tour-room.selected {
  border-color:#d0e18e;
  background:#d0e18e14;
  color:white
}
.tour-room.selected img,.tour-room:hover img {
  filter:brightness(1)
}
.tour-direction {
  display:flex;
  align-items:center;
  gap:14px;
  color:white;
  padding-bottom:9px
}
.tour-direction-dial {
  width:45px;
  height:45px;
  border:1px solid #ffffff50;
  border-radius:50%;
  display:grid;
  place-items:center
}
.tour-direction-dial .ui-icon {
  width:23px;
  height:23px
}
.tour-direction>span:last-child {
  font-size:18px;
  line-height:1.1;
  letter-spacing:-.03em
}
.tour-direction small {
  font-size:7px;
  display:block;
  letter-spacing:.1em;
  color:#c7d7cc;
  margin-top:8px
}
.tour-hotspot {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  border:0;
  padding:8px;
  background:none;
  color:#fff;
  cursor:pointer;
  text-shadow:0 1px 7px #10272d;
  transform:translate(-50%,-50%)
}
.tour-hotspot-circle {
  width:45px;
  height:45px;
  border-radius:50%;
  border:1px solid #d0e18e;
  background:#10272d99;
  backdrop-filter:blur(6px);
  display:grid;
  place-items:center;
  box-shadow:0 0 0 6px #d0e18e20;
  transition:.25s
}
.tour-hotspot-circle .ui-icon {
  width:20px;
  height:20px
}
.tour-hotspot-label {
  font-family:'DM Sans',sans-serif;
  font-size:10px;
  background:#10272dc9;
  padding:5px 10px;
  border-radius:2px;
  white-space:nowrap
}
.tour-hotspot:hover .tour-hotspot-circle,.tour-hotspot:focus-visible .tour-hotspot-circle {
  background:#d0e18e;
  color:#193038;
  box-shadow:0 0 0 9px #d0e18e30;
  scale:1.06
}
.tour-loading {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  background:#10272df5;
  color:white;
  z-index:6;
  transition:opacity .4s,visibility .4s
}
.tour-loading.ready {
  opacity:0;
  visibility:hidden;
  pointer-events:none
}
.tour-loading strong {
  font:400 25px Manrope,sans-serif;
  letter-spacing:-.04em
}
.tour-loading>span {
  font-size:11px;
  color:#b6c9b9
}
.tour-loading-ring {
  width:38px;
  height:38px;
  border:1px solid #d0e18e30;
  border-top-color:#d0e18e;
  border-radius:50%;
  animation:tour-spin 1s linear infinite;
  margin-bottom:7px
}
@keyframes tour-spin {
  to {
    rotate:360deg
  }
}
.tour-message {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:#10272dee;
  color:#eef4e5;
  z-index:7;
  text-align:center;
  max-width:420px;
  font-size:12px;
  line-height:1.8;
  padding:0
}
.tour-message:not(:empty) {
  padding:20px 25px;
  border:1px solid #ffffff35
}
.tour-message a {
  border-bottom:1px solid #d0e18e;
  color:#d0e18e
}
.tour-help {
  width:min(460px,calc(100vw - 36px));
  max-height:90dvh;
  border:1px solid #e0e6d6;
  padding:45px 35px 35px;
  background:#f7f7f0;
  color:#193038;
  text-align:center;
  overflow:auto
}
.tour-help::backdrop {
  background:#10272da0;
  backdrop-filter:blur(9px)
}
.tour-help-close {
  position:absolute;
  right:12px;
  top:12px;
  background:none;
  border:1px solid #d2ddc4;
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#193038;
  padding:0
}
.tour-help-close .ui-icon {
  width:17px;
  height:17px
}
.tour-help-symbol {
  width:64px;
  height:64px;
  background:#e9efd9;
  color:#5a7337;
  border-radius:50%;
  margin:0 auto 25px;
  display:grid;
  place-items:center
}
.tour-help-symbol .ui-icon {
  width:30px;
  height:30px
}
.tour-help>span {
  font-size:8px;
  letter-spacing:.18em;
  color:#7c905d
}
.tour-help h2 {
  font-size:34px;
  line-height:1.1;
  margin:18px 0 24px
}
.tour-help p {
  font-size:12px;
  line-height:1.8
}
.tour-help .btn {
  margin-top:17px;
  font-size:11px;
  gap:20px
}
.tour-noscript {
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  padding:40px;
  color:white;
  z-index:10;
  background:#10272d
}
.tour-main button:focus-visible,.tour-main a:focus-visible {
  outline:2px solid #d0e18e;
  outline-offset:4px
}
@media(max-width:1000px) {
  .tour-direction {
    display:none
  }
  .tour-room {
    width:105px
  }
  .tour-top {
    left:25px;
    right:25px
  }
  .tour-bottom {
    left:25px;
    right:25px
  }
  .tour-tools {
    right:25px
  }
}
@media(max-width:720px) {
  .tour-page {
    padding-top:var(--mobile-header-height);
    height:100dvh
  }
  .tour-main {
    height:calc(100dvh - var(--mobile-header-height))
  }
  .tour-top {
    left:20px;
    right:16px;
    top:20px;
    gap:12px
  }
  .tour-scene-heading {
    max-width:calc(100% - 110px)
  }
  .tour-scene-heading>span {
    font-size:6px;
    letter-spacing:.1em
  }
  .tour-scene-heading h1 {
    font-size:30px;
    margin:10px 0 7px
  }
  .tour-scene-heading p {
    font-size:9px;
    max-width:200px;
    line-height:1.7
  }
  .tour-top-actions {
    gap:5px
  }
  .tour-top-actions button,.tour-top-actions a {
    width:31px;
    height:31px
  }
  .tour-top-actions .ui-icon {
    width:15px;
    height:15px
  }
  .tour-tools {
    right:16px;
    top:46%;
    gap:7px
  }
  .tour-tools button {
    width:35px;
    height:35px
  }
  .tour-tools .ui-icon {
    width:16px;
    height:16px
  }
  .tour-tools>span {
    height:3px
  }
  .tour-bottom {
    left:12px;
    right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
    display:block
  }
  .tour-room-list {
    width:100%;
    padding:6px;
    gap:5px;
    justify-content:space-between
  }
  .tour-room {
    flex:1 1 0;
    width:auto;
    min-width:0;
    padding-bottom:4px
  }
  .tour-room img {
    height:47px
  }
  .tour-room>span {
    font-size:8px;
    padding:7px 3px 0;
    white-space:nowrap;
    text-align:center
  }
  .tour-room small {
    display:none
  }
  .tour-hotspot-circle {
    width:39px;
    height:39px;
    box-shadow:0 0 0 5px #d0e18e20
  }
  .tour-hotspot-circle .ui-icon {
    width:18px;
    height:18px
  }
  .tour-hotspot-label {
    font-size:8px;
    padding:4px 7px
  }
  .tour-help {
    padding:40px 25px 25px
  }
  .tour-help h2 {
    font-size:30px
  }
  .tour-help p {
    font-size:11px
  }
  .tour-loading strong {
    font-size:23px
  }
  .tour-loading>span {
    font-size:10px
  }
  .tour-immersive .tour-top {
    top:calc(18px + env(safe-area-inset-top,0px))
  }
}
@media(max-height:500px) {
  .tour-room-list {
    padding:4px
  }
  .tour-room img {
    height:34px
  }
  .tour-room>span {
    font-size:8px;
    padding-top:4px
  }
  .tour-bottom {
    bottom:8px
  }
  .tour-top {
    top:12px
  }
  .tour-scene-heading h1 {
    font-size:26px;
    margin:8px 0
  }
  .tour-scene-heading p {
    display:none
  }
  .tour-tools {
    flex-direction:row;
    right:20px;
    top:auto;
    bottom:30px;
    transform:none
  }
  .tour-tools>span {
    width:5px
  }
  .tour-room-list {
    max-width:420px
  }
  .tour-room {
    width:85px
  }
  .tour-tools button {
    width:33px;
    height:33px
  }
}
@media(prefers-reduced-motion:reduce) {
  .tour-loading-ring {
    animation:none
  }
  .tour-hotspot-circle {
    transition:none
  }
}