/* service-request.css
   تنسيقات صفحات "طلب خدمة" (Wizard + نموذج + مرفقات) — Scoped
   ملاحظة: كل القواعد مقيّدة على body.service-page لتجنّب أي تعارض مع بقية الصفحات.
*/

body.service-page .service-hero{
  padding: 140px 0 60px 0;
}

body.service-page .service-breadcrumbs{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.9);
  font-weight: 600;
}

body.service-page .service-breadcrumbs a{ color: rgba(255,255,255,.92); }
body.service-page .service-breadcrumbs i{ opacity: .8; }

body.service-page .service-hero-card{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(15,23,42,.12);
}

body.service-page .service-hero-card h4{
  color: #fff;
  font-weight: 800;
}

body.service-page .service-hero-list{
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

body.service-page .service-hero-list li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  color: rgba(255,255,255,.88);
}

body.service-page .service-hero-list i{
  color: color-mix(in srgb, var(--accent-color), #fff 20%);
  margin-top: 2px;
}

body.service-page .service-hero-note{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  font-size: 14px;
  line-height: 1.6;
}

/* Cards */
body.service-page .service-card{
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(15,23,42,.08);
  overflow: hidden;
}

body.service-page .service-card-head{ padding: 18px 18px 0; }
body.service-page .service-card-body{ padding: 18px; }

body.service-page .service-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  color: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
  flex: 0 0 auto;
}

body.service-page .service-icon.success{
  background: color-mix(in srgb, #16a34a, transparent 88%);
  color: #16a34a;
  border-color: color-mix(in srgb, #16a34a, transparent 70%);
}

/* Progress */
body.service-page .service-progress{ margin-top: 14px; }
body.service-page .service-progress .progress{
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--default-color), transparent 92%);
}
body.service-page .service-progress .progress-bar{
  background: var(--accent-color);
  border-radius: 999px;
}

/* Steps (pills) */
body.service-page .service-steps{
  gap: 10px;
  flex-wrap: wrap;
}
body.service-page .service-steps .nav-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  background: color-mix(in srgb, var(--default-color), transparent 96%);
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}
body.service-page .service-steps .nav-link.active{
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
  color: var(--heading-color);
}

body.service-page .service-steps .step-num{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 86%);
  font-weight: 800;
}

/* Form */
body.service-page .form-section{ padding: 14px 0; }

body.service-page .form-section-title{
  font-weight: 800;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.service-page .form-section-title i{ color: var(--accent-color); }

body.service-page .req{ color: #dc2626; font-weight: 900; }

/* Mini card blocks */
body.service-page .mini-card{
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 16px;
  padding: 14px;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
}
body.service-page .mini-card-title{ font-weight: 800; margin: 0 0 6px; }

/* Upload */
body.service-page .upload-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px){
  body.service-page .upload-grid{ grid-template-columns: 1fr 1fr; }
}
body.service-page .upload-zone{
  padding: 12px;
  border-radius: 14px;
  border: 2px dashed color-mix(in srgb, var(--default-color), transparent 78%);
  background: #fff;
}

/* Actions */
body.service-page .form-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-top: 12px;
}

/* Sidebar */
body.service-page .service-sticky{
  position: sticky;
  top: 110px;
}

body.service-page .req-list{
  display: grid;
  gap: 14px;
}
body.service-page .req-item{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  background: color-mix(in srgb, var(--default-color), transparent 97%);
}
body.service-page .req-item i{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  color: var(--accent-color);
  flex: 0 0 auto;
  margin-top: 2px;
}

/* Small screens */
@media (max-width: 576px){
  body.service-page .service-hero{ padding-top: 120px; }
}