:root {
  --navy: #08265c;
  --navy-dark: #051a40;
  --blue: #1976d2;
  --blue-light: #eaf3ff;

  --white: #ffffff;
  --background: #eef2f7;
  --surface: #ffffff;

  --text: #172033;
  --muted: #667085;
  --border: #d8dee9;

  --danger: #b42318;
  --danger-light: #fff1f0;

  --success: #177245;
  --success-light: #eaf8f0;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;

  background: var(--background);
  color: var(--text);

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

button,
input,
select {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.app {
  display: grid;
  grid-template-rows: auto 1fr;

  width: 100%;
  height: 100%;
}

/* -------------------------------------------------------
   TOP BAR
------------------------------------------------------- */

.top-bar {
  position: relative;
  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  /*
    Compact editor header.
  */

  min-height: 40px;

  padding: 4px 12px;

  background: var(--navy);
  color: var(--white);

  box-shadow:
    0 2px 8px rgb(8 38 92 / 20%);
}

.app-heading {
  min-width: 0;
}

.app-label {
  margin: 0 0 1px;

  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.11em;

  opacity: 0.76;
}

h1 {
  margin: 0;

  font-size: 1rem;
  font-weight: 700;
  line-height: 1.05;
}

.header-actions {
  display: flex;
  align-items: center;

  gap: 10px;
}

/* Visitor/Admin mode switch */

.mode-switch {
  display: flex;

  padding: 3px;

  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 11px;

  background: rgb(255 255 255 / 10%);
}

.mode-button {
  min-height: 28px;

  padding: 4px 9px;

  border: 0;
  border-radius: 8px;

  background: transparent;
  color: rgb(255 255 255 / 78%);

  font-weight: 700;
}

.mode-button:hover {
  color: var(--white);
}

.mode-button.active {
  background: var(--white);
  color: var(--navy);
}

/* -------------------------------------------------------
   PRIVATE ADMIN ACCESS
------------------------------------------------------- */

.admin-access-button {
  min-height: 30px;

  padding: 5px 11px;

  border:
    1px solid
    rgb(255 255 255 / 38%);

  border-radius: 9px;

  background:
    rgb(255 255 255 / 12%);

  color: var(--white);

  font-size: 0.78rem;
  font-weight: 700;
}


.admin-access-button:hover {
  background:
    rgb(255 255 255 / 22%);
}


.admin-access-button[hidden] {
  display: none !important;
}

/* Centre button */

.recenter-button {
  min-height: 30px;

  padding: 5px 10px;

  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 11px;

  background: var(--white);
  color: var(--navy);

  font-weight: 700;
}

.recenter-button:hover {
  background: #edf4ff;
}

/* -------------------------------------------------------
   MAP
------------------------------------------------------- */

.map-container {
  position: relative;

  min-width: 0;
  min-height: 0;
}

/*
  Location notifications belong to Visitor mode.

  Admin/editor mode keeps the working area unobstructed.
*/

.map-container.editor-mode
.location-card,
.map-container.editor-mode
.status-card {
  display: none !important;
}

.map {
  width: 100%;
  height: 100%;

  background: #dce5f2;
}

/* -------------------------------------------------------
   VISITOR EVENT SELECTOR
------------------------------------------------------- */

.visitor-event-panel {
  position: absolute;
  z-index: 8;

  top: 16px;
  left: 16px;

  width: min(290px, calc(100% - 32px));

  padding: 13px;

  border: 1px solid var(--border);
  border-radius: 14px;

  background: rgb(255 255 255 / 96%);

  box-shadow: 0 8px 24px rgb(16 24 40 / 16%);

  backdrop-filter: blur(8px);
}

.visitor-event-panel label {
  display: block;

  margin-bottom: 7px;

  font-size: 0.82rem;
  font-weight: 700;

  color: var(--navy);
}

.visitor-event-panel select {
  width: 100%;

  padding: 10px 12px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: var(--white);
  color: var(--text);
}

/* -------------------------------------------------------
   ADMIN PANEL
------------------------------------------------------- */

.admin-panel {
  position: absolute;
  z-index: 12;

  top: 14px;
  bottom: 14px;
  left: 14px;

  width: min(370px, calc(100% - 28px));

  overflow-y: auto;

  border: 1px solid var(--border);
  border-radius: 16px;

  background: rgb(255 255 255 / 98%);

  box-shadow: 0 12px 35px rgb(16 24 40 / 24%);

  backdrop-filter: blur(10px);
}

.admin-panel-header {
  display: none;

  position: sticky;
  top: 0;
  z-index: 2;

  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;

  padding: 16px;

  border-bottom: 1px solid var(--border);

  background: var(--navy);
  color: var(--white);

  border-radius: 15px 15px 0 0;
}

.panel-label {
  margin: 0 0 3px;

  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;

  opacity: 0.72;
}

.admin-panel h2 {
  margin: 0;

  font-size: 1.25rem;
}

.icon-button {
  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;

  flex: 0 0 auto;

  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 9px;

  background: rgb(255 255 255 / 10%);
  color: var(--white);

  font-size: 1.5rem;
  line-height: 1;
}

.icon-button:hover {
  background: rgb(255 255 255 / 20%);
}

.admin-section {
  padding: 10px 12px;

  border-bottom: 1px solid #edf0f4;
}

.admin-section:last-child {
  border-bottom: 0;
}

.admin-section label,
.section-title {
  display: block;

  margin: 0 0 5px;

  color: var(--navy);

  font-size: 0.84rem;
  font-weight: 700;
}

.admin-section input,
.admin-section select {
  width: 100%;

  padding: 10px 11px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: var(--white);
  color: var(--text);
}

.admin-section input:focus,
.admin-section select:focus,
.visitor-event-panel select:focus {
  border-color: var(--blue);

  outline: 3px solid rgb(25 118 210 / 16%);
}

.field-help {
  margin: 8px 0 0;

  color: var(--muted);

  font-size: 0.78rem;
  line-height: 1.45;
}

/* Admin buttons */

.admin-button-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 8px;
}

.primary-button,
.secondary-button,
.danger-button {
  min-height: 40px;

  padding: 9px 11px;

  border-radius: 9px;

  font-weight: 700;
}

.primary-button {
  border: 1px solid var(--navy);

  background: var(--navy);
  color: var(--white);
}

.primary-button:hover {
  background: var(--navy-dark);
}

.secondary-button {
  border: 1px solid var(--border);

  background: var(--white);
  color: var(--navy);
}

.secondary-button:hover {
  background: var(--blue-light);
  border-color: #aac9ed;
}

.danger-button {
  border: 1px solid #f0b6b0;

  background: var(--danger-light);
  color: var(--danger);
}

.danger-button:hover {
  background: #ffe4e1;
}

/* Saved locations */

.saved-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
}

.saved-heading .section-title {
  margin-bottom: 0;
}

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 25px;
  height: 25px;

  padding: 0 7px;

  border-radius: 999px;

  background: var(--blue-light);
  color: var(--blue);

  font-size: 0.76rem;
  font-weight: 700;
}

.saved-locations-list {
  display: grid;

  gap: 8px;

  margin-top: 10px;
}

.empty-message {
  margin: 0;

  padding: 12px;

  border: 1px dashed var(--border);
  border-radius: 10px;

  color: var(--muted);

  font-size: 0.82rem;
  text-align: center;
}

.saved-location-item {
  display: grid;
  grid-template-columns: 1fr auto;

  gap: 10px;

  padding: 11px;

  border: 1px solid var(--border);
  border-radius: 11px;

  background: #fafbfd;
}

.saved-location-name {
  margin: 0 0 3px;

  color: var(--text);

  font-size: 0.88rem;
  font-weight: 700;
}

.saved-location-details {
  margin: 0;

  color: var(--muted);

  font-size: 0.76rem;
  line-height: 1.4;
}

.saved-location-actions {
  display: flex;
  align-items: center;

  gap: 5px;
}

.small-action-button {
  min-width: 34px;
  min-height: 34px;

  padding: 6px 8px;

  border: 1px solid var(--border);
  border-radius: 8px;

  background: var(--white);
  color: var(--navy);

  font-size: 0.76rem;
  font-weight: 700;
}

.small-action-button:hover {
  background: var(--blue-light);
}

.small-action-button.delete {
  color: var(--danger);
}

.export-section {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 8px;
}

/* -------------------------------------------------------
   STATUS AND LOCATION CARDS
------------------------------------------------------- */

