/* ==========================================================================
   Komplett CSS for Reolbygger v5.2
   ========================================================================== */
#reolbygger-container { display: flex; flex-wrap: wrap; gap: 2em; }
.reolbygger-main { flex: 2; min-width: 320px; }
.reolbygger-sidebar { flex: 1; min-width: 300px; background-color: #f9f9f9; padding: 1.5em; border-radius: 4px; border: 1px solid #e0e0e0; }
.reolbygger-step { display: none; border: 1px solid #ddd; padding: 2em; border-radius: 4px; }
.reolbygger-step.active { display: block; }
.reolbygger-field { margin-bottom: 1.5em; }
.reolbygger-field label { display: block; font-weight: bold; margin-bottom: 0.5em; }
#reolbygger-form select { height: auto; line-height: normal; }
.reolbygger-field select, .reolbygger-field input { width: 100%; padding: 0.8em; box-sizing: border-box; }
.reolbygger-nav { margin-top: 2em; display: flex; justify-content: space-between; border-top: 1px solid #eee; padding-top: 1.5em; }
.slider-value { font-weight: bold; color: #005fcc; background-color: #eef4ff; padding: 2px 6px; border-radius: 3px; display: inline-block; min-width: 20px; text-align: center; }
.reolbygger-canvas-container { position: relative; width: 100%; height: 350px; background-color: #fdfdfd; border: 1px solid #e0e0e0; margin-top: 1em; }
#reolbygger-canvas { position: relative; width: 100%; height: 100%; }
.visual-gavl { position: absolute; bottom: 0; width: 8px; background-color: #d0d0d0; border: 1px solid #a0a0a0; box-sizing: border-box; background-image: linear-gradient(to bottom, #c0c0c0 1px, transparent 1px); background-size: 100% 15px; }
.visual-hylle { position: absolute; height: 12px; background-color: #d8d8d8; border: 1px solid #a0a0a0; border-bottom: 2px solid #a0a0a0; box-sizing: border-box; }
.visual-ryggkryss { position: absolute; top: 40%; height: 55%; background-image: linear-gradient(to top right, transparent 49.0%, #a0a0a0 49.0%, #a0a0a0 51.0%, transparent 51.0%), linear-gradient(to top left, transparent 49.0%, #a0a0a0 49.0%, #a0a0a0 51.0%, transparent 51.0%); background-size: 100% 100%; background-repeat: no-repeat; }
.dimensions-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
#dimension-width { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #555; background: #f9f9f9; padding: 0 5px; }
#dimension-height { position: absolute; left: -50px; top: 50%; transform: translateY(-50%) rotate(-90deg); font-size: 12px; color: #555; background: #f9f9f9; padding: 0 5px; }