/* ALL PANOS MODAL & SIDEBAR FOOTER COMPONENT
 * EliteStatus Modern Dark Theme
 */

/* Sidebar Footer Button Integration */
.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--glass-border);
  margin-top: auto;
}

.sidebar-btn-allpanos {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.sidebar-btn-icon {
  margin-inline-end: 8px;
  opacity: 0.8;
}

.sidebar-btn-allpanos:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.sidebar-btn-allpanos:active {
  transform: translateY(1px);
}

.sidebar-btn-allpanos.icon-only {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 8px auto !important;
}

/* ...but a link its component took away stays away: the rule above shows an icon-only link with !important, which also overrode
   the "display: none" a component writes on a link that has nothing to open (the floor plan's, on a tour with no floor plan),
   so that link showed as an icon all the same */
.sidebar-btn-allpanos.icon-only[style*='display: none'],
.sidebar-btn-allpanos.icon-only[style*='display:none'] {
  display: none !important;
}

/* The foot's other icons (side-nav.js builds them): one under the other like the links the page writes, a toggle's second
   drawing only while it is on, and the language list laid over its button */
.sidebar-footer > .sidebar-foot-extra {
  margin-bottom: 8px;
}
.sidebar-foot-extra {
  position: relative;
}
/* in the floating menu each has a foot of its own: one whose icon is put away (Room Info in a room with nothing to say, the map
   of a tour with no map) takes no room */
.floating-pills-footer:has(> .sidebar-foot-extra[style*='display: none']) {
  display: none;
}
.sidebar-foot-extra .sidebar-btn-icon--alt,
.sidebar-foot-extra.is-on .sidebar-btn-icon:not(.sidebar-btn-icon--alt) {
  display: none;
}
.sidebar-foot-extra.is-on .sidebar-btn-icon--alt {
  display: inline;
}
.sidebar-foot-lang {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.sidebar-btn-allpanos.icon-only .sidebar-btn-icon {
  margin-inline-end: 0 !important;
  /* the size of the icons of every other bar (24px; the page writes these at 18, the size that sits beside a link's words), and at
     full strength like them (Ben, 2026-10-12: "can the icons in the list nav side be the same size as all the other icons, they look
     smaller here") */
  width: 24px;
  height: 24px;
  opacity: 1;
}

/* Global Grid Modal */
.glass-modal {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  z-index: 2000; /* Above all sidebars and dock */
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.glass-modal.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.glass-modal-content {
  background: var(--primary-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  width: 60%;
  max-width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  backdrop-filter: var(--glass-blur);
  transform: scale(1);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.glass-modal.hidden .glass-modal-content {
  transform: scale(0.95);
}

/* Modal Header */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05); /* Slight bright bump instead of deep black */
}

.modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0.5px;
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.modal-close:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.1);
}

/* Modal Grid Core */
.panos-thumbnail-grid {
  display: grid;
  flex: 1;
  padding: 32px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  grid-gap: 24px;
  align-items: start;
  align-content: start;
}

/* Group by Categories: a group's name runs the width of the grid, above its rooms */
.panos-thumbnail-grid .panos-thumbnail-group {
  grid-column: 1 / -1;
  margin: 12px 0 -8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-main, #fff);
}
.panos-thumbnail-grid .panos-thumbnail-group:first-child {
  margin-top: 0;
}

/* Category Filter: the groups as a row of buttons over the grid (all-panos.js). The one that is on has the theme's hover
   background and a firmer edge; its word keeps the text colour, so it reads in every theme. */
.panos-thumbnail-grid .panos-thumbnail-filter {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: -4px;
}

.panos-thumbnail-chip {
  appearance: none;
  padding: 7px 14px;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
  border-radius: 999px;
  background: transparent;
  color: var(--text-main, #fff);
  font: inherit;
  font-size: 0.9em;
  line-height: 1.3;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.panos-thumbnail-chip:hover {
  background: var(--hover-bg-overlay, rgba(255, 255, 255, 0.1));
}

.panos-thumbnail-chip[aria-pressed='true'] {
  background: var(--hover-bg-overlay, rgba(255, 255, 255, 0.1));
  border-color: var(--text-main, #fff);
  font-weight: 600;
}

.panos-thumbnail-chip:focus-visible {
  outline: 2px solid var(--text-main, #fff);
  outline-offset: 2px;
}

/* Modal Grid Sizing Overrides */
.panos-thumbnail-grid.thumb-size-small {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.panos-thumbnail-grid.thumb-size-large {
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
}

/* Modal Grid Column Overrides */
.panos-thumbnail-grid.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.panos-thumbnail-grid.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.panos-thumbnail-grid.grid-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}
.panos-thumbnail-grid.grid-cols-6 {
  grid-template-columns: repeat(6, 1fr);
}
.panos-thumbnail-grid.grid-cols-7 {
  grid-template-columns: repeat(7, 1fr);
}
.panos-thumbnail-grid.grid-cols-8 {
  grid-template-columns: repeat(8, 1fr);
}

/* Modal Width Overrides */
.glass-modal-content.modal-width-wide {
  max-width: 1600px;
  width: 98%;
}
.glass-modal-content.modal-width-full {
  max-width: 100%;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
}

.glass-modal-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.glass-modal-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.6) transparent;
}
.glass-modal-content:hover {
  scrollbar-color: var(--accent-dark, rgba(0, 0, 0, 0.5)) transparent;
}

/* Custom Scrollbar for the Grid Window */
.glass-modal-content::-webkit-scrollbar {
  width: 8px;
}
.glass-modal-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}
.glass-modal-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 4px;
}
.glass-modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--accent-dark, rgba(0, 0, 0, 0.5));
}

