/* viewer.css — tour chrome. Pannellum's own CSS is shared/pannellum.css */

.tour {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  background: #0c0d10;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.tour__stage { position: absolute; inset: 0; }
.tour__stage.is-editing { cursor: crosshair; }

/* ---- title chip ---- */
.tour__title {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 30; display: flex; gap: 8px; align-items: baseline;
  max-width: calc(100% - 32px);
  padding: 8px 16px; border-radius: 999px;
  background: rgba(12, 13, 16, 0.55); backdrop-filter: blur(8px);
  color: #fff; pointer-events: none; white-space: nowrap;
}
.tour__title-tour { font-weight: 600; font-size: 14px; }
.tour__title-scene { font-size: 13px; opacity: 0.72; overflow: hidden; text-overflow: ellipsis; }
.tour__title-scene::before { content: "· "; }

/* ---- home / back-to-start button ---- */
.tour__home {
  position: absolute; top: 14px; left: 14px; z-index: 31;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px 9px 11px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.95); color: #16181d;
  font: 600 13px/1 system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  transition: opacity 0.2s, transform 0.2s, background 0.15s;
}
.tour__home:hover { background: #fff; transform: translateY(-1px); }
.tour__home svg { display: block; }
.tour__home.is-hidden { opacity: 0; pointer-events: none; transform: translateY(-6px); }

/* ---- thumbnail bar ---- */
.tour__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; gap: 10px; padding: 12px 14px; overflow-x: auto;
  background: linear-gradient(to top, rgba(8, 9, 11, 0.82), rgba(8, 9, 11, 0));
  scrollbar-width: thin;
}
.tour-thumb {
  position: relative; flex: 0 0 auto; width: 132px; height: 76px;
  border: 2px solid transparent; border-radius: 8px;
  background-size: cover; background-position: center; background-color: #2a2d34;
  cursor: pointer; padding: 0; color: #fff;
  transition: border-color 0.15s, transform 0.15s;
}
.tour-thumb[data-fallback="1"] {
  background-image: linear-gradient(150deg, hsl(var(--h, 210), 40%, 42%), hsl(var(--h, 210), 30%, 22%));
}
.tour-thumb:hover { transform: translateY(-2px); }
.tour-thumb.is-active { border-color: #fff; }
.tour-thumb.is-home {
  position: sticky; left: 0; z-index: 2;
  box-shadow: 6px 0 12px -6px rgba(8, 9, 11, 0.9);
}
.tour-thumb.is-home::after {
  content: ""; position: absolute; inset: 0; border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.tour-thumb__home {
  position: absolute; top: 4px; left: 4px; z-index: 2;
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #16181d;
}
.tour-thumb__home svg { width: 13px; height: 13px; }
.tour-thumb__name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px;
  font-size: 11px; line-height: 1.2; text-align: left;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
  border-radius: 0 0 6px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- hotspots ----
   Pannellum drives .tour-hs position with an inline transform, so it must be a
   0x0 anchor; .tour-hs__inner does the visual centring. */
.tour-hs { position: absolute; width: 0; height: 0; }
.tour-hs__inner {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; cursor: pointer;
}

/* nav = labelled pill */
.tour-hs__pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.96); color: #16181d;
  font: 600 13px/1 system-ui, sans-serif; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s, background 0.15s;
}
.tour-hs--nav:hover .tour-hs__pill { transform: scale(1.06); background: #fff; }
.tour-hs__arrow {
  width: 0; height: 0; flex: 0 0 auto;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 8px solid #16181d;
}
.tour-hs__pill::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: rgba(255, 255, 255, 0.96);
}
.tour-hs__pill { position: relative; }

/* whatsapp link pill */
.tour-hs--wa .tour-hs__pill { background: #25D366; color: #fff; }
.tour-hs--wa .tour-hs__pill::after { border-top-color: #25D366; }
.tour-hs--wa:hover .tour-hs__pill { background: #1ebe5b; }
.tour-hs--wa svg { display: block; flex: 0 0 auto; }

/* info = "i" dot with pill label on hover */
.tour-hs--info .tour-hs__dot {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: #2f7de1; color: #fff;
  font: italic 700 14px/1 Georgia, "Times New Roman", serif;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.tour-hs__pill--info {
  margin-top: 7px; padding: 5px 11px; border-radius: 999px;
  background: rgba(12, 13, 16, 0.78); color: #fff;
  font: 500 12px/1 system-ui, sans-serif; white-space: nowrap;
  opacity: 0; transform: translateY(-3px); transition: opacity 0.15s, transform 0.15s;
}
.tour-hs--info:hover .tour-hs__pill--info { opacity: 1; transform: translateY(0); }

/* emblem / logo info spot — image badge instead of the "i" dot */
.tour-hs__emblem {
  display: block; width: 62px; height: auto;
  border-radius: 50%;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s;
}
.tour-hs--emblem { cursor: default; }
.tour-hs--emblem:hover .tour-hs__emblem { transform: scale(1.05); }

/* ---- info modal ---- */
.tour-modal {
  position: absolute; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(6, 7, 9, 0.55); backdrop-filter: blur(2px);
}
.tour-modal[hidden] { display: none; }
.tour-modal__card {
  position: relative; max-width: min(420px, 86vw); padding: 22px 24px;
  border-radius: 14px; background: #fff; color: #16181d;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.tour-modal__x {
  position: absolute; top: 8px; right: 12px; border: 0; background: none;
  font-size: 24px; line-height: 1; cursor: pointer; color: #6b7280;
}
.tour-modal__title { margin: 0 0 8px; font-size: 17px; }
.tour-modal__body { margin: 0; font-size: 14px; line-height: 1.55; color: #374151; }

/* ---- edit-mode badge ---- */
.tour__badge {
  position: absolute; top: 58px; left: 50%; transform: translateX(-50%);
  z-index: 40; padding: 7px 14px; border-radius: 8px;
  background: #f5c518; color: #16181d;
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap;
}
.tour__badge[hidden] { display: none; }

/* ---- error ---- */
.tour__error {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 24px; text-align: center; color: #e5e7eb; font-size: 14px; line-height: 1.6;
}

@media (max-width: 560px) {
  .tour__home span { display: none; }
  .tour__home { padding: 9px; }
  .tour__title { font-size: 13px; }
}