/* ════════════════════════════════════════════════════════════════════════════
   subs.css — صفحةُ قيد مقاولي الباطن
   ────────────────────────────────────────────────────────────────────────────
   ★ التجاوبُ **بثلاث نقاطِ توقّفٍ حقيقيّة** لا بواحدة:
       • الموبايل  (≤ 600px)  — عمودٌ واحد · أزرارٌ بعرض الشاشة · حقولٌ 16px
         (أقلُّ منها يُجبر iOS على تكبير الصفحة عند التركيز فيقفز التخطيط)
       • التابلت   (601–1024) — عمودان · شبكةُ رفعٍ من عمودين
       • الكمبيوتر (≥ 1025)   — عمودان بعرضٍ مريح · شبكةُ رفعٍ من أربعة
   ★ **والأهدافُ اللمسيّةُ ≥ 44px** على الموبايل — وهدفٌ أصغرُ يُخطئه الإصبع.
   ★ **وزرُّ الإرسال ثابتٌ أسفلَ الشاشة على الموبايل** — والنموذجُ طويل،
     وزرٌّ يختفي في آخر صفحةٍ لا يُوصَل إليه إلّا بتمريرٍ طويل.
   ★ **ويُحترَم `prefers-reduced-motion`** — والحركةُ تُتعب من يتأثّر بها.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  --sb-navy:#003060; --sb-blue:#0078C0; --sb-orange:#D86000;
  --sb-ink:#0d1b2a; --sb-muted:#5b6b7c; --sb-line:#dbe4ee;
  --sb-card:#ffffff; --sb-soft:#f4f8fc;
}

.sb{
  position:relative; z-index:2;
  max-width:1080px; margin:0 auto;
  padding:calc(64px + env(safe-area-inset-top)) 18px 120px;
}

/* ★ زرُّ العودة يُنسَّق هنا — والصفحةُ لا تُحمّل careers.css، فصنفٌ منه يسقط
   في التدفّق ويدفع المحتوى لأسفل. **ولا تُستعار أصنافُ صفحةٍ أخرى.** */
.sb-back{
  position:fixed; top:calc(18px + env(safe-area-inset-top)); inset-inline-start:20px; z-index:12;
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border-radius:28px; text-decoration:none;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:13px; font-weight:700; backdrop-filter:blur(6px);
  transition:.2s;
}
.sb-back:hover{ background:rgba(255,255,255,.2); }
.sb-back svg{ width:16px; height:16px; flex-shrink:0; }
@media (max-width:600px){ .sb-back{ padding:8px 12px; font-size:12px; } }

/* ── الترويسة ── */
.sb-head{ text-align:center; margin-bottom:26px; }
.sb-logo-wrap{ margin-bottom:14px; }
.sb-logo{ width:96px; height:auto; filter:drop-shadow(0 6px 18px rgba(0,48,96,.28)); }
.sb-title{
  font-size:clamp(24px, 5.2vw, 42px); font-weight:900; line-height:1.25;
  margin:12px 0 8px; color:#fff;
}
.sb-title-accent{
  background:linear-gradient(120deg,var(--sb-orange),#ffb066);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sb-sub{
  font-size:clamp(13px, 2.4vw, 16px); line-height:1.9;
  color:rgba(255,255,255,.82); max-width:640px; margin:0 auto;
}

/* ── مؤشّر الخطوات ── */
.sb-steps{
  display:flex; gap:6px; justify-content:center; flex-wrap:wrap;
  margin:0 auto 18px; max-width:640px;
}
.sb-step{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:30px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.72); font-size:12.5px; font-weight:700;
  transition:.25s;
}
.sb-step i{
  width:22px; height:22px; border-radius:50%; font-style:normal;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.18); font-size:11.5px; font-weight:900;
}
.sb-step.on{ background:var(--sb-orange); border-color:var(--sb-orange); color:#fff; }
.sb-step.on i{ background:rgba(255,255,255,.28); }
.sb-step.done{ background:rgba(0,120,192,.9); border-color:transparent; color:#fff; }

/* ── البطاقة ── */
.sb-card{
  background:var(--sb-card); border-radius:22px;
  padding:clamp(18px, 3.4vw, 38px);
  box-shadow:0 24px 60px rgba(0,20,45,.28);
}

.sb-sec{ margin-bottom:30px; }
.sb-sec:last-of-type{ margin-bottom:16px; }
.sb-sec-t{
  display:flex; align-items:center; gap:10px;
  font-size:clamp(15px, 2.6vw, 19px); font-weight:900; color:var(--sb-navy);
  margin:0 0 6px; padding-bottom:10px; border-bottom:2px solid var(--sb-line);
}
.sb-sec-t span{
  width:28px; height:28px; border-radius:9px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--sb-navy),var(--sb-blue));
  color:#fff; font-size:13px; font-weight:900;
}
.sb-sub-t{
  font-size:14px; font-weight:800; color:var(--sb-navy);
  margin:22px 0 6px;
}
.sb-hint{ font-size:12.5px; color:var(--sb-muted); line-height:1.85; margin:8px 0 12px; }
.sb-empty{ font-size:13px; color:var(--sb-muted); padding:14px; }

