@charset "utf-8";
/**
 * SidebarStyles.css  --  refinement layer for the slide-out panel styles.
 * Loaded AFTER ClientViewPage.css (same specificity, later wins), so it only has to restate what changes.
 *
 *   sbs-default / sbs-glass / sbs-light : scene rows are full-width, flat, hairline-separated rows that run edge to edge
 *   sbs-business                        : brand-colour panel, refined: no framed top, quiet rows, accent bar on the current scene
 *
 * sbs-campus and sbs-realestate are untouched.
 * NEVER put PHP tags in this file (it is served statically).
 */

/* ═════════ Shared: scene rows run edge to edge ═════════
   .pane has 1.5rem of side padding; the negative margin lets each row reach the panel edges while its text still lines
   up with the rest of the pane (the padding is put back inside the row). */
#standard-viewer.sbs-default .sidebar .building-group,
#standard-viewer.sbs-glass .sidebar .building-group,
#standard-viewer.sbs-light .sidebar .building-group,
#standard-viewer.sbs-business .sidebar .building-group {
    margin: 0 -1.5rem; border-radius: 0; border-width: 0 0 1px 0; border-style: solid; background: transparent;
}
#standard-viewer.sbs-default .sidebar .building-group:first-of-type,
#standard-viewer.sbs-glass .sidebar .building-group:first-of-type,
#standard-viewer.sbs-light .sidebar .building-group:first-of-type,
#standard-viewer.sbs-business .sidebar .building-group:first-of-type { border-top-width: 1px; border-top-style: solid; }

#standard-viewer.sbs-default .sidebar .building-trigger,
#standard-viewer.sbs-glass .sidebar .building-trigger,
#standard-viewer.sbs-light .sidebar .building-trigger,
#standard-viewer.sbs-business .sidebar .building-trigger { padding: 0.9rem 1.5rem; transition: background 0.15s, box-shadow 0.15s; }
#standard-viewer.sbs-default .sidebar .building-trigger h3,
#standard-viewer.sbs-glass .sidebar .building-trigger h3,
#standard-viewer.sbs-light .sidebar .building-trigger h3 { font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; }

#standard-viewer.sbs-default .sidebar .sub-view-tray,
#standard-viewer.sbs-glass .sidebar .sub-view-tray,
#standard-viewer.sbs-light .sidebar .sub-view-tray,
#standard-viewer.sbs-business .sidebar .sub-view-tray { padding: 0.15rem 0 0.3rem; }

#standard-viewer.sbs-default .sidebar .view-link,
#standard-viewer.sbs-glass .sidebar .view-link,
#standard-viewer.sbs-light .sidebar .view-link,
#standard-viewer.sbs-business .sidebar .view-link {
    width: 100%; margin: 0; padding: 0.68rem 1.5rem 0.68rem 2.1rem;
    background: transparent; border: 0; border-left: 3px solid transparent; border-radius: 0;
    font-size: 0.86rem; font-weight: 500; transition: background 0.15s, border-color 0.15s;
}
/* single-scene rows (the trigger IS the link) keep the trigger's own padding and sit flush */
#standard-viewer.sbs-default .sidebar .building-trigger.view-link,
#standard-viewer.sbs-glass .sidebar .building-trigger.view-link,
#standard-viewer.sbs-light .sidebar .building-trigger.view-link,
#standard-viewer.sbs-business .sidebar .building-trigger.view-link {
    padding: 0.9rem 1.5rem 0.9rem calc(1.5rem - 3px); border: 0; border-left: 3px solid transparent; border-radius: 0; font-weight: 500;
}

