/* =========================================================
   TVL LENS TOOL — PREMIUM CALM UI (CLEAN SINGLE SOURCE)
   - no duplicate overrides
   - fixed controls (no scroll)
   - stable desktop + fullscreen + SBS + detail viewer
   ========================================================= */

/* ---------------------------
   RESET / BASE
--------------------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; }

img{ max-width:100%; height:auto; display:block; }

:root{
  /* used by JS transforms */
  --sensor-scale: 1;
  --viewer-scale: 1;

  /* controls spacer height (set by JS) */
  --controls-stack-h: 0px;

  /* palette */
  --bg: #050505;
  --surfaceA: rgba(14,14,14,.82);
  --surfaceB: rgba(8,8,8,.78);

  --hairline: rgba(255,255,255,.08);
  --hairline2: rgba(255,255,255,.06);

  --shadowA: 0 18px 54px rgba(0,0,0,.62);
  --shadowB: 0 10px 28px rgba(0,0,0,.45);

  --accent: #ff7c00;
  --text: rgba(245,245,245,.92);
  --muted: rgba(245,245,245,.60);

  --radius: 14px;
  --radius-sm: 12px;

  --chip-bg: rgba(15,15,15,.66);
  --chip-stroke: rgba(255,255,255,.11);
  --chip-stroke-hover: rgba(255,255,255,.18);

  --focus: 0 0 0 2px rgba(255,124,0,.22), 0 0 0 6px rgba(0,0,0,.72);

  --hpad: 16px;
}

body{
  font-family: Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 50% -260px, rgba(255,124,0,.06), transparent 62%),
    var(--bg);
}

/* prevent drag/select in UI (except explicit opt-in areas) */
*{
  -webkit-user-drag:none;
  user-select:none;
}

body.dragging,
body.dragging *{
  cursor: ew-resize !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}

/* ---------------------------
   ACCESSIBILITY
--------------------------- */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.field{ display:flex; }

/* =========================================================
   HEADER LOGO
========================================================= */
#igHeader{
  width:100%;
  display:flex;
  justify-content:center;
  padding:18px 0 10px;
}

#igHeader img{
  height:58px;
  width:auto;
  opacity:.95;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.55));
  transition: opacity .2s ease, transform .2s ease;
}

#igHeader img:hover{
  opacity:1;
  transform: translateY(-1px);
}

/* =========================================================
   OUTER LAYOUT
========================================================= */
#toolRoot{ width:100%; }

.frame-1200{
  width:min(1200px, 94vw);
  margin:0 auto;
  padding-bottom:34px;
}

body.sbs-mode .frame-1200{
  width:min(1600px, 94vw);
}

/* =========================================================
   CONTROLS STACK (DESKTOP) — ALWAYS FIXED
   - add <div id="controlsSpacer"></div> right after controls
   - JS updates --controls-stack-h to match controls height
========================================================= */
.controlsStack.desktop-only{
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 94vw);
  z-index: 9999;

  margin: 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

body.sbs-mode .controlsStack.desktop-only{
  width: min(1600px, 94vw);
}

/* reserved space so viewer doesn’t slide under fixed controls */
#controlsSpacer{
  height: calc(var(--controls-stack-h) + 10px); /* + top offset */
}

/* panel */
.controlsStack .panel{
  width:100%;
  padding:14px var(--hpad);
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--surfaceA), var(--surfaceB));
  box-shadow: var(--shadowB);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position:relative;
  overflow:hidden;
}

/* rows */
.controlsStack .row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

/* top panel layout */
.controlsTop .camRow{
  justify-content:center;
  gap:10px;
  margin-bottom:10px;
}

.controlsTop .lensRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:nowrap; /* desktop */
}

.controlsTop .lensSide{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:nowrap;
}

.controlsTop .lensSide .field:first-child{
  flex:1 1 auto;
  min-width:0;
}

.controlsTop .lensSide .field{
  flex:0 0 auto;
}

