/* assets/css/order.css */
/* Order / Requirement Form – page-only CSS */

.order-page{
  padding: 10px 0 5px; /* space for sticky navbar */
  background:
    radial-gradient(1200px 600px at 10% 5%, rgba(13,110,253,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(25,135,84,.14), transparent 55%),
    radial-gradient(1000px 700px at 50% 100%, rgba(111,66,193,.10), transparent 60%),
    #f6f8fb;
  min-height: 80vh;
}

.order-wrap .page-hero{
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(13,110,253,.12), rgba(25,135,84,.10));
  border: 1px solid rgba(0,0,0,.05);
}

.order-wrap .card-soft{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
}

.order-wrap .section-title{
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .2px;
}

.order-wrap .section-sub{
  color: #6c757d;
  font-size: .92rem;
}

.order-wrap .form-control,
.order-wrap .form-select{
  border-radius: 12px;
}

.order-wrap .btn-lg{
  border-radius: 14px;
}

.order-wrap .chip{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  padding: .45rem .75rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(6px);
}

.order-wrap .service-card{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: .65rem .75rem;
  background: rgba(255,255,255,.85);
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
  cursor: pointer;
}

.order-wrap .service-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  border-color: rgba(13,110,253,.25);
}

.order-wrap .service-card input{
  transform: scale(1.08);
}

.order-wrap .sticky-submit{
  position: sticky;
  bottom: 12px;
  z-index: 9;
  background: rgba(246,248,251,.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 12px;
}

.order-wrap .help-badge{
  font-size: .82rem;
  color: #6c757d;
}

.order-wrap .required-star{
  color: #dc3545;
}

/* Make sure layout_top/navbar looks nice with bootstrap page */
@media (max-width: 768px){
  .order-page{ padding-top: 120px; }
}