/* ============================================================================
   360° HOTSPOTS — tenant side
   Used wherever js/pano-viewer.js shows a room's saved 360° scenes: the public
   room listing (index.php), the admin preview (properties.php) and the
   landlord dashboard.

   Each `.tour-note` marker is a HOTSPOT built in the landlord's 360° editor
   and rendered here exactly as it was previewed there. Tapping it opens the
   landlord's note about something in the room.

   THE ONE RULE OF THIS SHEET
   Pannellum rewrites each marker's own `transform` on every animation frame to
   hold it at its pitch / yaw. So nothing here may set or animate `transform` on
   `.tour-marker` itself — doing that makes the marker drift away from the spot
   it was placed on while the tenant drags or zooms. Everything that needs a
   transform lives on a child instead:

     .tour-mk-art    the idle animation (bounce / scale)
     .tour-mk-pulse  the pulse ring
     .tour-mk-label  the caption

   `--tv-speed` is the seconds-per-cycle the landlord set with the speed slider,
   written onto each marker as an inline custom property by pano-viewer.js.
   Setting a custom property does not disturb Pannellum's inline `transform`,
   so the two coexist safely.
   ========================================================================== */

/* Pannellum sets `box-sizing: content-box` on everything inside its container,
   which would make each bordered layer 4px bigger than its stated size and
   knock the pulse ring off centre. The marker opts its own subtree back out. */
.pnlm-hotspot-base.tour-marker,
.pnlm-hotspot-base.tour-marker * { box-sizing: border-box; }

.pnlm-hotspot-base.tour-marker {
    width: 44px;
    height: 44px;
    display: grid !important;
    place-items: center;
    cursor: pointer;
    user-select: none;
    color: #fff;
    /* Defaults, so a marker saved before these settings existed still renders. */
    --tv-speed: 1.8s;
}

/* The painted part. Keeping it separate lets the marker box stay a plain,
   untransformed anchor for Pannellum. */
.tour-marker .tour-mk-art {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .95);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .4), 0 0 0 5px rgba(255, 255, 255, .14);
    transition: box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
    pointer-events: none;
}

.tour-marker:hover .tour-mk-art,
.tour-marker:focus-visible .tour-mk-art {
    box-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 0 0 8px rgba(255, 255, 255, .24);
    border-color: #fff;
}
.tour-marker:focus { outline: none; }

