/* ==========================================================================
   overa 3D Configurator – Refactored CSS (Bootstrap 5 + data-bs-theme)
   Fixes:
   - Offcanvas not clickable: disable pointer-events on uiRoot ONLY by default,
     then re-enable for controls + offcanvas + backdrop + modal
   - Figcaption: consistent readable label on any image (no border artifacts)
   - ButtonContainer: fixed-size buttons, less bold, slightly wider, more inner margin on lg+
   - Syntax issues fixed (missing brace in figcaption block, duplicate font-weight, etc.)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Tokens
-------------------------------------------------------------------------- */
:root{
  --cfg-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --cfg-radius: .75rem;
  --cfg-gap: .5rem;
  --cfg-pad: .5rem;

  /* m-1 on small, m-3 on lg+ */
  --cfg-screen-gap: .25rem;
  --cfg-control-offset: var(--cfg-screen-gap);

  /* Panels */
  --cfg-panel-bg: var(--bs-body-bg, #fff);
  --cfg-panel-fg: var(--bs-body-color, #111);
  --cfg-panel-border: var(--bs-border-color, #dee2e6);
  --cfg-panel-w: min(50vw, 520px);

  /* Shadow */
  --cfg-shadow: 0 10px 30px rgba(0,0,0,.18);

  /* Canvas always white */
  --cfg-canvas-bg: #fff;

  /* Figcaption label (works on any image) */
  --cfg-caption-fg: rgba(255,255,255,.98);
  --cfg-caption-bg: rgba(0,0,0,.38);
  --cfg-caption-shadow: rgba(0,0,0,.55);

  /* Layering (align with Bootstrap defaults) */
  --cfg-z-canvas: 0;
  --cfg-z-controls: 1030;  /* below offcanvas-backdrop (1040) */
  --cfg-z-backdrop: 1040;
  --cfg-z-offcanvas: 1045;
  --cfg-z-modal: 1055;

  /* Typography scale */
  --cfg-icon-size: clamp(20px, 2.75vw, 34px);
  --cfg-ui: clamp(14px, .8vw, 18px);

  /* Toolbar buttons */
  --cfg-toolbar-btn-w: clamp(56px, 6.5vw, 72px); /* slightly wider */
  --cfg-toolbar-btn-h: 46px;
  --cfg-toolbar-fw: 500; /* less bold */
  --cfg-toolbar-gap: .45rem;
  --cfg-toolbar-pad: .45rem;
  --cfg-toolbar-inner-pad-lg: .9rem; /* extra horizontal margin inside on lg+ */
}

:root[data-bs-theme="dark"]{
  --cfg-caption-bg: rgba(0,0,0,.46);
  --cfg-shadow: 0 10px 30px rgba(0,0,0,.55);
}

@media (prefers-color-scheme: dark){
  :root:not([data-bs-theme]){
    --cfg-shadow: 0 10px 30px rgba(0,0,0,.55);
  }
}

@media (min-width: 992px){
  :root{
    --cfg-screen-gap: 1rem;          /* m-3 */
    --cfg-toolbar-gap: .65rem;       /* more breathing room */
    --cfg-toolbar-pad: .55rem;
  }
}

/* --------------------------------------------------------------------------
   2) Base / viewport
-------------------------------------------------------------------------- */
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: var(--cfg-font);
  overflow: hidden;
  background: var(--cfg-canvas-bg);
}

a{ text-decoration: none !important; color: inherit !important; }

/* UI root should not block the canvas by default */
#uiRoot{
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  pointer-events: none;
}

/* IMPORTANT: Re-enable pointer events for Bootstrap overlays + your UI */
.offcanvas,
.offcanvas-backdrop,
.modal,
.modal-backdrop{
  pointer-events: auto !important;
}

/* --------------------------------------------------------------------------
   3) Fullscreen canvas layer
-------------------------------------------------------------------------- */
#canvasLayer{
  position: fixed;
  inset: 0;
  z-index: var(--cfg-z-canvas);
  background: var(--cfg-canvas-bg);
}

#canvas-id{
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  background: var(--cfg-canvas-bg);
}

/* --------------------------------------------------------------------------
   4) Preloader
-------------------------------------------------------------------------- */
.page-preloader{
  position: fixed;
  inset: 0;
  z-index: 2000;
  color: #999;
  background: #fff;
}

.page-preloader-content-centered{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: max(8vw, 8vh);
  width: max(8vw, 8vh);
}

.page-preloader .brand{ height: 100%; width: 100%; }

.page-preloader .items{
  position: relative;
  top: calc(50% + max(4vw, 4vh) + 1vh);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --------------------------------------------------------------------------
   5) Controls placement
-------------------------------------------------------------------------- */
#btnModel,
#btnMaterial,
#secondaryControlContainer,
#buttonContainer{
  position: absolute;
  z-index: var(--cfg-z-controls);
  pointer-events: auto; /* clickable */
}

#btnModel,
#btnMaterial{
  top: var(--cfg-control-offset);
}

#btnModel{ left: var(--cfg-control-offset); }
#btnMaterial{ right: var(--cfg-control-offset); }

#secondaryControlContainer{
  top: var(--cfg-control-offset);
  left: 50%;
  transform: translateX(-50%);
}

.overa-panel{
  background: var(--cfg-panel-bg);
  color: var(--cfg-panel-fg);
  border-color: var(--cfg-panel-border);
  border-radius: var(--cfg-radius);
  box-shadow: var(--cfg-shadow);
}

