/* design-my-system.css — Wizard + Layout Builder page */

body { background:var(--light); min-height:100vh; }

/* ── PAGE WRAP ── */
.page-wrap { min-height:100vh; padding:100px 5vw 5rem; display:flex; flex-direction:column; align-items:center; }
.wizard-header { text-align:center; max-width:600px; margin-bottom:2.5rem; }
.wizard-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(0,191,165,.1); border:1px solid rgba(0,191,165,.3); color:var(--teal); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 14px; border-radius:100px; margin-bottom:1rem; }
.wizard-header h1 { font-family:'Playfair Display',serif; font-size:clamp(1.75rem,4vw,2.75rem); color:var(--navy); line-height:1.2; margin-bottom:.75rem; }
.wizard-header p { font-size:1rem; color:var(--gray); }

/* ── PROGRESS ── */
.progress-wrap { width:100%; max-width:680px; margin-bottom:2rem; }
.progress-meta { display:flex; justify-content:space-between; font-size:.8125rem; color:var(--gray); margin-bottom:.5rem; }
.progress-meta strong { color:var(--navy); }
.progress-track { height:6px; background:var(--border); border-radius:100px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--teal),var(--mist)); border-radius:100px; transition:width .4s ease; }

/* ── WIZARD CARD ── */
.wizard-card { width:100%; max-width:680px; background:var(--white); border-radius:20px; box-shadow:0 4px 32px rgba(13,27,42,.08); overflow:hidden; }
.step { display:none; padding:2.5rem; animation:fadeSlide .3s ease; }
.step.active { display:block; }
@keyframes fadeSlide { from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:translateX(0)} }
.step-q { font-family:'Playfair Display',serif; font-size:1.375rem; color:var(--navy); margin-bottom:.375rem; line-height:1.3; }
.step-hint { font-size:.875rem; color:var(--gray); margin-bottom:1.75rem; }

/* ── OPTION CARDS ── */
.options-grid { display:grid; gap:.75rem; }
.options-grid.cols-2 { grid-template-columns:1fr 1fr; }
.option-card { border:2px solid var(--border); border-radius:12px; padding:1.125rem 1.25rem; cursor:pointer; display:flex; align-items:flex-start; gap:.875rem; transition:border-color .18s,background .18s,box-shadow .18s; user-select:none; }
.option-card:hover { border-color:var(--mist); background:var(--light); }
.option-card.selected { border-color:var(--teal); background:rgba(0,191,165,.05); box-shadow:0 0 0 3px rgba(0,191,165,.12); }
.option-card.selected .option-check { background:var(--teal); border-color:var(--teal); }
.option-card.selected .option-check::after { opacity:1; }
.option-check { flex-shrink:0; width:20px; height:20px; border:2px solid var(--border); border-radius:50%; margin-top:2px; transition:background .18s,border-color .18s; position:relative; }
.option-check::after { content:''; position:absolute; inset:3px; background:var(--white); border-radius:50%; opacity:0; transition:opacity .18s; }
.multi-select .option-check { border-radius:5px; }
.multi-select .option-card.selected .option-check::after { content:'✓'; background:none; color:var(--white); font-size:11px; font-weight:700; opacity:1; display:flex; align-items:center; justify-content:center; inset:0; }
.option-icon { font-size:1.5rem; flex-shrink:0; }
.option-body { flex:1; }
.option-body strong { display:block; font-size:.9375rem; font-weight:600; color:var(--navy); line-height:1.3; }
.option-body span { font-size:.8125rem; color:var(--gray); margin-top:2px; display:block; }

