@charset "utf-8";
/* CSS Document */

/* ─── HERO ─── */
.pricing-hero{padding:120px 0 60px;text-align:center;position:relative;overflow:hidden}
.pricing-hero::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(0,212,170,.06) 0%,transparent 70%);pointer-events:none}
.pricing-hero h1{font-family:var(--font-display);font-size:clamp(32px,4.5vw,48px);font-weight:700;line-height:1.1;letter-spacing:-.03em;margin-bottom:12px}
.pricing-hero h1 em{font-style:normal;color:var(--accent)}
.pricing-hero>p{font-size:17px;color:var(--text-secondary);line-height:1.6;max-width:560px;margin:0 auto}

button:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ─── STEPPER ─── */
.stepper{padding:32px 0 48px}
.stepper-bar{display:flex;align-items:center;justify-content:center;gap:0;max-width:700px;margin:0 auto}
.stepper-step{display:flex;align-items:center;gap:0}
.step-dot{width:36px;height:36px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text-muted);background:var(--bg);transition:all .3s;flex-shrink:0}
.step-dot.active{border-color:var(--accent);color:var(--accent);box-shadow:0 0 16px rgba(0,212,170,.15)}
.step-dot.done{border-color:var(--accent);background:var(--accent);color:#06090F}
.step-line{width:80px;height:2px;background:var(--border);margin:0 8px;transition:background .3s}
.step-line.done{background:var(--accent)}
.step-label{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);text-align:center;margin-top:8px;letter-spacing:.04em}
.step-label.active{color:var(--accent)}
.stepper-item{display:flex;flex-direction:column;align-items:center}

/* ─── PANELS ─── */
.panel{display:none}
.panel.active{display:block}