/* Icon sizing */
.icon-scalable{
  font-size: var(--cfg-icon-size);
  display: inline-block;
  line-height: 1;
}
.btn, small, .small{ font-size: var(--cfg-ui) !important; }

/* --------------------------------------------------------------------------
   6) Bottom toolbar: fixed-size equal buttons + less bold + more inner margin on lg+
-------------------------------------------------------------------------- */
#buttonContainer{
  left: 50%;
  bottom: var(--cfg-control-offset);
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  gap: var(--cfg-toolbar-gap);
  padding: var(--cfg-toolbar-pad);
  line-height: 1;
}

/* Equal-size buttons regardless of content */
#buttonContainer > a.btn{
  flex: 0 0 var(--cfg-toolbar-btn-w);
  width: var(--cfg-toolbar-btn-w);
  height: var(--cfg-toolbar-btn-h);

  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: calc(var(--cfg-radius) - .15rem);
  font-weight: var(--cfg-toolbar-fw);
  letter-spacing: 0;
}

/* If you ever show "2D/3D" text, keep it visually balanced */
#buttonContainer > a.btn.btnText{
  font-weight: var(--cfg-toolbar-fw);
}

/* More horizontal breathing room inside toolbar panel on large screens */
@media (min-width: 992px){
  #buttonContainer{
    padding-inline: var(--cfg-toolbar-inner-pad-lg);
  }
}

/* --------------------------------------------------------------------------
   7) Figures / thumbnails (caption overlays image, consistent readable)
-------------------------------------------------------------------------- */
figure{
  position: relative;
  margin: 0;
  border-radius: var(--cfg-radius);
  overflow: hidden;
}

figure img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}

/* Thumb constraints */
#btnModel figure img,
#btnMaterial figure img{
  max-height: min(10vh, 150px);
}
#btnModel figure img{
  max-width: min(17.232vh, 258.48px);
}

/* Caption label (always readable on any image) */
figcaption{
  position: absolute;
  top: .4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;

  display: inline-block;
  max-width: calc(100% - .8rem);
  padding: .2rem .4rem;

  color: var(--cfg-caption-fg);
  background: var(--cfg-caption-bg) !important;
  border: 0 !important;
  border-radius: .6rem;

  font-weight: 600;
  font-size: .9rem;
  line-height: 1.2;
  text-align: center;

  text-shadow: 0 1px 2px var(--cfg-caption-shadow);

  white-space: normal;
  word-break: normal;
  overflow: visible;
  text-overflow: clip;

  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}

/* Remove any old pseudo scrims/borders */
figcaption::before{ content: none !important; }

/* --------------------------------------------------------------------------
   8) Offcanvas layering + backdrop layering
-------------------------------------------------------------------------- */
.offcanvas-backdrop{ z-index: var(--cfg-z-backdrop) !important; }
.offcanvas{ z-index: var(--cfg-z-offcanvas) !important; }

.modal{ z-index: var(--cfg-z-modal) !important; }
.modal-backdrop{ z-index: calc(var(--cfg-z-modal) - 10) !important; }

/* --------------------------------------------------------------------------
   9) Offcanvas margin on all sides without "peeking"
-------------------------------------------------------------------------- */
.cfg-offcanvas-frame{
  position: fixed;
  top: var(--cfg-screen-gap);
  bottom: var(--cfg-screen-gap);

  width: min(var(--cfg-panel-w), calc(100vw - (2 * var(--cfg-screen-gap))));
  z-index: var(--cfg-z-offcanvas);

  pointer-events: none; /* frame not clickable */
}

.cfg-offcanvas-frame.start{ left: var(--cfg-screen-gap); }
.cfg-offcanvas-frame.end{ right: var(--cfg-screen-gap); }

.cfg-offcanvas-frame .offcanvas{
  position: absolute !important;
  inset: 0 !important;

  width: auto !important;
  max-width: none !important;

  height: 100% !important;
  max-height: none !important;

  border-radius: var(--cfg-radius) !important;
  overflow: hidden;

  pointer-events: auto;

  border: 1px solid var(--cfg-panel-border);
  box-shadow: var(--cfg-shadow);
}

/* Prevent edge artifacts while hidden */
.cfg-offcanvas-frame .offcanvas:not(.show){
  border-color: transparent !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   10) Offcanvas body scrolling areas
-------------------------------------------------------------------------- */
#material_results,
#startOffCanvasCollapseGroup{
  overflow-y: auto;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   11) Tabs helpers
-------------------------------------------------------------------------- */
.equal-width-tabs{
  display: flex;
  justify-content: space-around;
}
.equal-width-tabs .nav-item{
  flex: 1;
  text-align: center;
}

/* --------------------------------------------------------------------------
   12) Small-screen tweaks
-------------------------------------------------------------------------- */
@media (max-width: 768px){
  .offcanvas-body{ padding: .5rem !important; }
}

@media (max-width: 650px){
  #secondaryControlContainer{
    top: auto;
    bottom: min(8vh, 100px);
  }
}

@media (max-height: 699px){
  .current_model img{ display: none !important; }
}

@media screen and (max-width: 900px) and (orientation: landscape){
  #btnModel figure img,
  #btnMaterial figure img{
    max-height: min(20vh, 250px) !important;
    max-width: none !important;
  }
}