/* ── FORM FIELDS ── */
.size-fields { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.field-group label { display:block; font-size:.8125rem; font-weight:600; color:var(--navy); margin-bottom:.375rem; }
.field-group input, .field-group select, .field-group textarea { width:100%; padding:.6875rem .875rem; border:2px solid var(--border); border-radius:8px; font-family:inherit; font-size:.9375rem; color:var(--navy); background:var(--white); transition:border-color .18s; outline:none; }
.field-group input:focus, .field-group select:focus, .field-group textarea:focus { border-color:var(--teal); }
.field-group textarea { resize:vertical; min-height:100px; }
.contact-fields { display:grid; gap:1rem; }

/* ── STEP FOOTER ── */
.step-footer { display:flex; justify-content:space-between; align-items:center; padding:1.25rem 2.5rem; border-top:1px solid var(--border); background:#fafbfc; }
.btn-back { display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--gray); font-size:.875rem; font-weight:500; cursor:pointer; padding:.5rem 0; transition:color .2s; }
.btn-back:hover { color:var(--navy); }
.btn-back:disabled { opacity:.3; cursor:default; }
.btn-next { display:inline-flex; align-items:center; gap:8px; background:var(--teal); color:var(--white); border:none; font-family:inherit; font-size:.9375rem; font-weight:700; padding:.75rem 1.75rem; border-radius:8px; cursor:pointer; transition:background .2s,transform .15s; }
.btn-next:hover { background:#00a896; transform:translateY(-1px); }
.btn-next:disabled { background:#b0c4c4; cursor:default; transform:none; }

/* ── RESULT ── */
.result-step { text-align:center; }
.result-icon { width:72px; height:72px; background:rgba(0,191,165,.12); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 1.5rem; }
.result-step h2 { font-family:'Playfair Display',serif; font-size:1.75rem; color:var(--navy); margin-bottom:.625rem; }
.result-step > p { font-size:.9375rem; color:var(--gray); max-width:440px; margin:0 auto 2rem; }
.recommendation-card { background:var(--light); border:1px solid rgba(0,191,165,.25); border-radius:14px; padding:1.5rem; text-align:left; margin-bottom:1.5rem; }
.recommendation-card h4 { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-bottom:.75rem; }
.rec-item { display:flex; gap:.75rem; align-items:flex-start; padding:.5rem 0; border-bottom:1px solid var(--border); font-size:.875rem; }
.rec-item:last-child { border-bottom:none; }
.rec-item strong { color:var(--navy); min-width:130px; flex-shrink:0; }
.rec-item span { color:var(--gray); }
.result-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.5rem; }
.btn-primary-lg { display:inline-flex; align-items:center; gap:8px; background:var(--teal); color:var(--white); text-decoration:none; font-weight:700; font-size:1rem; padding:.875rem 2rem; border-radius:8px; transition:background .2s,transform .15s; }
.btn-primary-lg:hover { background:#00a896; transform:translateY(-1px); }
.btn-outline-lg { display:inline-flex; align-items:center; gap:8px; border:2px solid var(--border); color:var(--navy); text-decoration:none; font-weight:600; font-size:1rem; padding:.875rem 2rem; border-radius:8px; transition:border-color .2s,background .2s; }
.btn-outline-lg:hover { border-color:var(--mist); background:var(--light); }
.builder-invite { border:2px dashed rgba(0,191,165,.4); border-radius:14px; padding:1.5rem; background:rgba(0,191,165,.03); text-align:center; margin-top:1rem; }
.builder-invite h3 { font-size:1.125rem; font-weight:700; color:var(--navy); margin-bottom:.375rem; }
.builder-invite p { font-size:.875rem; color:var(--gray); margin-bottom:1rem; }
.btn-builder { display:inline-flex; align-items:center; gap:8px; background:var(--navy); color:var(--white); border:none; font-family:inherit; font-size:.9375rem; font-weight:700; padding:.75rem 1.5rem; border-radius:8px; cursor:pointer; transition:background .2s,transform .15s; }
.btn-builder:hover { background:#1a3047; transform:translateY(-1px); }

/* ── LAYOUT BUILDER ── */
#layout-builder { display:none; width:100%; max-width:1180px; margin-top:2rem; animation:fadeSlide .4s ease; }
#layout-builder.visible { display:block; }
.builder-header { text-align:center; margin-bottom:1.5rem; }
.builder-header h2 { font-family:'Playfair Display',serif; font-size:1.75rem; color:var(--navy); margin-bottom:.375rem; }
.builder-header p { font-size:.9rem; color:var(--gray); }
.builder-shell { display:grid; grid-template-columns:210px 1fr; gap:0; background:var(--white); border-radius:20px; box-shadow:0 4px 32px rgba(13,27,42,.08); overflow:hidden; }

/* ── PALETTE ── */
.palette { background:var(--navy); padding:1rem .875rem; display:flex; flex-direction:column; gap:.375rem; overflow-y:auto; max-height:700px; }
.palette-section-title { font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.35); padding:.5rem 0 .25rem; margin-top:.375rem; border-top:1px solid rgba(255,255,255,.07); }
.palette-section-title:first-child { margin-top:0; border-top:none; }
.palette-item { display:flex; align-items:center; gap:.5rem; padding:.5rem .625rem; border-radius:9px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); cursor:grab; transition:background .18s,border-color .18s,transform .15s; user-select:none; }
.palette-item:hover { background:rgba(79,195,247,.15); border-color:rgba(79,195,247,.3); transform:translateX(2px); }
.palette-item:active { cursor:grabbing; }
.pi-icon { width:32px; height:32px; border-radius:7px; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pi-icon svg { width:20px; height:20px; }
.pi-label { font-size:.7rem; font-weight:600; color:rgba(255,255,255,.85); line-height:1.2; }
.pi-sub { font-size:.6rem; color:rgba(255,255,255,.38); margin-top:1px; }

/* ── CANVAS SIDE ── */
.canvas-wrap { display:flex; flex-direction:column; }
.canvas-toolbar { display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.canvas-toolbar span { font-size:.8125rem; color:var(--gray); }
.tb-btn { display:inline-flex; align-items:center; gap:5px; padding:.35rem .75rem; border-radius:6px; border:1px solid var(--border); font-family:inherit; font-size:.75rem; font-weight:600; color:var(--navy); cursor:pointer; background:var(--white); transition:background .18s,border-color .18s; white-space:nowrap; }
.tb-btn:hover { background:var(--light); border-color:var(--mist); }
.tb-btn.danger { color:#e53e3e; border-color:#fed7d7; }
.tb-btn.danger:hover { background:#fff5f5; border-color:#e53e3e; }

/* ── UPLOAD ZONE ── */
.upload-zone { flex:1; min-height:500px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; border:2.5px dashed var(--border); margin:1rem; border-radius:14px; background:var(--light); cursor:pointer; transition:border-color .2s,background .2s; position:relative; }
.upload-zone:hover, .upload-zone.drag-over { border-color:var(--teal); background:rgba(0,191,165,.04); }
.upload-zone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload-zone-icon { font-size:3rem; }
.upload-zone h3 { font-size:1.125rem; font-weight:700; color:var(--navy); }
.upload-zone p { font-size:.875rem; color:var(--gray); text-align:center; max-width:300px; }
.upload-zone .upload-hint { font-size:.75rem; color:var(--gray); opacity:.6; }

/* ── DROP CANVAS ── */
#drop-canvas { flex:1; min-height:500px; margin:1rem; border-radius:14px; overflow:hidden; position:relative; display:none; }
#drop-canvas.visible { display:block; }
#canvas-img { width:100%; height:100%; object-fit:cover; display:block; border-radius:14px; filter:grayscale(100%) contrast(1.35) brightness(.62) sepia(55%) hue-rotate(180deg) saturate(2.8); }
#drop-canvas::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(79,195,247,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(79,195,247,.07) 1px,transparent 1px); background-size:40px 40px; border-radius:14px; pointer-events:none; z-index:1; }

/* ── SVG CONNECTIONS ── */
#conn-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; border-radius:14px; }
.conn-line { stroke:#4fc3f7; stroke-width:2; fill:none; stroke-dasharray:6 3; pointer-events:visibleStroke; cursor:pointer; transition:stroke .2s; filter:drop-shadow(0 0 3px rgba(79,195,247,.5)); }
.conn-line:hover { stroke:#ff6b6b; stroke-width:2.5; }

/* ── PLACED COMPONENTS ── */
.placed-component { position:absolute; z-index:10; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:grab; user-select:none; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.placed-component:hover { z-index:20; }
.placed-component:active { cursor:grabbing; }
.placed-component .pc-icon { width:44px; height:44px; border-radius:10px; background:rgba(13,27,42,.88); border:1.5px solid rgba(79,195,247,.55); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px rgba(79,195,247,.15); }
.placed-component .pc-icon svg { width:26px; height:26px; }
.placed-component .pc-label { font-size:.6rem; font-weight:700; color:var(--mist); text-transform:uppercase; letter-spacing:.06em; background:rgba(13,27,42,.78); padding:2px 6px; border-radius:4px; white-space:nowrap; }
.placed-component .pc-delete { position:absolute; top:-8px; right:-8px; width:18px; height:18px; border-radius:50%; background:#e53e3e; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity .15s; z-index:30; pointer-events:auto; border:none; }
.placed-component:hover .pc-delete { opacity:1; }
.placed-component.structure .pc-icon { width:110px; height:80px; border-radius:12px; border-style:dashed; }
.placed-component.structure .pc-icon svg { width:100px; height:70px; }
.placed-component.pipe-h .pc-icon { width:100px; height:30px; border-radius:6px; }
.placed-component.pipe-h .pc-icon svg { width:94px; height:22px; }

/* ── MIST ANIMATION ── */
.mist-spray-wrap { position:relative; width:44px; height:44px; }
.mist-spray-wrap .pc-icon { position:relative; z-index:2; }
.mist-particle { position:absolute; border-radius:50%; background:radial-gradient(circle,rgba(79,195,247,.9),rgba(79,195,247,0)); pointer-events:none; animation:mist-puff 2.5s ease-out infinite; }
.mist-particle:nth-child(1) { width:14px; height:14px; top:-2px; left:4px;  animation-delay:0s; }
.mist-particle:nth-child(2) { width:10px; height:10px; top:-2px; left:14px; animation-delay:.4s; }
.mist-particle:nth-child(3) { width:12px; height:12px; top:-2px; left:22px; animation-delay:.8s; }
.mist-particle:nth-child(4) { width:8px;  height:8px;  top:-2px; left:30px; animation-delay:1.2s; }
.mist-particle:nth-child(5) { width:10px; height:10px; top:-2px; left:8px;  animation-delay:1.7s; }
@keyframes mist-puff {
  0%   { opacity:0; transform:translateY(0) scaleX(1); }
  15%  { opacity:.85; }
  60%  { opacity:.4; transform:translateY(-22px) scaleX(1.6); }
  100% { opacity:0; transform:translateY(-40px) scaleX(2.2); }
}

/* ── CONNECTION POINTS ── */
.conn-points { position:absolute; inset:0; pointer-events:none; }
.placed-component:hover .conn-points { pointer-events:auto; }
body.connecting-mode .conn-points { pointer-events:auto; }
.conn-dot { position:absolute; width:12px; height:12px; border-radius:50%; background:#fbbf24; border:2px solid var(--navy); cursor:crosshair; opacity:0; transition:opacity .15s,transform .15s; z-index:40; transform:translate(-50%,-50%); }
.conn-dot[data-side=n] { top:0;    left:50%; }
.conn-dot[data-side=e] { top:50%;  left:100%; }
.conn-dot[data-side=s] { top:100%; left:50%; }
.conn-dot[data-side=w] { top:50%;  left:0; }
.placed-component:hover .conn-dot,
body.connecting-mode .conn-dot { opacity:1; }
.conn-dot:hover { transform:translate(-50%,-50%) scale(1.4); background:var(--mist); }
.conn-dot.selected { background:#ff6b6b; opacity:1; transform:translate(-50%,-50%) scale(1.3); }
.placed-component.structure .conn-dot[data-side=n] { top:0; }
.placed-component.structure .conn-dot[data-side=s] { top:100%; }

/* ── LEGEND ── */
.builder-legend { padding:.75rem 1rem; border-top:1px solid var(--border); display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }
.builder-legend > span { font-size:.7rem; color:var(--gray); }
.legend-item { display:flex; align-items:center; gap:4px; font-size:.7rem; color:var(--navy); font-weight:500; }
.legend-dot { width:8px; height:8px; border-radius:50%; }

/* ── DRAG GHOST ── */
#drag-ghost { position:fixed; pointer-events:none; z-index:9999; opacity:.85; transform:translate(-50%,-50%); display:none; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .builder-shell { grid-template-columns:1fr; }
  .palette { flex-direction:row; flex-wrap:wrap; padding:1rem; max-height:none; }
  .palette-item { flex:1; min-width:100px; }
}
@media (max-width:640px) {
  .options-grid.cols-2 { grid-template-columns:1fr; }
  .size-fields { grid-template-columns:1fr; }
  .step { padding:1.75rem; }
  .step-footer { padding:1rem 1.75rem; }
}