/* ── Marker style chosen in the 360° editor ─────────────────────────────── */
.tour-marker.accent-glass .tour-mk-art { background: rgba(15, 23, 42, .55); backdrop-filter: blur(8px); }
.tour-marker.accent-dark  .tour-mk-art { background: #0b1120; }
.tour-marker.accent-light .tour-mk-art { background: rgba(255, 255, 255, .94); color: #0b1120; }

/* The icon layer. */
.tour-marker .tour-mk-icon {
    display: grid;
    place-items: center;
    line-height: 0;
    pointer-events: none;
}
.tour-marker .tour-mk-icon svg { width: 20px; height: 20px; fill: currentColor; display: block; }

/* ── Caption ────────────────────────────────────────────────────────────── */
.tour-marker .tour-mk-label {
    position: absolute;
    left: 50%;
    top: 52px;
    transform: translateX(-50%);
    max-width: 190px;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(11, 17, 32, .88);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    font-family: 'Outfit', Helvetica, Arial, sans-serif;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity .16s ease;
    pointer-events: none;
}
/* The caption stays out of the way until the tenant shows interest in the
   marker, so a busy room does not fill up with floating text. */
.tour-marker:hover .tour-mk-label,
.tour-marker:focus-visible .tour-mk-label { opacity: 1; }

/* ── Idle animations ────────────────────────────────────────────────────── */
.tour-marker .tour-mk-pulse {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0;
    pointer-events: none;
}

.tour-marker.anim-pulse .tour-mk-pulse {
    animation: tour-pulse var(--tv-speed) cubic-bezier(.4, 0, .2, 1) infinite;
}
.tour-marker.anim-pulse .tour-mk-pulse.delayed { animation-delay: calc(var(--tv-speed) / 2); }

@keyframes tour-pulse {
    0%   { transform: scale(.85); opacity: .75; }
    70%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}

.tour-marker.anim-bounce .tour-mk-art {
    animation: tour-bounce var(--tv-speed) cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes tour-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.tour-marker.anim-scale .tour-mk-art {
    animation: tour-scale var(--tv-speed) cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes tour-scale {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.16); }
}

.tour-marker.anim-glow .tour-mk-art {
    animation: tour-glow var(--tv-speed) ease-in-out infinite;
}
@keyframes tour-glow {
    0%, 100% { box-shadow: 0 6px 22px rgba(0, 0, 0, .4), 0 0 0 5px rgba(255, 255, 255, .14); }
    50%      { box-shadow: 0 6px 22px rgba(0, 0, 0, .4), 0 0 0 13px rgba(255, 255, 255, .28); }
}

@media (prefers-reduced-motion: reduce) {
    .tour-marker .tour-mk-art,
    .tour-marker .tour-mk-pulse { animation: none !important; }
}

/* ── Marker size ────────────────────────────────────────────────────────── */
/* Something across the room needs a bigger marker than one at arm's length.
   Scaling the box rather than using transform keeps Pannellum's positioning
   maths correct, because it centres a marker from its own measured size. */
.tour-marker.size-sm { width: 34px; height: 34px; }
.tour-marker.size-sm .tour-mk-art { width: 34px; height: 34px; }
.tour-marker.size-sm .tour-mk-pulse { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.tour-marker.size-sm .tour-mk-icon svg { width: 16px; height: 16px; }
.tour-marker.size-sm .tour-mk-label { top: 42px; }

.tour-marker.size-lg { width: 58px; height: 58px; }
.tour-marker.size-lg .tour-mk-art { width: 58px; height: 58px; }
.tour-marker.size-lg .tour-mk-pulse { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
.tour-marker.size-lg .tour-mk-icon svg { width: 27px; height: 27px; }
.tour-marker.size-lg .tour-mk-label { top: 66px; }

/* Pannellum's own sprite artwork has no place on a custom marker. */
.pnlm-hotspot-base.tour-marker::before,
.pnlm-hotspot-base.tour-marker::after { display: none !important; }

/* ── SCENE SWITCHER ─────────────────────────────────────────────────────── */
/* One button per 360° area, along the bottom of the panorama. Only rendered
   for a room with two or more scenes. Scrolls sideways on a narrow screen
   instead of wrapping over the panorama. */
.tour-scene-bar {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 6px;
    max-width: calc(100% - 32px);
    padding: 5px;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: 9999px;
    background: rgba(11, 17, 32, .6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .14);
}
.tour-scene-bar::-webkit-scrollbar { display: none; }

.tour-scene-btn {
    flex: 0 0 auto;
    padding: 6px 14px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: rgba(255, 255, 255, .82);
    font-family: 'Outfit', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}
.tour-scene-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.tour-scene-btn:focus-visible { outline: 2px solid var(--g400, #4ade80); outline-offset: 1px; }
.tour-scene-btn.active { background: var(--g600, #16a34a); color: #fff; }

/* ── HOTSPOT NOTE POPUP ─────────────────────────────────────────────────── */
/* Opened over the panorama when a tenant taps a hotspot. Uses the listing
   page's own light surface rather than the viewer's dark shell so the note
   reads as content, not as chrome. */
.tour-note-pop {
    position: absolute;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(11, 17, 32, .6);
    backdrop-filter: blur(4px);
}

.tour-note-card {
    position: relative;
    width: min(380px, 100%);
    padding: 24px;
    border-radius: var(--r-lg, 22px);
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e8f0);
    box-shadow: var(--sh-lg, 0 16px 48px rgba(0, 0, 0, .28));
    text-align: center;
}

.tour-note-card .tour-note-ring {
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--g100, #dcfce7);
    border: 1px solid var(--g200, #bbf7d0);
    color: var(--g800, #166534);
    font-size: 1.1rem;
}

.tour-note-card h5 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink, #0a0f1e);
    margin: 0 0 6px;
}

.tour-note-card p {
    font-family: 'Outfit', sans-serif;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--ink-m, #5a6481);
    margin: 0;
}

.tour-note-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ink-f, #8e98b0);
    cursor: pointer;
}
.tour-note-close:hover { color: var(--ink, #0a0f1e); }