/* hotspot shortcuts under a scene: same flat rhythm */
#standard-viewer.sbs-default .sidebar .hs-focus-list,
#standard-viewer.sbs-glass .sidebar .hs-focus-list,
#standard-viewer.sbs-light .sidebar .hs-focus-list,
#standard-viewer.sbs-business .sidebar .hs-focus-list { padding: 0 0 0.35rem; }
#standard-viewer.sbs-default .sidebar .hs-focus-item,
#standard-viewer.sbs-glass .sidebar .hs-focus-item,
#standard-viewer.sbs-light .sidebar .hs-focus-item,
#standard-viewer.sbs-business .sidebar .hs-focus-item { width: 100%; margin: 0; }
#standard-viewer.sbs-default .sidebar .hs-focus-btn,
#standard-viewer.sbs-glass .sidebar .hs-focus-btn,
#standard-viewer.sbs-light .sidebar .hs-focus-btn,
#standard-viewer.sbs-business .sidebar .hs-focus-btn {
    border: 0; border-left: 3px solid transparent; border-radius: 0; background: transparent;
    padding: 0.5rem 1.5rem 0.5rem 2.1rem; font-size: 0.8rem;
}

/* ═════════ DEFAULT (neutral black glass) ═════════
   Deliberately generic, so it suits any client and does not look "branded" next to other tour platforms: black glass, white
   text, white buttons with black lettering. The tour's Primary survives only as a soft edge colour (the panel's hairline edge
   and every divider), so a green tour gets soft green lines and a navy tour soft navy ones. Indicators (active tab, current
   scene) are white. No solid colour bars anywhere. */
#standard-viewer.sbs-default .sidebar {
    --df-line: color-mix(in srgb, var(--sidebar-bg-raw, #5C8B72) 42%, transparent);   /* soft brand-coloured hairline */
    background-color: color-mix(in srgb, #000 76%, transparent);
    background-image: none;
    -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2);
    border: 0;
    box-shadow: 0 0 0 1px var(--df-line), inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 60px rgba(0,0,0,0.5), 0 4px 14px rgba(0,0,0,0.35);
}
#standard-viewer.sbs-default .sidebar .tab-nav { background: transparent; border-bottom: 1px solid var(--df-line); padding: 0 0.5rem; }
#standard-viewer.sbs-default .sidebar .tab-btn { position: relative; border-bottom: 0; font-size: 0.78rem; letter-spacing: 0.14em; opacity: 0.72; transition: opacity 0.15s, background-color 0.15s; }
#standard-viewer.sbs-default .sidebar .tab-btn:hover { opacity: 1; }
/* the active tab is a shade darker than the bar, so it reads as the selected one (the white tab marker stays) */
#standard-viewer.sbs-default .sidebar .tab-btn.active { background: rgba(0,0,0,0.3); opacity: 1; border-bottom: 0; }
#standard-viewer.sbs-default .sidebar .tab-btn.active::after {
    content: ""; position: absolute; left: 50%; bottom: 0; width: 34px; height: 3px; margin-left: -17px;
    background: #fff; border-radius: 3px 3px 0 0;
}
#standard-viewer.sbs-default .sidebar .building-group { border-color: var(--df-line); }
#standard-viewer.sbs-default .sidebar .building-trigger:hover { background: rgba(255,255,255,0.06); }
#standard-viewer.sbs-default .sidebar .building-group.active .building-trigger,
#standard-viewer.sbs-default .sidebar .building-group.active .building-trigger.view-link {
    background: rgba(255,255,255,0.08); box-shadow: inset 3px 0 0 #fff;
}
#standard-viewer.sbs-default .sidebar .sub-view-tray { background: rgba(0,0,0,0.35); }
#standard-viewer.sbs-default .sidebar .view-link:hover,
#standard-viewer.sbs-default .sidebar .hs-focus-btn:hover { background: rgba(255,255,255,0.07); border-color: transparent; border-left-color: rgba(255,255,255,0.4); }
#standard-viewer.sbs-default .sidebar .view-link.current { background: rgba(255,255,255,0.1); border-color: transparent; border-left-color: #fff; font-weight: 650; }
#standard-viewer.sbs-default .sidebar .building-group.active .building-trigger.view-link { border-left-color: transparent; }
#standard-viewer.sbs-default .sidebar .hs-focus-btn:focus,
#standard-viewer.sbs-default .sidebar .hs-focus-btn:focus-visible { background: rgba(255,255,255,0.1); border-left-color: #fff; }