.controlsTop .lensCenter{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* bottom panel layout */
.controlsBottom .actionRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.controlsBottom .actionLeft{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:2px;
}
.controlsBottom .actionLeft::-webkit-scrollbar{ display:none; }

.controlsBottom .actionRight{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* advanced panel */
#advancedPanel.advancedPanel{
  display:none;
  margin-top:10px;
  padding:10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(14,14,14,.86), rgba(8,8,8,.86));
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
#advancedPanel.advancedPanel.open{ display:flex; }

.controlsBottom .scaleRow{
  margin-top:10px;
  justify-content:center;
}

/* allow wrap on smaller screens */
@media (max-width:1000px){
  .controlsTop .lensRow{ flex-wrap:wrap; }
  .controlsTop .lensSide{ flex-wrap:wrap; }
}

/* =========================================================
   INPUTS — PREMIUM CALM CHIPS
========================================================= */
select,
.control-button{
  height: 36px;
  border-radius: 999px;
  padding: 0 12px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-stroke);
  color: var(--text);
  font-size: 13px;
  letter-spacing: .02em;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  box-shadow: 0 10px 26px rgba(0,0,0,.40);
  transition:
    transform .12s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease,
    filter .18s ease;
}

select{
  cursor:pointer;
  line-height:normal;
  -webkit-appearance:none;
  appearance:none;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.65) 50%),
    linear-gradient(135deg, rgba(255,255,255,.65) 50%, transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.00));
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%,
    0 0;
  background-size:
    5px 5px,
    5px 5px,
    100% 100%;
  background-repeat:no-repeat;
  padding-right:30px;
}

select:hover,
.control-button:hover{
  border-color: var(--chip-stroke-hover);
  box-shadow: 0 12px 30px rgba(0,0,0,.48);
  filter: brightness(1.04);
}

select:active,
.control-button:active{
  transform: translateY(.5px) scale(.99);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}

select:focus-visible,
.control-button:focus-visible{
  outline:none;
  box-shadow: var(--focus);
  border-color: rgba(255,124,0,.55);
}

.control-button:disabled,
select:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
  filter:none;
}

/* widths */
#cameraSelect,#sensorFormatSelect{ min-width:220px; }
#focalLength{ min-width:140px; }

#leftLens,#rightLens{
  width:100%;
  min-width:0;
}

#tStopLeftSelect,#tStopRightSelect{ min-width:96px; }
#mfAltLeft,#mfAltRight{ min-width:96px; }

@media (max-width:1000px){
  #cameraSelect,#sensorFormatSelect{ min-width:190px; }
}

/* =========================================================
   ACTIVE STATES (TOGGLES)
========================================================= */
button.active,
.controls button.active{
  background: rgba(255,124,0,.14) !important;
  border-color: rgba(255,124,0,.70) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.50),
    0 0 0 1px rgba(255,124,0,.18) !important;
}

#flareToggle[data-mode="noflare"]{ opacity:.95; }

/* =========================================================
   SCALE CHIP
========================================================= */
#scaleCtrl.chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height: 36px;
  padding: 0 12px;
  border-radius:999px;
  background: rgba(15,15,15,.62);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.38);
  flex: 0 0 auto;
}

#scaleCtrl #scaleVal{
  min-width:46px;
  text-align:right;
  color: var(--muted);
  letter-spacing:.06em;
}

#scaleCtrl input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width: 140px;
  height:18px;
  background:transparent;
  margin:0;
  padding:0;
}

@media (max-width:1000px){
  #scaleCtrl input[type="range"]{ width:120px; }
}

#scaleCtrl input[type="range"]::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background: rgba(255,255,255,.14);
}
#scaleCtrl input[type="range"]::-moz-range-track{
  height:4px;
  border-radius:999px;
  background: rgba(255,255,255,.14);
}
#scaleCtrl input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background: var(--accent);
  border:2px solid rgba(0,0,0,.9);
  margin-top:-5px;
  box-shadow: 0 10px 18px rgba(0,0,0,.55), 0 0 16px rgba(255,124,0,.22);
}
#scaleCtrl input[type="range"]::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background: var(--accent);
  border:2px solid rgba(0,0,0,.9);
  box-shadow: 0 10px 18px rgba(0,0,0,.55), 0 0 16px rgba(255,124,0,.22);
}

/* =========================================================
   MF MATCH WRAP
========================================================= */
.mfAltWrap{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0;
  border:0;
  background:transparent;
}
.mfAltLabel{
  font-size:11px;
  opacity:.70;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* =========================================================
   VIEWER
========================================================= */
#comparisonWrapper{
  position:relative;
  width:100%;
  min-height:clamp(360px,56vw,900px);
  background:#000;
  overflow:hidden;

  /* safe bars vars (set by JS) */
  --lb-top:0px;
  --lb-bottom:0px;
  --lb-left:0px;
  --lb-right:0px;

  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadowA);

  touch-action:none; /* prevents scroll while dragging */
}

/* subtle accent outline */
#comparisonWrapper::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  border: 1px solid rgba(255,140,0,.55);
  pointer-events:none;
  z-index: 8;
}