.status-card,
.location-card,
.drawing-status-card {
  position: absolute;
  z-index: 10;

  left: 50%;

  display: flex;
  align-items: center;

  gap: 12px;

  width: min(430px, calc(100% - 28px));

  padding: 14px 16px;

  border: 1px solid var(--border);
  border-radius: 15px;

  background: rgb(255 255 255 / 96%);

  box-shadow: 0 10px 30px rgb(16 24 40 / 18%);

  transform: translateX(-50%);

  backdrop-filter: blur(8px);
}

.status-card[hidden],
.location-card[hidden],
.drawing-status-card[hidden] {
  display: none !important;
}

.status-card {
  top: 16px;
}

.location-card {
  bottom: 18px;
}

.drawing-status-card {
  /*
    Thin editor tool-status strip.
    Overrides the normal floating-card styles above.
  */

  position: absolute;

  z-index: 34;

  top: 0;
  right: 380px;
  left: 50px;

  display: flex;
  align-items: center;

  gap: 8px;

  width: auto;
  height: 26px;

  padding: 0 9px;

  border: 0;
  border-bottom: 1px solid #c4cad3;
  border-radius: 0;

  background: rgb(247 248 250 / 98%);

  box-shadow: none;

  transform: none;

  backdrop-filter: none;

  overflow: hidden;

  white-space: nowrap;
}

.status-card strong,
.location-card strong,
.drawing-status-card strong {
  display: block;

  margin-bottom: 3px;
}

.drawing-status-card strong {
  display: inline;

  flex: 0 0 auto;

  margin: 0;

  color: var(--navy);

  font-size: 0.7rem;
  line-height: 1;

  white-space: nowrap;
}

.status-card p,
.location-card p,
.drawing-status-card p {
  margin: 0;

  color: var(--muted);

  font-size: 0.9rem;
  line-height: 1.4;
}