/* The accessibility bar and key boxes were solid dark-brand bars: now black */
#standard-viewer.sbs-default .sidebar #std-motion-toggle-row { background: rgba(0,0,0,0.45); border-top: 1px solid var(--df-line); border-bottom: 1px solid var(--df-line); }
#standard-viewer.sbs-default .sidebar #std-motion-toggle-label input[type="checkbox"] { accent-color: #fff; }
#standard-viewer.sbs-default .sidebar .shortcut-dashboard { background: transparent; border-color: var(--df-line); }
#standard-viewer.sbs-default .sidebar .shortcut-item b { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.18); }
#standard-viewer.sbs-default .sidebar .shortcut-item b.active-key { background: #fff; color: #000; border-color: #fff; box-shadow: none; }
#standard-viewer.sbs-default .sidebar .sidebar-footer { background: rgba(0,0,0,0.5); border-top: 1px solid var(--df-line); }

/* Buttons: white with black lettering. The secondary action is a white outline so there is still a clear first choice. */
#standard-viewer.sbs-default .sidebar .btn-apply,
#standard-viewer.sbs-default .sidebar .hotspot-jump,
#standard-viewer.sbs-default .sidebar .motion-bar-help-btn,
#standard-viewer.sbs-default .sidebar #btn-back-suite { background: #e4e5e3; color: #0b0b0b; border: 1px solid #e4e5e3; }
#standard-viewer.sbs-default .sidebar .btn-apply:hover,
#standard-viewer.sbs-default .sidebar .hotspot-jump:hover,
#standard-viewer.sbs-default .sidebar .motion-bar-help-btn:hover { background: #f1f2f0; opacity: 1; filter: none; }
#standard-viewer.sbs-default .sidebar .btn-tour { background: transparent; border: 1px solid rgba(255,255,255,0.55); color: #fff; }
#standard-viewer.sbs-default .sidebar .btn-tour:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* ═════════ GLASS ═════════ */
#standard-viewer.sbs-glass .sidebar .building-group { border-color: rgba(255,255,255,0.12); }
#standard-viewer.sbs-glass .sidebar .building-trigger:hover { background: rgba(255,255,255,0.08); }
#standard-viewer.sbs-glass .sidebar .building-group.active .building-trigger,
#standard-viewer.sbs-glass .sidebar .building-group.active .building-trigger.view-link {
    background: linear-gradient(90deg, color-mix(in srgb, var(--secondary-color) 34%, transparent), color-mix(in srgb, var(--secondary-color) 8%, transparent));
    box-shadow: inset 3px 0 0 var(--secondary-color);
}
#standard-viewer.sbs-glass .sidebar .sub-view-tray { background: rgba(255,255,255,0.04); }
#standard-viewer.sbs-glass .sidebar .view-link:hover,
#standard-viewer.sbs-glass .sidebar .hs-focus-btn:hover { background: rgba(255,255,255,0.12); border-color: transparent; border-left-color: rgba(255,255,255,0.4); }
#standard-viewer.sbs-glass .sidebar .view-link.current { background: linear-gradient(90deg, color-mix(in srgb, var(--secondary-color) 38%, transparent), color-mix(in srgb, var(--secondary-color) 8%, transparent)); border-color: transparent; border-left-color: var(--secondary-color); font-weight: 650; }
#standard-viewer.sbs-glass .sidebar .building-group.active .building-trigger.view-link { border-left-color: transparent; }
#standard-viewer.sbs-glass .sidebar .hs-focus-btn:focus,
#standard-viewer.sbs-glass .sidebar .hs-focus-btn:focus-visible { background: color-mix(in srgb, var(--secondary-color) 30%, transparent); border-left-color: var(--secondary-color); }

