/* Sensor examples are scoped to the LiDAR service page. */
.product-page--lidar [data-lidar-previews] [hidden],
.product-page--lidar [data-lidar-demo] [hidden] {
  display: none;
}

.product-page--lidar .lidar-video-card {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  padding: 0;
  border: 0;
  background: #080e1b;
  cursor: pointer;
}

.product-page--lidar .lidar-video-card .lidar-video-poster,
.product-page--lidar .lidar-video-card video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  transition: opacity 180ms ease;
}

.product-page--lidar .lidar-video-card video {
  opacity: 0;
}

.product-page--lidar .lidar-video-card.is-playing .lidar-video-poster {
  opacity: 0;
}

.product-page--lidar .lidar-video-card.is-playing video {
  opacity: 1;
}

.product-page--lidar .product-use-card .lidar-preview-hint {
  margin-top: 0.75rem;
  color: #657183;
  font-size: 0.75rem;
  line-height: 1.5;
}

.product-page--lidar .lidar-hint-touch {
  display: none;
}

.product-page--lidar .lidar-video-error {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  padding: 8px 10px;
  border-radius: 4px;
  background: rgba(8, 14, 27, 0.9);
  color: #edf3ff;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}

.product-page--lidar #lidar-demo-viewer {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: #080e1b;
}

.product-page--lidar .lidar-demo-viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #080e1b;
}

.product-page--lidar .lidar-stage,
.product-page--lidar .lidar-interactive-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.product-page--lidar .lidar-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

.product-page--lidar .lidar-stage canvas:active {
  cursor: grabbing;
}

.product-page--lidar .lidar-interactive-poster {
  object-fit: cover;
}

.product-page--lidar .lidar-toolbar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  color: #f0f4fa;
  font-size: 11px;
  line-height: 1.4;
}

.product-page--lidar .lidar-toolbar button,
.product-page--lidar .lidar-toolbar select,
.product-page--lidar .lidar-boxes-control,
.product-page--lidar .lidar-options > summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  background: rgba(8, 14, 27, 0.85);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.product-page--lidar .lidar-toolbar button:hover:not(:disabled),
.product-page--lidar .lidar-options > summary:hover {
  background: #21334d;
}

.product-page--lidar .lidar-toolbar button:disabled,
.product-page--lidar .lidar-toolbar select:disabled,
.product-page--lidar .lidar-toolbar input:disabled {
  opacity: 0.55;
  cursor: wait;
}

.product-page--lidar .lidar-boxes-control {
  gap: 6px;
  white-space: nowrap;
}

.product-page--lidar .lidar-boxes-control input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #73c8ef;
}

.product-page--lidar .lidar-options {
  position: relative;
}

.product-page--lidar .lidar-options > summary {
  list-style: none;
}

.product-page--lidar .lidar-options > summary::-webkit-details-marker {
  display: none;
}

.product-page--lidar .lidar-options-panel {
  position: absolute;
  top: 48px;
  right: 0;
  display: grid;
  gap: 4px;
  min-width: 150px;
  padding: 6px;
  border-radius: 6px;
  background: #122137;
}

.product-page--lidar .lidar-options-panel select {
  width: 100%;
}

.product-page--lidar .lidar-demo-caption {
  padding: 10px 14px;
  background: #fff;
  color: #657183;
  font-size: 11px;
  line-height: 1.5;
}

.product-page--lidar .lidar-fallback {
  margin-top: 6px;
  color: #46546a;
}

.product-page--lidar .lidar-source {
  margin-top: 16px;
  color: #657183;
  font-size: 11px;
  line-height: 1.7;
}

.product-page--lidar .lidar-source > summary {
  width: fit-content;
  min-height: 44px;
  padding: 12px 0;
  cursor: pointer;
  list-style: disclosure-closed inside;
}

.product-page--lidar .lidar-source[open] > summary {
  list-style-type: disclosure-open;
}

.product-page--lidar .lidar-source a {
  color: #4e6178;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.product-page--lidar .lidar-video-card:focus-visible,
.product-page--lidar .lidar-toolbar :focus-visible,
.product-page--lidar .lidar-source :focus-visible {
  outline: 2px solid #258bf0;
  outline-offset: 4px;
  border-radius: 5px;
}

.product-page--lidar .lidar-stage canvas:focus-visible {
  outline: 2px solid #8bc2ff;
  outline-offset: -4px;
}

.product-page--lidar .bb-demo__code:focus-visible {
  outline: 2px solid #258bf0;
  outline-offset: 4px;
  border-radius: 3px;
}

.product-page--lidar [data-lidar-run] {
  flex-shrink: 0;
  min-height: 44px;
  margin-top: 16px;
}

.product-page--lidar [data-lidar-run]:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.product-page--lidar .lidar-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1024px) {
  .product-page--lidar #lidar-demo-viewer {
    min-height: 300px;
    aspect-ratio: 8 / 5;
  }
}

@media (max-width: 520px) {
  .product-page--lidar .lidar-toolbar {
    top: 4px;
    right: 4px;
    gap: 2px;
  }

  .product-page--lidar .lidar-toolbar button,
  .product-page--lidar .lidar-boxes-control,
  .product-page--lidar .lidar-options > summary {
    padding-right: 8px;
    padding-left: 8px;
  }
}

@media (hover: none) {
  .product-page--lidar .lidar-hint-hover {
    display: none;
  }

  .product-page--lidar .lidar-hint-touch {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-page--lidar .lidar-hint-hover {
    display: none;
  }

  .product-page--lidar .lidar-hint-touch {
    display: inline;
  }

  .product-page--lidar .lidar-video-card .lidar-video-poster,
  .product-page--lidar .lidar-video-card video {
    transition: none;
  }
}