/* Individual Scene Card */
.panos-thumbnail-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: block;
}

/* Bulletproof 2:1 Aspect Ratio hack that evaluates on child width correctly */
.panos-thumbnail-card::before {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 50%;
}

.panos-thumbnail-background {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

.panos-thumbnail-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px var(--accent-glow);
  transform: translateY(-4px);
}

.panos-thumbnail-card:hover .panos-thumbnail-background {
  transform: scale(1.05);
}

.panos-thumbnail-name {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 100%;
  padding: 32px 16px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
  /* always white: the strip under it is always black, whatever the theme's text colour (a theme with dark text, Campus, had
     near-black names on it) */
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

/* Responsive Scaling */
@media (max-width: 768px) {
  .panos-thumbnail-grid,
  .panos-thumbnail-grid[class*='thumb-size-'] {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 16px;
    padding: 16px;
  }

  .modal-title {
    font-size: 18px;
  }

  .glass-modal-content {
    height: 100vh;
    width: 100vw;
    border-radius: 0;
    border: none;
  }
}

/* Horizontal Layout for Icon-Only Buttons */
.sidebar-footer-horizontal {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  /* a low strip: the room pictures' and the others' icons with a little air, so the list above keeps its rows (it was 12px above and
     below icons in 44px circles: 69px for one line of icons) */
  gap: 4px 8px !important;
  padding: 6px 12px !important;
  /* a foot with many icons runs on to a second line; it does not push out of the menu */
  flex-wrap: wrap !important;
}

.sidebar-footer-horizontal .sidebar-btn-allpanos.icon-only {
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.sidebar-footer-horizontal #btnListAllRooms {
  margin-bottom: 0 !important;
}

.sidebar-footer-horizontal #allPanosSidebarFooter {
  display: inline-block !important;
  margin: 0 !important;
}

/* With the Category Filter's row at its top the grid starts at the very top: the row is a bar under the window's heading, with no
   space between the two (Ben, 2026-10-12: "move the filter bar up so it touches the top of the center area. It should look like
   it is a top nav bar under the heading options"; before that, the same day, the 32px the grid keeps above its pictures had
   been cut to 8). Last in the file, so it holds at every width. */
.panos-thumbnail-grid.has-filter {
  padding-top: 0;
}

/* ...and its row stays in view while the pictures scroll under it (Ben's list of 2026-10-12), so a visitor can change category
   without going back up. It reaches the grid's edges (the negative margin undoes the grid's own space at its sides) and has the
   window's own colour behind it, blurred like the window, so the pictures passing under do not show through as pictures. */
.panos-thumbnail-grid.has-filter .panos-thumbnail-filter {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0 -32px -4px;
  padding: 8px 32px;
  background: var(--primary-bg, rgba(11, 25, 44, 0.9));
  -webkit-backdrop-filter: var(--glass-blur, blur(12px));
  backdrop-filter: var(--glass-blur, blur(12px));
}

@media (max-width: 768px) {
  .panos-thumbnail-grid.has-filter .panos-thumbnail-filter {
    margin: 0 -16px -4px;
    padding: 8px 16px;
  }
}

/* In the Media Window the grid sits inside a pane that has 24px of its own all round: the grid starts at the pane's own top
   edge, so the row rests against the window's heading, and the row goes out to the pane's sides and stays at its top edge, or
   the pictures would pass in sight above it and beside it */
.media-window-pane .panos-thumbnail-grid.has-filter {
  margin-top: -24px;
}
.media-window-pane .panos-thumbnail-grid.has-filter .panos-thumbnail-filter {
  top: -24px;
  margin-inline-end: -56px;
  margin-inline-start: -56px;
  padding-inline-end: 56px;
  padding-inline-start: 56px;
}

@media (max-width: 768px) {
  .media-window-pane .panos-thumbnail-grid.has-filter .panos-thumbnail-filter {
    margin-inline-end: -40px;
    margin-inline-start: -40px;
    padding-inline-end: 40px;
    padding-inline-start: 40px;
  }
}