/* ── الحقول ── */
.sb-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.sb-field{ display:flex; flex-direction:column; gap:6px; }
.sb-field.sb-full{ grid-column:1/-1; }
.sb-field label{ font-size:12.5px; font-weight:700; color:var(--sb-ink); }
.sb-field input, .sb-field textarea, .sb-search{
  /* ★ 16px إلزاماً: أصغرُ منها يُجبر iOS على تكبير الصفحة فيقفز التخطيط */
  font-family:inherit; font-size:16px; color:var(--sb-ink);
  padding:13px 14px; min-height:48px;
  border:1.5px solid var(--sb-line); border-radius:12px;
  background:var(--sb-soft); width:100%; box-sizing:border-box;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.sb-field textarea{ min-height:104px; resize:vertical; line-height:1.8; }
.sb-field input:focus, .sb-field textarea:focus, .sb-search:focus{
  outline:none; border-color:var(--sb-blue); background:#fff;
  box-shadow:0 0 0 4px rgba(0,120,192,.14);
}
.sb-field input:invalid.touched{ border-color:#d14343; background:#fff5f5; }

/* ── رفعُ المستندات ── */
.sb-uploads{ display:grid; grid-template-columns:1fr; gap:12px; }
.sb-up{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:18px 12px; min-height:132px; cursor:pointer; text-align:center;
  border:2px dashed var(--sb-line); border-radius:14px; background:var(--sb-soft);
  transition:.2s;
}
.sb-up:hover, .sb-up:focus-within{ border-color:var(--sb-blue); background:#fff; }
.sb-up.filled{ border-style:solid; border-color:#0F6E56; background:#f2fbf8; }
.sb-up--req::after{
  content:'★'; position:absolute; inset-inline-end:10px; top:8px;
  color:var(--sb-orange); font-size:12px; font-weight:900;
}
.sb-up-ic{ font-size:26px; line-height:1; }
.sb-up-t{ font-size:13px; font-weight:800; color:var(--sb-ink); }
.sb-up-s{ font-size:11.5px; color:var(--sb-muted); }
.sb-up.filled .sb-up-s{ color:#0F6E56; font-weight:700; }
.sb-up-prev{ display:none; max-width:100%; max-height:84px; margin-top:6px; border-radius:8px; }
.sb-up.filled .sb-up-prev{ display:block; }

/* ── الشرائح (التخصّصات والمحافظات) ── */
.sb-search-wrap{ margin-bottom:10px; }
.sb-chips{
  display:flex; flex-wrap:wrap; gap:8px;
  max-height:280px; overflow:auto;
  padding:12px; border:1.5px solid var(--sb-line); border-radius:14px; background:var(--sb-soft);
  -webkit-overflow-scrolling:touch;
}
.sb-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 15px; min-height:44px;      /* ★ هدفٌ لمسيٌّ لا يُخطئه الإصبع */
  border:1.5px solid var(--sb-line); border-radius:26px; background:#fff;
  font-size:13.5px; font-weight:700; color:var(--sb-ink);
  cursor:pointer; transition:.16s; user-select:none;
}
.sb-chip input{ width:17px; height:17px; accent-color:var(--sb-blue); flex-shrink:0; }
.sb-chip span{ display:flex; flex-direction:column; line-height:1.35; }
.sb-chip em{ font-style:normal; font-size:10.5px; color:var(--sb-muted); font-weight:600; }
.sb-chip.on{ border-color:var(--sb-blue); background:#eaf5fd; color:var(--sb-navy); }
.sb-chip--gov.on{ border-color:#0F6E56; background:#eefaf6; }
.sb-chip.hide{ display:none; }

/* ── الإرسال ── */
.sb-submit{
  position:relative; width:100%; margin-top:8px;
  padding:17px 22px; min-height:56px;
  border:none; border-radius:14px; cursor:pointer;
  background:linear-gradient(120deg,var(--sb-orange),#ff8a2b);
  color:#fff; font-family:inherit; font-size:16px; font-weight:900;
  box-shadow:0 10px 26px rgba(216,96,0,.34);
  transition:transform .16s, box-shadow .16s, filter .16s;
}
.sb-submit:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(216,96,0,.42); }
.sb-submit:disabled{ filter:grayscale(.45) opacity(.7); cursor:not-allowed; transform:none; }
.sb-spinner{
  display:inline-block; width:17px; height:17px; margin-inline-start:9px;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%;
  animation:sbSpin .7s linear infinite; vertical-align:-3px;
}
@keyframes sbSpin{ to{ transform:rotate(360deg); } }
.sb-legal{ font-size:11.5px; color:var(--sb-muted); line-height:1.85; text-align:center; margin:14px 0 0; }

/* ── الرسائل ── */
.sb-note{
  padding:14px 16px; border-radius:12px; margin-bottom:18px;
  font-size:13.5px; font-weight:700; line-height:1.8;
}
.sb-note--ok{ background:#eafaf4; color:#0F6E56; border:1.5px solid #b6e6d5; }
.sb-note--err{ background:#fdeceb; color:#a3271f; border:1.5px solid #f5c2be; }

/* ════════ التابلت ════════ */
@media (min-width:601px){
  .sb-grid{ grid-template-columns:1fr 1fr; gap:16px; }
  .sb-uploads{ grid-template-columns:1fr 1fr; }
  .sb-submit{ width:auto; min-width:280px; display:block; margin-inline:auto; }
}

/* ════════ الكمبيوتر ════════ */
@media (min-width:1025px){
  .sb{ padding-top:76px; }
  .sb-uploads{ grid-template-columns:repeat(4,1fr); }
  .sb-chips{ max-height:320px; }
  .sb-card{ padding:42px 46px; }
}

/* ════════ الموبايل: زرٌّ ثابتٌ وشريطُ خطواتٍ لاصق ════════ */
@media (max-width:600px){
  .sb{ padding-bottom:calc(104px + env(safe-area-inset-bottom)); }
  .sb-card{ border-radius:18px; }
  .sb-steps{
    position:sticky; top:calc(8px + env(safe-area-inset-top)); z-index:20;
    backdrop-filter:blur(8px); padding:6px; border-radius:34px;
    background:rgba(0,32,64,.45);
  }
  .sb-step b{ display:none; }        /* ★ الأرقامُ وحدَها — والنصُّ يكسر الشريطَ في الشاشة الضيّقة */
  .sb-step.on b{ display:inline; }   /* ★ إلّا الخطوةَ الحاليّة: يُقال أين أنت */
  .sb-step{ padding:7px 11px; }
  .sb-submit{
    position:fixed; inset-inline:12px; bottom:calc(12px + env(safe-area-inset-bottom));
    width:auto; z-index:30; margin:0;
  }
  .sb-legal{ margin-bottom:8px; }
  .sb-chips{ max-height:240px; }
}

/* ★ من يتأثّر بالحركة لا تُفرَض عليه */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .sb-submit:hover{ transform:none; }
}