/* Entrance Door demo — only what is specific to this demo (camera view buttons, the
   door-motion box and the background-brightness slider floating over the stage). The panel, controls, price footer and quote
   modal are styled by the website's UI kit: /css/configurator-ui.css */

/* module buttons (e.g. "View in AR"): after Reset View; no box of their own when empty */
.ed-stage-actions { display: contents; }
.ed-stage-action { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ed-stage-action svg { flex: none; }

/* bottom of the stage, centred in the free area left of the panel (--cfg-panel-w is published by the kit) */
.ed-background-control {
  position: absolute;
  bottom: 20px;
  left: calc((100% - var(--cfg-panel-w, 340px)) / 2);
  transform: translateX(-50%);
  max-width: calc(100% - var(--cfg-panel-w, 340px) - 24px);
  z-index: 3;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  font-size: .75rem;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(var(--panel-rgb), var(--cfg-glass));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ed-background-control input { width: 112px; min-height: 28px; accent-color: var(--accent); cursor: pointer; }
.ed-background-control output { min-width: 4ch; text-align: right; font-family: var(--font-mono); }

/* Dark background (brightness slider below 30%, class set in demo.js): the frosted-glass toolbar and slider read on it
   as they are; the boxes with a see-through background and the plain-text hints get white text and a light outline. */
.ed-dark-bg .ed-motion-hint,
.ed-dark-bg .ed-angle-control,
.ed-dark-bg .ed-angle-control output,
.ed-dark-bg .cfg-hint {
  color: #fff;
}
.ed-dark-bg .ed-motion {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- door motion control (floating over the stage) ---------- */

.ed-motion {
  position: absolute;
  bottom: 52px; /* clears the "Drag to orbit" hint in the corner */
  left: 20px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  background: rgba(var(--panel-rgb), 0.2); /* same see-through look as the toolbar buttons */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.ed-motion-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
}

.ed-motion-btn:disabled {
  background: var(--bg-alt);
  border-color: var(--border);
  color: var(--text-dim);
  cursor: default;
}

.ed-motion-btn svg {
  width: 14px;
  height: 14px;
}

.ed-angle-control {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--text-dim);
}

.ed-angle-control input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.ed-angle-control output {
  font-family: var(--font-mono);
  color: var(--text);
  min-width: 2.2em;
  text-align: right;
}

.ed-motion-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-dim);
  text-align: center;
}

/* floating "Open door" / "Close door" label that follows the cursor
   while it hovers the door mesh in the 3D view */

.ed-door-tooltip {
  position: fixed;
  z-index: 6;
  pointer-events: none;
  transform: translate(16px, -50%);
  background: rgba(30, 34, 32, 0.88);
  color: #fbfbf8;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.ed-door-tooltip[hidden] {
  display: none;
}

/* ---------- narrow desktop / tablet: the free area is too small to centre the slider between the motion box and the panel,
   so it stacks above the "Drag to orbit" hint and the motion box moves up above it ---------- */

@media (min-width: 781px) and (max-width: 1100px) {
  .ed-background-control {
    left: 20px;
    bottom: 44px;
    transform: none;
  }

  .ed-motion {
    bottom: 96px;
  }
}

/* ---------- mobile ---------- */

@media (max-width: 780px) {
  .ed-motion {
    display: none;
  }

  .ed-background-control {
    bottom: 12px;
  }

  .ed-background-control input {
    width: 88px;
  }

  .ed-door-tooltip {
    display: none;
  }
}