.drawing-status-card p {
  overflow: hidden;

  margin: 0;

  font-size: 0.68rem;
  line-height: 1;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.status-content {
  min-width: 0;

  flex: 1;
}

.status-card.error {
  border-color: #f0a9a1;
}

.status-card.error strong,
.status-card.error p {
  color: var(--danger);
}

/* Loading spinner */

.loading-spinner {
  width: 23px;
  height: 23px;

  flex: 0 0 auto;

  border: 3px solid #cee3fb;
  border-top-color: var(--blue);
  border-radius: 50%;

  animation: spin 0.8s linear infinite;
}

.status-card.error .loading-spinner {
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Retry button */

.retry-button {
  flex: 0 0 auto;

  padding: 8px 12px;

  border: 0;
  border-radius: 9px;

  background: var(--navy);
  color: var(--white);

  font-weight: 700;
}

/* -------------------------------------------------------
   USER LOCATION DOT
------------------------------------------------------- */

.small-blue-dot {
  width: 14px;
  height: 14px;

  flex: 0 0 auto;

  border: 3px solid var(--white);
  border-radius: 50%;

  background: var(--blue);

  box-shadow:
    0 0 0 3px rgb(25 118 210 / 20%),
    0 1px 4px rgb(0 0 0 / 20%);
}

.user-location-marker {
  position: relative;

  width: 34px;
  height: 34px;
}

.user-location-marker::before {
  position: absolute;
  inset: 0;

  content: "";

  border-radius: 50%;

  background: rgb(25 118 210 / 24%);

  animation: locationPulse 1.8s ease-out infinite;
}

.user-location-marker::after {
  position: absolute;

  top: 8px;
  left: 8px;

  width: 18px;
  height: 18px;

  content: "";

  border: 4px solid var(--white);
  border-radius: 50%;

  background: var(--blue);

  box-shadow: 0 1px 6px rgb(0 0 0 / 35%);
}

@keyframes locationPulse {
  0% {
    opacity: 1;
    transform: scale(0.45);
  }

  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

/* -------------------------------------------------------
   CUSTOM MAP LABELS
------------------------------------------------------- */

.map-location-label {
  padding: 5px 9px;

  border: 2px solid var(--white);
  border-radius: 8px;

  background: var(--navy);
  color: var(--white);

  box-shadow: 0 2px 7px rgb(0 0 0 / 28%);

  font-size: 0.78rem;
  font-weight: 700;

  white-space: nowrap;
}

.map-location-label.event-location {
  background: #8e44ad;
}

.map-location-label.facility-location {
  background: var(--success);
}

/* -------------------------------------------------------
   SHAPE CONTEXT MENU
------------------------------------------------------- */

.shape-context-menu {
  position: absolute;
  z-index: 10000;

  min-width: 185px;

  padding: 6px;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: rgb(255 255 255 / 98%);

  box-shadow:
    0 10px 30px rgb(16 24 40 / 24%);

  backdrop-filter: blur(10px);
}

.shape-context-menu[hidden] {
  display: none;
}

.context-menu-item[hidden] {
  display: none !important;
}

.context-menu-item {
  display: flex;
  align-items: center;

  width: 100%;
  min-height: 38px;

  padding: 8px 11px;

  border: 0;
  border-radius: 8px;

  background: transparent;
  color: var(--text);

  text-align: left;

  font-size: 0.86rem;
  font-weight: 600;
}

.context-menu-item:hover:not(:disabled) {
  background: var(--blue-light);
  color: var(--navy);
}

.context-menu-item:disabled {
  color: #a8afba;

  cursor: not-allowed;
}

/* -------------------------------------------------------
   PFPP CONVERT TO SUBMENU
------------------------------------------------------- */

.context-convert-group {
  display: grid;

  gap: 2px;
}


.context-convert-group[hidden] {
  display: none !important;
}


.context-convert-trigger {
  justify-content: space-between;
}


.context-convert-menu {
  display: grid;

  gap: 1px;

  margin:
    1px
    4px
    4px
    12px;

  padding-left: 6px;

  border-left: 2px solid var(--border);
}


.context-convert-menu[hidden] {
  display: none !important;
}


.context-convert-option {
  min-height: 26px;

  padding-left: 12px;

  color: var(--navy);

  font-size: 11px;
}

.context-menu-divider {
  height: 1px;

  margin: 5px 3px;

  background: var(--border);
}

.context-menu-delete {
  color: var(--danger);
}

.context-menu-delete:hover:not(:disabled) {
  background: var(--danger-light);
  color: var(--danger);
}


/* -------------------------------------------------------
   SHAPE TRANSFORM CONTROLS
------------------------------------------------------- */

/*
  These controls will be positioned on top of the map using
  AdvancedMarkerElement.

  JavaScript will create:
  - move handle
  - proportional resize handle
  - rotation handle
*/

.shape-control-handle {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  border: 3px solid var(--white);
  border-radius: 50%;

  background: var(--navy);
  color: var(--white);

  box-shadow:
    0 3px 10px rgb(0 0 0 / 35%);

  font-size: 15px;
  font-weight: 700;

  user-select: none;

  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}

.shape-control-handle:hover {
  transform: scale(1.08);

  box-shadow:
    0 4px 14px rgb(0 0 0 / 42%);
}


/* Move */

.shape-control-handle.move-handle {
  background: var(--blue);

  cursor: move;
}


/* Resize */

.shape-control-handle.resize-handle {
  border-radius: 7px;

  background: var(--success);

  cursor: nwse-resize;
}


/* Rotate */

.shape-control-handle.rotate-handle {
  background: #8e44ad;

  cursor: grab;
}

.shape-control-handle.rotate-handle:active {
  cursor: grabbing;
}


/*
  -------------------------------------------------------
  VENUE MAP EDIT POINT HANDLES
  -------------------------------------------------------
*/

.map-edit-vertex-handle {
  width: 16px;
  height: 16px;

  border: 3px solid var(--white);
  border-radius: 50%;

  background: var(--blue);

  box-shadow:
    0 2px 7px rgb(0 0 0 / 35%);

  cursor: grab;

  transform: translateY(50%);

  user-select: none;
}

.map-edit-vertex-handle:hover {
  box-shadow:
    0 3px 10px rgb(0 0 0 / 45%);
}

.map-edit-vertex-handle:active {
  cursor: grabbing;
}


/*
  -------------------------------------------------------
  VENUE MAP BOUNDING RESIZE HANDLES
  -------------------------------------------------------
*/

.map-bounds-handle {
  width: 14px;
  height: 14px;

  border: 2px solid var(--blue);
  border-radius: 2px;

  background: var(--white);

  box-shadow:
    0 2px 7px rgb(0 0 0 / 30%);

  transform: translateY(50%);

  user-select: none;
}

.map-bounds-handle:hover {
  background: #eef6ff;

  box-shadow:
    0 3px 9px rgb(0 0 0 / 38%);
}

.map-bounds-handle.resize-nw,
.map-bounds-handle.resize-se {
  cursor: nwse-resize;
}

.map-bounds-handle.resize-ne,
.map-bounds-handle.resize-sw {
  cursor: nesw-resize;
}

.map-bounds-handle.resize-n,
.map-bounds-handle.resize-s {
  cursor: ns-resize;
}

.map-bounds-handle.resize-e,
.map-bounds-handle.resize-w {
  cursor: ew-resize;
}

/* -------------------------------------------------------
   TRANSFORM CONTROL LABELS
------------------------------------------------------- */

.shape-control-label {
  padding: 4px 7px;

  border: 2px solid var(--white);
  border-radius: 7px;

  background: rgb(8 38 92 / 94%);
  color: var(--white);

  box-shadow:
    0 2px 7px rgb(0 0 0 / 25%);

  font-size: 0.67rem;
  font-weight: 700;

  white-space: nowrap;

  pointer-events: none;
}


/* -------------------------------------------------------
   ROTATION GUIDE
------------------------------------------------------- */

/*
  JavaScript will draw the actual line between the polygon
  and the rotation handle.

  This class is for the small centre marker used while
  transforming the shape.
*/

.shape-centre-marker {
  width: 12px;
  height: 12px;

  border: 3px solid var(--white);
  border-radius: 50%;

  background: var(--navy);

  box-shadow:
    0 1px 5px rgb(0 0 0 / 35%);

  pointer-events: none;
}


/* -------------------------------------------------------
   DRAWING VERTEX HANDLES
------------------------------------------------------- */

/*
  These replace the temporary numbered circles that we are
  currently creating with inline JavaScript styles.
*/

.drawing-vertex-handle {
  display: grid;
  place-items: center;

  width: 25px;
  height: 25px;

  border: 3px solid var(--white);
  border-radius: 50%;

  background: var(--navy);
  color: var(--white);

  box-shadow:
    0 2px 7px rgb(0 0 0 / 35%);

  font-size: 0.68rem;
  font-weight: 700;

  cursor: pointer;

  user-select: none;
}


/* -------------------------------------------------------
   SELECTED SHAPE INFORMATION
------------------------------------------------------- */

.selected-shape-badge {
  position: absolute;
  z-index: 9000;

  display: flex;
  align-items: center;

  gap: 7px;

  padding: 7px 10px;

  border: 1px solid #aac9ed;
  border-radius: 10px;

  background: rgb(234 243 255 / 97%);
  color: var(--navy);

  box-shadow:
    0 5px 15px rgb(16 24 40 / 18%);

  font-size: 0.78rem;
  font-weight: 700;
}


/* -------------------------------------------------------
   MAP CURSOR STATES
------------------------------------------------------- */

.map-container.shape-moving {
  cursor: move;
}

.map-container.shape-resizing {
  cursor: nwse-resize;
}

.map-container.shape-rotating {
  cursor: grabbing;
}

/*
  Shared basic-shape tool on the geographic Venue Map.
*/

.map-container.map-basic-shape-active
.map {
  cursor: crosshair;
}

/* -------------------------------------------------------
   PFPP PRECISION TRANSFORM BAR
------------------------------------------------------- */

.floor-plan-precision-bar {
  position: absolute;

  z-index: 36;

  top: 0;
  right: 380px;
  left: 50px;

  display: flex;
  align-items: center;

  gap: 10px;

  height: 26px;

  padding: 0 8px;

  border-bottom: 1px solid #c4cad3;

  background: rgb(247 248 250 / 98%);

  box-shadow: none;

  overflow: hidden;

  white-space: nowrap;
}


.floor-plan-precision-bar[hidden] {
  display: none;
}

/*
  When both the Precision bar and the editor message strip
  are visible, stack the message strip directly below the
  Precision bar instead of allowing them to overlap.
*/

.map-container:has(
  .floor-plan-precision-bar:not([hidden])
)
.drawing-status-card:not([hidden]) {
  top: 26px;
}

/*
  Both top strips are 26 px high.

  Normally the PFPP viewport begins below the Precision bar
  at 26 px.

  If the tool-message strip is also visible, temporarily
  move the viewport down another 26 px.

  When the message disappears, the viewport automatically
  returns to its normal position.
*/

.map-container:has(
  .floor-plan-precision-bar:not([hidden])
):has(
  .drawing-status-card:not([hidden])
)
.floor-plan-viewport {
  top: 52px;
}

.floor-plan-precision-name {
  overflow: hidden;

  min-width: 65px;
  max-width: 145px;

  padding-right: 9px;

  border-right: 1px solid #cfd5dd;

  color: var(--navy);

  font-size: 0.68rem;
  font-weight: 700;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.floor-plan-precision-fields {
  display: flex;
  align-items: center;

  gap: 8px;
}


.floor-plan-precision-fields[hidden] {
  display: none;
}


.floor-plan-precision-fields label {
  display: flex;
  align-items: center;

  gap: 3px;

  margin: 0;

  color: var(--muted);

  font-size: 0.65rem;
  font-weight: 700;
}


.floor-plan-precision-fields input {
  width: 58px;
  height: 21px;

  padding: 1px 4px;

  border: 1px solid transparent;
  border-radius: 3px;

  background: transparent;
  color: var(--text);

  font-size: 0.68rem;

  text-align: right;
}


.floor-plan-precision-fields input:hover:not(:disabled) {
  border-color: var(--border);

  background: var(--white);
}


.floor-plan-precision-fields input:focus {
  border-color: var(--blue);

  outline: 1px solid rgb(25 118 210 / 25%);

  background: var(--white);
}


.floor-plan-precision-fields input:disabled {
  color: #98a2b3;
}


.floor-plan-precision-fields span {
  color: var(--muted);

  font-size: 0.65rem;
}

/* -------------------------------------------------------
   EVENT FLOOR PLAN WORKSPACE
------------------------------------------------------- */

.floor-plan-workspace {
  position: absolute;

  /*
    Illustrator-style editor layout:

    82 px on the left is reserved for the tool bar.
    380 px on the right is reserved for Layers / Admin.
    The centre becomes the dedicated working canvas.
  */

  top: 0;
  bottom: 0;

  left: 50px;
  right: 380px;

  z-index: 7;

  overflow: hidden;

  background: #d9dde4;
}

.floor-plan-workspace[hidden] {
  display: none;
}


/* -------------------------------------------------------
   PFPP GRAPHICS EDITOR LAYOUT
------------------------------------------------------- */

/*
  In PFPP editing mode the existing Admin panel becomes
  the right-hand editor sidebar.
*/

.map-container.editor-mode
.admin-panel {
  right: 14px;
  left: auto;

  width: min(
    350px,
    calc(100% - 28px)
  );
}


/*
  Leave space for the right-hand editor sidebar.
*/

.map-container.pfpp-editor-mode
.floor-plan-topbar {
  right: 380px;
}


/* -------------------------------------------------------
   LEFT EDITOR TOOLBAR
------------------------------------------------------- */

.floor-plan-toolbox {
  position: absolute;

  z-index: 35;

  top: 8px;
  left: 8px;

  display: flex;
  flex-direction: column;

  gap: 2px;

  padding: 4px;

  border: 1px solid var(--border);
  border-radius: 9px;

  background: rgb(255 255 255 / 97%);

  box-shadow:
    0 8px 24px rgb(16 24 40 / 22%);

  backdrop-filter: blur(8px);
}


.floor-plan-toolbox[hidden] {
  display: none;
}


.floor-plan-tool-separator {
  width: 22px;

  height: 1px;

  margin: 2px auto;

  background: var(--border);
}


.floor-plan-editor-tool-button {
  display: grid;

  place-items: center;

  width: 30px;
  height: 30px;

  padding: 0;

  border: 1px solid transparent;
  border-radius: 6px;

  background: transparent;
  color: var(--navy);

  font-size: 0.95rem;
  font-weight: 700;
}


.floor-plan-editor-tool-button:hover {
  border-color: #aac9ed;

  background: var(--blue-light);
}

/*
  Edit Points toolbar icon.
*/

.edit-points-tool-icon {
  width: 20px;
  height: 20px;

  overflow: visible;
}


.edit-points-tool-icon polygon {
  fill: none;

  stroke: currentColor;
  stroke-width: 1.7;

  stroke-linejoin: round;
}


.edit-points-tool-icon circle {
  fill: var(--white);

  stroke: currentColor;
  stroke-width: 1.7;
}


.floor-plan-edit-points-tool-button.active {
  border-color: #79aee8;

  background: var(--blue-light);
  color: var(--blue);
}

.floor-plan-tool-group {
  position: relative;
}


/* -------------------------------------------------------
   SHAPES FLYOUT
------------------------------------------------------- */

.floor-plan-shapes-flyout {
  position: absolute;

  z-index: 40;

  top: 0;
  left: calc(100% + 10px);

  width: 190px;

  padding: 8px;

  border: 1px solid var(--border);
  border-radius: 11px;

  background: rgb(255 255 255 / 98%);

  box-shadow:
    0 10px 30px rgb(16 24 40 / 25%);
}


.floor-plan-shapes-flyout[hidden] {
  display: none;
}


.floor-plan-flyout-title {
  margin: 4px 6px 7px;

  color: var(--muted);

  font-size: 0.7rem;
  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.floor-plan-shape-option {
  display: grid;

  grid-template-columns:
    30px 1fr;

  align-items: center;

  gap: 7px;

  width: 100%;

  min-height: 39px;

  padding: 7px 9px;

  border: 0;
  border-radius: 7px;

  background: transparent;
  color: var(--text);

  text-align: left;
}


.floor-plan-shape-option:hover:not(:disabled) {
  background: var(--blue-light);
}


.shape-option-icon {
  color: var(--navy);

  font-size: 1.2rem;

  text-align: center;
}


/* -------------------------------------------------------
   PFPP LAYERS PANEL
------------------------------------------------------- */

.floor-plan-layers-tree {
  display: grid;

  gap: 3px;

  margin-top: 10px;
}


.floor-plan-layer-row {
  display: grid;

  grid-template-columns:
    24px 1fr 25px 25px;

  align-items: center;

  gap: 5px;

  width: 100%;

  min-height: 34px;

  padding:
    5px
    6px
    5px
    calc(
      6px +
      var(--layer-depth, 0) *
      18px
    );

  border: 1px solid transparent;
  border-radius: 7px;

  background: transparent;
  color: var(--text);

  text-align: left;

  font-size: 0.79rem;
}


button.floor-plan-layer-row {
  cursor: pointer;
}


button.floor-plan-layer-row:hover {
  background: #f3f6fa;
}


.floor-plan-layer-row.selected {
  border-color: #9bc3f0;

  background: var(--blue-light);
}

.floor-plan-layer-row.active-layer {
  border-color: #79aee8;

  background: #edf6ff;
}


.floor-plan-layer-row.active-layer
.floor-plan-layer-name {
  color: var(--navy);

  font-weight: 700;
}

.floor-plan-layer-row.hall-layer-row
.floor-plan-layer-name {
  color: var(--navy);

  font-weight: 700;
}


.floor-plan-layer-visibility {
  display: grid;
  place-items: center;

  width: 26px;
  height: 26px;

  padding: 0;

  border: 0;
  border-radius: 5px;

  background: transparent;
  color: var(--muted);

  font-size: 0.82rem;

  cursor: pointer;
}


.floor-plan-layer-visibility:hover:not(:disabled) {
  background: var(--blue-light);
}


.floor-plan-layer-visibility:disabled {
  cursor: default;

  opacity: 0.55;
}


.floor-plan-layer-name {
  overflow: hidden;

  width: 100%;

  padding: 5px 6px;

  border: 0;
  border-radius: 5px;

  background: transparent;
  color: inherit;

  text-align: left;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.floor-plan-layer-name:hover:not(:disabled) {
  background: rgb(25 118 210 / 8%);
}


.floor-plan-layer-name:disabled {
  cursor: default;

  opacity: 0.65;
}


.floor-plan-layer-lock {
  text-align: center;

  font-size: 0.72rem;
}

.floor-plan-layer-delete {
  display: grid;
  place-items: center;

  width: 24px;
  height: 24px;

  padding: 0;

  border: 0;
  border-radius: 5px;

  background: transparent;
  color: var(--danger);

  font-size: 1rem;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;
}


.floor-plan-layer-delete:hover:not(:disabled) {
  background: var(--danger-light);
}


.floor-plan-layer-delete:disabled {
  visibility: hidden;

  cursor: default;
}

/* Floating floor-plan toolbar */

.floor-plan-topbar {
  display: none;
}

.floor-plan-label {
  margin: 0 0 2px;

  color: var(--navy);

  font-size: 0.66rem;
  font-weight: 700;

  letter-spacing: 0.1em;
}


.floor-plan-topbar strong {
  color: var(--text);

  font-size: 0.92rem;
}


/* Zoom buttons */

.floor-plan-tools {
  display: flex;
  align-items: center;

  gap: 5px;
}


.floor-plan-tool-button {
  min-width: 38px;
  height: 38px;

  padding: 0 10px;

  border: 1px solid var(--border);
  border-radius: 9px;

  background: var(--white);
  color: var(--navy);

  font-weight: 700;

  cursor: pointer;
}


.floor-plan-tool-button:hover {
  background: var(--blue-light);
  border-color: #aac9ed;
}


/* -------------------------------------------------------
   FLOOR PLAN VIEWPORT
------------------------------------------------------- */

.floor-plan-viewport {
  position: absolute;

  top: 26px;
  right: 0;
  bottom: 0;
  left: 0;

  overflow: hidden;

    /*
    Neutral pasteboard around the actual floor-plan page.
  */

  background: #cfd3da;
  cursor: default;

  /*
    Important for touch-screen panning later.
  */
  touch-action: none;

  user-select: none;
}


.floor-plan-viewport.dragging {
  cursor: grabbing;
}


/*
  Hand / Pan tool
*/

.floor-plan-viewport.pan-tool-active {
  cursor: grab;
}


.floor-plan-viewport.pan-tool-active.dragging {
  cursor: grabbing;
}


/*
  Illustrator-style rule:

  when a shape tool is active, dragging belongs to the
  shape tool rather than to canvas panning.
*/
.floor-plan-viewport.shape-tool-active {
  cursor: crosshair;
}


/* -------------------------------------------------------
   FLOOR PLAN STAGE
------------------------------------------------------- */

.floor-plan-stage {
  position: absolute;

  top: 0;
  left: 0;

  transform-origin: 0 0;

  will-change: transform;

  background: white;

  outline: 1px solid #aeb5c0;

  box-shadow:
    0 8px 30px rgb(16 24 40 / 28%);
}


/* Official floor-plan image */

.floor-plan-image {
  display: block;

  width: auto;
  height: auto;

  max-width: none;

  pointer-events: none;

  user-select: none;
}


/* -------------------------------------------------------
   INTERACTIVE SVG OVERLAY
------------------------------------------------------- */

.floor-plan-overlay {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;

  /*
    The SVG stays interactive so saved indoor shapes can
    receive clicks.

    Empty areas still bubble pointer events to the viewport,
    so normal floor-plan panning continues to work.
  */
  pointer-events: auto;
}

/* Enable interaction only while editing the floor plan */

.floor-plan-overlay.drawing-enabled {
  cursor: crosshair;
}


.floor-plan-overlay.basic-shape-enabled {
  cursor: crosshair;
}

/*
  When a basic Shape tool is active, it owns the cursor
  even while hovering an existing editable Hall/object.
*/

.floor-plan-overlay.basic-shape-enabled,
.floor-plan-overlay.basic-shape-enabled .floor-plan-shape {
  cursor: crosshair !important;
}

.basic-shape-preview {
  pointer-events: none;
}


/* Saved indoor shapes */

.floor-plan-shape {
  fill: rgb(25 118 210 / 16%);

  stroke: #1976d2;
  stroke-width: 2;

  vector-effect: non-scaling-stroke;

  /*
    The SVG background remains transparent to pointer
    events, but saved polygons themselves are interactive.
  */
  pointer-events: auto;

  cursor: pointer;
}


.floor-plan-shape.selected {
  stroke-width: 5;
}

/*
  Additional selection cue.

  The existing selected stroke remains unchanged.
*/

.floor-plan-shape.selected {
  filter:
    drop-shadow(
      0 0 4px
      rgb(25 118 210 / 65%)
    );
}


/*
  Temporary edge cue.

  This appears only when the pointer is close enough
  to an edge of the currently selected object.
*/

.floor-plan-edge-highlight {
  stroke: #00a8ff;
  stroke-width: 7;

  stroke-linecap: round;

  vector-effect: non-scaling-stroke;

  pointer-events: none;
}

/*
  A visible layer that is not the active Working Area is
  reference-only.

  It stays visible but visually recedes and cannot be
  edited.
*/

.floor-plan-shape.reference-layer-shape {
  opacity: 0.35;

  pointer-events: none;
}

.floor-plan-overlay.move-enabled
.floor-plan-shape.selected {
  cursor: move;
}

.floor-plan-overlay.add-points-enabled
.floor-plan-shape.selected {
  cursor: crosshair;
}


.floor-plan-overlay.edit-points-enabled
.floor-plan-shape.selected {
  cursor: crosshair;
}


.floor-plan-edit-vertex {
  fill: var(--blue);

  stroke: var(--white);
  stroke-width: 3;

  vector-effect: non-scaling-stroke;

  pointer-events: auto;

  cursor: move;
}


.floor-plan-edit-vertex:hover {
  stroke-width: 4;
}

/*
  Illustrator-style 8-point resize controls.
*/

.floor-plan-bounding-resize-handle {
  fill: var(--white);

  stroke: var(--blue);
  stroke-width: 2;

  vector-effect: non-scaling-stroke;

  pointer-events: auto;
}


.floor-plan-bounding-resize-handle:hover {
  fill: var(--blue-light);

  stroke-width: 3;
}

/*
  Active precision transform control.

  Clicking a transform handle leaves it visibly selected
  so the user knows what the Arrow keys will affect.
*/

.floor-plan-bounding-resize-handle.precision-active {
  fill: var(--blue);

  stroke: var(--navy);

  stroke-width: 3;
}


.floor-plan-resize-handle.precision-active {
  fill: #0b7a43;

  stroke: #052e1c;

  stroke-width: 4;
}


.floor-plan-rotate-handle.precision-active {
  fill: #6f2d91;

  stroke: #3d1554;

  stroke-width: 4;
}


.floor-plan-edit-vertex.precision-active {
  fill: var(--white);

  stroke: var(--blue);

  stroke-width: 5;
}

/* Corner handles */

.floor-plan-bounding-resize-handle.resize-nw,
.floor-plan-bounding-resize-handle.resize-se {
  cursor: nwse-resize;
}


.floor-plan-bounding-resize-handle.resize-ne,
.floor-plan-bounding-resize-handle.resize-sw {
  cursor: nesw-resize;
}


/* Side handles */

.floor-plan-bounding-resize-handle.resize-n,
.floor-plan-bounding-resize-handle.resize-s {
  cursor: ns-resize;
}


.floor-plan-bounding-resize-handle.resize-e,
.floor-plan-bounding-resize-handle.resize-w {
  cursor: ew-resize;
}

.floor-plan-resize-handle {
  fill: var(--success);

  stroke: var(--white);
  stroke-width: 3;

  vector-effect: non-scaling-stroke;

  cursor: nwse-resize;

  pointer-events: auto;
}


.floor-plan-resize-handle:hover {
  stroke-width: 4;
}

.floor-plan-rotate-guide {
  stroke: #8e44ad;
  stroke-width: 2;

  stroke-dasharray: 6 5;

  vector-effect: non-scaling-stroke;

  pointer-events: none;
}


.floor-plan-rotate-handle {
  fill: #8e44ad;

  stroke: var(--white);
  stroke-width: 3;

  vector-effect: non-scaling-stroke;

  cursor: grab;

  pointer-events: auto;
}


.floor-plan-rotate-handle:hover {
  stroke-width: 4;
}


.floor-plan-rotate-handle:active {
  cursor: grabbing;
}

.floor-plan-shape.hall {
  fill: rgb(8 38 92 / 12%);

  stroke: #08265c;
}

/*
  A hall alignment layer is copied from the real BMICH
  venue geometry and positioned over the PFPP reference
  image.

  Saved hall outlines are solid. Temporary drawing
  previews may still use dashed styling.
*/

.floor-plan-shape.hall-layer {
  fill: rgb(25 118 210);

  stroke: var(--blue);
  stroke-width: 4;
}


.floor-plan-shape.hall-layer.selected {
  stroke-width: 6;
}


/*
  PFPP hall alignment control panel
*/

.floor-plan-alignment-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 14px;
}


.floor-plan-opacity-row {
  display: flex;

  align-items: center;

  gap: 12px;
}


.floor-plan-opacity-row input[type="range"] {
  flex: 1;

  min-width: 0;
}


.floor-plan-opacity-row span {
  min-width: 44px;

  text-align: right;

  font-weight: 700;
}

.floor-plan-shape.stall {
  fill: rgb(214 69 69 / 18%);
  stroke: #d64545;
}

/*
  Merged but not yet assigned to an exhibitor.
*/
.floor-plan-shape.stall.merged-stall {
  fill: rgb(214 69 69 / 28%);
}

/*
  One physical Stall assigned to one exhibitor.
*/
.floor-plan-shape.stall.assigned-single-stall {
  fill: rgb(20 184 166 / 32%);
  stroke: #0f766e;
}

/*
  A merged Stall destination assigned to one exhibitor.

  Each physical Stall remains separately visible,
  but the common purple colour shows that they belong
  to one exhibitor destination.
*/
.floor-plan-shape.stall.assigned-merged-stall {
  fill: rgb(139 92 246 / 34%);
  stroke: #6d28d9;
}

.floor-plan-shape.gate {
  fill: rgb(8 38 92 / 22%);

  stroke: #08265c;
  stroke-width: 3;
}


.floor-plan-shape.entrance {
  fill: rgb(23 114 69 / 20%);

  stroke: #177245;
  stroke-width: 3;
}


.floor-plan-shape.exit {
  fill: rgb(220 38 38 / 18%);

  stroke: #dc2626;
  stroke-width: 3;
}


.floor-plan-shape.service-entrance {
  fill: rgb(100 116 139 / 18%);

  stroke: #64748b;
  stroke-width: 3;

  stroke-dasharray: 7 4;
}


.floor-plan-shape.ticket-counter {
  fill: rgb(142 68 173 / 18%);

  stroke: #8e44ad;
  stroke-width: 3;
}


.floor-plan-shape.aisle {
  fill: rgb(142 68 173 / 12%);

  stroke: #8e44ad;
}


/* Shape currently being drawn */

.floor-plan-preview-shape {
  fill: rgb(25 118 210 / 18%);

  stroke: #1976d2;
  stroke-width: 3;

  stroke-dasharray: 7 5;

  vector-effect: non-scaling-stroke;

  pointer-events: none;
}


/* Indoor drawing points */

.floor-plan-vertex {
  fill: #1976d2;

  stroke: white;
  stroke-width: 3;

  vector-effect: non-scaling-stroke;

  cursor: move;
}


/* Indoor labels */

.floor-plan-shape-label {
  fill: #08265c;

  paint-order: stroke;

  stroke: white;
  stroke-width: 4px;
  stroke-linejoin: round;

  font-size: 16px;
  font-weight: 700;

  text-anchor: middle;

  pointer-events: none;
  user-select: none;
}

/* -------------------------------------------------------
   FUTURE INDOOR OBJECT STYLES
------------------------------------------------------- */

.floor-stall {
  fill: rgb(25 118 210 / 18%);

  stroke: var(--blue);
  stroke-width: 2;

  vector-effect: non-scaling-stroke;
}


.floor-stall.selected {
  fill: rgb(25 118 210 / 32%);

  stroke-width: 3;
}


.floor-route {
  fill: none;

  stroke: var(--blue);
  stroke-width: 5;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}


.floor-anchor {
  fill: var(--blue);

  stroke: var(--white);
  stroke-width: 3;

  vector-effect: non-scaling-stroke;
}


/* -------------------------------------------------------
   MOBILE
------------------------------------------------------- */

@media (max-width: 700px) {
  .floor-plan-topbar {
    top: 10px;
    right: 10px;

    min-width: 0;
    max-width: calc(100% - 20px);

    padding: 9px 10px;
  }

  .floor-plan-tool-button {
    min-width: 34px;
    height: 34px;

    padding: 0 8px;
  }
}

/* -------------------------------------------------------
   ACCESSIBILITY
------------------------------------------------------- */

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #88c1ff;
  outline-offset: 2px;
}

/* -------------------------------------------------------
   MOBILE LAYOUT
------------------------------------------------------- */

@media (max-width: 700px) {
  .top-bar {
    align-items: flex-start;

    padding: 10px 12px;
  }

  h1 {
    font-size: 1.2rem;
  }

  .header-actions {
    align-items: flex-end;
    flex-direction: column;

    gap: 6px;
  }

  .mode-button {
    min-height: 31px;

    padding: 5px 8px;

    font-size: 0.78rem;
  }

  .recenter-button {
    min-height: 35px;

    padding: 7px 9px;

    font-size: 0.78rem;
  }

  .visitor-event-panel {
    top: 10px;
    left: 10px;

    width: min(260px, calc(100% - 20px));
  }

  .admin-panel {
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;

    width: auto;
  }

  .status-card,
  .drawing-status-card {
    top: 10px;
  }

  .location-card {
    bottom: 11px;
  }
}

@media (max-width: 430px) {
  .app-label {
    font-size: 0.61rem;
  }

  h1 {
    font-size: 1.08rem;
  }

  .mode-switch {
    padding: 2px;
  }

  .mode-button {
    padding: 4px 7px;
  }

  .admin-button-grid,
  .export-section {
    grid-template-columns: 1fr;
  }
}

/* Compact Illustrator-style context menu */
.shape-context-menu {
  width: 190px;
  max-height: min(520px, calc(100vh - 24px));
  padding: 5px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.shape-context-menu .context-menu-item {
  min-height: 27px;
  padding: 4px 9px;
  font-size: 12px;
  line-height: 17px;
}

.shape-context-menu .context-menu-divider {
  margin: 3px 5px;
}

.shape-context-menu {
  scrollbar-width: thin;
}

.shape-context-menu::-webkit-scrollbar {
  width: 6px;
}

.shape-context-menu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgb(100 116 139 / 45%);
}

.exhibitor-panel {
  position: absolute;
  z-index: 10020;
  top: 54px;
  left: 62px;
  width: min(330px, calc(100% - 80px));
  max-height: calc(100% - 72px);
  overflow-y: auto;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgb(255 255 255 / 98%);
  box-shadow: 0 12px 34px rgb(16 24 40 / 28%);
}

.exhibitor-panel[hidden] {
  display: none;
}

.exhibitor-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.exhibitor-panel-header strong {
  color: var(--navy);
  font-size: 0.95rem;
}

.exhibitor-panel-header p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.exhibitor-panel-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
}

.exhibitor-panel-close:hover {
  background: var(--blue-light);
  color: var(--navy);
}

.exhibitor-panel label {
  display: block;
  margin: 8px 0 4px;
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
}

.exhibitor-panel input {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--text);
}

.exhibitor-category-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    38px;

  gap: 7px;

  width: 100%;
}


.exhibitor-category-picker {
  position: relative;
  min-width: 0;
}

.exhibitor-category-trigger {
  overflow: hidden;
  width: 100%;
  height: 38px;
  padding: 8px 30px 8px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--text);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exhibitor-category-trigger::after {
  position: absolute;
  right: 10px;
  content: "▾";
}

.exhibitor-category-menu {
  position: absolute;
  z-index: 10030;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 190px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 8px 22px rgb(16 24 40 / 18%);
}

.exhibitor-category-menu[hidden] {
  display: none;
}

.exhibitor-category-option {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--text) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  cursor: pointer;
}

