:root{
  --primary:#16A34A; --primary-dark:#15803D; --accent:#A3E635;
  --soft:#DCFCE7; --bg:#F8FAFC; --dark:#0F172A; --muted:#64748B;
  --white:#FFFFFF; --danger:#DC2626; --danger-soft:#FEF2F2;
  --border:#E2E8F0;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--dark); line-height:1.5;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
button{font-family:inherit; cursor:pointer;}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; max-width:760px; margin:0 auto;
}
.brand{font-weight:800; font-size:18px;}
.brand span{color:var(--primary);}
.topbar a.back-link{font-size:14px; font-weight:600; color:var(--muted);}

.order-wrap{max-width:640px; margin:0 auto; padding:8px 20px 80px;}

/* Progress */
.progress{margin:20px 0 32px;}
.progress-track{display:flex; align-items:center;}
.progress-step{
  width:30px; height:30px; border-radius:50%; background:#fff; border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--muted);
  flex-shrink:0; transition:all .2s ease;
}
.progress-step.active{border-color:var(--primary); background:var(--primary); color:#fff;}
.progress-step.done{border-color:var(--primary); background:var(--soft); color:var(--primary-dark);}
.progress-line{flex:1; height:2px; background:var(--border); margin:0 4px;}
.progress-line.done{background:var(--primary);}
.progress-labels{display:flex; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--muted); font-weight:600;}
@media(max-width:480px){.progress-labels span{display:none;} .progress-labels span.current{display:block; margin:0 auto;}}

/* Card / step panel */
.step-panel{background:#fff; border:1px solid var(--border); border-radius:18px; padding:28px 24px;}
@media(max-width:480px){.step-panel{padding:22px 18px; border-radius:14px;}}
.step-title{font-size:22px; font-weight:800; letter-spacing:-.01em; margin-bottom:6px;}
.step-sub{color:var(--muted); font-size:14px; margin-bottom:24px;}

.field{margin-bottom:18px;}
.field label{display:block; font-weight:700; font-size:14px; margin-bottom:6px;}
.field .optional{font-weight:500; color:var(--muted); font-size:12px;}
.field input[type="text"],
.field input[type="tel"],
.field select,
.field textarea{
  width:100%; padding:13px 14px; border:1.5px solid var(--border); border-radius:10px;
  font-size:15px; font-family:inherit; background:#fff; color:var(--dark);
  transition:border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(22,163,74,.12);
}
.field textarea{resize:vertical; min-height:110px;}
.field .hint{font-size:12px; color:var(--muted); margin-top:5px;}
.char-counter{font-size:12px; color:var(--muted); text-align:right; margin-top:4px;}
.char-counter.over{color:var(--danger);}

.field-error{color:var(--danger); font-size:13px; font-weight:600; margin-top:6px; display:none;}
.field.has-error input, .field.has-error select, .field.has-error textarea{border-color:var(--danger); background:var(--danger-soft);}
.field.has-error .field-error{display:block;}

.radio-group, .checkbox-group{display:flex; gap:10px; flex-wrap:wrap;}
.radio-pill{
  border:1.5px solid var(--border); border-radius:10px; padding:10px 16px; font-weight:600; font-size:14px;
  cursor:pointer; background:#fff; transition:all .15s ease;
}
.radio-pill input{position:absolute; opacity:0; pointer-events:none;}
.radio-pill.selected{border-color:var(--primary); background:var(--soft); color:var(--primary-dark);}

/* Service cards (step 3) */
.service-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(max-width:420px){.service-grid{grid-template-columns:1fr;}}
.service-card{
  border:1.5px solid var(--border); border-radius:14px; padding:18px 16px; cursor:pointer;
  background:#fff; transition:all .15s ease; position:relative;
}
.service-card:hover{border-color:var(--primary);}
.service-card.selected{border-color:var(--primary); background:var(--soft); box-shadow:0 0 0 3px rgba(22,163,74,.1);}
.service-card .icon{font-size:26px; margin-bottom:8px;}
.service-card h4{font-size:15px; font-weight:700; margin-bottom:3px;}
.service-card p{font-size:12.5px; color:var(--muted);}
.service-card input{position:absolute; opacity:0; pointer-events:none;}
.service-card .check{
  position:absolute; top:12px; right:12px; width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--border); background:#fff;
}
.service-card.selected .check{background:var(--primary); border-color:var(--primary);}
.service-card.selected .check::after{content:"✓"; color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; height:100%;}

