*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ width:100%; height:100%; background:#000; color:#FFD700; font-family:Vazirmatn,sans-serif; overflow:hidden; }

.background-pic{
  position:fixed; inset:0;
  background:#000 url('/images/pic02.webp') center/cover no-repeat;
  z-index:0;
}

.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  z-index:5;
}

.modal-content{
  width:50%; max-width:480px; height:520px; justify-content:center; max-height:80vh;
  background:rgba(255,255,255,.08); backdrop-filter:blur(16px);
  border-radius:22px; padding:22px;
  display:flex; flex-direction:column; gap:12px;
  overflow-y:auto;
  font-size: 0.85rem;
}

.modal-content input,
.modal-content textarea,
.modal-content button{
  font-size:18px;
  padding:10px;
  border-radius:10px;
}

.modal-content h3{
  font-size:24px; font-weight:600; text-align:center; margin-bottom:6px;
}

input, textarea{
  background:rgba(0,0,0,.55); color:#FFD700; text-align:right; font-family:Vazirmatn,sans-serif;
}

input::placeholder, textarea::placeholder{ color:#FFD700; opacity:.5; }

textarea{
  resize:none; flex-grow:1;
}

button{
  background:#FFD700; color:#000; font-weight:bold; cursor:pointer; text-align:center;
}

button.secondary{
  background:#ffffff30; color:#FFD700;
}

button:disabled{opacity:.6}

.step-actions{
  margin-top:auto; display:flex; flex-direction:column; gap:10px;
}
.step-actions button{ width:100%; }

.site-types, .features{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}

.site-types label, .features label{
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,.15); padding:10px 12px; border-radius:12px; cursor:pointer; font-size:16px;
  transition:.25s;
}
.site-types label:hover, .features label:hover{ background:rgba(255,255,255,.25); }

.site-types input[type="radio"], .features input[type="checkbox"]{
  transform:scale(1.2); accent-color:#FFD700;
}

.price{ color:#22c55e; font-size:18px; text-align:right; }
.deposit{ color:#facc15; font-size:16px; text-align:right; }

.status-success{ color:#22c55e; font-size:15px; text-align:right; }
.status-error{ color:#f87171; font-size:15px; text-align:right; }

#step1{
  justify-content: center;
  align-items: stretch;
}

.hidden{display:none}

@media(max-width:768px){
  .modal-content{ width:95%; height:75vh; }
  .site-types, .features{ grid-template-columns:1fr; }

  #step1{ justify-content: center; }
}