.exhibitor-category-option:hover {
  background: var(--blue-light);
}

.exhibitor-category-option input {
  width: 15px;
  height: 15px;
  margin: 0;
  flex: 0 0 auto;
}


.exhibitor-category-add-button {
  display: grid;

  place-items: center;

  width: 38px;
  height: 38px;

  padding: 0;

  border: 1px solid var(--navy);
  border-radius: 8px;

  background: var(--navy);
  color: var(--white);

  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}


.exhibitor-category-add-button:hover {
  background: var(--navy-dark);
}

.exhibitor-panel-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;

}

/* -------------------------------------------------------
   COLLAPSIBLE PFPP HALL LAYERS
------------------------------------------------------- */

.floor-plan-hall-layer-container {
  display: block;
  width: 100%;
}

.floor-plan-hall-layer-header {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 2px;
  width: 100%;
}

.floor-plan-hall-layer-header
.floor-plan-layer-row {
  min-width: 0;
}

.floor-plan-layer-expand-button {
  display: grid;
  place-items: center;

  width: 22px;
  height: 28px;

  padding: 0;

  border: 0;
  border-radius: 5px;

  background: transparent;
  color: var(--navy);

  font-size: 0.65rem;

  cursor: pointer;
}

.floor-plan-layer-expand-button:hover {
  background: var(--blue-light);
}

