/* ==========================================================================
   التقديم على الوظائف — templates/ui/pages/job_application.html
   فوق ui/css/pages/landing.css (الهيدر، الخلفية الداكنة بتوهّج الهوية، العنوان، الأزرار)
   ========================================================================== */

/* الخلفية ثابتة على حالة الهبوط النهائية (بني دافئ + أزرق) وتتحرك ببطء */
.lp--static .lp-bg--2 { opacity: 1; }

.jb {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  inline-size: min(100% - 2rem, 56rem);
  margin-inline: auto;
  padding-block: clamp(7rem, 15vh, 9rem) var(--space-16);
}

/* ---------- العنوان والخطوات ---------- */
.jb-hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.jb-hero__badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: .4rem 1rem;
  border: 1px solid rgb(249 160 56 / .45);
  border-radius: var(--radius-full);
  background: rgb(249 160 56 / .12);
  color: #ffd29a;
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
}
.jb-hero__title { font-size: clamp(1.9rem, 4.4vw, 3.4rem); }
.jb-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.jb-steps li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: .35rem .9rem .35rem .45rem;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / .06);
  color: rgb(255 255 255 / .7);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
}
.jb-steps li span { display: inline-grid; place-items: center; inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%; background: rgb(255 255 255 / .14); color: #fff; font-weight: var(--weight-bold); }
.jb-steps li.is-current { border-color: rgb(249 160 56 / .6); color: #fff; }
.jb-steps li.is-current span { background: var(--color-secondary, #F9A038); color: #1b1408; }

/* ---------- رسالة النجاح ---------- */
.jb-success {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-5, 1.25rem);
  border-radius: var(--radius-xl);
  background: rgb(31 157 85 / .16);
  border: 1px solid rgb(31 157 85 / .45);
  color: #dff7e9;
}
.jb-success__icon { display: inline-grid; place-items: center; flex: none; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--color-success); color: #fff; }
.jb-success strong { display: block; color: #fff; }
.jb-success p { margin: 2px 0 0; font-size: var(--text-sm); }

/* ---------- كرت النموذج (فاتح فوق الخلفية الداكنة) ---------- */
.jb-card {
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--color-surface, #fff);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 24px 60px -24px rgb(0 0 0 / .55);
}
.jb-card > .ui-callout { margin: var(--space-6) var(--space-6) 0; }
.jb-section { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-block-end: 1px solid var(--color-border); }
.jb-section__title { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-text); }
.jb-section__icon { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-md); background: var(--blue-50); color: var(--color-primary); }
.jb-hint { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--orange-50); color: var(--orange-800); font-size: var(--text-sm); }
.jb-hint[hidden] { display: none; }
.jb-types { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); }
.jb-types span { padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--gray-100, #ecf0f5); color: var(--color-text); font-weight: var(--weight-semibold); }

.jb-submit {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--blue-50), var(--orange-50));
}
.jb-submit__note { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.jb-submit__note svg { color: var(--color-primary); }
.jb-submit__btn { background: var(--color-secondary, #F9A038); border-color: var(--color-secondary, #F9A038); color: #1b1408; }
.jb-submit__btn:hover { background: var(--color-secondary-hover); border-color: var(--color-secondary-hover); color: #1b1408; }

/* ---------- مميزات العمل (زجاج فوق الخلفية) ---------- */
.jb-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-4); }
.jb-perk {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5, 1.25rem);
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: var(--radius-xl);
  background: rgb(255 255 255 / .07);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: rgb(255 255 255 / .72);
  font-size: var(--text-sm);
}
.jb-perk strong { color: #fff; font-size: var(--text-base); }
.jb-perk__icon { display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-md); background: rgb(249 160 56 / .18); color: #ffd29a; }

@media (max-width: 575.98px) {
  .jb-section, .jb-submit { padding: var(--space-4); }
  .jb-card > .ui-callout { margin: var(--space-4) var(--space-4) 0; }
  .jb-submit__btn { inline-size: 100%; justify-content: center; }
}