/* layers sized to “usable window” */
#beforeImage,
#afterWrapper,
#sbsWrapper{
  position:absolute;
  inset: var(--lb-top,0px) var(--lb-right,0px) var(--lb-bottom,0px) var(--lb-left,0px);
}

#beforeImage{ z-index:1; }

#afterWrapper{
  overflow:hidden;
  z-index:2;
  clip-path:inset(0 50% 0 0);
  -webkit-clip-path:inset(0 50% 0 0);
  will-change:clip-path;
}

/* ✅ ÉÉN bron voor transforms: slider + SBS */
#beforeImgTag,
#afterImgTag,
#sbsLeftImg,
#sbsRightImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;

  --cal-tx: 0px;
  --cal-ty: 0px;
  --cal-scale: 1;

  transform:
    scale(calc(var(--sensor-scale) * var(--viewer-scale)))
    translate(var(--cal-tx), var(--cal-ty))
    scale(var(--cal-scale));

  transform-origin:center;
  will-change:transform;
}

/* =========================================================
   SLIDER — wide hit area, thin visible line, NO KNOB
========================================================= */
#slider{
  position:absolute;
  top:var(--lb-top,0px);
  bottom:var(--lb-bottom,0px);

  left:50%;
  transform:translateX(-50%);
  width:24px;           /* hit area */
  background:transparent;
  cursor: ew-resize;
  z-index:10;
  touch-action:none;
}

#slider::before{
  content:"";
  position:absolute;
  left:50%;
  top:0; bottom:0;
  width:2px;
  transform:translateX(-50%);
  background: rgba(255,124,0,.92);
  box-shadow: 0 0 18px rgba(255,124,0,.28);
}

/* =========================================================
   FULLSCREEN + SAFE BARS
========================================================= */
#comparisonWrapper:fullscreen,
#comparisonWrapper:-webkit-full-screen{
  width:100vw;
  height:100vh;
  margin:0;
  border-radius:0;
  border:none;
  box-shadow:none;
  background:#000;
  padding:0;
  overflow:hidden;
}

#comparisonWrapper:fullscreen::after,
#comparisonWrapper:-webkit-full-screen::after{
  display:none;
}

/* FS bars overlay */
#fsBars{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:9;
}

#fsBars .bar{ position:absolute; background:#000; }
#fsBars .top{ top:0; left:var(--lb-left,0); right:var(--lb-right,0); height:var(--lb-top,0); }
#fsBars .bottom{ bottom:0; left:var(--lb-left,0); right:var(--lb-right,0); height:var(--lb-bottom,0); }
#fsBars .left{ top:var(--lb-top,0); bottom:var(--lb-bottom,0); left:0; width:var(--lb-left,0); }
#fsBars .right{ top:var(--lb-top,0); bottom:var(--lb-bottom,0); right:0; width:var(--lb-right,0); }

#comparisonWrapper:fullscreen #fsBars::after,
#comparisonWrapper:-webkit-full-screen #fsBars::after{
  content:"";
  position:absolute;
  top:var(--lb-top,0);
  bottom:var(--lb-bottom,0);
  left:var(--lb-left,0);
  right:var(--lb-right,0);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 20px rgba(255,124,0,.14);
}

/* FS enter — hide 1-2 frames if your JS toggles .fs-entering */
#comparisonWrapper.fs-entering #beforeImage,
#comparisonWrapper.fs-entering #afterWrapper,
#comparisonWrapper.fs-entering #slider,
#comparisonWrapper.fs-entering #fsBars,
#comparisonWrapper.fs-entering #sbsWrapper{
  opacity: 0 !important;
}
#comparisonWrapper.fs-entering{ background:#000 !important; }

/* =========================================================
   SIDE-BY-SIDE MODE
========================================================= */
#sbsWrapper{
  z-index:3;
  display:none;
}

body.sbs-mode #beforeImage,
body.sbs-mode #afterWrapper,
body.sbs-mode #slider,
body.sbs-mode #fsBars{
  display:none !important;
}

body.sbs-mode #sbsWrapper{
  display:flex !important;
}

body.sbs-mode #sbsWrapper .pane{
  position:relative;
  flex:1 1 50%;
  overflow:hidden;
}

body.sbs-mode #sbsWrapper .pane:first-child{
  border-right:1px solid rgba(255,255,255,.08);
}
body.sbs-mode #sbsWrapper .pane:last-child{
  border-left:1px solid rgba(255,255,255,.08);
}



