/* components.css
 * UI components (cards, sections, option list) + step pills.
 * SOURCE OF TRUTH: CSS ONLY.
 */

/* ===== Step pills (topbar) ===== */
.steps{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stepPill{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(15,23,42,.10);background:rgba(2,6,23,.03);font-weight:800;font-size:12px;color:rgba(15,23,42,.75);user-select:none;cursor:pointer}
.stepPill .num{width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(15,23,42,.10);background:#fff;font-size:12px;color:rgba(15,23,42,.70)}
.stepPill.active{border-color:rgba(37,99,235,.45);background:rgba(37,99,235,.10);color:rgba(15,23,42,.92)}
.stepPill.active .num{border-color:rgba(37,99,235,.35);background:rgba(37,99,235,.12);color:rgba(37,99,235,.95)}
.stepSep{color:rgba(15,23,42,.35);font-weight:900;user-select:none}

/* ===== Sections ===== */
.section{border:1px solid rgba(15,23,42,.10);border-radius:18px;background:rgba(255,255,255,.78);padding:12px;margin-bottom:12px}
.section h3{margin:0 0 10px 0;font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:rgba(15,23,42,.92);padding-bottom:8px;border-bottom:1px solid rgba(15,23,42,.10)}
.sub{font-size:12px;color:#64748b;margin:0 0 10px 0;line-height:1.35}

/* ===== Option grid + cards ===== */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid rgba(15,23,42,.10);border-radius:14px;background:rgba(255,255,255,.90);cursor:pointer;user-select:none;min-height:72px}
.opt:hover{background:rgba(2,6,23,.03)}
.opt.active{border-color:rgba(37,99,235,.65);background:rgba(37,99,235,.10)}
.opt .left{display:flex;align-items:center;gap:12px;min-width:0}
.opt .left>div{min-width:0}
.opt .name{font-weight:800;font-size:14px}
.opt .desc{font-size:12px;color:#64748b;line-height:1.25}
.opt .price{font-size:13px;font-weight:900;white-space:nowrap}

/* ===== Thumbnail wrapper (fixed 44x44) ===== */
.thumbWrap{width:44px;height:44px;flex:0 0 44px;border-radius:12px;border:1px solid rgba(15,23,42,.10);overflow:hidden;background:#e5e7eb}
.thumbWrap img{width:100%;height:100%;object-fit:cover;display:block}

/* Safety: if any renderer injects raw images inside color cards, keep them small */
[data-opt-id="350"] .opt img{max-width:44px;max-height:44px;object-fit:cover}

/* ===== Layout lock (maquette) ===== */
.grid2{
  align-items:start;
}
.opt{
  align-items:center; /* empêche l’étirement vertical */
}

/* ===== Dimension inputs (pill) ===== */
.inputPill{
  width:110px;
  text-align:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  font-weight:900;
  background:#fff;
  color:rgba(15,23,42,.92);
  outline:none;
}
.inputPill:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* Center min/max hints under width/height */
.dimsHint{
  margin-top:6px;
  font-size:12px;
  color:#64748b;
  text-align:center;
}

/* ===== Per‑sash width inputs (under window) ===== */
.sashInputs{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:12px;
}
.sashInput{
  display:flex;
}
.sashWidthInput{
  width:96px; /* compact like mockup */
}