/* Layout shell for the door configurator. The panel markup (uiDiv) + component
   styling come from bootstrap + style-1-n.css; this file only lays out the stage
   vs panel, the loader, toolbar and env switch. */
:root {
  --accent: #b2a87f;
  --gold: #b2a87f;
  --gold-dark: #9c9269;
  --tool: #ffffff;
}
html, body { margin: 0; height: 100%; }
body {
  display: grid;
  grid-template-columns: 1fr 470px;
  height: 100vh;
  overflow: hidden;
  background: #ddd;
}
#stage { grid-column: 1; position: relative; background: #e9e9e6; overflow: hidden; }
#view { width: 100%; height: 100%; border: 0; display: block; }
/* the exact panel from the live site */
#uiDiv { grid-column: 2; height: 100vh; overflow-y: auto; overflow-x: hidden; }
#uiDiv * { max-width: 100%; }
#uiDiv .row { margin-left: 0; margin-right: 0; }
/* The ported css paints every div's scrollbar as a tan oval (#adab8c, border-radius:50%)
   and an inner scroll container overflows horizontally -> a stray tan bar at the bottom.
   Clip horizontal overflow on the real scroll containers and hide any horizontal bar. */
#uiDiv .accordion-body, #uiDiv #accordionExample, #uiDiv .uiDiv, #uiDiv .accordion { overflow-x: hidden !important; }
#uiDiv ::-webkit-scrollbar:horizontal { height: 0 !important; display: none !important; }

/* loading overlay */
#loader {
  position: absolute; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  background: #fbfaf7; transition: opacity .45s ease;
}
#loader.hidden { opacity: 0; pointer-events: none; }
.loader-logo { width: 300px; max-width: 55%; height: auto; }
.loader-bar { width: 340px; max-width: 60%; height: 3px; background: #e6e2d6; border-radius: 3px; overflow: hidden; }
.loader-fill { height: 100%; width: 0%; background: var(--gold); border-radius: 3px; transition: width .35s ease; }
.loader-pct { color: var(--gold); font-size: 19px; }

/* measurement cm/mm tags: HTML pills projected onto the 3D view (like the cabinet) */
.measure-tag {
  position: absolute; z-index: 15; pointer-events: none;
  transform: translate(-50%, -50%); white-space: nowrap;
  background: #fff; color: #1f2530; font: 700 13px/1 Arial, sans-serif;
  padding: 5px 12px; border-radius: 14px; box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
}

/* toolbar */
#toolbar { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 20; }
.tool {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid #e3e3e3; background-color: var(--tool);
  cursor: pointer; background-repeat: no-repeat; background-position: center; background-size: 24px 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.tool.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
#btn3d { background-image: url('assets/deuren/images/3d-model.png'); }
#btnMeasure { background-image: url('assets/deuren/images/measurement.png'); }
#btnOpen { background-image: url('assets/deuren/images/play-button.png'); }

/* environment switch (interior / exterior icon buttons) */
#envswitch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 20; }
.env {
  width: 52px; height: 46px; border-radius: 10px; border: 1px solid #e3e3e3; background-color: #fff;
  cursor: pointer; background-repeat: no-repeat; background-position: center; background-size: 30px 30px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.env.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.env[data-env="interior"] { background-image: url('assets/deuren/images/icon1.png'); }
.env[data-env="exterior"] { background-image: url('assets/deuren/images/icon4.png'); }

/* 3.1 Kleuren: the ported .colorsDiv is flex-nowrap, forcing all 6 swatches onto one
   row so Brons + Eigen kleur overflow off the panel. Force a wrapping 4-col grid. */
#uiDiv .colorsDiv {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  overflow: visible;
}

/* ================= mobile / small screens =================
   Desktop is a two-column grid (3D view | 470px panel). On a phone the 470px
   column is wider than the screen, which collapsed the 3D view to nothing and
   only showed the panel. Here we STACK it: 3D view on top, options panel below,
   the fixed price bar stays pinned at the bottom of the screen. */
@media (max-width: 860px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: 44vh 1fr;
  }
  #stage { grid-column: 1; grid-row: 1; }
  #uiDiv { grid-column: 1; grid-row: 2; height: auto; padding-bottom: 96px; } /* clear the fixed price bar */

  /* touch-drag should orbit/interact with the 3D, not scroll the page */
  #view { touch-action: none; }

  /* contact button: bottom-right of the (top) 3D view */
  .contactbt { bottom: 12px; right: 12px; }

  /* compact floating controls */
  #toolbar { left: 10px; gap: 8px; }
  #envswitch { top: 10px; }

  /* price bar fits a narrow row */
  .priceDiv { padding: 10px 14px; }
}

@media (max-width: 430px) {
  body { grid-template-rows: 40vh 1fr; }
}

/* Hidden on small phones, like the previous configurator. */
@media (max-width: 568px) {
  .contactbt { display: none; }
}