.floor-plan-hall-children {
  display: grid;
  gap: 2px;

  margin-left: 22px;

  padding-left: 4px;

  border-left: 1px solid var(--border);
}

.floor-plan-unassigned-heading {
  margin-top: 7px;

  padding: 6px 8px;

  color: var(--muted);

  font-size: 0.68rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.exhibitor-profiles-list,
.exhibitor-phones-list {
  display: grid;
  gap: 6px;
}

.exhibitor-profile-input,
.exhibitor-phone-input {
  width: 100%;
}

/* -------------------------------------------------------
   VISITOR SEARCH
------------------------------------------------------- */

.visitor-event-panel {
  width: min(400px, calc(100% - 32px));
  padding: 10px;
}

.visitor-search-wrap {
  position: relative;
}

.visitor-search-box {
  display: grid;
  grid-template-columns:
  22px
  minmax(0, 1fr)
  auto
  30px;
  align-items: center;
  gap: 7px;
  min-height: 48px;
  padding: 0 8px 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 2px 8px rgb(16 24 40 / 12%);
}

.visitor-search-box:focus-within {
  border-color: var(--blue);
  box-shadow:
    0 2px 8px rgb(16 24 40 / 12%),
    0 0 0 3px rgb(25 118 210 / 13%);
}

.visitor-search-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #667085;
  stroke-width: 2;
  stroke-linecap: round;
}

