/* ===================================================================
   WR CALCULATOR - LAYOUT + MOBILE UX + ALIGNMENT
   -------------------------------------------------------------------
   - Two pane layout (desktop)
   - Product scroller (mobile)
   - Sticky progress bar (mobile)
   - Sticky compute/buy footer
   - Card/image sizing to prevent over zoom and blur
   - Room chips and product tiles aligned to the same visual width
   =================================================================== */

/* ---------- Root variables ---------- */
:root{
  /* Sticky stepper offset; JS helper sets this to header height. */
  --wr-sticky-top: 56px;
  /* Bootstrap gutter (fallback .75rem/12px) used for alignment */
  --wr-gx: var(--bs-gutter-x, .75rem);
}

/* ---------- Page layout (desktop) ---------- */
#wrcalc{display:flex;gap:16px;align-items:flex-start}
#wrcalc .wr-left{flex:1 1 auto;min-width:0}
#wrcalc .wr-right{flex:0 0 360px}
.wr-sticky{position:sticky;top:12px}

/* ---------- ALIGNMENT: chips + products match container width ---------- */
/* Stretch to container edges and add inner padding like container does. */
.wr-chips,
.wr-products-scroller{
  width:100%;
  box-sizing:border-box;
  margin-left: calc(var(--wr-gx) * -1);
  margin-right: calc(var(--wr-gx) * -1);
  padding-left: var(--wr-gx);
  padding-right: var(--wr-gx);
}

/* Inside the scroller, kill the Bootstrap row negative margins and
   give columns padding so tiles align visually. */
.wr-products-scroller > #wr-grid{margin-left:0;margin-right:0}
.wr-products-scroller > #wr-grid > [class*="col-"]{
  padding-left: var(--wr-gx);
  padding-right: var(--wr-gx);
}

/* ---------- Product scroller ---------- */
.wr-products-scroller{
  max-height:65vh;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom:0;
}

/* ---------- Room chips row ---------- */
.wr-chips{
  display:flex;
  gap:8px;
  overflow:visible;        /* wrap instead of horizontal scroll */
  white-space:normal;
  padding-bottom:6px;
}
.wr-chips .btn{flex:0 0 auto}

/* ---------- Loader + empty state ---------- */
.wr-loader{display:flex;gap:10px;align-items:center;padding:10px}
.wr-loader .bar{height:8px;background:#eee;border-radius:4px;animation:shimmer 1.2s infinite linear}
@keyframes shimmer{0%{opacity:.4}50%{opacity:1}100%{opacity:.4}}
.wr-empty{padding:12px;border:1px dashed #ddd;border-radius:6px;background:#fafafa}

/* ---------- Cards and images (prevent blur/zoom) ---------- */
.wr-card .media,
.wr-card .ratio{
  aspect-ratio: 4 / 3;
  max-height: 220px;
  overflow:hidden;
  background:#fff;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wr-card .media img,
.wr-card .ratio > img{
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
}
.wr-card .card-body{padding:.6rem .8rem}
.wr-card .card-title{margin-bottom:.25rem;font-size:1rem}

/* Keep qty controls aligned and visible */
.wr-card .qty-row,
.wr-card .card-body .d-flex.align-items-center.gap-2{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:nowrap;
}
.wr-card input[type="number"]{max-width:120px}

/* ---------- Sticky compute/buy footer ---------- */
.wr-sticky-footer{
  position:sticky;
  bottom:0;
  background:#fff;
  border-top:1px solid #eee;
  padding:10px 12px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  z-index:20;
}
.wr-sticky-footer .btn{min-width:110px}

/* ---------- Progress / stepper ---------- */
.wr-progress{position:relative;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.wr-progress .wr-step{position:relative;display:flex;align-items:center;gap:8px;cursor:pointer}
.wr-progress .wr-bullet{
  width:28px;height:28px;border-radius:50%;
  border:2px solid #ccc;background:#fff;color:#666;
  display:flex;align-items:center;justify-content:center;font-weight:600
}
.wr-progress .wr-step.active .wr-bullet{border-color:#0d6efd;color:#0d6efd}
.wr-progress .wr-step.completed .wr-bullet{background:#198754;border-color:#198754;color:#fff}
.wr-progress .wr-label{font-size:.95rem}
.wr-progress .wr-track{
  position:absolute;left:14px;right:14px;top:14px;height:4px;background:#eee;border-radius:2px;z-index:-1
}
.wr-progress .wr-fill{height:100%;background:#0d6efd;width:0%;transition:width .3s ease;border-radius:2px}

/* ===================================================================
   MOBILE / TABLET ADJUSTMENTS
   =================================================================== */

@media (max-width: 992px){
  #wrcalc{flex-direction:column}
  #wrcalc .wr-right{flex:0 0 auto}
  .wr-sticky{position:static}

  .wr-products-scroller{
    max-height:65vh;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:110px;   /* space for sticky compute/buy */
    touch-action:pan-y;
    scroll-snap-type:y proximity;
  }
  .wr-card{scroll-snap-align:start}
}

@media (max-width:576px){
  .wr-progress .wr-label{display:inline-block;font-size:.8rem}
  .wr-card .ratio{max-height:160px}
  .wr-card .card-body{padding:.6rem .75rem}
  .wr-card input[type="number"]{max-width:100px}
}

@media (max-width:768px){
  #wr-progress{
    position:sticky;
    top:var(--wr-sticky-top);
    z-index:1040;
    background:#fff;
    padding:.25rem .5rem;
    margin-bottom:.5rem;
    border-radius:.5rem;
    box-shadow:0 2px 6px rgba(0,0,0,.06)
  }
  #wr-progress .wr-track{height:6px}
  #wr-progress .wr-bullet{width:28px;height:28px;line-height:28px}
  #wr-progress .wr-label{font-size:.8rem}
}

/* Subtle mobile scrollbar for the scroller */
@media (max-width:992px){
  .wr-products-scroller::-webkit-scrollbar{width:6px;height:6px}
  .wr-products-scroller::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:3px}
  .wr-products-scroller::-webkit-scrollbar-track{background:transparent}
}

/* ---------- Optional helpers ---------- */
#wr-grid-status .alert{margin-bottom:.5rem}