/* =========================================================
   INFO / LABELS
========================================================= */
#infoContainer{
  width:100%;
  margin:14px 0 10px;
  padding:0 10px;

  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;

  color: var(--muted);
}

.infoCol{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
}

#leftLabel,#rightLabel{
  white-space:nowrap;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

#infoContainer a{
  color: var(--text);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18);
}
#infoContainer a:hover{
  border-bottom-color: rgba(255,124,0,.55);
}

/* =========================================================
   LENS INFO + EXPLANATION
   (copy/select enabled)
========================================================= */
#lensInfo{
  width:100%;
  margin:14px 0 0;
  padding:0 10px;

  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:stretch;

  color: rgba(245,245,245,.78);
}

#lensInfo > *{
  margin:0;
  padding:12px 14px;
  border-radius: var(--radius-sm);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(12,12,12,.55);
  color: rgba(245,245,245,.74);
  line-height:1.35;
}

#lensInfo b,
#lensInfo strong{
  color: rgba(255,124,0,.95);
  font-weight:700;
}

@media (max-width:980px){
  #lensInfo{ grid-template-columns: 1fr; }
}

#explanationBox{
  width:100%;
  margin:16px 0 0;
  padding:18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(12,12,12,.50);
  color: rgba(245,245,245,.62);
  font-size:13px;
  line-height:1.65;
  letter-spacing:.1px;
}

/* optional “noteItem” styling if your JS uses it */
#explanationBox .noteItem{
  display:grid;
  grid-template-columns: 22px 1fr;
  gap:10px;
  align-items:start;

  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
}
#explanationBox .noteItem + .noteItem{ margin-top: 12px; }
#explanationBox .noteIcon{ opacity: .9; transform: translateY(3px); }
#explanationBox p{ margin:0; opacity:.95; }

/* allow copy/select in info areas */
#lensInfo, #lensInfo * , #explanationBox, #explanationBox *{
  user-select:text;
  -webkit-user-select:text;
}

/* =========================================================
   DETAIL VIEWER
========================================================= */
#detailOverlay{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  z-index:9999;
  display:none;
}
#detailOverlay.active{ display:block; }

.detail-view-square{
  position:absolute;
  width:260px;
  height:260px;
  overflow:hidden;
  border-radius: 14px;
  background: rgba(0,0,0,.88);
  border:1px solid rgba(255,124,0,.42);
  box-shadow: 0 22px 60px rgba(0,0,0,.65), 0 0 24px rgba(255,124,0,.14);
}

.detail-view-square img{
  position:absolute;
  width:300%;
  height:auto;
  object-fit:cover;
  transform-origin:top left;
  max-width:none !important; /* override WP */
  max-height:none !important;
}

/* SBS seam */
body.sbs-mode #leftDetail{
  border-right:0 !important;
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;
}
body.sbs-mode #rightDetail{
  border-left:0 !important;
  border-top-left-radius:0 !important;
  border-bottom-left-radius:0 !important;
}

/* =========================================================
   MOBILE EMBED
========================================================= */
.lens-frame-outer,
.lens-frame-outer.mobile-only{
  display:none !important;
}

.controls.mobile-only{ display:none !important; }

@media (max-width:767px){
  #fullscreenButton,#detailViewToggle{ display:none !important; }

  .controlsStack.desktop-only{ display:none !important; }
  #controlsSpacer{ height:0 !important; } /* no desktop stack on mobile */

  .controls.mobile-only{ display:block !important; }
  .lens-frame-outer{ display:block !important; }

  #infoContainer{ padding:0 12px; }
  #lensInfo{ padding:0 12px; }
}

/* guard against duplicate stacks (theme/pagebuilder weirdness) */
.controlsStack.desktop-only:not(:first-of-type),
.controls.mobile-only:not(:first-of-type){
  display:none !important;
}

/* =========================================================
   FULLSCREEN GATE MODAL
========================================================= */
#fsGate{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#fsGate[aria-hidden="true"]{ display:none; }

.fsGateCard{
  width:min(520px, 92vw);
  padding:18px 18px 16px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(14,14,14,.86), rgba(8,8,8,.86));
  box-shadow: 0 24px 70px rgba(0,0,0,.65);
  text-align:center;
}

.fsGateTitle{
  font-size:16px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: rgba(255,124,0,.95);
  margin-bottom:8px;
}

.fsGateText{
  color: rgba(245,245,245,.75);
  margin-bottom:14px;
}