/* Package options */
.package-option{
  border:1.5px solid var(--border); border-radius:12px; padding:16px; display:flex; justify-content:space-between;
  align-items:center; cursor:pointer; margin-bottom:10px; transition:all .15s ease;
}
.package-option.selected{border-color:var(--primary); background:var(--soft);}
.package-option .name{font-weight:700; font-size:15px;}
.package-option .desc{font-size:12.5px; color:var(--muted); margin-top:2px;}
.package-option .price{font-weight:800; color:var(--primary-dark); font-size:15px; white-space:nowrap;}
.package-option input{position:absolute; opacity:0; pointer-events:none;}

/* File upload */
.upload-box{
  border:1.5px dashed var(--border); border-radius:14px; padding:26px 16px; text-align:center; cursor:pointer;
  background:#FAFBFC; transition:border-color .15s ease;
}
.upload-box:hover{border-color:var(--primary);}
.upload-box .up-icon{font-size:26px; margin-bottom:8px;}
.upload-box p{font-size:14px; font-weight:600;}
.upload-box .hint{font-size:12px; color:var(--muted); margin-top:4px;}
#fileInput{display:none;}
.file-list{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px;}
.file-thumb{position:relative; border-radius:10px; overflow:hidden; aspect-ratio:1; border:1px solid var(--border);}
.file-thumb img{width:100%; height:100%; object-fit:cover;}
.file-thumb .remove-file{
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:rgba(15,23,42,.75);
  color:#fff; border:none; font-size:13px; display:flex; align-items:center; justify-content:center;
}

/* Review */
.review-block{border-bottom:1px solid var(--border); padding:16px 0;}
.review-block:last-child{border-bottom:none;}
.review-block h4{font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:8px; font-weight:700;}
.review-row{display:flex; justify-content:space-between; gap:16px; font-size:14.5px; padding:3px 0;}
.review-row .v{font-weight:600; text-align:right;}
.review-images{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.review-images img{width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--border);}

/* Buttons / nav */
.step-actions{display:flex; gap:12px; margin-top:28px;}
.btn{
  flex:1; padding:15px 20px; border-radius:12px; border:none; font-weight:700; font-size:15.5px;
  display:flex; align-items:center; justify-content:center; gap:8px; transition:all .15s ease;
}
.btn-primary{background:var(--primary); color:#fff; box-shadow:0 6px 18px rgba(22,163,74,.28);}
.btn-primary:hover{background:var(--primary-dark);}
.btn-primary:disabled{background:#9CA3AF; box-shadow:none; cursor:not-allowed;}
.btn-secondary{background:#fff; color:var(--dark); border:1.5px solid var(--border); flex:0 0 auto; padding-left:22px; padding-right:22px;}
.btn-secondary:hover{border-color:var(--primary);}

.submit-error{
  background:var(--danger-soft); border:1px solid #FECACA; color:var(--danger); font-size:14px; font-weight:600;
  padding:12px 14px; border-radius:10px; margin-top:16px; display:none;
}
.submit-error.show{display:block;}

.spinner{width:18px; height:18px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Success page */
.success-wrap{max-width:460px; margin:60px auto; padding:0 20px; text-align:center;}
.success-icon{font-size:56px; margin-bottom:16px;}
.success-wrap h1{font-size:26px; font-weight:800; margin-bottom:10px;}
.success-wrap p{color:var(--muted); font-size:15px; margin-bottom:6px;}
.order-id-box{
  background:var(--soft); border:1.5px dashed var(--primary); border-radius:14px; padding:16px;
  font-weight:800; font-size:19px; letter-spacing:.04em; color:var(--primary-dark); margin:20px 0;
}
.success-note{font-size:14px; color:var(--muted); margin:18px 0 26px;}
.success-actions{display:flex; flex-direction:column; gap:12px;}

.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}