.visitor-search-input {
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.95rem;
}

.visitor-search-input::-webkit-search-cancel-button {
  display: none;
}

.visitor-search-clear {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eef2f6;
  color: #667085;
  font-size: 1.2rem;
  line-height: 1;
}

.visitor-search-clear:hover {
  background: #e1e7ef;
  color: var(--text);
}

.visitor-search-clear[hidden] {
  display: none;
}

.visitor-search-results {
  position: absolute;
  z-index: 50;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  max-height: min(420px, 55vh);
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgb(255 255 255 / 99%);
  box-shadow: 0 12px 30px rgb(16 24 40 / 22%);
}

.visitor-search-results[hidden] {
  display: none;
}

.visitor-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.visitor-search-result:hover,
.visitor-search-result:focus-visible {
  background: var(--blue-light);
}

.visitor-search-result-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.visitor-search-result-main strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visitor-search-result-main span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visitor-search-close-match {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: #fff7df;
  color: #8a5a00;
  font-size: 0.65rem;
  font-weight: 700;
}

.visitor-search-empty {
  padding: 16px 12px;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.visitor-event-selector-row {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #edf0f4;
}

.visitor-event-selector-row label {
  margin-bottom: 5px;
  font-size: 0.72rem;
}

.visitor-event-selector-row select {
  padding: 8px 10px;
  font-size: 0.8rem;
}

@media (max-width: 700px) {
  .visitor-event-panel {
    right: 10px;
    left: 10px;
    width: auto;
  }
}

/* -------------------------------------------------------
   PFPP MAP VERSIONS
------------------------------------------------------- */

.floor-plan-version-select {
  width: 100%;
  margin-top: 9px;
}

.floor-plan-version-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 8px;
}

/* -------------------------------------------------------
   GOOGLE MAP PFPP STALL LABELS
------------------------------------------------------- */

.pfpp-map-stall-label {
  display: grid;
  place-items: center;
  min-width: 22px;
  min-height: 18px;
  padding: 2px 4px;
  border: 1px solid rgb(255 255 255 / 85%);
  border-radius: 5px;
  background: rgb(255 255 255 / 88%);
  color: #08265c;
  box-shadow: 0 1px 3px rgb(0 0 0 / 18%);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

/* -------------------------------------------------------
   VISITOR MAP EXHIBITOR INFORMATION
------------------------------------------------------- */

.visitor-map-info {
  min-width: 230px;
  max-width: 310px;
  padding: 3px 2px 5px;
  color: var(--text);
}

.visitor-map-info-location {
  margin: 0 0 5px;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 800;
}

.visitor-map-info-title {
  display: block;
  color: var(--navy);
  font-size: 1rem;
  line-height: 1.25;
}

.visitor-map-info-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.visitor-map-info-categories span {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--navy);
  font-size: 0.67rem;
  font-weight: 700;
}

.visitor-map-info-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}

.visitor-map-info-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid #b8c9df;
  border-radius: 9px;
  background: var(--white);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 800;
  text-decoration: none;
}