/* ═════════ LIGHT ═════════ */
#standard-viewer.sbs-light .sidebar .building-group { border-color: rgba(0,0,0,0.08); }
#standard-viewer.sbs-light .sidebar .building-trigger:hover { background: rgba(0,0,0,0.04); }
#standard-viewer.sbs-light .sidebar .building-group.active .building-trigger,
#standard-viewer.sbs-light .sidebar .building-group.active .building-trigger.view-link {
    background: color-mix(in srgb, var(--secondary-color) 16%, transparent); color: #1b2330;
    box-shadow: inset 3px 0 0 var(--secondary-color);
}
#standard-viewer.sbs-light .sidebar .sub-view-tray { background: rgba(0,0,0,0.035); }
#standard-viewer.sbs-light .sidebar .view-link,
#standard-viewer.sbs-light .sidebar .hs-focus-btn { color: #1b2330; }
#standard-viewer.sbs-light .sidebar .view-link:hover,
#standard-viewer.sbs-light .sidebar .hs-focus-btn:hover { background: rgba(0,0,0,0.05); border-color: transparent; border-left-color: rgba(0,0,0,0.3); }
#standard-viewer.sbs-light .sidebar .view-link.current { background: color-mix(in srgb, var(--secondary-color) 20%, transparent); color: #1b2330; border-color: transparent; border-left-color: var(--secondary-color); font-weight: 650; }
#standard-viewer.sbs-light .sidebar .building-group.active .building-trigger.view-link { border-left-color: transparent; }
#standard-viewer.sbs-light .sidebar .hs-focus-btn:focus,
#standard-viewer.sbs-light .sidebar .hs-focus-btn:focus-visible { background: color-mix(in srgb, var(--secondary-color) 16%, transparent); color: #1b2330; border-left-color: var(--secondary-color); }

/* ═════════ BUSINESS -- black glass, brand-coloured depth, crisp structure ═════════
   Same dark glass family as Default (so white text is always the safe pairing -- --dock-text is computed against the dark tint),
   but more opaque and more structured: square-ish edges, uppercase labels, hairline rules, an accent bar on the current scene.
   The tour's Primary shows as a deeper, darker glow in two corners. No framed top, no outline. Index numerals (01, 02 ...) appear
   only when the tour has "Show Scene Numbers" turned on (client_view.php adds .show-scene-nums to #standard-viewer). */
