.sample-selector{font-family:Lato,sans-serif;max-width:600px}:root{--qwikkit-sprite-url:url(/hubfs/sample-selector/qwikkit-doors-sprite.jpg)}.sample-selector .progress-container{align-items:center;border-bottom:1px solid #e5e5e5;display:flex;gap:12px;margin-bottom:28px;padding-bottom:20px}.sample-selector .step-indicator{align-items:center;display:flex;gap:8px}.sample-selector .step-number{align-items:center;background:#e5e5e5;border-radius:50%;color:#999;display:flex;font-size:14px;font-weight:700;height:32px;justify-content:center;transition:all .3s ease;width:32px}.sample-selector .step-number.active,.sample-selector .step-number.complete{background:#80bb41;color:#fff}.sample-selector .step-label{color:#999;font-size:14px;font-weight:600;transition:color .3s ease}.sample-selector .step-indicator.active .step-label,.sample-selector .step-indicator.complete .step-label{color:#505959}.sample-selector .step-connector{background:#e5e5e5;flex:1;height:2px;transition:background .3s ease}.sample-selector .step-connector.complete{background:#80bb41}.sample-selector .step-section{margin-bottom:28px;transition:opacity .3s ease}.sample-selector .step-section.dimmed{opacity:.5;pointer-events:none}.sample-selector .step-section.hidden{display:none}.sample-selector .step-title{color:#505959;font-size:16px;font-weight:700;margin-bottom:4px}.sample-selector .step-subtitle{color:#888;font-size:14px;margin-bottom:16px}.sample-selector .step-subtitle .highlight{color:#80bb41;font-weight:600}.sample-selector .style-grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);width:100%}.sample-selector .style-card{align-items:center;background:#fff;border:2px solid #e5e5e5;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;padding:16px 12px;position:relative;transition:all .2s ease}.sample-selector .style-card:hover{border-color:rgba(128,187,65,.5);box-shadow:0 2px 8px rgba(0,0,0,.08)}.sample-selector .style-card.selected{background:rgba(128,187,65,.05);border-color:#80bb41;box-shadow:0 2px 12px rgba(128,187,65,.15)}.sample-selector .style-card .checkmark{align-items:center;background:#80bb41;border-radius:50%;display:none;height:22px;justify-content:center;position:absolute;right:8px;top:8px;width:22px}.sample-selector .style-card.selected .checkmark{display:flex}.sample-selector .style-card .checkmark svg{fill:none;height:14px;stroke:#fff;stroke-width:2.5;width:14px}.sample-selector .style-icon{align-items:center;display:flex;height:180px;justify-content:center;margin-bottom:10px;width:140px}.sample-selector .style-sprite{background-image:var(--qwikkit-sprite-url);background-repeat:no-repeat;background-size:3080px 1280px;height:180px;width:140px}.sample-selector .style-sprite-shaker{background-position:0 0}.sample-selector .style-sprite-slab{background-position:-140px 0}.sample-selector .style-sprite-slide{background-position:-280px 0}.sample-selector .style-name{color:#505959;font-size:14px;font-weight:600;transition:color .2s ease}.sample-selector .style-card.selected .style-name{color:#80bb41}.sample-selector .color-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.sample-selector .color-swatch{align-items:center;border:2px solid transparent;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;padding:12px 8px;transition:all .2s ease}.sample-selector .color-swatch:hover{background:#f5f5f5}.sample-selector .color-swatch.selected{background:rgba(128,187,65,.08);border-color:#80bb41}.sample-selector .swatch-color{border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.15);height:64px;margin-bottom:8px;overflow:hidden;position:relative;width:64px}.sample-selector .swatch-color.bordered{border:1px solid #ddd}.sample-selector .swatch-color.woodgrain .woodgrain-overlay{background:repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(0,0,0,.03) 0,rgba(0,0,0,.03) 4px);bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.sample-selector .swatch-name{color:#505959;font-size:12px;font-weight:500;line-height:1.3;text-align:center}.sample-selector .color-swatch.selected .swatch-name{color:#80bb41;font-weight:600}.sample-selector .confirmation-box{background:rgba(128,187,65,.06);border:1px solid rgba(128,187,65,.2);border-radius:10px;padding:24px}.sample-selector .confirmation-content{align-items:flex-start;display:flex;gap:24px}.sample-selector .preview-door{align-items:center;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;flex-shrink:0;height:150px;justify-content:center;overflow:hidden;width:120px}.sample-selector .preview-door .door-preview-sprite{background-repeat:no-repeat;height:150px;width:120px}.sample-selector .selection-details{flex:1;padding-top:8px}.sample-selector .detail-row{margin-bottom:8px}.sample-selector .detail-label{color:#888;font-size:14px}.sample-selector .detail-value{color:#505959;font-size:16px;font-weight:600;margin-left:8px}.sample-selector .confirm-message{color:#666;font-size:14px;line-height:1.5;margin-top:16px}.sample-selector .confirmation-actions{border-top:1px solid rgba(128,187,65,.2);display:flex;justify-content:flex-end;margin-top:20px;padding-top:20px}.sample-selector .reset-btn{background:#505959;border:none;border-radius:6px;color:#fff;cursor:pointer;font-family:Lato,sans-serif;font-size:14px;font-weight:600;padding:10px 20px;transition:all .2s ease}.sample-selector .reset-btn:hover{background:#80bb41}.sample-selector .hidden-fields{display:none}@media (max-width:480px){.sample-selector .style-grid{gap:12px;grid-template-columns:1fr}.sample-selector .color-grid{grid-template-columns:repeat(3,1fr)}.sample-selector .swatch-color{height:56px;width:56px}.sample-selector .confirmation-content{align-items:center;flex-direction:column;text-align:center}.sample-selector .preview-door,.sample-selector .preview-door .door-preview-sprite{height:175px;width:140px}.sample-selector .selection-details{padding-top:0}}