/* ─── STEP 1: SERVICE CATALOG ─── */
.catalog{padding:0 0 80px}
.catalog-header{margin-bottom:32px}
.catalog-header h2{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.catalog-header p{font-size:14px;color:var(--text-secondary)}

.cat-group{margin-bottom:40px}
.cat-group-title{font-family:var(--font-display);color:var(--accent);font-size:18px;font-weight:700;margin-bottom:16px;padding-left:14px;border-left:3px solid var(--accent);display:flex;align-items:center;gap:10px}
.cat-group-title .cat-icon{font-size:18px}
.svc-table{width:100%;border:1px solid var(--border);border-radius:14px;overflow:hidden;border-spacing:0}
.svc-table thead{background:rgba(0,212,170,.04)}
.svc-table th{padding:12px 16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);text-align:left;border-bottom:1px solid var(--border);font-weight:500}
.svc-table th:last-child{text-align:center;width:100px}
.svc-table td{padding:14px 16px;border-bottom:1px solid var(--border);font-size:14px;vertical-align:middle}
.svc-table tr:last-child td{border-bottom:none}
.svc-table tr{transition:background .2s}
.svc-table tr:hover{background:rgba(0,212,170,.02)}
.svc-name{font-family:var(--font-display);font-weight:600;font-size:14px}
.svc-desc{font-size:12px;color:var(--text-muted);margin-top:2px}
.svc-price{font-family:var(--font-mono);font-size:14px;color:var(--warm);font-weight:500}
.svc-price .price-note{font-size:11px;color:var(--text-muted);font-weight:400}
.svc-unit{font-size:12px;color:var(--text-muted);font-family:var(--font-mono)}
.add-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--accent);font-size:20px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;margin:0 auto}
.add-btn:hover{background:var(--accent-glow);border-color:rgba(0,212,170,.3)}
.add-btn.added{background:var(--accent);color:#06090F;border-color:var(--accent)}

/* ─── STEP 2: CART / CONFIGURE ─── */
.cart{padding:0 0 80px}
.cart-header{margin-bottom:24px}
.cart-header h2{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.cart-empty{text-align:center;padding:60px 24px;color:var(--text-muted);font-size:15px;background:var(--bg-card);border:1px solid var(--border);border-radius:16px}
.cart-list{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.cart-item{display:grid;grid-template-columns:1fr 160px 120px 120px 40px;align-items:center;gap:12px;padding:16px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;transition:border-color .3s}
.cart-item:hover{border-color:rgba(0,212,170,.15)}
.cart-item-name{font-family:var(--font-display);font-weight:600;font-size:14px}
.cart-item-name span{display:block;font-size:12px;color:var(--text-muted);font-weight:400;font-family:var(--font-body);margin-top:2px}
.cart-item-price{font-family:var(--font-mono);font-size:13px;color:var(--warm)}
.qty-control{display:flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.qty-btn{width:32px;height:34px;background:transparent;border:none;color:var(--text-secondary);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.qty-btn:hover{background:var(--accent-glow);color:var(--accent)}
.qty-val{width:48px;text-align:center;font-family:var(--font-mono);font-size:14px;font-weight:500;color:var(--text-primary);border:none;background:transparent;border-left:1px solid var(--border);border-right:1px solid var(--border);height:34px;outline:none}
.qty-val::-webkit-inner-spin-button,.qty-val::-webkit-outer-spin-button{-webkit-appearance:none}
.cart-item-total{font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--accent);text-align:right}
.cart-remove{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text-muted);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.cart-remove:hover{background:var(--coral-glow);border-color:rgba(255,107,107,.3);color:var(--coral)}

/* Summary sidebar */
.cart-layout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
.summary-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:24px;position:sticky;top:120px}
.summary-title{font-family:var(--font-display);font-size:16px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.summary-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-secondary)}
.summary-row:last-of-type{border-bottom:none}
.summary-row .sum-val{font-family:var(--font-mono);color:var(--text-primary);font-weight:500}
.summary-total{margin-top:16px;padding-top:16px;border-top:2px solid rgba(0,212,170,.2);display:flex;justify-content:space-between;align-items:center}
.summary-total .total-label{font-family:var(--font-display);font-size:14px;font-weight:700}
.summary-total .total-val{font-family:var(--font-mono);font-size:24px;font-weight:700;color:var(--accent)}
.summary-note{margin-top:12px;font-size:11px;color:var(--text-muted);font-family:var(--font-mono);line-height:1.5}

/* ─── STEP 3: SPECIFICATIONS ─── */
.specs{padding:0 0 80px}
.specs-header{margin-bottom:24px}
.specs-header h2{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.specs-header p{font-size:14px;color:var(--text-secondary)}
.specs-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}
.spec-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:24px}
.spec-card h3{font-family:var(--font-display);font-size:15px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.spec-card h3 .spec-icon{font-size:18px}
.spec-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.spec-row.full{grid-template-columns:1fr}
.spec-group{display:flex;flex-direction:column;gap:5px}
.spec-group label{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em}
.spec-group input,.spec-group select{padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-family:var(--font-body);font-size:13px;outline:none;transition:border-color .2s}
.spec-group input:focus,.spec-group select:focus{border-color:rgba(0,212,170,.3)}
.spec-group input::placeholder{color:var(--text-muted)}
.spec-group select{cursor:pointer;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.spec-group select option{background:var(--bg-card);color:var(--text-primary)}
.color-preview{display:flex;align-items:center;gap:10px}
.color-preview input[type="color"]{width:40px;height:36px;border:1px solid var(--border);border-radius:8px;background:none;cursor:pointer;padding:2px}
.color-preview input[type="text"]{flex:1}
.free-services{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:20px}
.free-services h3{font-family:var(--font-display);font-size:15px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.free-services .free-sub{font-size:12px;color:var(--text-muted);margin-bottom:16px}
.free-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.free-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:all .2s;font-size:13px;color:var(--text-secondary);user-select:none}
.free-item:hover{border-color:rgba(0,212,170,.2)}
.free-item input{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}
.free-item.checked{border-color:rgba(0,212,170,.25);background:rgba(0,212,170,.03);color:var(--text-primary)}
.ref-upload{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:20px}
.ref-upload h3{font-family:var(--font-display);font-size:15px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.ref-upload .ref-sub{font-size:12px;color:var(--text-muted);margin-bottom:16px}
.ref-drop{border:2px dashed rgba(148,163,184,.12);border-radius:10px;padding:28px 16px;text-align:center;cursor:pointer;transition:all .3s;position:relative}
.ref-drop:hover{border-color:rgba(0,212,170,.25);background:rgba(0,212,170,.02)}
.ref-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.ref-drop .ref-icon{font-size:28px;margin-bottom:8px;opacity:.4}
.ref-drop .ref-title{font-size:14px;font-weight:500;margin-bottom:2px}
.ref-drop .ref-hint{font-size:12px;color:var(--text-muted)}
.ref-file-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.ref-file{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;font-size:12px}
.ref-file .rf-name{flex:1;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ref-file .rf-size{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
.ref-file .rf-remove{width:22px;height:22px;border-radius:6px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}
.ref-file .rf-remove:hover{background:var(--coral-glow);color:var(--coral)}

/* ─── STEP 4: IMAGE LINKS ─── */
.links-section{padding:0 0 80px}
.links-section h2{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.links-section>p{font-size:14px;color:var(--text-secondary);margin-bottom:24px}
.links-area{width:100%;min-height:200px;padding:16px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;color:var(--text-primary);font-family:var(--font-mono);font-size:13px;line-height:1.8;resize:vertical;outline:none;transition:border-color .3s}
.links-area::placeholder{color:var(--text-muted)}
.links-area:focus{border-color:rgba(0,212,170,.3)}
.links-hint{margin-top:10px;font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.link-count{font-family:var(--font-mono);color:var(--accent)}

/* ─── STEP 4: CONTACT + REVIEW ─── */
.review-section{padding:0 0 80px}
.review-section h2{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.review-section>p{font-size:14px;color:var(--text-secondary);margin-bottom:24px}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.form-group label{font-size:12px;color:var(--text-muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em}
.form-input{padding:12px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;color:var(--text-primary);font-family:var(--font-body);font-size:14px;outline:none;transition:border-color .3s}
.form-input::placeholder{color:var(--text-muted)}
.form-input:focus{border-color:rgba(0,212,170,.3)}
textarea.form-input{resize:vertical;min-height:80px}

/* Order review card */
.order-review{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:24px;max-height:500px;overflow-y:auto}
.order-review h3{font-family:var(--font-display);font-size:16px;font-weight:700;margin-bottom:16px}
.or-line{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-secondary)}
.or-line:last-child{border-bottom:none}
.or-line .or-val{font-family:var(--font-mono);color:var(--text-primary)}
.or-total{margin-top:12px;padding-top:12px;border-top:2px solid rgba(0,212,170,.2);display:flex;justify-content:space-between;font-family:var(--font-display);font-weight:700;font-size:16px}
.or-total .or-val{color:var(--accent);font-family:var(--font-mono)}
.or-links{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.or-links h4{font-size:12px;color:var(--text-muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.or-links p{font-size:12px;color:var(--text-secondary);font-family:var(--font-mono);word-break:break-all;line-height:1.6}

/* ─── SUCCESS ─── */
.success-panel{text-align:center;padding:80px 24px}
.success-icon{font-size:56px;margin-bottom:20px}
.success-panel h2{font-family:var(--font-display);font-size:32px;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.success-panel p{font-size:16px;color:var(--text-secondary);max-width:auto;margin:0 0px;line-height:1.6}

/* ─── APPLY ALL BAR ─── */
.apply-all-bar{display:flex;align-items:center;gap:12px;padding:14px 20px;background:rgba(0,212,170,.04);border:1px solid rgba(0,212,170,.15);border-radius:14px;margin-bottom:14px;flex-wrap:wrap}
.aab-label{font-size:13px;color:var(--text-secondary);flex:1;min-width:160px}
.aab-label strong{color:var(--text-primary)}
.aab-controls{display:flex;align-items:center;gap:8px}
.aab-input{width:88px;padding:8px 12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-family:var(--font-mono);font-size:14px;font-weight:600;text-align:center;outline:none;transition:border-color .2s}
.aab-input:focus{border-color:rgba(0,212,170,.4)}
.aab-input::-webkit-inner-spin-button,.aab-input::-webkit-outer-spin-button{-webkit-appearance:none}
.aab-btn{padding:9px 20px;border-radius:8px;background:var(--accent);color:#06090F;font-family:var(--font-display);font-size:13px;font-weight:600;border:none;cursor:pointer;white-space:nowrap;transition:all .2s}
.aab-btn:hover{box-shadow:0 0 20px rgba(0,212,170,.3);transform:translateY(-1px)}

/* ─── NAVIGATION ─── */
.nav-buttons{display:flex;justify-content:space-between;gap:12px;padding:24px 0 0;border-top:1px solid var(--border);margin-top:32px;flex-wrap:wrap}


@media(max-width:900px){
  .cart-layout{grid-template-columns:1fr}
  .cart-item{grid-template-columns:1fr 1fr;gap:8px}
  .cart-item-name{grid-column:1/-1}
  .review-grid{grid-template-columns:1fr}
  .stepper-bar{flex-wrap:wrap;gap:4px}
  .step-line{width:30px}
  .svc-table{font-size:13px}
  .svc-table td,.svc-table th{padding:10px 12px}
  .specs-grid {display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 28px;}
}

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top: 4px solid #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}