.visitor-map-info-action:hover {
  border-color: #79aee8;
  background: var(--blue-light);
}

.visitor-map-info-address {
  margin: 11px 0 0;
  padding-top: 9px;
  border-top: 1px solid #edf0f4;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

/* -------------------------------------------------------
   VISITOR OUTDOOR NAVIGATION POINTS
------------------------------------------------------- */

.visitor-navigation-marker {
  display: flex;
  align-items: center;

  gap: 5px;

  padding: 3px 7px 3px 3px;

  border: 1px solid rgb(8 38 92 / 28%);
  border-radius: 999px;

  background: rgb(255 255 255 / 96%);
  color: var(--navy);

  box-shadow:
    0 2px 7px rgb(0 0 0 / 24%);

  font-family: inherit;

  cursor: pointer;

  white-space: nowrap;
}


.visitor-navigation-marker:hover {
  border-color: var(--blue);

  background: var(--blue-light);
}


.visitor-navigation-marker-icon {
  display: grid;
  place-items: center;

  width: 22px;
  height: 22px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: var(--blue);
  color: var(--white);

  font-size: 10px;
  font-weight: 900;
}


.visitor-navigation-marker.gate
.visitor-navigation-marker-icon {
  background: var(--navy);
}


.visitor-navigation-marker.entrance
.visitor-navigation-marker-icon {
  background: var(--success);
}


.visitor-navigation-marker.service {
  opacity: 0.7;
}


.visitor-navigation-marker.service
.visitor-navigation-marker-icon {
  background: #667085;
}


.visitor-navigation-marker-name {
  max-width: 145px;

  overflow: hidden;

  font-size: 11px;
  font-weight: 800;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* Navigation point information window */

.visitor-navigation-info {
  min-width: 190px;

  padding: 3px 2px 5px;

  color: var(--text);
}


.visitor-navigation-info-type {
  margin: 0 0 4px;

  color: var(--blue);

  font-size: 0.7rem;
  font-weight: 800;
}


.visitor-navigation-info-title {
  display: block;

  color: var(--navy);

  font-size: 0.95rem;
}


.visitor-navigation-info-detail,
.visitor-navigation-info-access {
  margin: 6px 0 0;

  color: var(--muted);

  font-size: 0.72rem;
}


.visitor-navigation-info-access.service {
  color: #667085;

  font-weight: 700;
}

/* -------------------------------------------------------
   ADMIN OUTDOOR NAVIGATION POINTS
------------------------------------------------------- */

.navigation-points-list {
  display: grid;
  gap: 7px;

  margin-top: 10px;
}


.navigation-point-item {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 9px;

  padding: 9px;

  border: 1px solid var(--border);
  border-radius: 9px;

  background: #fafbfd;
}


.navigation-point-info {
  min-width: 0;
}


.navigation-point-name {
  margin: 0;

  color: var(--text);

  font-size: 0.8rem;
  font-weight: 700;
}


.navigation-point-type {
  margin: 3px 0 0;

  color: var(--muted);

  font-size: 0.68rem;
}


.navigation-point-coordinates {
  margin: 4px 0 0;

  color: var(--navy);

  font-family:
    Consolas,
    "Courier New",
    monospace;

  font-size: 0.68rem;

  white-space: nowrap;
}

/* =======================================================
   VISITOR ACCOUNT / AUTHENTICATION
======================================================= */

/* Header account button */

.account-button {
  min-height: 30px;

  padding: 5px 12px;

  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 11px;

  background: #1976d2;
  color: #ffffff;

  font-weight: 700;
}

.account-button:hover {
  background: #1565c0;
}


/* -------------------------------------------------------
   AUTH MODAL
------------------------------------------------------- */

.auth-modal {
  position: fixed;
  z-index: 20000;

  inset: 0;

  display: grid;
  place-items: center;

  padding: 20px;
}

.auth-modal[hidden] {
  display: none !important;
}


/* Dark transparent background */

.auth-backdrop {
  position: absolute;

  inset: 0;

  background:
    rgb(5 26 64 / 58%);

  backdrop-filter: blur(4px);
}


/* Main login / signup card */

.auth-card {
  position: relative;
  z-index: 1;

  width: min(
    430px,
    100%
  );

  max-height:
    calc(
      100vh -
      40px
    );

  overflow-y: auto;

  padding: 22px;

  border: 1px solid var(--border);
  border-radius: 18px;

  background: var(--white);
  color: var(--text);

  box-shadow:
    0 24px 70px
    rgb(5 26 64 / 32%);
}


/* -------------------------------------------------------
   AUTH HEADER
------------------------------------------------------- */

.auth-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 18px;
}

.auth-label {
  margin: 0 0 4px;

  color: var(--blue);

  font-size: 0.67rem;
  font-weight: 800;

  letter-spacing: 0.11em;
}

.auth-card h2 {
  margin: 0;

  color: var(--navy);

  font-size: 1.35rem;
}

.auth-close-button {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  flex: 0 0 auto;

  padding: 0;

  border: 0;
  border-radius: 9px;

  background: #f2f4f7;
  color: var(--muted);

  font-size: 1.4rem;
  line-height: 1;
}

.auth-close-button:hover {
  background: var(--blue-light);
  color: var(--navy);
}


/* -------------------------------------------------------
   SIGN UP / LOG IN TABS
------------------------------------------------------- */

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 4px;

  margin-bottom: 18px;

  padding: 4px;

  border-radius: 11px;

  background: #eef2f6;
}

.auth-tab {
  min-height: 38px;

  padding: 7px 10px;

  border: 0;
  border-radius: 8px;

  background: transparent;
  color: var(--muted);

  font-weight: 700;
}

.auth-tab:hover {
  color: var(--navy);
}

.auth-tab.active {
  background: var(--white);
  color: var(--navy);

  box-shadow:
    0 1px 4px
    rgb(16 24 40 / 12%);
}

/* -------------------------------------------------------
   GOOGLE AUTHENTICATION
------------------------------------------------------- */

.auth-social-section {
  display: grid;

  gap: 10px;

  margin-bottom: 4px;
}


.google-auth-button {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  width: 100%;
  min-height: 46px;

  padding: 9px 14px;

  border:
    1px solid
    #cfd6e1;

  border-radius: 10px;

  background: #ffffff;
  color: #172033;

  box-shadow:
    0 1px 3px
    rgb(16 24 40 / 10%);

  font-size: 0.9rem;
  font-weight: 750;
}


.google-auth-button:hover {
  border-color: #aeb8c6;
  background: #f8fafc;
}


.google-auth-button:focus-visible {
  outline:
    3px solid
    rgb(25 118 210 / 18%);

  outline-offset: 2px;
}


.google-auth-button:disabled {
  cursor: wait;
  opacity: 0.65;
}


.google-auth-icon {
  width: 20px;
  height: 20px;

  flex: 0 0 auto;
}


.google-auth-consent {
  margin-top: 0 !important;
}


.auth-divider {
  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: 10px;

  margin: 2px 0;

  color: var(--muted);

  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}


.auth-divider::before,
.auth-divider::after {
  height: 1px;

  background: var(--border);

  content: "";
}

/* -------------------------------------------------------
   AUTH FORMS
------------------------------------------------------- */

.auth-form {
  display: grid;

  gap: 7px;
}

.auth-form[hidden] {
  display: none !important;
}

.auth-form label {
  margin-top: 6px;

  color: var(--navy);

  font-size: 0.78rem;
  font-weight: 700;
}

.auth-form input {
  width: 100%;

  min-height: 43px;

  padding: 9px 11px;

  border: 1px solid var(--border);
  border-radius: 9px;

  background: var(--white);
  color: var(--text);
}

.auth-form input:focus {
  border-color: var(--blue);

  outline:
    3px solid
    rgb(25 118 210 / 13%);
}


/* -------------------------------------------------------
   EMAIL / EVENT UPDATE CONSENT
------------------------------------------------------- */

.auth-consent {
  display: grid !important;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  align-items: flex-start;

  gap: 9px;

  margin-top: 10px !important;

  color: var(--muted) !important;

  font-size: 0.75rem !important;
  font-weight: 500 !important;

  line-height: 1.4;
}

.auth-consent input {
  width: 17px;
  height: 17px;

  min-height: 0;

  margin: 1px 0 0;

  accent-color: var(--blue);
}


/* -------------------------------------------------------
   AUTH BUTTONS
------------------------------------------------------- */

.auth-primary-button {
  min-height: 44px;

  margin-top: 12px;

  padding: 9px 12px;

  border: 1px solid var(--navy);
  border-radius: 10px;

  background: var(--navy);
  color: var(--white);

  font-weight: 800;
}

