/* Blizzard Beam Placement — embeddable product page (dark mode)
   Namespaced under .bp- to avoid colliding with host site styles. */

.bp-root {
  --bp-bg: black;
  --bp-panel: #151515;
  --bp-card: #151515;
  --bp-border: #000000;
  --bp-border2: #2f3a5c;
  --bp-text: #e6ebf7;
  --bp-muted: #717171;
  --bp-dim: #4a5268;
  --bp-navy: #0047ba;
  --bp-sky: #0047ba;
  --bp-amber: #f5a623;
  --bp-green: #2bc97a;
  --bp-dark: black;

  font-family: "Gilroy", "Inter", system-ui, sans-serif;
  color: var(--bp-text);
  background: var(--bp-bg);
  border-radius: 12px;
  padding: 20px 0 20px 0px;
}

.bp-app { display: flex; flex-direction: column; gap: 16px; margin: 0 auto; }

.bp-card {
  background: var(--bp-card);
  border: 1px solid var(--bp-border);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

.bp-section-label {
  font-family: BlizzCond Bold, sans-serif;
  text-transform: uppercase;
  line-height: 1em;
  font-size: 2.5em;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bp-sky);
}
.bp-section-label::after { content: ""; flex: 1; height: 1px; background: var(--bp-border); }

/* ── visualizer ── */
.bp-visual-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--bp-border);
  background: var(--bp-dark);
  box-shadow: inset 0 2px 12px rgba(0,0,0,.4);
  touch-action: none;
  height: clamp(300px, 38vw, 480px);
}
.bp-visual-wrap svg { display: block; width: 100%; height: 100%; }
.bp-drag-handle { cursor: grab; }

/* ── status bar ── */
.bp-status-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--bp-panel);
  border: 1px solid var(--bp-border);
  border-left: 3px solid var(--bp-sky);
  border-radius: 6px;
  font-size: 16px;
  color: var(--bp-muted);
  margin-bottom: 14px;
}
.bp-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bp-dim); flex-shrink: 0; }
.bp-status-dot.ok   { background: var(--bp-green); box-shadow: 0 0 6px var(--bp-green); }
.bp-status-dot.warn { background: var(--bp-amber); box-shadow: 0 0 6px var(--bp-amber); }

/* ── results ── */
.bp-results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.bp-result-tile {
  background: var(--bp-navy);
  border: 1px solid var(--bp-border);
  border-radius: 8px;
  padding: 14px 16px;
}
.bp-result-label { font-size: 14px; letter-spacing: .1em; color: #fff; opacity: .7; margin-bottom: 6px; }
.bp-result-value { font-size: 28px; font-weight: 700; color: #fff; line-height: 1.1; }
.bp-result-sub   { font-size: 13px; color: #fff; opacity: .5; margin-top: 2px; }

/* ── unit toggle ── */
.bp-unit-toggle {
  display: inline-flex; align-items: center;
  background: var(--bp-panel); border: 1px solid var(--bp-border);
  border-radius: 6px; padding: 2px; cursor: pointer; user-select: none;
}
.bp-unit-option { font-size: 13px; font-weight: 700; letter-spacing: .08em; padding: 5px 14px; color: var(--bp-muted); transition: all .15s; border-radius: 4px; }
.bp-unit-option.on { background: var(--bp-navy); color: #fff; }

/* ── sliders ── */
.bp-sliders-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
@media (max-width: 640px) { .bp-sliders-grid { grid-template-columns: 1fr; } }
.bp-slider-row { margin-bottom: 0; }
.bp-slider-row-label { display: flex; align-items: baseline; margin-bottom: 6px; }
.bp-slider-row-label label { font-size: 18px;
    font-weight: 500; color: white; flex: 1; }
.bp-slider-controls { display: flex; align-items: center; gap: 10px; }
.bp-slider-controls input[type="range"] {
  flex: 1; accent-color: var(--bp-sky);
  background: transparent;
}
.bp-slider-num {
  width: 70px; height: 34px;
  font-size: 12px; padding: 0 7px;
  text-align: right;
  background: var(--bp-panel);
  border: 1px solid var(--bp-border);
  border-radius: 4px;
  color: var(--bp-text);
  outline: none;
  flex-shrink: 0;
}
.bp-slider-num:focus { border-color: var(--bp-sky); box-shadow: 0 0 0 3px rgba(41,176,224,.18); }

.bp-formula-note {
  font-size: 13px; line-height: 1.7; color: var(--bp-muted);
  border-top: 1px solid var(--bp-border);
  padding-top: 12px; margin-top: 16px;
}

/* ── photometric chart ── */
.bp-photo-chart { display: block; width: 100%; height: auto; }