.fsGateHint{
  margin-top:12px;
  font-size:12px;
  color: rgba(245,245,245,.55);
}

/* =========================================================
   PRINT + REDUCED MOTION
========================================================= */
@media print{
  body{ background:#fff !important; color:#000 !important; }
  .controlsStack,#explanationBox,#fsGate,#detailOverlay{ display:none !important; }
  #controlsSpacer{ height:0 !important; }
  #comparisonWrapper{ width:100% !important; height:auto !important; }
  #comparisonWrapper img{ object-fit:contain !important; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}

/* keyboard focus: calibrate button */
#calibrateToggle:focus-visible:not(.active){
  box-shadow: var(--focus) !important;
  outline:none !important;
}
/* ===============================
   FIX: Controls gewoon in flow
   (logo -> controls -> viewer)
================================ */

.controlsStack.desktop-only{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;

  width: 100% !important;          /* binnen .frame-1200 */
  z-index: 2 !important;

  margin: 14px 0 16px !important;  /* ruimte onder logo */
}

/* SBS breedte niet meer nodig als het in flow staat */
body.sbs-mode .controlsStack.desktop-only{
  width: 100% !important;
}

/* Spacer uitzetten (anders krijg je een rare lege gap) */
#controlsSpacer{
  display: none !important;
  height: 0 !important;
}
/* ✅ SINGLE SOURCE OF TRUTH: slider + SxS gebruiken exact dezelfde transform */
#comparisonWrapper .cal-img{
  --cal-tx: 0px;
  --cal-ty: 0px;
  --cal-scale: 1;

  transform:
    scale(calc(var(--sensor-scale, 1) * var(--viewer-scale, 1)))
    translate3d(var(--cal-tx, 0px), var(--cal-ty, 0px), 0)
    scale(var(--cal-scale, 1)) !important;

  transform-origin: center center !important;
  will-change: transform;
}






/* =========================
   Compare Sensor UI
   ========================= */

.camRow{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: nowrap;
}

.compareSensorGroup{
  margin-left: auto;              /* duwt naar rechts */
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.compareSensorWrap{
  display: flex;
  align-items: center;
  gap: 10px;
}

.compareSensorWrap select{
  max-width: 220px;               /* tweak naar smaak */
}

/* =========================
   Compare Sensor Outline
   ========================= */
#comparisonWrapper{
  position: relative;             /* nodig voor absolute overlay */
}

#compareSensorOutline{
  position:absolute;
  pointer-events:none;
  z-index:7;

  /* i.p.v. 2px hard wit */
  border: 1.5px solid rgba(255,255,255,.72);
  border-radius: 10px;
  opacity: 1;
  display:none;

  /* maakt ‘m zichtbaar op zowel licht als donker beeld */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 10px 26px rgba(0,0,0,.35),
    0 0 22px rgba(255,124,0,.10);
}

/* default */
#compareSensorOutline{
  --ol: rgba(255,255,255,.72);
}

/* als compare sensor actief is -> oranje accent */
body.compare-sensor-on #compareSensorOutline{
  --ol: rgba(255,124,0,.70);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 0 22px rgba(255,124,0,.14);
}

/* =========================
   Compare Sensor Outline
   ========================= */
#compareSensorOutline{
  position:absolute;
  pointer-events:none;
  z-index:7;

  border: 1.5px solid rgba(255,255,255,.72);

  /* ✅ GEEN afgeronde hoeken */
  border-radius: 0;

  opacity: 1;
  display:none;

  box-shadow:
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 10px 26px rgba(0,0,0,.35),
    0 0 22px rgba(255,124,0,.10);
}

/* ✅ Label (tekst) boven de outline */
#compareSensorLabel{
  position:absolute;
  left:0;
  top:-30px;

  padding:6px 10px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;

  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(245,245,245,.90);

  /* ✅ ook label: geen rounded */
  border-radius:0;

  box-shadow: 0 10px 22px rgba(0,0,0,.45);

  display:none; /* default uit */
}

/* ✅ Als label leeg is: verberg -> dit voorkomt “dat kleine blokje” */
#compareSensorLabel:empty{
  display:none !important;
}

/* ✅ Als compare sensor actief is: accent */
body.compare-sensor-on #compareSensorOutline{
  border-color: rgba(255,124,0,.70);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 0 22px rgba(255,124,0,.14);
}

body.compare-sensor-on #compareSensorLabel{
  border-color: rgba(255,124,0,.55);
  color: rgba(255,124,0,.92);
}