.auth-primary-button:hover {
  background: var(--navy-dark);
}

.auth-primary-button:disabled {
  opacity: 0.6;
}


.auth-link-button {
  min-height: 36px;

  padding: 6px;

  border: 0;

  background: transparent;
  color: var(--blue);

  font-size: 0.78rem;
  font-weight: 700;
}

.auth-link-button:hover {
  text-decoration: underline;
}


/* -------------------------------------------------------
   AUTH STATUS / ERRORS
------------------------------------------------------- */

.auth-message {
  margin: 14px 0 0;

  padding: 10px 12px;

  border-radius: 9px;

  background: var(--blue-light);
  color: var(--navy);

  font-size: 0.78rem;
  line-height: 1.4;
}

.auth-message[hidden] {
  display: none;
}

.auth-message.error {
  background: var(--danger-light);
  color: var(--danger);
}

.auth-message.success {
  background: var(--success-light);
  color: var(--success);
}


/* -------------------------------------------------------
   MOBILE ACCOUNT SCREEN
------------------------------------------------------- */

@media (max-width: 700px) {

  .account-button {
    min-height: 35px;

    padding: 7px 10px;

    font-size: 0.78rem;
  }


  .auth-modal {
    align-items: end;

    padding: 0;
  }


  .auth-card {
    width: 100%;

    max-height:
      min(
        92vh,
        760px
      );

    padding:
      20px
      18px
      24px;

    border-radius:
      20px
      20px
      0
      0;
  }


  .auth-card h2 {
    font-size: 1.25rem;
  }

}

/* =======================================================
   VISITOR NAVIGATION
======================================================= */

.visitor-navigate-cta {
  position: absolute;
  z-index: 40;

  right: 16px;
  bottom: 18px;
  left: 16px;

  width: min(520px, calc(100% - 32px));

  margin: 0 auto;
}


.visitor-navigate-cta:has(
  .visitor-navigate-button[hidden]
) {
  display: none;
}


.visitor-navigate-button {
  width: 100%;
  min-height: 58px;

  border: 0;
  border-radius: 16px;

  background: #1976d2;
  color: #ffffff;

  box-shadow:
    0 8px 24px
    rgb(16 24 40 / 28%);

  font-size: 1.05rem;
  font-weight: 800;
}

.visitor-signup-prompt {
  margin: 8px 8px 0;
  padding: 9px 12px;

  border:
    1px solid
    rgb(255 255 255 / 72%);

  border-radius: 12px;

  background:
    rgb(255 255 255 / 94%);

  color: #475467;

  box-shadow:
    0 5px 18px
    rgb(16 24 40 / 16%);

  font-size: 0.78rem;
  line-height: 1.4;
  text-align: center;
}


.visitor-signup-link {
  display: inline;

  padding: 0;
  border: 0;

  background: transparent;
  color: #1565c0;

  font: inherit;
  font-weight: 800;

  text-decoration: underline;
  text-underline-offset: 2px;

  cursor: pointer;
}


.visitor-signup-link:hover {
  color: #0d47a1;
}


.visitor-signup-link:focus-visible {
  outline:
    3px solid
    rgb(25 118 210 / 28%);

  outline-offset: 3px;
  border-radius: 3px;
}

.visitor-navigate-button:hover {
  background: #1565c0;
}


.visitor-navigate-button[hidden] {
  display: none !important;
}


/*
  Keep the current-location card above the large
  Navigate button.
*/

.map-container:has(
  .visitor-navigate-button:not([hidden])
)
.location-card {
  bottom: 154px;
}


/* Active navigation status */

.visitor-navigation-panel {
  position: absolute;
  z-index: 42;

  right: 12px;
  bottom: 14px;
  left: 12px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 12px;

  width: min(
    560px,
    calc(100% - 24px)
  );

  min-height: 72px;

  margin: 0 auto;

  padding: 12px 14px;

  border:
    1px solid
    rgb(8 38 92 / 16%);

  border-radius: 16px;

  background:
    rgb(255 255 255 / 97%);

  box-shadow:
    0 10px 30px
    rgb(16 24 40 / 25%);

  backdrop-filter:
    blur(10px);
}


.visitor-navigation-panel[hidden] {
  display: none !important;
}


.visitor-navigation-panel-text {
  min-width: 0;
}


.visitor-navigation-panel-text > span {
  display: block;

  color: #667085;

  font-size: 0.68rem;
  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.06em;
}


.visitor-navigation-panel-text strong {
  display: block;

  overflow: hidden;

  margin-top: 2px;

  color: #08265c;

  font-size: 0.95rem;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.visitor-navigation-panel-text p {
  margin: 4px 0 0;

  color: #1976d2;

  font-size: 0.82rem;
  font-weight: 700;
}


.visitor-stop-navigation-button {
  min-width: 56px;
  min-height: 42px;

  padding: 7px 10px;

  border:
    1px solid
    #d8dee9;

  border-radius: 10px;

  background: #ffffff;
  color: #b42318;

  font-weight: 800;
}


@media (max-width: 700px) {

  .visitor-navigate-cta {
  right: 10px;
  bottom: 10px;
  left: 10px;

  width:
    calc(
      100% -
      20px
    );
}


.visitor-navigate-button {
  min-height: 60px;
}


.visitor-signup-prompt {
  margin-right: 4px;
  margin-left: 4px;

  padding: 8px 10px;

  font-size: 0.73rem;
}


  .visitor-navigation-panel {
    right: 10px;
    bottom: 10px;
    left: 10px;

    width:
      calc(
        100% -
        20px
      );
  }


  .map-container:has(
    .visitor-navigate-button:not([hidden])
  )
  .location-card {
    bottom: 150px;
  }
}

.visitor-navigation-warning {
  display: block;

  margin-top: 4px;

  color: #667085;

  font-size: 0.64rem;

  line-height: 1.3;
}

/* -------------------------------------------------------
   VISITOR SEARCH SELECTED RESULT
------------------------------------------------------- */

.visitor-search-selected-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 26px;

  padding:
    4px
    8px;

  border-radius:
    999px;

  background:
    var(--success-light);

  color:
    var(--success);

  font-size:
    0.68rem;

  font-weight:
    800;

  white-space:
    nowrap;
}


.visitor-search-selected-badge[hidden] {
  display:
    none !important;
}

/* -------------------------------------------------------
   NOW HAPPENING EVENT BANNER
------------------------------------------------------- */

.visitor-now-happening-banner {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  width: 100%;
  min-height: 48px;

  margin-bottom: 8px;

  padding:
    0
    14px;

  overflow: hidden;

  border:
    1px solid
    rgb(255 255 255 / 28%);

  border-radius:
    24px;

  background:
    linear-gradient(
      135deg,
      #b42318 0%,
      #d92d20 45%,
      #b42318 100%
    );

  color:
    #ffffff;

  box-shadow:
    0 4px 12px
    rgb(180 35 24 / 28%);

  font-size:
    0.78rem;

  font-weight:
    800;

  white-space:
    nowrap;
}


/*
  Slightly brighter "NOW HAPPENING" text.
*/

.visitor-now-happening-label {
  color:
    #fff1b8;

  font-size:
    0.68rem;

  font-weight:
    900;

  letter-spacing:
    0.05em;
}


/*
  Reflective sword / polished-metal glare.

  A narrow diagonal white band repeatedly sweeps
  across the whole banner.
*/

.visitor-now-happening-banner::after {
  position: absolute;

  top:
    -70%;

  left:
    -45%;

  width:
    28%;

  height:
    240%;

  content:
    "";

  background:
    linear-gradient(
      90deg,
      transparent,
      rgb(255 255 255 / 12%),
      rgb(255 255 255 / 78%),
      rgb(255 255 255 / 18%),
      transparent
    );

  filter:
    blur(1px);

  transform:
    rotate(18deg);

  animation:
    visitorBannerGlare
    2.8s
    ease-in-out
    infinite;

  pointer-events:
    none;
}


@keyframes visitorBannerGlare {

  0% {
    left:
      -45%;

    opacity:
      0;
  }


  15% {
    opacity:
      1;
  }


  55% {
    opacity:
      1;
  }


  70%,
  100% {
    left:
      125%;

    opacity:
      0;
  }
}


/*
  Respect devices where the user has disabled
  motion effects.
*/

@media (
  prefers-reduced-motion:
  reduce
) {
  .visitor-now-happening-banner::after {
    animation:
      none;
  }
}