#standard-viewer.sbs-business .sidebar {
    --sidebar-text: var(--dock-text, #fff);
    --tab-inactive-text: var(--dock-text, #fff);
    --text-ada: var(--dock-text, #fff);
    --label-accent: var(--dock-text, #fff);
    --bz-line: color-mix(in srgb, var(--dock-text, #fff) 18%, transparent);
    --bz-hover: color-mix(in srgb, var(--dock-text, #fff) 8%, transparent);
    --sb-deep: color-mix(in srgb, var(--sidebar-bg-raw, #5C8B72) 50%, #000);   /* a darker version of the tour's Primary */
    border: 0;
    background-color: color-mix(in srgb, #040605 86%, transparent);
    background-image:
        radial-gradient(125% 55% at 0% 0%, color-mix(in srgb, var(--sb-deep) 82%, transparent), transparent 66%),
        radial-gradient(110% 50% at 100% 100%, color-mix(in srgb, var(--sb-deep) 60%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--sb-deep) 30%, transparent), transparent 42%);
    -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
    color: var(--dock-text, #fff);
    box-shadow: 0 22px 56px rgba(0,0,0,0.5), 0 3px 10px rgba(0,0,0,0.35);
}
#standard-viewer.sbs-business .sidebar .tab-nav { background: transparent; border-bottom: 1px solid var(--bz-line); padding: 0 0.5rem; }
#standard-viewer.sbs-business .sidebar .tab-btn { position: relative; color: var(--dock-text, #fff); font-size: 0.74rem; letter-spacing: 0.18em; font-weight: 600; padding: 1.3rem 0.75rem 1.2rem; border-bottom: 0; }
#standard-viewer.sbs-business .sidebar .tab-btn:hover { background: var(--bz-hover); }
#standard-viewer.sbs-business .sidebar .tab-btn.active { background: transparent; color: var(--dock-text, #fff); font-weight: 800; border-bottom: 0; border-radius: 0; }
#standard-viewer.sbs-business .sidebar .tab-btn.active::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 38px; height: 3px; margin-left: -19px; background: var(--secondary-color); }
#standard-viewer.sbs-business .sidebar .tab-btn small,
#standard-viewer.sbs-business .sidebar .tab-btn.active small { color: var(--dock-text, #fff); }

#standard-viewer.sbs-business .sidebar .identity-text h2,
#standard-viewer.sbs-business .sidebar .identity-text p,
#standard-viewer.sbs-business .sidebar #std-scene-title { color: var(--dock-text, #fff); }
#standard-viewer.sbs-business .sidebar .building-group { border-color: var(--bz-line); }
#standard-viewer.sbs-business .sidebar .building-trigger { color: var(--dock-text, #fff); }
#standard-viewer.sbs-business .sidebar .building-trigger h3 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; display: flex; align-items: baseline; }
/* Index numerals (01, 02, ...) down the left, only with "Show Scene Numbers" on. Same colour as the label, so no contrast cost. */
#standard-viewer.show-scene-nums.sbs-business .sidebar .pane { counter-reset: bzscene; }
#standard-viewer.show-scene-nums.sbs-business .sidebar .building-group { counter-increment: bzscene; }
#standard-viewer.show-scene-nums.sbs-business .sidebar .building-trigger h3::before {
    content: counter(bzscene, decimal-leading-zero); flex: 0 0 2.1rem; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.1em; font-variant-numeric: tabular-nums;
}
#standard-viewer.sbs-business .sidebar .building-trigger,
#standard-viewer.sbs-business .sidebar .building-trigger.view-link { padding-top: 1.1rem; padding-bottom: 1.1rem; }
#standard-viewer.show-scene-nums.sbs-business .sidebar .view-link { padding-left: 3.6rem; }
#standard-viewer.show-scene-nums.sbs-business .sidebar .building-trigger.view-link { padding-left: calc(1.5rem - 3px); }
/* the scrolling middle must be see-through (it is a solid derived colour by default), or the black glass never shows */
#standard-viewer.sbs-business .sidebar .main-content { background: transparent; }
#standard-viewer.sbs-business .sidebar .building-trigger:hover { background: var(--bz-hover); }
#standard-viewer.sbs-business .sidebar .building-group.active .building-trigger,
#standard-viewer.sbs-business .sidebar .building-group.active .building-trigger.view-link {
    background: color-mix(in srgb, var(--dock-text, #fff) 10%, transparent); color: var(--dock-text, #fff);
    box-shadow: inset 3px 0 0 var(--secondary-color);
}
#standard-viewer.sbs-business .sidebar .sub-view-tray { background: color-mix(in srgb, var(--dock-text, #fff) 5%, transparent); }
#standard-viewer.sbs-business .sidebar .view-link,
#standard-viewer.sbs-business .sidebar .hs-focus-btn { color: var(--dock-text, #fff); }
#standard-viewer.sbs-business .sidebar .view-link { font-size: 0.84rem; letter-spacing: 0.02em; }
#standard-viewer.sbs-business .sidebar .view-link:hover,
#standard-viewer.sbs-business .sidebar .hs-focus-btn:hover { background: var(--bz-hover); border-color: transparent; border-left-color: color-mix(in srgb, var(--dock-text, #fff) 45%, transparent); }
#standard-viewer.sbs-business .sidebar .view-link.current { background: color-mix(in srgb, var(--dock-text, #fff) 11%, transparent); color: var(--dock-text, #fff); border-color: transparent; border-left-color: var(--secondary-color); font-weight: 700; }
#standard-viewer.sbs-business .sidebar .building-group.active .building-trigger.view-link { border-left-color: transparent; }
#standard-viewer.sbs-business .sidebar .hs-focus-btn:focus,
#standard-viewer.sbs-business .sidebar .hs-focus-btn:focus-visible { background: color-mix(in srgb, var(--dock-text, #fff) 11%, transparent); border-left-color: var(--secondary-color); }

#standard-viewer.sbs-business .sidebar .sidebar-footer { background: color-mix(in srgb, var(--dock-text, #fff) 5%, transparent); border-top: 1px solid var(--bz-line); }
#standard-viewer.sbs-business .sidebar .phone-label,
#standard-viewer.sbs-business .sidebar .footer-phone,
#standard-viewer.sbs-business .sidebar .shortcut-item span,
#standard-viewer.sbs-business .sidebar .copyright-row { color: var(--dock-text, #fff); }
#standard-viewer.sbs-business .sidebar .btn-cta { font-size: 0.68rem; letter-spacing: 0.14em; padding: 0.95rem 0.85rem; }
#standard-viewer.sbs-business .sidebar .btn-tour { background: transparent; color: var(--dock-text, #fff); border: 1px solid color-mix(in srgb, var(--dock-text, #fff) 55%, transparent); }
#standard-viewer.sbs-business .sidebar .btn-tour:hover { border-color: var(--dock-text, #fff); }
#standard-viewer.sbs-business .sidebar .shortcut-dashboard { background: transparent; border-color: var(--bz-line); }
#standard-viewer.sbs-business .sidebar .feature-card { background: transparent; border-color: var(--bz-line); }
#standard-viewer.sbs-business .sidebar .copyright-row { letter-spacing: 0.1em; }

@media (min-width: 1400px) {
    #standard-viewer.sbs-business .sidebar { border-radius: 4px; }
    #standard-viewer.sbs-business .sidebar .tab-nav { border-radius: 4px 4px 0 0; }
    #standard-viewer.sbs-business .sidebar .sidebar-footer { border-radius: 0 0 4px 4px; }
}

/* Very narrow screens: the pane's side padding shrinks, so the row bleed must too */
@media (max-width: 260px) {
    #standard-viewer.sbs-default .sidebar .building-group,
    #standard-viewer.sbs-glass .sidebar .building-group,
    #standard-viewer.sbs-light .sidebar .building-group,
    #standard-viewer.sbs-business .sidebar .building-group { margin: 0 -0.75rem; }
    #standard-viewer.sbs-default .sidebar .building-trigger,
    #standard-viewer.sbs-glass .sidebar .building-trigger,
    #standard-viewer.sbs-light .sidebar .building-trigger,
    #standard-viewer.sbs-business .sidebar .building-trigger,
    #standard-viewer.sbs-default .sidebar .building-trigger.view-link,
    #standard-viewer.sbs-glass .sidebar .building-trigger.view-link,
    #standard-viewer.sbs-light .sidebar .building-trigger.view-link,
    #standard-viewer.sbs-business .sidebar .building-trigger.view-link { padding-left: calc(0.75rem - 3px); padding-right: 0.75rem; }
}


/* ═════════ THUMBNAIL BARS (Basic dock, Gallery rail) + their control bars: the same black glass ═════════
   Same recipe as the Default sidebar: transparent black glass, a faint glow of the tour's Primary, soft depth. The frame
   line is now the tour's Primary (green on the standard scheme) instead of the Secondary (tan); tan stays reserved for
   the selected thumbnail. Prefixed "html body" so it wins over the theme stylesheets, which load after this file. */
html body #basic-bottom-dock,
html body #basic-controls-cluster,
html body #gallery-rail,
html body #gallery-rail-tab,
html body #gallery-controls-cluster {
    --bar-line: color-mix(in srgb, var(--sidebar-bg-raw, #5C8B72) 60%, transparent);
    background-color: color-mix(in srgb, #000 76%, transparent);
    background-image: none;
    -webkit-backdrop-filter: blur(24px) saturate(1.25); backdrop-filter: blur(24px) saturate(1.25);
    box-shadow: 0 10px 34px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
}
html body #basic-bottom-dock { border-top: 1px solid var(--bar-line); }
html body #gallery-rail { border-right: 1px solid var(--bar-line); }
html body #basic-controls-cluster,
html body #gallery-controls-cluster { border: 1px solid var(--bar-line); }
html body #gallery-rail-tab { border: 1px solid var(--bar-line); border-left: 0; }

/* Quieter buttons on the glass, to match */
html body #basic-scroll-left, html body #basic-scroll-right,
html body #gallery-scroll-up, html body #gallery-scroll-down { border-color: rgba(255,255,255,0.18); }
html body #basic-thumbnail-track .view-link.basic-thumb,
html body #gallery-thumbnail-track .view-link.gallery-thumb { background: rgba(255,255,255,0.05); }